test.css

:root {
  --dark-primary-color): #D32F2F;
  --default-primary-color: #F44336;
  --light-primary-color: #FFCDD2;
  --text-primary-color: #FFFFFF;
  --accent-color: #607D8B;
  --primary-text-color: #212121;
  --secondary-text-color: #757575;
  --divider-color: #BDBDBD;
  --bg-light-color:#fafafa;
}

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

.navbar {
    background-color: var(-var(--dark-primary-color));
    border-color: var(--divider-color);
    color: var(--text-primary-color);
    z-index: 10000;
}
.navbar-inverse .navbar-nav>li>a {
  color: var(--text-primary-color);
}
.navbar .navbar-brand {
  color: var(--text-primary-color);
}
@media (min-width: 768px) {
    #navbar {
        display: flex!important;
    }
}
#navbar .navbar-form {
    flex-grow: 1;
    display: flex;
}
#navbar .navbar-form .input-group {
    flex-grow: 1;
    display: flex;
}
#navbar .navbar-form .input-group .twitter-typeahead {
    flex-grow: 1;
    flex-shrink: 1;
    width: auto;
    display: flex!important;
}
#navbar .navbar-form .input-group #searchbar {
    width: 100%;
    background: var(--divider-color);
    color: var(--primary-text-color);
    border: none;
    transition: background 0.2s;
}
#navbar .navbar-form .input-group #searchbar:focus {
    background: #aaa;
    box-shadow: none;
    transition: background 0.3s;
}
#navbar .navbar-form .btn-default {
    border-color: #;
}
#navbar .navbar-form .input-group #searchbar::-webkit-input-placeholder { /* Chrome */
  color: #fff;
  opacity: 0.5;
  font-style: italic;
}
#navbar .navbar-form .input-group #searchbar:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
  opacity: 0.5;
  font-style: italic;
}
#navbar .navbar-form .input-group #searchbar::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
  opacity: 0.5;
  font-style: italic;
}
#navbar .navbar-form .input-group #searchbar:-moz-placeholder { /* Firefox 4 - 18 */
  color: #fff;
  opacity: 0.5;
  font-style: italic;
}
.navbar a:hover {
    background: #06c6b6;
    opacity: 1;
    border-color: #06c6b6;
}
.page-container {
    margin-top: 70px;
}

#navbar .searchbar .input-group-btn {
    width: auto;
}
#navbar .navbar-form {
    box-shadow: none;
    border: none;
}
#navbar ul li.dropdown-header {
    padding-left: 15px;
}

#navbar .navbar-button {
    align-self: center;
}

#navbar .btn-default:hover,
#navbar .btn-default:focus,
#navbar .btn-default:active {
    opacity: 1;
}

#navbar .avatar-dropdown {
    padding-left: 5px;
    margin-left: 5px;
}

#navbar .avatar-dropdown img.avatar {
    width: 40px;
    height: 40px;
    border-radius:20px;
    margin-left: 5px;
    margin-right: 5px;
    border: 1px solid #000;
    background-color: #eee;
}

.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

.table {
  font-size: 14px;
}

.modal-content {
  max-width: 1024px;
}

.twitter-typeahead {
  width: 100%;
}

.tt-menu {
 background-color: #fff;
 padding: 8px 6px;
 border: 1px solid rgba(0,0,0,0.2);
 border-radius: 8px;
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
 color: black;
}

.tt-suggestion:hover {
 background-color: #f5f5f5 ;
 cursor:pointer;
}

.tt-suggestion.tt-cursor {
  background-color: #f5f5f5;
}

.tt-input, .tt-hint {
  width: 250px;
}

/* overall page elements */
.page-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 25px;
    padding-right: 25px;
    /*width: 1045px;*/
}

/* Panels */

.side-panel {
    position: fixed;
    overflow-y: auto;
    max-height: calc(100% - 50px);
    color: var(--accent-color);
    padding-bottom: 2em;
    margin-top: -20px;
}

