h2{color:var(--text-header);}
.orangeCTA, .oCTA{border: 4px solid #E38F1D; background-color: rgb(255,237,201); -webkit-box-shadow: 3px 7px 40px -13px #353535; box-shadow: 3px 7px 40px -13px #353535;}
.blueCTA, .bCTA{ border: 4px solid #008ab6; background-color: #d3f4ff; -webkit-box-shadow: 3px 7px 40px -13px #353535; box-shadow: 3px 7px 40px -13px #353535; color: #086e8f;}
.stoUI {font-size: 1.1em; font-weight: bold; color: #2d495f;}
.stoUI th {font-size: 1.3em; text-decoration: underline; color: #558798;}
.stoUI h2,.stoUI h3 {border-bottom: none;}
.stoUICheckbox label{padding: 5px 18px; margin:-2px 0px; width:auto;}
.stoUICheckbox label:hover{cursor:pointer; background: var(--bg-settingsBoxBorder); border-radius:8px;}
.stoUIHeader{background-color:#084563; border:1px solid #053C5C; color: #d1e3ed;}
.stoUIContent, /*.stoUIClickable option*/{background-color:#93c3cd; border:1px solid #a6c9e2; color: #222;}
.stoUIClickable option{background:white;}
.stoUIClickable, .stoUIClickable select, .stoUIradio label span, .stoUImenu ul li{background: #93c3cd; background: repeating-linear-gradient( 135deg, #93c3cd, #93C2CC 1px, #9DC9D1 5px); border: 1px solid #739497; color:#2d495f; padding: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.stoUIClickableDark, .stoUIClickableDark select, .stoUIradioDark label span, .stoUImenuDark ul li{background: #5998a9; border-color: #09637b; color: #004659;}
.stoUIClickable:hover, .stoUIradio input:hover + span, .stoUImenu ul li:hover{background: #fae8b6; border: 1px solid #739497; color:#1d5987; font-weight:bold; cursor: pointer;}
.stoUIClickableDark:hover, .stoUIradioDark input:hover + span, .stoUImenuDark ul li:hover{background: #68aabb;}
.stoUIClickableRed, .stoUIClickableRed select, .stoUIradioRed label span, .stoUImenuRed ul li{background: #fda1a1; border-color: #7b0909; color: #590000;}
.stoUIClickableRed:hover, .stoUIradioRed input:hover + span, .stoUImenuRed ul li:hover{background: #e07171; color: #590203; border-color: #310000;}
.stoUIClickableGreen, .stoUIClickableGreen select, .stoUIradioGreen label span, .stoUImenuGreen ul li{background: #86da90; border-color: #00610b; color: #004207;}
.stoUIClickableGreen:hover, .stoUIradioGreen input:hover + span, .stoUImenuGreen ul li:hover{background: #65c370; color: #003506; border-color: #003506;}
.stoUIClickable:active, .stoUIradio input:checked + span, .stoUImenu ul li.active {background: #f6bd6b; background: repeating-linear-gradient( 135deg, #f6bd6b, #f6bd6b 1px, #ECB76F 5px); border: 1px solid #739497; color:#4A2C02; font-weight:bold;}
.stoUIClickable:disabled{filter: grayscale(1); opacity: 0.5;}

.stoUIClickable.solidColor, .stoUIClickable.solidColor select{background: #2a6271; border-color: #09637b; color: #004659;}
.stoUIClickable.solidColor.whiteTxt, .stoUIClickable.solidColor.whiteTxt select{color: #fff;}
.stoUIClickable.solidColor:hover{background: #175667;}

.stoUIClickable.cancelBtn{background: #fff; border-color: #aaa; color:#777;}

.stoUIradio label{overflow:auto; display:inline-block; position: relative; width:170px; margin:4px; cursor:pointer; }
.stoUIradio label input{visibility: hidden;}
.stoUIradio label span{text-align:center; padding:4px; margin:0; display:block;}
.stoUIradio label span h3{margin:0;}

.stoUIradio .radioRight{margin-left: -9px;}
.stoUIradio .radioLeft{margin-right: -9px;}
.stoUImenu .radioRight{margin-left: -2px;}
.stoUImenu .radioLeft{margin-right: -2px;}
.stoUIradio .radioRight > span, .stoUImenu .radioRight{-webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;}
.stoUIradio .radioLeft > span, .stoUImenu .radioLeft{-webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;}
.stoUIradio .radioMiddle > span, .stoUImenu .radioMiddle > li{-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}
.stoInfoBox, .stoStatusBox{/*display:inline-block; padding: 10px 25px;*/ border: 2px solid #7CB9CE; background-color: #DFF4FF; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
#listOfClasses .usfContainer{border-radius: 15px;}
.stoStatusBox{border-color:#005e7c; background:#ebf5fa;}
.stoStatBoxFloatRight{width:500px; margin-right:4%; float:right; clear:both;}
.STO_botDivide{border-bottom: 1px solid #A4D3E3; padding-bottom:10px; margin-bottom:15px; margin-left: 10%; margin-right: 10%;}
.stoInfoBox .stoInfoTitle{background-color: #7CB9CE; color: #11485B; width: 100%;}
.stoStatusBox .stoStatBoxTitle{background:#005e7c; color:#fff; width:100%;}
.stoStatusBox .stoStatBoxTitle > *{border:none; margin:0;}
.stoStatusBox .stoStatBoxBody{padding:4px 15px;}
.stoTT{ position:absolute; width:290px; height:290px; z-index: 150; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display:none; font-size:16px; overflow: hidden;}
.stoTT .warn, .stoTT .success, #userTypingInfoBlurb .warn, #userTypingInfoBlurb .success{color: #FFFFFF; border: 1px solid #A80000; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.37); border-radius: 11px; background: #F82626;}
.stoTT .success, #userTypingInfoBlurb .success{ border: 1px solid #206807; background: #60b044;}
.keyboard .stoTT .success{width:65%;}
.stoTT .divider{ border-bottom: 2px solid #666; margin: 0px 12px; padding:4px 0px; font-size:1.1em;}
.stoTT .mStat, .stoTT .large_mStat{ padding:18px 0px; font-size:1.8em; line-height: normal; font-weight:bold;}
.stoTT .large_mStat{ font-size: 2em; padding: 8px 0px 0px;}
.keyboard .stoTT .large_mStat{ padding-bottom:10px;}
.stoTT .mStat > span {display:inline-block; padding: 0px 10px; margin:0px 8px; width: 108px;}
.stoTT .mStat .noteSmall{ font-size:14px; width: 28px;}
.lessonButton .stoTT .divider, .stoTT .topTitle{font-size:1.5em; font-weight: bold; padding: 10px 0px 20px 0px;}
.stoTT .topTitle, .stoTT .attention{width:100%; margin:0;}
.stoTT .attention {font-size:1.3em; font-weight:bold; padding: 7px 0px 10px; margin: 0; bottom: -10px; position: relative;}
#kbDiv.hideAcc .stoTT .accToHide, #kbDiv.hideSpd .stoTT .spdToHide, #kbDiv.hideAcc .accToHide, #kbDiv.hideSpd .spdToHide{ display:none;}
#kbDiv .stoTT .divider{font-family: TexGyreCursor-Bold, Courier, monospace; font-size:1.8em; font-weight: bold; padding: 10px 0px 20px 0px;}
.stoTT .splitCol{padding-bottom:8px; line-height: normal;}
.stoTT .splitCol > div {font-weight:bold;}
.stoTT .splitCol > span{padding:0px 20px; font-size:1.2em;}
.stoTT .align{text-align:left; line-height: normal;}
.stoTT .align span{display: inline-block; text-align:right; width:57%; padding:3px 8px 4px 0px;}
.stoTT .align .noteSmall{width:auto;}
#kbDiv #keysFilled .stoTT{color:black; text-align:center; font-size:1.2em; display: none; top:-253px; margin-left: -30px; padding: 10px; position: absolute; z-index: 1000; width:230px; height:240px;}
#kbDiv #keysFilled .stoTT .mStat{font-size:1.6em;}
#kbDiv #keysFilled .stoTT .mStat > span{padding:0;}
#kbDiv #keysFilled .stoTT .align{font-size:0.8em;}
#kbDiv #keysFilled .stoTT .align span{width:59%; padding:2px 9px;}
#kbLegend .stoTT div{padding-bottom: 12px;}
#kbLegend .stoTT .keySpdRange div{padding-bottom: 0px; margin-top: 20px;}
/*#keysFilled .stoTT, .lessonButton */.stoTT{height:282px; top:-230px; width: 320px; font-weight:normal; font-size:16px;}
.key:hover .stoTT, div[class^="p"]:hover .stoTT, #kbDiv #keysFilled .keyRows div[class^="p"]:hover > span, #kbDiv #keysFilled .keyRows div[class^="p"]:hover > div { display: block;}

.stoProgBar{display: inline-block; width: 100%; height: 30px; border-radius: 5px; text-align: left; overflow: hidden; background: #c9f1ff; border: 1px solid #02729b; margin-bottom:0px; white-space:nowrap}
.stoProgBar > span{display: inline-block; height: 100%; font-weight: bold; text-align: left; overflow: visible; padding-left: 6px; background: #59afca; color: #003849; line-height:29px;}
.stoProgBar.orange{background: #ffdfbe; border-color: #974700;}
.stoProgBar.orange > span{background: #e67e22; color: #6a3201;}
.stoProgBar.dkBlue{background: #7a98a2; border-color: #005270;}
.stoProgBar.dkBlue > span{background: #004a61; color: #e0f7ff;}
.stoProgBar.large{height:32px;}
.stoProgBar.large > span{font-size:1.5em; line-height:28px;}

input[type="submit"].dkBlueBkgd{background-color:#005E7C; color: white; cursor:pointer;}
input[type="submit"].dkBlueBkgd:hover{background-color:#014b63;}

.stoAttention{border-radius:8px; border: 3px solid #cabc59; background: #fffad4; margin-top: -3px; /*border:1px solid #e67e22; background:#ffdfbe;*/ }
.stoAttention .stoAttentionTitle{width:100%; margin:0px; padding:2px 10px 0px 10px; border-top-left-radius:8px; border-top-right-radius:8px; /*background:#e67e22; color:white;*/}
.stoAttention .stoAttentionTitle > * {margin:0; padding:0;}

ul.dashed { list-style-type: none;}
ul.dashed > li:before { content: "-"; padding-right: 3px; font-weight:bold;}
.posRel{position:relative;}
.sub{font-size:0.8em;}

.grid + div{clear:both;}
.stoFancyList{ position:relative; text-align: center; margin: 0 auto; margin-top:100px; clear:both; width:75%; max-width:1100px; height:auto; border-top: 2px solid orange; left:0px;}
.stoFancyList h2{font-size:2.2em;}
.stoFancyList .grid ul li h3 {font-size:1.6em;}
.stoFancyList .grid ul > li > span, .stoSimpleList > ol > li  > span, .stoFancyList .grid ul > li > div, .stoSimpleList > ol > li  > div {display:inline-block; border-top: 1px solid #D2D2D2; padding-top: 5px; /*min-width: 313px; this was messing up small-screens*/}
.stoFancyList .grid ul > li > span.noLine, .stoSimpleList > ol > li  > span.noLine, .stoFancyList .grid ul > li > div.noLine, .stoSimpleList > ol > li  > div.noLine {border-top: none;}
.stoFancyList .grid li:before{color:#FE7917;}
.stoFancyList .grid ul li p {margin:12px 5px 0px 10px;}
.stoFancyList .grid {margin:0 0 -25px 0;}
.stoFancyList .insideList li,.insideList li{padding:7px 2px; margin-left: 30px; line-height:1.5em;}
.checkList, .arrowList {padding: 0 20px;}
.checkList h3, .arrowList h3{font-weight:bold;margin: 4px 0px 5px 35px;position: relative;display: inline-block;}
.checkList p, .arrowList p{margin:0px 0px 10px 35px;line-height:1.5;}
.checkList>li {text-align:left; list-style-type:none; background:url('/images/gr_chk_vsm.png') no-repeat 0 5px;margin:0 0 30px 0;}
.arrowList>li {text-align:left; list-style-type:none; margin:0 0 30px 0;}
.arrowList>li:before {content: "\0BB"; font-size:2.6em; font-weight:bold;}
.arrowList h3 {margin-left:8px;}
ol.numberedList {counter-reset:li; margin-left:0; padding-left:0;}
ol.numberedList > li{position:relative; margin:40px 0 6px 2em; padding:4px 8px; list-style:none;}
ol.numberedList > li > span, ol.numberedList > li > div{padding-top:15px;}
/*ol.numberedList > li:before{content: counter(li); counter-increment: li; position: absolute; top:2px; left: -1.3em; width: 1em; margin-right: 8px; padding: 0em 0em 0.1em 0.4em; font-size: 1.8em; font-weight: bold; color: #fff; background: #216e8a; border-radius: 50%; line-height: 1.3em;}*/
ol.numberedList > li:before{content: counter(li); counter-increment: li; position: absolute; display:block; text-align:center; top:2px; left: -1.3em; width: 1.5em; margin-right: 8px; padding: 3px 0px; font-size: 1.8em; font-weight: bold; color: #fff; background: #216e8a; border-radius: 50%; line-height: 1.3em;}
ol.numberedList .listTitle, ol .listTitle, ul .listTitle{font-size:1.5em; font-weight:bold;}
ol.numberedList .listTitle{color:#216e8a;}

ul.bulletList {width:auto; text-align:left; margin:30px auto 30px 15%;}
ul.bulletList li {margin-bottom: 10px; list-style-type:disc !important;}

table {border-spacing: 0; border-collapse: collapse; margin: 1.5em 0;}
th {text-align:center;}
table.displayLines td, table.displayLines th {padding: .75em; border: solid 1px #666;}

#cookieConsentPopup {z-index: 999; min-height: 20px; padding: 10px 20px; background: rgba(255, 232, 173, 0.88); overflow: hidden; position: fixed;color: #b17749; bottom: 0px; right: 10px; display: none; left: 0; text-align: center; font-size: 15px; font-weight: bold; border-top: 1px solid #d4a783;}
#cookieConsentPopup div { padding: 5px 0 0;}
#cookieConsentPopup a { color: #904000; display: inline-block; padding: 0 10px;}
#cookieConsentPopup a:hover {color: #fda016;}
#cookieConsentPopup a#cookieButton { display: inline-block; color: #fff; font-size: 1.1em; background: #e0821f; text-decoration: none; cursor: pointer; padding: 3px 32px; float: right; border-radius: 20px;}
#cookieConsentPopup a#cookieButton:hover { background: #fda016;	color: #fff;}

#adSliderContainer{box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); border-radius:15px; width:90%;}
#slider { position: relative; width: 140px; height: auto; overflow: hidden; margin-bottom: 20px; border-radius:12px;}
#slider ul { position: relative; list-style: none; height: 100%; width: 10000%; padding: 0; margin: 0; transition: all 750ms ease; left: 0; }
#slider ul li {position: relative; height: 100%; float: left; }
#slider ul li a > img{ width: 140px; height: auto;}
#adSliderContainer #prev, #adSliderContainer #next { width: 30px; line-height: 30px; border-radius: 50%; font-size: 1.3rem; text-shadow: 0 0 20px rgba(0, 0, 0, 0.6); text-align: center; color: #7cb9ce; text-decoration: none; position: absolute; top: 21%; transform: translateY(-50%); transition: all 150ms ease; }
#adSliderContainer #prev:hover, #adSliderContainer #next:hover { background-color: rgba(0, 0, 0, 0.5); text-shadow: 0; }
#adSliderContainer #prev { left: 20px; }
#adSliderContainer #next { right: 20px; }

#highScoreContainer .limitHeight{max-height: 1000px; overflow-y:scroll; border-top-right-radius:5px; border-bottom-right-radius:5px;}
#highScoreContainer .limitHeight::-webkit-scrollbar{width:12px; background-color:#dbfd86;}
#highScoreContainer .limitHeight::-webkit-scrollbar-thumb{background-color:#9bcf19; outline: 1px solid #5d7c10;}
#highScoreContainer .limitHeight::-webkit-scrollbar-track{/*margin:3px;*/ -webkit-box-shadow:inset 0 0 6px rgb(0 0 0 / 30%); border-radius:5px;}

.circle-image.poweruser{ width: 40px; height: 40px; border-width: 1px; border-color: #efaf6d; /* filter: drop-shadow(0px 0px 4px orange); */ color: orange; box-shadow: 0px 0px 2px 3px #ffc543; border: 1px solid orange; }

/* theme on-switches */
#wrapHeading #heading{background-color: var(--bg-wrapHeading); color: var(--text-wrapHeading); border-color: var(--bg-wrapHeadingBorder);}
#wrapHeading #heading h1{text-shadow: var(--textShadow-wrapHeading);}
#wrapHeading #heading h3{color: var(--text-wrapHeading-subheading);}
body, body .grid, body #container, body #centerConsoleWrap .square {background-color: var(--bg-primary);}
body a{color: var(--text-link);}
body a:visited{color: var(--text-linkVisited);}
body#typingLessons .grid{background-color: var(--bg-secondary);}
body #container, body .hudContainer_horiz {background-color: var(--bg-secondary);}
body .hudContainer_horiz{color: var(--text-primary);}
body.readingLayout {background-color: var(--bg-readingLayout);}
body h2, body h3, .readingLayout #container #heading h1{color: var(--text-header);}
.readingLayout #container #heading h1{text-shadow: var(--textShadow-settingsBox);}
body .usfContainer h2{color: var(--text-header);}
body .grid, body p, body #headInfo, body ul, body ol, #centerConsoleWrap .square, .readingLayout label, .usfContainer div{color: var(--text-primary);}
body#login .note, body#register .note{color: var(--text-primary);}
body#login .word, body#register .word {background: var(--bg-primary);}
.usfContainer div{text-shadow: none;}
#listOfClasses .usfContainer div, #allAssignments .usfContainer div{color: initial;}

body #top-navigation a span{color: var(--text-topNav);}
body #top-navigation #menu-main > li:hover > a > span{color: #fff;}
body #top-navigation .sub-menu{background-color: var(--bg-menu);}
body #top-navigation hr{border: var(--border-hrMenu);}
body #profileMenu li{background-color: var(--bg-profileTabs); border: var(--border-profileTabs);}
body #profileMenu li a, body #profileMenu li a:visited{color: var(--text-profileTabs);}
body #profileMenu li.active{background-color: var(--bg-profileTabs-active); border: var(--border-profileTabs-active);}
body #profileMenu li.active a, body #profileMenu li.active a:visited{color: var(--text-profileTabs-active);}
body #profileMenu li:hover a, body #profileMenu li:hover a:visited{color: var(--bg-profileTabs-active);}
body #menu-main li ul, body .et_mobile_menu{background-color: var(--bg-profileMenu); color: var(--text-menu);}
body #top-navigation .sub-menu li a, #top-navigation .widget h3, #top-navigation label{color: var(--text-menu);}
body #top-navigation .sub-menu{border: var(--border-menuUL);}
body .feature-card{background: var(--bg-features-card); border: var(--border-features-card);}
body .feature-card i{color: var(--color-featuresIcon);}
body .feature-card .feature-cardIcon i{color: #fff;}
body .feature-card a{color: var(--text-features-card-links);}
body .feature-card a:visited{color: var(--text-features-card-links-visited);}
body .feature-card.highlighted{background: var(--bg-features-card-highlighted); border: var(--border-features-card-highlighted);}
body .feature-cardButton{background: var(--bg-features-cardButton); color: var(--text-features-cardButton);}
body .feature-cardButton:hover{background: var(--bg-features-cardButton); box-shadow: inset 0px 0px 40px 40px #00000033;}

body section.helpSection{background: var(--bg-section); border: var(--border-section);}
body section.helpSection h2{color: var(--text-sectionHeader);}

footer .grid {background-color: var(--bg-footer);}
footer ul, footer ol, footer p {color: var(--text-footer);}
footer h2, footer h3 {color: var(--text-header-footer);}

#divBackWrap{background-image: var(--linearGradient-entry); border: var(--divBackWrapBorder); box-shadow: var(--divBackWrapBoxShadow);}
#blockDivContainer, #lineDivContainer, div.blockLines, #line_input{background-color: var(--bg-entry);}
#typingTest div#wrapStats div, #typingTutor div#wrapStats div{color: var(--text-stats);}
#askToLogin{background-color: var(--bg-menu2);}
#main-header{background-color: var(--bg-mainMenu); box-shadow: var(--boxShadow-navMenu); border-bottom: 2px solid #004d6d; box-sizing: border-box;}
#main-header *{ box-sizing: border-box;}
.stoInfoBox .stoInfoTitle, #lessonDivLead, #infoBlurbName{background-color: var(--bg-settingsBoxBorder); color: var(--text-settingsBoxBorder);}
body .stoInfoBox h2{color: var(--text-settingsBox); text-shadow: var(--textShadow-settingsBox);}
body .stoInfoBox #lmContainer div div{color: var(--text-menu);}
.stoInfoTitle a, #textContainer h3, .stoInfoTitle a:visited{color: var(--text-settingsBoxBorder);}
#infoOpContainer, .stoInfoBox, #loggedInInfo, #lessonDivContainer{background-color: var(--bg-settingsBox); color: var(--text-settingsBox); text-shadow: var(--textShadow-settingsBox);}
#askToLogin, .stoInfoBox a, #loggedInInfo .micro, #lessonDiv .textInfoDisplay, #lessonDiv #targetEditDiv{text-shadow: none;}
#lessonDivContainer .textInfoDisplay span{color: var(--text-profileTabs);}
#infoOpContainer .stoUI.stoUIClickable{color: var(--text-stoUI);}
#infoOpContainer .stoUI, #infoOpContainer h3{color: var(--text-settingsBox);}
/*.stoUI,*/ #sidebar h3{color: var(--text-stoUI); text-shadow: none;}
#blockDivGlow{box-shadow: var(--entryGlow);}
#blockDivContainer, #lineDivContainer{border: var(--entryBorder);}
#blockDivContainer:before, #lineDivContainer:before{content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: var(--entryBoxShadow); pointer-events: none; z-index: 1;}
.module, .highScores .module{background: var(--bg-module); border-color: var(--borderColor-module); color: var(--text-module);}
.module h3, .highScores .module h3{color: var(--borderColor-module);}

#updateProfile #listOfClasses label{color: var(--bg-settingsBox); text-shadow: none;}
#updateProfile #accountContainer h3 .fa{color: var(--text-primary) !important;}
#updateProfile #listOfClasses p, #listOfClasses h3{text-shadow: none;}

#firstTimeBanner h3{color: white;}

/**********************/
/* Theme Selector */
/*.theme-selector{ position: fixed; top: 68px; right: 18px;}
#theme-button { background: var(--bg-mainMenu); border: 1px solid rgba(0, 0, 0, 0.1); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; backdrop-filter: blur(10px); transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 4px; position: relative; z-index: 99999;}
#theme-button .current-theme { text-transform: capitalize; opacity: 0.7; }
#theme-button:hover { transform: translateY(-1px); box-shadow: inset 0px 0px 20px 20px #33333366, 0 4px 12px rgba(0, 0, 0, 0.15); }
#theme-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-menu); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; padding: 8px; list-style: none; margin: 0; min-width: 200px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; z-index: 1000; } 
#theme-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
#theme-menu li { padding: 10px 12px; cursor: pointer; border-radius: 8px; transition: background-color 0.15s ease; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
#theme-menu li:hover { background: rgba(0, 0, 0, 0.05); }
.theme-name { flex: 1; }
.color-swatches { display: flex; gap: 4px; }
.color-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.1); }*/
/**********************/

/* Themes Implementation */
#typeTheAlphabet #centerEntryModule .ui-state-default, #typeTheAlphabet #centerEntryModule .stoUIClickable {background: var(--bg-UIstateDefault-tta);}
#typeTheAlphabet #centerEntryModule.passed .ui-state-default, #typeTheAlphabet #centerEntryModule.passed .stoUIClickable {background: var(--bg-UIstateDefault-passed-tta);}
#typeTheAlphabet #centerEntryModule.failed .ui-state-default, #typeTheAlphabet #centerEntryModule.failed .stoUIClickable {background: var(--bg-UIstateDefault-failed-tta);}
#typeTheAlphabet #centerEntryModule{background: var(--linearGradient-tta); border: var(--border-tta); text-shadow:var(--textShadow-tta);}
#typeTheAlphabet #centerEntryModule.passed{background: var(--linearGradient-passed-tta); border: var(--border-passed-tta); text-shadow:var(--textShadow-passed-tta);}
#typeTheAlphabet #centerEntryModule.failed{background: var(--linearGradient-failed-tta); border: var(--border-failed-tta); text-shadow:var(--textShadow-failed-tta);}
#typeTheAlphabet #centerEntryModule #centerContent{text-shadow:none;}
#typeTheAlphabet #centerEntryModule {box-shadow: var(--boxShadow-centerEntryModule-tta);}
#typeTheAlphabet #centerEntryModule.passed {box-shadow: var(--boxShadow-centerEntryModule-passed-tta);}
#typeTheAlphabet #centerEntryModule.failed {box-shadow: var(--boxShadow-centerEntryModule-failed-tta);}
#typeTheAlphabet #ttaLogo{text-shadow: none; color: var(--color-logo-tta);}
#typeTheAlphabet #centerEntryModule.passed #ttaLogo{text-shadow: none; color: var(--color-logo-passed-tta);}
#typeTheAlphabet #centerEntryModule.failed #ttaLogo{text-shadow: none; color: var(--color-logo-failed-tta);}
#typeTheAlphabet .topLeftLink a{color: var(--color-helpLink-tta);}
#typeTheAlphabet #centerEntryModule.passed .topLeftLink a{color: var(--color-helpLink-passed-tta);}
#typeTheAlphabet #centerEntryModule.failed .topLeftLink a{color: var(--color-helpLink-failed-tta);}

#typingRacer #centerEntryModule h1{color: var(--text-typingRacerHeading); text-shadow: var(--textShadow-typingRacerHeading);}
#typingRacer h2{color: var(--text-typingRacerH2);}
body#typingRacer, #typingRacer #topModule{background: var(--linearGradient-typingRacer);}

/* theme off-switches */
#typeQuickly .grid, #typeQuickly #container, #typeQuicklyDemo .grid, #typeQuicklyDemo #container, #learnToType .grid, #learnToType #container {background-color: transparent;}
#typeQuickly .grid, #typeQuickly p, #typeQuickly ul, #typeQuickly ol,
#typeQuicklyDemo .grid, #typeQuicklyDemo p, #typeQuicklyDemo ul, #typeQuicklyDemo ol{color: #fff;}

/* Themes */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #fff;
  --bg-mainMenu: #64b4cf;
  --bg-menu2: #7cb9ce;
  --bg-readingLayout: #b1b1b1;
  --bg-wrapHeading: #ffc17f;
  --bg-wrapHeadingBorder: #b15e1a;
  --bg-settingsBox: #dff4ff;
  --bg-settingsBoxBorder: #7cb9ce;
  --bg-module: #e7ffab;
  --bg-googleAPIchart: #fff;
  
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-stoUI: #2d495f;
  --text-link: #0082C3;
  --text-linkVisited: #163d68;
  --text-header: #094e63;
  --text-wrapHeading: #904000;
  --text-wrapHeading-subheading: #f5bd81;
  --textShadow-wrapHeading: 1px 1px rgb(255 148 0 / 43%);
  --text-settingsBox: #000;
  --textShadow-settingsBox: initial;
  --text-settingsBoxBorder: #11485b;
  --text-module: #000;
  --text-googleAPIchart: #000;
  
  --border-color: #dddddd;
  --accent-color: #007bff;
  --borderColor-module: #769726;
  --border-menuUL: 2px solid #98c8df;
  
  /* Sections */
  --bg-section: #e8f5ff;
  --text-sectionHeader: #216e8a;
  --border-section: 2px solid #b1c7e1;
  
  /* feature-card */
  --bg-features-card: #c6e8ff; /*#b9ecff;*/
  --bg-features-card-highlighted: #a7c2ff;
  --border-features-card: 3px solid rgb(70, 163, 236);/*2px solid #007dab;*/
  --border-features-card-highlighted: 3px solid #6191ff;
  --bg-features-cardButton: #21548a;
  --text-features-cardButton: #fff;
  --text-features-card-links: #216e8a;
  --text-features-card-links-visited: #68afcb;
  
  --text-features-card-h: #094e63;
  --text-features-card-p: #fff;
  --color-featuresIcon: #08416d;
  
  --boxShadow-navMenu: 0px 0px 17px 2px #3b3b3b;
  --bg-menu: rgb(232, 244, 252);
  --text-topNav: #333;
  --bg-profileMenu: #fff;
  --text-menu: #024a61;
  --border-hrMenu: 1px solid #d4e4ef;
  
  /* Profile tabs */
  --bg-profileTabs: #dceff2;
  --text-profileTabs: #163d68;
  --border-profileTabs: 1px solid #7ba3aa;
  --bg-profileTabs-active: #005e7c;
  --text-profileTabs-active: #fff;
  --border-profileTabs-active: 1px solid #002537;
  
  --bg-footer: rgb(3, 44, 59);
  --text-footer: #fff;
  --text-header-footer: #fff;
  
  --bg-entry: #fff;
  --entryGlow: 0px 0px 20px 0px #fff;
  --entryBorder: 4px solid #ff8505;
  --entryBoxShadow: inset 0 0 4px 1px rgb(0 0 0 / 58%);
  --text-stats: #fff;
  
  --divBackWrapBorder: 7px solid #1A587B;
  --divBackWrapBoxShadow: -6px 75px 62px -57px black;
  --linearGradient-entry: linear-gradient(168deg, #074d70, #074d70 1.4%, #074c70 1.4%, #074b6f 2.2%, #064d77 2.4%, #064972 12.7%, #06476d 13.3%, #064468 14.2%, #064367 14.6%, #054165 14.6%, #053955 16.3%, #05354f 16.3%, #053148 16.9%, #053d5f 21.8%, #053e61 22.5%, #053f63 23.1%, #054064 23.8%, #053c5c 36.9%, #053f62 70.4%, #054167 74.6%, #054269 78.9%, #054064 81.3%, #05334d 87.4%, #052f45 88.3%, #05324b 88.3%, #053955 88.7%, #054164 90%, #06476d 91.5%, #064d77 93.8%);
  
  /* Typing Lessons */
  --bg-classicLessons: repeating-linear-gradient(50deg, #e7f9ff 0px, #caf3ff 5px, #e9faff 10px);
  --bg-advancedLessons: repeating-linear-gradient(50deg, #a4cfdc 0px, #98c8d6 5px, #a4cfdc 10px);
  
  /* Type the Alphabet */
  --border-tta: 7px solid #268da9;
  --border-passed-tta: 7px solid #709121;
  --border-failed-tta: 7px solid #e93131;
  --textShadow-tta: 1px 1px #7cc0d180;
  --textShadow-passed-tta: 1px 1px #a5d17c80;
  --textShadow-failed-tta: 1px 1px #ff939385;
  --color-logo-tta: rgba(22, 152, 188, 0.13);
  --color-logo-passed-tta: rgb(109 149 44 / 24%);
  --color-logo-failed-tta: rgb(213 98 98 / 13%);
  --color-helpLink-tta: #226476;
  --color-helpLink-passed-tta: #657554;
  --color-helpLink-failed-tta: #ad3a3a;
  --bg-UIstateDefault-tta: #5998a9;
  --bg-UIstateDefault-passed-tta: #769726;
  --bg-UIstateDefault-failed-tta: #ee6969;
  --boxShadow-centerEntryModule-tta: inset 0px 0px 14px #728d9c, 0px 85px 45px -73px #353535;
  --boxShadow-centerEntryModule-passed-tta: inset 0px 0px 14px #6d8d21, 3px 7px 40px -13px #353535;
  --boxShadow-centerEntryModule-failed-tta: inset 0px 0px 14px #c64848, 3px 7px 40px -13px #353535;
  --linearGradient-tta: repeating-linear-gradient(50deg, #aee3f2 0px, #a3dbeb 3px, #aee3f2 6px);
  --linearGradient-passed-tta: repeating-linear-gradient(50deg, #bfec53 0px, #aad14c 2px, #bfec53 4px);
  --linearGradient-failed-tta: repeating-linear-gradient(50deg, #fed1d1 0px, #ffb8b8 2px, #fed1d1 4px);
  
  /* TypingRacer */
  --text-typingRacerHeading: #426702;
  --text-typingRacerH2: #385800;
  --textShadow-typingRacerHeading: 3px 2px 0px rgb(145 229 0);
  --linearGradient-typingRacer: repeating-linear-gradient( 45deg, #86b83788 0px, #86b83788 90px, #7cae3288 105px, #7cae3288 135px, #7cae3288 225px, #7cae3288 240px, #86b83788 255px, #86b83788 270px ), repeating-linear-gradient( 139deg, #86b837ee 0px, #86b837ee 90px, #7cae32ee 105px, #7cae32ee 135px, #7cae32ee 225px, #7cae32ee 240px, #86b837ee 255px, #86b837ee 270px ); 
}

:root:not([data-theme="default"]){
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #313131;
  --bg-mainMenu: #1b88ac;
  --bg-menu2: #3a97b7;
  --bg-readingLayout: #222;
  --bg-wrapHeading: #c3731c;
  --bg-wrapHeadingBorder: #ffa358;
  --bg-settingsBox: #3c6a83;
  --bg-settingsBoxBorder: #00384b;
  --bg-module: #475527;
  --bg-googleAPIchart: #444;
  
  --text-primary: #cce2ff;
  --text-secondary: #aaaaaa;
  --text-stoUI: #00101a; /*#101a21;*/
  --text-link: #0082C3;
  --text-linkVisited: #6080a5;
  --text-header: #159cc5;
  --text-wrapHeading: #653e08;
  --text-wrapHeading-subheading: #f5bd81;
  --textShadow-wrapHeading: 1px 1px rgb(255 148 0 / 43%);
  --text-settingsBox: #c3dfff;/*#101a21;*/
  --textShadow-settingsBox: 2px 3px 1px #002451ab; /*1px 1px 1px #0091e99e;*/
  --text-settingsBoxBorder: #359ecf;
  --text-module: #b4c18c;
  --text-googleAPIchart: #fff;
  
  --border-color: #444444;
  --accent-color: #4d9fff;
  --borderColor-module: #84a92b;
  --border-menuUL: 2px solid #4679a1;
  
  /* feature-card */
  --bg-features-card: #004660;
  --bg-features-card-highlighted: #00345b;
  --border-features-card: 3px solid rgb(70, 163, 236);/*2px solid #007dab;*/
  --border-features-card-highlighted: 3px solid #007eff;
  --bg-features-cardButton: #21548a;
  --text-features-cardButton: #fff;
  --text-features-card-links: #3abdff;
  --text-features-card-links-visited: #85b1c7;
  
  --text-features-card-h: #094e63;
  --text-features-card-p: #fff;
  --color-featuresIcon: #cce2ff;
  
  --boxShadow-navMenu: 0px -2px 10px 2px #000000;
  --bg-menu: #a3c5db;
  --text-topNav: #002331;
  --bg-profileMenu: #94aac1;
  --text-menu: #00212b;
  --border-hrMenu: 1px solid #769ab5;
  
  /* Section */
  --bg-section: #172d45;
  --text-sectionHeader: #64b9d7;
  --border-section: 2px solid #b1c7e1;
  
  /* Profile tabs */
  --bg-profileTabs: #96bce3;
  --text-profileTabs: #0a4585;
  --border-profileTabs: 1px solid #2b4f75;
  --bg-profileTabs-active: #0b5591;
  --text-profileTabs-active: #fff;
  --border-profileTabs-active: 1px solid #2fa1fd;
  
  --bg-footer: rgb(3, 44, 59);
  --text-footer: #fff;
  --text-header-footer: #fff;
  
  --bg-entry: #434343;
  --entryGlow: 0px 0px 14px 0px #ffffff6e;
  --entryBorder: 4px solid #db7406;
  --entryBoxShadow: inset 0 0 7px 1px rgb(0 0 0 / 65%);
  --text-stats: #80c9ff;
  
  --divBackWrapBorder: 7px solid #0f4767;
  --divBackWrapBoxShadow: inset 0px 0px 12px 1px #96dafbb3, -6px 85px 22px -72px #00a1ff;
  --linearGradient-entry: linear-gradient(168deg,  #03314a,  #03314a 1.4%,  #033049 1.4%,  #032f48 2.2%,  #03334f 2.4%,  #03314b 12.7%,  #033049 13.3%,  #032e46 14.2%,  #032d45 14.6%,  #022a42 14.6%,  #022339 16.3%,  #022136 16.3%,  #021f33 16.9%,  #022a3f 21.8%,  #022b41 22.5%,  #022c43 23.1%,  #022d44 23.8%,  #02293c 36.9%,  #022c42 70.4%,  #022e45 74.6%,  #022f47 78.9%,  #022d44 81.3%,  #021f31 87.4%,  #021b2c 88.3%,  #021f31 88.3%,  #022339 88.7%,  #022a3f 90%,  #033049 91.5%,  #03334f 93.8%);
  
  /* Typing Lessons */
  --bg-classicLessons: repeating-linear-gradient(50deg, #e7f9ff 0px, #caf3ff 5px, #e9faff 10px);
  --bg-advancedLessons: repeating-linear-gradient(50deg, #a4cfdc 0px, #98c8d6 5px, #a4cfdc 10px);
  
  /* Type the Alphabet */
  --border-tta: 7px solid #165a79;
  --border-passed-tta: 7px solid #336b00;
  --border-failed-tta: 7px solid #791616;
  --textShadow-tta: 1px 1px #7cc0d180;
  --textShadow-passed-tta: 1px 2px #9dd16c80;
  --textShadow-failed-tta: 1px 1px #fb9a9aad;
  --color-logo-tta: rgb(44 126 149 / 24%);
  --color-logo-passed-tta: rgb(181 241 84 / 13%);
  --color-logo-failed-tta: rgb(213 98 98 / 13%);
  --color-helpLink-tta: #226476;
  --color-helpLink-passed-tta: #91cd52;
  --color-helpLink-failed-tta: #8b0303;
  --bg-UIstateDefault-tta: #1b85a1;
  --bg-UIstateDefault-passed-tta: #99c332;
  --bg-UIstateDefault-failed-tta: #ff7070;
  --boxShadow-centerEntryModule-tta: inset 0px 0px 14px #9cd9ff91, 0px 62px 25px -50px #00a3ff;
  --boxShadow-centerEntryModule-passed-tta: inset 0px 0px 14px #a5dd40bf, 0px 62px 25px -50px #80f500;
  --boxShadow-centerEntryModule-failed-tta: inset 0px 0px 14px #ff6a6a, 0px 62px 25px -50px #ff1d1d;
  --linearGradient-tta: repeating-linear-gradient( 50deg, #5f9aa7 0px, #55929f 3px, #5f9aa7 6px );
  --linearGradient-passed-tta: repeating-linear-gradient(50deg, #638127 0px, #5f8d0d 2px, #638127 4px);
  --linearGradient-failed-tta: repeating-linear-gradient(50deg, #975b5b 0px, #ab6161 2px, #975b5b 4px);
  
  --text-typingRacerHeading: #81b12e;
  --text-typingRacerH2: #85b11e;
  --textShadow-typingRacerHeading: -3px 3px 0px #0d1400;
  --linearGradient-typingRacer: repeating-linear-gradient(45deg, #2f4a2c88 0px, #2f4a2c88 90px, #2a422788 105px, #2a422788 135px, #2a422788 225px, #2a422788 240px, #2f4a2c88 255px, #2f4a2c88 270px), repeating-linear-gradient(139deg, #2f4a2cee 0px, #2f4a2cee 90px, #2a4227ee 105px, #2a4227ee 135px, #2a4227ee 225px, #2a4227ee 240px, #2f4a2cee 255px, #2f4a2cee 270px);
}

[data-theme="original"] {
  --bg-primary: revert;
  --bg-secondary: revert;
  --bg-mainMenu: revert;
  --bg-menu2: revert;
  --bg-readingLayout: revert;
  --bg-wrapHeading: revert;
  --bg-wrapHeadingBorder: revert;
  --bg-settingsBox: revert;
  --bg-settingsBoxBorder: revert;
  --bg-module: revert;
  --bg-googleAPIchart: revert;
  
  --text-primary: revert;
  --text-secondary: revert;
  --text-stoUI: revert;
  --text-link: revert;
  --text-linkVisited: revert;
  --text-header: revert;
  --text-wrapHeading: revert;
  --text-wrapHeading-subheading: revert;
  --textShadow-wrapHeading: revert;
  --text-settingsBox: revert;
  --textShadow-settingsBox: revert;
  --text-settingsBoxBorder: revert;
  --text-module: revert;
  --text-googleAPIchart: revert;
  
  --border-color: revert;
  --accent-color: revert;
  --borderColor-module: revert;
  
  /* feature-card */
  --bg-features-card: revert;
  --bg-features-card-highlighted: revert;
  --border-features-card: revert;
  --border-features-card-highlighted: revert;
  --bg-features-cardButton: revert;
  --text-features-cardButton: revert;
  --text-features-card-links: revert;
  --text-features-card-links-visited: revert;
  --text-features-card-h: revert;
  --text-features-card-p: revert;
  
  --boxShadow-navMenu: revert;
  --bg-menu: revert;
  --text-topNav: revert;
  --bg-profileMenu: revert;
  --text-menu: revert;
  
  /* Profile tabs */
  --bg-profileTabs: revert;
  --text-profileTabs: revert;
  --border-profileTabs: revert;
  --bg-profileTabs-active: revert;
  --text-profileTabs-active: revert;
  --border-profileTabs-active: revert;
  
  --bg-footer: revert;
  --text-footer: revert;
  --text-header-footer: revert;
  
  --bg-entry: revert;
  --entryGlow: revert;
  --entryBorder: revert;
  --entryBoxShadow: revert;
  --text-stats: revert;
  
  --divBackWrapBorder: revert;
  --divBackWrapBoxShadow: revert;
  --linearGradient-entry: revert;
  
  /* Typing Lessons */
  --bg-classicLessons: revert;
  --bg-advancedLessons: revert;
  
  /* Type the Alphabet */
  --border-tta: revert;
  --border-passed-tta: revert;
  --border-failed-tta: revert;
  --textShadow-tta: revert;
  --textShadow-passed-tta: revert;
  --textShadow-failed-tta: revert;
  --color-logo-tta: revert;
  --color-logo-passed-tta: revert;
  --color-logo-failed-tta: revert;
  --color-helpLink-tta: revert;
  --color-helpLink-passed-tta: revert;
  --color-helpLink-failed-tta: revert;
  --bg-UIstateDefault-tta: revert;
  --bg-UIstateDefault-passed-tta: revert;
  --bg-UIstateDefault-failed-tta: revert;
  --boxShadow-centerEntryModule-tta: revert;
  --boxShadow-centerEntryModule-passed-tta: revert;
  --boxShadow-centerEntryModule-failed-tta: revert;
  --linearGradient-tta: revert;
  --linearGradient-passed-tta: revert;
  --linearGradient-failed-tta: revert;
  
  --text-typingRacerHeading: revert;
  --text-typingRacerH2: revert;
  --textShadow-typingRacerHeading: revert;
  --linearGradient-typingRacer: revert;
}

[data-theme="blue"] {
  --bg-primary: #e3f2fd;
  --bg-secondary: #bbdefb;
  --text-primary: #01579b;
  --text-secondary: #0277bd;
  --border-color: #90caf9;
  --accent-color: #1976d2;
}

/* Screen sizes */

@media only screen and (max-width: 1018px){
	.stoFancyList{width:68%; /*left:98px;*/}
}

@media only screen and (max-width: 895px){
	.stoFancyList{ width: 75%; /*left: 64px;*/}
}

@media only screen and (max-width: 660px){
	.stoFancyList{ width: 67%; /*left: 83px;*/}
}

@media only screen and (max-width: 575px){
	.stoFancyList{ width: 443px; /*left: 108px;*/}
}

@media only screen and (max-width: 450px){
	.stoFancyList{width: 380px; /*left: 149px;*/}
}

@media only screen and (max-width:400px){
	.stoFancyList .grid ul li h3 {font-size:1.3em;}
}