:root{
    --box-shadow: 0 1px 3px 0 rgba(0,0,0,.25);
	--card-shadow:rgba(228, 228, 234, 0.22) 0px 22px 25px 0px, rgba(228, 228, 234, 0.5) 0px 9px 23px 0px;
	--block-shadow:0 10px 76px 29px rgb(99 104 148 / 7%);
	--el-shadow:rgba(228, 228, 234, 0.22) 0px 0px 15px 0px, rgba(228, 228, 234, 0.4) 0px 9px 19px 0px;
	--transition:all 0.3s ease-in-out;
	--font:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Ubuntu,sans-serif;
	--sidebar: 380px;
	--hover:#f7f7f7;
	--active:#f0f0fc;
	--text:#41415a;
	--grey:#e7e7e7;
	--placeholder:#c1c1d6;
	--placeholder:#d2d2d2;
	--border:#eeeeee;
	--white:#fff;
	--green:#3affd5;
	--primary:#6beeff;
	--linkwhite: #03bfdc;
	--dark:#1a1a3b;
	--backdrop:rgba(255, 255, 255, 0.90);
	--chromeBtn: #1a73e8;
	--darkgrey:#d3d3d3;
	--red:#ff5252;
	--lightgrey:#eee;
	--dark-hover:rgba(0, 0, 0, 0.28);
	--dark-text: #27274b;
	--dark-gradient:linear-gradient(135deg, rgb(8, 13, 56), rgb(0, 0, 0));
	--webkit-dark-gradient:-webkit-linear-gradient(-45deg, rgb(8, 13, 56), rgb(0, 0, 0));
	--header-bg:#000027;
	--header-height: 70px;
	--tab-height:50px;
	--dark-active:#27274b;
	--subtitle:#bfbfdd;
	--subtitle-bg:#fafaff;
	--warning:#ff9a9a;
	--tag:#d5e6fa;
	--txthighlight:#5a72ff;
	--bghighlight:#e3e7fa;
	--fadedhighlighted:rgba(90, 114, 255, 0.34);
	--sub:#cdcdcd;
	--gradient1: linear-gradient(45deg, #00ffd8, #2db2ff);
	--gradient2: linear-gradient(165deg, #2dfff9, #2dc5ff, #9300ff);
	--gradientfull:linear-gradient(165deg, #2dfff9, #2dc5ff, #9300ff);
	--gradientlight:linear-gradient(165deg, #53fffa, #4dceff, #a2a0ff);
	--secondaryhighlighted:#7b8bef;
	--darkoverlay:#36365b;
	--htmlCodeAttribute:#5585c8;
	--htmlCodeValue: #45a4a5;
	--htmlCodeTag:#fff;
	
	--htmlCodeAttribute: #2e7c94;
    --htmlCodeValue: #20c2c4;
    --htmlCodeTag: #fff;
	--jsCode1: #ffffff;
    --jsCode2: #ffffff;
    --jsCode3: var(--htmlCodeValue);
	--jsCode4: #4abcff; 
    --jsCode5: #9393af;
    --jsCode6: var(--htmlCodeAttribute);
	--jsCode7: #8688ff;
}
@media (max-width:1200px) and (min-width:991px){
	:root{
		--sidebar: 300px;
		
	}
}
* {-webkit-tap-highlight-color: transparent !important;}
*::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0) !important; background-color: #fbfbfb !important;}
*::-webkit-scrollbar{ width: 10px !important; background-color: #fbfbfb !important;}
*::-webkit-scrollbar-thumb{ background-color: #dddddd !important; border-radius:15px !important;}
@media (max-width:991px){ *::-webkit-scrollbar{ width:0px !important; height:0px !important;} }
*:focus-visible{outline:0px !important;}
* {  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;letter-spacing: 0.018em;}
*:not(input):not(select):not(code):not(code *):not(textarea):not(contenteditable){ -webkit-touch-callout: none; -webkit-user-select: none;  -khtml-user-select: none; -moz-user-select: none;  -ms-user-select: none; user-select: none; }
html{ color:var(--text);font-family: var(--font);  }
body{ height: 100vh; width: 100vw; overflow: hidden; margin:0px;background-color:#000027;}
code{ display:block;padding: 20px; color:#000;  border-radius: 10px; word-break: break-all; cursor:text;position:relative; -webkit-user-select: text;  -moz-user-select: text; -ms-user-select: text;user-select: text; background-color:#e9ebec; border-radius: 4px;font-size:13px;}
code.click-to-copy, code.small{cursor:copy;-webkit-user-select:all;  -moz-user-select: all; -ms-user-select: all;user-select:all;}
code.inline{padding: 2px;}
code.small{display:inline-block !important;font-size:13px;line-height:20px;}
code.json{ color: var(--htmlCodeValue);overflow: auto;background-color: var(--dark);flex:none;} 
code.html-code {color:var(--htmlCodeAttribute);overflow: auto;background-color: var(--dark);flex:none;padding-right: 40px; width: calc(100% - 60px) !important; word-break: break-word;}
code.prompt-code {color:#FFF !important;overflow: auto;background-color: var(--dark);flex:none;padding-right: 40px; width: calc(100% - 60px) !important; word-break: break-word;font-style: italic !important;}
code.prompt-code *{color:#fff !important;font-weight:500 !important;font-style: italic !important;}
code.html-code:after, code.css-code:after, code.js-code:after, code.prompt-code:after{ position: absolute; right: 10px; top: 10px; font-size: 9px; background: #373778; padding: 5px; border-radius: 3px; color: #fff; font-weight: 600;}
code.html-code:after{content: "HTML";}
code.css-code:after{content: "CSS";}
code.js-code:after{content: "JS";}
code.prompt-code:after{content: "PROMPT";}
code.js-code {color:var(--jsCode1);overflow: auto;background-color: var(--dark);flex:none;}
code.js-code .js1{ color: var(--htmlCodeValue);}
code.js-code .js2{ color: var(--primary);}
code.js-code .js3{ color: #7e8ace;}
code.js-code .js4{ color: #bbc3f0;}
code.js-code .js5{ color: #6bb1fc;}
code.css-code {color:var(--jsCode1);overflow: auto;background-color: var(--dark);flex:none;}
code.json .json-punctuation {color: #ffffff;} 
code.json .json-string { color: var(--htmlCodeValue); }
h2, h3, h4, h5{   font-weight: 500}
h3 i{ margin-right:5px; margin-left:5px;}

.text-primary{ color:var(--primary);}
h3{font-size: 16px; color: var(--dark); padding: 20px;  margin-bottom: 0px; padding: 20px;  z-index: 1; display: flex; border-top-left-radius: 10px; border-top-right-radius: 10px; font-weight: 500; padding-left:30px; margin-top:0px;}
h3:empty{display:none;}
.disabled{ pointer-events:none; opacity:0.5; }
body[data-plan="free"] *[data-hl]:not([data-hl=""]):after{ content: "\f005";  font-family: "FontAwesome"; width: 25px;  height: 25px; background: var(--gold); color: var(--white); display: flex;  justify-content: center; align-items: center; position: absolute; right: 15px; border-radius: 50%;}
code.small:after{ display:none; }
code.small{ padding:0px 5px;border-radius:3px; }
a{ padding:0px 2px;text-decoration:none; color:var(--txthighlight); position:relative; display:inline-block;font-weight:500;word-break:break-all;white-space:pre;}
a:hover{text-decoration:underline;}
img.zoomable{cursor:zoom-in;transition:var(--transition);-webkit-transition:var(--transition);border-radius:20px;box-shadow:var(--el-shadow);}
img.zoomable:hover{transform:scale(1.02);}
.option-selector-backdrop[data-element-id="notionFont"] .option-selector-el{
	justify-content:center !important;
}
.option-selector-backdrop[data-element-id="notionFont"] .option-selector-img{ width:140px !important;}
.option-selector-backdrop[data-element-id="notionFont"] .option-selector-name{ display:none !important;}
.input[data-label="Page font"] .dropdown-select{   justify-content: center !important;}
.input[data-label="Page font"] .dropdown-select-img{     width: unset !important;  flex: none !important; height: 60px !important; max-width: unset !important;}
.input[data-label="Page font"] .dropdown-select-val{ display:none !important;}
@media (max-width:991px){
	:root{
		--header-height: 60px;
		--tab-height:50px;
	}
	::-webkit-scrollbar { width: 0px;  height:0px; background: transparent; }
	h2{ font-size:16px; }
	body[data-plan="free"] *[data-hl]:not([data-hl=""]):after{ right:30px; }
	.only-desktop{display:none !important;}
	code *{font-size:11px;}
}