/* main Peridic table */

.main{
    //--scale: 0.80;
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 4%;
    //transform: scale( var(--scale) );
    //margin-bottom: calc((var(--scale) - 0.70) * 100%);
    //margin-top: calc((var(--scale) - 0.71) * 100%);
    margin-top: -3%;
    margin-bottom: -3%;
    margin-left: -3%;
    margin-right: -3%;
    top: 0;
    z-index: 2;
    //container-type: inline-size;

}

.main>input {
    -webkit-appearance: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.periodic-table {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(18, 1fr );
}

.periodic-table .element {
    position: relative;
    font-size: clamp(.3vw, .4vw, .5vw,);//0.5vw;
    padding-bottom: 100%;
    cursor: pointer;
    color: #fff;
    transition: 500ms;
}

.periodic-table .element .square {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #FFE4B5;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition-property: transform, z-index, left, right, top, bottom;
    transition-duration: 100ms, 0ms, 200ms, 200ms, 200ms, 200ms;
    transition-delay: 0ms, 100ms, 0ms, 0ms, 0ms, 0ms;
    border-radius: 5px;
}

.periodic-table .element:hover .square {
    transform: scale(2.5);
    transition: transform 500ms;
    z-index: 2;

}

.periodic-table .element.active .square {
    border: 4px solid red;//#FF00FF;
}

.periodic-table .element .atomic-number {
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px;
    color: #ffffff;
    font-size: 0.6vw;
}

.periodic-table .element .label {
    padding-top: 1px;
    text-align: center;
    transition: 200ms;
    line-height: 1.1;
}

.periodic-table .element .symbol {
    font-size: 1.15vw;
    color: #ffffff;
    padding-top: -5px;
}

.periodic-table .element .name {
 padding-top: 2px;
    font-size: 0.40vw;
    color: #ffffff;
}

.periodic-table .element .atomic-weight {
    position: absolute;
    top: 62%;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 20%;
    padding-bottom: 10%;
    text-align: center;
    opacity: 0;
    color: #FFFF00;
    transition: opacity 0.3s ease, padding 0.3s ease;
    font-size: .3vw;
}

.periodic-table .element:hover .atomic-weight {

    opacity: 1;
}

.periodic-table .element .atomic-mass {
    position: absolute;
    right: 0;
    top: 0;
    list-style: none;
    margin: 0;
    padding: 2px;
    opacity: 1;
    text-align: right;
    color: #ffffff;
     font-size: .5vw;
}

.periodic-table .element input[type=radio] {
    -webkit-appearance: none;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    outline: none;
}

.periodic-table .placeholder {
    position: relative;
    z-index: -1;
    font-size: 1vw;
    padding-bottom: 100%;
    color: #fff;
    transition: 500ms;
}

.periodic-table .placeholder .square {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid black;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    color: #ffffff;
    border-radius: 5px;
}

.periodic-table .gap {
    position: relative;
    padding-bottom: 25%;
    transition: 500ms;
}

.periodic-table .gap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 50%;
    height: calc(500% + 5px * 2 - 4px);
    border-width: 0 0 2px 2px;
    border-style: solid;
    margin-left: -1px;
    color: #000000;
    opacity: 0.7;
}

.periodic-table .alkali-metal {
    color: #224D56;
}

.periodic-table .alkali-metal .square {
    background-color: #224D56;
}

.periodic-table .alkaline-earth-metal {
    color: #622C39;
}

.periodic-table .alkaline-earth-metal .square {
    background-color: #622C39;
}

.periodic-table .transition-metal {
    color: #423B64;
}

.periodic-table .transition-metal .square {
    background-color: #423B64;
}

.periodic-table .post-transition-metal {
    color: #2F4C47;
}

.periodic-table .post-transition-metal .square {
    background-color: #2F4C47;
}

.periodic-table .metalloid {
    color: #513D1A;
}

.periodic-table .metalloid .square {
    background-color: #513D1A;
}

.periodic-table .other-nonmetal {
    color: #2A4163;
}

.periodic-table .other-nonmetal .square {
    background-color: #2A4163;
}

.periodic-table .noble-gas {
    color: #623842;
}

.periodic-table .noble-gas .square {
    background-color: #623842;
}

.periodic-table .lanthanoid {
    color: #026BAA;
}

.periodic-table .lanthanoid .square {
    background-color: #026BAA;
}

.periodic-table .actinoid {
    color: #603B28;
}

.periodic-table .actinoid .square {
    background-color: #603B28;
}

.periodic-table .unknown {
    color: #47464B;
}

.periodic-table .unknown .square {
    background-color: #47464B;
}

.r1 {
    grid-row: 1;
}

.r2 {
    grid-row: 2;
}

.r3 {
    grid-row: 3;
}

.r4 {
    grid-row: 4;
}

.r5 {
    grid-row: 5;
}

.r6 {
    grid-row: 6;
}

.r7 {
    grid-row: 7;
}

.r8 {
    grid-row: 8;
}

.r9 {
    grid-row: 9;
}

.r10 {
    grid-row: 10;
}

.c1 {
    grid-column: 1;
}

.c2 {
    grid-column: 2;
}

.c3 {
    grid-column: 3;
}

.c4 {
    grid-column: 4;
}

.c5 {
    grid-column: 5;
}

.c6 {
    grid-column: 6;
}

.c7 {
    grid-column: 7;
}

.c8 {
    grid-column: 8;
}

