syscom-master-admin-ui/preview/assets/scss/custom/_dashboard_styles.scss

// Dashboard-1 //
.main-index footer {
  @apply ps-0!;
}
.box.crm-highlight-card {
  @apply bg-primary! relative overflow-hidden shadow-none after:absolute after:h-full after:w-full after:bg-[url('../images/media/media-65.png')] after:bg-cover after:bg-center after:bg-no-repeat after:z-[0] after:opacity-20;

  .box-body {
    @apply z-10;
  }

}

.crm-lead-legend {
  @apply relative before:absolute before:w-[0.375rem] before:h-[0.375rem] before:rounded-md before:top-[0.375rem] before:-start-[0.625rem];

  &.mobile:before {
    @apply bg-primary;
  }

  &.desktop:before {
    @apply bg-secondary;
  }

  &.laptop:before {
    @apply bg-warning;
  }

  &.tablet:before {
    @apply bg-success;
  }
}

.crm-leadsinprogress {
  @apply mb-0;

  li {
    @apply mb-[1.3rem];

    &:last-child {
      @apply mb-0;
    }
  }
}

.leads-source-chart {
  canvas {
    @apply relative h-[244px]!;
  }

  .lead-source-value {
    @apply absolute text-center;
  }
}

#leads-source {
  @apply h-[18rem]! w-auto!;
}

.crm-deals-status li {
  @apply relative mb-4 ms-4 before:absolute before:w-2 before:h-2 before:top-[0.375rem] before:-start-4 before:rounded-[50%];
  &:last-child {
    @apply mb-0;
  }

  &.primary {
    &:before {
      @apply bg-primary;
    }
  }

  &.info {
    &:before {
      @apply bg-info;
    }
  }

  &.warning {
    &:before {
      @apply bg-warning;
    }
  }

  &.success {
    &:before {
      @apply bg-success;
    }
  }
}

.crm-timeline-content {
  @apply w-[15.5rem];
}

.crm-recent-activity {
  li {
    @apply pb-[1rem];

    &:last-child {
      @apply pb-0;
    }
  }

  .crm-timeline-content {
    @apply w-[15.5rem];
  }
}

.crm-recent-activity-content {
  @apply relative before:absolute before:w-[1px] before:bg-transparent before:top-[1.4375rem] before:start-[0.5625rem];

  &:nth-child(1) {
    @apply before:border-e before:border-dashed before:border-primary/20 before:h-[60%];
  }

  &:nth-child(2) {
    @apply before:border-e before:border-dashed before:border-secondary/20 before:h-[68%];
  }

  &:nth-child(3) {
    @apply before:border-e before:border-dashed before:border-success/20 before:h-[42%];
  }

  &:nth-child(4) {
    @apply before:border-e before:border-dashed before:border-pink/20 before:h-[60%];
  }

  &:nth-child(5) {
    @apply before:border-e before:border-dashed before:border-warning/20 before:h-[47%];
  }

  &:nth-child(6) {
    @apply before:border-e before:border-dashed before:border-info/20 before:h-[60%];
  }

  &:nth-child(7) {
    @apply before:border-e before:border-dashed before:border-[#232323]/20 dark:before:border-white/20 before:h-[50%];
  }

  &:last-child {
    @apply before:hidden;
  }
}

#crm-main circle {
  @apply fill-transparent;
}

#crm-main .apexcharts-datalabels-group text {
  @apply fill-white/90;
}

