/* Styles for featureset template.

   developer:   rmiske
   requires:    /common/framework/css/framework.ko.css
   ========================================================================== */

/* ==========================================================================
   setup the environment
   ========================================================================== */
:root {
    --wrapper-h-pad: 3.125rem;
}
main { font-family: "Source Sans Pro", sans-serif; }
.page-width {
    margin: 0 auto;
    max-width: calc(1032px + (2 * var(--wrapper-h-pad)));
    padding: 2.125rem var(--wrapper-h-pad);
    width: 100%;
}
.mobile-only {
    display:none;
    font-size: 0.85rem;
    line-height: 1.2;
}





/* ==========================================================================
   hero
   ========================================================================== */
#hero { background: #343541; }
#hero .bg-pad { 
    background-image: url('/llm-benchmarking-project/img/hero.png');
    background-position: 80% -19px;
    background-repeat: no-repeat;
    background-size: 520px;
    height: 311px;
    margin: 0 auto;
}
#hero .page-width { padding: 0 var(--wrapper-h-pad); }
#hero h1 {
    color: #fff;
    font-size: 4.25rem;
    line-height: 1;
    padding-top: 4rem;
}
#hero h2 {
    color: #d8e3fe;
    font-size: 1.37rem;
    margin-top: 0.75rem;
}
#hero h2 span { white-space: nowrap; }




/* ==========================================================================
   sections 
   ========================================================================== */
