/* login-page css Starts */

.login-bg{
     background-image: url("../images/auth/main-img.jpg") !important;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-size: cover !important;
}

.sign-bg {
    display: none !important;
}
.logo-normal {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
.mb-2 {
    font-size: 26px !important;
}
.sbt-btn{
    font-size:16px !important;
    text-transform:uppercase;
    font-weight:600;
    padding:10px 20px 10px 20px !important;
    margin-top:25px;

}
.btn.btn-primary {
    font-size: 14px;
    padding: 10px;
    color: #ffffff !important;
    background-color: #de515d !important;
    border:1px solid #de515d !important;
}
.btn.btn-primary:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
    border:1px solid #000000 !important;
}
a {
    color: #000000 !important;
}
a:hover {
    color: #de515d !important;
}
.errorplace{
    margin-bottom: 10px !important;
}
.form-check-input:checked {
    border:1px solid #de515d !important;
    background-color: #de515d !important;
}
.form-floating {
    margin-bottom: 10px !important;
}

/* login-page css Ends */

/* header css starts */

.ms-3 {
    margin-left: 0rem !important;
}

.bg-light {
    --bs-bg-opacity: 1;
    background-color: #000000 !important;
}
.nav-link {
    font-size: 14px !important;
    color: #ffffff !important;
}
.shadow-sm {
    padding: 10px 10px 10px 10px;
    -webkit-box-shadow: 0 .125rem .25rem rgba(17, 38, 146, 0) !important;
    box-shadow: 0 .125rem .25rem rgba(17, 38, 146, 0) !important;
}
.nav {
    background: none !important;
}
.dual-horizontal-wrapper {
    background: none !important;
    border-top: 0px solid #dee2e6 !important;
}
.dropdown-item {
    font-size: 14px !important;
}

/* header css ends */

/* Inside pages css starts */

.edit-quotation{
    color:#000000;
}
.back-btn{
    color:#000000 !important;
    font-size:14px;
    border:1px solid #cfcfcf !important;
    background-color:#cfcfcf;
}
.back-btn:hover{
    color:#000000 !important;
    border:1px solid #cfcfcf !important;
    background-color:#cfcfcf !important;
}
.chk-price{
    color:#ffffff;
    font-size:14px;
    border:1px solid #000000 !important;
    background-color:#000000;
}
.chk-price:hover{
    color:#ffffff !important;
    border:1px solid #000000 !important;
    background-color:#000000 !important;
}
.text-muted {
    color: #dc3545 !important;
    padding-bottom: 10px;
}
.prod-list{
    margin-top:15px !important;
    color:#000000 !important;
}
.name-space{
    padding-top:20px;
}
.quotation-box {
    margin: 0px 15px;
}
.btn.btn-primary:focus {
    color: #ffffff !important;
    background-color:#000000 !important;
}
.ag-theme-alpine .ag-row, .ag-theme-alpine-dark .ag-row, .ag-theme-alpine-auto-dark .ag-row {
    font-size: 13px !important;
    font-family: 'Poppins';
}
.ag-header.ag-header-allow-overflow .ag-header-row {
    font-size: 14px !important;
    font-family: 'Poppins';
}
.ag-cell, .ag-full-width-row .ag-cell-wrapper.ag-row-group {
    --ag-internal-calculated-line-height: var(--ag-line-height, calc(var(--ag-row-height) - var(--ag-row-border-width)));
    --ag-internal-padded-row-height: 50px !important;
}
.pb-0{
    padding: 16px 16px 16px 16px !important;
}
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 0rem;
}
.main-content .content-inner {
    background-color: #ebf5fe !important;

}
.g-4, .gy-4 {
    --bs-gutter-y: 2.5rem !important;
}

