.container-fluid {
  max-width: 100em;
  margin: auto;
}

.navbar {
  background-color: white;
  border-color: #f5f5f500;
  color: black;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 2px;
  z-index: 10000;
}

.navbar-inverse .navbar-nav>li>a {
  color: black;
}

.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
  color: black;
}

.navbar .navbar-brand {
  float: none;
  color: black;
  display: flex;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  font-weight: 700;
  font-size: 19px;
}

.navbar .navbar-brand img {
  height: 30px;
  margin-left: 5px;
  margin-right: 5px;
}

@media (min-width: 768px) {
  #navbar {
    display: flex !important;
  }
}

/* Nav bar search form design */
.form-control {
  border-radius: 8px;
  box-shadow: unset;
  border: 1px solid #e2ddddcf;
  padding: 8px 14px;
}

#navbar .form-control {
  border-top-left-radius: 21px;
  border-bottom-left-radius: 21px;
}

.btn {
  border-radius: 12px;
  font-weight: 500;
}

#navbar .btn {
  border-top-right-radius: 21px;
  border-bottom-right-radius: 21px;
}

#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: #ececec;
  color: black;
  opacity: 1;
  border: none;
  transition: background 0.2s;
}

#navbar .navbar-form .input-group #searchbar:focus {
  background: #aaa;
  box-shadow: none;
  transition: background 0.3s;
  background: #ececec;
}

#navbar .navbar-form .btn-default {
  background-color: #ececec;
  border-color: #ececec;
}

#navbar .navbar-form .input-group #searchbar::-webkit-input-placeholder {
  /* Chrome */
  color: black;
  opacity: 0.5;
}

#navbar .navbar-form .input-group #searchbar:-ms-input-placeholder {
  /* IE 10+ */
  color: black;
  opacity: 0.5;
}

#navbar .navbar-form .input-group #searchbar::-moz-placeholder {
  /* Firefox 19+ */
  color: black;
  opacity: 0.5;
}

#navbar .navbar-form .input-group #searchbar:-moz-placeholder {
  /* Firefox 4 - 18 */
  color: black;
  opacity: 0.5;
}

.navbar a:hover {
  background: #06c6b6;
  opacity: 1;
  border-color: #06c6b6;
}


.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-brand:hover {
  color: black;
}

/* navbar click background color*/
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
  background-color: white;
  color: #7d7d7d;
}


/* dropdown menu edges */
.dropdown-menu {
  border-radius: 12px;
  border: 1px solid rgba(209, 208, 208, 0.15);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 16px;
}

.navbar-nav>li>.dropdown-menu {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}


.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;
  border-radius: 21px;
}

#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 #dcdcdc;
  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;
  border-radius: 21px;
}

.modal-title {
  padding-top: 20px;
}

.twitter-typeahead {
  width: 100%;
}

.tt-menu {
  background-color: white;
  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: 270px;
}

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

/* Panels */

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

.homepage-side-panel {
  position: fixed;
  max-height: calc(100% - 50px);
  color: rgb(255, 255, 255);
  padding-bottom: 2em;
  margin-top: 70px;
  margin-right: 10px;
}

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

.side-panel .section {
  border-bottom: 1px solid #aaa;
  display: block;
  padding-top: 10px;
  padding-bottom: 5px;
  font-variant: small-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: #1d1d1d;
  border-radius: 8px;
  transition: color 0.2s;
}

.side-panel a:hover {
  color: #00a699;
  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: #565a5c;
  border-radius: 0px;
}

/* moweb */
.navbar-toggle {
  background-color: black;
}

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

/* footer elements */

.footer {
  text-align: center;
  color: #565a5c;
  padding: 20px;
}

.panel {
  border: 1px solid #e2ddddcf;
  color: #565a5c;
  background-color: white;
  border-radius: 12px;
  margin-bottom: 25px;
  padding-bottom: 18px;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
}

.panel-header {
  color: #232323;
  font-size: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  font-weight: bolder;
  border-radius: 12px 12px 0 0;
}

