// >>-- 27 Ecommerce_dashboard css start --<<

.welcome-card{
  background-color: #dcd6fa ;
  border-radius: var(--app-border-radius);

  h2{
    background: var(--primary-gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  img{
    margin-top: -64px;
  }
  .modal-btn{
    margin-top: -46px;
  }
}

@mixin chart_marker_mixin($name, $color) {
  .marker-#{$name} {
    outline: 4px solid rgba(#{$color}, 0.2);
    border-radius: 50px;
    outline-offset: 2px;
  }
}

@each $name, $color in $colors {
  @include chart_marker_mixin("#{$name}", map-get($colors, $name));
}

.product-sold-card{
  position: relative;
   .product-sold-icon{
     position: absolute;
     top: -11px;
     right: -8px;
     transform: rotate(-29deg);
   }
}

.custom-progress-container {
  display: flex;
  gap: 2px;
  height: 8px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
  &.info-progress{
    .progress-bar {
      &.productive {
        background-color: rgba(var(--info-dark),1);
      }
      &.middle {
        background-color: rgba(var(--info-dark),.6);
      }
      &.idle {
        background-color: rgba(var(--info),.3);
      }
    }
  }
  .progress-bar {
    height: 100%;
    border-radius: 1rem;
    &.productive {
      width: 40%;
      background-color: rgba(var(--primary-dark),1);
    }

    &.middle {
      width: 35%;
      background-color: rgba(var(--primary-dark),.6);
    }

    &.idle {
      width: 25%;

      background-color: rgba(var(--primary),.3);
    }
  }

}
.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--primary-dark),1);
}

