/* ABACUS.Client.WebApp specific css */

/* main body */
body {
    background-color: rgba(204, 204, 204, 0.25);
}
.main {
    padding: 30px;
    margin-left: 200px;    
    height: 100%;
}

.login {
    background-color: rgba(204, 204, 204, 0.25);
}

.login > .grid {
    height: 100%;
}

.login .image {
    margin-top: -100px;
}

.login .column {
    max-width: 450px;
}

/*.searchresult {
    width: 800px !important;
}*/

.ui.accordion .doc-lib-btn.right {
    float: right;
}
.ui.accordion.styled .accordion .title.doc-node {
    color: #000000;
}

.ui.card > .content.svy-header {
    background-color: #1A2D8C;
    flex-grow: 0; /*Prevents growth of header when card grows*/
}
.ui.card > .content.svy-header > .header {
    color: rgba(255, 255, 255, 1.0);
}
.ui.card > .content.svy-header > .meta {
    color: rgba(255, 255, 255, 0.8);
}
.ui.card > .content.svy-header > .header > .proj-code {
    font-weight: normal;
    opacity: 0.6;
}
.ui.card > .content.svy-header > .header > .proj-code::before {
    margin-inline: 0.2rem;
    content: "|";
}
.ui.card > .content.svy-header > .meta > .svy-code {
    font-weight: normal;
    opacity: 0.6;
}
.ui.card > .content.svy-header > .meta > .svy-code::before {
    margin-inline: 0.2rem;
    content: "|";
}

.ui.card > .content.svy-header > .header > .status-code {
    font-weight: normal;
    opacity: 0.6;
}

.ui.card > .content.svy-header > .header > .status-code::after {
    margin-inline: 0.2rem;
    content: "|";
}

.ui.card .content.sub-header {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: rgba(26, 45, 140, 0.1);
    flex-grow: 0; /*Prevents growth of header when card grows*/
}

.ui.card.archived-content[hidden] {
    display: none;
}

.ui.header .ui.sub.header.meta {
    display: inline;
    text-transform: none;
    padding-left: 1rem;
}

.ui.menu .item.noborder:before {
    width: 0; /*Remove borders from menu items*/
}

/*-------------------
        hyperlink "disable" style if href not set
--------------------*/
a:not([href]), a[href=""] {
    color: #aaaaaa;
    cursor: not-allowed !important;
}

/*-------------------
        Grid styling
--------------------*/

.ui.grid label, .ui.form .field label {
    font-weight: 700;
}

.ui.grid.collapsed .row {
    padding-top: 0rem;
    padding-bottom: 0rem;
}
.ui.grid.collapsed .row .column {
    padding-left: 0rem;
    padding-right: 0rem;
}
.ui.grid .readonly.column {
    background-color: rgb(243, 244, 245);
    color: rgba(0,0,0,.7) ;
}
.ui.grid .row .readonly.column {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: -1rem;
    margin-bottom: -1rem;
}

/*-------------------
        Table styling
--------------------*/
.ui.table td.reference {
    background-color: rgba(0,0,0,.03);
    color: rgba(0,0,0,.5)
}

.ui.table tr.sub.header td, .ui.definition.table tr.sub.header td:first-child:not(.ignored) {
    background: rgba(0,0,0,0.07);
    text-align: center;
    color: rgba(0,0,0,.87);
    font-weight: 700;
}
@media only screen and (max-width: 767px) {
    .ui.table:not(.unstackable) tr:not(.sub):not(.header) {
        padding-top: 0em;
        padding-bottom: 0em;
    }

    .ui.table:not(.unstackable) tr.sub.header {
        padding-top: 0em;
        padding-bottom: 0em;
    }
}

.ui.definition.table thead:not(.full-width) th.show-first-cell:first-child,
.ui.definition.table tfoot:not(.full-width) th.show-first-cell:first-child {
    pointer-events: auto;
    background: rgb(249, 250, 251);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.87);
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*For complex headers (rowspan/colspan)*/
.ui.definition.table thead:not(.full-width) tr:not(:first-child) th:first-child {
    pointer-events: auto;
    background: rgb(249, 250, 251);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.87);
    -webkit-box-shadow: none;
    box-shadow: none;
}
.ui.definition.table thead:not(.full-width) tr:not(:first-child) th:nth-child(2) {
    border-left: none;
}

.ui.table .inline.fields {
    margin-bottom: 0px;
}

.ui.table span.light-grey {
    color: rgb(180,180,180);
}


/*-------------------
        Progress bars
--------------------*/
.ui.progress.success .bar {
    background-color: #1A2D8C !important;
}
td .ui.progress.no-label {
    margin-bottom: 0px;
}
td .ui.progress.width-20 {
    min-width: 20rem;
}

