/* ===========================================================
    JazzabExcel Blog Styles
    Version : 1.1
===========================================================*/

/*-------------- Theme Tokens ----------------*/

:root {

    --jx-title-color:#e7eef7;
    --jx-subtitle-color:#d9e4f2;
    --jx-lead-color:#bcc8d6;
    --jx-text-color:#d5deea;
    --jx-marker-color:#2ea7ff;

    --jx-formula-bg:#1f2937;
    --jx-formula-color:#f1f5f9;
    --jx-formula-shadow:0 8px 18px rgba(0,0,0,.25);

    --jx-note-bg:#142638;
    --jx-note-border:#00a3ff;
    --jx-note-strong:#4fc1ff;

    --jx-tip-bg:#102a20;
    --jx-tip-border:#22c55e;
    --jx-tip-strong:#54d484;

    --jx-warning-bg:#352710;
    --jx-warning-border:#f59e0b;
    --jx-warning-strong:#fbbf24;

    --jx-example-bg:#15283b;
    --jx-example-border:#355d83;
    --jx-example-strong:#69bfff;
    --jx-example-code-bg:#1d344b;
    --jx-example-code-color:#e2eef9;

    --jx-image-caption:#9fb0c2;

    --jx-table-head-bg:#00a3ff;
    --jx-table-head-color:#fff;
    --jx-table-cell-border:#35516e;
    --jx-table-row-even:#142334;

    --jx-shortcuts-head-bg:#1f2937;
    --jx-shortcuts-head-color:#fff;
    --jx-shortcuts-cell-border:#3a4c62;

    --jx-download-item-bg:#132435;
    --jx-download-item-border:#32516f;
    --jx-download-item-hover-border:#00a3ff;
    --jx-download-item-hover-shadow:0 12px 25px rgba(0,163,255,.18);
    --jx-download-icon-bg:#183147;
    --jx-download-icon-color:#52beff;
    --jx-download-title-color:#ecf3fb;
    --jx-download-size-color:#9bb0c7;

    --jx-faq-bg:#132336;
    --jx-faq-border:#2f4b67;
    --jx-faq-title:#54beff;

    --jx-related-bg:#132538;

    --jx-cta-grad-a:#00a3ff;
    --jx-cta-grad-b:#0076d6;
    --jx-cta-color:#fff;
    --jx-btn-bg:#fff;
    --jx-btn-color:#008fe0;

    --jx-code-bg:#0f172a;
    --jx-code-color:#e2e8f0;

    --jx-learn-bg:#122234;
    --jx-learn-border:#304a63;
    --jx-learn-item-bg:#173149;
    --jx-learn-item-hover:#20405f;
    --jx-learn-check-bg:#00a3ff;
    --jx-learn-check-color:#fff;
}

.active-light-mode {

    --jx-title-color:#1f2937;
    --jx-subtitle-color:#1f2937;
    --jx-lead-color:#555;
    --jx-text-color:#334155;
    --jx-marker-color:#00a3ff;

    --jx-formula-bg:#1f2937;
    --jx-formula-color:#fff;
    --jx-formula-shadow:0 8px 18px rgba(0,0,0,.08);

    --jx-note-bg:#eef8ff;
    --jx-note-border:#00a3ff;
    --jx-note-strong:#00a3ff;

    --jx-tip-bg:#eefcf3;
    --jx-tip-border:#22c55e;
    --jx-tip-strong:#22c55e;

    --jx-warning-bg:#fff8ea;
    --jx-warning-border:#f59e0b;
    --jx-warning-strong:#d97706;

    --jx-example-bg:#f8fbff;
    --jx-example-border:#dbeeff;
    --jx-example-strong:#008ee0;
    --jx-example-code-bg:#eef5fa;
    --jx-example-code-color:#1f2937;

    --jx-image-caption:#777;

    --jx-table-head-bg:#00a3ff;
    --jx-table-head-color:#fff;
    --jx-table-cell-border:#e5e7eb;
    --jx-table-row-even:#fafafa;

    --jx-shortcuts-head-bg:#1f2937;
    --jx-shortcuts-head-color:#fff;
    --jx-shortcuts-cell-border:#ddd;

    --jx-download-item-bg:#fff;
    --jx-download-item-border:#e6e6e6;
    --jx-download-item-hover-border:#00a3ff;
    --jx-download-item-hover-shadow:0 12px 25px rgba(0,163,255,.15);
    --jx-download-icon-bg:#eaf7ff;
    --jx-download-icon-color:#00a3ff;
    --jx-download-title-color:#222;
    --jx-download-size-color:#888;

    --jx-faq-bg:#fff;
    --jx-faq-border:#ececec;
    --jx-faq-title:#00a3ff;

    --jx-related-bg:#f7fbff;

    --jx-cta-grad-a:#00a3ff;
    --jx-cta-grad-b:#0076d6;
    --jx-cta-color:#fff;
    --jx-btn-bg:#fff;
    --jx-btn-color:#00a3ff;

    --jx-code-bg:#0f172a;
    --jx-code-color:#e2e8f0;

    --jx-learn-bg:#fff;
    --jx-learn-border:#e5edf5;
    --jx-learn-item-bg:#f8fbff;
    --jx-learn-item-hover:#eef8ff;
    --jx-learn-check-bg:#00a3ff;
    --jx-learn-check-color:#fff;
}


