#masthead {
    background-size: cover;
}

#publications-list .icon {
    font-size: 3em;
}

#latest-experiments .media-object-section:first-child {
    padding-right: 0;
}

.media-object.stack-for-small {
    padding: 0.9375rem;
}

.media-object.stack-for-small.anndata {
    background: lightyellow;
    display: flex;
}

#main-content-area {
    margin-top: 0;
}

#experimentDescription {
    padding: 0;
}

.experiment-type-icon {
    background: indianred;
    color: white;
    border-radius: 50%;
    font-size: 40px;
    height: 60px;
    width: 60px;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    right: 40px;
}

a.clear {
    border-bottom: none;
}

ul.clear {
    list-style: none;
    margin-left: unset;
}

.button.no-action {
    cursor: default;
}

.button.fixed-width-medium {
    width: 120px;
}

hr {
    border-bottom: 1px solid lightgrey;
}

/* Override EBI VF styles for components that use React-Select */
#gene-search input, #experiment-page input, #cellTypeWheelHeatmap input, #search-form input {
    height: unset;
    box-shadow: none;
    margin: 0;
}

/* Fix for Highcharts tooltip being cut off:
https://github.com/highcharts/highcharts/issues/6824#issuecomment-602801851
https://jsfiddle.net/amunoz/pgho7jL0/59/ */
.highcharts-tooltip-container svg {
    overflow: visible;
}

/* Match margin set by React-Select components */
#experiment-page .gene-search-container {
    margin-bottom: 1rem;
}

/* Magellan nav in the experiment page */
.experiment-page-side-nav a {
    text-decoration: none;
    border-bottom: none;
}

.experiment-page-side-nav a:focus {
    box-shadow: none;
}

.experiment-page-side-nav .menu > li > a {
    line-height: 1.5;
}

.experiment-page-side-nav .is-active {
    background-color: #e6e6e6;
    color: rgb(0,124,130);
}

/* Experiment page - tab styling */
#experiment-page .tabs {
    background: #ffffff;
}

.side-tabs {
    margin: 0;
    border: 1px solid #e6e6e6;
    border-top: 0;
    background: #e6e6e6;
    list-style-type: none
}

#experiment-page .tabs-title, .side-tabs-title {
    background: #ffffff;
    word-wrap: normal;
}

#experiment-page .tabs-title .active, .side-tabs-title .active {
    color: #007c82;
    background: #e6e6e6;
}

#experiment-page .tabs-title .active:hover, .side-tabs-title .active:hover {
    background: #007c82;
}

#experiment-page .tabs-title:hover, .side-tabs-title:hover {
    background: #007c82;
}

#experiment-page .tabs-title > a:hover, .side-tabs-title > a:hover {
    background: #007c82;
}

#experiment-page .tabs-title:hover > a, .side-tabs-title:hover > a {
    color: #ffffff;
}

#experiment-page .tabs-title > a:focus, .side-tabs-title > a:focus {
    box-shadow: none;
}

#experiment-page .tabs-title > a, .side-tabs-title > a {
    display: block;
    padding: 1.25rem 1.5rem;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1;
    color: black;
    border-bottom: none;
}

img.icon {
    height: 28px;
}

/* Featured experiments landing page icon */
img.experiment-thumbnail {
    height: 100px;
    margin-bottom: 20px;
}

/* Reveal anchored links icons */
.anchored a {
    visibility: hidden;
}

.anchored:hover a {
    visibility: visible;
}

/* Override icon colour in media objects in callouts */
#publication-list .icon, #tools .icon {
    color: #5688B3;
}

.callout-background {
    background: #eaeaea;
}