input:focus {
    outline: none;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
    background-color: #222222;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
}

/*Elements that are hidden before load*/
.periods-container, .periodic-table-container, #search-query, .nav-button-text, .no-load, .nav-tile, #category-explanation-container {
  display: none;
}

#placeholder {
  display: block;
  height: 110%;
}

.big-element-container {
    padding-top: 50px;
}

.big-element-box {
    height: 250px;
    width: 250px;
    margin-bottom: 10px;
    border: 1px solid #fff;
    margin-left: 30px;
    text-transform: capitalize;
}

.big-atom-symbol, .big-atom-name, .big-atom-weight {
    text-align: center;
}

.big-atom-number {
    padding-left: 15px;
    font-size: 25px;
    margin-top: 10px;
}

.big-atom-symbol {
    font-size: 100px;
    font-family: 'Raleway', sans-serif;
}

.big-atom-name {
    font-size: 20px;
    margin-top: 0;
}

#element-picture {
  position: absolute;
  margin-left: 30px;
  display: none;
}


.category-container {
    position: relative;
    margin-top: 50px;
    margin-left: 45px;
    z-index: 1100;
}

.state {
    position: relative;
    z-index: 1100;
}

.category-box {
    height: 40px;
    width: 40px;
    border-radius: 7px;
    display: table-cell;
    margin-left: 15px;
}

.category {
    display: table-cell;
    vertical-align: middle;
    font-size: 19px;
    margin-bottom: 0;
    padding-left: 10px;
}

.property {
    font-size: 22px;
    display: inline-block;
}

.property-element {
    margin-bottom: 50px;
    font-size: medium;
}

.describe {
    display: inline-block;
    font-size: inherit;
}

.origin {
    margin-left: 30px;
    margin-top: 40px;
}

.origin>.property-element {
    margin-bottom: 30px;
}

.properties {
  font-family: 'Quicksand', sans-serif;
}

@media (max-width: 768px) {
    .properties {
        margin-top: 50px;
    }

    .crystal-structure {
        text-align: center;
    }
}

@media (max-width: 992px) {
    .electron-configuration {
        max-width: 100%;
    }

    .properties-physical {
        margin-top: 50px;
    }
}

@media (min-width: 768px) {
    .electron-configuration {
        max-width: 50%;
    }

    .properties {
        margin-top: 0;
    }
}

.crystal-structure {
    margin-top: 0;
}

.radio-icon {
    left: 240px;
    top: 3px;
    position: absolute;
    width: 50px;
}

.back {
    position: absolute;
    max-width: 45px;
    top: 10px;
    right: 10px;
    z-index: 1100;
}

.state {
    margin-top: 20px;
}

.state-img {
    width: 40px;
    display: inline-block;
    margin-left: 45px;
}

.state-text {
    text-transform: capitalize;
    display: inline-block;
    font-size: 19px;
    padding-left: 6px;
}
/* End element.php */



/* The periodic table*/
/* Save box */
#table-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  background-color: rgba(34, 34, 34, 0.8);
  display: none;
}

#save-box {
  left: 50%;
  top: 35%;
  position: absolute;
  display: none;
}

#save-box-ask {
  padding: 10px;
  z-index: 2002;
  width: 300px;
  max-width: 100%;
  font-size: 12px;
  background-color: #383838;
  left: -50%;
  top: -35%;
  position: relative;
  text-align: center;
}

#confirm-save {
  background-color: #00CC66;
  border-radius: 8px;
}

#confirm-save:hover {
  background-color: #00a351;
  cursor: pointer;
}

.save-btn {
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  width: 70px;
  display: inline-block;
}

.save-btn:hover {
  cursor: pointer;
}


/* Guide box */
#information-i {
  width: 25px;
  position: fixed;
  right: 12px;
  top: 14px;
  z-index: 10230;
}

#information-i:hover {
  cursor: pointer;
}

#guide-box {
  left: 50%;
  top: 10%;
  position: absolute;
  display: none;
}

