html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Verdana, sans-serif;
    font-size: 14px;
    height: 100%;
}

#overviewLayout {
    display: grid;
    grid-template-areas:
        "navbar navbar navbar"
        "toolbar resizer detailsPanel"
        "listOfLoans resizer detailsPanel"
        "notifications resizer detailsPanel";
    grid-template-columns: 1fr 8px 350px;
    grid-template-rows: auto auto 1fr auto;
    height: 100%;
}

#toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(#fbfbfb, #eaeaea);
    border-bottom: 1px solid #c0c0c0;
}

    #toolbar .toolbarLabel {
        margin: 0 2px 0 4px;
        color: #333;
    }

    /* Vertical separator between toolbar groups, like the desktop ToolBar separators. */
    #toolbar .toolbarSep {
        width: 1px;
        align-self: stretch;
        margin: 2px 6px;
        background: #c0c0c0;
    }

    #toolbar button {
        padding: 1px 10px;
        color: #000;
        background: linear-gradient(#fdfdfd, #e9e9e9);
        border: 1px solid #adadad;
        border-radius: 3px;
        cursor: pointer;
    }

        #toolbar button:hover {
            background: linear-gradient(#eaf3fb, #d6e9f8);
            border-color: #7bb0e0;
        }

    /* Show: Loans/Applications/Closed toggles -- light gray when off, light blue when on.
       Scoped under #toolbar so they beat the #toolbar button gradient above. */
    #toolbar .toggleBtn {
        color: #000;
        background: #e4e4e4;
        margin-left: 0; margin-right: 0;
    }

        #toolbar .toggleBtn:hover {
            background: #d6d6d6;
        }

        #toolbar .toggleBtn.active {
            background: #cfe6fb;
            border-color: #5b9bd5;
        }

            #toolbar .toggleBtn.active:hover {
                background: #bcdcf7;
            }

#listOfLoans {
    /* No top padding so the sticky header sits flush against the scroll top (otherwise rows
       would scroll into the padding gap above it). */
    padding: 0 10px 10px 10px;
    overflow-x: auto;
    overflow-y: auto;
}

#detailsPanel {
    text-align: center;
    grid-area: detailsPanel;
    height: 100%;
    width: 100%;
    display: flex;
}

/* Loan-row highlight by lateness, matching the desktop LoanListItem LatenessValue colors
   (0 = no highlight).  A selected row's blue overrides these. */
