/*-----------------------------------*\
  #style.css
\*-----------------------------------*/
html{scroll-padding-top:70px}
body,
html {
  padding: 0;
  margin: 0
}

body {
  overflow-x: hidden;
  background: #f5f6f7
}

:root {
    --max-width: 1100px;
    --border-radius: 12px;
    --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
    --white: #fff;
    --primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
    --secondary-glow: radial-gradient(#019de7, hsla(0, 0%, 100%, 0));
    --tile-start-rgb: 239, 245, 249;
    --tile-end-rgb: 228, 232, 233;
    --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
    --callout-rgb: 238, 240, 241;
    --callout-border-rgb: 172, 175, 176;
    --card-rgb: 180, 185, 188;
    --card-border-rgb: 131, 134, 135;
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
  }

h2 {
  font-size: 20px
}

@media(prefers-color-scheme:dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
    --primary-glow: radial-gradient(rgba(1, 65, 255, .4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(to bottom right, rgba(1, 157, 231, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, .3));
    --tile-start-rgb: 2, 13, 46;
    --tile-end-rgb: 2, 5, 19;
    --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
    --callout-rgb: 20, 20, 20;
    --callout-border-rgb: 108, 108, 108;
    --card-rgb: 100, 100, 100;
    --card-border-rgb: 200, 200, 200
  }
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
  }
  
  body {
    color: rgb(var(--foreground-rgb));
    position: relative;
    color: #fff;
    
  }
  
  body:after {
    content: "";
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .05;
  }

a {
  color: inherit;
  text-decoration: none
}

ul,
ul li {
  list-style-type: none;
  padding: 0;
  margin: 0
}

[contenteditable=true] {
  caret-color: #fff;
  outline: 0
}

@media(prefers-color-scheme:dark) {
  html {
    color-scheme: dark
  }
}

@media only screen and (max-width:768px) {
  body {
    background: #0e0a5f
  }
}

:focus {
  outline: none
}

:focus-visible,
:focus-within {
  outline: none
}

@font-face {
  font-family: __Poppins_8c1529;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/87c72f23c47212b9-s.woff2) format("woff2");
  unicode-range: U+0900-097f, U+1cd0-1cf9, U+200c-200d, U+20a8, U+20b9, U+25cc, U+a830-a839, U+a8e0-a8ff
}

@font-face {
  font-family: __Poppins_8c1529;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/591327bf3b62a611-s.woff2) format("woff2");
  unicode-range: U+0100-02af, U+0304, U+0308, U+0329, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20cf, U+2113, U+2c60-2c7f, U+a720-a7ff
}

@font-face {
  font-family: __Poppins_8c1529;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/916d3686010a8de2-s.p.woff2) format("woff2");
  unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
  font-family: __Poppins_Fallback_8c1529;
  src: local("Arial");
  ascent-override: 92.33%;
  descent-override: 30.78%;
  line-gap-override: 8.79%;
  size-adjust: 113.73%
}

.__className_8c1529 {
  font-family: __Poppins_8c1529, __Poppins_Fallback_8c1529;
  font-weight: 400;
  font-style: normal
}

.header {
  width: calc(100% + 24px);
  height: 54px;
  padding: 8px 16px 8px 14px;
  background: linear-gradient(180deg, #282d93, #15136e);
  box-shadow: 0 1px 1px 0 hsla(0, 0%, 100%, .19);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  color: #fff;
  margin: -12px auto 24px -12px
}
.header .header-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  flex-wrap: nowrap;
  width: 50%;
  font-weight: 700;
  font-size: 22px;
  align-items: center
}

.header .header-left nav {
    display: flex;
    flex-wrap: wrap;
    margin-right: 8px;
    cursor: pointer
}

.sidebarToggle {
  transition: all .3s linear;
  cursor: pointer
}

.header label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px
}

.header .header-left nav img {
  cursor: pointer;
  margin-top: 4px
}

.header .header-left .header-logo img {
  vertical-align: middle
}

.header .header-right {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end
}







.header .header-right .header-notification {
  width: 34px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: end;
  background: #0e0a5f;
  border-radius: 28px;
  padding: 8px;
  margin-left: 8px;
  position: relative;
  cursor: pointer
}
.header-ring {
  animation: header-ring 1.6s linear infinite
}

@keyframes header-ring {
  0% {
    transform: rotate(0deg)
  }

  5% {
    transform: rotate(0deg)
  }

  15% {
    transform: rotate(0deg)
  }

  25% {
    transform: rotate(20deg)
  }

  35% {
    transform: rotate(-15deg)
  }

  45% {
    transform: rotate(10deg)
  }

  55% {
    transform: rotate(-5deg)
  }

  60% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(0deg)
  }
}

@media(min-width:768px) {
  .header .header-left .header-logo img {
    width: 100%
  }
}




.quiz-container {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  width: 100%
}
.quiz-container .quiz-content {
  display: flex;
  flex-wrap: wrap;
  background: #282d93;
  border: 0 solid #4c51af;
  border-radius: 8px;
  margin-bottom: 12px;
  width: 100%;
  min-height: 146px;
  background: #1f237e;
}

.quiz-content .quiz-card {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  padding: 12px
}
.quiz-content .quiz-card .quiz-thumbnail-img {
  display: flex;
  flex-wrap: wrap;
  width: 76px;
  background: #fff;
  border-radius: 16px;
  height: 76px;
  justify-content: center;
  align-items: center;
  min-width: 76px
}

.quiz-content .quiz-card .quiz-thumbnail-img img {
  width: 60px
}

.quiz-content .quiz-card .quiz-info {
  display: flex;
  flex-wrap: wrap;
  padding-left: 12px;
  align-content: flex-start
}
.quiz-title {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  text-transform: uppercase
}

