/* Bootstrap 3's .hidden, which the markup uses and Bootstrap 4 does not define */
.hidden {
    display: none !important;
}

/* The Sing theme keeps Bootstrap 3's .fade:not(.in){opacity:0}; Bootstrap 4's script marks a shown modal or tab .show */
.fade.show:not(.modal-backdrop) {
    opacity: 1;
}

/* Stored email HTML (shown in the dashboard message viewers) names fonts such as 'Proxima Nova' that the app does not
   load; show it in the app font, except code blocks, which keep their monospace font. */
.email-message-holder,
.email-message-holder *:not(code):not(pre) {
    font-family: Montserrat, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Historical emails wrap their content in fixed-width (800px) containers; fit them to the modal. */
.email-message-holder * {
    max-width: 100% !important;
    box-sizing: border-box;
}
.email-message-holder img {
    height: auto !important;
}

/* An email in the current layout (Email/Templates/_EmailLayout.cshtml: a navy band with the white logo, the text, a
   footer): the sanitizer keeps its colours but drops its padding, which is given back here */
.email-message-holder table {
    width: 100% !important;
}

.email-message-holder td:has(> img[src$="/JuraLogo-White.png"]) {
    padding: 20px;
    border-radius: 6px 6px 0 0;
}

.email-message-holder td > img[src$="/JuraLogo-White.png"] {
    display: block;
    margin: 0 auto;
}

.email-message-holder tr:has(> td > img[src$="/JuraLogo-White.png"]) + tr > td {
    padding: 24px 4px 8px;
}

.email-message-holder table + table td {
    padding: 12px;
}

/* The Jura logo heading every email: drawn as the email layout sizes it (Email/Templates/_EmailLayout.cshtml, 30% wide
   and centred), since the viewer's sanitizer drops the email's own width and margins (RichText) and older emails' logos
   are pointed at the current one (StoredEmailDisplay) */
.email-message-holder img[src$="/Jura_Logo_Blue.png"] {
    display: block;
    width: 30%;
    margin: 0 auto 5%;
}

/* Standards page (Views/Standards/Index.cshtml): long standard texts wrap, and a stored table too wide for the
   window scrolls sideways rather than being cut off */
.standards-body {
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.standards-page .checkbox .input-helper,
.standards-page .checkbox-inline .input-helper {
    margin-right: 8px;
}

.standards-body table {
    width: 100%;
    margin-bottom: 15px;
    border-collapse: collapse;
}

/* In a table a cell breaks only a word too long for it: "anywhere" would let a column shrink below its words, and a
   numbering column ("1.1(1)") break inside its number */
.standards-body table td,
.standards-body table th {
    padding: 8px 12px;
    border: 1px solid #ddd;
    vertical-align: top;
    overflow-wrap: break-word;
}

.standards-body table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.standards-body table tr:nth-child(even) {
    background-color: #fafafa;
}

/* Standards page and its modals, which ui-bootstrap appends outside the page container */
.add-icon {
    font-size: 18px;
    font-weight: bold;
    margin-right: 5px;
}

/* The notice shown when the session has ended (juraShowSessionEnded in functions.js); above the loading overlay */
#jura-session-ended {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    margin: 0;
    border-radius: 0;
    text-align: center;
}

/* Every error text on both layouts: server-rendered and jquery-validation messages, the fields juraShowFieldErrors
   (functions.js) marks, text-danger notes and the required-field marks (*). The themes' reds (#f55d5d, #f44336,
   with !important) fail contrast on white; this one is 5.6:1. */
.text-danger,
.field-validation-error,
.jura-field-error,
.jura-required {
    color: #c62828 !important;
}

/* Alerts and notify() toasts on both layouts. The themes' fills fail contrast (white on #f55d5d, #3abf94, #9964e3 or
   #ffc247; #f44336 on #f2dede); white on each fill here is at least 5.2:1 (#1e7b5a 5.2, #c62828 5.6, #7b4bc4 5.8,
   #8a5a00 5.9). */
.alert-danger,
.growl-animated.alert-danger {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}

.alert-success,
.growl-animated.alert-success {
    background: #1e7b5a;
    border-color: #1e7b5a;
    color: #fff;
}

.alert-warning,
.growl-animated.alert-warning {
    background: #8a5a00;
    border-color: #8a5a00;
    color: #fff;
}

.alert-info,
.growl-animated.alert-info {
    background: #7b4bc4;
    border-color: #7b4bc4;
    color: #fff;
}

    .alert-danger a:not(.btn), .alert-success a:not(.btn), .alert-warning a:not(.btn), .alert-info a:not(.btn),
    .alert-danger .close, .alert-success .close, .alert-warning .close, .alert-info .close {
        color: #fff;
        opacity: 1;
        text-shadow: none;
    }

    /* The theme's buttons in an alert: its fill as text on white */
    .alert-danger .btn:not(.btn-default) {
        background: #fff;
        color: #c62828;
    }

    .alert-success .btn:not(.btn-default) {
        background: #fff;
        color: #1e7b5a;
    }

    .alert-warning .btn:not(.btn-default) {
        background: #fff;
        color: #8a5a00;
    }

    .alert-info .btn:not(.btn-default) {
        background: #fff;
        color: #7b4bc4;
    }

/* Self-study chapter links (_SelfStudyNavigation): only the chapter on show is underlined */
.self-study-chapter {
    text-decoration: none;
}

    .self-study-chapter[aria-current] {
        text-decoration: underline;
    }

/* The chapter list is one line, its chapters separated by a slash screen readers do not read */
.self-study-chapters {
    list-style: none;
    padding: 0;
}

    .self-study-chapters li {
        display: inline;
    }

        .self-study-chapters li + li::before {
            content: " / ";
            content: " / " / "";
        }

/* The chapters a refused review submit lists (#review-errors, SelfStudyReview.js); empty until then */
.review-errors {
    margin: 10px 0;
    padding: 10px 15px;
    border: 2px solid #c62828;
}

    .review-errors:empty {
        display: none;
    }

/* The main layout's menu toggles (#nav-state-toggle, #nav-collapse-toggle, the account menu) are buttons drawn as the theme's nav links */
.page-controls button.nav-link {
    background: none;
    border: 0;
}

/* The sidebar's menu toggles (MenuToggle in _Layout) are buttons drawn as the theme's sidebar links. app.min.css gives
   both their colours and icon size. The Sing theme's link layout (application.min.css) names only `a`, so its rules are
   repeated here for `button`. */
.sidebar-nav > li > button {
    display: block;
    position: relative;
    width: 100%;
    padding: 0 0 0 50px;
    border: 0;
    border-top: 1px solid transparent;
    background: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 35px;
    text-align: left;
}

    .sidebar-nav > li > button:hover {
        background-color: #f9fafe;
    }

    .sidebar-nav > .open > button,
    .sidebar-nav > .active > button {
        background-color: #fff;
    }

    .sidebar-nav > li:last-child > button {
        border-bottom: 1px solid transparent;
    }

    .sidebar-nav > li > button .icon {
        display: block;
        position: absolute;
        top: 3px;
        text-align: center;
    }

    .sidebar-nav > .active > button .icon {
        border-radius: 50%;
        color: #fff;
    }

    .sidebar-nav > li > button .toggle {
        float: right;
        margin-right: 15px;
        line-height: 35px;
        transition: transform .35s ease;
    }

    .sidebar-nav > li > button.collapsed .toggle {
        transform: rotate(90deg);
    }

@media (min-width: 992px) and (min-height: 670px), (max-width: 767px) {
    .sidebar-nav > li > button {
        line-height: 55px;
    }

        .sidebar-nav > li > button .icon {
            top: 14px;
        }

        .sidebar-nav > li > button .toggle {
            line-height: 55px;
        }
}

/* Text and controls in the themes' colours, on both layouts. Each colour here meets text contrast (4.5:1) on white and
   on the pages' tinted fills (#fafbff, #f8f9fa, #e7e9f0), and each field's edge meets the 3:1 a control's boundary
   needs; the themes' own fail:
   - links: #3AD9CA (main layout, 1.76:1 on white) and #58BCB5 (sign-in layout, 2.26:1); #17696a is 6.4:1. As that
     colour is close to the text's (2.9:1 on #151212), links are underlined wherever they can sit among text: the page,
     its dialogs and its notices. Only tabs (.nav-link), menu items (.dropdown-item), pagers (.uk-pagination) and links
     drawn as buttons (.btn) are not; the contrast sweep (ThemeContrastTests) checks the same list.
   - the current page of the list pagers: white on #3AD9CA, 1.76:1
   - italics in stored rich text: red #F15C4C (UIkit, main layout), 3.29:1 and read as an error; now the text's colour
   - the brand teal (.c-theme, #1E827F), 4.37:1 on striped rows; the sign-in "Can't sign in?" (.btn-link, #797979),
     4.35:1; inactive tabs (#798892 on #e7e9f0, 3.0:1); the DataTables "Showing 1 to 5" line (#798892, 3.65:1);
     field placeholders (#798892 on the main layout, #999999 on the sign-in layout, 2.85:1)
   - field edges: a #e0e0e0 underline (1.32:1), or #e9ecef around the list search boxes (1.19:1), and a #3AD9CA or
     #58BCB5 focus underline; now #767676 (4.5:1) and the link colour. The themes also hide the arrow of a select. */
a {
    color: #17696a;
}

    a:hover,
    a:focus {
        color: #115b56;
    }

:is(main, .modal, .alert) a:not(.btn):not(.nav-link):not(.dropdown-item):not(.uk-pagination a) {
    text-decoration: underline;
}

.uk-pagination > .uk-active > a,
.uk-pagination > .uk-active > a:hover {
    background-color: #17696a;
    color: #fff;
}

em {
    color: inherit;
}

/* The Standards pages show program types in capitals, as the live site did (it upper-cased the list it offered);
   the names are stored, compared and saved as they are */
.program-type-name {
    text-transform: uppercase;
}

/* A standard's "Last Updated By" line keeps the theme's red, deepened from #F15C4C to meet 4.5:1 on the page's fills */
.last-updated em {
    color: #cc3b2c;
}

.form-control::placeholder {
    color: #596570;
    opacity: 1;
}

.c-theme,
body.login-content .btn-link {
    color: #17696a;
}

.nav-tabs > .nav-item > .nav-link:not(.active),
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #596570;
}

