.app-container {
  width: 100%;
  height: calc(100vh);
  /*background-color: #101C38;*/
  background: url(../../assets/images/bg/bg1.png) 100% no-repeat;
  background-size: 100% 100%;
  color: white;
}

.topBanner {
  width: 100%;
  height: 7%;
  background: url(../../assets/images/bg/bgBanner.png) -2px -1px no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}

.topLogo {
  position: absolute;
  width: 270px;
  height: 66px;
  left: 2%;
  top: 0;
  background: url(../../assets/images/logo.png) -2px -1px no-repeat;
  z-index: auto;
}

.main-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-card {
  margin-top: .5%;
  width: 98%;
  height: calc(30vh);
  border-width: 0px;
  border-style: dashed;
  border-color: aqua;
  display: flex;
  justify-content: space-around;
}

.barBox {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: url(../../assets/images/bg/bgBar.png) -2px -1px no-repeat;
  margin-right: 1%;
}

.barTitle {
  display: flex;
  align-items: center;
  margin-left: 10%;
  margin-top: 0.5%;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
}