[data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] {
    transition-duration: 0s !important;
}
.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    -webkit-box-shadow: 0 10px 30px 0 rgba(17, 38, 146, 0) !important;
    box-shadow: 0 10px 30px 0 rgba(17, 38, 146, 0) !important;
    border:1px solid #dadada !important;
    --bs-card-cap-padding-y: 1rem !important;
    --bs-card-cap-padding-x: 1rem !important;
    margin-bottom: 0rem;
}
.card .card-header {
    border-radius: 10px !important;
    margin-bottom:15px !important;
}
.card-body {
    margin-top: 0px !important;
    padding-top: 0px !important;
}
.card .card-header .header-title .card-title {
    font-size: 1.25rem !important;
}
.dashboard-card{
    padding-bottom:40px !important;
}
.btn-sm .btn-inner svg, .btn-group-sm>.btn .btn-inner svg {
    width: 20px !important;
}
.btn .btn-inner svg {
    top: -3px;
    color:#ffffff;
}
.btn-check:focus+.btn, .btn:focus {
    color: #000000;
    background:none !important;
    border:1px solid #000000;
    outline:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
.btn-sm, .btn-group-sm>.btn {
    --bs-btn-padding-y: 0.15rem !important;
    --bs-btn-padding-x: 0.15rem !important;
    --bs-btn-font-size: 0.7rem !important;
    --bs-btn-border-radius: 0.25rem !important;
}
.btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background: none;
    border: none;
    outline: 0;
    -webkit-box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow);
    box-shadow: var(--bs-btn-box-shadow), var(--bs-btn-focus-box-shadow);
}
.btn-danger {
    color: #de515d !important;
    --bs-btn-bg: none;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: none
}
.btn-warning {
    --bs-btn-color: none;
    --bs-btn-bg: none;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: none;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-focus-shadow-rgb: 243, 128, 61;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
    --bs-btn-active-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #000000;
    --bs-btn-disabled-border-color: #000000;
}
.btn-warning:hover {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #fffff;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-focus-shadow-rgb: 243, 128, 61;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
    --bs-btn-active-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #000000;
    --bs-btn-disabled-border-color: #000000;
}
.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: none;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #168847;
    --bs-btn-hover-border-color: #158042;
    --bs-btn-focus-shadow-rgb: 60, 174, 109;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #158042;
    --bs-btn-active-border-color: #14783e;
    --bs-btn-active-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #1aa053;
    --bs-btn-disabled-border-color:#1aa053;
}
.btn:hover {
    color: var(--bs-btn-hover-color);
    background:none;
    border:none;
}
.icon-20 {
    height: 1.25rem;
    width: 1.25rem;
    color: #ffffff !important;
}
.btn-outline-primary {
    --bs-btn-color: #e74e54;
    --bs-btn-border-color: #e74e54 !important;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #e74e54 !important;
    --bs-btn-hover-border-color: #e74e54 !important;
    --bs-btn-focus-shadow-rgb: 58, 87, 232;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #e74e54 !important;
    --bs-btn-active-border-color: #e74e54 !important;
    --bs-btn-active-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    --bs-btn-disabled-color: #e74e54 !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #e74e54 !important;
    --bs-gradient: none;
}
.btn.btn-outline-primary:hover {
    color: var(--bs-white);
    background-color: #000000;
    border-color: var(--bs-primary);
}
.btn-outline-secondary {
    padding: 9px 10px;
    font-size: 15px;
    width: -webkit-fill-available !important;
}
.check-date{
    min-width:100% !important;
    color: #000000 !important;
}
.btn-outline-secondary:hover {
    border: 1px solid #000000;
    color: #000000;
}
.form-control {
    border: 1px solid #000000 !important;
    color: #000000;
}
.form-floating {
    margin-bottom: 15px !important;
}
.mt-3 {
    margin-top: 0rem !important;
}
.dropdown-item.active, .dropdown-item:active {
    color: #ffffff !important;
    background-color: #000000 !important;
}
.fc .fc-toolbar.fc-header-toolbar {
    margin-top: 1.5em !important;
}
.left-panel{
    color: #000000;
}
.fc-button-primary {
    color: #fff !important;
    background-color: #de515d !important;
    border-color: #ffffff !important;
}
.icon-32 {
    height: 1rem !important;
    width: 2rem;
}
h4 {
    font-size: 1.3rem !important;
}
h5 {
    font-size: 1.2rem !important;
    font-weight:600 !important;
}
.ag-row-odd {
    background-color: #f7f7f7 !important;
}
.ag-header.ag-header-allow-overflow .ag-header-row {
    overflow: visible;
    background-color:#ebf5fe;
}
.form-check {
    color: #000000;
    font-size:15px;
}
.quote-btn-space{
    padding-top:15px;
}


