.alert-red {
    color: #d84847
}

#content {
    margin-top: 2rem
}

#calculator-container,
.ms-calc {
    background-color: #f8f8f8;
    padding: 1.5rem;
    margin: 2rem 0
}

#calculator-container h2,
.ms-calc h2 {
    margin: 0
}

#calculator-container h3,
.ms-calc h3 {
    margin-top: 1rem
}

#calculator-container p,
.ms-calc p {
    flex: 0 100%
}

@media screen and (min-width:40rem) {
    #calculator-container p,
    .ms-calc p {
        flex: 0 auto
    }
    #calculator-container p.col-max2,
    .ms-calc p.col-max2 {
        flex: 0 50%
    }
    #calculator-container p.col-max3,
    .ms-calc p.col-max3 {
        flex: 0 33%
    }
}

#calculator-container select,
.ms-calc select {
    border: .05rem solid #d0d0d0!important;
    padding: 1rem;
}

#calculator-container input[type=number],
#calculator-container input[type=text],
.ms-calc input[type=number],
.ms-calc input[type=text] {
    border-color: #d0d0d0
}

#calculator-container input,
.ms-calc input {
    text-align: left;
    width: 100%
}

#calculator-container input.empty,
.ms-calc input.empty {
    background-image: radial-gradient(circle at center, #d84847 3px, transparent 4px);
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: 1rem 100%
}

#calculator-container .label-required,
.ms-calc .label-required {
    background-image: radial-gradient(circle at center, #d84847 3px, transparent 4px);
    background-repeat: no-repeat;
    background-position-x: left;
    background-size: 1rem 100%;
    padding-left: 1rem;
    font-size: .75rem;
    margin: 1.25rem 0 0
}

#calculator-container input[type=checkbox],
#calculator-container input[type=radio],
.ms-calc input[type=checkbox],
.ms-calc input[type=radio] {
    width: auto
}

#calculator-container select,
.ms-calc select {
    width: 100%
}

@media screen and (min-width:40rem) {
    #calculator-container input,
    #calculator-container select,
    .ms-calc input,
    .ms-calc select {
        width: 12rem
    }
    #calculator-container input.input100,
    #calculator-container select.input100,
    .ms-calc input.input100,
    .ms-calc select.input100 {
        width: 100%
    }
}

#calculator-container input,
#calculator-container select,
.ms-calc input,
.ms-calc select {
    margin: 0 1rem .5rem 0
}

#calculator-container hr,
.ms-calc hr {
    margin: 1rem 0!important;
    background-color: transparent;
    color: transparent;
    border-bottom: 2px dotted #ccc;
    border-top: none!important;
    max-width: none!important
}

#calculator-container hr.hr-break,
.ms-calc hr.hr-break {
    border: none;
    margin: 0!important
}

#calculator-container .input,
.ms-calc .input {
    flex-wrap: wrap;
    display: flex;
    position: relative
}

#calculator-container .flex,
.ms-calc .flex {
    position: relative
}

#calculator-container .col100,
.ms-calc .col100 {
    flex-basis: 100%
}

#calculator-container .result,
.ms-calc .result {
    display: none
}

#calculator-container .key,
.ms-calc .key {
    display: inline-block;
    width: 15px;
    height: 12px;
    margin-right: 5px
}

#calculator-container .key.bar1,
.ms-calc .key.bar1 {
    background-color: #0047f5
}

#calculator-container .key.bar2,
.ms-calc .key.bar2 {
    background-color: #42bfc7
}

#calculator-container table.chart-tooltip,
.ms-calc table.chart-tooltip {
    font-size: .75rem!important;
    margin-bottom: 0!important
}

#calculator-container table.chart-tooltip td,
#calculator-container table.chart-tooltip th,
.ms-calc table.chart-tooltip td,
.ms-calc table.chart-tooltip th {
    padding: .25rem;
    background-color: #fff!important;
    border: 0!important;
    font-weight: 400
}

#calculator-container .enlarge-text,
.ms-calc .enlarge-text {
    font-size: 1.7em;
    color: #0047f5;
    font-weight: 700
}

#calculator-container .tooltip:not(.glossButton),
#umsearch .tooltip:not(.glossButton),
.ms-calc .tooltip:not(.glossButton) {
    position: relative;
    display: inline-block;
    text-decoration: none;
    overflow: visible;
    font-size: .75rem!important;
    padding: .1rem .35rem!important;
    margin: 0 .25rem!important;
    background-color: #0047f5!important;
    color: #fff!important;
    border-radius: 1rem!important;
    border: none!important;
    min-width: auto!important;
    line-height: .9rem
}

#calculator-container .tooltip:not(.glossButton):before,
#umsearch .tooltip:not(.glossButton):before,
.ms-calc .tooltip:not(.glossButton):before {
    content: "?"
}

#calculator-container .tooltip:not(.glossButton):focus,
#umsearch .tooltip:not(.glossButton):focus,
.ms-calc .tooltip:not(.glossButton):focus {
    outline: none;
    background-color: #42bfc7!important
}

#calculator-container .tooltip:not(.glossButton).dotted,
#umsearch .tooltip:not(.glossButton).dotted,
.ms-calc .tooltip:not(.glossButton).dotted {
    border-bottom: 1px dashed #222!important;
    background-image: none;
    background-color: transparent!important;
    color: #222!important;
    font-size: unset!important;
    cursor: help!important;
    padding: 0!important;
    margin: 0!important;
    border-radius: 0!important
}

#calculator-container .tooltip:not(.glossButton).dotted:before,
#umsearch .tooltip:not(.glossButton).dotted:before,
.ms-calc .tooltip:not(.glossButton).dotted:before {
    content: ""
}

#calculator-container .tooltip:not(.glossButton).light,
#umsearch .tooltip:not(.glossButton).light,
.ms-calc .tooltip:not(.glossButton).light {
    color: #fff!important;
    border-bottom: 1px dashed #fff!important
}

#calculator-container .tooltip .tooltiptext:not(.glossButton),
#umsearch .tooltip .tooltiptext:not(.glossButton),
.ms-calc .tooltip .tooltiptext:not(.glossButton) {
    visibility: hidden;
    width: 240px;
    bottom: 100%;
    left: 50%;
    margin-left: -120px;
    margin-bottom: .4rem;
    font-style: normal;
    font-size: .8rem;
    color: #333;
    background-color: #ace8fa;
    text-align: center;
    padding: .5rem;
    border-radius: .25rem;
    box-sizing: border-box;
    white-space: normal;
    position: absolute;
    z-index: 1
}

#calculator-container .tooltip .tooltiptext:not(.glossButton).align-left,
#umsearch .tooltip .tooltiptext:not(.glossButton).align-left,
.ms-calc .tooltip .tooltiptext:not(.glossButton).align-left {
    text-align: left
}

@media screen and (max-width:39rem) {
    #calculator-container .tooltip .tooltiptext:not(.glossButton),
    #umsearch .tooltip .tooltiptext:not(.glossButton),
    .ms-calc .tooltip .tooltiptext:not(.glossButton) {
        left: 0;
        position: fixed;
        bottom: -4rem;
        margin: 0;
        border-radius: 0;
        width: 100%;
        transition: bottom .8s;
        font-size: 1rem;
        padding: 1rem .5rem
    }
}

#calculator-container .tooltip:focus .tooltiptext,
#calculator-container .tooltip:hover .tooltiptext,
#umsearch .tooltip:focus .tooltiptext,
#umsearch .tooltip:hover .tooltiptext,
.ms-calc .tooltip:focus .tooltiptext,
.ms-calc .tooltip:hover .tooltiptext {
    visibility: visible
}

@media screen and (max-width:39rem) {
    #calculator-container .tooltip:focus .tooltiptext,
    #calculator-container .tooltip:hover .tooltiptext,
    #umsearch .tooltip:focus .tooltiptext,
    #umsearch .tooltip:hover .tooltiptext,
    .ms-calc .tooltip:focus .tooltiptext,
    .ms-calc .tooltip:hover .tooltiptext {
        bottom: 0
    }
}

#calculator-container .tooltip .tooltiptext:after,
#umsearch .tooltip .tooltiptext:after,
.ms-calc .tooltip .tooltiptext:after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #ace8fa
}

#calculator-container table,
#calculator-container td,
#calculator-container th,
.ms-calc table,
.ms-calc td,
.ms-calc th {
    background-color: #fff;
    border: 0;
    font-weight: 400
}

#results {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0 2rem 2rem
}

