/*wok/ai -  15.4.25 - Web: Show full text search box in open-dialog on all screen sizes. (cursor.com) */

.ODialog-container {
    position: relative;
    overflow: hidden;
    background-color: black;
}

.ODFulltextSearch-container {
    position: relative;
    overflow: visible;
    background-color: #cdcdcd;
    z-index: 2;
    width: 100%;
}

.ODFulltextSearch-container thead {
    display: block !important;
    position: relative;
    z-index: 2;
    width: 100%;
}

.ODialog-container .GridViewStyle thead {
    display: none;
}

.ODialog-container .GridViewStyle {
    width: 100%;
    position: relative;
    border: 0;
}

.ODFulltextSearch-container .GridViewStyle {
    width: 100%;
    position: relative;
    border: 0;
}

.ODFulltextSearch-container .HeaderStyle tr {
    display: table-row;
    width: 100%;
}

.ODFulltextSearch-container .HeaderStyle th {
    padding: 8px;
    vertical-align: middle;
}

.ODFulltextSearch-container .HeaderStyle th:last-child {
    width: 100%;
}

span.searchField {
    position: relative;
    display: block;
    width: 100%;
}

/* wok - 25.7.26 - Web: aligned the open-dialog fulltext search with the other search fields:
   removed the custom mini "x" span (the native search cancel button is styled big in contentstyle.css),
   slightly taller field with consistent padding. */
span.searchField input[type="search"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: white;
    height: 36px;
    font-size: calc(14px * var(--td-text-scale, 1));
    box-sizing: border-box;
}

/* wok - 25.7.26 - Web: touch devices get the iOS-sized field (44px target, 16px font against the focus zoom),
   same as the header dropdown search fields in contentstyle.css.
   Must live here: this file loads after contentstyle.css and the 36px base rule above would win otherwise. */
@media only screen and (max-width: 768px), (pointer: coarse) {
    span.searchField input[type="search"] {
        height: 44px;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: calc(16px * var(--td-text-scale, 1));
    }
}

/*Table style vertical Lines*/
.ODialog-container .RowStyle {
    background-color: white;
    position: relative;
    border: 0;
    border-top: solid 1px #999;
}

    .ODialog-container .RowStyle:nth-of-type(odd) {
        background-color: #ddd;
    }

    .ODialog-container .RowStyle:last-child {
        border-bottom: solid 1px #999;
    }

    .ODialog-container .RowStyle > *, .ODialog-container .HeaderStyle > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 16px;
        border: 0;
    }

/*Enable Tile-Grid*/
.ODialog-container .RowStyle {
    display: grid;
    grid-template-columns: 33px 80px calc(60% - 58px) calc(40% - 50px);
    grid-template-rows: 18px 20px 20px 20px;
    align-items: start;
    /*gap: 0 8px;*/
}

/*'wok - 14.2.23 - Web: Fix open-dialog responsive smart-phone view.*/
.ODialog-container .GridViewStyle .RowStyle :nth-child(n+11), .ODialog-container .GridViewStyle .HeaderStyle :nth-child(n+11) {
    /*Rows Mobile not viewed*/
    display: none;
    order: 9;
}

/*'wok - 2.5.24 - Web: Fix open-dialog column move right/left and mobile/small screen  order. Left -> Right -> Next Line */
.prio1 {
    grid-column: 3;
    grid-row: 1;
    order: 1;
}
.prio2 {
    grid-column: 4;
    grid-row: 1;
    order: 2;
}
.prio3 {
    grid-column: 3;
    grid-row: 2;
    order: 3;
}
.prio4 {
    grid-column: 4;
    grid-row: 2;
    order: 4;
}
.prio5 {
    grid-column: 3;
    grid-row: 3;
    order: 5;
}
.prio6 {
    grid-column: 4;
    grid-row: 3;
    order: 6;
}
.prio7 {
    grid-column: 3;
    grid-row: 4;
    order: 7;
}
.prio8 {
    grid-column: 4;
    grid-row: 4;
    order: 8;
}


.prio2, .prio4, .prio6, .prio8 {
    font-size: calc(10px * var(--td-text-scale, 1));
    /*text-transform: uppercase;*/
    color: #888888;
    text-align: right;
}

.prio1, .prio3, .prio5, .prio7 {
   text-align: left;
}

.ODialog-container .HeaderStyle .prio5 .context-menu, .ODialog-container .HeaderStyle .prio8 .context-menu {
    right: 0;
}

/*Values Tile-Grid*/
.ODialog-container .RowStyle {
    height: 110px;
    padding: 16px 8px;
}

.listcontrol {
    display: block;
    order: -2;
    align-self: center;
    /*   width: 20px;
   height: 20px;*/
    grid-column: 1;
    grid-row: 1 / 5;
}

