/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 16-Sep-2019, 13:37:25
    Author     : GriffithsM
*/

/*
CSS Grid container. grid-template-columns sets size (width) of each div 'cell' and defines no. columns.

vw and vh is view height/width as relative to the viewport.  Good for making elements shrink with browser window
*/
.grid-container {
    display: grid;
    clear: both;
    grid-gap: 3px;
    height: 100%;
    /*min-width: 750px;*/
    grid-template-columns: calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19) calc(100%/19);
    /*grid-template-rows: calc(100%/9) calc(100%/9) calc(100%/9) calc(100%/9) calc(100%/9) calc(100%/9) calc(100%/9) calc(100%/9) calc(100%/9);*/
    background-color: white;
    box-sizing: border-box;
}

@media (min-width: 2201px) {
    .grid-container{height: 1000px; width: 100%}
}

@media (min-width: 1601px) and (max-width: 2200px) {
    .grid-container{height: 800px; width: 100%}
}

@media (min-width: 1201px) and (max-width: 1600px) {
    .grid-container{height: 600px; width: 95%}
}

@media (min-width: 800px) and (max-width: 1200px) {
    .grid-container{height: 450px; width: 95%}
}


/* Default element div cell */
.element {
    background-color: lightgray;
    border: 2px solid lightgray;
    border-radius: .3vw;
    font-weight: bold;
    text-align: center;
}

.element:hover {opacity: 0.5; transition-duration: 1s;}

.elementDetail {
    background-color: goldenrod;
    border: 5px solid goldenrod;
    border-radius: .6vw;
    width: 8vw;
    height: 8vw;
    font-weight: bold;
    text-align: center;
}

/* height in % sets size of white inner box */
.symbol {
    background-color: white;
    border-radius: .25vw;
    height: 65%;
    font-size: calc(4px + 1.5vw);
}

.symbolDetail {
    background-color: white;
    border-radius: .55vw;
    height: 75%;
    font-size: calc(8px + 3vw);
}

.atomicno {
    font-size: calc(4px + .8vw);
}

.atomicnoDetail {
    font-size: calc(6px + 1.2vw);
}

.namePreview {
    font-size: 2vw;
    font-weight: bold;
}

.el_content {
    margin-left: auto ;
    margin-right: auto ;
    margin-top: auto;
    margin-bottom: auto;
}


.clearBoth {
    clear: both;
}

.ptRow {

}

/* These define the div 'cells' that are merged into larger divs.  The entire table is a rectangular grid with cutouts to create the PT. See www.w3schools.com/css/css_grid.asp*/
.aboveDBlock {
    grid-column-start: 3;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end:4;
    padding: 1vw;
}

.aboveDBlockSc {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end:4;
    padding: 1vw;
}

