body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
}

.signup-container {
  width: 100%;
  max-width: 900px;
  margin: 30px auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.signup-container h2 {
  margin-bottom: 20px;
  text-align: center;
}
.flex-column .nav-item .nav-link{
    border: 1px dotted gray;
    padding: 6px;
    font-size: small;
}
.flex-column .nav-item .nav-link.default{
  background-color: #09006f;
  color: white;
}
.card .card-body{
    padding: 8px;
}
.card .card-body h5{
    font-size: medium;
    font-weight: bold;
    margin-bottom: 0px;
}
.card .card-body p{
    font-size: 12px;
    color: black;
}
.col .card .sess-id a.ame{
  background-color: navy;
  color: white;
  border-radius: 4px;
  padding: 4px; text-decoration: none;
}
.col .card .sess-id a.del{
  background-color: red;
  color: white;
  border-radius: 4px;
  padding: 4px; text-decoration: none;
}
.card .card-body .exp-date{
  color: red;
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: x-small;
}
.col .card .sess-id{
  position: absolute;
  font-size: x-small;
  bottom: 10px;
  right: 10px;
}
.card .card-body .card-text{
  margin-bottom: 0px;
}
@media (max-width: 768px) {
  #sidebar {
    position: absolute;
    top: 43px; /* height of top-bar */
    left: 0;
    z-index: 1050;
    height: calc(100vh - 56px);
    background-color: white;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
  .top-bar a.btn {
    padding: 2px 8px;
    font-size: 0.8rem;
  }
  .top-bar h1 {
    display: none;
  }
  .page-item.hide-mobile{
    display: none;
  }
}
.top-bar {
  padding: 4px 6px !important;
}
.row.row-cols-1.row-cols-md-2.row-cols-lg-3.g-4{
  --bs-gutter-y: 4px !important;
}
.card-title{
  font-size: smaller;
  font-weight: bold;
  margin-bottom: 2px;
  color: navy;
}