.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; position: relative;}

.getready { display: none;}
.form-horizontal .form-group { margin-right: 0px;margin-left:0px;}
.user-aside { width: 300px; margin: 20px 30px 20px 0; padding: 15px; background-color: #fff; border-radius: 4px; box-shadow:0 0 10px 0 #313131; font-size: 14px; color: #222;position: relative;padding-bottom: 0px;    margin-bottom: 0px;}
.leftanv{display: none;}
@media screen and (max-width: 786px) {
  .container {flex-wrap: wrap;}
  .user-aside {width: 100%; margin: 0 0 15px;}

  .leftanv {display: block; box-shadow: 0 0 20px 0 #00000017; background-color: #fff;width: 100%; padding: 12px; text-align: left; margin-bottom: 19px; border-radius: 6px; margin-top: 4px;font-weight: bold;padding-left: 15px; color: #5f5f5f;position:relative}
  .leftanv .avatar{width:30px;height:30px;display: inline-block;margin-right: 8px;}
  .leftanv .avatar img{width:100%;border-radius:212px}
  .leftanv i{	 position: absolute; right: 15px;font-size: 23px;top: 14px;opacity: 0.8;}
  .leftanv .level-label{color: #fff;transform: scale(0.8);     display: inline-block;font-weight: bold;font-size: 12px;background: #ff9b01;border-radius: 21px;padding: 0px 6px; position: relative;left: 2px;}


}
.aside-header {display: flex; flex-direction: column; align-items: center; margin-bottom: 20px;}
.user-aside .avatar-box {position: relative; width: 90px; height: 90px; margin-bottom: 20px; }
.user-aside .avatar {width: 100%;border-radius: 50%;box-shadow: 0 0 10px 0 #ece7fe;}
.user-aside .btn-edit {display: flex; justify-content: center; align-items: center; position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; background-color: #fff; border-radius: 50%; border: 1px solid #aaa; color: #777;}
.user-aside .username {margin-bottom: 10px;display: flex;}
.user-aside .username .btn-default{padding: 0 5px;background: none;height: inherit;}
.user-aside .username .btn-certified i{color: #ae1915;}
.user-aside .username .btn-under-certification i{color: #FF9C01;}
.user-aside .progress {width: 120px; height: 10px; margin-bottom: 0;}
.user-level {display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 10px; color: #ff9b01;}
.level-label {margin-right: 5px;}
.user-id {margin-bottom: 10px;}
.amount {display: flex; align-items: center;}
.extension {margin-top: 20px;width: 200px;margin-left: 0px;}
.extension .btn-withdraw{width: 100%;}
.extension .btn-withdraw i{font-size: 12px;font-weight: bold;margin-left: 15px;}
.modal-body .promotion-code{font-size: 24px;}
.modal-body .promotion-code span{color: #f60;}
.modal-body .instructions{line-height: 30px;font-size: 12px;color: #666;}
.modal-body .instructions span{font-weight: 600;padding-right: 5px;color: #666;}
.modal-body .explain{margin-top: 20px;color: #ae1915;}

.job-logo { padding-top: 23px;    padding-bottom: 21px;width: 167px;}

.job-title {
    font-size: 19px;
    color: #fff;
    padding-left: 15px;
    top: 30px;
    position: relative;
}
.btn-withdraw {height: 24px; margin-left: 10px; border-radius: 15px !important;  }

.nav-item {display: flex; align-items: center; width: 250px; height: 50px; margin: 0 auto 30px; padding: 0 20px;}
.nav-item.active,
.nav-item:hover {box-shadow: 0 0 30px 0 #e4e4e4;}
.nav-item a {display: flex; justify-content: center; align-items: center; width: 150px; height: 34px; padding-left: 40px; background: url(../images/icon/user-center.png) #fff no-repeat; transform: scale(0.8); font-size: 16px; color: #a6b0cb;}
.nav-item.active a,
.nav-item:hover a {background: url(../images/icon/user-center-activer.png) #fff no-repeat; color: #222;}
.nav-item:first-child a {background-position: 0 -16px;}
.nav-item:nth-child(2) a {background-position: 0 -128px;}
.nav-item:nth-child(3) a {background-position: 0 -240px;}
.nav-item:nth-child(4) a {background-position: 0 -348px;}
.nav-item:nth-child(5) a {background-position: 0 -461px;}
.nav-item:nth-child(6) a {background-position: 0 -572px;}
.nav-item:nth-child(7) a {background-position: 0 -682px;}
.nav-item:nth-child(8) a {background-position: 0 -790px;}
.nav-item:nth-child(9) a {background-position: 0 -898px;}
@media screen and (max-width:786px) {
  .nav-item {width: 250px; height: 50px; margin: 0 auto 10px; padding: 0 20px;}
  .nav-item.active,
  .nav-item:hover {box-shadow: 0 0 10px 0 #e4e4e4;}
  .btn{line-height: normal ;padding-top: 0;padding-bottom: 0;}
  .btn:hover{line-height: normal ;padding-top: 0;padding-bottom: 0;}
.job-title {display: none;}
  .userright {right: 8px;top: 7px;}
  .job-logo img {width: 197px;}

}
@media screen and (width:1024px) {
  header .logo a {width: 185px; height: 58px;}
}
.btn-exit {width: 100%; height: 40px; font-size: 14px; color: #fff;border: 0;outline: none;}

.userright a { color: #fff; font-size: 14px;     padding-left: 28px;}
.userright{ position: absolute; right: 19px; top: 40px;}


footer {position: relative;}


.user-main {flex: 1; margin-top: 20px; padding: 24px 40px; background-color: #fff; border-radius: 4px; box-shadow: 0 0 10px 0 #313131;    min-height: 1023px;}
@media screen and (max-width: 786px) {
  .user-main {margin-top: 0; padding: 24px 20px; box-shadow: 0 0 10px 0 #f1f0f6;    min-height: auto;}
}
.main-title {margin-bottom: 30px; padding-left: 16px; font-size: 18px; color: #222; border-left: 4px solid #65bccb;}


/* pagination */
.pagination {display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; margin: 40px 0 0;}
.pagination li + li {margin-left: 8px;}
.pagination li>a {display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; background-color: #fff; border: 1px solid #ddd !important; border-radius: 18px !important; color: #888 !important;}
.pagination li.total {padding: 8px; color: #888;}
.pagination li>a:hover,
.pagination li>a:active {background-color: #ff9393; border: 1px solid #ff9393 !important; color: #fff !important;}
.pagination li.active>a,
.pagination li.active>a:hover,
.pagination li.active>a:active,
.pagination li.active>a:visited {background-color:#65bccb !important; border: 1px solid #65bccb !important; color: #fff !important;}
.pagination li.disabled>a {background-color: #f5f5f5 !important; border: 1px solid #ddd !important; color: #888 !important;}


/* remind */
.user-aside .remind{position: absolute; right: 20px;cursor: pointer;}
.user-aside .remind span{width: 15px; height: 15px; background: red; position: absolute; border-radius: 50px; color: white; text-align: center; font-size: 12px;font-weight: 900;line-height: 15px;top: -6px;left: 10px;}
.user-aside .remind i{color: #ae1a15bb;font-size: 20px;}
.user-aside .remind i:hover{color: #ae1915;}
.modal-dialog .remind-content .remind-body{margin: 20px;}
.modal-dialog .remind-content .remind-body p{font-size: 14px;text-align: center;background: #F5F5F5;padding: 15px;margin-bottom: 20px;}
.modal-dialog .remind-content .remind-body .list-box {margin: 10px auto 0; width: 100%; height: 236px; opacity: 1; background: #f5f5f5;}
.remind-body .list-box .list-tle {padding: 10px 0 0; width: 100%; display: flex; justify-content: space-between; text-align: center;}
.remind-body .list-box .list-tle span{width: 50%;color: #999;}
.remind-body .list-box .list-ctn { height: 170px;overflow-y: auto;margin-top: 24px;}
.remind-body .list-box .list-ctn .ll-list li { margin-bottom: 26px;width: 100%;display: flex;justify-content:  space-between; text-align: center;}
.remind-body .list-box .list-ctn .ll-list li span{width: 50%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left:10px;}
::-webkit-scrollbar {width: 4px; background-color: transparent;}
::-webkit-scrollbar-thumb { height: 16px; background-color: #BE4745; border-radius: 4px;}


.no_data {background: url(../images/no_data.png) no-repeat center center;height: 129px;width: 100%;background-size: contain;float: left;margin: 30px 0;}
.username .tooltip-inner { color: #fff; background-color: #000;font-size: 12px}
.remind-body .tooltip-inner { color: #fff; background-color: #000;font-size: 12px}
.modal-dialog .tooltip-inner { color: #fff; background-color: #000;font-size: 12px}


.user-main .calendar {position: absolute;right: 40px;cursor: pointer;top: 40px;text-align: center;width: 50px;height: 50px;background: #198ea2;border-radius: 30px;display: inline-grid;align-items: center;opacity: .8;}
.user-main .calendar:hover{opacity: 1;}
.user-main .calendar a>p{font-size: 12px;}
.user-main .calendar a>i{font-size: 18px;}
.user-main .calendar a{color: #fff;}


footer .container{display: inherit;}
header .container{display: inherit;}

.job-close{display: none;}
.jobnav{display: none;}
.form-search{display:flex;align-items: center;}
.form-search{width: 100%;height:72px;box-shadow: 0 0 20px 0 #00000017;background-color: #fff;}
.form-search .btn-group{flex:1;padding:0px 12px;    border-right: 1px solid #ddd;}
.form-search .select {padding: 5px}
.form-search .btn-search{margin-right:22px;width:100px;position:relative;border-radius:55px;}
.form-search .btn-search button{background:#181c32;width:100%;border:0px;color:#fff;border-radius:55px;padding:4px 0px; cursor: pointer;opacity: 0.9;}
.form-search .btn-search button:hover{opacity:1}
.form-search .btn-search .loading{display:none;position:absolute;width:100%;height:100%;z-index:3;left:0px;font-size: 12px;text-align:center;line-height:28px; background:#b2b2b2;color:#fff;border-radius:55px;}
.form-search .select{border:0px;outline: none;}
.form-search input{border:0px;outline: none;width: 100%;}

@media screen and (max-width: 786px){
  .form-search{display:block;height:auto;padding:0px 12px 12px 12px}
  .form-search .btn-group{width:100%;margin-top:12px;border:0px;padding:0px}
  .form-search input,
  .form-search .btn-search{width:100%}
  .form-search input {text-indent: 8px;}
  .submit-group button {
    width: 100%;
    padding: 10px;
}
  .form-search .btn-search{margin-top:12px;}
    .userright a {padding-left: 10px;}


.user-aside {
    width: 92%;
    margin: 0 0 15px;
    position: absolute;
    top: -71px;
    z-index: 1;display: none;
}
.jobnav{color: #fff;position: absolute;right: 0px;right: 14px;padding: 10px;display: block;}

.job-close {
    color: #000;
    position: absolute;
    left: 21px;display: block;
    top: 4px;
    padding: 10px;
    z-index: 2;
    color: #666;
}


}