#districts-statistic-chart {
    height: 10vw;
    float : left;
    width : 10vw;
}

.chart_v2 {
    --w:150px;
    --g:0deg;
    --r:0deg;
    --o:0deg;
    --y:0deg;
    --b:360deg;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    border-radius: 50%;
    margin: 5px;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    
    background-image: conic-gradient(
    green 0 var(--g),
    red 0 var(--r),
    orange 0 var(--o),
    yellow 0 var(--y),
    gray 0 var(--b));

}

.chart_v2 {
display: flex;
justify-content: center;
align-items: center;
}

.districts-statistic-map-row {
   float : right;
   width : 22vw;   
}

#complited-count, #fail-count, #wait-count, #count-all, #fail-count-objective {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    float: right;
    margin-right: 8px;
}

#count-all {
    background-color: gray;
}

#wait-count {
    background-color: yellow;
}

#fail-count {
    background-color: red;
}

#complited-count {
    background-color: green;
}

#fail-count-objective {
    background-color: orange;
}

#container-statistic {
  padding: 12px;
  font-family: monospace;
  position: fixed;
  right: 0px;
  width: 60vw;
}

#container-statistic #container-statistic-btn-form  {
  padding: 12px;
  background: rgb(183, 183, 183);
  border: 1px solid rgb(100,100,100);
  width: 200px;
  margin-top:12px;
  cursor: pointer;
}

.container-statistic-h1 {
  font-size: x-large;
  padding-bottom: 3px;
}

.container-statistic-row {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: large;
}


.conincal-status-id-0 {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: gray;
}

.conincal-status-id-1 {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: yellow;
}

.conincal-status-id-2 {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: green;
}

.conincal-status-id-3 {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: red;
}

.conincal-status-id-4 {
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: orange;
}

@media screen and (min-device-width: 280px) and (max-device-width: 1023px) {

    #history_moment, #history_moment_label {
      font-size: 48px;
    }

}