.aboveDBlockScMn {
    grid-column-start: 3;
    grid-column-end: 8;
    grid-row-start: 1;
    grid-row-end:4;
    padding: .2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.keyPanelGrid {
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboveDBlockFeCu {
    grid-column-start: 8;
    grid-column-end: 12;
    grid-row-start: 1;
    grid-row-end:4;
    border: 0.5vw solid palegoldenrod;
    background-color: palegoldenrod;
    border-radius: .4vw;
}

.aboveDBlockFeCuMain {
    background-color: white;
    border-radius: .35vw;
    padding: .3vw;
    height: 80%;
}

.otherPreview {
    font-size: calc(2px + .8vw);
}

@media (max-width: 1250px) {
    .aboveDBlockScMn {line-height: 0.8;}
    .aboveDBlockFeCu {line-height: 0.8;}
}

.atomicPreview {
    font-size: calc(12px + .8vw);
    text-align: right;
}

.aboveDBlockZn {
    grid-column-start: 12;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end:4;
    padding: 1vw;
}

.abovePBlock {
    grid-column-start: 13;
    grid-column-end: 18;
    grid-row-start: 1;
    grid-row-end:2;
}
.aboveFBlock {
    grid-column-start: 1;
    grid-column-end: 19;
    grid-row-start: 8;
    grid-row-end: 9;
    min-height: 20px;
}

.leftFBlock {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 9;
    grid-row-end: 11;
}

.rightFBlock {
    grid-column-start: 17;
    grid-column-end: 19;
    grid-row-start: 9;
    grid-row-end: 11;
}

/* Highlighting colours */
.sBlock {background-color: #ff8484 !important; border: 2px solid #ff8484 !important;}
.pBlock {background-color: #b0be6e !important; border: 2px solid #b0be6e !important;}
.dBlock {background-color: #84c2ff !important; border: 2px solid #84c2ff !important;}
.fBlock {background-color: #ffc184 !important; border: 2px solid #ffc184 !important;}

.group1 {background-color: #dd776e; border: 2px solid #dd776e;}
.group2 {background-color: #e2886c; border: 2px solid #e2886c;}
.group3 {background-color: #e79a69; border: 2px solid #e79a69;}
.group4 {background-color: #ecac67; border: 2px solid #ecac67;}
.group5 {background-color: #e9b861; border: 2px solid #e9b861;}
.group6 {background-color: #f5ce62; border: 2px solid #f5ce62;}
.group7 {background-color: #d4c86a; border: 2px solid #d4c86a;}
.group8 {background-color: #b0be6e; border: 2px solid #b0be6e;}
.group9 {background-color: #94bd77; border: 2px solid #94bd77;}
.group10 {background-color: #73b87e; border: 2px solid #73b87e;}
.group11 {background-color: #57bb8a; border: 2px solid #57bb8a;}
.group12 {background-color: #57bbb1; border: 2px solid #57bbb1;}
.group13 {background-color: #57b1bb; border: 2px solid #57b1bb;}
.group14 {background-color: #579dbb; border: 2px solid #579dbb;}
.group15 {background-color: #5789bb; border: 2px solid #5789bb;}
.group16 {background-color: #787fc7; border: 2px solid #787fc7;}
.group17 {background-color: #9983cb; border: 2px solid #9983cb;}
.group18 {background-color: #c483cb; border: 2px solid #c483cb;}

.period1 {background-color: #ff7070; border: 2px solid #ff7070;}
.period2 {background-color: #e79a69; border: 2px solid #e79a69;}
.period3 {background-color: #fff573; border: 2px solid #fff573;}
.period4 {background-color: #a4d784; border: 2px solid #a4d784;}
.period5 {background-color: #8a91fb; border: 2px solid #8a91fb;}
.period6 {background-color: #c06bff; border: 2px solid #c06bff;}
.period7 {background-color: #dd79dd; border: 2px solid #dd79dd;}

.lanthanides {background-color: orange; border: 2px solid orange;}
.actinides {background-color: #f5ce62; border: 2px solid #f5ce62;}

.metal {background-color: orange !important; border: 2px solid orange;}
.metalloid {background-color: #b0be6e !important; border: 2px solid #b0be6e;}
.nonmetal {background-color: #c483cb !important; border: 2px solid #c483cb;}
.metunknown {background-color: lightgray !important; border: 2px solid lightgray;}

.natOccuring {background-color: #929945 !important; border: 2px solid #929945;}
.rareOccuring {background-color: #d9dcb2 !important; border: 2px solid #d9dcb2;}
.synthetic {background-color: lightgray !important; border: 2px solid lightgray;}

.fadeElement {background-color: lightgray !important; border: 2px solid lightgray; color: gray;}

.panelSubheader td {
    /*color: #185A88 !important;*/
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    text-align: center;
    padding: 4px 10px;
    font-size: 20pt;
    font-weight: 700;
}

/*.panelSubheaderText {*/
/*    color: #185A88 !important;*/
/*}*/

.padding-sm .ui-panelgrid-cell {padding: 4px 10px !important;}


/*!* Customised from sentinel css. Make mobile menu appear at larger px *!*/
/*@media (min-width: 850px) { !*Chrome bug: change back to 1201 when v.64 is released*!*/
/*    #layout-menubar {*/
/*        width:260px;*/
/*        border-right: solid 1px #272727;*/
/*    }*/

/*    #layout-menubar.slimmenu {*/
/*        width:2.5rem;*/
/*    }*/
/*}*/

/*@media (min-width: 850px) { !*Chrome bug: change back to 641 when v.64 is released*!*/
/*    #sm-topmenu li,*/
/*    #sm-topmenu li.active-topmenuitem{*/
/*        height: 34px;*/
/*    }*/

/*    #layout-menubar.layout-menubar-open-fullscr{height:auto; overflow-y:visible; max-height:auto;}*/
/*    #layout-menubar.layout-menubar-open-fullscr li{width:100%;}*/

/*    body.OvHidden {*/
/*        overflow: visible;*/
/*    }*/
/*}*/
/*!*Chrome bug: reinstate 536 - 564 once v.64 is released*!*/
/*!*@media (min-width: 641px) and (max-width: 1200px) {*/
/*    #buttonArea {*/
/*    display: none;*!*/
/*!* display: block; *!*/
/*!*   }*!*/

/*!* Slim Search *!*/
/*!*  #searchArea{width:48px}*/
/*  #searchArea:hover{position:relative; background-color: #303030; width:280px !important; }*/
/*  #searchArea:hover input{display:inline-block !important;}*/
/*  #searchArea i{margin-left: 6px; margin-right:13px;}*/
/*  #searchArea:hover i{color:#FFD100;}*/
/*  #searchArea:hover input{border-bottom:0px; margin-bottom: -1px;}*/
/**!*/
/*!* Slim Menu *!*/
/*!* megan  #layout-menubar{width:50px; z-index: 99999999 !important;}*!*/
/*!* #layout-menubar{width:50px; z-index: 997 !important;}*/
/* #layout-menubar .layout-menubarinner-box{padding:10px 9px;}*/
/* #layout-menubar #layout-menubar-resize{float:left;}*/
/* #layout-menubar .layout-menubar-container{width:48px;}*/
/* #layout-menubar .layout-menubarinner-box{width:48px;}*/
/* #layout-menubar .layout-menubarinner-box input{display:none;}*/
/* #layout-menubar .layout-menubar-container>li{height:25px; overflow:hidden;}*/
/* #layout-menubar .layout-menubar-container>li:hover{position:relative; width:330px; min-height:25px !important; height:auto;}*/
/* #layout-menubar li a{width:300px; border-bottom: 1px solid #4D4D4D;}*/
/* #layout-menubar li a:hover{color:#FFD100; padding-left:25px;}*/
/* #layout-menubar li:hover a{display:block; width:auto;}*/
/* #layout-menubar .layout-menubar-container li a .i{ margin-right:20px;}*/
/*}*!*/

/*!* Landscape phone to portrait tablet *!*/
/*@media (max-width: 849px) { !*Chrome bug: change back to 640 when v.64 is released*!*/
/*    #layout-logo{margin:15px 2%;}*/
/*    !* Megan     #layout-menubar, .slimmenu{position:fixed; background-color: #3D3D3D; width:100%; min-height:50px !important; max-height:50px; overflow:hidden; z-index:99999999;}*!*/
/*    #layout-menubar, .slimmenu{position:fixed; background-color: #3D3D3D; width:100%; min-height:50px !important; max-height:50px; overflow:hidden; z-index:997;}*/
/*    .layout-menubar-container{width:100%;}*/
/*    #layout-menubar-resize{display:none;}*/
/*    #layout-menubar-resize2{display:inline-block;}*/
/*    #buttonArea{width:auto; padding:1% 2%; float:right;}*/
/*    .layout-menubar-container{margin-top: 55px;}*/
/*    .layout-menubar-search{border-bottom:none;}*/

/*    #sm-topmenu{padding:0px; width:50%; max-height:80%; position:fixed; top:20px; padding:14px; display: none;*/
/*        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);*/
/*        border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;*/
/*        background-image:url(""); background-repeat:no-repeat; background-position:right top;}*/
/*    #sm-topmenu>li{width:100%; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; margin:0px; border-bottom:solid 1px #083359; min-height:47px; height:47px; font-size:11px; overflow:hidden;}*/
/*    #sm-topmenu>li>i{font-size:20px; overflow:hidden; margin:10px 0px; display:block;}*/
/*    #sm-topmenu>li .alertBubble{ margin:-20px 0px 0px 10px; right: 52%;}*/

/*    #sm-topmenu>li ul{width:auto; position: static; display: block; height: auto; margin: 0px; padding: 0px; webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; top:0; right:0;*/
/*        border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;}*/
/*    #sm-topmenu.DispBlock {*/
/*        display: block;*/
/*        overflow-y: auto;*/
/*    }*/

/*    #sm-topmenu li.active-topmenuitem {*/
/*        height: auto;*/
/*    }*/

/*    #layout-portlets-cover{padding-top:110px;}*/

/*    !* LOGIN *!*/
/*    .login-back{ background-size: 100%; background-position: -200px;}*/
/*    #login-logo{ line-height: 26px;}*/
/*    #login-logo span{font-size: 26px !important;}*/
/*    #login-logo img{ height:26px;}*/
/*    .TabBtn{ font-size: 16px;}*/
/*    #login-box input[type="text"]{border: solid 1px #C0C5C7; padding: 10px !important; box-shadow: none; color:#0A86B4 !important; text-align: center; font-size: 16px;}*/
/*    #login-box .ui-button{border:none !important; box-shadow: none; width:90%;}*/
/*    #login-box .ui-button .ui-button-text{padding:12px !important; font-size: 16px !important;}*/

/*    #sm-mobiletopmenu {*/
/*        display: block;*/
/*    }*/

/*    #searchArea{width:auto !important; padding:2% !important; float:left !important;}*/
/*    .slimmenu #searchArea.layout-menubarinner-box input{display:inline-block;}*/
/*    #searchArea.slimsearch:hover{position:relative; background-color: transparent; width: auto;}*/
/*    #searchArea.slimsearch:hover input{display:inline-block !important;}*/
/*    #searchArea.slimsearch i{margin-left: 0px; margin-right:0px;}*/
/*    #searchArea.slimsearch:hover i{color:#5A5A5A;}*/
/*}*/

/*.slimmenu .layout-menubar-container>li {*/
/*    height: 1.5rem;*/
/*}*/

/*End Sentinel customisation*/