/**
*
* global.css
*
* This file contains styles that were used for all pages of the mock-up.
* It's organized into 3 sections:
*   1. HTML tag overrides
*   2. IDs, alphabetically (the header and footer styling)
*   3. Class names, alphabetically
*
*/

/* Global defaults for native HTML tags */
body {
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
}

h1 {
    margin-bottom: 0;
}

h2 {
    font-size: 1.3rem;
    font-weight: bold;
}

h3 {
    font-size: 1.1rem;
    font-weight: bold;
}

h5 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: .2rem;
}

label {
    cursor: pointer;
}
/* End of global defaults for native HTML tags section */

/* Styles by ID */
#footer {
    background-color: #D3D3D3;
}

#ref-genome-select {
    max-width: 30em;
}

#site-banner {
    background-color: #0079C2;
    color: #ffffff;
}

#tool-info {
    background-color: #D3D3D3;
    font-size: 0.9rem;
}

#tool-summary {
    font-size: 0.8rem;
    line-height: 1.1;
}


/* Styles by class */
.btn-gpp-main {
    background-color: #0079C2;
    color: #ffffff;
}

.btn-gpp-main:hover {
    background-color: #06659e;
    color: #ffffff;
    text-decoration: none;
}

.btn-gpp-main:focus {
    background-color: #06659e;
    color: #ffffff;
    text-decoration: none;
}

