.control-rec {
    max-height: 60px;
    border: solid 1px #ccc;
    border-radius: 4px;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
    flex-direction: row;
    column-gap: 5px;
    position: relative;
    direction: rtl;
}

    .control-rec .single-chart {
        justify-content: space-around;
    }

    .control-rec .circular-chart {
        display: block;
        margin: auto;
        max-height: 48px;
        width: 40px;
        height: 40px;
    }

    .control-rec .circle-bg {
        fill: none;
        stroke: #eee;
        stroke-width: 1.8;
    }

    .control-rec .circle {
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        transition: all 1s ease-out;
        stroke-dasharray: 0 100;
    }

    .control-rec .circular-chart.orange .circle {
        stroke: #ff9f00;
    }

    .control-rec .circular-chart.green .circle {
        stroke: #4CC790;
    }

    .control-rec .circular-chart.blue .circle {
        stroke: #3c9ee5;
    }

    .control-rec .percentage {
        fill: #666;
        font-family: sans-serif;
        font-size: 0.5em;
        text-anchor: middle;
    }

    .control-rec .icon-rec {
        color: #f23a3a;
        font-size: 1.3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
    }

    .control-rec .icon-play {
        color: #666;
        font-size: 1.3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
    }

    .control-rec .icon-stop {
        color: #666;
        font-size: 1.3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
    }

    .control-rec .icon-pause {
        color: #666;
        font-size: 1.3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
    }

    .control-rec .btn-rec {
        display: flex;
        width: 40px;
        height: 40px;
        position: relative;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-direction: row-reverse;
    }


    .control-rec .control-duration {
        font-size: 0.9rem;
        font-family: iransansx;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        column-gap: 5px;
    }

    .control-rec .icon-clear {
        color: #666;
        font-size: 1rem;
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translate(0%,-50%);
        -ms-transform: translate(-0%,-50%);
        cursor: pointer;
    }

    .control-rec canvas {
        width: calc(100% - 99px);
        height: 44px;
        position: absolute;
        top: 50%;
        left: 8px;
        transform: translate(0%,-50%);
        -ms-transform: translate(-0%,-50%);
        cursor: pointer;
        display: none;
    }

    .control-rec .player {
        display: none;
    }