/*********************************************
 * Splash Screen
 *********************************************/
div#splashScreen {
    width: 80vw;
    height: 80vh;
    background-color: #ffffff;
    /* border: solid thin black; */
    border-radius: 0.75em;
    position: absolute;
    top: 10vh;
    left: 10vw;
    /* box-shadow: 5px -5px 5px 0px #D3D3D3; */
}
div#splashScreen > div.logo {
    text-align: center;
    padding-top: 2vh;
    padding-bottom: 1vh;
    position: relative;
    width: 80%;
    margin: 1em auto;
}
@media screen and (min-width: 960px){
    div#splashScreen{
        width: 50%;
        margin: 0 25%;
        left: auto;
        height: auto;
    }
}

div#splashScreen div.logo div {
    display: inline-block;
    margin: 0px;
}
div#splashScreen div.logo img {
    object-fit: scale-down;
}

div#splashScreen > div.appInfo {
    text-align: center;
    padding-top: 2vh;
    padding-bottom: 1vh;
    position: relative;
    width: 100%;
    margin: 0px;
}
div#splashScreen > div.appInfo div {
    font-family: Roboto, Helvetica neue, sans-serif;
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0px;
    color: #2C3E50;
}

div#splashScreen div.partners {
    height: 16vh;
    width: auto;
    text-align: center;
    display: flex;
    align-items: center;
}
div#splashScreen div.partners > div.logo {
    width: 18%;
    height: auto;
    display: inline-block;
    margin-left: 1%;
    margin-right: 1%;
}
div#splashScreen div.partners img {
    max-width: 90%;
    height: auto;
    object-fit: scale-down;
}
@media (orientation:portrait) {
  div#splashScreen {
    width: 80vw;
    height: auto;
  }
  div#splashScreen > div.logo > div       { height: auto; width: 100%; }
  div#splashScreen > div.logo > div > img { width:100%}
}
@media (orientation:landscape) {
  div#splashScreen > div.logo > div       { height: auto; width: auto; }
  div#splashScreen > div.logo > div > img { width:100% }
}

/* from https://material.angularjs.org/latest/layout/introduction :
xs  '(max-width: 599px)'
sm  '(min-width: 600px) and (max-width: 959px)'
md  '(min-width: 960px) and (max-width: 1279px)'
lg  '(min-width: 1280px) and (max-width: 1919px)'
xl  '(min-width: 1920px)'
*/
@media (max-width: 599px) {
  div#splashScreen > div.appInfo .title {
      font-size: 24px;
  }
  div#splashScreen > div.appInfo .madeBy {
      font-size: 12px;
  }
}
@media (min-width: 600px) and (max-width: 959px) {
  div#splashScreen > div.appInfo .title {
      font-size: 34px;
  }
  div#splashScreen > div.appInfo .madeBy {
      font-size: 18px;
  }
}
@media (min-width: 960px) and (max-width: 1279px) {
  div#splashScreen > div.appInfo .title {
      font-size: 48px;
  }
  div#splashScreen > div.appInfo .madeBy {
      font-size: 24px;
  }
}
@media (min-width: 1280px) and (max-width: 1919px) {
  div#splashScreen > div.appInfo .title {
      font-size: 52px;
  }
  div#splashScreen > div.appInfo .madeBy {
      font-size: 28px;
  }
}
@media (min-width: 1920px) {
  div#splashScreen > div.appInfo .title {
      font-size: 64px;
  }
  div#splashScreen > div.appInfo .madeBy {
      font-size: 32px;
  }
}

/*********************************************
 * progress bar
 *********************************************/
.loadProgressBar {
    width: 100%;
    height: 4px;
    z-index: 9999;
    position: fixed;
    top: 0
}
.loadBar {
    width: 0;
    height: 100%;
    transition: height .3s;
    background: #000
}

/*********************************************
 * bootstrap exceptions
 *********************************************/
div.bootstrapException {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999; 
    border-radius: 0px;
    border: thin solid black;
    padding: 24px;
    width: 50vw;
    height: 50vh;
    background-color: #fff;
    color: #000;
}
div.bootstrapException h1 {
    display: block;
    text-align: center;
}
div.bootstrapException.requirejs h1 {
    background-color: #ff4500;
    color: #ffffff;
}
div.bootstrapException.angularjs h1 {
    background-color: #ff0000;
    color: #ffffff;
}
div.bootstrapException p {
    display: block;
    overflow: scroll;
}
div.bootstrapException pre {
    display: block;
    overflow: scroll;
}