PNG %k25u25%fgd5n!
/home/mkuwqnjx/public_html/src/assets/scss/componets/_pages.scss

// Page wrapper

.page-wrapper {
    .page-content {
        // width: calc(100% - var(--#{$prefix}startbar-width));
        width: 100%;
        margin-left: var(--#{$prefix}startbar-width);
        position: relative;
        min-height: calc(100vh - var(--#{$prefix}topbar-height));
        padding: 0 8px 68px 8px;
        margin-top: calc(var(--#{$prefix}topbar-height) + $card-spacer-y);
        .page-title-box {
            padding: 16px 0;
            .page-title {
                font-size: 18px;
                margin: 0;
                font-weight: 600;
            }
            .breadcrumb {
                .breadcrumb-item {
                    a {
                        color: $gray-700;
                        font-weight: 400;
                        font-size: 13px;
                    }
                }
            }
        }
    }
}

@media (min-width: 680px) {
    .page-wrapper {
        display: flex;
    }
}



.shape {
    position: absolute;
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0;
    > svg {
        transform: scale(2);
        width: 100%;
        height: auto;
        transform-origin: top center;
    }
}


// Authentication Text
.ex-page-content h1 {
    font-size: 98px;
    font-weight: 700;
    text-shadow:
        rgba(137, 151, 189, 0.2) 1px 1px,
        rgba(137, 151, 189, 0.2) 2px 2px,
        rgba(137, 151, 189, 0.2) 3px 3px;
}


// Avatar
.img-group {
    .user-avatar {
        &:hover {
            z-index: 2;
        }
    }
}


// Project
.task-accordion {
    &.accordion-item:not(:first-of-type) {
        border-top: 1px;
    }
}
.color-bg {
    background-image: url("../images/extra/color-bg-2.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

// Social Media
.social {
    border: 1px solid $gray-500;
    transition: 0.3s;
    i {
        color: $gray-500;
    }
    &.twitter {
        &:hover {
            border-color: #1da1f2;
            background-color: #1da1f2;
            i {
                color: $white;
            }
        }
    }
    &.instagram {
        &:hover {
            border-color: #f09433;
            background: #f09433;
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            i {
                color: $white;
            }
        }
    }
    &.facebook {
        &:hover {
            border-color: #1877f2;
            background-color: #1877f2;
            i {
                color: $white;
            }
        }
    }
}

// List Style (use faqs)
.list-arrow {
    position: relative;
    &::before {
        content: "\f178";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: $primary;
        position: absolute;
        left: -22px;
    }
}


.major-pairs{
    white-space: nowrap;
}

// .ticker {
//     -webkit-animation: slideleft 30000s infinite linear;
//     animation: slideleft 30000s infinite linear
// }

// @-webkit-keyframes slideleft {
//     from {
//         background-position: 0
//     }

//     to {
//         background-position: 90000%
//     }
// }

// @keyframes slideleft {
//     from {
//         background-position: 0
//     }

//     to {
//         background-position: 90000%
//     }
// }

// .ticker {
//     animation: moveSlideshow 12s linear infinite;
//   }
//   @-webkit-keyframes moveSlideshow {
//     100% {
//         -webkit-transform: translateX(-45%);
//         transform: translateX(-45%);
//     }
//   }
//   @keyframes moveSlideshow {
//       100% {
//           -webkit-transform: translateX(-45%);
//           transform: translateX(-45%);
//       }
//   }
//   .mover {
//       -webkit-animation: mover 1s infinite alternate;
//       animation: mover 12s infinite alternate;
//   }
//   @-webkit-keyframes mover {
//       0% {
//           -webkit-transform: translateY(0);
//           transform: translateY(0);
//       }
//       100% {
//           -webkit-transform: translateY(5px);
//           transform: translateY(5px);
//       }
//   }
//   @keyframes mover {
//       0% {
//           -webkit-transform: translateY(0);
//           transform: translateY(0);
//       }
//       100% {
//           -webkit-transform: translateY(5px);
//           transform: translateY(5px);
//       }
//   }
.ticker{
    display: flex;
}
.ticker-list {
    animation: ticker 12s infinite linear;
    list-inline-item{
        margin-right: 24px;
    }
  }
  .ticker:hover .ticker-list {
    animation-play-state: paused;
  }
  @-moz-keyframes ticker {
    100% {
      transform: translateX(-100%);
    }
  }
  @-webkit-keyframes ticker {
    100% {
      transform: translateX(-100%);
    }
  }
  @-o-keyframes ticker {
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes ticker {
    100% {
      transform: translateX(-100%);
    }
  }
  

//   #widget-container{
//     border: none !important;
//   }
  #widget-container{
    border: 1px solid transparent !important;
  }
  .chart-page{
    background-color: transparent;
  }
    .ticker{
        .pair{
            border: 1px dashed var(--#{$prefix}border-color);
            border-radius: $btn-border-radius;
            padding: 8px;
            margin: 0 2px;
            span{
                &.up{
                    color: $success;
                }
                &.down{
                    color: $danger;
                }
            }
        }
    
        .splide{
            display: grid;
        }
        
        .splide__arrow,
        .splide__pagination{
            display: none;
        }
    }
    .separatorWrap-MBOVGQRI,
    .group-MBOVGQRI{
        background-color: var(--#{$prefix}body-bg) !important;
    }


    .crypto-calcy{
        .card{
            background-color: var(--#{$prefix}card-bg) !important;
        }
    }
    .coinPriceBlock-footer{
        display: none !important;
    }

    .coinPriceBlock-container{
        overflow: hidden !important;
    }

    .gecko-text-light{
        display: none !important;
    }
    .tradingview-widget-copyright,
    .label-dzbd7lyV{
        display: none !important;
    }

    .label-e9c6dycV{
        opacity: 0 !important;
    }

    .sell-trade {
        -webkit-animation: sellanimation 4s infinite;
                animation: sellanimation 4s infinite;
      }
      
      @-webkit-keyframes sellanimation {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(255, 0, 0, 0.2);
        }
      }
      
      @keyframes sellanimation {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(255, 0, 0, 0.2);
        }
      }
      .buy-trade {
        -webkit-animation: buyanimation 3s infinite;
                animation: buyanimation 3s infinite;
      }
      
      @-webkit-keyframes buyanimation {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(0, 158, 0, 0.2);
        }
      }
      
      @keyframes buyanimation {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(0, 158, 0, 0.2);
        }
      }
      .sell-trade-2 {
        -webkit-animation: sellanimation-2 2s infinite;
                animation: sellanimation-2 2s infinite;
      }
      
      @-webkit-keyframes sellanimation-2 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(255, 0, 0, 0.2);
        }
      }
      
      @keyframes sellanimation-2 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(255, 0, 0, 0.2);
        }
      }
      .buy-trade-2 {
        -webkit-animation: buyanimation-2 2s infinite;
                animation: buyanimation-2 2s infinite;
      }
      
      @-webkit-keyframes buyanimation-2 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(0, 158, 0, 0.2);
        }
      }
      
      @keyframes buyanimation-2 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(0, 158, 0, 0.2);
        }
      }
      .sell-trade-3 {
        -webkit-animation: sellanimation-3 5s infinite;
                animation: sellanimation-3 5s infinite;
      }
      
      @-webkit-keyframes sellanimation-3 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(255, 0, 0, 0.2);
        }
      }
      
      @keyframes sellanimation-3 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(255, 0, 0, 0.2);
        }
      }
      .buy-trade-3 {
        -webkit-animation: buyanimation-3 5s infinite;
                animation: buyanimation-3 5s infinite;
      }
      
      @-webkit-keyframes buyanimation-3 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(0, 158, 0, 0.2);
        }
      }
      
      @keyframes buyanimation-3 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(0, 158, 0, 0.2);
        }
      }
      .sell-trade-4 {
        -webkit-animation: sellanimation-4 5s infinite;
                animation: sellanimation-4 5s infinite;
      }
      
      @-webkit-keyframes sellanimation-4 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(255, 0, 0, 0.2);
        }
      }
      
      @keyframes sellanimation-4 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(255, 0, 0, 0.2);
        }
      }
      .buy-trade-4 {
        -webkit-animation: buyanimation-4 5s infinite;
                animation: buyanimation-4 5s infinite;
      }
      
      @-webkit-keyframes buyanimation-4 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(0, 158, 0, 0.2);
        }
      }
      
      @keyframes buyanimation-4 {
        40% {
          background-color: rgba(255, 255, 255, 0.2);
        }
        100% {
          background-color: rgba(0, 158, 0, 0.2);
        }
      }



      .crypto-icon-logo {
        img {
          
          border: 5px solid $card-bg;
        }
      }
      @each $color, $value in $theme-colors {
        .i-shadow-#{$color}{
            box-shadow: 0px 0px 0px 1.25px rgba($value,0.15);
        }
    }

    .bg-globe-img {
      background-image: url('../images/extra/globe.png');
      background-position: right;
      background-repeat: no-repeat;
      background-size: contain;
  }

  .show-icon{
    font-size: 84px;
    &.up{      
      color: rgba($success,0.10);
    }
    &.down{      
      color: rgba($danger,0.10);
    }
  }