.casino-section .game-type-list ul.gridScroll, .page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul.gridScroll, .page-body .casino-section .game-type-list ul.gridScroll, .providers-section .providers-list ul.gridScroll, .providers-section_v1 .providers-list ul.gridScroll, .racing-grid-wrapper .racing-grid.gridScroll, .game__list .game__list__body ul.gridScroll, .pageTabs-wrapper .pageTabs.gridScroll { position: relative; list-style: none; --grid-column: 3; --grid-side: 2; --grid-gap: 8px; --grid-padding: 14px; --grid-cols: var(--grid-column); --item-width: calc((100% - var(--grid-gap) * (var(--grid-cols) - 1)) / var(--grid-cols)); --tw-scroll-snap-strictness: mandatory; --snap-align: start; --scrollbar-width: 0; grid-auto-columns: var(--item-width); grid-auto-flow: column; margin: 0px; overflow: scroll hidden; scroll-behavior: smooth; scroll-snap-type: x var(--tw-scroll-snap-strictness); scroll-padding-inline: var(--grid-padding); scrollbar-width: none; transform: translateZ(0px); display: grid !important; grid-template-columns: repeat(auto-fill,var(--item-width)) !important; gap: var(--grid-gap) !important; padding: 0 var(--grid-padding) !important; }

.gridView { list-style: none; padding: 0px; margin: 0px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }

@media (width >= 767px) {
  .casino-section .game-type-list ul.gridScroll, .page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul.gridScroll, .page-body .casino-section .game-type-list ul.gridScroll, .providers-section .providers-list ul.gridScroll, .providers-section_v1 .providers-list ul.gridScroll, .racing-grid-wrapper .racing-grid.gridScroll, .game__list .game__list__body ul.gridScroll, .pageTabs-wrapper .pageTabs.gridScroll { --grid-column: 5; }
  .gridView { grid-template-columns: repeat(5, 1fr); }
}

.game-search-bar { padding: 0px 14px 14px; }

.game-search-bar .form-wrap { position: relative; font-size: 10px; border-radius: 6px; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0px; padding: 0px 10px; background: var(--grey-50); border: .55px solid var(--grey-100); max-height: 36px; }

.game-search-bar .form-wrap input { min-height: 35px; border-radius: 10px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; padding: 0px 10px; font-size: 12px; width: 100%; }

.game-search-bar .form-wrap mat-icon { color: var(--black-color); }

.game-search-bar .form-wrap .clear-icon { cursor: pointer; font-size: 16px; text-align: center; width: 20px; background: var(--grey-900); border-radius: 5px; height: 20px; line-height: 20px; }

.page-body app-casino-lobby-page:has(app-casino-filters) { display: flex; flex-direction: column; }

.pageTabs-wrapper { position: sticky; top: 0px; z-index: 100; display: flex; width: 100%; height: 40px; align-items: center; justify-content: flex-start; background: var(--grey-75); color: var(--white-color); }

.pageTabs-wrapper .pageTabs { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 0px 14px; }

.pageTabs-wrapper .pageTabs .pageTab-item { flex-grow: 1; flex-shrink: 0; cursor: pointer; }

.pageTabs-wrapper .pageTabs .pageTab-item .content { display: flex; width: 100%; height: 32px; padding: 0px 8px; align-items: center; justify-content: center; gap: 5px; border-radius: 20px; opacity: 1; font-family: open_bold; font-size: 12px; text-transform: capitalize; color: var(--white-color); }

@media (hover: hover) and (pointer: fine) {
  .pageTabs-wrapper .pageTabs .pageTab-item .content:hover { background-color: var(--secondary-color); border-radius: 20px; }
  .pageTabs-wrapper .pageTabs .pageTab-item .content:hover img, .pageTabs-wrapper .pageTabs .pageTab-item .content:hover mat-icon, .pageTabs-wrapper .pageTabs .pageTab-item .content:hover p { filter: invert(1); }
}

.pageTabs-wrapper .pageTabs .pageTab-item .content.active { background-color: var(--secondary-color); border-radius: 20px; }

.pageTabs-wrapper .pageTabs .pageTab-item .content.active img, .pageTabs-wrapper .pageTabs .pageTab-item .content.active mat-icon, .pageTabs-wrapper .pageTabs .pageTab-item .content.active p { filter: invert(1); }