#guide-box-content {
  padding: 10px;
  z-index: 2001;
  width: 60vw;
  max-width: 100vw;
  font-size: 12px;
  background-color: rgba(34, 34, 34, 0.9);
  border: 2px solid #ffffff;
  left: -50%;
  top: -35%;
  position: relative;
}

#close-guide {
  width: 30px;
  position: absolute;
  top: 14px;
  right: 14px;
}

#close-guide:hover {
  cursor: pointer;
}

.lang-container {
  position: absolute;
  top: 19px;
  right: 58px;
}

.guide-lang {
  display: inline-block;
  border-radius: 10px;
  border: 1px solid #ffffff;
  text-align: center;
  width: 40px;
  height: 20px;
  margin-left: 3px;
  -webkit-transition: background-color 0.5s, color 0.5s; /* Safari */
  transition: background-color 0.5s, color 0.5s;
}

.guide-lang:hover {
  background-color: #ffffff;
  color: #222222;
  cursor: pointer;
}

#guide-box-content {
  margin-left: 15px;
  margin-bottom: 20px;
}

#guide-box-content>h3 {
  font-size: 32px;
  font-weight: 200;
  margin-left: 2vw;
  margin-bottom: 20px;
}

.guide-big-nav {
  margin-left: -10px;
  margin-right: -10px;
  height: 50px;
  background-color: #383838;
  padding-left: 0 !important;
}

.guide-big-nav-button {
  display: inline-block;
  width: 33%;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  border-bottom: 2px solid #ffffff;
  -webkit-transition: background-color 0.3s; /* Safari */
  transition: background-color 0.3s;
}

.guide-big-nav-button:hover {
  background-color: #2C2C2C !important;
  border-bottom: 2px solid #ffffff;
  cursor: pointer;
}

.guide-active {
  background-color: #2C2C2C;
}

.guide-small-nav {
  height: 30px;
  margin-left: -10px;
  margin-right: -10px;
  background-color: #383838;
  padding-left: 0 !important;
}

.guide-small-nav-button {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  margin-top: 2px;
}

.guide-small-nav-button:hover {
  background-color: #2C2C2C !important;
  cursor: pointer;
}

.guide-section {
  margin-left: 2vw;
  margin-right: 2vw;
  font-size: 15px;
  font-weight: 200;
}

h4.guide-text {
  margin-top: 2vw;
  display: block;
  padding-right: 5vw;
  padding-bottom: 3px;
  border-bottom: 1px solid #ffffff;
  font-weight: 200;
}

.guide-text {
  padding-left: 12px;
}

.point {
  list-style-position: inside;
}



/* Navbar */
nav {
  background-color: #383838;
  margin-bottom: 20px;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.nav-button-text {
  text-align: center;
  margin-bottom: 0;
}

.nav-button {
  display: inline-block;
  position: relative;
  padding-top: 16px;
  height: 52px;
  transition: background-color 0.15s ease-in;
  margin-top: 5px;
  margin-bottom: 5px;
  /*border-radius: 10px;*/
}

.nav-no-padding {
  padding: 0;
}

.nav-multiple-line {
  margin-top: -8px;
  position: relative;
}

.nav-first-line {
  top: 13px;
}

.nav-second-line {
  top: 12px;
  font-size: 12px;
}

.nav-tile {
  display: inline-block;
  position: relative;
  top: -4px;
}

.nav-tile.active, .nav-button.active {
  background-color: #2C2C2C;
}

.electronegativity-button {
  position: relative;
  top: -5px;
  height: 52px;
  border-bottom: 5px solid;
}

.color-box {
  height: 18px;
  width: 18px;
  position: relative;
  top: 8px;
}

.color-text {
  position: absolute;
  top: 24px;
  text-align: center;
  font-size: 12px;
  width: 200%;
  display: none;
}

#category-explanation-box {
  display: none;
}

#category-explanation-container-disappear {
  display: none;
}

#return-btn {
  text-align: center;
  /*font-size: 20px;*/
}