.btn-gpp-advanced-error {
    background: linear-gradient(135deg, #0079C2 0%, #06659e 100%);
    color: #ffffff;
    border: 1px solid #dc3545;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.btn-gpp-advanced-error:hover {
    background: linear-gradient(135deg, #06659e 0%, #054d7a 100%);
    color: #ffffff;
    border-color: #c82333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.btn-gpp-advanced-error::before {
    content: "⚠";
    margin-right: 6px;
    font-size: 0.9em;
    color: #dc3545;
}

.btn-gpp-advanced-warning {
    background: linear-gradient(135deg, #0079C2 0%, #06659e 100%);
    color: #ffffff;
    border: 1px solid #ffc107;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.btn-gpp-advanced-warning:hover {
    background: linear-gradient(135deg, #06659e 0%, #054d7a 100%);
    color: #ffffff;
    border-color: #e0a800;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.btn-gpp-advanced-warning::before {
    content: "⚠";
    margin-right: 6px;
    font-size: 0.9em;
    color: #ffc107;
}

.crispick-collapse-link {
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1rem !important;
}

.crispick-collapse-link::before {
    content: url("/gppx/crispick/versionedassets/images/chevron-down-solid.svg");
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.crispick-collapse-link[aria-expanded="true"]::before {
    content: url("/gppx/crispick/versionedassets/images/chevron-up-solid.svg");
}

.crispick-collapse-link::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #707070;
    margin-left: 0.5em;
}

.crispick-collapse-card {
    margin-bottom: 1rem !important;
    padding: 0.5rem !important;
}

.crispick-modal {
    display: block; /* Stay in place */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.crispick-modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 1rem;
    border: 1px solid #888;
    border-radius: 5px;
    width: 70%; /* Could be more or less, depending on screen size */
}

.loading-modal {
    display: block; /* Stay in place */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.loading-modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 1rem;
    border: 1px solid #888;
    border-radius: 5px;
    width: min-content
}

.clickable {
    cursor: pointer;
}

.inline-list {
    padding-left: 0;
    margin-left: 1rem;
}

.inline-list > li {
    float: left;
    margin-right: 2.5rem;

}

.lh-1 {
    line-height: 1;
}

.small-caps {
    font-variant: small-caps;
}

.use-seq-font {
    font-family: 'Roboto Mono', monospace;
}

.wrapper {
    min-height: 100vh;
}

.text-small {
    font-size: 85%;
}

.bg-orange {
    background-color: #e69138 !important;
}

.bg-midorange {
    background-color: #f6b26b !important;
}

.bg-wheat {
    background-color: rgb(250, 207, 145) !important;
}

/** Auto Complete Styles */
.bootstrap-autocomplete {
    /* can enable this if you want the menu to only show a small number of the search results;
       will need to resolve functionality with keying up/down within the menu */
    /* max-height: 300px; */
    /* overflow-y: auto; */

    /* setting these to 100% makes the dropdown responsize to resizing */
    max-width: 100%;
    min-width: 100%;
}

.autocomplete-main {
    font-size: 1rem;
}

.autocomplete-desc {
    font-size: .85rem;
}

.bootstrap-autocomplete > .dropdown-item {
    /* to prevent jittering of the UI elements when a border is added to the active item */
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.bootstrap-autocomplete > .dropdown-item.active {
    background-color: #F6F6F6;
    color: #000000;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

.autocomplete-highlight {
    background-color: #CCECFF;
    padding: 0;
}

/** Datatables Styles*/
table.dataTable thead .sorting_asc {
    background-image: url(../../static/img/table_icons/sort_asc.png);
}

table.dataTable thead .sorting_desc {
    background-image: url(../../static/img/table_icons/sort_desc.png);
}

table.dataTable thead .sorting {
    background-image: url(../../static/img/table_icons/sort_both.png);
}

table.dataTable {
    font-size: 0.9rem;
}

/* since we're using the scroll functionality in datatables, we need to target the div that contains all the tables created by datatables and set a border on that */
.dataTables_scroll {
    border: 1px solid #707070;
}

/* we have to target the original_table_ID_wrapper if we're adding scroll elements to the table */
#gene-guide-table_wrapper > .dataTables_scroll > .dataTables_scrollHead > .dataTables_scrollHeadInner > table.dataTable > thead {
    background-color: #CCECFF;
}

table.dataTable > thead > tr > th {
    border-right: 1px solid #ccc;
}

table.dataTable > thead > tr > th:last-child {
    border-right: 0;
}

.dataTables_scrollBody > table.dataTable.cell-border tbody td:first-child {
    border-left: 0;
}

.dataTables_scrollBody > table.dataTable.cell-border tbody td:last-child {
    border-right: 0;
}

table.dataTable tbody>tr.selected {
    background-color: #CCECFF;
}

table.dataTable.hover tbody>tr.selected:hover {
    background-color: #9ED1F0;
}

/** Bootstrap Styles */
.download-table-icon.bi-arrow-down-circle-fill {
    color: #0079C2;
}

.edit-input > .bi.bi-pencil-square {
    opacity: 0.33;
}

.edit-input:hover > .bi.bi-pencil-square {
    opacity: 1;
}

.nav-link {
    padding: var(--bs-nav-link-padding-y) 0.4rem !important;
}

/** Progress Styles */
#status-time {
    font-size: .8rem;
    color: #888888;
}

.step-complete > circle {
    stroke: #7FBD43;
    stroke-width: 1px;
    fill: #7FBD43;
}

.step-processing > circle {
    stroke: #707070;
    stroke-width: 1px;
    fill: transparent;
}

/** Overriding JQuery UI Slider styles*/
.ui-widget-header {
    background: #3e89e1 !important;
}

/* ------- Scope Icons ------- */
button.scope {
    display: inline;
    padding: .2em .4em;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border: none;
    border-radius: .25em;
    margin: 0px 1px;
}

button.scope:not(.grey):hover {
    pointer-events: all;
    color: #23527c;
    text-decoration: underline;
}

button.scope.selected {
    font-size: 1.25rem;
    pointer-events: none;
}

button.grey {
    background-color: #ccc;
}

button.blue {
    background-color: #428bca;
}

button.blue.selected {
    background-color: #226baa;
}

button.green {
    background-color: #50b850;
}

button.green.selected {
    background-color: #309830;
}

button.red {
    background-color: #d9534f;
}

button.red-selected {
    background-color: #b9332f;
}


/**
*
* run-results-page.css
*
* Styles for run-results-page.html
* Organized into 3 sections:
*   1. classes dictating fill for circles indicating result status (.quota-met, .quota-none, .quota-partial)
*       - These are used in both the table filter and cells in the table
*   1. IDs, alphabetically
*   2. Class names, alphabetically
*
*/

/* result status colors */
.quota-met > circle {
    fill: #7FBD43;
}

.quota-none > circle {
    fill: #B31F28;
}

.quota-partial > circle {
    fill: #CEA600;
}
/* result status colors */


/* Styling by ID */
#gene-guide-toggle > label {
    font-size: .8rem;
}

#summary-table-filters {
    font-size: 0.9rem;
    font-weight: bold;
}


/* Styling by classes */
.btn-gpp-toggle {
    background-color: rgba(0, 0, 0, 0.1);
    color: #343A40;
    border-color: #343A40;
}

.btn-gpp-toggle.active {
    background-color: transparent;
    color: #343A40;
    border-color: #343A40;
}

.btn-gpp-toggle:hover {
    color: #fff;
    background-color: #343A40;
    border-color: #343A40;
}

/* Crispick 0.5 */
.run-info {
    line-height: 1.1;
}

.run-head {
    margin-top: 1rem;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/*Crispick _*/
.run-summary-head {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0rem;
}

.run-summary-info {
    background-color: #E0EFF8;
    line-height: 1;
}

.run-summary-subhead {
    margin-top: .1rem;
    font-size: .7rem;
    margin-bottom: .3rem;
    text-transform: uppercase !important;
}

.run-summary-val {
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: .1rem;
}

.run-summary-val-info {
    font-weight: 400;
    font-size: 0.8rem;
}

.table-key {
    margin-left: 0.5rem;
    margin-top: -0.5rem;
    padding-top: 0;
    font-size: small;
}

/**
*
* input-page.css
*
* Styles for input-page.html
* Organized into 4 sections:
*   1. Bootstrap overrides
*   2. HTML tag overrides (these tags have additional specifics to make them specific to just that instance)
*   3. IDs, alphabetically
*   4. Class names, alphabetically
*
*/

/* overriding bootstrap */
.custom-control-input:disabled~.custom-control-label, .custom-control-input[disabled]~.custom-control-label {
    color: rgba(0, 0, 0, 0.2);
}
/* end of bootstrap overrides */


/* HTML tag overrides */
label[for="target-file-upload"] {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;

    color: #0056b3;
    text-decoration: underline;
}
label[for="target-file-upload"]:hover {
    color: #0056b3;
    text-decoration: underline;
}

hr.gpp-divider {
    border-top: 1px solid #707070;
    opacity: initial;
}
/* end of HTML tag overrides */


/* Styling by ID */
#advanced-settings {
    border-top: 2px solid #306bb1;
    background-color: #e5e5e5;
}

#adv-opts-title {
    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

#adv-opts-title.is-invalid {
    color: #dc3545;
}

#adv-opts-title::before {
    content: url("/gppx/crispick/versionedassets/images/chevron-down-solid.svg");
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

#adv-opts-title[aria-expanded="true"]::before {
    content: url("/gppx/crispick/versionedassets/images/chevron-up-solid.svg");
}

