/*
 *
 * General styles.
 *
 */

/* Hide the sidebar. */
.page-node-type-run .layout__sidebar,
.path-illumina-sequencing .layout__sidebar,
.path-pacbio-sequencing .layout__sidebar,
.path-sample-prep-services .layout__sidebar {
    display: none;
}

/*
 * Superfish menu adjustments.
 */

/* The active page in the menu should be semi-bold. */
.block-superfish ul.sf-menu li.menu-item.active-trail li.menu-item a.is-active {
    font-variation-settings: var(--font-semi);
}
/* Highlight the active trail of links by making them black text. */
.block-superfish ul.sf-menu li.menu-item.active-trail li.active-trail a {
    color: black;
}

/*
 * Table adjustments.
 */

/* All tables without sticky headers span the available width. */
table:not(.sticky-header) {
  width: 100% !important;
}
/* Padded cells. */
table th,
table td {
  padding: 4px 8px;
}
/* A thin bottom line to help contrast the rows.*/
.pretty table tbody td,
.pretty .table tbody .table__cell {
    border-bottom: solid thin rgba(0,0,0,0.1);
}
/* Zebra-stripe the table rows. */
.pretty table tbody tr:nth-of-type(2n+1),
.pretty .table tbody .table__row:nth-of-type(2n+1) {
    background: #f5f5f5;
}
/* Adjust the default zebra striping, make it less dark overall. */
.pretty table tbody tr:nth-of-type(2n),
.pretty .table tbody .table__row:nth-of-type(2n) {
    background: rgba(0,0,0,0.002);
}
/* Vertically center the column sorting icon. */
span.tablesort {
    transform: translateY(3px);
}

/* The icon trailing a link that opens a new window flows like text. */
main a[target=_blank]::after {
    display: inline;
    font-size: 10px;
}


/*
 *
 * Queue view pages.
 *
 */

/* Adjust padding in cells around QC/Prep status. */
td.views-field-field-prep-status,
td.views-field-gc3f-qc-status {
    padding: 0px 0px 0px 3px;
    overflow: hidden;
}
/* Badges for QC and Prep status fields. */
td.views-field-field-prep-status .messages,
td.views-field-gc3f-qc-status .messages {
    display: block;
    background-size: 20px;
    background-position: 5px center;
    padding: 3px 3px 3px 28px;
    margin: 0;
}

/*Sample prep queue status column badge (green/success/ok). */
.view-sample-prep-queues.view-display-id-page_3 span.messages--notice {
    background-color: #f3faef;
    color: #325e1c;
    border: solid thin #c9e1bd;
    border-left-color: #77b259;
    border-left-width: 8px;
    padding: 2px 10px;
    margin: 0 auto;
}


/* Make the tables in the queues horizontally scroll-able, if needed. */
.pretty .view-content {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    margin: 1.5em auto;
}


/*
 *
 * Samples in Run.
 *
 */

/*
 * Complete Run button.
 */

