@media (max-width:991px) {
    body.poster {
        margin-top: 60vh;
    }
}

@media (orientation: portrait) {
    .landscapeOnly {
        display: none;
    }
}
@media (orientation: landscape) {
    .portraitOnly {
        display: none;
    }
}

body.poster {
    background-attachment: fixed;
}

/* So that height % works in children */
html {
    height: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;

}
body {
    height: 100%;
}

.top-5 {
    top: 5px;
}

.invisible {
    display: none;
}

.bright {}

.dim {
    opacity: 0.1;
}

.spacer {
width: 5%;
}
.centered {
text-align: center;
}

.row {
    text-align: center; /* center the content of the container */
    margin-left: auto; /* center the container in its parent */
    margin-right: auto;
    width: 100%;
}
.inline {
  display: inline-block;
}
.bold {
font-size: 175%;
font-weight: bold;
}
.bold2 {
    font-size: 125%;
    font-weight: bold;
}
h3 {
text-align: center;
}

.tabHorizMenu {
    width: 100%;
    text-align: center;
}
.tabItem {
text-align: center;
font-size: 200%;
min-height: 4em;
border-radius: 10px;
border: .1em solid BlueViolet;
}

.tabItemHighlight {
    background-color: silver;
}

.info {
text-align: center;
font-size: 150%;
min-height: 4em;
background-color: silver;
border-radius: 50px;
border: .25em solid BlueViolet;
overflow-wrap: break-word;
}

.log {
text-align: center;
font-size: 150%;
min-height: 10em;
background-color: silver;
border-radius: 50px;
border: .25em solid BlueViolet;
overflow: wrap;
}

.smhr {
margin: 0.5em auto;
min-height: 0.25em;
width: 50%;
background-color: DarkViolet;
}

.medhr {
margin: 1em auto;
min-height: 0.33em;
width: 75%;
background-color: DarkViolet;
}

.chartHolder {
float: right; /* Actually left because haven't flipped yet */
transform: scaleX(-1); /* Flips the child back to normal */
width: 75%;
height: 75%;
}

.chartInset {
  background: var(--bs-chart-inset-bg);
  color: #FFFFFF; !important;
  padding: 0em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (orientation: portrait) {
    .chartInset {
        border: .5em solid rgb(78,21,124,1);
        border-radius: 1em;
        width: 100%;
        height: 95%;
    }

    .chartHolder {
        margin: .2em;
        width: 95%;
        height: 75%;
    }

    .chartBottomBlank {
        height: 0%;
    }
}

@media (orientation: landscape) {
    .chartInset {
        border: .5em solid rgb(78,21,124,1);
        border-radius: 1em;
        width: 80%;
        flex-grow: 10;
    }

    .bodyContent {
        padding-bottom: 1em;
    }


    .chartHolder {
        margin: 1em;
        width: 100%;
    }

    .chartBottomBlank {
        height: 15%;
        width: 100%;
    }
}


.chartHeader {
    background: rgba(123,65,162,1);
    background: -moz-linear-gradient(180deg, rgba(26,25,27,1) 0%, rgba(123,65,162,1) 70%);
    background: -webkit-linear-gradient(180deg, rgba(26,25,27,1) 0%, rgba(123,65,162,1) 70%);
    background: linear-gradient(180deg, rgba(26,25,27,1) 0%, rgba(123,65,162,1) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a191b",endColorstr="#ffffff",GradientType=1);
  color: whitesmoke;
  font-size: 1.4em;
}

.chartHeader .units {
    font-size: 0.45em;
}

.headerContainer {
    display: flex;
    justify-content: space-around;
}

.headerElem {
    margin-top: auto;     /* center vertically */
    margin-bottom: auto;
    padding: 0em 0.5em;
}

@media (orientation: portrait) {
.wallyFlag {
    padding:0;
}
.wallyNavbar {
    padding:0;
}
.headerContainer {
   flex-direction: column;
   }
.headerElem {
font-size: 0.8em;
}
.headerBidAsk {
   }
.headerChange {
   float: right;
}
.headerAsk {
   float: right;
}
.headerHigh {
   float: right;
}
}

@media (orientation: landscape) {
  .headerContainer {
     flex-direction: row;
   }
  .headerElem {
     font-size: 1em;
  }

  .wallyNavbar {
    padding:0;
  }
  header {
      width:100%;
  }
}

.chartChartie {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.chartie {
  /*position: relative;*/
  /*z-index: 1000;*/ /*blocking 'mouseover' and 'click' event handlers on charts. Does resetting this index have any ill effects??*/
  width: 90%;  /* leave room for the scroll bar underneath */
  height: 100%;
  float: right;
}

.chartsAndHeader {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0em;
  width: 100%;
  height: 100%;
  z-index: 500;
}

.actualCharts {
 overflow-y: scroll;
 scrollbar-width: auto;
 transform: scaleX(-1); /* Reflects the parent horizontally */
 height: inherit;
}



.allspace {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10000;
}

.chartieBasePic {
  /* visibility: hidden; */
  position: absolute;
  object-fit: contain;
  right: -20px;
  bottom: 0em;
}

@media (orientation: portrait) {
.chartieBasePic {
    height: 33%;
}

.nexPriceNow {
    font-size: 1.5em;
}

.nexChangeNow {
    font-size: 1.5em;
    margin-top: auto;     /* center vertically */
    margin-bottom: auto;
}
}

@media (orientation: landscape) {
.chartieBasePic {
    height: 75%;
}

.nexPriceNow {
    font-size: 3em;
}

.nexChangeNow {
    font-size: 3em;
}
}


@media (orientation: portrait) {
.helpText {
    font-size: 1em;
    padding-left: .5rem;
    padding-right: .5rem;
}
}

@media (orientation: landscape) {
.helpText {
    padding-left: 3rem;
    padding-right: 3rem;
}
}

.chartNavbar {
    padding: 0px;
    background: rgba(123,65,162,1);
    background: -moz-linear-gradient(360deg, rgba(26,25,27,1) 0%, rgba(123,65,162,1) 50%, rgba(247,227,148,1) 100%);
    background: -webkit-linear-gradient(360deg, rgba(26,25,27,1) 0%, rgba(123,65,162,1) 50%, rgba(247,227,148,1) 100%);
    background: linear-gradient(360deg, rgba(26,25,27,1) 0%, rgba(123,65,162,1) 50%, rgba(247,227,148,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1a191b",endColorstr="#ffffff",GradientType=1);
}

.chartMenuItem {
    color: whitesmoke;
    font-weight: bold;
    padding: 1px;
}

.chartMenuItem:hover {
    color: white;
}

.chartW1 {
    flex-grow: 10;
}

.chartBarContainer {
    flex-grow:0;
}

.chartW2 {
    margin-left: 2em;
}

.connectButton {
   padding: 0;
   margin-left: 2em;
}

.loginButton {
    /* background-color: wheat; */
    padding: 0;
}

.wallyNavUl {
  flex-grow:10;
}

.appLog {
  display: none;
  height: 50%;
  overflow:scroll;
}