svg {
    /*border: 1px solid black;*/
    background: white;
}

.rectangle {
    stroke: black;
    stroke-width: 1px;
}

.rectangle--rrm {
    stroke: #ffcab7;
    stroke-width: 2px;
}

.rectangle--pdl {
    stroke: #b8b8ff;
    stroke-width: 2px;
}

.rectangle--spacer {
    stroke: #d0d0d0;
    stroke-width: 2px;
}

.rectangle--other {
    stroke: #b8ffb8;
    stroke-width: 2px;
}


#plot-container {
    padding: .5rem
}

#titlebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 0;
}

#seqname-container {
    flex: 0 0 75%
}

#score-container {
    flex: 1
}

/*Line plots style*/

.line {
    fill: none;
    /*stroke: steelblue;*/
    stroke-width: 2px;
}

.complexity--line, .RRM--line, .disorder--line, .tyr--line, .arg--line  {
    stroke: grey;
}

.complexity--dot, .RRM--dot, .disorder--dot, .tyr--dot, .arg--dot {
    fill: black;
}

.grid line {
    stroke: silver;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.zoom {
    cursor: move;
    fill: none;
    pointer-events: all;
}

.brush {
    opacity: 0.1;
    fill: white
}

rect.selection {
    opacity: 1;
    fill:rgb(0,0,255)
}

* {
    font-size: 16px;
}