section a { color: #10a37f; }
section a:hover { color: #036c52; }
section p {
    color: #404040;
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0.6rem 0;
}


/*intro*/
#intro { padding-bottom: 0; }
#intro p { margin: 1rem 0 1.5rem; }


/*table*/
#table { padding-bottom: 0.8rem; padding-top: 0.6rem; }
.tablesorter a { color: #3b685d; }
.tablesorter a:hover { color: #10a37f; }
.tablesorter tr td:first-of-type { font-weight:600; }
.tablesorter tr td, .tablesorter tr th { padding-left: 0.5rem !important; }
.tablesorter-blue th, .tablesorter-blue thead td {
    font-weight: 600;
    color: #424242;
    background-color: #48a58e3d;
    text-shadow: none;
    font-size: 0.85rem;
}
.tablesorter-blue tbody > tr:hover > td { background-color: #f1f1f1; }
.tablesorter-blue .tablesorter-headerDesc, .tablesorter-blue .tablesorter-headerAsc {
    background-color: #48a58ebd;
    color: #fff;
}

.tablesorter tr th:nth-of-type(1){ width: 25%; }
.tablesorter tr th:nth-of-type(2){ width: 35%; }
.tablesorter tr th:nth-of-type(3){ width: 20%; }
.tablesorter tr th:nth-of-type(4){ width: 20%; }

body.tablesorter-disableSelection { 
    -ms-user-select: none; 
    -moz-user-select: -moz-none;
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    user-select: none;
}
.tablesorter-resizable-container {
    position: relative; 
    height: 1px; 
}
.tablesorter-resizable-handle { 
    position: absolute; 
    display: inline-block; 
    width: 8px;top: 1px; 
    cursor: ew-resize; 
    z-index: 3; 
    user-select: none; 
    -moz-user-select: none;
}




/*logos*/
.tablesorter tr td:first-of-type a {
    background-size: 20px;
    background-repeat: no-repeat;
    color: #333;
    padding-left: 26px;
}
.tablesorter tr td:first-of-type a.opensource {
    font-weight: 500;
    color: #777;
    padding-left: 0;
}
a.ai2 { background-image: url('/llm-benchmarking-project/img/icon-ai2.png'); }
a.ai21-labs { background-image: url('/llm-benchmarking-project/img/icon-ai21-labs.png'); }
a.aidc-ai { background-image: url('/llm-benchmarking-project/img/icon-aidc-ai.png'); }
a.aleph-alpha { background-image: url('/llm-benchmarking-project/img/icon-aleph-alpha.png'); }
a.amazon { background-image: url('/llm-benchmarking-project/img/icon-amazon.png'); }
a.anthropic { background-image: url('/llm-benchmarking-project/img/icon-anthropic.png'); }
a.apple { background-image: url('/llm-benchmarking-project/img/icon-apple.png'); }
a.arcee { background-image: url('/llm-benchmarking-project/img/icon-arcee.png'); }
a.baidu { background-image: url('/llm-benchmarking-project/img/icon-baidu.png'); }
a.bytedance { background-image: url('/llm-benchmarking-project/img/icon-bytedance.png'); }
a.cofeai { background-image: url('/llm-benchmarking-project/img/icon-cofeai.png'); }
a.cognitive-computations { background-image: url('/llm-benchmarking-project/img/icon-cognitive-computations.png'); }
a.cohere { background-image: url('/llm-benchmarking-project/img/icon-cohere.png'); }
a.databricks { background-image: url('/llm-benchmarking-project/img/icon-databricks.png'); }
a.deep-cogito { background-image: url('/llm-benchmarking-project/img/icon-deep-cogito.png'); }
a.deepreinforce { background-image: url('/llm-benchmarking-project/img/icon-deepreinforce.png'); }
a.deepseek { background-image: url('/llm-benchmarking-project/img/icon-deepseek.png'); }
a.falcon-llm { background-image: url('/llm-benchmarking-project/img/icon-falconllm.png'); }
a.google { background-image: url('/llm-benchmarking-project/img/icon-google.png'); }
a.groq { background-image: url('/llm-benchmarking-project/img/icon-groq.png'); }
a.hugging-face { background-image: url('/llm-benchmarking-project/img/icon-hugging-face.png'); }
a.ibm { background-image: url('/llm-benchmarking-project/img/icon-ibm-granite.png'); }
a.inception-labs { background-image: url('/llm-benchmarking-project/img/icon-inception-labs.png'); }
a.inclusion-ai { background-image: url('/llm-benchmarking-project/img/icon-inclusion-ai.png'); }
a.internlm { background-image: url('/llm-benchmarking-project/img/icon-internlm.png'); }
a.inf-ai { background-image: url('/llm-benchmarking-project/img/icon-inf-ai.png'); }
a.infly { background-image: url('/llm-benchmarking-project/img/icon-infly.png'); }
a.kwaipilot { background-image: url('/llm-benchmarking-project/img/icon-kwaipilot.png'); }
a.lg-ai-research { background-image: url('/llm-benchmarking-project/img/icon-lg-ai-research.png'); }
a.liquid { background-image: url('/llm-benchmarking-project/img/icon-liquid.png'); }
a.meituan { background-image: url('/llm-benchmarking-project/img/icon-meituan.png'); }
a.meta { background-image: url('/llm-benchmarking-project/img/icon-meta.png'); }
a.microsoft { background-image: url('/llm-benchmarking-project/img/icon-microsoft.png'); }
a.minimax { background-image: url('/llm-benchmarking-project/img/icon-minimax.png'); }
a.mistral-ai { background-image: url('/llm-benchmarking-project/img/icon-mistralai.png'); }
a.moonshot-ai { background-image: url('/llm-benchmarking-project/img/icon-moonshot-ai.png'); }
a.neural-magic { background-image: url('/llm-benchmarking-project/img/icon-neural-magic.png'); }
a.nex-agi { background-image: url('/llm-benchmarking-project/img/icon-nex-agi.png'); }
a.nexusflow { background-image: url('/llm-benchmarking-project/img/icon-nexusflow.png'); }
a.nous-research { background-image: url('/llm-benchmarking-project/img/icon-nousresearch.png'); }
a.nvidia { background-image: url('/llm-benchmarking-project/img/icon-nvidia.png'); }
a.openai { background-image: url('/llm-benchmarking-project/img/icon-openai.png'); }
a.openchat { background-image: url('/llm-benchmarking-project/img/icon-openchat.png'); }
a.poolside { background-image: url('/llm-benchmarking-project/img/icon-poolside.png'); }
a.qwen { background-image: url('/llm-benchmarking-project/img/icon-qwen.png'); }
a.replit { background-image: url('/llm-benchmarking-project/img/icon-replit.png'); }
a.sakana-ai { background-image: url('/llm-benchmarking-project/img/icon-sakana-ai.png'); }
a.salesforce { background-image: url('/llm-benchmarking-project/img/icon-salesforce.png'); }
a.sea-ai-lab { background-image: url('/llm-benchmarking-project/img/icon-sea-ai-lab.png'); }
a.stepfun { background-image: url('/llm-benchmarking-project/img/icon-stepfun.png'); }
a.tencent { background-image: url('/llm-benchmarking-project/img/icon-tencent.png'); }
a.thinking-machines { background-image: url('/llm-benchmarking-project/img/icon-thinking-machines.png'); }
a.upstage { background-image: url('/llm-benchmarking-project/img/icon-upstage.png'); }
a.writer { background-image: url('/llm-benchmarking-project/img/icon-writer.png'); }
a.xai { background-image: url('/llm-benchmarking-project/img/icon-xai.png'); }
a.xiaomi { background-image: url('/llm-benchmarking-project/img/icon-xiaomi.png'); }
a.yi { background-image: url('/llm-benchmarking-project/img/icon-yi.png'); }
a.z-ai { background-image: url('/llm-benchmarking-project/img/icon-z-ai.png'); }


/*numbers*/
.tablesorter tr td:first-of-type { position: relative; }
.tablesorter tr td:first-of-type:before {
    color: #777;
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    left: -39px;
    position: absolute;
    text-align: right;
    width: 30px;
}


/*related*/
#related h2 {
    border-top: 1px solid #cdcdcd;
    color: #666;
    font-size: 1.18rem;
    letter-spacing: 0.02rem;
    margin-bottom: 0.5rem;
    padding-top: 1rem;
    text-transform: uppercase;
}
#related ul {
    ::marker { color: #666; }
    margin-bottom: 1.5rem;
}
#related li {
    font-size: 1.2rem;
    padding: .2rem 0 .2rem 0;
    margin-left: 1.3rem;
    display: list-item;
    list-style: square;
}    



/* General styles for the search field container */
.searchfieldcontainer {
    position: relative;
    width: auto;
    flex-shrink: 0;
    margin-right: 10px;
}

/* Search input styles */
#searchInput {
    background: #fff;
    color: #333;
    max-width: 100%;
    box-sizing: border-box;
    height: 28px;
    padding: 5px 25px 5px 9px;
    font-size: 0.8125rem !important;
    border: 1px solid #cdcdcd; /* Default border */
    border-radius: 4px;
}

#searchInput:focus {
    border-color: #10a37f; /* Green border when focused */
    outline: none; /* Removes the default blue outline */
}

#searchInput.input-has-value {
    border-color: #10a37f; /* Green border when input has value */
}

