/*
 easyChem CSS file
*/
/* Periodic system table */
.mentable { border-collapse:collapse; margin-top:5px; line-height:1;}
.mentable td { text-align:center; padding:5px 2px;}
.mentable td.chem-element { width:4em; max-width:4em; border:1px #000 solid; }
.mentable td.chem-row { border-top:1px #000 solid; border-bottom:1px #000 solid;}
.mentable td.chem-cell { border:1px #000 solid; }
.mentable td.chem-cell.noleft {border-left:none;}
.mentable td.chem-cell.noright {border-right:none;}
.mentable td.group-id { vertical-align:bottom;}
.mentable td.period-id { vertical-align:center; border:1px #000 solid;}
.mentable-text {font-size:12px;}
.mentable-subgroup-hd {vertical-align:bottom; height:100%; font-size:12px;}
.mentable-subgroup-hd .left {float:left; margin-left:0.5em;}
.mentable-subgroup-hd .right {float:right; margin-right:0.5em;}
.chem-element .number { float:left; font-size:12px;}
.chem-element.subgr_b .number { float:right;}
.chem-element .id { font-weight:bold; }
.chem-element.subgr_a .id { float:right; margin-right:0.5em;}
.chem-element.subgr_b .id { float:left; margin-left:0.5em;}
.chem-element .name { font-size:10px; color:#555; font-family:Arial; clear:both;}
.chem-element .mass { font-size:12px; color:#777;}


.chem-element.s_block { background-color:#FCF;}
.chem-element.p_block { background-color:#FFC;}
.chem-element.d_block { background-color:#CCF;}
.chem-element.f_block { background-color:#CFC;}

/* colors from wikipedia */
.chem-element.Alkali-metals { background-color:#F66;}
.chem-element.Alkaline-earth-metals { background-color:#FFDEAD;}
.chem-element.Lanthanides {background-color:#FFBFFF;}
.chem-element.Actinides {background-color:#F9C;}
.chem-element.Transition-metals { background-color:#FFC0C0;}
.chem-element.Post-transition-metals {background-color:#CCC;}
.chem-element.Metalloids {background-color:#CC9;}
.chem-element.Other-nonmetals {background-color:#A0FFA0;}
.chem-element.Halogens {background-color:#FF9;}
.chem-element.Noble-gases {background-color:#C0FFFF;}
.chem-element.Unknown-props {background-color:#E8E8E8;}

/* Easy chemistry style https://chemistry-easy.ru/ */
.easy-chem-table { color: #231a1d; }
.easy-chem-table .chem-element.s_block { background-color: #d2748e;}
.easy-chem-table .chem-element.p_block { background-color: #f6dd5f;}
.easy-chem-table .chem-element.d_block { background-color: #7fc1db;}
.easy-chem-table .chem-element.f_block { background-color: #c3d9b3;}
.easy-chem-table .chem-element.f2_block { background-color: #9cbd86;}
.easy-chem-table .chem-element .element-box .id { grid-area: id; font-size: 150%; font-weight: 200; text-align: left; }
.easy-chem-table .element-box .number { grid-area: number; font-size: 105%; text-align: right; }
.easy-chem-table .element-box .name { grid-area: name; font-size: 58%; text-align: left; color: inherit; }
.easy-chem-table .element-box .mass { grid-area: mass; font-size: 85%; text-align: left; color: inherit; padding: 2px 0;}
.easy-chem-table .element-box {
    display: grid;
    grid-template-areas:
        "id number"
        "mass mass"
        "name name";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
}
.easy-chem-table .chem-element.mtbl-note { width: auto; }

.echem-formula {font-family: Cambria, Times, Serif}
.echem-formula b {font-weight: normal; padding-right: 0.15em;}
.echem-formula i, .echem-formula em {font-style: normal;}
.echem-comment {color:blue;}
.echem-opcomment { font-size:80%; display:block;}
.echem-op {display:inline-block; text-align:center; line-height:0.8; vertical-align: middle;}
/* atom charge. over atom id */
.echem-item-charge {
    display: inline-block;
    font-size: 0.7em;
    left: -0.7em;
    position: relative;
    top: -0.5em;
    width: 0.1em;
    white-space: nowrap;
}
/* Atomic mass and number of the left of the element. Example: $nM(16)O*/
.echem-mass-and-num
{
    display:inline-block;
    margin-bottom:-0.3em;
    vertical-align:-0.4em;
    line-height:1.2em;
    font-size:70%;
    text-align:right;
    letter-spacing: -0.05em;
}
.chem-long-arrow {
    display: inline-block;
    text-align: center;
    width: 3em;
    transform: scaleX(3);
    font-family: Times, serif;
}