.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;
}

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

body {
  color: #232323;
  background-color: whitesmoke;
  font-size: 12pt;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbo;  

}

a {
  color: #00a699;
  text-decoration: none;
}

a:hover {
  color: #06c6b6;
  opacity: 0.5;
  text-decoration: none;
}

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

h1 {
  font-size: 1.8em;
  margin: .67em 0
}

h2 {
  font-size: 1.5em;
  margin: .75em 0
}

h3 {
  font-size: 1.3em;
  margin: .83em 0
}

h4 {
  font-size: 1.1em;
  margin: 1em 0
}

h5 {
  font-size: 1em;
  margin: 1.5em 0
}

h6 {
  font-size: 1em;
  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-unsubscribed {
  font-size: 14px;
  border: 1px solid;
  border-radius: 15px;
  border-color: #9CA299;
  font-weight: normal;
  display: inline-block;
  margin-bottom: 4px;
}

.label-subscribed {
  font-size: 14px;
  border: 1px solid;
  border-radius: 15px;
  border-color: #00A699;
  font-weight: normal;
  display: inline-block;
  margin-bottom: 4px;
}

a.label:focus,
a.label:hover {
  color: #00A699;
  border-color: #00A699;
  background-color: white;
  opacity: 1;
}

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

.label-default {
  color: #9CA299;
  background-color: transparent;
}

.label-tag[href]:hover {
  color: #00A699;
  border-color: #00A699;
  background-color: white;
  opacity: 1;
}

.label-subscribed {
  color: white;
  background-color: #00A699;
  opacity: 0.7;
}

.label-unsubscribed {
  color: #9CA299;
  background-color: inherit;
}

.btn-primary {
  color: white;
  background-color: #00A699;
  border: 1px solid #00A699;
}

.btn.btn-default.btn-subscribe,
.btn.btn-default.btn-subscribe:hover {
  background-color: white;
  border: 1px solid #00A699;
  color: #00A699;
}

.btn-unsubscribe,
.btn-unsubscribe:hover {
  background-color: #00A699;
  border: 1px solid #00A699;
  color: white;
}


.index-view-btn-group {
  border-color: #9CA299;
  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: whitesmoke;
  border: 1px solid #d8d8d8;
  color: #9CA299;
}

.glyphicon-filled,
.glyphicon-clickable {
  color: #9CA299;
}

.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: #9CA299;
}

.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: #06c6b6;
  border-color: #06c6b6;
  opacity: 1;
}

.label-default[href]:focus,
.label-default[href]:active,
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: #9CA299;
  background-color: white;
  border-color: #9CA299;
  opacity: 0.9;
}

.content {
  border-left: 1px solid #F8F8F8;
  background-color: white;
  line-height: 1.6em;
  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: #9CA299;
}

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

.btn-active,
.btn-active>span {
  color: white;
  background-color: #00a699;
}

.btn-active:hover>span {
  color: white;
  background-color: #06c6b6;
}

.btn-active:hover {
  background-color: #06c6b6;
  opacity: 1;
}

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

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-stepper.disabled {
  color: #9CA299;
  opacity: 0.5;
  cursor: default;
}

.pagination {
  margin: 0px;
}

.pagination-stepper {
  padding: 8px;
  display: block;
}

.pagination li a {
  color: #00a699;
}

.pagination .active a {
  background-color: #00a699;
  border-color: #00a699;
}

.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;
  border-radius: 12px 12px 0 0;
}

.group-by-header>h5,
.sort-by-header>h5 {
  color: #9CA299;
  font-weight: 700;
}

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

.sort-by-options {
  margin-left: -100px;
}

.radio-cluster {
  font-weight: 100;
  padding-top: 10px;
  color: #9ca299;
}

.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 #9CA299 inset;
}

.radio-cluster>label>input[type='radio']:hover {
  border-radius: 50%;
  box-shadow: 0 0 5px 0px #9CA299 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: #9CA299;
}

