/* 
Theme Name: Investing In The Web
Theme URI: https://pirenko.com
Description: Analyzer - Child theme of Twenty Twenty Three
Author: Severo Coutinho
Author URI: https://pirenko.com
Template: twentytwentythree
Version: 1.0
Text Domain: twentytwentythree-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
# CSS vars
--------------------------------------------------------------*/
:root {
    --aly-cell-pading: 14px;
    --aly-cell-extrapading: 26px;
    --aly-body-color: #2b3140;
    --aly--foliospacing: 16px;
    --aly--active-color: #136e8b;
}

/*--------------------------------------------------------------
# General Tweaks
--------------------------------------------------------------*/
* {
    webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    background-image: url(../analyser/assets/images/analyser_bg.svg);
    background-size: 100vw auto;
    background-repeat: no-repeat;
    background-position: center 20px;
}

select,
input {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.6;
    background-color: #F0F2F2;
    color: #90A1AA;
    border-width: 0px;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 15px;
}

input {
    outline: none;
}

p:empty {
    display: none;
}

.page-id-180 main .is-layout-constrained>.alignwide,
.page-id-33 main .is-layout-constrained>.alignwide {
    border-radius: 8px;
    background-color: #FFFFFF;
    padding: 20px;
}

.aly_white_block {
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: var(--aly-cell-pading);
}

.aly_white_block.aly_unpadded {
    padding: 0px;
}

.aly_padded {
    padding: var(--aly-cell-pading);
}

.aly_white_block.aly_extra_pad {
    padding: var(--aly-cell-extrapading);
}

.aly_white_block.aly_opacer {
    background-color: rgba(255, 255, 255, 0.74);
}

.aly_centered_col {
    text-align: center;
}

main {
    min-height: calc(100vh - 24px - 52px - 72px - 72px - 92px + 92px);
}

body.admin-bar main {
    min-height: calc(100vh - 24px - 52px - 72px - 72px - 92px - 32px + 92px);
}

body:not(.editor-styles-wrapper) main {
    /*margin-top: 38px !important;*/
}

body header {
    margin-bottom: 38px !important;
}

body main {
    margin-top: 0px !important;
}

body .wp-block-post-content+.wp-block-template-part {
    display: none;
}

@media only screen and (min-width: 768px) {
    body main {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

     body.single-portfolio main {
        justify-content: flex-start;
    }

    body main>div {
        width: 100%;
    }
}

#aly_pie_chart_wrapper {
    .apexcharts-canvas {
        width: 186px !important;
    }

    .apexcharts-legend {
        top: inherit !important;
        bottom: 0px !important;
    }

    .apexcharts-legend-marker {
        height: 8px !important;
        width: 12px !important;
        border-radius: 3px;
        overflow: hidden;
    }

}

.aly_only_logged {
    display: none !important;
}

.block-editor-iframe__body .aly_only_logged,
body.logged-in .aly_only_logged {
    display: block !important;
}

body.logged-in .wp-block-navigation .wp-block-navigation-item.aly_only_logged {
    display: flex !important;
}

body.logged-in .aly_only_logged_out {
    display: none !important;
}

.aly_teaser_text {
    margin-top: -15px !important;
}

.page-id-763 .wp-container-7.wp-container-7 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page-id-763 .wp-container-7.wp-container-7 > .alignwide {
    max-width: 1200px;
}

.page-id-763 .wp-container-7.wp-container-7 .alignfull {
    max-width: none;
}
.page-id-763 h1 span {
    float: left;
}
.page-id-763 h1 .aly_in_tooltip {
    font-weight: 400;
    left: -128px;
    top: 50px;
    bottom: inherit;
    z-index: 99;
}
.page-id-763 h1 .aly_in_tooltip:after {
    border-width: 1px 0px 0px 1px;
    top: -8px;
}

body.aly_historical .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--wide-size);
}

body.aly_historical .entry-content {
    margin-top: 0px !important;
}
body.aly_historical h1.wp-block-post-title {
    margin-bottom: 0px !important;
}
#aly_page_disclaimer {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 23px;
}

/*--------------------------------------------------------------
# clearfix
--------------------------------------------------------------*/
.clearfix {
    overflow: auto;
    zoom: 1;
    width: 100%;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/*--------------------------------------------------------------
# Flex Grid
--------------------------------------------------------------*/
.aly-flex-container {
    display: flex;
    column-gap: 30px;
}

.aly-flex-clm-90 {
    flex: 9;
}

.aly-flex-clm-80 {
    flex: 8;
}

.aly-flex-clm-70 {
    flex: 7;
}

.aly-flex-clm-60 {
    flex: 6;
}

.aly-flex-clm-65 {
    flex: 6.5;
}

.aly-flex-clm-50 {
    flex: 5;
}

.aly-flex-clm-40 {
    flex: 4;
}

.aly-flex-clm-35 {
    flex: 3.5;
}

.aly-flex-clm-30 {
    flex: 3;
}

.aly-flex-clm-20 {
    flex: 2;
}

.aly-flex-clm-10 {
    flex: 1;
}

.aly-flex-clm-100 {
    width: 100%;
}

.aly_flexy {
    display: flex;
}


#aly_single_portfolio_wrapper .aly-flex-container {
    gap: var(--aly--foliospacing);
    width: calc(100% - var(--aly--foliospacing));
}

#aly_portfolios_inner_flex {
    flex-wrap: wrap;
}

#aly_portfolios_inner_flex .aly-flex-clm-35 {
    flex: calc(33.3333% - 20px);
    flex-grow: 0;
    flex-shrink: 0;
}

.aly_flex_breaker {
    flex-basis: 100%;
}

#aly_single_portfolio_wrapper .aly-flex-container .aly-flex-clm-50 {
    flex: 50%;
    flex-shrink: 0;
    flex-grow: 0;
}

#aly_single_portfolio_credits {
    text-align: right;
    font-size: 12px;
    width: 100%;
    padding-right: 18px;
    padding-bottom: 8px;
}

#aly_single_portfolio_credits a {
    text-decoration: none;
}

.aly_title_wrapper #aly_single_portfolio_credits {
    width: auto;
    float: left;
    margin: 0px 0px 0px auto !important;
    position: relative;
    top: 4px;
    text-align: left;
    padding-right: 0px;
}


/*--------------------------------------------------------------
# aly_spacer
--------------------------------------------------------------*/
.aly_spacer[data-desk="40"] {
    margin-bottom: 40px;
}

/*--------------------------------------------------------------
# aly_checkmark_list
--------------------------------------------------------------*/
.aly_checkmark_list {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    padding: 0px;
}

.aly_checkmark_list li {
    position: relative;
    list-style: none;
    padding-left: 40px;
    margin-bottom: 10px;
    text-align: left;
}

.aly_checkmark_list li:last-child {
    margin-bottom: 0px;
}

.aly_checkmark_list li:before {
    background-image: url(../analyser/assets/images/checkmark.svg);
    content: '';
    position: absolute;
    left: 0px;
    top: 1px;
    background-color: #52B788;
    width: 26px;
    height: 26px;
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
}

/*--------------------------------------------------------------
# Contact Form 7
--------------------------------------------------------------*/
#aly_contact_funds {
    margin-bottom: 20px;
}

#aly_contact_funds .aly-flex-container {
    margin-bottom: 20px;
}

#aly_contact_funds .aly_first_flex.aly-flex-container {
    margin-bottom: 4px;
}

#aly_contact_funds .aly-flex-container .aly-flex-clm-80 {
    position: relative;
}