#searchInput::placeholder {
    font-size: 0.8125rem !important; /* Adjust placeholder font size */
}

#searchInput:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset; /* Set the background color */
    -webkit-box-shadow: 0 0 0px 1000px white inset; /* For older WebKit browsers */
}

/* Clear search button styles */
#clearSearch {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.6rem;
    color: rgb(170, 170, 170);
}

/* Styles for the .last-updated container */
.last-updated {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.last-updated a {
    white-space: nowrap;
    color: #999 !important;
    font-size: 0.8125rem !important;
}

/* Prevent ::before content in the no-matches row */
#noMatchesRow td::before {
    content: none !important;
}

/* Row numbering in the second column */
.tablesorter tr td:nth-of-type(2) {
    position: relative;
}

.tablesorter tr td:nth-of-type(2)::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1200px) {
    #hero .bg-pad { background-position-x: 90%; }
}


@media (max-width: 900px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 2rem;
    }


    /*hero*/
    #hero h1 {
        padding: 3.125rem 0 0.125rem 0;
        font-size: 4.05rem;
    }
}


@media (max-width: 800px) {
    /*hero*/
    #hero .bg-pad {
        height: 255px;
        background: none;
    }
}


@media (max-width: 700px) {
    /*setup*/
    td span.mobile-only { display:block; }

    /*hide vendor column*/
    .tablesorter tr td:nth-of-type(1),
    .tablesorter tr th:nth-of-type(1){ display:none; }

    /*numbers*/
    table#myTable { margin-left: 1rem; width: 97%; }
    .tablesorter tr td:nth-of-type(2) { position: relative; }
    .tablesorter tr td:nth-of-type(2):before {
        color: #777;
        display: block;
        font-size: 0.9rem;
        font-weight: 500;
        left: -39px;
        position: absolute;
        text-align: right;
        width: 30px;
    }

    #searchInput {
        width: 100%;
    }

    .last-updated {
        align-items: center;
        margin-left: 12px;
    }

    /* Add row numbers to the second column */
    .tablesorter tr td:nth-of-type(2)::before {
        content: attr(data-content);
        display: inline-block;
        width: 30px;
        margin-right: 10px;
        text-align: right;
    }

}

/* Media query for screens > 700px */
@media (min-width: 701px) {
    /* Ensure row numbering is visible in the first column */
    .tablesorter tr td:nth-of-type(1)::before {
        content: attr(data-content);
        display: inline-block;
        width: 30px;
        margin-right: 10px;
        text-align: right;
    }
}


@media (max-width: 600px) {
    /*setup*/
    :root {
        --wrapper-h-pad: 1rem;
    }
    .page-width { padding: 2rem var(--wrapper-h-pad); }


    /*hero*/
    #hero .bg-pad { height: 230px; }
    #hero h1 {
        max-width:400px;
        font-size: 3.5rem;
        padding-top: 1.5rem;
    }
    #hero .page-width h2 { font-size: 1.3rem; }


    /*sections*/
    section h2 { font-size: 29px; padding-bottom: 1.5rem; }
    section p { font-size: 1.2rem; }
    #intro p:first-child { font-size: 1.35rem; }
    section.page-width#intro { padding-top: 1.125rem; }
    section.page-width#outro { padding-bottom: 1.125rem; }
    
    
    .last-updated {
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch; /* Ensure items take full width */
    }

    .last-updated a {
        order: -1; /* Move the <a> tag to the top */
        margin-bottom: 0.5rem; /* Add space below the <a> tag */
        text-align: right;
        font-size:12px !important;
    }

    .searchfieldcontainer {
        width: 100%; /* Ensure the container takes full width */
        margin-right: 0;
    }

    #searchInput {
        width: 100%; /* Make the input field take full width */
        box-sizing: border-box; /* Include padding and border in width calculation */
        font-size:13px !important;
    }

    
}


@media (max-width: 320px) {}