/*-------------------
        Spaced Spans
--------------------*/
.spaced.spans span {
    margin-right: 1.0rem;
    white-space: nowrap;
}
td .spaced.spans span {
    white-space: normal;
}
.large.spaced.spans span {
    margin-right: 1.14285714rem;
}
.big.spaced.spans span {
    margin-right: 1.28571429rem;
}
.huge.spaced.spans span {
    margin-right: 1.42857143rem;
}
.spaced.spans span:last-child {
    margin-right: 0;
}

/*-------------------
        Borderless table
--------------------*/
.ui.table.borderless {
    border-width: 0;
}
.ui.table.borderless tr td {
    border-width: 0;
}

/*-------------------
        Table/Grid label styling
--------------------*/

td.grid-label, div.column.grid-label {
    background-color: #1a2d8d !important;
    color: white;
    font-weight: 700;
}


/*-------------------
        Sample Analysis Nav bar
--------------------*/

sample-analysis-nav .ui.two.column.stackable.grid .row .column {
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    padding-top: 0rem !important;
}

sample-analysis-nav .ui.stackable.grid {
    margin-left: -1rem !important;
}

sample-analysis-nav td.grid-label {
    word-break: break-word;
}

sample-analysis-nav .meta {
    color: rgb(180,180,180);
}
sample-analysis-nav {
    font-weight: 800;
}

/*-------------------
        Analysis Tasks
--------------------*/
.task-header .ui.attached.header {
    background-color: #F4F4F4;
}
.task-header[data-taskComplete="Complete"] .ui.attached.header {
    background-color: #EEEEEE;
}
.task-header .header .icon {
    font-size: 1em;
    vertical-align: baseline;
    color: #1A2D8C;
}
div.ui.segment.task-action {
    cursor: pointer;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
div.task-action[data-taskComplete="Complete"] {
    background-color: rgb(252,255,245);
    color: rgb(44,102,45); 
}
.task-data-summary .summary-header {
    margin-bottom: 0.5em;
}
.task-data-summary .summary-status {
    margin-bottom: 0.5em;
}
#task-list .summary-status {
    display: none;
}
#task-list.calc-pending .summary-status,
#task-list.calc-refreshing .summary-status,
#task-list.calc-error .summary-status {
    display: block;
}
#task-list .summary-status .calc-msg {
    display: none;
}
#task-list.calc-pending .summary-status .calc-msg.calc-pending {
    display: flex;
}
#task-list.calc-refreshing .summary-status .calc-msg.calc-refreshing {
    display: flex;
}
#task-list.calc-error .summary-status .calc-msg.calc-error {
    display: flex;
}
#task-list.calc-refreshing .summary-content {
    display: none;
}
.summary-status .ui.message,
.summary-status .ui.message:first-child,
.summary-status .ui.message:last-child {
    margin-top: 0;
    margin-bottom: 0;
}
/*-------------------
        (taxa) record label
--------------------*/
.ui.label.record-label {
    padding: 0;
    border: none;
    display: block;
    margin-left: 0;
    margin-top: 0.5em;
}
.ui.label.record-label:first-child {
    margin-top: 0em;
}
.ui.header .label.record-label {
    margin-left: 0;
    margin-top: 0.75rem;
}
.ui.label.record-label .detail .action {
    padding-top: 0.5rem;
    font-weight: 400;
}
.ui.label.record-label .extra-detail {
    padding-top: 0.5rem;
    font-weight: 400;
}

/*-------------------
        abundance editor
--------------------*/
.abundance-editor .ui.buttons .button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/*-------------------
        Form readonly styles
--------------------*/
.ui.form .column.readonly input[readonly] {
    color: rgba(0,0,0,.87);
    opacity: 0.65; /*This is what is on disabled dropdowns to grey them out*/
}
.ui.form .column.readonly .ui.dropdown.search.readonly {
    opacity: 0.65; /*This is what is on disabled dropdowns to grey them out*/
}
.ui.form .column.readonly .ui.dropdown.search.readonly div.text {
    color: rgba(0,0,0,.87);
}
/*-------------------
        dropdown lists in modals
--------------------*/
.modal .scrolling.content .ui.selection.dropdown .menu {
    max-height: 11rem;
}

/*-------------------
        pseudo-table, to create alignment within table cells (invisible columns)
--------------------*/
td.pseudo-table {
    display: table;
    width: 100% !important;
}
td.pseudo-table div {
    display: table-cell;
    vertical-align: middle;
}
td.pseudo-table div:not(:first-child) {
    padding-left: 0.5rem;
}
td.pseudo-table.two-col-split div {
    width: 50%;
}

@media only screen and (max-width: 767px) {
    /*when stacked */
    .ui.table:not(.unstackable) td.pseudo-table div {
        display: inline-block;
    }
}

