/* Media Queries Mixin */

/* Font size in REM with PX callbacl */

/* Font size in REM with PX callback */

/* Transitions Mixin */

/*Transition Scale */

/* Opacity Mixin CrossBrowser */

/* Background Image Mixin */

/* Font Face Mixin */

/* Placeholder Color Mixin */

/* Computes a top-shadow for a card effect. */

/* Computes a bottom-shadow for a card effect. */

/* Gives a card depth effect. */

/* RGBA background */

/* Main Color Variables */

/* Media Queries Varaibles */

body,
html {
  background-color: #edecec;
  font-family: 'Noto Sans', 'Microsoft YaHei',sans-serif !important;
  color: #4d4d4d;
  font-size: 100%;
}

body h1,
html h1 {
  font-size: 50px;
  font-size: 3.125rem;
}

body h2,
html h2 {
  font-size: 40px;
  font-size: 2.5rem;
}

body h3,
html h3 {
  font-size: 30px;
  font-size: 1.875rem;
}

[data-page="login"],
[data-page="login"] body {
  background-color: #4285f4;
  height: 100% !important;
}

a {
  outline: none !important;
}

#wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  top: 50px;
}

#wrapper #page-wrapper {
  padding: 0 15px;
  min-height: 40em;
  overflow: hidden;
}

#wrapper #page-wrapper #github {
  bottom: 0;
  width: 100%;
  text-align: center;
  margin-top: 8em;
  color: #999999;
}

#wrapper #page-wrapper #github img {
  width: 30px;
}

#wrapper #page-wrapper #github i {
  font-size: 2em;
}

#wrapper #page-wrapper #github a {
  color: #999999;
}

#wrapper #page-wrapper #github a:hover {
  color: #4285f4;
  text-decoration: none;
}

@media (min-width: 768px) {
  #wrapper #page-wrapper {
    position: inherit;
    margin: 0 0 0 200px;
    padding: 0 30px;
  }
}

#navbar {
  position: fixed;
  width: 100%;
  top: 0;
  margin-bottom: 0;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: 1px solid #edecec;
}

#navbar .navbar-right {
  margin-right: 20px;
  margin-top: 20px;
}

#navbar .navbar-right a {
  color: #666666;
}

#navbar .navbar-right a:hover {
  color: #4285f4;
}

#navbar .navbar-right .active {
  color: #4285f4;
  text-decoration: underline;
}

#navbar .navbar-logo img {
  width: 80px;
  margin-left: 1em;
  margin-top: 1.1em;
}

#navbar #toggle-sidebar {
  margin-left: 130px;
  margin-top: 27px;
  cursor: pointer;
  color: #0b51c5;
}

#navbar .custom_collapse {
  width: 1.5em;
  height: 2px;
  background-color: #0b51c5;
  margin: 0.3em 0em;
}

#navbar .admin-user {
  margin-right: 1em;
}

#navbar .admin-user,
#navbar .logout {
  position: relative;
}

#navbar .admin-user i,
#navbar .logout i {
  display: block;
  float: left;
  margin-top: 0.4em;
  margin-right: 0.2em;
}

#sidebar {
  height: 100%;
  position: fixed;
  top: 50px;
  background-color: #ffffff;
  border-right: 1px solid #d4d2d2;
}

@media (max-width: 767px) {
  #sidebar {
    width: 100%;
    z-index: 20;
    height: auto;
    margin-top: 0.7em;
  }
}

.sidebar .sidebar-nav.navbar-collapse {
  padding-right: 0;
  padding-left: 0;
}

.sidebar ul li a {
  color: #666666;
}

@media (max-width: 767px) {
  .sidebar ul li a {
    width: 100%;
  }
}

.sidebar ul li a i {
  display: block;
  float: left;
  margin-right: 0.3em;
  margin-top: 0.4em;
}

.sidebar .active a {
  background-color: #f44336 !important;
  color: #ffffff !important;
}

.sidebar ul li {
  border-bottom: 1px solid #e6e6e6;
}

@media (min-width: 768px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    width: 200px;
  }

  .sidebar_links {
    margin-top: 50px;
  }

  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}

.dashboard-link {
  text-decoration: none !important;
}

.count-container {
  height: 5em;
  color: #ffffff;
  text-align: center;
  line-height: 5em;
  font-size: 15px;
  font-size: 0.9375rem;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
  cursor: pointer;
  margin-bottom: 2em;
}

.count-container:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
  transform: scale(1.01);
}

.count-container .count-dark {
  font-size: 20px;
  font-size: 1.25rem;
  width: 40%;
  float: left;
}

