/* GLOBAL STYLE */
/* Things like `p` tag, bootstrap redefinition, global color, etc. */

body {
    background-color: white;
}

/* Disabled buttons are easier to distinguish from active ones at .45
   than at Bootstrap's default .65 — issue #1350. */
.btn:disabled,
.btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Issue #1394: the bundled stylesheet (CoreUI/Bootstrap 4 era) sets
   label { margin-bottom: 0.5rem }. When a <label class="btn"> is a
   flex item alongside a <button> with align-items: center, the extra
   8 px below shifts the visible content up by 4 px. Zero it out
   only for labels styled as buttons; ordinary form labels keep
   their margin. */
label.btn {
    margin-bottom: 0;
}

.textcomplete-item.active {
    background-color: #20a8d8;
    color: white;
}

table td img {
    max-width: 100%;
    max-height: 13em;
}

.dataTable, table.dataTable {
    width: 100% !important;
}

table.dataTable td {
    vertical-align: middle;
}

textarea.form-control {
    height: 5em;
}

.formset-table textarea {
    width: 15em;
}

.formset-table .form-control {
    min-width: 10em;
}

.formset-table td {
    vertical-align: middle;
}

select.is-invalid + .select2-container .select2-selection {
    border-color: #f86c6b !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23f86c6b' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23f86c6b' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.select2-container .select2-selection {
    min-width: 10em;
    min-height: calc(1.5em + .75rem + 2px);
    border-color: #e4e7ea;

}

label {
    margin-right: 0.25em;
}

.dataTables_scrollBody tbody tr {
    height: 60px;
}

img[lazy=loading] {
    width: 100%;
    background-color: lightgray;
}

input:required, select.required, select.required ~ .select2 .select2-selection, select:required, select:required ~ .select2 .select2-selection, textarea:required {
    border: 1px solid #ffd789 !important;
    background: #fff9ef !important;
}

.required-for-publication, .required-for-publication ~ .select2 .select2-selection {
    border: 1px solid #fff1d5 !important;
    background: #fffbf5 url("../img/required.24e2b3ab5c7a.png") no-repeat bottom right !important;
}

.auto-updated-field::before, .auto-updated-field ~ .select2 .select2-selection::before {
    content: "Auto updated!";
    font-size: 0.5em;
    position: absolute;
    right: 1px;
    bottom: -10px;
    color: #315aff;
}

input[type="file"].required-for-publication {
    width: 100%;
    padding-bottom: 13px;
}

.form-control::placeholder {
    color: #dadde0;
}

/* base.html STYLE */
.app-header {
    padding-right: 1.5em;
}

.app-header .navbar-brand {
    width: 160px;
    align-items: center;
    justify-content: left;
}

.app-header .navbar-brand img{
    width: 100%;
    height: auto;
}

/* #1439: on narrow (below lg) screens the full "(O) EBU" wordmark is too
   wide and can overlap the notification / user pill. Show only the compact
   "(O)" mark and let the brand slot shrink to it, so it sits neatly next to
   the sidebar toggler instead of pushing into the header controls. */
@media (max-width: 991.98px) {
    .app-header .navbar-brand {
        width: auto;
        margin-right: .5rem;
    }

    .app-header .navbar-brand .navbar-brand-full {
        display: none;
    }

    .app-header .navbar-brand .navbar-brand-minimized {
        display: block;
        width: auto;
        height: 30px;
    }
}

.banner .alert {
    margin: 0;
}

.breadcrumb {
    margin: 0;
}

.badge:not(.badge-pill) {
    border-radius: 0;
}

.badge-success-light {
    background-color: #69d100;
    color: white;
}

.badge-success-dark {
    background-color: #009800;
    color: white;
}

.extra-header {
    width: 100%;
    margin-bottom: 20px;
}

.extra-header .btn {
    margin-top: 3px;
}

.sidebar.show {
    margin-left: 0px !important;
}

/* Static help pages (StaticPageRenderView, e.g. /help/releases) — issue #1329.
   The content is TinyMCE-authored freeform HTML. By default <pre> has
   white-space: pre and <table>/<img> have no width cap, so on narrow
   viewports long lines and wide elements extend past the card edge with
   no horizontal scrollbar — visually cutting off content. Constrain each. */
.static-page-content pre,
.static-page-content code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.static-page-content img,
.static-page-content video,
.static-page-content iframe {
    max-width: 100%;
    height: auto;
}

.static-page-content table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

/* External-link markers — issue #776. Auto-linked URLs (app.utils.text_link)
   and the reference URL that point at a host not curated by EBU show a small
   ↗ glyph and a muted red tint, and open in a new tab with
   rel="noopener noreferrer" so our session and Referer are not leaked.
   Trusted EBU hosts (see TRUSTED_LINK_HOSTS) do not get this class. */