.arrow {
  display: inline-block;
  height: 24px;
}

.navigate-btn {
  display: inline-block;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
}

.arrow-container {
  padding-left: 1.7vw;
}

.arrow-container:first {
  padding-left: 1.3vw !important;
}

.nav-return-text {
  margin-bottom: 0;
}

.color-container {
  display: inline-block;
  height: 39px;
  cursor: pointer;
  position: relative;
}

.nav-button:hover {
  background-color: #2C2C2C !important;
  cursor: pointer;
}

.nav-active {
  background-color: #2C2C2C;
}

/* Advanced navbar */
#advanced-navbar {
  background-color: #383838;
  position: fixed;
  bottom: -0;
  z-index: 9999;
  width: 100%;
}

#formula-mass-input {
  background-color: #222222;
  border: none;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  width: 100%;
  margin-left: 25px;
  margin-right: 25px;
}

/* States */
#state-icons {
  display: none;
}

.nav-state-container {
  width: 30%;
  position: relative;
  display: inline-block;
  top: 10px;
}

.nav-state-img {
  height: 15px;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav-state-text {
  text-align: center;
  margin-bottom: 0;
  font-size: 12px;
}

/* Temp slider */
.temp-tile {
  display: none;
}

.temp-slider-container {
  display: inline-block;
  width: 75%;
  position: relative;
  top: 14px;
  padding-left: 20px;
  padding-right: 10px;
}

.temp-input-container {
  display: inline-block;
  width: 20%;
  position: relative;
  top: 6px;
}

#temp-input {
  background-color: #222222;
  border: none;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  width: 100%;
}

/* The dropdown to choose unit */
.dropbtn {
    /*background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;*/
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
  margin-left: -20px;
}

#dropdown-hitarea {
  position: absolute;
  width: 30px;
  height: 40px;
  top: 0px;
  left: -20px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 20px;
    left: -20px;
    top: 25px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content p {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content p:hover {
  cursor: pointer;
}


.dropdown-content p:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

 /* Hide arrows on number inputs */
 input[type='number'] {
     -moz-appearance:textfield;
 }

 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }

.slider {
    -webkit-appearance: none;
    height: 25px;
    background: #383838;
    outline: none;
    width: 100%;
  }

/* The dot which is dragged */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 50%;
    margin-top: -6px;
}

.slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 50%;
}

/* Thw on which the dot drives */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  cursor: pointer;
  background: #222222;
  border-radius: 1.3px;
  height: 2px;
}

input[type=range]::-moz-range-track {
  width: 100%;
  cursor: pointer;
  background: #222222;
  border-radius: 1.3px;
  height: 2px;
}


/* Chrome's crazy offset for ranges fix and fix for the input*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .temp-slider-container {
    top: 4px;
  }

  .temp-input-container {
    position: absolute;
    top: 0px;
  }

  .dropdown-btn {
    margin-left: 45px;
    position: absolute;
    top: -39px;
  }

  #dropdown-hitarea {
    position: absolute;
    width: 30px;
    height: 40px;
    top: -28px;
    left: 40px;
  }

  .dropdown-content {
    left: 45px;
    top: 20px;
  }
}
/* End temp sldier */

.colors-img {
  position: absolute;
  top: 80px;
  z-index: 1001;
  background-color: #222222;
  display: none;
}

.category-explanation {
  display: inline-block;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  margin-top: 5px;
}

.category-explanation-text {
  position: relative;
  top: -13px;
  left: 16px;
}

.color-box {
  display: inline-block;
  border-radius: 4px;
}

.color-explanation-box {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.icon_x {
  display: inline-block;
  opacity: 0;
  margin-left: 20px;
}

#bond-a {
  display: none;
}

.twitter-typeahead {
  display: inline !important;
}

#search-query {
  padding-top: 3px;
}

.search-section {
    background-color: #383838;
    color: #222;
}

.search-box {
  font-size: 12px;
  position: relative;
  padding-top: 0px;
}