.order-content-list{
  li{
    background-color: rgba(var(--white),.3);
    padding: 0.5rem 0.75rem;
    border-radius: 1rem;
    h6{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    &+{
      li{
        margin-top: 0.5rem;
      }
    }
  }
}

.top-products-table {
  thead {
    font-weight: 500;
    color: rgba(var(--dark), 0.75);

    th {
      padding: 0.5rem 0.5rem !important;
      color: rgba(var(--dark),1);
      &:nth-child(1) {
        padding-left: 1.25rem !important;
        min-width: 150px;
      }
      &:nth-child(2) {
        min-width: 100px;
      }
      &:nth-child(4){
        min-width: 80px;
      }
    }
  }

  tbody {
    td {

      font-size: 14px;
      color: rgba(var(--secondary), 1);


      h6 {
        color: rgba(var(--dark), 0.75);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }

    tr {
      &:hover {
        td {
          h6 {
            color: rgba(var(--primary-dark), 1);
          }

          &:nth-child(3) {
            color: rgba(var(--danger), 1);
          }
        }

      }
    }
  }
}

.customer-list {
  .customer-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    &:last-child {
      padding-bottom: 0;
    }
    & + {
      li {
        margin-top: 0.94rem;
      }
    }

    h6 {
      & + {
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }

    .customer-list-avtar {
      position: absolute;
      left: 0;
    }
    .customer-list-content {
      margin-left: 45px;
    }
  }
}

.transaction-card{

  .custom-divider{
    position: relative;
    width: 100%;
    height: 2px;
    border-top: 2px dashed rgba(var(--secondary), .4);
    margin: 1rem 0;
    &:before,
    &:after{
      content: "";
      background-color: var(--bodybg-color);
      width: 35px;
      height: 35px;
      position: absolute;
      top: -17px;
      border-radius: 20px;
    }
    &:before{
      left: -40px;
    }
    &:after{
      right: -40px;
    }
  }
}
.form-select{
  &.custom-form-select{
    min-width: 115px;
    padding: 0.4rem 0.75rem;
    background-color: transparent;
  }
}
.product-category-list{
  overflow: hidden;
  li{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background-color: rgba(var(--white), 1);
    border-radius: var(--app-border-radius);
    h6{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    &+{
      li{
        margin-top: 0.5rem;
      }
    }
  }
}

@mixin country_card_mixin($name, $color, $light-color: null) {

  $light-color: if($light-color == null, $color, $light-color);

  .country-card-#{$name} {
    overflow: hidden;
      &:hover{
        background-color: rgba(#{$color}, .3);
        box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
        h6{
          color: rgba(#{$light-color}, 1);
        }
        i{
          color: rgba(#{$light-color}, 1) !important;
        }
    }
  }
}

@each $name, $color in $colors {
  @include country_card_mixin("#{$name}", map-get($colors, $name), map-get($colors, "#{$name}-dark"));
}
.country-card{
  cursor:auto;
  position: relative;
  overflow: hidden;
}
.orders-provided-card{
  background-image:  linear-gradient(rgba(var(--light),.2) 1.3px, transparent 1.3px), linear-gradient(to right, rgba(var(--light),.2) 1.3px, transparent 1.3px);
  background-size: 45px 45px;
  position: relative;
  overflow: hidden;
  .circle-bg-img {
    font-size: 840%;
    position: absolute;
    right: -23px;
    bottom: -47px;
    opacity: 0.25;
    overflow: hidden;
    color: rgba(var(--secondary-dark),.3);
  }
  &:hover{
    .circle-bg-img {
      color: rgba(var(--secondary-dark),.6);
      border: 1px dashed rgba(var(--secondary),1);
      border-radius: 50%;
      animation: circle-rotate 10s linear infinite;
    }
  }
}
.product-store-card{
  overflow: hidden;
  position: relative;
  .circle-bg-img {
    font-size: 840%;
    position: absolute;
    right: -23px;
    top: -47px;
    opacity: 0.25;
    overflow: hidden;
    color: rgba(var(--success),.3);
  }
  &:hover{
    .circle-bg-img {
      color: rgba(var(--success),.6);
      border: 2px dashed rgba(var(--success),1);
      border-radius: 50%;
      animation: circle-rotate 10s linear infinite;
    }
  }
}

@media screen and (max-width: 1550px) and (min-width: 1400px){
  .product-sold-card{
    h5{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 1.125rem;
    }
  }
  .progress-labels{
    font-size: 0.625rem;
  }
  .order-content-list{
    h6{
      font-size: 0.75rem;
    }
    .badge{
      font-size: 9px;
    }
  }
  .transaction-txt{
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .orders-provided-card{
    img{
      opacity: 0.2;
    }
  }
}

@media screen and (max-width: 1399px) and (min-width: 992px){
  .tracker-history-list{
    height: 182px !important;
  }
}

@media screen and (max-width: 425px) {
  .welcome-card  {
    img{
      margin-top: -34px;
    }

    .modal-btn {
      margin-top: -32px;
    }

    .btn{
      padding: 2px 4px;
      font-size: 12px;
    }
  }
}

.rtl {
  .customer-list {
    .customer-list-item {
      .customer-list-content{
        margin-left: 0;
        margin-right: 45px;
      }
      .customer-list-avtar{
        left: auto;
        right: 0;
      }
    }
  }
  .card {
    .icon-bg{
      left: -4px;
      right: auto;
    }
  }
  .product-store-card{
    .circle-bg-img{
      left: -23px;
      right: auto;
    }
  }
  .orders-provided-card  {
    img{
      right: auto;
      left: 16px;
    }
  }
  .product-sold-card  {
    .product-sold-icon{
      left: -8px;
      right: auto;
    }
  }
  .product-category-list{
    .ms-2 {
      margin-left: 0 !important;
      margin-right: .5rem !important;
    }
  }
}

.box-layout {
  @media screen and (min-width: 1399px){
    .product-sold-card{
      h5{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 1.125rem;
      }
    }
    .progress-labels{
      font-size: 0.625rem;
    }
    .order-content-list{
      h6{
        font-size: 0.75rem;
      }
      .badge{
        font-size: 9px;
      }
    }
    .transaction-txt{
      max-width: 80px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .orders-provided-card{
      img{
        opacity: 0.2;
      }
    }
  }
}
// >>-- 27 Ecommerce_dashboard css end --<<