/* In carbon app: BW */
@font-face {
    font-family: "Carbon-Title";
    font-weight: 900;
    font-display: swap;
    src: url("font/title/black.woff2") format("woff");
}

@font-face {
    font-family: "Carbon-Title";
    font-weight: 800;
    font-display: swap;
    src: url("font/title/extra-bold.woff2") format("woff");
}
@font-face {
    font-family: "Carbon-Title";
    font-weight: 700, bold;
    font-display: swap;
    src: url("font/title/bold.woff2") format("woff");
}

@font-face {
    font-family: "Carbon-Title";
    font-weight: 500;
    font-display: swap;
    src: url("font/title/medium.woff2") format("woff");
}

@font-face {
    font-family: "Carbon-Title";
    font-weight: 400, normal;
    font-display: swap;
    src: url("font/title/regular.woff2") format("woff");
}

@font-face {
    font-family: "Carbon-Title";
    font-weight: 300;
    font-display: swap;
    src: url("font/title/light.woff2") format("woff");
}

@font-face {
    font-family: "Carbon-Title";
    font-weight: 100;
    font-display: swap;
    src: url("font/title/thin.woff2") format("woff");
}

/* In carbon app: Euclid Circular A */
@font-face {
    font-family: "Carbon-Text";
    font-weight: 700, bold;
    font-display: swap;
    src: url("font/text/bold.ttf") format("truetype");
}

@font-face {
    font-family: "Carbon-Text";
    font-weight: 600;
    font-display: swap;
    src: url("font/text/semi-bold.ttf") format("truetype");
}

@font-face {
    font-family: "Carbon-Text";
    font-weight: 500;
    font-display: swap;
    src: url("font/text/medium.ttf") format("truetype");
}

@font-face {
    font-family: "Carbon-Text";
    font-weight: 400, normal;
    font-display: swap;
    src: url("font/text/regular.ttf") format("truetype");
}

@font-face {
    font-family: "Carbon-Text";
    font-weight: 300;
    font-display: swap;
    src: url("font/text/light.ttf") format("truetype");
}

.js-plotly-plot .plotly .modebar {
    padding-top: 1%;
    margin-right: 3.5%;
}

body {
    background-color: #000000;
    margin: 1%;
}

.two.columns {
    width: 16.25%;
}

.column,
.columns {
    margin-left: 0.5%;
}

.pretty_container {
    border-radius: 5px;
    color: #ffffff;
    background-color: #161617;
    margin: 10px;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 2px #161617;
}

.bare_container {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.dcc_control {
    margin: 0;
    padding: 5px;
    width: calc(100%-40px);
    background-color: #161617;
}

.dcc_control:focus {
    margin: 0;
    padding: 5px;
    width: calc(100%-40px);
    background-color: #161617;
}

.control_label {
    margin: 0;
    padding: 10px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    width: calc(100%-40px);
    font-family: "Carbon-Text";
    color: #cccccc;
}

.rc-slider {
    margin-left: 0px;
    padding-left: 0px;
}

.flex-display {
    display: flex;
}

.container-display {
    display: flex;
}

#individual_graph,
#aggregate_graph {
    width: calc(100% - 30px);
    position: absolute;
}

#count_graph {
    position: absolute;
    height: calc(100% - 30px);
    width: calc(100% - 30px);
}

#countGraphContainer {
    flex: 5;
    position: relative;
}

#header {
    align-items: center;
}

#learn-more-button {
    text-align: center;
    height: 100%;
    padding: 0 20px;
    text-transform: none;
    font-size: 15px;
    float: right;
    margin-right: 10px;
    margin-top: 30px;
}
#title {
    text-align: left;
}

.mini_container {
    border-radius: 5px;
    background-color: #161617;
    margin: 10px;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 2px #161617;
    font-family: "Carbon-Text", sans-serif;
}

#right-column {
    display: flex;
    flex-direction: column;
}

#total_tvl {
    flex: 1;
}

#daily_volume {
    flex: 1;
}

#aggregate_data {
    align-items: center;
}

#daily_fees {
    flex: 1;
}

#surplus_deficit {
    flex: 1;
}

#right-block-1,
#right-block-2,
#right-block-3 {
    flex: 1;
}

#tripleContainer {
    display: flex;
    flex: 3;
}

#mainContainer {
    display: flex;
    flex-direction: column;
}

#pie_graph > div > div > svg:nth-child(3) > g.infolayer > g.legend {
    pointer-events: all;
    transform: translate(30px, 349px);
}

.carbon_logo {
    margin: 0;
    padding: 0px;
    width: 35px;
}

/* Controls */

.has-value.Select--single > .Select-control .Select-value .Select-value-label,
.has-value.is-pseudo-focused.Select--single
    > .Select-control
    .Select-value
    .Select-value-label {
    color: #ffffff;
}

.Select--single > .Select-control .Select-value,
.Select-placeholder {
    color: #ffffff;
}

.Select-menu-outer {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: #000000;
    color: #fff;
    border: 1px solid #212123;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    margin-top: -1px;
    max-height: 200px;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}

.Select-control {
    background-color: #000000;
    border: 1px solid #212123;
    color: #fff;
}

.is-focused .Select-input > input {
    color: #fff;
}

.Select-clear-zone:hover {
    color: #fff;
}

.is-focused:not(.is-open) > .Select-control {
    border-color: #00b578;
}

.Select-control:hover {
    background-color: #000000;
}

.is-open > .Select-control {
    background: #000000;
    border: 1px solid #212123;
}

.VirtualizedSelectFocusedOption {
    background-color: #212123;
}

/* Calendar */

