// Transform
@mixin transform( $args ) {
    -webkit-transform: $args;
    -moz-transform: $args;
    -ms-transform: $args;
    -o-transform: $args;
    transform: $args;
}

/*------------------------------------------------------------------
Off Canvas
-------------------------------------------------------------------*/
.oew-circle-progress-wrap {
    text-align: center;

    .oew-circle-progress {
        text-align: center;
        position: relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

        svg {
            margin: 0 auto;
        
            ellipse {
                stroke: #f6f6f6;
            }

            path {
                stroke: #13aff0;
            }
        }

        .oew-circle-progress-middle {
            font-size: 45px;
            font-weight: 700;
        }

        &.oew-cp-square svg path {
            stroke-linecap: square;
        }

        &.oew-cp-round svg path {
            stroke-linecap: round;
        }

        &.oew-cp-butt svg path {
            stroke-linecap: butt;
        }

        .oew-circle-progress-label {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 0;
            @include transform( translateY(-50%) );

            div {
                line-height: 1.3;
            }
        }

        .oew-circle-progress-svg {
            display: inline-block;
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            vertical-align: middle;
            overflow: hidden;

            svg {
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }

    .oew-circle-progress-content {
        margin-top: 15px;
    }
}

/* RTL */
body.rtl .oew-circle-progress-label {
    right: 0;
    left: auto;
}

/*------------------------------------------------------------------
Responsive
-------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
    
}