#interface_buttons {
    text-align: left;
    margin-right: 10px;
    font-family: "Open Sans", sans-serif;
    float: left;
    background: #ffffff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: #000000;
}


.breadcrumb_button {
    background-color: #225784;
    color: white;
    display: inline-block;
    padding: 4px;
    height: 27px;
    /* background-color: rgb(219, 219, 219); */
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    min-width: 100px;
    text-align: center;
}

.breadcrumb_button_active {
    background-color: #508422;
    color: white;
    display: inline-block;
    padding: 4px;
    height: 27px;
    /* background-color: rgb(219, 219, 219); */
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    min-width: 100px;
    text-align: center;
}

.roundtd {
    display: inline-block;
    border-radius: 15px;
    background-color: #369;
    color: white;
    border: 5px solid white;
    width: 220px;
    vertical-align: middle;
    /*height: 80px;*/
    padding: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.roundtd_small {
    display: inline-block;
    border-radius: 15px;
    background-color: #369;
    color: white;
    border: 5px solid white;
    width: 100px;
    vertical-align: middle;
    /*height: 80px;*/
    padding: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.blue_link {
    color: white !important;
    font-weight: bold;
}


img[src*=".svg"] {
    width: 100%;
}

.helpblock {
    height: 100px;
}

.helpblocktext {
    font-size: 14px;
}

#page {
    margin-top: 75px;
}

#page_content_front {
    font-family: "Open Sans", sans-serif;
    font-size: 10px;
    word-wrap: break-word;
    text-align: left;
    overflow-y: auto;
    /*
    background-color:#F0F0E6;
    position: fixed;
    right: 0;
    left: 0;
    top: 32px;
    height : 158px;
    width: 80%;
    z-index: 999;
    color: #222;
    padding-top: 20px;
    padding-right:50px;
    padding-left:5px;
    padding-bottom: 10px;
    */
}

#series_list {
    width: 90%;
    text-align: left;
    border: none;
    border-collapse: separate;
    border-spacing: 2px;
    overflow: auto;
    float: left;
    font-size: 12px;
}

li .list-unstyled {
    list-style-type: none;
}

#statistics {
    background-color: #F4EEDC;
    /*position: fixed;*/
    /*top: 32px;*/
    /*height: 158px;*/
    width: 100%;
    z-index: 999;
    text-align: left;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #222;
    padding-top: 20px;
    padding-right: 50px;
    padding-left: 5px;
    padding-bottom: 10px;
    border-left: 1px solid white;
}

#content2 {
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
    margin-bottom: 10px;
    float: left;
}

#content3 {
    width: 100%;
    text-align: left;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
    margin-bottom: 10px;
    float: left;
}

#caption {
/ / font-size: 10 px;
}

#graph2 {
    margin-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    margin-left: 20px;
    background-color: white;
    border-radius: 5px;
    float: left;
    width: 550px;
    /*width: 100%;*/
}

.chart2 {
    margin-left: 0px;
}

#variable1 {
    text-align: left;
    overflow: scroll;
}

#variable2 {
    text-align: left;
}

#var_def1 {
    font-size: 10px;
}

#var_def2 {
    font-size: 10px;
}

table.db_stats {
    table-layout: fixed;
    background-color: #fffefe;
    /*width: 250px;*/
}

table.db_stats td {
    overflow: hidden;
    border-radius: 5px;
    padding: 4px;
    margin-left: 5px;
    margin-bottom: 5px;
}

table.db_stats td:nth-of-type(1) {
    /*width: 150px;*/
    text-align: left;
    border-radius: 5px;
}

table.db_stats td:nth-of-type(2) {
    /*width: 100px;*/
    text-align: right;
    border-radius: 5px;
}

#df_data {
    margin-top: 10px;
}

#df_data td {
    padding: 3px;
}

#first_row {
    margin-top: 20px;
    margin-left: 230px
}

#second_row {
    margin-top: 20px;
    margin-left: 230px
}

#series_list .even {
    background-color: rgb(219, 219, 219) !important;
}

#series_list .odd {
    background-color: rgb(230, 230, 230) !important;
}

#series_list th {
    background-color: #f4c63d;
}

#series_ids {
    width: 100%;
    text-align: left;
    border: none;
    border-collapse: separate;
    border-spacing: 2px;
    overflow: auto;
    float: left;
    font-size: 12px;
    padding: 3px;
}

#category_list {
    width: 100%;
    text-align: left;
    border: none;
    border-collapse: separate;
    border-spacing: 2px;
    overflow: auto;
    float: left;
}

table.display thead th {
  border-bottom: none;
  background-color: #f4c63d;
  color: black;
}

.dark-mode .card {
  color: #000;
}

.dark-mode .card .card {
  color: #262323!important;
}

.category {
    padding: 7px;
}

#category_list tr {
    background-color: #A1AD72;
}

.work_area {
    margin-top: 80px;
    margin-left: -10px;
    margin-right: -10px;
}

.dataset_explorer {
    margin-top: 80px;
}