#crm-main #apexcharts-radialbarTrack-0 {
  @apply stroke-black/20;
}
#crm-revenue-analytics .apexcharts-title-text {
  @apply translate-y-[0.625rem];
}
.apexcharts-bar-series.apexcharts-plot-series
  .apexcharts-series
  .apexcharts-bar-area {
  @apply stroke-defaultborder!;
}
.apexcharts-legend-text {
  @apply text-defaulttextcolor! ps-[0.9375rem]! -ms-[0.625rem]!;
}
.apexcharts-text {
  &.apexcharts-yaxis-label,
  &.apexcharts-xaxis-label {
    tspan {
      @apply fill-[#8c9097];
    }
  }
}
// Dashboard-1 //

// Dashboard-2 //
.ecommerce-icon {
  svg {
    @apply w-[1.75rem] h-[1.75rem] p-[0.35rem] rounded-md;

    &.primary {
      @apply bg-primary;
    }

    &.secondary {
      @apply bg-secondary;
    }

    &.success {
      @apply bg-success;
    }

    &.warning {
      @apply bg-warning;
    }
  }
}
.svg-white {
  @apply fill-white;
}
.ecommerce-sale-image {
  @apply relative before:absolute before:w-full before:h-full before:bg-black/60;
  img {
    @apply h-[16.625rem];
  }
}
.card-img-overlay {
  @apply absolute inset-0 flex flex-col;
}
.card-img,
.card-img-bottom,
.card-img-top {
  @apply w-full;
}
.ecommerce-bankoffer-details {
  @apply text-[0.75rem] w-[70%] rounded-md bg-white/[0.25] opacity-[0.8] p-[0.625rem] backdrop-blur-[1.875rem];
}

.ecommerce-sale-days {
  @apply absolute bottom-[1.25rem] text-[0.75rem] rounded-md bg-white/[0.25] opacity-[0.8] py-[0.25rem] px-[0.625rem] backdrop-blur-[1.875rem];
}

.ecommerce-sales-calendar {
  @apply absolute end-[1.875rem] bg-white/[0.25] rounded-[0.3rem] py-[0.5rem] px-[0.625rem]  backdrop-blur-[1.875rem];
}

.earning {
  @apply relative;

  &:before {
    @apply absolute top-[0.438rem] -start-[0.818rem] bottom-[0.313rem] w-[0.5rem] h-[0.5rem] rounded-[3.125rem];
  }

  &.first-half {
    @apply before:bg-primary/30;
  }

  &.top-gross {
    @apply before:bg-primary;
  }

  &.second-half {
    @apply before:bg-[#e4e7ed];
  }
}
.nav.tab-style-1 {
  @apply border-b-0 p-[0.65rem] bg-light rounded-md mb-4;
  .nav-item {
    @apply me-2;
    &:last-child {
      @apply me-0;
    }
  }
  .nav-link {
    @apply rounded-md py-[0.35rem] px-4;
    &.active {
      @apply bg-primary text-white shadow-md transition-colors ease-in duration-[0.15sec];
    }
  }
}
.tab-content .tab-pane {
  @apply p-4 border border-solid border-defaultborder rounded-md text-defaulttextcolor;
}
.list-group-item {
  @apply text-defaulttextcolor dark:text-defaulttextcolor/70 border-b-0 border-t border-e border-s border-defaultborder border-solid py-[0.65rem] px-[1.25rem] dark:border-defaultborder/10;
  &:last-child {
    @apply border-b;
  }
}
.crypto-buy-sell-input {
  @apply sm:w-full!;
}
@media (min-width: 576px) {
  .crypto-buy-sell-input {
    @apply w-[60%]!;
  }
}

/* Start:: Crypto Wallet */
.dark {
  .qr-image {
    @apply invert;
  }
}
/* End:: Crypto Wallet */

/* Start:: Crypto Currency Exchange */
#btc-currency-chart,
#eth-currency-chart,
#ltc-currency-chart,
#dash-currency-chart,
#xrs-currency-chart,
#glm-currency-chart,
#monero-currency-chart,
#eos-currency-chart {
  @apply absolute bottom-0;
}
.currency-exchange-box {
  @apply relative! bg-primary! shadow-none! z-[10]!  before:!absolute before:!h-full before:!w-full before:!bg-[url('../images/media/media-1.jpg')] before:!bg-cover before:!bg-center before:!bg-no-repeat before:!z-[0] before:!opacity-10 ;

  .currency-exchange-area {
    @apply bg-black/10! backdrop-blur-[30px]!;
  }
}
/* End:: Crypto Currency Exchange */

#buy-crypto2,
#sell-crypto2,
#buy-crypto,
#sell-crypto {
  .choices__inner {
    @apply min-w-[5rem]!;
  }

  .choices__list--dropdown .choices__item--selectable::after,
  .choices__list[aria-expanded] .choices__item--selectable::after {
    @apply hidden!;
  }

  .choices__list--dropdown .choices__item--selectable,
  .choices__list[aria-expanded] .choices__item--selectable {
    @apply pe-0!;
  }
}

