/* Sistemas styles
-------------------------------------------------- */

.location {
    z-index: 1000;
}

@media only screen and (max-width: 760px) {
    .location {
        display: none;
    }

    .system-atualization {
        font-size: 0.8rem;
    }
}



/* Gráfico
-------------------------------------------------- */

.tag-system {
    display: flex;
    justify-content: space-around;
}

.tag-system > div {
    border: solid 0.15rem #5220F5;
    width: 10rem;
    margin: 2rem;
}

.tag-system img {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    height: 5rem;
}

.pie-chart {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    height: 5rem;
}

@media only screen and (max-width: 760px) {
    .tag-system {
        flex-flow: wrap;
    }
}

.graph {
    background-color: white;
    padding: 1rem;
}

.graph figure {
    margin: 1em auto;
}

/* Unifilar
-------------------------------------------------- */
[data-variable-id] {
    font-size: 1.25rem;
    cursor: default;
    font-weight: 700;
}

[data-variable-id="6"] {
    fill: #007FFF;
}

[data-variable-id="3"] {
    fill: #064793;
}

[data-variable-id="5"], [data-variable-id="13"], [data-space-id="64"] {
    fill: #EB271E;
}

[data-variable-id="8"], [data-variable-id="10"] {
    fill: #064793;
}

/* Represas
-------------------------------------------------- */

.reservoir-data tr:nth-of-type(odd) {
    background: lightgray;
}

.reservoir-data tr:nth-of-type(even) {
    background: white;
}

.table-exception {
    border-top: #413078 1rem solid;
}

.equivalent-system {
    display: flex;
    border: 0.1rem solid aqua;
}

.equivalent-system div {
    font-size: 1.25rem;
}

.equivalent-system table {
    width: 100%;
    display: table;
}

.equivalent-system table thead {
    border-bottom: 0.1rem solid white;
}

.equivalent-system table th, td {
    padding: 0.75rem 0rem;
}

.equivalent-system div {
    width: 14rem;
}

.system-obs {
    font-size: 0.8rem;
    line-height: 0.8rem
}

@media only screen and (max-width: 760px) {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
    display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
 
td {
 /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
 }

 td:before {
 /* Now like a table header */
    position: absolute;
 /* Top/left values mimic padding */
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
 }

 .table-systems td {
    padding-left: 60%;
 }

 .equivalent-system {
    display: block;
 }

/* Tabela dos reservatórios do sistema */

.table-systems td:nth-of-type(1):before {content: "Represa";}

.table-systems td:nth-of-type(2):before {content: "Volume Total (hm³)";}

.table-systems td:nth-of-type(3):before {content: "Volume Útil (hm³)";}

.table-systems td:nth-of-type(4):before {content: "Volume Útil (%)";}

.table-systems td:nth-of-type(5):before {content: "Vazão Afluente (m³/s)";}

.table-systems td:nth-of-type(6):before {content: "Vazão Defluente (m³/s)";}

.table-systems td:nth-of-type(7):before {content: "Chuva (mm)";}

}

/* Tabela do sistema equivalente */

.equivalent-system td:nth-of-type(1):before {
    content: "Volume Total (hm³)";
}

.equivalent-system td:nth-of-type(2):before {
    content: "Volume Útil (hm³)";
}

.equivalent-system td:nth-of-type(3):before {
    content: "Volume Útil (%)";
}

.equivalent-system td:nth-of-type(4):before {
    content: "Vazão Afluente (m³/s)";
}

.equivalent-system td:nth-of-type(5):before {
    content: "Vazão Defluente (m³/s)";
}

.equivalent-system td:nth-of-type(6):before {
    content: "Chuva (mm)";
}


/* Estruturas
-------------------------------------------------- */

.system-structures {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-content: stretch;
}

.system-structures div {
    padding: 0.5rem 1.5rem;
    margin: 1rem;
    display: grid;
    grid-template-columns: 5fr 1fr;
    justify-self: center;
    align-items: center;
    background-color: white;
    place-self: stretch;
    box-shadow: 0.25rem 0.25rem 0.25rem darkgray;
    line-height: 1rem;
    height: 4rem;
}

.system-structures span:last-child {
    justify-self: end;
}

@media only screen and (max-width: 760px) {

    .system-structures {
        display: block;
    }

}

    /* Mananciais
-------------------------------------------------- */

.btn-blue {
    background-color: #413078;
    transition: all ease 750ms;
}

.btn-blue:hover {
    background-color: #5220F5;
}