div.attachment .progress{
    width: 74px;
    height: 76px;
    line-height: 76px;
    background: #3dade0;
    border-radius: 40px;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}

div.attachment .progress > span{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
div.attachment .progress .progress-left{
    left: 0;
}
div.attachment .progress .progress-bar-circle{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 4px;
    border-style: solid;
    position: absolute;
    top: 0;
}
div.attachment .progress .progress-left .progress-bar-circle{
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
}

div.attachment .progress .progress-right{
    right: 0;
}
div.attachment .progress .progress-right .progress-bar-circle{
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
div.attachment .progress .progress-value{
    width: 92%;
    height: 92%;
    border-radius: 50%;
    background: #fff;
    font-size: 17px;
    font-weight: bold;
    color: #3dade0;
    text-align: center;
    position: absolute;
    top: 4.5%;
    left: 4.5%;
}
div.attachment .progress.blue .progress-bar-circle{
    border-color: #e9f0f2;
}


@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes loading-2{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

/**
 *  * Display an item in center of the page.
 *   */
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}