.slots-item-provider {
      position: relative
}

.slots-item-center {
      width: 100%;
      aspect-ratio: 1/1;
      left: 0;
      top: 0;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      position: relative;
}

.view_provider {
      z-index: 999999999999;
}

.slots-item-provider .provider_logo {
      width: 40px;
      display: flex;
      gap: .5rem;
      position: absolute;
      top: 0;
}

.slots-item-center .play_demo {
      padding-bottom: 30px;
      margin-top: 1.25rem;
      flex-direction: column;
      display: flex;
      align-items: center;
      gap: .5rem;
      transition-duration: .2s;
}

.slots-item-center .play_demo span {
      background: linear-gradient(to bottom, #ffb606 0%, #ffeda7 100%);
      width: 120px;
      height: 37px;
      text-align: center;
      line-height: 37px;
      border-radius: 50px;
      color: #fff;
      transition-duration: .2s;
}

@media (max-width:640px) {
      .slots-item-center .play_demo span {
            width: 90px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
      }

      .slots-nav {
            display: block;
      }
}

.slots-item-provider .provider-img {
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover
}

.slots-item-provider .box-play-hover {
      width: 100%;
      height: 100%;
      position: relative;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      opacity: 0;
      transition-duration: .2s;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-grow: 1;
      flex-direction: column;
      gap: 1rem;
      padding: 1rem;
}

.slots-item-provider .box-play-hover:hover {
      opacity: 1;
}

.slots-item-provider .provider-name {
      width: 100%;
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      display: inline-flex;
      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
      --tw-gradient-from: var(--color-z-b-gamecard) var(--tw-gradient-from-position);
      --tw-gradient-to: hsla(0, 0%, 100%, 0) var(--tw-gradient-to-position);
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
      --tw-gradient-to: hsla(0, 0%, 100%, 0) var(--tw-gradient-to-position);
      /* --tw-gradient-stops: var(--tw-gradient-from), var(--color-z-b-gamecard) var(--tw-gradient-via-position), var(--tw-gradient-to);
      --tw-gradient-to: var(--color-z-t-gamecard) var(--tw-gradient-to-position) */
}

.slots-item-provider .provider-name-items {
      align-self: stretch;
      height: auto;
      min-height: 30px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      display: flex;
}
.slots-item-provider .provider-name-items .text-t-secondary{
color: var(--color-z-seventh)
}
.slots-item-provider .lang-items-title {
      text-align: center;
      display: block;
      align-self: stretch;
      justify-content: space-between;
      align-items: center;
}

.provider-items {
      gap: .75rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      color: var(--color-z-none-select);
}

.provider-items:hover {
      color: var(--color-z-t-secondary)
}

.loading_slots {
      position: absolute;
      z-index: 99999;
      display: block;
      background: rgba(0, 0, 0, .5);
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
}

.lds-ripple {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
      margin-left: 50px;
      margin-top: 35px;
}

.lds-ripple div {
      position: absolute;
      border: 4px solid #cef;
      opacity: 1;
      border-radius: 50%;
      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
      animation-delay: -0.5s;
}

@keyframes lds-ripple {
      0% {
            top: 36px;
            left: 36px;
            width: 0;
            height: 0;
            opacity: 0;
      }

      4.9% {
            top: 36px;
            left: 36px;
            width: 0;
            height: 0;
            opacity: 0;
      }

      5% {
            top: 36px;
            left: 36px;
            width: 0;
            height: 0;
            opacity: 1;
      }

      100% {
            top: 0px;
            left: 0px;
            width: 72px;
            height: 72px;
            opacity: 0;
      }
}

.lds-grid {
      display: inline-block;
      position: relative;
      width: 80px;
      height: 80px;
      margin-left: 50px;
      margin-top: 35px;
}

.lds-grid div {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
      top: 8px;
      left: 8px;
      animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
      top: 8px;
      left: 32px;
      animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
      top: 8px;
      left: 56px;
      animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
      top: 32px;
      left: 8px;
      animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
      top: 32px;
      left: 32px;
      animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
      top: 32px;
      left: 56px;
      animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
      top: 56px;
      left: 8px;
      animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
      top: 56px;
      left: 32px;
      animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
      top: 56px;
      left: 56px;
      animation-delay: -1.6s;
}

@keyframes lds-grid {

      0%,
      100% {
            opacity: 1;
      }

      50% {
            opacity: 0.5;
      }
}

.arrow_slots,
.arrow_slots:before {
      position: absolute;
      left: 50%;
}

.arrow_slots {
      width: 40px;
      height: 40px;
      top: 40px;
      /* margin: -20px 0 0 -20px; */
      -webkit-transform: rotate(45deg);
      border-left: none;
      border-top: none;
      border-right: 2px #fff solid;
      border-bottom: 2px #fff solid;
}

.arrow_slots:before {
      content: '';
      width: 20px;
      height: 20px;
      bottom: 10px;
      margin: -10px 0 0 -10px;
      border-left: none;
      border-top: none;
      border-right: 1px #2994D1 solid;
      border-bottom: 1px #2994D1 solid;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-name: arrow_slots;
}

@keyframes arrow_slots {
      0% {
            opacity: 1;
      }

      100% {
            opacity: 0;
            transform: translate(-10px, -10px);
      }
}

/* .blur_img {
      filter: blur(4px);
      -webkit-filter: blur(4px);
} */

.imgslot_fade {
      -webkit-animation: zoomIn 0.2s !important;
      animation: zoomIn 0.2s !important;
}

.slots-nav .slot-nav-title {
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      width: auto;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: .5rem;
      cursor: pointer;
      display: block;

}

.total_of_slots {
      color: var(--color-z-b-gamecard);
      text-align: center;
      margin-left: 30px;
}

.slots-nav a {
      padding: 10px;
      font-size: .875rem;
      line-height: 1.25rem;
      white-space: nowrap;
      background-color: var(--color-z-third);
      text-align: center;
      display: block;
      float: left;
      border: 99999;
      border-radius: 50px;
      margin: 5px 5px 0 0;
      color: #fff;
      border: 1px solid var(--deep);
}

.slots-nav a:hover,
.slots-nav a.active1,
.slots-nav a.active {
      background-color: var(--deep);
      border: 1px solid var(--color-z-third);
}

#all_slots .slot-foot {
      color: #fff;
}

.btn-show-slots {
      position: relative;
}