#metrics {
    margin-left: 10px;
}

#metrics th {
    padding-left: 10px;
    text-align: left;
    color: #BA3B1D;
}

#metrics td {
    padding: 4px 4px 4px 10px;
}

#metrics .even {
    background-color: rgb(219, 219, 219)
}

#metrics .odd {
    background-color: rgb(230, 230, 230)
}

#volatility {
    margin-top: 25px;
    float: left;
}

#dataseries {
    text-align: left;
    border-radius: 10px;
    margin: 0 auto;
    padding: 10px;
    border-collapse: separate;
    border-spacing: 2px;
    overflow: auto;
    float: left;
}

#dataseries .even {
    background-color: rgb(219, 219, 219)
}

#dataseries .odd {
    background-color: rgb(230, 230, 230)
}

#dataseries .even td.sorting_1 {
    background-color: rgb(219, 219, 219)
}

#dataseries .odd td.sorting_1 {
    background-color: rgb(230, 230, 230)
}

.dataTables_filter {
    float: left;
}

.dataTables_filter label {
    font-size: 14px;
    font-weight: normal;
}

.dataTables_filter input {
    margin-left: 4px;
}

.datatable {
    margin-bottom: 5px;
}

.datatable td {
    padding: 2px;
}

.dataTables_length {
    width: 100%;
    float: left;
    margin-left: 10px;
}

.dt-center {
    text-align: center;
}

.dataTables_paginate {
    float: none;
}

#histogram {
    margin-top: 20px;
}

.bar {
    fill: #eb8f26;
    stroke: #000;
    stroke-width: 1px;
    stroke-opacity: 0.3;
}

.bar:hover {
    fill: #eb2c26 !important;
}

.axis {
    font: 10px sans-serif;
}

.axis path,
.axis line {
    fill: none;
    stroke: #5b4421;
    shape-rendering: crispEdges;
}

.axis--x path {
    display: none;
}

.line {
    fill: none;
    stroke: #d70206;
    stroke-width: 1px;
}

.tick text {
    font-size: 12px;
}

.tick line {
    opacity: 0.2;
}

#red_feed {
    display: inline-block;
    padding: 4px;
    height: 27px;
    background-color: red;
    border-radius: 5px;
    margin-left: 2px;
    margin-bottom: 5px;
}

#red_no {
    display: inline-block;
    padding: 4px;
    height: 27px;
    background-color: red;
    border-radius: 5px;
    margin-left: 2px;
    margin-bottom: 5px;
}

#orange_feed {
    display: inline-block;
    padding: 4px;
    height: 27px;
    background-color: orange;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

#orange_no {
    display: inline-block;
    padding: 4px;
    height: 27px;
    background-color: orange;
    border-radius: 5px;
    margin-left: 2px;
    margin-bottom: 5px;
}

#yellow_feed {
    display: inline-block;
    padding: 4px;
    height: 27px;
    background-color: yellow;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

#yellow_no {
    display: inline-block;
    padding: 4px;
    height: 27px;
    background-color: yellow;
    border-radius: 5px;
    margin-left: 2px;
    margin-bottom: 5px;
}

.action_button {
    display: inline-block;
    padding: 4px;
    height: 27px;
    background-color: rgb(219, 219, 219);
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    min-width: 100px;
    text-align: center;
}

#gray_no {
    display: inline-block;
    padding: 4px;
    height: 27px;
    background-color: rgb(219, 219, 219);
    border-radius: 5px;
    margin-left: 2px;
    margin-bottom: 5px;
}

.gray_no {
    display: inline-block;
    height: 27px;
    padding: 4px;
    background-color: white;
    border-radius: 5px;
    margin-left: 2px;
    margin-bottom: 4px;
    border: 1px solid rgb(219, 219, 219);
}

.feed_list {
    margin-top: 230px;
    margin-left: -10px;
    margin-right: -10px;
}

.content0 {
    margin-top: 60px;
    background-color: red;
    padding: 3px;
}

#content1 {
    text-align: left;
    font-family: "Open Sans", sans-serif;
    height: 50px;
    padding: 5px;
    background-color: white;
    border-radius: 5px;
    margin-right: 10px;
}


#content_description {
    background-color: #C7C779;
    border-radius: 3px;
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.area {
    fill: steelblue;
    stroke: none;
    opacity: 0.1;
}

.zeroline {
    fill: none;
    stroke: red;
    stroke-width: 0.5px;
    stroke-dasharray: 5;
}

.zerolinetext {
    fill: red;
}

.overlay {
    fill: none;
    stroke: none;
    pointer-events: all;
}

.focusLine {
    fill: none;
    stroke: steelblue;
    stroke-width: 0.5px;
}

.focusCircle {
    fill: red;
}

.btn {
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
}


.count {
    padding: 3px;
    font-weight: bold;
}

#map_slider {
    background-color: #bfe8aa;
    /*width: 700px;*/
    margin-top: 0px;
}

#map {
    max-width: 700px;
    background-color: #9a9292;
}