#aly_contact_funds .aly-flex-clm-20 {
    max-width: 120px;
}

.wpcf7-form .aly-flex-container {
    margin-bottom: 30px;
}

.wpcf7-form h3 {
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0px 6px;
}

.aly_h3_like {
    font-size: 22px;
    font-weight: bold;
}

.wpcf7-form select,
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="text"] {
    width: 100%;
}

.wpcf7-form .aly_inline_field {
    max-width: 120px;
    margin: 0px 12px;
}

html .wpcf7-not-valid-tip {
    display: none;
}

html .wpcf7-form.invalid .wpcf7-not-valid-tip {
    display: block;
}

.wpcf7-form .wpcf7-list-item {
    margin-left: 0px;
}

#aly_funds_validator {
    display: none;
}

.wpcf7-form .aly_theme_button {
    float: right;
    margin-left: 10px;
    -webkit-appearance: none;
   -moz-appearance: none;
   appearance:  none;
}

.wpcf7-form input.wpcf7-submit.aly_submit_loading {
    opacity: .8;
    cursor: wait;
}

.wpcf7-form .aly-flex-clm-30 {
    flex: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

.aly_last {
    margin-bottom: 20px;
}

#aly_duplicate_asset {
    margin-bottom: 20px;
    float: left;
    margin-left: 0px;
}

.wpcf7-spinner {
    position: absolute;
    display: none !important;
}

.wpcf7-not-valid-tip {
    color: #EA452F;
    font-size: 14px;
}

.wpcf7-response-output {
    float: left;
    width: 100%;
    border-width: 0px !important;
    padding: 0px;
}

/*--------------------------------------------------------------
# Tooltip
--------------------------------------------------------------*/
.aly_share {
    position: relative;
}

.aly_copy_tooltip {
    position: absolute;
    top: calc(100% + 6px);
    background: var(--wp--preset--color--primary);
    padding: 8px 15px;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    border-radius: 8px;
    width: 150px;
    left: -2px;
    opacity: 0;
    z-index: 1;
}

.aly_copy_tooltip.appear {
    animation: appear 1.5s ease;
}

@keyframes appear {
    0% {
        opacity: 0;
    }

    20% {
        transform: translateY(10px);
        opacity: 1;
    }

    80% {
        transform: translateY(0px);
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*--------------------------------------------------------------
# Theme Button
--------------------------------------------------------------*/
#aly_duplicate_asset,
input.aly_theme_button[type="submit"],
.aly_theme_button a {
    background-color: var(--wp--preset--color--primary);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 12px 24px 12px 24px;
    display: inline-block;
    border: 2px solid var(--wp--preset--color--primary);
    font-weight: 700;
    cursor: pointer;
    line-height: 1.6;
    font-size: var(--wp--preset--font-size--medium);
}

#aly_duplicate_asset,
input.aly_theme_button.aly_smaller_button[type="submit"],
.aly_smaller_button a {
    padding: 6px 16px 6px 16px;
}

.aly_theme_button a {
    color: #FFFFFF;
    text-decoration: none;
}

.aly_theme_button.aly_trsp_button a {
    background-color: transparent;
    color: var(--wp--preset--color--primary);
}

.aly_trsp_button a {
    color: var(--wp--preset--color--primary);
}

#aly_delete_button a {
    color: #EA452F;
    border: 2px solid #EA452F;
}

#aly_delete_button a {
    color: #EA452F;
}

#aly_delete_button a span {
    width: 20px;
    height: 20px;
    background-image: url(../analyser/assets/images/delete.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

#aly_edit_portfolio_wrapper #aly_delete_button {
    display: block;
}

#aly_start_date_validator,
#aly_edit_portfolio_wrapper[data-other="true"] #aly_delete_button {
    display: none;
}

#aly_inception_button {
    cursor: pointer;
    font-size: 14px;
    margin-top: 8px;
    color: #136f8b;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.aly_header_logo img {
    width: 190px;
}

.aly_header_logo_bottom {
    margin-block-start: -12px !important;
}

.aly_header_logo_bottom img {
    padding-left: 36px;
    padding-right: 2px;
}

.aly_header_logo:not(.aly_header_logo_bottom) a {
    position: relative;
}

/*.aly_header_logo:not(.aly_header_logo_bottom) a:after {
    content: 'beta';
    position: absolute;
    top: 2px;
    right: 0px;
    background-color: #52B788;
    color: #FFFFFF;
    font-weight: 600;
    width: 34px;
    font-size: 8px;
    text-transform: uppercase;
    text-align: center;
    height: 16px;
    line-height: 16px;
    margin-right: -40px;
    letter-spacing: 1px;
    padding-left: 1px;
}*/

.wp-block-navigation .wp-block-navigation-item__label {
    font-size: 19px;
}

/*--------------------------------------------------------------
# Header Mobile
--------------------------------------------------------------*/
html .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #fff;
    color: var(--aly-body-color);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
    /*background-color: #f6f6f6;
    border-top: 1px solid #d5d5d5;*/
    padding-top: 20px;
    padding-bottom: 20px;
}

html .wp-site-blocks {
    padding-bottom: 0px;
    padding-top: 24px;
}

footer>div>div {
    padding-top: 0px !important;
    margin: 0px !important;
}

.aly_copy_text {
    margin-block-start: 0.5rem !important;
}

footer a {
    color: var(--aly--active-color) !important;
    font-weight: 700 !important;
}

footer p {
    font-size: 12px !important;
}

/*--------------------------------------------------------------
# Tooltips
--------------------------------------------------------------*/
.aly_tooltip {
    display: inline;
    position: relative;
    float: left;
    margin-left: 6px;
    height: 20px;
    cursor: default;
}

.aly_in_tooltip {
    background: #fafafa;
    bottom: 100%;
    color: var(--wp--preset--color--contrast);
    font-size: 12px;
    display: block;
    left: -124px;
    margin-bottom: 10px;
    opacity: 0;
    padding: 14px;
    pointer-events: none;
    position: absolute;
    width: 260px;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    line-height: 18px;
    border: 1px solid #e7e7e7;
    z-index: 11;
}

.aly_in_tooltip:after {
    border: solid;
    border-color: #e7e7e7;
    border-width: 0px 1px 1px 0px;
    content: "";
    left: 122px;
    bottom: -8px;
    position: absolute;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    background-color: #fafafa;
    z-index: 2;
}
.page-id-33 .aly_in_tooltip:after {
    left: 118px;
}

.aly_tooltip:hover .aly_in_tooltip {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

.aly_tooltip svg {
    max-width: 20px;
}

.aly_before_tooltip {
    float: left;
}

.aly_limited_tooltip .aly_in_tooltip {
    width: 200px;
}

/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
.aly_table {
    background-color: #FFFFFF;
    border-radius: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px;
}

.aly_table_header {
    display: flex;
    border-bottom: 1px solid #E4E5E7;
    font-weight: bold;
    font-size: 14px;
}

#aly_single_portfolio_meta .aly_table_header .aly_table_cell {
    padding-bottom: 8px;
}

#aly_single_portfolio_meta .aly_table_body>div:first-child .aly_table_cell {
    padding-top: 8px;
}

.aly_table_body {
    display: flex;
    flex-wrap: wrap;
}

.aly_table_body>div {
    width: 100%;
    display: flex;
}

.aly_table_cell {
    padding: 6px;
}

#aly_single_portfolio_meta .aly_table_cell {
    padding: 2px;
}

