/*--- Sequence containers in which to highlight ---*/
/* Textarea for entry and div for highlighting must be contained in the #relativeContainer */
#relativeContainer {
    min-height: 225px;
    position: relative;
}

#relativeContainer > .highlightable {
    font-family: Courier New;
    padding: 0 0 0 1px;
    z-index: 10;
    position: absolute;
    background-color: transparent;
    height: 100%;
}

#relativeContainer > div.highlightable {
    word-wrap: break-word;
    min-height: inherit;
}

#relativeContainer > textarea.highlightable {
    resize: none;
}

.highlight-box {
    position: absolute;
    height: 16px;
}

/* Need this despite Bootstrap's text-muted because form-control on the div overwrites it */
.dim-text {
    color: #a0a0a0;
}

/*--- Actual highlight boxes ---*/
.hl-active {
    background-color: yellow;
}

.hl-inactive {
    background-color: yellow;
    background-color: rgba(255, 255, 0, 0.2);
}

.hl-start {
    background-color: #5CB85C;
    background-color: rgba(92, 184, 92, 0.2);
    z-index: 10;
}

.hl-stop {
    background-color: #d9534f;
    background-color: rgba(217, 83, 79, 0.2);
    z-index: 10;
}

@media (max-width: 992px) {
    .rf-btn-group > .btn {
        display: block;
        width: 100%;
    }
}


/*Codon Opt*/
.fake-text-area {
    border: 1px solid #ced4da;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: .25rem;
    font-family: Courier New;
}

.border-codon {
    border: 1px solid #eeeeee;
}

.border-start-codon {
    border: 1px solid #5CB85C;
}

.border-stop-codon {
    border: 1px solid #d9534f;
}

.bg-codon {
    background-color: #eeeeee;
}

complexity {
    color: goldenrod;
    font-weight: 700;
    font-size: 105%;
}