/* Font Declare */

    /*=========================================================================*/
    /*  Serif
    /*=========================================================================*/

    /* Used for Links and Navigation */
    @font-face {
        font-display: swap;
        font-family: 'Noto Serif';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/noto-serif-v33-latin-regular.woff2') format('woff2');
    }

        /* Fall back for Serif 400 */
        @font-face {
            font-family: 'Noto Serif 400 Fallback';
            src: local('Georgia');
            size-adjust: 109%;
            ascent-override: 90%;
            descent-override: 22%;
            line-gap-override: 0%;
            font-weight: 400;
        }

    /* Used for Title */
    @font-face {
        font-display: swap;
        font-family: 'Noto Serif';
        font-style: normal;
        font-weight: 700;
        src: url('../fonts/noto-serif-v33-latin-700.woff2') format('woff2'); 
    }

        /* Fall back for Serif 700 */
        @font-face {
            font-family: 'Noto Serif 700 Fallback';
            src: local('Georgia Bold'), local('Georgia');
            size-adjust: 97%;
            ascent-override: 110%;
            descent-override: 32%;
            line-gap-override: 0%;
            font-weight: 700;
        }


    /*=========================================================================*/
    /*  Sans
    /*=========================================================================*/

    /* Used for Content Block Body Text */
    @font-face {
        font-display: swap; 
        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 300;
        src: url('../fonts/noto-sans-v42-latin-300.woff2') format('woff2'); 
    }

        /* Fall back for Sans 300 */
        @font-face {
            font-family: 'Noto Sans 300 Fallback';
            src: local('Arial');
            size-adjust: 102.8%;
            ascent-override: 90%;
            descent-override: 22%;
            line-gap-override: 0%;
            font-weight: 300;
        }

    /* Used for Content Block Body Text */
    @font-face {
        font-display: swap; 
        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 400;
        src: url('../fonts/noto-sans-v42-latin-regular.woff2') format('woff2');
    }







/* Variables */
:root{

    --ZLK-Green: #3F9F7F;
    --ZLK-HoverGreen: #80dfa1;
    --ZLK-HoverYellow: #FFFCCC;
    --ZLK-TableHoverGreen: #E9FAEF;

    --ZLK-Blue: #000465;
    --ZLK-DarkBlue: #1E2C48;

    --ZLK-BGColor: #F8FAFD;

    --ZLK-PostTitleGrey: #282828;
    --ZLK-RegularFontColor: #333;

    /* Common Styles */
    --ZLK-Transitions: all 0.25s;
    --ZLK-TransitionsSlow: all 0.5s;
    --ZLK-GreenShadow: 3px 3px 10px -3px var(--ZLK-Green);
    --ZLK-GreenShadowThin: 3px 3px 10px -6px var(--ZLK-Green);
  
    /* Font Family */
    --Serif400: 'Noto Serif', 'Noto Serif 400 Fallback', Georgia, serif;
    --Serif700: 'Noto Serif', 'Noto Serif 700 Fallback', Georgia, serif;
    --Sans300 : 'Noto Sans', 'Noto Sans 300 Fallback', Arial, serif;

    /* Font Size */
    --h1-fsize: 40px;
    --h2-fsize: 32px;
    --h3-fsize: 24px;
    --regular-fsize: 16px;

    --list-title-fsize: 20px;

    --post-content-fsize: 20px;

    /* Image URLs */
    --LogoPlaceholder: url("/assets/images/LKLogo-Placeholder.webp");
}

/*
body{margin: 0; font-family: "Raleway", sans-serif; background: #F8FAFD;}
*/
body{
    margin: 0; 
    font-family: var(--Sans300);
    background: var(--ZLK-BGColor);
}

h1,h2,h3,h4,h5,h6,p{margin: 0;}

#bg_banner, .bg_color{
    background: linear-gradient(90deg,rgba(84, 153, 255, 0.18) 0%, rgba(84, 153, 255, 0.08) 35%,rgba(84, 153, 255, 0.00) 70%),#171D2F;
    box-shadow: 0px 0px 10px 0px #333;
}