/* Inside pages css ends */

/* statistics 5 card css starts */

.counter-space{
    margin-top: 0px;
}
.g-3, .gy-3 {
    --bs-gutter-y: 1rem;
    margin-bottom: 20px !important;
}
.g-4, .gx-4 {
    --bs-gutter-x: 1.2rem !important;
}
.metrics-container {
            margin: 0 auto;
            padding: 0px !important;
        }
        
        .metric-card {
            background: white;
            border-radius: 16px;
            border: 1px solid #dadada;
            padding: 15px !important;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .metric-icon {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            margin-bottom: 12px;
        }
        
        .metric-icon i {
            font-size: 16px;
            color: #495057;
        }
        
        .metric-number {
	    padding-top:10px !important;
            font-size: 28px;
            font-weight: 700;
            color: #dc3545;
	    border-top:1px solid #e5e5e5 !important;
            margin-bottom: 2px;
            line-height: 1;
        }
        
        .metric-number.normal {
            color: #212529;
        }
        
        .metric-title {
            font-size: 13px;
            color: #6c757d;
            font-weight: 500;
            margin-bottom: 0;
        }
        
        .metric-change {
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #28a745;
            display: flex;
            align-items: center;
            gap: 2px;
        }
        
        .metric-change i {
            font-size: 10px;
        }

/* statistics 5 card css ends */

/* Chart css starts */

.conversation{
    margin-bottom:20px;
}
.d-activity {
    min-height: 235px !important;
}
.bar-chart-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 180px;
      margin-top: 20px;
      padding: 0 15px;
}

.mb-3 {
    margin: 1.5rem 1rem !important;
}
.table>:not(caption)>*>* {
    padding: 0.5rem 0.5rem !important;
}
.table {
    font-size: 14px !important;
}
.table th{
    color:#000000 !important;
}
tr:nth-child(even){
    background: #F7F7F7
}
tr:nth-child(odd){
    background: #FFFFFF
}
.action-icon {
    font-size: 18px;
    font-weight: bold;
}
.action-icon.check {
    color: green;
}
.action-icon.cross {
    color: red;
}

/* Chart css ends */