/*-------------- Heading ----------------*/

.jx-title {

    font-size:28px;
    line-height:1.6;
    font-weight:800;
    color:var(--jx-title-color);
    margin-bottom:18px;

}


.jx-subtitle {

    font-size:20px;
    line-height:1.8;
    font-weight:700;
    color:var(--jx-subtitle-color);
    margin-top:32px;
    margin-bottom:14px;

}


/*-------------- Lead ----------------*/

.jx-lead{

    font-size:18px;
    line-height:2.2;
    color:var(--jx-lead-color);
    margin-bottom:35px;

}


/*-------------- Paragraph ----------------*/

.jx-text {

    font-size:16px;
    line-height:2;
    color:var(--jx-text-color);

}


/*-------------- Article Lists ----------------*/

.jx-content > ul,
.jx-list {

    padding-right:25px;
    margin:25px 0;
    display: block !important;

}


.jx-content > ul li,
.jx-list li {

    font-size:16px;
    line-height:2;
    margin-bottom:10px;
}


.jx-content > ul li::marker {

    color:var(--jx-marker-color);
    font-size:17px;

}


/*-------------- Formula ----------------*/

.formulaexcel-box{

    direction:ltr;

    background:var(--jx-formula-bg);

    color:var(--jx-formula-color);

    border-radius:12px;

    padding:18px 22px;

    margin:25px 0;

    font-family:Consolas,Courier New,monospace;

    font-size:16px;

    overflow:auto;

    box-shadow:var(--jx-formula-shadow);

}



/*-------------- Note ----------------*/

.excel-note{

    background:var(--jx-note-bg);

    border-right:5px solid var(--jx-note-border);

    padding:18px;

    border-radius:12px;

    margin:30px 0;

}


.excel-note strong{

    color:var(--jx-note-strong);

}



/*-------------- Tip ----------------*/

.excel-tip{

    background:var(--jx-tip-bg);

    border-right:5px solid var(--jx-tip-border);

    padding:18px;

    border-radius:12px;

    margin:30px 0;

}


.excel-tip strong{

    color:var(--jx-tip-strong);

}



/*-------------- Warning ----------------*/

.excel-warning{

    background:var(--jx-warning-bg);

    border-right:5px solid var(--jx-warning-border);

    padding:18px;

    border-radius:12px;

    margin:30px 0;

}


.excel-warning strong{

    color:var(--jx-warning-strong);

}



/*-------------- Example ----------------*/

.excel-example {

    background:var(--jx-example-bg);

    border:1px solid var(--jx-example-border);

    border-right:4px solid var(--jx-note-border);

    border-radius:12px;

    padding:16px 18px;

    margin:25px 0;

    font-size:15px;

    line-height:1.8;

}


.excel-example strong {

    display:block;

    color:var(--jx-example-strong);

    font-size:15px;

    margin-bottom:8px;

}


.excel-example code {

    background:var(--jx-example-code-bg);
    color:var(--jx-example-code-color);

    padding:3px 7px;

    border-radius:5px;

    font-size:13px;

}



/*-------------- Image ----------------*/

.excel-image{

    margin:35px 0;

    text-align:center;

}


.excel-image img{

    max-width:100%;

    border-radius:14px;

}


.excel-image figcaption{

    margin-top:10px;

    color:var(--jx-image-caption);

    font-size:14px;

}



/*-------------- Tables ----------------*/

.excel-table{

    width:100%;

    border-collapse:collapse;

    margin:35px 0;

}


.excel-table th{

    background:var(--jx-table-head-bg);

    color:var(--jx-table-head-color);

    padding:14px;

}


