/**********************************^  General App Settings *********************************************************/

html, body{
  overflow:hidden;
}

/* Main App and content area container*/
.main {
    background-color: var(--content-background-color);
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: var(--secondary-text-color);
    max-width: 1920px;
    margin:0 auto;
    height:100vh;
    display:flex;
    flex-direction:column;

  }
  .content-row{
  height:calc(100vh - var(--topbar-height));
  margin-top:var(--topbar-height);
}

@supports(height:100dvh){
  .main{
    height:100dvh;
  }
  .content-row{
    height:calc(100dvh - var(--topbar-height));
  }
}
  .extra-space{
    background-color: lightgrey;
  }
  
  /* H1 and Text Tags */
  h1{
    font-size: xx-large;
    font-family: 'GlacialIndifference';
  }
  

  
  /* Sets a min-height to center loading spinners */
  .app-min-height,
  /* Generic styling class for dbc.Cols() that prevents overlap of charts and display bugs when legends change orientation */
  .custom-col{
    min-height: 32rem !important;
  }

  .domains-plot-min-height{
    min-height: 20rem !important;
  }
  
  /* Banner Settings */
  .banner-style {
    background-color: var(--banner-background-color);
    color:var(--banner-text-color);
    border-radius: 5px;
    text-align: center;}

  /* Content Area Overflow Setting*/
  .content-col{
    overflow-x: hidden;
    overflow-y: auto;
  }

  /** Spans **/
  /* Sets the dimensions of the span containers */
  .span-container{
    font-size: x-large;
    min-width: 20rem;
  }
  /* Sets the text width of the spans */
  .span-text{
    width: 95%;
  }
  
  /** Line Break **/
  .line-break {
    border-color: transparent;
  }