html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin top and bottom by nav and footer height */
  margin-bottom: 60px;
  margin-top: 60px;
  color: var(--text-color)
}

a {
  color: var(--primary)
}

a.href-target {
  padding-top: 65px;
  margin-top: -65px;
}

.vertical-center{
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}


/* navbar */

.navbar-bg {
  background: var(--background-nav) !important;
}

#brand-icon {
  height: 40px;
  transition: transform .2s ease-in-out;
  transform: rotate(0deg) translate(0px, 0px) scale(1);
}

svg#brand-icon g.text,
svg#brand-icon g.text>path {
  -webkit-transition: opacity 0.05s ease-in-out;
  transition: opacity 0.05s ease-in-out;
  opacity: 1;
  fill: var(--text-color);
}

.scrolled #brand-icon {
  margin-inline-end: -6.5rem;
  transition: transform .2s ease-in-out, margin-inline-end .2s ease-in-out;
  transform: rotate(90deg) translate(10px, 2.5rem) scale(1.4);
}

.scrolled svg#brand-icon g.text {
  -webkit-transition: opacity 0.05s ease-in-out;
  transition: opacity 0.05s ease-in-out;
  opacity: 0;
}

/* current mempool card */

.input-subtitle {
  cursor: pointer;
  text-decoration: underline;
}

#input-lookup-txid {
  background-color: var(--background-card);
  padding: 0.5em;
}

#current-mempool-tx-data {
  display: none;
}

/* current mempool chart */

#current-mempool-chart {
  /* So it doesn't need to resize after chart is rendered */
  min-height: 750px;
}

.c3-tooltip th {
  display: none;
}

#current-mempool-chart.c3 .c3-axis-x path,
#current-mempool-chart.c3 .c3-axis-x line {
  stroke: transparent;
}

#current-mempool-chart.c3-axis-y path,
#current-mempool-chart.c3-axis-y line,
#current-mempool-chart.c3-axis-y2 path,
#current-mempool-chart.c3-axis-y2 line {
  stroke: var(--text-color);
}

#current-mempool-chart .block-grid {
  opacity: 0.4 !important;
}

#current-mempool-chart .hidden-feerate-grid line {
  opacity: 0.0 !important;
}

#current-mempool-chart .hidden-feerate-grid text {
  transform: translate(0px, 9px);
  opacity: 0.5 !important;
  fill: black;
}

#current-mempool-chart.c3 g.c3-axis.c3-axis-x g.tick {
  display: none;
}

#current-mempool-chart.c3 .c3-xgrid-focus line {
  visibility: hidden !important;
}



.c3-ygrid-line.red-line>text {
  fill: red;
  transform: translateY(17px);
}


/* historical mempool chart */

#historical-mempool-chart .c3-area {
  opacity: 0.9 !important;
}

#historical-mempool-chart {
  min-height: 450px;
}


#transaction-stats-chart {
  min-height: 450px;
}

.pointer {
  cursor: pointer;
}

/* past blocks card */

#past-blocks-timer {
  background-color: #ff000036;
  /* have a bit less padding on the bottom lets it appear more centered */
  padding: 0.4rem;
  padding-bottom: 0.3rem;
  border-radius: 0.3rem;
}

#past-blocks-chart {
  /* So it doesn't need to resize after chart is rendered */
  min-height: 300px;
}

.time-since-last-block.c3-region {
  fill: red;
  fill-opacity: 0.1;
}

/* 
#card-past-blocks.c3-xgrid-line>line,
#card-past-blocks.c3-ygrid-line>line {
  stroke: rgb(50, 50, 50);
}
*/

#card-past-blocks g.c3-lines-block>path {
  visibility: hidden;
}

#card-past-blocks circle.c3-circle {
  clip-path: inset(3px 3px 3px 3px);
  fill: var(--text-color) !important;
}


/* hides the last block */
#card-past-blocks circle.c3-shape.c3-shape-10.c3-circle.c3-circle-10 {
  display: none;
}

#card-past-blocks .c3-xgrid-line>line {
  stroke: var(--text-color);
  stroke-width: 1.5px;
}

#transaction-stats-chart.c3 svg g g.c3-legend-item text {
  fill: var(--text-color);
}

#transaction-stats-chart.c3 svg g g.c3-chart g.c3-chart-lines path {
  stroke-width: 3px;
}

.c3 line,
.c3 path {
  stroke: var(--text-color);
}

.grid-10-min>line {
  stroke: #0000002f !important;
}

/* general chart css*/
.red-line>line {
  stroke: red !important;
}

.red-line>text {
  fill: red !important;
}


.c3 .c3-axis path,
.c3 .c3-axis line {
  stroke: var(--text-color);
}


.c3-axis-y2 text,
text.c3-axis-y-label,
text.c3-axis-y2-label,
.c3-ygrid-line>text,
.c3-xgrid-line>text {
  fill: var(--text-color);
  font-size: 1.2em;
}

.c3 .c3-axis-y-label,
.c3 .c3-axis-y2-label {
  font-size: 1.2em;
}

.c3 .tick {
  font-size: 1.4em;
}

.c3 .c3-axis-x g,
.c3 .c3-axis-y g,
.c3 .c3-legend-item-data text {
  fill: var(--text-color);
}

/* Footer */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: var(--footer-background) !important;
}


:root {
  --background: var(--white);
  --background-nav: var(--white);
  --background-footer: var(--light);
  --text-color: var(--dark);
  --text-color-disabled-button: black;
}

nav .nar .navbar,
body {
  background: var(--background) !important;
}

div.card,
div.card-body {
  background: var(--background-card) !important;
}

[data-theme="dark"] .alert.alert-warning {
  background-color: var(--background-card);
  color: var(--warning);
}

[data-theme="dark"] a:hover {
  color: var(--danger);
}

.btn.btn-outline-white {
  color: var(--text-color);
  background-color: var(--background-card);
  border-color: transparent;
}

.btn.normal-text-color {
  color: var(--text-color-disabled-button);
}

.c3-tooltip {
  color: var(--dark) !important;
}

.btn.btn-outline-primary {
  border-color: var(--primary) !important;
  color: var(--primary);
}

.btn.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: var(--secundary);
}

.btn.btn-outline-primary.active {
  background: var(--primary) !important;
}


[data-theme="dark"] {
  --primary: var(--danger);
  --background: #000000de;
  --background-nav: #222222;
  --background-card: #33333333;
  --background-footer: #000000de;
  --text-color: var(--light);
  --text-color-disabled-button: var(--white);
}