html, body {
    height: 100%;
    background:#f5f6ff;
}

.angle, .overlay {
    position: relative;
    z-index: 1;
}

.overlay:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(72, 44, 191);
    background: -webkit-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
    background: -o-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
    background: linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#482cbf', endColorstr='#6ac6f0', GradientType=1);
    opacity: 0.8;
    z-index: -2;
}

.mainmenu-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
    padding: 15px;
    background: transparent;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.mainmenu-area:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(72, 44, 191);
    background: -webkit-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
    background: -o-linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
    background: linear-gradient(45deg, rgba(72, 44, 191, 1) 0%, rgba(106, 198, 240, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#482cbf', endColorstr='#6ac6f0', GradientType=1);
    z-index: -1;
    opacity: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.mainmenu-area .navbar-brand {
    float:left;
}

.mainmenu-area .navbar-brand img {
    height: 40px;
}

.home-area {
    width: 100%;
    background: url(/assets/images/kantor_walikota_palembang.jpg) no-repeat scroll center bottom / cover;
    padding-top: 26vh;
    color: #ffffff;
    margin-bottom: 100px;
}

.header-title {
    display: inline-block;
}
.header-title > *, .header-title-mobile > * {
    margin:0;
}
.header-title > h6, .header-title-mobile > h6 {
    color:white;
    font-weight: bold;
}
.header-title > h7, .header-title-mobile > h7 {
    color:#cfcfcf;
}

.header-title-mobile {
    display: none;
}

.invoice-form {
    color:black;
}

.show{
    display: block;
}

header{
    position: fixed;
    top:0;
    left:0;
    right:0;
    background-color: white;
    box-shadow:10px 0 10px 0px rgba(0,0,0,0.6);
    height: 50px;
    overflow: hidden;
    z-index: 999;
}
header>a{
    display: block;
    text-decoration: none;
    color:black;
    height: 50px;
    width: 50px;
    padding:12px;
    text-align: center;
    float:left;
}
header>div{    
    padding:12px 12px 12px 0;
    float:left;
    width: calc(100% - 50px);
}
header h6{
    display: inline-block;
    margin:0;
    color:black;
}
.header-logo{
    float:right;
    max-height: 25px;
}

.invoice {
    padding-top:80px;
    padding-bottom:80px;
}

.invoice .card {
    margin-bottom:20px;
}
.invoice .card-body {
    padding-left:10px;
}

.invoice-info .lnr {
    padding-right:4px;
}

.invoice .card h6 {
    font-size:13px;
}
.invoice-info span {
    display: block;
    margin:0;
    font-size:13px;
    color:#a7a7a7;
    padding-left:21px;
}
.invoice-item {
    border-bottom:1px solid #eee;
    padding:6px 0;
}

.invoice-item span {
    display: block;
    margin:0;
    font-size:11px;
    color:#a7a7a7;
}
.invoice-item .item-title{
    display: block;
    margin:0;
    font-size:13px;
    color:black;
}
.invoice-item .item-price{
    text-align:right;
    display: block;
    margin:0;
    font-size:13px;
    color:#a7a7a7;
}
.invoice-price {
    margin-top:10px;
}
.invoice-price p{
    display: block;
    margin:0;
    font-size:13px;
    color:#a7a7a7;
}
.invoice-price p>span{
    float:right;
    font-size:13px;
}
.invoice-price p.total{
    color:black;
}

.invoice-method span{
    display: block;
    padding-top:8px;
    font-size: 14px;
}
.copy{
    color:#05a985;
    font-weight: bold;
    text-decoration: none;
}

.footer-button{
    box-shadow:-10px 0 10px 0px rgba(0,0,0,0.6);
    padding:12px;
    background-color: white;
    position: fixed;
    bottom:0;
    left:0;
    right:0;
}

.payment-method{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 99999;
    background:#f5f6ff;
    display: none;
}

.method {
    margin-top:80px;
    margin-bottom:80px;
}

.method-item > a {
    overflow: hidden;
    padding:12px;
    background-color: white;
    border-bottom:1px solid #eee;    
    display: flex;
    align-items: center;
    text-decoration: none;
    color:black;
}
.method-item > a:hover, .method-item > a:focus {
    background-color: #eee;
    color:black;
}

.method-item > a > img {
    max-width: 50px;
    margin-right:20px;
}

.method-item > a > span {
    color:black;
    font-size:15px;
    flex:0 80%;
}

.method-item > a > i {
    float:right;
    color:#198754;
    display: none;
}

.method-item > a.active > i {
    display: block;
}

.alert-message{
    text-align: center;
}

.alert-message>i{
    font-size:50px;
    color:red;
}

.alert-message>p{
    color:black;
    margin:0;
}
.loading{
    text-align: center;
    padding:20px;
}

.loading .spinner-border{
    height: 50px;
    width: 50px;
}

.modal {
    z-index: 105500;
}
.modal-backdrop {
    z-index: 105000;
}