/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Feb 13, 2017, 6:28:48 PM
    Author     : ROBIN
    Description: Chart Diagram Style-Sheet
*/


.chart-view-section .left-area{
    float: left;
}
.middle-area{
    margin-top: 200px;
    padding-right: -50%;
    overflow: hidden;
}
.chart{
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100%;
    height: 300px;
    background: white;
    box-shadow: 0px 0px 4px #444;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 100;    
    padding: 0;
    overflow: hidden;
}
.chart .chart-head {
    /*border-bottom: 3px solid #cad2d3;*/
    background: #057D8B;
    margin: 0;
    padding: 10px 10px;
    /*border-radius: 5px;*/
}
.chart .chart-head i{
    float: left;
    font-size: 30px;
    margin: 0;
    margin-right: 10px;
    color: white;
}
.chart .chart-head h1{
    font-size: 30px;
    margin: 0 !important;
    color: white;
}
.chart .chart-body p{
    color: #666;
    font-size: 13px;
    margin-top: 5px;
    padding: 5px 10px;
}

.chart1 .chart-head {
    background: #CB5C00;
}
.chart2 .chart-head {
    background: #A7C500;
}
.chart3 .chart-head {
    background: #007A7A;
}
.chart4 .chart-head {
    background: brown;
}



.chart2, .chart3, .chart4{
    display: none;
}

.chart-circle{
    height: 370px;
    width: 370px;    
    /*background: #CB5C00;*/
    border: 3px dotted #888;
    border-radius: 100%;
}

.chart-section{
    float: left;
    height: 80px;
    width: 80px;    
    transition: all .5s;
    cursor: pointer;
    /*box-shadow: 2px 1px 20px #333 inset;*/
}
.chart-center{
    position: absolute;
    z-index: 200;
    top: 100px;
    left: 115px;
    margin: auto;
    height: 162px;
    width: 162px;
    background: whitesmoke;
    /*background: url(../../img/backgrounds/picker.png);*/
    background-size: 100% 100%;
    border-radius: 100%;
    z-index: 6666666;
    box-shadow: 0px 0px 5px #007A7A;
}

/*.gradient-wrapper { padding: 10px; border-radius: 50%; display: inline-block;
                    background: -webkit-linear-gradient(#FDD100, #FDA800, #FD7300, #FD0000, #CB0073, #7008A8, #3813AD, #113FA9, #009797,#00CA00, #9DEC00, #FDFC00); 
                    background: -o-linear-gradient(#FDD100, #FDA800, #FD7300, #FD0000, #CB0073, #7008A8, #3813AD, #113FA9, #009797,#00CA00, #9DEC00, #FDFC00); 
                    background: -moz-gradient(#FDD100, #FDA800, #FD7300, #FD0000, #CB0073, #7008A8, #3813AD, #113FA9, #009797,#00CA00, #9DEC00, #FDFC00); 
                    background: linear-gradient(#FDD100, #FDA800, #FD7300, #FD0000, #CB0073, #7008A8, #3813AD, #113FA9, #009797,#00CA00, #9DEC00, #FDFC00); 

}

*/
.maincircle { width: 150px; height: 150px; background: white; border-radius: 50%; margin: auto; margin-top: 6px; }


.chart-center img{
    position: relative;
    top: 40px;
    width: 80%;
    margin: auto;
    z-index: 6666666;
}
.chart-section img{
    position: relative;
    top: 20px;
    left: 10px;
    width: 80%;
}
.chart-view1{
    border-radius: 100%; 
    border: 1px dotted #CB5C00;
    background: #f3f3f3;
    margin-top: 40px;
    margin-left: 0px;    
}

.chart-view2{ 
    border: 1px dotted #A7C500;
    border-radius: 100%;     
    background: #f3f3f3;
    margin-top: 40px;
    margin-left: 204px;

}
.chart-view3{ 
    border: 1px dotted #007A7A;
    border-radius: 100%;      
    /*z-index: 557;*/
    background: #f3f3f3;
    margin-top: 150px;
}
.chart-view4{ 
    border: 1px dotted brown;
    border-radius: 100%;     
    background: #f3f3f3;
    margin-top: 150px;
    margin-left: 204px;
}

.active1, .chart-view1:hover{
    transition: all .5s;
    /*transform: translate(-10px, -10px);*/
    transform: scale(1.5);
    box-shadow: 0px 0px 5px #888;
}
.active2, .chart-view2:hover{
    transition: all .5s;
    /*transform: translate( 10px, -10px);*/
    transform: scale(1.5);
    box-shadow: 0px 0px 5px #888;
}
.active3, .chart-view3:hover{
    transition: all .5s;
    /*transform: translate(-10px, 10px);*/
    transform: scale(1.5);
    box-shadow: 0px 0px 5px #888;
}
.active4, .chart-view4:hover {
    transition: all .5s;
    /*transform: translate( 10px, 10px);*/
    transform: scale(1.5);
    box-shadow: 0px 0px 5px #888;
}
.chart-data-mobile ul{
    margin-bottom: 10px !important;
}
.chart-data-mobile li{
    background-color: #057D8B !important;
    border-right: 1px solid white; 
}
.chart-data-mobile li a{
    padding: 10px 2px;
    font-weight: 600;
    font-size: 13px !important;
}
.chart-data-mobile li a:hover{
    border-bottom: 3px inset #3d3d3d !important;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}