/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    /* break-all splits English words mid-word too; anywhere only breaks when it has to. */
    overflow-wrap: anywhere;
}

/* No web font is loaded on purpose. The previous stack named graphik / graphik-regular /
   Open Sans / Noto Sans TC, but nothing here ever declared or fetched any of them, so every
   page silently fell through to the browser's generic sans-serif. Rather than ship font
   files for an internal tool, ask for the faces the OS already has.

   The browser resolves this list per character, not per element, which is what makes it work
   for the mixed 中/英 text this app is full of: Latin is taken by Segoe UI / SF, and Chinese
   falls through them to PingFang TC (macOS) or Microsoft JhengHei (Windows Vista onwards).
   Keep the Latin faces ahead of the CJK ones for that reason - a CJK font first would hand it
   Latin glyphs too, which look wrong next to the rest of the UI. */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                 "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
    font-size: 0.9375rem;   /* 15px - CJK needs more px than Latin for the same legibility */
}

/* Dates, employee numbers and form numbers all sit in columns, so digits get a fixed
   advance width and line up down the column. No effect on anything but digits. */
table {
    font-variant-numeric: tabular-nums;
}


/* Sticky footer styles
-------------------------------------------------- */
/* One root size at every width. It used to be 14px below 768px, which the body's 0.9em then
   took down to 12.6px - too small to read comfortably in Chinese. Component sizes are in rem
   (off this root), so this is the single place that scales the app. */
html {
    font-size: 16px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
}


/*custome styles*/
/* rem, not em: as an em this compounded on whatever it sat inside and landed near 10px. */
.smaller-font {
    font-size: 0.8125rem   /* 13px - the smallest size used anywhere in the UI */
}

.inline_row_select_sent_toggle {
}

/* Busy indicator
--------------------------------------------------
   Bootstrap 4.1.3 is what this app loads and it has no .spinner-border (added in 4.2),
   so the spinner is defined here. Used by showBusyOverlay()/hideBusyOverlay() in site.js
   for the long server round trips (PDF generation) that would otherwise look like nothing
   happened. */
@keyframes busy-spin {
    to {
        transform: rotate(360deg);
    }
}

.busy-spinner {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border: 0.25rem solid rgba(0, 123, 255, .25);
    border-top-color: #007bff;
    border-radius: 50%;
    animation: busy-spin .8s linear infinite;
}

/* Sits inside a button, next to its label */
.busy-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
    vertical-align: text-bottom;
    margin-right: .35rem;
}

.busy-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background-color: rgba(255, 255, 255, .65);
}

.busy-overlay-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 1.25rem 1.75rem;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: .25rem;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
}

.busy-overlay-text {
    margin-top: .75rem;
    color: #6c757d;
    white-space: nowrap;
}

/* Mouse pointer shows the page is working. Needs to beat the pointer/default cursors
   Bootstrap sets on buttons and links, hence !important. */
body.app-busy, body.app-busy * {
    cursor: progress !important;
}

#id_beta {
    font-family: "Merienda", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: red;
    margin-left: -3rem;
    margin-top: 2em;
}
/* Rendered help documents - the help modal (_HelpModalPartial) and the ManageHelp preview.

   Markdig emits plain HTML: a bare <table> gets none of Bootstrap's styling, which only
   applies to .table, and adding classes to the generated markup would mean allowing class
   attributes through the sanitizer. Styling the container's descendants instead keeps the
   sanitizer's default (and safer) allow-list. */
.help-content {
    max-height: 70vh;
    overflow-y: auto;
    word-wrap: break-word;
}

    .help-content h1, .help-content h2, .help-content h3, .help-content h4 {
        margin-top: 1rem;
        margin-bottom: .5rem;
    }

    /* The document's own first heading repeats the modal title; no gap above it. */
    .help-content > :first-child {
        margin-top: 0;
    }

    .help-content h1 {
        font-size: 1.5rem;
    }

    .help-content h2 {
        font-size: 1.25rem;
    }

    .help-content h3, .help-content h4 {
        font-size: 1.1rem;
    }

    .help-content table {
        width: 100%;
        margin-bottom: 1rem;
        border-collapse: collapse;
    }

    .help-content th, .help-content td {
        border: 1px solid #dee2e6;
        padding: .4rem .5rem;
        vertical-align: top;
    }

    .help-content th {
        background-color: #f8f9fa;
    }

    .help-content img {
        max-width: 100%;
        height: auto;
        border: 1px solid #e9ecef;
        border-radius: .25rem;
    }

    .help-content pre {
        padding: .5rem .75rem;
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: .25rem;
        white-space: pre-wrap;
    }

    .help-content blockquote {
        margin-left: 0;
        padding-left: .75rem;
        border-left: 3px solid #dee2e6;
        color: #6c757d;
    }

/* The navbar help "?" (_HelpLinkPartial), rendered by _LoginPartial next to the signed-in user.

   The <svg> sets no fill of its own, so fill:currentColor makes it inherit the link colour -
   including Bootstrap's .text-dark, which is !important and would win over any colour set
   here. That is why the muted look and the hover cue are done with opacity rather than
   colour. */
#id_link_help .nav-link {
    display: flex;
    align-items: center;
}

.help-icon {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
    opacity: .6;
    margin-top: 5px;
    margin-right: 2px;
}

#id_link_help .nav-link:hover .help-icon,
#id_link_help .nav-link:focus .help-icon {
    opacity: 1;
}