td[class^="image"] {
    display: block !important;
    order: -1 !important;
    width: 72px;
    height: 72px;
    border-radius: 3px;
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    padding: 0;
    background-color: #dedede;
    padding-right: 0 !important;
}

th[class^="image"], .lc1 {
    order: -1 !important;
    width: 72px;
}

td[class^="image"] img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* wok - 4.8.26 - Web: the framed variant of these thumbnails (class td-framed, cropped to the article) is styled
   in picture-card.css - one always loaded stylesheet for the whole picture card look. */

/* wok - 23.11.15 - css for touch: added .RowStyle input[type="checkbox"] to allow to style open-dialog checbox for touch */
.RowStyle input[type="checkbox"], .SelectedRowStyle input[type="checkbox"] {
    height: 25px;
    width: 25px;
}

/* wok - 25.7.26 - Open-Dialog: progress rendered as circle (donut) like in the desktop app. Base size (40px) comes inline from GridViewAdapterColumnHeaderProgressBar; here we only shrink it for the mobile tile grid (fixed 20px grid rows) and hide the percent text which is unreadable at that size. */
@media screen and (max-width: 559px) {
    .progress-pie {
        width: 20px !important; /* must win over the inline base size */
        height: 20px !important;
    }

        .progress-pie svg text {
            display: none;
        }
}

@media screen and (min-width:560px) {
    .ODialog-container {
        background-color: #cdcdcd;
        max-width: 100vw;
        max-height: calc(100vh - 48px - 1px);
        overflow: auto;
        height: 100%;
    }

    .ODFulltextSearch-container .GridViewStyle thead {
        display: none;
    }

    /*Enable Table-Row-Grid*/
    .ODialog-container .RowStyle, .ODialog-container .HeaderStyle {
        display: flex;
        justify-content: flex-start;
    }

    .prio2, .prio3, .prio4, .prio5 {
        font-size: calc(12px * var(--td-text-scale, 1));
        text-transform: none;
        color: #333;
        text-align: left;
    }

    /* wok - 23.11.15 - css for touch: added .RowStyle input[type="checkbox"] to allow to style open-dialog checbox for touch */
    .RowStyle input[type="checkbox"], .SelectedRowStyle input[type="checkbox"] {
        height: 20px;
        width: 20px;
    }

    /*Values Tile-Grid*/
    .ODialog-container .RowStyle {
        height: 60px;
        padding: 0 8px;
    }

    .ODialog-container .HeaderStyle {
        /*height: 30px;*/
        padding: 0 8px;
        /*margin-bottom: 220px;*/
        /*border-bottom: 1px solid #999;*/
        background-color: #FFF;
    }

    .listcontrol {
        display: block;
        flex: none;
        width: 40px;
        height: 20px;
    }

    .ODialog-container .HeaderStyle th {
        position: relative;
        overflow: visible;
    }

    td[class^="image"], .lc1 {
        flex: none;
        width: 48px;
        height: 48px;
        margin-right: 8px;
    }
    /*wok - 15.2.23 - Web: Hide context-menu of image column, not enough space */
    /*      th[class^="image"] div.grid-header-contextmenu {
         display: none;
      }*/

    th[class^="image"], .lc1 {
        flex: none;
        width: 48px;
        align-self: center;
        text-align: left;
    }

    td[class^="prio"], th[class^="prio"] {
        flex: 1 0 auto;
        width: 160px;
        align-self: center;
        text-align: left;
    }

    td[class^="prio"] {
        padding-right: 8px !important;
    }

    th[class^="prio"], th[class^="listcontrol"] {
        align-self: flex-start;
    }

    th {
        font-size: calc(10px * var(--td-text-scale, 1)) !important;
        text-transform: uppercase;
        color: #888888 !important;
        font-weight: normal;
    }

    /*Rows Mobile not viewed*/
    .ODialog-container .GridViewStyle .RowStyle :nth-child(n+8) {
        display: block;
    }

    .ODialog-container .GridViewStyle .HeaderStyle :nth-child(n+8) {
        display: grid;
    }

    /*table header*/
    .ODialog-container .GridViewStyle thead {
        display: block;
        z-index: 2;
        position: sticky;
        top: 0;
        width: 100%;
        background-color: #cdcdcd;
        border-bottom: 1px solid #999;
    }

    .ODialog-container .GridViewStyle tbody {
        display: block;
        /*margin-top:70px; */
    }

    .grid-header-sort {
        /*display: none;*/
    }

    .grid-header-label {
        text-align: left;
        align-self: flex-start;
        margin-right: 10px;
    }

    .grid-header-filterContainer > div:not(:first-child) {
        margin-top: 18px;
    }

    .listcontrol input {
        align-self: center;
        width: calc(100% - 8px);
    }

    .grid-header-contextmenu {
        /*display:none;*/
    }
}

