/* 
    Created on : Sep 20, 2017, 12:24:52 PM
*/


.wrap-progressbar {
    float: left;
    margin: 40px 20px;
}

.progress-bar {
    position: relative;
    height: 200px;
    width: 200px;
    margin-bottom: 10px;
}

.progress-bar div {
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

.progress-bar .background { background-color: #b3cef6; }

.progress-bar .rotate {
    clip: rect(0 100px 200px 0);
    background-color: #4b86db;
}

.progress-bar .left {
    clip: rect(0 100px 200px 0);
    opacity: 1;
    background-color: #b3cef6;
}

.progress-bar .right {
    clip: rect(0 100px 200px 0);
    transform: rotate(180deg);
    opacity: 0;
    background-color: #4b86db;
}
@keyframes 
toggle {  0% {
              opacity: 0;
          }
          100% {
              opacity: 1;
          }
}
.position.one .opts-perc span {
    position: absolute;
    font-family: Arial;
    font-size: 32px;
    line-height: 152px;
    height: 152px;
    width: 152px;
    left: 23.5px;
    top: 23.5px;
    text-align: center;
    border-radius: 50%;
    background-color: #34495e;
    color:#fff
}
.position.two .opts-perc span {
    position: absolute;
    font-family: Arial;
    font-size: 32px;
    line-height: 152px;
    height: 152px;
    width: 152px;
    left: 23.5px;
    top: 23.5px;
    text-align: center;
    border-radius: 50%;
    background-color: #34495e;
    color:#fff
}

.position.three .opts-perc span {
    position: absolute;
    font-family: Arial;
    font-size: 32px;
    line-height: 152px;
    height: 152px;
    width: 152px;
    left: 23.5px;
    top: 23.5px;
    text-align: center;
    border-radius: 50%;
    background-color: #34495e;
    color:#fff
}
.position.four .opts-perc span {
    position: absolute;
    font-family: Arial;
    font-size: 32px;
    line-height: 152px;
    height: 152px;
    width: 152px;
    left: 23.5px;
    top: 23.5px;
    text-align: center;
    border-radius: 50%;
    background-color: white;
}
.position.five .opts-perc span {
    position: absolute;
    font-family: Arial;
    font-size: 32px;
    line-height: 152px;
    height: 152px;
    width: 152px;
    left: 23.5px;
    top: 23.5px;
    text-align: center;
    border-radius: 50%;
    background-color: white;
}
.position.six .opts-perc span {
    position: absolute;
    font-family: Arial;
    font-size: 32px;
    line-height: 152px;
    height: 152px;
    width: 152px;
    left: 23.5px;
    top: 23.5px;
    text-align: center;
    border-radius: 50%;
    background-color: white;
}
.clearfix{
    display: block;
    clear: both;
}
.wrap-bar-chart{
    display: block;
    clear: both;
    padding: 30px;
    width: 65%;
    border-top: 1px solid #ccc;
}
a.canvasjs-chart-credit{
    display: none !important;
}
#chartContainer{
    margin-bottom: 15px;
}

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
ul.tab-links{
    margin: 0
}
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}
.tab-links li:first-child {
    margin: 0px;
}

.tab-links a {
    padding:9px 15px;
    display:inline-block;
    border-radius:3px 3px 0px 0px;
    background:#ccc;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition:all linear 0.15s;
}

.tab-links a:hover {
    background:#a7cce5;
    text-decoration:none;
}

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}
.tab-content .tab, .tab-content .tab p,.tab-content .tab li {
    font-size: 15px;
    line-height: 1.4;
}

.tab {
    display:none;
}

.tab.active {
    display:block;
}
ul.tab-links li h1{
    margin: 0
}
ul.tab-links li h1 a{
    text-decoration: none;
}