/* Every .form-control: the list is that one class written with the weight (two or three classes) of the themes' own
   field-edge rules, so the darker edge outranks them; a plain .form-control would lose and bring back the 1.32:1 edge */
.form-control:not(.search-field):not(.dropdown-list),
.form-control.search-field,
.form-control.dropdown-list {
    border-color: #767676;
}

.fg-line:not([class*=has-]):after {
    background: #17696a;
}

select.form-control:not(.search-field):not(.dropdown-list) {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: auto;
}

/* The Standards page's catalog choice, a select drawn as the heading of its dark card: the line under it is its
   visible edge (WCAG 1.4.11), as its fill is the card's */
.card-select {
    border-bottom: 1px solid #8a9bb3;
}

/* The Standards page's list of standards: each is a button drawn as the theme's grey card header (app.min.css gives
   .standards-list its colour and padding, .standardActive the chosen one's bar) */
button.standards-list {
    display: block;
    width: 100%;
    border-width: 0 0 1px;
    text-align: left;
}

button.standards-list.standardActive {
    border-right: 5px solid #102d51;
}

/* A click leaves no outline on the chosen standard (the bar marks it); the keyboard's focus ring stays */
button.standards-list:focus:not(:focus-visible) {
    outline: none;
}

.standards-list .h3 {
    margin: 0;
    font-size: 24px;
}

