/* =================  Common ================= */
h2,h3,h4{
    color:var(--primary-color);
    font-weight:500;
}
h2{
    font-size: 2.5rem;
}
h3{
    position:relative;
    font-size: 1.5rem;
    margin-bottom:2rem;
}
h2:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2.5rem;
    height: 2px;
    background: #2C3E50;
    margin-top: -4px;
    margin-right: 1rem;
}
h4{
    font-size: 1.125rem;
}

section:not(.no-padding){
    border-top:1px solid #ccc;
    padding:2rem 0 3rem;
}

hr{
    margin: 3rem 0 2rem;
}
.as-of{
    font-size:0.825rem;
    color:#999;
    font-weight:normal;
}

.currency-tab .tab-buttons{
    justify-content:flex-end !important;
    border-bottom:1px solid var(--primary-color);
}

.currency-tab .tab-button{
    flex:initial !important;
    padding: 0.75rem 1.5rem !important;
    color:var(--primary-color);
}
.currency-tab .tab-button.active{
    background:var(--primary-color);
    color:#fff;
}

table,
table td,
table th{
    border:0;
}

table th{
    font-weight:bold;
}

table tr:nth-child(odd) td{
    background:#f2f2f2;
}
.table-border td{
    border-bottom:1px solid #ddd;
}

.block-grid-row {
    margin-bottom:4rem !important;
}
.tab-pane{
    animation:none;
}

/* =================  Banner ================= */
.etf-code{
    font-size:5rem;
    line-height:1;
    font-weight:bold;
    margin-top:8%;
}

.etf-name{
    font-size:2rem;
    margin-bottom:1rem;
}

#invest-now-btn > .btn{
    background:#fff;
    color:var(--primary-color);
    cursor:pointer;
}

/* =================  ETF navigator ================= */

#etf-nav{
    position:sticky;
}

.etf-nav{
    display:flex;
    gap:1rem;
    align-items:center;
}
.etf-nav a{
    display:block;
    text-decoration:none;
    padding: 1rem 0.5rem;
}

/* =================  Overview ================= */

.important-information-content{
    height:400px;
    overflow-y:auto;
}
.index-information,
.investment-objective{
    margin-top:3rem;
}

/* =================  Price and Performance ================= */

.intra-day-table th:first-child,
.intra-day-table td:first-child{
    text-align:left;
}
.intra-day-table th,
.intra-day-table td{
    text-align:right;
}


/* =================  Portfolio ================= */
.rolling-1y{
    display:flex;
    width:100%;
    max-width:400px;
}
.rolling-1y > *{
    flex:1;
    padding: 1rem;
    text-align:center;
}

.rolling-index{
    position:relative;
    font-size:2rem;
    display:inline-block;
    padding:0 0.5rem;
}
.rolling-index > .arrow-up,
.rolling-index > .arrow-down{
    display:block;
    position:absolute;
    top:20%;
    left:100%;
    width:0;
    height:0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}


.rolling-index > .arrow-up {
  border-bottom: 8px solid #e02020;
}

.rolling-index > .arrow-down {
  border-top: 8px solid #40c182;
}

.rolling-name{
    font-size:0.827rem;
    color:#666;
}
#td-chart {
    width: 100%;
    height: 450px;
    margin: 1rem auto;
}




/* =================  Investor Eduction ================= */
@media (min-width:768px){
.investor-education-tabs .tab-button:hover,
.investor-education-tabs .tab-button.active{
    background:transparent;
}
.investor-education-tabs .tab-button > div{
    position:relative;
    height:clamp(150px,20vw,200px);
    aspect-ratio: 1/1;
    margin:0 auto;
    padding:clamp(36px,10vw,50px);
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary-color);
}
.investor-education-tabs .tab-button > div > span{
    display:block;
    max-width:200px;
}

.investor-education-tabs .tab-button img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}
.investor-education-tabs .tab-button:not(.active) img{
    filter: brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(82%) hue-rotate(39deg) brightness(92%) contrast(88%);
}
.investor-education-tabs .tab-button:not(.active) > div{
    color:#ccc;
}

.investor-education-tabs .tab-pane{
    padding: clamp(2rem, 5vw, 3rem) 0;
}
}


/* =================  Documents ================= */
.product-documents{
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap:4rem;
}
@media(max-width:768px){
  .product-documents{
    grid-template-columns: 1fr;
    }  
}

.product-documents a{
    display:block;
    text-decoration:none;
    padding: 1.5rem 0;
    border-bottom:1px solid #ccc;
    cursor:pointer;
    position:relative;
}
.product-documents a:hover{
    font-weight:bold;
    color:var(--primary-color);
}

.product-documents a:after{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font: var(--fa-font-regular);
    content: '\f1c1';
    font-size:1.5rem;
    position: absolute;
    right:0;
    top: 1.5rem;
}