.excel-table td{

    padding:14px;

    border:1px solid var(--jx-table-cell-border);

}


.excel-table tr:nth-child(even){

    background:var(--jx-table-row-even);

}



/*-------------- Keyboard Shortcut ----------------*/

.excel-shortcuts{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}


.excel-shortcuts th{

    background:var(--jx-shortcuts-head-bg);

    color:var(--jx-shortcuts-head-color);

}


.excel-shortcuts td,
.excel-shortcuts th{

    padding:14px;

    border:1px solid var(--jx-shortcuts-cell-border);

}



/*-------------- Download Files ----------------*/

.excel-downloads{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin:40px 0;

}


.excel-download-item{

    flex:1 1 280px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    border:1px solid var(--jx-download-item-border);

    border-radius:14px;

    background:var(--jx-download-item-bg);

    text-decoration:none;

    transition:.25s;

}


.excel-download-item:hover{

    border-color:var(--jx-download-item-hover-border);

    transform:translateY(-4px);

    box-shadow:var(--jx-download-item-hover-shadow);

}


.excel-download-icon{

    width:55px;

    height:55px;

    border-radius:14px;

    background:var(--jx-download-icon-bg);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--jx-download-icon-color);

    font-size:28px;

}


.excel-download-content{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.excel-download-title{

    font-weight:700;

    color:var(--jx-download-title-color);

}


.excel-download-size{

    color:var(--jx-download-size-color);

    font-size:13px;

}



/*-------------- FAQ ----------------*/

.excel-faq{

    border:1px solid var(--jx-faq-border);

    background:var(--jx-faq-bg);

    border-radius:12px;

    padding:20px;

    margin:18px 0;

}


.excel-faq h3{

    margin-bottom:12px;

    color:var(--jx-faq-title);

}



/*-------------- Related Posts ----------------*/

.excel-related{

    background:var(--jx-related-bg);

    border-radius:14px;

    padding:25px;

    margin:50px 0;

}


.excel-related ul {
    
    margin:0 ;

    padding-right:20px ;

}


.excel-related li{

    margin:12px 0 ;

}



/*-------------- CTA ----------------*/

.excel-cta{

    background:linear-gradient(135deg,var(--jx-cta-grad-a),var(--jx-cta-grad-b));

    color:var(--jx-cta-color);

    padding:35px;

    border-radius:16px;

    margin:50px 0;

    text-align:center;

}


.excel-cta h2{

    color:#fff;

}


.excel-btn{

    display:inline-block;

    margin-top:20px;

    background:var(--jx-btn-bg);

    color:var(--jx-btn-color);

    padding:12px 28px;

    border-radius:8px;

    text-decoration:none;

    font-weight:700;

}



/*-------------- Code ----------------*/

.excel-code{

    direction:ltr;

    background:var(--jx-code-bg);

    color:var(--jx-code-color);

    border-radius:10px;

    padding:18px;

    overflow:auto;

    margin:25px 0;

    font-family:Consolas, monospace;

}



/*-------------- Learning Path ----------------*/

.excel-learning-path {

    margin:45px 0;

    padding:25px;

    background:var(--jx-learn-bg);

    border:1px solid var(--jx-learn-border);

    border-radius:16px;

}


.excel-learning-path h3 {

    font-size:21px;

    font-weight:800;

    margin-bottom:22px;

}


.excel-learning-path ul {

    list-style:none;

    padding:0;

    margin:0;

}


.excel-learning-path li {

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    margin-bottom:12px;

    background:var(--jx-learn-item-bg);

    border-radius:10px;

    font-size:15px;

    transition:.2s;

}


.excel-learning-path li:hover {

    transform:translateX(-5px);

    background:var(--jx-learn-item-hover);

}


.excel-learning-path li::before {

    content:"✓";

    display:flex;

    align-items:center;

    justify-content:center;

    width:24px;

    height:24px;

    flex-shrink:0;

    background:var(--jx-learn-check-bg);

    color:var(--jx-learn-check-color);

    border-radius:50%;

    font-size:12px;

}



/*-------------- Responsive ----------------*/

@media(max-width:768px){


    .jx-title{

        font-size:23px;

    }


    .jx-subtitle{

        font-size:18px;

    }


    .jx-text{

        font-size:15px;

    }


    .jx-lead{

        font-size:16px;

    }


    .excel-download-item{

        flex:100%;

    }


    .formulaexcel-box{

        font-size:15px;

    }


}