/* 26. Ecommerce */

.box-style, .user-profile, .element-box, .invoice-w, .big-error-w, .activity-boxes-w .activity-box, .post-box, .projects-list .project-box, .order-box, .ecommerce-customer-info {
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
}

body.color-scheme-dark .order-box, .content-panel.color-scheme-dark .order-box {
  background-color: #323c58;
  box-shadow: 0px 5px 15px rgba(22, 22, 35, 0.1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#323c58), to(#303950));
  background-image: linear-gradient(to bottom, #323c58 0%, #303950 100%);
  background-repeat: repeat-x;
}

body.color-scheme-dark .box-style legend span, body.color-scheme-dark .user-profile legend span, body.color-scheme-dark .element-box legend span, body.color-scheme-dark .invoice-w legend span, body.color-scheme-dark .big-error-w legend span, body.color-scheme-dark .activity-boxes-w .activity-box legend span, .activity-boxes-w body.color-scheme-dark .activity-box legend span, body.color-scheme-dark .post-box legend span, body.color-scheme-dark .projects-list .project-box legend span, .projects-list body.color-scheme-dark .project-box legend span, body.color-scheme-dark .order-box legend span, body.color-scheme-dark .ecommerce-customer-info legend span,
body.color-scheme-dark .user-profile legend span,
body.color-scheme-dark .element-box legend span,
body.color-scheme-dark .invoice-w legend span,
body.color-scheme-dark .big-error-w legend span,
body.color-scheme-dark .invoice-w legend span,
body.color-scheme-dark .big-error-w legend span,
body.color-scheme-dark .activity-boxes-w .activity-box legend span,
body.color-scheme-dark .projects-list .project-box legend span,
body.color-scheme-dark .profile-tile .profile-tile-box legend span, .content-panel.color-scheme-dark .box-style legend span, .content-panel.color-scheme-dark .user-profile legend span, .content-panel.color-scheme-dark .element-box legend span, .content-panel.color-scheme-dark .invoice-w legend span, .content-panel.color-scheme-dark .big-error-w legend span, .content-panel.color-scheme-dark .activity-boxes-w .activity-box legend span, .activity-boxes-w .content-panel.color-scheme-dark .activity-box legend span, .content-panel.color-scheme-dark .post-box legend span, .content-panel.color-scheme-dark .projects-list .project-box legend span, .projects-list .content-panel.color-scheme-dark .project-box legend span, .content-panel.color-scheme-dark .order-box legend span, .content-panel.color-scheme-dark .ecommerce-customer-info legend span,
.content-panel.color-scheme-dark .user-profile legend span,
.content-panel.color-scheme-dark .element-box legend span,
.content-panel.color-scheme-dark .invoice-w legend span,
.content-panel.color-scheme-dark .big-error-w legend span,
.content-panel.color-scheme-dark .invoice-w legend span,
.content-panel.color-scheme-dark .big-error-w legend span,
.content-panel.color-scheme-dark .activity-boxes-w .activity-box legend span,
.content-panel.color-scheme-dark .projects-list .project-box legend span,
.content-panel.color-scheme-dark .profile-tile .profile-tile-box legend span {
  background-color: #303950;
  color: #fff;
}

body.color-scheme-dark .box-style legend:before, body.color-scheme-dark .user-profile legend:before, body.color-scheme-dark .element-box legend:before, body.color-scheme-dark .invoice-w legend:before, body.color-scheme-dark .big-error-w legend:before, body.color-scheme-dark .activity-boxes-w .activity-box legend:before, .activity-boxes-w body.color-scheme-dark .activity-box legend:before, body.color-scheme-dark .post-box legend:before, body.color-scheme-dark .projects-list .project-box legend:before, .projects-list body.color-scheme-dark .project-box legend:before, body.color-scheme-dark .order-box legend:before, body.color-scheme-dark .ecommerce-customer-info legend:before,
body.color-scheme-dark .user-profile legend:before,
body.color-scheme-dark .element-box legend:before,
body.color-scheme-dark .invoice-w legend:before,
body.color-scheme-dark .big-error-w legend:before,
body.color-scheme-dark .invoice-w legend:before,
body.color-scheme-dark .big-error-w legend:before,
body.color-scheme-dark .activity-boxes-w .activity-box legend:before,
body.color-scheme-dark .projects-list .project-box legend:before,
body.color-scheme-dark .profile-tile .profile-tile-box legend:before, .content-panel.color-scheme-dark .box-style legend:before, .content-panel.color-scheme-dark .user-profile legend:before, .content-panel.color-scheme-dark .element-box legend:before, .content-panel.color-scheme-dark .invoice-w legend:before, .content-panel.color-scheme-dark .big-error-w legend:before, .content-panel.color-scheme-dark .activity-boxes-w .activity-box legend:before, .activity-boxes-w .content-panel.color-scheme-dark .activity-box legend:before, .content-panel.color-scheme-dark .post-box legend:before, .content-panel.color-scheme-dark .projects-list .project-box legend:before, .projects-list .content-panel.color-scheme-dark .project-box legend:before, .content-panel.color-scheme-dark .order-box legend:before, .content-panel.color-scheme-dark .ecommerce-customer-info legend:before,
.content-panel.color-scheme-dark .user-profile legend:before,
.content-panel.color-scheme-dark .element-box legend:before,
.content-panel.color-scheme-dark .invoice-w legend:before,
.content-panel.color-scheme-dark .big-error-w legend:before,
.content-panel.color-scheme-dark .invoice-w legend:before,
.content-panel.color-scheme-dark .big-error-w legend:before,
.content-panel.color-scheme-dark .activity-boxes-w .activity-box legend:before,
.content-panel.color-scheme-dark .projects-list .project-box legend:before,
.content-panel.color-scheme-dark .profile-tile .profile-tile-box legend:before {
  background-color: rgba(255, 255, 255, 0.05);
}


.order-box {
  padding: 30px;
}

.order-box .order-details-box {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
  -webkit-box-align: center;
          align-items: center;
}

.order-box .order-details-box .order-main-info span {
  display: block;
  color: #adb5bd;
  line-height: 1.3;
}

.order-box .order-details-box .order-main-info strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1.3;
}

.order-box .order-details-box .order-sub-info span {
  display: block;
  color: #adb5bd;
  line-height: 1.3;
  font-size: 0.775rem;
}

.order-box .order-details-box .order-sub-info strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.3;
}