.count-container .count-number {
  font-size: 20px;
  font-size: 1.25rem;
  margin-left: 0.5em;
}

.error-page-header {
  color: #f44336 !important;
}

.users-count {
  background-color: #dfca0f;
}

.users-count .count-dark {
  background-color: #c7b50d;
}

.posts-count {
  background-color: #9c27b0;
}

.posts-count .count-dark {
  background-color: #641971;
}

.galleries-count {
  background-color: #00bcd4;
}

.galleries-count .count-dark {
  background-color: #007888;
}

.under-approval-count {
  background-color: #8BC34A;
}

.under-approval-count .count-dark {
  background-color: #649130;
}

.under-review-count {
  background-color: #BA68C8;
}

.under-review-count .count-dark {
  background-color: #973da7;
}

.rejected-count {
  background-color: #FF9800;
}

.rejected-count .count-dark {
  background-color: #b36a00;
}

.pre-pass-count {
  background-color: #0C9B8E;
}

.pre-pass-count .count-dark {
  background-color: #07544d;
}

.pre-preview-count {
  background-color: #607D8B;
}

.pre-preview-count .count-dark {
  background-color: #41545e;
}

.account-reject-count {
  background-color: #f96b70;
}

.account-reject-count .count-dark {
  background-color: #f62129;
}

.account-pass-count {
  background-color: #55b7b7;
}

.account-pass-count .count-dark {
  background-color: #398787;
}

.review-preview-count {
  background-color: #b17e7e;
}

.review-preview-count .count-dark {
  background-color: #8d5555;
}

.review-reject-count {
  background-color: #e473e4;
}

.review-reject-count .count-dark {
  background-color: #d833d8;
}

.review-pass-count {
  background-color: #65a8ec;
}

.review-pass-count .count-dark {
  background-color: #2182e4;
}

.confirm-preview-count {
  background-color: #949292;
}

.confirm-preview-count .count-dark {
  background-color: #6e6c6c;
}

.confirm-reject-count {
  background-color: #a1a1f9;
}

.confirm-reject-count .count-dark {
  background-color: #5959f4;
}

.ready-count {
  background-color: #e09923;
}

.ready-count .count-dark {
  background-color: #a06c17;
}

.online-count {
  background-color: #3ba039;
}

.online-count .count-dark {
  background-color: #266825;
}

/* Count and search */

.count-search {
  width: 100%;
  overflow: hidden;
  padding-bottom: 1em;
  color: #999999;
}

.count-search .count {
  float: left;
  margin-top: 0.2em;
}

.count-search u {
  color: gray;
}

.count-search span {
  color: gray;
}

.count-search #search {
  float: right;
  position: relative;
  top: -0.2em;
}

.count-search #search input {
  outline: none;
  width: 15em;
  padding: 0.1em 0.3em;
}

@media (min-width: 768px) and (max-width: 991px) {
  .count-search #search {
    width: 12em;
  }
}

@media (max-width: 768px) {
  .count-search #search {
    float: left;
    clear: both;
    top: 0.3em;
    bottom: 0.5em;
    width: 100%;
  }

  .count-search #search input {
    width: 100%;
  }
}

.count-search #search .i-search {
  position: absolute;
  right: 5px;
  top: 6px;
  color: #a9a9a9;
}

.count-search #searchbox {
  float: right;
  position: relative;
  top: -0.2em;
  width: 15em;
}

.count-search #searchbox input {
  outline: none;
  padding: 0.1em 0.3em;
}

@media (max-width: 768px) {
  .count-search #searchbox {
    float: left;
    clear: both;
    top: 0.3em;
    bottom: 0.5em;
    width: 100%;
  }

  .count-search #searchbox input {
    width: 100%;
  }
}

.filter {
  color: #999999;
  margin-left: 10px;
  margin-top: 3px;
}

.filter div.col-sm-4 {
  text-align: right;
}

.filter div {
  padding-left: 5px;
  padding-right: 5px;
}

.filter select {
  margin-left: 0px;
  background-color: inherit;
}

.table-responsive {
  font-size: 14px;
  font-size: 0.875rem;
}

table,
tr,
td,
thead {
  border: none !important;
}

/* Table Actions */

.table-actions {
  width: 9em;
  min-width: 8em;
}

.table-actions a:nth-child(n+2) {
  margin-left: 1em;
}

.table-actions-review {
  width: 10em;
}

