#pt_main {
    padding: 10px;
}
#periodicTable {
    min-width: 100%;
    border-collapse: separate;
}
#periodicTable td, #periodicTable th {
    padding: 10px;
    border: 1px solid transparent;
}
#periodicTable td[data-an] a {
    display: block;
    pointer-events: all;
}
#periodicTable td[data-an].blur {
    opacity: 0.2;
}
#periodicTable td[data-an].blur a {
    pointer-events: none;
}
.elementFilterGrid {
    column-gap: 15px;
}
#elementFilterTable {
    width: 100%;
    /*border-bottom: 1px solid #ddd;*/
}
#elementFilterTable td, #elementFilterTable th {
    padding: 5px;
    border: none;
}
#elementFilterTable td {
    padding-right: 50px;
}
#elementFilterTable th {
    background-color: #e7f8a9;
}
#elementFilterTable .mf-grid-content div {
    margin-bottom: 5px;
}
input[name='ElementFilter'] {
    position: fixed;
    top: -2000px;
}
input[name='ElementFilter'] + label[for] {
    font-size: 0.8rem;
}
input[name='ElementFilter'] + label[for]::before {
    display: inline-block;
    content: '';
    font-size: 0.8rem;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #ddd;
}
input[name='ElementFilter']:checked + label[for]::before {
    content: '\2713';
    font-weight: bold;
}

#groupnumrow th {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    background-color: #fff;
    opacity: 0.7;
}
@media (max-width: 601px) {
    #groupnumrow th {
        top: 50px;
    }
}
th.periodnumcell {
    position: -webkit-sticky;
    position: sticky;
    left: 0px;
    background-color: #fff;
    opacity: 0.7;
}
.spancell {
    border: none !important;
}
.element {
    display: block;
}
.atomicnum {
    color: #666 !important;
    font-weight: bolder;
    font-size: 0.8rem;
    text-shadow: 0 0 2px white;
}
.symbol {
    display: block;
    font-size: 1.3rem;
    font-weight: bolder;
    color: #000 !important;
}
.fullname {
    display: none;
    color: #333 !important;
    font-size: 0.7rem;
    text-shadow: 0 0 2px white;
}
#lanthrownum, #actiniderownum {
    font-weight: bolder;
}
#lanthaniderow .periodnumcell, #actiniderow .periodnumcell {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

/* -- CATEGORY */
.Alkali-Metal, input[value='Alkali-Metal'] +  label[for]::before {
    background-color: #77ffb4;
}
.Alkaline-Earth-Metal, input[value='Alkaline-Earth-Metal'] +  label[for]::before {
    background-color: #ebd8a6;
}
.Transition-Metal, input[value='Transition-Metal'] +  label[for]::before {
    background-color: #ff9dd6;
}
.Post-Transition-Metal, input[value='Post-Transition-Metal'] +  label[for]::before {
    background-color: #ffa2a2;
}
.Reactive-Non-Metal, input[value='Reactive-Non-Metal'] +  label[for]::before {
    background-color: #ffd477;
}
.Metalloid, input[value='Metalloid'] +  label[for]::before {
    background-color: #a4e2ff;
}
.Noble-Gas, input[value='Noble-Gas'] +  label[for]::before {
    background-color: #fffd8a;
}
.Lanthanide, input[value='Lanthanide'] +  label[for]::before {
    background-color: #eb9cff;
}
.Actinide, input[value='Actinide'] +  label[for]::before {
    background-color: #cdbfff;
}

/* -- Element Editor -- */
#elemedit_main {
    grid-template-columns: 100px auto;
}
.mf-form-control {
    border: 1px solid #fefefe;
    font-weight: bold;
}