/*********************************************/
/*  .app-style         */
/*********************************************/



body {
  margin: 0;
  background-color: black; /* makes it black instead of default white */
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: white;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.app-style {
  display: flex;
  flex-direction: column;
  

  /* this mutes the background to black, not white */
  /* background-color: black; */
  /* background: rgba(0, 0, 0, 0.85) url("/assets/images/dark_tech_bca_colour_streaks_150.png");  */
  /* background-blend-mode: darken; */
  /* background-position: fixed;   
  background-attachment: fixed;
  background-repeat: no-repeat; */
  /* background-size: cover; */
  /* -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover; */
  /* height: 100vh;
  margin: "0px"; */
}  

/* START COMMENT 
Code below added to fix an iOS issue where the background would grow
super big and wouldn't look right on iOS.
Refer to this link: https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
*/

.app-style:after{
  content:"";
  position:fixed; /* stretch a fixed position to the whole screen */
  top:0;
  height:100vh; /* fix for mobile browser address bar appearing disappearing */
  left:0;
  right:0;
  z-index:-1; /* needed to keep in the background */
  background: rgba(0, 0, 0, 0.85) url("/assets/images/dark_tech_bca_colour_streaks_150.png"); 
  background-blend-mode: darken;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@supports ( -webkit-touch-callout : none) {
  .selector {
  background-attachment:scroll;
  }
}
  
@supports not ( -webkit-touch-callout : none) {
  .selector {
  background-attachment: fixed;
  }
}

  /* END COMMENT */

/* ._dash-loading {
  color: transparent;
  background-color: black;
  height: 100vh;
} */

._dash-loading { 
  /* content: ""; */
  /* display: flex;
  flex-direction: column; */
  text-indent: -9999em;
  /* background-position: fixed; */
  
  background-color: black;
  min-height: 100vh;
  margin: "0px";
  /* z-index: 1000; */
}

/* ._dash-loading::after {
  font-size: 60px;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  color: #000;
  border-radius: 50%;
  margin: 72px auto;
  vertical-align: text-bottom;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  margin-top: 2rem;
} */

/* #div-loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}  */

/*********************************************/
/*  .entry-page-loading                             */
/*********************************************/


/* *[data-dash-is-loading="true"]{
    visibility: hidden;
}
*[data-dash-is-loading="true"]::before{
    content: "Be with you shortly...";
    display: inline-block;
    color: yellow;
    visibility: visible;
}




*[class="entry-page-loading"][data-dash-is-loading="true"]{
  visibility: hidden;
}
*[class="entry-page-loading"][data-dash-is-loading="true"]::before{
  content: "Loading...";
  display: inline-block;
  color: magenta;
  visibility: visible;
}
 */