a.external-link::after {
    content: "\00a0\2197";  /* &nbsp; + ↗ */
    font-size: 0.85em;
    color: #c0392b;
    vertical-align: super;
}

a.external-link {
    text-decoration-style: dotted;
}

/* Download/Open buttons that point at an untrusted external host keep the
   normal button size and colour; only the icon is tinted muted-red (paired
   with a "be careful" tooltip). Trusted external links use the plain icon
   colour. Issue #776. */
.external-untrusted-icon {
    color: #c0392b;
}

/* template_show_view.html STYLE */

.template-item-card .type-radios {
    margin-left: 1em;
}

.template-item-card .type-radios label {
    margin: 0;
}

/* item_list_view.html STYLE*/

.card-list a {
    text-decoration: none;
    border: 0;
}

.card-list .card-item:hover {
    border: 1px solid #aaa;
    box-shadow: 1px 1px #ddd inset
}

.card-list .left-filters {
    width: 20em;
}

.card-list .left-filters .card {
    margin: 0;
    z-index: 100;
}

.card-list .left-filters .card-header {
    padding: 0.1em;
}

.card-list .left-filters .select {
    widows: 100%;
}

.card-list .advanced-filters {
    margin-top: -2px;
    width: 20em;
}

.card-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 170px);
}

/* item-list-view STYLE*/

#item-show-app div.dts tbody th, div.dts tbody td {
    white-space: normal !important;
}

#item-show-app #box-versions {
    font-size: 0.95em;
    min-width: min(500px, 100%);
}

#item-show-app #box-versions .card, #item-show-app #box-summary .card {
    height: 300px;
}

#item-show-app #box-versions .btn {
    font-size: 0.7em;
    padding: 2px 3px;
}

#item-show-app #box-versions tr {
    height: 15px;
}

#item-show-app #box-versions th {
    padding: 4px;
    padding-left: 2px;
    padding-right: 2px;
}

#item-show-app #box-versions td {
    padding: 1px;
    padding-left: 2px;
    padding-right: 2px;
}

#item-show-app #box-details ul {
    list-style: none;
    padding-left: 0px;
}

#item-show-app #box-details img {
    max-height: 190px;
    float: left;
    margin-right: 10px;
    border: lightgray solid 1px;
}

#item-show-app #diff-modal {
    font-size: 13px;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

@media(min-width: 900px) {
    #item-show-app #diff-modal {
        padding-left: 50px !important;
        padding-right: 50px !important;
        padding-top: 50px !important;
    }
}

#item-show-app #diff-modal .modal-body {
    overflow-x: auto;
}

#item-show-app #diff-modal .modal-dialog {
    max-width: none !important;
}

#item-show-app #box-summary .card-body {
    overflow: auto;
}

.item-page-title {
    position: relative;
    font-size: 17px;
    line-height: 36px;
    color: #333;
}

/* card.html STYLE */

.card-item {
    border: 1px solid #ddd;
    box-shadow: 1px 1px #ddd;
    border-radius: 0;
    margin: 0 5px 5px 0;
    padding: 4px;
    width: 160px;
    height: 238px;
    cursor: pointer;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #337ab7;
    text-decoration: none;
    overflow: hidden;
    font-family: Source Sans Pro, Helvetica Neue, Arial;
    position: relative;
}

.card-item .details {
    position: relative
}

.card-item .details .title,
.card-item .details .line1,
.card-item .details .line2,
.card-item .details .line3,
.card-item .details .line4 {
    color: #fff;
    padding: 2px;
    margin: 2px;
    height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 151px;
    white-space: nowrap
}