.c9 {
    grid-column: 9;
}

.c10 {
    grid-column: 10;
}

.c11 {
    grid-column: 11;
}

.c12 {
    grid-column: 12;
}

.c13 {
    grid-column: 13;
}

.c14 {
    grid-column: 14;
}

.c15 {
    grid-column: 15;
}

.c16 {
    grid-column: 16;
}

.c17 {
    grid-column: 17;
}

.c18 {
    grid-column: 18;
}

.periodic-table .key {
    position: relative;
    z-index: 1;
    grid-row: 1;
    grid-column-start: 3;
    grid-column-end: 18;
    font-size: 0.8vw;
    line-height: 2.0;
    display: flex;
    align-items: center;
    pointer-events: none;
    user-select: none;
    margin-right: 2%;
    margin-left: 2%;
    justify-content: space-evenly;
}

.periodic-table .key .row {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    font-weight: bolder;
    font-size: clamp(.7vw, .71vw, .72vw);//0.85vw;
}

.periodic-table .key .row label {
    opacity: 0.4;
    cursor: pointer;
    transition: 120ms;
    pointer-events: all;
    margin-right: 0.7%;
    margin-left: 0.7%;
}


.periodic-table .key .row label:hover {
    opacity: 1 !important;
    transform: scale(2.0);
    cursor: pointer;
}

.periodic-table > .selection-mode {
    position: relative;
    z-index: 1;
    grid-row: 3;
    grid-column-start: 4;
    grid-column-end: 12;
    font-size: 0.8vw;
    line-height: 1.0;
    display:flex;
    align-items: start;
    pointer-events: click;
    user-select: none;
    justify-content: center;
}



.periodic-table > .selection-mode > .pt-radio-item > .radioButton {

  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #07d533;
  border-radius: 9999px;
  cursor: pointer;
}

.periodic-table > .selection-mode > .pt-radio-item > .radioButton:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 9999px;
  background-color: #07d540;

}

.periodic-table > .selection-mode > .pt-radio-item {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.periodic-table > .selection-mode > .pt-radio-item:hover {
  //opacity: 1 !important;
    transform: scale(1.3);
    cursor: pointer;transition: 120ms;
}


.periodic-table > .selection-mode > .pt-radio-item:not(:last-of-type) {
  margin-right: 25px;
}

#alkali-metals:checked~.periodic-table .element:not(.alkali-metal),
#alkaline-earth-metals:checked~.periodic-table .element:not(.alkaline-earth-metal),
#lanthanoids:checked~.periodic-table .element:not(.lanthanoid),
#actinoids:checked~.periodic-table .element:not(.actinoid),
#transition-metals:checked~.periodic-table .element:not(.transition-metal),
#post-transition-metals:checked~.periodic-table .element:not(.post-transition-metal),
#metalloids:checked~.periodic-table .element:not(.metalloid),
#other-nonmetals:checked~.periodic-table .element:not(.other-nonmetal),
#noble-gasses:checked~.periodic-table .element:not(.noble-gas),
#unknown:checked~.periodic-table .element:not(.unknown),
#alkali-metals:checked~.periodic-table .placeholder,
#alkaline-earth-metals:checked~.periodic-table .placeholder,
#lanthanoids:checked~.periodic-table .placeholder:not(.lanthanoid),
#actinoids:checked~.periodic-table .placeholder:not(.actinoid),
#transition-metals:checked~.periodic-table .placeholder,
#post-transition-metals:checked~.periodic-table .placeholder,
#metalloids:checked~.periodic-table .placeholder,
#other-nonmetals:checked~.periodic-table .placeholder,
#noble-gasses:checked~.periodic-table .placeholder,
#unknown:checked~.periodic-table .placeholder {
    opacity: 0.15;
    pointer-events: none;
}

#alkali-metals:checked~.periodic-table .key label:not(.alkali-metal),
#alkaline-earth-metals:checked~.periodic-table .key label:not(.alkaline-earth-metal),
#lanthanoids:checked~.periodic-table .key label:not(.lanthanoid),
#actinoids:checked~.periodic-table .key label:not(.actinoid),
#transition-metals:checked~.periodic-table .key label:not(.transition-metal),
#post-transition-metals:checked~.periodic-table .key label:not(.post-transition-metal),
#metalloids:checked~.periodic-table .key label:not(.metalloid),
#other-nonmetals:checked~.periodic-table .key label:not(.other-nonmetal),
#noble-gasses:checked~.periodic-table .key label:not(.noble-gas),
#unknown:checked~.periodic-table .key label:not(.unknown) {
    opacity: 0.15;
}

#alkali-metals:checked~.periodic-table .key label,
#alkaline-earth-metals:checked~.periodic-table .key label,
#lanthanoids:checked~.periodic-table .key label,
#actinoids:checked~.periodic-table .key label,
#transition-metals:checked~.periodic-table .key label,
#post-transition-metals:checked~.periodic-table .key label,
#metalloids:checked~.periodic-table .key label,
#other-nonmetals:checked~.periodic-table .key label,
#noble-gasses:checked~.periodic-table .key label,
#unknown:checked~.periodic-table .key label {
    opacity: 1;
}

.main .category-toggle:not(#lanthanoids):not(#actinoids):checked~.periodic-table .gap {
    opacity: 0.5;
}

.main  .category-toggle:checked~.category-cancel {
    visibility: visible;
    pointer-events: all;
    cursor: pointer;
}