.aly_table_cell_lb {
    border-left: 1px solid #E4E5E7;
}

#aly_register_button {
    margin: 0px 6px 0px 0px !important;
    min-width: 62px;
}

#aly_register_button a {
    color: var(--aly--active-color);
    text-decoration: none;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1.wp-block-post-title {
    font-weight: 700 !important;
    font-size: 34px;
    margin-bottom: 20px !important;
}
.page-id-763 h1.wp-block-post-title {
    margin-bottom: 0px !important;
}
body.page-id-763 .is-layout-constrained > * + * {
    margin-block-start: 0rem;
}

/*--------------------------------------------------------------
# Homepage
--------------------------------------------------------------*/
body.home main>div> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 880px;
    text-align: center;
    margin-bottom: -14px !important;
}

.aly_770_row {
    max-width: 770px !important;
}

body.home .has-large-font-size {
    font-size: 22px !important;
    line-height: 1.4em;
}

/*--------------------------------------------------------------
# View Portfolio page - URL
--------------------------------------------------------------*/
.page-id-282 h1.wp-block-post-title {
    margin-bottom: 0px !important;
}

body.single-portfolio .aly_share,
.page-id-282 .aly_share {
    margin-right: 6px;
}

body.single-portfolio .aly_trsp_button,
.page-id-282 .aly_trsp_button {
    margin-block-start: 0px;
}

/*--------------------------------------------------------------
# Single Portfolio page Nav
--------------------------------------------------------------*/
#aly_single_portfolio_nav {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

#aly_single_portfolio_nav_header {
    font-size: 24px;
    font-weight: 700;
}

.aly_single_portfolio_nav_button {
    border: 1px solid #F0F2F5;
    border-radius: 10px;
    background-color: #F0F2F5;
    color: #787878;
    padding: 10px 16px;
    font-size: 15px;
    position: relative;
    cursor: pointer;
}
@media only screen and (max-width: 600px) {

    #aly_single_portfolio_nav {
        gap: 6px;
    }

    .aly_single_portfolio_nav_button {
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 12px;
    }

}

.aly_single_portfolio_nav_button.aly_active {
    background-color: #FFFFFF;
    color: #1B59F8;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    font-weight: 700;
}

.aly_single_portfolio_nav_button.aly_inactive {
    cursor: not-allowed;
}

.aly_in_tooltip_btn {
    background: #fafafa;
    bottom: -48px;
    color: var(--wp--preset--color--contrast);
    font-size: 12px;
    display: block;
    left: 0px;
    margin-bottom: 10px;
    opacity: 0;
    padding: 10px;
    pointer-events: none;
    position: absolute;
    width: 202px;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    line-height: 18px;
    border: 1px solid #e7e7e7;
    z-index: 11;
    font-weight: normal;
}

.aly_in_tooltip_btn:after {
    border: solid;
    border-color: #e7e7e7;
    border-width: 0px 1px 1px 0px;
    content: "";
    left: 12px;
    top: -8px;
    position: absolute;
    width: 13px;
    height: 13px;
    transform: rotate(225deg);
    background-color: #fafafa;
    z-index: 2;
}

.aly_single_portfolio_nav_button.aly_inactive:hover .aly_in_tooltip_btn {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

#aly_single_portfolio_meta_header .aly_table_cell {
    position: relative;
}

#aly_single_portfolio_meta_header .aly_in_tooltip_btn {
    top: 33px;
    bottom: inherit;
    left: -6px;
    z-index: 99;
}

#aly_single_portfolio_meta_header .aly_table_cell:hover .aly_in_tooltip_btn {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}

#aly_single_portfolio_meta_header #aly_single_portfolio_meta_ter .aly_in_tooltip_btn {
    left: inherit;
    right: 22px;
}

#aly_single_portfolio_meta_header #aly_single_portfolio_meta_ter .aly_in_tooltip_btn:after {
    left: inherit;
    right: 15px;
}

#aly_single_portfolio_meta_ticker,
#aly_single_portfolio_meta_exchange,
#aly_single_portfolio_meta_bench,
#aly_single_portfolio_meta_ter,
#aly_single_portfolio_meta_inception,
#aly_single_portfolio_meta_isin {
    cursor: pointer;
}

.aly_smalli,
#aly_single_portfolio_meta_ticker:after,
#aly_single_portfolio_meta_exchange:after,
#aly_single_portfolio_meta_bench:after,
#aly_single_portfolio_meta_ter:after,
#aly_single_portfolio_meta_inception:after,
#aly_single_portfolio_meta_isin:after {
    content: 'i';
    position: absolute;
    color: var(--wp--preset--color--primary);
    top: 0px;
    margin-left: 4px;
    font-family: Garamond;
    font-size: 13px;
    font-weight: bold;
}

.aly_smalli {
    width: 12px;
    height: 20px;
    top: 6px;
    cursor: pointer;
    margin-left: 0px;
}

.wpcf7-form .aly_smalli {
    top: 0px;
}

/*--------------------------------------------------------------
# Single Portfolio page
--------------------------------------------------------------*/
.aly_tab_description {
    font-size: 14px;
    margin-bottom: 12px;
    padding: 16px 20px !important;

    h2 {
        line-height: 1em;
        margin: 0px 0px 7px !important;
        font-size: 24px;
        font-weight: 500;
    }

    p {
        margin-top: 0px !important;
    }

    p:last-child {
        margin-bottom: 0px !important;
    }

}

#aly_single_portfolio_wrapper {
    width: 100%;
    overflow: hidden;
}

#aly_single_portfolio_wrapper .aly_white_block {
    padding: 12px;
}

#aly_single_meta_wrapper .aly_white_block {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

#aly_single_portfolio_wrapper .aly_metabox span.aly_larger {
    font-size: 17px;
    font-weight: 500;
    margin-top: 4px;
}

#aly_single_portfolio_wrapper .aly_metabox span {
    font-size: 14px;
    line-height: 1.1em;
}

#aly_single_meta_wrapper {
    gap: var(--aly--foliospacing);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

#aly_single_portfolio_nav,
#aly_single_portfolio_meta,
#aly_single_portfolio_meta+div {
    margin-bottom: var(--aly--foliospacing);
}

.aly_fund_remover {
    position: absolute;
    top: -11px;
    right: -10px;
    width: 20px;
    height: 20px;
    background-image: url(../analyser/assets/images/modal-close.svg);
    cursor: pointer;
    background-color: #FFFFFF;
    border-radius: 50px;
}

.aly_metabox span {
    display: block;
    width: 100%;
    font-size: var(--wp--preset--font-size--small);
    text-align: center;
    margin-top: 0px;
}

.aly_metabox span span {
    width: auto;
    position: relative;
    display: inline-block;
}

.aly_metabox span span .aly_tooltip {
    position: absolute;
    top: -13px;
    margin-left: 0px;
}

.aly_metabox span.aly_larger {
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
    margin-top: -8px;
}

.aly_title_wrapper {
    max-width: var(--wp--style--global--wide-size);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
}

.aly_title_wrapper h1 {
    margin: 0px !important;
}

.aly_title_wrapper .aly_edit_link_infolio {
    cursor: pointer;
    font-size: var(--wp--preset--font-size--small);
    margin: 2px 0px !important;
    min-width: 51px;
}

.aly_title_wrapper .aly_edit_link_infolio.aly_larger {
    min-width: 92px;
}

.aly_title_wrapper .aly_edit_link_infolio a {
    color: var(--aly--active-color);
    text-decoration: none;
}

