* { box-sizing: border-box; }

html { font-family: 'PT Sans', sans-serif; } /*scroll-behavior: smooth; */
body { -webkit-font-smoothing: antialiased; color: #333; background: #e9e9e9; overflow-y: scroll; text-align: center; overflow-x: hidden; }

body { --color-bee: #ffc800; }


body>header  {

    background: rgba(32,166,231,.8) linear-gradient(180deg,#20a8e9,rgba(30,158,220,.5)) repeat-x;
    background-color: rgba(32,166,231,.8);

    box-shadow: 0 3px 5px rgba(0,0,0,.05);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    height: 70px;
    width: 100%;
    max-width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;			/*	height: 50px;*/
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

body>header>div { display:none;max-width: 980px; height: 70px; position: relative; margin: 0 auto; /*background: url(/x/login.png) 50px 17px no-repeat;*/ 	/*height: 50px;*/  }
body>header>div .face { top: 8px; right: 50px; }
body>header>div .face img { border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; box-shadow: 0px 0px 6px rgba(0,0,0,0.5); }

body>header nav { width: 100%; max-width: 980px; max-width: 1180px;margin: 0 auto; text-align: left; }
body>header nav ul { line-height: 70px; margin: 0; padding: 0; max-width: 980px; max-width: 1180px;font-size: 18px; font-size: 16px; font-size: 14px; font-weight: bold; font-weight: normal; text-transform: uppercase; }
body>header nav li { vertical-align: top; }
body>header nav li.patreon { margin: 0; height: 70px; float: right; }
body>header nav li.patreon a { vertical-align: -11px; }
body>header nav ul li a { color: #fff; -webkit-transition: text-shadow 0.25s ease-out; padding: 0 10px; text-decoration: none; }
body>header nav ul li:hover > a { color: #fff; text-shadow: 0px 0px 15px #fff; text-shadow: 0px 0px 5px #fff; }
body>header nav ul li a.fade:hover { opacity: 0.3; text-shadow: none; }
body>header nav ul li { display: inline-block; }
body>header nav>ul>li:first-child { height: 70px; }
body>header nav ul ul { display: none; position: absolute; top: 50px; top: 70px; line-height: 20px; background: rgba(30,158,220,.5); background-color: rgba(32,166,231,.8); text-align: left; font-size: 16px; padding: 0 20px 15px 7px; white-space: nowrap; text-transform: none; }
body>header nav ul ul li { display: block; }
body>header nav ul li:hover ul { display: block; }
body>header nav ul.practice { top: 46px; /*background: none;*/ z-index: 200; padding: 0 7px 7px 7px; margin: 0 0 0 -12px; width: 102px; }
body>header nav ul.practice li { display: inline-block; margin: 0 2px; float: left; }
body>header nav ul.practice li a { padding: 0; }
body>header nav ul.forum { top: 49px; left: -10px; z-index: 200; max-width: 600px; background: linear-gradient(0deg, rgba(32,166,231,.9) 95%, transparent 100%); font-size: 14px; padding: 0 14px 14px 10px; }

body>header nav ul.forum li { overflow: hidden; text-overflow: ellipsis; }
body>header nav ul.forum li hr { margin: 10px 0; border-bottom: 1px solid #fff5; }

body>header nav ul.forum li.today { padding-left: 0px; }
body>header nav ul.forum li.today:before { content: "•"; opacity: 1; }
body>header nav ul.forum li.semi { padding-left: 0px; }
body>header nav ul.forum li.semi:before { content: "·"; opacity: 0.5; }
body>header nav ul.forum li.fade { opacity: 0.5; }
body>header nav ul.forum li.fade:hover { opacity: 1; }


.subforum { font-size: 14px; font-family: 'PT Sans Narrow'; padding: 4px 0 4px 4px; /*font-weight: bold;*/ }
.subforum.break-before { padding-top: 0px;}
.subforum span { background: rgba(32,166,231); background: #36afe9; padding: 0 6px 2px; border-radius: 4px; }
.subforum.break-before span { background: rgba(32,166,231); }
._subforum:before {
  content: "";
  height: 1px;
  width: 16px;
  background-color: #fff;
  position: absolute;
  bottom: 13px;
  left: 4px;
  /*transform: translate(-50%);*/
}
.subforum:after {
  content: "";
  height: 1px;
  width: 100%;
  background-color: #fff3;
  position: absolute;
  bottom: 13px;
  left: 0px;
  z-index: -1;
  /*transform: translate(-50%);*/
}

.fc { background: #fff; border-radius: 5px; color: #1caff6 !important; display: inline-block; min-width: 16px; height: 16px; padding: 0 2px; text-align: center; line-height: normal; vertical-align: 1px; font-size: 12px; }

body>header nav .logo { width: auto; font-weight: bold; float: left; transform: scale(0.8); font-size: 14px; text-transform: lowercase; text-align: left; margin: 4px 0; color: #fff; text-decoration: none; line-height: normal; padding: 0; float: none; text-shadow: none !important; /*color: #052e4a;*/ }
body>header nav .logo:hover { color: #fff; text-decoration: none; text-shadow: none !important; }
body>header nav .logo .duolingo { background: url(/x/icon-sprite5.svg) -159px 0px; margin: 0; }
body>header nav .logo .unofficial { background: #fff; color: #1CAFF6; left: 0; top: 32px; /*background: #052e4a;*/ }

		.dark iframe { background: #333; }

		.dark .unofficial { color: #333; }
		.dark hr { border-bottom: 1px solid #fff1; }
		.dark h2 { color: #999; }
		.dark .phrase { background: #555; border-color: #777; color: #fff; }
		.dark .phrase::after { border-right: 12px solid #555 !important; }
		.dark .phrase::before { border-right: 12px solid #777 !important; }
		.dark .phrase.dialogue:before { background: #555; border-right: none !important; border-bottom: 2px solid #777; border-left: 2px solid #777; }
		.dark .storyline.reply .phrase.dialogue { background: #555; }
		.dark .storyline.reply .phrase.dialogue:before { background: #555; }
		.dark .story-challenge { background: #444; color: #fff; }
		.dark .hints { border-bottom: 2px dotted #444; }
		.dark .selectable-word.cloud { background: #777; border-color: #333; } 
		.dark .tags small { background: #111; color: #999; }
		.dark .tags small:hover { background: #444; color: #fff; }
		.dark input.search { background: #222; border: 1px solid #555; color: #999; }
		.dark .tabbed { background: #444; border-top: 1px solid #555; }
		.dark .tabbed > section > div { background: #333; border-top: 1px solid #555; }
		.dark .tabbed > section > h1 > label { border-right: 1px solid #555; }
		.dark .tabbed > input + section > h1 > label { background: #444; color: #777; }
		.dark .tabbed > input:checked + section > h1 > label { background: #333; color: #fff; }
		.dark .inline-flex { background: #444; }
		.dark .guide hr { border-bottom: 2px solid #555; }
		.dark .guide .dialogue+hr { border-bottom: 2px dashed #555; }
		.dark .back { background: url(/x/icons-36-white.png) -143px center no-repeat; background-size: 776px; }

body>header nav .logo {
    background: url(/duome.eu.png) center center no-repeat;
    height: 70px;
    width: 130px;
    margin: 0;
    padding: 0;
    background-size: 100px;
    transform: scale(1);
    text-indent: -9999px;
    line-height: unset;
}
body>header nav .logo * { position: absolute; left: -9999px !important; }

.page .fa { color: #ccc !important; cursor: pointer; position: absolute; right: 20px; margin: 3px; text-decoration: none; outline: none; font-size: 16px; z-index:99;}
.page .fa:hover { background: transparent; color: #aaa !important; }

.navi { display: none; font-size: 18px; color: #fff !important; }

.break { break-before: column; }

.ga-green { padding: 1px; border: 5px solid #78c800; }
.ga-gold { padding: 1px; border: 5px solid #ff9600; }
.ga-plus { padding: 1px; border: 5px solid #2b70c9; }

	.patron { padding: 1px; border: 5px solid #aaa; }
   .ruby.patron { padding: 1px; border: 5px solid #e85b46; }
   .gold.patron { padding: 1px; border: 5px solid #fec701; }
 .silver.patron { padding: 1px; border: 5px solid #aaa; }
 .bronze.patron { padding: 1px; border: 5px solid #cf9c6d; }
 .former.patron { padding: 1px; border: 5px solid #aaa5 !important; }


 ul.patrons { column-count: 3; } 

.patron:after { 
  content: " "; position: absolute; z-index: 1;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border: 2px dotted #ccc; border-radius: 50%;
}

.gold.patron:after { 
  content: " "; position: absolute; z-index: 1;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border: 2px dotted #ccc; border-radius: 50%;
}

.ga-icon { border-radius: 50%; width: 48px; height: 48px; position: absolute; right: 40px; bottom: 40px; }
.ga-icon.gray, 
.ga-icon.silver { background: url(/x/patreon.bronze.64px.png) center center; background-size: 48px; filter: grayscale(100%); }
.ga-icon.bronze { background: url(/x/patreon.bronze.64px.png) center center; background-size: 48px; }
.ga-icon.gold { background: url(/x/patreon.gold.64px.png) center center; background-size: 48px; }
.ga-icon.ruby { background: url(/x/patreon.64px.png) center center; background-size: 48px; }
.ga-icon.former { filter: grayscale(100%) opacity(0.5); }
.ga-icon.former:hover { filter: grayscale(100%) opacity(1); }

/*.ga-icon.gold { background: #fec701; }*/

._ga-plus.patron { padding: 5px; background: #2b70c9; border: 3px solid #e85b46; border-radius: 50%; }

.rtl { direction: rtl; text-align: justify !important; }
.rtl h4.tips small { left: 30px; right: unset; }
.rtl .toTop { left: 8px; right: unset; }
.rtl th,
.rtl pre { text-align: right; }

.disable-hover { pointer-events: none; }

.anywhere { line-break: anywhere; }

.night { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 20px; background: #fff; cursor: pointer; }
.night:before { content: ""; border: 2px solid #fff9; position: absolute; z-index: 1; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 50%; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; transition: all .25s ease-out; }
.night:after { content: ""; border: 2px dotted #fff5; position: absolute; z-index: 1; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: 50%; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; transition: all .25s ease-out; }

.night:hover:before { content: ""; border: 2px solid #fff; position: absolute; z-index: 1; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 50%;  }
.night:hover:after { content: ""; border: 2px dotted #fff; position: absolute; z-index: 1; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: 50%; transform: rotate(30deg); }

.moon { width: 20px; height: 20px; overflow: hidden; vertical-align: middle; border: 2px solid #20a8e9; margin: 0 14px; }
.moon:before { content: none !important; }
.moon:after { content: none !important; }

#moon {}
#moon-shadow { top: -30px; right: -30px; }
/*.moon #moon-shadow { width: 20px; height: 20px; background: #20a8e9; position: absolute; top: -6px; right: -6px; transition: all 0.25s ease-out; border-radius: 50%; }*/
/* top: -3px; right: -3px; border-radius: 100% 90%; transform: scale(0.8); */
.moon #moon-shadow { width: 20px; height: 20px; background: #20a8e9; position: absolute; top: -3px; right: -3px; border-radius: 100% 90%; transform: scale(0.8); transition: all 0.25s ease-out; }
/*.moon:hover #moon-shadow { border-radius: 50% 100%; transform: translate(4px,-4px); }*/
.moon:hover #moon-shadow { border-radius: 50% 100%; transform: translate(1px,-1px) scale(0.7); }

/*.moon:hover #moon-shadow { border-radius: 50% 100%; }*/ /* around center */

_body{ transition:all 1s; }
#_moon{ width:100px; height:100px; background:#eef; border-radius:50%; transition:all 1s; }
#bdy:target{ background:#F7F7F7; }
#bdy:target #main #moon{ background:#F6D602; border:5px solid #f5eb71; }
#bdy:target #main #moon .spots{ width:0px; height:0px;background:#F6D602; }
#bdy:target #main #cover{ background:#F7F7F7; transform:translate(85px,-185px); }
#_moonspot1{ width:15px; height:15px; background:#ccd; border-radius:50%; transform:translate(6px,40px); transition:all 1s; }
#_moonspot2{ width:1px; height:1px; background:#ccd; border-radius:50%; transform:translate(18px,42px); transition:all 1s; }
#cover{ width:100px; height:100px; background:#001; border-radius:50%; transform:translate(25px,-125px); transition:all 1s; }


/* #ffcb1f */
._night:hover { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 20px; background: #fff; }
._night:hover:before { content: ""; border: 2px solid #fff; position: absolute; z-index: 1; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 50%;}
._night:hover:after { content: ""; border: 2px dotted #fff; position: absolute; z-index: 1; top: -6px; right: -6px; bottom: -6px; left: -6px; border-radius: 50%; }

.snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001; background: rgba(0,0,0,0.1); display: none; }
.snow-container canvas { margin: 0; }
.snow { cursor: pointer; text-decoration: none; display: inline-block;
    font-size: 50px;
    line-height: 35px;
    vertical-align: middle;
    height: 17px;
/*    vertical-align: -23px;
    height: 52px;*/
}

.snapshot { position: absolute; top: 0px; left: 10px; }

.va-middle { vertical-align: middle; }

._ib { display: inline-block; }

._vx { position: absolute; margin-top: -20px;}

.pagination,
.scroller-status { display: none; position: absolute; z-index: 99; }
.loader-ellips { background: #fff url(/x/infinity.gif) center center no-repeat; height: 36px; width: 36px; width: 166px; }

.offset-x { /*position: absolute; left: -17px; top: 5px;*/ align-self: center;  }
.offset:target { margin-top: -200px; padding-bottom: 200px; display: inline-block; visibility: hidden; width: 0; }
._____offset:target+span:after { content: ' '; }

._offset::before { display: inline-block; content: " "; margin-top: -100px; width: 1px; height: 100px; visibility: hidden; pointer-events: none; outline: none; }
._offset { outline: none; }

a { color: #999; }
a:hover, .blue { color: #1caff6; }
a:hover, a:active { outline: 0; }

_hr+h4 { white-space: nowrap; }

h4.tips { background: #1caff6; color: #fff; border-radius: 8px; position: relative; line-height: 32px; padding: 0 5px; }
h4.tips a { scroll-margin-top: 80px; }
ul.hof a { scroll-margin-top: 200px; }
ul.columns { column-count: 3; }
ul.two.columns { column-count: 2; }
ul.two.columns li.c2 {  }

ul.columns li.break-before { break-before: column; }
ul.columns li.break-after { break-after: column; }

ul.plain.days { padding: 0 0 0 20px; }
ul.days h2 { margin: 0 0 0 5px; }

.hof li { cursor: default; position: relative; margin: 0 0 5px 0; /*line-height: 30px;*/  }
.hof h3 { color: #999; }
.hof h3.cEEE { color: #eee; }

.ib { display: inline-block; }

h4.tips small { position: absolute; right: 50px; color: rgba(255,255,255,0.3); }
h4.tips .work { position: absolute; right: 25px; top: 5px; opacity: 0.5; }
h4.tips .work:hover { opacity: 1; }
h4.tips .skill { margin: 0 0 4px 0; }
.toc { scroll-margin-top: 80px; }
.toTop {
    text-decoration: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: inline-block;
    opacity: 0.5;
    text-indent: -9999px;
    background: url(/x/icons-36-white.png) -180px center no-repeat; background-size: 776px;
}
.toTop:hover { opacity: 1;}

h4 .o { float: none; }
h4 .o.duo { position: relative; left: 0; }
h3 .o { float: none; }
h3 .o.duo { position: relative; left: 0; }
h1 .o { float: none; }
h1 .o.duo { position: relative; left: 0; bottom: 3px; }

.GoldenOwls { padding: 7px; }
.GoldenOwls .cell { width: 62px; }

.sessions { position: absolute; top: 20px; left: 130px; cursor: default; left: 56px; } 
.sessions span:first-child { display: inline-block; width: 28px; font-size: 10px; text-align: center; color: #ff9600; margin-right: 5px; /*opacity: 0.5;*/ }
.paddedSkills li { padding: 0 0 20px 0; }
.paddedSkills li:hover .sessions span:first-child { opacity: 1; }
.paddedSkills li:hover .crown { opacity: 1; }
.paddedSkills .crown { vertical-align: 0px; }
.paddedSkills .columns { column-count: 4; margin: 20px 0; list-style: none; padding: 0 0 0 23px; }
.paddedSkills .columns li { padding: 0; }

.hidden { display: none; }
.mismatch { float: right; }
.weird { display: none; }

.fine { font-size: 10px; margin: 20px 0 0 0; }
.fine+hr { margin-top: 0; }

   .cercle { background: #555; background: #999; display: inline-block; border-radius: 50%; color: #fff; width: 16px; height: 16px; line-height: 16px; vertical-align: 2px; font-size: 8px; text-align: center; margin: 0 0 0 2px; cursor: pointer; }
.red.cercle, 
.red .cercle { background: #a00; color: #fff; }
.cercle+b { color: #555; }
.red.cercle+b { color: #a00; }

.dark .cercle { background: #fff3; color: #fff; }
.dark .cercle+b { color: #bbb; }
.dark .cercle.red { background: #e85b46; color: #f88; color: #fff; } /* fff8 */
.dark .red { color: #e85b46; }

.page.tip { /*max-width: 370px;*/ }
.page.tip img { /*border: 1px solid #dadada;*/ border-radius: 10px; padding: 5px; }

.page.tip h3 small { font-weight: normal; font-size: 13px; }

.page.tip table { width: 100%; margin-bottom: 20px; }
.page.tip td,
.page.tip th { background: none !important; width: 50%; max-width: 50%; border: 1px solid #ddd; }
.page.tip tr { background: none !important; }

.page.tip div { display: flex; align-items: center; }
.page.tip div img { margin: 10px 20px 10px 0; max-width: 125px; }

.page.tip div.amplia { flex-flow: column; margin-bottom: 30px; max-width: 520px; }
.page.tip div.amplia img { margin: 0 0 10px 0; width: 100%; max-width: 520px; padding: 0; }
.page.tip div.amplia img+span { text-align: center; }


table.tiny { font-size: 9px; border: 2px solid #ddd; background: #fff; position: absolute; display: none; right: 0; border-radius: 5px;  }
table.tiny th, 
table.tiny td { text-align: center; }
	.dialogue div span:hover+table.tiny { display: block; right: unset; left: -130px; top: 0; }
 .reply .dialogue div span:hover+table.tiny { display: block; left: unset; right: -130px; }


.__page.practice { min-width: 1200px; }
.page.wider { width: 100%; padding: 40px !important; }
.page.narrow { width: 250px !important; min-width: 250px !important; padding: 25px 30px 30px 30px; }
.page.narrow ul { list-style-type: none; padding: 0 !important; }
.page.narrow li { line-height: 16px; margin: 0 0 7px 0; }
.page.x600 { max-width: 600px; }
.page.x800 { max-width: 800px; }

.scrollable800px { height: 800px; overflow-y: auto; overflow-x: hidden; }
.scrollable800px ul { margin: 0; }
.scrollable800px::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #eee;
}
.scrollable800px::-webkit-scrollbar-thumb {
    background: #ccc;
}

ul#recent li { line-height: 26px; }

_ul.cuentos div { display: inline-block; }
ul.cuentos div:first-child{ flex-basis: 55px; min-width: 55px; }
ul.cuentos li { display: flex; }
ul.cuentos li.hidden { display: none; }

ul.stories li { display: flex; margin: 0 0 8px 0; }
ul.stories li img,
.story-img { vertical-align: middle; width: 48px; height: 48px; margin: 0 8px 0 0; }
.story-img { background: #0001; border-radius: 8px; }
.dark .story-img { background: #fff1; }


ul.stories div { align-self: center; }
.cefr { left: 0 !important; }

.voice { width: 32px; height: 32px; background: url(x/voice32px.png); cursor: pointer; display: inline-block; vertical-align: middle; margin: 0 10px; align-self: center; }
.character { vertical-align: middle; width: 40px; display: inline-block; flex-basis: 40px; }
.story-title span { outline: none; }
.storyline { margin: 5px 0; display: flex; }
.translation { margin: 5px 0; display: flex; padding-left: 105px; color: #ccc; outline: none; }
.story-image { margin: 20px; }
._story-image img { width: 50%; }
.story-challenge { background: #f7f7f7; border-radius: 4px; margin: 5px 0; padding: 10px; margin-left: 90px; }
.story-challenge-50 { background: #f7f7f7; border-radius: 4px; margin: 5px 0; padding: 10px; margin-left: 50px; }
.selectable-word { color: #1caff6; border-bottom: 1px dashed #1caff6; cursor: pointer; }
.translatable-word { border-bottom: 1px dashed #ccc; cursor: pointer; margin: 0 5px; white-space: nowrap; }
.cCCC .selectable-word { border-bottom: 1px dashed #ccc; }
.cAF { color: #afafaf; }
.selectable-word.cloud { border: 1px solid #ccc; border-bottom: 3px solid #ccc; padding: 4px 8px; border-radius: 8px; display: inline-block; background: #fff; text-align: center; margin: 2px 0; color: #333; }
.storyline div { outline: none; }

.prose { padding: 10px 0; position: relative; align-self: center; max-width: 77%; }
.phrase {
    background-color: #fff; /* #fff rgb(var(--color-snow,#)) */
    border: 2px solid #e5e5e5; /* #e5e5e5 rgb(var(--color-swan,*/
    border-radius: 14px;
    max-width: 80%; max-width: 77%;
    padding: 10px 12px; position: relative; align-self: center;
    border-top-left-radius: 0;
    display: inline-block;
    margin-top: 0; }

.phrase::before {     border-bottom: 12px solid transparent;
    content: "";
    position: absolute; 
    top:-2px; 
    border-right: 12px solid #e5e5e5; /* rgb(var(--color-swan,*/
    border-top-left-radius: 50%;
    left: -14px; }

.phrase::after { border-right: 12px solid #fff;
    left: -9px;
    top: 0;
    border-bottom: 12px solid transparent;
    content: "";
    position: absolute;
}
.phrase.dialogue { border-radius: 14px; margin-left: 100px; display: flex; }
.phrase.dialogue::before { width: 10px; height: 10px; transform: rotate(45deg); border: none; border-bottom: 2px solid #e5e5e5; border-left: 2px solid #e5e5e5; top: 14px; left: -7px; background: #fff; border-radius: 0; }
.phrase.dialogue::after { content: none; }

.__guide > .dialogue:last-child { border-bottom: 2px solid #000; }

.storyline.reply .phrase.dialogue { margin-right: 100px; background: #f7f7f7; }
.storyline.reply .phrase.dialogue::before { transform: rotate(225deg); left: unset; right: -7px; background: #f7f7f7; }
.storyline.reply { justify-content: end; }

.caption { display: flex; justify-content: center; margin-top: 10px; }
.caption div { text-align: left; }

.guide-example { display: flex; align-items: center; margin: 20px 0; }
._guide-example:last-child { margin-bottom: 20px; }
.audio-sample { display: flex; align-items: center; margin: 20px 0;}

.sample-word { background: #1cb0f6; border-radius: 16px; width: 125px; height: 125px; position: relative; font-size: 25px; text-align: center; line-height: 118px; font-weight: bold; color: #fff; margin: 0 20px 0 0; border-bottom: 4px solid #1899d6; }
.___sample-word:after { border-color: #1899d6; border-width: 0 0 4px; bottom: -4px; content: ""; left: 0; right: 0; top: 0; }

.sample-letter { background: #1cb0f6; border-radius: 16px; width: 125px; height: 125px; position: relative; font-size: 45px; text-align: center; line-height: 110px; font-weight: bold; color: #fff; margin: 0 20px 0 0; }
.audio-sample .voice { background: #1cb0f6 url(x/sound.svg) center center no-repeat; margin: 0; position: absolute; right: 10px; bottom: 10px; border-radius: 16px; }

.guide { max-width: 800px; border: 1px dashed #ccc; padding: 20px; border-radius: 16px; margin: 0 auto; }
.x800 .guide { padding: 0; border: none; }

.guide .illustration { text-align: center; padding: 0px 0; display: flex; flex-direction: column; }
.guide .illustration.toRight { flex-direction: row-reverse; background: #fff; padding: 0; margin: 16px 0; border-radius: 16px; justify-content: space-between; } 
.guide .illustration .caption { align-items: center; margin: 10px 0; }
.guide .illustration.toRight .caption { margin: 0 0 0 20px; } 
.guide span.blue { border-bottom: 1px dashed #1caff6; cursor: pointer; }

.guide span.dotted { border-bottom: 1px dashed #afafaf; cursor: pointer; } 

.guide img { /*max-width: 288px;*/ width: 100%; border-radius: 16px; }
.guide img.toRight { height: 100px; width: 100px; margin: 20px; }

.guide hr  { /*#1caff6*/ border-bottom: 2px solid #e5e5e5; }
.guide hr.blue { /*#1caff6*/ border-bottom: 2px solid #84d8ff; margin: 20px -20px; }
.guide .dialogue+hr { border-bottom: 2px dashed #e5e5e5; width: 80%; margin: 20px auto; } 

.dialogue+.guide-tip { margin-top: 20px; }
.guide-tip { background: #DDF4FF; padding: 1px 20px; border-radius: 16px; }

.guide-table { border-radius: 16px; width: 100%; background: #fff; margin: 20px 0; } 
.guide-table th { border: 2px solid #84d8ff; background: #1cb0f64d; }
.guide-table td { border: 2px solid #84d8ff; } 

_table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
    
_table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.hints { border-bottom: 2px dotted #ccc;  }

.audioSample { 
    color: rgb(95, 95, 95);
    font-size: 45px;
    font-weight: bold;
    line-height: 52px;
    text-align: center;
    white-space: pre-wrap;
    min-width: 125px;
    min-height: 125px;
    padding: 20px;
    line-height: 80px;
    box-shadow: 0 1px 7px rgba(0,0,0,.21);
    border-radius: 10px; 
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 10px 20px 10px 0; 
}
.audioSample:hover {background: #f7f7f7; }
.playSample { background-image: url(/x/icon-sprite8.svg); background-position: -221px -125px; height: 18px; width: 21px; position: absolute; right: 8px; top: 8px; }

.lazy-hidden { opacity: 0; }
.lazy-loaded {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 1;
    border: 1px solid #dadada;
}

#raw { width: 600px; padding: 24px 32px; }
#raw li.hr {
    font-size: 11px;
    font-weight:  bold;
    margin: -29px 0 10px 0;
    width: auto;
    display: block;
    width: 70px;
    background: #CCC;
    padding: 2px 4px;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    margin-left: -8px;
}
#raw .flag { margin: 0 4px; }
#raw .flag.xs { margin: 0px; vertical-align: -6px; }

.dark #raw .dailyxp { color: #fff7; }
.dark #raw li+small { color: #fff3; }
.dark #raw { color: #999; }
.dark #raw h3 { color: #bbb; }
.dark #raw a { color: #1caff6; }

.label { background: #000; border-radius: 4px; height: 16px; line-height: 16px; text-align: center; display: inline-block; font-family: system-ui; font-weight: bold; font-size: 11px; color: #fff; padding: 0 6px; cursor: pointer; }

.badge.bronze { background: url('/x/badge_bronze_blank.svg') center center no-repeat; }
.badge.silver { background: url('/x/badge_silver_blank.svg') center center no-repeat; }
.badge.gold { background: url('/x/badge_gold_blank.svg') center center no-repeat; }
.badge.sapphire { background: url('/x/badge_sapphire_blank.svg') center center no-repeat; }
.badge.ruby { background: url('/x/badge_ruby_blank.svg') center center no-repeat; }
.badge.emerald { background: url('/x/badge_emerald_blank.svg') center center no-repeat; }
.badge.amethyst { background: url('/x/badge_amethyst_blank.svg') center center no-repeat; }
.badge.pearl { background: url('/x/badge_pearl_blank.svg') center center no-repeat; }
.badge.obsidian { background: url('/x/badge_obsidian_blank.svg') center center no-repeat; color: #0007; }
.badge.diamond { background: url('/x/badge_diamond_blank.svg') center center no-repeat; line-height: 37px; }
.badge.diamond span { color: hsla(180, 70%, 10%, 0.3); line-height: 36px; font-weight: bold; }
.badge { width: 40px; height: 40px; background-size: 32px !important; margin: 0 auto; line-height: 38px; font-weight: bold; color: #0003; display: inline-block; vertical-align: bottom; margin: 0 5px; }
.badge.xs { width: 15px; height: 15px; background-size: 12px !important; margin: 0 auto; display: inline-block; vertical-align: middle; }
li .badge { width: 20px; height: 20px; background-size: 16px !important; margin: 0 auto; display: inline-block; vertical-align: bottom; }
li .badge.s { width: 20px; height: 20px; background-size: 16px !important; margin: 0 auto; display: inline-block; vertical-align: middle; }
li .badge.m { width: 30px; height: 30px; background-size: 24px !important; margin: 0 auto; display: inline-block; vertical-align: middle; }
li .badge.l { width: 40px; height: 40px; background-size: 32px !important; margin: 0 auto; display: inline-block; vertical-align: middle; }


.patreon-red { background: #f96854 !important; }

#answer,
#prediction { width: 500px; padding: 24px 32px; }

#raw h3,
#answer h2,
#prediction h2 { margin-top: 0px; }

#raw li+small { color: #ccc; position: absolute; right: 32px; font-size: 10px; line-height: 24px; 	line-height: 14px; }
#raw ul { padding: 0; list-style: none; font-size: 15px; }
#raw li.dailyxp { font-size: 10px; text-align: right; }

.lexid { position: absolute; bottom: 2px; right: 0; font-size: 10px; }

.ava { min-width: 24px; min-height: 24px; } 
.avatar { border-radius: 50%; vertical-align: middle; }

.bar b { position: relative; }
.bar .all { /*display: none;*/ position: absolute; bottom: 25px; left: 15px; width: 260px; opacity:0; height: 7px; }
.bar .all.skl { width: 273px; }
.bar:hover .all { /*display: block;*/ opacity: 1; }

.xBar .all { position: absolute; opacity:0; -webkit-transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; transition: opacity .25s ease-out; background: transparent; border: none; margin: 0px; color: #999; text-align: center; line-height: 11px; bottom: -28px; width: 200px; left: -95px; right: 0px; pointer-events: none; }
.xBar:hover .all { opacity:1;}

.all { -webkit-transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; transition: opacity .25s ease-out; }
.all .hint { position: absolute; bottom: -15px; width: 280px; font-size: 11px; color: #ccc; }
.all .hint+.hint { bottom: -30px !important; }
.all .when { position: absolute; bottom: 5px; right: 23px; font-size: 11px; color: #ccc; }

div.sx { overflow-x:auto; }
.sx table { width: 100%; }
.sx th[align=left],
.sx td[align=left] { text-align: left; }
.sx th[align=center],
.sx td[align=center] { text-align: center; }

.xyz { position: absolute; top: -15px; right: 5px; color: #ccc; font-size: 10px; }

	.nxt { position: absolute; right: 0px; bottom: 11px; }
  .this .nxt { right: 40px; }

li.cut { margin-top: 20px !important; border-top: 1px solid #eee; border-top: 1px solid rgba(0,0,0,0.1); }

.v { margin: 0 0 0 20px; }
.v .page { padding: 30px; }
.v .page:nth-child(2),
.v .page:nth-child(3),
.v .page:nth-child(4) { margin: 20px 0 0 0 !important; }
.v .page:nth-child(2) .hof,
.v .page:nth-child(3) .hof,
.v .page:nth-child(4) .hof { padding: 0 0 0 30px; }
.v .page:nth-child(2) .ava,
.v .page:nth-child(3) .ava,
.v .page:nth-child(4) .ava { margin: 0 4px 0 -30px; }

/*******************************************************************************/

.back { display: inline-block; width: 28px; height: 28px; vertical-align: middle; display: inline-block; background: url(/x/icons-36-black.png) -143px center no-repeat; position: absolute; left: 20px; background-size: 776px;}
.back.relative { position: relative; left: 10px; }
.fwd { display: inline-block; width: 28px; height: 28px; vertical-align: middle; display: inline-block; background: url(/x/icons-36-black.png) -104px center no-repeat; background-size: 776px; }

.shownames { background: #1caff6; background: #0005; border-radius: 5px; padding: 2px 6px; color: #fff; cursor: pointer; margin: 0 12px 0 10px; position: sticky; top: 22px; top: 102px; font-size: 12px; height: 21px; float: right; z-index: 99; }
.shownames:hover { background: #0007; }

.path-section-delimiter { display: flex; align-items: center; width: 50%; margin: 0 auto; }
.path-section-delimiter span { margin: 40px 8px; font-size: 16px; color: #ccc; }
.dark .path-section-delimiter span { color: #fff3; }
.path-section-delimiter hr { flex-grow: 1; } 

.path-sections { list-style: none; padding: 0; margin: 0 0 400px 0; }
.path-sections h2 { font-size: 20px; }
.section-1 h2,
h2.section-1 { background: #00af85; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 11; }

.section-2 h2 { background: #ff64bf; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 12; }
.section-3 h2 { background: #ff9153; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 13; }
.section-4 h2 { background: #9a8fe8; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 14; }
.section-5 h2 { background: #600cc7; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 14; }
.section-6 h2 { background: #6f2c39; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 14; }
.section-7 h2 { background: #2e538a; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 14; }
.section-8 h2 { background: #092f77; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 14; }
.section-9 h2 { background: #ff6e35; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 14; }
.section-10 h2 { background: #0094ff; padding: 10px; border-radius: 10px; color: #fff; position: sticky; top: 10px; z-index: 14; }
.path-sections h2 { top: 90px; }

.section-1 .guidebook { background-color: #00af85 !important; }
.section-2 .guidebook { background-color: #ff64bf !important; }
.section-3 .guidebook { background-color: #ff9153 !important; }
.section-4 .guidebook { background-color: #9a8fe8 !important; }
.section-5 .guidebook { background-color: #600cc7 !important; }
.section-6 .guidebook { background-color: #6f2c39 !important; }
.section-7 .guidebook { background-color: #2e538a !important; }
.section-8 .guidebook { background-color: #092f77 !important; }
.section-9 .guidebook { background-color: #ff6e35 !important; }
.section-10 .guidebook { background-color: #0094ff !important; }


.guidebook { display: inline-block; width: 24px; height: 24px; border-radius: 5px; background: #777 url(/x/guidebook.svg) center center no-repeat; background-size: 12px; vertical-align: -7px; }
.guidebook:hover { background-size: 14px; }
.guidebook.blank { background-color: #ddd !important; }

.skillids { display: none; position: absolute; padding: 10px; margin: 0 0 0 4px; background: #eee; border-radius: 5px; z-index: 99; font-size: 13px; }
.skillids hr { margin: 4px 0; }

.teaching-objective { display: none; position: absolute; }
.dark .path-units b { color: #777; }
.dark .teaching-objective { background: #333 !important; }
.dark .skillids { background: #555; color: #999; }
.dark .skillids b { color: #bbb; }

.dark #words .traduccion { color: #fff5; }

.path-units { padding: 0 0 0 30px; }
.path-units ul li .teaching-objective { top: -23px; left: 20px; width: 100%; margin: 0 0 0 10px; background: #fff; font-weight: bold; padding: 0 0 0 2px; }
.path-units ul li:hover .teaching-objective { display: block; }
.path-units ul li:hover .skillids { display: block; }

.path-step { display: inline-block; width: 24px; height: 24px; margin: 4px; background: #aaa; border-radius: 50%; text-align: center; color: #fff !important; text-decoration: none; vertical-align: middle; }
.path-step:hover { background: #777;  }

.__path-step:hover+.teaching-objective { display: block; top: -5px; left: 18px; left: 14px; width: 400px; margin: 0 0 0 10px; color: #999; }

.path-step span { font-size: 12px; line-height: 24px; }

.path-step._practice { background: #aaa url(/x/check.svg) center center no-repeat; background-size: 20px; }

.path-step.story { background: #aaa url(/x/story.svg) center 7px no-repeat; background-size: 20px; width: 28px; height: 28px; margin: 0 4px; }
.path-step.story:hover { background-color: #777; }
.path-step.story.legendary { background: #ffc800 url(/x/story-gold.svg) center 7px no-repeat; background-size: 20px; }
.path-step.story.legendary:hover { background-color: #ffc800; }

.path-step.radio { background: #aaa url(/x/radio.svg) center 5px no-repeat; background-size: 14px; background-size: 18px; width: 24px; height: 24px; width: 28px; height: 28px; margin: 0 4px; }
.path-step.radio:hover { background-color: #777; }
.path-step.radio.legendary { background: #ffc800 url(/x/radio-gold.svg) center 5px no-repeat; background-size: 18px; }
.path-step.radio.legendary:hover { background-color: #ffc800; }

.path-step.legendary { background: #ffc800 url(/x/check.svg) center center no-repeat; background-size: 20px; }
.path-step.legendary span { display: none; }
.path-step.legendary._radio { background: #ffc800 url(/x/radio-gold.svg) center center no-repeat !important; background-size: 16px; }
.path-step.legendary.practice { background: #ffc800 url(/x/practice-gold.svg) center center no-repeat; background-size: 18px; }
			
.path-units ul { padding: 15px 0 25px 0; position: relative; margin: 0 0 0 -4px; }
.path-units ul li { position: unset; }
.path-units > li { padding-left: 10px; }
.path-units li li { display: inline-block; padding: 0; }

.path-sections .path-step .name { display: none; }
.path-sections.names .path-step { }
.path-sections.names .path-step.level { width: auto; padding: 0px 6px; border-radius: 5px; color: #fff !important; margin: 0 2px; 	margin: 1px 2px; }
.path-sections.names .path-step.practice { height: 24px; padding-left: 30px !important; background: #ddd url(/x/practice.svg) 6px 4px no-repeat; background-size: 20px; color: #999 !important; }
.path-sections.names .path-step.radio { height: 24px; padding-left: 30px !important; background: #aaa url(/x/radio.svg) 6px 4px no-repeat; background-size: 16px; }

.path-sections.names .path-step.radio.legendary { height: 24px; padding-left: 30px !important; background: #ffc800 url(/x/radio-gold.svg) 6px 4px no-repeat; background-size: 16px; color: #fff !important; }
.path-sections.names .path-step.practice.legendary { height: 24px; padding-left: 30px !important; background: #ffc800 url(/x/practice-gold.svg) 6px 4px no-repeat; background-size: 20px; color: #fff !important; }
.path-sections.names .path-step.story { height: 24px; padding-left: 30px !important; background: #aaa url(/x/story.svg) 6px 5px no-repeat; background-size: 20px; }
.path-sections.names .path-step.story:hover { background-color: #777; }
.path-sections.names .path-step.story.legendary { height: 24px; padding-left: 30px !important; background: #ffc800 url(/x/story-gold.svg) 6px 5px no-repeat; background-size: 20px; }
.path-sections.names .skillids { margin: 1px 0 0 2px; 			margin: 0px 0 0 2px; }
.path-sections.names .path-step .name { display: block;  }
.path-sections.names .path-step .path-sessions { display: none;  }
.path-sections.names .path-step.legendary { background: #ffc800;  }

.path-step.chest { margin: 0 4px; border-radius: 0px; background: url(/x/chest.svg) center center no-repeat; background-size: 32px; width: 32px; height: 32px; }
.path-step.review { margin: 0 4px; border-radius: 0px; background: url(/x/unit-review.svg) center center no-repeat; background-size: 32px; width: 32px; height: 32px; }
.path-step.review.legendary { margin: 0 4px; border-radius: 0px; background: url(/x/unit-review-gold.svg) center center no-repeat !important; background-size: 32px !important; width: 32px; height: 32px; }


/*******************************************************************************/

.tabbed { float: left; width: 100%; 	/*position: absolute; top: 0; left: 0;*/ border-radius: 10px; background: #eee; min-height: 100px; }
.tabbed > input { display: none; }
.tabbed > input:not(:checked) + section > div { display: none; }
.tabbed > section > h1 { float: left; }
.tabbed > section > h1 { box-sizing: border-box; margin: 0; padding: 0; overflow: hidden; font-size: 1em; }

.tabbed > section > h1 > label { cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; height: 28px; }
.tabbed > section > h1 > label { display: block; padding: 0.25em 0.75em; border-right: 1px solid #ddd; border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow: 0 0 0.5em rgba(0,0,0,0.0625); background: #fff; padding: 4px 12px; padding: 4px 16px;}

#tabTree.blue:not(:checked) + section > h1 > label { border-top: 2px solid #1caff655; background: hsl(200deg 92% 94%); padding-top: 2px; color: #1caff699; }

.tabbed > section > div { box-sizing: border-box; padding: 0.5em 0.75em; border-radius: 4px; box-shadow: 0 0 0.5em rgba(0,0,0,0.0625); background: #fff; 	border-radius: 0; box-shadow: 0px -2px 1px rgba(0,0,0,0.02); min-height: 100px; padding: 10px 40px; }
.tabbed > section > div { float: right; width: 100%; margin: 27px 0 0 -100%; position: relative; z-index: 1; border-top: 1px solid #ddd; }

.tabbed > input:first-child + section > h1 { padding-left: 27px; padding: 0; }
.tabbed > input:first-child + section > h1 > label { /*border-left: 1px solid #ddd;*/ /*border-top-left-radius: 10px;*/ /*padding-left: 20px;*/ }

.tabbed > input:checked + section > h1 { position: relative; z-index: 2;  }

.tabbed > input + section > h1 > label { background: #f7f7f7; color: #999; }
.tabbed > input:checked + section > h1 > label { background: #fff; color: #000; }

.tabbed > input + section > h1 > label[for=tabPath] { width: 63px; }

.tabbed > input:not(:checked) + section > h1 > label[for=tabPath] { background: #e85b46; color: #fff; width: 63px; }
label[for=tabPath]+small { color:#e85b46; position: absolute; font-size: 11px; z-index: 99; margin: -1px 0 0 -10px; width: 83px; padding-top: 2px; text-align: center; border-top: 1px solid #e85b46; }
.tabbed > input:checked + section > h1> label[for=tabPath]+small { display: none; }

#tabTips+section img { max-width: 100%; }

#dbTips #notify { display: none; }

.row { text-align: center; display: flex; justify-content: center; }
.big.skill { transform: scale(2); }

.skill-cell { padding: 30px 10px 10px 10px; padding: 40px 10px 20px 10px; margin: 2px; width: 110px; width: 132px; width: 160px; font-size: 13px; color: #3c3c3c; min-height: 100px; position: relative; word-break: break-word; cursor: default;
-webkit-transition: background .25s ease-out; -moz-transition: background .25s ease-out; transition: background  .25s ease-out; }

.skill-cell .practice { font-weight: normal; }
.skill-cell .story { font-weight: normal; }

.__dark .skill-cell .story,
.skill-cell.semi .story,
.skill-cell.clicked .story { background: url(/x/story.svg) center center no-repeat; background-size: 14px; width: 14px; height: 14px; margin: 0px; display: inline-block; text-indent: -9999px; vertical-align: -2px; }

.skill-cell:active,
.skill-cell.semi { background: #f7f7f7; border-radius: 5px; } 
.skill-cell.clicked { background: #ddd; border-radius: 5px; } 

.dark .skill-cell:active,
.dark .skill-cell.semi { background: #ffffff07; }
.dark .skill-cell.clicked { background: #fff2; }

.skill-cell small { cursor: default; }
.skill-cell a { color: #3c3c3c !important; text-decoration: none; font-weight: bold; }
.skill-cell .sessions {}
.skill-cell.gray a { color: #999 !important; }
.skill-cell .crown { position: absolute; right: 13px; right: 24px; right: 38px; top: 45px; top: 55px; /*box-sizing: content-box; border-radius: 50%; border: 2px solid #fff;*/ } 
.skill-cell .crown span { vertical-align: -1px; }
.skill-cell .subtitle { color: #ccc; font-weight: normal; }
.skill-cell.clicked .subtitle { color: #777; }
.skill-cell.clicked span a .cCCC { color: #999; }

.dark .skill-cell .subtitle { color: #fff3; }
.dark .skill-cell.clicked b { color: #fff; }
.dark .skill-cell.clicked .subtitle { color: #fff5; }
.dark .skill-cell.clicked span a .cCCC { color: #fff3; }

.dark .skill-cell.clicked.gray .skill { border: 1px solid #999; background-color: #777; }


.tree-id { color: #ccc; padding-top: 100px; font-size: 13px; text-align: center; }

.unitLevel { background: #bbb;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    color: #fff !important;
    font-size: 10px; }
.unitLevel:hover { background: #999; }

br.clear { clear: both; }
.tabs { padding: 0 !important; }

ul.tips { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding: 0; list-style: none; /*padding: 0 0 0 20px;*/ font-size: 12px; }

li.single { column-span: all; padding: 0 !important; text-indent: 0 !important; }
li.single h3 { margin: 0 0 10px 38px }
li.single:first-child hr { margin: 0 0 20px 0px }

#words ul.plain { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding: 0; }
#words .work { background-position: 2px 3px !important; height: 16px; width: 16px; background-size: 12px !important; /*position: absolute; top: 4px; left: -8px; display: none;*/ opacity:0.1; text-indent: 0px;  vertical-align: bottom;  vertical-align: middle; }
#words a.work { opacity:1; }
#words li { /*padding-left: 12px;*/ /*padding-left: 50px; text-indent: -38px;*/ /*margin-bottom: 10px;*/ }
#words .traduccion { margin-bottom: 10px; padding-left: 38px; display: inline-block; color: #bbb; }
#words li:hover a.work { opacity:1; }
#_words li .work:hover { opacity:1; }

aside .hof li { margin: 0 0 10px 0; line-height: 10px; }

.speak { background: #1caff6 url(/x/icon-sprite5.svg) -107px -90px no-repeat; display: inline-block; height: 50px; width: 58px; }
.speak.m { background: #1caff6 url(/x/icon-sprite5.svg) -366px -129px no-repeat; border-radius: 50%; height: 50px; width: 50px; background-size: 2000px; vertical-align: -18px; }
.speak.x { background: #1caff6 url(/x/icon-sprite5.svg) -200px -70px no-repeat; border-radius: 50%; height: 30px; width: 30px; background-size: 1100px; vertical-align: -7px; }
.speak.x { background: #1caff6 url(/x/icon-sprite5.svg) -238px -84px no-repeat; border-radius: 50%; height: 32px; width: 32px; background-size: 1300px; vertical-align: -10px; }
.speak.s { background: #1caff6 url(/x/icon-sprite5.svg) -183px -64px no-repeat; border-radius: 50%; height: 26px; width: 26px; background-size: 1000px; vertical-align: -7px; }

.work.xs { background: #1caff6 url(/x/dumbbell.64px.png) 0 0 no-repeat; border-radius: 50%; height: 16px; width: 16px; background-size: 12px; background-position: center; vertical-align: bottom; }
.speak.xs { background: #1caff6 url(/x/voice.64px.png) 0 0 no-repeat; border-radius: 50%; height: 16px; width: 16px; background-size: 10px; background-position: center; text-indent: -9999px; overflow: hidden; margin: 0 0 0 2px; vertical-align: bottom; vertical-align: middle; }
.dark .speak.xs { filter: hue-rotate(180deg) invert(1) saturate(3); }
.dark #words .work { filter: hue-rotate(180deg) invert(1) saturate(3); }
small .speak.xs { vertical-align: bottom; }

.dark .speak.xs.voice + span { color: #fff; }

.speak.disabled { opacity: 0.2 !important; cursor: default !important; filter: grayscale(1); }

._ww { box-sizing: content-box; border: 3px solid #fff; width: 17px; height: 17px; }

.speak:hover { background-color: #3ebbf7; cursor: pointer; }
.speak.slow { background: #1caff6; /*height: 22px; width: 22px; vertical-align: -5px;*/ }
.speak .slow { background: url(/x/icon-sprite5.svg) -61px -12px no-repeat; background-size: 400px; width: 19px; height: 15px; display: block; margin: 4px; margin: 4px 3px; }

.notify { margin: 20px auto; height: 50px; background: #eee; max-width: 980px; border-radius: 10px; box-shadow: 0 0 25px rgba(0,0,0,0.04); padding: 10px; }

#notify { min-height: 50px; border-radius: 10px; padding: 15px 10px; box-shadow: 0 0 25px rgba(0,0,0,0.04); background: #fff; margin: 20px auto; max-width: 980px; max-width: 1180px;text-align: left; position: relative; margin: 20px auto; background: #eee; background: #fff3; overflow: hidden; margin-top: 90px; /*display: flex;*/ }
#notify _a { color: #1caff6; }
#notify div { align-self: center; }
#notify .owl { min-width: 60px; margin: 0; }
#notify .owl { -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; transition: all .25s ease-out; position: absolute; bottom: -31px; }
#notify:hover .owl { bottom: -26px; }
#notify:hover { /*background: #f3f3f3;*/ }

#notify div:nth-child(2),
#notify span { /* position: absolute; top: 16px;*/ padding-left: 70px; }

span.centre { text-align: center; display: block; }
.center { text-align: center; }
.centered { position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 800px; min-height: 400px; margin: 0 !important; }
.cc { position: absolute; right: 10px; bottom: -20px; font-size: 10px; }
.cc img { vertical-align: -4px; }

.catalogue { display: flex; align-items: center; }
.catalogue > span { flex: none; }
.catalogue > div { /*border-left: 3px solid #eee; padding-left: 8px;*/ margin-left: 6px; }

.wide { border-radius: 10px; padding: 35px 40px 40px 40px; margin: 20px auto; max-width: 980px; max-width: 1180px;text-align: left; position: relative; color: #999; }
.page { border-radius: 10px; padding: 35px 40px 40px 40px; box-shadow: 0 0 25px rgba(0,0,0,0.04); background: #fff; margin: 20px auto; max-width: 980px; max-width: 1180px;text-align: left; position: relative; }
.page.jd { min-height: 320px; }
.page a { color: #1caff6; }
.page > h4:first-child { margin: 0; white-space: nowrap; }
.page > h1 { margin: 0; }
.page small.uin { color: #ccc; position: absolute; right: 10px; bottom: -15px; font-size: 11px; }
.page img { max-width: 100%; }

small.uin { font-family: 'PT Sans Narrow'; }

.color-semifinals { color: #9069cd; }
.color-diamond { color: #38d0d0; }

.cFFF { color: #fff !important; }

.cEEE { color: #eee !important; }
.cEEE * { color: #eee !important; }
.cEEE a { color: #eee; }
.cCCC { color: #ccc; }
.cCCC * { color: #ccc; }
.cCCC a { color: #ccc; }
.c999 { color: #999 !important; }
.c999 * { color: #999; }
.c999 a { color: #999; }
.c000 { color: #000 !important; }
.c000 * { color: #000; }
.c000 a { color: #000; }
.c333 { color: #333; }
.c333 * { color: #333; }
.c333 a { color: #333; }
.c555 { color: #555; }
.c555 * { color: #555; }
.c555 a { color: #555; }

.red { color: #a00; }
.red a { color: #a00; }

.wrapper { height: 250px; position: relative; margin-top: -100px; /*overflow-x: scroll;*/ }
.wrapper > div { position: absolute; bottom: 0; }
.pins { display: inline-flex; /*flex-direction: row-reverse;*/ flex-wrap: wrap-reverse; }
.xPin { background: #ffc766; margin: 0 1px 0 0; position: relative; min-width: 3px; font-size: 10px; cursor: default; z-index: 99; display: inline-block; /*float: right;*/  }
.xPin.semi { background: #ffc76644; -webkit-transition: background .25s ease-out; -moz-transition: background .25s ease-out; transition: background .25s ease-out; /*color: #ffc766;*/ }
.xPin.semi:hover { background: #ffc766; /*color: #fff;*/ color: #000; }
.xPin.s1 { width: 10px; height: 10px; background: #ffc76644; }
.xPin.s2 { width: 10px; height: 10px; background: #ffc76688; }
.xPin.s3 { width: 10px; height: 10px; background: #ffc766cc; }
.legends { display: inline-block; list-style: none; text-align: left; padding: 0; }
.legends li { display: inline; margin: 0 5px; }

.timing { position: absolute; display: inline-block; width: 120px; right: -130px; top: 0; color: #ccc; text-align: left; }

.timings a { color: #ccc; }
.timings {
    width: 100px;
    font-size: 11px;
    color: #ccc;
    text-align: right;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
 
.bChart { display: flex; align-items: flex-end; justify-content: space-evenly; }
.xBar { background: #ffc766; margin: 1px; display: inline-block; position: relative; min-width: 40px; font-size: 10px; cursor: default; }
.xBar.skillz { min-width: 2px; width: 20px; margin: 0 1px 0 0; cursor: pointer; }
.xBar.semi { background: #ffc76699; -webkit-transition: background .25s ease-out; -moz-transition: background .25s ease-out; transition: background .25s ease-out; /*color: #ffc766;*/ }
.xBar.semi:hover { background: #ffc766; /*color: #fff;*/ color: #000; }
.xBar.white { background: transparent; }
.xBar > span { position: absolute; bottom: -26px; display: inline-block; width: 100%; text-align: center; }
div.strk { display: inline-block; font-weight: bold; }
div.when { display: inline-block; }

.xBar.skillz { height: 100px; border-top: 0px solid #fff; }
.xBar.skillz:hover { }

button.update { display: none; font-size: 11px; 

    background: rgb(0, 0, 0);
    border: none;
    outline: none;
    border-radius: 3px;
    color: rgb(255, 255, 255);
    padding: 2px 4px;
     padding: 3px 6px;
     margin: 0px 0px 0px 2px;
/*    margin: 0px 2px 0px 0px;
     margin: 0px 0px 0px -3px;*/
    vertical-align: 2px; 
    cursor: pointer;

}
button.update:active { background: #999; }
.editable { padding: 0 2px; }
.editable:focus {}


.notes { position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 2px 4px; font-size: 10px; }

ul.plain { list-style: none; padding: 0 0 0 5px; }
	 .all { background: #eee; margin: 0 0 3px 28px; border: 1px solid #fff; /* width: 250px; */ }
ul.plain .all+small { margin: 0 0 0 28px; }

ul.plain.c .all { margin: 0 0 2px 5px; }
ul.plain.c .all+small { margin: 0 0 0 7px; }

ul.hof { padding: 0 0 0 70px; padding: 0 0 0 20px;}

ul.compact .avatar { vertical-align: -16px; margin: 2px; }
ul.compact small { position: absolute; top: 14px; left: 31px; font-size: 9px; }

.keep { position: absolute; left: -48px; top: 3px; font-size: 12px; /*line-height: 24px;*/ width: 44px; text-align: right; color: #ccc; }
.keep.black { color: #000; }
.down { background: url(/x/less-icons-18-black.png) -68px -1px no-repeat; background-size: 200px; display: inline-block; width: 8px; height: 8px; opacity: 0.2; }

canvas { margin: 20px 0px 0 0; max-width: 100%; }
div.canvas { text-align: center; }
div.canvas.fle { margin: 0px 10px; }
.____days { font-size: 10px; margin: 0 0 0px 15px; float: left; clear: left; }
.____days span { width: 33px; display: inline-block; text-align: center; }

.cFrame { overflow-x: auto; margin: 0 -40px; }


.dark .cFrame::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #444;
}
.dark .cFrame::-webkit-scrollbar-thumb {
    background: #555;
}


.cWide { width: 980px; width: 1180px; }

.rival { margin: 20px 0 0 0; display: block; text-align: center; }

.inline-flex { display: inline-flex; text-align: left; padding: 10px 20px; background: #eee; border-radius: 10px; align-items: center; }
.inline-flex span { /*min-width: 48px; flex-grow: 1;*/ align-self: baseline; top: 20px; }
.inline-flex p { margin-left: 10px;  }

.flex { display: flex; min-width: 100px; }
.flexi { display: flex; max-width: 980px; max-width: 1180px;margin: 20px auto; }
.flexi.wider { max-width: 1180px; }
.flexi.wider .page { max-width: 1180px; }
.flexi.side { /*align-items:flex-start; align-content:flex-start;*/ }
.flexi.start { align-items:flex-start; }
.flexi.end { align-items:flex-end; }
.flexi._end > div:nth-child(2) { margin: 0 0 0 50px; }

.flexi .flex { flex-flow: column; }
.flexi .flex .stats { padding: 0 0 20px 45px; }
.flexi .page { margin: 0; }
.flexi .page:first-child { min-width: 480px; width: 100%; }
.flexi .page:nth-child(2) { margin: 0 0 0 20px; padding: 30px; min-width: 500px; min-width: 400px; align-self:stretch; }

#prediction .owl.m { width: 140px; height: 140px; background-size: 140px; }
#prediction .owl.m.nv { background-size: 120px; }
#prediction .owl.m.hw { background-size: 120px; }

.stats .owl {  width: 140px; height: 140px; background-size: 140px !important; z-index: 99; margin: 0; }
.stats .owl.cs { background-size: 112px !important; }
.stats .owl.zs { background-size: 112px !important; }
.stats .owl.zu { background-size: 112px !important; }
.stats .owl.fi { background-size: 112px !important; }
.stats .owl.gd { background-size: 194px !important; }
.stats .owl.hi { background-size: 112px !important; }
.stats .owl.ht { background-size: 194px !important; }
.stats .owl.hv { background-size: 112px !important; }
.stats .owl.hw { background-size: 112px !important; }
.stats .owl.id { background-size: 112px !important; }
.stats .owl.kl { background-size: 112px !important; }
.stats .owl.nv { background-size: 112px !important; }
.stats .owl.te { background-size: 112px !important; }
.stats .owl.xh { background-size: 112px !important; }
.stats .owl.zc { background-size: 112px !important; }
.stats .owl.fade:hover { opacity: 0.1; }

.flexi.side .page:nth-child(2) { align-self:flex-start; }

.flexi aside { position: relative; right: 0; top: 0; }
.flexi aside>div { background: none; border: none; border-bottom: 1px solid #eee; border-bottom: 1px solid rgba(0,0,0,0.1); }
.flexi aside>div:nth-child(3) { border: none; }
.flexi .free { min-width: auto !important; }

.stats { position: relative; display: flex; flex-flow: row; justify-content: space-between; overflow: hidden; min-width: 100px; padding: 10px 20px 40px 45px; font-size: 13.333px; line-height: 20px; }
__h4+.stats div:first-child { padding: 20px 0; }

.stats div { align-self: center; } 
.stats hr { margin: 5px 0 2px 0; width: 100px; }
.stats span:first-child { border-bottom: 2px solid #eee; margin-bottom: 9px; display: inline-block; padding-bottom: 9px; }
.stats ._under { border-bottom: 2px solid #eee; margin-bottom: 9px; display: inline-block; padding-bottom: 9px; }

.stats+h4, 
#skills>h4 { padding: 20px 0 0 0px; margin: 0; clear: left; }

h4.canv { margin: 0 0 0 45px; white-space: nowrap; }

li span { position: relative; }
.dots { position: absolute; left: 0; top: 10px; font-size: 12px; }

	.icon { background: url(/x/icon-sprite5.svg); display: inline-block; vertical-align: top; position: relative; }
.person .icon { vertical-align: -8px; }


.icons { display: inline-block; width: 32px; height: 32px; border: 2px solid #eee; border-radius: 50%; margin: 2px; cursor: pointer; }
.icons.fade { border: 2px solid #eee !important; filter: grayscale(1) opacity(1); }
.icons.fade:hover { filter: opacity(1); }

.icons.freeze { background: url(/x/streak-freeze.svg) center center no-repeat; background-size: 24px; border: 2px solid #1cb0f6; }
.icons.freeze:hover { border: 2px solid #1cb0f6 !important; }
.icons.weekend { background: url(/x/weekend_amulet_sparkles.svg) 3px 3px no-repeat; background-size: 20px; border: 2px solid #eee; } /* light blue: #75d1fb*/
.icons.weekend:hover { border: 2px solid #e7e7e7 !important; }
.icons.repair { background: url(/x/streak-repair.svg) center center no-repeat; background-size: 34px; border: 2px solid #ff9600; }
.icons.repair:hover { border: 2px solid #ff9600 !important; }
.icons.double { background: url(/x/flaming-calendar.svg) center center no-repeat; background-size: 24px; border: 2px solid #ff9600; } /* yellow: #ffc800 red: #f34848 */
.icons.double:hover { border: 2px solid #ff9600 !important; }


/* ### flags #################################################################################################################### */

.flag { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: url(/x/flag-sprite15.svg) -176px -110px no-repeat; background-size: 220px; vertical-align: middle; text-indent: -9999px; position: relative; margin: 4px; }
.___flag { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: url(/x/flag-sprite15.svg) -176px -110px no-repeat; background-size: 220px; vertical-align: middle; text-indent: -9999px; position: relative; margin: 2px 2px; border: 2px solid white; }
.flag.s { width: 15px; height: 15px; background-size: 190px; }
.flag.m { width: 30px; height: 30px; background-size: 380px; }
.flag.xl { transform: scale(3); text-indent: 0; margin: 28px !important; }
.flag.xs { transform: scale(0.7); margin: 0; }
.flag .flag { transform: scale(0.3); bottom: -4px; right: -4px; z-index: 2; }

.___flag:after {
  content: " "; position: absolute; z-index: 1;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border: 3px solid #fff; border-radius: 50%;
  /*#2d2d2d*/
}
.flag:before {
  content: " "; position: absolute; z-index: 1;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border: 3px solid #fff; border-radius: 50%;
  /*#2d2d2d*/
}
.flag.golden:after {
  content: " "; position: absolute; z-index: 1;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border: 2px dotted #ffcb1f; border-radius: 50%;
}
.flag.purple:before { border: 2px solid #9b5fca; }
.flag.blue:before { border: 2px solid #1caff6; }
.flag.green:before { border: 2px solid #7eb530; }
.flag.red:before { border: 2px solid #dd381d; }
.flag.orange:before { border: 2px solid #fa811b; }
.flag.gold:before { border: 2px solid #ffcb1f; }
.flag.legendary:before { border: 2px solid #5c6cfc; }

.skl.purple { background: #9b5fca; color: #fff; }
.skl.blue { background: #1caff6; color: #fff; }
.skl.green { background: #7eb530; color: #fff; }
.skl.red { background: #dd381d; color: #fff; }
.skl.orange { background: #fa811b; color: #fff; }
.skl.gold { background: #ffcb1f; color: #fff; }
.skl.legendary { background: #5c6cfc; color: #fff !important; }

.flag.white { margin: 2px; } /* smaller margins for L1 trees */
.flag.golden { margin: 2px 7px; } /* wider margin for shiny trees */
.flag.white.golden { margin: 5px; /*box-shadow: 0 2px 5px rgb(0 0 0 / 50%); */} /* less wide for L1 shiny tree */

      .flag.white.golden:after {  top: -4px; left: -4px; right: -4px; bottom: -4px; }
table .flag.white.golden:after {  top: -5px; left: -5px; right: -5px; bottom: -5px; } /* extra padding for tables */

table .flag,
table .flag.white,
table .flag.golden { margin: 6px !important; }

aside .flag { margin: 6px !important; }
.cell .flag { margin: 5px !important; }


/*body { counter-reset: owls; } a:target+span .flag::after { counter-increment: owls; content: counter(owls); } .hidden-but-accessible { }*/
a:target+span { border-radius: 16px; padding: 4px 4px 4px 8px; margin-left: -8px; background:#1caff6; color:#fff; display: inline-block; /*overflow: hidden;*/ place-self: flex-start; }
a:target+span.grey { background:#eee; color: #333; }
a:target+span.grey a { color: #1caff6; }

a.no-flags:target+span,
a:target+span.no-flags { padding: 4px 12px 4px 8px; }
a:target+span.no-flags.grey { padding: 2px 12px 0px 8px; }

a:target+span .dot { color: #fff; }
a:target+span .dots { left: 8px; top: 16px; }
a:target+span.ccc { border-radius: 10px; padding: 4px 8px 2px 8px; }
/*a:target+span::after { content: counter(owls); margin: 0 5px; }*/
a:target+span .flag { border: 2px solid white; width: 21px; height: 21px; vertical-align: -7px; margin: 2px 3px; }
/*a:target+span .flag.gold { margin: 2px 4px; }*/
a:target+span .flag.golden { margin: 2px 5px; }
a:target+span .flag.gold.golden { margin: 2px 5px; }
a:target+span .flag.golden:after { border: 2px dotted #fff; }
a:target+span .flag.white.golden:after { margin: -2px; }
a:target+span .ava { border: 2px solid white; width: 23px; height: 23px; vertical-align: -8px; }
a:target+span a { color: #fff; }

a:target+span span.keep { left: -48px; top: 11px; color: #ccc; }
a:target+span span.cCCC { color: #fff; opacity: 0.3; }
a:target+span span.c000 { color: #fff; }

/* ### rings #################################################################################################################### */

.ring { display: inline-block; border-radius: 50%; border: 2px solid #fff; position: relative; margin: 1px; }
.ring .flag { margin: 4px; }

.ring.gold .flag.white { margin: 3px !important; } /* wider margins inside a golden ring */
.ring.white .flag.white:before { border: 3px solid #fff; } /* wider border inside a white ring */

.ring.purple { border: 2px solid #9b5fca; } /* #a560eb - new */
.ring.blue { border: 2px solid #1caff6; } /* old */
.ring.green { border: 2px solid #7eb530; } /* #7ac70c - new */
.ring.red { border: 2px solid #dd381d; } /* #e53b3b - new */
.ring.orange { border: 2px solid #fa811b; } /* new */
.ring.legendary { border: 2px solid #5c6cfc; }
.ring.gold { border: 2px dotted #ffcb1f; }
.ring.gray { border: 2px solid #f0f0f0; } /* old */

.ava.ring { padding: 1px; }

/* ### stream ################################################################################################################### */

ul.stream { list-style: none; padding: 0 0 0 15px; }
ul.stream>li>div { margin: 0 0 0 70px; padding: 0 0 30px 30px; position: relative; border-left: 3px solid #eee; }
ul.stream .flag { position: absolute; left: -8px; top: -8px; box-sizing: content-box; transition: all .15s ease-in; }
ul.stream .flag:hover { transform: scale(1.3); }
	  .spot { background: #ccc; width: 22px; height: 22px; margin: 2px; border: 5px solid #fff; border-radius: 50%; }
ul.stream .spot { position: absolute; left: -16px; top: 9px; }
	  .spot.white { background: #fff; top: -2px !important; }

ul.stream .skill { position: absolute; top: -10px; left: -10px; transform: scale(0.9); transition: all .15s ease-in; margin: 4px; }
ul.stream .skill:hover { transform: scale(1.2); }
ul.stream .skill:before	{   content: " "; position: absolute; z-index: 1;
			  top: -3px; left: -3px; right: -3px; bottom: -3px;
			  border: 3px solid #fff; border-radius: 50%; }

ul.stream .ava { margin: 2px; }
ul.stream .ava img { width: 40px; display: block; }

ul.stream>li.talk .spot { top: 29px; }
ul.stream>li.talk .spot.white { height: 33px; }
ul.stream>li.talk .ava { margin-top: 20px; }

/* ############################################################################################################################## */

audio { display:none; }
.play { cursor:pointer; border-bottom: 1px dotted #1caff6; }

aside { position: absolute; right: 40px; top: 40px; font-size: 12px; width: 200px; }
aside+aside { position: relative; font-size: 12px; width: 200px; }
aside > div { background: #eee;  padding: 12px 6px; background: #f7f7f7; border: 1px solid #eee; margin: 0 0 5px 0px; }
aside ul { padding: 0 0 0 20px; }
aside h4{ font-size: 16px; }
aside h4:first-child { margin-top: 2px; }

aside > div.events ul { list-style: none; padding: 0; }
aside > div.events ul li { margin: 0 0 10px 0; }
aside > div.events div.flag { float: left;	text-indent: 0; line-height: 63px; text-align: center; color: #ccc; }
aside > div.events div.owl { float: left;	text-indent: 0; line-height: 72px; text-align: center; color: #ccc; }
aside > div.events div+div { overflow: hidden; }

  .fr { background-position: 0px 0px; }
  .zz { background-position: 0px 0px; margin: 2px 5px !important; }
  .zz:before { border: 2px solid #1cb0f6; }

.flag.la { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -5px -927px; background-size: 28px !important; }
.m.la { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -8px -1521px; background-size: 46px !important; }

.flag.gd { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -5px -949px; background-size: 28px !important; }
.m.gd { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -8px -1559px; background-size: 46px !important; }

.flag.fi { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -4px -972px; background-size: 28px !important; }
.m.fi { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -8px -1595px; background-size: 46px !important; }

.flag.yi { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -6px -994px; background-size: 28px !important; }
.m.yi { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -9px -1632px; background-size: 46px !important; }

.flag.ht { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -6px -1017px; background-size: 28px !important; }
.m.ht { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -9px -1670px; background-size: 46px !important; }

.flag.zu { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -6px -1062px; background-size: 28px !important; }
.m.zu { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -9px -1744px; background-size: 46px !important; }

.flag.xh { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -6px -1062px; background-size: 28px !important; }
.m.xh { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -9px -1744px; background-size: 46px !important; }

.flag.ar { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -5px -746px; background-size: 28px !important; }
.m.ar { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -8px -1225px; background-size: 46px !important; }

.flag.th { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -5px -792px; background-size: 28px !important; }
.m.th { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -8px -1299px; background-size: 46px !important; }

._flag.ta { background: #eee; }

.flag.tl { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -3px -1039px; background-size: 28px !important; }
.m.tl { background: url(/x/juicy-flag-sprite-87938207afff1598611ba626a8c4827c.svg) -4px -1706px; background-size: 46px !important; }

  .bn { background: url(/x/flag-bn.svg) center center no-repeat; background-size: 24px; }
.m.bn { background: url(/x/flag-bn.svg) center center no-repeat; background-size: 40px; }

  .es { background-position: -22px 0px; }
.m.es { background-position: -38px 0px; }
  .de { background-position: -44px 0px; }
.m.de { background-position: -76px 0px; }
  .pt { background-position: -66px 0px; }
.m.pt { background-position: -114px 0px; }
  .it { background-position: -88px 0px; }
.m.it { background-position: -152px 0px; }
  .en { background-position: -110px 0px; }
.m.en { background-position: -190px 0px; }
  .ga { background-position: -132px 0px; }
.m.ga { background-position: -228px 0px; }
  .hu { background-position: -154px 0px; }
.m.hu { background-position: -266px 0px; }
  .ru { background-position: -176px 0px; }
.m.ru { background-position: -304px 0px; }
  .pl { background-position: -198px 0px; }
.m.pl { background-position: -342px 0px; }

  .ro { background-position: 0px -44px; }
.m.ro { background-position: 0px -76px; }
  .dn { background-position: -22px -44px; }
.m.dn { background-position: -38px -76px; }
  .tr { background-position: -44px -44px; }
.m.tr { background-position: -76px -76px; }
  .id { background-position: -66px -44px; }
.m.id { background-position: -114px -76px; }
  .ja { background-position: -88px -44px; } /***/
.m.ja { background-position: -152px -76px; } /***/
  .uk { background-position: -110px -44px; }
.m.uk { background-position: -190px -76px; }
  .el { background-position: -154px -44px; }
.m.el { background-position: -266px -76px; }

/*  .ar { background-position: -198px -44px; }
.m.ar { background-position: -342px -76px; }*/

  .ta { background-position: -0px -88px; }
.m.ta { background-position: -0px -152px; }
  .hi { background-position: -0px -88px; }
.m.hi { background-position: -0px -152px; }
  .te { background-position: -0px -88px; }
.m.te { background-position: -0px -152px; }

  .he { background-position: -22px -88px; }
.m.he { background-position: -38px -152px; }
  .ko { background-position: -44px -88px; }
.m.ko { background-position: -76px -152px; }
  .vi { background-position: -66px -88px; }
.m.vi { background-position: -114px -152px; }
  .sv { background-position: -88px -88px; }
.m.sv { background-position: -152px -152px; }

  .zc { background: url(/x/flag-zc.svg) center center no-repeat; background-size: 24px; }
.m.zc { background: url(/x/flag-zc.svg) center center no-repeat; background-size: 40px; }
  .zs { background-position: -110px -88px; }
.m.zs { background-position: -190px -152px; }

  ._zu { background: url(/x/flag-zu.svg) center center no-repeat; background-size: 24px; }
.m._zu { background: url(/x/flag-zu.svg) center center no-repeat; background-size: 40px; }

  .zh { background-position: -110px -88px; }
.m.zh { background-position: -190px -152px; }

  .cs { background-position: -132px -88px; }
.m.cs { background-position: -228px -152px; }
  .eo { background-position: -198px -88px; }
.m.eo { background-position: -342px -152px; }

  .kl { background-position: -0px -132px; }
.m.kl { background-position: -0px -228px; }
  .da { background-position: -22px -132px; }
.m.da { background-position: -38px -228px; }
  .nb { background-position: -132px -132px; }
.m.nb { background-position: -228px -228px; }
  .ca { background-position: -176px -132px; }
.m.ca { background-position: -304px -228px; }
  .cy { background-position: -198px -132px; }
.m.cy { background-position: -342px -228px; }

  .gn { background-position: 0px -176px; }
.m.gn { background-position: 0px -304px; }
  .sw { background-position: -22px -176px; }
.m.sw { background-position: -38px -304px; }
  .hv { background-position: -88px -176px; }
.m.hv { background-position: -152px -304px; }
  .hw { background-position: -110px -176px; }
.m.hw { background-position: -190px -304px; }
  .nv { background-position: -132px -176px; }
.m.nv { background-position: -228px -304px; }


.owl { background: url(/x/owl-happy.svg) center center no-repeat; 			width: 60px; height: 60px; margin: 4px; position: relative; display: inline-block; vertical-align: middle; background-size: 72px; margin-bottom: 20px; }
.owl.s { background: url(/x/owl-happy.svg) center center no-repeat; min-width: 30px; width: 30px; height: 30px; margin: 2px; position: relative; display: inline-block; /*vertical-align: bottom;*/ background-size: 34px !important; }

h2 .owl.s { background-image: url(/x/owl-standard.svg); margin: 0; vertical-align: bottom; }
h2 .owl.s:hover { background-image: url(/x/owl-happy.svg); }

.owl.ss { width: 14px; height: 18px; background-size: 20px !important; }
.owl.junior { background-image: url(/x/owl-sporty.svg); }
.owl.fade:hover { opacity: 1; }
.owl span { position: absolute; left: 0; bottom: 0; margin:0; }

.owl .flag:before { top: -2px; right: -2px; bottom: -2px; left: -2px; border: 3px solid #fff; }

.owl.ht { background: url(/x/owl-trophy-ht.png) center center no-repeat; background-size: 93px; }
.owl.ht.s { background-size: 50px !important; }
.owl.yi { background: url(/x/owl-trophy-yi.png) center center no-repeat; background-size: 93px; }
.owl.yi.s { background-size: 50px !important; }

.owl.la { background: url(/x/owl-trophy-la.svg) center center no-repeat; background-size: 68px; }
.owl.ar { background: url(/x/owl-trophy-ar.svg) center center no-repeat; background-size: 68px; }
.owl.ca { background: url(/x/owl-trophy-ca.svg) center center no-repeat; background-size: 68px; }
.owl.cs { background: url(/x/owl-trophy-cs.svg) center center no-repeat; background-size: 54px; }
.owl.cs.s { background-size: 27px !important;  }
.owl.cy { background: url(/x/owl-trophy-cy.svg) center center no-repeat; background-size: 68px; }
.owl.da { background: url(/x/owl-trophy-da.svg) center center no-repeat; background-size: 68px; }
.owl.de { background: url(/x/owl-trophy-de.svg) center center no-repeat; background-size: 68px; }
.owl.dn { background: url(/x/owl-trophy-dn.svg) center center no-repeat; background-size: 68px; }
.owl.el { background: url(/x/owl-trophy-el.svg) center center no-repeat; background-size: 68px; }
.owl.en { background: url(/x/owl-trophy-en.svg) center center no-repeat; background-size: 68px; }
.owl.eo { background: url(/x/owl-trophy-eo.svg) center center no-repeat; background-size: 68px; }
.owl.es { background: url(/x/owl-trophy-es.svg) center center no-repeat; background-size: 68px; }
.owl.fi { background: url(/x/owl-trophy-fi.svg) center center no-repeat; background-size: 54px; }
.owl.fr { background: url(/x/owl-trophy-fr.svg) center center no-repeat; background-size: 68px; }
.owl.ga { background: url(/x/owl-trophy-ga.svg) center center no-repeat; background-size: 68px; }
.owl.gd { background: url(/x/owl-trophy-gd.png) center center no-repeat; background-size: 93px; }
.owl.gd.s { background-size: 50px !important; }
.owl.deleted { background: url(/x/owl-trophy-deleted.png) center center no-repeat; background-size: 93px; display: none; }
.owl.deleted.s { background-size: 50px !important; }

ul.languages li.deleted { display: none; }

.owl.gn { background: url(/x/owl-trophy-gn.svg) center center no-repeat; background-size: 68px; }
.owl.he { background: url(/x/owl-trophy-he.svg) center center no-repeat; background-size: 68px; }
.owl.hi { background: url(/x/owl-trophy-hi.svg) center center no-repeat; background-size: 54px; }
.owl.hi.s { background-size: 27px !important; }

.owl.te { background: url(/x/owl-trophy-hi.svg) center center no-repeat; background-size: 54px; }
.owl.te.s { background-size: 27px !important; }


.owl.hu { background: url(/x/owl-trophy-hu.svg) center center no-repeat; background-size: 68px; }
.owl.hv { background: url(/x/owl-trophy-hv.svg) center center no-repeat; background-size: 54px; }
.owl.hv.s { background-size: 27px !important; }
.owl.hw { background: url(/x/owl-trophy-hw.svg) center center no-repeat; background-size: 54px; }
.owl.hw.s { background-size: 27px !important; }

.owl.id { background: url(/x/owl-trophy-id.svg) center center no-repeat; background-size: 54px; }
.owl.id.s { background-size: 27px !important; }
.owl.it { background: url(/x/owl-trophy-it.svg) center center no-repeat; background-size: 68px; }
.owl.ja { background: url(/x/owl-trophy-ja.svg) center center no-repeat; background-size: 68px; }
.owl.kl { background: url(/x/owl-trophy-kl.svg) center center no-repeat; background-size: 54px; }
.owl.kl.s { background-size: 27px !important; }
.owl.ko { background: url(/x/owl-trophy-ko.svg) center center no-repeat; background-size: 68px; }
.owl.nb { background: url(/x/owl-trophy-nb.svg) center center no-repeat; background-size: 68px; }
.owl.nv { background: url(/x/owl-trophy-nv.svg) center center no-repeat; background-size: 54px; }
.owl.nv.s { background-size: 27px !important; }

.owl.pl { background: url(/x/owl-trophy-pl.svg) center center no-repeat; background-size: 68px; }
.owl.pt { background: url(/x/owl-trophy-pt.svg) center center no-repeat; background-size: 68px; }
.owl.ru { background: url(/x/owl-trophy-ru.svg) center center no-repeat; background-size: 68px; }
.owl.ro { background: url(/x/owl-trophy-ro.svg) center center no-repeat; background-size: 68px; }
.owl.sv { background: url(/x/owl-trophy-sv.svg) center center no-repeat; background-size: 68px; }
.owl.sw { background: url(/x/owl-trophy-sw.svg) center center no-repeat; background-size: 68px; }
.owl.tr { background: url(/x/owl-trophy-tr.svg) center center no-repeat; background-size: 68px; }
.owl.uk { background: url(/x/owl-trophy-uk.svg) center center no-repeat; background-size: 68px; }
.owl.vi { background: url(/x/owl-trophy-vi.svg) center center no-repeat; background-size: 68px; }

.owl.zs { background: url(/x/owl-trophy-zs.svg) center center no-repeat; background-size: 56px; } 
.owl.zs.s { background-size: 28px !important; }
.owl.zc { background: url(/x/owl-trophy-zc.svg) center center no-repeat; background-size: 56px; } 
.owl.zc.s { background-size: 28px !important; }

.owl.zh { background: url(/x/owl-trophy-zc.svg) center center no-repeat; background-size: 56px; } 
.owl.zh.s { background-size: 28px !important; }

.owl.zu,
.owl.xh { background: url(/x/owl-trophy-zu.svg) center center no-repeat; background-size: 54px; } 

.owl.zu.s,
.owl.xh.s { background-size: 27px !important; }

.owl small { position: absolute; bottom: -15px; width: 100%; text-align: center; /*color: #ccc;*/ }

.golden { color: #ffc766; color: #ff9933; }
.legendary { color: #5c6cfc !important; }
.gilded { box-sizing: content-box; border: 3px solid #ffcb1f !important; width: 17px; height: 17px; }
.chart { width: 20px; background: #ccc; margin: 0 1px 0 0; display: inline-block; }

.o { width: 30px; height: 30px; border-radius: 50%; float: right; } /*display: inline-block; */

.o.duo { position: absolute; left: 40px; }
p .o.duo,
li .o.duo { position: relative; display: inline; float: none; left: auto; }

.o.duo .owl { background: url(/x/owl-standard.svg) center center no-repeat; background-size: 34px; text-indent: -9999px; width: 30px; height: 30px; margin: 0; /*border-radius: 50%;*/ }
.o.duo .owl:hover { background: url(/x/owl-happy.svg) center center no-repeat; background-size: 34px; }
.o.duo .o__:hover { /*background-color: #7eb530; background-color: #79c60b;*/ }

.twitter-small { background-position: -355px -70px; text-indent: -9999px; width: 14px; height: 14px; margin: 8px; }
.google-small { background-position: -368px -69px; text-indent: -9999px; width: 20px; height: 20px; margin: 5px; }
.facebook-small { width: 8px; height: 18px; background-position: -346px -70px; text-indent: -9999px; margin: 6px 11px; }

.o.twitter:hover { background-color: #1caff6; }
.o.twitter:hover div { background-position: -64px -70px; background-color: #1caff6;  }
.o.google:hover { background-color: #db4633; }
.o.google:hover div { background-position: -388px -69px; background-color: #db4633; }
.o.facebook:hover { background-color: #3b579d; }
.o.facebook:hover div { background-position: -55px -70px; background-color: #3b579d; }

.hof .ava { vertical-align: middle; margin: 2px; border-radius: 50%; }
.rival .ava { vertical-align: middle; margin: 2px; border-radius: 50%; }

.xp { background-position: 0px -40px; width: 30px; height: 30px; line-height: 30px; color: #fff; text-align: center; font-size: 16px; font-weight: bold; color: #d06700; }
.xp.s { background-position: 0px -17px; width: 14px; height: 14px; line-height: 14px; background-size: 450px; text-indent: 18px; font-size: 14px; line-height: 18px; }
.xp.ss { background-position: 0px -16px; width: 14px; height: 15px; line-height: 14px; background-size: 450px; font-size: 8px; line-height: 17px; color: #d06700; text-decoration: none; }
.xp.m { background-position: 0px -25px; width: 20px; height: 20px; line-height: 20px; vertical-align: middle; background-size: 640px; /*font-size: 12px; font-weight: bold;*/ }

.va { vertical-align: baseline; }

.lingot { background-position: -53px -40px; width: 21px; height: 30px; /*margin: 0 4px;*/ background: url(/x/icon-lingot.svg); width: 24px; }
.lingot.s { background-position: -27px -20px; width: 10px; height: 12px; background-size: 500px; margin: 0 2px; vertical-align: middle; background-position: unset; background-size: cover; }
.lingot.m { background-position: -40px -32px; width: 15px; height: 20px; background-size: 750px; margin: 0 2px; vertical-align: middle; background-position: unset; background-size: cover; }

.exp.s { background: url(/x/xp.svg) 0px 0px; width: 10px; height: 14px; background-size: 10px; margin: 0 2px; vertical-align: middle; }

.voc { background: url(/x/vo.svg) 0px 0px; width: 20px; height: 30px; background-size: 20px; margin: 0 2px; vertical-align: middle; }
.voc.s { background: url(/x/vo.svg) 0px 0px; width: 10px; height: 15px; background-size: 10px; margin: 0 2px; vertical-align: middle; }


.freeze {  }
.freeze.s { background: url(/x/store-sprite-1.svg) -43px -3px no-repeat; background-size: 100px; width: 14px; height: 14px; vertical-align: middle; }
.freeze.m { background: url(/x/store-sprite-1.svg) -59px -4px no-repeat; background-size: 140px; width: 20px; height: 20px; vertical-align: middle; }

.streak { background-position: -30px -40px; width: 23px; height: 30px; background: url(/x/icon-streak.svg); width: 25px; }
.streak.s { font-size: 14px; width: 14px; height: 18px; line-height: 18px; background-position: -225px -70px; text-indent: 18px; margin: 2px; vertical-align: middle; margin-right: 40px; background-position: unset; background-size: cover; }
.streak.ss { font-size: 14px; width: 14px; height: 18px; line-height: 18px; background-position: -225px -70px; text-indent: 18px; margin: 2px; vertical-align: middle; background-position: unset; background-size: cover; }

span.streak { position: relative; }
.lost { position: absolute; bottom: -12px; right: 0; font-size: 11px; color: #CCC; font-weight: normal; /* text-align: center; width: 100%; */ }
.dark .lost { color: #fff2; }
.rank { position: absolute; top: -10px; right: 0; font-size: 11px; color: #CCC; font-weight: normal; /* text-align: center; width: 100%; */ }
.ok { background-position: -383px -52px; width: 16px; height: 14px; position: absolute; top: 18px; right: -5px; }

.social { position: absolute; right: 40px; }
.person { text-align: center; overflow: hidden; }
.person h1 { margin: 0; display: inline-block; }
.person+hr+h4 { margin-bottom:0; }
.person h2 { font-size: 20px; margin: 30px 0 10px 0; }

.person h2 > div { display: inline-block; position:relative; /* vertical-align: 1px;  */ }
.dark .person h2 > div { color: #fff; }
.___person h2 > div .crown { vertical-align: top; } /* replaced with new icons */

.page.narrow .person h1 { font-size: 20px; }
.page.narrow .person h2 > div { min-width: 100px; }
.page.narrow .person h2 .rank { top: 6px; right: auto; margin: 0 0 0 5px; }
.page.narrow .person h2 .lost { display: none; }

a.ava { display: inline-block; margin: 30px; overflow: hidden; position: relative; }
a.ava img { border-radius: 50%; display: block; /*border: 5px solid #fff1;*/ }

.person a.ava img { min-width: 200px; height: 200px; object-fit:cover; }
.person span.ava { position: relative; display: inline-block; }

.semi-fade {opacity: 0.5; }
li.semi-fade {opacity: 0.5; }
li.semi-fade:hover {opacity: 1; }

li.fade:hover {opacity: 1; }
 
li.cEEE:hover,  
li.cEEE:hover * { color: #333 !important; }
li.cCCC:hover,  
li.cCCC:hover * { color: #333 !important; }
li.c999:hover,  
li.c999:hover * { color: #333 !important; }

li.cEEE:hover .keep { color: #ccc !important; }  

.crown { background: url(/x/crown-small.svg) 0px 0px no-repeat; background-size: 28px; line-height: 24px; height: 24px; width: 28px; display: inline-block; text-align: center; color: #fff; cursor: pointer; vertical-align: middle; /*font-size: 11px; line-height: 28px;*/ background: url(/x/icon-crown.svg) center center no-repeat; background-size: 100%; /*background-position: unset;*/ }
.person .crown { height: 30px; width: 36px; }

.crown.legendary { background: url(/x/crown-legendary.svg) 0px -3px no-repeat; background-size: 28px; }
.crown.empty { background: url(/x/icon-crown-gray.svg) center 3px no-repeat; background-size: 22px; background-size: 100%; background-position: unset; }
.dark .crown.empty { background: url(/x/icon-crown-dark.svg) center 3px no-repeat; background-size: 22px; background-size: 100%; background-position: unset; }


.crown.ss { height: 14px; width: 14px; background-size: 14px; line-height: 14px; background-position: center center; }
.crown.s { height: 32px; width: 32px; background-size: 32px; line-height: 32px; }
.crown.m { height: 40px; width: 40px; background-size: 40px; line-height: 40px; }
ul.languages li { margin-top: 4px; margin-bottom: 4px; }
ul.languages .crown.m { margin: 0 -4px 0 -4px; }
.crown.l { height: 50px; width: 50px; background-size: 50px; line-height: 50px; }
.crown span { display: inline-block; font-size: 10px; font-style: normal; font-weight: bold; /*line-height: 28px;*/ color: #fff !important; /*vertical-align: 2px;*/ }
.crown.xs span { font-size: 9px; /*line-height: 30px;*/ }
li:hover a.crown>span { color: #fff !important; }

td .crown { height: 24px; line-height: 24px; }
td .crown span { vertical-align: -2px; line-height: normal; font-size: 9px; }
td.xx8 { text-align: center; }

pre { text-align: left; }

.login { position: absolute; right: 10px; top: 10px; text-align: right; border: none; background: none; margin: 0; padding: 0;  }
.login.dot { right: 10px; top: 10px; width: 15px; height: 5px; line-height: 5px; }
.login a { display: inline-block; text-decoration: none !important; color: #eee; }
.login a:hover { color: #ddd; }
.dark .login a { display: inline-block; text-decoration: none !important; color: #fff1; }
.dark .login a:hover { display: inline-block; text-decoration: none !important; color: #fff3; }

.face { margin: 0 0 0 5px; }
.face img { border-radius: 50%; width: 30px; }
.login a img { border-radius: 50%; width: 40px; }

.location { width: 10px; height: 15px; background-position: -78px -70px; margin: 6px; }
.location+span { font-size: 17px; color: #999; text-transform: uppercase; font-weight: bold; /*width: 100%; display: inline-block; overflow: hidden; */ }
.dark .location+span { color: #fff2; }

.fade { opacity: 0.1; -webkit-transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; transition: opacity .25s ease-out; }
.fade.f25 { opacity: 0.25; }
.fade.f50 { opacity: 0.5; }
.crown.fade { opacity: 0.25; }
.golden.fade { opacity: 0.5; }
.click.fade { opacity: 0.25; }

button.view-more-button {
/*  font-size: 20px;
  padding: 6px 12px;*/
  margin: 0 0 0 65px;
  border-radius: 5px;
  background: #EEE;
  border: none;
  cursor: pointer;
  background: url(/x/icons-36-black.png) -430px center no-repeat;
  width: 36px; height: 36px; padding: 0; opacity: 0.2;
}
button.view-more-button:hover { opacity: 1; }
.dark button.view-more-button {   background: url(/x/icons-36-white.png) -430px center no-repeat; }

img.av + div { overflow: hidden; }

div.person h1+h3 { text-align: center; margin-bottom: 0; }
div.person h3+p { text-align: center; color: #999; margin: 0 auto; max-width: 360px; font-size: 11px; font-size: 13px; display: inline-block; overflow: hidden; text-overflow: ellipsis; }

hr { border: none; margin: 20px 0; clear: both; border-bottom: 1px solid #eee; border-bottom: 1px solid rgba(0,0,0,0.1); }
hr+hr { margin-top: -18px; }


li { position: relative; }
li.shift { /*text-indent: 67px;*/ margin-left: 67px; }
li.shift .crown+small { display: inline-block; min-width: 480px; }
li .crown+small { display: inline-block; min-width: 400px; }

li.ahora { /*text-indent: 12px;*/ }
li.ahora * { /*color: #a00 !important;*/ }
li.ahora .red { color: #a00; font-weight: bold; }
li.this { border: 1px solid rgba(0,0,0,0.067); background: #f9f9f9; padding: 5px 40px 10px 45px; margin: 0 -41px 0 -46px; /*border-left: 1px solid #ddd; border-right: 1px solid #ddd;*/ }
.dark li.this { margin: 0 -40px 0 -45px; } 

li .ts { position: absolute; top: 6px; left: -73px; font-size: 12px; }
li.ahora .ts { position: absolute; top: 6px; left: -55px; font-weight: bold; }

.details > blockquote { margin: 16px 0 0 0; border-left: 3px solid #1caff6; padding: 0 0 0 20px; }
.details > blockquote.gray { border-color: #eee; margin-top:0; font-size: 14px; }
.details > blockquote.gray p:first-child { margin-top:0; }
/*.details.gray { border-left: 3px solid #eee; }*/
blockquote.privacy { margin: 16px 0 0 0; border-left: 3px solid #ccc; padding: 0 0 0 20px; }

.langue { display: inline-block; min-width: 100px; }

.details { display: none; padding: 0 0 25px 10px; }

.examples { display: none; margin: 0 0 33px 33px; }
.details h5 { font-size: 16px; }
.details h6 { font-size: 16px; }
.details _p { font-size: 12px; }
.details h3+p { text-align: left !important; }
.click { color: #999; cursor: pointer; }
.clickTOC { color: #999; cursor: pointer; }
.clicks { cursor: pointer; }
.clicks:hover .crown.fade { opacity: 1; }

.click:hover { color: #000; }
.click2 { color: #eee; cursor: pointer; }
.click2:hover { color: #ddd; }

.practice .click { color: #000; }

.q { width: 17px; height: 17px; border-radius: 50%; background: #ccc; display: inline-block; text-align: center;
    font-weight: bold; font-family: Tahoma; color: #fff !important; box-sizing: border-box; cursor: pointer; position: absolute; left: 20px; margin: 3px; text-decoration: none; outline: none; }
.q:hover { background: #333; }

.raw { font-size: 8px; border-radius: 3px; height: auto;  width: auto;  padding: 2px 4px; text-transform: uppercase; position: inherit; margin: 0 5px; /*background: #eee;*/ }
.raw { vertical-align: 2px; }
h4.canv .raw { vertical-align: middle; }

.utc { position: absolute; right: 40px; top: 35px; font-size: 13px; }
.q.raw { position: relative; }
.utc .raw { background: #ccc; display: inline-block; text-align: center; font-weight: bold; font-family: Tahoma; color: #fff !important; cursor: pointer; margin: 0 2px; 
text-decoration: none; outline: none; position: relative; vertical-align: 1px; }
.utc .raw:hover { background: #333; }


.vhof { margin: 0 4px 0 5px; }

.full { height: 5px; background: #ffc766; /*display: inline-block;*/ }

.cell { display: inline-block; width: 55px; }

.logo { width: 320px; margin: 0; display: inline-block; font-size: 19px; position: relative; }
.logo h1 { font-size: 19px; }
.logo .owl { float: left; margin: 0 10px 0 0; }
.logo .duolingo { background: url(/x/icon-sprite5.svg) 0 0; width: 160px; height: 40px; display: inline-block; text-indent: -9999px; margin: 0 2px; }
.logo div { overflow: hidden; }
.logo div span_ { margin: 0 2px; }
.logo div a { color: #999; text-decoration: none; }
.logo .flag { margin: 0 0 0 1px; width:17px; height:17px; }
.unofficial { position: absolute; top: 30px; left: 73px; color: #fff; text-transform: uppercase; font-size: 10px; background: #1CAFF6; padding: 0px 2px 0 7px; letter-spacing: 5px; }

  .transcript { display: inline-block; height: 16px; } 
  .transcript .voice { filter: grayscale(1); opacity: 0.3; width: 16px; height: 16px; background-size: 16px; margin: 0; vertical-align: -3px; }
  .transcript .voice:hover,
  .transcript .voice.playing { opacity: 1; filter: unset; }

h3 .transcript { float: right; font-size: 14px; color: #ccc; width: auto; }
h3 .transcript .voice { width: 24px; height: 24px; background-size: 24px; vertical-align: middle; margin: 0 4px; }
h3 .transcript .voice:hover { opacity: 0.6; }

.zero { margin: 0; }

	.fs8 { font-size: 8px; }
        .fs10 { font-size: 10px; }
	.fs12 { font-size: 12px; }
	.fs13 { font-size: 13px; }
	.fs14 { font-size: 14px; }
	.fs15 { font-size: 15px; }
	.fs16 { font-size: 16px; }
	.fs17 { font-size: 17px; }
	.fs18 { font-size: 18px; }
	.fs20 { font-size: 20px; }
	.fs30 { font-size: 30px; }
	.flag._x { vertical-align: -10px; }

	.click .flag { vertical-align: -5px; }
	.details .flag { vertical-align: -5px; }
	ul .click .flag { vertical-align: -5px; }
	ul .details .flag { vertical-align: -5px; }

.page.practice h3 { margin: 0; }
.page.practice p { margin-bottom: 0; }

.duo-the-owl-offset { margin: 0 0 0 40px; }
.error { margin: 5px 0 0 40px; }
.finalword { position: absolute; right: 20px; bottom: 20px; color: #ccc; color: #3c3c3c; }

form { width: 100%; margin: 0; }
input.w200px { width: 200px !important; }
input[type='text'] { width: 100%; border: 1px solid #ccc; padding: 4px 23px 4px 8px; transition: border .25s ease-out; }
input[type='text']:focus { border: 1px solid #1caff6; outline: none; }

input[type='submit'] { width: 23px; height: 23px; margin: 0 0 0 -24px; border: none; background: url(/x/less-icons-36-black.png) -51px 3px no-repeat; text-indent: -9999px; cursor: pointer; padding: 0; background-size: 776px; }
input::placeholder { color: #ccc; }
input[placeholder] { text-overflow:ellipsis; }

input.text,
input.search { border: 1px solid #ddd; padding: 3px 5px; background: #f7f7f7; width: 80px; border-radius: 4px; }
input.text { width: auto; }

input.text::placeholder,
input.search::placeholder { color: #ddd; }

#skills input.search { width: 120px; }

.tags { position: relative; }
.tags small { border-radius: 4px; background: #ccc; padding: 1px 5px 2px; color: #fff; display: inline-block; margin: 0 3px 3px 0; cursor: pointer; }
.tags small:hover { background: #999; }
.tags small.on,
.tags small.on:hover { background: #333; }
.tags small.reset { padding: 0px 3px; height: 13px; line-height: 13px; margin: 0; }


.gold { color: #d06700; }
.coin { background: linear-gradient(135deg, #fbb430 0, #fbb430 26%, #faa919 26%, #faa919 39%, #fbb430 39%, #fbb430 52%, #faa919 52%, #faa919 57%, #fbb430 57%, #fbb430 78%, #faa919 78%, #faa919 90%, #fbb430 90%, #fbb430 100%); 
border: 12px solid #faa919; line-height: 100px; font-size: 56px; width: 120px; height: 120px; }


table { border-collapse: collapse; margin: 5px 0; }
.jd table { width: 100%; }

th { padding: 5px 7px; text-align: left; background: #eee; border-bottom: 2px solid #ddd; cursor: pointer; }
td { padding: 5px 7px; }
tr:nth-child(2n+1) { background: #f7f7f7; }

#GoldenOwls th { position: sticky; top: 70px; z-index: 2; border-bottom: unset; box-shadow: 0 -2px rgba(0,0,0,0.067) inset; } /* #ddd */

.hide { display: none; }

	._lime { background: #a5ed6e; }


.flash { -webkit-animation: flash-animation 3s ease-in-out; animation: flash-animation 3s ease-in-out; }

@-webkit-keyframes flash-animation {
  0%   { background-color: lemonchiffon; }
  90%  { background-color: lemonchiffon; }
  100% { background-color: #FFFFFF; } 
}

@keyframes flash-animation {  
  0%   { background-color: lemonchiffon; }
  90%  { background-color: lemonchiffon; }
  100% { background-color: #FFFFFF; } 
}

.updated { background-color: yellow; -webkit-transition: background-color .5s linear; transition: background-color .5s linear; }

	.refresh-word-counts { position: absolute; left: 13px; width:20px; height: 20px; margin: 1px; }
	.parole { position: absolute; width: 20px; height: 20px; background: url(/x/icons-36-black.png) -323px center no-repeat; cursor: pointer; background-size: 776px; }
	.fade.parole { opacity: 0.3; }
	.dark .parole { background: url(/x/icons-36-white.png) -323px center no-repeat; background-size: 776px; opacity: 0.1; }


	.aggiorna { width: 16px; height: 16px; position: absolute; bottom: 8px; right: 8px; display: inline-block; cursor: pointer; }
	.aggiorna.inline { width: 16px; height: 16px; position: relative; display: inline-block; cursor: pointer; bottom: 0; right: 0; vertical-align: middle; 
			    color: #fff;
			    background: #1caff6;
			    padding: 8px;
			    width: 32px;
			    height: 32px;
			    border-radius: 5px;	
			    background: #1caff6 url(/x/icons-36-white.png) -648px center no-repeat;
			    border-radius: 50%;
			}
	.aggiorna.inline.fade { opacity: 0.8; }
	.aggiorna.inline.fade:hover { opacity: 1; }
	.aggiorna.private { background-color: #ccc; transform: scale(0.8); }
	
	.wait4words { width: 32px; height: 32px; position: absolute; top: 10px; left: 10px; display: none; background: #fff url(/x/infinity.gif) center center no-repeat; z-index: 1; }
	.wait { width: 32px; height: 32px; position: absolute; bottom: 34px; right: 39px; display: none; background: #fff url(/x/infinity.gif) center center no-repeat; z-index: 1; }
        .wait16px { width: 16px; height: 16px; position: absolute; bottom: 8px; right: 8px; display: none; background: #fff url(/x/infinity.gif) center center no-repeat; z-index: 1; background-size: 100px; }
        .wait20px { width: 20px; height: 20px; position: absolute; bottom: 0; right: 0; display: none; background: #fff url(/x/infinity.gif) center center no-repeat; z-index: 1; background-size: 128px; }

	.inline .wait { bottom: 0; right: 0; width: 32px; height: 32px; background-size: 218px; }

	.refresh { width: 16px; height: 16px; background: url(/x/icons-36-black.png) -325px center no-repeat; text-indent: -9999px; cursor: pointer; padding: 0; display: inline-block; vertical-align: middle; background-size: 776px; }
  .page>.refresh,
.person .refresh { position: absolute; bottom: 0; right: 0; }

	.refresh.fle { background: #ccc url(/x/icons-36-white.png) -325px center no-repeat; border-radius: 50%; margin: 3px 6px 3px 0px; width: 16px; height: 16px; background-size: 776px;}

	.refresh.quickly { align-self: center; }

	.grid-9 { width: 16px; height: 16px; background: url(/x/icons-36-black.png) -433px -1px no-repeat !important; margin: 0; cursor: pointer; display: inline-block; vertical-align: text-bottom; opacity: 0.2; border: none !important; background-size: 776px !important; }
	.grid-9:hover { opacity: 1; }

	.ai { width: 16px; height: 16px; background: url(/x/icons-36-black.png) -433px -1px no-repeat; margin: 0; cursor: pointer; display: inline-block; vertical-align: text-bottom; opacity: 0.5; background-size: 776px;}
	.ai:hover { opacity: 1; }

	.fresh-x { width: 16px; height: 16px; background: #ccc; border-radius: 50%; margin: 0px; display: inline-block; vertical-align: text-bottom; border: 6px solid #fff; }
	.fresh-x:hover { width: 16px; height: 16px; background: url(/x/icons-36-black.png) -325px -0px no-repeat; margin: 0; cursor: pointer; border: none; background-size: 776px;}
	
	.fresh { width: 16px; height: 16px; cursor: pointer; padding: 0; display: inline-block; vertical-align: middle; text-align: center; vertical-align: 0px; line-height: 16px;  }
	.fresh:hover { background: url(/x/icons-36-black.png) -325px -0px no-repeat; text-indent: -9999px; background-size: 776px; }
	a:target+span .fresh:hover { background: url(/x/icons-36-white.png) -325px -2px no-repeat; text-indent: -9999px; background-size: 776px; }
	.infinity, .infinity:hover { background: #fff url(/x/infinity.gif) center center no-repeat; background-size: 100px; text-indent: -9999px; vertical-align: -1px; }


.fade:hover { opacity: 1; }


strike a { color: #ccc !important; }

.notification { padding: 20px 25px; border: 2px solid #dadada; border-radius: 10px; background: #e9e9e9; color: #999; }
.notification b { color: #3c3c3c; }
.notification p {  }
.success { color: #3c3c3c;}

.notification .close:not(.close-button) {
    width: 25px;
    height: 25px;
    position: absolute;
    top: -10px;
    right: -10px;
    background: #2e2e2e;
    display: block;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    text-indent: -10000px;
    cursor: pointer;

}
.notification .close div { 
    background-image: url(/x/icon-sprite5.svg);
    background-position: -260px -69px;    
    height: 12px;
    width: 12px;
    margin: 6px;
}

.badge-mod {
    background-color: #f0f0f0;
    border-radius: 5px;
    color: #999;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 0 8px;
    position: relative;
    text-align: center;

    line-height: 20px;
    vertical-align: middle;
    margin-left: 5px;
}

.plus,
.user-plus-logo-icon {
    border-radius: 4px;
    display: inline-block;
    height: 20px;
    padding: 5px 8px;
    position: relative;
    vertical-align: middle;

    background: url(/x/plus-logo-dark-blue.svg) center center no-repeat;
    border: 1px solid #eee;
    width: 50px;
    margin-left: 5px; 	
}

.tag { border-radius: 4px ; border: 1px solid #900; ; background: #a00; padding: 2px 6px; color: #fff; display: inline-block; }
.promo { border-radius: 4px ; border: 1px solid #fdd; background: #fee; padding: 5px 10px; color: #d77; margin: 5px 0; }
.extras { font-size: 12px; margin: 5px 0 0 70px; width: 165px; padding: 5px 0 0 0; border-top: 1px solid #eee; }
.extras .ss { margin: 0; }

.mod { border: 4px solid #faa919; }

.footer-main {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 0;
    clear: both;
    width: 100%;
    margin: 0 auto 30px -380px;
    margin: 0 auto 30px auto;
    float: left;
    float: none;
}

.dark .footer-main a { color: #777; }
.dark .footer-main .c000 a { color: #fff; }

.nav-footer {
    text-align: center;
    font-size: 13px;

    padding: 0;
}
.nav-footer.x {
	margin:0 280px 0 0;
}
.nav-footer>li {
    display: inline-block;
    margin: 0 7px;
}
.nav-footer>li a {
    text-decoration: none;
    font-weight: bold;
}

.nav-footer hr { margin: 10px auto; border-bottom: 1px solid rgba(0,0,0,0.1); width: 600px; }

.fle { float: left; margin: 0 20px 0 0; }
.fri { float: right; margin: 0 0 0 20px; }

.fle+ul { overflow: hidden; }

.blue-button{background:#1caff6;color:#fff;}
.blue-button:hover{background:#3ebbf7;}
.green-button{background:#7eb530;color:#fff;}
.green-button:hover{background:#94c500;}
.white-button{background:#fff;color:#1caff6;}
.white-button:hover{background:hsla(0,0%,100%,.9)}


.bluBox {
    background: linear-gradient(170deg,#20a2e2,#79d9e8);
    border-radius: 10px;
    margin: -35px -40px -40px;
    text-align: center;
}
.blueBox {
    background: linear-gradient(170deg,#20a2e2,#79d9e8);
    border-radius: 10px;
    color: #fff;
    height: 340px;
    padding: 0 30px;
    text-align: center;
    width: 340px;
}

textarea { border: 2px solid #ebebeb;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    /*font: 500 15px/20px "museo-sans-rounded",sans-serif;*/
    color: #3c3c3c;
    padding: 8px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    resize: vertical;
    -webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    -webkit-font-smoothing: antialiased;
    text-align: left;
    display: block;
    white-space: pre-wrap;
    
    width: 100%;
    height: 40px;
    outline: none;
    font: 500 15px/20px "PT Sans",sans-serif;
    }

input[type=text].shadow {
    border: 2px solid #ebebeb;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    /* font: 500 15px/20px "museo-sans-rounded",sans-serif; */
    color: #3c3c3c;
    padding: 8px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 2px 5px rgb(0 0 0 / 5%);
    -moz-box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 5%);
    -webkit-font-smoothing: antialiased;
    text-align: left;
    display: inline-block;
    white-space: pre-wrap;
    height: 30px;
    height: 40px;
    outline: none;
    font: 500 15px/20px "PT Sans",sans-serif;
    font: 800 20px/22px "PT Sans",sans-serif;
}
.shadow.no { color: #ea2b2b; }
.shadow.yes { color: #58cc02; color: #58a700; }

.practice .clicks:hover, { text-decoration: underline; }
.practice small .clicks { text-decoration: underline; }

.shadow::placeholder { font-weight: normal; font-size: 16px; }

.word-type { width: 200px; margin: 5px; display: inline-block; vertical-align: top; text-align: center; color: #ccc; }
.word-type input { text-align: center !important; }
.word-hint { font: 800 12px/14px "PT Sans"; text-transform: uppercase; color: #1cb0f6; vertical-align: middle; cursor: pointer; }
.word-check { font: 800 12px/14px "PT Sans"; text-transform: uppercase; color: #1cb0f6; vertical-align: middle; cursor: pointer; }
.word-reveal { font: 800 12px/14px "PT Sans"; text-transform: uppercase; color: #1cb0f6; vertical-align: middle; cursor: pointer; }

.serif { font-family: 'PT Serif'; }
.noto-serif { font-family: 'Noto Serif'; }


textarea::placeholder { color: #ccc; font: 500 15px/20px "PT Sans",sans-serif; }
#post-text-box { min-height: 40px; overflow: hidden; word-wrap: break-word; resize: none; /*height: 40px;*/ }
textarea+inpit[type=submit]{ padding: 3px 15px; height: 34px; font: 18px 'PT Sans'; font-weight: bold; margin: 0; position: absolute; bottom: 33px; right: 3px; color: #fff; background: #ccc; border: none; border-radius: 20px; border-radius: 3px; cursor: pointer; outline: none; }
	textarea+button { padding: 3px 15px; height: 34px; font: 18px 'PT Sans'; font-weight: bold; margin: 0; position: absolute; bottom: 33px; right: 3px; color: #fff; background: #ccc; border: none; border-radius: 20px; border-radius: 3px; cursor: pointer; outline: none; }
__textarea:focus+button { background: #7eb530; } 
__textarea+button:focus { background: #7eb530; } 
__textarea+button:disabled { background: #ccc; }
textarea+button.verde { background: #7eb530; /*bottom: -6px;*/ }
textarea:focus { /*height: 100px;*/ }

.emotions { display: none; }
.emotions ul { text-align: left; list-style: none; margin: 0 0 0 5px; padding: 0; }
.emotions ul li { margin: 0 0 10px 0; }
.emotions ul li:last-child { margin: 0 0 20px 0; }

div.emo { padding: 20px; border-radius: 10px; background: #f7f7f7; }
form.emotion {  }
div.emotions { padding: 20px; border-radius: 10px; background: #f7f7f7; margin: 5px 0 0 0; }
div.emotions li { display: flex; }
div.emotions li b.who { margin: 0 10px 0 0; }

__form.emotion textarea { width: calc(100% - 70px); }
form.emotion textarea+button { bottom: 53px; right: 23px; }
form.reaction { }
form.reaction textarea+button { bottom: 53px; right: 23px; }

div.emotion div { /*font-size: 14px;*/ color: #999; }
div.actions { text-align: right; font-size: 14px; color: #999; margin: -18px 0 0 0; }
div.actions span { padding: 0 3px; cursor: pointer; }
div.actions span:hover { color: #555; }

.fav { display: inline-block; /*background: url(/x/icons-36-black.png) -936px -2px no-repeat;*/ width: 32px; height: 32px; vertical-align: middle; cursor: pointer; color: #333; font-size: 10px; } 
.star { display: inline-block; background: url(/x/icons-36-black.png) -936px -2px no-repeat; width: 32px; height: 32px; vertical-align: middle; cursor: pointer; opacity: 1;    transition: opacity .25s ease-out; } 
.star.off { opacity: 0.2; } 
.star.off:hover { opacity: 0.4; } 

__textarea.txta { width: 100%; max-width: 700px; min-height: 40px; /*font-family: Arial, sans-serif; font-size: 16px; line-height: 1.4;  */ overflow: hidden; }

#GoldenOwls { margin: 0 0 20px 0; width: 100%; font-size: 13px; }
.justify { text-align: justify; }

h2.cCCC { color: #ccc !important; }
h2.cCCC .cEEE { color: #eee !important; }

.gallery { width: 200px; float: left; margin: 0 20px 0 0; }
.gallery img { max-width: 100%; }

.block { overflow:hidden;}
.____buy { background: #a00; background: #89C64E; border-radius: 5px; padding: 5px 10px; display: inline-block; color: #fff !important; font-weight: bold; text-decoration: none; margin: 10px 0 0 0; }
.____button { position: absolute; bottom: 5px; right: 5px; border-radius: 50%; border: 1px solid #ddd; background: #fff; outline: none !important; color: #ddd; }
.____button:hover { background: #e9e9e9; }

span.sort { margin: 0 5px; padding: 2px 0; border-bottom: 1px dashed #ccc; color: #ccc; cursor: pointer; font-weight: normal; }
span.sort.asc,
span.sort.desc,
span.sort.asc:hover,
span.sort.desc:hover { border-bottom: 1px dashed #333; color: #333; } 
span.sort:hover { border-bottom: 1px dashed #999; color: #999; } 

.xa:target+span.esta { background: url(/x/less-icons-36-black.png) -57px -3px no-repeat; height: 12px; width: 12px; display: inline-block; margin: 0 0 0 -12px; background-size: 776px; }
.xa:target~* { font-size: 20px; }


.work { background: #1caff6 url(/x/dumbbell.svg) 5px 6px no-repeat; height: 24px; width: 24px; display: inline-block; text-indent: -9999px; background-size: 14px; border-radius: 50%; }
.work:hover { background-color: #3ebbf7; }
.work.gold { background: linear-gradient(135deg,#fbb430,#fbb430 26%,#faa919 0,#faa919 39%,#fbb430 0,#fbb430 52%,#faa919 0,#faa919 57%,#fbb430 0,#fbb430 78%,#faa919 0,#faa919 90%,#fbb430 0,#fbb430);
     background-color: #fbb430; background-image: url(/x/dumbbell.svg); 
	background-size: 14px; background-repeat: no-repeat; background-position: 5px 6px; }
.work.red { background-color: #dd381d; } /* #e53b3b - new */
.work.green { background-color: #7eb530; } /* #7ac70c - new */
.work.blue { background-color: #1caff6; } /* old */
.work.purple { background-color: #9b5fca; } /* #a560eb - new */
.work.gray { background-color: #f0f0f0; } /* old */
.work.orange { background-color: #fa811b; } /* new */
.work.legendary { background-color: #5c6cfc; }

.bulb { background: url(/x/lightbulb.svg) 6px 5px no-repeat; height: 24px; width: 24px; display: inline-block; text-indent: -9999px; background-size: 12px; border-radius: 50%; vertical-align: middle; }
.key { background: url(/x/key.svg) 6px 6px no-repeat; height: 24px; width: 24px; display: inline-block; text-indent: -9999px; background-size: 12px; border-radius: 50%; vertical-align: middle; }
.x24 { height: 24px; width: 24px; display: inline-block; vertical-align: middle; }
.words { background: #999; height: 8px; width: 8px; display: inline-block; text-indent: -9999px; border-radius: 50%; vertical-align: middle; margin: 8px; }
.word { color: #ff9933 !important; text-decoration: none; border-bottom: 2px dotted #ff9933; }
span.word { cursor: pointer; }
h3 .word { display: inline-block; }


.bulb.red { background-color: #dd381d; } /* #e53b3b - new */
.bulb.green { background-color: #7eb530; } /* #7ac70c - new */
.bulb.blue { background-color: #1caff6; } /* old */
.bulb.purple { background-color: #9b5fca; } /* #a560eb - new */
.bulb.gray { background-color: #f0f0f0; } /* old */
.bulb.orange { background-color: #fa811b; } /* new */
.bulb.legendary { background-color: #5c6cfc; }
.bulb.gold { background: linear-gradient(135deg,#fbb430,#fbb430 26%,#faa919 0,#faa919 39%,#fbb430 0,#fbb430 52%,#faa919 0,#faa919 57%,#fbb430 0,#fbb430 78%,#faa919 0,#faa919 90%,#fbb430 0,#fbb430);
     background-color: #fbb430; background-image: url(/x/lightbulb.svg); 
	background-size: 12px; background-repeat: no-repeat; background-position: 6px 5px; }
_bulb:hover { background-size: 14px; background-position: 5px 3px; }
/*background: hsla(0,0%,100%,.15); */


.key.red { background-color: #dd381d; } /* #e53b3b - new */
.key.green { background-color: #7eb530; } /* #7ac70c - new */
.key.blue { background-color: #1caff6; } /* old */
.key.purple { background-color: #9b5fca; } /* #a560eb - new */
.key.gray { background-color: #f0f0f0; } /* old */
.key.orange { background-color: #fa811b; } /* new */
.key.legendary { background-color: #5c6cfc;}
.key.gold { background: linear-gradient(135deg,#fbb430,#fbb430 26%,#faa919 0,#faa919 39%,#fbb430 0,#fbb430 52%,#faa919 0,#faa919 57%,#fbb430 0,#fbb430 78%,#faa919 0,#faa919 90%,#fbb430 0,#fbb430);
     background-color: #fbb430; background-image: url(/x/key.svg); 
	background-size: 12px; background-repeat: no-repeat; background-position: 6px 6px; }

.skill { background: url(/x/skill-icons-unlocked2.svg) 2px 2px no-repeat; height: 24px; width: 24px; display: inline-block; background-size: 200px; border-radius: 50%; vertical-align: middle; margin: 4px 4px; margin: 0px; }
.skill-cell .skill { background: url(/x/skill-icons-unlocked2.svg) 2px 2px no-repeat; height: 26px; width: 26px; display: inline-block; background-size: 200px; border-radius: 50%; vertical-align: middle; margin: 4px 4px; margin: 0px; border: 1px solid #fff; }
.dark .skill-cell.gray .skill { border: 1px solid #444; border: 1px solid #777; }

.skill-cell .guidebook { display: none; }
.skill-cell.semi .guidebook, 
.skill-cell.clicked .guidebook { display: block; position: absolute; top: 4px; right: 4px; background-color: #0002; cursor: pointer; }

._____shift .skill:hover { background-image: url(/x/dumbbell.svg); background-size: 14px; background-repeat: no-repeat; background-position: 5px 6px; }

.skill.red { background-color: #dd381d; }
.skill.green { background-color: #7eb530; }
.skill.blue { background-color: #1caff6; }
.skill.purple { background-color: #9b5fca; }
.skill.orange { background-color: #fa811b; }
.skill.legendary { background-color: #5c6cfc; }
.skill.gray { background-color: #f0f0f0; background-image: url(/x/skill-icons-locked2.svg); background-size: 200px; }
.dark .skill.gray { background-color: #fff3; }
.skill.gold { background: linear-gradient(135deg,#fbb430,#fbb430 26%,#faa919 0,#faa919 39%,#fbb430 0,#fbb430 52%,#faa919 0,#faa919 57%,#fbb430 0,#fbb430 78%,#faa919 0,#faa919 90%,#fbb430 0,#fbb430);
     background-color: #fbb430; background-image: url(/x/skill-icons-gold2.svg); background-size: 200px; }


.skill.sk { background-position: 2px 2px; opacity: 0.2; }
.skill.skx { margin:0; width:0; }

.skill.sk1 { background-position: 2px 2px; }
.skill.sk2 { background-position: -18px 2px; }
.skill.sk3 { background-position: -38px 2px; }
.skill.sk4 { background-position: -58px 2px; }
.skill.sk5 { background-position: -78px 2px; }
.skill.sk6 { background-position: -98px 2px; }
.skill.sk7 { background-position: -118px 2px; }
.skill.sk8 { background-position: -138px 2px; }
.skill.sk9 { background-position: -158px 2px; }
.skill.sk10 { background-position: -178px 2px; }

.skill.sk11 { background-position: 2px -18px; }
.skill.sk12 { background-position: -18px -18px; }
.skill.sk13 { background-position: -38px -18px; }
.skill.sk14 { background-position: -58px -18px; }
.skill.sk15 { background-position: -78px -18px; }
.skill.sk16 { background-position: -98px -18px; }
.skill.sk17 { background-position: -118px -18px; }
.skill.sk18 { background-position: -138px -18px; }
.skill.sk19 { background-position: -158px -18px; }
.skill.sk20 { background-position: -178px -18px; }

.skill.sk21 { background-position: 2px -38px; }
.skill.sk22 { background-position: -18px -38px; }
.skill.sk23 { background-position: -38px -38px; }
.skill.sk24 { background-position: -58px -38px; }
.skill.sk25 { background-position: -78px -38px; }
.skill.sk26 { background-position: -98px -38px; }
.skill.sk27 { background-position: -118px -38px; }
.skill.sk28 { background-position: -138px -38px; }
.skill.sk29 { background-position: -158px -38px; }
.skill.sk30 { background-position: -178px -38px; }

.skill.sk31 { background-position: 2px -58px; } /*handshake*/
.skill.sk32 { background-position: -18px -58px; } /*rocket*/
.skill.sk33 { background-position: -38px -58px; } /*heart*/
.skill.sk34 { background-position: -58px -58px; } /*suit*/
.skill.sk35 { background-position: -78px -58px; } /*talk*/
.skill.sk36 { background-position: -98px -58px; } /*plane*/
.skill.sk37 { background-position: -118px -58px; } /*skull*/
.skill.sk38 { background-position: -138px -58px; } /*patch*/
.skill.sk39 { background-position: -158px -58px; } /*mountain*/
.skill.sk40 { background-position: -178px -58px; } /*gear*/

.skill.sk41 { background-position: 2px -78px; } /*box*/
.skill.sk42 { background-position: 2px -78px; } /*box?*/

.skill.sk43 { background-position: -18px -78px; } /*thumb*/

	.skill.sk44 { background-position: -38px -78px; } /*bee*/

.skill.sk45 { background-position: -58px -78px; } /*directions*/
.skill.sk46 { background-position: -78px -78px; } /*crown*/
.skill.sk47 { background-position: -98px -78px; } /*chameleon*/
.skill.sk48 { background-position: -118px -78px; } /*chat*/
.skill.sk49 { background-position: -138px -78px; } /*mouth*/

	.skill.sk50 { background-position: -158px -78px; } /*rain*/
	.skill.sk51 { background-position: -178px -78px; } /*glasses*/

.skill.sk52 { background-position: 2px -98px; } /*runner-white*/
.skill.sk53 { background-position: -18px -98px; } /*runner-blue*/

	.skill.sk54 { background-position: -38px -98px; }

.skill.sk63 { background-position: -58px -98px; } /*thoughts*/
.skill.sk64 { background-position: -78px -98px; } /*lips*/
.skill.sk65 { background-position: -98px -98px; } /*santa*/

	.skill.sk66 { background-position: -118px -98px; } /*chinese-lights*/
	.skill.sk67 { background-position: -138px -98px; }
	.skill.sk68 { background-position: -158px -98px; }
	.skill.sk69 { background-position: -178px -98px; }


.all.sks .hint { bottom: -25px; }
.all.skl .hint { bottom: -25px; }
span.sks { width: 52px; height: 14px; background: #ffc76633; margin: 0 2px 0 0; display: inline-block; border: none !important; text-align: center; color: #ffc766; font-size: 10px; position: relative; cursor: default; }
span.skl { width: 37px; height: 14px; background: #ffc76633; margin: 0 2px 0 0; display: inline-block; border: none !important; text-align: center; color: #ffc766; font-size: 10px; position: relative; cursor: default; }
/*span.sks:before { display: inline-block; padding: 3px; position: absolute; bottom: -15px; left: 0; right: 0; opacity: 0.8; }
span.sks:first-child:before { content: '@ 100%'; }
span.sks:nth-child(2):before { content: '@ 75%'; }
span.sks:nth-child(3):before { content: '@ 50%'; }
span.sks:nth-child(4):before { content: '@ 25%'; }
span.sks:nth-child(5):before { content: '@ 0%'; }*/

span.sks:first-child { background: #ffc76655; }
span.sks:nth-child(2) { background: #ffc76644; }
span.sks:nth-child(3) { background: #ffc76633; }
span.sks:nth-child(4) { background: #ffc76622; }
span.sks:nth-child(5) { background: #ffc76611; }


body.dark { background: #444; color: #000; color: #777; /*color: #999;*/ /*background: #202f36;*/ }
body.dark .page { background: #333; /*background: #131f24;*/ }
body.dark .white.flag:before { border-color: #2d2d2d; }

body.dark th { background: #222; }
body.dark tr:nth-child(2n+1) { background: rgba(255,255,255,0.033); }

.dark .person h1 { color: #fff; }

body.dark .notification { border-color: #555; border-color: #2d2d2d; border-color: #5a5a5a; background: #555; }
body.dark .notification b { color: #222; }
body.dark b { color: #bbb; }
body.dark .raw { background: #000; color: #fff; }
body.dark .q { background: #000; color: #fff; }
body.dark li.this { background: #2d2d2d; /*border: 1px solid rgba(0,0,0,0.1);*/ }
body.dark ul.stream>li>div { border-left: 3px solid rgba(0,0,0,0.2); }
body.dark span.r5w { border: 5px solid #333; }
body.dark .page small.uin { color: rgba(0,0,0,0.3); }
body.dark textarea { border: 2px solid rgba(0,0,0,0.2); background: rgba(255,255,255,0.03); color: #000; }
body.dark .stats span:first-child { border-bottom: 2px solid rgba(0,0,0,0.1); }
body.dark .all { background: rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.1); }
body.dark .full { background: #d06700; }
body.dark .cCCC,

.dark .cCCC * { color: rgba(0,0,0,0.3); color: #555; color: #fff2; } 
.dark #recent .cCCC { color: #fff2; }

body.dark .cEEE { color: rgba(255,255,255,0.1) !important; } 
body.dark .person .xp { background-position: -1px -41px; width: 28px; height: 28px; border: 3px solid white; box-sizing: content-box; border-radius: 50%; }
body.dark .spot { background: #222; border-color: #333; }
body.dark .spot.white { background: #333; }
body.dark .spot .flag:before { border-color: #333; }


.clipboard { width: 20px; height: 20px; background: #ddd url(/x/icons-36-black.png) -431px center no-repeat; border: none; border-radius: 4px; vertical-align: middle; cursor: pointer; background-size: 776px;}
.clipboard:hover { background-color: #ccc; } 
.dark .clipboard { background: #555 url(/x/icons-36-white.png) -431px center no-repeat; background-size: 776px;}
.dark .clipboard:hover { background-color: #676767; }

form#addstories { padding: 0 0 40px 0; }
textarea#stories { min-height: 100px; }
textarea#stories+button { bottom: 40px; right: 45px;  }
.getLinks { padding: 3px 15px; height: 34px; font: 18px 'PT Sans'; font-weight: bold; margin: 0; position: absolute; bottom: 40px; right: 45px;
color: #fff; background: #ccc; border: none; border-radius: 20px; border-radius: 3px; cursor: pointer; outline: none; }

.dark canvas { filter: invert(1) hue-rotate(320deg); }
.dark .flag:before { border-color: #444; }
.dark nav .flag:before { border-color: #fff; }

.dark #notify { background: #474747; background: #0002; background: #ffffff07; }
.dark .plus { border-color: #eee1; background-color: #eee1; }
.dark .fancybox-content { background: #444; }

.fancybox-content { max-height: 100%; }
#raw.fancybox-content { max-height: none; }

iframe,
.fancybox-iframe { max-width: 800px !important; }

.seamless { margin: 0 auto; }
.seamless .page { margin: 0 auto; border-radius: 0px; max-width: 800px; }












@media screen and (max-width: 1120px) { 

.paddedSkills .columns { column-count: 3; }
body>header nav ul.forum { left: -390px; }

}

@media screen and (max-width: 960px) { 

.flexi .page:first-child { min-width: auto; }
.flexi .page:nth-child(2) { min-width: 400px; }

._flexi .page:nth-child(2) h4 .owl { left: 165px; }

.cFrame { width: 100%; margin: 0; }
.cWide { width: 910px; }

#notify { display: flex; }
#notify div { align-self: center; position: relative !important; bottom: auto !important; padding-left: 0 !important; }
#notify div:nth-child(2) { margin-left: 10px; }
}

@media screen and (max-width: 900px) {

.paddedSkills .columns { column-count: 2; }
 
.xBar.skillz { margin:0; min-width: 1px; }
.flexi { background: #fff; border-radius: 10px; }
.dark .flexi { background: #444; }
.flexi .page { margin: 0 !important; box-shadow: none; }
nav .patreon { display: none; }

}

@media screen and (max-width: 768px) { 

.fancybox-slide { padding: 0px !important; }
.phrase.dialogue { margin: 0px !important; }

ul.columns { column-count: auto; }
ul.plain.days { display: flex; }
ul.plain.days li h2 { display: inline; }
ul.plain.days li:before { content: " • "; margin: 0 0 0 10px; vertical-align: 3px; }
ul.plain.days li:first-child:before { content: ""; margin: 0; }


.flag.xl { margin: 26px !important; }

/*body>header nav { width: 100%; max-width: auto; margin: 0 auto; text-align: left; }*/

.sx table { width: 100%; font-size: 12px; }

.nxt { right: 20px; }

.o.duo { left: 20px; }


#GoldenOwls td,
#GoldenOwls th { padding: 3px; }

body { background: #fff; }

.nav-footer { margin-top: 40px; }
.nav-footer.x { margin: 40px auto 0 auto; }
.nav-footer hr { width: 90% }
.nav-footer>li { margin: 0 2px; font-size: 12px; font-size: 11px; }
.nav-footer>li.mHide { display:none; }

li.this { margin: 0 -20px 0 -25px; border-left: unset; border-right: unset; padding: 5px 20px 10px 25px; }

.tabbed > input + section > h1 > label { padding: 5px 10px; }

.tabbed > input 		+ section > h1 > label[for=tabPath] { width: 51px; }
.tabbed > input:not(:checked) + section > h1 > label[for=tabPath] { width: 51px; }

label[for=tabPath]+small { margin: -1px 0 0 -17px; } 
.tabbed > section > div { padding: 10px 20px; }

.flexi .page:nth-child(2) h4 .owl { top: 80px; left: 210px; }

.__page { margin: 10px auto;  }
.page { border-radius: 0; padding: 20px; box-shadow: none; margin: 0; width: 100%; }
.this { margin-left: }

.jd.page > img { width: 100%; height: auto; }
.jd.page { padding: 0;} 

.page > p > img { width: 100%; height: auto;  }

.block { padding: 20px; }
.gallery { width: 100%; height: auto; float: none; margin: 0; }
.wide { display: none; }

a:target+span { height: auto;}

.centered { width: 100%; height: 100%; min-width: auto; min-height: auto; }
.cc { bottom: -40px; width: 230px; text-align: right; display: none; }

.mHide { display: none; }

div.actions { margin: 0; }
#post-text-box { min-height: 80px; }

#answer,
#prediction { width: 90%; }

#notify { margin-bottom: 50px; margin-left: 10px; margin-right: 10px; }

li.shift .crown+small { display: inline-block; min-width: auto; }
li .crown+small { display: inline-block; min-width: auto; }

body { margin: 0; }
.flex { flex-flow: column; }
.flexi { flex-flow: column; }
.flexi { margin: 0; }

.flexi .page:first-child { min-width: auto; }
.flexi .page:nth-child(2) { min-width: auto; padding: 20px; }
.flexi .page { width: 100% !important; margin: 0 !important; }

.v { margin: 0; }
.v .page:nth-child(2) { margin: 0 !important; padding: 30px !important; }

#words ul.plain { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }

.tabbed label { border-radius: unset; }
.tabbed { border-radius: unset; border-top: 1px solid #ddd; }

.page.tip div.cFlex { max-width: 100%; }
.page.tip img { width: 100%; }

body>header nav li.patreon { margin: 0 0 0 0px; }



}

@media screen and (max-width: 600px) {

.paddedSkills .columns { column-count: 1; }

nav {position: relative; }
  .navi {
    position: absolute;
    display: block;
    right: 20px;
    top: 0;
  }
  nav.responsive a {
/*    float: none;
    display: block;
    text-align: left;*/
  } 

li.patreon { width: 92px; background: white; }

.page.practice { min-width: auto; }

body { margin: 0; }
.flexi { margin: 0; }
.page { border-radius: 0; padding: 20px; box-shadow: none; margin: 0; width: 100%; }

.bChart { margin: 0 0 30px 0; }
.skillz.xBar { position: initial; }
.skillz.xBar .all { bottom: 20px; left: 0; right: 0; width: 100%; }


form.emotion { padding-bottom: 60px; }

._all { width: calc(100% - 5px); }
ul._plain.c li { white-space: nowrap; }

ul.plain .all, 
ul.plain.c .all, 
ul.plain .all+small,
ul.plain.c .all+small { margin-left: 5px; }

.search { display: none; }

.social { right: 20px; }
.owl { margin: 2px; margin-bottom: 20px; }
.cell { width: 55px; }
aside { position: static; width: auto; }
ul.hof { padding: 0 0 0 20px; }
._stats { clear: left; padding: 20px 0 0 45px; }
.stats+.stats { padding: 20px 0 0 45px; }
.flex { flex-flow: column; }
.flexi { flex-flow: column; }

.flexi._end > div:nth-child(2) { margin: 0 0 0 10px; }

.login { top: 5px; right: 5px; }
li .ts { display: none; }
li.shift { margin: 0; }
div.canvas.fle { margin: 0; }

.flexi .page:first-child { min-width: auto; }
.flexi .page:nth-child(2) { min-width: auto; padding: 20px; }
.flexi .page { width: 100% !important; margin: 0 !important; }

.snapshot { }

._sessions { display: none; }
.sessions { max-width: 320px; overflow: hidden; white-space: nowrap; }
/*.xBar { min-width: 40px; font-size: 8px; }
.xBar > span { bottom: -20px; }*/
.xBar { min-width: 39px; font-size: 8px; }
.xPin { min-width: 2px; margin: 0; }
.wrapper { overflow-x: auto; }
.wrapper > div { width: 450px; }

}

@media screen and (max-width: 375px) {
.xBar { min-width: 33px; font-size: 8px; } 
.person h2 { font-size: 19px; }
ul.languages > li > small { /*font-size:12px;*/ }
}


@media print {

body { background: #fff; }

#notify,	
.notification { display: none; }
.blu { display: none; }
h4.tips { page-break-before: always; } /* page-break-after works, as well */
ul.tips { display: block; }

.tabs { border-radius: unset; }
.tabbed { border-radius: unset; background: #eee; }
.tabbed label { border-radius: 0 !important; box-shadow: none; border: none; }
.tabbed input + section,
.tabbed input + section > div { display: none; }
.tabbed input:checked + section,
.tabbed input:checked + section > div { display: block; box-shadow: none; }
/*.tabbed hr { page-break-before: always; }*/


section { box-shadow: none; border-radius: unset; }
.page { box-shadow: none; border-radius: ; }
.login,
.footer-main { display: none; }


/*table { width: 100%; }*/

}