.splash{
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: 101;
    background-color: black;
    background-image: url("../img/epbih.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.topBar{
    position: fixed;
    height: 50px;
    background-color: #10253f;
    color: white;
    font-size:x-large;
    padding: 5px 20px;
    text-align: center;
    z-index: 100;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,0.3);
}
.appNav, .home{
    float:left;
}

.moreOpt{
    float:right;
}
.title{
    margin: 0 auto;
    font-size:larger;
}
/*///////////////////////////////////////////////////////////////////*/
.sideBarWrap{
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.5);
    padding-left: 0px;
    visibility: hidden;
    position:fixed;
    z-index:100;
    opacity: 0;
    margin-top:0px;
    transition:visibility 0s, opacity 0.5s linear;
}
.sideBar{
    width: 0%;
    opacity: 0;
    height: 100%;
    border-radius: 0px;
    transition: opacity 0s, width .5s;
    background-color: #000;
}
.sideBar > .card-body{
    padding: 5px 0px 5px 0px;
}
.SideBarTitle{
    height: 22%;
    background-color:#10253f;
    background-image: url("../img/epbih.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position-x:50%;
    color:white;
    margin-bottom:0px;
}
.closeSideBar{
    float:right;
    padding: 5px 15px 0px 0px;
    font-size:x-large;
}
.sideItem{
    padding: 15px 20px 15px 5px;
    margin: 0px !important;
    width:100%;
    color:#757474;
    font-weight:500;
    /*border-bottom: solid 1px #cac8c8;*/
}
.showDarknes{
    visibility: visible;
    opacity: 1;
}
.showSideBar{
    opacity: 1;
    width: 85%;
}
.hideDarknes{
    opacity: 0.1;
}
.hideSideBar{
    width: 0%;
}

/*///////////////////////////////////////////////////////////////////*/
@media (min-width:801px){
    .kartaBtn, .listaBtn{
        display: none;
    }
    .mapCardWrap, .listCardWrap{
        display: inline-block;
        margin: 0px;
        padding: 0px;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .mapCardWrap{
        width:66%;
    }
    #map{
        width: 100%;
        height: 30em;
    }
    .listCardWrap{
        width: 33%;
        float: right;
    }
    .app{
        padding: 80px 15px;
    }
    .showSideBar{
        opacity: 1;
        width: 45%;
    }
    .hideSideBar{
        width: 0%;
    }
}
/*///////////////////////////////////////////*/
.app{
    background-color: #000000;
    padding: 80px 15px;
}
body{
    background-color: #000000;
}
.pare, .predvid{
    text-align: center;
    font-size: xx-large;
    color: white;
}
.deviceWrap{
    border-bottom: solid 2px #10253f;
    margin-bottom: 15px; 
}
.deviceData{
    color: white;
}
.radiNeRadi{
    float: right;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: solid 3px #10253f;
}
.radiNeRadi.a1{
    border: solid 3px #5f92d2;
    background-color: #5f92d2;
}
.addNewDevice, .showDetailed{
    text-align: center;
    color: white;
}
.alertWrap{
    margin-bottom: 15px;
    padding: 5px 10px;
    border-radius: 15px;
    width: 100%;
    color: white;
    background-color: #10253f;
}
/*********************************************/
.footer{
    position: fixed;
    /*height: 80px;*/
    background-color: #10253f;
    color: white;
    font-size:x-large;
    padding: 0px 20px;
    width: 100%;
    bottom: 0px;
    text-align: center;
}
.footer a{
    color: white;
    font-size: 40px;
    padding: 10px;
    margin: 0;
}
.footer p{
    color: white;
    font-size: small;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    margin: 0;
}
.footer a:hover{
    color: #5f92d2;
}