.aly_title_wrapper .aly_share {
    cursor: pointer;
    color: var(--aly--active-color);
    font-size: var(--wp--preset--font-size--small);
    margin: 2px 0px !important;
    min-width: 66px;
}

#aly_register_button img,
.aly_edit_link_infolio img,
.aly_title_wrapper .aly_share img {
    max-width: 16px;
    margin-right: 6px;
    position: relative;
    top: 0px;
}

#aly_date_info {
    float: left;
    margin: 2px 0px !important;
    font-style: italic;
    font-size: var(--wp--preset--font-size--small);
}

/*--------------------------------------------------------------
# Portfolios page
--------------------------------------------------------------*/
body.single-portfolio h1.wp-block-post-title {
    margin-bottom: 0px !important;
}

#aly_portfolios_wrapper>div>.aly_theme_button {}

#aly_portfolios_wrapper ul {
    list-style: none;
    padding-left: 0px;
}

#aly_single_portfolio_meta .aly_table_body>div>div {
    font-size: 14px;
    padding-bottom: 0px;
}

#aly_single_portfolio_meta .aly_table_body>div>div:nth-child(1),
#aly_single_portfolio_meta .aly_table_header>div:nth-child(1) {
    flex: 30px;
    flex-grow: 0;
    flex-shrink: 0;
}

#aly_single_portfolio_meta .aly_table_body>div>div:nth-child(4),
#aly_single_portfolio_meta .aly_table_header #aly_single_portfolio_meta_ticker {
    flex: 70px;
    flex-grow: 0;
    flex-shrink: 0;
}

#aly_single_portfolio_meta .aly_table_body>div>div:nth-child(5),
#aly_single_portfolio_meta .aly_table_header #aly_single_portfolio_meta_exchange {
    flex: 90px;
    flex-grow: 0;
    flex-shrink: 0;
}

#aly_single_portfolio_meta .aly_table_body>div>div:nth-child(6),
#aly_single_portfolio_meta .aly_table_header #aly_single_portfolio_meta_bench {
    flex: 146px;
    flex-grow: 0;
    flex-shrink: 0;
}

#aly_single_portfolio_meta .aly_table_body>div>div:nth-child(8),
#aly_single_portfolio_meta .aly_table_header #aly_single_portfolio_meta_ter {
    flex: 60px;
    flex-grow: 0;
    flex-shrink: 0;
}

#aly_single_portfolio_meta .aly_table_body>div>div:nth-child(2),
#aly_single_portfolio_meta .aly_table_header>div:nth-child(2) {
    flex: 3;
}

#aly_single_portfolio_meta .aly_table_body>div>div,
#aly_single_portfolio_meta .aly_table_header>div {
    flex: 1;
}

#aly_single_portfolio_meta .aly_table_body>div>div:last-child,
#aly_single_portfolio_meta .aly_table_header>div:last-child {
    flex: 90px;
    flex-grow: 0;
    flex-shrink: 0;
}

#aly_portfolios_inner_flex .aly_white_block {
    background-color: rgba(255, 255, 255, 0.74);
    position: relative;
    margin-bottom: var(--wp--style--root--padding-right);
}

#aly_portfolios_inner_flex .aly-flex-clm-90,
#aly_portfolios_inner_flex .aly-flex-clm-10 {
    flex-basis: auto;
}

#aly_portfolios_inner_flex .aly-flex-clm-10 {
    text-align: right;
    min-width: 44px;
}

.aly_edit_link {
    position: absolute;
    top: var(--aly-cell-pading);
    right: calc(2 * var(--aly-cell-pading) + 6px);
}

#aly_portfolios_inner_flex .aly_erase_link {
    position: absolute;
    top: var(--aly-cell-pading);
    right: var(--aly-cell-pading);
}

#aly_portfolios_inner_flex .aly_erase_link a {
    color: #90a1ab;
    text-decoration: none;
    width: 20px;
    height: 20px;
    position: relative;
    display: block;
    margin-top: 3px;
}

#aly_portfolios_inner_flex .aly_erase_link a:before,
#aly_portfolios_inner_flex .aly_erase_link a:after {
    position: absolute;
    left: 12px;
    content: ' ';
    height: 21px;
    width: 2px;
    background-color: #90a1ab;
}

#aly_portfolios_inner_flex .aly_erase_link a:before {
    transform: rotate(45deg);
}

#aly_portfolios_inner_flex .aly_erase_link a:after {
    transform: rotate(-45deg);
}



#aly_portfolios_inner_flex h4 {
    margin: 0px 0px 12px;
    font-family: Outfit;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}

#aly_portfolios_inner_flex h4 a {
    text-decoration: none;
    color: var(--aly-body-color);
}

#aly_portfolios_inner_flex {
    font-size: 16px;
    color: var(--aly-body-color);
}

.aly_edit_link a {
    background-image: url(../analyser/assets/images/pencil.svg);
    width: 26px;
    height: 26px;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.aly_color_info {
    width: 12px;
    height: 8px;
    background-color: #E1E6F1;
    border-radius: 3px;
    top: 6px;
    left: 5px;
    position: relative;
}

#aly_single_portfolio_meta .aly_table_header .aly_color_info {
    top: 7px;
}

#aly_single_portfolio_meta .aly_table_body>div:nth-child(1) .aly_color_info {
    background-color: #497AF9;
}

#aly_single_portfolio_meta .aly_table_body>div:nth-child(2) .aly_color_info {
    background-color: #66E8B1;
}

#aly_single_portfolio_meta .aly_table_body>div:nth-child(3) .aly_color_info {
    background-color: #F36666;
}

#aly_single_pie_wrapper {
    flex: 210px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: var(--aly--foliospacing);
    display: flex;
    align-items: center;
}

#aly_single_pie_wrapper .apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series {
    width: 100%;
    justify-content: center;
}

#aly_single_pie_wrapper .apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series .apexcharts-legend-text {
    min-width: 64px;
}

#aly_single_pie_wrapper .apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series .apexcharts-legend-marker {
    margin-right: 6px !important;
}

/*--------------------------------------------------------------
# Edit Portfolios
--------------------------------------------------------------*/
#aly_edit_strings {
    display: none;
}

/*--------------------------------------------------------------
# Charts
--------------------------------------------------------------*/
.apexcharts-toolbar {
    /*display: none !important;*/
}

#aly_pies_chart_labels,
#aly_pies_chart_data,
#aly_draws_chart_data,
#aly_draws_chart_days,
#aly_columns_chart_days,
#aly_columns_chart_data,
#aly_annual_real_chart_data,
#aly_annual_hicp_rates_data,
#aly_days_data,
#aly_total_chart_data {
    width: 100%;
    word-break: break-all;
    display: none;
}

.aly_show_later {
    display: none !important;
}

#aly_columns_chart_wrapper {
    height: calc(100% - 9px);
}

#aly_annual_tab_chart_wrapper {
    position: relative;

    .apexcharts-yaxis-annotations {
        display: none !important;
    }

}

#aly_annual_tab_chart {
    height: 400px;
}

.aly_annual_return_controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.aly_annual_toggle_btn {
    background: #ffffff;
    border: 1px solid #dde1ea;
    border-radius: 6px;
    color: #2b3140;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    transition: all 0.2s ease;
}

.aly_annual_toggle_btn:hover {
    border-color: var(--aly--active-color);
    color: var(--aly--active-color);
}

.aly_annual_toggle_btn.aly_active {
    background: var(--aly--active-color);
    border-color: var(--aly--active-color);
    color: #ffffff;
}