#btc-chart,
#eth-chart,
#dash-chart {
  .apexcharts-grid {
    @apply hidden;
  }
}
// Dashboard-2 //

// Dashboard-3 //
.basic-subscription,
.pro-subscription {
  @apply relative! before:!absolute before:!w-2 before:!h-2 before:!-start-[0.938rem] before:!rounded-[0.3rem] before:!top-[0.6rem];
}

.basic-subscription:before {
  @apply bg-primary;
}

.pro-subscription:before {
  @apply bg-secondary;
}
// Dashboard-3//
// Dashboard-4//
.featured-nft {
  @apply w-full h-[13rem] rounded-md;

  img {
    @apply bg-cover bg-center bg-no-repeat w-full h-full rounded-md;
  }
}
.svg-primary {
  @apply fill-primary;
}
.nft-auction-time {
  @apply absolute top-[3.5rem] end-4 py-1 px-2 bg-[#ffffff26] rounded-[0.3rem] backdrop-blur-[1.875rem];
}

.nft-like-section {
  @apply absolute top-4;
}

.nft-like-badge {
  @apply bg-[#ffffff26] backdrop-blur-[1.875rem];
}
.nft-collector-progress {
  @apply w-[3.125rem];
}
.nft-details-auction-time {
  @apply absolute w-[400px] h-[1.875rem] bg-success flex items-center justify-center text-white top-[3.125rem] font-medium -end-[8.4375rem] rotate-45 z-[10];
}

/* Start:: NFT Wallet */
.nft-wallet {
  @apply relative text-center shadow-none border border-defaultborder rounded-md hover:bg-light;
  &.active {
    @apply border-primary;
  }
}
.nft-list {
  li {
    &:hover {
      @apply bg-light text-primary;
    }
  }
}
/* End:: NFT Wallet */

/* Start:: NFT Live Auction */
.nft-tag.nft-tag-primary {
  &:hover,
  &.active {
    @apply text-primary;
    .nft-tag-icon {
      @apply bg-primary/10;
    }
  }
  .nft-tag-icon {
    @apply text-primary;
  }
}
.nft-tag.nft-tag-secondary {
  &:hover,
  &.active {
    @apply text-secondary;
    .nft-tag-icon {
      @apply bg-secondary/10;
    }
  }
  .nft-tag-icon {
    @apply text-secondary;
  }
}
.nft-tag.nft-tag-warning {
  &:hover,
  &.active {
    @apply text-warning;
    .nft-tag-icon {
      @apply bg-warning/10;
    }
  }
  .nft-tag-icon {
    @apply text-warning;
  }
}
.nft-tag.nft-tag-info {
  &:hover,
  &.active {
    @apply text-info;
    .nft-tag-icon {
      @apply bg-info/10;
    }
  }
  .nft-tag-icon {
    @apply text-info;
  }
}
.nft-tag.nft-tag-success {
  &:hover,
  &.active {
    @apply text-success!;
    .nft-tag-icon {
      @apply text-success/10 ;
    }
  }
  .nft-tag-icon {
    @apply text-success!;
  }
}
.nft-tag.nft-tag-danger {
  &:hover,
  &.active {
    @apply text-danger;
    .nft-tag-icon {
      @apply bg-danger/10;
    }
  }
  .nft-tag-icon {
    @apply text-danger;
  }
}
.nft-tag.nft-tag-dark {
  &:hover,
  &.active {
    @apply text-black;
    .nft-tag-icon {
      @apply bg-black/10;
    }
  }
  .nft-tag-icon {
    @apply text-black dark:text-white;
  }
}
.nft-tag .nft-tag-text {
  @apply font-semibold inline-block py-0 pe-[1.25rem] ps-2;
}
.nft-tag .nft-tag-icon {
  @apply inline-block py-3 px-4 rounded-full bg-light;
}
.nft-tag {
  @apply relative inline-flex items-center border border-solid border-white dark:border-defaultborder/10 rounded-[50rem] bg-white dark:bg-bodybg text-defaulttextcolor;
}
.nft-timer-container {
  @apply absolute  top-[7%] inline-flex items-center py-[0.2rem] px-[0.7rem] rounded-t-none rounded-r-[50rem] rounded-b-[50rem] rounded-l-none text-white font-medium bg-black/10;
}
.nft-btn {
  @apply absolute end-[5%] bottom-[5%] h-8 w-8 p-[5px] rounded-full bg-black/10 text-white text-[1rem] inline-flex items-center justify-center transition-all ease-linear duration-[0.3sec]
  z-[1];
  &:hover {
    @apply bg-white text-primary;
  }
}
.nft-img {
  @apply rounded-md max-h-[10rem] w-full;
}
/* End:: NFT Live Auction */

/* Start:: CRM Deals */
.lead-discovered,
.lead-qualified,
.contact-initiated,
.need-identified,
.negotiation,
.deal-finalized {
  @apply relative ms-[1rem] before:absolute before:w-[0.5rem] before:h-[0.5rem] before:rounded-full before:-start-[0.875rem] before:top-[0.4375rem];
}
.lead-discovered:before {
  @apply bg-primary;
}
.lead-qualified:before {
  @apply bg-warning;
}
.contact-initiated:before {
  @apply bg-success;
}
.need-identified:before {
  @apply bg-info;
}
.negotiation:before {
  @apply bg-danger;
}
.deal-finalized:before {
  @apply bg-secondary;
}

#leads-discovered .box.custom-box {
  @apply border-s-[0.4rem]! border-solid! border-primary/40! ;
  .company-name {
    @apply text-primary;
  }
  .avatar {
    @apply bg-primary;
  }
}
#leads-qualified .box.custom-box {
  @apply border-s-[0.4rem]! border-solid! border-warning/40! ;
  .company-name {
    @apply text-warning;
  }
  .avatar {
    @apply bg-warning;
  }
}
#contact-initiated .box.custom-box {
  @apply border-s-[0.4rem]! border-solid! border-success/40!;
  .company-name {
    @apply text-success;
  }
  .avatar {
    @apply bg-success;
  }
}
#needs-identified .box.custom-box {
  @apply border-s-[0.4rem]! border-solid! border-info/40!;
  .company-name {
    @apply text-info;
  }
  .avatar {
    @apply bg-info;
  }
}
#negotiation .box.custom-box {
  @apply border-s-[0.4rem]! border-solid! border-danger/40!;
  .company-name {
    @apply text-danger;
  }
  .avatar {
    @apply bg-danger;
  }
}
#deal-finalized .box.custom-box {
  @apply border-s-[0.4rem]! border-solid! border-secondary/40!;
  .company-name {
    @apply text-secondary;
  }
  .avatar {
    @apply bg-secondary;
  }
}
#leads-discovered,
#leads-qualified,
#contact-initiated,
#needs-identified,
#negotiation,
#deal-finalized {
  .box.custom-box {
    @apply mb-2;
    &:last-child {
      @apply mb-[1.5rem];
    }
    .box-body {
      @apply p-4;
      .deal-description {
        @apply ms-[2.25rem];
      }
    }
  }
}
/* End:: CRM Deals */

