/* The side navigation menu */
#preload {
    display: none;
}

body {
  font-family: "Open Sans Regular", sans-serif;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #2f2f2f;   
}

#statusbar {
  margin: 0 auto;
  width: 60vw;
}

.content_box{
  display:block;
  margin: 0 auto;
  margin-top: 20px;
  padding: 20px;
  height: 100%;
  width: 50vw;
  background-color: #ff80ffee; 
  border-radius: 7px;
}

h2 {  
  margin-top: 0px;
  padding-top: 0px;
}

input[type='checkbox'] { 
  display: none; 
} 

.wrap-collabsible { 
  margin: 1.2rem 0; 
} 

.lbl-toggle { 
  display: block; 
  font-weight: bold; 
  font-size: 1.2rem; 
  text-align: left; 
  padding: 1rem; 
  width: 50vw;
  margin: 0 auto;
  background: #ff80ff; 
  cursor: pointer; 
  transition: all 0s ease-out; 
  border-radius: 7px;
} 

.lbl-toggle:hover { 
  color: #FFF; 
} 

.lbl-toggle::before { 
  content: ' '; 
  display: inline-block; 
  border-top: 5px solid transparent; 
  border-bottom: 5px solid transparent; 
  border-left: 5px solid currentColor; 
  vertical-align: middle; 
  margin-right: .7rem; 
  transform: translateY(-2px); 
  transition: transform 0s ease-out; 
} 

.toggle:checked+.lbl-toggle::before { 
  transform: rotate(90deg) translateX(-3px); 
} 

.collapsible-content { 
  max-height: 0px; 
  overflow: hidden; 
  transition: max-height 0s ease-in-out; 
  width: 100%;
} 

.toggle:checked + .lbl-toggle + .collapsible-content { 
  max-height: 100%; 
} 

.toggle:checked+.lbl-toggle { 
  border-bottom-right-radius: 0; 
  border-bottom-left-radius: 0; 
} 

.collapsible-content .content-inner { 
  display:block;
  background: #ff80ffee; 
  border-bottom: 1px solid #ff80ff; 
  border-bottom-left-radius: 7px; 
  border-bottom-right-radius: 7px; 
  width: 50vw;
  height: 100%;
  margin: 0 auto;
  padding: .5rem 1rem; 
} 

.collapsible-content p { 
  margin-bottom: 0; 
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

ul {
  box-shadow: 2px 2px 4px #000000;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #222;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #ff88ff;
}

.active {
  background-color: #808;
  color: white
}

img {
  float: right;
  max-width: 30em; 
  margin-left: 10px;    
}

.abst-text {
  text-align: justify;
}