.search-box input {
  height: 28px;
  margin-top: -5px;
  text-indent: 28px;
  background-color: #292929;
  color: #ffffff;
  border: none;
  padding: 0;
  overflow-x: hidden;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.search-box input:focus {
  background-color: #222222;
}

.search-box .img-search {
  position: absolute;
  top: 2px;
  left: 8px;
  height: 14px;
  z-index: 1001;
}



/* Infobox */
#infobox {
  position: absolute;
  display: none;
  background-color: #383838;
  top: 100px;
  left: 800px;
}

.color-box-info {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.color-text-info {
    display: inline-block;
    margin-top: 8px;
}



/*Electronegativity*/
#calculated_bond {
  text-align: center;
  padding-top: 40px;
}

.electro-element-box {
  border: 1px solid #fff;
  display: inline-block;
}

.electronegativity-numbers {
  display: block;
}

.electro-shell {
  vertical-align: top;
}




.groups-container-indent {
    margin-left: 0;
}

.element-header {
    display: inline-block;
    border: 3px solid #0B01FF;
}

.element {
    border: 1px solid #DCD9D5;
    display: inline-block;
    margin-left: -4px;
    z-index: 300;
    transition: .5s ease-in-out;
    line-height: 1;
    /*font-family: 'Raleway', sans-serif;*/
}

.element:hover {
  /*transform:scale(4);
  transform-origin: left top;*/
}

.group {
    text-align: center;
    display: inline-block;
    margin-top: 4px;
    font-size: 18px;
}

.space16, .space10, .space18, .space3 {
    display: inline-block;
}

.space18  {
    margin-top: 40px;
}


.table-symbol, .table-name {
    text-align: center;
    margin: 0 !important;
    line-height: 1 !important;
}

.table-symbol {
  font-family: 'Raleway', sans-serif;
}

.table-number {
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-block;
}

.table-electronegativity {
  display: none;
  line-height: 1 !important;
  position: absolute;
  font-style: italic;
}

.invisible {
    color: #222222;
}

.color-explanation-box {
    position: absolute;
    text-align: center;
}

.color-explanation-img {
  display: inline-block;
  width: 0px;
}

.color-explanation-header {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  display: inline-block;
}

.color-explanation-icon {
  display: inline-block;
  padding-left: 25px;
}

.color-explanation-icon:hover {
  cursor: pointer;
}

.color-explanation-electronegativity {
  border: 2px solid #fff;
  border-radius: 5px;
  display: none;
}
.color-explanation-electronegativity-text {
  text-align: center;
}

.group-container {
    display: inline-block;
}


.periods-container {
    float: left;
    text-align: right;
    /*padding-right: 17px;*/
    font-size: 18px;
    padding-right: 10px;
}
.period {
    display: block;
}

.periodic-table-container {
    position: relative;
    float: left;
    margin-bottom: 35px;
}


/* links */
a {
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* unvisited link */
a:link {
    color: #fff;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #fff;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: #fff;
    text-decoration: none;
}

/* selected link */
a:active {
    color: #fff;
    text-decoration: none;
}




.indent {
    padding-left: 30px;
}

.inline {
  display: inline-block;
}

.center {
  text-align: center;
}

.no-border {
  border: none;
}

.no-offset {
  padding: 0;
  margin: 0;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}

#hitarea {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 30;
  left: 0;
  z-index: 1000;
}

.select {
    -webkit-touch-callout: default !important; /* iOS Safari */
    -webkit-user-select: text !important; /* Safari */
    -khtml-user-select: none !important; /* Konqueror HTML */
    -moz-user-select: text !important; /* Firefox */
    -ms-user-select: text !important; /* Internet Explorer/Edge */
    user-select: text !important; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}



/* typeahead */
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #383838;
margin-top: 12px;
padding: 8px 0;
width: 422px;
color: #fff;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 8px 20px;
color: #FFFFFF;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #292929;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
.typeahead-symbol {
color: red;
}