.card-item .details .title {
    font-size: 0.8em;
    text-align: center;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.card-item .details .line1,
.card-item .details .line2,
.card-item .details .line3,
.card-item .details .line4 {
    font-size: 10px;
    margin-left: 19px;
    margin-top: 2.7px;
}

.card-item .details .image {
    text-align: center;
    height: 88px;
    width: 100%;
}

.card-item .details .image img {
    height: 85px;
    margin: auto;
    margin-top: 2px;
}

.card-item .details .url {
    color: #000;
    font-size: 0.53em;
    text-align: right;
    padding-right: 2px;
    margin-top: -3px;
}

.card-item .badge {
    color: white;
}

.card-item .badge-secondary {
    background-color: #777777;
}

.card-item .badge-tech-review {
    background-color: #ff6107;
}

.card-item div.float-right {
    margin-top: -4px;
}

/* Deadline strip — progress bar at bottom of card + floating label badge */
.deadline-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.deadline-label-badge {
    position: absolute;
    bottom: 6px;
    right: 4px;
    font-size: 8px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
    line-height: 1.4;
    white-space: nowrap;
}

.deadline-edit-btn {
    cursor: pointer;
    opacity: 0.7;
    margin-left: 3px;
}
.deadline-edit-btn:hover { opacity: 1; }

.deadline-bar {
    height: 4px;
    background-color: rgba(0, 0, 0, 0.15);
    overflow: visible;
}

.deadline-bar-fill {
    height: 100%;
    min-width: 3px;
    transition: width 0.3s ease;
}

.deadline-fill-ok       { background-color: #28a745; }
.deadline-fill-warn     { background-color: #fd7e14; }
.deadline-fill-danger   { background-color: #dc3545; }
.deadline-fill-overdue  { background-color: #1a0000; }

.deadline-date-input {
    position: absolute;
    bottom: 6px;
    right: 4px;
    font-size: 9px;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 1px 2px;
    background: white;
    z-index: 10;
    width: 110px;
}

/* template_edit_view.html STYLE */

#template-app .card-container {
    max-width: 165px;
    margin-top: 15px;
    min-height: 329px;
}

/* template_delete_view.html STYLE */

.error-item {
    background-color: #eee;
}

.error-version {
    margin-left: 10px;
}

/* home.html STYLE */


#home a:hover {
    text-decoration: none;
}


/* cardstyle_list_view STYLE */

#list-cardstyle .dataTables_scrollBody tbody tr {
    height: 90px;
}

#list-cardstyle .dataTables_scrollBody tbody tr img {
    max-height: 70px;
}

/* template card STYLE */
#template-show-app .card-item {
    cursor: inherit;
}

.warn {
    color: #f86c6b;
    font-weight: bold;
    text-align: center;
}

.popupImage {
    text-align: center;
}

.popupImage img {
    max-height: none !important;
    float: none !important;
    padding: 10px 10px;
    border: none !important;
}

.popupSource {
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;

    display: inline-block;
    vertical-align: middle;
    margin: 0px 0;
}

.popupClose {
    padding: 10px 10px;
    float: right;
    border: none;
    background-color: white;
    font-size: 1.5em;
    border-radius: .3rem;
}

.popupClose:hover {
    background-color: #eee;
}

/* dataTables */
div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .765625rem;
    line-height: 1.5;
    border-radius: .2rem;
    color: #5c6873;
    font-weight: 400;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e4e7ea;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

table.dataTable.no-footer {
    border: transparent;
}

table.dataTable thead th, table.dataTable thead td {
    border-bottom: 2px solid #c8ced3;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: .75rem;
}

.diffButtons {
    text-align: right;
    display: inline-block;
    margin-right: 3px;
}

.non_active_notification {
    visibility: hidden
}

.error-version {
    padding-left: 5px;
}

.error-version i {
    color: #f86c6b;
}

#list-app .container,
#template-app .container {
    width: 30px;
}

/*
 * Issue #1402: keep every column of an admin list-view DataTable at
 * its natural content width and let the surrounding
 * .table-responsive wrapper provide horizontal scroll on narrow
 * viewports. Without this the table shrinks to fit the wrapper and
 * the columns become unreadably narrow on /users/, /parameters/type/
 * and similar admin lists.
 */
.table-responsive .datatable-objects {
    min-width: max-content;
}

/*
 * Issue #1432: /testmaterial/ list with the new chrome runs without
 * the card outline and without the heavy line that DataTables /
 * Bootstrap normally draw above the column titles, so the table sits
 * flush against the sub-toolbar above. Scoped via .tm-table-flush so
 * other DataTable views keep their existing styling.
 *
 * The min-width: max-content rule from #1402 forces the table to be
 * as wide as its column-content, which means the .table-responsive
 * scrollbar stays visible even after the user hides columns through
 * the picker (a hidden column doesn't shrink max-content). On this
 * page we override that rule with min-width: 100% so the table is
 * always at least as wide as its wrapper but no wider — scrollbar
 * appears only when the visible columns still exceed the viewport.
 */
