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;
}

@font-face {
  font-family: 'InterVariable';
  src: url("/assets/fonts/InterVariable.ttf") format('truetype');
  font-weight: 300 1000;
  font-style: normal;
  font-display: swap;
}

[data-theme=light] {
  --cl1:#000;
  --cl2:#222;
  --cl3:#555;
  --cl4:#888;
  --cl5:#000;
  --cl6:#aaa;
  --clP:#777;
  --clBorder:#ccc;
  --clBorder2:#eaeaea;
  --clBorder3:#ccc;
  --clBorder4:#ddd;
  --clLink:blue;
  --bg1:/*#fcdca5*/#fff;
  --bg2:#fff;
  --bg3:#ddd;
  --bg4:#eee;
  --bg5:#fafafa;
  --bgRGB:rgb(246,245,244);
  --grad1:rgba(255,249,34);
  --grad2:rgba(255,0,128);
}
[data-theme=dark] {
  --cl1:#fff;
  --cl2:#ddd;
  --cl3:#c0c0c0;
  --cl4:#777;
  --cl5:#ccc;
  --cl6:#555;
  --clP:#909090;
  --clBorder:#3a3a3a;
  --clBorder2:#333;
  --clBorder3:#4a4a4a;
  --clBorder4:#404040;
  --clLink:#efffaa;
  --bg1:#222;
  --bg2:#333;
  --bg3:#111;
  --bg4:#222;
  --bg5:#222;
  --bgRGB:rgb(12,11,10);
  --grad1:rgba(120,120,120);
  --grad2:rgba(100,100,100);
}

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

a{color:var(--cl3);text-decoration:none;}
a:hover{color:var(--cl1);}
    
body{
	/*font-family:'Segoe UI','Roboto',arial,sans-serif;*/
	font-family:'InterVariable',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',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(--cl5);
	background-color:var(--bg5);
}

h2{margin:0;padding:6px 8px;font-size:120%;text-transform:uppercase;color:var(--cl5);padding:10px 0;margin:0;letter-spacing:0.12em;}

header{
    position:fixed;
    top:0;
    width:100%;
    background:var(--bg2);
	padding:5px 10px;
	font-size:26px;
    height:60px;
    border-bottom:1px solid var(--clBorder);
    z-index:2;
}

#navright{display:flex;align-items:center;float:right;margin-right:30px;font-size:80%}

#navlogo{float:left;height:60px;width:60px;margin:0;}
#prof img{border-radius:50%;margin:6px;}
#togbtn{float:left;}
#togbtn a{display:block;color:#fff;background:#000;width:48px;height:48px;line-height:48px;border-radius:16px;padding:10px;}

.navcom{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;font-size:20px;}
.navcom a{display:flex;align-items:center;height:50px;padding:0px 5%;border-bottom:1px solid var(--clBorder3);}

#searchingBox{position:absolute;padding:0;margin:20px auto;top:0;left:0;right:0;max-width:400px;background-color:var(--bg2);border-radius:30px;}
#searchingBox input{font-size:20px;width:70%;height:40px;border:none;background-color:var(--bg2);color:var(--cl2);}
#searchingBox input:focus{outline:none;color:var(--cl2);}

#logo{
    display:block;
    margin:0 auto;
    /*background:url(/assets/ramen_tools_logo2_nobg.png) no-repeat top left;*/
    background:url(/assets/ramen_tools_logo.jpg) no-repeat top left;
    background-size:contain;
    width:60px;
    max-width:100%;
    height:60px;
    color:transparent !important;
    vertical-align:middle;
    border-radius:50%;
}

#page{
    min-height: calc(100vh - 71px);
	max-width:2000px;
	text-align:left;
	margin:70px auto 0 auto;
	padding:0;
}

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

