/**** some globals ****/
.stocks-extension .small-text {
    font-size: .8em;
}

.stocks-extension .fwb {
    font-weight: bold;
}

.stocks-extension .tac {
    text-align: center;
}

.stocks-extension .tar {
    text-align: right;
}

.stocks-extension .quote-positive {
    color: #00873c;
    font-weight: bolder;
}

.stocks-extension .quote-negative {
    color: #F44E3F;
    font-weight: bolder;
}

.button-group .button {
    margin: 0 5px;
}

.button-group .button.selected {
    text-decoration: underline;
    font-family: "Inter", sans-serif;
    font-weight: 500;
}

/*** main components ***/

.stocks-extension .screen,
.stocks-extension .screen-wrapper {
    width: 550px;
    max-width: 550px;
    height: 630px;
    max-height: 630px;
}

/* make position consistent to panel icon */
.stocks-extension .menu-stock-ticker {
    max-width: 200px;
    width: 200px;
}

.stocks-extension .menu-stock-ticker .stock-info-box,
.stocks-extension .menu-stock-ticker .stock-quote-box {
    font-size: 1em;
}

.stocks-extension .menu-stock-ticker .ticker-stock-name-label,
.stocks-extension .menu-stock-ticker .ticker-stock-quote-change-label {
    font-size: .8em;
}

.stocks-extension .menu-stock-ticker .ticker-stock-quote-label {
    font-size: .9em;
    text-align: left;
    margin-right: 6px;
}

.stocks-extension .menu-stock-ticker .stock-info-box.tremendous .ticker-stock-quote-change-label,
.stocks-extension .menu-stock-ticker .stock-info-box.tremendous .ticker-stock-quote-label {
    font-size: .7em;
}


.stocks-extension .menu-stock-ticker .stock-info-box.compact .ticker-stock-name-label,
.stocks-extension .menu-stock-ticker .stock-info-box.regular .ticker-stock-name-label {
    margin-right: 10px;
}

.stocks-extension .menu-stock-ticker .separator {
    margin: 0 10px;
}

.stocks-extension .search-bar {
    height: 40px;
    padding: 5px 10px;
}

.stocks-extension .search-bar .search-area-box StEntry {
    width: 300px;
}

.stocks-extension .search-bar .search-area-box .navigate-back-icon-button {
    margin-right: 15px;
}

.stocks-extension .search-bar .search-area-box .search-text-input .search-entry-icon {
    width: 21px;
    height: 21px;
}

.stocks-extension .search-bar .button-box {
    height: 20px;
    margin-left: 15px;
}

.stocks-extension .search-bar .button-box .icon-button {
    margin: 0 5px;
}

.stocks-extension .card {
    margin: 10px 15px;
    padding: 10px 20px;
    box-shadow: none;
}

.stocks-extension .card.stock-card .quote-information-price-box,
.stocks-extension .card.stock-card .stock-full-name {
    min-height: 20px;
}

.stocks-extension .card.news-card .news-details {
    margin: 2px 0;
    padding: 2px 0;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
}

/*** stock details ***/
.stocks-extension .stock-details {
    min-width: 480px;
    margin: 0 15px 5px 15px;
    padding: 5px 20px;
}

.stocks-extension .stock-details-screen .button-group {
    height: 65px;
}

.stocks-extension .stock-details-screen .button-group-content {
    padding: 5px 0;
}

.stocks-extension .stock-details-screen .button-group .button {
    height: 25px;
    max-height: 25px;
}

.stocks-extension .stock-details-screen .stock-details-tab-button-group {
    height: 35px;
}

.stocks-extension .stock-details-screen .stock-details-tab-button-group .button-group-content {
    padding: 0;
}

.stocks-extension .stock-details-screen .stock-details-tab-button-group .button {
    height: 15px;
    max-height: 15px;
}

.stocks-extension .stock-left-details-box {
    margin-right: 10px;
}

.stocks-extension .stock-right-details-box {
    margin-left: 10px;
}

.stocks-extension .detail-item-value, .detail-item-label {
    font-size: .9em;
}

.stocks-extension .chart {
    width: 500px;
    height: 300px;
    margin: 5px;
}

.stocks-extension .chart-hover-box {
    margin-top: 10px;
    text-align: center;
}

.stocks-extension .chart-hover-label {
    margin-right: 5px;
    font-weight: bolder;
}


/*** edit screen ***/

.stocks-extension .edit-screen .form-element-box {
    margin: 10px 15px;
}

.stocks-extension .transaction-card .header-box {
    margin-bottom: 4px;
}

.stocks-extension .stock-card .stock-transactions-box {
    margin-top: 5px;
}

.stocks-extension .stock-card .detail-item-label,
.stocks-extension .stock-card .detail-item-value {
    font-size: .8em;
}
