.QueryAndDownloadTabs {
    position: relative;

    :global(.citationRule) {
        position: absolute;
        z-index: 10;
        top: 10px;
        right: 20px;
        font-size: 12px;
    }
}

.QueryContainer {
    :global(.sectionLabel) {
        min-width: 246px;
    }

    &:global(.forkedMode) {
        /*> div:nth-child(2) {
          margin-top:0px !important;
        }*/

        .forkedButtons {
            margin-top: 10px;
            justify-content: center;
            align-items: center;
            > div {
                /* we have to use span to fix issue with mouseover events and disabled button controls */
            }
            a {
                pointer-events: all !important;
                margin: 0 10px;
            }
        }
    }

    label {
        margin-bottom: 0;
        font-weight: normal;
    }
}

.errorMessage {
    color: $redError;
    font-weight: bold;
}

.oqlMessage {
    color: $brand-info;
    font-weight: bold;
}

.CancerStudySelector {
    height: 400px;
}

.CancerStudySelector,
.MolecularProfileSelector,
.DataTypePrioritySelector,
.CaseSetSelector,
.StudySelection,
.GeneSetSelector {
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-shadow: 0 0 1px #e9e9e9;

    span.icon {
        text-align: center;
        margin-right: 4px;
        width: 16px;
        height: 16px;
        line-height: 17px;
    }

    div.geneCount {
        color: #fff;
        margin: 2px 2px 2px 0;
        padding: 5px 10px;
        border-radius: 2px;
        span.icon {
            color: #fff;
            line-height: 17px;
        }
        background: $redError;
    }
}

div.SelectedStudiesWindow {
    div:global(.modal-dialog) {
        width: 850px;
    }
}

.CancerStudySelectorHeader {
    justify-content: space-between;
    align-items: center;

    h2 {
        padding: 0;
        margin: 0;
        font-size: 18px;
    }
    padding: 0 10px 5px 10px;

    :global(.Select-control) {
        height: 28px;
    }

    :global(.Select-input) {
        height: 28px;
    }

    :global(.Select-placeholder),
    :global(.Select--single) > :global(.Select-control .Select-value) {
        line-height: 28px !important;
    }

    border-bottom: 1px solid #ddd;
}