.pretty .views-form input.form-submit {
    display: inline-block;
    padding: var(--cta-button-size, 0.875em 2.25em);
    font-size: 1.25rem;
    font-size: clamp(1rem,2vw,1.25rem);
    line-height: 1.75rem;
    line-height: clamp(1.4rem,2vw,1.75rem);
    font-weight: 400;
    font-family: var(--font-family-slab, "Source Serif Variable", Times, "Times New Roman", Georgia, "DejaVu Serif", serif);
    font-variation-settings: var(--font-reg);
    text-decoration: none;
    cursor: pointer;
    border: solid #000 2px;
    border-color: var(--fg-d, var(--uowdf-theme-text-dark, black)) var(--fg-l, var(--uowdf-theme-text-light, white));
    border-radius: 4px;
    transition-duration: 0.2s;
    transition-property: color,border,background;
    margin: o auto;
    color: #fff;
    --fg-l: var(--uowdf-ON);
    --fg-d: var(--uowdf-OFF);
    background-color: #007030;
    background-color: var(--uowdf-color-uo-green, #007030);
}
.pretty .views-form input.form-submit:hover,
.pretty .views-form input.form-submit:focus {
    filter: brightness(1.25);
    color: #fff !important;
    border-color: #007030 !important;
    border-color: var(--uowdf-color-uo-green, #007030) !important;
    background-color: #007030;
    background-color: var(--uowdf-color-uo-green, #007030);
    text-shadow: none;
    text-decoration: underline !important;
    outline-width: 2px;
    outline-offset: 3px;
    outline-color: #000;
}
.pretty .views-form input.form-submit[disabled] {
    background-color: var(--uowdf-theme-subdued-dark);
    color: var(--uowdf-theme-subdued-light);
    border-color: var(--uowdf-theme-subdued-dark);
    opacity: 0.7;
}

/*
 * Borders and backgrounds.
 */

/* Put a border around the Samples in Run whole table. */
.pretty table.views-table {
    border: 0.075em solid #d8d9da;
}
/* Set a border on the top, left, and right of the header cells. */
.pretty table th {
    --table-default-border-color: #e4e6ec;
    --table-border-color: var(--table-default-border-color);
    --thin-solid-border: thin solid var(--table-border-color);
    --thin-dotted-border: thin dotted var(--table-border-color);
    border-left: var(--thin-dotted-border);
    border-right: var(--thin-dotted-border);
    border-top: var(--thin-solid-border);
    border-bottom: 3px solid var(--table-border-color);
}
/* Make the border bottom and top color grass green. */
.pretty table th.is-active {
    --table-border-color: var(--uowdf-color-grass-green-t6);
    border-left-color: var(--table-default-border-color) !important;
    border-right-color: var(--table-default-border-color) !important;
    border-top-color: var(--table-border-color);
    border-bottom-color: var(--table-border-color);
}
/* Make the edge border on the first and last header cells solid. */
.pretty table th:first-child {
    border-left: var(--thin-solid-border);
}
.pretty table th:last-child {
    border-right: var(--thin-solid-border);
}
/* Give a green shade to the active column's cells in the table. */
.pretty table th.is-active,
.pretty table td.is-active {
    background-color: rgba(218,235,218,0.4);
    font-variation-settings: var(--font-semi);
}

/*
 * Column widths.
 */

td.views-field-field-length-preferred,
td.views-field-field-read-type,
td.views-field-field-service-requested,
td.views-field-field-ilab-library,
td.views-field-field-service-requested {
    min-width: 6em !important;
}
td.views-field-field-ilab-owner,
td.views-field-field-ilab-request-id {
    min-width: 7em !important;
}
td.views-field-field-ilab-sample,
td.views-field-field-application,
td.views-field-field-parameters {
    min-width: 9em !important;
}
td.views-field-field-ilab-lab-1,
td.views-field-field-ilab-lab,
td.views-field-field-sample-prep-project-name,
td.views-field-field-dates is-active {
    min-width: 10em !important;
}
.pretty td[class*="views-field-views-bulk-operations-bulk-form"] {
    text-align: center;
}
/* Remove the min-width on sufficiently narrow columns, center the content. */
td[class*="bulk-operations"]
td.views-field-field-run-lane,
td.views-field-field-ilab-price,
td.views-field-nid,
td.views-field-field-sample-status,
td.views-field-field-read-type,
td.views-field-field-length-preferred {
  text-align: center;
  min-width: unset !important;
}
/* Remove the zebra striping from the table above the sample prep queue. */
.view-sample-prep-queues table tbody tr:nth-of-type(2n) {
    background: transparent;
}

/*
 * Other adjustments.
 */
 
 /* BOld the labels for the Run page fields. */
.page-node-type-run .field__label {
    font-weight: bold;
    font-variation-settings: var(--font-semi);
}

/* Remove excess space below the views headers. */
.page-node-type-run h2 {
    margin-bottom: 0.5em;
}
/* Add some space between the views table blocks. */
.page-node-type-run .block-views + .block-views {
    margin-top: 3em;
}
.page-node-type-run .pretty .view-content > table {
    margin-top: 0;
}
/* Table wrappers scroll horizontally so the table columns grow as needed. */
.pretty.shadow .view-content {
    overflow-x: scroll;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14) inset,
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
/* The complete run button has a small margin around it. */
.pretty .form-actions {
    margin: 8px 5px 5px;
}
/* Frame the scroll-able contents of the view content and add padding. */
.pretty .views-form {
    margin: 0 1px;
}
/* Add a thin margin around non-vbo tables. */
.pretty .view-content > table {
    margin: 1.5em 0 0;
}
/* Header cells display on one line with extra padding. */
.pretty table th {
    white-space: nowrap;
    padding: 8px 16px;
}
/* Table body cells wrap as needed. */
.pretty table td {
    white-space: normal;
}
/* Styles the parameters field content to avoid wrapping. */
td.views-field-field-parameters {
    white-space: nowrap;
}
.path-run .pretty table td {
    padding: 8px 10px;
}

/*
 * Wide tables go beyond content width on desktop-sized screens.
 */

@media all and (min-width: 1200px) {
    /* Move and widen the container to the left and right edges. */
    .pretty {
        position: relative;
        left: calc(calc(50vw - 50%) * -1);
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        padding: 0 15px;
        box-sizing: border-box;
    }
    /* Keep the header content within the main page width. */
    .pretty .view-header {
        max-width: 1200px;
        margin: auto;
    }
    /* Scroll within the view-content container if wider than available. */
    .pretty .view-content {
        overflow-x: auto;
    }
    /* The table doesn't need to stretch this wide if it fits in less. */
    .pretty .view-content > table {
        width: auto !important;
        min-width: 1200px;
        margin: auto;
    }
}


/*
 *
 * Sample Prep Queue.
 *
 */

/*
 * Prep status keys table.
 */

/* Table header cells with grays and thick borders. */
.path-sample-prep-services .view-header table th {
    background: var(--uowdf-color-light-gray-t1);
    border: solid 3px var(--uowdf-color-light-gray-t5);
    border-left-width: 3px;
    border-bottom-width: 2px;
}
/* Make the left border thicker to display similar to status badges. */
.path-sample-prep-services .view-header table td {
    border-left-width: 3px;
}
/* Key colors for prep statuses. */
.error td {
    background-color: #fcf4f2;
    color: #a51b00;
    border: solid thin #f9c9bf;
    border-left-color: #e62600;
}
.warning td {
    background-color: #fdf8ed;
    color: #734c00;
    border: solid thin #f4daa6;
    border-left-color: #e09600;
}
.ok td {
    background-color: #f3faef;
    color: #325e1c;
    border: solid thin #c9e1bd;
    border-left-color: #77b259;
}


/*
 *
 * Views Bulk Operations (VBO).
 *
 */

/* VBO checkboxes have a subtle drop-shadow when unchecked to pop more. */
.views-field-views-bulk-operations-bulk-form input[type="checkbox"] {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
                0 1px 1px 0 rgba(0, 0, 0, 0.14),
                0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
/* VBO checkboxes do not cast a shadow when checked. */
.views-field-views-bulk-operations-bulk-form input[type="checkbox"]:checked {
    box-shadow: none;
}
/* VBO rows that have their checkboxes checked. */
.pretty table tr.selected td {
    background: var(--uowdf-color-uo-yellow-t2);
    border-bottom: solid 2px var(--uowdf-color-uo-yellow-t5);
}
/* VBO rows that are selected, with a sort applied on a column. */
.pretty table tr.selected td.is-active {
    background: var(--uowdf-color-uo-yellow-t1);
    font-variation-settings: var(--font-semi);
}


/*
 *
 * Illumina filters block.
 *
 */

/* Filters group detail element. */
.path-illumina-sequencing .views-exposed-form details {
    width: 100%;
    margin: 0 0 15px;
    padding: 0 0;
    box-sizing: border-box;
    transition: 0.15s ease-in-out all;
}
/* Filters group summery (label). */
.path-illumina-sequencing .views-exposed-form details summary {
    font-variation-settings: var(--font-bold);
    color: var(--uowdf-theme-link-dark);
    font-size: 20px;
    background: var(--uowdf-color-light-gray-t3);
    text-decoration: underline;
}
.path-illumina-sequencing .views-exposed-form details summary:hover,
.path-illumina-sequencing .views-exposed-form details summary:focus {
    text-decoration: none;
    background-color: var(--uowdf-color-light-gray-t2);
}
/* Filters wrapper. */
.path-illumina-sequencing .views-exposed-form details > .details-wrapper {
    max-width: 700px;
    padding: 0px 15px;
    margin: auto;
}

/*
 * Exposed filters on the Illumina Queue view.
 */

/* Filter label. */
.path-illumina-sequencing .views-exposed-form fieldset.form-item legend {
    font-variation-settings: var(--font-bold);
    background: var(--uowdf-color-light-gray);
    padding: 5px 15px;
    display: block;
    width: 100%;
    margin: 0;
    border: solid thin;
    box-sizing: border-box;
}
/* Filter options container. */
.path-illumina-sequencing .views-exposed-form fieldset.form-item .fieldset-wrapper {
    border: solid thin;
    border-top: none;
    padding: 5px;
}

/* Filter field wrapper. */
.path-illumina-sequencing .views-exposed-form .details-wrapper > .form-checkboxes {
    margin: 0 auto 5px;
    max-width: 700px;
    border: solid thin var(--uowdf-color-medium-gray-t7);
    border-top: none;
    padding: 5px 15px;
}
/* Select all/none link above filter options. */
.path-illumina-sequencing .views-exposed-form a.bef-toggle {
    display: block;
    flex: 1 0 100%;
    margin-bottom: 5px;
}
.path-illumina-sequencing .views-exposed-form a.bef-toggle,
.path-illumina-sequencing .views-exposed-form .bef-checkboxes {
    width: 100%
}

/* Grid of checkbox filter options. */
.path-illumina-sequencing .views-exposed-form .bef-checkboxes {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: column;
    align-items: stretch;
}
/* Split the options into common names grouped columns. */
.path-illumina-sequencing .bef-checkboxes .form-item[class*="field-service-requested"] {
    grid-column: 1;
}
.path-illumina-sequencing .bef-checkboxes .form-item[class*="novaseq"] {
    grid-column: 2;
    margin-right: 0;
}

/* Checkbox wrapper, field, and label. */
.path-illumina-sequencing .views-exposed-form .form-item.form-type-checkbox {
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: center;
    align-content: stretch;
    height: 100%;
}
.path-illumina-sequencing .views-exposed-form .form-item.form-type-checkbox > input {
    display: inline-block;
    margin: 0 5px;
}
.path-illumina-sequencing .views-exposed-form .form-item.form-type-checkbox > label {
    padding: 2px 8px 2px 3px;
    font-variation-settings: var(--font-semi);
    border: thin dotted rgba(0,0,0,0.1);
    border-style: dotted none;
    width: 100%;
    display: inline-block;
}

/* Filter form actions and apply/reset buttons. */
.path-illumina-sequencing .views-exposed-form details + .form-actions {
    display: none;
}
.path-illumina-sequencing .views-exposed-form details[open] + .form-actions {
    display: block;
}
.path-illumina-sequencing .views-exposed-form input[type=submit] {
    padding: 4px 15px;
}
.path-illumina-sequencing .views-exposed-form input[type=submit]:first-child {
    padding: 4px 30px;
}

/*
 * Filter responsiveness.
 */

@media all and (max-width: 400px) {
    /* Filter form actions and apply/reset buttons. */
    .path-illumina-sequencing .views-exposed-form details[open] + .form-actions {
        text-align: center;
    }
    .path-illumina-sequencing .views-exposed-form input[type="submit"] {
        width: 60%;
        margin: auto;
    }
    .path-illumina-sequencing .views-exposed-form input[type="submit"]:first-child {
        width: 85%;
        padding: 8px 16px;
    }
}
@media all and (max-width: 600px) {
    /* Filter field wrapper. */
    .path-illumina-sequencing .views-exposed-form .details-wrapper > .form-checkboxes {
        margin: 0 auto;
        border: none;
    }
    /* Grid of checkbox filter options. */
    .path-illumina-sequencing .views-exposed-form .bef-checkboxes {
        display: block;
    }
}

/*
 * Email sent message details container.
 */

/* Hide/show the proper span in the summary based on if it is open. */
details[open] .show-when-open,
details .show-when-closed {
  font-variation-settings: var(--font-bold);
  padding: 15px;
  display: block;
}
details .show-when-open,
details[open] .show-when-closed {
  display: none;
}
/* Make the details element stand out. */
details.email-msg {
    background: transparent;
    border: solid thin;
}
/* Add a background to the details when it is open. */
details.email-msg[open] {
    background: var(--uowdf-color-uo-yellow);
}
/* The contents of the email when expanded is white. */
details.email-msg > .details-wrapper {
    background: white;
}