/*
 * Copyright (c) 2006 - 2022. Verilogue, a Publicis Health Company
 */

/**
 * https://codepen.io/schliflo/pen/gxoCL
 */

.level-radial, .level-radial * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* -------------------------------------
 * Bar container
 * ------------------------------------- */

.level-radial {
    float: left;
    margin-right: 4%;
    position: relative;
    width: 20%;
    border-radius: 50%;
    max-height: 60px;
    max-width: 60px;
}

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */

.level-radial .overlay {
    position: absolute;
    width: 70%;
    background-color: #f0f0f0;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.level-radial .overlay p{
    position: absolute;
    line-height: 40px;
    text-align: center;
    width: 100%;
    top:50%;
    margin-top: -20px;
}

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */

.level-0 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(0deg, #f0f0f0 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #f0f0f0 50%, #f0f0f0 50%, #f0f0f0);
}

.level-1 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(324deg, #d9534e 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #d9534e 50%, #f0f0f0 50%, #f0f0f0);
}

.level-2 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(288deg, #d55088 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #d55088 50%, #f0f0f0 50%, #f0f0f0);
}

.level-3 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(252deg, #d152c0 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #d152c0 50%, #f0f0f0 50%, #f0f0f0);
}

.level-4 {
    background-image: -webkit-linear-gradient(0deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(216deg, #a754ce 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #f0f0f0 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #a754ce 50%, #f0f0f0 50%, #f0f0f0);
}

.level-5 {
    background-image: -webkit-linear-gradient(180deg, #7155ca 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #7155ca 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(-90deg, #7155ca 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #7155ca 50%, #f0f0f0 50%, #f0f0f0);
}

.level-6 {
    background-image: -webkit-linear-gradient(144deg, #576ec6 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #576ec6 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(-54deg, #576ec6 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #576ec6 50%, #f0f0f0 50%, #f0f0f0);
}

.level-7 {
    background-image: -webkit-linear-gradient(108deg, #589ec3 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #589ec3 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(-18deg, #589ec3 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #589ec3 50%, #f0f0f0 50%, #f0f0f0);
}

.level-8 {
    background-image: -webkit-linear-gradient(72deg, #59bfb4 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #59bfb4 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(18deg, #59bfb4 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #59bfb4 50%, #f0f0f0 50%, #f0f0f0);
}

.level-9 {
    background-image: -webkit-linear-gradient(36deg, #5abb86 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #5abb86 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(54deg, #5abb86 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #5abb86 50%, #f0f0f0 50%, #f0f0f0);
}

.level-10 {
    background-image: -webkit-linear-gradient(0deg, #5cb85c 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), -webkit-linear-gradient(180deg, #5cb85c 50%, #f0f0f0 50%, #f0f0f0);
    background-image: linear-gradient(90deg, #5cb85c 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #5cb85c 50%, #f0f0f0 50%, #f0f0f0);
}