/* -----------------------------------

Petal Chart

-------------------------------------*/

body {
    background: #000;
    font-family: Helvetica;
}

.flex-container {
    width: 95vw;
    height: 95vh;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}

svg {
    max-width:100%;
    max-height:100%;
}


/* petal chart */

.topicText {
    font-size: 1.5em;
    text-transform: uppercase;
    fill: #ccc;
}
.topicText.big {
    font-size: 2.5em;
}

.splitText {
    font-size: 0.65em;
    text-transform: uppercase;
    fill: #fff;
    pointer-events: none;
}
.splitText.dark {
    fill: #777;
}
.legendText {
    font-size: 1em;
    text-transform: capitalize;
    fill: #fff;
}
.arcTopicBackground {
    fill: #240101;
}
.backgroundArc1 {
    fill: #111;
}
.backgroundArc2 {
    fill: #000;
}

.petal {
    fill-opacity: 0;
    stroke: #457aed;
    stroke-width: 0.2em;
    cursor: pointer;
}

.petal.selected{
    fill-opacity: 1;
}


/* text and legend */

#flex-legend {
    text-align: center;
}

#flex-legend h1 {
  background-image: linear-gradient(to right, #457aed 0%, #0e38c2 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  color: #fff;
  font-size: 4em;
  visibility: hidden;
  text-align: left;
}

#flex-legend p {
  color: #777;
  visibility: hidden;
  text-align: left;
}
.legendLine {
  fill: none;
  stroke: #777;
  stroke-width: 1px;
}


/* histogram */

.x-line line {
  stroke: #fff;
  stroke-width: 2;
}

.x-line circle {
  fill: #fff;
}

.x-line text {
  fill: #fff;
}

.axis path, .axis line {
  fill: none;
  stroke: #555;
  stroke-width: 0.5;
  shape-rendering: crispEdges;
}

.axis text {
  fill: #ccc;
}

.label text {
  fill: #ccc;
}

.grid line {
  stroke: #555;
  stroke-width: 0.5;
  shape-rendering: crispEdges;
}

.yourScore {
  fill: #de4338;
}

/* radar */

.circle {
  fill: none;
  stroke: #333;
  stroke-width: 0.5;
}

.spoke {
  stroke: #333;
  stroke-width: 0.5;
}

.radarpath {
  fill: #0e38c2;
  fill-opacity: 0.5;
  stroke: #0e38c2;
  stroke-width: 2;
}

.radarpath2{
  fill: #de4338;
  fill-opacity: 0.5;
  stroke: #de4338;
  stroke-width: 2;
}


.pointdot {
  fill: #0e38c2;
}

.pointdot2 {
  fill: #de4338;
}

.radartext {
  fill: #777;
  font-size: 0.6em;
}

.dimensiontext {
  fill: #ccc;
  font-size: 0.65em;
  text-transform: uppercase;
}

/* logos */

.logos {
    margin-top: 50px;
}

.logos img {
    visibility: hidden;
}

@media (max-width: 767px) {
    
    #flex-legend h1 {
        font-size: 2.5em;
    }
    
}