body {
    background-color: #000;
    overflow: hidden;
}

@font-face {
	font-family: 'Ggb';
	src: url('/makina.ca/static/fonts/Ggb.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

.app-header {
    position: absolute;
    width: 100%;
    height: 40px;
    padding: 13px 20px;
}

.app-header img {
    width: 30px;
}

.app-bg {
    background-image: url(/makina.ca/static/imgs/appbg.jpg);
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 60%;
    background-size: cover;
    top:50px;
}

.app-header .app-logo {
    color: #fff;
    font-weight: bold;
    font-family: 'Ggb';
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
}

.app-header .app-logo img {
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    margin-right: 6px;
    position: relative;
    top: 2px;
}

.app-blocks {
    width: 100%;
    position: relative;
    top: 454px;
    text-align: center;
}

.app-blocks .app-block {
    width: 45%;
    background-color: #1a1919;
    min-height: 186px;
    margin: 1%;
    position: relative;
    display: inline-block;
    border-radius: 20px;
    opacity: 0.9;
    text-align: left;
    transition: all 250ms;
}

.app-block .icon {
    position: absolute;
    width: 50px;
    height: 35px;
    left: 20px;
    top: 20px;
    background-color: #41403e;
    border-radius: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 59%;
}

.app-block .icon.pwr {
    background-color: #FFEB3B;
    background-image: url(/makina.ca/static/imgs/pwr-icon.svg);
}

.app-block .icon.bat {
    background-color: #03A9F4;
    background-image: url(/makina.ca/static/imgs/bat-icon.svg);
}

.app-block .icon.out {
    background-color: #8bc34a;
    background-image: url(/makina.ca/static/imgs/out-icon.svg);
}

.app-block .name {
    position: absolute;
    left: 20px;
    top: 65px;
    font-family: 'Ggb';
    color: #a1a1a1;
}

.app-block .value {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: 'Ggb';
    color: #fff;
    font-size: 41px;
}

.app-block.needs-on {
    opacity: 0.3;
}

.app-block.needs-on.active {
    opacity: 1;
}