#cluster_list {
  background-color: white;
  margin-top: 0px;
  margin-right: -15px;
  margin-left: -15px;
  padding-top: 10px;
  padding-bottom: 25px;
  border-radius: 0 0 12px 12px;
}

.cluster-dropdown {
  color: #9CA299;
  opacity: 0.6;
  font-size: 10px
}

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

.webeditor-form>label {
  font-weight: 500;
  color: #4e4e4e;
  padding-left: 5px;
  padding-top: 2px;
}

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

.glyphicon-edit,
.glyphicon-remove {
  color: #565A5C;
}

#post_comment_btn,
#btn_in_review.btn-primary,
#btn_publish.btn-primary,
.btn-email-reviewers {
  background-color: #00a699;
  border: 1px solid #00a699;
  color: white;
}

#btn_publish {
  border-radius: 0 12px 12px 0;
}

#btn_save:active,
#btn_save:focus,
#btn_save:hover,
#btn_publish:active,
#btn_publish:focus,
#btn_publish:hover {
  color: #9CA299;
  background-color: white;
  border-color: #9CA299;
  opacity: 0.9;
}

#post_comment_btn:active,
#post_comment_btn:focus,
#post_comment_btn:hover {
  background-color: #06c6b6;
  border: 1px solid #06c6b6;
  color: white;
}

.create-btn-group>a {
  background-color: #00A699;
  border: 1px solid #00A699;
}

.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: #e2dddd00;
  margin-top: 0px;
}

#panel-main .nav-tabs>li>a {
  color: #9CA299;
}

.nav-tabs>li>a {
  border-radius: 12px 12px 0 0;
}

#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: #e2dddd00;
  border-bottom-color: transparent;
  color: black;
  box-shadow: 0px -1px 2px -3px #00000029, 3px 0px 2px -3px #00000029, -3px 0px 2px -3px #00000029;
}

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

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

h5 {
  margin-block-start: 11px;
  margin-block-end: 0px;
}

#metadata_fields .select2-container .select2-selection--multiple {
  background-color: white;
  border: 1px solid #e2ddddcf;
  border-radius: 8px;
  cursor: text;
}

#metadata_fields .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #eaeaea;
  border: 1px solid #e2ddddcf;
  border-radius: 12px;
  margin-left: 5px;
  padding: 0px 10px 1px 10px;
  font-weight: 500;
  color: #333333;
}

button,
input,
select,
textarea {
  border-style: none;
  border: 1px solid currentColor;
  border-radius: 8px;
  border-color: black;
}

/* Add some spacing and a shadow to the sidebar */
/* .sidebar-wrapper {
  min-height: 100vh;
  margin-right: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
  box-shadow: 2px 0px 10px 0px #aaa;
} */

/* Style the active tab */
.list-group-item.active {
  background-color: #007bff;
  color: #fff;
}

/* .sidebar {
  margin-top: 200px;
} */

.list-group-item:hover {
  background-color: #f5f5f5;
  cursor: pointer;
  color: #007bff;
  /* Change the text color on hover */
  border-left: 3px solid #007bff;
  /* Add a border on hover */
}

.list-group-item.active,
.list-group-item:active {
  background-color: #007bff;
  /* Change the background color when active */
  color: rgb(223, 30, 30);
  /* Change the text color when active */
  border-left: 3px solid #fff;
  /* Add a border when active */
}

.form {
  border-radius: 8px;
  box-shadow: unset;
  border: 1px solid #e2ddddcf;
  display: flex;
  background-color: rgb(230, 225, 225);
  justify-content: flex-start;
  width: 50%;
}

.form-label {
  color: #00A699;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
}

.form-base {
  width: 90%;
  margin: 10px auto;
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 10px #ccc;
  justify-content: flex-end;
}


.sidebar2 {
  width: 200px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #f7f7f7;
  padding: 30px;
  box-shadow: 2px 2px 10px #ccc;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 50px;
  color: #333;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 10px;
}

.cluster-list-li {
  content: "•";
  margin-right: 5px;
  margin-left: 50px;
}