.btn {display: flex; justify-content: center; align-items: center; outline: none; border: 0;}
.btn:focus {outline: none !important; border: none !important;box-shadow: none;}
.btn:hover{outline: none !important; border: none !important;}
.btn i+span {margin-left: 5px;}
.container {display: flex; align-items: flex-start;}

.filter { width: 100%;height: 72px;box-shadow: 0 0 20px 0 #00000017;background-color: #65bccb;display: flex;align-items: center;    justify-content: space-between;}
.filter .balance p{font-size: 24px;color: #fff;padding-left: 40px;}
.filter .modal-header{border: none;}
.filter .modal-header .btn-primary{background: #fff;opacity: .9;width: 120px;height: 30px; border-radius:15px ;font-size: 14px;font-weight: 600;color: #000}
.filter .modal-header .btn-primary:hover{opacity: 1;}
.user-main .list{margin-top: 60px;}
.user-main .list .table th{border-bottom: 1px solid #ddd;line-height: 40px;color: #999;font-weight: 500;}
.user-main .list .table td{border-bottom:1px solid #eee;border-top: none;line-height: 60px;}
.user-main .list .table tr:last-of-type td{border-bottom: none;}
.user-main .list .table tbody tr:hover td{border-bottom:none;}
.user-main .list .table tbody tr:hover{background: #F8F8F8;border-top:none;}
.user-main .list .table tbody tr .money{color: #AE1916;}
.user-main .list .table tbody tr .wait-for{color: #ff9c01;font-weight: bolder;}
.user-main .list .table tbody tr .payment{color: #1677ff;font-weight: bolder;}




@media screen and (max-width: 786px) {
    .user-main {margin-top: 0; padding: 24px 20px; box-shadow: 0 0 10px 0 #f1f0f6;}
    .filter .balance p {font-size: 14px; padding-left: 10px;}
    .table-responsive{border: none;}
    .user-main {  width: 100%;}
    .filter .modal-header .btn-primary {width: 80px;padding: 0;line-height: normal;}
}