tr.late1 { background-color: #b0ffa2; }
tr.late2 { background-color: #f8ff96; }
tr.late3 { background-color: #ffe6a5; }
tr.late4 { background-color: #ffc6a3; }
tr.late5 { background-color: #ffa291; }
tr.late6 { background-color: #ff6d7c; }

/* When the user turns off "Highlight due and late loans" (File > Moneylender Settings),
   suppress the lateness row colors -- a selected row's blue still wins. */
#listOfLoans.noHighlight tr.late1,
#listOfLoans.noHighlight tr.late2,
#listOfLoans.noHighlight tr.late3,
#listOfLoans.noHighlight tr.late4,
#listOfLoans.noHighlight tr.late5,
#listOfLoans.noHighlight tr.late6 { background-color: transparent; }

tr[sel=true] {
    background-color: #99ddff !important;
}

/* Loan list grid lines -- light gray, matching the desktop LoanListItem separators
   (vertical 1px LightGray between columns + a LightGray bottom border per row). */
#listOfLoans table { border-collapse: collapse; }
#listOfLoans table td,
#listOfLoans table th {
    border-right: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
}

/* Keep the column headers visible while only the loan rows scroll.  The header cells are
   sticky to the top of the #listOfLoans scroll container; they need an opaque background so
   rows don't show through, and box-shadow gridlines because collapsed-table borders don't
   travel with sticky cells. */
#loanListHeader td {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eee;
    box-shadow: inset -1px 0 0 #d3d3d3, inset 0 -1px 0 #d3d3d3;
}

/* The alert ("!" triangle) + status icon columns that lead each loan row, reproducing
   the desktop's notification triangle and OK / DUE / LATE / 30 / 60 / 90 / SVR / APP /
   CLOSED status glyphs. */
#listOfLoans td.iconcell { text-align: center; padding: 0 3px; white-space: nowrap; }
#listOfLoans td.alertcell { cursor: pointer; }
#listOfLoans td.statuscell { width: 30px; }
#loanListHeader td.iconhdr { width: 22px; cursor: default; }
.alertTri { vertical-align: middle; display: inline-block; }
.statusIcon { width: 24px; height: 24px; vertical-align: middle; }

h3 {
    text-align: left;
}

/* Navbar container */
.navbar {
    overflow: hidden;
    background-color: #008000;
    font-family: Arial;
    grid-area: navbar;
}

    /* Links inside the navbar */
    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 4px 16px;
        text-decoration: none;
    }

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

    /* Dropdown button */
    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 4px 16px;
        background-color: inherit;
        font-family: inherit; /* Important for vertical align on mobile phones */
        margin: 0; /* Important for vertical align on mobile phones */
    }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: green;
    }

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* Above the sticky loan-list header (z-index 2) so menu items over the table stay clickable. */
    z-index: 100;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        /* Add a grey background color to dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #ddd;
        }

        /* Loan-menu items that don't apply to the selected loan's state: greyed and inert
           (pointer-events:none also blocks the hover highlight and the click). */
        .dropdown-content a.menu-disabled {
            color: #b0b0b0;
            pointer-events: none;
            cursor: default;
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* When a menu is taller than the window (e.g. Servicing / Reports with many templates or reports),
   cap it to the viewport height below the navbar and scroll, so nothing is orphaned below the bottom
   of the window.  Excluded for menus that contain a horizontal pop-out submenu (the Loan menu's
   "New Loan…"): turning on overflow-y forces overflow-x to clip, which would cut off the pop-out. */
.dropdown-content:not(:has(.submenu)) {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

/* Pop-out submenu inside a dropdown (e.g. Loan > New Loan…), mirroring the desktop's
   nested new-loan wizard menu.  The submenu wrapper is kept position:static so the
   pop-out panel's containing block is the (positioned, non-clipped) .dropdown-content
   rather than a descendant of the .dropdown that has overflow:hidden -- otherwise the
   parent's overflow would clip the pop-out. */
.submenu {
    position: static;
}
    /* The "New Loan…" row looks like any other dropdown item. */
    .submenu-label {
        cursor: pointer;
        position: relative;
    }
    .submenu-arrow {
        position: absolute;
        right: 12px;
    }
.submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* Above its parent dropdown menu (and the sticky list header). */
    z-index: 101;
}
    .submenu-content a {
        white-space: nowrap;
    }
/* Reveal the pop-out while hovering the submenu row or the pop-out itself. */
.submenu:hover .submenu-content {
    display: block;
}

/* overlay window classes */
.popwindow {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
}

.popbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.70;
    background-color: black;
    z-index: 5;
}

.popframe {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
}

.popcontent {
    background-color: white;
    border: 1px solid black;
    padding: 8px;
    box-sizing: border-box;
    /* Never let a dialog grow past the viewport: the .popframe centers it, so an over-tall or
       over-wide popup would otherwise spill equally off all sides and the overflow (top edge,
       far side) would be unreachable.  Cap to the window (less a small margin) and scroll the
       contents instead. */
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    overflow: auto;
}

#listOfLoans {
    grid-area: listOfLoans;
}


/* Reminder notifications panel at the bottom of the loan list (mirrors the desktop bottom
   notices panel): bordered, scrolls, hidden when empty. */
#notifications {
    grid-area: notifications;
    max-height: 100px;
    overflow-y: auto;
    border-top: 1px solid #000;
    background: #fffbe6;
    font-size: 11px;
}

    #notifications .noteRow {
        padding: 2px 8px;
        white-space: nowrap;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }

        #notifications .noteRow:hover {
            background: #fff2b0;
        }