#results .clickable,
#results .hidden {
    display: none
}

#results td {
    text-align: right
}

#results td,
#results th {
    padding: .5rem 0;
    background-color: transparent;
    font-weight: 400;
    border: none
}

#results>table.primary>tbody>tr:first-child {
    font-size: 1.25rem
}

#results>table.primary>tbody>tr.emp {
    font-size: 1.1rem
}

#results .total {
    font-size: 1.25rem;
    border-top: .1rem solid #d6d6d6
}

.calculator {
    margin-bottom: 2rem
}

.ms-calc {
    background-color: transparent;
    padding: 0;
    margin: 0
}

.ms-calc h2.shaded {
    background-color: #f3f3f3;
    color: #0047f5;
    border-bottom: 1px solid #b8b8b8;
    padding: 1rem 1.5rem
}

.ms-calc h3 {
    margin-top: 1rem
}

.ms-calc h4 {
    margin-top: 1.5rem;
    margin-bottom: 0
}

.ms-calc h3,
.ms-calc h4,
.ms-calc p {
    padding: 0 1rem;
    box-sizing: border-box
}

@media screen and (min-width:40rem) {
    .ms-calc h3,
    .ms-calc h4,
    .ms-calc p {
        padding: 0 0 0 1.5rem
    }
}

.ms-calc .label-required {
    margin-left: 1.5rem
}