.CalendarDay__default {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

.CalendarDay__default:hover {
    background: #00b578;
    color: #fff;
    border: 1px solid #000;
}

.DayPickerNavigation_button__default {
    border: #fff;
    background-color: #161617;
    color: #fff;
}

.DayPickerNavigation_button__default:focus,
.DayPickerNavigation_button__default:hover {
    border: #fff;
    background-color: #161617;
    color: #00b578;
}

.CalendarDay__selected {
    background-color: #00b578;
    color: #fff;
    background: #00b578;
}

.CalendarDay__selected:active {
    background-color: #00b578;
    color: #fff;
    background: #000000;
}

.CalendarDay__selected:hover {
    background-color: #009160;
    color: #fff;
    background: #009160;
}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    border: 1px double #00b578;
}

.CalendarDay__selected_span:active,
.CalendarDay__selected_span:hover {
    background-color: #004830;
    color: #fff;
    background: #004830;
    border: 1px double #004830;
}

.CalendarDay__selected_span {
    background-color: #002d1e;
    color: #fff;
    background: #002d1e;
    border: 1px double #002d1e;
}

.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:active,
.CalendarDay__blocked_out_of_range:hover {
    background: #000;
    color: #404040;
    border: 1px solid #000;
}

.DateRangePickerInput {
    background-color: #161617;
}

.DateRangePickerInput__withBorder {
    border: 1px solid #161617;
}

.DatePicker {
    background-color: #000000;
}

.DateInput {
    background-color: #000000;
}

.DateInput_input {
    background-color: #000000;
}

.DateInput_input__focused {
    border-bottom: 2px solid #00b578;
}

.DateInput_fangShape {
    fill: #000000;
}

.DateInput_fangStroke {
    stroke: #000000;
}

.DateRangePickerInput_arrow_svg {
    fill: #ffffff;
    height: 20px;
    width: 20px;
}

.DayPickerNavigation_svg__horizontal {
    fill: #ffffff;
}

.DayPickerNavigation_svg__horizontal:hover {
    fill: #00b578;
}

.CalendarMonth_caption {
    color: #ffffff;
}

.CalendarMonth {
    background: #000000;
}

.DayPicker_focusRegion {
    background-color: #000000;
}

.DayPicker__horizontal {
    background: #000;
}

.DateRangePicker_picker {
    background-color: #000;
}

td.CalendarDay {
    padding: 0;
}

.CalendarMonthGrid {
    background: #000;
}

/* Keyboard shorcuts */

.DayPickerKeyboardShortcuts_show__bottomRight {
    visibility: hidden;
}

.metrics_text {
    font-family: "Carbon-Text", mono;
    color: #cccccc;
}

.carbon_direct {
    font-family: "Carbon-Text", mono;
    display: inline-flex;
    flex: 1;
    justify-content: flex-end;
}

.last_updated {
    font-family: "Carbon-Text", mono;
    display: inline-flex;
    flex: 1;
    justify-content: flex-end;
    color: #cccccc;
}

.carbon_link {
    font-family: "Carbon-Text";
    font-size: 17px;
}

.Select--multi .Select-value {
    border: 1px solid #004830;
    color: #fff;
}

.Select--multi .Select-value-icon:focus,
.Select--multi .Select-value-icon:hover {
    color: #00b578;
}

.dash-spinner {
    filter: hue-rotate(311deg);
}

.download_button {
    border-radius: 9999px;
    color: #fff;
    border-width: 2px;
    border-color: #000;
    background-color: #000;
}

.download_button:hover {
    color: #fff;
    transition: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.3s;
    border-color: #404040;
}

.download_button.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.download_button.duration-300 {
    transition-duration: 0.3s;
}
.download_button.transition {
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow,
        -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter;
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, opacity, box-shadow, transform,
        filter, backdrop-filter, -webkit-transform, -webkit-filter,
        -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}

.rounded-full {
    border-radius: 9999px;
}

.burger-menu-dropdown {
    background: rgb(33 33 35);
    border: 1px solid rgb(48, 48, 52);
    border-radius: 10px;
}

.burger-menu-item {
    color: rgb(255, 255, 255);
    font-family: "Carbon-Text", sans-serif;
}

.burger-menu-item[data-hovered] {
    background-color: rgb(0, 0, 0);
    font-family: "Carbon-Text", sans-serif;
}

.burger-button {
    border-radius: 5px;
    width: calc(40px);
    height: calc(40px);
    background-color: #161617;
    margin: 10px;
}

.burger-button:hover {
    background-color: #161617;
    border: 0.5px solid #212123;
    transition-duration: 0.3s;
}

.burger-menu-divider {
    margin: calc(5px) 10px;
    border-top: 1px solid rgb(54 54 60);
}

.network-button {
    border-radius: 5px;
    width: 100%;
    height: calc(40px);
    background-color: #161617;
    margin: 10px;
    gap: 8px;
}

.network-button:hover {
    border: 0.5px solid #212123;
    transition-duration: 0.3s;
}

.network-button-icon:hover {
    background-color: inherit;
    border: none;
}

.network-menu-dropdown {
    background: rgb(33 33 35);
    border: 1px solid rgb(48, 48, 52);
    border-radius: 10px;
}

.network-menu-item {
    color: rgb(255, 255, 255);
    font-family: "Carbon-Text", sans-serif;
    display: flex;
    justify-content: space-between;
    text-transform: capitalize;
}

.network-menu-item[data-hovered] {
    background-color: rgb(0, 0, 0);
    font-family: "Carbon-Text", sans-serif;
}

.network-name {
    font-family: "Carbon-Text", sans-serif;
    text-transform: capitalize;
}
.network-icon {
    margin-right: 0px !important;
}