.abundanceButton{
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    width:100%;
    height:100%;
    padding:0.2em;
}

.atomicSymbol{
    width: 100%;
    /* position: absolute; */
    font-weight: bold;
    font-size:2.0vw;
    color: black;
    /* top:50%;
    left:50%;
    margin-left:-50%;
    margin-top:-50%; */
}

.atomicSymbolIcon{
    /* font-weight: bold; */
    font-size:0.2vw;
}

.atomicNumber{
    /* display:none; */
    position: absolute;
    top: 2%;
    left: 2%;
    font-size:1vw;
    color:black;
}

.atomicWeight{
    margin-bottom:25px;
}

.atomicWeightTitle{
    font-weight: bold;
    font-size:1.5em;
}

.blue,
.blueBox,
.blueFill{
    background-color: rgb(148,215,229);
}

.blueBox{
    grid-column: 6/7;
    grid-row: 2/4;
}

.blueInfo{
    background: radial-gradient(rgb(148,215,229), rgba(148,215,229,0.8));
}

.blueInfo,
.pinkInfo,
.whiteInfo,
.yellowInfo{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    min-width: 300px;
    max-width: 450px;
    max-height: 80vh;
    width: 50%;
    padding: 50px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1em;
    text-align: center;
    z-index: 9030;
    border: solid 1px #00000034;
    -webkit-box-shadow: 3px 3px 5px #2222225d;
            box-shadow: 3px 3px 5px #2222225d;
    display: none;
    color: black;
}

.blueBox,
.pinkBox,
.whiteBox,
.yellowBox{
    border: solid 1px #00000034;
    width: 100%;
    height: 100%;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
}

.closeInfo,
.closeTable{
    position: absolute;
    right: 20px;
    top: 20px;
    background-color:rgba(255, 255, 255, 0.356);
    border-style: solid;
    border-color:#bebebe;
    border-width: 1px;
    -webkit-box-shadow: 1px 1px 3px grey;
            box-shadow: 1px 1px 3px grey;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    z-index: 999;
}

.closeInfo:hover{
    border-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.1);
}

.elementContainer{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width:15.6%;
    position: absolute;
    top:45px;
    left:0;
    z-index:2;
    min-width:95px;
    color:black;
}

.helpInfo{
    color: #920000;
    grid-column: 1/-1;
}

