:root {
  --lamoud-nonmetal-color: #a0ffa0;
  --lamoud-noble-color: #c0ffff;
  --lamoud-alkali-color: #ff6666;
  --lamoud-alkaline-color: #ffdead;
  --lamoud-metalloid-color: #cccc99; /*أشباه الفلزات*/
  --lamoud-halogen-color: #ffff99;/*هالوجينات*/
  --lamoud-poor-color: #cccccc;/*فلزات ضعيفة*/
  --lamoud-transition-color: #ffc0c0;/*فلزات انتقالية*/
  --lamoud-metal-color: #cccccc;
  --lamoud-lanthanoid-color: #ffbfff;
  --lamoud-actinoid-color: #ff99cc;
  --lamoud-Unknown-color: #e8e8e8;


  --lamoud-gas-color: red;
  --lamoud-solid-color: black;
  --lamoud-liquid-color: blue;
  --lamoud-unknownState-color: gray;

  --lamoud-frst-color: blue;

  --lamoud-menu-hover-color: #fdba31;
  --lamoud-bgcolor: #d8eefd;
  --lamoud-color: #4cb0f8;

}
*{
  box-sizing: border-box;
}

@font-face {
  font-family: Almarai;
  /*src: url(assets/fonts/Almarai-Regular.ttf);*/
}

body {
  margin: 0;
  padding: 0;
  background: var(--lamoud-bgcolor);
}

.lamoud-container {
  width: 100%;
  background: var(--lamoud-bgcolor);
  padding: 16px;    font-family: "Almarai";
  line-height: normal;
  word-break: keep-all;
}
.lamoud-preidec-table-container {
  width: calc(100% - 16px);
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  direction: initial;
  margin: 0 auto;
}
.lm-table-key-container {
  display: flex;
  flex-direction: row-reverse;
}

.lm-key-temp-val {
  display: flex;
  align-items: center;
  direction: rtl;
  padding: 4px;
}
.lm-key-temp-val span {
  margin-left: 16px;
}
.elem-temp-stats-txt {
  width: max-content;
}
.elem-temp-stats-key {
  border: 1px solid black;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  transition: 0.5s ease;
  cursor: pointer;
}
.lm-elem-status-background {
  display: flex;
  justify-content: space-around;
  margin: 16px 0;
}
.lm-radio-container.default-style {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #33a5f7;
  color: #fff;
  transition: 0.5s ease;
  opacity: 1;
  box-shadow: 0 3px 5px gray;
  font-weight: bold;
}
.lm-radio-container.default-style:hover {
  opacity: 0.8;
  box-shadow: 0 0 5px gray;
  font-weight: normal;

  
}