.card-img-top {
  @apply rounded-ss-[0.375]! rounded-se-[0.375]!;
}
.bg-primary-gradient {
  @apply text-white bg-gradient-to-r from-primary to-blue;
}
.swiper {
  @apply mx-auto relative list-none p-0 z-[1];
}

.swiper-vertical > .swiper-wrapper {
  @apply flex-col;
}

.swiper-wrapper {
  @apply relative w-full h-full z-[1] flex transition-transform box-content;
}

.swiper-pointer-events {
  @apply touch-pan-y;
}

.swiper-pointer-events.swiper-vertical {
  @apply touch-pan-x;
}

.swiper-slide {
  @apply flex-shrink-0 w-full h-full relative transition-transform;
}
.swiper-slide img {
  @apply block w-full h-full object-cover;
}
.nft-featuredcollect-image {
  @apply h-[8.813rem]! rounded-md! relative! before:!absolute before:!w-full before:!h-full before:!bg-black/10 ;
}
// Dashboard-4//
// Dashboard-5//
.main-card-icon {
  @apply bottom-[0.75rem] end-4 absolute p-3 rounded-md;
}
.tansaction-icon {
  @apply p-[0.375rem] rounded-sm end-3;

  svg {
    @apply w-[1.25rem] h-[1.25rem];
  }
}