.pageTabs-wrapper .pageTabs .pageTab-item .content img, .pageTabs-wrapper .pageTabs .pageTab-item .content mat-icon { width: 32px; height: 32px; object-fit: contain; }

.pageTabs-wrapper .pageTabs .pageTab-item .content p { margin: 0px; }

.lobby-wrapper { padding: 0px 10px 10px; height: 100%; max-height: 100%; overflow-y: auto; scrollbar-width: none; }

.lobby-wrapper:has(app-game-list .gridView) { padding: 0px 10px 10px 14px; }

.lobby-wrapper:has(app-game-list .gridScroll) { padding: 0px; }

.viewport_scroll { height: 100%; }

.providers-section { margin: 15px 0px; padding: 0px; }

.providers-section .providers-list ul { list-style: none; padding: 0px; margin: 0px; display: flex; align-items: center; justify-content: flex-start; gap: 0px; overflow-x: auto; scrollbar-width: none; width: 100%; }

.providers-section .providers-list ul::-webkit-scrollbar { display: none; }

.providers-section .providers-list ul li { flex-shrink: 0; transition: transform 0.75s, opacity 0.75s; scroll-snap-align: center; }

.providers-section .providers-list ul li:last-child { padding: 0px; }

.providers-section .providers-list ul li.lobby-item { min-width: 95px; }

.providers-section .providers-list ul li.lobby-item .provider-item { justify-content: center; gap: 10px; }

.providers-section .providers-list ul li.lobby-item .provider-item:hover .p-logo img, .providers-section .providers-list ul li.lobby-item .provider-item:hover p, .providers-section .providers-list ul li.lobby-item .provider-item.active .p-logo img, .providers-section .providers-list ul li.lobby-item .provider-item.active p { filter: unset; }

.providers-section .providers-list ul li.lobby-item .provider-item .p-logo { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }

.providers-section .providers-list ul li.lobby-item .provider-item .p-logo img { width: 100%; height: 100%; display: block; margin: auto; object-fit: contain; filter: grayscale(1); }

.providers-section .providers-list ul li.lobby-item .provider-item .p-logo span.uIcons_grid { color: var(--grey-100); font-size: 20px; }

.providers-section .providers-list ul li.lobby-item .provider-item p { font-family: open_bold; }

.providers-section .providers-list ul li .provider-item { display: flex; align-items: center; justify-content: flex-start; gap: 5px; background: var(--white-color); border-radius: 6px; height: 36px; padding: 5px; text-decoration: none; cursor: pointer; border: 1px solid transparent; }

.providers-section .providers-list ul li .provider-item .p-logo { width: 100%; height: 100%; position: relative; }

.providers-section .providers-list ul li .provider-item .p-logo img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: block; margin: auto; object-fit: contain; opacity: 1; transition: opacity 0.1s ease-in; }

.providers-section .providers-list ul li .provider-item .p-logo img.main-img { opacity: 1; }

.providers-section .providers-list ul li .provider-item .p-logo img.hovered-img { opacity: 0; }

@media (hover: hover) {
  .providers-section .providers-list ul li .provider-item:hover { border: 1px solid var(--highlight-color); }
  .providers-section .providers-list ul li .provider-item:hover .p-logo .main-img { opacity: 0; }
  .providers-section .providers-list ul li .provider-item:hover .p-logo .hovered-img { opacity: 1; }
}

.providers-section .providers-list ul li .provider-item.active { border: 1px solid var(--highlight-color); }

.providers-section .providers-list ul li .provider-item.active .p-logo .main-img { opacity: 0; }

.providers-section .providers-list ul li .provider-item.active .p-logo .hovered-img { opacity: 1; }

.providers-section .providers-list ul li .provider-item p { margin: 0px; font-size: 12px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: grayscale(1); opacity: 1; transition: opacity 0.25s, filter 0.25s; color: var(--black-color); }

.game-search-bar .form-wrap { position: relative; font-size: 10px; border-radius: 6px; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0px; padding: 0px 10px; background: var(--white-color); border: .55px solid var(--grey-400); }

.game-search-bar .form-wrap input { min-height: 40px; border-radius: 10px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; padding: 0px 10px; font-size: 12px; width: 100%; color: var(--black-color); }

.game__list:has(.gridView) .game__list__head { padding-left: 0px; }

.game__list .game__list__body ul li .game-detail p.company-type, .game__list .game__list__body ul li .game-detail p.coins-limit { font-size: 10px; color: var(--white-color); opacity: 0.6; font-family: open_semiBold; }