/*-------------------
        validation message in modals
--------------------*/
.ui.modal .ui.form .ui.error.message ul {
    padding-left: 0px;
}
.ui.modal .ui.form .ui.error.message ul li {
    margin-left: 1em;
}

/*-------------------
        QC Index styling
--------------------*/
div.qc-grid tr.remove td:not(.no-qc-styling) {
    color: red;
    text-decoration: line-through;
}
div.qc-grid tr.new td:not(.no-qc-styling) {
    color: forestgreen;
}
div.qc-grid tr.amend td .amended-origin {
    color: orange;
    display: block;
    text-decoration: line-through;
}
div.qc-grid tr.remove i.icon,
div.qc-grid tr.amend i.icon,
div.qc-grid tr.check i.icon,
div.qc-grid tr.new i.icon {
    text-decoration: none;
}
div.abundance-history-icon {
    color: #606060;
}
.qcindex tr.remove td.qc-status {
    color: red;
}
.qcindex tr.amend td.qc-status {
    color: orange;
}
.qcindex tr.new td.qc-status {
    color: forestgreen;
}
.qcindex tr.check td.qc-status .ui.checkbox label {
    color: green;
}

.qcindex tr.new td:not(.no-qc-styling) {
    color: forestgreen;
}
.qcindex tr.remove td:not(.no-qc-styling) {
    color: red;
    text-decoration: line-through;
}
.qcindex tr.amend td .amended-origin {
    color: orange;
    display: block;
    text-decoration: line-through;
}
.qcindex tr i {
    text-decoration: none;
}
.qcindex tr.amend td .amended-origin.hidden {
    display: none;
}
div.abundance-editor .ui.icon.button, div.abundance-editor .ui.basic.button {
    padding-bottom: 0;
    padding-top: 0;
}
display-qc-origin span {
    padding-top: 0.5rem;
}

.qcindex tr:last-child .qc-action .ui.dropdown div.menu {
    top: auto;
    bottom: 100%;
    /*Sets QC Actions dropdown link menu to open upwards for last tr on page*/
}
.qcindex tr:last-child:first-child .qc-action .ui.dropdown div.menu {
    top: -1px;
    bottom: unset;
    right: 2rem;
    /*Sets QC Actions dropdown link menu to open upwards for last (and only) tr on page*/
}
/*-------------------
        Form styling
--------------------*/
.ui.form .inline.field > :first-child, .ui.form .inline.fields .field > :first-child {
    margin-right: 0.25em;
}

/*-------------------
        DataTables styling
--------------------*/
.ui.secondary.menu .right.menu .item:last-child {
    padding-right: 0;
}
.ui.secondary.menu .right.menu .ui.small.button {
    font-size: .92857143rem;
}
.dataTables_wrapper .ui.grid.pds-datatable {
    margin-top: 0;
}
.dataTables_wrapper .pds-datatable div.left-footer > div {
    display: inline-block;
}
.dataTables_wrapper .pds-datatable div.left-footer > div:not(:first-child) {
    margin-left: 2rem;
}
.dataTables_wrapper .pds-datatable td.details-control {
    text-align: center;
    cursor: pointer;
    
}
.dataTables_wrapper .pds-datatable td.details-control i.bordered.icon {
    height: 1em; /*Needed as something in table makes icons too big otherwise (border stretches to full height of cell)*/
}

.dataTables_wrapper .pds-datatable td.details-batch table {
    width: 20em;
}

.dataTables_wrapper .pds-datatable td.details-batch table tr td {
    border: none;

}

.dataTables_wrapper .pds-datatable td.details-batch table tr[colspan="2"] td {
    text-align: center;
}