/* Earnings css starts */
        
        .chart-header {
            border-bottom: 1px solid #e9ecef;
            padding: 1rem;
        }
        
        .chart-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #212529;
            margin: 0;
        }
        .chart-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .chart-wrapper {
            position: relative;
            width: 280px;
            height: 280px;
        }
        .donut-chart {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        .donut-segment {
            fill: none;
            stroke-width: 40;
            r: 90;
            cx: 140;
            cy: 140;
            stroke-linecap: round;
        }
        
        .segment-fashion {
            stroke: #dc3545;
            stroke-dasharray: 331 565;
            stroke-dashoffset: 0;
            animation: drawFashion 1.5s ease-out;
        }
        
        .segment-accessories {
            stroke: #9ca3af;
            stroke-dasharray: 234 565;
            stroke-dashoffset: -331;
            animation: drawAccessories 1.5s ease-out 0.3s both;
        }
        
        @keyframes drawFashion {
            from {
                stroke-dasharray: 0 565;
            }
            to {
                stroke-dasharray: 331 565;
            }
        }
        
        @keyframes drawAccessories {
            from {
                stroke-dasharray: 0 565;
            }
            to {
                stroke-dasharray: 234 565;
            }
        }
        
        .data-label {
            position: absolute;
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 20px;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            font-weight: 600;
            color: #374151;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }
        
        .data-label.fashion {
            top: 45%;
            right: -10px;
        }
        
        .data-label.accessories {
            top: 35%;
            left: -10px;
        }
        
        .chart-legend {
            padding: 0 1.5rem 0.9rem 1.5rem;
            display: flex;
            justify-content: center;
            gap: 2rem;
        }
        
        .legend-item {
            display: ruby !important;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .legend-header {
            display: flex;
            align-items: center;
            margin-bottom: 0.25rem;
        }
        
        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }
        
        .legend-dot.fashion {
            background-color: #dc3545;
        }
        
        .legend-dot.accessories {
            background-color: #9ca3af;
        }
        
        .legend-label {
            font-size: 0.875rem;
            color: #6c757d;
            margin: 0;
        }
        
        .legend-value {
            font-size: 1.125rem;
            font-weight: 600;
            color: #212529;
            margin: 0;
        }

/* Earnings css ends */

/* Sales growth css starts */

        .legend-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            color: #6b7280;
            font-weight: 500;
        }
        
        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }
        
        .legend-dot.sales {
            background-color: #ef4444;
        }
        
        .legend-dot.cost {
            background-color: #9ca3af;
        }
        
        .chart-container {
            padding: 2rem 2rem 2rem 2rem;
            position: relative;
            height: 320px;
            background: white;
        }
        
        .chart-area {
            position: relative;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(to bottom, transparent calc(20% - 0.5px), #f3f4f6 20%, #f3f4f6 calc(20% + 0.5px), transparent calc(20% + 0.5px)),
                linear-gradient(to bottom, transparent calc(40% - 0.5px), #f3f4f6 40%, #f3f4f6 calc(40% + 0.5px), transparent calc(40% + 0.5px)),
                linear-gradient(to bottom, transparent calc(60% - 0.5px), #f3f4f6 60%, #f3f4f6 calc(60% + 0.5px), transparent calc(60% + 0.5px)),
                linear-gradient(to bottom, transparent calc(80% - 0.5px), #f3f4f6 80%, #f3f4f6 calc(80% + 0.5px), transparent calc(80% + 0.5px));
        }
        
        .y-axis {
            position: absolute;
            left: -10px;
            top: 0;
            height: 100%;
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-between;
            font-size: 0.75rem;
            color: #9ca3af;
            font-weight: 500;
            padding: 20px 0;
            z-index: 5;
            width: 40px;
            text-align: right;
        }
        
        .y-axis div {
            line-height: 1;
            padding-right: 8px;
        }
        
        .x-axis {
            position: absolute;
            bottom: -30px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: #6b7280;
            font-weight: 500;
            padding: 0 60px;
        }
        
        .bars-container {
            position: absolute;
            bottom: 20px;
            width: 100%;
            height: calc(100% - 40px);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0 60px;
        }
        
        .bar {
            width: 60px;
            border-radius: 4px 4px 0 0;
            animation: growUp 1.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            cursor: pointer;
            transition: opacity 0.2s ease;
        }
        
        .bar:hover {
            opacity: 0.8;
        }
        
        .bar.sales {
            background-color: #ef4444;
        }
        
        .bar.cost {
            background-color: #9ca3af;
        }
        
        /* Exact bar heights matching the image */
        .bar.jan { height: 30%; }    /* ~300 */
        .bar.feb { height: 50%; }    /* ~500 */
        .bar.mar { height: 65%; }    /* ~650 */
        .bar.apr { height: 45%; }    /* ~450 */
        .bar.may { height: 35%; }    /* ~350 */
        .bar.jun { height: 55%; }    /* ~550 */
        .bar.jul { height: 25%; }    /* ~250 */
        
        @keyframes growUp {
            from { 
                height: 0;
                opacity: 0.7;
            }
            to { 
                opacity: 1;
            }
        }
        
        /* Hover tooltips for each bar */
        .bar-tooltip {
            position: absolute;
            bottom: 105%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
            z-index: 30;
        }
        
        .bar-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.8);
        }
        
        .bar:hover .bar-tooltip {
            opacity: 1;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        
/* Sales growth css ends */

/* Common media query starts */
        
@media (min-width: 320px) and (max-width: 600px) {
body {
    padding: 0px 0px !important;
}
.col-12 {
    width: 0 auto !important;
}
.ms-2 {
    margin-left: 0rem !important;
}
.quotation-down{
    margin-top:15px !important;
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
    background-color: #000000 !important;
}
.counter-space{
	margin-top: 20px;
}
.offcanvas-title {
    color: #ffffff !important;
}
.btn.btn-primary {
    margin-bottom:5px !important;
}
.chart-container {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem !important;
}
body {
    padding: 20px 10px;
}
.follow-up{
    margin-top: 20px;
}
.metric-card {
    padding: 16px;
}
.metric-number {
    font-size: 24px;
}
.chart-container {
    height: 280px;
    padding: 1rem;
}
.chart-wrapper {
    width: 220px;
    height: 220px;
}
.donut-segment {
    r: 75;
    cx: 110;
    cy: 110;
    stroke-width: 30;
}
.segment-fashion {
    stroke-dasharray: 275 471;
}
.segment-accessories {
    stroke-dasharray: 196 471;
    stroke-dashoffset: -275;
}
.chart-legend {
    gap: 1rem;
    flex-direction: column;
    align-items: center;
}
.legend-item {
    flex-direction: row;
    gap: 1rem;
}
.dashboard-card {
    margin: 20px 0px 0px 0px !important;
}
.earn-space{
    margin: 20px 0px 20px 0px !important;
}
.data-label {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
}
.chart-container {
    padding: 1rem 1rem 1rem 1rem !important;
}
.chart-header {
    padding: 1rem;
}
.bar {
    width: 35px;
}
.bars-container {
    padding: 0px 60px !important;
}
.x-axis {
    padding: 0px 50px !important;
    font-size: 0.7rem;
    bottom: -10px !important;
}
.y-axis {
    font-size: 0.65rem;
    width: 32px;
    left: 0px !important;
}
.legend-container {
    gap: 1.25rem;
}
.chart-title {
    font-size: 1.25rem;
}
.card {
    margin-bottom: 0rem !important;
}
.btn-close {
    color: #ffffff !important;
}
.footer{
    padding:0px 15px 0px 15px;
}
.left-panel {
    color: #000000;
    margin-bottom: 5px !important;
}
.offcanvas-header .btn-close {
    color: #000000 !important;
    background-color: #ffffff !important;
}
.quote-btn{
    margin-top:20px !important;
}

@media (min-width: 600px) and (max-width: 768px){

.quote-btn-space{
    margin-top:10px !important;
}
.table-space{
    margin-bottom:15px !important;
}
.btn-size{
    font-size: 14px !important;
}
.btn-outline-secondary {
    padding: 9px 10px;
    font-size: 14px;
}
.logo-main .logo-normal {
    width: 100%;
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
    background-color: #000000 !important;
}
.metrics-container {
    margin-bottom: 10px;
}
            .chart-container {
                padding: 1.5rem;
            }
            
            .chart-header {
                padding: 1rem;
            }
            
            .chart-header .row {
                flex-direction: column;
                gap: 1rem;
            }
            
            .dropdown-container {
                text-align: left;
            }
            
            .donut-segment {
                r: 80;
                cx: 120;
                cy: 120;
                stroke-width: 35;
            }
            
            .segment-fashion {
                stroke-dasharray: 293 502;
            }
            
            .segment-accessories {
                stroke-dasharray: 209 502;
                stroke-dashoffset: -293;
            }
            
            .chart-legend {
                gap: 1.5rem;
                padding: 0 1rem 1rem 1rem;
            }
            
            .data-label.fashion {
                right: 20px;
            }
            
            .data-label.accessories {
                left: -5px;
            }
            
            .bar {
                width: 45px;
            }
            
            .bars-container {
                padding: 0 0px;
            }
            
            .x-axis {
                padding: 0 45px;
                font-size: 0.75rem;
            }
            
            .y-axis {
                font-size: 0.7rem;
                width: 35px;
                margin-left:-35px;
            }
            
            .legend-container {
                gap: 1.5rem;
            }
}

@media (min-width: 721px) and (max-width: 1024px){
    .g-3, .gy-3 {
    	margin-top: 0px;
    }
    .offcanvas-header {
        background-color: #000000 !important;
    }
    .offcanvas-title {
        color: #ffffff;
    }
    .offcanvas-body {
        background-color: #000000 !important;
    }
    .offcanvas-header .btn-close {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
.btn-outline-secondary {
    padding: 9px 10px;
    font-size: 14px;
}
    .dual-horizontal-wrapper .nav-link {
        padding: 5px 10px  !important;
        font-size: 14px !important;
    }
    .chart-container {
        padding: 2rem 1rem 2rem 1rem;
    }
    .chart-area {
        width: 75%;
    }
    .chart-header .row {
        flex-direction: row;
    }
    .earn-space, .follow-up{
	margin-top:20px;
    }
    .metric-card {
        margin-bottom: 0px;
    }
}

/* Common media query ends */