.aly_annual_hicp_note {
    color: #4f596c;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 12px;
}

.aly_hidden_note {
    display: none;
}

/* Growth chart controls (native HTML, above the chart) */
#aly_growth_controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e1e6f1;
}

.aly_growth_ctrl_row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.aly_growth_ctrl_label {
    color: #2b3140;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.55;
    text-transform: uppercase;
    white-space: nowrap;
    margin-right: 2px;
}

.aly_growth_scale_btn {
    align-items: center;
    background: transparent;
    border: 1px solid #dde1ea;
    border-radius: 4px;
    color: #2b3140;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    height: 24px;
    justify-content: center;
    line-height: 1;
    padding: 0 8px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.aly_growth_scale_btn:hover {
    border-color: var(--aly--active-color);
    color: var(--aly--active-color);
}

.aly_growth_scale_btn.aly_growth_scale_active {
    background: var(--aly--active-color);
    border-color: var(--aly--active-color);
    color: #fff;
}

@media (max-width: 600px) {
    #aly_growth_controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #aly_growth_controls .aly_growth_ctrl_row .aly_growth_ctrl_label + button {
        margin-left: auto;
    }

    #aly_growth_controls .aly_growth_ctrl_row {
        width: 100%;
    }

}

/* Monthly Return Heatmap */
.aly_returns_table_wrapper,
#aly_histogram_chart_wrapper,
#aly_monthly_heatmap {
    margin-top: var(--aly--foliospacing, 20px);
}

.aly_heatmap_title {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Outfit', sans-serif;
    color: #2b3140;
}

.aly_heatmap_scroll {
    overflow-x: auto;
}

.aly_heatmap_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
}

.aly_heatmap_table thead th {
    padding: 6px 4px;
    text-align: center;
    font-weight: 600;
    color: #2b3140;
    white-space: nowrap;
}

.aly_heatmap_table th.aly_heatmap_year_col {
    width: 52px;
}

.aly_heatmap_table tbody td {
    padding: 7px 4px;
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
    cursor: default;
    transition: opacity 0.15s ease;
}

.aly_heatmap_table tbody td:hover {
    opacity: 0.82;
}

.aly_heatmap_table td.aly_heatmap_year {
    font-weight: 700;
    color: #2b3140;
    text-align: left;
    background: transparent !important;
}

.aly_heatmap_table td.aly_heatmap_empty {
    background: #f4f5f7;
    color: #b0b8c9;
}


/* Tab panels */
.aly_tab_panel {
    display: none;
}

.aly_tab_panel.aly_tab_active {
    display: block;
}

.aly_rolling_period_controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.aly_rolling_period_btn {
    background: #ffffff;
    border: 1px solid #dde1ea;
    border-radius: 6px;
    color: #2b3140;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    transition: all 0.2s ease;
}

.aly_rolling_period_btn:hover {
    border-color: var(--aly--active-color);
    color: var(--aly--active-color);
}

.aly_rolling_period_btn.aly_active {
    background: var(--aly--active-color);
    border-color: var(--aly--active-color);
    color: #ffffff;
}

.aly_rolling_message {
    color: #4f596c;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    padding: 24px 0;
    text-align: center;
}

#aly_rolling_summary_wrapper {
    margin-top: var(--aly--foliospacing, 20px);
}

#aly_underwater_chart {
    height: 400px;
}

#aly_top_drawdowns_table_wrapper {
    margin-top: var(--aly--foliospacing);
}

/*--------------------------------------------------------------
# Forecast tab
--------------------------------------------------------------*/
#aly_forecast_disclaimer {
    margin-top: var(--aly--foliospacing, 20px);
}

.aly_forecast_disclaimer {
    background: #fffbe6;
    color: #5a4200;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 0;
}

#aly_forecast_controls {
    margin-top: var(--aly--foliospacing, 20px);
}

.aly_forecast_controls_row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.aly_forecast_control_group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 180px;
}

.aly_forecast_control_group.aly_forecast_control_run {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.aly_forecast_label {
    color: #4f596c;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.aly_forecast_input {
    background: #ffffff;
    border: 1px solid #dde1ea;
    border-radius: 6px;
    color: #2b3140;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    padding: 8px 10px;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.aly_forecast_input:focus {
    border-color: var(--aly--active-color);
    outline: none;
}

#aly_forecast_chart_wrapper {
    margin-top: var(--aly--foliospacing, 20px);
}

#aly_forecast_summary_wrapper {
    margin-top: var(--aly--foliospacing, 20px);
}

.aly_forecast_tooltip {
    background: #fff;
    border: 1px solid #dde1ea;
    border-radius: 6px;
    color: #2b3140;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    padding: 8px 12px;
}

.aly_forecast_optional {
    color: #8c95a7;
    font-weight: 400;
}

.aly_forecast_insight_block {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    margin-top: var(--aly--foliospacing, 20px);
}

.aly_forecast_insight_icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 2px;
}

.aly_forecast_insight_content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aly_forecast_insight_label {
    color: #4f596c;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.aly_forecast_insight_value {
    color: #2b3140;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.aly_forecast_neutral {
    color: #e07b00;
    font-weight: 600;
}

/*--------------------------------------------------------------
# DCA Simulator
--------------------------------------------------------------*/
#aly_dca_controls {
    margin-top: var(--aly--foliospacing, 20px);
}

#aly_dca_growth_wrapper,
#aly_dca_vs_lump_wrapper,
#aly_dca_summary_wrapper {
    margin-top: var(--aly--foliospacing, 20px);
}

.aly_dca_comparison_text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 4px 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #2b3140;
}

.aly_dca_comparison_item {
    white-space: nowrap;
}

.aly_dca_comparison_sep {
    color: #c0c8d5;
    font-weight: 300;
    font-size: 18px;
    line-height: 1;
}


