@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Anton");

html {
  scroll-behavior: smooth;
}

body {
  font-family: Roboto;
}

h3 {
  align-items: bottom !important;
}

.text-large {
  font-size: 150%;
}

.text-60-small {
  font-size: 60%!important;
}

.text-super-small {
  font-size: 12px;
  font-weight: lighter;
  vertical-align: text-bottom;
}

.text-small {
  font-size: 90%;
}

.text-strong {
  font-weight: bold;
}

.text-brown {
  color: #8c5a2e;
}


.bg-steel {
  background-color: #121212;
}

.text-light {
  font-family: system-ui;
  font-weight: lighter;
}

.border-orange {
  border-color: #fd7e14 !important;
}

.bg-error {
  background: #f25b51 !important;
}

.content-section {
  background: #121212;
  opacity: 0.8;
  padding: 10px 10px 10px 10px;
  border: 1px solid #ffffff;
  border-left: 6px solid #ffffff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.chart-heading {
  background: #fd7e14;
  color: #ffffff;
}

.chart-section {
  background: #fff;
  padding: 10px 10px;
  border: 1px solid #b3b3b3;
  border-left: 6px solid #b3b3b3;
  border-radius: 8px;
  margin-bottom: 20px;
}

.signin {
  letter-spacing: 2px;
  transition: all 0.3s ease;
  background: #222;
  border-bottom: #fff solid 0.8px;
}

.url-clean {
  font-size: inherit;
  font-weight: inherit;
  font: inherit;
  color: inherit;
  text-decoration: none;
  word-break: keep-all;
  white-space: nowrap!important;
  cursor: pointer;
}

.screen-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-box {
  width: 70%;
  margin-left: 15%;
}

.table-condensed {
  color: inherit;
  width: 100%;
  font-size: 70%;
  border: none !important;
  border-spacing: 0px !important;
  border-collapse: collapse !important;
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}


pre {
  font-family: monospace;
}

.codetext {
  color: darkgreen;
  font-family: monospace;
  font-size: 80%;
}

a {
  color: #024794;
}


.table-server {
  color: black;
  overflow-x: scroll;
  overflow-y: hidden;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

.table-wide {
  display: block;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

.trellis {
  height: 600px;
}

.bullet {
  border-radius: 20% !important;
  width: 12px !important;
  height: 12px !important;
  padding: 2px !important;
  background: white;
  border: 2px solid black;
  color: black;
  text-align: center !important;
}

.background-current {
  background: #EB6B08;
}

.word-box {
  text-align: left;
}

/* TIMELINE */

.timeline-border {
  border-right:  rgb(253, 126, 20);
  border-right-color: linear-gradient(180deg, rgba(253, 126, 20, 1) 65%, #222 100%);
}


.rounded-circle {
  width: 70px;
  height: 70px;
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
.rounded-circle:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}


.img-mirror {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.numbers {
    color: white;
    font-size: 18px;
    font-family: system-ui;
    /* font-weight: lighter; */
    letter-spacing: 1px;
}


.page-outline {
    padding-top: 20px;
    padding-bottom: 0%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 100px;
}

.top-bar {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
}



.red_negpos {
  color: red!important;
}

.green_negpos {
  color: green!important;
}

.strokeme {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff!important;
}


.article-text {
  font-size: 1.2em;
  font-family: system-ui;
  font-weight: lighter;
  text-align: justify!important;
}


.next-arrow  {
    -webkit-animation: next 1.0s infinite normal ease-out;
    animation: next 1.0s infinite normal ease-out;
    position: relative;
    content: "";
}
@keyframes next{
  0%{
    right: 0px;
  }
  50%{
    right: -8px;
  }
  100%{
    right: 0px;
  }
}


.modal {
  backdrop-filter: blur(1px);
}

.modal-extra-blur {
  backdrop-filter: blur(3px);
}

/* For some reason this avoids screen flickering */
.row {
    --bs-gutter-x: 10px;
}

.nolink {
  color: inherit;
  text-decoration: none!important;
}


.custom-offcanvas {
  width: 150px!important;
  padding-left: 0px!important;
  height: 100vh!important;
}

@media (min-width: 992px) {
  .custom-offcanvas {
    position: static;
    transform: none!important;
    visibility: visible !important;
  }
  .content-container {
    flex-grow: 1;

  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

html, body {
  height: 100%;
}

.app-container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
    margin-top: -15px;
}

.page-content {
    overflow-x: hidden;
    overflow-y: auto;
    flex-grow: 1; /* let the page-content fill the remaining space in the flex container */
    padding: 0 20px; /* adjust this to your preference */
}

.btn-active {
  background-color: #ffffff;
  color: #121212;
}