body {
    margin: 0px;
    background: #555;
}
.widget{
	overflow: auto;
	border-radius: 8px;
	clear: both;
	margin: 12px;
	padding: 8px;
	color: white;
	background-color: #444;
}
.widget:hover{
	background-color: black;
}
.widgetImage{
	float: left;
	width: 120px;
	margin: 8px;
}
#header{
   margin:0 auto;
   justify-content: center;
   align-items: center;
   color: white;
   overflow: auto;
   background: #444;
}
#footer{
    background: #444;
}
.container {
	margin:0;
	overflow: auto;
	word-wrap: break-word;
}

#post {
	background: #333;
	width: 62%;
	float: left;
    margin: auto;
    color: white;
	min-height: 1080px;
}

#sidebarTop {
	background: red;
	padding: 2px;
}
#sidebarTopLeft {
	display: inline-block;
}

#sidebarTopRight {
	display: inline-block;
	float: right;
	margin: 0px 16px;
}
#sidebarLeft {
	width: 19%;
	float: left;
}

#sidebarRight {
	width: 19%;
	float: right;
}
a {
	text-decoration:none;
    color:red;
}
table {
	color:white;
	margin: 8px;
	border-spacing: 12px;
}
input, select{
	border-radius: 4px;
	border: none;
	height: 32px;
}
input[type="submit"]{
  cursor: pointer;
  background-color: green;
  color: white;
}
input[type="submit"]:hover{
  background-color: red;
}
.loadImageButton {
  background-color: green;
  color: white;
  cursor: pointer;
  padding: 8px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.HeaderButton {
  background-color: black;
  padding: 6px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}
.HeaderStep {
  background-color: green;
  padding: 6px;
  font-size: 15px;
  font-weight: bold;
}
.Session {
  margin: 12px;
  height: auto;
  max-height: 0;
  width: auto;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.SessionNoHide {
  margin: 12px;
  height: auto;
  width: auto;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.collapsibleButton {
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 8px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.collapsibleDiv {
    position: relative;
	background-color: #333;
    color: white;
    height: auto;
    max-height: 0;
    width: auto;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.XNetButton{
	overflow: auto;
    cursor: pointer;
	border-radius: 8px;
	clear: both;
	padding: 2px 12px 2px 2px;
	color: white;
	background-color: #444;
	align-items: center;
}
.XNetButton:hover{
	background-color: black;
}
.XNetButton_Active{
	overflow: auto;
    cursor: pointer;
	border-radius: 8px;
	clear: both;
	padding: 2px 12px 2px 2px;
	color: white;
	background-color: black;
	align-items: center;
}
.Inline{
	display: inline-flex;
}
.XNetButtonImage{
	float: left;
	height: 20px;
	margin: 4px;
}
.curvedPanel {
    margin: 15px 5px;
    border: 1px solid white;
    border-radius: 8px;
    padding: 8px;
    position: relative;
}
.curvedPanelTitle {
    position: absolute;
    top: -9px;
    display: inline-block;
    left: 10px;
    padding: 0 10px;
	background: #555;
	color: white;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 16px;
}

.xnetTitle {
 font-size: 1.5em;
 color: red;
 font-weight: bold;
 text-transform: uppercase;
}
.xnetWavy {
 color: white;
 text-transform: uppercase;
 -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2));
}
.xnetWavy span {
 position: relative;
 display: inline-block;
 animation: animate 3s ease-in-out infinite;
 animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
 0% {
  transform: translateY(0px);
 }
 20% {
  transform: translateY(-25px);
 }
 40%,100% {
  transform: translateY(0px);
 }
}
@media only screen and (max-width: 591px) {
	#sidebarTopRight { margin: 12px; }
}
@media only screen and (max-width: 768px) {
	#post {width: 100%;}
	#sidebarLeft {display: none;}
	#sidebarRight {display: none;}
}