.quiz-content .quiz-card .quiz-info h3 {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px
}

.quiz-content .quiz-card .quiz-info h3 img {
  margin-left: 6px;
  margin-top: -2px
}

.quiz-content .quiz-card .quiz-info p {
  font-size: 14px;
  color: #b6b3ff
}

@media only screen and (max-width:375px) {
  .quiz-content .quiz-card .quiz-info p {
    font-size: 13px
  }
}

.quiz-content .quiz-card-footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 8px 12px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #4c51af8c;
  font-size: 12px
}

.quiz-content .quiz-card-footer p {
  color: #dfe1fc
}

.quiz-content .quiz-card-footer p span {
  margin-right: 8px
}

.quiz-content .quiz-card-footer p strong {
  color: #f5f6ff
}

.quiz-content .quiz-card-footer p span img {
  vertical-align: text-bottom;
  margin-right: 6px
}

.footer-imp-links{
  display:flex;justify-content:center
}
.footer-imp-links a{
  padding:6px 10px;text-decoration:underline
}



.quiz-list-shine {
  position: relative;
  overflow: hidden;
  background: #cccccc14;
  border-radius: 8px
}

.quiz-list-shine:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 22px;
  background-color: hsla(0, 0%, 100%, .2);
  transform: skewX(-15deg);
  opacity: .6;
  filter: blur(5px);
  left: -10%;
  top: 1px;
  animation: quiz-list-shine 1.8s ease infinite
}

@keyframes quiz-list-shine {
  0% {
    opacity: .6;
    left: -10%
  }

  66% {
    opacity: 1;
    left: 100%
  }

  to {
    opacity: 1;
    left: 100%
  }
}
.main-content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-height: 400px;
  align-content: flex-start
}

.main-content ul.imp-tabs {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 8px;
  padding: 0;
  overflow-x: auto;
  border-right: 0 solid #282d93;
  margin-left: 0;
  -webkit-overflow-scrolling: auto;
  -webkit-overflow-scrolling: touch
}

.tabs-container {
  width: calc(100% - 40px);
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  transition: all .2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  border-right: 1px solid #282d93;
  position: relative;
  margin-top: 8px;
  margin-bottom: 16px;
  border-radius: 0 8px 8px 0;
  margin-left: -12px
}

.tabs-container,
.main-content ul.imp-tabs {
  -webkit-tap-highlight-color: transparent
}

.main-content ul.imp-tabs::-webkit-scrollbar {
  width: 0;
  height: 0
}

.main-content ul.imp-tabs::-webkit-scrollbar-track {
  background: #f1f1f1;
  width: 0;
  height: 0
}

.main-content ul.imp-tabs::-webkit-scrollbar-thumb,
.main-content ul.imp-tabs::-webkit-scrollbar-thumb:hover {
  background: #fff;
  width: 0;
  height: 0
}

.main-content ul.imp-tabs li {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  min-width: auto;
  white-space: nowrap;
  margin-right: 6px
}

.main-content ul.imp-tabs li:first-child {
  margin-left: 12px
}

.main-content ul.imp-tabs li:last-child {
  margin-right: 0
}

.main-content ul.imp-tabs li a {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  color: #a6b7e5;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 600;
  transition: .6s;
  border-radius: 8px;
  border: 1px solid #282d93
}

.tabs-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
  width: 100%
}

.cat-quiz-search {
  background: #070255;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  margin-top: 6px;
  cursor: pointer
}

@media only screen and (max-width:375px) {
  .main-content ul.imp-tabs li {
    min-width: auto
  }

  .main-content ul.imp-tabs li a {
    padding: 6px 16px
  }
}

@media only screen and (min-width:768px) {
  .main-content ul.imp-tabs {
    overflow-x: unset
  }

  .main-content ul.imp-tabs::-webkit-scrollbar {
    width: 0;
    height: 0
  }

  .main-content ul.imp-tabs::-webkit-scrollbar-thumb,
  .main-content ul.imp-tabs::-webkit-scrollbar-track {
    background: 0 0;
    width: 0;
    height: 0
  }

  .main-content ul.imp-tabs::-webkit-scrollbar-thumb:hover {
    background: #ccc;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: 20px
  }
}

.tab-cat {
  position: relative;
  overflow: hidden;
  background: #cccccc14;
  border-radius: 8px
}

.tab-cat:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 22px;
  background-color: hsla(0, 0%, 100%, .2);
  transform: skewX(-15deg);
  opacity: .6;
  filter: blur(5px);
  left: -10%;
  top: 1px;
  animation: tab-cat 1.8s ease infinite
}

@keyframes tab-cat {
  0% {
    opacity: .6;
    left: -10%
  }

  66% {
    opacity: 1;
    left: 100%
  }

  to {
    opacity: 1;
    left: 100%
  }
}

.main-container {
  padding: 12px;
  width: 428px;
  min-height: 100vh;
  min-height: 100vh !important;
  margin: 0 auto;
  position: relative;
  background-color: rgb(14, 17, 32);
  z-index: 2;
  height: auto;
}

.top-ad {
  width: 100%;
  margin-bottom: 16px;
  border-radius: 0;
  padding: 8px 16px 16px;
  background: 0 0;
  position: relative;
  height: auto;
  min-height: 321px
}

.ad-title {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase
}

@media(max-width:700px) {
  .main-container {
    width: 100%;
    padding: 0 12px 12px
  }
}

.footer {
  padding-top: 4px;
  text-align: center;
  color: #f5f6ff;
  font-size: 12px;
  font-weight: 400;
  padding-bottom: 50px;
}

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/