.datasets-container {
  margin-left: 6% !important;
  margin-right: 6% !important;
}

.datasets-container .panel.panel-default.datasets .panel-heading .collapse.navbar-collapse.datasets {
  float: right; 
  margin-top: -9px;
  font-weight: normal;
  font-size: 0.9em;
}

.datasets-container .navbar-collapse .nav.navbar-nav.navbar-right.datasets {
  background-color: white ;
  margin-right: 0 ;
  border: 2px solid #336699 ;
  border-radius: 4px ;
}

.datasets-container .navbar-collapse .nav.navbar-nav.navbar-right.datasets .dropdown-toggle {
  padding-top: 10px;
  padding-bottom: 10px;
}

.datasets-container > .panel-default.datasets {
  border : none ;
  box-shadow : none !important ;
  background-color: transparent ;
  margin-top: 20px ;
  margin-bottom: 0px ;
}

.datasets-container > .panel-default.datasets > .panel-heading {
  background-color : #336699 !important ;
  color : white !important ;
  font-weight : bold ;
  font-size : 1.2em ;
  border : none !important ;
  border-radius: 4px ;
  margin: 0px !important;
}

.datasets-container > .panel-default.datasets > .panel-heading h4 {
  font-size : 1em !important;
  margin : 5px !important;
}

.datasets-container > .panel-default.datasets > .panel-body {
  border : none !important ;
  padding : 15px 0px 0px 0px ;
}

.datasets-container > .panel-default.datasets > .panel-body .dataset.row {
  margin: 0px 0px 15px 0px;
  border-left-color: #336699 !important;
  border: 2px solid #336699 !important;
  border-left-width: 8px !important;
  border-radius: 3px !important;
  padding-top : 0px ;
  box-shadow: 5px 6px 4px 1px rgba(0,0,0,0.35);
}

.datasets .prop-value  {
  font-size: 90% !important ;
  color: grey !important ;
}

.datasets .prop-value .prop {
  font-weight: bold ;
}

.components .badge {
  padding: 0px ;
  border: 2px solid #336699 ;
  background-color: white ;
  cursor: pointer ;
  white-space: nowrap;
  min-width: 0px ;
}

.components .badge_title {
  border-radius: 4px 4px 0 0;
  padding: 3px 5px 5px 5px;
  font-size: 1.1em;
  color: white;
  background-color:  #336699;
}

.components .badge_count {
  border-radius: 0 0 4px 4px;
  padding: 3px 5px 3px 5px;
  font-size: 1.1em;
  font-weight: bold;
  color: #336699;
}
/* ---------------------------------------------------------------- */

/*lhs*/
.lhs {
  padding : 0px !important ;
}

.lhs > .panel {
  margin : 0 !important ;
  border : none !important ;
  border-radius : 0px !important ;
  box-shadow: none !important;
}

.lhs > .panel-default > .panel-heading {
  margin : 0 ;
  padding: 3px 10px 3px 10px !important;
  border : 0 !important;
  border-radius : 0px ;
  background-color: white !important ;
  font-size: 1.1em ;
  color: #336699 ! important ;
  font-weight : bold ;
}

.lhs > .panel-default > .panel-body {
  padding : 0px 5px 0px 5px ;
  border : none ;
}

.lhs .prop-value {
  padding-left : 34px ;
  text-indent : -13px ;
}

/*Style for analysis doc component*/
.lhs .prop-value.an-id {
  padding-top : 5px !important ;
  font-weight : bold !important;
}

.lhs .prop-value.an-id a{
  color: #336699 ! important
}

.lhs .an-id .btn-info {
  background-color: #336699 !important ;
  border-color: #336699 !important;
  margin : 10px 4px 10px 5px ;
  padding: 2px 5px 2px 5px;
  border-radius: 5px ;
}

.lhs .btn-info > span {
  font-size : 90% ;
  padding-left: 5px;
}


/*rhs*/

.rhs {
  padding : 0px !important ;
}

.rhs > .panel {
  margin : 0 !important ;
  border : none !important ;
  border-radius : 0px !important ;
  box-shadow: none !important;
}

.rhs > .panel-default > .panel-body {
  padding : 3px 30px 3px 20px ;
  border : none ;
}

.rhs .component  {
  color: grey !important ;
  padding: 0px ;
}
/* - undo the effects of text-right class in .rhs .component when screen is small
 *   and rhs stacks under lhs according to col-xs-* classes uses; else the staggering looks funny.
 */
@media (max-width: 767px) {
  .rhs .components .component {
    text-align: left !important;
  }
}

.rhs .component .fa {
  font-size : 1.6em ;
  margin: 5px 5px 5px 5px ;
}

.rhs .status.released {
   color: green ;
}

.rhs .status.embargoed {
  color: #CE1D1D ;
}

.rhs .external-database-icon {
  width: 75%;
  margin: 1em;
}

.rhs .reference-icon {
  width: 75%;
  margin: 1em;
}

/* Popovers */

.popover-title {
  background: #336699;
  font-weight: bold;
  color: white;
  text-align: center ;
  border-radius: 0px;
}

div.popover.datasets {
  border: 2px solid #336699 ;
  padding: 0px ;
}

div.popover.datasets.arrow:after {
  border-bottom-color: #336699 ;  
}

div.popover.datasets>.arrow:after {
  border-bottom-color: #336699 ;
}

div.popover.datasets.datasets-popover {
  min-width: 270px ;
}

div.popover.datasets.externalrefs-popover {
  min-width: 200px ;
}

div.popover.datasets.pubmed-popover {
  min-width: 200px ;
}

/* Anchor */

a.anchor {
  top : -8px ;
  position : relative ;
}

/* Load more button */

#loadMore {
  background-color: #336699 !important ;
  border-color: #336699 !important;
  margin : 0px 0px 10px 0px ;
  border-radius: 5px ;
}

#loadAll {
  background-color: #336699 !important ;
  border-color: #336699 !important;
  margin : 0px 0px 10px 10px ;
  border-radius: 5px ;
}

#loadDefault {
  background-color: #336699 !important ;
  border-color: #336699 !important;
  margin : 0px 0px 10px 10px ;
  border-radius: 5px ;  
}

/* Help text */

.datasets-helptext {
  font-size: 1em ;
  font-family: "Helvetica Neue", Helvetica, Arial, cursive, sans-serif ;
  background-color: #fcfaf7 ;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.45);
  margin-bottom: 3%;
  padding: 10px ;
  clear: both;
  border: 1px solid black;
}

.datasets-helptext .fa {
  color: #e1700a ;
}