/* The SweetAlert dialogs (juraConfirm in functions.js, and the "cancelled" notice after a No): the plug-in draws white
   12px light text on #AEDEF4 (1.4:1, its default confirm colour, set inline) and #D0D0D0 (1.5:1, No). Yes and OK are
   white on the brand navy (9.9:1, #0a6abf on hover 5.5:1); No is navy on white, outlined. */
.sweet-alert button {
    font-size: 14px;
    font-weight: 400;
}

    .sweet-alert button.confirm {
        background-color: #344459 !important;
        color: #fff;
    }

        .sweet-alert button.confirm:hover {
            background-color: #0a6abf !important;
        }

    .sweet-alert button.cancel {
        background-color: #fff !important;
        color: #344459;
        box-shadow: inset 0 0 0 1px #344459 !important;
    }

        .sweet-alert button.cancel:hover {
            background-color: #eef1f6 !important;
        }

/* Detail forms (dl-horizontal): labels wider than the theme's 160px and wrapped rather than cut off */
@media (min-width: 768px) {
    .dl-horizontal dt {
        width: 250px;
        overflow: visible;
        white-space: normal;
    }

    .dl-horizontal dd {
        margin-left: 270px;
    }
}

/* The pager of the Angular lists (listPager.js) and the DataTables lists (dataTableTheme.js): one row of page links */
.uk-pagination {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

/* Keyboard focus shows on both layouts: their themes remove the focus outline (app.min.css with *:focus, app.min.1.css
   with *, *:active, *:hover, and a:focus and .btn:focus with !important, which the a and .btn selectors here match in
   weight). The ring is 3.6:1 on white. Toggle switches (main layout) and sign-in checkboxes hide the real input with
   opacity 0, so their ring is drawn on the visible stand-in next to it. */
:focus-visible,
a:focus-visible,
.btn:focus-visible,
.toggle-switch input:focus-visible + .ts-helper,
.checkbox input:focus-visible + .input-helper:before {
    outline: 2px solid #0d8aee !important;
    outline-offset: 2px;
}

/* On the dark fills of the green notices, the alerts and the notify() toasts the blue ring is 1.5-1.7:1; white is at
   least 5.2:1 */
.all-set-alert :focus-visible,
.dashboard-notification :focus-visible,
.alert-danger :focus-visible,
.alert-success :focus-visible,
.alert-warning :focus-visible,
.alert-info :focus-visible {
    outline-color: #ffffff !important;
}

/* The main layout's "Skip to content" link, shown over the fixed sidebar while it has focus */
.sr-only-focusable:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 8px 16px;
    background-color: #344459;
    color: #ffffff;
}