.iconText{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.darkMode .iconText{
    color: rgb(210,210,210);
}

input{
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    width:100%;
    height:100%;
    min-width: 40px;
}

.darkMode input{
    background-color: #646464;
    color: rgb(210,210,210);
}

.leftAlign{
    text-align: left;
}

main{
    position:relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.periodicLegend{
    grid-column: 1/10;
    grid-row: 4/5;
    background-color: transparent;
    font-size: 2.4vw;
    border: none !important;
}

.periodicTableContainer{
    margin-top:1em;
    width: 100%;
    height: 1px; /* terrible hack to address safari bug, keeps the table entries from snapping to auto height*/ 
    padding-bottom:66%;/* sets the aspect ratio of the table */
    position:absolute;
    display: none;
    top:25px;
    left:0;
    background: -webkit-gradient(linear,left top, left bottom,from(#d3d3d3de),to(rgba(255, 255, 255, 0.596)));
    background: linear-gradient(#d3d3d3de,rgba(255, 255, 255, 0.596));
    z-index:100;
}

.darkMode .periodicTableContainer{
    background: -webkit-gradient(linear,left top, left bottom,from(#212121ec),to(#424242cb));
    background: linear-gradient(#212121ec,#424242cb);
}

.periodicTableIconContainer{
    /* max-width:150px; */
    max-width: 150px;
    /* max-height: 86px; */
    width:100%;
    /* padding-bottom:57.3%; */
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    position: relative;
    /* padding-bottom:10%;sets the aspect ratio of the table */
}

.periodicTableIconContainer:hover{
    -webkit-box-shadow: 3px 3px 5px #2222225d;
            box-shadow: 3px 3px 5px #2222225d;
    background: radial-gradient(#03b9ab, #03b9aa09);
    border-radius: 3px;
}

.periodicTable{
    position:absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    display: grid;
    width: 100%;
    padding: 1px;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -ms-flex-line-pack:center;
        align-content:center;
    grid-template-columns: repeat(18,1fr);
    grid-template-rows: repeat(10,1fr);
    grid-gap: 1px;
    /* overflow:hidden; */
}

.periodicTableIcon{
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    display: grid;
    grid-template-columns: repeat(18,1fr);
    grid-template-rows: repeat(10,1fr);
    grid-gap: 1px;
}

.periodicTable{
    padding: 7%;
    z-index:10;
}

.periodicTableIcon{
    padding:4px;
}

.periodicTable > div,
.periodicTableIcon > div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    border: solid 1px #00000034;
    /* overflow: hidden; */
    position: relative;
    width:100%;
    height: 100%;
    justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-shadow: 3px 3px 5px #2222225d;
            box-shadow: 3px 3px 5px #2222225d;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.periodicTable > .colorDescriptionBox{
    border-width: .1em;
    border-style: solid;
    display: grid;
    grid-template-columns: repeat(9,1fr);
    grid-template-rows: repeat(4,1fr);
    grid-gap: 1px;
    overflow: hidden;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    background-color: #ddd;
    background-color: #00000011;
}

.pieChart{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow:visible;
    width: 100%;
    height:0;
    padding-bottom:100%;
    position:relative;
}

.pieChartContainer{
    width:50%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position:relative;
    z-index: 0;
    margin-top:70px;
    margin-bottom: 35px;
}

/* .pieChartContainer:after{
    display:block;
    padding-bottom:100%;
    content:"";
} */

#drawnPieChart{
    /* position:absolute; */
    /* box-sizing: border-box; */
    /* width:400px;
    height:400px;
    display: inline-block; */
    /* top:0; */
    /* left:0; */
} 


.pieColor0>span{
    background: rgba(20,30,237,1);
}
.pieColor1>span{
    background: rgba(0,255,255,1);
}
.pieColor2>span{
    background: rgba(51,204,51,1);
}
.pieColor3>span{
    background: rgba(255,0,0,1);
}
.pieColor4>span{
    background: rgba(255,0,255,1);
}
.pieColor5>span{
    background: rgba(153,0,204,1);
}
.pieColor6>span{
    background: rgba(255,102,0,1);
}
.pieColor7>span{
    background: rgba(255,153,204,1);
}
.pieColor8>span{
    background: rgba(102,51,51,1);
}
.pieColor9>span{
    background: rgba(204,204,255,1);
}


.pink,
.pinkBox,
.pinkFill{
    background-color: rgb(255,153,204);
}

.pinkBox{
    grid-column: 2/3;
    grid-row: 2/4;
}

.pinkInfo{
    background: radial-gradient(rgb(255,153,204), rgba(255,153,204,0.8));
}

.relativeAbundance{
    position:absolute;
    right:0;
    top:45px;
    display: grid;
    grid-gap:0.2em;
    grid-template-columns: auto 120px;
    color:black;
}

    .header{
        background: #b8d2db;
        font-weight: bold;
        padding:0.3em;
    }

    .leftColumn{
        grid-column:1/2;
    }    

    .tableFill{
        background: #d8f2fb;
        padding:0.3 em;
        padding-right:0.5em;
        padding-left: 0.5em;
    }

    .rightColumn{
        grid-column:2/3;
    } 

    .darkMode .leftColumn{
        background: #424242;
        color: rgb(210,210,210);
    }

    .darkMode .header{
        background: #007068;
        color: rgb(210,210,210);
    }   

.relativeAbundance>div{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
        -ms-flex-pack:end;
            justify-content:flex-end;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    font-size:0.7em;

}

.relativeAbundance>div>span{
    width:1em;
    height:1em;
    display:block;
    border-radius:1em;
    margin-right:0.5em;
    /* margin-left:0.5em; */
}

.selectedElementContainer{
    /* position */
    /* background: purple; */
    border: black;
    border-width: 0.4vw;
    border-style: solid;
    max-width: 150px;
    max-height: 150px;
    width:100%;

    margin:5px;
}

/* .selectedElement{
    
} */

.selectedSymbol{
    font-weight: bold;
    font-size: 6.5vw;
    margin:0;
    padding:0;
}

.selectedName{
    font-size: 1.2vw;
}

.selectedWeight{
    font-size:1.4vw;
    padding-top:0.4vw;
    padding-bottom:1vw;
}

svg{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
}

.white,
.whiteBox,
.whiteFill{
    background-color: white;
}

.whiteBox{
    grid-column: 8/9;
    grid-row: 2/4;
}

.whiteInfo{
    background: radial-gradient(white, rgba(255, 255, 255, 0.8));
}

.yellow,
.yellowBox,
.yellowFill{
    background-color: rgb(247,216,87);
}

.yellowBox{
    grid-column: 4/5;
    grid-row: 2/4;
}

.yellowInfo{
    background: radial-gradient(rgb(247,216,87), rgba(247,216,87,0.8));
}

/* ********************** Media Queries ************************************************ */
@media screen and (min-width:1000px) {
    .atomicSymbol{
        font-size:1.4em;
    }
    
    .atomicSymbolIcon{
        font-size:0.2em;
    }

    .atomicNumber{
        font-size:0.7em;
    }

    .periodicLegend{
        font-size: 1.4em;
    }

    .selectedElementContainer{
        border-width:0.2em;
    }

    .selectedSymbol{
        font-size:4em;
    }

    .selectedName{
        font-size:0.7em;
    }

    .selectedWeight{
        font-size:0.8em;
    }
}

@media screen and (max-width:690px) {
    /* .atomicSymbol{
        font-size:1.4em;
    } */
    
    .atomicSymbolIcon{
        font-size:0.1em;
    }

    /* .atomicNumber{
        font-size:0.7em;
    } */

    /* .periodicLegend{
        font-size: 1.4em;
    } */

    .selectedElementContainer{
        border-width:0.14em;
    }

    .selectedSymbol{
        font-size:2.8em;
    }

    .selectedName{
        font-size:0.49em;
    }

    .selectedWeight{
        font-size:0.56em;
    }
}

@media screen and (max-width:500px) {
    .atomicWeight{
        margin-bottom:0;
    }

    .closeTable{
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        top:-5px;
    }

    .elementContainer{
        width:245px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        position: relative;
        top:0;
    }

    .pieChartContainer{
        width:100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .periodicTable{
        top:25px;
    }

    .periodicTableContainer{
        top:130px;
        padding-bottom: 75%;
    }

    .periodicTableIconContainer{
        /* width:50%; */
        width:135px;
        /* max-height: none; */
        /* padding-bottom: 21%; */
    }

    .relativeAbundance{
        width:100%;
        position: relative;
        top:0;
        margin-top:10px;
        grid-template-columns: 1fr 1fr;
    }

    .selectedElementContainer{
        width:50%;
        max-width:105px;
        margin-right:4px;
    }
}

/* ********************** Elements By Column ************************************************ */


/* Group 1 entries */
.H, .Li, .Na, .K, .Rb, .Cs, .Fr{
    grid-column: 1/2;
}
/* Group 2 entries */
.Be, .Mg, .Ca, .Sr, .Ba, .Ra{
    grid-column: 2/3;
}
/* Group 3 entries */
.Sc, .Y{
    grid-column: 3/4;
}
/* Group 4 entries */
.Ti, .Zr, .Hf, .Rf, .La, .Ac{
    grid-column: 4/5;
}
/* Group 5 entries */
.V, .Nb, .Ta, .Db, .Ce, .Th{
    grid-column: 5/6;
}
/* Group 6 entries */
.Cr, .Mo, .W, .Sg, .Pr, .Pa{
    grid-column: 6/7;
}
/* Group 7 entries */
.Mn, .Tc, .Re, .Bh, .Nd, .U{
    grid-column: 7/8;
}
/* Group 8 entries */
.Fe, .Ru, .Os, .Hs, .Pm, .Np{
    grid-column: 8/9;
}
/* Group 9 entries */
.Co, .Rh, .Ir, .Mt, .Sm, .Pu{
    grid-column: 9/10;
}
/* Group 10 entries */
.Ni, .Pd, .Pt, .Ds, .Eu, .Am{
    grid-column: 10/11;
}
/* Group 11 entries */
.Cu, .Ag, .Au, .Rg, .Gd, .Cm{
    grid-column: 11/12;
}
/* Group 12 entries */
.Zn, .Cd, .Hg, .Cn, .Tb, .Bk{
    grid-column: 12/13;
}
/* Group 13 entries */
.B, .Al, .Ga, .In, .Tl, .Nh, .Dy, .Cf{
    grid-column: 13/14;
}
/* Group 14 entries */
.C, .Si, .Ge, .Sn, .Pb, .Fl, .Ho, .Es{
    grid-column: 14/15;
}
/* Group 15 entries */
.N, .P, .As, .Sb, .Bi, .Mc, .Er, .Fm{
    grid-column: 15/16;
}
/* Group 16 entries */
.O, .S, .Se, .Te, .Po, .Lv, .Tm, .Md{
    grid-column: 16/17;
}
/* Group 17 entries */
.F, .Cl, .Br, .I, .At, .Ts, .Yb, .No{
    grid-column: 17/18;
}
/* Group 18 entries */
.He, .Ne, .Ar, .Kr, .Xe, .Rn, .Og, .Lu, .Lr{
    grid-column: 18/19;
}


/* ************************* Elements By Row ***********************************************8 */
/* Row 1 Entries */
.H, .He{
    grid-row: 1/2;
}

/* Row 2 Entries */
.Li, .Be, .B, .C, .N, .O, .F, .Ne{
    grid-row: 2/3;
}
/* Row 3 Entries */
.Na, .Mg, .Al, .Si, .P, .S, .Cl, .Ar{
    grid-row: 3/4;
}
/* Row 4 Entries */
.K, .Ca, .Sc, .Ti, .V, .Cr, .Mn, .Fe, .Co, .Ni, .Cu, .Zn, .Ga, .Ge, .As, .Se, .Br, .Kr{
    grid-row: 4/5;
}
/* Row 5 Entries */
.Rb, .Sr, .Y, .Zr, .Nb, .Mo, .Tc, .Ru, .Rh, .Pd, .Ag, .Cd, .In, .Sn, .Sb, .Te, .I, .Xe{
    grid-row: 5/6;
}
/* Row 6 Entries */
.Cs, .Ba, .Hf, .Ta, .W, .Re, .Os, .Ir, .Pt, .Au, .Hg, .Tl, .Pb, .Bi, .Po, .At, .Rn{
    grid-row: 6/7;
}
/* Row 7 Entries */
.Fr, .Ra, .Rf, .Db, .Sg, .Bh, .Hs, .Mt, .Ds, .Rg, .Cn, .Nh, .Fl, .Mc, .Lv, .Ts, .Og{
    grid-row: 7/8;
}
/* Row 8 Entries */
.blank{
    grid-row: 8/9;
}
/* Row 9 Entries */
.La, .Ce, .Pr, .Nd, .Pm, .Sm, .Eu, .Gd, .Tb, .Dy, .Ho, .Er, .Tm, .Yb, .Lu{
    grid-row: 9/10;
}
/* Row 10 Entries */
.Ac, .Th, .Pa, .U, .Np, .Pu, .Am, .Cm, .Bk, .Cf, .Es, .Fm, .Md, .No, .Lr{
    grid-row: 10/11;
}

#colorDescriptionBox{
    grid-column:4/12;
    grid-row: 1/3;
}