.CancerStudySelector {
    position: relative;
    overflow: hidden;
    user-select: none;
    padding: 5px 0 0 0;

    label {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    a {
        cursor: pointer;
    }

    h2 {
        padding: 0;
    }

    .selectAll {
        text-transform: uppercase;
        min-width: 105px;
        text-align: center;
    }

    .noData,
    .selectedCount {
        font-size: 12px;
        text-align: right;
        margin: 0 10px;

        &.selectionsExist {
            color: #337ab7;
            text-decoration: underline;
            &:hover {
                cursor: pointer;
            }
        }
    }

    h3 {
        background-color: #1982b8;
        border-bottom: 1px solid rgb(17, 116, 167);
        color: #fff;
        font: normal normal 500 13px/18px 'Helvetica Neue', Helvetica, Arial,
            sans-serif;
        text-transform: uppercase;
        margin: 0;
        padding: 10px 15px;

        .selectedCount {
            float: right;
        }
    }

    div.cancerStudySelectorBody {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        flex: 1;
    }

    div.cancerTypeListContainer,
    div.cancerStudyListContainer {
        position: relative;
        overflow-y: scroll;
        overflow-x: auto;
        height: 100%;

        .queryHelp {
            position: absolute;
            right: 25px;
            top: 13px;
            z-index: 100;
        }
    }

    div.cancerStudyListContainer {
        flex: 1;
        &:only-child {
            padding: 10px 10px 10px 10px;
        }
    }

    ul.cancerTypeList {
        background: $lightBlue;
        padding: 0px;
        margin: 0px !important;
        width: 230px;

        li {
            cursor: pointer;
            list-style-type: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: #043852;
            border-bottom: 1px solid rgb(222, 233, 241);
            border-top: 1px solid rgb(243, 248, 251);
            padding: 8px 10px;

            span {
                &.cancerTypeListItemLabel {
                    flex: 1;
                    margin: 0 10px 0 0;
                }

                &.cancerTypeListItemCount {
                    background-color: rgb(222, 233, 241);
                    border-radius: 2px;
                    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
                    font: normal normal 400 10px/19px 'Helvetica Neue',
                        Helvetica, Arial, sans-serif;
                    text-align: center;
                    width: 25px;
                }
            }
        }
    }

    .selectable:hover {
        color: #000;
        background-color: #deeaf3;
    }

    .selectable.selected {
        background-color: rgba(143, 189, 212, 0.42);
    }

    .matchingNodeText {
        font-style: italic;
    }

    .nonMatchingNodeText {
        font-style: normal;
    }

    .containsSelectedStudies {
        color: #000;

        .cancerTypeListItemCount {
            position: relative;

            &:before {
                background: rgba(25, 130, 184, 0.5);
                display: block;
                position: absolute;
                top: 0px;
                right: 0px;
                border-radius: 1px 2px 1px 2px;
                content: ' ';
                height: 5px;
                width: 5px;
            }
        }
    }

    .searchTextInput {
        min-width: 220px;
    }
}

.MolecularProfileSelector {
    div.group {
        display: flex;
        flex-direction: column;

        div.group {
            margin-left: 20px;
        }
    }

    div.zScore {
        margin: 0px 0 10px 20px;

        input[type='text'] {
            border: 1px solid #ddd;
            border-radius: 2px;
            margin: 0 5px;
            padding: 2px 5px;
        }
    }

    label {
        display: inline;
        cursor: pointer;

        input[type='radio'],
        input[type='checkbox'] {
            margin-right: 8px;
        }
    }

    span.infoIcon {
        color: #555;
    }

    span.groupName {
    }

    span.profileName {
        margin-right: 6px;
    }
}

.DataTypePrioritySelector {
    input[type='radio'] {
        margin: 0 6px 0 2px;
    }
}

.DataTypePriorityLabel {
    line-height: 2;
    margin: 0 10px 0 0;
}

.CaseSetSelector {
    div:global(.Select) {
        width: 555px;
        margin-bottom: 10px;
    }
    textarea {
        width: 555px;
        resize: vertical;
        padding: 5px;
        border: 1px solid $borderColor;
        border-radius: 2px;
    }
    .radioRow {
        div {
            padding: 0 0 0 2px;
        }

        :global(.spinner) {
            float: right;
        }
    }
    input[type='radio'] {
        margin-right: 6px;
    }
}

.GeneSetSelector {
    div:global(.Select) {
        width: 555px;
        margin-bottom: 8px;
    }

    :global(.oqlValidationContainer) {
        min-height: 27px;
    }

    .buttonRow {
        margin-bottom: 8px;
        justify-content: space-between;
    }

    textarea.geneSet {
        width: 555px;
        resize: vertical;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 5px;

        &.empty {
        }
        &.notEmpty {
            text-transform: uppercase;
        }
    }
}

.GeneSymbolValidator {
    cursor: default;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 555px;
    padding-top: 5px;
    span.icon {
        text-align: center;
        margin-right: 4px;
        width: 16px;
        height: 16px;
        line-height: 17px;
    }
    span.pendingMessage,
    span.oqlNotice,
    span.errorMessage {
        font-size: small;
    }
    div.validBubble,
    div.invalidBubble {
        color: #fff;
        display: flex;
        align-items: center;
        margin: 2px 2px 2px 0;
        padding: 5px 10px;
        border-radius: 2px;
        span.icon {
            color: #fff;
            line-height: 17px;
        }
    }
    div.invalidBubble {
        background: $redError;
    }
    div.validBubble {
        background: $greenSuccess;
    }
    div.suggestionBubble {
        color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        display: flex;
        align-items: center;
        margin: 2px;
        padding: 5px 10px;
        background-color: $lightGrey;
        border-radius: 2px;
        &:hover {
            background-color: $mediumGrey;
        }
        span.icon {
            color: $darkGrey;
            line-height: 17px;
        }
        span.noChoiceLabel {
            font-weight: normal;
        }
        span.singleChoiceLabel {
            font-weight: bold;
        }
        span.multiChoiceLabel {
            font-weight: normal;
        }
        div:global(.Select) {
            width: 140px;
            margin-left: 4px;
            float: left;
        }
    }
}

div.MutSigGeneSelectorWindow {
    div:global(.modal-dialog) {
        width: 650px;
    }

    div.MutSigGeneSelector {
        margin: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

        :global(.table) {
            margin: 0;
            & > thead > tr > th {
                font-size: 13px;
            }
            & > tbody > tr > td {
                vertical-align: middle;
                padding: 6px 10px;
                font-size: 12px;
            }
        }
        div.selectionColumnHeader,
        div.selectionColumnCell {
            display: flex;
            flex-direction: column;
            align-items: center;

            label {
                min-height: 1em !important;
                input[type='checkbox'] {
                    margin: 4px 0 0 0;
                }
            }
        }
        button.selectButton {
            align-self: flex-end;
        }
    }
}

div.GisticGeneSelectorWindow {
    div:global(.modal-dialog) {
        width: 800px;
    }

    div.GisticGeneSelector {
        margin: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

        div.header.amp.del {
            float: left;
            display: flex;
            flex-direction: column;

            span.amp {
                color: red;
            }
            span.del {
                color: blue;
            }
        }

        div.gisticTable {
            margin: 10px 0;
            overflow: auto;
            :global(.table) {
                margin: 0;
                & > thead > tr > th {
                    font-size: 13px;
                }
                & > tbody > tr > td {
                    vertical-align: middle;
                    padding: 3px 10px;
                    font-size: 12px;

                    .amp {
                        height: 1em;
                        background-color: red;
                    }
                    .del {
                        height: 1em;
                        background-color: blue;
                    }
                }
            }
        }

        div.GisticGeneToggles {
            width: 400px;
        }

        .someGenes,
        .moreGenes {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        span.geneToggle {
            background: rgba(0, 0, 0, 0);
            line-height: 16px !important;
            padding: 3px 5px;
            -webkit-transition: background 0.2s ease-in-out;
            -o-transition: background 0.2s ease-in-out;
            transition: background 0.2s ease-in-out;

            &:not(.simulateHovered) {
                cursor: pointer;
            }
            &:hover,
            &.simulateHovered {
                background: #dee9f1;
                border-radius: 3px;
            }
            &.selected {
                font-weight: 600;
            }
            &.notSelected {
                font-weight: 400;
            }
        }

        a.showMoreLess {
            cursor: pointer;
            padding: 3px;
            color: #337ab7;
            &:hover {
                text-decoration: underline;
            }
        }

        button.selectButton {
            align-self: flex-end;
        }
    }
}

div.GenesetsSelectorWindow {
    div:global(.modal-dialog) {
        width: 800px;
    }
    div.GenesetsFormGroup {
        class: 'form-group';
        display: 'inline-block';
        padding: '10px 15px';
    }
}

div.GenesetsVolcanoSelectorWindow {
    div:global(.modal-dialog) {
        width: 1200px;
        height: 500px;
    }
    div.GenesetsSelectionArea {
        padding: 10px 15px;
    }
    div.GenesetsFormGroup {
        class: 'form-group';
        display: 'inline-block';
        padding: '10px 15px';
    }
}

span.downloadSubmitExplanation {
}

label.transposeDataMatrix {
    input[type='checkbox'] {
        margin-right: 6px;
    }
}

div.submitRow {
    align-items: center;

    button.genomeSpace {
        border: 1px solid $darkestCream;
        border-radius: 2px;
    }
}

.tooltip {
    max-width: 300px;
}

.learnOql {
    display: inline-block;
    margin-top: 25px;
}

.quickSelect {
    display: flex;
    align-items: center;
    button {
        margin-left: 10px;
    }
}

.StudySelection {
    align-items: center;
}

.studyName {
    border-right: 1px dashed $borderColor;
    padding-right: 10px;
    margin-right: 10px;
    display: inline-block;
}