/*--------------------------------------------------------------
# Responsive rules
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {

    #aly_single_portfolio_meta {
        overflow-x: scroll;
    }

    #aly_single_portfolio_meta {
        border: 14px solid #FFFFFF;
        padding: 0px;
    }

    #aly_single_portfolio_meta_header,
    #aly_single_portfolio_meta_body {
        min-width: 1000px;
        width: auto;
    }

    #aly_single_portfolio_nav_header {
        flex-shrink: 1;
        width: 100%;
    }

}

@media only screen and (max-width: 767px) {

    .page-id-763 h1 .aly_in_tooltip {
        left: inherit;
        right: -30px;
    }

    .page-id-763 h1 .aly_in_tooltip:after {
        left: inherit;
        right: 20px;
    }

    #aly_portfolios_wrapper>div>.aly_theme_button {
        padding: 0px;
    }

    #aly_portfolios_inner_flex .aly-flex-clm-35 {
        flex:100%;
    }

    #aly_portfolios_inner_flex .aly-flex-clm-90 {
        width: calc(100% - 45px);
    }

    #aly_portfolios_inner_flex .aly-flex-clm-10 {
        width: 45px;
    }

    #aly_portfolios_inner_flex .aly-flex-container {
        flex-direction: row;
    }

    #aly_portfolios_inner_flex .aly-flex-clm-90, #aly_portfolios_inner_flex .aly-flex-clm-10 {
        flex-basis: content;
    }

    .aly_invert_later {
        order:10;
    }

    .page-template-page-portfolio-viewer .aly_in_tooltip,
    .single-portfolio .aly_in_tooltip {
        left: -210px;
    }
    .page-template-page-portfolio-viewer .aly_in_tooltip:after,
    .single-portfolio .aly_in_tooltip:after {
        left: 208px;
    }

    .aly-flex-container.aly_first_flex ~ .aly-flex-container,
    .aly-flex-container.aly_first_flex {
        flex-direction: row;
    }
    .aly_first_flex ~ .aly-flex-container .aly-flex-clm-20,
    .aly_first_flex .aly-flex-clm-20 {
        flex: 88px !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }

    .aly_title_wrapper #aly_single_portfolio_credits {
        margin: 0px !important;
    }

    #aly_single_pie_wrapper {
        flex: 1;
        justify-content: center;
    }

    .aly_title_wrapper {
        flex-wrap: wrap;
    }

    body.single-portfolio h1.wp-block-post-title {
        width: 100%;
    }

    #aly_single_meta_wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    #aly_contact_funds .aly-flex-clm-20 {
        max-width: none;
    }

    html .wp-site-blocks {
        padding-top: 24px;
    }

    .aly_logo_col {
        flex-basis: 66.66% !important;
    }

    .aly_menu_col {
        flex-basis: 33.33% !important;
    }

    #aly_single_meta_wrapper {
        gap: var(--wp--preset--spacing--30);
    }

    #aly_single_portfolio_wrapper>.aly-flex-container {
        width: 100%;
    }

    .aly-flex-container {
        flex-direction: column;
    }

    .wpcf7-form .aly-flex-container {
        margin-bottom: 0px;
    }

    div[class^="aly-flex-clm-"] {
        flex: 1;
    }

    html .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.aly_show_later {
        display: flex !important;
    }

    html .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
    html .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
    html .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
        align-items: center;
        width: 100%;
        font-size: 22px !important;
    }

    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-open {
        color: var(--aly-body-color);
    }

    main {
        min-height: 100% !important;
    }

    .wpcf7-form h3 {
        margin: 0px 0px 10px;
        font-size: 24px;
    }

    .wpcf7-form .aly-flex-clm-35 {
        display: none;
    }

    .wpcf7-form div[class^="aly-flex-clm-"] {
        margin-bottom: 20px;
        flex: auto;
    }

    #aly_duplicate_asset {
        margin-bottom: 40px;
    }

    #aly_contact_funds,
    #aly_contact_funds .aly-flex-container {
        margin-bottom: 0px;
    }

    .aly_hide_later {
        display: none;
    }

    .aly_theme_button {
        font-size: 14px;
    }

    .aly_smaller_button {
        padding: 9px 13px 9px 13px;
    }

    .wpcf7-form-control-wrap[data-name="contribution_amount"] input,
    .wpcf7-form-control-wrap[data-name="contribution_amount"] {
        width: 100%;
        display: block;
        max-width: 100%;
        margin: 0px;
    }

    .wpcf7-form-control-wrap[data-name="contribution_amount"] input {
        margin-bottom: 6px;
    }

    html .has-large-font-size {
        font-size: 18px !important;
    }

    .aly_checkmark_list {
        font-size: 18px;
        line-height: 24px;
    }
    .wpcf7 .aly_theme_button,
    .wpcf7 .aly_theme_button a {
        width: 100%;
    }
    .wpcf7 .aly_theme_button {
        padding-left: 0px !important;
        padding-right: 0px !important;
        padding-bottom: 0px;
        text-align: center;
    }

    #aly_tab_performance .aly-flex-container {
        width: 100% !important;
    }

    #aly_histogram_chart_wrapper {
        margin-top: 0px;
    }

}

/* Returns by Period table */
.aly_returns_table_wrapper {
    overflow-x: auto;
}
.aly_returns_table_title {
    font-size: 14px;
    font-weight: bold;
    font-family: 'Outfit', sans-serif;
    color: #2b3140;
    margin: 0 0 12px;
}
.aly_returns_table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #2b3140;
}
.aly_returns_table thead th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid #e1e6f1;
    font-weight: 600;
    white-space: nowrap;
}
.aly_returns_table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #e1e6f1;
    white-space: nowrap;
}
.aly_returns_table tbody tr:last-child td {
    border-bottom: none;
}
.aly_returns_table tbody tr:hover td {
    background: #f5f7fb;
}
.aly_returns_table tbody tr.aly_annual_best_year td {
    background: #eaf7ee;
}
.aly_returns_table tbody tr.aly_annual_worst_year td {
    background: #fdeeee;
}
.aly_returns_table tbody tr.aly_annual_best_year:hover td {
    background: #e1f2e7;
}
.aly_returns_table tbody tr.aly_annual_worst_year:hover td {
    background: #fbe3e3;
}
.aly_period_pos {
    color: #2e7d32;
    font-weight: 600;
}
.aly_period_neg {
    color: #c62828;
    font-weight: 600;
}
.aly_period_na {
    color: #9e9e9e;
}

/* Period label tooltip */
.aly_period_label {
    position: relative;
    cursor: default;
    text-decoration: underline dotted #9e9e9e;
    text-underline-offset: 3px;
}
.aly_period_label::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    white-space: nowrap;
    background: #fafafa;
    color: var(--wp--preset--color--contrast);
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    padding: 8px 12px;
    border: 1px solid #e7e7e7;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    z-index: 10;
}
.aly_returns_table tbody tr:hover .aly_period_label::after {
    opacity: 1;
    transform: translateY(0px);
}

/* Histogram tooltip – remove bullet points from month list */
#aly_histogram_chart .apexcharts-tooltip ul {
    padding-left: 0px;
    margin-left: 0px;
}

#aly_histogram_chart .apexcharts-tooltip ul li {
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}

/* Histogram – suppress bar hover effect */
#aly_histogram_chart .apexcharts-bar-area {
    transition: none !important;
}
#aly_histogram_chart .apexcharts-bar-area:hover {
    fill-opacity: 1 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* ---------------------------------------------------------------
   Risk Metrics Tab
--------------------------------------------------------------- */

/* Metrics table – description column */
.aly_risk_metrics_table .aly_risk_metric_desc_col {
    width: 50%;
}
.aly_risk_metric_desc {
    font-size: 13px;
    color: #8c95a7;
    font-style: italic;
}

/* Correlation Matrix */
.aly_corr_scroll {
    overflow-x: auto;
}
.aly_corr_table {
    border-collapse: collapse;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    white-space: nowrap;
    min-width: 100%;
}
.aly_corr_table thead th {
    padding: 8px 16px;
    text-align: center;
    font-weight: 600;
    color: #2b3140;
    border-bottom: 2px solid #e1e6f1;
}
.aly_corr_table thead th:first-child {
    text-align: left;
}
.aly_corr_cell {
    padding: 10px 16px;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid rgba(225, 230, 241, 0.5);
    min-width: 70px;
    transition: opacity 0.15s;
}
.aly_corr_cell:hover {
    opacity: 0.85;
    cursor: default;
}
.aly_corr_cell.aly_corr_diag {
    font-weight: 700;
}
.aly_corr_label {
    padding: 10px 16px;
    font-weight: 600;
    color: #2b3140;
    border-right: 2px solid #e1e6f1;
    border-bottom: 1px solid #e1e6f1;
    white-space: nowrap;
}
.aly_corr_legend {
    margin: 12px 0 0;
    font-size: 12px;
    color: #8c95a7;
    font-family: 'Outfit', sans-serif;
}
.aly_corr_leg_green { color: #2e7d32; font-weight: 600; }
.aly_corr_leg_red   { color: #c62828; font-weight: 600; }

#aly_correlation_matrix_wrapper {
    margin-bottom: var(--aly--foliospacing, 20px);
}

/* ═══════════════════════════════════════════════════════════════
   Compare Page — Portfolio Selector
   ═══════════════════════════════════════════════════════════════ */

#cmp-selector-wrapper {
    width: 100%;
}