.obj-action-overlay {
    position: absolute;
    right: -180px;
    top: 35px;
    width: 180px;
    height: 40px;
}

.obj-action-buttons {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 40px;
}

    .obj-action-buttons > * {
        width: 40px;
        height: 40px;
        background: transparent;
        border: 0;
        padding: 0;
        margin: 0;
    }

.obj-action-edit {
    background-image: url('../images/2020mh/Edit_filled.svg')
}

.obj-action-view {
    background-image: url('../images/2020mh/Show_filled.svg')
}

.obj-action-delete {
    background-image: url('../images/2020mh/Delete.svg')
}

@media screen and (min-width:560px) {
    .obj-action-overlay {
        display: none;
        position: absolute;
        width: 100px;
        height: 100%;
        left: 320px;
        top: 0px;
        background-color: rgba(0,0,0,0);
    }

    .ODialog-container .RowStyle:hover .obj-action-overlay {
        display: block;
    }

    .obj-action-buttons {
        position: absolute;
        top: 10px;
        left: 0px;
        width: 100px;
        height: 40px;
        background-color: rgba(0,0,0,1);
        border-radius: 3px;
    }

        .obj-action-buttons > * {
            align-self: center;
        }
}


/*Set Header Column Items to css grid*/
th[class^="prio"] {
    width: 160px;
    height: 100%;
    display: grid;
    grid-template-columns: auto 60px;
    grid-template-rows: 40px 40px;
}

.ODialog-container .HeaderStyle th[class^="listcontrol"] {
    /*width: 96px;*/
    height: 100%;
    display: grid;
    grid-template-columns: 30px 30px auto;
    grid-template-rows: 40px 30px;
}

.ODFulltextSearch-container .HeaderStyle th {
    padding: 8px;
    height: 100%;
    vertical-align: middle;
}

.ODFulltextSearch-container .HeaderStyle input[type="checkbox"] {
    height: 25px !important;
    width: 25px !important;
}

th[class^="image"], .lc1 {
    display: grid !important;
    grid-template-columns: auto;
    grid-template-rows: 40px 30px;
}

th[class^="image1"], .lc1 {
    display: grid !important;
    grid-template-columns: 20px 20px;
    grid-template-rows: 40px 30px;
}

.ODialog-container .HeaderStyle th[class^="image2"] {
    display: none !important;
}

.lc1 .grid-header-contextmenu, .lc1 .grid-header-filterContainer {
    display: none;
}