.side-panel::-webkit-scrollbar {
    display: none;
}

.side-panel .section {
    border-bottom: 1px solid var(--accent-color);
    display: block;
    padding-top: 10px;
    padding-bottom: 5px;
    font-variant: all-caps;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.side-panel .section:first-of-type {
    margin-top: 6px;
}

.side-panel .subsection {
    display: block;
    /*font-variant: small-caps;*/
    margin-top: 0.7em;
}

.side-panel ul {
    margin: 0px;
    padding-left: 0px;
    list-style-type: disc;
}

.side-panel ul li {
    margin-left: 1.5em;
}

.side-panel ul.nav > li {
    margin-left: 0px;
}

.side-panel a {
    display: block;
    padding: 3px;
    color: #aaa;
    border-radius: 3px;
    transition: color 0.2s;
}
.side-panel a:hover {
    color: var(--default-primary-color);
    transition: color 0.3s;
}
.side-panel a.highlight {
    font-weight: bold;
}

.side-panel a:link:hover {
    opacity: 1;
}

/* navbar elements*/
.navbar-knowledge, .navbar-text, .glyphicon-navbar {
  color: #cacccd;
  background-color: var(--dark-primary-color);
  border-radius: 0px;
}

.navbar-text[href]:hover {
  color: white;
}

/* footer elements */

.footer {
    text-align: center;
    color: var(--dark-primary-color);
    padding: 20px;
}

.panel {
  border: 1px solid #dce0e0;
  color: var(--dark-primary-color);
  background-color: white;
  border-radius: 0;
  margin-bottom: 0px;
}

.panel-header {
    color: var(--dark-primary-color);
    font-size: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #dce0e0;
}

.panel-body, .panel-header {
  padding-top: 20px;
  padding-bottom: 20px;
}

.panel-dark, .panel-header {
    background-color: #edefed;
}

.panel-header, .panel-body, ul.panel-body > li, ol.panel-body > li, .panel-footer {
    position: relative;
    margin: 0;
    padding: 20px;
    border-top: 1px solid #dce0e0;
}

.panel-light {
    background-color: white;
}

body {
  color: var(--dark-primary-color);
  background-color: var(--bg-light-color);
  font-size: 14px;
  font-family: 'Helvetica', sans-serif;
  /*background-color: #F8F8F8;*/
}

a {
  color: var(--default-primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--default-primary-color);
  opacity: 0.5;
  text-decoration: none;
}

ul {
    margin-top: 10px;
    margin-bottom: 10px;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder }

img {
    max-width:100%;
}

.logo {
  display: block;
  font-size: 21px;
  padding: 0 15px;
  margin-bottom: 10px;
  font-weight: 900;
  font-family: 'Playfair Display';
}

.glyphicon {
  vertical-align: baseline;
}

.link-reset {
  color:black;
}

.label-primary,
.label-default,
.label-subscribed,
.label-unsubscribed {
  font-size: 14px;
  border: 1px solid;
  border-radius: 15px;
  border-color: var(--secondary-text-color);
  font-weight: normal;
  color: var(--secondary-text-color);
  display: inline-block;
  margin-bottom: 4px;
}

a.label:focus, a.label:hover {
    color: var(--default-primary-color);
    border-color: var(--default-primary-color);
    background-color: #fff;
    opacity: 1;
}

.label-primary {
  color: white;
  background-color: #FF5A5F;
}

.label-default {
  color: var(--default-primary-color);
  background-color: transparent;
}

.label-tag[href]:hover {
  color: var(--default-primary-color);
  border-color: var(--default-primary-color);
  background-color: #fff;
  opacity: 1;
}

.label-subscribed {
  color: white;
  background-color: var(--default-primary-color);
  opacity: 0.7;
}

.label-unsubscribed {
  color: var(--default-primary-color);
  background-color: inherit;
}

.btn-primary {
  color: #fff;
  background-color: var(--default-primary-color);
  border: 1px solid var(--default-primary-color);
}

.btn.btn-default.btn-subscribe,
.btn.btn-default.btn-subscribe:hover {
  background-color: #fff;
  border: 1px solid var(--default-primary-color);
  color: var(--default-primary-color);
}

.btn-unsubscribe,
.btn-unsubscribe:hover {
  background-color: var(--default-primary-color);
  border: 1px solid var(--default-primary-color);
  color: #fff;
}


.index-view-btn-group {
  border-color: var(--default-primary-color);
  margin-left: -13px;
}

.glyphicon-white {
  color: #FFFFFF
}

.btn-default.prev_btn,
.btn-default.next_btn {
  border: 1px solid  #ffb400;
  color:  #ffb400;
}

.btn-default {
  background-color: var(--bg-light-color);
  border: 1px solid var(--default-primary-color);
  color:  var(--default-primary-color);
}

.glyphicon-filled, .glyphicon-clickable {
  color: var(--default-primary-color);
}

.content-offset {
  margin-left: 50px;
}

.content-offset-right {
  margin-right: 50px;
}

.js-example-tags {
  position:inherit !important;
  display:inline-block;
}

.tag--subscribed {
  color:white;
  background-color: #FF5A5F;
  border-color: transparent;
}

.btn-batch-tags-invisible {
  padding: 2px 0px;
  background-color: Transparent;
}

.btn-batch-tags-invisible > .glyphicon {
  color: var(--default-primary-color);
}

.batch-tags-text-field {
  width: 500px;
}

.label-primary[href]:hover,
.label-primary[href]:focus,
.label-primary[href]:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color:white;
  background-color: var(--default-primary-color);
  border-color: var(--default-primary-color);
  opacity: 0.5;
}