.tippy-tooltip.x-theme{color:#26323d;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:16px;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}

.bio{position:fixed;float:left;width:30%;}
.bio h1{font-size:28px;color:var(--cl1);}
.dashboard{float:right;width:70%;margin:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;}
.group{border-radius:16px;margin:20px 20px 10px 20px;}
.group:hover{background:var(--bgRGB);}
.gmenu{width:24px;height:24px;color:var(--cl4);font-size:16px;border-radius:50%;line-height:32px;text-align:center;margin:4px 0 0 0;padding:3px;cursor:pointer}
.gmenu:hover{color:var(--cl1);background:var(--bg3);}
.glabel{color:var(--cl4);margin:5px 0 5px 10px;padding:0 10px 2px 10px;font-size:20px;text-transform:uppercase;letter-spacing:0.5px;height:26px;overflow:hidden;float:left;
    border-bottom: 2px solid transparent;
    width:80%;
    border-image: linear-gradient(0.25turn, var(--grad1), var(--grad2), var(--bg5));
    /*border-image: linear-gradient(0.25turn, var(--clBorder), var(--bg5));*/
    border-image-slice: 1;
}
.ginside{clear:both;padding:0px 10px;display:flex;flex-direction:column;/*height:90%;*/min-height:70px;}
.clblue{color:blue;}
.clgreen{color:green;}
.clred{color:red;}
.tile,.tile2{display:flex;margin:8px 12px 2px 12px;padding:5px 12px 5px 5px;color:var(--cl5);background:var(--bg2);height:24px;border-radius:8px;cursor:pointer;user-select: none;}

.userbox{clear:both;display:block;width:96%;height:50px;background:var(--bg5);margin:5px 0;padding:5px 2%}
.userbox img{display:block;float:left;width:48px;height:48px;border-radius:50%;margin-right:20px}
.userbox div{float:left;text-align:left}
.userbox .userbox_name{color:var(--cl5);font-weight:600}
.userbox .userbox_handle{color:var(--cl4)}

/*.box{display:block;float:left;width:18%;margin:10px 2% 30px 2%;padding:20px 1.5%;background:var(--bg2);height:64px;}*/
.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);
}
.box_pic{text-align:left;width:30px;}
.box_pic img{width:20px;height:20px;margin:2px;border-radius:5px;}
.box_txt{text-wrap:nowrap;}
.box_txt span{display:block;line-height:24px;font-weight:500;}
.pane .box_txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pane .userbox div p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px;}
.box_txt p{color:var(--clP);font-size:80%;height:50px;overflow:hidden}
.box_info{position:absolute;margin-top:12px;font-size:10px;color:var(--clP);}

