body, h1, h2, h3, h4, h5, h6, a, b, div, p, td, th, span, li, label, textarea, input, button {
  /*font-family: "Microsoft YaHei", sans-serif !important;*/
  -ms-overflow-style: none;
}

@font-face { font-family: Shabnam; src: url('/static/fonts/Shabnam.ttf'); }

body.shabnam {
  font-family: Shabnam !important;
}
div.shabnam {
  font-family: Shabnam !important;
}


.row::-webkit-scrollbar{
  display: block;
  width: 6px;
  height: 6px;
}
.row::-webkit-scrollbar{
  display: block;
  width: 6px;
  height: 6px;
}
.row::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 3px
}
.row::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 3px
}
.row::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

.no-scrollbar::-webkit-scrollbar{
  display: none;
}

div::-webkit-scrollbar {
    /*display: none;*/
}

a {
  cursor: pointer;
}

a.btn-gradient-primary, a.btn-gradient-info, a.btn-gradient-warning, a.btn-gradient-danger, a.btn-gradient-success {
  color: #fff !important
}

.none{ display: none !important}
.absolute{ position: absolute !important}

.btn{ margin-right: 10px }

.no-padding{
  padding: 0px !important;
}

.no-margin{
  margin: 0px !important;
}

.inline{
  display: inline-block !important;
}

.background-grey{
  background-color: #eee;
  margin-bottom: 10px;
}
.loading img{
  margin: 20px;
  width: 32px;
}

.form-group{
  margin-bottom: 0.5rem !important
}
.form-control, .input-group-text{
  padding: 0.55rem 0.55rem !important
}

.btn{
  padding: 0.69rem 1.5rem 0.4rem 1.5rem
}

.form-check .form-check-label{
  line-height: 1.3 !important;
  cursor: pointer;
}

select.form-control{
  color: #333;
}

input.prefix{
  padding-left: 30px !important;
}

.input-group-append .input-group-text, .input-group-prepend .input-group-text{
  color: #999;
}

.radio-group{
  margin: 0px !important;
  margin-left: 10px !important
}

.radio-group .left{
  border-radius: 5px 0px 0px 5px;
  border-right: 0px !important;
}

.radio-group .middle{
  border-radius: 0px 0px 0px 0px;
}

.radio-group .right{
  border-radius: 0px 5px 5px 0px;
}

.radio-group .form-check{
  border: 1px solid #eece48;
  background-color: #ffffff;
  display: inline-block;
  padding: 5px;
  margin: 0px;
  color: #eece48;
  cursor: pointer;
}

.radio-group .form-check.active{
  background-color: #eece48;
  color: #ffffff;
}

.radio-group .form-check:hover{
  background-color: #eece48;
  color: #ffffff;
}

.alert_background{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10002;
  overflow-y: scroll;
}

