/* Stats Card Style
============================================*/
.border-end-custom {
    &::before {
        content: "";
        position: absolute;
        top: 0;
        right: -10px;
        width: 1px;
        height: 100%;
        background-color: $border-color;
    }
}

/* Max width 767px */
@media only screen and (max-width : 767px) {

    .border-end-custom {
        margin-bottom: 30px;
        padding-bottom: 30px;
        &::before {
            width: 100%;
            height: 1px;
            top: auto;
            bottom: 0;
            right: 0;
        }
    }
    .chart-position {
       max-width: 100%;
       position: unset;
    }

}

/* Min width 768px to Max width 992px */
@media only screen and (min-width : 768px) and (max-width : 991px) {

    .border-end-custom {
        padding-bottom: 30px;
    }
    .chart-position {
       bottom: 30px;
    }
    .col-xxl-3 {
        &:nth-child(2) {
            .border-end-custom {
                &::before {
                    display: none;
                }
            }
        }
        &:nth-child(3) {
            .border-end-custom {
                padding-bottom: 0;
            }
        }
        &:nth-child(4) {
            .border-end-custom {
                padding-bottom: 0;
            }
        }
    }

}

@media only screen and (min-width: 992px) and (max-width: 1599px) {

    .chart-position {
        bottom: 30px;
     }
     .border-end-custom {
        padding-bottom: 30px;
    }
    .col-xxl-3 {
        &:nth-child(2) {
            .border-end-custom {
                &::before {
                    display: none;
                }
            }
        }
        &:nth-child(3) {
            .border-end-custom {
                padding-bottom: 0;
            }
        }
        &:nth-child(4) {
            .border-end-custom {
                padding-bottom: 0;
            }
        }
    }

}

/* 
Dark Mode SCSS 
===================================================*/
[data-theme=dark] {
    
    .border-end-custom::before {
        background-color: $dark-border;
    }
}

/* RTL SCSS
===================================================*/
.rtl  {
    .chart-position {
        right: auto;
        left: 0;
    }
    .border-end-custom::before {
        right: auto;
        left: -10px;
    }
}