@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro');
/*Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700*/

html { scroll-behavior: smooth; }
body { overflow-x: hidden; font-family: 'Neue Haas Grotesk Display Pro', sans-serif !important; font-weight: 400; font-size: 14px; line-height: 18px; color: #fff; margin: 0; background-color: #000; }
.bg-image { background-image: url(../images/bg2.png); background-position: top left; background-repeat: no-repeat; background-size: cover;
    position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: -1;
}
input, textarea, button { font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-weight: 400; }
*,
*:before,
*:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
h2 { margin: 0; font-size: 30px !important; line-height: 1.2em !important; color: #fff; font-weight: 600 !important; }
h4 { margin: 0; font-size: 20px; line-height: 1.2em; color: #fff; font-weight: 600; }
img { vertical-align: middle; border-style: none; }
p { font-family: 'Neue Haas Grotesk Display Pro', sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; color: #fff; margin: 0 0 16px 0; }
p:last-child { margin-bottom: 0; }
a { text-decoration: none; transition: all 0.5s ease; }
a:hover { text-decoration: none;}
img { max-width: 100%; }
.container { max-width: 797px; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.pb-0 { padding-bottom: 0 !important; }

.row-grid { display: flex; flex-direction: row; flex-wrap: wrap; margin-left:-8px; margin-right:-8px; }
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { position:relative; padding-left:8px; padding-right:8px; }
.col-1 { flex: 0 0 8.33%; max-width:8.33%; }
.col-2 { flex: 0 0 16.66%; max-width:16.66%; }
.col-3 { flex: 0 0 25%; max-width:25%; }
.col-4 { flex: 0 0 33.33%; max-width:33.33%; }
.col-5 { flex: 0 0 41.66%; max-width:41.66%; }
.col-6 { flex: 0 0 50%; max-width:50%; }
.col-7 { flex: 0 0 58.33%;max-width:58.33%; }
.col-8 { flex: 0 0 66.66%;max-width:66.66%; }
.col-9 { flex: 0 0 75%; max-width:75%; }
.col-10 { flex: 0 0 83.33%; max-width:83.33%; }
.col-11 { flex: 0 0 91.66%; max-width:91.66%; }
.col-12 { flex: 0 0 100%; max-width:100%; }
#wrapper { overflow-x: hidden; width: 100%; }

.header { position: relative; padding:30px 0px 5px 0px; transition: all 0.3s ease; }
.header .header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; }
.header .header-row .left-col { display: flex; flex-wrap: wrap; align-items: center; }
.header .header-row .left-col .image:not(:last-child) { margin-right: 8px; }
.header .header-row .right-col { display: flex; flex-wrap: wrap; align-items: center; }
.header .header-row .right-col > ul { padding: 0; margin: 0 -7px; display: flex; flex-wrap: wrap; align-items: center; }
.header .header-row .right-col > ul > li { padding: 0 7px; margin: 0; list-style: none; }
.search-icon { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; background-color: #1E293B; border-radius: 50px; }

.search-modal-popup { display: none; background-color: #000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; width: 100%; height: 100%; z-index: 10000; background-image: url(../images/bg.png); background-position: top left; background-repeat: no-repeat; background-size: cover; }
.search-modal-popup .modal-contents { padding: 20px 0; }
.search-modal-popup .modal-contents h2 { margin: 0 0 10px 0; }
.search-modal-popup .modal-contents .search-control { position: relative; }
.search-modal-popup .modal-contents .search-control .text-field { z-index: 1; position: relative; border: 1px solid #94A3B8; height: 44px; background-color: #1E293B; outline: none; padding: 5px 15px 5px 40px; border-radius: 8px; width: 100%; font-size: 16px; font-weight: 400; line-height: 24px; color: #CBD5E1; }
.search-modal-popup .modal-contents .search-control .text-field::-webkit-input-placeholder {  color: #64748B; }
.search-modal-popup .modal-contents .search-control .text-field::-moz-placeholder {  color: #64748B; }
.search-modal-popup .modal-contents .search-control .text-field:-ms-input-placeholder {  color: #64748B; }
.search-modal-popup .modal-contents .search-control .text-field:-moz-placeholder {  color: #64748B; }
.search-modal-popup .modal-contents .search-control .search-submit { height: 44px; width: 40px; background-color: transparent; border: none; outline: none; position: absolute; left: 0; top: 0; background-image: url(../images/search-icon.svg); background-position: center center; background-repeat: no-repeat; z-index: 1; cursor: pointer; }
.search-modal-popup.show { display: block; }
.search-modal-popup .modal-contents .search-control .shadow { border-radius: 10px; position: absolute; left: -3px; top: -3px; right: -3px; bottom: -3px; background-color: #000; background: linear-gradient(135deg,  rgba(144,255,250,1) 0%,rgba(58,175,170,1) 100%); opacity: 0; }
.search-modal-popup .modal-contents .search-control .text-field:focus,
.search-modal-popup .modal-contents .search-control .text-field:active,
.search-modal-popup .modal-contents .search-control .text-field.active { border-color: transparent; }
.search-modal-popup .modal-contents .search-control .text-field:focus ~ .shadow,
.search-modal-popup .modal-contents .search-control .text-field:active ~ .shadow,
.search-modal-popup .modal-contents .search-control .text-field.active ~ .shadow { opacity: 1; }

.search-noresult-middlecol { padding: 0 15px; height: calc(100vh - 243px); min-height: 250px; display: flex; justify-content: center; align-items: center; overflow-y: auto; }
.search-noresult-middlecol .search-noresult-content { width: 100%; text-align: center; position: relative; padding: 10px 0; }
.search-noresult-middlecol .search-noresult-content .image { margin-bottom: 24px; }
.search-noresult-middlecol .search-noresult-content .image img { position: relative; z-index: 1; }
.search-noresult-middlecol .search-noresult-content .content { z-index: 1; position: relative; max-width: 250px; margin: 0 auto; }
.search-noresult-middlecol .search-noresult-content .content h3 { font-size: 24px; font-weight: 600; line-height: 32px; margin: 0; }
.search-noresult-middlecol .search-noresult-content .content p { font-size: 16px; line-height: 20px; }
.search-result-middlecol { padding: 0 15px; height: calc(100vh - 270px); overflow-y: auto; }
.search-result-middlecol h6 { font-size: 14px; font-weight: 400; line-height: 18px; color: #64748B; margin: 0 0 32px 0; }
.search-resultlist { padding: 0; margin: 0 -7px; display: flex; flex-wrap: wrap; }
.search-resultlist li { list-style: none; padding: 0 7px; margin: 0 0 16px 0; width: 50%; }
.search-resultlist li .image img { width: 100%; border-radius: 10px; }
.search-resultlist li .content { padding-top: 10px; }
.search-resultlist li .content h6 { font-size: 14px; color: #fff; margin: 0 0 4px 0; line-height: 18px; font-weight: 400; }
.search-resultlist li .content h6 a { color: #fff; }
.search-resultlist li .content .play-now { display: flex; align-items: center; color: #90FFFA; font-size: 11px; line-height: 18px; background: linear-gradient(145.68deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.search-resultlist li .content .play-now img { margin-right: 8px; }

.game-desdrawer { position: fixed; height: calc(100% - 160px); left: 0; right: 0; bottom: calc(-100% + 160px); z-index: 11111; transition: all 0.5s ease; }
.game-desdrawer .game-desdrawer-image { height: 225px; position: relative; }
.game-desdrawer .game-desdrawer-image:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; border-radius: 16px 16px 0px 0px; background: linear-gradient(180deg, #D3D3D3 0%, rgba(217, 217, 217, 0.00) 39.62%, rgba(24, 24, 24, 0.00) 39.62%); mix-blend-mode: screen; }
.game-desdrawer .game-desdrawer-image .handlebar { position: absolute; left: 50%; top: 16px; width: 160px; height: 4px; border-radius: 2px; background: #CBD5E1; transform: translateX(-50%); }
.game-desdrawer .game-desdrawer-image img { border-radius: 16px 16px 0px 0px; height: 100%; object-fit: cover; width: 100%; object-position: center; }
.game-desdrawer .content { padding: 15px; background: rgba(51,65,85,0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -moz-backdrop-filter: blur(6px); height: calc(100% - 225px); display: flex; flex-direction: column; overflow: auto; }
.game-desdrawer .content h5 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 16px 0; color: #fff; }
.game-desdrawer .content h6 { font-size: 12px; line-height: 16px; font-weight: 600; margin: 0 0 8px 0; color: #fff; }
.game-desdrawer .content p { color: #94A3B8; }
.game-desdrawer .content > ul { padding: 0; margin: 0 0 16px 0; }
.game-desdrawer .content > ul > li { list-style: none; color: #94A3B8; font-size: 14px; line-height: 18px; font-weight: 400; margin-bottom: 5px; }
.game-desdrawer .content .blue-btn { margin-top: auto; }
.game-desdrawer .overlay { position: fixed; content: ''; left: 0; top: 0; background-color: rgb(18,18,18,0.66); width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; }
body.show-game-detail .game-desdrawer { bottom: 0; }
body.show-game-detail .game-desdrawer .overlay { opacity: 1; visibility: visible; }

.search-page .search-contents { padding: 20px 0; }
.search-page .search-contents h2 { margin: 0 0 10px 0; }
.search-page .search-contents .search-control { position: relative; }
.search-page .search-contents .search-control .text-field { z-index: 1; position: relative; border: 1px solid #94A3B8; height: 44px; background-color: #1E293B; outline: none; padding: 5px 15px 5px 40px; border-radius: 8px; width: 100%; font-size: 16px; font-weight: 400; line-height: 24px; color: #CBD5E1; }
.search-page .search-contents .search-control .text-field::-webkit-input-placeholder {  color: #64748B; }
.search-page .search-contents .search-control .text-field::-moz-placeholder {  color: #64748B; }
.search-page .search-contents .search-control .text-field:-ms-input-placeholder {  color: #64748B; }
.search-page .search-contents .search-control .text-field:-moz-placeholder {  color: #64748B; }
.search-page .search-contents .search-control .search-submit { height: 44px; width: 40px; background-color: transparent; border: none; outline: none; position: absolute; left: 0; top: 0; background-image: url(../images/search-icon.svg); background-position: center center; background-repeat: no-repeat; z-index: 1; cursor: pointer; }
.search-page .search-contents .search-control .shadow { border-radius: 10px; position: absolute; left: -3px; top: -3px; right: -3px; bottom: -3px; background-color: #000; background: linear-gradient(135deg,  rgba(144,255,250,1) 0%,rgba(58,175,170,1) 100%); opacity: 0; }
.search-page .search-contents .search-control .text-field:focus,
.search-page .search-contents .search-control .text-field:active,
.search-page .search-contents .search-control .text-field.active { border-color: transparent; }
.search-page .search-contents .search-control .text-field:focus ~ .shadow,
.search-page .search-contents .search-control .text-field:active ~ .shadow,
.search-page .search-contents .search-control .text-field.active ~ .shadow { opacity: 1; }

.blue-btn { cursor: pointer; font-size: 14px; font-weight: 400; line-height: 24px; text-align: center; color: #fff; outline: none; border: none; background-color: #3AAFAA; border-radius: 60px; padding: 10px 16px; display: block; }
.blue-btn.disabled { background-color:#475569; cursor: auto; }
.blue-btn.width-auto { display: inline-block; }

.header .header-row .right-col > ul > li .language-icon { display: flex; height: 36px; min-width: 36px; padding: 0 8px; color: #64748B; align-items: center; border-radius: 50px; }
.header .header-row .right-col > ul > li .language-icon span { font-size: 12px; text-transform: uppercase; margin-left: 6px; }
.header .header-row .right-col > ul > li .language-icon.active { background-color: #1E293B; }
.header .header-row .right-col > ul > li .language-icon.active > img { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); -moz-filter: brightness(0) invert(1); }
.header .header-row .right-col > ul > li .language-icon.active span { display: none; }
.header .header-row .right-col > ul > li .language-dropdown { display: none; z-index: 9; padding: 4px; position: absolute; left: 0; top: 100%; margin-top: 16px; width: 100%; background-color: #334155; border-radius: 8px; }
.header .header-row .right-col > ul > li .language-dropdown ul { padding: 0; margin: 0; }
.header .header-row .right-col > ul > li .language-dropdown ul li { padding: 0; margin: 0; list-style: none; }
.header .header-row .right-col > ul > li .language-dropdown ul li a { font-size: 14px; line-height: 18px; color:#CBD5E1; padding: 9px 16px; display: block; border-radius: 8px; }
.header .header-row .right-col > ul > li .language-dropdown ul li a:hover,
.header .header-row .right-col > ul > li .language-dropdown ul li.active a { background-color: #fff; color: #186B67; }
.header .header-row .right-col > ul > li .language-dropdown:before { width: 12px; height: 12px; background-color: #334155; transform: rotate(45deg); position: absolute; right: 12px; top: -6px; content: ''; z-index: -1; }

.main-slider { position: relative; margin-bottom: 37px; }
.main-slider .swiper-slide .image { position: relative; }
.main-slider .swiper-slide .image img { border-radius: 16px; width: 100%; }
.main-slider .swiper-slide .image:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background-color: #1E293B; opacity: 0.5; border-radius: 16px; }
.main-slider .swiper-slide.swiper-slide-active .image:after { display: none; }
.main-slider .slick-dots { list-style: none; padding: 0; margin: 0; display: flex; width: 100%; }
.main-slider .slick-dots li {margin: 0 2px; display: flex; }
.main-slider .slick-dots li button { border: none; padding: 0; background: transparent; font-size: 0; width: 4px; height: 4px; background-color: #475569; border-radius: 10px; cursor: pointer; transition: all 0.5s ease; }
.main-slider .slick-dots li.slick-active button { width: 24px; pointer-events: none; background-color: #fff; }
.main-slider .swiper-pagination { bottom: -18px; }
.main-slider .swiper-pagination .swiper-pagination-bullet { margin: 0 2px; width: 4px; height: 4px; background: #475569; opacity: 1; border-radius: 10px; }
.main-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 24px; background: #fff; }

.headings { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.headings h3 { font-weight: 600; font-size: 20px; line-height: 28px; color: #fff; margin: 0; }
.headings .view-all { color: #64748B; font-size: 11px; line-height: 18px; }
.headings .view-all:hover { color: #fff; }

.player-nav { display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 16px 0; gap: 8px; }
.player-nav li { margin: 0; padding: 0; list-style: none; position: relative; }
.player-nav li a { position: relative; display: inline-flex; padding: 1px; border-radius: 40px; }
.player-nav li a span { position: relative; overflow: hidden; border-radius: 40px; color: #fff; display: flex; align-items: center; flex-wrap: wrap; font-size: 14px; line-height: 18px; font-weight: 400; padding: 8px 12px; }
.player-nav li a span img { margin-right: 8px; filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); -moz-filter: brightness(0) invert(1); }
.player-nav li.active a { background: linear-gradient(to bottom, rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%); }
.player-nav li.active a span { z-index: 1; background: radial-gradient(58.99% 58.99% at 50% 0%, rgba(135, 255, 250, 0.33) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(104.31% 104.31% at 50% -4.31%, rgba(3, 88, 84, 0.66) 0%, rgba(18, 18, 18, 0.66) 100%), #121212; }
.player-nav li.active a span img { filter: none; }

.player-tabsection .tab-content { display: none; }
.player-tabsection .tab-content.current { display: block; }

.player-section { padding: 24px 0; }
.player-slider .swiper-slide .item .image img { width: 100%; border-radius: 8px; }
.player-slider .swiper-slide .item .content { padding: 8px 0; }
.player-slider .swiper-slide .item .content h6 { font-size: 14px; color: #fff; margin: 0 0 4px 0; line-height: 18px; font-weight: 400; display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.player-slider .swiper-slide .item .content h6 a { color: #fff; }
.player-slider .swiper-slide .item .content .play-now { display: flex; align-items: center; color: #90FFFA; font-size: 11px; line-height: 18px; background: linear-gradient(145.68deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.player-slider .swiper-slide .item .content .play-now img { margin-right: 8px; }

.recommended-gamesection { padding: 24px 0 8px 0; }
.recommended-gamelist { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.recommended-gamelist .item { padding: 0 6px; margin-bottom: 16px; width: 33.33%; }
.recommended-gamelist .item .inner .image img { width: 100%; border-radius: 8px; }
.recommended-gamelist .item .inner .content { padding: 4px 0; }
.recommended-gamelist .item .inner .content h6 { font-size: 12px; color: #fff; margin: 0; line-height: 18px; font-weight: 400; word-break: break-word; display: -webkit-box;
    max-width: 200px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }
.recommended-gamelist .item .inner .content h6 a { color: #fff; }

.leadership-banner { padding: 24px 0; z-index: 1; position: relative; }
.leadership-banner .image { position: relative; background-clip: padding-box; padding: 1px; }
.leadership-banner .image:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(to bottom, rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%); z-index: -1; border-radius: 16px; }
.leadership-banner .image:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background-color:rgba(0,0,0,0.33); border-radius: 16px; }
.leadership-banner .image > img { border-radius: 16px; width: 100%; }
.leadership-banner .image .content { padding: 10px; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; }
.leadership-banner .image .content > img { margin-bottom: 26px; }
.leadership-banner .image .content .img { position: relative; }
.leadership-banner .image .content:after { position: absolute; left: 0; top: 10%; width: 100%; height: 170px; content: ''; background-image: url(../images/star-4.png); background-position: top -10px center; background-repeat: no-repeat; }
.leadership-banner .image .content .text { position: relative; z-index: 1; }

.back-btnrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 10px 0; margin-bottom: 22px; }
.back-btnrow .back-btn { font-size: 16px; line-height: 24px; font-weight: 600; color: #94A3B8; display: inline-flex; padding-left: 28px; background-image: url(../images/back-icon.svg); background-position: left 8px center; background-repeat: no-repeat; }
.back-btnrow .back-btn:hover { color: #fff; }

.gradient-btn { position: relative; padding: 1px; background: linear-gradient(to bottom, rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%); border-radius: 40px; }
.gradient-btn span,
.gradient-btn a { color: #fff; z-index: 1; position: relative; background: var(--basic-dark-gra, radial-gradient(58.99% 58.99% at 50% 0%, rgba(135, 255, 250, 0.33) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(104.31% 104.31% at 50% -4.31%, rgba(3, 88, 84, 0.66) 0%, rgba(18, 18, 18, 0.66) 100%), #121212); border-radius: 40px; padding: 4px 8px; font-size: 14px; font-weight: 600; line-height: 18px; display: flex; align-items: center; }
.gradient-btn span img { margin-right: 4px; }
.gradient-btn a img { margin-right: 4px; }

.multiplayer-page { padding: 20px 0; }
.multiplayer-list { padding-top: 8px; z-index: 1; position: relative; }
.multiplayer-list .multiplayer-col { margin-bottom: 0; }
.multiplayer-list .multiplayer-col h4 { margin-bottom: 24px; }
.multiplayer-list .multiplayer-col .item { position: relative; margin-bottom: 48px;  border-radius: 16px; }
.multiplayer-list .multiplayer-col .item a { color: #fff; }
.multiplayer-list .multiplayer-col .item:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; border-radius: 16px; border: 1px solid var(--basic-gra, rgba(255, 255, 255, 0.64)); }
.multiplayer-list .multiplayer-col .item .image { position: relative; }
.multiplayer-list .multiplayer-col .item .image img { border-radius: 16px; width: 100%; opacity: 0.32; }
.multiplayer-list .multiplayer-col .item .image:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; border-radius: 16px; background: linear-gradient(0deg, #000 -2.22%, rgba(0, 0, 0, 0.00) 90.37%); }
.multiplayer-list .multiplayer-col .item .content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 16px 16px 16px 24px; z-index: 9; display: flex; flex-direction: column; }
.multiplayer-list .multiplayer-col .item .content .coin { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.multiplayer-list .multiplayer-col .item .detail-row { display: flex; flex-wrap: wrap; margin-bottom: 16px; }
.multiplayer-list .multiplayer-col .item .detail-row .thumb { width: 60px; }
.multiplayer-list .multiplayer-col .item .detail-row .thumb img { border-radius: 8px; }
.multiplayer-list .multiplayer-col .item .detail-row .contents { padding-left: 8px; width: calc(100% - 60px); }
.multiplayer-list .multiplayer-col .item .detail-row .contents h6 { font-size: 14px; line-height: 18px; font-weight: 600; margin: 0; }
.multiplayer-list .multiplayer-col .item .detail-row .contents h6 a { color: #fff; }
.multiplayer-list .multiplayer-col .item .detail-row .contents .time { font-size: 11px; line-height: 18px; color: #94A3B8; font-weight: 400; display: flex; align-items: center; }
.multiplayer-list .multiplayer-col .item .detail-row .contents .time img { margin-right: 8px; }
.multiplayer-list .multiplayer-col .item .bottom-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: auto; }
.multiplayer-list .multiplayer-col .item .bottom-row .participants { display: flex; flex-wrap: wrap; align-items: center; font-size: 11px; line-height: 18px; font-weight: 400; color: #fff; }
.multiplayer-list .multiplayer-col .item .bottom-row .participants img { margin-right: 8px; }
.multiplayer-list .multiplayer-col .item .bottom-row .participants span { font-weight: 600; margin-right: 3px; }
.multiplayer-list .multiplayer-col .item .bottom-row .learn-more { font-size: 14px; line-height: 18px; font-weight: 600; background: linear-gradient(146deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.multiplayer-list .multiplayer-col.two-column .item .content { padding: 16px; }
.multiplayer-list .multiplayer-col.two-column .item .detail-row .contents { width: 100%; padding-left: 0; }
.multiplayer-list .multiplayer-col.two-column .item .detail-row .contents h6 { margin-bottom: 8px; }
.multiplayer-list .multiplayer-col.two-column .item .detail-row .contents .time { color: #fff; }
.multiplayer-list .multiplayer-col.two-column .item .content .coin { justify-content: flex-start; margin-top: auto; margin-bottom: 0; }
.multiplayer-list .multiplayer-col.two-column .item .image:after { background: #0F172A; opacity: 0.5; }
.multiplayer-list .multiplayer-col.two-column .item .image img { opacity: 1; }
.multiplayer-list .multiplayer-col.two-column .item:before { box-shadow: -1px -1px 0px rgb(255 255 255 / 64%), 1px 1px 0px rgb(237 237 237 / 30%); }

.tournament-detail-popup { margin: 0 15px; padding-top: 30px; }
.tournament-detail-popup .image { height: 225px; position: relative; }
.tournament-detail-popup .image > img { height: 100%; object-fit: cover; width: 100%; object-position: center; border-radius: 16px 16px 0px 0px; }
.tournament-detail-popup .image .label { position: absolute; left: 12px; bottom: 12px; z-index: 1; }
.tournament-detail-popup .image .label a,
.tournament-detail-popup .image .label span { color: #6AF3ED; font-size: 11px; line-height: 18px; display: inline-block; padding: 4px 8px; background-color: #334155; border-radius: 30px; }
.tournament-detail-popup .image.shadow:after { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; opacity: 0.8; background: radial-gradient(58.99% 58.99% at 50% 0%, rgba(135, 255, 250, 0.33) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(104.31% 104.31% at 50% -4.31%, rgba(3, 88, 84, 0.66) 0%, rgba(18, 18, 18, 0.66) 100%), #121212; }
.tournament-detail-popup .image.shadow:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; z-index: 1; background-image: url(../images/Star.png); background-position: center center; background-repeat: no-repeat; }
.tournament-detail-popup .image .content { text-align: center; position: absolute; left: 0; right: 0; width: 100%; top: 50%; transform: translateY(-50%); z-index: 1; }
.tournament-detail-popup .image .content h2 { font-size: 40px; line-height: 44px; margin-bottom: 15px; }
.tournament-detail-popup .image .content .gradient-btn { display: inline-flex;}
.tournament-detail-popup .image .content .gradient-btn span,
.tournament-detail-popup .image .content .gradient-btn a { font-size: 26px; padding: 9px 15px; }
.tournament-detail-popup .image .content .gradient-btn span img,
.tournament-detail-popup .image .content .gradient-btn a img { height: 33px; }

.tournament-detail-popup .tournament-content { height: calc(100vh - 347px); overflow: auto; padding: 0px 15px; background-color:rgba(51,65,85,1); position: relative; }
.tournament-detail-popup .detail-tabs { display: flex; flex-wrap: wrap; margin: 0; gap: 24px; z-index: 11; padding: 24px 0px; background-color:rgba(51,65,85,1); position: sticky; top: 0; margin-bottom: 12px; }
.tournament-detail-popup .detail-tabs > li { padding: 0; margin: 0; list-style: none; z-index: 1; }
.tournament-detail-popup .detail-tabs > li > a { color: #64748B; font-size: 14px; line-height: 18px; font-weight: 400; }
.tournament-detail-popup .detail-tabs > li.active > a { color: #fff; font-weight: 600; }
.tournament-detail-popup .detail-tabs:after { background-color: rgba(51,65,85,1); position: absolute; left: -15px; right: -15px; top: 0; height: 100%; content: ''; }
.tournament-content .tabs-content h5 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 16px 0; color: #fff; }
.tournament-content .tabs-content h6 { font-size: 12px; line-height: 16px; font-weight: 600; margin: 0 0 8px 0; color: #fff; }
.tournament-content .tabs-content p { color: #94A3B8; }
.tournament-content .tabs-content > ul { padding: 0; margin: 0 0 16px 0; }
.tournament-content .tabs-content > ul > li { list-style: none; color: #94A3B8; font-size: 14px; line-height: 18px; font-weight: 400; margin-bottom: 5px; }

.tournament-content .tabs-content .tab-content { display: none; }
.tournament-content .tabs-content .tab-content.current { display: block; }

.tournament-detail-popup .bottom-btn { position: fixed; bottom: 0px; left: 0; right: 0; background-color: rgba(51,65,85,1); padding: 24px 15px; max-width: 797px; margin: 0 auto; }
.tournament-detail-popup .bottom-btn .join-event { display: flex; align-items: center; background-color: #3AAFAA; color: #fff; font-size: 14px; line-height: 18px; padding: 13px 8px; justify-content: center; border-radius: 50px; }
.tournament-detail-popup .bottom-btn .gradient-btn { position: absolute; right: 23px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.tournament-detail-popup.detail-popup { position: fixed; height: calc(100% - 60px); margin: 0; padding-top: 0; left: 0; right: 0; bottom: calc(-100% + 60px); z-index: 11111; transition: all 0.5s ease; }
.tournament-detail-popup.detail-popup .overlay { position: fixed; content: ''; left: 0; top: 0; background-color: rgb(18,18,18,0.66); width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; }
body.show-multiplayer-detail .tournament-detail-popup.detail-popup { bottom: 0; }
body.show-multiplayer-detail .tournament-detail-popup.detail-popup .overlay { opacity: 1; visibility: visible; }
.tournament-detail-popup.detail-popup .tournament-content { height: calc(100vh - 285px); display: flex; flex-direction: column; }
.tournament-detail-popup.detail-popup .bottom-btn { position: sticky; padding-left: 0; padding-right: 0; margin-top: auto; width: 100%; }
.tournament-detail-popup.detail-popup .bottom-btn .gradient-btn { right: 8px; }

.option-list { background-image: url(../images/Gradient.png); background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; border-radius: 16px; background-size: cover; padding: 8px; margin-bottom: 24px; z-index: 0; position: relative; box-shadow: -1px -1px 0px rgb(255 255 255 / 64%), 1px 1px 0px rgb(237 237 237 / 30%); }
.option-list ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; }
.option-list ul li { list-style: none; padding: 8px 0; width: 50%; }
.option-list ul li .item { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.option-list ul li .item label { font-size: 11px; line-height: 18px; color: #fff; margin: 0 0 2px 0; font-weight: 400; }

.tournament-content .tabs-content .prizes-list { margin: 0; padding: 0; }
.tournament-content .tabs-content .prizes-list > li { min-height: 60px; margin: 0 0 16px 0; padding: 8px; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: rgba(30,41,59,0.33); border: 1px solid #90FFFA; border-radius: 8px; }
.tournament-content .tabs-content .prizes-list > li h6 { display: flex; align-items: center; font-size: 16px; line-height: 24px; color: #fff; margin: 0; font-weight: 400; }
.tournament-content .tabs-content .prizes-list > li h6 img { margin-left: 4px; }
.tournament-content .tabs-content .prizes-list > li .coin { display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 18px; color: #fff; }
.tournament-content .tabs-content .prizes-list > li .coin img { margin-right: 4px; }

.tournament-content .tabs-content .leaderboard-list { padding: 0; margin: 0; }
.tournament-content .tabs-content .leaderboard-list > li { min-height: 60px; margin: 0 0 12px 0; padding: 8px; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: rgba(30,41,59,0.33); border: 1px solid #90FFFA; border-radius: 8px; }
.tournament-content .tabs-content .leaderboard-list > li > a { display: flex; flex-wrap: wrap; align-items: center; width: 100%; justify-content: space-between; }
.tournament-content .tabs-content .leaderboard-list > li h6 { display: flex; align-items: center; font-size: 16px; line-height: 24px; color: #fff; margin: 0; font-weight: 400; }
.tournament-content .tabs-content .leaderboard-list > li h6 img { margin-left: 4px; }
.tournament-content .tabs-content .leaderboard-list > li .left-col { display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 18px; color: #fff; }
.tournament-content .tabs-content .leaderboard-list > li .left-col .number { font-size: 16px; line-height: 24px; font-weight: 400; min-width: 20px; }
.tournament-content .tabs-content .leaderboard-list > li .left-col .icon { width: 30px; height: 30px; overflow: hidden; margin-right: 8px; }
.tournament-content .tabs-content .leaderboard-list > li .left-col .icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 60px; }
.tournament-content .tabs-content .leaderboard-list > li .left-col .content h6 { font-size: 16px; font-weight: 600; line-height: 24px; margin: 0; }
.tournament-content .tabs-content .leaderboard-list > li .left-col .content p { font-size: 11px; font-weight: 400; line-height: 14px; color: #fff; margin: 0; }
.tournament-content .tabs-content .leaderboard-list > li .right-col { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tournament-content .tabs-content .leaderboard-list > li .right-col h6 { font-size: 16px; font-weight: 400; line-height: 24px; }
.tournament-content .tabs-content .leaderboard-list > li .right-col p { font-size: 12px; font-weight: 400; line-height: 16px; color: #fff; }
.tournament-content .tabs-content .leaderboard-list > li.active { border: none; background: linear-gradient(146deg, #90FFFA 7.25%, #3AAFAA 74.07%); }
.tournament-content .tabs-content .leaderboard-list > li.active .left-col .number,
.tournament-content .tabs-content .leaderboard-list > li.active .left-col .content h6,
.tournament-content .tabs-content .leaderboard-list > li.active .right-col h6,
.tournament-content .tabs-content .leaderboard-list > li.active .right-col p { color: #0D4946; }
.tournament-content .tabs-content .leaderboard-list > li.active .left-col .content p { color: #278D89; }

body.event-completed { background: radial-gradient(58.99% 58.99% at 50% 0%, rgba(135, 255, 250, 0.33) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(104.31% 104.31% at 50% -4.31%, rgba(3, 88, 84, 0.66) 0%, rgba(18, 18, 18, 0.66) 100%), #121212; background-repeat: no-repeat; }
body.event-completed #content { padding-bottom: 0px; } 
.multi-event-compsection { position: relative; height: 100vh; margin: 0; padding-top: 120px; background-image: url(../images/event-bg.png); background-position: top center; background-repeat: no-repeat; background-size: contain; }
.multi-event-compsection .digit-col { display: flex; justify-content: center; padding: 50px 0; text-align: center; background-image: url(../images/event-countbg.png); background-position: top center; background-repeat: no-repeat; height: 260px; width: 100%; }
.multi-event-compsection .digit-col .content { max-width: 130px; width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; }
.multi-event-compsection .digit-col .content span { font-size: 32px; margin-top: -34px; }
.multi-event-compsection .digit-col .content h2 { font-size: 96px; line-height: 0.8em; }
.multi-event-compsection .digit-col.two-digit { padding: 60px 0; }
.multi-event-compsection .digit-col.two-digit .content { flex-direction: column; }
.multi-event-compsection .digit-col.two-digit .content h2 { font-size: 70px; }
.multi-event-compsection .middle-content { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; margin-top: -25px; height: calc(100vh - 355px); padding-bottom: 20px; min-height: 400px; }
.multi-event-compsection .middle-content .heading { text-align: center; }
.multi-event-compsection .middle-content .heading h2 { color: #F59E0B; margin-bottom: 15px; }
.multi-event-compsection .middle-content .heading p { font-size: 14px; line-height: 18px; font-weight: 400; margin: 0; }
.multi-event-compsection .middle-content .heading p span { font-weight: 700; }
.multi-event-compsection .middle-content .coin-col { text-align: center;}
.multi-event-compsection .middle-content .coin-col .gradient-btn { display: inline-block; margin-bottom: 12px; }
.multi-event-compsection .middle-content .coin-col .gradient-btn span,
.multi-event-compsection .middle-content .coin-col .gradient-btn a { font-size: 26px; padding: 9px 15px; }
.multi-event-compsection .middle-content .coin-col .gradient-btn span img,
.multi-event-compsection .middle-content .coin-col .gradient-btn a img { height: 30px; }
.multi-event-compsection .middle-content .coin-col h5 { margin: 0; color: #94A3B8; font-size: 18px; font-weight: 400; line-height: 28px;  }
.multi-event-compsection .middle-content .bottom-col { text-align: center; }
.multi-event-compsection .middle-content .bottom-col .btn { font-size: 14px; font-weight: 400; line-height: 18px; margin-bottom: 24px; color: #fff; background-color: #3AAFAA; border-radius: 60px; padding: 13px 15px; display: block; border: none; outline: none; }

#content { padding-bottom: 92px; }

.bottom-nav { position: relative; z-index: 11111; background: rgba(18, 18, 18, 0.50); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -moz-backdrop-filter: blur(16px); border-radius: 12px; padding: 20px; }
.bottom-nav:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; border-radius: 12px; box-shadow: -1px -1px 0px rgb(255 255 255 / 64%), 1px 1px 0px rgb(237 237 237 / 10%); }
.bottom-nav ul { padding: 0; margin: 0; display: flex; }
.bottom-nav ul li { padding: 0; margin: 0; list-style: none; flex: 1; text-align: center; }
.bottom-nav ul li a { display: inline-flex; flex-direction: column; align-items: center; position: relative; }
.bottom-nav ul li a span { font-size: 7px; font-weight: 400; line-height: 12px;  color: #fff; }
.bottom-nav ul li.icon a img { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); -moz-filter: brightness(0) invert(1); }
.bottom-nav ul li.image a img { border-radius: 50px; max-height: 40px; }
.bottom-nav ul li.active a img { filter: none; }
.bottom-nav ul li.active a:after {position: absolute; left: 50%; bottom: -8px; width: 16px; height: 6px; background-color: #3AAFAA; content: ''; border-radius: 8px; margin-left: -8px; }
.bottom-nav.fixed { position: fixed; right: 15px; left: 15px; bottom: 20px; }
.bottom-nav ul li.image.active a:after { left: -3px; right: -3px; top: -3px; bottom: -3px; margin: 0px; border-radius: 100%; z-index: -1; width: auto; height: auto; background: linear-gradient(135deg,  rgba(144,255,250,1) 0%,rgba(58,175,170,1) 100%); }

.leaderboard-page .fixed-heading { margin: 0 -15px; padding: 10px 15px; position: sticky; top: 0; z-index: 11; }
.leaderboard-page .fixed-heading .back-btnrow { margin-bottom: 10px; }
.leaderboard-page .leaderboard-middlecol { height: calc(100vh - 230px); overflow-y: auto; overflow-x: hidden; }
.leaderboard-colist { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: 28px; margin-bottom: 40px; }
.leaderboard-colist .cols { padding: 0 10px; }
.leaderboard-colist .cols .item .image-col { position: relative; }
.leaderboard-colist .cols .item .image-col:before { position: absolute; left: 10px; top: 10px; content: ''; width: calc(100% - 20px); height: calc(100% - 20px); background: radial-gradient(95.81% 95.81% at 50% 0%, rgba(135, 255, 250, 0.33) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(104.31% 104.31% at 50% -4.31%, rgba(3, 88, 84, 0.66) 0%, rgba(18, 18, 18, 0.66) 100%), #121212; border-radius: 100%; z-index: 1; }
.leaderboard-colist .cols .item .image-col:after { position: absolute; content: ''; background-image: url(../images/Star-2.png); background-position: center center; background-repeat: no-repeat; width: 144px; height: 144px; top: 50%; z-index: 0; transform: translate(-50%, -50%); left: 50%; margin-top: 15px; }
.leaderboard-colist .cols .item .image-col .image { background-image: url(../images/second-place.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 90px; height: 90px; z-index: 1; position: relative; padding: 11px; margin-bottom: 5px; display: flex; justify-content: center; align-items: center; }
.leaderboard-colist .cols .item .image-col .image img { border-radius: 100%; }
.leaderboard-colist .cols .item .image-col .image .number { position: absolute; right: 0; top: 0; min-width: 26px; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px; font-weight: 400; line-height: 24px; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.10); background:#186B67; border-radius: 20px; border: 1px solid #73afac; }
.leaderboard-colist .cols .item .content { position: relative; text-align: center; }
.leaderboard-colist .cols .item .content h6 { font-size: 14px; margin: 0; font-weight: 600; line-height: 18px; }
.leaderboard-colist .cols .item .content p { font-size: 11px; font-weight: 400; line-height: 18px; margin: 0; }
.leaderboard-colist .cols.active .item .image-col { transform: scale(1.3); top: -12px; }
.leaderboard-colist .cols.active .item .image-col .image { background-image: url(../images/active-place.svg); width: 100px; height: 100px; padding: 24px 15px 5px 15px; }
.leaderboard-colist .cols.active .item .image-col:before { top: 20px; }
.leaderboard-colist .cols.active .item .content { top: 6px; }

.options-row { text-align: center; margin-bottom: 48px; z-index: 1; position: relative; }
.options-row .options-col { display: inline-flex; background: rgba(30, 41, 59, 0.33); position: relative; border-radius: 24px; padding: 4px; gap: 8px; }
.options-row .options-col:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; border-radius: 24px; box-shadow: -1px -1px 0px rgb(255 255 255 / 64%), 1px 1px 0px rgb(237 237 237 / 30%); }
.options-row .options-col .radio-col { position: relative; }
.options-row .options-col .radio-col input[type="radio"] { opacity: 0; position: absolute; margin: 0; }
.options-row .options-col .radio-col input[type="radio"] + label { border-radius: 24px; color:#64748B; text-align: center; font-size: 16px; font-weight: 400; line-height: 24px; padding: 8px 24px; display: inline-block; cursor: pointer; }
.options-row .options-col .radio-col input[type="radio"]:checked + label { box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.10); background: linear-gradient(146deg, #90FFFA 7.25%, #3AAFAA 74.07%); color: #0D4946; }

.list-leaderboard { padding-bottom: 10px; }
.list-leaderboard > ul { padding: 0; margin: 0; }
.list-leaderboard > ul > li { min-height: 60px; margin: 0 0 12px 0; padding: 8px; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: rgba(30,41,59,0.33); border: 1px solid #90FFFA; border-radius: 8px; }
.list-leaderboard > ul > li > a { display: flex; flex-wrap: wrap; align-items: center; width: 100%; justify-content: space-between; }
.list-leaderboard > ul > li h6 { display: flex; align-items: center; font-size: 16px; line-height: 24px; color: #fff; margin: 0; font-weight: 400; }
.list-leaderboard > ul > li h6 img { margin-left: 4px; }
.list-leaderboard > ul > li .left-col { display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 18px; color: #fff; }
.list-leaderboard > ul > li .left-col .number { font-size: 16px; line-height: 24px; font-weight: 400; min-width: 20px; }
.list-leaderboard > ul > li .left-col .icon { width: 30px; height: 30px; overflow: hidden; margin-right: 8px; }
.list-leaderboard > ul > li .left-col .icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 60px; }
.list-leaderboard > ul > li .left-col .content h6 { font-size: 16px; font-weight: 600; line-height: 24px; margin: 0; }
.list-leaderboard > ul > li .left-col .content p { font-size: 11px; font-weight: 400; line-height: 14px; color: #fff; margin: 0; }
.list-leaderboard > ul > li .left-col .arrow { margin-right: 6px;}

.list-leaderboard > ul > li .right-col { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.list-leaderboard > ul > li .right-col h6 { font-size: 16px; font-weight: 400; line-height: 24px; }
.list-leaderboard > ul > li .right-col p { font-size: 12px; font-weight: 400; line-height: 16px; color: #fff; }
.list-leaderboard > ul > li.active { border: none; background: linear-gradient(146deg, #90FFFA 7.25%, #3AAFAA 74.07%); }
.list-leaderboard > ul > li.active .left-col .number,
.list-leaderboard > ul > li.active .left-col .content h6,
.list-leaderboard > ul > li.active .right-col h6,
.list-leaderboard > ul > li.active .right-col p { color: #0D4946; }
.list-leaderboard > ul > li.active .left-col .arrow img { transform: rotate(180deg); }
.list-leaderboard > ul > li.active .left-col .content p { color: #278D89; }

.library-section { padding: 20px 0; }
.library-section .headings { margin-bottom: 24px; position: sticky; top: 20px; z-index: 1; }
.library-listsection .full-image { position: relative; min-height: 128px; border-radius: 16px; border: 1px solid rgba(251, 251, 251, 0.20);  background-position: top center; background-repeat: no-repeat; background-size: cover; overflow: hidden; margin-bottom: 16px; }
.library-listsection .full-image a { color: #fff; }
.library-listsection .full-image .image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.library-listsection .full-image .content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.library-listsection .full-image a .content .right-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;background-color: #9c9ffc; }
.library-listsection .full-image a .content .right-img img  { width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;}
.library-listsection .full-image .image > img { width: 100%; }
.library-listsection .full-image .content { top: 50%; position: absolute; width: 100%; left: 0; transform: translateY(-50%); padding: 0 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.library-listsection .full-image .content h3 { font-size: 20px; font-weight: 600; line-height: 28px; margin: 0; }
.library-listsection .row-grid [class*="col-"] { margin-bottom: 16px; }
.library-listsection .row-grid .item { height: 100%; position: relative; border-radius: 16px; border: 1px solid rgba(251, 251, 251, 0.20); background-position: top center; background-repeat: no-repeat; background-size: cover; overflow: hidden; min-height: 287px; display: flex; flex-direction: column; padding: 24px 0; background-color: #9c9ffc;}
.library-listsection .row-grid .item .image { position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .library-listsection .row-grid .item .image img{
         width: 100%;
  height: 100%;
  object-fit: cover; /* Make the image fit the container */
  z-index: 1; /* Apply a z-index property */
    } 
.library-listsection .row-grid .item .image.img-left { text-align: left; }
.library-listsection .row-grid .item .image.img-center { text-align: center; }
.library-listsection .row-grid .item .image.img-right { text-align: right; }
.library-listsection .row-grid .item a { color: #fff; }

.library-listsection .row-grid .item .bottom-col { margin-top: auto; text-align: center; }
.library-listsection .row-grid .item .bottom-col h3 { font-size: 16px; font-weight: 600; line-height: 24px; margin: 0; text-align: center; }
.library-listsection .row-grid .item.bg-1 { background-image: url(../images/fantasy-bg.png); }
.library-listsection .row-grid .item.bg-2 { background-image: url(../images/board-bg.png); }
.library-listsection .row-grid .item.bg-3 { background-image: url(../images/sports-bg.png); }
.library-listsection .row-grid .item.bg-4 { background-image: url(../images/adventure-bg.png); }
.library-listsection .row-grid .item.bg-5 { background-image: url(../images/disney-bg.png); }
.library-listsection .row-grid .item.bg-6 { background-image: url(../images/marvel-bg.png); }

.library-detailimg { height: 100%; position: relative; border-radius: 0px 0px 16px 16px; border: 1px solid rgba(251, 251, 251, 0.20); background-position: bottom center; background-repeat: no-repeat; background-size: cover; overflow: hidden; min-height: 287px; display: flex; flex-direction: column; margin: 0 -15px; padding: 0px 15px; }
.library-detailimg .image { text-align: center; padding: 75px 0 20px 0; }
.library-detailimg .content { padding-bottom: 30px; }

.featured-section { padding: 28px 0; }
.featured-section h3 { font-size: 20px; font-weight: 600; line-height: 28px; margin: 0 0 16px 0; }

.close { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; position: absolute; right: 16px; top: 16px; cursor: pointer; border-radius: 20px; opacity: 0.85; background: #E2E8F0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.10); }

#searchclose{
    width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; position: absolute; right: 16px; top: 16px; cursor: pointer; border-radius: 20px; opacity: 0.85; background: #E2E8F0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.10); 
}

.featured-slider { padding: 50px 0; }
.featured-slider .swiper-wrapper { align-items: center; }
.featured-slider .swiper-slide .item { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 111px; min-height: 138px; margin: 0 auto; border-radius: 16px; }
.featured-slider .swiper-slide .item .image { margin-bottom: 10px; }
.featured-slider .swiper-slide .item .image .second-image { position: absolute; right: 0; top: 0; }
.featured-slider .swiper-slide .item .content { display: none;  }
.featured-slider .swiper-slide .item .content h6 { font-size: 16px; font-weight: 600; line-height: 24px; margin: 0; }
.featured-slider .swiper-slide.swiper-slide-next .item { background-image: url(../images/mask-next.png); }
.featured-slider .swiper-slide.swiper-slide-prev .item { background-image: url(../images/mask-prev.png); }
.featured-slider .swiper-slide.swiper-slide-active .item { background-image: url(../images/board-bg.png); width: 100%; text-align: center; transform: scale(1.2); padding: 30px 0 10px 0; }
.featured-slider .swiper-slide.swiper-slide-active .item .content { display: block; }
.featured-slider .swiper-slide.swiper-slide-active .item .image { min-height: 180px; }

.featured-gamelist { padding: 30px 0; }
.featured-gamelist h6 { color: #94A3B8; font-size: 12px; font-weight: 400; line-height: 16px; margin: 0; }
.featured-gamelist > ul { padding: 0; margin: 0 0 20px 0; }
.featured-gamelist > ul > li { padding: 12px 0; margin: 0; list-style: none; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.featured-gamelist > ul > li a { color: #fff; }
.featured-gamelist > ul > li:last-child { border-bottom: none; }
.featured-gamelist > ul > li .left-col { width: calc(100% - 104px); display: flex; align-items: center; flex-wrap: wrap; }
.featured-gamelist > ul > li .left-col .image { width: 80px; height: 80px; }
.featured-gamelist > ul > li .left-col .image img { border-radius: 8px; object-fit: cover; height: 100%; width: 100%; }
.featured-gamelist > ul > li .left-col .text { padding-left: 8px; width: calc(100% - 80px); }
.featured-gamelist > ul > li .right-col { width: 88px; position: relative; padding: 1px; }
.featured-gamelist > ul > li .right-col:after { position: absolute; content: ''; background: linear-gradient(to right,  rgba(144,255,250,1) 0%,rgba(58,175,170,1) 100%); width: 100%; height: 100%; left: 0; top: 0; border-radius: 30px; }
.featured-gamelist > ul > li .right-col .play-now {  padding: 3px 8px; display: flex; align-items: center; color: #90FFFA; font-size: 11px; line-height: 18px; z-index: 1; position: relative; background-color: #262626; border-radius: 40px; }
.featured-gamelist > ul > li .right-col .play-now span { background: linear-gradient(145.68deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.featured-gamelist > ul > li .right-col .play-now img { margin-right: 8px; }
.featured-gamelist .heading-twocol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 30px; }

.up-arrow { text-align: center; } 
.up-arrow a { display: inline-flex; justify-content: center; align-items: center; color: #64748B; font-size: 14px; font-weight: 600; line-height: 18px; }
.up-arrow a img { margin-right: 8px; }

.trending-page { padding: 10px 0; }
.trending-slider { padding: 50px 0; }
.trending-slider .swiper-wrapper { align-items: center; }
.trending-slider .swiper-slide { opacity: 0.66; padding: 0; }
.trending-slider .swiper-slide .image { position: relative; padding: 2px; }
.trending-slider .swiper-slide .image:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(to bottom,  rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%); border-radius: 16px; }
.trending-slider .swiper-slide .image img { border-radius: 16px; z-index: 1; position: relative; width: 100%; }
.trending-slider .swiper-slide.swiper-slide-active { transform: scale(1.3); z-index: 1; opacity: 1; }

.sorting-col { display: flex; align-items: center; }
.sorting-col label { font-size: 14px; font-weight: 600; line-height: 18px; margin: 0; color: #CBD5E1; }
.sorting-col select { color:#64748B; font-size: 14px; font-style: normal; font-weight: 400; line-height: 18px; background: transparent; border: none; outline: none; font-family: 'Neue Haas Grotesk Display Pro', sans-serif; }

.list-viewbtn { position: fixed; bottom: 115px; display: inline-block; z-index: 1; }
.list-viewbtn:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; border-radius: 40px; box-shadow: -1px -1px 0px rgb(255,255,255,0.64), 1px 1px 0px rgb(237,237,237,0.1); }
.list-viewbtn .list-btn {  padding: 8px 16px; display: flex; align-items: center; font-size: 16px; line-height: 24px; z-index: 1; position: relative; border-radius: 40px; background: linear-gradient(146deg, rgba(144, 255, 250, 0.33) 7.25%, rgba(58, 175, 170, 0.33) 74.07%);}
.list-viewbtn .list-btn span { background: linear-gradient(145.68deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.list-viewbtn .list-btn img { margin-right: 8px; }

.profile-gamelist { padding: 10px 0; }
.profile-gamelist .heading-twocol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.profile-gamelist .heading-twocol h6 { color: #94A3B8; font-size: 12px; font-weight: 400; line-height: 16px; margin: 0; }
.profile-gamelist > ul { padding: 0; margin: 0 0 20px 0; }
.profile-gamelist > ul > li { padding: 12px 0; margin: 0; list-style: none; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.profile-gamelist > ul > li a { color: #fff; }
.profile-gamelist > ul > li:last-child { border-bottom: none; }
.profile-gamelist > ul > li .left-col { display: flex; align-items: center; flex-wrap: wrap; }
.profile-gamelist > ul > li .left-col .image { width: 80px; height: 80px; }
.profile-gamelist > ul > li .left-col .image img { border-radius: 8px; object-fit: cover; height: 100%; width: 100%; }
.profile-gamelist > ul > li .left-col .icon { margin-right: 8px; }
.profile-gamelist > ul > li .text { width: calc(100% - 116px); }
.profile-gamelist > ul > li .text p { margin-bottom: 8px; }
.profile-gamelist > ul > li .text .right-btn { width: 88px; position: relative; padding: 1px; }
.profile-gamelist > ul > li .text .right-btn:after { position: absolute; content: ''; background: linear-gradient(to right,  rgba(144,255,250,1) 0%,rgba(58,175,170,1) 100%); width: 100%; height: 100%; left: 0; top: 0; border-radius: 30px; }
.profile-gamelist > ul > li .text .right-btn .play-now {  padding: 3px 8px; display: flex; align-items: center; color: #90FFFA; font-size: 11px; line-height: 18px; z-index: 1; position: relative; background-color: #262626; border-radius: 40px; }
.profile-gamelist > ul > li .text .right-btn .play-now span { background: linear-gradient(145.68deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.profile-gamelist > ul > li .text .right-btn .play-now img { margin-right: 8px; }
.filter-button { position: fixed; right: 15px; bottom: 113px; }

.setting-page { padding: 10px 0; }
.setting-page h5 { color: #FFF; font-size: 18px; font-weight: 600; line-height: 28px; margin: 0 0 16px 0; }
.profile-col { text-align: center; padding: 70px 0 30px; display: flex; align-items: center; flex-direction: column; }
.profile-col .image { margin-bottom: 8px; width: 128px; height: 128px; display: inline-block; }
.profile-col .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 64px; }
.profile-col .change-avatar { display: inline-flex; align-items: center; color: #3AAFAA; font-size: 14px; font-weight: 600; line-height: 18px; margin-bottom: 16px; }
.profile-col .change-avatar img { margin-left: 10px; }
.profile-col .username { color:#CBD5E1; font-size: 14px; font-weight: 400; line-height: 18px; }
.profile-col.unsubscribed { padding-bottom: 92px; } 

.accordian-col { margin-bottom: 40px; }
.accordian-panel .accordian-title { position: relative; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 28px; color: #64748B; margin-bottom: 8px; }
.accordian-panel .accordian-title:after { position: absolute; right: 0; top: 4px; width: 20px; height: 20px; content: ''; transition: all 0.5s ease; background-image: url(../images/chevron-right.svg); background-position: center center; background-repeat: no-repeat; transform: rotate(90deg); filter: brightness(0.5); -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); }
.accordian-panel .accordian-content { display: block; }
.accordian-panel.active .accordian-title { color: #fff; }
.accordian-panel.active .accordian-title:after { transform: none; filter: none; }
.accordian-panel .subscription-block { border-radius: 8px; padding: 16px 24px; border: 1px solid var(--basic-gra, rgba(255, 255, 255, 0.64)); background: rgba(30, 41, 59, 0.33); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -moz-backdrop-filter: blur(6px); }
.accordian-panel .subscription-block > ul { margin: 0; padding: 0; }
.accordian-panel .subscription-block > ul > li { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.accordian-panel .subscription-block > ul > li .left-col { color:#64748B; font-size: 16px; font-weight: 600; line-height: 24px; width: calc(100% - 80px); }
.accordian-panel .subscription-block > ul > li .right-col { text-align: right; color:#FFF; font-size: 14px; font-weight: 400; line-height: 18px; width: 80px; }
.accordian-panel .subscription-block .cancel-subscription { width: 100%; }
.accordian-panel .blue-btn { color:#94A3B8; background-color: transparent;}

.gamenav-list { margin-bottom: 10px; }
.gamenav-list > ul { margin: 0; padding: 0; }
.gamenav-list > ul > li { margin: 0 0 16px 0; padding: 1px; list-style: none;  position: relative; }
.gamenav-list > ul > li:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(to bottom, rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%); border-radius: 8px;}
.gamenav-list > ul > li > a { background-image: url(../images/gradient-2.png); background-position: left top; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; padding: 30px 24px; border-radius: 8px; position: relative;}
.gamenav-list > ul > li > a .icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: #fff; border-radius: 100%; }
.gamenav-list > ul > li > a .text { width: calc(100% - 32px); padding-left: 8px; }
.gamenav-list > ul > li > a .text h6 { margin: 0; font-size: 16px; color: #fff; font-weight: 600; line-height: 24px;}
.gamenav-list > ul > li > a .text p { font-size: 12px; font-weight: 400; line-height: 16px; margin: 0; opacity: 0.5; }
.gamenav-list.unsubscribed > ul > li > a { padding: 14px 16px; }

.change-settings { margin-bottom: 40px; }
.change-settings.language { margin-bottom: 0; } 

.change-settings > ul { padding: 0; margin: 0; }
.change-settings > ul > li { padding: 0px; margin: 0 0 16px 0; list-style: none; position: relative; }
.change-settings > ul > li .nav-item { position: relative; padding: 1px; }
.change-settings > ul > li .nav-item:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(to bottom, rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%); border-radius: 8px;}
.change-settings > ul > li .nav-item > a { display: flex; align-items: center; flex-wrap: wrap; color:#94A3B8; font-size: 16px; font-weight: 400; line-height: 24px; border-radius: 8px; position: relative; background: #1E293B; padding: 10px 8px 10px 12px;}
.change-settings > ul > li .nav-item > a:after { width: 20px; height: 20px; background-image: url(../images/chevron-up.svg); background-position: center center; background-repeat: no-repeat; position: absolute; right: 8px; top: 12px; content: ''; opacity: 0.8; transform: rotate(90deg); transition: all 0.5s ease;}
.change-settings > ul > li .nav-item > a .icon { display: flex; align-items: center; margin-right: 6px; opacity: 0.7; }
.change-settings > ul > li .nav-item.active:before { background: linear-gradient(to bottom, rgba(176,255,251,1) 0%,rgba(176,255,251,1) 100%); border-radius: 8px; }
.change-settings > ul > li .nav-item.active > a:after { transform: none; opacity: 1; }
.change-settings > ul > li .nav-item.active > a { color: #CBD5E1; }

.change-settings > ul > li .nav-item.active > a .icon { opacity: 1; }
.change-settings > ul > li .language-dmenu { border-radius: 8px; background-color: #334155; padding: 4px; display: none; margin-top: 8px; }
.change-settings > ul > li .language-dmenu ul { margin: 0; padding: 0; }
.change-settings > ul > li .language-dmenu ul li { margin: 2px 0; padding: 0; list-style: none; }
.change-settings > ul > li .language-dmenu ul li a { color:#CBD5E1; font-size: 14px; font-weight: 400; line-height: 18px; padding: 9px 16px; display: block; border-radius: 8px; }
.change-settings > ul > li .language-dmenu ul li.active a { color: #186B67; background-color: #fff; }

.language-overlay { visibility: hidden; z-index: 1; opacity: 0; background-color: rgba(18,18,18,0.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -moz-backdrop-filter: blur(4px); position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; }
.show-language-menu .language-overlay { visibility: visible; opacity: 1; }
.show-language-menu .change-settings.language h5,
.show-language-menu .change-settings.language .language-list { position: relative; z-index: 11; }

.general-infolist > ul { margin: 0 -6px; padding: 0; display: flex; flex-wrap: wrap; }
.general-infolist > ul > li { margin: 0 0 16px 0; padding: 0 6px; list-style: none; width: 33.33%; }
.general-infolist > ul > li .inner-col { padding: 1px; position: relative; border-radius: 16px; height: 100%; }
.general-infolist > ul > li .inner-col:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(to bottom, rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%); border-radius: 16px;}
.general-infolist > ul > li .inner-col a { background-color: #1E293B; position: relative; display: flex; flex-direction: column; height: 100%; align-items: center; border-radius: 16px; color:#CBD5E1; font-size: 14px; font-weight: 400; line-height: 18px; padding: 16px 8px 10px 8px; text-align: center;}
.general-infolist > ul > li .inner-col .icon { background-color: #475569; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 100%; margin-bottom: 12px; }
.general-infolist > ul > li .inner-col .text { display: flex; align-items: center; min-height: 40px; }
.general-infolist > ul > li .inner-col .text p { color: #CBD5E1; }
.general-infolist > ul > li.large-col { width: 100%; }
.general-infolist > ul > li.large-col .inner-col a { flex-direction: row; padding: 24px; }
.general-infolist > ul > li.large-col .inner-col .icon { margin: 0 16px 0 0; }

.avatar-popup { position: fixed; height: auto; left: 0; right: 0; bottom: -100%; z-index: 11111; transition: all 0.5s ease; padding: 1px; }
.avatar-popup:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(to bottom, rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%); border-radius: 16px 16px 0px 0px; }
.avatar-popup .content { padding: 32px 15px; border-radius: 16px 16px 0px 0px; background:#1E293B; position: relative; }
.avatar-popup .content h5 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 32px 0; color: #CBD5E1; text-align: center; }
.avatar-popup .content .popup-close { position: absolute; right: 15px; top: 36px; cursor: pointer; }
.avatar-popup .content > ul { padding: 0; margin: 0 0 16px 0; }
.avatar-popup .content > ul > li { list-style: none; color: #94A3B8; font-size: 14px; line-height: 18px; font-weight: 400; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; }
.avatar-popup .content .blue-btn { margin-top: auto; }
.avatar-popup .content .avatar-row { padding: 0; margin: 0 -8px; display: flex; flex-wrap: wrap; }
.avatar-popup .content .avatar-row li { list-style: none; padding: 0 8px; margin: 0; width: 25%; }
.avatar-popup .content .avatar-row li a { overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 64px; background: #0CC6F7; width: 64px; height: 64px; }
.avatar-popup .content .avatar-row li .text { display: none; }
.avatar-popup .content .avatar-row li.selected .text { display: block; position: absolute; z-index: 1; text-align: center; left: 0; right: 0; top: 50%; transform: translateY(-50%); color:#FFF; font-size: 11px; font-weight: 400; line-height: 18px; }
.avatar-popup .content .avatar-row li.selected a:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; opacity: 0.5; background: #1F1F1F; }

.avatar-popup .content .blue-btn { margin-top: 32px; }
.avatar-popup .overlay { position: fixed; content: ''; left: 0; top: 0; background-color: rgb(18,18,18,0.66); width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; }
body.show-avatar-modal .avatar-popup { bottom: 0; }
body.show-avatar-modal .avatar-popup .overlay { opacity: 1; visibility: visible; }

.setpin-page { padding: 10px 0; }
.setpin-middlecol { padding: 0 15px; height: calc(100vh - 204px); min-height:250px; display: flex; justify-content: center; align-items: center; overflow-y: auto; }
.setpin-middlecol.confirmed { height: calc(100vh - 152px); }
.setpin-middlecol .setpin-content { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; }
.setpin-middlecol .setpin-content .setpin-inputgroup { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.setpin-middlecol .setpin-content .col { max-width: 64px; width: 100%; }
.setpin-middlecol .setpin-content .col .text-field { background: rgba(255, 255, 255, 0.16); border: 1px solid var(--basic-gra, rgba(255, 255, 255, 0.64)); border-radius: 4px; color: #fff; font-size: 36px; font-weight: 600; line-height: 40px; width: 100%; height: 64px; outline: none; text-align: center; }
.setpin-middlecol .setpin-content .col .text-field:focus,
.setpin-middlecol .setpin-content .col .text-field:active,
.setpin-middlecol .setpin-content .col .text-field.active { border: 1px solid var(--games-gra, #90FFFA);}
.setpin-middlecol .setpin-content .col .text-field.invalid { border: 1px solid #E11515; background: rgba(225, 21, 21, 0.16); }
.setpin-middlecol .setpin-content .message { margin-top: 24px; color: #94A3B8; font-size: 18px; font-weight: 400; line-height: 20px; text-align: center; }
.setpin-middlecol.error { height: calc(100vh - 192px); }
.star-backimage { position: absolute; left: 50%; top: -70px; width: 290px; height: auto; transform: translateX(-50%); }

.setpin-confirmed-content { display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; min-height: 372px; width: 100%; }
.setpin-confirmed-content .star-backimage { top: -100px; }
.setpin-confirmed-content .image { position: relative; z-index: 1; margin: 54px 0; }
.setpin-confirmed-content .image > img { position: relative; z-index: 1; }
.setpin-confirmed-content .content { position: relative; z-index: 1; text-align: center; }
.setpin-confirmed-content.error .image { margin: 0 0 25px 0; }
.setpin-confirmed-content.error .image > img { position: relative; z-index: 1; }
.setpin-confirmed-content.error .content { max-width: 240px; }
.setpin-confirmed-content.error .content p { font-size: 16px; line-height: 24px; }
.setpin-confirmed-content.error .content h4 { font-size: 24px; font-weight: 600; line-height: 32px; margin-bottom: 8px; }
.setpin-confirmed-content.error:after { display: none; }
.setpin-confirmed-content.error .star-backimage { top: -70px; } 

.setpin-page.error-page .trending-heading .logo { padding-top: 32px; text-align: center; }
.setpin-page.error-page .setpin-middlecol.confirmed { height: calc(100vh - 156px); }

.setpin-page.error-page-slider .trending-heading .logo { padding-top: 32px; text-align: center; }
.setpin-page.error-page-slider .setpin-middlecol.confirmed { height: calc(100vh - 300px); }
.setpin-page.error-page-slider .setpin-middlecol.confirmed .setpin-confirmed-content:after { background-position: top -30px center; display: none; }
.setpin-page.error-page-slider .setpin-confirmed-content.error .content { max-width: 100%; }
.setpin-page.error-page-slider .setpin-confirmed-content.error .content .blue-btn { display: inline-block; }
.setpin-page.error-page-slider .setpin-confirmed-content.error  { margin-top: 50px; }
.error-page-slider .bottom-slidercol .player-section { padding: 0 0 22px 0; }

.player-slidergame .swiper-slide .item .image img { width: 100%; border-radius: 8px; }
.player-slidergame .swiper-slide .item .content { padding: 8px 0; }
.player-slidergame .swiper-slide .item .content h6 { font-size: 16px; color: #fff; margin: 0 0 4px 0; line-height: 24px; font-weight: 400;}
.player-slidergame .swiper-slide .item .content h6 a { color: #fff; }
.player-slidergame .swiper-slide .item .content .play-now { display: flex; align-items: center; color: #90FFFA; font-size: 11px; line-height: 18px; background: linear-gradient(145.68deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.player-slidergame .swiper-slide .item .content .play-now img { margin-right: 8px; }

.tournament-history-page { padding: 10px 0;width: 100%;height: 100%;overflow: hidden; }
.tournament-history-list {height: calc(100vh - 168px); overflow-y: auto;  width: 100%; padding-right: 17px; box-sizing: content-box; }
.tournament-history-list .tournament-col { margin-bottom: 8px; }
.tournament-history-list .tournament-col h4 { margin-bottom: 24px; }
.tournament-history-list .tournament-col .item { position: relative; border-radius: 16px; }
.tournament-history-list .tournament-col .item a { color: #fff; }
.tournament-history-list .tournament-col .item:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; border-radius: 16px; border: 1px solid var(--basic-gra, rgba(255, 255, 255, 0.64)); }
.tournament-history-list .tournament-col .item .image { position: relative; }
.tournament-history-list .tournament-col .item .image img { border-radius: 16px; width: 100%; opacity: 0.32; }
.tournament-history-list .tournament-col .item .image:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; border-radius: 16px; background: linear-gradient(0deg, #000 -2.22%, rgba(0, 0, 0, 0.00) 90.37%); }
.tournament-history-list .tournament-col .item .content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 16px; z-index: 9; display: flex; flex-direction: column; }
.tournament-history-list .tournament-col .item .content .coin { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.tournament-history-list .tournament-col .item .content .middle-text { text-align: center; position: relative; top: 50%; transform: translateY(-50%); }
.tournament-history-list .tournament-col .item .content .middle-text h6 { font-size: 14px; font-weight: 600; line-height: 18px; margin: 0; color: #fff; }
.tournament-history-list .tournament-col .item .content .middle-text p { color:#94A3B8; font-size: 11px; font-weight: 400; line-height: 18px; margin: 0; }
.tournament-history-list .tournament-col .item .bottom-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-top: auto; }
.tournament-history-list .tournament-col .item .bottom-row .ranked { display: flex; flex-wrap: wrap; align-items: center; font-size: 11px; line-height: 18px; font-weight: 400; color: #fff; }
.tournament-history-list .tournament-col .item .bottom-row .ranked .text label { margin: 0; font-size: 9px; font-weight: 400; line-height: 18px; }
.tournament-history-list .tournament-col .item .bottom-row .ranked .text h4 { margin: 0; text-align: center; }
.tournament-history-list .tournament-col .item .bottom-row .ranked span { font-weight: 600; margin-right: 3px; }
.tournament-history-list .tournament-col .item .bottom-row .learn-more { font-size: 14px; line-height: 18px; font-weight: 600; background: linear-gradient(146deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.tournament-history-list .tournament-col.event-completed { margin-bottom: 40px; }
.tournament-history-list .tournament-col.event-completed .item { border-radius: 8px; min-height: 150px; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(237, 237, 237, 0.05) 100%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -moz-backdrop-filter: blur(6px); }
.tournament-history-list .tournament-col.event-completed .item:before { border-radius: 8px; }
.tournament-history-list .tournament-col.event-completed .item .content { align-items: center; justify-content: center; }
.tournament-history-list .tournament-col.event-completed .item .content p { color:#94A3B8; margin-bottom: 8px; }
.tournament-history-list .tournament-col.event-completed .item .content .icon { margin-bottom: 12px; }
.tournament-history-list .tournament-col.event-completed .item .content .count { font-size: 30px; line-height: 36px; font-weight: 600; background: linear-gradient(146deg, #90FFFA 7.25%, #3AAFAA 74.07%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.content-pages { padding: 10px 0; }
.content-pages .heading { padding-bottom: 20px;}
.content-pages .content-middlecol { height: calc(100vh - 150px); overflow-y: auto; }
.content-pages .content-middlecol .btn-row { padding-top: 28px; margin-bottom: 30px; }
.feedback-formrow { margin-bottom: 32px; }
.feedback-formrow h6 { margin: 0 0 16px 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.feedback-formrow .textarea { vertical-align: top; border-radius: 8px; border: 1px solid#94A3B8; background:#94A3B8; padding: 10px; height: 100px; width: 100%; outline: none; box-shadow: none; color: #0F172A; font-size: 14px; line-height: 18px; font-weight: 400; }
.feedback-formrow .textarea::-webkit-input-placeholder {  color: #475569; }
.feedback-formrow .textarea::-moz-placeholder {  color: #475569; }
.feedback-formrow .textarea:-ms-input-placeholder {  color: #475569; }
.feedback-formrow .textarea:-moz-placeholder {  color: #475569; }
.feedback-formrow .textarea:focus { background: #fff; }
.feedback-formrow .textarea.filled { background: #fff; }
.feedback-formrow .textarea-col { padding-top: 4px; }

.radio-cols { position: relative; margin-bottom: 8px; }
.radio-cols input[type="radio"] { opacity: 0; position: absolute; margin: 0; }
.radio-cols input[type="radio"] + label { color:#94A3B8; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 0 0 28px; display: inline-block; cursor: pointer; }
.radio-cols input[type="radio"] + label:before { width: 20px; height: 20px; border: 1px solid #64748B; border-radius: 16px; content: ''; position: absolute; left: 0; top: 0; }
.radio-cols input[type="radio"] + label:after { width: 8px; height: 8px; border-radius: 16px; content: ''; position: absolute; left: 6px; top: 6px; opacity: 0; background-color: #fff; }
.radio-cols input[type="radio"]:checked + label { color: #fff; }
.radio-cols input[type="radio"]:checked + label:before { background-color: #3AAFAA; border-color: #3AAFAA; }
.radio-cols input[type="radio"]:checked + label:after { opacity: 1; }
.radio-cols.number input[type="radio"]:checked + label { font-weight: 600; }

.checkbox-cols { position: relative; margin-bottom: 8px; }
.checkbox-cols input[type="checkbox"] { opacity: 0; position: absolute; margin: 0; }
.checkbox-cols input[type="checkbox"] + label { color:#94A3B8; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 0 0 28px; display: inline-block; cursor: pointer; }
.checkbox-cols input[type="checkbox"] + label:before { width: 20px; height: 20px; border: 1px solid #64748B; border-radius: 6px; content: ''; position: absolute; left: 0; top: 0; }
.checkbox-cols input[type="checkbox"] + label:after { width: 20px; height: 20px; border-radius: 6px; content: ''; position: absolute; left: 0px; top: 0px; opacity: 0; background-image: url(../images/checkbok-tickmark.svg); background-position: center center; background-repeat: no-repeat; }
.checkbox-cols input[type="checkbox"]:checked + label { color: #fff; font-weight: 600; }
.checkbox-cols input[type="checkbox"]:checked + label:before { background-color: #3AAFAA; border-color: #3AAFAA; }
.checkbox-cols input[type="checkbox"]:checked + label:after { opacity: 1; }
.btn-row .submit-btn { background-image: url(../images/mail-icon-white.svg); background-position: right 18px center; background-repeat: no-repeat; background-color: #3AAFAA; border-radius: 60px; cursor: pointer; font-size: 14px; font-weight: 400; line-height: 24px; display: block; text-align: center; color: #fff; outline: none; border: none; padding: 10px 16px; width: 100%; }
.btn-row .submit-btn.disabled { background-image: url(../images/mail-icon-gray.svg); background-color: #fff; color: #94A3B8; cursor: auto; }

.access-pages .heading { padding: 10px 0; }
.access-pages .content-middlecol { height: calc(100vh - 135px); overflow-y: auto; }
.access-pages .content-middlecol .pin-section { height: calc(100vh - 310px); min-height: 250px; display: flex; justify-content: center; flex-direction: column; max-width: 304px; margin: 0 auto; }
.access-pages .content-middlecol .pin-section .opt-text { margin-bottom: 16px; color: #94A3B8; font-size: 14px; font-weight: 400; line-height: 18px; display: flex; }
.access-pages .content-middlecol .pin-section .opt-text strong { color: #fff; font-weight: 600; margin-right: 4px; }
.access-pages .content-middlecol .pin-section .resend-otp { color: #94A3B8; font-size: 14px; font-weight: 400; line-height: 18px; display: flex; margin-top: 32px; }
.access-pages .content-middlecol .pin-section .resend-otp strong { font-weight: 600; margin-left: 4px; }
.access-pages .content-middlecol .pin-section .resend-otp strong a { color: #3AAFAA; }

.access-pages .bottom-col { position: fixed; bottom: 0; left: 0px; right: 0px; background-color:#334155; padding: 15px 15px 32px 15px; }
.access-pages .bottom-col p { color:#CBD5E1; }
.access-pages .bottom-col .subscribe-btn { cursor: pointer; font-size: 14px; font-weight: 400; line-height: 24px; text-align: center; color: #fff; outline: none; border: none; background-color: #69B065; border-radius: 60px; padding: 10px 16px; display: block; text-decoration: none;}
.access-pages .bottom-col .subscribe-btn.disabled { background-color: #475569; cursor: auto; }
.access-pages .bottom-col .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.access-pages .bottom-col .btn-row a,
.access-pages .bottom-col .btn-row button { flex: 1; text-align: center; }
.access-pages .bottom-col .btn-row .cancel-btn { cursor: pointer; font-size: 14px; font-weight: 400; line-height: 24px; text-align: center; color: #fff; outline: none; border: none; background-color: transparent; border-radius: 60px; padding: 10px 16px; display: block; }
.access-pages .bottom-col .btn-row .cancel-btn.disabled { background-color: #475569; cursor: auto; }
.access-pages .bottom-col.access-bottomcol { background-color: transparent; }

.access-pages.bottom-btnonly .content-middlecol { height: calc(100vh - 240px); }
.setpin-inputgroup { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.setpin-inputgroup .col { max-width: 64px; width: 100%; }
.setpin-inputgroup .col .text-field { background: rgba(255, 255, 255, 0.16); border: 1px solid var(--basic-gra, rgba(255, 255, 255, 0.64)); border-radius: 4px; color: #fff; font-size: 36px; font-weight: 600; line-height: 40px; width: 100%; height: 64px; outline: none; text-align: center; }
.setpin-inputgroup .col .text-field:focus,
.setpin-inputgroup .col .text-field:active,
.setpin-inputgroup .col .text-field.active { border: 1px solid var(--games-gra, #90FFFA);}
.setpin-inputgroup .col .text-field.invalid { border: 1px solid #E11515; background: rgba(225, 21, 21, 0.16); }

.tabbing-row .tabs { margin: 0 0 32px 0; padding: 0; display: flex; }
.tabbing-row .tabs > li { border-bottom: 2px solid #475569; flex: 1; text-align: center; list-style: none; }
.tabbing-row .tabs > li > a { padding: 0px 0 8px 0; color:#475569; font-size: 16px; font-weight: 400; line-height: 24px; display: block; }
.tabbing-row .tabs > li.active { border-bottom-color: #fff; }
.tabbing-row .tabs > li.active > a { color: #fff; }
.tabbing-row .tab-info.sticky-head  { height: calc(100vh - 135px); overflow-y: auto; }

.number-fieldgroup { margin-bottom: 30px;}
.number-fieldgroup > label { color:#FFF; font-size: 14px; font-weight: 600; line-height: 18px; margin: 0 0 8px 0; display: block; }
.number-fieldgroup .input-group { position: relative; }
.number-fieldgroup .input-group > label { color:#64748B; font-size: 16px; font-weight: 600; line-height: 24px; margin: 0; position: absolute; left: 10px; top: 11px; }
.number-fieldgroup .input-group .text-field { width: 100%; outline: none; border-radius: 6px; border: 1px solid #94A3B8; background:#FFF; color: #000; font-size: 16px; font-weight: 400; line-height: 24px; padding: 10px 10px 10px 52px; }
.number-fieldgroup .input-group .text-field::-webkit-input-placeholder {  color: #94A3B8; }
.number-fieldgroup .input-group .text-field::-moz-placeholder {  color: #94A3B8; }
.number-fieldgroup .input-group .text-field:-ms-input-placeholder {  color: #94A3B8; }
.number-fieldgroup .input-group .text-field:-moz-placeholder {  color: #94A3B8; }

.terms-box { padding: 16px; border-radius: 8px; border: 1px solid var(--basic-gra, rgba(255, 255, 255, 0.64)); background: rgba(30, 41, 59, 0.33); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -moz-backdrop-filter: blur(6px);margin-bottom:25px ;overflow-y: auto;max-height:300px;height:100vh; }
.terms-box .title { position: relative; margin-bottom: 24px; }
.terms-box .title h6 { font-size: 16px; font-weight: 600; line-height: 24px; margin: 0; color:white; }
.terms-box .title:after { position: absolute; right: 0; top: 0; width: 20px; height: 24px; content: ''; background-image: url(../images/chevron-right2.svg); background-position: center center; background-repeat: no-repeat; }
.terms-box ul { padding: 0; }
.terms-box ul li { padding: 0 0 0 18px; margin: 0 0 16px 0; font-weight: 400; font-size: 14px; line-height: 18px; color: #fff; list-style: none; position: relative; }
.terms-box ul li:before { position: absolute; content: ''; width: 6px; height: 6px; background-color: #fff; border-radius: 10px; left: 0; top: 50%; margin-top: -3px; }
.terms-box .read-all-terms { color:#3AAFAA; font-size: 14px; font-weight: 600; line-height: 18px; text-decoration: none; }

.terms-desdrawer { position: fixed; height: calc(100% - 50px); left: 0; right: 0; bottom: calc(-100% + 50px); z-index: 11111; transition: all 0.5s ease; }
.terms-desdrawer .heading { position: relative; padding: 48px 15px 32px 15px; background: rgba(51,65,85,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -moz-backdrop-filter: blur(6px); border-radius: 16px 16px 0px 0px; }
.terms-desdrawer .heading h3 { margin: 0; font-size: 24px; font-weight: 600; line-height: 32px;color:white; }
.terms-desdrawer .handlebar { position: absolute; left: 50%; top: 16px; width: 160px; height: 4px; border-radius: 2px; background: #CBD5E1; transform: translateX(-50%); }
.terms-desdrawer .content { background: rgba(51,65,85,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -moz-backdrop-filter: blur(6px); padding: 0px 15px 15px 15px; height: calc(100% - 112px); overflow-y: auto;}
.terms-desdrawer .content .date { margin-bottom: 16px; display: flex; flex-wrap: wrap; color:#FFF; font-size: 14px; font-weight: 400; line-height: 18px; }
.terms-desdrawer .content .date label { color:#94A3B8; margin-right: 8px; }
.terms-desdrawer .overlay { position: fixed; content: ''; left: 0; top: 0; background-color: rgb(18,18,18,0.66); width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; }
body.show-full-terms .terms-desdrawer { bottom: 0; }
body.show-full-terms .terms-desdrawer .overlay { opacity: 1; visibility: visible; }

.setpin-page.success-page .setpin-middlecol.success { height: calc(100vh - 192px); }
.setpin-page.success-page .setpin-middlecol.success .setpin-confirmed-content .content { max-width: 250px; }
.setpin-page.success-page .setpin-middlecol.success .setpin-confirmed-content .content h4 { font-size: 24px; margin-bottom: 16px; }
.setpin-page.success-page .setpin-middlecol.success .setpin-confirmed-content .content p { font-size: 16px; line-height: 20px; }
.setpin-page.success-page .trending-heading .logo { padding-top: 32px; text-align: center; }
.setpin-page.success-page .bottom-col .redirecting-text { text-align: center; margin-bottom: 16px; color:#64748B; font-size: 14px; font-weight: 400; line-height: 18px; display: flex; justify-content: center; }
.setpin-page.success-page .bottom-col .redirecting-text strong { font-weight: 600; color: #CBD5E1; margin: 0 4px; }

.setpin-page.success-page .setpin-middlecol.error .setpin-confirmed-content .content { max-width: 250px; }
.setpin-page.success-page .setpin-middlecol.error .setpin-confirmed-content .content h4 { font-size: 24px; margin-bottom: 16px; }

.general-content-page { padding: 10px 0;  width: 100%;height: 100%;overflow: hidden;}
.general-content-page .heading { padding-bottom: 20px;}
.general-content-page .content-middlecol { height: calc(100vh - 168px); overflow-y: auto;  width: 100%; padding-right: 17px; box-sizing: content-box; }
.general-content-page .content-middlecol .date { margin-bottom: 16px; display: flex; flex-wrap: wrap; color:#FFF; font-size: 14px; font-weight: 400; line-height: 18px; }
.general-content-page .content-middlecol .date label { color:#94A3B8; margin-right: 8px; }
.general-content-page .content-middlecol p a { color: #fff; }
.general-content-page .headings h2 { font-size: 24px; font-weight: 600; line-height: 32px; }

.faq-col { counter-reset: item-counter; margin-top: 32px; }
.faq-col .faq-row { margin-bottom: 32px; }
.faq-col .faq-row .faq-title { position: relative; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 18px; color: #94A3B8; margin-bottom: 12px; padding-right: 34px; padding-left: 28px; }
.faq-col .faq-row .faq-title:after { position: absolute; right: 0; top: 0px; width: 18px; height: 18px; content: ''; transition: all 0.5s ease; background-image: url(../images/chevron-right.svg); background-position: center center; background-repeat: no-repeat; transform: rotate(90deg); filter: brightness(0.5); -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); }
.faq-col .faq-row .faq-title:before {  counter-increment: item-counter; content: counter(item-counter)"."; position: absolute; left: 0; top: 0; }
.faq-col .faq-row .faq-content { display: none; margin-bottom: 32px; }
.faq-col .faq-row .faq-content ul { margin: 0 0 16px 0; padding: 0; }
.faq-col .faq-row .faq-content ul li { margin: 0 0 6px 0; }
.faq-col .faq-row.active .faq-title { color: #fff; }
.faq-col .faq-row.active .faq-title:after { transform: rotate(-90deg); filter: none; }

.events-desdrawer { position: fixed; height: calc(100% - 50px); left: 0; right: 0; bottom: calc(-100% + 50px); z-index: 11111; transition: all 0.5s ease; opacity: 0; visibility: hidden; }
.events-desdrawer .events-desdrawer-image { height: 225px; position: relative; }
.events-desdrawer .events-desdrawer-image:before { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; border-radius: 16px 16px 0px 0px; background: linear-gradient(180deg, #D3D3D3 0%, rgba(217, 217, 217, 0.00) 39.62%, rgba(24, 24, 24, 0.00) 39.62%); mix-blend-mode: screen; }
.events-desdrawer .events-desdrawer-image:after { position: absolute; left: 0; top: 0; bottom: 0; height: 100%; width: 100%; content: ''; opacity: 0.8; background: var(--basic-dark-gra, radial-gradient(58.99% 58.99% at 50% 0%, rgba(135, 255, 250, 0.33) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(104.31% 104.31% at 50% -4.31%, rgba(3, 88, 84, 0.66) 0%, rgba(18, 18, 18, 0.66) 100%), #121212); border-radius: 16px 16px 0px 0px; }
.events-desdrawer .events-desdrawer-image .handlebar { position: absolute; left: 50%; top: 16px; width: 160px; height: 4px; border-radius: 2px; background: #CBD5E1; transform: translateX(-50%); z-index: 1; }
.events-desdrawer .events-desdrawer-image img { border-radius: 16px 16px 0px 0px; height: 100%; object-fit: cover; width: 100%; object-position: center; }
.events-desdrawer .events-desdrawer-image .label {  position: absolute; left: 12px; bottom: 12px; z-index: 1; }
.events-desdrawer .events-desdrawer-image .label a,
.events-desdrawer .events-desdrawer-image .label span { color: #6AF3ED; font-size: 11px; line-height: 18px; display: inline-block; padding: 4px 8px; background-color: #334155; border-radius: 16px; }

.events-desdrawer .content { padding: 24px 15px; background: rgba(51,65,85,0.85); -webkit-backdrop-filter: blur(0px); -moz-backdrop-filter: blur(6px); height: calc(100% - 225px); display: flex; flex-direction: column; overflow: auto; }
.events-desdrawer .content h5 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 12px 0; color: #fff; }
.events-desdrawer .content h6 { font-size: 12px; line-height: 16px; font-weight: 600; margin: 0 0 8px 0; color: #fff; }
.events-desdrawer .content p { color: #94A3B8; }
.events-desdrawer .content > ul { padding: 0; margin: 0 0 16px 0; }
.events-desdrawer .content > ul > li { list-style: none; color: #94A3B8; font-size: 14px; line-height: 18px; font-weight: 400; margin-bottom: 5px; }
.events-desdrawer .content .blue-btn { margin-top: auto; }
.events-desdrawer .content .bottom-btn { position: fixed; bottom: 0px; left: 0; right: 0; padding: 24px 15px; max-width: 797px; margin: 0 auto; }
.events-desdrawer .content .bottom-btn .join-event { display: flex; align-items: center; background-color: #3AAFAA; color: #fff; font-size: 14px; line-height: 18px; padding: 13px 8px; justify-content: center; border-radius: 50px; }
.events-desdrawer .content .bottom-btn .gradient-btn { position: absolute; right: 23px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.events-desdrawer .overlay { position: fixed; content: ''; left: 0; top: 0; background-color: rgb(18,18,18,0.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -moz-backdrop-filter: blur(4px); width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; }
body.show-events-detail .events-desdrawer { bottom: 0; visibility: visible; opacity: 1; }
body.show-events-detail .events-desdrawer .overlay { opacity: 1; visibility: visible; }

.events-desdrawer .events-desdrawer-image .contents { text-align: center; position: absolute; left: 0; right: 0; width: 100%; top: 50%; transform: translateY(-50%); z-index: 1; }
.events-desdrawer .events-desdrawer-image .contents h2 { font-size: 36px; line-height: 40px; margin-bottom: 8px; }
.events-desdrawer .events-desdrawer-image .contents .gradient-btn { display: inline-flex; padding: 2px; }
.events-desdrawer .events-desdrawer-image .contents .gradient-btn span,
.events-desdrawer .events-desdrawer-image .contents .gradient-btn a { padding: 6px 15px; }
.events-desdrawer .events-desdrawer-image .contents .gradient-btn span img,
.events-desdrawer .events-desdrawer-image .contents .gradient-btn a img { height: 24px; margin-right: 8px; }

.accodian-col { height: calc(100% - 70px); overflow-y: auto; }
.accodian-col .accodian-row { margin-bottom: 12px; }
.accodian-col .accodian-row .accodian-title { position: relative; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 18px; margin-bottom: 12px; color: #94A3B8; padding: 8px 40px 8px 12px; border-radius: 8px; }
.accodian-col .accodian-row .accodian-title:after { position: absolute; right: 12px; top: 8px; width: 18px; height: 18px; content: ''; transition: all 0.5s ease; background-image: url(../images/chevron-right.svg); background-position: center center; background-repeat: no-repeat; filter: brightness(0.5); -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); }
.accodian-col .accodian-row .accodian-content { display: none; margin-bottom: 12px; }
.accodian-col .accodian-row .accodian-content ul { margin: 0 0 16px 0; padding: 0; }
.accodian-col .accodian-row .accodian-content ul li { margin: 0 0 6px 0; }
.accodian-col .accodian-row .accodian-content .description-section { padding: 0 16px; }
.accodian-col .accodian-row.active .accodian-title { color: #fff; background-color: #1E293B; }
.accodian-col .accodian-row.active .accodian-title:after { transform: rotate(-90deg); filter: none; }
.accodian-col .accodian-row.active .accodian-content { display: block; }

.accodian-col .accodian-row .accodian-content .option-list { height: auto; }
.accodian-col .accodian-row .accodian-content .option-list > ul { margin: 0; }
.accodian-col .accodian-row .accodian-content .howtoplay-section > ul { padding: 0; margin: 0 0 24px 0; }
.accodian-col .accodian-row .accodian-content .howtoplay-section > ul > li { list-style: none; color: #94A3B8; font-size: 14px; line-height: 18px; font-weight: 400; margin-bottom: 5px; }
.accodian-col .accodian-row .accodian-content .howtoplay-section h6 { margin-bottom: 16px; }

.accodian-col .accodian-row .accodian-content .prizes-list { margin: 0; padding: 0; }
.accodian-col .accodian-row .accodian-content .prizes-list > li { min-height: 60px; margin: 0 0 16px 0; padding: 8px; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: rgba(30,41,59,0.33); border: 1px solid #90FFFA; border-radius: 8px; }
.accodian-col .accodian-row .accodian-content .prizes-list > li h6 { display: flex; align-items: center; font-size: 16px; line-height: 24px; color: #fff; margin: 0; font-weight: 400; }
.accodian-col .accodian-row .accodian-content .prizes-list > li h6 img { margin-left: 4px; }
.accodian-col .accodian-row .accodian-content .prizes-list > li .coin { display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 18px; color: #fff; }
.accodian-col .accodian-row .accodian-content .prizes-list > li .coin img { margin-right: 4px; }
.accodian-col .accodian-row .accodian-content .prizes-list > li a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; }

.accodian-col .accodian-row .leaderboard-section .leaderboard-list { padding: 0; margin: 0; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li { min-height: 60px; margin: 0 0 12px 0; padding: 8px; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: rgba(30,41,59,0.33); border: 1px solid #90FFFA; border-radius: 8px; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li > a { display: flex; flex-wrap: wrap; align-items: center; width: 100%; justify-content: space-between; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li h6 { display: flex; align-items: center; font-size: 16px; line-height: 24px; color: #fff; margin: 0; font-weight: 400; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li h6 img { margin-left: 4px; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .left-col { display: flex; align-items: center; font-size: 14px; font-weight: 600; line-height: 18px; color: #fff; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .left-col .number { font-size: 16px; line-height: 24px; font-weight: 400; min-width: 20px; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .left-col .icon { width: 30px; height: 30px; overflow: hidden; margin-right: 8px; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .left-col .icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 60px; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .left-col .contents h6 { font-size: 16px; font-weight: 600; line-height: 24px; margin: 0; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .left-col .contents p { font-size: 11px; font-weight: 400; line-height: 14px; color: #fff; margin: 0; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .right-col { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .right-col h6 { font-size: 16px; font-weight: 400; line-height: 24px; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li .right-col p { font-size: 12px; font-weight: 400; line-height: 16px; color: #fff; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li.active { border: none; background: linear-gradient(146deg, #90FFFA 7.25%, #3AAFAA 74.07%); }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li.active .left-col .number,
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li.active .left-col .contents h6,
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li.active .right-col h6,
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li.active .right-col p { color: #0D4946; }
.accodian-col .accodian-row .leaderboard-section .leaderboard-list > li.active .left-col .contents p { color: #278D89; }

.switch-desdrawer { position: fixed; height: auto; left: 0; right: 0; bottom: -106px; z-index: 11111; transition: all 0.5s ease; }
.switch-desdrawer .content { padding: 32px 15px; border-radius: 16px 16px 0px 0px; border: 1px solid var(--basic-gra, rgba(255, 255, 255, 0.64)); background: rgba(15,23,42,0.66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -moz-backdrop-filter: blur(12px); }
.switch-desdrawer .content .switch-tobtn { display: flex; align-items: center; color:#FFF; font-size: 16px; font-weight: 600; line-height: 24px; padding: 8px; }
.switch-desdrawer .content .switch-tobtn img { margin-right: 16px; }
.switch-desdrawer .overlay { position: fixed; content: ''; left: 0; top: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -moz-backdrop-filter: blur(4px); background-color: rgb(18,18,18,0.66); width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
body.show-switch-popup .switch-desdrawer { bottom: 0; }
body.show-switch-popup .switch-desdrawer .overlay { opacity: 1; visibility: visible; }

.videos-bgimage { background-image: url(../images/videos.bg.png); background-position: top left; background-repeat: no-repeat; background-size: cover; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: -1; }
.video-wrapper { height: calc(100vh - 100px); justify-content: center; align-items: center; display: flex; overflow-y: auto; }
.video-wrapper .content-col { text-align: center; }
.video-wrapper .content-col .logo { margin-bottom: 24px; }
body.header-fixed .header-guest { position: fixed; top: 0; background-color: #000; width: 100%; left: 0; z-index: 1111; padding: 15px; background-image: url(../images/header-bg.png); background-position: left top; background-repeat: no-repeat; background-size: cover; }
body.header-fixed .header-guest .header-row .right-col > ul { display: none; }
.header .header-row .right-col .gradient-btn { display: none; }
.header .header-row .right-col .gradient-btn a { padding: 10px 16px; font-weight: 400; }
.header .header-row .right-col .gradient-btn a img { margin-right: 8px; }
body.header-fixed .header-guest .header-row { align-items: flex-end; }
body.header-fixed .header-guest .header-row .right-col .gradient-btn { display: block; }
body.header-fixed .header-guest .header-row .left-col { align-items: flex-start; flex-direction: column; }
body.header-fixed .header-guest .header-row .left-col .hidden-mobile { display: none; }
body.header-fixed .header-guest .header-row .left-col .image { margin: 0 0 8px 0; }
body.header-fixed .header-guest .header-row .left-col .image img { height: 20px; }
.header .header-row .left-col .text { color:#CBD5E1; font-size: 12px; font-weight: 400; line-height: 16px; display: none; max-width: 115px; }
body.header-fixed .header-guest .header-row .left-col .text { display: block; }

.subscription-desdrawer { position: fixed; height: auto; left: 0; right: 0; bottom: -100%; z-index: 111111; transition: all 0.5s ease; }
.subscription-desdrawer .handlebar { width: 160px; height: 4px; border-radius: 2px; background: #CBD5E1; margin: 0 auto 32px auto; }
.subscription-desdrawer .content { padding: 16px 15px; border-radius: 16px 16px 0px 0px; background: rgba(51,65,85,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -moz-backdrop-filter: blur(6px); }
.subscription-desdrawer .content .switch-tobtn { display: flex; align-items: center; color:#FFF; font-size: 16px; font-weight: 600; line-height: 24px; padding: 8px; }
.subscription-desdrawer .content .switch-tobtn img { margin-right: 16px; }
.subscription-desdrawer .content h3 { font-size: 24px; font-weight: 600; line-height: 32px; margin: 0 0 16px 0; color:white; }
.subscription-desdrawer .content p { font-size: 16px; font-weight: 400; line-height: 24px; }
.subscription-desdrawer .overlay { position: fixed; content: ''; left: 0; top: 0; background-color: rgb(18,18,18,0.66); width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
body.show-subscription-modal .subscription-desdrawer { bottom: 0; }
body.show-subscription-modal .subscription-desdrawer .overlay { opacity: 1; visibility: visible; }
.subscription-desdrawer .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 40px; padding: 16px 0; }
.subscription-desdrawer .btn-row a,
.subscription-desdrawer .btn-row button { flex: 1; text-align: center; }
.subscription-desdrawer .btn-row .text-btn { cursor: pointer; font-size: 14px; font-weight: 400; line-height: 24px; text-align: center; color: #fff; outline: none; border: none; background-color: transparent; border-radius: 60px; padding: 10px 16px; display: block; }

.access-pages.custom-avatar-page {}
.custom-avatar-col { height: calc(100vh - 91px); overflow-y: auto; padding: 70px 0 0 0; text-align: center; }
.custom-avatar-col .inner-content h3 { font-size: 24px; font-weight: 600; line-height: 32px; margin: 0 0 70px 0; }
.custom-avatar-col .inner-content .image { width: 290px; height: 290px; margin: 0 auto; position: relative; }
.custom-avatar-col .inner-content .image .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }




.nav-pills {
    --bs-nav-pills-border-radius: 0.375rem;
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #white !important;
  }
.nav-pills .nav-item .active{
   /* border-bottom: 2px solid
    #fff;*/
}
.bottom-nav ul li.image a img { border-radius: 50px; max-height: 40px; }
.access-pages .bottom-col{
    padding: 10px 15px 20px 15px;
}
.nav-tabs {
    --bs-nav-tabs-border-width: 0px !important;
    --bs-nav-tabs-border-color: #dee2e6 !important;
    --bs-nav-tabs-border-radius: 0.375rem !important;
    --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6 !important;
    --bs-nav-tabs-link-active-color: white !important; 
    --bs-nav-tabs-link-active-bg: none !important;
    --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff !important;
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color) !important;
}
.nav {
    --bs-nav-link-padding-x: 1rem !important;
    --bs-nav-link-padding-y: 0.5rem !important;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: dimgray !important;
    --bs-nav-link-hover-color: none !important;
    --bs-nav-link-disabled-color: #6c757d !important;
      display: flex !important;
      flex-wrap: wrap !important ;
      padding-left: 0;
      margin-bottom: 0;
      list-style: none !important;
} 

#success{
     /* height: 380px !important;  */
    max-height: 60vh !important;
}

.setpin-confirmed-content{
    max-height: 30vh !important;
}

.setpin-middlecol.confirmed {
    height: calc(100vh - 190px);
}
.alert-message{
    border-radius: 8px;
    position: relative;
    padding: 5px 0;
    transition: all 0.3s ease;
    margin-bottom: 10px;
   }
   .alert-message span{
    color:white;
   }

   .crown-btn {
    z-index: 111;
    position: fixed;
    padding: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.64) 0%,rgba(237,237,237,0.1) 100%);
    border-radius: 40px;
    width: fit-content;
    margin: 15px 45px 0px 15px;
    float: right;
    bottom: 118px;
    right: 0;
}
.crown-btn span img {
    margin-right: 4px;
}
.crown-btn a img {
    margin-right: 4px;
}
.crown-btn span,
.crown-btn a {
    color: #fff;
    z-index: 1;
    position: relative;
    background: var(--basic-dark-gra, radial-gradient(58.99% 58.99% at 50% 0%, rgba(135, 255, 250, 0.33) 0%, rgba(0, 0, 0, 0.00) 100%), radial-gradient(104.31% 104.31% at 50% -4.31%, rgba(3, 88, 84, 0.66) 0%, rgba(18, 18, 18, 0.66) 100%), #121212);
    border-radius: 40px;
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.loader {
    border: 6px solid transparent;
    border-top: 6px solid #3498db;
    background-color: transparent;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin:auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Overrided Styles end*/

/* Responsive Style Start 
-------------------------------------------------- */
@media (max-width: 767px) {

}

@media (max-width: 575px) {

}

@media (max-width: 479px) {

}
/* Responsive Style End
--------------------------------------------------