/* Stocks -----------------------------------------------------------*/
#stocks {
    width: 0;
    min-width: 0;
    min-height: 0;
    height: 0;
    overflow: hidden;
    max-height: 0;
    transition: all 1s cubic-bezier(0.43, -0.14, 0.31, 1.14);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.stocks-active #stocks {
    min-width: 24rem;
    min-height: 17rem;
    padding-right: 4rem;
    margin: 2rem 4rem 2rem 0;
    border-right: solid 1px #a4a7a9;
    max-height: 64rem;
    box-sizing: border-box;
}

#stocks form {
    width: 100%;
}

#stock-body {
    background: none;
}

#stocks table {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.symbol, .exchange, .highPrice, .lowPrice, .tradeVolume, .avgVolume, .marketCap, .openPrice, .yesterdayClose, .percentChange, .lastTrade {
    width: 0;
    background: #C03;
    display: none;
}

#additionalSymbolsXY label {
    display: none;
}

#ticker {
    position: relative;
    max-width: 100%;
}

.quoteTable th {
    display: none;
}

#additionalSymbolsXY label {
    display: none;
}

#additionalSymbolsXY {
    display: none;
}

#additionalSymbolSubmit {
    display: none !important;
}

td.company {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 10rem;
}

td.changeAmt {
    text-align: right !important;
    padding: 0px;
}

td.changeAmt.Up, td.changeAmt.Down, td.lastPrice, td.lastPrice.Up, td.changeAmt.Steady, td.company {
    padding: 0.5rem;
    position: relative;
}

td.changeAmt.Up {
    color: #00ab4e;
}

td.changeAmt.Down {
    color: red;
}

td.changeAmt.Up,
td.changeAmt.Down {
    padding-right: 2rem;
}

td.changeAmt.Up::after, td.changeAmt.Down::after {
    font-family: "FontAwesome";
    font-size: 0.875em;
    position: absolute;
    right: 1rem;
    top: 0.625em;
}

td.changeAmt.Up::after {
    content: "\f176";
}

td.changeAmt.Down::after {
    content: "\f175";
}

div.stockname {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.price, div.pricechange {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

div.pricechange {
}

tr.even {
}

tr.odd td {
}

tr.headerRow {
    display: none;
}

tr.even, tr.odd {
    position: relative;
}

tr.even {
    background-color: #fff;
}

@media only screen and (max-width:1280px) {
    .stocks-active.weather-active #stocks {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        width: 50%;
        min-width: 50%;
        padding-left: 2rem;
    }
}

@media only screen and (max-width:768px) {
    .stocks-active.weather-active #stocks {
        min-height: 14rem;
    }

    .stocks-active:not(.weather-active) #stocks {
        width: 100%;
        padding-right: 0;
        margin-right: 0;
        border: none;
    }
}

@media only screen and (max-width:640px) {
    .stocks-active.weather-active #stocks,
    .stocks-active #stocks {
        height: auto;
        width: 100%;
        min-width: 100%;
        padding: 0;
    }
}