.ms-calc .input {
    background-color: #f8f8f8
}

.ms-calc input.ng-invalid {
    background-image: radial-gradient(circle at center, #d84847 3px, transparent 4px);
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: 1rem 100%
}

.ms-calc .explore {
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    margin-top: 1.5rem
}

.ms-calc .explore .input {
    padding-top: 1.5rem
}

.ms-calc .explore h4 {
    padding: 1rem 1.5rem;
    background-color: #0047f5;
    color: #fff;
    margin: 0 0 .05rem
}

.ms-calc .explore h4.last {
    margin-bottom: 0
}

.ms-calc .explore h4[role=button] {
    position: relative;
    cursor: pointer
}

.ms-calc .explore h4[role=button]:after {
    content: "";
    display: inline-block;
    border-right: .1rem solid #fff;
    border-bottom: .1rem solid #fff;
    width: .6rem;
    height: .6rem;
    transform: rotate(45deg);
    transform-origin: center;
    position: absolute;
    right: 1rem;
    top: 1.3rem
}

.ms-calc .explore h4[role=button].open {
    cursor: default
}

.ms-calc .explore h4[role=button].open:after {
    display: none;
    transform: rotate(-135deg)
}

.ms-calc .explore h5 {
    padding: 0 1.5rem;
    margin: 1.5rem 0 0;
    color: #2f2f2f;
    font-style: normal
}

.ms-calc .chart-tooltip {
    font-size: .75rem;
    margin-bottom: 0
}

.ms-calc .chart-tooltip td,
.ms-calc .chart-tooltip th {
    padding: .25rem!important;
    text-align: left!important
}

.ms-calc .error {
    display: block;
    color: #d84847
}

.ms-calc #result {
    padding-right: 1rem
}

.ms-calc #result h4 {
    margin-bottom: .5rem
}

.ms-calc #result .key.your-fund {
    background-color: #0047f5
}

.ms-calc #result .key.fees-effect {
    background-color: #a6befc
}

.ms-calc #result .key.alt-fund {
    background-color: #42bfc7
}

.ms-calc #result .key.alt-fees-effect {
    background-color: #ace8fa
}

.ms-calc #result .amt {
    float: right
}

.ms-calc #results {
    padding: 0
}

#managedFunds .hide {
    display: none
}