.ui.form tr.error input[type="text"] {
    background: #fff6f6;
    border-color: #e0b4b4;
    color: #9f3a38;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*-------------------
        Save Status Message block
--------------------*/
.save-status-msg div.ui.message {
    display: none;
}
.save-status-msg div.ui.message:first-child {
    margin-top: 1em;
}
.save-status-msg.doing div.ui.message.doing, 
.save-status-msg.success div.ui.message.success, 
.save-status-msg.error div.ui.message.error, 
.save-status-msg.info div.ui.message.info, 
.save-status-msg.warning div.ui.message.warning, 
.save-status-msg.negative div.ui.message.negative, 
.save-status-msg.positive div.ui.message.positive {
    display: flex;
}

.save-status-msg div.ui.label {
    display: none;
}
.save-status-msg.doing div.ui.label.doing,
.save-status-msg.success div.ui.label.success,
.save-status-msg.error div.ui.label.error,
.save-status-msg.info div.ui.label.info,
.save-status-msg.warning div.ui.label.warning,
.save-status-msg.negative div.ui.label.negative,
.save-status-msg.positive div.ui.label.positive {
    display: inline-block;
}
/*-------------------
        Transparent Button styling
--------------------*/
.ui.button.transparent {
    background-color: transparent;
}


/*-------------------
        Medin Compliance indicators
--------------------*/
.fields:not(.inline) label i.medinComp {
    float: right;
}

label i.medinComp.light-grey {
    color: rgb(180,180,180);
}


/*-------------------
        Filter items in menues (for styling fields used to filter results in index pages)
--------------------*/
.ui.secondary.menu.filter-menu .item .field label {
    margin-right: 1em;
    font-weight: 700;
}
.ui.secondary.menu.filter-menu .item .field {
    padding-right: 1em;
}
.ui.secondary.menu.filter-menu .item:first-child {
    padding-left: 0;
}

/*-------------------
        Disabled icons
--------------------*/
i.icon.disabled {
    color: rgba(0,0,0,.47);
}

/*-------------------
        Internal QC report
--------------------*/
tr.taxa-error td.audit-data,
tr.taxa-error td.audit-data .ui.label.record-label,
tr.new-taxa td.audit-data,
tr.new-taxa td.audit-data .ui.label.record-label,
tr.residue-taxa td.audit-data,
tr.residue-taxa td.audit-data .ui.label.record-label,
tr.taxa-removed td.audit-data,
tr.taxa-removed td.audit-data .ui.label.record-label {
    color: #9f3a38;
    background: #fff6f6;
}

tr.qual-diff td.audit-data,
tr.qual-diff td.audit-data .ui.label.record-label,
tr.policy-diff td.audit-data,
tr.policy-diff td.audit-data .ui.label.record-label,
tr.no-impact td.audit-data,
tr.no-impact td.audit-data .ui.label.record-label {
    color: #2c662d;
    background: #fcfff5;
}

/*internal qc - style qual diff taxa as errors*/
table.internal-qc tr.qual-diff td.audit-data,
table.internal-qc tr.qual-diff td.audit-data .ui.label.record-label {
    color: #9f3a38;
    background: #fff6f6;
}

td.abundance-error,
tr.qual-diff td.abundance-error,
tr.policy-diff td.abundance-error,
tr.no-impact td.abundance-error {
    color: #9f3a38;
    background: #fff6f6;
    font-weight: 700;
}

/*-------------------
        Span Hoverinfo
--------------------*/
span.hoverinfo[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 1px;
}

/*-------------------
        Defintiion table pointer events
    Semantic UI disables these, but need them enabled for popup info boxes
--------------------*/
.ui.definition.table thead:not(.full-width) th:first-child {
    pointer-events: auto; 
}

/*-------------------
        Semantic checkboxes that contain labels and icons, override label display: block
--------------------*/
div.ui.checkbox.icon-checkbox label {
    display: inline-block;
}
/*-------------------
        Dashboard group buttons - tile/table layout
--------------------*/
button.ui.icon.button {
    padding-left: 20px;
    padding-right: 20px;
}

button.ui.icon.button.disabled {
    background-color: #88c1ec
}

/*-------------------
        Dashboard group buttons - 'or' divider
--------------------*/
div.or::before {
    font-size: 12px;
}

/*-------------------
Species list info panel
--------------------*/
div.species-list-info {
    display: inline-block;
    padding: 0.5em;
    padding-right: 1em;
    margin-right: 2em;
    margin-bottom: 1em;
    border-radius: .28571429rem;
    border: 2px solid rgba(34,36,38,.1);
}

/*-------------------
Species list checkbox
--------------------*/
div.ui.toggle.checkbox.speciesListChk {
    padding-top: 0.9em;
}

/*----------------------
Species list msg divider
-----------------------*/
div.ui.warning.message p hr {
    border-top: 1px dashed #573a08;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-bottom: 0.8em;
}

div.survey-dropdown-menu .map.pin.icon.pinned {
    color: #2185d0;
}

/*----------------------
Dashboard TableList
-----------------------*/


#TableList .map.pin.icon {
    color: grey;
}

#TableList .map.pin.icon:hover {
    cursor: pointer;
    color: black;
}

#TableList .map.pin.icon.pinned {
    color: #2185d0;
}

#TableList .map.pin.icon.pinned:hover {
    color: #88c1ec;
}

#TableList.k-grid table.analysis-batch-table {
    border: 1px solid rgba(34,36,38,.15);
    border-radius: .28571429rem;
}

#TableList.k-grid table.analysis-batch-table td {
    border: none;
    padding: .78571429em .78571429em;
}

#TableList.k-grid table.analysis-batch-table td:first-child {
    width: 60%;
    white-space: nowrap;
}

#TableList.k-grid table.analysis-batch-table td:nth-child(2) {
    text-align: right;
}

#TableList.k-grid table.analysis-batch-table tr:hover {
    background-color: transparent !important;
}

/* Collector */
#atlwdg-trigger {
    top: 90%;
    background-color: rgba(255, 0, 0, 0.7);
}