.simple_alert_popup{
  width: 600px;
  height: auto;
  max-width: 96%;
  min-width: 50%;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 0px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


@media (min-height: 750px) {

  table.showcase-list th, .table td {
    word-break: break-word;
  }

  .alert_popup{
    width: 600px;
    height: auto;
    max-width: 96%;
    min-width: 50%;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    /*padding-bottom: 10px;*/

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .custom-list-item{
    border-radius: 0px;
    border-bottom: 1px solid #ccc;
  }
}
@media (max-height: 750px) {
  .alert_popup{
    width: 600px;
    height: auto;
    max-width: 96%;
    min-width: 50%;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    /*padding-bottom: 10px;*/

    margin-top: 5%;
  }

  .custom-list-item{
    border-radius: 10px;
    border: 1px solid #ccc;
  }
}

.alert_title{
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #ee2255;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #6F6950;
}
.alert_message_container{
  padding: 10px;
  text-align: center;
  min-height: 150px;
  width: 100%;
  word-wrap: break-word;
  max-height: 60%;
  display: table;
}
.alert_message{
  display: table-cell;
  vertical-align: middle;
}
.alert_button{
  margin: 0px 20px;
}

.alert_button a{
  cursor: pointer;
  color: #ee2255;
  margin: 10px 20px;
  border: 1px solid #ee2255;
  padding: 5px 10px;
  border-radius: 5px;
}

.alert_button a:hover{
  cursor: pointer;
  color: #6F6950;
  margin: 10px 20px;
  border: 1px solid #ee2255;
  padding: 5px 10px;
  border-radius: 5px;
  background:  #ee2255
}

@media (max-width: 960px) {
  .card .card-body {
    padding: 10px 10px !important;
  }

  .card .card-body.p-4 {
    max-height: calc(100vh - 160px);
    overflow-y: scroll;
  }

  .purchase-popup {
    display: block !important;
  }

  .content-wrapper {
    padding: 10px !important;
  }

  .p-5 {
    padding: 10px !important;
  }

  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
    padding-left: 0px;
    padding-right: 0px;
  }

  .purchase-button {
    margin-top: 20px
  }

  .alert_button{
    margin-bottom: 5px
  }

  .row{
    margin-right: 0px;
    margin-left: 0px;
    margin: 0px 0px;
  }

  .campaign-list{
    padding: 0px 0px !important;
  }

  .campaign-list .row.w-100.col-12{
    margin: 0px 0px !important;
  }
}

.robot-setting-list .row{
  background-color: #fafafa;
  padding: 10px 0px;
  margin-bottom: 10px !important;
}

.robot-setting-list .row .col-form-label{
  vertical-align: top;
}
.robot-setting-list .row .item-tag{
  display: inline-block;
  min-width: 50%;
}

@media (max-width: 575px) {
  .robot-setting-list .btn-remove1{
    display: none !important;
  }
}


@media (min-width: 576px){
  .robot-setting-list .btn-remove2{
    display: none !important;
  }
}

/*
@media (max-width: 575px) {
  .robot-setting-list .first-row{
    display: none !important;
  }
  .robot-setting-list .col-sm-2{
    background-color: #fafafa;
    padding: 5px 10px;
  }
  .robot-setting-list .col-sm-2 .col-form-label{
    padding: 5px 10px;
  }
}
@media (min-width: 576px){
  .robot-setting-list .item-tag{
    display: none !important;
  }
}*/

.showcase-list tbody tr td label{
  margin-bottom: 0px;
}


.showcase-list tbody tr td span{
  display: none
}

.showcase-grid {

}

.showcase-grid tbody {
}

.showcase-grid tbody tr {
  border: 2px solid #ebedf2;
  margin: 5px 0px !important;
  display: inline-block;
  border-radius: 10px;
}

/*
.showcase-grid tbody tr {
    border: 1px solid #ebedf2;
    margin: 5px 0px !important;
    display: inline-block;
    padding: 0px !important;
    border-radius: 10px;
    overflow: hidden;
}
*/

@media (max-width: 1000px) {

  .showcase-grid tbody tr {
    width: 100%;
  }
}
@media (min-width: 1000px) and (max-width: 1500px) {

  .showcase-grid tbody tr {
    width: 48%;
    margin-right: 1% !important;
  }
}
@media (min-width: 1500px) {

  .showcase-grid tbody tr {
    width: 32%;
    margin-right: 1% !important;
  }
}

.showcase-grid th{
  display: none
}

.showcase-grid td{
  display: block;
  padding: 5px;
}

.showcase-grid a.badge{
  max-width: 70vw;
}

.showcase-grid tbody tr td label{
  margin-bottom: 0px;
}

.showcase-grid tbody tr td span.mb-2{
  margin-bottom: 0px !important;
}
.showcase-grid tbody tr td span{
  display: inline-block;
  background-color: #eece48;
  color: #fff;
  padding: 10px 20px;;
  margin-right: 10px;
  border-radius: 5px;
}

/*
.showcase-grid tbody tr td span {
    display: inline-block;
    background-color: #fafafa;
    color: #333;
    padding: 10px 20px;
    margin-right: 10px;
    padding-top: 15px;
}
*/



@media (max-width: 1199px) {
  .vip-list {
    display: block
  }
  .vip-table {
    display: none
  }

  .historylist {

  }

  .historylist tbody {
  }

  .historylist tbody tr {
    border: 2px solid #ebedf2;
    margin: 5px 0px !important;
    display: block;
    border-radius: 10px;
  }

  .historylist th{
    display: none
  }

  .historylist td{
    display: block;
    padding: 5px;
    word-break: break-word !important;
  }

  .historylist a.badge{
    max-width: 70vw;
  }

  .historylist tbody tr td span{
    display: inline-block;
    background-color: #eece48;
    color: #fff;
    padding: 10px 20px;;
    margin-right: 10px;
    border-radius: 5px;
  }

  .historylist tbody tr td span{
    margin-bottom: 5px;
  }
}

@media (min-width: 1200px) {
  .vip-list {
    display: none
  }
  .vip-table {
    display: block
  }

  .historylist tbody tr td span{
    display: none
  }
  .historylist th{
    word-break: break-word !important;
  }
  .historylist td{
    word-break: break-word !important;
  }
}



@media (max-width: 1199px) {
  .vip-list {
    display: block
  }
  .vip-table {
    display: none
  }

  .member-list {
    white-space: pre-wrap;      /* CSS3 */
    white-space: -moz-pre-wrap; /* Firefox */
    white-space: -pre-wrap;     /* Opera <7 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    word-wrap: break-word;      /* IE */
  }

  .member-list tbody {
  }

  .member-list tbody tr {
    border: 2px solid #ebedf2;
    margin: 5px 0px !important;
    display: block;
    border-radius: 10px;
  }

  .member-list th{
    display: none;
    word-break: break-word !important;
  }

  .member-list td{
    display: block;
    padding: 5px;
    word-break: break-word !important;
  }

  .member-list a.badge{
    max-width: 70vw;
  }

  .member-list tbody tr td span{
    display: inline-block;
    background-color: #eece48;
    color: #fff;
    padding: 10px 20px;;
    margin-right: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
  }

}

@media (min-width: 1200px) {
  .vip-list {
    display: none
  }
  .vip-table {
    display: block
  }

  .member-list tbody tr td span{
    display: none
  }

  .member-list th{
    word-break: break-word !important;
  }

  .member-list td{
    word-break: break-word !important;
  }

}

.vip-card {
  display: block !important;
  margin-bottom: 50px;
  padding: 0px !important;
  vertical-align: top;
  border-bottom: none !important;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  position: relative;
}
.vip-option{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.vip-title {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
  color: black;
  font-weight: bold;
  margin-left: 0px;
  margin-right: 0px;
}
.vip-content {
}
.vip-content-wrapper {
  padding: 20px;
  margin-bottom: 20px;
}

.vip-button-row {padding: 5px 20px}
.vip-button-row .vip-button-column {display: inline-block; width: 50%;
padding: 0px 10px;}
.vip-button-row .vip-button-column button {
  padding: 0.875rem 1rem
}

.popup_error_message {
  position: fixed;
  bottom: 30px;
  left: 0px;
  z-index: 999999;
  cursor: pointer
}

.menu-title{
  font-weight: bold;
  text-align: center;
  width: 100%
}

.card-tab{
  background: #ddd;
  padding: 10px;
  border-radius: 10px 10px 0px 0px;
  text-align: center;
  width: 25%;
  display: flex;
}

.card-tab div{
  text-align: center;
  width: 100%;
}

.card-tab.active{
    background: #fff;
}

.card-tab.inactive{
    cursor: pointer
}

.card-tab.inactive:hover{
    background: #eee;
    cursor: pointer
}


.campaign-item span, .campaign-item textarea{
  border: none;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px !important;
}

.campaign-item span.input-group-text{
  background-color: #f0f0f0;
  display: inline-block;
}

.campaign-item div{
  margin: 0px;
  padding: 0px;
}

.campaign-item div.header{
  display: block;
  border: none;
}

.campaign-item div.header span{
  display: block;
  border: none;
}

.campaign-item div.sub-header{
  display: block;
  border: none;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.status-indicator{
  display: inline-block !important;
  border-radius: 7px !important;
  height: 14px !important;
  width: 14px !important;
  margin-left: 6px !important;
  position: relative !important;
  top: 2px !important;
  padding: 0px !important;
}

.chart-body {
  width: 150vh;
  max-width: 90%;
  margin: auto;
}

.essay img{
  max-width: 100%;
}

input.field, td input.field:disabled{
  border: none;
  background: none;
}

.list-select-icon.active{
  color: #1bcfb4 !important;
}


.list-select-icon:hover{
  color: #ccc !important;
}

.list-select-icon.active:hover{
  color: #1bcfb4 !important;
}

.lfangk{
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url(/static/images/lfangk2.png);
  background-position: center;
  background-position-y: 7px;
  background-size: 22px 22px;
  background-repeat: no-repeat;
}

.lfangk:hover{
background-image: url(/static/images/lfangk2o.png);
}

.lfangk-active{
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url(/static/images/lfangk2a.png);
  background-position: center;
  background-position-y: 7px;
  background-size: 22px 22px;
  background-repeat: no-repeat;
}

.lfangk-active:hover{
background-image: url(/static/images/lfangk2a.png);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-img{
  width: auto !important;
}

@media (max-width: 720px) {
  .newview, .newview2{
    margin: 0px 10px !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
  }

  .newview table{
    min-width: default;
  }
  .newview2 table{
    min-width: default;
  }
}


@media (min-width: 720px) and (max-width: 960px) {
  .newview, .newview2{
    margin: 0px 10px !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
  }

  .newview table{
    min-width: 800px
  }
  .newview2 table{
    min-width: 600px
  }
}

@media (min-width: 960px) and (max-width: 1200px) {
  .newview, .newview2{
    margin: 0px 25px !important;
  }

  .newview table{
    min-width: 900px
  }
  .newview2 table{
    min-width: 700px
  }
}

@media (min-width: 1200px) {
  .newview, .newview2{
    margin: 0px 25px !important;
  }
  .newview table{
    min-width: 1000px
  }
  .newview2 table{
    min-width: 800px
  }
}

.newview .title, .newview2 .title{
  font-size: 16px;
  font-weight: bold;

}

.newview .td, .newview2 .td{
  border-bottom: none;
}

.newview img.arrow-2 , .newview2 img.arrow-2 {
  height: 8px;
  width: 8px;
  border-radius: 0px;
  margin-right: 2px;
  vertical-align: top;
}
.newview img.arrow-3 , .newview2 img.arrow-3 {
  height: 14px;
  width: 14px;
  border-radius: 0px;
  margin-right: -2px;
  vertical-align: top;
}

.newview img.arrow , .newview2 img.arrow {
  height: 16px;
  width: 16px;
  margin-top: -4px;
  margin-left: 4px;
  margin-right: 4px;;
  vertical-align: top;
}

.newview img.update , .newview2 img.update {
  height: 16px;
  width: 16px;
  margin-top: -2px;
  margin-left: 4px;
  margin-right: 4px;
}

div.newview table th, div.newview2 table th{
  color: #ccc;
  padding-bottom: 8px !important;
}

div.newview table tr.white-space th, div.newview2 table tr.white-space th{
  border-bottom: none;
  padding-bottom: 0px !important;
  height: 0px;
}

.newview table th, .newview table td, .newview2 table th, .newview2 table td{
  border-top: none;
  padding: 15px 10px 0px 10px !important;
  white-space: nowrap;
  vertical-align: top;
}

.newview {
  overflow-x: auto;
}

.newview .title {
  position: sticky;
  left: 0;
}


.newview tr>th:first-child, .newview tr>td:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
  min-width: 80px;

  white-space: nowrap;
}


.newview .item1-1 , .newview2 .item1-1 {
    width: 20px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    /*opacity: 0.15;*/
    position: relative;
    transform: translateX(10px);
    /*height: 35px;
    margin-top: -35px;*/

    height: 50px;
    margin-top: -45px;
    margin-left: -3px;
}

.newview .item1-1::before , .newview2 .item1-1::before {
    position: absolute;
    right: -4px;
    bottom: -4px;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    margin-left: -3px;
}

.newview .item1-0 , .newview2 .item1-0 {
  height: 42px;
  margin-top: -37px;
}

.newview .item1-2 , .newview2 .item1-2 {
    /*height: 50px;
    margin-top: -45px;*/

    height: 42px !important;
    margin-top: -38px !important;
}

.newview tr td{
  /*position: relative !important;*/
}
.newview tr td .coin{
  position: relative !important;
  z-index: 999;
}

.newview2 {
  overflow-x: auto;
}

.newview2 .title {
  position: sticky;
  left: 0;
}

.newview tr>td:first-child, .newview2 tr>td:first-child{

  /*border-right: 1px solid #ebedf2;*/
}

.newview2 tr>th:first-child, .newview2 tr>td:first-child {
  position: sticky;
  left: 0;
  background-color: #fff;
  min-width: 80px;
  max-width: 100px;
  white-space: nowrap;
}


img.coin{
  width: 14px !important;
  height: 14px !important;
  margin-right: 4px !important;
  margin-top: -2px !important;
  background-color: #fff !important;
}

.newview tr, .newview2 tr{
overflow: hidden;
}

th.shadow-effect, td.shadow-effect{
  position: absolute;
  background-image: url(/static/images/shadow.png);
  background-repeat: repeat-y;

  width: 1px;
  background-color: inherit;
  opacity: 0;
}

.newview table thead th.shadow-effect, .newview2 table thead th.shadow-effect{
  padding-bottom: 22px !important;
}

.newview table tbody th.shadow-effect{
  padding-bottom: 36px !important;
}

.newview td, .newview2 td{
  height: 50px;
}

.price-label{
  vertical-align: top;
  display: initial;
}

div.label_plus, .label_minus{
  display: inline-block;
  vertical-align: top;
  padding: 0px 4px;
}

div.label_plus label{
  padding: 2px 4px 0px 4px;
  border-radius: 5px;
  color: white;
  display: inline-block;
  vertical-align: top;
  margin-top: -3px;
  background-color: #26a69a !important
}

div.label_minus label{
  padding: 3px 6px 0px 6px;
  border-radius: 5px;
  color: white;
  display: inline-block;
  vertical-align: top;
  margin-top: -3px;
  background-color: #ef5350 !important
}



.bubble-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bubble-content img{
  width: 16px;
  height: 16px;
}

.bubble-content:hover .texta-box {
    display: block;
}

.bubble-content .query {
    opacity: 0.5;
    cursor: pointer;
}

.bubble-content:hover .query {
    opacity: 1 !important;
}

.bubble-content .texta-box {
    width: 300px;
    position: absolute;
    top: 20px;
    left: 4px;
    z-index: 100;
    padding-top: 4px;
    display: none;

}

.bubble-content .texta {
    display: inline-block;
    background-color: #fff;
    color: #343842;
    border-radius: 0px 6px 6px 6px;
    padding: 16px;
    line-height: 17px;
}

.card-body .form-check{
  position: relative;
  display: inline-flex;
  margin-top: 15px;
  margin-bottom: 10px;
  padding-left: 0;
}

.card-body .form-check .form-check-input{
  display: inline-block;
  margin-left: -2rem;
  margin-top: -3px !important;
  position: relative;
}

.card-body .form-check .form-check-label{
  display: inline-block;
  margin-left: 4px;
}

.sidebar {
  z-index: 10001;
}

.link-primary{
  color: #eece48 !important;
}
.link-primary:hover{
  color: #ffe98e !important
}