.lm-kes-container {
  position: absolute;
  right: -25px;
  font-size: 14px;
}
.lm-elem-status span {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  margin: 0 8px;
}
.lm-elem-status.liquid span {
  background: #3ea5e4;
}
.lm-elem-status.gas span {
  background: #abd950;
}
.lm-elem-status.solid span {
  background: #beeafd;
}
.lm-elem-status {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lm-key-temp-val.solidStat .elem-temp-stats-key,
.lm-key-temp-val.solidStat .elem-temp-stats-txt {
  color: black;
}
.lm-key-temp-val.solidStat .elem-temp-stats-key {
  background: #beeafd;
}
.lm-key-temp-val.solidStat .elem-temp-stats-key:hover {
  background: black !important;
  color: #fff;
}

.lm-key-temp-val.liquidStat .elem-temp-stats-key,
.lm-key-temp-val.liquidStat .elem-temp-stats-txt {
  color: blue;    
}
.lm-key-temp-val.liquidStat .elem-temp-stats-key{
  background: #3ea5e4;
}
.lm-key-temp-val.liquidStat .elem-temp-stats-key:hover {
  background: blue;
  color: #fff;
}

.lm-key-temp-val.gasStat .elem-temp-stats-key,
.lm-key-temp-val.gasStat .elem-temp-stats-txt {
  color: red;    
}
.lm-key-temp-val.gasStat .elem-temp-stats-key {
  background: #abd950;
}
.lm-key-temp-val.gasStat .elem-temp-stats-key:hover {
  background: red;
  color: #fff;
}
.lm-key-temp-val.UnknownStat .elem-temp-stats-key,
.lm-key-temp-val.UnknownStat .elem-temp-stats-txt  {
  color: gray;
  
}
.lm-key-temp-val.UnknownStat .elem-temp-stats-key:hover {
  background: gray;
  color: #fff;
}
.lm-elemnts-type-container {
  display: flex;
}
.lm-elems-type {
  display: flex;
  position: relative;
}
.elem-head {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid;
  width: 100%;
  text-align: center;
  border-bottom: none;
}
span.elem-ionicCharge {
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #abd950;
  padding: 0px !important;
}
.lm-elems-type.metals .lm-elements, .lm-elems-type.nonmetals .lm-elements {
  margin-top: 16px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 2px;
  border: 1px solid #fff;
  cursor: pointer;
  transition: 0.5s ease;
}
.lm-elements.metalloid {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 4px;
  cursor: pointer;
  transition: 0.5s ease;
  border: 1px solid #fff;
}
.lamoud-slider-temp {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  border: 1px solid #eee;
  margin: 8px 0;
  padding: 16px 0;
  position: relative;
}
.lamoud-slider-temp.display-style {
  display: flex;
  flex-wrap: wrap;
  flex-direction: inherit;
  justify-content: flex-end;
  flex-flow: row-reverse;
}
.lm-radio-container {
  border: 1px solid #eee;
  padding: 8px;
  margin: 4px;
}
.lm-elems-type.metals .lm-elements:hover,
.lm-elems-type.nonmetals .lm-elements:hover,
.lm-elements.metalloid:hover {
  border-color: blue;
}
.lm-temp-head {
  position: absolute;
  top: -25px;
  left: 8px;
  background: #fff;
  padding: 8px;
  font-weight: bold;
}
.lamoud-temp-range {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#slider-temp {
  width: 80% !important;
  direction: rtl;
  -webkit-appearance: none;
  height: 15px !important;
  border: 1px solid;
  border-radius: 5px;  
  background: white;
  background-image: linear-gradient(to right, #abd950 , #3ea5e4, #beeafd);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

#slider-temp::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #04AA6D;
  cursor: pointer;
}

#slider-temp::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}
.lamoud-temp-type {
  display: flex;
  direction: rtl;
}
.celsius-container, .fahrenheit-container,
.kelvin-container {
  margin: 0 16px;
	display: flex;
    align-items: center;
}
.lamoud-temp-type input {
  border: none;
  border-bottom: 1px solid;
}
#temp-min, #temp-add {
  cursor: pointer;
  padding: 4px 12px !important;
  border: 1px solid #ccc;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s ease;
}
#temp-min:hover, #temp-add:hover {
  box-shadow: 0 0 5px #ccc;
  color: blue;
}