.itemList{
    margin: 5px 0px;
    clear: both;
    text-align: left;
    font-size: 14px;
    font-family: Verdana, sans-serif;
    /* Rows are click/ctrl/shift selectable, so suppress the browser's text-highlight on shift-click. */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.itemList div {
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
}
.itemSelected {
    background-color: #99ddff;
}

/* Payments / Expenses detail tabs: pin the toolbar + heading and scroll only the record list, so the
   New/Edit/Delete buttons stay visible even when the list runs long (e.g. editing a very old payment).
   The two tabs fill the (already height-bounded) #detailsContent; the inner .scrollTab is the flex
   column so we don't fight the inline display jQuery .show()/.hide() puts on the tab itself. */
#tabPayment, #tabsExpenses { height: 100%; }
.scrollTab { display: flex; flex-direction: column; height: 100%; }
.scrollTabHeader { flex: 0 0 auto; }
.scrollTabList { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Active drop target while dragging files/rows on the Attachments tab. */
.attachDropTarget {
    outline: 2px dashed #117908;
    outline-offset: -2px;
    background-color: #e8f7e8;
}

.controlButton {
    width: 32px;
    height: 32px;
    background-position-x: 0px;
    background-size: auto 100%;

    border: none;
    padding: 0;
    margin: 0 1px;
    font: inherit; /* Inherit font styles from parent */
    color: inherit; /* Inherit color from parent */
    cursor: pointer; /* Maintain cursor as pointer for interactivity */

    /* Apply div-like styles */
    display: inline-block; /* Or inline-block, depending on desired layout */
}

    .controlButton:hover {
        background-position-x: -32px;
    }
    .controlButton:disabled {
        background-position-x: -64px;
        cursor: default;
    }

.reportButton {
    width: 80px;
    height: 87px;
    background-position-x: 0px;
    background-size: auto 100%;
    border: none;
    padding: 0;
    margin: 0 1px;
    font: inherit; /* Inherit font styles from parent */
    color: inherit; /* Inherit color from parent */
    cursor: pointer; /* Maintain cursor as pointer for interactivity */
    /* Apply div-like styles */
    display: inline-block; /* Or inline-block, depending on desired layout */
}

    .reportButton:hover {
        background-position-x: -80.3px;
    }

    .reportButton:disabled {
        background-position-x: -160.6px;
        cursor: default;
    }

.iconButton {
    width: 32px;
    height: 32px;
    background-position-x: 0px;
    background-size: auto 100%;
    border: none;
    padding: 0;
    margin: 0 1px;
    font: inherit; /* Inherit font styles from parent */
    color: inherit; /* Inherit color from parent */
    cursor: pointer; /* Maintain cursor as pointer for interactivity */
    /* Apply div-like styles */
    display: inline-block; /* Or inline-block, depending on desired layout */
}
.helpButton {
    background-image: url("/images/HelpButton.png");
}

/* Reusable manage/toolbar buttons cloned from the desktop MoneylenderInterface/Controls/ManageButtons
   control.  Each is a 32x32 image button; the three states (normal / mouseover / disabled) are the
   matching SVGs in /images/controlbuttons (generated to match Mlp3Theme.xaml exactly).  Swapped via
   native :hover / :disabled like the .controlButton sprite convention, so no per-page JS is needed.
   Inside the green template-designer toolbar, also add the iconButton class so the toolbar's own
   button gradient (button:not(.iconButton)) is skipped and only the image shows. */
.cbtn {
    width: 32px; height: 32px; border: none; padding: 0; margin: 0 2px 0 0;
    background-color: transparent; background-repeat: no-repeat;
    background-position: center; background-size: 32px 32px;
    cursor: pointer; display: inline-block; vertical-align: middle;
}
.cbtn:disabled { cursor: default; background-color: transparent; }
.cbtn-new { background-image: url("/images/controlbuttons/new_norm.svg"); }
.cbtn-new:hover:not(:disabled) { background-image: url("/images/controlbuttons/new_mouseover.svg"); }
.cbtn-new:disabled { background-image: url("/images/controlbuttons/new_disabled.svg"); }
.cbtn-edit { background-image: url("/images/controlbuttons/edit_norm.svg"); }
.cbtn-edit:hover:not(:disabled) { background-image: url("/images/controlbuttons/edit_mouseover.svg"); }
.cbtn-edit:disabled { background-image: url("/images/controlbuttons/edit_disabled.svg"); }
.cbtn-delete { background-image: url("/images/controlbuttons/delete_norm.svg"); }
.cbtn-delete:hover:not(:disabled) { background-image: url("/images/controlbuttons/delete_mouseover.svg"); }
.cbtn-delete:disabled { background-image: url("/images/controlbuttons/delete_disabled.svg"); }
.cbtn-primary { background-image: url("/images/controlbuttons/primary_norm.svg"); }
.cbtn-primary:hover:not(:disabled) { background-image: url("/images/controlbuttons/primary_mouseover.svg"); }
.cbtn-primary:disabled { background-image: url("/images/controlbuttons/primary_disabled.svg"); }
.cbtn-design { background-image: url("/images/controlbuttons/design_norm.svg"); }
.cbtn-design:hover:not(:disabled) { background-image: url("/images/controlbuttons/design_mouseover.svg"); }
.cbtn-design:disabled { background-image: url("/images/controlbuttons/design_disabled.svg"); }
.cbtn-copy { background-image: url("/images/controlbuttons/copy_norm.svg"); }
.cbtn-copy:hover:not(:disabled) { background-image: url("/images/controlbuttons/copy_mouseover.svg"); }
.cbtn-copy:disabled { background-image: url("/images/controlbuttons/copy_disabled.svg"); }
.cbtn-menu { background-image: url("/images/controlbuttons/menu_norm.svg"); }
.cbtn-menu:hover:not(:disabled) { background-image: url("/images/controlbuttons/menu_mouseover.svg"); }
.cbtn-menu:disabled { background-image: url("/images/controlbuttons/menu_disabled.svg"); }
.cbtn-print { background-image: url("/images/controlbuttons/print_norm.svg"); }
.cbtn-print:hover:not(:disabled) { background-image: url("/images/controlbuttons/print_mouseover.svg"); }
.cbtn-print:disabled { background-image: url("/images/controlbuttons/print_disabled.svg"); }
.cbtn-import { background-image: url("/images/controlbuttons/import_norm.svg"); }
.cbtn-import:hover:not(:disabled) { background-image: url("/images/controlbuttons/import_mouseover.svg"); }
.cbtn-import:disabled { background-image: url("/images/controlbuttons/import_disabled.svg"); }
.cbtn-export { background-image: url("/images/controlbuttons/export_norm.svg"); }
.cbtn-export:hover:not(:disabled) { background-image: url("/images/controlbuttons/export_mouseover.svg"); }
.cbtn-export:disabled { background-image: url("/images/controlbuttons/export_disabled.svg"); }
.cbtn-up { background-image: url("/images/controlbuttons/up_norm.svg"); }
.cbtn-up:hover:not(:disabled) { background-image: url("/images/controlbuttons/up_mouseover.svg"); }
.cbtn-up:disabled { background-image: url("/images/controlbuttons/up_disabled.svg"); }
.cbtn-down { background-image: url("/images/controlbuttons/down_norm.svg"); }
.cbtn-down:hover:not(:disabled) { background-image: url("/images/controlbuttons/down_mouseover.svg"); }
.cbtn-down:disabled { background-image: url("/images/controlbuttons/down_disabled.svg"); }
.cbtn-revert { background-image: url("/images/controlbuttons/revert_norm.svg"); }
.cbtn-revert:hover:not(:disabled) { background-image: url("/images/controlbuttons/revert_mouseover.svg"); }
.cbtn-revert:disabled { background-image: url("/images/controlbuttons/revert_disabled.svg"); }
.cbtn-folder { background-image: url("/images/controlbuttons/folder_norm.svg"); }
.cbtn-folder:hover:not(:disabled) { background-image: url("/images/controlbuttons/folder_mouseover.svg"); }
.cbtn-folder:disabled { background-image: url("/images/controlbuttons/folder_disabled.svg"); }
.cbtn-split { background-image: url("/images/controlbuttons/split_norm.svg"); }
.cbtn-split:hover:not(:disabled) { background-image: url("/images/controlbuttons/split_mouseover.svg"); }
.cbtn-split:disabled { background-image: url("/images/controlbuttons/split_disabled.svg"); }
.cbtn-autopay { background-image: url("/images/controlbuttons/autopay_norm.svg"); }
.cbtn-autopay:hover:not(:disabled) { background-image: url("/images/controlbuttons/autopay_mouseover.svg"); }
.cbtn-autopay:disabled { background-image: url("/images/controlbuttons/autopay_disabled.svg"); }

.firstCol {
    text-align: right;
    vertical-align: middle;
}
input, select, textarea {
    padding: 4px;
    border-width: 2px;
    border-style: solid;
    border-color: #8f8f8f;
    border-radius: 5px;
    margin: 2px;
}
input:disabled{
    background-color: #ccc;
}
.moneyBox {
    width: 160px;
}
.dateBox {
    width: 140px;
}
.rateBox {
    width: 140px;
}
.normalTextBox {
    width: 200px;
}
.shortTextBox {
    width: 120px;
}
.integerBox {
    width: 100px;
}
button {
    color: white;
    font-weight: bold;
    border: 2px solid #202020;
    border-radius: 5px;
    background-color: #117908;
    padding: 3px 16px;
    margin: 3px 4px;
    cursor: pointer;
}
    button:disabled {
        background-color: #999999;
        border-color: #666666;
        cursor: default;
    }
#detailsPanelContainer {
    display: grid;
    grid-template-areas: 'basics' 'tabs' 'details';
    grid-template-rows: auto auto 1fr;
    margin: 10px;
    width: 100%;
}
#detailsBasics {
    grid-area: basics;
}
.detailsInfo {
    font-size: 18px;
    font-weight: bold;
    text-align: right;
}
.detailsLabel {
    font-size: 12px;
    vertical-align: middle;
}
#detailsTabs {
    grid-area: tabs;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
    #detailsTabs a {
        display: inline-block;
        border-top-left-radius: 10px;
        border-top-right-radius: 15px;
        border-bottom: 8px solid #d1d3d4;
        font-size: 14px;
        font-weight: bold;
        background-color: #333333;
        color: white;
        padding: 3px 16px;
        margin: 0 1px 1px 0;
        text-decoration: none;
        list-style: none;
        cursor: pointer;
    }