.recent-transactions-card {
  .list-group-item {
    @apply py-3 px-[1.25rem];
  }
}
.tansaction-icon {
  @apply me-3 rounded-sm p-[0.375rem];
}
.tansaction-icon svg {
  @apply h-[1.25rem] w-[1.25rem];
}
.timeline-main {
  @apply ps-[1.77rem];
}
.latest-timeline ul.timeline-main {
  @apply relative before:border-s-[0.125rem] before:border-dotted before:border-defaultborder dark:before:!border-defaultborder/10 before:absolute before:start-1 before:w-[1px] before:h-[84%] before:z-0 before:top-3;
}

.latest-timeline .timeline-main li.activity {
  @apply p-0 relative mb-2;
}
.featured_icon1 {
  @apply w-[0.438rem] h-[0.438rem] leading-[3.75rem] -ms-[1.625rem] text-black text-[0.625rem] bg-primary relative rounded-[1.125rem] top-3;
}

.featured_icon1.featured-danger {
  @apply bg-danger;
}

.featured_icon1.featured-success {
  @apply bg-success;
}
.nav.panel-tabs-task a.active {
  @apply rounded-md! text-info! bg-info/10!;
}

.nav.panel-tabs-task a {
  @apply py-[0.4rem]! px-2! text-[0.711rem]! transition-all! ease-linear! duration-[0.3sec]!;
}
.avatar-list-stacked {
  @apply p-0;
  .avatar {
    @apply -me-[0.5rem]! border! rounded-full! border-solid! border-black/[0.05]! align-middle! transition-all! ease-linear! duration-[200ms]! ;
    &:last-child {
      @apply me-0!;
    }
    &:hover {
      @apply z-[1] -translate-y-[0.188rem];
    }
  }
}
[dir="rtl"] {
  .avatar-list-stacked {
    .ri-arrow-right-s-line {
      @apply rotate-180;
    }
  }
}
#visitors-countries {
  @apply h-[23.4rem];

  #jvm-markers-labels-group {
    @apply hidden;
  }
}

#visitors-countries circle:nth-child(1) {
  @apply fill-primary stroke-primary/30 stroke-[30];
}

#visitors-countries circle:nth-child(2) {
  @apply fill-secondary stroke-secondary/20 stroke-[30];
}

#visitors-countries circle:nth-child(3) {
  @apply fill-danger stroke-danger/20 stroke-[30];
}

#visitors-countries circle:nth-child(4) {
  @apply fill-info stroke-info/20 stroke-[30];
}

#visitors-countries circle:nth-child(5) {
  @apply fill-primary stroke-primary/30 stroke-[30];
}

#visitors-countries circle:nth-child(6) {
  @apply fill-warning stroke-warning/20 stroke-[30];
}

#visitors-countries circle:nth-child(7) {
  @apply fill-success stroke-success/20 stroke-[30];
}

#visitors-countries circle:nth-child(8) {
  @apply fill-pink stroke-pink/20 stroke-[30];
}

#visitors-countries circle:nth-child(9) {
  @apply fill-[#232323] stroke-[#232323]/20 stroke-[30];
}

#visitors-countries circle:nth-child(10) {
  @apply fill-indigo stroke-indigo/20 stroke-[30];
}
#vector-map,
#marker-map,
#marker-image-map,
#lines-map,
#visitors-countries,
#users-map {
  #jvm-regions-group path {
    @apply fill-light!;
  }
}
@media (max-width: 1399.99px) {
  .sales-visitors-countries {
    @apply border-e border-dashed border-defaultborder dark:border-defaultborder/10;
  }
}

@media (min-width: 1400px) {
  .sales-visitors-countries {
    @apply border-e border-dashed border-defaultborder dark:border-defaultborder/10;
  }
}
.panel-tabs-billing li a.active {
  @apply bg-success/10 font-medium text-success;
}

.panel-tabs-billing li a {
  @apply py-1 px-2 rounded-md text-[0.75rem];
}
.billing-invoice-details {
  @apply w-[11rem];
}

