body{
	background: #e6e9f0;
	height: 100%;
	color: #e9f2ff;
}
header {
	display: flex;
    justify-content: space-between;
	background: #000;
	padding: 20px;
}
.block-container {
	margin: auto;
	display: flex;
	height: 100vh;
	flex-direction: column;
}
.header-left-container {
	display: flex;
}
.header-left-container .detail {
	margin-top: -7px;
}
.header-left-container img{
	max-height:60px;
}
.header-left-container p{
	margin: 0;
	line-height: 22px;
}
.header-left-container .alamat {
	font-size: 14px;
	line-height: 12px;
}
.header-left-container .alamat p{
	line-height: 20px;
}
.logo {
	margin-right: 10px;
}
.logo-text {
	text-transform: uppercase;
	font-size: 20px;
}
.header-right-container {
	text-align: left;
	font-size: 15px;
}
.header-right-container .tanggal {
	font-size: 5px;
}
.header-right-container .waktu {
	font-size: 30px;
	line-height: 30px;
}

.title {
	text-align:center;
	text-transform: uppercase;
}

.content-container {
	/* padding: 10px; */
	flex-grow: 1;
}
.content-middle-top-container {
	/* height: 440px; */
	/* border: 1px solid #cccccc; */
	margin-bottom: 0;
	padding: 18px 0;
	height: 65%;
}
.content-middle-bottom-container {
	height: 35%;
	/* border: 1px solid #CCCCCC; */
}
footer {
	padding: 20px;
    color: #ecf5fe;
    background: #000000;
    text-align: center;
}

/** Loader Ring */

.loader-ring,
.loader-ring:after {
	border-radius: 50%;
	width: 3em;
    height: 3em;
}
.loader-ring {
  margin:  auto;
  cursor: wait;
  /* position: absolute; */
  /* top:50%; */
  /* left: 50%; */
  
  text-indent: -9999em;
  border-top: 0.5em solid rgba(165, 165, 165, 0.2);
  border-right: 0.5em solid rgba(165, 165, 165, 0.2);
  border-bottom: 0.5em solid rgba(165, 165, 165, 0.2);
  border-left: 0.5em solid #a7a7a7;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load-ring 1.1s infinite linear;
  animation: load-ring 1.1s infinite linear;
}
@-webkit-keyframes load-ring {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load-ring {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}