.action {
  background-color: #ffffff;
  width: 2em;
  height: 2em;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  text-align: center;
  border-radius: 0.5em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action .action-icon {
  color: #999999;
  line-height: 2em;
  font-size: 15px;
  font-size: 0.9375rem;
}

.action:hover {
  transform: scale(1.01);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}

.action-edit {
  margin-right: 0.5em;
}

/* Load More */

#loadmore {
  text-align: center;
}

#loadmore button {
  background-color: #4285f4;
  color: #ffffff;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

#loadmore button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}

/* Main pages header */

.page-header {
  color: #4d4d4d;
}

/* Panel heading */

.panel-heading {
  background-color: #999999;
  border-radius: 0;
  height: 3em;
  text-align: left;
  color: #999999;
}

.panel-heading a {
  line-height: 0.1em;
  color: #4285f4;
}

.panel-heading a:hover {
  text-decoration: underline;
}

.panel-heading a.btn {
  line-height: 1.5;
  color: #ffffff;
}

.panel-heading a.btn:hover {
  text-decoration: none;
}

/* Delete Modal */

.delete-modal {
  z-index: 200 !important;
  position: fixed;
  top: 4em;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  min-height: 10em;
  width: 90%;
  text-align: center;
  /*
  button {
    @include shaddow-box(1);
    background-color: inherit !important;
    &:hover {
      background-color: darken($white, 20%);
      @include shaddow-box(2);
    }
  }*/
}

.delete-modal .modal-content {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}

.delete-modal .dlt-btn {
  color: #ffffff !important;
  /*&:hover {
      background-color: darken($red, 20%);
    }*/
}

/* Operation Modal */

.operation-modal {
  z-index: 200 !important;
  position: fixed;
  top: 3em;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  min-height: 12em;
  width: 90%;
  /*
    button {
      @include shaddow-box(1);
      background-color: inherit !important;
      &:hover {
        background-color: darken($white, 20%);
        @include shaddow-box(2);
      }
    }*/
}

.operation-modal .modal-dialog {
  width: 100%;
}

.operation-modal .modal-content {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}

.operation-modal .dlt-btn {
  color: #ffffff !important;
  /*&:hover {
      background-color: darken($red, 20%);
    }*/
}

/* Preloader */

.preloader {
  background-color: #ffffff;
  padding: 0.2em 0.4em;
  border-radius: 50%;
  float: left;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.input-group {
  width: 100%;
}

.input-group select {
  background-color: inherit;
}

.form-group-upload {
  margin-top: 1em !important;
}

button {
  outline: none !important;
}

.btn {
  outline: none !important;
  box-shadow: none;
}

.user-roles select {
  width: 10em;
}

/* Submit button */

.btn-submit {
  color: #ffffff;
  background-color: #4caf50;
  font-size: 15px;
  font-size: 0.9375rem;
  padding: 0.5em 2em;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  margin-top: 3em;
}

.btn-submit:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  color: #ffffff !important;
}

/* Uploader */

