.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.axis path {
    fill: none;
    stroke: #947c7c;
    shape-rendering: crispEdges;
}

.page {
    background: #fdfbfb !important;
}

/*body {
    background: #fdfbfb !important;
}*/

.axis text {
    fill: #555;
}

.axis line {
    stroke: #e7e7e7;
    shape-rendering: crispEdges;
}

.axis .axis-label {
    font-size: 14px;
}

.line {
    fill: none;
    stroke-width: 1.5px;
}

.fitting-points {
    height: 9px;
    width: 9px;
    background-color: #00000000;
    border: 2px solid #B8860B;
    margin-right: 10px;
    margin-left: 7px;
}

.dot {
    /* consider the stroke-with the mouse detect radius? */
    stroke: transparent;
    stroke-width: 10px;
    cursor: pointer;
}

.dot:hover {
    stroke: rgba(68, 127, 255, 0.3);
}

.cls-selected-line {
    width: auto;
    padding: 6px;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    text-align: center;
    margin-bottom: 5px;
}

.legend .oil {
    background: #006400;
}

.legend .gas {
    background: #df1616;
}

.legend .water {
    background: #00008b;
}

.legend .daily-oil {
    background: #006400;
}

.legend .daily-gas {
    background: #df1616;
}

.legend .daily-water {
    background: #00008b;
}


.legend .forecaster {
    background: #B8860B;
}

.legend .circle-legend {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.legend .cls-daily-legend {
    margin-left: 13px;
}



.not_possible {
    fill: rgb(200,200,200);
}

.possible {
    fill: #EC888C;
}


.first .tick line {
    fill: transparent;
    stroke: transparent;
}

.first path {
    stroke: transparent !important;
}

.last .tick line {
    fill: transparent;
    stroke: transparent;
}

.last path {
    /* fill: transparent; */
    stroke: transparent !important;
}

.tbl-detail {
    width: 100%;
}
/*.message-select {
    position: absolute;
    left: 36%;
}*/

@media (max-width: 767px) {
    body {
        font-size: 1rem;
    }
}


.cls-drp-feature {
    width: 150px;
    height: auto;
    float: right;
    padding: 5px;
    font-size: 12px;
    color: #000;
    position: absolute;
    right: 80px;
}

.line-rect {
    margin-right: 5px;
    width: 20px;
    height: 3px;
    background-color: red;
    display: inline-block;
}

.legend-container {
    display: flex;
    align-items: center;
}

#chart,
.cls-drp-feature {
    display: inline-block;
}

.y-axis-water path {
    stroke: transparent;
}

.y-axis-gas path {
    stroke: #947c7c;
}
.y-axis-oil path {
    stroke: #947c7c;
}
.x-axis path {
    stroke: #947c7c;
}
.x-axis-oil-vol path {
    stroke: #947c7c;
}

.y-axis-oil .tick line {
    stroke: #947c7c;
}
.y-axis-gas .tick line {
    stroke: #947c7c;
}
.y-axis-water .tick line {
    stroke: #947c7c;
}
.x-axis .tick line {
    stroke: #947c7c;
}

.x-axis-oil-vol .tick line {
    stroke: #947c7c;
}


.y-axis-oil-vol path {
    stroke: #947c7c;
}

.y-axis-oil-vol .tick line {
    stroke: #947c7c;
}

   /* .y-axis-oil .tick line text,
    .y-axis-gas .tick line text,
    .y-axis-water .tick line text,
    .x-axis .tick line text {
        stroke: #000;
    }*/


.axis-label-water {
    fill: #947c7c;
    font-size: 15px;
}

.axis-label-gas {
    fill: #947c7c;
    font-size: 15px;
}

.axis-label-oil {
    fill: #947c7c;
    font-size: 15px;
}
.axis-label-xaxis {
    fill: #947c7c;
    font-size: 15px;
}

.axis-label-gas {
    text-anchor: end;
}

.axis-label-xaxis {
    text-anchor: start;
}

.line-water path {
    fill: none;
}
.line-oil path {
    fill: none;
}
.line-gas path {
    fill: none;
}

.line-oil-vol path {
    fill: none;
}

.lasso path {
    stroke: rgb(80, 80, 80);
    stroke-width: 2px;
}

.lasso .drawn {
    fill-opacity: .05;
}

.lasso .loop_close {
    fill: none;
    stroke-dasharray: 4, 4;
}

.lasso .origin {
    fill: #3399FF;
    fill-opacity: .5;
}

.not_possible {
    fill: rgb(200, 200, 200);
}

.possible {
    fill: #EC888C;
}

#forecaster_chart {
    position: relative;
}

.svg-with-line {
    position: absolute;
}

.svg-with-line-vol {
    position: absolute;
}

.addchild {
    cursor: pointer !important;
}

.cls-test {
    cursor: pointer !important;
}

.cls-td-legend {
    float: right;
    width: 120px;
}