// Dashboard-5//
// Dashboard-6//
#analytics-bouncerate {
  @apply absolute bottom-0;
}
.custom-card.upgrade-card {
  @apply h-[11.625rem]! relative! overflow-hidden! bg-primary! bg-no-repeat!
  before:!absolute before:!bg-[url('../images/media/media-85.png')] before:!bg-cover before:!bg-no-repeat before:!start-0 before:!top-0 before:!end-0 before:!bottom-0 before:!opacity-[0.15] ;

  .avatar {
    @apply absolute -top-[0.6875rem] end-[1.5rem];
  }

  .upgrade-card-content {
    @apply absolute bottom-4;
  }
}

#analytics-users {
  .apexcharts-grid {
    @apply hidden;
  }
}
.analytics-visitors-countries li {
  @apply mb-[1.385rem];

  &:last-child {
    @apply mb-0;
  }

  .progress {
    @apply w-[6.25rem];
  }
}
#country-sessions {
  .apexcharts-graphical {
    clipPath {
      rect {
        @apply scale-[0.98]
      }
    }
  }
}
// Dashboard-6//
// Dashboard-7//
.team-members-card {
  li {
    @apply mb-[1.5rem];

    &:last-child {
      @apply mb-0;
    }
  }

  #user1,
  #user2,
  #user3,
  #user4,
  #user5 {
    .apexcharts-grid {
      @apply hidden;
    }
  }
}
.daily-task-card,
.projects-maintask-card {
  @apply mb-[-16px];

  li {
    @apply mb-[1rem];

    &:last-child,
    .card {
      @apply mb-0;
    }
  }
}
.project-transactions-card {
  @apply mb-0;

  li {
    @apply mb-[1rem];

    &:last-child {
      @apply mb-0;
    }
  }
}

.projects-tracking-card {
  @apply bg-white relative;

  .card-body {
    @apply z-[1];
  }

  img {
    @apply w-[15.5rem] h-[9.5rem];
  }
}

.shape-1,
.shape-2,
.shape-3,
.shape-4,
.shape-5,
.shape-6,
.shape-7,
.shape-8,
.shape-9,
.shape-10,
.shape-11,
.shape-12,
.shape-13,
.shape-14,
.shape-15,
.shape-16 {
  @apply absolute! animate-wase! ;

  i {
    @apply opacity-[0.2];
  }
}

.shape-1 {
  @apply start-[20%]  top-[20%];
}
.shape-2 {
  @apply start-[5%] top-[42%];
}

.shape-3 {
  @apply end-[15%] bottom-[55%];
}

.shape-4 {
  @apply start-[55%]  top-[25%];
}

.shape-5 {
  @apply start-[50%]  bottom-[25%];
}

.shape-6 {
  @apply end-[10%] bottom-[10%];
}

.shape-7 {
  @apply start-[20%]  bottom-[17%];
}

.shape-8 {
  @apply end-[20%] bottom-[17%];
}

.shape-9 {
  @apply end-[25%] top-[10%];
}

.shape-10 {
  @apply end-[5%] top-[15%];
}

.shape-11 {
  @apply start-[15%]  bottom-[35%];
}

.shape-12 {
  @apply start-[25%]  top-[40%];
}

.shape-13 {
  @apply start-[10%]  bottom-[10%];
}

.shape-14 {
  @apply -end-[10%]  -bottom-[10%];
}

.shape-15 {
  @apply -start-[20%] -bottom-[17%];
}

.shape-16 {
  @apply -end-[20%]  -bottom-[17%];
}