.uploader .btn-upload {
  color: #ffffff;
  background-color: #4285f4;
  outline: none;
  margin-top: 1em;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

.uploader .btn-upload:hover {
  transform: scale(1.01);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}

.uploader input {
  filter: alpha(opacity=0);
  opacity: 0;
}

.uploader .upload-icon {
  display: block;
}

.ta-editor {
  border: 1px solid #edecec !important;
}

/* Images */

.image-container {
  width: 100%;
  overflow: hidden;
  clear: both;
  text-align: center;
  margin-bottom: 2em;
}

.image-container .a-image {
  width: 10em;
  height: 8em;
  overflow: hidden;
}

.image-container .a-image .not-image {
  color: #f44336;
  width: 9em;
  text-align: center;
}

.image-container .a-image .not-image p {
  margin: 0;
}

.image-container .a-image .not-image p:first-child {
  margin-top: 1em;
}

.image-container .a-image img {
  width: 10em;
  min-height: 8em;
}

.image-container .img-btn-container {
  background-color: #edecec;
  width: 10em;
  overflow: hidden;
  float: left;
  margin: 0.5em;
  height: 12em;
  border: 5px solid #edecec;
  border-radius: 0.2em;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  margin-bottom: 0.2em;
}

.image-container .img-btn-container .btn-dlt-img {
  background-color: #f44336;
  color: #ffffff;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.image-container .img-btn-container .btn-dlt-img:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}

.image-container .bar-container {
  background-color: #edecec;
  width: 10em;
  overflow: hidden;
  float: left;
  margin: 0.5em;
  border: 5px solid #edecec;
  border-radius: 0.2em;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  margin-bottom: 0.2em;
}

.image-container .bar-container .progress {
  margin-bottom: 0 !important;
}

/* Error messages */

.alert-danger {
  font-size: 15px;
  font-size: 0.9375rem;
  background-color: #fde1df;
  color: #f44336;
}

.brandlist .alert {
  padding: 8px 30px 8px 15px !important;
  margin-bottom: 0;
}

.brandlist .branchitem {
  margin-bottom: 10px;
}

.brandlist button.close {
  line-height: 28px !important;
}

/* Flash Messages */

.flash {
  z-index: 999 !important;
  position: fixed;
  top: 10em;
  right: 2em;
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}

.flash i {
  display: block;
  float: left;
  margin-top: 0.4em;
  margin-right: 0.5em;
}

.flash-error {
  background: #f44336;
  /* The Fallback */
  background: rgba(244, 67, 54, 0.7);
}

.flash-success {
  background: #4caf50;
  /* The Fallback */
  background: rgba(76, 175, 80, 0.7);
}

/* Login Form */

.login-logo {
  text-align: center;
  margin-top: 20%;
}

.login-logo img {
  width: 80px;
}

.login-form {
  margin-top: 3em;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}

.login-form .alert-danger {
  font-size: 14px;
  font-size: 0.875rem;
}

.login-form .btn-login {
  background-color: #4caf50;
  color: #ffffff;
  margin-top: 1em;
}

.login-form .input-group-addon {
  padding: 0.2em 0.5em 0 0 !important;
}

.login-form .alert-danger i {
  display: block;
  float: left;
  margin-right: 0.3em;
}

.form-panel {
  padding: 15px 30px;
}

.for-liucheng {
  width: 100%;
  margin: 0px auto 50px;
  height: 50px;
  padding: 20px 0 0 0;
  position: relative;
}

.liulist {
  float: left;
  width: 25%;
  height: 7px;
  background: #ccc;
}

.liulist5 {
  width: 20% !important;
}

.liulist6 {
  width: 16.66666666666667% !important;
}

.liutextbox {
  position: absolute;
  width: 100%;
  left: 0;
  top: 10px;
}

.liutextbox .liutext {
  float: left;
  width: 25%;
  text-align: center;
}

.liutextbox .liutext5 {
  width: 20% !important;
}

.liutextbox .liutext6 {
  width: 16.66666666666667% !important;
}

.liutextbox .liutext em {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background: #ccc;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  font-style: normal;
  font-weight: bold;
  color: #fff;
}

.liutextbox .liutext strong {
  display: inline-block;
  height: 26px;
  line-height: 26px;
  font-weight: 400;
}

.liulist.for-cur {
  background: #77b852;
}

.liutextbox .for-cur em {
  background: #77b852;
}

.liutextbox .for-cur strong {
  color: #77b852;
}

blockquote.step {
  padding: 5px 10px;
  margin: 0 0 23px;
  font-size: 16.25px;
  border-left: 5px solid #F44336;
}

.submitBox {
  margin: 20px 0px 30px;
  text-align: center;
}

.rightButton {
  margin-left: 25px;
}

.merchantsel {
  padding-left: 10px;
  width: 100%;
}

.merchantdate {
  width: 600px;
}

.merchantdate > div {
  padding: 0;
}

.merchantbox .form-panel .control-label {
  text-align: right;
}

.reviewbox .form-panel .control-label {
  padding-right: 0px;
}

.reviewbox .rejectbox {
  margin-bottom: 10px;
}

ul.reviewlist > li {
  font-size: 14px;
}

.control-label-left {
  padding-top: 7px;
}

.help-block-tip {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #a6a6a6;
}

.help-block-tip:before {
  content: '';
}

.modal-img {
  max-height: 100%;
}

.modal-img .imgbox {
  max-height: 600px;
  overflow: auto;
}

.modal-img .imgbox img {
  max-width: 100%;
  max-height: 100%;
}

.modal-box {
  max-height: 100%;
  padding: 0px 10px;
}

.modal-box .content-box {
  max-height: 500px;
  overflow: auto;
  padding: 5px;
}

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

.modal-box .content-box .form-group {
  margin-left: 0px;
  margin-right: 0px;
}

.modal-box .content-box img {
  max-width: 100%;
  max-height: 100%;
}

.modal-box .content-box .tabs-content-box {
  padding: 10px 0px;
}

.img-click-show {
  cursor: pointer;
}

.pagination {
  margin: 0;
}

.debuginfo {
  word-break: break-all;
}

.lable_text_left {
  text-align: left !important;
}

.grantStatus {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}

.grantStatus i {
  font-size: 112px;
}

.grantStatus p {
  margin-top: 20px;
}

.lable_text_left {
  text-align: left !important;
}