/* The rules from here on are the site's own classes, on both layouts */

/* The brand button, on the main and the sign-in layouts: lighter on hover and focus */
.btn-juraone {
    color: #ffffff;
    background-color: #344459;
    border-color: #0d8aee;
}

    .btn-juraone:hover,
    .btn-juraone:focus,
    .btn-juraone.focus,
    .btn-juraone:active,
    .btn-juraone.active {
        color: #ffffff;
        background-color: #0a6abf;
        border-color: #064475;
        background-image: none;
    }

    .btn-juraone:active:hover,
    .btn-juraone.active:hover,
    .btn-juraone:active:focus,
    .btn-juraone.active:focus,
    .btn-juraone:active.focus,
    .btn-juraone.active.focus {
        background-color: #2f6f6b;
        border-color: #064475;
    }

    .btn-juraone.disabled,
    .btn-juraone[disabled],
    .btn-juraone.disabled:hover,
    .btn-juraone[disabled]:hover {
        background-color: #344459;
        border-color: #0d8aee;
    }

.bgm-jurathree {
    background-color: #344459 !important;
    color: #ffffff;
}

.inputField {
    flex: 1;
}

/* Sidebar footer (_Layout) */
.accreditation-questions-button {
    margin: 0 32.5px;
    font-weight: 700;
}

/* Accrediting Body staff's menu items for setup steps not reached yet; DashboardSteps.js fades them in */
.sidebar-nav li.onboarding-step-pending {
    display: none;
}

/* The program page's Replace Program Director button, beside the director's name as Impersonate is */
.replace-director {
    float: left;
    margin-left: 25px;
}

/* The page header's account controls */
.navbar-header.account-controls {
    flex-grow: unset;
}

/* The page header's menu toggle, and beside it the impersonating user's way back, centred on one line */
.navbar-header.menu-controls {
    display: flex;
    align-items: center;
}

.impersonation-return {
    font-size: 13px;
    margin: 0 30px;
}

/* The close button of the banner a page is shown with after a redirect (_Layout's #failureMessage) */
.btn-font-large {
    font-size: 20.5px;
    font-weight: bold !important;
}

/* The Accrediting Body setup's "I'm all set!" notice (Program Import, and the Programs, Standards, Self-Studies and
   Cycles Angular pages) */
.all-set-alert {
    background-color: #1f6f64 !important;
    color: white;
    border: none;
}

    .all-set-alert a,
    .all-set-alert .close {
        color: white !important;
        opacity: 1 !important;
        text-shadow: none;
    }

/* Program Import's column list: one numbered list, in two columns where both fit */
.card .import-list {
    padding-left: 25px;
    columns: 200px 2;
    column-gap: 40px;
}

    .card .import-list li {
        break-inside: avoid;
    }

/* Self-study questions and reviewer comments */
.self-study-question {
    margin-top: 10px;
    margin-bottom: 5px;
}

.self-study-question-text {
    font: inherit;
    color: inherit;
    margin: 0;
}

.self-study-instructions {
    white-space: pre-wrap;
}

.reviewer-comment-rule {
    display: block;
    height: 2px;
    border: 0;
    border-top: 2px solid #1e827f;
    margin: 1em 0;
    padding: 0;
}

.review-history-selected {
    min-height: 40px;
    font-size: 12px;
}

.textarea-form-control {
    min-height: 100px;
}

