    .piechart{
        position: relative;
        width: 200px;
        height: 200px;
        background-color: transparent;
        border-radius: 50%;
        overflow: hidden;
    }

   .layer{
      position: absolute;
      width: 25%;
      height: 25%;
      transform-origin: 0px 100px;
      left: 0;
      top: 0;
            border-left: 2px solid #000;

    /*  z-index: -12;*/
      overflow: hidden;
      text-align: center;
      color: #fff;
      padding-top: 12px;
   }

   .layer:before{
     content:'';
     width: 100%;
     height: 100%;
     position: absolute;
     background-color: transparent;
     transform-origin: 0px 100px;
     top: 0;
     left: 0;
   }

   .layer:nth-child(1){
    background-color: green;
    transform: translate(100px) rotate(0deg);
        border-bottom-left-radius: 80px;
    border-left: none;
   }

   .layer:nth-child(1)::before{
    transform:rotate(30deg);
   }

   .layer:nth-child(2){
    background-color: green;
    transform: translate(100px) rotate(30deg);
   }

   .layer:nth-child(2)::before{
    transform:rotate(60deg);
   }

   .layer:nth-child(3){
    background-color: green;
    transform: translate(100px) rotate(60deg);
       }

   .layer:nth-child(3)::before{
    transform:rotate(90deg);
   }
     
     .layer:nth-child(4){
    background-color: green;
    transform: translate(100px) rotate(90deg);
   }

   .layer:nth-child(4)::before{
    transform:rotate(120deg);
   }

   .layer:nth-child(5){
    background-color: green;
    transform: translate(100px) rotate(120deg);
   }

   .layer:nth-child(5)::before{
    transform:rotate(150deg);
   }

   .layer:nth-child(6){
    background-color: green;
    transform: translate(100px) rotate(150deg);
   }

   .layer:nth-child(6)::before{
    transform:rotate(180deg);
   }

   .layer:nth-child(7){
    background-color: red;
    transform: translate(100px) rotate(180deg);
   }

   .layer:nth-child(7)::before{
    transform:rotate(210deg);
   }

   .layer:nth-child(8){
    background-color: red;
    transform: translate(100px) rotate(210deg);
   }

   .layer:nth-child(8)::before{
    transform:rotate(240deg);
   }
   .layer:nth-child(9){
    background-color: red;
    transform: translate(100px) rotate(240deg);
   }

   .layer:nth-child(9)::before{
    transform:rotate(270deg);
   }

  .layer:nth-child(10){
    background-color: red;
    transform: translate(100px) rotate(270deg);
   }

   .layer:nth-child(10)::before{
    transform:rotate(300deg);
   }

   .layer:nth-child(11){
    background-color: red;
    transform: translate(100px) rotate(300deg);
   }

   .layer:nth-child(11)::before{
    transform:rotate(330deg);
   }

   .layer:nth-child(12){
    /*background-color: red;
    width: 100%;
    transform: translate(250px) rotate(330deg);
    border: 2px solid #000;*/
    background-color: red;
    width: 25%;
    transform: translate(100px) rotate(330deg);
    border-bottom-right-radius: 188px;
   }

   .layer:nth-child(12)::before{
    transform:rotate(20deg);
   }

       .innerCircle {
        position: absolute;
    width: 130px;
    height: 130px;
    background-color: #fff;
    border-radius: 100%;
    top: 34px;
    left: 34px;
    color: #000;
    }
    .innerCircle .content {
      position: absolute;
    display: block;
    width: 150px;
    top: 37px;
    left: -10px;
    text-align: center;
    font-size: 44px;
    }

    .year_select_box{
        width: 50%;
        margin-bottom: 30px;
        display: inline-block;
        margin-right: 2%;
        vertical-align: top;
        position: relative;
    }
    #upload_previous_data{
      width: 45%;
      vertical-align: top;
      position: relative;
    }