#adv-opts-title::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #707070;
    margin-left: 0.5em;
}

#adv-opts-title.is-invalid::after {
    border-bottom: 1px solid #dc3545;
}

#drop-area-description {
    padding-left: 1.1rem;
}

#file-drop-area {
    border: 2px solid #A3A3A3;
}

#file-drop-area.is-invalid {
    border: 2px solid #dc3545;
}

#file-drop-area.highlight {
    background-color: #F3F3F3;
}

#inner-file-drop-area {
    border: 2px dashed #D3D3D3;
    height: 15rem;
    font-family: sans-serif;
}

#ref.form-select {
    max-width: 25rem;
}

#validate-btn {
    background-color: #0079C2;
    /* This hardcoded width should match the width of the reCAPTCHA. Note that you need to account for the box shadow */
    width: 302px;
}

#validate-btn:hover {
    color: #212529;
    text-decoration: none;
}

#validate-btn.invalid {
    background-color: #dc3545;
    border-color: #dc3545;
    pointer-events: none;
}

#validate-btn.validate-btn-disabled {
    background-color: #6c757d;
    border-color: #6c757d;
}

/*#validate-btn-container {*/
/*    padding-right: 2px; !* to align it with the CAPTCHA button properly -- has a box shadow *!*/
/*}*/
/* end of styling by ID */

#validate-notifications { /*hardcoded width to match #validate-btn*/
    width: 18.875rem;
}


/* Styling by class */
.disabled-input {
    color: rgba(0, 0, 0, 0.2);
}

