html, body, div, span, object, h1, h2, h3, p, blockquote, pre,
em, img, strong, b, i, ol, ul, li, fieldset, article, section, form, label {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

[data-theme=light] {
  --clBody:#000;
  --cl1:#000;
  --cl2:#222;
  --cl3:#555;
  --cl4:#888;
  --clP:#777;
  --clBorder:#ccc;
  --clLink:rgba(42,184,100,1);
  --bg:#f8fcf8;
  --bg2:#fff;
  --bg3:#eee;
  --bg4:#eee;
  --clGreen:rgba(42,184,100,0.8);
  --clGreenHover:rgba(42,184,100,1);
  --clStroke1:#f39c12;
  --clStroke2:#2ecc71;
  --clFrogBG:lightyellow;
}
[data-theme=dark] {
  --clBody:#e5e7eb;
  --cl1:#fdfeff;
  --cl2:#cde;
  --cl3:#b0c0d0;
  --cl4:#678;
  --clP:#6b7280;
  --clBorder:#1f2937;
  --clLink:rgba(42,184,100,0.8);
  --bg:#131a2b;
  --bg2:#172239;
  --bg3:#1f2937;
  --bg4:#111827;
  --clGreen:rgba(42,184,100,0.8);
  --clGreenHover:rgba(42,184,100,0.6);
  --clStroke1:#d38810;
  --clStroke2:#2ecc71;
  --clFrogBG:darkgreen;
}

html{overflow-y:scroll;width:100%;height:100%}

a{color:var(--cl3);text-decoration:none}
a:hover{color:var(--cl1)}

a.bl{color:var(--clLink);font-weight:500}
a.bl:hover{font-weight:700;text-decoration:underline}
    
body{
	font-family:'Segoe UI','Roboto',system-ui,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:15px;
	width:100%;
	text-align:center;
	color:var(--clBody);
	background-color:var(--bg);
	max-width:1000px;
	margin:0 auto;
}

h1{font-size:28px}
h2{margin:0;padding:6px 8px;font-size:120%;text-transform:uppercase;padding:10px 0;margin:0;letter-spacing:0.12em;}

header{
    display:flex;
    justify-content:space-between;
    position:fixed;
    top:0;
    width:98%;
    max-width:980px;
	padding:10px 1%;
	font-size:26px;
    height:60px;
    background-color:var(--bg);
    border-bottom:1px solid var(--clBorder);
    z-index:2;
}

#navlogo{display:flex;align-items:center;}
#navlogo a{display:block;width:48px;height:48px;}
#navlogo a img{width:48px;height:48px;border-radius:10px;transition:transform .7s ease-in-out;}
#navlogo a img:hover{transform:rotate(180deg);}
#navright{display:flex;align-items:center;font-size:80%}
#navright #prof{margin:0 6px 0 26px;width:48px;height:48px;}
#navright #prof img{border-radius:50%;width:48px;height:48px;}
#madeby{font-size:16px;float:left;line-height:20px;margin:20px;}
#btnSettings,#btnNotifs{margin-left:25px;color:var(--cl2);}
#btnSettings:hover,#btnNotifs:hover{color:var(--cl1);}


#page{
    display:flex;
    flex-direction:column;
    min-height: calc(100vh - 71px);
	text-align:left;
	margin:100px auto 0 auto;
	padding:0;
}

img {
    aspect-ratio: attr(width) / attr(height);
}

