/* The stock page's blocks beyond the dividend calendar: the banner's quote row, the
   newsletter sign-up and the capture strategy (the child theme's rules for them, as
   style.css had them), then the site's own drawings of what plugins drew on WordPress:
   the payout donut and the dividend charts (ApexCharts), the sector comparison and the
   forum (wpDiscuz), with the boxes and type those had. */

/* banner: the quote row (stock_banner.php) */
.stock-data-container .low-container { display: grid; grid-template-columns: auto auto auto auto auto auto; justify-content: space-between; margin-top: -10px; max-width: 1022px; left: 50%; position: relative; transform: translateX(-50%); }
.stock-data-item { flex: 1; box-sizing: border-box; padding: 5px; text-align: left; display: inline-block; line-height: 1; }
.stock-data-item.default { display: flex; flex-direction: column; row-gap: 5px; }
.first-column { flex: 2; margin-right: 5px; }
.price-wrapper { display: inline-flex; align-items: flex-end; }
.price-wrapper div { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 3px; }
.stock-data-container .price { font-size: 36px; font-weight: bold; }
.updated-time { font-size: 14px; }
.currency { font-size: 16px; margin-bottom: 2px; }
.price-change { font-size: 20px; margin-left: 10px; }
.arrow-down { transform: rotate(180deg); }
.change-percent { font-size: smaller; }
.range-container { display: flex; justify-content: space-between; width: 100%; }
.range-separator { text-align: center; flex-grow: 1; font-weight: lighter; }
.stock-data-container progress { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; opacity: .7; border-radius: 10px; background-color: #dfe1e6; }
.stock-data-container progress::-webkit-progress-bar { background-color: #dfe1e6; border-radius: 10px; }
.stock-data-container progress::-webkit-progress-value { background-image: linear-gradient(to right, #1f9992, #294d80); border-radius: 10px; }
.stock-data-container progress::-moz-progress-bar { background-image: linear-gradient(to right, #1f9992, #294d80); border-radius: 10px; }

@media screen and (max-width: 1024px) {
    .stock-data-container .low-container { display: block; margin-top: 0; }
    .first-column { flex-direction: column; margin-bottom: 10px; }
    .stock-data-item.default { flex-direction: unset; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid gainsboro; row-gap: 2px; }
    .stock-data-item.default:last-child { border-bottom: none; align-items: center; }
    .stock-data-item.first-column { flex-direction: column; align-items: flex-start; border-bottom: none; }
    .progress-container { min-width: 150px; }
    .stock-data-container .price { font-size: 32px; }
    .currency { font-size: 14px; }
    .price-change { font-size: 17px; }
    .updated-time { font-size: 12px; }
}

/* the market-state dot (setMarketStatusIndicator), in the banner and the price chart's header */
.market-state { display: flex; align-items: center; height: 30px; align-self: center; padding: 5px 10px; border-radius: 20px; }
.market-state[hidden] { display: none; }
.state-circle { width: 10px; height: 10px; border-radius: 50%; position: relative; }
.market-state.pre { background-color: #FCF3CF; }
.market-state.pre .state-circle { background-color: #F39C12; }
.market-state.abierto { background-color: #d4edda; }
.market-state.abierto .state-circle { background-color: #28a745; animation: blink 2s infinite; }
.market-state.post-market { background-color: #D6EAF8; }
.market-state.post-market .state-circle { background-color: #3498DB; }
.market-state.cerrado { background-color: #f8d7da; }
.market-state.cerrado .state-circle { background-color: #dc3545; }
.market-state .tooltip { visibility: hidden; position: absolute; z-index: 1; bottom: 125%; transform: translateX(-90%); padding: 5px; border-radius: 6px; background-color: #555555b3; color: #fff; font-size: 14px; line-height: 1.4; text-align: center; white-space: nowrap; opacity: 0; transition: opacity 1s; }
.market-state:hover { transition: ease-out 0.3s; box-shadow: 0px 0px 15px rgb(0 0 0 / 33%); }
.market-state:hover .tooltip { visibility: visible; opacity: 1; }
@media screen and (min-width: 1025px) {
    .stock-data-container .market-state .tooltip { transform: none; }
}
@media screen and (max-width: 1024px) {
    .stock-data-container .market-state { min-height: 30px; align-self: self-start; margin-left: auto; }
    .market-state .tooltip { bottom: -30px; white-space: normal; min-width: 250px; max-width: 250px; }
}

/* when the page's data was last refreshed, over the first block's title */
.data-updated { float: right; margin: 12px 0 0 12px; font-size: 12px; color: #6b7280; }

/* On a phone the theme hid the sidebar and printed its blocks inside the column (where to
   buy after the next dividend, the price chart after the payout, the other calendars after
   the calendar table, the similar companies after their section). Here the sidebar's own
   blocks take those places: the section becomes one column whose items are ordered. */
@media screen and (max-width: 768px) {
    #stock_template .custom-page-container { display: flex; flex-direction: column; }
    #stock_template aside.sidebar-content { position: static; height: auto; order: 1; }
    #stock_template aside .stay-at-bottom { display: block; position: static; }
    #stock_template aside .where-to-buy-aside { display: block; }
    #stock_template aside .sticky-container:empty { display: none; }
    #calendario .left-side, #calendario aside.sidebar-content, #calendario aside .stay-at-bottom { display: contents; }
    #calendario [data-block="next"] { order: 1; }
    #calendario .where-to-buy-aside { order: 2; }
    #calendario [data-block="signup"] { order: 3; }
    #calendario [data-block="payout"] { order: 4; }
    #calendario .stock-chart-container { order: 5; }
    #calendario [data-block="calendar"] { order: 6; }
    #calendario .table_dividend_calendar_aside_wrapper { order: 7; }
    #calendario .where-to-buy-aside, #calendario .stock-chart-container, #calendario .table_dividend_calendar_aside_wrapper { width: 100%; max-width: calc(100vw - 30px); margin: 0 auto 10px; box-sizing: border-box; }
}

/* the forms' hidden trap field and their answers */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup-feedback, .forum-feedback { margin: 10px 0 0; padding: 10px 14px; border-radius: 6px; font-size: 15px; }
.signup-feedback.success, .forum-feedback.success { background-color: #d4edda; color: #155724; }
.signup-feedback.error, .forum-feedback.error { background-color: #f8d7da; color: #721c24; }

/* newsletter sign-up (newsletter/newsletter_html.php) */
.signup-container { display: flex; flex-direction: column; align-items: center; }
.signup-container p { width: 90%; }
.signup-container #newsletter-form { display: flex; flex-direction: column; align-items: center; width: 100%; }
.signup-container .inputs-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.signup-container .gdpr-consent-wrapper { display: flex; flex-direction: row; align-items: center; gap: 5px; font-size: 13px; }
.signup-container .gdpr-consent-wrapper label { margin-bottom: 0; }
.input-wrapper { display: flex; gap: 10px; align-items: center; width: 80%; }
.input-wrapper input[type="email"] { flex: 1; padding: 10px 15px; border-radius: 5px; border: 1px solid #ccc; }
.input-wrapper button { border-radius: 20px; background: linear-gradient(246deg, #097c5c 10%, #1c4b9d); color: white; text-transform: none; }
.input-wrapper button:hover { color: #d3d3d3; }
@media screen and (max-width: 768px) {
    .signup-container .input-wrapper { width: 100%; }
}

/* payout donut */
.donut-chart { display: flex; align-items: center; justify-content: center; gap: 60px; padding: 14px 0 24px; }
.donut { position: relative; width: 300px; max-width: 60%; }
.donut svg { display: block; width: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 5.6; }
.donut-retained { stroke: #2d3551; }
.donut-paid { stroke: #29c4d0; }
.donut-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #373d3f; }
.donut-centre span { font-size: 16px; }
.donut-centre strong { font-size: 18px; font-weight: 400; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.donut-legend li { position: relative; margin: 0; padding-left: 20px; line-height: 1.4; color: #373d3f; }
.donut-legend li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; }
.donut-legend .paid::before { background: #29c4d0; }
.donut-legend .retained::before { background: #2d3551; }
.donut-legend span { display: block; font-size: 13px; }
.donut-legend strong { display: block; font-size: 19px; font-weight: 400; }
@media screen and (max-width: 649px) {
    .donut-chart { flex-direction: column; gap: 20px; }
    .donut-centre span { font-size: 13px; }
    .donut-centre strong { font-size: 16px; }
    .donut-legend { flex-direction: row; gap: 30px; }
}

/* the charts site.js draws (dividend_chart, industry_market and yahoo_finance_chart
   shortcodes): range buttons, axes, the theme's colours, the tooltip card, entry animations */
.btn-apexcharts { padding: 8px; border-radius: 8px; margin-right: 5px; }
.btn-apexcharts:last-child { margin-right: 0; }
.btn-apexcharts.active-btn { background-color: #13396f; color: #fff; }
.btn-apexcharts.active-btn:hover { color: #fff; }
.dividend-chart, .sector-yield-chart, .price-chart { position: relative; font-family: Nunito, sans-serif; }
.dividend-chart { min-height: 372px; margin-top: 10px; }
.sector-yield-chart { min-height: 322px; }
.dividend-chart svg, .sector-yield-chart svg, .price-chart svg { display: block; width: 100%; overflow: visible; }
.dividend-chart .grid, .sector-yield-chart .grid { stroke: #e0e0e0; stroke-width: 1; }
.dividend-chart .tick, .sector-yield-chart .tick { font-size: 12px; fill: #373d3f; }
.dividend-chart .axis-title { font-size: 12px; font-weight: 600; fill: #6b6c6c; }
.dividend-chart .bar { transform-box: fill-box; transform-origin: 50% 100%; transition: filter .15s; }
.dividend-chart .bar:hover, .dividend-chart .bar.lit { filter: brightness(1.18); }
.dividend-chart .band { fill: transparent; }
.dividend-chart .band:hover { fill: rgba(176, 190, 207, .22); }
.dividend-chart .line { fill: none; stroke: #7fc2ff; stroke-width: 3; stroke-linecap: butt; stroke-linejoin: round; pointer-events: none; }
.dividend-chart .dot { fill: #7fc2ff; pointer-events: none; }
.sector-yield-chart .hbar { transform-box: fill-box; transform-origin: 0 50%; transition: filter .15s; }
.sector-yield-chart .hbar:hover { filter: brightness(1.12); }
.sector-yield-chart .mark { stroke: #2f4f4f; stroke-width: 1; stroke-dasharray: 3 3; }
.sector-yield-chart .mark-label text { font-size: 11px; fill: #000; paint-order: stroke; stroke: #f0f8ff; stroke-width: 6px; stroke-linejoin: round; }
.price-chart { height: 250px; border-radius: 0 0 10px 10px; }
.price-chart svg { border-radius: 0 0 10px 10px; overflow: hidden; }
.price-chart .line { fill: none; stroke: #77b6ea; stroke-width: 2.5; stroke-linejoin: round; }
.price-chart .cursor { stroke: #90a4ae; stroke-width: 1; stroke-dasharray: 3 3; }
.price-chart .dot { fill: #77b6ea; stroke: #fff; stroke-width: 2; }
.stock-chart-container { margin-bottom: 10px; background-color: #f0f0f0; border-radius: 10px; }
.stock-chart-container .search-dropdown-item:hover { background-color: initial; cursor: initial; }
.stock-chart-container .search-dropdown-item .suggestion-image { border-radius: 100%; }
.stock-chart-container .search-dropdown-item .content { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; }
.stock-chart-container .price-wrapper { display: flex; align-items: flex-end; justify-content: space-around; width: 100%; min-height: 32px; padding: 5px; line-height: 1; box-sizing: border-box; }
.stock-chart-container .price-wrapper .price { font-size: 22px; font-weight: bold; }
.stock-chart-container .price-wrapper .price .currency { font-size: 12px; }
.stock-chart-container .price-wrapper .price-change { margin-left: 0; font-size: 16px; }
.stock-chart-container .price-wrapper .price-change .arrow { scale: .9; margin-bottom: -1px; }
.stock-chart-container .price-wrapper .price-change .change-percent { margin-bottom: 1px; }
.stock-chart-container .price-change.negative { color: #dc3545; }
.stock-chart-container .price-change.positive { color: #1e8e3e; }
.button-stock-chart-container { position: relative; display: flex; justify-content: center; margin-top: -25px; padding-bottom: 5px; }
.button-stock-chart-container button { min-height: 0; padding: 1px 6px; border-bottom: 2px solid transparent; border-radius: 0; background-color: transparent; font-size: 11px; font-weight: 400; text-transform: none; color: #66758a; }
.button-stock-chart-container button:hover { background-color: transparent; box-shadow: none; color: black; }
.button-stock-chart-container button.active { border-bottom-color: #0081f2; box-shadow: none; color: #0081f2; font-size: 11px; font-weight: 400; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding-top: 4px; font-size: 12px; color: #373d3f; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 12px; height: 12px; border-radius: 50%; }
.chart-tip { position: absolute; z-index: 3; min-width: 120px; border: 1px solid #e3e3e3; border-radius: 5px; background: rgba(255, 255, 255, .96); box-shadow: 2px 2px 6px -4px #999; color: #373d3f; font-size: 12px; line-height: 1.5; pointer-events: none; white-space: nowrap; overflow: hidden; }
.chart-tip-title { padding: 6px 10px; border-bottom: 1px solid #ddd; background: #eceff1; font-size: 12px; }
.chart-tip-body { padding: 8px 10px; }
.chart-tip-row { display: flex; align-items: center; gap: 4px; }
.chart-tip-row i { flex: none; width: 12px; height: 12px; margin-right: 4px; border-radius: 50%; }
.chart-tip-row strong { font-weight: 700; }
.chart-tip hr { margin: 6px 0; border: 0; border-top: 1px solid #e3e3e3; }
.price-chart .chart-tip-body { text-align: center; }
.price-chart .chart-tip-row { justify-content: center; }
.price-chart .chart-tip-row:first-child span { font-size: 13px; font-weight: 700; }
.price-chart .chart-tip-row + .chart-tip-row { font-size: smaller; color: #66758a; }

@keyframes chart-grow-up { from { transform: scaleY(0); } }
@keyframes chart-grow-right { from { transform: scaleX(0); } }
@keyframes chart-draw { from { stroke-dashoffset: 1; } }
@keyframes chart-fade { from { opacity: 0; } }
svg.animate .bar { animation: chart-grow-up .7s cubic-bezier(.22, .9, .3, 1) backwards; }
svg.animate .hbar { animation: chart-grow-right .8s cubic-bezier(.22, .9, .3, 1) backwards; }
svg.animate .line { stroke-dasharray: 1; animation: chart-draw 1.1s ease-out .15s backwards; }
svg.animate .area, svg.animate .mark, svg.animate .mark-label, svg.animate .dot { animation: chart-fade .6s ease-out .5s backwards; }
@keyframes donut-sweep { from { stroke-dasharray: 0 100; } }
.donut-paid { animation: donut-sweep 1s cubic-bezier(.22, .9, .3, 1) .1s backwards; }
@media (prefers-reduced-motion: reduce) {
    svg.animate .bar, svg.animate .hbar, svg.animate .line, svg.animate .area, svg.animate .mark, svg.animate .mark-label, svg.animate .dot, .donut-paid { animation: none; }
}

/* capture strategy (renderStrategyCapture) */
.capture-dividends .step .title { margin-top: 40px; text-transform: uppercase; font-size: 14px; margin-bottom: 10px; }
.capture-dividends .step .main-label { text-transform: uppercase; }
.capture-dividends .step-container { display: flex; justify-content: space-between; gap: 10px; }
.capture-dividends .info-box { display: flex; flex-direction: column; align-items: center; border-radius: 10px; background-color: whitesmoke; width: 100%; padding: 5px; }
.capture-dividends .info-box.colored { background-color: #2c83db5c; }
.capture-dividends .info-bottom-message-capture { margin-top: 65px; padding: 10px; background-color: papayawhip; border-radius: 10px; }
.capture-dividends .info-bottom-message-capture-container { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 14px; }
.capture-dividends .main-value { font-size: 17px; }
.capture-dividends .info-bottom-message-capture svg { flex: none; fill: #856404; }
@media screen and (max-width: 576px) {
    .capture-dividends .step-container.step-one { flex-direction: column; }
}

/* forum: a header with the count, the form as a card, each conversation a card with its
   answers behind a rule; avatars are initials on one of six tones */
.forum { margin: 0 0 50px; color: #1f2937; }
.forum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.forum-head .fake-h2 { flex: 1; }
.forum-count { flex: none; padding: 4px 12px; border-radius: 999px; background: #e7eef8; color: #13396f; font-size: 13px; font-weight: 700; }
.forum-intro { margin: 0 0 20px; color: #4b5563; }
.forum-form { margin: 0 0 24px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.forum-replying { margin: 0 0 10px; font-size: 13px; color: #4b5563; }
.forum-cancel { min-height: 0; padding: 0 6px; background: none; color: #1c4b9d; font-size: 13px; font-weight: 600; text-transform: none; }
.forum-cancel:hover { background: none; text-decoration: underline; }
.forum-form textarea { display: block; width: 100%; min-height: 96px; padding: 12px 14px; border: 1px solid #d5dce6; border-radius: 10px; background: #f8fafc; font-size: 15px; line-height: 1.5; resize: vertical; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.forum-form textarea:focus, .forum-author input:focus { border-color: #1c4b9d; background: #fff; box-shadow: 0 0 0 3px rgba(28, 75, 157, .15); outline: none; }
.forum-author { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.forum-author input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid #d5dce6; border-radius: 10px; background: #f8fafc; font-size: 14px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.forum-author button { flex: none; height: 42px; padding: 0 20px; border-radius: 999px; background: linear-gradient(246deg, #097c5c 10%, #1c4b9d); color: #fff; font-weight: 700; text-transform: none; }
.forum-author button:hover { color: #d3d3d3; }
.forum-form.collapsed .forum-author { display: none; }
.forum-form.collapsed textarea { min-height: 52px; }
.forum-threads { display: flex; flex-direction: column; gap: 12px; }
.forum-thread { padding: 18px 18px 8px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.forum-thread > .forum-form, .forum-replies > .forum-form { margin: 0 0 14px 52px; box-shadow: none; background: #f8fafc; }
.forum-empty { margin: 0; padding: 28px 16px; border: 1px dashed #cbd5e1; border-radius: 14px; text-align: center; color: #64748b; }
.forum-comment { display: flex; gap: 12px; padding-bottom: 10px; scroll-margin-top: 140px; }
.forum-replies { margin-left: 19px; padding-left: 21px; border-left: 2px solid #e2e8f0; }
.forum-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 14px; font-weight: 700; letter-spacing: .5px; line-height: 1; }
.forum-comment.reply .forum-avatar { width: 32px; height: 32px; font-size: 12px; }
.forum-avatar.tone-0 { background: #dbeafe; color: #1e40af; }
.forum-avatar.tone-1 { background: #dcfce7; color: #166534; }
.forum-avatar.tone-2 { background: #fef3c7; color: #92400e; }
.forum-avatar.tone-3 { background: #fce7f3; color: #9d174d; }
.forum-avatar.tone-4 { background: #ede9fe; color: #5b21b6; }
.forum-avatar.tone-5 { background: #cffafe; color: #155e75; }
.forum-comment.editorial .forum-avatar { background: #13396f; color: #fff; }
.forum-body { flex: 1; min-width: 0; }
.forum-body header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; }
.forum-comment:not(.reply) .forum-body header { min-height: 40px; }
.forum-comment.reply .forum-body header { min-height: 32px; }
.forum-author-name { font-size: 15px; font-weight: 700; color: #111827; }
.forum-badge { padding: 2px 8px; border-radius: 999px; background: #e7eef8; color: #13396f; font-size: 11px; font-weight: 700; }
.forum-body time { font-size: 12px; color: #6b7280; white-space: nowrap; }
.forum-reply-to { margin: 0 0 2px; font-size: 12px; color: #6b7280; }
.forum-reply-to span { font-weight: 600; color: #1c4b9d; }
.forum-text { overflow-wrap: anywhere; }
.forum-text p { margin: 0; font-size: 15px; line-height: 1.6; color: #374151; }
.forum-text p + p { margin-top: 8px; }
.forum-reply { display: inline-flex; align-items: center; gap: 4px; min-height: 0; margin: 4px 0 0 -8px; padding: 4px 8px; border-radius: 999px; background: none; font-size: 13px; font-weight: 600; text-transform: none; color: #6b7280; transition: background-color .15s, color .15s; }
.forum-reply:hover { background: #eef2f7; color: #13396f; box-shadow: none; }
.forum-reply svg { width: 16px; height: 16px; fill: currentColor; }
@media screen and (max-width: 649px) {
    .forum-head { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 12px; }
    .forum-thread { padding: 14px 12px 6px; }
    .forum-replies { margin-left: 8px; padding-left: 12px; }
    .forum-thread > .forum-form, .forum-replies > .forum-form { margin-left: 0; }
    .forum-author { flex-direction: column; align-items: stretch; }
    .forum-author input { flex: none; }
}