body{
    background: whitesmoke !important;
}
.page{ min-height: 90vh !important;}
.active{color: #00aced !important;}
.bg-wrapper{
    position: fixed;
    top: 60px;
    left: 0;
    z-index: -1;
    width: 100%;
    filter: saturate(50%);
}
.bg-wrapper img{
    width: 100%;
}
.navbar{
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}
.user-meta{
    background: whitesmoke;
    padding-left: 34px;
    padding-bottom: 1px;
}
.meta-inner{
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}
.navbar a:active{
    color: #00aced !important;
}
.collapse{background: transparent !important;}
p{
    font-size: 80% !important;
    }
.container-fluid{
    max-width: 768px;
}
.brand{height: 30px;}
.nav-link{
    font-size: 90%;
    color: black;
    }
.glance-col{
    margin-top: 8px;

    }
.glance-panel{
    margin-top: 8px;
    margin-bottom: 0px;

}
.panel-inner.glance-info{
    padding: 16px;

}
.glance-panel h1{
    color: #00aced;
    font-weight: 600;
    margin-bottom: 16px;
}
.glance-panel p{
    margin-bottom: 0px;
    font-size: 130% !important;
}
.glance-info{
    background: rgba(255,254,254,.8) !important;
    text-align: center;
}
a.glance-link{
    color: black !important;
}
a.glance-link:hover{
    color: #00aced !important;
    text-decoration: none;
}
.panel{
    padding: 2px;
    /*padding-bottom: 15px;*/
    text-align: left;
    }
.panel-header{
    font-size: 80%;
    color: #888;
    }
.panel-inner{
    border: 2px solid whitesmoke;
    background: white;
    padding: 24px;
    border-radius: 3px;
    margin-bottom: 8px;
}
.list-panel{padding-bottom: 3px;}
.list-panel p{
    display: inline-block;
    width: 40%;
    margin-bottom: 3px;
    }
.transaction{
    padding: 10px;
    border-top: 1px solid whitesmoke;
}
.transaction h5{
    font-size: 90%;
    font-weight: 600;
    color: black;
}
.transaction p{
    color: #666;
    font-size: 87%;
}
.pdf{
    margin-top: 20px;
    margin-bottom: 20px;
}
table{
    /*display: inline-block;
    width: 200px;*/
    width: 100%;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 24px;
    }
table p{
    margin-bottom: 0px;
}
tr:nth-child(even) {background-color: #dcdcdc;}
th{
    font-weight: 600;
    font-size: 90%;
    color: #888;
    }
td{
    padding: 8px;
    font-size: 80% !important;
    }
.red{ color: #ee3030;}
footer{
    background: #dcdcdc;
    text-align: center;
}
.footer-inner{
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    color: black;
    padding: 8px;
}
.footer-inner p{
    margin-bottom: 0px;
}
.auto-logged-out{
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    height: 80vh;
}
/*************LOGIN*************/
#login-panel{
    max-width: 400px;
    background: whitesmoke;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(50%);
    border-radius: 3px;
    text-align: center;

}
#login-panel-inner{
    text-align: left;
    width: 300px !important;
    margin-left: auto;
    margin-right: auto;
}
label{
    display: block !important;
    width: 100%;
    }
input[type="text"], input[type="password"]{
    padding: 8px;
    background: white;
    min-width: 300px;

}
.as-of p{
    font-size: 90%;
    margin-bottom: 0px;
}
@media screen and (max-width: 768px){
   .collapse{background: #dcdcdc !important}
}

@media screen and (max-width: 576px){
   .collapse{background: #dcdcdc !important;}
   .navbar-nav{
        text-align: center !important;
   }
   .bg-wrapper{
        height: 100vh;
        width: auto !important;
   }
   .bg-wrapper img{
        height: 100vh;
        width: auto !important;
   }
}