// Dashboard-7//
// Dashboard-8//
.hrm-main-card {
  @apply border-t-[3px]! border-solid!;

  &.primary {
    @apply border-primary/30!;
  }

  &.secondary {
    @apply border-secondary/30!;
  }

  &.warning {
    @apply border-warning/30!;
  }

  &.danger {
    @apply border-danger/30!;
  }
}
.hrm-jobs-legend {
  @apply relative before:absolute before:w-[0.375rem] before:h-[0.375rem] before:rounded-md before:top-[0.375rem] before:-start-[0.625rem];

  &.published:before {
    @apply bg-primary;
  }

  &.private:before {
    @apply bg-primary/50;
  }

  &.closed:before {
    @apply bg-[#f3f6f8];
  }

  &.onhold:before {
    @apply bg-black;
  }
}
.timeline-widget {
  @apply relative before:absolute before:w-[0.125rem] before:h-full before:bg-defaultborder dark:before:!bg-defaultborder/10 before:top-0 before:start-[3rem];

  .timeline-widget-list {
    @apply mb-[27px] relative before:absolute before:w-3 before:h-3 before:start-[2.688rem] before:top-1 before:rounded-[3.125rem] before:border-[0.125rem] before:border-solid before:border-defaultborder dark:before:!border-defaultborder/10 before:bg-white dark:before:!bg-bodybg;

    &:last-child {
      @apply mb-0;
    }

    .timeline-widget-content {
      @apply max-w-[20rem];
    }
  }
}
// Dashboard-8//
// Dashboard-9//
.my-stocks-ul {
  li {
    @apply py-[0.87rem] px-4 border-b border-dashed border-defaultborder dark:border-defaultborder/10;

    &:last-child {
      @apply border-b-0;
    }
  }
}
// Dashboard-9//
// Dashboard-10//
.category-link {
  @apply p-[1.25rem] rounded-md border border-solid border-defaultborder dark:border-defaultborder/10 flex flex-col items-center justify-center text-textmuted transition-all ease-linear duration-[0.3s];

  &.primary .category-svg {
    @apply fill-primary;
  }

  &.secondary .category-svg {
    @apply fill-secondary;
  }

  &.warning .category-svg {
    @apply fill-warning;
  }

  &.success .category-svg {
    @apply fill-success;
  }
}

.category-link .category-svg {
  @apply h-[1.875rem] w-[1.875rem] mb-4 transition-all ease-linear duration-[0.3sec];
}

.category-link.primary:not(.active):hover,
.category-link.primary.active {
  @apply text-primary bg-primary/10 border-primary/20;
}
.category-link.secondary:not(.active):hover,
.category-link.secondary.active {
  @apply text-secondary bg-secondary/10 border-secondary/20;
}

.category-link.warning:not(.active):hover,
.category-link.warning.active {
  @apply text-warning bg-warning/10 border-warning/20;
}

.category-link.success:not(.active):hover,
.category-link.success.active {
  @apply text-success bg-success/10 border-success/20;
}
.bg-outline-primary {
  @apply border border-solid border-primary text-primary;
}
.bg-outline-secondary {
  @apply border border-solid border-secondary text-secondary;
}
.bg-outline-warning {
  @apply border border-solid border-warning text-warning;
}
.bg-outline-info {
  @apply border border-solid border-info text-info;
}
.bg-outline-success {
  @apply border border-solid border-success text-success;
}
.bg-outline-danger {
  @apply border border-solid border-danger text-danger;
}
.bg-outline-dark {
  @apply border border-solid border-black text-black;
}
.bg-outline-light {
  @apply border border-solid border-light text-light;
}
.course-status-progress {
  @apply w-[3.125rem]!;
}

.courses-instructors {
  li {
    @apply mb-[0.85rem];
    &:last-child {
      @apply mb-0;
    }
  }
}
// Dashboard-10//
// Dashboard-11//
#waterTrack ,#sleepTrack{
  .apexcharts-grid {
    @apply hidden;
  }
}
.personal-upcoming-events {
  li {
    @apply mb-4;

    &:last-child {
      @apply mb-0;
    }
  }
}
.personal-messages-list {
  li {
    @apply mb-4;
    &:last-child {
      @apply mb-0;
    }

    .message {
      @apply max-w-[15rem];
    }
  }
}
.text-truncate {
  @apply overflow-hidden text-ellipsis whitespace-nowrap;
}
.circle-progress {
  @apply relative z-[1];
}

.circle-progress::after {
  @apply absolute h-full w-full rounded-full top-0 end-0 -z-[1] bg-gradient-to-t from-primary/50 to-white/50;
}

.personal-goals-list {
  li {
    @apply mb-4;
    &:last-child {
      @apply mb-0;
    }
  }
}

.personal-favourite-contacts {
  li {
    @apply mb-4;

    &:last-child {
      @apply mb-0;
    }
  }
}
// Dashboard-11//
.dark {
  button.gridjs-sort,
  button.gridjs-sort-desc,
  button.gridjs-sort-asc {
    @apply invert;
  }
}

.circle-progress {
  @apply relative z-[1] after:absolute after:h-full after:w-full after:rounded-full after:top-0 after:end-0 after:bg-[gradient-1,gradient-2] after:z-[-1];
}