.order-box .order-controls {
  background-color: #FFF7EA;
  border: 1px solid #E9D9C1;
  padding: 10px;
  margin-bottom: 20px;
}

.order-box .order-controls .form-group {
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.order-box .order-controls .form-group label {
  margin-right: 5px;
}

.order-box .order-controls .form-group:last-child {
  border-right: none;
  margin-right: 0px;
  padding-right: 0px;
  margin-left: auto;
}

.order-box .order-items-table {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.order-box .order-items-table .product-image {
  width: 70px;
  height: 70px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.order-box .order-items-table .product-name {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
}

.order-box .order-items-table .product-remove-btn {
  color: #E08989;
  font-size: 16px;
}

.order-box .order-items-table .product-details {
  color: #adb5bd;
  font-size: 0.8rem;
}

.order-box .order-items-table .product-details strong {
  color: #3E4B5B;
}

.order-box .order-items-table .product-details .color-box {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-left: 5px;
  margin-right: 10px;
}

.order-box .order-items-table .product-price {
  font-weight: 500;
  font-size: 1.25rem;
}

.order-box .order-items-table .quantity-input .input-group-text {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.order-box .order-items-table .quantity-input .form-control {
  -webkit-box-flex: 0;
          flex: 0 0 45px;
  text-align: center;
  font-weight: 500;
}

.order-box .order-section-heading {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.ecommerce-customer-info {
  padding: 30px;
}

.ecommerce-customer-info .ecommerce-customer-main-info {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ecommerce-customer-info .ecommerce-customer-main-info .ecc-avatar {
  width: 90px;
  height: 90px;
  background-size: cover;
  background-position: center center;
  border-radius: 50%;
  background-color: #fff;
  margin: 0px auto;
  box-shadow: 0px 0px 0px 10px #fff;
}

.ecommerce-customer-info .ecommerce-customer-main-info .ecc-name {
  margin-top: 10px;
  font-weight: 500;
  font-size: 1.25rem;
}

.ecommerce-customer-info .ecommerce-customer-sub-info {
  margin-bottom: 30px;
}

.ecommerce-customer-info .ecc-sub-info-row {
  margin-bottom: 10px;
}

.ecommerce-customer-info .ecc-sub-info-row + .ecc-sub-info-row {
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.ecommerce-customer-info .ecc-sub-info-row .sub-info-label {
  display: block;
  color: #adb5bd;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.ecommerce-customer-info .ecc-sub-info-row .sub-info-value {
  display: block;
}

.ecommerce-customer-info .ecc-sub-info-row .sub-info-value img {
  margin-right: 5px;
}

.ecommerce-customer-info .os-tabs-controls .nav {
  flex-wrap: nowrap;
}

.ecommerce-customer-info .os-tabs-controls .nav-link {
  white-space: nowrap;
  padding: 10px 0px;
}

.order-summary-row {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
}

.order-summary-row.as-total .order-summary-label {
  font-weight: 500;
  font-size: 1.25rem;
  color: #3E4B5B;
}

.order-summary-row.as-total .order-summary-value {
  font-weight: 500;
  font-size: 1.5rem;
}

.order-summary-row .order-summary-label {
  color: #adb5bd;
}

.order-summary-row .order-summary-label strong {
  display: block;
  color: #3E4B5B;
  font-size: 0.8rem;
}

.order-summary-row .order-summary-value {
  font-weight: 500;
}

.order-summary-row + .order-summary-row {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 5px;
  margin-top: 5px;
}

.order-summary-row + .order-summary-row.as-total {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 3px solid #222;
}

@media (max-width: 768px) {
  .order-box {
    padding: 15px;
  }
  .order-box .order-items-table {
    text-align: center;
    border-bottom: none;
    margin-bottom: 0px;
  }
  .order-box .order-items-table .quantity-input .form-control {
    -webkit-box-flex: 1;
            flex: 1;
  }
  .order-box .order-items-table .product-price {
    font-size: 1.5rem;
    color: #047bf8;
  }
  .order-box .order-items-table .product-image {
    max-width: 120px;
    max-height: 120px;
    margin: 0px auto;
  }
  .order-box .order-items-table .product-remove-btn {
    position: absolute;
    top: 10px;
    right: 0px;
    font-size: 24px;
  }
  .order-box .order-items-table .table thead {
    display: none;
  }
  .order-box .order-items-table .table tbody tr {
    display: block;
    border-bottom: 1px solid #eee;
    position: relative;
  }
  .order-box .order-items-table .table tbody tr td {
    display: block;
    border: none;
    padding: 5px;
  }
  .ecommerce-customer-info {
    margin-top: 20px;
  }
  .element-balances.mobile-full-width > .balance {
    -webkit-box-flex: 1;
            flex: 1;
    padding: 0px;
    margin-bottom: 30px;
    text-align: center;
  }
  .element-balances.mobile-full-width > .balance-table {
    -webkit-box-flex: 1;
            flex: 1;
    padding: 0px;
    text-align: center;
  }
}