/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 19 2025 | 22:27:19 */
._lb-pd-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

   

    ._lb-element-cell {
        font-family: 'Barlow';
        color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        cursor: pointer;
        border-radius: 5px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    ._lb-el-cell-an {
        font-size: 1.2rem;
    }

    ._lb-el-cell-sy {
        font-size: 1.8rem;
        font-weight: 700;
    }

    ._lb-el-cell-name {
        font-size: 1rem;
    }


    ._lb-element-cell:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }

    .element-type-nonmetal {
        background: linear-gradient(135deg, #2F4F4F, #4F6666);
        color: #f0f0f0;
    }

    .element-type-noble-gas {
        background: linear-gradient(135deg, #006400, #228B22);
        color: #f0f0f0;
    }

    .element-type-alkali-metal {
        background: linear-gradient(135deg, #8B0000, #B22222);
        color: #f0f0f0;
    }

    .element-type-alkaline-earth-metal {
        background: linear-gradient(135deg, #FF8C00, #FFA500);
        color: #f0f0f0;
    }

    .element-type-metalloid {
        background: linear-gradient(135deg, #4682B4, #5F9EA0);
        color: #f0f0f0;
    }

    .element-type-halogen {
        background: linear-gradient(135deg, #800080, #9932CC);
        color: #f0f0f0;
    }

    .element-type-post-transition-metal {
        background: linear-gradient(135deg, #556B2F, #6B8E23);
        color: #f0f0f0;
    }

    .element-type-transition-metal {
        background: linear-gradient(135deg, #1E3A5F, #3B5998);
        color: #f0f0f0;
    }

    .element-type-lanthanide {
        background: linear-gradient(135deg, #483D8B, #6A5ACD);
        color: #f0f0f0;
    }

    .element-type-actinide {
        background: linear-gradient(135deg, #8B4513, #A0522D);
        color: #f0f0f0;
    }


    ._lb-popup-element-data-box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #00000050;
        z-index: 2;
        transition: all 0.6s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ._lb-popup-element-data-box.hidden {
        opacity: 0;
        pointer-events: none;
    }

    ._lb-popup-element-data-box-inner {
        width: 70%;
        background-color: black;
        border-radius: 10px;
        min-height: 50vh;
        padding: 25px 30px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        max-height: 80vh;
        overflow: hidden;
        overflow-y: auto;

    }

    ._lb-popup-element-data-row1 {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        padding: 0px 0px 15px;
        border-bottom: solid 0.5px #6a6a6a;
    }

    ._lb-popup-element-data-row2 {
        padding: 15px 0;
        width: 100%;
        align-items: stretch;
        display: flex;

    }

    ._lb-popup-element-data-box ._lb-pd-data-cls-btn {
        cursor: pointer;
        font-size: 1.2rem;
    }

    ._lb-popup-row2-col1 {
        width: 50%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 15px;
    }

    ._lb-popup-row2-col2 {
        width: 50%;
        padding: 15px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    ._lb_pd-model-table {
        border-collapse: collapse;
    }

    ._lb-pd-model-data {
        font-size: 0.6rem;
        width: 100%;

    }

    ._lb-pd-model-data td {

        border-bottom: solid 0.5px #6a6a6a;
    }

    ._lb-pd-model-data-key,
    ._lb-pd-model-data-val {
        width: 50%;
        padding: 6px;
    }

    ._lb-pd-search-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 25px 0;
        gap: 20px;
    }

    ._lb-pd-search-input {
        width: 100%;
        max-width: 500px;
        padding: 15px 12px;
    }

    ._lb-model-title {
        font-size: 0.7rem;
        text-transform: uppercase;
    }

    ._lb-pd-model-sy {
        font-size: 5rem;
        font-weight: 800;
    }

    ._lb-pd-model-an {
        font-size: 1.5rem;
    }

    ._lb-pd-model-name {
        font-size: 1rem;
    }

    ._lb-pd-model-ty {
        font-size: 0.8rem;
    }

    @media (max-width: 800px) {
        :root {
            font-size: 16px;
        }

        ._lb-popup-element-data-box-inner {
            width: 95%;
            padding: 25px 15px;

        }
    }

    @media (max-width: 600px) {
        :root {
            font-size: 14px;
        }

        ._lb-popup-element-data-row2 {
            flex-wrap: wrap;
        }

        ._lb-popup-row2-col1,
        ._lb-popup-row2-col2 {
            width: 100%;
        }
    }