.label-default[href]:focus,
.label-default[href]:active,
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: var(--default-primary-color);
  background-color: white;
  border-color:  var(--default-primary-color);
  opacity: 0.5;
}

.content {
  border-left: 1px solid #F8F8F8;
  background-color: white;
  line-height: 12em;
  color: #555;
  font-size: 18px;
}

.codehilite {
  position: relative;
}

.codehilite pre {
    word-wrap: break-word;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    overflow-x: hidden !important;
}

.row-space-1 {
  margin-bottom: 6.25px; }

.row-space-top-1 {
  margin-top: 6.25px; }

.row-space-2 {
  margin-bottom: 12.5px; }

.row-space-top-2 {
  margin-top: 12.5px; }

.row-space-3 {
  margin-bottom: 18.75px; }

.row-space-top-3 {
  margin-top: 18.75px; }

.row-space-4 {
  margin-bottom: 25px; }

.row-space-top-4 {
  margin-top: 25px; }

.row-space-5 {
  margin-bottom: 31.25px; }

.row-space-top-5 {
  margin-top: 31.25px; }

.row-space-6 {
  margin-bottom: 37.5px; }

.row-space-top-6 {
  margin-top: 37.5px; }

.row-space-7 {
  margin-bottom: 43.75px; }

.row-space-top-7 {
  margin-top: 43.75px; }

.row-space-8 {
  margin-bottom: 50px; }

.row-space-top-8 {
  margin-top: 50px; }

.row-space-top-12 {
  margin-top: 75px; }

.tooltip.bottom .tooltip-inner {
  background-color:transparent;
  color:grey;
  }

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: grey;
}

a.no-underline {
  text-decoration: none;
  color: var(--default-primary-color);
}

span.index-view-name {
  margin-left: 10px;
}

.btn-active, .btn-active > span {
  color: white;
  background-color: var(--default-primary-color);
}

.btn-active:hover {
  background-color: var(--default-primary-color);
  opacity: 0.8;
}

