.verticalBarChartWrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.verticalBarChartContainer {
    height: 100%;
    width: 100%;
    position: relative;
    padding-right: 10px;
    min-height: 0;
    min-width: 0;
    flex: 1;
}

.verticalBarChartContainer .nv-x.nv-axis line {
    stroke-dasharray: 5, 5;
    stroke: #C4C4C4;
    stroke-opacity: 1;
}

svg .nv-x.nv-axis .tick text.rotatedLabel {
    text-anchor: end !important;
    transform: rotate(-45deg);
}

@media (max-width: 440px) {
    .verticalBarChartContainer {
        overflow: scroll;
    }
}

/* Dashed style for y-axis grid lines */
.verticalBarChartContainer .nv-y.nv-axis line,
.nv-y .nv-axis .domain {
    stroke-dasharray: 5, 5;
    /* 5px dash, 5px gap */
    stroke: #C4C4C4;
    /* Color of the grid lines */
}

.verticalBarChartContainer rect.discreteBar {
    width: 50px;
    stroke-opacity: unset !important;
}

.verticalBarChartContainer .nv-bar, .verticalBarChartContainer .nv-bar rect:hover {
    fill-opacity: 0.4 !important;
}

.verticalBarChartContainer .nv-y>.nvd3>g>path.domain {
    display: block;
}
.verticalBarChartContainer svg .nv-x .tick line {
    display: unset;
}

.noDataBarChart {
    height: 100px;
    text-align: center;
    color: red;
    font-size: 15px;
    font-weight: bold;
    line-height: 50px;
}

line#customXTickmark,
line#customYTickmark {
    stroke: #737373 !important;
    stroke-dasharray: none !important;
}

rect#customXTickmark,
rect#customYTickmark {
    fill: #737373 !important;
    stroke-dasharray: none !important;
}