/* Bodygraph générale */
/* Personality */
.conscious {
    stroke: #191970;
    fill: #191970;
    opacity: 0.8;
}

.personality {
    width: 100px;
    border: #191970 2px solid;
    justify-self: end;
    color: #191970;
}

.personality-item {
    display: flex;
    justify-content: space-around;
    padding: 7px 0 7px 0;
    align-items: center;
}

.personality-icon, .personality-label {
    width: 30px;
    margin: 0 5px 0 5px;
}

.personality-fixing-state {
    width: 15px;
    margin: 0 5px 0 5px;
}

.personality-icon svg, .personality-icon svg path, .personality-icon svg g {
    stroke: #191970!important;
}

.personality-icon svg g g path {
    fill: #191970!important;
}

/* Design */
.unconscious {
    stroke: #8B0000;
    fill: #8B0000;
    opacity: 0.8;
}

.design {
    width: 100px;
    border: #8B0000 2px solid;
    color: #8B0000;
}

.design-item {
    display: flex;
    justify-content: space-around;
    padding: 7px 0 7px 0;
    flex-direction: row-reverse;
    align-items: center;
}

.design-icon, .design-label {
    width: 30px;
    margin: 0 5px 0 5px;
}

.design-fixing-state {
    width: 15px;
    margin: 0 5px 0 5px;
}

.design-icon svg, .design-icon svg path, .design-icon svg g {
    stroke: #8B0000!important;
}

.design-icon svg g g path {
    fill: #8B0000!important;
}

/* Center active */
/* g.center-active path:first-child {
    fill: #F39C12;
} */

#Head.center-active path:first-child, #G.center-active path:first-child {
    fill: #FFFF00;
}

#Sacral.center-active path:first-child, #Ego.center-active path:first-child, #Root.center-active path:first-child, #Solar_Plexus.center-active path:first-child {
    fill: #FFA500;
}

#Throat.center-active path:first-child {
    fill: #00BFFF;
}

#Ajna.center-active path:first-child, #Spleen.center-active path:first-child {
    fill: #9ACD32;
}

/* Gate */
.gate {
    stroke: #8A2BE2;
    fill: #8A2BE2;
    opacity: 1;
}

.gate + text, .transit + text, .transpersonal + text, .mental + text, .harmonic + text, .receiver + text {
    fill: #fff;
}

/* Fixing state */
.marker-star .personality-fixing-state::before, .marker-star .design-fixing-state::before, .personality-fixing-state.marker-star::before, .design-fixing-state.marker-star::before, .marker-star .transit-fixing-state::before {
    content: "\2736"; /* Unicode étoile pleine */
}

.marker-up .personality-fixing-state::before, .marker-up .design-fixing-state::before, .personality-fixing-state.marker-up::before, .design-fixing-state.marker-up::before, .marker-up .transit-fixing-state::before {
    content: "\25B2"; /* Unicode triangle haut */
}

.marker-down .personality-fixing-state::before, .marker-down .design-fixing-state::before, .personality-fixing-state.marker-down::before, .design-fixing-state.marker-down::before, .marker-down .transit-fixing-state::before {
    content: "\25BC"; /* Unicode triangle bas */
}

/* Transit générale */
/* Transit */
.transitGate {
    stroke: #2C3E50;
    fill: #2C3E50;
    opacity: 0.8;
}

.transitCol .transit {
    width: 100px;
    border: #2C3E50 2px solid;
    justify-self: center;
    color: #2C3E50;
}

.transit-item {
    display: flex;
    justify-content: space-around;
    padding: 7px 0 7px 0;
}

.transit-icon, .transit-label {
    width: 30px;
    margin: 0 5px 0 5px;
}

.transit-fixing-state {
    width: 15px;
    margin: 0 5px 0 5px;
}

.transit-icon svg, .transit-icon svg path, .transit-icon svg g {
    stroke: #2C3E50!important;
}

.transit-icon svg g g path {
    fill: #2C3E50!important;
}

/* Perso */
.perso {
    stroke: #9932CC;
    fill: #9932CC;
    opacity: 0.8;
}

.quantum {
    width: 150px;
    border: #9932CC 2px solid;
    justify-self: center;
    color: #9932CC;
}

.quantum-icon svg, .quantum-icon svg path, .quantum-icon svg g {
    stroke: #9932CC!important;
}

.quantum-icon svg g g path {
    fill: #9932CC!important;
}

.quantum-item {
    display: flex;
    justify-content: space-around;
    padding: 7px 0 7px 0;
}

.quantum .personality-label, .quantum .personality-fixing-state, .quantum1 .personality-label, .quantum1 .personality-fixing-state, .quantum2 .personality-label, .quantum2 .personality-fixing-state{
    color: #191970;
}

.quantum .design-label, .quantum .design-fixing-state, .quantum1 .design-label, .quantum1 .design-fixing-state, .quantum2 .design-label, .quantum2 .design-fixing-state{
    color: #8B0000;
}

/* Composite general */
/* Perso 1 */
.bodygraph1 {
    color: #4169E1;
}

.perso1 {
    stroke: #4169E1;
    fill: #4169E1;
    opacity: 0.8;
}

.quantum1 {
    width: 150px;
    border: #4169E1 2px solid;
    justify-self: center;
    color: #4169E1;
}

.quantum1 .quantum-icon svg, .quantum1 .quantum-icon svg path, .quantum1 .quantum-icon svg g {
    stroke: #4169E1!important;
}

.quantum1 .quantum-icon svg g g path {
    fill: #4169E1!important;
}

/* Perso 2 */
.bodygraph2 {
    color: #FF69B4;
}