.tabSelected {
    background-color: #0f3400 !important;
    border-bottom: 8px solid #005090 !important;
}

#detailsContent {
    grid-area: details;
    height: 100%;
    overflow-y: auto;
}

#detailsResizer {
    width: 8px;
    cursor: ew-resize;
    background-color: #008000;
    grid-area: resizer;
}

.tdr {
    text-align: right;
}
.tdc {
    text-align: center;
}
.tdm {
    vertical-align: middle;
}

/* Rich select: a div-based combo widget with a concise button label and a custom dropdown
   where every option shows a bold title and a small description.  See initRichSelects() in
   MoneylenderOnline.js for the expected markup. */
.richSelect {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 4px;
}
.richSelectButton {
    /* Override the global green button look — these are inline form controls, not actions. */
    background: white;
    color: black;
    font-weight: normal;
    border: 2px solid #8f8f8f;
    border-radius: 5px;
    padding: 4px 28px 4px 10px;
    margin: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    min-height: 26px;
    position: relative;
}
.richSelectButton::after {
    content: "\25BE";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 12px;
}
.richSelect.rs-open > .richSelectButton { border-color: #4a90d9; }
.richSelectMenu {
    display: none;   /* Hidden by default; the rs-open class on .richSelect reveals it. */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: white;
    border: 1px solid #888;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    max-height: 360px;
    overflow-y: auto;
    min-width: 100%;
    max-width: 420px;
    padding: 2px 0;
}
.richSelect.rs-open > .richSelectMenu { display: block; }
.richSelectItem {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.richSelectItem:last-child { border-bottom: none; }
.richSelectItem:hover { background: #e0eaff; }
.richSelectTitle { font-weight: bold; color: #000; }
.richSelectDesc { font-size: 11px; color: #444; margin-top: 2px; white-space: normal; line-height: 1.3; }

/* Certain elements of a page should be hidden when the user prints the page. Report paramenters, for example. */
.no-print {
}
.no-print-margin {
    margin: 0 44px;
}

@media print {
    .no-print {
        display: none !important;
    }
    .no-print-margin {
        margin: 0;
    }
}


/* Recent-portfolios list on the login page (Home/Index).  The list is populated from the
   mlo_recent cookie; each entry prefills the form when clicked and can be forgotten with X. */
#recentPortfolios {
    margin-top: 16px;
}

#recentList {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

    #recentList .recentItem {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 2px 0;
    }

    #recentList .recentLabel {
        color: #1a5fb4;
        text-decoration: none;
    }

        #recentList .recentLabel:hover {
            text-decoration: underline;
        }

    #recentList .recentForget {
        line-height: 1;
        padding: 1px 5px;
        color: #a00;
        background: #f0f0f0;
        border: 1px solid #c0c0c0;
        border-radius: 3px;
        cursor: pointer;
    }

        #recentList .recentForget:hover {
            background: #f8d7d7;
            border-color: #c08080;
        }

/* Login page (Home/Index) layout: centered column with the form and the recent-portfolios
   list each in their own rounded card, and the core version pinned to the bottom. */
.loginPage {
    max-width: 520px;
    margin: 0 auto;
    padding: 24px 16px 72px;   /* bottom padding clears the fixed version footer */
    text-align: center;
}

.loginCard,
.recentCard {
    display: inline-block;
    text-align: left;
    background: #eef3f9;        /* slightly different from the page background */
    border: 1px solid #c8d2de;
    border-radius: 10px;
    margin: 8px auto 0;
}

.loginCard {
    padding: 14px 22px 18px;
}

    .loginCard table {
        margin: 0;
    }

    .loginCard button {
        margin-top: 12px;
    }

.recentCard {
    padding: 4px 22px 14px;
    margin-top: 18px;
}

    .recentCard h3 {
        margin-bottom: 2px;
    }

.loginMessage {
    margin: 12px 0 0;
}

.versionFooter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #666;
    padding: 8px 0;
}