.example-input-title {
    font-weight: 600;
}

.example-input-txt {
    font-size: .8rem;
}

.gpp-info-btn {
    font-size: .9rem;
    text-align: left;
    border-radius: 0;
    background-color: #D0E6F4;
    border: 0;
    padding: 0;
}

.gpp-info-btn > a {
    color: inherit;
}

.gpp-info-btn-inner {
    width: 100%;
    padding: .375rem .75rem;
}

.input-description {
    font-size: .7rem;
}
/* end of styling by class */

/**
*
* login.css
*
* Styles for login.html
* Organized into 3 sections:
*   1. IDs, alphabetically (the header and footer styling)
*   2. Class names, alphabetically
*   3. Additional media queries to deal with window resizing
*
*/

/* Styling by class */
.login-content {
    background-color: #EAEAEA;
}

.login-field-info {
    display: inline-block;
    width: 70px;
}

.login-input {
    margin-left: 0.5rem;
    background-color: #E5E5E5;
    width:75%;
    border: 0;
    padding: .3rem;
}
/* end of styling by class */


/* Styling by ID */
#login-content-container {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border: 1px solid #707070;
    border-left: 0;
    max-width: 800px;
}

#login-crispick-info {
    background-color: #0079C2;
    color: #FFFFFF;
    padding-top: 5rem;
}

#login-edition {
    font-size: 0.8rem;
}

#login-tool-summary {
    font-size: 0.8rem;
    line-height: 1.4;
}

#login-user-info {
    background-color: #FFFFFF;
    padding-top: 8rem;
}
/* end of styling by ID */


/* Media queries */
@media screen and (max-width: 768px) {
    #login-box-wrapper {
        padding: 1rem;
    }
}

@media screen and (max-width: 576px) {
    .login-input {
        width:95%;
    }
}
/* end of media queries */

/**
*
* validation-page.css
*
* Styles for run-results-page.html
* Organized into 3 sections:
*   1. classes dictating fill for circles identifying input status (.input-valid, .input-invalid, .input-duplicate)
*       - These are used in both the table filter and cells in the table
*   2. IDs, alphabetically
*   3. Class names, alphabetically
*
*/

/* input status colors */
.duplicate-input > circle {
    fill: #CEA600;
}

.invalid-input > circle {
    fill: #B31F28;
}

.valid-input > circle {
    fill: #7FBD43;
}
/* end of input status colors section */

/* Styles by ID */
#full-seq {
    word-wrap: break-word;
}

#reset-table > button {
    font-size: 0.9rem;
}

#table-filters {
    font-size: 0.9rem;
    font-weight: bold;
}
/* end of styles by ID */

/* Styles by class */
.important-info-txt {
    color: #B31F28;
    font-size: 0.8rem;
}

table.popover-table {
    border: 1px solid #707070;
}

table.popover-table > thead {
    border-bottom: 1px solid #707070;
}

table.popover-table > thead > tr > th, table.popover-table > tbody > tr > td {
    border-right: 1px solid #707070;
    padding: .2rem .5rem;
}
/* end of styles by class */

/* Changelog */
#changelog-table {
    border: 1px solid #707070;
}

/* Info pages */
.info-content > p {
    line-height: 160%
}

.coordinate-font {
    font-family: Fixed, monospace;
}

.info-toc {
    font-size: 0.875rem;
}

.tab-content > .border-secondary {
    border-color: #dee2e6 !important;
}

.info-emphasized {
    color: teal;
    font-weight: bolder;
}

#cookie-notice {
    background-color: #006eb0;
    color: white;
    z-index: 10000;
    position: sticky;
    width: 100%;
    bottom: 0;
    display: block;
    box-shadow: #121212 2px 2px 14px 2px;
}

.tooltip-inner {
    max-width: 400px;
}

a.stealthy-link {
    color: var(--bs-body-color);
    text-decoration: none;
}

a.stealthy-link:visited {
    color: var(--bs-body-color);
    text-decoration: none;
}

.display-contents {
    display: contents;
}

.display-none {
    display: none;
}

.link-like {
    color: rgba(var(--bs-link-color-rgb));
}

.link-like:hover {
    text-decoration: underline;
    cursor: pointer;
}