/* Loading screen and mobile */
#loading-screen div{
  margin:auto;
}
#mobile{
  display:none;
}

@media only screen and (max-width: 650px) {
  #mobile {
    display:block;
  }
  div.app, #loading-screen{
    display:none;
  }
}

/* Main body */

.app{
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow:hidden;
}

.app .menus{
  height:186px;
  flex: 0 1 auto;
  z-index:9;
}

.app .content{
  flex: 1 1 auto;
  background-color: rgb(248, 249, 250);

  overflow:hidden;
}

.app .status-bar{
  flex: 0 1 20px;
  background-color: rgb(245, 246, 247);
  border-top: 1px solid rgb(222, 223, 225);
  z-index:9;
}

.app .contextmenu{
  position:absolute;
  border:1px brown solid;
  background-color: white;
  font-size: 12px;
  border-radius: 8px;

  width:140px;
}
.app .contextmenu ul{
  list-style: none;
  margin-top: 5px;
  margin-bottom: 5px;

  margin-left:0;
  margin-right:0;

  padding:0;

  color:black;
}
.app .contextmenu ul li{
  padding-left:10px;
  padding-right:10px;
  display: flex;
    flex-direction: row;
    align-items: center;
}
.app .contextmenu ul li:hover{
  cursor: pointer;
  background-color: rgb(205, 205, 205);
}
.app .contextmenu ul li.divider{
  background-color: teal;
  padding-top:1px;
  margin-left:10px;
  margin-right:10px;
}
.app .contextmenu ul li p{
  
  background-color: transparent;
  margin:0;
  padding:0;
  height:fit-content;
  width:fit-content;
}
.app .contextmenu ul li p.shortcut{
  color:grey;
  margin-left:auto;
  text-align:right;
  font-size:12px
}

/* App elements inside the top bar */
.app .strip-grey{
  background-color: rgba(240, 240, 240, 0.2);
  border-bottom:1px solid rgba(240, 240, 240, 0.6);
  margin-bottom: 5px;
}

.app .menus #filename-input[type='text']{
  border:1px solid rgb(240, 240, 240);
  margin-left:5px;
  background-color: rgba(240, 240, 240, 0.6);
}
.app .menus #filename-input[type='text']:hover, .app .menus #filename-input[type='text']:focus{
  outline:none;
  background-color: rgb(240, 240, 240);
}

/* App elements inside the ribbonmenu */

.element{
  margin-left:2px;
  margin-right: 2px;
  border:1px solid transparent;
}
.element:hover{
  border:1px solid gray;
  cursor: pointer;
}
.element:active{
  border:1px solid black;
}

.ribbon-dropdown .element{
  display:inline-block;
}

/* Lone electron diagram */

.lone-electron-diagram{
  font-size: 50px;
  width:100px;
}
.lone-electron-diagram .nuclei{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, 0);
}
.lone-electron-diagram .electron{
  position:absolute;
  width:8px;
  height:8px;
  border-radius: 50%;
  background-color: teal;
  cursor: pointer;
}
.lone-electron-diagram .electron:hover{
  border:1px solid black;
}
.lone-electron-diagram .electron:active, .lone-electron-diagram .electron.active{
  background-color: brown;
}
.lone-electron-diagram .electron.disabled{
  border:0px;
  background-color: rgb(215, 215, 215);
}
.lone-electron-diagram .electron#top-left{
  top:5px;
  left:50%;
  transform:translate(-10px, 0);
}
.lone-electron-diagram .electron#top-right{
  top:5px;
  left:50%;
  transform:translate(2px, 0);
}
.lone-electron-diagram .electron#bottom-left{
  top:65px;
  left:50%;
  transform:translate(-10px, 0);
}
.lone-electron-diagram .electron#bottom-right{
  top:65px;
  left:50%;
  transform:translate(2px, 0);
}
.lone-electron-diagram .electron#left-top{
  top:27.5px;
  left:50%;
  transform:translate(-34px, 0);
}
.lone-electron-diagram .electron#left-bottom{
  top:39.5px;
  left:50%;
  transform:translate(-34px, 0);
}
.lone-electron-diagram .electron#right-top{
  top:27.5px;
  left:50%;
  transform:translate(26px, 0);
}
.lone-electron-diagram .electron#right-bottom{
  top:39.5px;
  left:50%;
  transform:translate(26px, 0);
}

/* object-temp class */

.object-temp{
  background-color: transparent;
  border:1px black dashed;
  position: absolute;
  z-index:1001;
}

/*/////// svg classes ///////*/

/* Bonds */
#bonds .bond{
  stroke:black;
  stroke-width:2;
  fill:"none";
  cursor: pointer;
}

/* Background */
#background .object-element-background{
  fill:white;
  r:11;
}
#background .object-compound-background{
  fill:white;
  rx:8;
}

/* Lone Electrons */
#lone-electrons .electron{
  r:1;
  fill:black;
}

/* Text */
#text .object-text{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  fill:black;
}
#text .object{
  outline:0.1px dashed;
  outline-color: transparent;
}
#text .object:hover, #text .object.show{
  outline-color:grey;
}

/* Bounds */
#bounds .object{
  stroke:transparent;
  stroke-dasharray: 3;
  stroke-width:0.5;

  fill:transparent;

  r:11;
  rx:8;

  cursor: pointer;
}
#bounds .object.no-br{
  rx:0;
}
#bounds .object:hover, #bounds .object.show{
  stroke:grey;
}
#bounds .object:active, #bounds .object.active, #bounds .object.secondary{
  stroke:black;
}

/* Diagrams */
#diagramming .shape{
  stroke:black;
  stroke-width:2;
  fill:none;
}

/* Bondballs */

#bondballs .bondball{
  fill: teal;
  r:2;
  visibility: hidden;
  cursor: pointer;
}

#bondballs .bondball.show, #bondballs .bondball.draggable, #bondballs .bondball.shapeball.show, #bondballs .bondball.draggable.dragging{
  visibility:visible;
}
#bondballs .bondball:hover, #bondballs .bondball.dragging{
  fill: brown;
}

#bondballs .bondball.shapeball{
  visibility: hidden;
}

/* Cursor Pointers */
#bondballs .bondball.shapeball.nw-resize{
  cursor:nw-resize;
}
#bondballs .bondball.shapeball.n-resize{
  cursor:n-resize;
}
#bondballs .bondball.shapeball.ne-resize{
  cursor:ne-resize;
}
#bondballs .bondball.shapeball.e-resize{
  cursor:e-resize;
}
#bondballs .bondball.shapeball.w-resize{
  cursor:w-resize;
}
#bondballs .bondball.shapeball.sw-resize{
  cursor:sw-resize;
}
#bondballs .bondball.shapeball.s-resize{
  cursor:s-resize;
}
#bondballs .bondball.shapeball.se-resize{
  cursor:se-resize;
}