/* ── Portfolio cards ─────────────────────────────────────────── */
.cmp-cards-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}

.cmp-card {
    flex: 1 1 200px;
    max-width: 360px;
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    position: relative;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

.cmp-card-badge {
    display: inline-block;
    color: #fff;
    border-radius: 6px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cmp-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #2b3140;
    line-height: 1.35;
    padding-right: 24px;
}

.cmp-card-meta {
    font-size: 13px;
    color: #90A1AA;
    margin-top: 4px;
}

.cmp-card-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #b0bec5;
    padding: 0 4px;
    transition: color .15s;
}
.cmp-card-remove:hover { color: #e53935; }

/* ── "Add Portfolio" button ──────────────────────────────────── */
.cmp-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #2b3140;
    border: 2px dashed #cfd8dc;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-family: var(--wp--preset--font-family--outfit);
    margin-bottom: 16px;
}
.cmp-add-btn:hover {
    border-color: var(--aly--active-color);
    color: var(--aly--active-color);
}

/* ── Period alignment banner ─────────────────────────────────── */
.cmp-period-banner {
    background: #EBF4FF;
    border-left: 3px solid var(--aly--active-color);
    border-radius: 0 8px 8px 0;
    padding: 10px 16px;
    font-size: 13px;
    color: #2b3140;
    line-height: 1.5;
    margin-top: 4px;
    margin-bottom: 24px;
}
.cmp-period-limit { color: #5a6a76; }

/* ── Modal overlay ───────────────────────────────────────────── */
.cmp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cmp-modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    max-width: 520px;
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

.cmp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cmp-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #2b3140;
}

.cmp-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #90A1AA;
    padding: 0;
    transition: color .15s;
}
.cmp-modal-close:hover { color: #2b3140; }

/* ── Tabs ────────────────────────────────────────────────────── */
.cmp-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    border-bottom: 2px solid #F0F2F2;
}

.cmp-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 14px;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 14px;
    font-weight: 500;
    color: #90A1AA;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.cmp-tab.active,
.cmp-tab:hover {
    color: #2b3140;
    border-bottom-color: var(--aly--active-color);
}

/* ── Tab panels ──────────────────────────────────────────────── */
.cmp-hidden { display: none !important; }

#cmp-portfolio-search {
    width: 100%;
    margin-bottom: 12px;
    box-sizing: border-box;
}

/* ── Result lists (popular + mine) ──────────────────────────── */
.cmp-result-list {
    max-height: 340px;
    overflow-y: auto;
}

.cmp-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s;
    margin-bottom: 2px;
}
.cmp-result-item:hover:not(.is-selected) { background: #F0F2F2; }
.cmp-result-item.is-selected {
    opacity: .5;
    cursor: default;
}

.cmp-result-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #2b3140;
    line-height: 1.3;
}

.cmp-result-meta {
    font-size: 12px;
    color: #90A1AA;
    white-space: nowrap;
}

.cmp-result-badge {
    font-size: 11px;
    background: #E8F5E9;
    color: #27AE60;
    border-radius: 4px;
    padding: 1px 7px;
    font-weight: 600;
    white-space: nowrap;
}

.cmp-msg-loading,
.cmp-msg-empty {
    text-align: center;
    padding: 24px;
    color: #90A1AA;
    font-size: 14px;
}

/* ── Inline create form ──────────────────────────────────────── */
.cmp-inline-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#cmp-inline-name {
    width: 100%;
    box-sizing: border-box;
}

#cmp-inline-funds {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cmp-inline-fund-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cmp-ticker-input { flex: 1; }

.cmp-alloc-input {
    width: 70px;
    text-align: center;
    flex-shrink: 0;
}

.cmp-inline-fund-remove {
    background: none;
    border: none;
    font-size: 18px;
    color: #b0bec5;
    cursor: pointer;
    padding: 0 4px;
    transition: color .15s;
    flex-shrink: 0;
    line-height: 1;
}
.cmp-inline-fund-remove:hover { color: #e53935; }

.cmp-add-fund-row-btn {
    align-self: flex-start;
    background: none;
    border: 1px dashed #cfd8dc;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: #5a6a76;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--outfit);
    transition: border-color .15s, color .15s;
}
.cmp-add-fund-row-btn:hover {
    border-color: var(--aly--active-color);
    color: var(--aly--active-color);
}

.cmp-inline-confirm-btn {
    align-self: flex-end;
    background: #2b3140;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--outfit);
    transition: background .15s;
}
.cmp-inline-confirm-btn:hover { background: var(--aly--active-color); }

#cmp-summary-pies .apexcharts-canvas {
    max-width: 100%;
}

#cmp-summary-chart .apexcharts-legend.apx-legend-position-bottom {
    gap: 10px;
}

#cmp-summary-chart .apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series {
    display: inline-flex !important;
    align-items: center;
}

#cmp-summary-chart .apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series .apexcharts-legend-text {
    display: inline-block !important;
    min-width: 64px;
    color: #2b3140 !important;
}

#cmp-summary-chart .apexcharts-legend.apx-legend-position-bottom .apexcharts-legend-series .apexcharts-legend-marker {
    margin-right: 6px !important;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media only screen and (max-width: 600px) {
    .cmp-modal-box  { padding: 18px; max-height: 90vh; }
    .cmp-card       { min-width: 100%; flex: auto; }
    .cmp-cards-row  { flex-direction: column; }
    .cmp-alloc-input { width: 60px; }
}

/* =============================================================
   ANALYSIS SECTION
   ============================================================= */

/* ── Analysis section wrapper ───────────────────────────────── */
.cmp-analysis {
    margin-top: 32px;
}

/* ── Analysis nav tabs ──────────────────────────────────────── */
.cmp-analysis-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid #e0e5ee;
    margin-bottom: 24px;
}

.cmp-analysis-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 18px;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 14px;
    color: #5a6a76;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.cmp-analysis-tab:hover {
    color: #2b3140;
}