.grid-header-label {
    align-self: center;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.grid-header-contextmenu {
    align-self: center;
    justify-self: end;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.listcontrol .grid-header-contextmenu {
    align-self: center;
    justify-self: end;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2;
}

.grid-header-sort {
    align-self: center;
    justify-self: start;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

    .grid-header-sort img {
        border-width: 0px;
        width: 30px;
        height: 30px;
        background-size: cover;
        background-position-y: 0;
        border-radius: 50%;
    }

.grid-header-filterContainer {
    align-self: flex-start;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
}

.CheckboxContainer, .CheckboxHero {
    height: 16px;
    align-self: center;
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
}

.listcontrol-options-btn {
    height: 16px;
    align-self: flex-start;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.context-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;
}

.context-menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .context-menu-item a {
        color: #FFF;
    }

.showContextMenu {
    /*   display: flex;*/
    visibility: visible;
}

/*   stylesheet for "settings" table (UserSettingsControl.ascx: an outer table whose header row is the page title and whose one data
     row holds the settings table; the panel around them carries the class settings-page)
     wok - 22.10.26 - Web: bound to the class settings-page instead of the auto-generated control ID ctl13_cSettingsTable - the ID shifted
     when Start.aspx got another head control (manifest link, 19.10.26) and every rule here went dead. Redrawn as a card on the design
     tokens at the same time (centered sheet, hairline rows, token colours), so the dark mode comes out of the token swap alone.
     The !important parts answer the generic th rules of this file (10px upper-case #888 !important) and responsive-update2021.css. */
body:has(.settings-page) {
    background-color: var(--td-canvas, #f4f6f9);
}

.settings-page {
    max-width: 980px;
    margin: 24px auto 40px;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: var(--td-font, 'Open Sans', sans-serif);
    color: var(--td-ink, #172033);
}

.settings-page table.GridViewStyle {
    width: 100%;
    border-collapse: separate !important; /* inline style says collapse - the card needs its rounded corners */
    border-spacing: 0;
}

/* the outer table is the card */
.settings-page > table.GridViewStyle {
    border: 1px solid var(--td-line, #dfe3ea);
    border-radius: var(--td-radius-lg, 16px);
    background-color: var(--td-surface, #fff);
    box-shadow: var(--td-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
    overflow: hidden;
}

.settings-page > table.GridViewStyle > tbody > tr.RowStyle > td {
    padding: 0;
}

.settings-page .HeaderStyle {
    background-color: transparent; /* responsive-update2021.css: white */
}

.settings-page .HeaderStyle th {
    font-size: calc(18px * var(--td-text-scale, 1)) !important;
    text-transform: none;
    color: var(--td-ink, #172033) !important;
    font-weight: 600 !important;
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--td-line, #dfe3ea);
}

.settings-page .RowStyle .HeaderStyle {
    display: none; /* the inner "Setting | Value" header - the labels say it */
}

/* rows of the settings table */
.settings-page .RowStyle .GridViewStyle td {
    padding: 10px 24px;
    height: 52px; /* every row as tall as one with a text box (32px box + padding) */
    line-height: 22px;
    vertical-align: middle;
    font-size: calc(13px * var(--td-text-scale, 1));
    border-bottom: 1px solid var(--td-line, #dfe3ea);
    transition: background-color .12s ease;
}

.settings-page .RowStyle .GridViewStyle tr:last-child td {
    border-bottom: 0;
}

.settings-page .RowStyle .GridViewStyle tr.RowStyle:hover td {
    background-color: var(--td-hover, #f2f4f7);
}

.settings-page .RowStyle .GridViewStyle td:first-child {
    width: 55%;
    color: var(--td-ink-2, #2f3a4d);
}

.settings-page .RowStyle .GridViewStyle td:last-child {
    color: var(--td-ink, #172033);
}

.settings-page input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]) {
    box-sizing: border-box;
    height: 32px;
    min-width: 96px;
    padding: 0 10px;
    border: 1px solid var(--td-line-strong, #cbd2dc);
    border-radius: var(--td-radius-sm, 6px);
    background-color: var(--td-surface, #fff);
    color: var(--td-ink, #172033);
    font: inherit;
    font-size: calc(13px * var(--td-text-scale, 1));
    transition: border-color .12s ease, box-shadow .12s ease;
}

.settings-page input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]):focus {
    outline: none;
    border-color: var(--td-focus, #2563eb);
    box-shadow: 0 0 0 3px var(--td-focus-ring-soft, rgba(37, 99, 235, .16));
}

.settings-page input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--td-brand, #d92d32);
    cursor: pointer;
}

/* "Load defaults" - the ghost button of the open-dialog V2 toolbar */
.settings-page #cLoadDefaultsButton {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid var(--td-line, #dfe3ea);
    border-radius: 999px;
    background: var(--td-surface, #fff);
    color: var(--td-ink-2, #2f3a4d);
    font: inherit;
    font-size: calc(12.5px * var(--td-text-scale, 1));
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.settings-page #cLoadDefaultsButton:hover {
    background: var(--td-hover, #f2f4f7);
    border-color: var(--td-muted-2, #6c778d);
}

.settings-page .LinkCol {
    padding: 14px 24px !important; /* the generic .LinkCol rule below says 30px 20px !important */
    font-size: calc(12px * var(--td-text-scale, 1));
    color: var(--td-muted, #4a556a);
}

.btn {
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    min-width: 100px;
}

    .btn:hover {
        background-color: rgba(0,0,0,0.1);
    }

.inputField {
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    min-width: 100px;
    height: 30px;
    box-sizing: border-box;
}

    .inputField:hover {
        background-color: rgba(0,0,0,0.1);
    }

/*delete*/

#ctl13_cSave {
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    min-width: 100px;
    margin: 10px 20px;
}

    #ctl13_cSave:hover {
        background-color: rgba(0,0,0,0.1);
    }

/*end delete*/

.LinkCol {
    width: auto;
    display: table-cell !important;
    padding: 30px 20px !important;
}

.ODRowHiddenByFulltextSearch {
    display: none !important;
}

/* Hide grid elements on small screens
   wok - 22.10.26 - Web: the select-all box of the classic grid header is addressed by its class (GridViewAdapterColumn.vb) instead of
   the auto-generated ID ctl13_cGridView_ctl01_cbAll, which shifted with the web app manifest link in Start.aspx (the ASP.NET CheckBox
   renders the class on a span around the input). */
@media screen and (max-width: 559px) {
    .grid-header-selectall input,
    #ContextODColumn1 {
        display: none !important;
    }
    
    #ODFulltextsearch_cbAll,
    .ODFulltextSearch-container .grid-header-contextmenu {
        display: block !important;
    }
}

/* Hide search elements on large screens */
@media screen and (min-width: 560px) {
    #ODFulltextsearch_cbAll,
    .ODFulltextSearch-container .grid-header-contextmenu {
        display: none !important;
    }
    
    .grid-header-selectall input,
    #ContextODColumn1 {
        display: block !important;
    }
}