#cmenu{display:block;padding:30px 30px 60px 30px;margin:0 auto;font-size:20px;font-weight:bold;text-align:left;top:0;left:0;right:0;max-width:440px;}
#cmenu_profile{width:100%;font-weight:normal;}
.cselected{border-bottom: 3px solid #555;}

#submitBtn{text-align:center;margin:20px 0;}
#submitBtn a{padding:5px 18px 7px 18px;font-size:18px;border-radius:16px;color:#eee;background:#333;}
#submitBtn a:hover{background:#000;}

.blackBtn{display:flex;align-items:center;color:#fff;background:#000;padding:4px 12px 6px 12px;font-size:16px;border-radius:8px;border:1px solid #000;}
.blackSmallBtn{color:#fff;background:#000;padding:2px 12px 5px 12px;font-size:14px;border-radius:8px;}
.blackBtn:hover, .blackSmallBtn:hover{color:#fff;background:#222;}
.blankBtn{color:var(--cl5);background:var(--bg1);padding:4px 12px 6px 12px;font-size:16px;border-radius:8px;border:1px solid var(--cl5);}
.blankBtn:hover{color:var(--cl2);border:1px solid var(--cl2);}
.tealBtn{display:inline-flex;align-items:center;color:#fff;background:#0097BD;padding:4px 12px 6px 12px;font-size:16px;border-radius:8px;border:1px solid #0097BD;}
.tealSmallBtn{display:inline-flex;align-items:center;color:#fff;background:#0097BD;padding:1px 10px 2px 10px;font-size:14px;border-radius:8px;}
.tealBtn:hover, .tealSmallBtn:hover{color:#fff;background:#0088AA;}
.goldenBtn{background:#d4af37;}
.goldenBtn:hover{background:#c49f27;}
#navright .menuBtn{border:none;color:var(--cl1);background:transparent;margin-left:10px;padding:8px 12px 10px 12px;}
#navright .menuBtn:hover{background:var(--bg4);}

.claimed-section{display:flex;flex-wrap:wrap;margin:30px 20px}
.claimed{display:flex;max-width:320px;margin:20px;padding:10px;background:var(--bg2);border-radius:8px}
.claimed-og{display:flex;justify-content:center;align-items:center;border-radius:8px;width:100%;max-height:160px;aspect-ratio:2/1;object-fit:cover;margin-bottom:8px;background:var(--bg3);color:var(--cl6);font-weight:600;}

.complete-section{margin:30px;padding:15px 20px;max-width:1000px;color:var(--cl1);background:var(--bg2);border:1px solid var(--clBorder);border-radius:16px;}
.complete-section h3{font-size:20px;margin-bottom:15px;}
.complete-section p{margin:8px 0;display:flex;}
.complete-section p svg{margin-right:10px;}

#editGroupName,#editHighlight{display:none;}


.toggleBtn {cursor:pointer;display:inline-block;margin:30px 20px 10px 40px;}
.toggleBtn-switch {display:inline-block;background:#ccc;border-radius:16px;width:58px;height:32px;position:relative;vertical-align:middle;transition:background 0.25s;
	&:before,&:after {content:"";}
	&:before {display:block;background:linear-gradient(to bottom, #fff 0%,#eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,0.25);width:24px;height:24px;position:absolute;top:4px;left:4px;transition:left 0.25s;}
	.toggleBtn:hover &:before {background:linear-gradient(to bottom, #fff 0%,#fff 100%);box-shadow:0 0 0 1px rgba(0,0,0,0.5);}
	.toggleBtn-checkbox:checked + & {background: #56c080;
		&:before {left:30px;}
	}
}
.toggleBtn-checkbox {position:absolute;visibility:hidden;}
.toggleBtn-label {margin-left:5px;position:relative;top:2px;}
.highlight{padding:2px 10px;height:40px;font-size:15px;position:absolute;margin-top:-10px;margin-right:40px;align-items:center;overflow-y:auto;}


.editTags{text-align:left;}
.editTags label,.fo label{display:block;margin:15px 0 3px 4px;text-transform:uppercase;font-size:14px;}

.empty{display:flex;flex-wrap:wrap;flex-direction:row;columns:2;align-content:start;/*height:100%;*/min-height:70px;}
/*.hold {
  cursor: move; 
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.hold:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.hovered {
  border:2px dashed var(--cl1) !important;
}*/
.hide{display:none;}


.pane {
    position: fixed;
    top: 71px;
    /*top:0;*/
    right: -320px;
    padding: 15px;
    height: 100vh;
    width: 290px;
    color:var(--cl5);
    background:var(--bg2);
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: 0.5s all ease;
    z-index: 10;
}

.pane section.tab {
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
}

.open {
    right: 0%;
}

.tabs{margin:20px 0 10px 0;padding:0;border-bottom:1px solid var(--clBorder3);}
.tabs a{display:inline-block;width:24%;padding:12px 2%;margin:0;color:var(--cl5);}
.tabs a:hover{background:var(--bg4);}
.tabs a.selected{outline:none;border-bottom:4px solid var(--cl5);}
.tab2, .tab3, .tab4{display:none;}

.socials{display:flex;margin:20px 0 10px 0;}
.socials a{margin-right:8px;}
.socials svg{width:24px;height:24px;}
.socials svg .cls-1{fill:var(--cl2);}
.socials svg .cls-1,.socials svg .cls-2{fill-rule:evenodd;}
.socials svg .cls-2{fill:var(--bg1);}

.fo{text-align:left;}
.fo label{display:block;margin:10px 0 5px 0;}
.fo input,.fo textarea{font-size:16px;width:90%;padding:5px;color:var(--cl1);background:var(--bg5);border:1px solid var(--cl2);}
.fo select{width:45%;padding:5px;color:var(--cl1);background:var(--bg5);border:1px solid var(--cl2);}
.fo input[type=submit] {text-align:center;background-color:#0097BD;border-radius:8px;border:none;color:#fff;padding:8px;text-decoration:none;margin:10px auto;cursor: pointer;font-size:15px;max-width:160px;}
.fo input[type=submit]:hover{color:#fff;background:#0088AA;}
footer{clear:both;position:relative;/*margin-top:-48px;*/border-top:1px solid var(--clBorder);font-size:15px;background:var(--bg2);height:180px}
footer div{margin:10px 0;}
footer a, footer .dmode{color:var(--cl3);cursor:pointer;}
footer span{color:var(--cl5);}
footer a, footer span{display:block;float:left;margin:0 10px;}
footer .footer_main{width:32%;float:left;display:flex;flex-wrap:wrap;}
footer .footer_section{width:17%;float:left;margin:0;text-align:left;}
footer .footer_section div{margin:14px 0 7px 0;font-weight:600;text-transform:uppercase;}
footer .footer_section a{display:block;float:none;margin:7px 0;color:var(--cl3);}
footer .footer_section a:hover{color:var(--cl1);}

.bottom{clear:both;display:flex;align-items:center;padding:20px 40px 60px 40px;}

#egName{font-size:18px;width:150px;border:none;}

.tags{clear:both;display:flex;flex-wrap:wrap;}
.tags a{margin:5px 8px 5px 0;padding:0 12px 0 6px;color:var(--cl5);background:var(--bg2);font-size:14px;line-height:24px;height:24px;border:1px solid var(--clBorder);border-radius:12px;}
.tags a:hover{border:1px solid var(--cl2);}
.awards{margin-right:20px;margin-top:20px;}
.awards h2{font-size:12px;padding:0;margin-left:12px;color:var(--cl3);}
.awards div{display:flex;justify-content:center;color:var(--cl5);background:var(--bg1);border-radius:24px;height:48px;width:232px;margin-left:-6px;border:1px solid var(--clBorder);}
.awards div div{display:block;color:white;background:#000;width:40px;height:40px;line-height:48px;border-radius:50%;margin:4px 4px 4px 0;text-align:center;}
.awards div div:first-child{margin-left:4px;}
.awards div div.off{opacity:0.2;}
.moretags{clear:both;display:flex;align-items:center;}
.moretags h2{font-size:12px;padding:0;margin-right:12px;color:var(--cl3);}

.bio_pic{border-radius:50%;margin-bottom:12px;width:160px;}
.bio_handle{display:flex;align-items: center;}
.bio_action{display:flex;
    /*margin-top:20px*/
    flex-wrap: nowrap;
    position: fixed;
    bottom: 40px;
    padding: 12px;
    background: var(--bg2);
    border: 1px solid var(--clBorder);
    border-radius: 16px;
}
.bio_action .blackSmallBtn{padding: 5px 12px 8px 12px;}

@media (max-height:1000px){
    .bio{position:static;}
}
@media (max-width:1500px){
    .bio{position:static;}
}
@media (max-width:1200px){
    .toggleBtn {display:none;}
}
@media (max-width:1080px){
    #madeby{display:none;}
}
@media (max-width:900px){
    .not-mobile{display:none}
    .bio{width:100%;position:static;}
    #cmenu{text-align:center;padding-bottom:30px;border-bottom:1px solid var(--clBorder);}
    .bio_pic{width:100px;}
    .bio_handle{justify-content:center;}
    .socials{justify-content:center;}
    .tags{justify-content:center;}
    .bio_action{/*justify-content:center;*/left: 50%;transform: translateX(-50%);bottom: 30px;}
    
    .claimed-section{margin-top:0}
    
    .dashboard{width:90%;padding:50px 5%;}
    footer{height:320px;}
    footer .footer_main{width:32%;}
    footer .footer_section{width:34%;}
    /*footer .footer_section:nth-child(4){clear:both;margin-left:32%;}*/
}
@media (max-width:720px){
    .group{margin:0 5px 20px 20px}
}
@media (max-width:540px){
    .menuBtn{display:none;}
}
@media (max-width:500px){
    body{font-size:14px}
    .dashboard{width:100%;padding:50px 0;}
    .bottom{padding:30px 20px 20px 30px;}
    .tile{margin:8px 5px 2px 5px;}
    /*.box_txt span{font-size:15px;}*/
    .pane .userbox .userbox_name{overflow:hidden;text-wrap:nowrap;max-width:199px;}
    .glabel{margin:5px;padding:0 0 2px 0;}
    #egName{width:140px;}
    footer{height:460px;}
    footer div{margin:12px 0;}
    footer a,footer span{margin:0 8px;}
    footer .footer_main{width:100%;}
    footer .footer_section{margin-left:3%;width:47%;}
    footer .footer_section:nth-child(4){margin-left:3%;}
}