.chart {
  position: relative;
  width: 100%;
  margin: 0 auto;
  font-family: Arial, 'Helvetica', sans-serif;
}

.non-prototype {
    max-width: 60em;
}

.abt .row {
  display: flex;
  flex-wrap: nowrap;
  width: 98%;
  margin-left: 0;
}

.abt .row:not(:first-child) {
  border: 1px solid #ccc;
  border-left: 0;
  border-right:0;
}

.col {
  flex-grow: 1;
  padding: 1em;
}

.col h3 {
    margin-top: .5em;
    margin-bottom: 0;
    font-size: 1.2em;
}

.col p {
    margin: 0;
}

.col:not(:first-child) {
  max-width: 22%;
  width: 100%;
  border-left: 1px solid #ccc;
}

.header-labels .col {
    border: 0;
}

.header-labels h3 {
    font-weight:bold;
}

.col:first-child {
  padding-left: 0;
  width: 12%;
    min-width: 14%;
}

.col.age {
  border: 0;
    font-size: .8em;
}

.col.age p {
    margin-top: .9em;
}

.header-labels {
  border: 0;
}

.pie {
    width: 3.75rem;
    height: 3.75rem;
    padding: 1.4em;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
}

.ten-percent {
    background-image: url('../img/10percent.png');
}

.twenty-percent {
    background-image: url('../img/20percent.png');
}

.twenty-five-short-term {
    background-image: url('../img/25percent-short-term.png');
}

.thirty-percent {
    background-image: url('../img/30percent.png');
}

.forty-percent {
    background-image: url('../img/40percent.png');
}

.fifty-percent {
    background-image: url('../img/50percent.png');
}

.sixty-percent {
    background-image: url('../img/60percent.png');
}

.seventy-percent {
    background-image: url('../img/70percent.png');
}

.eighty-percent {
    background-image: url('../img/80percent.png');
}

/*.eighty-short-term {*/
    /*background-image: url('../img/80percent-short-term.png');*/
/*}*/

.ninety-percent {
    background-image: url('../img/90percent.png');
}

.one-hundred-percent {
    background-image: url('../img/100percent.png');
}

.one-hundred-short-term {
    background-image: url('../img/100percent-short-term.png');
}

.abt option,
.abt.c select {
    font-weight:bold;
}

.row-mobile,
.conservative-mobile,
.moderate-mobile,
.growth-mobile,
.aggressive-mobile,
.abt.pf,
.pf.m {
    display: none;
}

.abt .track-name{
	display:none;
}

.abt.show-all-tracks .track-name{
	display: block;
    margin-top: 0.75em;
    padding: 0.5em 0;
    max-height: 100px;
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 1000px) {
    .col.age p {
        font-size: .9em;
    }
    .header-labels h3,
    .col h3 {
        font-size: 1em;
    }
}
@media screen and (max-width: 750px) {
    .col h3 {
        font-size: .8em;
        font-weight: bold;
        margin-top: .2em;
    }
    .col p {
        font-size: .8em;
        line-height: 1.3em;
        margin-top: .1em;
    }
    .track {
        margin-top: 2.5em;
    }
    .abt label {
        font-weight: normal;
        display: block;
    }

    .c {
        padding-left: .5em;
    }
    select#select-track {
        font-weight: bold;
    }
}

@media screen and (max-width: 600px) {
    .abt .row {
        display: none;
    }
    .row-mobile {
        display: flex;
        width: 95%;
        margin:0 auto;
        border-bottom: 1px solid #ccc;
        padding: 0 .25em;
    }
    .top {
        border-top: 1px solid #ccc;
    }
    .col {
        padding: .25em;
    }
    .col:not(:first-child) {
        max-width: none;
        width: 50%;
    }
    .col:first-child {
        max-width:22%;
    }

    .pie {
        width:1%;
        padding: 1.9em;
        float: left;
        position: relative;
    }
    
    .abt .text {
        float: right;
        display: block;
        width: 50%;
    }

    .abt.pf,
    .pf.m {
        display: flex;
        flex-flow: row nowrap;
        font-size: .8em;
        width: 95%;
        margin:0 auto;
    }
    .mobile-header {
        display: none;
        margin-left: 7px;
        font-weight: bold;
    }
    .a,
    .c {
        flex-grow: 1;
    }

    .a {
        max-width: 30%;
        font-size:.9em;
    }

    .col:first-child {
        max-width:29%;
    }

    .abt .is-selected {
        display: block;
    }
}