#ribbon {
  z-index: 50;
  position: fixed;
}
#ribbon, #page {
    width: 100%;
    -webkit-transition: margin-left 0.3s ease, width 0.3s ease;
    -moz-transition: margin-left 0.3s ease, width 0.3s ease;
    -o-transition: margin-left 0.3s ease, width 0.3s ease;
    transition: margin-left 0.3s ease, width 0.3s ease;
}
#ribbon .toolbar {
  background-color: white;
  border: 1px solid #bbbbbb;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  z-index: 50;
  padding: 0.25rem;
}
#ribbon .toolbar .col:not(:last-child), #ribbon .toolbar [class^=col-]:not(:last-child) {
  padding-right: 0.125rem;
}
#ribbon .toolbar .col:not(:first-child), #ribbon .toolbar [class^=col-]:not(:first-child) {
  padding-left: 0.125rem;
}
#ribbon {
    z-index: 50;
    position: fixed;
}

.navbar.navbar-main {
    background-color: #363636;
}
.navbar {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(29, 29, 29, 0.1);
    padding: 0.1rem 0.9rem;
    background-color: #363636;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    text-align: center !important;
}
.navbar .link-group {
    margin: auto;
}
.navbar a.active {
    color: white;
}
.navbar a {
    margin: 0 0.8rem;
    color: #87d3ff;
    font-size: 0.8rem;
}
.navbar a {
    margin: 0 0.8rem;
    color: #87d3ff;
    font-size: 0.8rem;
}