.perso2 {
    stroke: #FF69B4;
    fill: #FF69B4;
    opacity: 0.8;
}

.quantum2 {
    width: 150px;
    border: #FF69B4 2px solid;
    justify-self: center;
    color: #FF69B4;
}

.quantum2 .quantum-icon svg, .quantum2 .quantum-icon svg path, .quantum2 .quantum-icon svg g {
    stroke: #FF69B4!important;
}

.quantum2 .quantum-icon svg g g path {
    fill: #FF69B4!important;
}

/* Shadow */
.gateShadow {
    stroke: orange;
    fill: orange;
    opacity: 0.8;
}

.transpersonal {
    stroke: rgb(13 110 253);
    fill: rgb(13 110 253);
    opacity: 0.8;
}

.mental {
    stroke: rgb(220 53 69);
    fill: rgb(220 53 69);
    opacity: 0.8;
}

.harmonic {
    stroke: #58151c;
    fill: #58151c;
    opacity: 0.8;
}

.receiver {
    stroke: rgb(25 135 84);
    fill: rgb(25 135 84);
    opacity: 0.8;
}

.shadow {
    stroke: orange;
    fill: orange;
    opacity: 0.8;
}

.gateShadow + text, .gateShadowInactive + text {
    /* opacity: 0.2; */
    fill: #ffffff;
}

#Head.center-inactive path:first-child, #Ajna.center-inactive path:first-child, #Throat.center-inactive path:first-child, #G.center-inactive path:first-child, #Sacral.center-inactive path:first-child, #Ego.center-inactive path:first-child, #Solar_Plexus.center-inactive path:first-child, #Root.center-inactive path:first-child, #Spleen.center-inactive path:first-child {
    fill: #C6C6C6!important;
}

@media screen and (max-width: 351px) {
    .personality, .design, .quantum, .transitCol .transit {
        width: 60px;
    }

    .quantum1, .quantum2 {
        width: 80px;
    }

    .personality-heading, .design-heading, .quantum-heading, .transit-heading {
        font-size: 8px;
    }

    .personality-item, .design-item, .quantum-item, .transit-item {
        padding: 0;
    }

    .personality-label, .design-label, .transit-label {
        width: 15px;
        font-size: 0.5rem;
        margin: 0 2px 0 2px;
    }

    .personality-icon, .design-icon, .quantum-icon, .transit-icon {
        width: 15px;
        margin: 0 2px 0 2px;
    }

    .personality-icon svg, .design-icon svg, .quantum-icon svg, .transit-icon svg {
        width: 10px;
    }

    .personality-fixing-state, .design-fixing-state {
        width: 5px;
        margin: 0 2px 0 2px;
    }

    .personality-fixing-state::before, .design-fixing-state::before {
        font-size: 8px;
    }

    .color, .tone, .base {
        font-size: 8px;
    }
}

@media (min-width: 351px) and (max-width: 576px) {
    .personality, .design, .quantum, .transit {
        width: 75px;
    }

    .quantum1, .quantum2 {
        width: 80px;
    }

    .personality-heading, .design-heading, .quantum-heading, .transit-heading {
        font-size: 0.7rem;
    }

    .personality-item, .design-item, .quantum-item, .transit-item {
        padding: 3px 0 3px 0;
    }

    .personality-label, .design-label, .transit-label {
        width: 20px;
        font-size: 0.7rem;
        margin: 0 2px 0 2px;
    }

    .personality-icon, .design-icon, .quantum-icon, .transit-icon {
        width: 15px;
        margin: 0 2px 0 2px;
    }

    .personality-icon svg, .design-icon svg, .quantum-icon svg, .transit-icon svg {
        width: 10px;
    }

    .personality-fixing-state, .design-fixing-state, .transit-fixing-state {
        width: 5px;
        margin: 0 2px 0 2px;
    }

    .personality-fixing-state::before, .design-fixing-state::before, .transit-fixing-state::before {
        font-size: 8px;
    }

    .color, .tone, .base {
        font-size: 0.6rem;
    }
}

/* Gene Keys */
#geneKeys .sphere svg {
    width: 70px;
}

#geneKeys .arrow svg {
    width: 30px;
}

#geneKeys .frequencies .badge {
    width: 50px;
    padding: 5px;
    margin-right: 5px;
}

#birthTimeRangeCharts .design, #birthTimeRangeCharts .personality {
    width: 60px;
}

#birthTimeRangeCharts .personality-heading, #birthTimeRangeCharts  .design-heading {
    font-size: 8px;
}

#birthTimeRangeCharts .personality-item, #birthTimeRangeCharts  .design-item {
    padding: 0;
}

#birthTimeRangeCharts .personality-label, #birthTimeRangeCharts .design-label {
    width: 15px;
    font-size: 0.5rem;
    margin: 0 2px 0 2px;
}

#birthTimeRangeCharts .personality-icon, #birthTimeRangeCharts .design-icon {
    width: 15px;
    margin: 0 2px 0 2px;
}

#birthTimeRangeCharts .personality-icon svg, #birthTimeRangeCharts .design-icon svg {
    width: 10px;
}

#birthTimeRangeCharts .personality-fixing-state, #birthTimeRangeCharts .design-fixing-state {
    width: 5px;
    margin: 0 2px 0 2px;
}

#birthTimeRangeCharts .personality-fixing-state::before, #birthTimeRangeCharts .design-fixing-state::before {
    font-size: 8px;
}

#birthTimeRangeCharts .color, #birthTimeRangeCharts .tone, #birthTimeRangeCharts .base {
    font-size: 8px;
}