/* =====================================
   LIKTEŅA MATRICA
   SVG
   ===================================== */

#matrix{

    width:100%;

    max-width:1000px;

    margin:40px auto;

}


/* =====================================
   SVG
   ===================================== */

.matrix-svg{

    display:block;

    width:100%;

    height:auto;

    margin:0 auto;

}


/* =====================================
   SVG TEKSTS
   ===================================== */

.matrix-svg text{

    font-family:"Montserrat",sans-serif;

    user-select:none;

}


/* =====================================
   APĻI
   ===================================== */

.matrix-circle{

    stroke:#444;

    stroke-width:2;

    fill:#fff;

}


/* =====================================
   SKAITĻI
   ===================================== */

.matrix-number{

    font-family:"Montserrat",sans-serif;

    font-size:22px;

    font-weight:700;

    text-anchor:middle;

    dominant-baseline:middle;

    fill:#222;

}


/* =====================================
   LĪNIJAS
   ===================================== */

.matrix-line{

    stroke:#666;

    stroke-width:2;

    fill:none;

}

.matrix-axis{

    stroke:#bcbcbc;

    stroke-width:2;

}

.matrix-male{

    stroke:#3f51b5;

    stroke-width:2;

}

.matrix-female{

    stroke:#ff5c8a;

    stroke-width:2;

}

.matrix-money{

    stroke:#444;

    stroke-width:2;

    stroke-dasharray:10 8;

}


/* =====================================
   KRĀSU PALETE
   ===================================== */

:root{

    --matrix-purple:#7b4bc1;
    --matrix-blue:#3658d8;
    --matrix-light:#31a9d8;
    --matrix-green:#5cae52;
    --matrix-yellow:#d9b13f;
    --matrix-orange:#f08b42;
    --matrix-red:#d54a42;

}


/* =====================================
   APĻU KRĀSAS
   ===================================== */

.matrix-purple{

    stroke:var(--matrix-purple);

}

.matrix-blue{

    stroke:var(--matrix-blue);

}

.matrix-light{

    stroke:var(--matrix-light);

}

.matrix-green{

    stroke:var(--matrix-green);

}

.matrix-yellow{

    stroke:var(--matrix-yellow);

}

.matrix-orange{

    stroke:var(--matrix-orange);

}

.matrix-red{

    stroke:var(--matrix-red);

}


/* =====================================
   IKONAS
   ===================================== */

.matrix-heart{

    font-size:30px;

}

.matrix-dollar{

    font-size:30px;

    font-weight:700;

    fill:#2e8b57;

}