/* DEFAULTS */
:root{
	--base-bg: #FFFFFF;
	--gray1: #FDFDFD;/* lightest shade (outputs)*/
	--gray1o: rgb(253, 253, 253, 0.9);/* gray1 with 0.9 opacity*/
	--gray2: #FAFAFA;/* the odd gray background (e.g. expander)*/
	--gray3: #CCCCCC;/* darker shade (input borders)*/
	--gray5: #EEEEEE;/* light shade (input borders)*/
	--blue1: #E8F0F4;/* new text */
	--blue2: #49C2F5;/* links hover */
	--blue3: #129FDA;/* input & links */
	--blue4: #788390;/* button bg hover */
	--blue5: #5F6975;/* dark - icon blue */
	--blue6: #8D9AA7;/* button active */
	--blue7: #41474F;/* very dark*/
	--error: #F7DFE3;/* pinkish colour*/
	--gradient-blue: #5F6975 linear-gradient(#5F6975 0%,#4B545F 100%);
	--gradient-gray: #F3F3F3 linear-gradient(#FFFFFF 0%,#FDFDFD 100%);
	--gradient-silverblue: #B7C2CA linear-gradient(.25turn, #E8F0F4 0%,#5F6975 100%);
	--icons_new: url("../images/icons/icons.png?v=3");
	--shadow-jesus: 0px 0px 50px 20px rgba(255, 255, 255, 0.8);
	--shadow-light: 0px 5px 10px -8px rgba(0, 0, 0, 0.3);
	--shadow-medium: 0px 5px 10px -8px rgba(0, 0, 0, 0.6);
	--shadow-default: 5px 5px 5px rgba(0,0,0,0.25);
	--tshadow-light: 0 1px 0 #FFF;
	--tshadow-medium: 0 1px 0 #555;
	--tshadow-dark: 0 1px 0 #000;
	--unicode: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{overflow-wrap:break-word;-webkit-overflow-scrolling:touch;scrollbar-width:thin;box-sizing:border-box;}
*:focus{outline:none;}
html{overflow-y:scroll;scrollbar-width:thin;scrollbar-color: var(--blue5) #E8E8E8;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;/*Prevent auto font scaling in landscape*/}
body{position:relative;z-index:0;margin:0;background:#E8E8E8 url('../images/backgrounds/body.gif') fixed 0 46px repeat-x;}
body,input,button,textarea,select{font-family:Quicksand,Segoe UI Semilight,arial;color:#333;font-size:16px;}
pre,.menu h4,.unicode{font-family:var(--unicode);}
a,.link{text-decoration:none;color:var(--blue3);transition:color 0.3s;cursor:pointer;}
@media(hover: hover){a:hover,.link:hover{color:var(--blue2);transition:color 0.3s;}}
a.active:not(.subsearch){color:var(--blue2);transition:color 0.3s;}
img{border:0;}
ul{list-style:none;margin:0;padding:0;}

/*preferred - units with no headings or p's (and better hidden elements support)*/
.default-gap-container{display:flex;gap:8px;flex-direction:column;}
/*units with headings and/or p's, where gap-container not possible*/
.default-margin-container > *:not(style):first-child:is(p,h1,h2,h3,h4,h5,h6){margin-top:0.5em;}
.default-margin-container > *:not(p,h1,h2,h3,h4,h5,h6){margin-bottom:8px;}
.default-margin-container > *:last-child:not(p){margin-bottom:0;}
.default-margin-container > *:last-child:is(p){margin-bottom:0.5em;}
.article{margin-bottom:8px;padding:8px;border-radius:3px;background:var(--base-bg);box-shadow:var(--shadow-medium);}
.textblock p{line-height:1.5em;}
.center{text-align:center;}
.error{padding:8px;background:var(--error);border-radius:3px;}
.alert{border-radius:3px;background:var(--blue1);padding:8px;font-size:12px;text-align:center;}
	.alert img{max-height:10px;}
.noselect{user-select:none;}
.smallscreen{display:none;}
.fancy-text{font-weight:bold;background:linear-gradient(to right,#FF67B2,#67A4FF);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbow_animation 10s ease-in-out infinite;background-size:400% 100%;}
@keyframes rainbow_animation{0%,100%{background-position:0 0;}50%{background-position:100% 0;}}

/* ADS */
.adcontainer div{text-align:center;margin:auto;max-width:100%;}
#stickybottom_topbutton .adcontainer{padding:4px;}
.ad_demo{background:orange;min-height:50px;width:100%;}

/* HORIZONTAL CAROUSELS */
.carousel{display:flex;gap:8px;overflow-y:auto;justify-content:safe center;overscroll-behavior:contain;mask-image:linear-gradient(to right,rgba(0,0,0,1) 95%,rgba(0,0,0,0));-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 95%,rgba(0,0,0,0));white-space:nowrap;}

/* DEFAULT INPUTS, BUTTONS, EDITABLE DIVS, EMPTY BUTTON ETC */
.outputline{position:relative;}
button,input:not([type="radio"]):not([type="checkbox"]),textarea,select,.dropdown .selector,.textout,.loadmore span{border-radius:3px;-webkit-appearance:none;margin:0;}
button,input[type=submit]{padding:8px 16px;border:1px solid var(--blue5);background:var(--gradient-blue);color:#FFF;transition:background-color 0.3s;}
button,.loadmore span{touch-action:manipulation;/*prevent zoom on double tap*/user-select:none;/*prevent selecting on long-press*/}
button.active,button.active:hover{background:var(--blue6);border:1px solid #8D9AA7;transition:background-color 0.3s;}
	@media (hover: hover) {button:hover{background:var(--blue4);border:1px solid var(--blue4);transition:background-color 0.3s;}}
		button i{display:block;width:21px;height:21px;background:var(--blue6);mask:var(--icons_new) -195px 0/auto 21px no-repeat;-webkit-mask:var(--icons_new) -195px 0/auto 21px no-repeat;transition:background 0.3s;}
		button.active i{background:var(--blue7);}
		@media (hover: hover) {button:hover i{background:var(--blue7);transition:background 0.3s;}}	
input[type=text],input[type=number],input[type=email],input[type=search],textarea,select,.dropdown .selector,.textout,.btn,.btn:hover{display:block;height:39px;width:100%;padding:8px;border:1px solid #CCC;background:var(--gray1);color:#000;resize:none;font-size:16px;}
textarea,.textout{height:auto;min-height:39px;}
input.borte{display:none;}

/*settings & options - messletters & zalgo */
.settings{display:flex;align-items:center;justify-content:center;gap:4px;}
	.settings li{flex-basis:60px;}
		.settings button{height:28px;width:100%;padding:0 3px;font-size:14px;white-space:nowrap;overflow:hidden;font-family:var(--unicode) !important;}
		.more-settings{position:relative;}
			.ms-opener{font-weight:bold;}
				.ms-container{display:none;flex-direction:column;gap:8px;position:absolute;z-index:2900;top:calc(100% + 4px);right:0;width:268px;padding:8px;border-radius:3px;box-shadow:var(--shadow-medium);background:var(--gradient-blue);white-space:nowrap;color:#fff;touch-action:manipulation;/*prevent zoom*/}
					.ms-container h5{font-size:0.8em;margin:0;padding:0;font-weight:normal;}
					.ms-container .settings{flex-wrap:wrap;justify-content:left;}
						.ms-container .settings li{max-width:60px;}
							.ms-container .settings button{border-color:var(--blue1);}

/*overwrite standard button settings for interact Buttons*/
.iButton{position:relative;display:flex;align-items:center;justify-content:center;width:37px;height:37px;padding:0;background:var(--gray1o);border:none;}
.outputline.copy .iButton{position:absolute;top:1px;right:1px;}
.iButton:hover,.iButton.active,.iButton.active:hover{background:var(--gray1);border:none;}

/*sticky & textin*/
.sticky-container{position:relative;}
	.sticky-input{position:-webkit-sticky;position:sticky;top:46px;z-index:3000;}
.textinContainer{position:relative;}
.textin{background:var(--blue3) !important;border:0 !important;padding-right:39px;color:#FFF !important;caret-color:#FFF;}
	.textin::placeholder{color:#FFF !important;opacity:1;}
.autoresize,.textout{white-space:pre-wrap;}
.autoresize{overflow-x:hidden;line-height:22px;}
.empty{display:none;position:absolute;top:0;right:0;width:39px;height:39px;font-size:0;}
	.empty:before,.empty:after{position:absolute;top:50%;left:50%;width:3px;height:22px;background:#FFF;transform:rotate(45deg) translate(-50%,-50%);transform-origin:top left;content:'';}
	.empty:after{transform:rotate(-45deg) translate(-50%,-50%);}
	.emptydark:before,.emptydark:after{background:var(--blue5);}
	.textout.zalgo{padding:20px 8px;}

/* COPY STUFF | iButtons (copyButton) configured with buttons */
.copy li{cursor:pointer;position:relative;}
	.copy li.copySelected{background:#FFF !important;border-color:#666 !important;}
.copyAppendage{position:absolute;z-index:20000;box-shadow:var(--shadow-jesus);color:#000;}
	.copyInfo,.copyButton{padding:5px 8px;}
	.copyInfo{border-radius:3px;background:var(--blue1);}

/* DEFAULT DROPDOWN */
.dropdown{position:relative;cursor:default;}
.dropdown, .dropdown *{outline:none;}
	.dropdown .selector{display:flex;align-items:center;}
		.dropdown .arrow{position:absolute;display:block;top:calc(50% - 2px);right:calc(8px + 11px);width:13px;height:13px;transform:rotate(45deg);transition:0.4s ease;}
			.dropdown .arrow:before, .dropdown .arrow:after{position:absolute;display:inline-block;width:12px;height:3px;content:"";background:var(--blue5);transition:0.4s ease;}
			.dropdown .arrow:after{top:-5px;left:5px;transform:rotate(90deg);}
		.dropdown.open .arrow {transform:rotate(45deg) translate(-5px, -5px);}
			.dropdown.open .arrow:before {transform:translate(10px, 0);}
			.dropdown.open .arrow:after {transform: rotate(90deg) translate(10px, 0);}
		.dropdown ul {display:none;position:absolute;z-index:1000;top:calc(100% + 8px);left:0;overflow:auto;overscroll-behavior:contain;width:100%;background:#FFF;border:1px solid #CCC;border-radius:3px;box-shadow: 0px 5px 10px -8px rgba(0, 0, 0, 0.3);}
			.dropdown li {display:flex;height:39px;padding-left:8px;align-items:center;border-bottom: 1px solid #EEE;color:#666;}
			.dropdown li:last-child{border-bottom:0;}
			.dropdown li.selected{background:#F6F6F6;color:#000;}
			@media (hover: hover) {.dropdown li:hover{background:#F6F6F6;color:#000;}}
				.dropdown .option{display:block;color:inherit;cursor:inherit;}
					.dropdown .icon{display:inline-block;min-width:30px;}

/* LOADER */
.loader{text-align:center;font-weight:bold;}
	.loader img{width:100%;max-width:50%;height:auto;margin:2.5% auto;animation:1s dance step-end infinite;}
	@keyframes dance{0%{transform:scaleX(1) translateY(-5%);}25%{transform:scaleX(1) translateY(5%);}50%{transform:scaleX(-1) translateY(-5%);}75%{transform:scaleX(-1) translateY(5%);}}

/* CONTAINER */
#container{position:relative;margin:0 auto;padding-top:54px;}

/* HEADER */
#header{display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;z-index:5000;height:46px;width:100%;padding-left:11px;min-width:150px;background:var(--gradient-blue);color:#FFF;box-shadow:var(--shadow-medium);}
	#hShare a{display:block;float:left;width:20px;height:20px;margin-right:4px;background:url('../images/icons/social.png') 0 0/auto 40px  no-repeat;}
		#hShare .IG{background-position:-20px 0;}#hShare .TW{background-position:-40px 0;}#hShare .YT{background-position:-60px 0;}
			#hShare a:hover{background-position-y:-20px;}
	#hLogo h1{margin:0;padding:0;}
			#hLogo h1 img{display:block;max-width:100%;max-height:30px;}
			#hLogo h1 img.special{max-height:46px;}
	#flyouts{display:flex;}
		#hSearchButton,#hLangButton,#hMenuButton{position:relative;width:46px;height:46px;cursor:pointer;}
			#hMenuButton{display:none;}
		#hSearchButton:after,#hLangButton:after,#hMenuButton:after{position:absolute;top:11px;left:11px;content:'';width:24px;height:24px;background:var(--icons_new) 0 0/auto 24px no-repeat;}
			#hSearchButton:after{background-position-x:-167px;}
			#hLangButton:after{background-position-x:-139px;}
			#hMenuButton:after{background-position-x:-194px;}

/* SEARCH */
.subsearch .ss2{display:flex;position:relative;align-items:center;}
		.subsearch .q{padding-right:calc(16px + 24px);}
		.subsearch .s{position:absolute;right:0;width:24px;height:24px;border:0;background:none;}
			.subsearch .s:after{position:absolute;top:0;left:0;content:'';width:24px;height:24px;background-color:var(--blue5);mask:var(--icons_new) -167px 0px/auto 24px no-repeat;-webkit-mask:var(--icons_new) -167px 0px/auto 24px no-repeat;}
.sresults{cursor:default;/*padding-top:8px;*/}
	.sresults div{padding:8px 8px 8px 0;color:#999;}
		.sresults ul li{position:relative;padding:8px 8px 8px calc(8px + 18px);}
			.sresults ul li:after{position:absolute;top:50%;left:6px;margin-top:-6px;width:12px;height:12px;content:'';background:#BEBEBE;mask:var(--icons_new) -82px 0/auto 12px no-repeat;-webkit-mask:var(--icons_new) -82px 0/auto 12px no-repeat;}
				.sresults ul.trending li:after{mask-position-x:-152px;-webkit-mask-position-x:-152px;}
		.sresults li.selected{background-color:#F6F6F6 !important;border-radius:3px;}

/* MAIN SEARCH & LANGUAGES*/
#mainSearch,#languages{display:none;z-index:4000;position:fixed;right:0;top:46px;overflow-y:auto;overscroll-behavior:contain;max-height:calc(100% - 46px);margin:0 0 10px 0;border-radius:0 0 0 4px;background:var(--base-bg);box-shadow:var(--shadow-medium);}
#mainSearch{overflow-y:visible;width:100%;padding:16px;}


/* SHARED SPECS LANGUAGES/MENU */
#languages li,.menu li{padding:0;}
	#languages li a,.menu li a{display:flex;height:39px;align-items:center;position:relative;overflow:hidden;padding-left:8px;border-bottom:1px solid #EEE;background:#FFF;color:#666;white-space:nowrap;}
	#languages li:last-of-type a,.menu li:last-of-type a{border-bottom:none;}
	@media(hover: hover){#languages li a:hover,.menu li a:hover{background:#F6F6F6;color:#000;border-bottom:1px solid #E2E2E2;transition:0.3s;}}
	#languages li a.active,.menu li a.active{background:#F6F6F6;color:#000;border-bottom:1px solid #E2E2E2;transition:0.3s;}
	@media(hover: hover){#languages li:last-of-type a:hover,.menu li:last-of-type a:hover{border-bottom:none;}}
	#languages li:last-of-type a.active,.menu li:last-of-type a.active{border-bottom:none;}
#languages li a{padding:8px 48px 8px 32px;}

/* MAIN (wrapper) */
#main{display:flex;gap:8px;margin:auto 8px;}

/* SIDEBAR */
#sidebarLeft{width:176px;}

/* MAIN MENU */
.menu{overflow:hidden;margin-bottom:8px;border-radius:3px;background:#FFF;box-shadow:var(--shadow-medium);}
.menu.sticky{position:-webkit-sticky;position:sticky;top:54px;}
	.menu h4{margin:0;padding:7px 8px 0;height:39px;background:var(--gradient-blue);cursor:default;font-family:var(--unicode);font-weight:normal;color:#FFF;font-size:16px;text-shadow:var(--tshadow-dark);}
		.menu h4 span{display:inline-block;width:12px;height:12px;vertical-align:middle;margin:0 8px 2px 0;background:var(--icons_new) 0 0/auto 12px  no-repeat;}
		.menu h4.mytext span{background-position:0 0;}.menu h4.textart span{background-position:-14px 0;}.menu h4.related span{background-position:-28px 0;}.menu h4.partners span{background-position:-41px 0;}.menu h4.ad span{background-position:-55px 0;}
		.menu ul{margin:0;}
		.menu .new::after{position:absolute;display:inline-block;right:10%;top:calc(50% - 10.5px);padding:2px 7px 3px;border-radius:3px;background:var(--blue1);color:#707070;text-shadow:var(--tshadow-light);content:"ɴᴇᴡ";font-size:12px;pointer-events:none;}

/* CONTENT */
#content{min-width:0;/*prevents using overflow:hidden, which affects sticky*/width:100%;/*prevents starting narrow content div on load*/}
	.linkmodule{border-bottom:1px solid var(--gray5);}
	.linkmodule:last-of-type{border:0;}

/* TICKER */
.ticker-container{display:flex;height:39px;gap:8px;align-items:center;overflow:hidden;}
	.ticker-container .icon{width:16px;height:16px;background-color:var(--blue5);mask:var(--icons_new) -74px 0px/auto 16px no-repeat;-webkit-mask:var(--icons_new) -74px 0px/auto 16px no-repeat;}
	.ticker-container .tickercontents{white-space:nowrap;}

/* FOOTER */
.footer ul{margin-bottom:8px !important;}
	.footer ul li{display:inline-block;padding:5px 10px;}

/* FEEDBACK FORM */
.feedback form{position:relative;background:#F0F0F0;padding:16px;border-radius:3px;}
	.feedback fieldset{display:flex;border:0;padding:0;}
		.feedback input[type=text]{margin-right:16px;}
		.thankMsg{position:absolute;width:100%;top:50%;margin-top:-8px;left:0;text-align:center;display:none;}

/* STICKY BOTTOM */
#stickybottom_topbutton{position:sticky;bottom:0;left:0;width:100%;text-align:center;background:rgba(0,0,0,0.05);pointer-events:none;}
#stickybottom_topbutton *:not(.adcontainer,.adcontainer > div){pointer-events:auto;}
/*#stickybottom_topbutton .adcontainer > div {pointer-events:none;}
#stickybottom_topbutton .adcontainer > div * {pointer-events:auto;}*/

	#topbutton{display:none;position:absolute;bottom:calc(100% + 4px);right:4px;}
	.toparrow,.toparrow:before, .toparrow:after{display:block;height:3px;background:#FFF;border-radius:1px;}
	.toparrow{position:relative;display:block;width:21px;margin:0 0 12px 0;padding:0;}
		.toparrow:before, .toparrow:after{position:absolute;top:calc(100% + 5px);left:1px;width:12px;content:"";transform:rotate(-45deg);}
		.toparrow:after{left:auto;right:1px;transform:rotate(45deg);}

/* FLEX DISPLAYS - EG EMOJI, CHARACTERS, ETC */
#output h3,#output h4{display:flex;}
	a.spermalink{display:inline-block;width:16px;height:16px;background:var(--blue5);margin-left:auto;align-self:center;
	mask:var(--icons_new) -56px 0px/auto 16px no-repeat;-webkit-mask:var(--icons_new) -56px 0px/auto 16px no-repeat;opacity:0.2;transition:0.4s ease;}
	@media (hover: hover){a.spermalink:hover{opacity:1;transition:0.4s ease;}}
ul.flex{display:flex;flex-flow:row wrap;gap:7px;}
	ul.flex li{display:flex;flex:1 1 44px;position:relative;align-items:center;justify-content:center;min-height:44px;max-width:100%;border:1px solid #C2C2C2;border-radius:3px;background:var(--gray1);}
		@media (hover: hover){ul.flex li:hover{background:#FFF;}}
		ul.flex pre{margin:4px;overflow:auto;min-width:1em;/*to display zero-width chars*/text-align:center;font-size:20px;}
			ul.exceptions_textart pre,.exceptions_textart pre,.exceptions_textart textarea/*admin*/{font-family:var(--unicode);font-size:16px;text-align:left !important;}
.intro_example{display:flex;gap:0.5em;}

/* Flex subcat collapsing*/
.collapse ul li:nth-child(n+120),.collapse ul.exceptions_textart li:nth-child(n+12) {display:none;}
.loadmore{display:none;}
	.loadmore span{padding:2px 5px;border:1px solid var(--gray3);}


@media (max-width:976px) {

	/*this will be updated with next flyout update (which currently sucks)*/
	body{background:var(--base-bg);}
	body.underlay{background:var(--base-bg);}
	html.underlay{overscroll-behavior-y:contain;min-height:100vh;/*min-height prevents iphone from showing url bar and screwing up scrollTop with 10px*/background:var(--base-bg);}
	#container{padding-top:46px;}
	.article{margin-bottom:4px;border-radius:8px;background:none;/*makes box shadow overlap on next block*/}
	.adcontainer{box-shadow:none;padding-bottom:0;}
	.bigscreen{display:none !important;}.smallscreen{display:block;}
	.carousel{-ms-overflow-style:none;scrollbar-width:none;}.carousel::-webkit-scrollbar {display:none;}

	/* HEADER, MAIN & MENUS */
	#hShare{display:none;}
	#hLogo h1 img{max-height:24px;}#hLogo h1 img.special{max-height:36px;}
	#hMenuButton{display:block;}
	#main{margin:0;}
		#mainSearch,#languages,#sidebarLeft{display:none;z-index:4000;position:relative;top:0;width:100%;border-radius:0;margin:0;box-shadow:none;overscroll-behavior:auto;}
			#languages li a,.menu li a{padding:16px;height:auto;}
		.menu{margin-bottom:0;border-radius:0;box-shadow:none;}
			.menu h4{border-radius:3px;margin:8px;opacity:0.92;}

	/* CONTENT */
	.sticky-input{top:46px;padding-bottom:8px;background:var(--base-bg);}
	ul.flex li pre{font-size:24px;}
		.exceptions_textart pre{font-size:18px !important;}	
	.collapse ul li:nth-child(n+25),.collapse ul.exceptions_textart li:nth-child(n+6) {display:none;}

	/* STICKYBOTTOM 💩 */
	#topbutton{bottom:calc(100% + 4px);right:4px;}
	#stickybottom_topbutton .adcontainer{max-height:58px;}
	@media (max-height:450px){#stickybottom_topbutton .adcontainer{display:none;}}

	/* FOOTER */ 
	.footer ul li{display:block;padding:0;}
		.footer ul li a{display:block;padding:16px;background:#FAFAFA;border-bottom:1px solid #EEE;}
		.footer ul li:last-of-type a{border:0;}
}