.tippy-tooltip.x-theme{color:#000;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff;border-radius:8px;padding:16px;}
.tippy-tooltip.x-theme[x-placement^=top] .tippy-arrow{border-top:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=bottom] .tippy-arrow{border-bottom:8px solid #fff;border-right:8px solid transparent;border-left:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=left] .tippy-arrow{border-left:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tippy-tooltip.x-theme[x-placement^=right] .tippy-arrow{border-right:8px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tippy-tooltip.x-theme .tippy-backdrop{background-color:#fff}
.tippy-tooltip.x-theme .tippy-roundarrow{fill:#fff}
.tippy-tooltip.x-theme[data-animatefill]{background-color:initial}
.tippy-tooltip.x-theme a{color:#000}

.shadow{
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.shadow:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}


.btn{display:flex;align-items:center;padding:4px 12px 6px 12px;font-size:16px;border-radius:8px;height:22px;transition:transform .2s ease-in-out;}
.blankBtn{border:1px solid var(--clBorder);background:var(--bg);}
.blankBtn:hover{}
.blackBtn{color:#fff;background:#000;}
.blackBtn:hover{color:#fff;background:#222;}
.greenBtn{color:#fff;background:var(--clGreen);}
.greenBtn:hover{color:#fff;background:var(--clGreenHover) !important;}
.bigBtn{font-size:24px;height:auto;padding:8px 24px 11px 24px;margin:30px 20px}
.btnRotate:hover{transform:rotate(2deg);}
#navright .menuBtn{border:none;color:var(--cl1);background:transparent;margin-left:10px;padding:8px 12px 10px 12px;}
#navright .menuBtn.selected{background:var(--bg3);}
#navright .menuBtn:hover{background:var(--bg3);}

.hide{display:none;}

footer{clear:both;position:relative;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:var(--bg);}
footer div{margin:10px 0;}
footer a, footer .dmode{color:var(--cl3);cursor:pointer;}
footer a, footer span{display:block;float:left;margin:0 10px;}

.topdom{display:flex;justify-content:space-between;align-items:center;padding:20px}
.rightdom{flex-grow:1;margin-left:60px}
.rightdom-inside{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 20px 0 4px;margin:10px 0 20px 0}

.card{display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--bg2);width:280px;height:320px;border-radius:5px;box-shadow:0 10px 20px -10px rgba(0, 0, 0, 0.2);}
.card .percent{position: relative;}
.card svg{position:relative;width:210px;height:210px;transform:rotate(-90deg);}
.card svg circle{width:100%;height:100%;fill:none;stroke:var(--bg4);stroke-width:20;stroke-linecap:round;}
.card svg circle:last-of-type{stroke-dasharray:calc(2 * 3.14 * var(--radius));stroke-dashoffset:calc((2 * 3.14 * var(--radius)) - ((2 * 3.14 * var(--radius)) * var(--percent)) / 100);stroke:var(--clStroke1);transition:stroke-dashoffset 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);}
.card .number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.card .number h3{font-weight:400;font-size:3.5rem;}
.card .title{text-align:center;}
.card .title h2{margin:25px 0 0;}
.card .title a{display:block;margin-bottom:10px;text-decoration:underline;color:var(--clGreenHover);}
.card .title a:hover{color:var(--clGreen);}

.minicard{width:292px;height:76px;margin:20px;flex-direction:row;justify-content:flex-start;}
.minicard .percent{padding:0 10px;margin-top:6px}
.minicard svg{width:64px;height:64px;}
.minicard svg circle{stroke-width:8;stroke:var(--bg4)}
.minicard svg circle:last-of-type{stroke:var(--clStroke2)}
.minicard .number{top:46%}
.minicard .number h3{font-size:1.5rem}
.minicard h4{font-size:20px;margin:0;padding:16px 10px 20px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:180px;}
.minicard .vari{color:#fff;width:90px;font-size:28px;text-align:center;line-height:76px;font-weight:bold}

.dom-menu{display:flex;align-items:flex-end;}
.dom-menu a{margin-left:8px}

#sponsor-ads{margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;border:1px solid var(--clBorder);background:var(--bg4);padding-top:10px;}
#sponsor-ads a.shadow{background:var(--bg2);width:270px;height:68px;margin:10px 15px 25px 15px;padding:12px 13px;text-align:left;}
.bp_pic{float:left;text-align:left;width:80px;}
.bp_pic .bp_pic_in{width:64px;height:64px;margin:0;border-radius:16px;background:var(--bg4);}
.bp_pic img{width:40px;height:40px;margin:12px;border-radius:8px;}
.bp_txt span{display:block;height:22px;overflow:hidden;font-weight:bold;}
.bp_txt p{color:var(--clP);font-size:80%;height:68px;overflow:hidden;}
#sponsor-ads-note{font-size:14px;position:absolute;margin-top:-40px;}

#searchingBox {display:flex;justify-content:center;max-width:340px;margin:20px auto;border:1px solid var(--clBorder);padding-left:30px;height:60px;border-radius:30px;background:var(--bg2);}
#searchingBox input {font-size:20px;width:280px;color:var(--cl1);background:var(--bg2);border: none;}
#searchingBox input:focus{outline:none;color:var(--clBody);}

.chartjs-tooltip .chartjs-tooltip-key {
    display: none !important; /* Hide the colored square */
}

.leaderboard{padding:5px 10px 10px 10px;margin:5px auto;border:1px solid var(--clBorder);max-width:600px;background:var(--bg2);border-radius:16px;font-size:18px;}
.leaderboard h1{font-size:18px;font-weight:normal;margin-bottom:40px;}
.leaderboard h2{text-align:center;padding:0 10px;}
.leaderboard h3{color:var(--cl3);text-align:center;font-size:15px;font-weight:normal;margin:2px 0 10px 0;}
.leaderboard .period{margin-bottom:20px;font-size:14px;text-transform:uppercase}
.leaderboard .period a{color:var(--cl2);font-weight:bold;border:1px solid var(--cl2);display:inline-block;width:70px;height:24px;line-height:24px;border-radius:12px;}
.leaderboard .period a:hover{color:var(--bg2);background:var(--cl2);}
.leaderboard .period a.selected{color:var(--bg2);background:var(--cl2);}
.leaderboard .line{display:flex;flex-wrap:nowrap;align-content:center;flex-direction:row;align-items:center;border-top:1px solid var(--clBorder);padding:2px 0;margin:2px 0;}
.leaderboard .line:first-of-type{border:none;color:var(--cl3);text-transform:uppercase;font-size:15px}
.leaderboard .line:hover{background:var(--bg2);}
.leaderboard .line div{vertical-align:middle;height:44px;line-height:44px;}
.leaderboard .line div img{border-radius:50%;width:36px;height:36px;margin:4px;}
.leaderboard .line div img:hover{width:40px;height:40px;margin:2px;}
.leaderboard .line .result{color:var(--cl3);width:60px;text-align:right;padding:0 20px 0 10px;font-weight:500}
.l_name{flex:1;padding:0 10px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l_name a{color:var(--cl1);font-weight:700}
.l_name a:hover{color:var(--clLink);}
.l_note{color:var(--cl4);font-size:14px;margin:0 auto;max-width:600px;padding:0 10px}

.gd-label text{font-size:9px;fill:var(--cl4);}
.task{padding:15px;margin:20px 20px;background-color:var(--bg2);display:flex;justify-content:space-between;}
.task-action{display:flex;flex-direction:column;margin-left:20px;max-width:160px;}
.task-action a{width:120px;margin:5px 0;}

.badge-tabs{display:flex;justify-content:center;background-color:var(--bg2);margin:20px;padding:10px 20px;border-radius:16px;}
.badge-title{display:inline-block;font-weight:500;margin:4px 0;padding:2px 10px 2px 0}
.badge-tab{display:inline-block;margin:4px 2px;padding:2px 12px;background-color:var(--bg3);border-radius:12px;cursor:pointer;}
.badge-tab:hover{color:#fff;background-color:var(--clGreen);}
.active-tab{color:#fff;background-color:var(--clGreenHover);}
.badge-container{display:flex;width:300px;justify-content:center;padding:10px 0;flex-direction:column;align-items:center;}
.badge {margin:0 10px;}
.embed-code {cursor:pointer;margin-top:20px;width:180px;display:block;text-align:center;padding:6px 0;border-radius:8px;background:#000;border:none;color:#fff;}
.embed-code:hover{background:#222;color:#fff;}
.embed-message{margin-top:10px;color:green;font-size:14px;}

.hidden {
    display: none;
}

.tabs{margin:0 20px 30px 20px;padding:0;border-bottom: 1px solid var(--clBorder);display:flex;justify-content:space-around;}
.tabs a{padding:10px;margin:0;color:var(--clGreen);font-weight:bold;font-size:110%;}
.tabs a:hover{background:var(--bg4);}
.tabs a.selected{outline:none;border-bottom:5px solid var(--clGreen);}
.tabs a span{font-size:90%;display:inline-block;margin-left:10px;color:var(--clBody);}
.tab2, .tab3, .tab4{display:none;}


.progress {
  background: rgba(0, 200, 0, 0.2);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 40px;
  width: 400px;
  margin:10px;
}

.progress-value {
  animation: load 2s normal forwards;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: var(--clGreen);
  height: 30px;
  width: 0;
  text-align: right;
  line-height: 30px;
}


#shareModal, #shareModalBL {
  display:none;
  position: fixed;
  left: 50%;
  margin-left:-220px;
  top: 250px;
  padding:20px;
  background-color: #fff;
  color: #000;
  border-radius: 12px;
  overflow: hidden;
  width: 440px;
  height: 360px;
  box-shadow: 0 0 20px #222;
  min-width: 2in;
  min-height: 300px;
  opacity: 0;
}

#shareModalBar {
  display: flex;
  justify-content:space-between;
  align-items: center;
  height: 30px;
  position: relative;
  overflow: hidden;
  color: #000;
  margin-bottom:10px;
}

#shareModalBar a.btnColor {width:22px;height:22px;margin-right:6px;border-radius:6px;}


@media (max-width:1000px){
    header{width:94%;padding:10px 3%;}
    #sponsor-ads{border-left:none;border-right:none;}
    #madeby{display:none;}
}
@media (max-width:900px){
    .topdom{flex-wrap:wrap;justify-content:center}
    .rightdom{margin-left:0}
    .card{margin-bottom:30px;}
    .not-mobile{display:none}
}
@media (max-width:680px){
    .leaderboard{width:90%;}
    .rightdom-inside{justify-content:center}
    .rightdom-inside h1{margin-bottom:20px;}
    .progress {width:320px;}
}
@media (max-width:580px){
    .show-large{display:none;}
}
@media (max-width:500px){
    body{font-size:14px}
    .progress {width:280px;}
}
@media (max-width:480px){
    .leaderboard{font-size:16px;}
    .l_name{width:150px;}
    .task{flex-direction:column;}
    .task-action{margin:20px auto 0 auto;}
}
@media (max-width:400px){
    header{width:94%;padding:5px 3%;}
    #navright .menuBtn{margin-left:4px;padding:8px 6px 10px 6px;}
    #navright #prof{margin:0 6px 0 6px;}
    #btnSettings,#btnNotifs{margin:0 8px 0 14px;color:var(--cl2);}
    #page{margin-top:80px;}
    #searchingBox{width:80%;padding-left:12%;}
    .progress {width:200px;}
    footer{padding:0 10px;}
}