.cmp-analysis-tab.active {
    color: var(--aly--active-color, #136e8b);
    border-bottom-color: var(--aly--active-color, #136e8b);
    font-weight: 600;
}

/* ── Loading indicator ──────────────────────────────────────── */
.cmp-analysis-loading {
    padding: 16px;
    color: #5a6a76;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 14px;
}

.cmp-error {
    padding: 12px 16px;
    background: #fdecea;
    color: #c62828;
    border-radius: 6px;
    margin-bottom: 16px;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 14px;
}

/* ── Panels ─────────────────────────────────────────────────── */
.cmp-panel {
    display: none;
}

.cmp-panel-active {
    display: block;
}

/* ── Chart wrappers ─────────────────────────────────────────── */
.cmp-chart-wrap {
    margin-bottom: 28px;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.cmp-chart-small {
    max-height: 320px;
}

/* ── Table title ────────────────────────────────────────────── */
.cmp-table-title {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 14px;
    font-weight: 700;
    color: #2b3140;
    margin: 40px 0 10px;
}

.cmp-chart-note {
    margin: -4px 0 10px;
    color: #5a6a76;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 13px;
    line-height: 1.45;
}

/* ── Metrics / analysis tables ──────────────────────────────── */
.cmp-metrics-table-wrap {
    margin-bottom: 28px;
    overflow-x: auto;
}

.cmp-analysis-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 13.5px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.cmp-analysis-table thead tr {
    background: #f5f7f9;
}

.cmp-analysis-table th,
.cmp-analysis-table td {
    padding: 9px 14px;
    border-bottom: 1px solid #e8ecf1;
    text-align: right;
}

.cmp-analysis-table th:first-child,
.cmp-analysis-table td:first-child {
    text-align: left;
}

.cmp-analysis-table tbody tr:last-child td {
    border-bottom: none;
}

.cmp-analysis-table tbody tr:hover {
    background: #f9fbfd;
}

.cmp-metric-label {
    color: #2b3140;
    font-weight: 500;
    white-space: nowrap;
}

/* highlight best value in row */
.cmp-best-val {
    font-weight: 700;
    background: rgba(46, 125, 50, 0.05) !important;
    border-left: 2px solid rgba(46, 125, 50, 0.35) !important;
}

.cmp-chart-leader-note {
    margin: 0 0 10px;
    padding: 7px 10px;
    background: #fff;
    border-radius: 6px;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    line-height: 1.35;
    color: #53616b;
}

.cmp-chart-leader-label {
    font-weight: 500;
}

.cmp-chart-leader-name {
    font-weight: 700;
}

.cmp-best-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cmp-best-inline-note {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(46, 125, 50, 0.08);
    color: #2e7d32;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* positive / negative colouring */
.cmp-pos { color: #2e7d32; }
.cmp-neg { color: #c62828; }

/* divergent year row */
.cmp-divergent-year td {
    background: #fff8e1;
}

/* ── Chart controls (toggle buttons) ────────────────────────── */
.cmp-chart-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.cmp-summary-controls {
    justify-content: flex-end;
}

.cmp-export-inline-wrap {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 16px;
}

.cmp-btn-group {
    display: flex;
    border: 1px solid #d0d8e2;
    border-radius: 6px;
    overflow: hidden;
}

.cmp-btn-toggle {
    background: #fff;
    border: none;
    padding: 6px 14px;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 13px;
    color: #5a6a76;
    cursor: pointer;
    border-right: 1px solid #d0d8e2;
    transition: background .15s, color .15s;
}

.cmp-btn-toggle:last-child {
    border-right: none;
}

.cmp-btn-toggle.active {
    background: var(--aly--active-color, #136e8b);
    color: #fff;
    font-weight: 600;
}

/* ── Share / Export utility buttons ─────────────────────────── */
.cmp-utility-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 0 0 12px;
}

.cmp-utility-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #d0d8e2;
    border-radius: 6px;
    background: #fff;
    color: #2b3140;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.cmp-utility-btn:hover {
    border-color: #2F80ED;
    background: #f0f6ff;
    color: #2F80ED;
}

.cmp-utility-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.cmp-chart-reset-btn {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 8px;
    padding: 6px 10px;
    border: 1px solid #d0d8e2;
    border-radius: 6px;
    background: #fff;
    color: #2b3140;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.cmp-chart-reset-btn:active {
    transform: translateY(1px);
}

.aly-chart-reset-btn {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 8px;
    padding: 6px 10px;
    border: 1px solid #d0d8e2;
    border-radius: 6px;
    background: #fff;
    color: #2b3140;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.aly-chart-reset-btn:active {
    transform: translateY(1px);
}

/* ── Allocation pie charts ──────────────────────────────────── */
.cmp-pies-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 28px;
}

.cmp-pie-wrap {
    flex: 1 1 220px;
    background: #fff;
    border-radius: 8px;
    padding: 16px 12px 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    min-width: 180px;
}

.cmp-pie-title {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* ── Analysis responsive ─────────────────────────────────────── */
@media only screen and (max-width: 700px) {
    .cmp-analysis-tab  { padding: 8px 10px; font-size: 13px; }
    .cmp-analysis-table th,
    .cmp-analysis-table td { padding: 7px 9px; font-size: 12px; }
    .cmp-pies-wrap     { flex-direction: column; }
    .cmp-chart-controls { flex-wrap: wrap; }
    .cmp-chart-reset-btn { display: inline-flex; align-items: center; }
    .aly-chart-reset-btn { display: inline-flex; align-items: center; }
}

/* ── Export layout stabilization (applies before print opens) ──────────── */
body.cmp-exporting-pdf .cmp-chart-wrap,
body.cmp-exporting-pdf .cmp-pie-wrap {
    overflow: hidden !important;
}

body.cmp-exporting-pdf .cmp-chart-wrap .apexcharts-canvas,
body.cmp-exporting-pdf .cmp-chart-wrap .apexcharts-svg {
    max-width: 100% !important;
}

body.cmp-exporting-pdf #cmp-summary-pies {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

body.cmp-exporting-pdf #cmp-panel-summary .cmp-pie-wrap {
    min-width: 0;
}

body.cmp-exporting-pdf #cmp-panel-summary .cmp-pie-wrap .apexcharts-canvas {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    margin: 0 !important;
}

body.cmp-exporting-pdf #cmp-panel-summary .cmp-pie-wrap .apexcharts-canvas svg {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    left: 0 !important;
    margin: 0 !important;
}

body.cmp-exporting-pdf #cmp-panel-summary .cmp-pie-wrap .apexcharts-legend {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 4px auto 0 !important;
}

/* ── Print / PDF export ──────────────────────────────────────── */
@media print {
    /* Hide site chrome and compare UI controls */
    .site-header, .site-footer, .wp-block-navigation, #wpadminbar,
    #cmp-selector-wrapper, .cmp-period-banner,
    .cmp-analysis-nav, .cmp-utility-btns,
    .cmp-chart-controls, .cmp-chart-reset-btn, .aly-chart-reset-btn,
    .cmp-modal-overlay, #cmp-add-btn { display: none !important; }

    /* Show all analysis panels */
    #cmp-analysis { display: block !important; }
    .cmp-panel { display: block !important; break-inside: auto; page-break-inside: auto; margin-bottom: 28px; }
    .cmp-panel + .cmp-panel { border-top: 1px solid #e0e0e0; padding-top: 20px; }

    #cmp-panel-summary {
        page-break-after: always;
        break-after: page;
    }

    #cmp-panel-performance {
        page-break-before: always;  
        break-before: page;
    }

    .cmp-chart-wrap,
    .cmp-metrics-table-wrap,
    .cmp-pie-wrap {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Compact table text */
    .cmp-analysis-table { font-size: 10px; }
    .cmp-analysis-table th,
    .cmp-analysis-table td { padding: 5px 7px; }

    /* Remove shadows for cleaner printing */
    .cmp-chart-wrap,
    .cmp-pie-wrap { box-shadow: none !important; border: 1px solid #e0e0e0; overflow: hidden !important; }

    .cmp-chart-wrap .apexcharts-canvas,
    .cmp-chart-wrap .apexcharts-svg {
        max-width: 100% !important;
    }

    #cmp-summary-pies {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        clear: both;
    }

    #cmp-panel-summary .cmp-pie-wrap {
        min-width: 0;
    }

    #cmp-panel-summary .cmp-pie-wrap .apexcharts-canvas {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        left: 0 !important;
        margin: 0 !important;
    }

    #cmp-panel-summary .cmp-pie-wrap .apexcharts-canvas svg {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 !important;
    }

    #cmp-panel-summary .cmp-pie-wrap .apexcharts-legend {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 4px auto 0 !important;
    }

}