body {
    font-family: "Roboto", sans-serif;
}
.nabar-border {
    border-width: 4px !important;
}

.scrollable-container {
    overflow-y: auto;
}

.quote {
    background-image: url("../img/quote-bg.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.quote.right {
    background-image: url("../img/quote-bg-right.svg");
}

.title-wrapper {
    height: 100%;
}

.navbar-nav .nav-link {
    color: black !important;
    font-weight: 400;
    border-top: 5px solid white;
}

.navbar-nav .nav-item.active .nav-link {
    border-top: 5px solid black;
    font-weight: 500;
}

.navbar-nav {
    border-top: 1px solid black;
}

.nav-tabs .nav-link {
    color: black;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nav-tabs .nav-link:hover {
    border: 1px solid transparent;
    text-decoration: underline;
}

.nav-tabs .nav-link.active {
    background-color: #F0F2F4!important;
    color: black!important;
    font-weight: 500;
    border: 0px;
}

div.tab-content, div.tab-content > a, div.regions-list, div.index-list, div.graph-row, div.cluster-row, div.share-row, div.legend-col, div.context-col {
    background-color: #F0F2F4;
}

div.border-left {
    border-left: 5px solid!important;
}

mark.ribo-highlight, 
a.active.ribo-highlight, 
input.active.ribo-highlight,
rect.ribo-highlight,
div.ribo-highlight /*,
input#RIBO_indeks-range[type="range"]::-webkit-slider-thumb*/ {
    background-color: #60d4be!important;
    fill: #60d4be;
    color: black!important;
}

mark.pizp-highlight, 
a.active.pizp-highlight, 
input.active.pizp-highlight,
rect.pizp-highlight,
div.pizp-highlight /*,
input#PIZP_indeks-range[type="range"]::-webkit-slider-thumb*/ {
    background-color: #db770d!important;
    fill: #db770d;
    color: black!important;
}

mark.zio-highlight, 
a.active.zio-highlight, 
input.active.zio-highlight,
rect.zio-highlight,
div.zio-highlight /*,
input#ZIO_indeks-range[type="range"]::-webkit-slider-thumb*/ {
    background-color: #4F93B8!important;
    fill: #4F93B8;
    color: black!important;
}

mark.taip-highlight, 
a.active.taip-highlight, 
input.active.taip-highlight,
rect.taip-highlight,
div.taip-highlight /*,
input#TAIP_indeks-range[type="range"]::-webkit-slider-thumb */ {
    background-color: #6abce9!important;
    fill: #6abce9;
    color: black!important;
}

mark.izodo-highlight, 
a.active.izodo-highlight, 
input.active.izodo-highlight,
rect.izodo-highlight,
div.izodo-highlight /*,
input#IZODO_indeks-range[type="range"]::-webkit-slider-thumb */ {
    background-color: #ff6575!important;
    fill: #ff6575;
    color: black!important;
}

mark.neizo-highlight, 
a.active.neizo-highlight, 
input.active.neizo-highlight,
rect.neizo-highlight,
div.neizo-highlight /*,
input#NEIZO_indeks-range[type="range"]::-webkit-slider-thumb */ {
    background-color: #ff9ba5!important;
    fill: #ff9ba5;
    color: black!important;
}

mark.pvsos-highlight, 
a.active.pvsos-highlight, 
input.active.pvsos-highlight,
rect.pvsos-highlight,
div.pvsos-highlight /*,
input#PVSOS_indeks-range[type="range"]::-webkit-slider-thumb */ {
    background-color: #ffd0d5!important;
    fill: #ffd0d5;
    color: black!important;
}

mark.oss-highlight, 
a.active.oss-highlight, 
input.active.oss-highlight,
rect.oss-highlight,
div.oss-highlight /*,
input#OSS_indeks-range[type="range"]::-webkit-slider-thumb */ {
    background-color: #8b97e8!important;
    fill: #8b97e8;
    color: black!important;
}

mark.sodel-highlight, 
a.active.sodel-highlight, 
input.active.sodel-highlight,
rect.sodel-highlight,
div.sodel-highlight /*,
input#SODEL_indeks-range[type="range"]::-webkit-slider-thumb */ {
    background-color: #ce66d1!important;
    fill: #ce66d1;
    color: black!important;
}

mark.iktko-highlight, 
a.active.iktko-highlight, 
input.active.iktko-highlight,
rect.iktko-highlight,
div.iktko-highlight /*,
input#IKTKO_indeks-range[type="range"]::-webkit-slider-thumb */ {
    background-color: #ffd02f!important;
    fill: #ffd02f;
    color: black!important;
}

mark.tuikt-highlight, 
a.active.tuikt-highlight, 
input.active.tuikt-highlight,
rect.tuikt-highlight,
div.tuikt-highlight /*,
input#TUIKT_indeks-range[type="range"]::-webkit-slider-thumb */ {
    background-color: #ffe58b!important;
    fill: #ffe58b;
    color: black!important;
}

div.paragraph {
    z-index: 1020;
    font-family:'Raleway', sans-serif;
    font-weight:400;
}

div.paragraph-col {
    background-color: #F0F2F4!important;
}

div.map-row {
    padding-top: 6em;
    padding-bottom: 6em;
}

.custom-select:focus {
    box-shadow: 0 0 0 0rem transparent;
}

div.disabled {
    pointer-events: none;
    opacity: 0.5;
}

img.gender-sign {
    opacity: 0.5;
    cursor: pointer;
}

img.gender-sign.selected {
    opacity: 1.0;
}

img.gender-sign:hover {
    opacity: 0.75;
}

.tooltip-inner {
    text-align: left;
}

span.reset-values {
    fill: hsl(169, 57%, 60%);
    filter: brightness(75%);
    font-weight: 500;
    cursor: pointer;
}

span.ribo-highlight, a.ribo-highlight.download-link {
    color: #60d4be;
}

span.pizp-highlight, a.pizp-highlight.download-link {
    color: #db770d;
}

span.zio-highlight, a.zio-highlight.download-link {
    color: #4F93B8;
}

span.taip-highlight, a.taip-highlight.download-link {
    color: #6abce9;
}

span.izodo-highlight, a.izodo-highlight.download-link {
    color: #ff6575;
}

span.neizo-highlight, a.neizo-highlight.download-link {
    color: #ff9ba5;
}

span.pvsos-highlight, a.pvsos-highlight.download-link {
    color: #ffd0d5;
}

span.oss-highlight, a.oss-highlight.download-link {
    color: #8b97e8;
}

span.sodel-highlight, a.sodel-highlight.download-link {
    color: #ce66d1;
}

span.iktko-highlight, a.iktko-highlight.download-link {
    color: #ffd02f;
}

span.tuikt-highlight, a.tuikt-highlight.download-link {
    color: #ffe58b;
}

span.reset-values:hover {
    text-decoration: underline;
}

img.children-img {
    height: 7em;
    position: absolute;
    top: -1.25em;
    right: 2em;
}

div.visualization-container {
    cursor: pointer;
    text-align: center;
}

svg.chart {
    display: block;
    margin: auto;
}

div.story-indicator-el {
    margin: 8px;
    width: 8px;
    height: 8px;
    margin-left:auto; 
    margin-right:0;
    cursor: pointer;
    border-radius: 4px;
}

a.about-links {
    color: hsl(169, 57%, 40%);
    font-weight: 500;
}

div.info-icon {
    position:relative; 
    float:right; 
    right:56px; 
    top:16px; 
    height:40px; 
    width:40px;
    opacity: 0.6;
    cursor: pointer;
}

div.info-icon:hover {
    opacity: 1.0;
}

.tooltip-custom {
    max-width: 350px;
}

div#scroll-down-img {
    opacity: 0.6;
    position: fixed;
    float: right;
    bottom: 16px;
    cursor: pointer;
}

div#scroll-down-img:hover {
    opacity: 1;
}

mark {
    padding: 2px;
}

a.download-link {
    filter: brightness(0.9);
}