.glyphicon-active {
  color: white;
  opacity: 1;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination-stepper.disabled {
    color: var(--default-primary-color);
    opacity: 0.5;
    cursor: default;
}

.pagination {
margin: 0px;
}
.pagination-stepper {
  padding: 8px;
  display: block;
}
.pagination li a {
  color: var(--default-primary-color);
}
.pagination .active a {
background-color: var(--default-primary-color);
border-color: var(--default-primary-color);
}
.pagination .active a:hover {
background-color: #11b6a2;
border-color: #11b6aa;
}

.page-btn {
  padding-bottom: 2px;
}

.page-btn > a:visited {
  background-color: inherit;
}

.page-btn:hover, .page-btn:active {
  background-color: inherit;
  border: 0px;
  opacity: inherit;
  outline: none;
}

.cluster-header {
  background-color:white;
  margin-bottom:0px;
  padding-top: 15px;
  padding-bottom:15px;
  border-bottom: 1px lightgrey solid
}

.group-by-header > h5,
.sort-by-header > h5 {
  color: var(--default-primary-color);
  font-weight: 700;
}

.group-by-options {
  margin-left: -40px;
}

.sort-by-options {
  margin-left: -100px;
}
.radio-cluster {
  font-weight: 100;
  padding-top: 10px;
  color: var(--default-primary-color);
}

.radio-cluster > label {
  font-weight: 100;
}

.radio-cluster > label > input[type='radio'] {
  -webkit-appearance:none;
  width:15px;
  height:15px;
  border-radius:50%;
  outline:none;
  box-shadow:0 0 5px 0px var(--default-primary-color) inset;
}

.radio-cluster > label > input[type='radio']:hover {
  border-radius:50%;
  box-shadow:0 0 5px 0px var(--default-primary-color) inset;
}

.radio-cluster > label > input[type='radio']:before{
  content:'';
  display:block;
  width:75%;
  height:70%;
  margin: 15% auto;
  border-radius:50%;
}

.radio-cluster > label > input[type='radio']:checked:before {
  background:var(--default-primary-color);
}

#cluster_list {
  background-color: white;
  margin-top: 0px;
  margin-right: -15px;
  margin-left: -15px;
  padding-top: 10px
}

.cluster-dropdown {
  color: var(--default-primary-color);
  opacity: 0.6;
  font-size: 10px
}

.webeditor-form {
  padding-left: 15px;
}

.webeditor-form > label {
  font-weight: 200;
}

#post_author + span.select2-container {
  display: inherit;
}

.glyphicon-edit, .glyphicon-remove {
  color: var(--dark-primary-color);
}

#post_comment_btn,
#btn_save:active,
#btn_save:focus,
#btn_save:hover,
#btn_in_review.btn-primary,
#btn_publish:active,
#btn_publish:focus,
#btn_publish:hover,
#btn_publish.btn-primary,
.btn-email-reviewers{
  background-color: var(--default-primary-color);
  border: 1px solid var(--default-primary-color);
  color: #fff;
}

.create-btn-group > a {
  background-color: var(--default-primary-color);
  border: 1px solid var(--default-primary-color);
}

.btn[data-target*='#show_posts_']:active,
.btn[data-target*='#show_posts_']:focus {
  outline: none;
  box-shadow: none;
  -webkit-box-shadow: none;
}

#panel-main .nav-tabs {
    border-color: #aaa;
    margin-top: 0px;
}

#panel-main .nav-tabs>li>a {
    color: var(--default-primary-color);
}

#panel-main .nav-tabs>li.active>a,
#panel-main .nav-tabs>li.active>a:focus,
#panel-main .nav-tabs>li.active>a:hover {
    border-color: #aaa;
    border-bottom-color: transparent;
    color: #000;
}

#panel-main .nav-tabs>li>a:hover,
#panel-main .nav>li>a:focus {
    background-color: #fff;
    opacity: 1;
    border-bottom-color: #aaa;
}

:target:before {
  content:"";
  display:block;
  height:70px; /* fixed header height*/
  margin:-70px 0 0; /* negative fixed header height */
}