.tm-table-flush > thead > tr > th {
    border-top: 0 !important;
    /* Issue #1432 review 3: tighten the vertical padding around the
       column titles so they sit close to the divider above and to
       the first data row below. */
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Issue #1432 review 3: CoreUI paints a 1 px line underneath every
   .breadcrumb (it was originally a top-of-page toolbar component);
   strip it inside the test-material sub-toolbar so we only see the
   single divider that lives on the sub-toolbar itself. */
.subtoolbar .breadcrumb {
    border-bottom: 0 !important;
}

.table-responsive .datatable-objects.tm-table-flush {
    min-width: 100%;
}

/*
 * Issue #1432 review 3: align the H1 / breadcrumb left edge with
 * the table's first cell TEXT (not with the table's outer left).
 * The col-12 wrapping the table has zero horizontal padding —
 * `.tm-chrome-col` collapses Bootstrap's default 0.75rem each side
 * — so the table reaches the row edges. The `.table` itself adds
 * 0.5rem of cell padding to the first cell, so the cell TEXT
 * lands at `main_left + 0.5rem`. The page-header / sub-toolbar
 * inner container-fluid carries 0.875rem padding so the H1, the
 * breadcrumb and the table text line up to the eye while the
 * unused white space on the right of the list shrinks too.
 */
.tm-chrome-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-header > .container-fluid,
.subtoolbar > .container-fluid {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
}


/*
 * Issue #1473: highlight the currently-shown menu item with a
 * darker (50%-brightness) tint of CoreUI's blue so admins can
 * tell which page they're on at a glance.
 *
 * #1473 follow-up: only the ACTIVE LEAF link is painted; the
 * parent-dropdown's toggle header is NOT — Frans wants exactly
 * one highlighted item at any time. (The previous
 * `.nav-dropdown.open` rule was wrong: it lit up whenever a
 * dropdown was expanded, even by a user click on a sibling, and
 * it stacked on top of the active leaf to give two highlights
 * at once.)
 *
 * The `!important` is needed because CoreUI ships its rule on
 * `.sidebar .nav-link.active` with high specificity and `--cui-`
 * custom properties; ours overrides cleanly without having to
 * re-declare every variable.
 */
.sidebar .nav-link.active {
    background-color: #1e3a5f !important;
    color: #fff !important;
}
.sidebar .nav-link.active:hover {
    background-color: #25497b !important;
}

/*
 * #1473 follow-up 2: CoreUI's own default paints the OPEN
 * dropdown's <li> with a `background: rgba(0,0,0,.2)` overlay
 * (see style.min.css ".sidebar .nav-dropdown.open"), which makes
 * the parent toggle look highlighted alongside the active leaf
 * — even with our own .nav-dropdown.open highlight rule removed.
 * Strip the overlay so "currently shown page" is communicated
 * only by the active leaf + the chevron rotation on the parent
 * toggle.
 */
.sidebar .nav-dropdown.open {
    background: transparent !important;
}

/*
 * Issue #1474 follow-up: responsive layout for the /testmaterial/
 * sub-toolbar. Frans's prior review: "it still jumps around. Keep
 * breadcrumbs and filter ALWAYS lowest when there are multiple
 * rows including buttons."
 *
 * Trick: `flex-wrap: wrap-reverse` makes wrapped items stack from
 * the BOTTOM up. The flex container fills the FIRST line at the
 * bottom and overflowed items go to NEW LINES ABOVE.
 *
 * DOM order in the sub-toolbar: breadcrumb -> filter -> buttons.
 *   - Single line (wide): breadcrumb left, filter middle, buttons
 *     right (via `.me-auto` on the breadcrumb).
 *   - Two lines: filter + buttons wrap up to the top line;
 *     breadcrumb stays alone on the bottom.
 *   - Three lines: breadcrumb bottom, filter middle, buttons top.
 *
 * `margin-left: auto` on `.tm-subtoolbar__actions` keeps the
 * button group right-aligned even when it's alone on its line
 * (where the breadcrumb's `.me-auto` no longer reaches it).
 *
 * Replaces the prior `@media (max-width: 767.98px)` column-stack
 * rule, which produced an unpredictable layout at intermediate
 * widths (768-1100px) where items wrapped but order depended on
 * overflow timing.
 */
.subtoolbar > .container-fluid {
    flex-wrap: wrap-reverse !important;
}
.subtoolbar > .container-fluid > .tm-subtoolbar__actions {
    margin-left: auto;
}

/*
 * Issue #1475: right-align the per-row action buttons on the
 * /dictionary/undefined-terms/ list so they sit flush against
 * the column edge instead of crowding the term name on the left.
 */
.dictionary-undefined-terms-actions {
    text-align: right;
    white-space: nowrap;
}

/* CSP: utility classes that replace former inline style="" attributes. */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.flex-item-truncate { min-width: 0; overflow: hidden; }
.chart-canvas-container { position: relative; height: 280px; }
.version-badge { border: 1px solid #ccc; border-radius: 3px; padding: 1px 4px; font-size: 0.85em; }
.version-id-sm { font-size: 50%; }
.version-id-lg { font-size: 80%; }
.mediainfo-logo { height: 40px; }
.loader-text { line-height: 50px; padding: 15px; }
.detail-img { max-width: 150px; }
.table-flush { margin: 0; width: 100%; }
.breadcrumb-no-border { border-bottom: none; }
.card-text-sm { font-size: 0.8em; }
.box-thumbnail { max-width: 100%; max-height: 15em; border: 1px solid black; }
.progress-bar-min { min-width: 40px; }
.filter-select-max-w { max-width: 18em; }
.item-row-margins { margin-left: 5px; margin-right: 15px; }