.sidebar {
  margin: 0;
  padding: 0;
  width: 60px;
  background-color:  #A52A2A;
  position: fixed;
  height: 100%;
  overflow: auto;
  z-index: 99999;
}

.sidebar a {
  display: block;
  color: white;
  padding: 10px;
  text-decoration: none;
}
 
.sidebar a.active {
  color: black;
}

.sidebar a:hover:not(.active) {
  color: white;
}

.sidebar nav {
  left: 0px;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}


#content{
  background-color:  #f2dfdf;
  padding:15px;
  width:100%;

}

#not-login{
background-color: #f2dfdf;
padding:15px;
margin-top: 30px;
width:100%;
}

 #for_guest{
  padding:15px;
  margin-top: 30px;
  width:100%;
  
}

.logged-in{
  margin-top:1px;
  display: inline-block;
  position: sticky; 
  z-index: 1; 
  top: 0px; 
  background-color: white; 
  width: 100%; 
  
}

.logged-out{
  margin-top:15px;
  margin-right:15px;
}




#table_data {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  cursor: pointer;
}

#table_data td, #table_data th {
  border: 1px solid black;
  padding: 6px;
}

#table_data tr:nth-child(even){background-color: #f2f2f2;}

#table_data tr:hover {background-color: #ddd;}

#table_data th {
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: left;
  background-color:  #990033;
  color: white;
}

#link{
  color: blue;
}


#mainselection select {
   border: 0;
   color: black;
   font-size: 14px;
   font-weight: bold;
   padding: 2px 10px;
   width: 50%;
   *width: 350px;
   *background: #58B14C;
   -webkit-appearance: none;
}


@media screen and (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: fixed;
    bottom:0;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}


.sidebar a {
  
  padding: 3px;

}


  .sidebar nav {
    position: relative;
    display: flex;
    justify-content: space-around;
    transform: translateY(0%);

  }
}