﻿#q-app > .app-banner{
  height: 80px;
  /* height: 150px; */
  /* background: url('../img/banner.png') no-repeat; */
  background: linear-gradient(45deg, #3a75c4, #12335f);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body.env-development #q-app > .app-banner {
    /* background: url('../img/banner.png') no-repeat; */
    background: linear-gradient(45deg, #4caf50, #004d40);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body.env-staging #q-app > .app-banner{
  /* background: url('../img/banner.png') no-repeat; */
  background: linear-gradient(45deg, #ff5722, #b71c1c);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#q-app > .app-banner .logo{
  width: 120px;
}
#q-app > .app-loading{
  position: fixed;
  height: 100vh;
  width: 100%;
  background: #fff;
  z-index: 1;
}

@media screen and (min-width: 1600px) {
  body.env-development #q-app > .app-banner {
    background-size: cover;
  }

}

@media screen and (min-width: 721px) {
  body {
    background: #fdfdfd;
  }
    #q-app.super-banner .app-banner {
        height: 40vh;
        background-size: cover !important;
        background-position: center !important
    }
  #q-app.super-banner .app-banner .logo{
    width: 300px;
  }
  #q-app.super-banner > .app-content{
     /* margin-top: 2vh; utilizar com banner  */
    margin-top: -10vh;
  }
  #q-app.short-content > .app-content {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 720px) {
    .app-banner {
        height: 30vh !important;
        background-size: cover !important;
        background-position: center !important
    }
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgb(202, 202, 202); 
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3); 
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.6);
}

.loading {
  background-image: url("../img/geap_loading.gif");
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  padding-top: 45.45%; /* (h/w) x 100 */
  margin-bottom: 30px;
}