.review-history-size {
    font-size: 12px;
    max-height: 210px;
    overflow-y: auto;
}

.reviewer-button:hover {
    color: #115b56;
    text-decoration: underline;
}

/* Dashboard email viewer: one message */
.email-message {
    background-color: white;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Dashboards: the setup-complete notice, its two dialogs and the message list (TypicalDashboard, _MessageList) */
.dashboard-notification-text {
    margin: 10px 25px;
}

.dashboard-modal-content {
    top: 100px;
}

.email-message-dialog {
    max-width: 600px;
}

/* The dashboard's To-Dos and Messages rows are as tall and inset as the live site drew them: the theme's list-group-item
   gave each row 10px above and below and 15px at its ends, here added to the cells so the columns stay a table's */
.dashboard-list td {
    padding-top: calc(0.55rem + 10px);
    padding-bottom: calc(0.55rem + 10px);
}

.dashboard-list td:first-child {
    padding-left: calc(0.55rem + 15px);
}

.dashboard-list td:last-child {
    padding-right: calc(0.55rem + 15px);
}

/* Fixed column widths: the header row is screen-reader-only, so the cells alone would let an address column shrink to a
   few letters. A long address wraps inside its column. */
.message-list {
    table-layout: fixed;
}

.message-number {
    width: 2.75em;
}

.message-from {
    width: 32%;
}

.message-sent {
    width: 6.5em;
}

/* Dismiss (on the dashboard) or Restore (in the archive), and the row's 15px end inset (.dashboard-list) */
.message-action {
    width: calc(5em + 15px);
}

.message-from-address {
    overflow-wrap: anywhere;
}

/* The subject is a button (it opens the message), and buttons do not wrap */
.message-open {
    white-space: normal;
    overflow-wrap: break-word;
}

/* The caption of a group of fields (the program forms' levels, role="group"), drawn as the labels beside it */
.field-caption {
    font-weight: 400;
}

/* A read-only box of the theme's forms (the program form's director names, its locked type) is drawn as the theme
   draws a disabled one: grey text on the card, not Bootstrap's grey fill */
.fg-line .form-control[readonly] {
    background-color: transparent;
    color: #9d9d9d;
}

/* A fieldset laid out as a form row (.row): its legend is the row's left column, drawn as the labels above and below
   it. A floated legend is laid out as any other item of the row, not on the fieldset's border. */
.row-legend {
    float: left;
    margin-bottom: 0;
    border: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* The self-study pages' program header (_ProgramHeader): each name in regular weight over its value, spaced and
   indented as the page has always shown them */
.program-header {
    padding-left: 0;
}

.program-header dt {
    font-weight: 400;
    line-height: inherit;
    margin-bottom: 7px;
}

.program-header dd {
    line-height: inherit;
}

/* A sortable column heading (juraSortBy, listPager.js) is a button inside the th: drawn as the heading's own text, as the
   headings beside it are, not as a link */
th[jura-sort-by] > .btn-link {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* Self-study answer page (Widgets/SelfStudyUploadQuestion): the delete button beside an uploaded file */
.upload-delete {
    margin-top: -2px;
    margin-bottom: 5px;
}

    .upload-delete .fas {
        color: #344459 !important;
    }

/* Self Study Submission: the Assign Reviewers dialog scrolls when its list is long */
.assign-reviewers-content {
    max-height: 700px;
    overflow-x: hidden;
}

/* Review workflow wizard */
.review-workflow-title {
    min-height: 50px;
}

/* Account Settings: the logo editor */
.profile-image-editor {
    margin: auto;
    max-width: 300px;
}

.profile-image-crop-area {
    max-width: 80%;
}

/* Sign-in layout: the page background, the sign-in form and its footer */
body.login-content {
    padding-top: 0;
    background-image: url('../Assets/Images/geo-pattern__jura.png');
    background-repeat: repeat;
    background-size: auto;
}

/* The sliding sign-in and recovery panels are clipped sideways only: clip, unlike hidden, leaves the vertical overflow
   visible, so the form is never a scroll box of its own when zoomed (WCAG 1.4.10). flow-root makes the area as tall as
   its floated panels, so the footer stays below the form. */
.login-body {
    display: flow-root;
    overflow-x: clip;
}

.keep-signed-in {
    margin-top: -4px;
}

.login-footer {
    min-height: 10vh;
}

.powered-by-footer,
.powered-by-footer a {
    color: #0a2547;
}

    .powered-by-footer a {
        font-weight: 700;
    }