.bg_color2{background: #EAEEF5;}

.bg_color3{background: #171D2F;}

.zlk_width{margin: 0 auto; max-width: 1248px; width: 100%;}

.zlk_width_2{margin: 0 auto; max-width: 1166; width: 100%;}

.zlk_width_3{margin: 0 auto; max-width: 1440px; width: 100%;}

.zlk_width_4{margin: 0 auto; max-width: 960px; width: 100%;}


.width_pd{padding: 0 30px;}

#bg_color{
    min-height: 100vh; 
    background: linear-gradient(
        135deg,
        #243a5e 0%,
        #1f2f4a 40%,
        #17263d 70%,
        #0f1c2e 100%
    );

    background-repeat: no-repeat;
}

.textCenter{text-align: center;}

.textRight{text-align: right;}

.msg_no_content{display: none; text-align: center; margin: 16px auto 0;}

.msg_no_content2{ text-align: center; margin: 0 auto 0;}








/* General Styles */

    .page_wrapper{
        max-width: 1000px;
        width:100%;
        margin: 50px auto;
    }

    .postpage_wrapper{
        max-width: 700px;
        width:100%;
        margin: 50px auto;
    }

    .top_banner{
        max-width: 1000px;
        margin: 0 auto;
        padding-bottom: 50px;

        display: flex; 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 10px; 
    }

    h1{
        font-family: var(--Serif700); 
        font-size: var(--h1-fsize);
        font-weight: 700;
        line-height: 1.3;
        color:#FFF;
    }

    h1+p{
        font-family: var(--Serif400); 
        font-size: 16px;
        font-weight: 400;
        color:#FFF;
    }

    h2{
        font-family: var(--Serif700); 
        font-size: var(--h2-fsize);
        font-weight: 700;
        line-height: 1.3;
        color:var(--ZLK-Green);
    }
    h2+p{
        color: #666;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        margin-bottom: 10px;
    }

    h3{
        font-size: var(--h3-fsize);
        font-weight: 700;
        line-height: 1.3;
        color:var(--ZLK-Green);

        font-style: italic;
    }

    p{
        font-size: var(--regular-fsize);
        line-height: 1.6;
        font-weight: 300;
        color: var(--ZLK-RegularFontColor);
    }

    .post_content p{
        margin-bottom: 1em;
        font-size:var(--post-content-fsize);
        overflow-wrap: break-word;
    }

    button{
        font-family: inherit;
        font-size: inherit;
    }



/* Ticker Block */

    .ticker_block{

        min-width: 80px;
        height: 24px;
        border-radius: 10px;
        padding: 0 13px;
        box-sizing: border-box;

        font-size: 16px;
        font-weight: 700;
        color: #FFF;

        display: inline-flex;
        justify-content: center;
        align-items: center;

        background: var(--ZLK-Green);
    }    


/* "External Link" Icon */

    /* <svg class='ELIcon'><use href='#ExternalLink'></use></svg> */
    .LinkBlock_EL:hover .ELIcon{
        color:var(--ZLK-Green);
        --icon-stroke:3;

        top:-5px;
        left:5px;
    }

    .LinkBlock_EL .ELIcon{
        width:24px; 
        height:24px; 
        color:#AAA;

        position: relative;
        top:0px;
        left:0px;

        transition: var(--ZLK-Transitions);
    }


/* Link Styles */
    
    /* Regular Links (White Font) */
    a{transition: var(--ZLK-Transitions); color:#FFF; } /* BY ALEX */
    a:hover{color:var(--ZLK-Green);} /* BY ALEX */

    /* Regular Links (Green Font) */
    a.ZLKlinkG{transition: var(--ZLK-Transitions); color: var(--ZLK-Green); } /* BY ALEX */
    a.ZLKlinkG:hover{color: var(--ZLK-Blue);} /* BY ALEX */

    /* Regular Links (Blue Font) */
    a.ZLKlinkB{transition: var(--ZLK-Transitions); color: var(--ZLK-Blue);} /* BY ALEX */
    a.ZLKlinkB:hover{color: var(--ZLK-Green); } /* BY ALEX */    

    /* Block Links */
    a.BlockLink{
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        text-decoration: none;
    }
    a.BlockLink::after{
        width:100%;
        height:100%;

        position: absolute;
        top:0;
        left:0;

        content: "";
    }


/* Button Styles */

    /* Green Button */
    .ZLKButtonG{
        background-color: var(--ZLK-Green);
        color: #FFF;
        border: none;
        border-radius: 4px;
        box-shadow: 2px 2px 2px 1px #26614d;
        padding: 0 10px;
        font-family: var(--Serif400);
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--ZLK-Transitions);

        text-decoration: none;
    }
    
    .ZLKButtonG:hover{
        background-color: #26614d;
        box-shadow: 0px 0px 2px 1px #1a4536;
        transform: translate(2px, 2px);

        color:#CCC;
    }



    /* Green Button */
    .ZLKButtonB{
        background-color: var(--ZLK-Blue);
        color: #FFF;
        border: none;
        border-radius: 4px;
        padding: 0 10px;
        font-family: var(--Serif400);
        font-size: 16px;
        cursor: pointer;
        transition: var(--ZLK-Transitions);
    }
    .ZLKButtonB:hover{
        background-color: var(--ZLK-Green);
    }    



/* Search Bar */

    .ZLKSearchBarWrapper{
        display: flex;
        gap: 16px;
        margin-top: 10px;
    }

    .ZLKSearchBarWrapper>div{
        display: flex;
        padding: 7px 15px 7px 40px;
        align-items: center;
        border: 1px solid #BDBDBD;
        background: #FFF;

        position: relative;
        transition: var(--ZLK-Transitions);
    }

    .ZLKSearchBarWrapper input{
        
        width: 290px;
        border: none;
        padding: 0;
        outline: none;

        font-family: var(--Sans300);
        font-size: 16px;
        
        transition: var(--ZLK-Transitions);
    }
    .ZLKSearchBarWrapper input::placeholder{color: #BDBDBD; font-weight: 500;}
    .ZLKSearchBarWrapper:hover>div,
    .ZLKSearchBarWrapper:hover input{background-color: var(--ZLK-TableHoverGreen);}

    .ZLKSearchBarWrapper .X{
        width:29px;
        height:29px;
        vertical-align: middle;
        --icon-stroke: 4;
    }

    
    .ZLKSearchBarWrapper .Search{
        width: 24px;
        height: 24px;
        --icon-stroke: 4;
        position: absolute;
        left: 8px;
        color: #AAA;
    }


/* Genreal Table */

    .ZLKDataTable{
        width: 100%;
        border-collapse: collapse;
    }

    .ZLKDataTable>thead{
        color: var(--ZLK-Green);
        position: sticky;
        top:0;
        z-index:100;

        box-shadow: 0px 5px 5px -5px var(--ZLK-Green);
        background-color: var(--ZLK-BGColor);
    }

    .ZLKDataTable>thead p{
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        color: var(--ZLK-Green); 
    }

    .ZLKDataTable>tbody{font-size:var(--regular-fsize); color: var(--ZLK-Blue);}
    .ZLKDataTable>tbody>tr{transition: var(--ZLK-Transitions);}
    .ZLKDataTable>tbody>tr:nth-child(even){background: #F1F3F9;}
    .ZLKDataTable>tbody>tr:hover{background-color:var(--ZLK-TableHoverGreen);}

    .ZLKDataTable th,
    .ZLKDataTable td{padding:10px 5px;}

    .ZLKDataTable th{
        font-family: var(--Serif700);
    }

    .ZLKDataTable td>p{
        font-weight: inherit;
        font-size: inherit;
        color: inherit;
    }


/* Filter Tag */

    .FilterTagWrapper{
        width: 100%; 
        margin: 0 auto;
    }
    .FilterTagWrapper a{text-decoration:none;}

    .FilterTagWrapper > ul{

        margin: 0; 
        padding: 0; 

        display: flex; 
        align-items: flex-start; 
        gap: 30px; 
        list-style-type: none; 
        justify-content: center;
    }

    .FilterTagWrapper > ul > li{

        height: 36px; 
        padding: 0 10px; 
        border-bottom: 4px solid transparent;

        display: flex; 
        justify-content: center; 
        align-items: center; 
        gap: 10px;
        
        font-family: var(--Serif700);
        font-size: 25px;
        font-weight: 700;
        line-height: 20px;
        color: #FFF;

        cursor: pointer;
        transition: var(--ZLK-Transitions);
    }
    .FilterTagWrapper > ul > li:hover{color:var(--ZLK-Green); border-bottom: 4px solid var(--ZLK-Green);}

    #current_filter{
        color: var(--ZLK-Green) !important; 
        border-bottom: 4px solid var(--ZLK-Green) !important; 
        font-weight: 600 !important; 
        pointer-events: none;
    }
    #current_filter > a{color: inherit;}


/* Ticker Symbol Page - Metric Block */

    .ts_metric_block{
        flex: 1; 
        
        padding: 15px;
        border-radius: 10px; 
        /* border: 1px solid #CCC; */
        box-shadow: var(--ZLK-GreenShadowThin);
        
        background: #FFF; 
    }

    .ts_metric_block > div{display: flex; gap: 8px; align-items: center;}

    .ts_metric_block > div > p{
        font-weight: 700;
        line-height: 19px;
    }

    .ts_metric_block > div > span{
        width: 20px;
        height: 20px;
    }



/* Ticker Symbol Page - Form Block */

    .fyc_3, .fyc_4, .fyc_5{background: rgba(13, 162, 231, 0.20); color: #0DA2E7;}

    .fyc_8-K{background: rgba(231, 13, 20, 0.20); color: #E70D14;}

    .fyc_10-K, .fyc_10-K_A{background: #1B294B; color: #F8FAFC;}

    .fyc_DEF_14A, .fyc_DEFA14A, .fyc_PRE_14A, .fyc_PRER14A, .fyc_DEF_14C,
    .fyc_DEFA14C, .fyc_PRE_14C, .fyc_PRER14C{background: rgba(124, 59, 237, 0.20); color: #7C3BED; }

    .fyc_13F-HR, .fyc_13F-HR_A{background: rgba(48, 197, 88, 0.20); color: #30C558;}



/* Back to Top Button */

#Back2TopButton{
    position: fixed;
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom)); /* respect notches/home indicator on iOS */
    right: 16px;
    z-index: 999;

    padding: 10px 15px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px 0px #333;

    background: var(--ZLK-Green);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
#Back2TopButton>p{
    font-family: var(--Serif700);
    color: #fff;
    font-weight: 700;
}

#Back2TopButton>svg{
    width:30px;
    height:20px;
    color: #fff;
    --icon-stroke: 4;
    transform: rotate(180deg) scale(1.5);

    position: relative;
    top:0px;

    transition: var(--ZLK-Transitions);
}


#Back2TopButton.is-visible {opacity: 0.66; pointer-events: auto;}
#Back2TopButton.is-visible:hover{opacity: 1; cursor: pointer;}
#Back2TopButton.is-visible:hover>svg{top:-3px;}






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

    .top_banner{padding-bottom: 25px;}
    .page_wrapper{margin: 25px auto;}

}




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

/* Variables */

    :root{
        --h1-fsize: 32px;
        --h2-fsize: 24px;
        --h3-fsize: 20px;

        --post-content-fsize: 18px;
    }


    .width_pd{padding: 0 20px;}
    .ZLKSearchBarWrapper input{width: 100%;}



/* Filter Tag */    
    .FilterTagWrapper > ul{
        gap: 0px;
        justify-content: space-evenly;
    }

    .FilterTagWrapper > ul > li{
        font-size: 18px;    
        font-weight: 400;
    }

    #current_filter{font-weight: 400 !important;}



}


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

    .ticker_block{min-width: 71px;}
}