/* When you mouse over the navigation links, change their color */
:root {
  --sider_bar_width: 200px ; }

.page-main {
  padding: 10px;
  height: auto;
  overflow: hidden;
  margin-left: 10px; }

/* When you mouse over the navigation links, change their color */
.page-sidebar {
  height: 100%;
  /* Full-height: remove this if you want "auto" height */
  width: var(--sider_bar_width);
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  color: black;
  background-color: lightgray;
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  padding-left: 10px;
  display: block; }

/* Style page content */
.page-content {
  margin-left: var(--sider_bar_width);
  /* Same as the width of the sidebar */
  /* padding: 0px 10px; */
  width: auto;
  overflow: hidden; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid #000000; }

th {
  border: 2px solid #000000; }

td {
  border: 1px solid #000000; }

li.sidebar {
  border: none;
  outline: none;
  padding: 1px 1px;
  cursor: pointer;
  font-weight: normal; }

/* mouse over link */
li.sidebar_current a:hover {
  background-color: #666;
  color: red; }

/* Sidebar links */
.page-sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none; }

/* Active/current link */
.page-sidebar a.active {
  background-color: #4CAF50;
  color: white; }

/* Links on mouse-over */
.page-sidebar a:hover:not(.active) {
  background-color: #555;
  color: white; }

/* {color:#FF00FF;}  /* mouse over link */