.lamoud-elems-table {
  width: calc(80% - 8px);
  background: #fff;
  border: 1px solid #c7c7c7;
  box-shadow: 5px 5px 5px rgb(0 0 0 / 20%);
  border-radius: 10px;
  padding: 16px 4px;
  max-width: calc(100% - 266px);
}
.lm-full-container {
  width: 100%;
  overflow: auto;
}
.lm-full-section {
  min-width: 983px;
}
.lm-symbol{
  font-size: 15px;
}
.lm-name {
  font-size: 10px;
}
span.lm-atom-weight {
  font-size: 10px;
}
.lamoud-preidec-table-container ul{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.lamoud-preidec-table-container ul li{
  display: flex;
  flex-direction: column;
  width: calc(100%/18);
  justify-content: center;
  align-items: center;
  margin: 2px;
  border-radius: 8px;
}
.lamoud-elem {
  cursor: pointer;
}
.periods-groups li {
  background: #33a5f7;
  color: #fff;
  font-weight: bold;
}
.periods-periods li, .period-num {
  color: #33a5f7;
  font-weight: bold;
}
span.lm-atom-weight {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 3px;
  flex-wrap: wrap;
}
span.lm-atom-weight .xRayEnergies {
  width: 100%;
  margin: 0;
  padding: 0px;
  text-align: center;
}
span.lm-atom-weight .xRayEnergies.k {
  background: #04AA6D;
}
span.lm-atom-weight .xRayEnergies.l {
  background: #33a5f7;
}
span.lm-atom-weight .xRayEnergies.m {
  background: #a0ffa0;
}
span.lm-atom-weight .xRayEnergies {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

span.lm-atom-weight .xRayEnergies .xrSp {
  background: unset;
}

.lm-atom-weight span {
  width: 50%;
  padding: 2px;
}
.nomIsotopes-known {
  background: #04AA6D;
}
.nomIsotopes-stable {
  background: #33a5f7;
}

.lamoud-preidec-table-container .lm-symbol {
  font-weight: bold;
}

.lamoud-elem {
  border: 2px solid black;
}
.nonmetal {
  background: var(--lamoud-nonmetal-color);
  border: 2px solid var(--lamoud-nonmetal-color);
}


li.period-num span {
  background: #33a5f7;
  color: #fff;
  padding: 16px 12px;
  border-radius: 8px;
}
.period-groups-num.period-num span {
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.noble {
  background: var(--lamoud-noble-color);
  border: 2px solid var(--lamoud-noble-color);
}
.alkali {
  background: var(--lamoud-alkali-color);
  border: 2px solid var(--lamoud-alkali-color);
}
.alkaline {
  background: var(--lamoud-alkaline-color);
  border: 2px solid var(--lamoud-alkaline-color);
}
.halogen {
  background: var(--lamoud-halogen-color);
  border: 2px solid var(--lamoud-halogen-color);
}
.metalloid {
  background: var(--lamoud-metalloid-color);
  border: 2px solid var(--lamoud-metalloid-color);
}
.AlkaliMetal {
  background: var(--lamoud-alkali-color);
  border: 2px solid var(--lamoud-alkali-color);
}
.poor {
  background: var(--lamoud-poor-color);
  border: 2px solid var(--lamoud-poor-color);
}
.transition {
  background: var(--lamoud-transition-color);
  border: 2px solid var(--lamoud-transition-color);
}
.metal {
  background: var(--lamoud-metal-color);
  border: 2px solid var(--lamoud-metal-color);
}
.lanthanoid {
  background: var(--lamoud-lanthanoid-color);
  border-color: var(--lamoud-lanthanoid-color);
}
.actinoid {
  background: var(--lamoud-actinoid-color);
  border-color: var(--lamoud-actinoid-color);
}
.Unknown {
  background: var(--lamoud-Unknown-color);
  border-color: var(--lamoud-Unknown-color);
}
.Lanthanide {
  background: var(--lamoud-lanthanoid-color);
  border-color: var(--lamoud-lanthanoid-color);
}
.unknown-state {
  background: var(--lamoud-Unknown-color);
  border-color: var(--lamoud-Unknown-color);
}
.lamoud-elem {
  background: #fff;
  box-shadow: 0 0 2px;
  overflow: hidden;
}
.lm-elem-stable img {
  height: 110px;
  padding: 0 8px;
  max-width: unset;
    max-height: unset;
}
/*.lamoud-elem:hover {
  background: inherit;
}*/

/*******/
/*.frst {
  border: 1px solid blue;
}

.naturalRadiation {
  border: 1px dashed blue;
}
.artificial{
  border: 1px dotted blue;

}*/

/*************/
.gas .lm-symbol{
  color: var(--lamoud-gas-color);
}
.solid .lm-symbol{
  color: var(--lamoud-solid-color);
}
.liquid .lm-symbol{
  color: var(--lamoud-liquid-color);
}
.unknownState .lm-symbol{
  color: var(--lamoud-unknownState-color);
}

/***********/
.lamoud-elem-details {
  width: calc(20% - 8px);
  background: #fff;
  direction: rtl;
  border: 1px solid #c7c7c7;
  box-shadow: 5px 5px 5px rgb(0 0 0 / 20%);
  border-radius: 10px;
  overflow: hidden;
  min-width: 250px;
}
.lamoud-elem-details .elem-name {
  padding: 16px 8px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.lm-elem-attr-container {
  width: 100%;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eee;
  cursor: pointer;
  transition: 0.5s ease;
  flex-flow: row-reverse;
}
.lm-elem-attr-container:hover{
  border: 1px solid var(--lamoud-color);
}
.lm-elem-attr-container.elem-electronConf .lm-elem-attr-val {
  word-break: break-all;
  width: inherit;
  direction: ltr;
}


.lm-elem-attr-container select {
  border: none;
  background: inherit;
  margin: 0 3px;
}
.lm-elem-attr-container input {
  border: none;
  border-bottom: 1px solid;
  background: inherit;
}
/*.temp-solid, .temp-solid select
.temp-solid input {
  background: black;
  color: #fff !important;
}
.temp-solid .lm-elem-attr-val input {
  color: #fff;
}
.lm-elem-attr-container.elem-heet-stats.temp-solid select {
  color: #fff;
}

.temp-liquid{
  /*background: blue;
}
.temp-gas{
  background: red;
}*/
.lamoud-preidec-table-container select, .lamoud-preidec-table-container input {
  padding: 0px !important;
  font-size: 12px !important;
  margin: 0 !important;
  height: 30px !important;
  text-align: center;
  width: max-content !important;
	border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: 0 !important;
}
@media screen and (max-width: 768px) {
  .lamoud-container {
      padding: 0;
  }
  .lamoud-preidec-table-container {
      width: 100%;
  }
  .lamoud-preidec-table-container, .lamoud-slider-temp {
      flex-direction: column;
  }
  .lamoud-elems-table, .lamoud-elem-details {
      width: 100%;
	  max-width: 100%;
  }
  .lamoud-temp-range, .lamoud-temp-type {
      width: 100%;
      margin: 16px 0;
  }
}