/* ===================
   Main Icons
   ===================*/
i, .shareLinks .stButton .stLarge {
  width: 20px; height: 20px; display: inline-block; vertical-align: middle; position: relative; overflow: hidden
}
i:after, #centreColumn ul li:before, .quickLinks .ms-status i:after, .quickLinks #btn-cancel i:after, .shareLinks .stButton .stLarge:after {
  content: ''; background-repeat: no-repeat; width: 60px; height: 10000px; left: 0; position: absolute;/*background svg in main-icon.css*/
}
#contentWrap {min-height: calc(100vh - 105px)}
.m-h-80 {min-height: 80px}

#centreColumn i:not([class]), i.italics, .materialStyle i, [style*='font-family'] i {width: auto; height: auto; overflow: visible; vertical-align: inherit}
#centreColumn i:not([class]):after, i.italics:after, .materialStyle i:after, [style*='font-family'] i:after, i.hideIcon:after {display: none}

.quickLinks .ms-status i:after, i.icnColor:after, a:hover i:after, .quickLinks .dropDown a:focus i:after, .rightColumn a:focus i:after, .optionsRibbon a:focus i:after, a.highlight i:after, a.selected i:after, dl i:after, a.hover, .options_btn:hover i:after, .options_btn:focus i:after {
  left: -20px
}
i.inverted:after, .quickLinks #btn-cancel i.inverted:after, .optionsRibbon ul.inverted li a i:after, .optionsRibbon ul.inverted li a:hover i:after, .options_btn.inverted i:after, .options_btn.inverted:hover i:after {
  left: -40px
}
.compactIcons i {margin-left: -3px}
#wrapper i.inline, p i.info {margin: -4px -3px 0 0}

.comment p i, .quickLinks i, ul.helpList li i, #centreColumn p i[class] {
  margin-top: -4px
}

/* SVG icons */
i.icon {width: 16px; height: 16px}
i.icon.w32 {width: 32px; height: 32px}
i.icon.w80 {width: 80px; height: 80px}
i.icon.w82 {width: 82px; height: 82px}
i.icon > * {width: 100%; height: 100%}
i.icon:after {display: none}
i.icon.inverted * {fill: #fff}
i.icon:not(.icnColor):not(.inverted) * {fill: #5e5f5f}
.optionsRibbon ul li a i.icon, .options_btn i.icon {margin: 4px 8px 0 0}
.optionsRibbon ul li a i.icon.single, .options_btn i.icon.single {margin-left: 0; margin-right: 0}

/*.user svg *[fill='#42951d'] {fill: green}*/ /*green*/
/*.user svg *[fill='#048497'] {fill: blue}*/ /*teal*/
/*.user svg *[fill='#d1a700'] {fill: yellow}*/ /*yellow*/
/*.user svg *[fill='#ab4e03'] {fill: brown}*/ /*brown*/

i.gradebook:after {top: 0}
i.arrowDown:after {top: -20px}
i.arrowUp:after {top: -40px}
i.cog:after {top: -60px}
i.ellipsis:after {top: -80px}
i.info:after {top: -100px}
i.bell:after {top: -120px}
i.openBook:after {top: -140px}
i.assignments:after {top: -160px}
i.resources:after {top: -180px}
i.job_title:after {top: -200px}
i.arrowRight:after {top: -220px}
i.arrowLeft:after {top: -240px}
i.calendarViewDay:after {top: -260px}
i.calendarViewWeek:after {top: -280px}
i.share:after {top: -300px}
i.add:after {top: -320px}
i.remove:after {top: -340px}
i.resize:after {top: -360px}
i.pageLightning:after {top: -380px}
i.hash:after {top: -400px}
i.edit:after {top: -420px}
i.excel:after {top: -440px}
i.delete:after {top: -460px}
i.sort:after {top: -480px}
i.listing:after {top: -500px}
i.calendar:after {top: -520px}
i.messages:after {top: -540px}
i.tick:after {top: -560px}
i.xCross:after {top: -580px}
i.thumbsUp:after {top: -600px}
i.send:after {top: -620px}
i.email:after {top: -640px}
i.files:after {top: -660px}
i.enrolment:after {top: -680px}
i.user:after {top: -700px}
i.group:after {top: -720px}
i.certificate:after {top: -740px}
i.crown:after {top: -760px}
i.sessions:after {top: -780px}
i.copy:after {top: -800px}
i.cabinet:after {top: -820px}
i.lock:after {top: -840px}
i.search:after {top: -860px}
i.return:after {top: -880px}
i.coins:after {top: -900px}
i.questionMark:after {top: -920px}
i.listNumbers:after {top: -940px}
i.table:after {top: -960px}
i.package:after {top: -980px}
i.graph:after {top: -1000px}
i.word:after {top: -1020px}
i.pageGlobe:after {top: -1040px}
i.chartCurve:after {top: -1060px}
i.pageFolder:after {top: -1080px}
i.certificate2:after {top: -1100px}
i.curriculum:after {top: -1120px}
i.userTie:after {top: -1140px}
i.minimize:after {top: -1160px}
i.key:after {top: -1180px}
i.refresh:after {top: -1200px}
i.quiz:after {top: -1220px}
i.outline:after {top: -1240px}
i.cart:after {top: -1260px}
i.rss:after {top: -1280px}
i.dashboard:after {top: -1300px}
i.school:after {top: -1320px}
i.gold:after {top: -1340px}
i.pdf:after {top: -1360px}
i.tildeCircle:after {top: -1380px}
i.bullet:after {top: -1400px}
i.list:after {top: -1420px}
i.parent:after {top: -1440px}
i.google:after {top: -1460px}
i.editAssignment:after {top: -1480px}
i.administrator:after {top: -1500px}
i.picture:after {top: -1520px}
i.subscribe:after {top: -1540px}
i.unsubscribe:after {top: -1560px}
i.boxView:after {top: -1580px}
i.notes:after {top: -1600px}
i.forward:after {top: -1620px}
i.mastery:after {top: -1640px}
i.pieChart:after {top: -1660px}
i.heart_full:after {top: -1680px}
i.heart_outline:after {top: -1700px}
i.facebook:after {top: -1720px}
i.pause:after {top: -1740px}
i.creditCard:after {top: -1760px}
i.redFlag:after {top: -1780px}
i.printer:after {top: -1800px}
i.error:after {top: -1820px}
i.warning:after {top: -1840px}
i.attachment:after {top: -1860px}
i.thumbTack:after {top: -1880px}
i.clock:after {top: -1900px}
i.trueFalse:after {top: -1920px}
i.matching:after {top: -1940px}
i.calculate:after {top: -1960px}
i.fillIn:after {top: -1980px}
i.database:after {top: -2000px}
i.portal:after {top: -2020px}
i.htmlMode:after {top: -2040px}
i.textMode:after {top: -2060px}
i.microphone:after {top: -2080px}
i.microphone2:after {top: -2100px}
i.movieCamera:after {top: -2120px}
i.movieStrip:after {top: -2140px}
i.recycle:after {top: -2160px}
i.direction:after {top: -2180px}
i.google_meet:after {top: -2200px}
i.admin_activity:after {top: -2220px}
i.link:after {top: -2240px}
i.linkBreak:after {top: -2260px}
i.signal:after {top: -2280px}
i.signal2:after {top: -2300px}
i.loadingIcon:after {top: -2320px}
i.compress:after {top: -2340px}
i.organogram:after {top: -2360px}
i.window:after {top: -2380px}
i.folderDown:after {top: -2400px}
i.folderUp:after {top: -2420px}
i.skype:after {top: -2440px}
i.comments:after {top: -2460px}
i.tickCircle:after {top: -2480px}
i.comment:after {top: -2500px}
i.crossCircle:after {top: -2520px}
i.group3:after {top: -2540px}
i.rotateAnticlockwise:after {top: -2560px}
i.rotateClockwise:after {top: -2580px}
i.rotateAnticlockwiseThick:after{top: -2600px}
i.rotateClockwiseThick:after {top: -2620px}
i.star:after {top: -2640px}
i.star2:after {top: -2660px}
i.home:after {top: -2680px}
i.chartArea:after {top: -2700px}
i.chartLineDots:after {top: -2720px}
i.chartLine:after {top: -2740px}
i.shield:after {top: -2760px}
i.shield2:after {top: -2780px}
i.creditCard2:after {top: -2800px}
i.print:after {top: -2820px}
i.flag:after {top: -2840px}
i.pageWord:after {top: -2860px}
i.pageText:after {top: -2880px}
i.pageBlank:after {top: -2900px}
i.pageBlank2:after {top: -2920px}
i.book:after {top: -2940px}
i.book2:after {top: -2960px}
i.pen:after {top: -2980px}
i.arithmatic:after {top: -3000px}
i.pencil:after {top: -3020px}
i.flagOrange:after {top: -3040px}
i.tickOrange:after {top: -3060px}
i.unlock:after {top: -3080px}
i.o1:after {top: -3100px}
i.o2:after {top: -3120px}
i.o3:after {top: -3140px}
i.o4:after {top: -3160px}
i.o5:after {top: -3180px}
i.o6:after {top: -3200px}
i.o7:after {top: -3220px}
i.o8:after {top: -3240px}
i.o9:after {top: -3260px}
i.o10:after {top: -3280px}
i.o11:after {top: -3300px}
i.o12:after {top: -3320px}
i.o13:after {top: -3340px}
i.o14:after {top: -3360px}
i.o15:after {top: -3380px}
i.o16:after {top: -3400px}
i.o17:after {top: -3420px}
i.o18:after {top: -3440px}
i.o19:after {top: -3460px}
i.o20:after {top: -3480px}
i.o21:after {top: -3500px}
i.o22:after {top: -3520px}
i.o23:after {top: -3540px}
i.o24:after {top: -3560px}
i.o25:after {top: -3580px}
i.o26:after {top: -3600px}
i.o27:after {top: -3620px}
i.o28:after {top: -3640px}
i.o29:after {top: -3660px}
i.o30:after {top: -3680px}
i.o31:after {top: -3700px}
i.folderBlue:after {top: -3720px}
i.folderGreen:after {top: -3740px}
i.audioPause:after {top: -3760px}
i.audioPlay:after {top: -3780px}
i.audioStop:after {top: -3800px}
i.audioRecord:after {top: -3820px}
i.blockCircle:after {top: -3840px}
i.tool:after {top: -3860px}
i.toolbox:after {top: -3880px}
i.briefcase:after {top: -3900px}
i.badge:after {top: -3920px}
i.turnitin:after {top: -3940px}
i.closeColumn:after {top: -3960px}
i.openColumn:after {top: -3980px}
i.singleSignOn:after {top: -4000px}
i.plusMinus:after {top: -4020px}
i.equation:after {top: -4040px}
i.webConferencing:after {top: -4060px}
i.popout:after {top: -4080px}
i.popin:after {top: -4100px}
i.level:after {top: -4120px}
i.trophy:after {top: -4140px}
i.archive:after {top: -4160px}
i.googleDrive:after {top: -4180px}
i.powerpoint:after {top: -4200px}
i.rulesEngine:after {top: -4220px}
i.learningPath:after {top: -4240px}
i.classTemplate:after {top: -4260px}
i.salesforce:after {top: -4280px}
i.audioOn:after {top: -4300px}
i.audioOff:after {top: -4320px}
i.signal3:after {top: -4340px}
i.zapier:after {top: -4360px}
i.offline:after {top: -4380px}
i.class:after {top: -4400px}
i.clever:after {top: -4420px}
i.goal:after {top: -4440px}
i.equella:after {top: -4460px}
i.repositories:after {top: -4480px}
i.category:after {top: -4500px}
i.bundleItems:after {top: -4520px}
i.appCenter:after {top: -4540px}
i.startCircle:after {top: -4560px}
i.webhook:after {top: -4580px}
i.tablet:after {top: -4600px}
i.refreshCircle:after {top: -4620px}
i.xAPI:after {top: -4640px}
i.seatingChart:after {top: -4660px}
i.office365:after {top: -4680px}
i.proficiency:after {top: -4700px}
i.oneDrive:after {top: -4720px}
i.checkboxChecked:after {top: -4740px}
i.checkboxUnchecked:after {top: -4760px}
i.saml2:after {top: -4780px}
i.illini:after {top: -4800px}
i.starOutline:after {top: -4820px}
i.unicheck:after {top: -4840px}
i.addCircle:after {top: -4860px}
i.dotHandle:after {top: -4880px}
i.disquette:after {top: -4900px}
i.xCrossSmall:after {top: -4920px}
i.handshake:after {top: -4940px}
i.arrowRightSml:after {top: -4960px}
i.cometchat:after {top: -4980px}
i.starHalf:after {top: -5000px}
i.compliance:after {top: -5020px}
i.filter:after {top: -5040px}
i.tilde:after {top: -5060px}
i.tildeWarning:after {top: -5080px}
i.school_building:after {top: -5100px}
i.enroll_others:after {top: -5120px}
i.transfer_seats:after {top: -5140px}
i.grading_missing:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5160px}
i.grading_incomplete:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5180px}
i.grading_absent:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5200px}
i.grading_excused:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5220px}
i.grading_flag:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5240px}
i.grading_comment:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5260px}
i.grading_submission:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5280px}
i.grading_rubric:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5300px}
i.rubric_grading_scale:after {top: -5300px}
i.ellipsis_vertical:after {top: -5320px}
i.ellipsis_vertical_sml:after {top: -5340px}
i.grading_missing_sml:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5360px}
i.grading_incomplete_sml:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5380px}
i.grading_absent_sml:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5400px}
i.grading_excused_sml:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5420px}
i.grading_flag_sml:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5440px}
i.grading_comment_sml:after {top: 0px; left: 0px; height: 20px; background-position: -20px -5460px}
i.grading_submission_sml:after {top: 0; left: 0; height: 20px}
i.alexa:after {top: -5480px}
i.mailchimp:after {top: -5500px}
i.news:after {top: -5520px}
i.megaphone:after {top: -5540px}
i.show_icon:after {top: -5560px}
i.hide_icon:after {top: -5580px}
i.show_module:after {top: -5600px}
i.hide_module:after {top: -5620px}
i.show_assessment:after {top: -5640px}
i.hide_assessment:after {top: -5660px}
i.show_section:after {top: -5680px}
i.hide_section:after {top: -5700px}
i.group_add:after {top: -5720px}
i.group_remove:after {top: -5740px}
i.network:after {top: -5760px}
i.wallet:after {top: -5780px}
i.block_widget:after {top: -5800px}
i.block_widget_right:after {top: -5820px}
i.block_widget_center:after {top: -5840px}
i.invoice_template:after {top: -5860px}
i.mentors:after {top: -5880px}
i.content_template:after {top: -5900px}
i.kaltura:after {top: -5920px}
i.tag:after {top: -5940px}
i.sharepoint:after {top: -5960px}
i.h5p:after {top: -5980px}
i.ms_teams:after {top: -6000px}
i.shortcut:after {top: -6020px}
i.ms_immersive_reader:after {top: -6040px}
i.onenote:after {top: -6060px}

#socialBlocks a {padding: 10px; border: none}
#socialBlocks a i, .shareLinks .stButton .stLarge {width: 20px; height: 19px; margin-right: 0}
#socialBlocks i:after, .edu2 .shareLinks .stLarge:after, .profile_social_links a i:after {width: 40px; background-repeat: no-repeat; background-size: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='380' viewBox='0 0 80 380'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M27.28,232v7.78c-.41.58-.8.86-1.17.86s-.39-.15-.43-.43a5,5,0,0,1,0-.72V232H23.82v8a5.29,5.29,0,0,0,.16,1.52,1.14,1.14,0,0,0,1.19.75,3,3,0,0,0,2.11-1.25v1.11h1.84V232Zm-8.58,7.23V235c0-.94.28-1.41.88-1.41s.88.47.88,1.41v4.28c0,.94-.29,1.41-.88,1.41s-.88-.47-.88-1.41m-1.27-6.31a4,4,0,0,0-.57,2.4v3.56a4,4,0,0,0,.57,2.39,2.5,2.5,0,0,0,2.15,1,2.5,2.5,0,0,0,2.15-1,4,4,0,0,0,.57-2.39v-3.56a4,4,0,0,0-.57-2.4,2.53,2.53,0,0,0-2.15-1,2.53,2.53,0,0,0-2.15,1m-2.66-4.4-1.39,5.36-1.45-5.36H9.78c.43,1.27.88,2.54,1.31,3.81a35.7,35.7,0,0,1,1.25,4.31v5.53h2v-5.53l2.46-8.12Z' fill='none'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M67.28,232v7.78c-.41.58-.8.86-1.17.86s-.39-.15-.43-.43a5,5,0,0,1,0-.72V232H63.82v8a5.29,5.29,0,0,0,.16,1.52,1.14,1.14,0,0,0,1.19.75,3,3,0,0,0,2.11-1.25v1.11h1.84V232Zm-8.58,7.23V235c0-.94.28-1.41.88-1.41s.88.47.88,1.41v4.28c0,.94-.29,1.41-.88,1.41s-.88-.47-.88-1.41m-1.27-6.31a4,4,0,0,0-.57,2.4v3.56a4,4,0,0,0,.57,2.39,2.74,2.74,0,0,0,4.3,0,4,4,0,0,0,.57-2.39v-3.56a4,4,0,0,0-.57-2.4,2.74,2.74,0,0,0-4.3,0m-2.66-4.4-1.39,5.36-1.45-5.36H49.78c.43,1.27.87,2.54,1.31,3.81a35.7,35.7,0,0,1,1.25,4.31v5.53h2v-5.53l2.46-8.12Z' fill='%23fff'/%3E%3C/clipPath%3E%3C/defs%3E%3Ctitle%3Efooter-icons%3C/title%3E%3Cpath d='M35.18,47.49a12.92,12.92,0,0,1-3.77,1,6.49,6.49,0,0,0,2.88-3.62,13.16,13.16,0,0,1-4.16,1.59A6.55,6.55,0,0,0,18.8,51a6.76,6.76,0,0,0,.17,1.5A18.64,18.64,0,0,1,5.46,45.62a6.58,6.58,0,0,0,2,8.75,6.66,6.66,0,0,1-3-.82v.08a6.57,6.57,0,0,0,5.26,6.43,6.57,6.57,0,0,1-1.73.23,6.26,6.26,0,0,1-1.23-.12,6.55,6.55,0,0,0,6.12,4.55,13.13,13.13,0,0,1-8.14,2.8,13.34,13.34,0,0,1-1.56-.09,18.54,18.54,0,0,0,10,2.95c12.05,0,18.64-10,18.64-18.65,0-.28,0-.56,0-.85A13.18,13.18,0,0,0,35.18,47.49Z' fill='%234e4e4e'/%3E%3Cpath d='M75.18,47.49a12.94,12.94,0,0,1-3.76,1,6.51,6.51,0,0,0,2.87-3.62,13.16,13.16,0,0,1-4.16,1.59A6.55,6.55,0,0,0,58.8,51a6.76,6.76,0,0,0,.17,1.5,18.66,18.66,0,0,1-13.51-6.85,6.58,6.58,0,0,0,2,8.75,6.66,6.66,0,0,1-3-.82v.08a6.57,6.57,0,0,0,5.26,6.43,6.57,6.57,0,0,1-1.73.23,6.26,6.26,0,0,1-1.23-.12,6.55,6.55,0,0,0,6.12,4.55,13.13,13.13,0,0,1-8.14,2.8,13.34,13.34,0,0,1-1.56-.09,18.54,18.54,0,0,0,10,2.95c12.05,0,18.64-10,18.64-18.65,0-.28,0-.56,0-.85A13.18,13.18,0,0,0,75.18,47.49Z' fill='%23fff'/%3E%3Cpath d='M35.6,98v11.9H28.7V98.8c0-2.8-1-4.7-3.5-4.7a3.76,3.76,0,0,0-3.5,2.5,4.42,4.42,0,0,0-.2,1.7v11.6H14.6s.1-18.8,0-20.8h6.9v3h0V92a6.91,6.91,0,0,1,6.2-3.3c4.5,0,7.9,3,7.9,9.3M7.3,79.2c-2.4,0-3.9,1.5-3.9,3.5a3.58,3.58,0,0,0,3.8,3.6h0a3.61,3.61,0,0,0,3.9-3.6c0-2-1.4-3.5-3.8-3.5M3.8,110h6.9V89.2H3.8Z' fill='%234e4e4e'/%3E%3Cpath d='M14.4,7.4v5.3H10.6v6.4h3.8V37.2h7.9V19.1h5.3s.5-3.1.7-6.4h-6V8.2A1.82,1.82,0,0,1,24,6.7h4.3V0H22.4c-8.2,0-8,6.4-8,7.4' fill='%234e4e4e'/%3E%3Cpath d='M75.6,98.06V110H68.7V98.86c0-2.8-1-4.7-3.5-4.7a3.76,3.76,0,0,0-3.5,2.5,4.42,4.42,0,0,0-.2,1.7V110H54.6s.1-18.8,0-20.8h6.9v3h0v-.1a6.89,6.89,0,0,1,6.2-3.4c4.5.1,7.9,3.1,7.9,9.4M47.3,79.26a3.61,3.61,0,1,0-.1,7.2h0a3.61,3.61,0,0,0,3.9-3.6,3.52,3.52,0,0,0-3.8-3.6m-3.5,30.8h6.9V89.26H43.8Z' fill='%23fff'/%3E%3Cpath d='M54.4,7.4v5.3H50.6v6.4h3.8V37.2h7.9V19.1h5.3s.5-3.1.7-6.4h-6V8.2A1.82,1.82,0,0,1,64,6.7h4.3V0H62.4c-8.2,0-8,6.4-8,7.4' fill='%23fff'/%3E%3Cpath d='M17.57,214.66c-.92,4.83-2.05,9.47-5.38,11.88-1-7.29,1.51-12.78,2.69-18.6-2-3.39.24-10.2,4.49-8.52,5.21,2.07-4.52,12.59,2,13.9,6.83,1.38,9.61-11.84,5.38-16.14C20.65,191,9,197,10.4,205.92c.35,2.17,2.59,2.84.89,5.83-3.91-.87-5.08-4-4.93-8.07.25-6.73,6.06-11.45,11.88-12.11,7.37-.82,14.29,2.71,15.25,9.64,1.08,7.83-3.33,16.3-11.21,15.7-2.14-.17-3-1.23-4.71-2.25' fill='%234e4e4e' stroke='%234e4e4e' stroke-width='0.99'/%3E%3Cpath d='M57.57,214.66c-.92,4.83-2,9.47-5.38,11.88-1-7.29,1.51-12.78,2.69-18.6-2-3.39.24-10.2,4.49-8.52,5.21,2.07-4.52,12.59,2,13.9,6.83,1.38,9.61-11.84,5.38-16.14C60.65,191,49,197,50.4,205.92c.35,2.17,2.59,2.84.89,5.83-3.91-.87-5.08-4-4.93-8.07.25-6.73,6.06-11.45,11.88-12.11,7.37-.82,14.29,2.71,15.25,9.64,1.08,7.83-3.33,16.3-11.21,15.7-2.14-.17-3-1.23-4.71-2.25' fill='%23fff' stroke='%23fff' stroke-width='0.99'/%3E%3Cpath d='M36.85,275a5.2,5.2,0,0,0-.67-4.23c-1.3-1.64-4.07-1.7-6-1.41a12.49,12.49,0,0,0-8.53,8c3.15-.25,4.79.22,4.49,3.68a12.65,12.65,0,0,1-1.67,4.55c-.94,1.76-2.71,5.2-5,2.72-2.09-2.23-1.93-6.5-2.41-9.35A37.23,37.23,0,0,0,16,273.76c-.45-1.41-1.48-3.11-2.74-3.48a5.6,5.6,0,0,0-4,.8c-3.14,1.85-5.53,4.47-8.24,6.63v.2c.54.52.68,1.36,1.47,1.48,1.87.27,3.65-1.75,4.89.35a21.77,21.77,0,0,1,1.48,4.07c.64,1.84,1.14,3.84,1.67,6,.9,3.58,2,8.93,5.09,10.24,1.58.67,4-.22,5.16-.93a29,29,0,0,0,8-7.57C33.69,284.78,36.43,277.16,36.85,275Z' fill='%234e4e4e'/%3E%3Cpath d='M76.85,275a5.17,5.17,0,0,0-.67-4.23c-1.3-1.64-4.06-1.7-6-1.41a12.49,12.49,0,0,0-8.53,8c3.15-.25,4.79.22,4.49,3.68a12.84,12.84,0,0,1-1.67,4.55c-1,1.76-2.71,5.2-5,2.72-2.09-2.23-1.93-6.5-2.41-9.35A40.33,40.33,0,0,0,56,273.76c-.45-1.41-1.48-3.11-2.74-3.48a5.6,5.6,0,0,0-4,.8c-3.14,1.85-5.53,4.47-8.24,6.63v.2c.54.52.68,1.36,1.47,1.48,1.87.27,3.65-1.75,4.9.35a21.73,21.73,0,0,1,1.47,4.07c.65,1.84,1.14,3.84,1.67,6,.9,3.58,2,8.93,5.09,10.24,1.58.67,4-.22,5.16-.93a28.82,28.82,0,0,0,8-7.57C73.69,284.78,76.43,277.16,76.85,275Z' fill='%23fff'/%3E%3Cpath d='M13.17,114.29v4.44c10.4,0,19.38,8.43,19.38,18.84H37C37,124.7,26,114.29,13.17,114.29Zm0,7.86v4.44a12.08,12.08,0,0,1,8.27,3.18,11.11,11.11,0,0,1,3.17,7.86h4.53C29.06,129.21,21.66,122.15,13.17,122.15Zm-.64,9.55c-.41,0-1,0-1.79.11v7.39a3.09,3.09,0,0,1,1.68-.64,2.36,2.36,0,0,1,1.76.74,2.55,2.55,0,0,1,.72,1.84,2.47,2.47,0,0,1-.76,1.81,2.59,2.59,0,0,1-1.86.74q-2.56,0-2.57-3.57V125.46H3v14.91a10.12,10.12,0,0,0,2.15,6.69,8.88,8.88,0,0,0,3.15,2.38,9.43,9.43,0,0,0,3.93.87A9.24,9.24,0,0,0,19,147.62,8.9,8.9,0,0,0,21.72,141a9,9,0,0,0-2.7-6.57A8.81,8.81,0,0,0,12.53,131.7Z' fill='%234e4e4e'/%3E%3Cpath d='M53.17,122.15v4.44a12.08,12.08,0,0,1,8.27,3.18,11.11,11.11,0,0,1,3.17,7.86h4.53C69.06,129.21,61.66,122.15,53.17,122.15Zm0-7.86v4.44c10.4,0,19.38,8.43,19.38,18.84H77C77,124.7,66,114.29,53.17,114.29Zm-.64,17.41c-.41,0-1,0-1.79.11v7.39a3.09,3.09,0,0,1,1.68-.64,2.36,2.36,0,0,1,1.76.74,2.55,2.55,0,0,1,.72,1.84,2.47,2.47,0,0,1-.76,1.81,2.59,2.59,0,0,1-1.86.74q-2.56,0-2.57-3.57V125.46H43v14.91a10.12,10.12,0,0,0,2.15,6.69,8.88,8.88,0,0,0,3.15,2.38,9.43,9.43,0,0,0,3.93.87A9.24,9.24,0,0,0,59,147.62,8.9,8.9,0,0,0,61.72,141a9,9,0,0,0-2.7-6.57A8.81,8.81,0,0,0,52.53,131.7Z' fill='%23fff'/%3E%3Cg clip-path='url(%23a)'%3E%3Crect x='9.78' y='228.52' width='19.34' height='13.79' fill='%234e4e4e'/%3E%3C/g%3E%3Cpath d='M23.34,252.5a1.34,1.34,0,0,0-.91.45v6.13a1.29,1.29,0,0,0,.91.45c.53,0,.79-.45.79-1.36v-4.29C24.13,253,23.87,252.5,23.34,252.5Zm6.77,0c-.61,0-.91.47-.91,1.4v.93H31v-.93C31,253,30.71,252.5,30.11,252.5Zm4.46-5.11a3.81,3.81,0,0,0-3.26-3A96.67,96.67,0,0,0,20.54,244H20a101.36,101.36,0,0,0-11.3.42,3.81,3.81,0,0,0-3.26,3,32,32,0,0,0-.53,7.13,32.72,32.72,0,0,0,.52,7.14,3.8,3.8,0,0,0,3.26,3A101.54,101.54,0,0,0,20,265a101.36,101.36,0,0,0,11.3-.42,3.78,3.78,0,0,0,3.26-3,32.11,32.11,0,0,0,.53-7.14A32.63,32.63,0,0,0,34.57,247.39Zm-21,2.05H11.33v11.61h-2V249.44H7.16v-1.9h6.36ZM19,261.05H17.2V260a2.88,2.88,0,0,1-2.08,1.24,1.13,1.13,0,0,1-1.18-.75,5.1,5.1,0,0,1-.16-1.49v-8H15.6v7.41a5,5,0,0,0,0,.72c.05.28.19.42.43.42s.75-.28,1.15-.85V251H19ZM26,258a8.22,8.22,0,0,1-.18,2,1.45,1.45,0,0,1-1.46,1.13,2.5,2.5,0,0,1-1.89-1.11v1H20.61V247.54h1.82V252a2.46,2.46,0,0,1,1.89-1.1A1.46,1.46,0,0,1,25.78,252a7.86,7.86,0,0,1,.18,2Zm6.88-1.68H29.2v1.78c0,.94.3,1.4.93,1.4a.77.77,0,0,0,.81-.73,10.76,10.76,0,0,0,0-1.24h1.86v.27c0,.59,0,1,0,1.18a2.59,2.59,0,0,1-.42,1.09,2.54,2.54,0,0,1-2.21,1.09,2.62,2.62,0,0,1-2.21-1,3.92,3.92,0,0,1-.58-2.36v-3.53a3.89,3.89,0,0,1,.56-2.37,2.59,2.59,0,0,1,2.18-1,2.54,2.54,0,0,1,2.16,1,4,4,0,0,1,.56,2.37v2.08Z' fill='%234e4e4e'/%3E%3Cpath d='M70.11,252.5c-.61,0-.91.47-.91,1.4v.93H71v-.93C71,253,70.71,252.5,70.11,252.5Zm4.46-5.11a3.81,3.81,0,0,0-3.26-3A96.67,96.67,0,0,0,60.54,244H60a101.36,101.36,0,0,0-11.3.42,3.8,3.8,0,0,0-3.26,3,32,32,0,0,0-.53,7.13,32.72,32.72,0,0,0,.52,7.14,3.8,3.8,0,0,0,3.26,3A101.54,101.54,0,0,0,60,265a101.36,101.36,0,0,0,11.3-.42,3.78,3.78,0,0,0,3.26-3,32.11,32.11,0,0,0,.53-7.14A32.63,32.63,0,0,0,74.57,247.39Zm-21,2.05H51.33v11.61h-2V249.44H47.16v-1.9h6.35v1.9ZM59,261.05H57.2V260a2.88,2.88,0,0,1-2.08,1.24,1.13,1.13,0,0,1-1.18-.75,5.1,5.1,0,0,1-.16-1.49v-8H55.6v7.41a5,5,0,0,0,0,.72c.05.28.19.42.43.42s.75-.28,1.15-.85V251H59ZM66,258a8.11,8.11,0,0,1-.19,2,1.44,1.44,0,0,1-1.45,1.13,2.5,2.5,0,0,1-1.89-1.11v1H60.61V247.54h1.82V252a2.46,2.46,0,0,1,1.89-1.1A1.44,1.44,0,0,1,65.77,252a7.74,7.74,0,0,1,.19,2Zm6.88-1.68H69.2v1.78c0,.94.3,1.4.93,1.4a.78.78,0,0,0,.81-.73,10.76,10.76,0,0,0,0-1.24h1.86v.27c0,.59,0,1,0,1.18a2.59,2.59,0,0,1-.42,1.09,2.54,2.54,0,0,1-2.21,1.09,2.62,2.62,0,0,1-2.21-1,3.92,3.92,0,0,1-.58-2.36v-3.53a3.89,3.89,0,0,1,.56-2.37,2.59,2.59,0,0,1,2.18-1,2.54,2.54,0,0,1,2.16,1,4,4,0,0,1,.56,2.37v2.08Zm-9.5-3.85a1.34,1.34,0,0,0-.91.45v6.13a1.29,1.29,0,0,0,.91.45c.53,0,.79-.45.79-1.36v-4.29C64.13,253,63.87,252.5,63.34,252.5Z' fill='%23fff'/%3E%3Cpath d='M67.28,232v7.78c-.41.58-.8.86-1.17.86s-.39-.15-.43-.43a5,5,0,0,1,0-.72V232H63.82v8a5.29,5.29,0,0,0,.16,1.52,1.14,1.14,0,0,0,1.19.75,3,3,0,0,0,2.11-1.25v1.11h1.84V232Zm-8.58,7.23V235c0-.94.28-1.41.88-1.41s.88.47.88,1.41v4.28c0,.94-.29,1.41-.88,1.41s-.88-.47-.88-1.41m-1.27-6.31a4,4,0,0,0-.57,2.4v3.56a4,4,0,0,0,.57,2.39,2.74,2.74,0,0,0,4.3,0,4,4,0,0,0,.57-2.39v-3.56a4,4,0,0,0-.57-2.4,2.74,2.74,0,0,0-4.3,0m-2.66-4.4-1.39,5.36-1.45-5.36H49.78c.43,1.27.87,2.54,1.31,3.81a35.7,35.7,0,0,1,1.25,4.31v5.53h2v-5.53l2.46-8.12Z' fill='%23fff'/%3E%3Cg clip-path='url(%23b)'%3E%3Crect x='49.78' y='228.52' width='19.34' height='13.79' fill='%23fff'/%3E%3C/g%3E%3Cpath d='M20,307.42c5.07,0,5.67,0,7.68.11a10.65,10.65,0,0,1,3.53.66,6.3,6.3,0,0,1,3.6,3.6,10.65,10.65,0,0,1,.66,3.53c.09,2,.11,2.61.11,7.68s0,5.67-.11,7.68a10.65,10.65,0,0,1-.66,3.53,6.3,6.3,0,0,1-3.6,3.6,10.65,10.65,0,0,1-3.53.66c-2,.09-2.61.11-7.68.11s-5.67,0-7.68-.11a10.65,10.65,0,0,1-3.53-.66,5.76,5.76,0,0,1-2.18-1.42,5.76,5.76,0,0,1-1.42-2.18,10.65,10.65,0,0,1-.66-3.53c-.09-2-.11-2.61-.11-7.68s0-5.67.11-7.68a10.65,10.65,0,0,1,.66-3.53,5.76,5.76,0,0,1,1.42-2.18,5.76,5.76,0,0,1,2.18-1.42,10.65,10.65,0,0,1,3.53-.66c2-.09,2.61-.11,7.68-.11M20,304c-5.16,0-5.81,0-7.83.11a14.14,14.14,0,0,0-4.62.89,9.2,9.2,0,0,0-3.36,2.19A9.2,9.2,0,0,0,2,310.55a14.14,14.14,0,0,0-.89,4.62C1,317.19,1,317.84,1,323s0,5.81.11,7.83A14.14,14.14,0,0,0,2,335.45a9.2,9.2,0,0,0,2.19,3.36A9.2,9.2,0,0,0,7.55,341a14.14,14.14,0,0,0,4.62.89c2,.09,2.67.11,7.83.11s5.81,0,7.83-.11a14.14,14.14,0,0,0,4.62-.89A9.72,9.72,0,0,0,38,335.45a14.14,14.14,0,0,0,.89-4.62c.09-2,.11-2.67.11-7.83s0-5.81-.11-7.83a14.14,14.14,0,0,0-.89-4.62A9.72,9.72,0,0,0,32.45,305a14.14,14.14,0,0,0-4.62-.89c-2-.09-2.67-.11-7.83-.11Z' fill='%234e4e4e'/%3E%3Cpath d='M20,313.24A9.76,9.76,0,1,0,29.76,323,9.76,9.76,0,0,0,20,313.24Zm0,16.09A6.33,6.33,0,1,1,26.33,323,6.32,6.32,0,0,1,20,329.33Z' fill='%234e4e4e'/%3E%3Cpath d='M32.42,312.86a2.28,2.28,0,1,1-2.28-2.28A2.28,2.28,0,0,1,32.42,312.86Z' fill='%234e4e4e'/%3E%3Cpath d='M60,307.42c5.07,0,5.67,0,7.68.11a10.65,10.65,0,0,1,3.53.66,6.3,6.3,0,0,1,3.6,3.6,10.65,10.65,0,0,1,.66,3.53c.09,2,.11,2.61.11,7.68s0,5.67-.11,7.68a10.65,10.65,0,0,1-.66,3.53,6.3,6.3,0,0,1-3.6,3.6,10.65,10.65,0,0,1-3.53.66c-2,.09-2.61.11-7.68.11s-5.67,0-7.68-.11a10.65,10.65,0,0,1-3.53-.66,6.3,6.3,0,0,1-3.6-3.6,10.65,10.65,0,0,1-.66-3.53c-.09-2-.11-2.61-.11-7.68s0-5.67.11-7.68a10.65,10.65,0,0,1,.66-3.53,6.3,6.3,0,0,1,3.6-3.6,10.65,10.65,0,0,1,3.53-.66c2-.09,2.61-.11,7.68-.11M60,304c-5.16,0-5.81,0-7.83.11a14.14,14.14,0,0,0-4.62.89A9.72,9.72,0,0,0,42,310.55a14.14,14.14,0,0,0-.89,4.62c-.09,2-.11,2.67-.11,7.83s0,5.81.11,7.83a14.14,14.14,0,0,0,.89,4.62A9.72,9.72,0,0,0,47.55,341a14.14,14.14,0,0,0,4.62.89c2,.09,2.67.11,7.83.11s5.81,0,7.83-.11a14.14,14.14,0,0,0,4.62-.89A9.72,9.72,0,0,0,78,335.45a14.14,14.14,0,0,0,.89-4.62c.09-2,.11-2.67.11-7.83s0-5.81-.11-7.83a14.14,14.14,0,0,0-.89-4.62A9.72,9.72,0,0,0,72.45,305a14.14,14.14,0,0,0-4.62-.89c-2-.09-2.67-.11-7.83-.11Z' fill='%23fff'/%3E%3Cpath d='M60,313.24A9.76,9.76,0,1,0,69.76,323,9.76,9.76,0,0,0,60,313.24Zm0,16.09A6.33,6.33,0,1,1,66.33,323,6.32,6.32,0,0,1,60,329.33Z' fill='%23fff'/%3E%3Cpath d='M72.42,312.86a2.28,2.28,0,1,1-2.28-2.28A2.28,2.28,0,0,1,72.42,312.86Z' fill='%23fff'/%3E%3Cpath d='M8.14,377a4.39,4.39,0,1,1,4.38-4.39A4.39,4.39,0,0,1,8.14,377Zm16.63-1H19.08c.28-16-14.9-14.34-14.9-14.34v-5.31C25.38,356.37,24.77,376,24.77,376Zm11.45,0H30.15c-.09-28-26-25.41-26-25.41V345C38.51,345,36.22,376,36.22,376Z' fill='%234e4e4e' fill-rule='evenodd'/%3E%3Cpath d='M48.14,377a4.39,4.39,0,1,1,4.38-4.39A4.39,4.39,0,0,1,48.14,377Zm16.63-1H59.08c.28-16-14.9-14.34-14.9-14.34v-5.31C65.38,356.37,64.77,376,64.77,376Zm11.45,0H70.15c-.09-28-26-25.41-26-25.41V345C78.51,345,76.22,376,76.22,376Z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E")}/*('/images/icons/footer-icons.svg')*/
#socialBlocks a:hover i:after, .shareLinks .stButton .stLarge:after, .profile_social_links a i:after {left: -20px}
a.socialFb i:after, .shareLinks .st_facebook_large .stLarge:after {top: 0}
a.socialTwr i:after, .shareLinks .st_twitter_large .stLarge:after {top: -19px}
a.socialLin i:after, .shareLinks .st_linkedin_large .stLarge:after {top: -38px}
a.socialBlog i:after {top: -57px}
a.socialGoogle i:after, .shareLinks .st_googleplus_large .stLarge:after {top: -76px}
a.socialPin i:after, .shareLinks .st_pinterest_large .stLarge:after {top: -95px}
a.socialYouTube i:after {top: -114px}
a.socialVimeo i:after {top: -133px}
a.socialIG i:after {top: -152px}
a.socialRss i:after {top: -171px}
.color_social_links a.socialFb {background-color: #39579a}
.color_social_links a.socialTwr {background-color: #00acf0}
.color_social_links a.socialLin {background-color: #007ab8}
.color_social_links a.socialIG {background-color: #ee1a74}

/* ==========================================================================
   Css Resets
   ========================================================================== */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, th, td, figure { margin: 0; padding: 0; }
input, select, textarea {
  margin: 0; padding: 0; outline: none; font-family: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
table {border-spacing: 0}
fieldset { border: 0; }
ol, ul { list-style: none; }
caption { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
abbr, acronym { border: 0; }

/* For HTML5 - lt ie9 */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary, menu { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; height: 0; }
svg:not(:root) { overflow: hidden; }

/* initial settings, to prevent footer from jumping if the page content is smaller than the window height */
.catalog_class footer {display: none}
.catalog_class #contentWrap {min-height: 100vh}
.catalog_class:not(.mobile-app) {overflow: hidden}

/* ==========================================================================
   Defaults
   ========================================================================== */
::-moz-selection, ::selection {
  background: #666666;
  color: #ffffff;
  text-shadow: none;
}
.chromeframe {
  position: relative;
  margin: 0.2em 0;
  padding: 0.7em 6px;
  background: #ccc;
  color: #000;
  z-index: 500;
  text-align: center;
}
.chromeframe .chromeframeClose {
  position: absolute;
  top: 7px;
  right: 10px;
  display: block;
  cursor: pointer;
}

/*------------------- Custom Layout Helpers -------------------*/
.floatL { float: left}
.floatR { float: right}
.center {text-align:center}
.vAlignMid {vertical-align: middle}
.vAlignTop {vertical-align: top}
.flex_center {display: flex; align-items: center}
.flex_space_between {display:flex; justify-content: space-between}
.flex_wrap {flex-wrap: wrap}
.wrap {word-break: break-word; hyphens: auto}
.nowrap {white-space: nowrap}
.break_word {word-break: break-word; word-wrap: break-word; /*word-wrap: IE and Edge*/}
table .break_word {line-height: 1.4}
.alignL {text-align: left}
.alignR {text-align: right}
.overflow_visible {overflow: visible !important}
.flip_h {transform: scaleX(-1)}
.p0 {padding: 0 !important}
.pt0 {padding-top: 0 !important}
.pt10 {padding-top: 10px !important}
.pr0 {padding-right: 0 !important}
.pb0 {padding-bottom: 0 !important}
.pl0 {padding-left: 0 !important}
.m_auto {margin: auto}
.m0 {margin: 0 !important}
.mt0 {margin-top: 0 !important}
.mt5 {margin-top: 5px !important}
.mt10 {margin-top: 10px}
.mt15 {margin-top: 15px}
.mt20 {margin-top: 20px}
.mt25 {margin-top: 25px !important}
.mt50 {margin-top: 50px}
.m_r_auto {margin-right: auto !important}
.mr0 {margin-right: 0}
.mr5 {margin-right: 5px !important}
.mr10 {margin-right: 10px !important}
.mr15 {margin-right: 15px !important}
.mr30 {margin-right: 30px}
.mb0 {margin-bottom: 0 !important}
.mb5 {margin-bottom: 5px}
.mb10 {margin-bottom: 10px}
.mb15 {margin-bottom: 15px}
.mb20 {margin-bottom: 20px}
.mb25 {margin-bottom: 25px}
.mb30 {margin-bottom: 30px}
.m_l_auto {margin-left: auto !important}
.ml0 {margin-left: 0 !important}
.ml5 {margin-left: 5px !important}
.ml10 {margin-left: 10px !important}
.ml15 {margin-left: 15px !important}

/* Loading animation */
@keyframes lds-rolling {
  0% {transform: translate(-50%, -50%) rotate(0deg)}
  100% {transform: translate(-50%, -50%) rotate(360deg)}
}
.lds-rolling {position: relative; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px}
.lds-rolling div, .lds-rolling div:after {position: absolute; width: 140px; height: 140px; border: 20px solid #999999; border-top-color: transparent; border-radius: 50%}
.lds-rolling div {animation: lds-rolling 1s linear infinite; top: 100px; left: 100px}
.lds-rolling div:after {transform: rotate(90deg)}
.lds-rolling {width: 50px !important; height: 50px !important; transform: translate(-25px, -25px) scale(0.25) translate(25px, 25px)}

/*------------------- Brand colors -------------------*/
.neo_text {color: #048497}
.matrix_text {color: #4f7a81}
.indie_text {color: #645892}
.neo_bg {background-color: #048497}
.matrix_bg {background-color: #4f7a81}
.indie_bg {background-color: #645892}
.cypher_bg {background-color: #5e5f5f}

/* ===================
   Links
   ===================*/
a {text-decoration: none; text-decoration-skip: ink}
a:hover {text-decoration: none}
.materialStyle a, .alert_block p > a, #hc_content_selector a {text-decoration: underline}

/* Underline links setting */
.underline_links a, .underline_links a.linkedAccount span, .underline_links .catalog_boxes a h2, .underline_links .catalog_boxes:not(.app_boxes) .tooltip a, .underline_links .catalog_boxes a.teacher span, .underline_links .largeImgs a span, .underline_links #leftColumn .dropDown a span, .underline_links .rightColumn .progress_list a span, .underline_links .plansComparisonHeader a > *, .underline_links .quickLinks a.username span, .underline_links .modern_module_overview h2, .underline_links .catalog_boxes.dashboard_widgets .footer a, .underline_links .catalog_boxes:not(.app_boxes).dashboard_widgets a {text-decoration: underline}
/* Remove underline */
.underline_links.portal .mainNav a, .underline_links.portal .customLogo a, .underline_links.portal .panel .btnHolder a, .underline_links.portal .panel a.clearBtn, .underline_links.portal .panel a.colorBtn, .underline_links.portal .bjqs-caption a, .underline_links footer .language, .underline_links.loginPage footer .language, .underline_links.mobileApp footer .language, .underline_links .catalog_boxes:not(.app_boxes) a, .underline_links .largeImgs li > a, .underline_links .lesson_boxes a, .underline_links .lesson_boxes a:hover, .underline_links a.linkedAccount, .underline_links .optionsRibbon a, .underline_links a.options_btn, .underline_links #leftColumn a.locked, .underline_links.catalog_class #leftColumn a.button, .underline_links ul.tabnav li a.selected, .underline_links #centreColumn .centerHeading a, .underline_links .quickLinks a.username, .underline_links .user_guides a, .underline_links #facebox .help_centre a.contentBlock, .underline_links .modern_module_overview {text-decoration: none}
/* Thinner underline */
.underline_links #centreColumn .centerHeading a {border-bottom: 1px solid currentColor; display: inline-block}
@media screen and (min-width: 980px) {
  .underline_links #facebox .help_centre .hc-topic-icon-title a {border-bottom: 1px solid currentColor; display: inline-block; text-decoration: none}
}
.underline_links #star_rating label {border-bottom: 1px solid transparent}
.underline_links #star_rating input:checked + label {border-bottom-color: currentColor}
.underline_links #star_rating input:focus + label {border-bottom-style: solid}
a img {border: 0}
body.mobile-app a{-webkit-touch-callout: none}

/* Switch button */
.switch_labels > * {display: inline-block; vertical-align: middle}
.switch_labels > span:not(.selected) {opacity: .4}
.switch {position: relative; display: inline-block; width: 60px; height: 34px; margin: 0 10px}
.switch input {display: none}
.switch .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: .4s; transition: .4s; border-radius: 34px; background-color: #19a1b5}
.switch .slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%}
.switch input:focus ~ .slider {box-shadow: 0 0 1px #2196F3}
.switch input:checked ~ .slider:before {-webkit-transform: translateX(26px); transform: translateX(26px)}
.switch span.title {white-space: nowrap; margin-left: 74px; vertical-align: middle}
.matrix.switch_labels .slider {background-color: #6a8285}
.indie.switch_labels .slider {background-color: #505161}

/* ===================
   Fonts
   ===================*/
html, body {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  line-height: 1.3;
  font-weight: 300;
}
html, body, button {
  font-family: 'RobotoLightNew', 'Ubuntu', helvetica, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased; /* Safari fix - fixes thin font caused by Transform on Scrolling Catalog */
}
b, strong {
  font-family: 'RobotoRegularNew', helvetica, arial, sans-serif;
  font-weight: normal;
}
[style*='font-family'] b, [style*='font-family'] strong, b [style*='font-family'], strong [style*='font-family'] {
  font-family: inherit;
  font-weight: bold;
}
[style*='Roboto'], table.calendar_small td div {
  font-family: 'RobotoLightNew', 'Ubuntu', helvetica, sans-serif;
  font-weight: 300
}
[style*='Roboto'] b, [style*='Roboto'] strong, b [style*='Roboto'], strong [style*='Roboto'] {
  font-family: 'RobotoRegularNew', helvetica, arial, sans-serif !important;
  font-weight: normal
}
.italics {
  font-family: 'RobotoLightItalicNew', helvetica, arial, sans-serif;
}
table.calendar_small td.highlight div {
  font-family: 'RobotoBold', 'Ubuntu', helvetica, sans-serif
}

.customLogo, body.portal .customLogo {
  font-size: 26px;
}
.catalog_class #leftColumn h1 {
  font-size: 24px
}
#leftColumn h2 {
  font-size: 23px;
}
.customLogo span.longName, .contentBlock .sideText h3, table.plansComparisonHeader h3, table.plansComparisonHeader tr:nth-child(1) th h3 {
  font-size: 22px;
}
#centreColumn h2 {
  font-size: 21px;
}
#centreColumn h2:not(.class_name){
  margin-top: 15px;
}
input[type="submit"], .rightColumn h2, #centreColumn .rightColumn h2 {
  font-size: 19px;
}
#facebox .header h4, .contentBlock .sideText, #fullscreen_msg_holder .header > * {
  font-size: 17px;
}
table.plansComparisonHeader tr:not(:first-child) th:nth-child(1) span, input, select, textarea, p, input[type="button"], button, .link_button {
  font-size: 16px;
}
.catalog_boxes .footer .label, .catalog_courses .footer span, .catalog_class #leftColumn, .dashboard_widgets .footer {
  font-size: 15px;
}
#facebox button, #facebox .footer span, .catalog_courses .no-price, .catalog_courses .dates, .catalog_courses li.no-price, .catalog_item table.certificates td, .catalog_item #contentWrap .reviews .review p:not(.primaryColorText), .rightColumn ul.largeImgs:not(.no-players), .px14, #facebox .link_button {
  font-size: 14px;
}
table.calendar td, table.calendar-events td span, table.calendar-events tr th, table.time-divider tr th {
  font-size: 12px;
}
.px11, table td span.px11 {
  font-size: 11px;
}

/* Transitions */
.guides a, .catalog_class #leftColumn a.button, .quick_edit_icon, .quick_edit_box, .profile_header a:not(.optionsRibbon) {
  transition: all .3s ease-in-out
}

/* Add Ellipsis */
.ellipsisText, .catalog_courses .footer.textFooter .teacher > span, .catalog_courses .footer.textFooter > div > span, .rightColumnHalfWidth h2, .user_boxes a > span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
p, dl dd {
  margin: 10px 0;
  line-height: 1.4;
}

/* Accessibility */
.skipToContent {padding: 12px; background: #000; text-align: center; color: #fff; text-decoration: none; border: 3px solid rgba(255,255,255,0.8); border-width: 0 3px 3px; background-clip: border-box; position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden}
.skipToContent:focus {box-shadow: 0 0 4px 2px rgba(0, 129, 189, 0.4); text-decoration: underline; left: 0; top: 0; width: auto; height: auto; z-index: 100}
.portal #contentWrap:not(.focus):focus {outline: 0}

/* Hide when style sheets are enabled */
.hide {display: none}
.textOffScreen, #socialBlocks a span {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; transform: translatez(0)}

/*------------------- Shared colors -------------------*/
/* Text */
ul.tabnav li a:hover, nav#leftColumn ol li ul.tabnav a:hover, ul.tabnav li a.selected, nav#leftColumn ul.tabnav a.selected, ul.tabnav .dropDown a, ul.tabnav li a.selected span, ul.tabnav li a:hover span, .options_btn {color: #222}
ul.tabnav > li > a, ul.tabnav .dropDown a:hover, nav#leftColumn ul.tabnav a, ul.tabnav li a span, .select_session .date {color: #a8a8a8}/* matching list for high contrast theme in template */

/* Backgrounds */
html, body {background-color: #cacaca}
table th {background: #efefef}
ul.tabnav li a.selected span.block, .accordion_heading .block {background-color: #767676}
ul.tabnav li a span.block {background: #c8c8c8}
ul.tabnav li .dropDown {background: #fcfcfc}
ul.tabnav.summary li a:not(.selected) span.block {background: #a9a9a9}
.highcharts-container .highcharts-background {fill: none}

.grey_background table th {background: #e0e2e4}
.grey_background .rightColumn table:not(.rubric) td {background-color: initial}
.grey_background td.tlEmptyCell {background-color: transparent}

/* Borders */
ul.tabnav {border: 1px solid #c7c7c7}
table th, table td, hr, .catalog_boxes > *, img.avatar, .user_boxes > *, .post_top_bar, .news_holder .post {border: 1px solid #e2e0e0}
.leftColumn > .block, .rightColumn .block, #centreColumn > .block, #centreColumn > div#account_block > div.block, .leftColumn.block, .options_btn, .optionsRibbon ul, .optionsRibbon ul li {border: 1px solid #c8c8c8}

.grey_background .leftColumn > .block, .grey_background .rightColumn .block, .grey_background #centreColumn > .block, .grey_background #centreColumn > div#account_block > div.block, .grey_background .leftColumn.block {border-color: #e2e0e0}
.grey_background .avatarHolder.avatar_msg_holder .multiple .avatar {border-color: #f5f5f5}

body:not(.grey_background) #centreColumn > .block.profile_header {background-color: #f5f5f5}
body:not(.grey_background) .leftColumn > .block {border-width: 0 0 1px; padding-top: 0; padding-right: 0; padding-left: 0; border-radius: 0}
body:not(.grey_background) .leftColumn > .block:last-child {border-width: 0}

/* ===================
   Forms
   ===================*/
/* backgrounds and border colors */
input[type="text"], input[type="number"], input[type="tel"], input[type="url"], input[type="password"], input[type="email"], input[type="date"], input[type="file"], textarea, select, div.selectWrap, input[type="checkbox"] + label:before, input[type="radio"] + label:before, input[type="file"]:after, a.multiSelect, input.jscolor {
  background-color: #fcfcfc;
  border: 1px solid #ccc;
  -webkit-font-smoothing: inherit; /* Safari thin text fix */
  border-radius: 3px
}
input[type="file"]:after {
  background-color: #f4f4f4;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="email"]:focus, button:focus, textarea:focus, select:focus, input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before, .link_button:focus {
  box-shadow: 0 0 3px 2px rgba(94, 180, 254, 1);
  outline: 0;
}
input[type="text"]:disabled, input[type="number"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, button:disabled, textarea:disabled, select:disabled, input[type="checkbox"]:disabled + label:before, input[type="radio"]:disabled + label:before, input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label, button:disabled:hover, a.disabled, input[type="button"]:disabled, input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: default
}
a.disabled:not(.link_button) {
  color: #666 !important
}
input[aria-invalid='true'], select[aria-invalid='true'] {border-color: #c43030 !important}
#mainContent:focus, .catalog_class #checkout_summary, .catalog_class #checkout_summary input[type="checkbox"]:focus + label:before {
  box-shadow:none; outline:none
}

form .btn_tooltip {position: relative; display: inline-block; text-align: center; min-width: 24px}
form .btn_tooltip .tooltip_content {display: block; position: absolute; bottom: 110%; left: 50%; z-index: 200; width: 166px; height: auto; margin-bottom: 5px; padding: .75em 1em .8em; text-align: center; color: #fff; font-size: 12px; border-radius: 4px; background-color: #333;
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1); transform: scale(0.8) translateX(-50%); transform-origin: center 120%; -webkit-backface-visibility: hidden; opacity: 0; box-sizing: border-box}
form .btn_tooltip:focus .tooltip_content, form .btn_tooltip:hover .tooltip_content {clip: auto; overflow: visible; transform: scale(1) translateX(-50%); opacity: 1; cursor: pointer}

.tippy-tooltip {font-size: 13px; padding: 8px 8px; line-height: 1.4; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto}
.tippy-tooltip.error-theme {background-color: #c43030; padding: 3px 5px}
.tippy-popper[x-placement^=top] .tippy-tooltip.error-theme .tippy-arrow {border-top-color: #c43030}
.tippy-popper[x-placement^=bottom] .tippy-tooltip.error-theme .tippy-arrow {border-bottom-color: #c43030}

/* -------------------  Inputs, textareas and selects  ------------------- */
label {
  width: 150px;
  display: inline-block;
}
p.middleAlign input, p.middleAlign label, p.middleAlign select,
label.middleAlign, label.middleAlign ~ label {
  vertical-align: middle;
}
input, select, textarea, label  {margin: 0 14px 0 0}
legend {float: left; margin: 2px 18px 0 0; padding: 0}
input[type="text"], input[type="date"], input[type="number"], input[type="tel"], input[type="url"], input[type="password"], input[type="email"], input[type="file"], select, input.jscolor {
  width: 180px;
  padding: 4px 5px 5px
}
input.hasDatepicker {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20'%3E%3Cpath d='M11.5,3H1.5A1.51,1.51,0,0,0,0,4.54v11A1.5,1.5,0,0,0,1.5,17h10A1.5,1.5,0,0,0,13,15.5v-11A1.5,1.5,0,0,0,11.5,3ZM3,16H1V14H3Zm0-3H1V11H3Zm0-3H1V8H3ZM3,7H1V5H3Zm3,9H4V14H6Zm0-3H4V11H6Zm0-3H4V8H6ZM6,7H4V5H6Zm3,9H7V14H9Zm0-3H7V11H9Zm0-3H7V8H9ZM9,7H7V5H9Zm3,9H10V14h2Zm0-3H10V11h2Zm0-3H10V8h2Zm0-3H10V5h2Z' fill='%235e5f5f' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right; background-size: 21px
}/*('/images/icons/calendar-input.svg')*/
input.hasDatepicker::-ms-clear { /* Remove IE clear icon */
  display: none;
}
label.textareaLabel {
  vertical-align: top;
  margin-top: 5px;
}
textarea {padding: 5px; width: 100%; height: 5em; line-height: 1.4; resize: vertical}
select {
  padding: 4px 6px 4px 4px;
  box-shadow: none;
  height: 33px;
}
select option {
  padding: 2px 3px;
}
#contentBody select.autoSelectWidth, #contentBody form.autoSelectWidth select,
#contentBody form.formAutoWidths select, #contentBody form.formAutoWidths input[type="text"], #contentBody form.formAutoWidths input[type="password"] {
  width: auto;
  margin-right: 0;
}

.catalog_search_holder {margin-left: 15px; position: relative}
.catalog_search_holder button {position: absolute; right: 1px; top: 1px; width: 25px; height: 26px; padding: 0; margin: 0; line-height: 1; background: transparent}
.catalog_search_holder button i {margin-top: 0}
.catalog_search_holder input[type="text"] {margin: 0; padding: 0 28px 1px 7px; width: 248px; height: 28px; font-size: 14px; border-radius: 3px}
.catalog_search_holder input[type="text"]:focus {box-shadow: none}
@media screen and (max-width: 979px) {
  .user .catalog_search_holder {margin-top: -1px}
}
@media screen and (max-width: 767px) {
  .ctr_change_password header .mobileBar .leftMobileBar{ display: none;}
  .user .catalog_search_holder {margin: 1px 0 15px; display: inline-block}
}

.table_search_holder {margin: 3px 3px 0 3px; position: relative; display: inline-block}
.table_search_holder button {position: absolute; left: 5px; top: 4px; padding: 0; margin: 0; line-height: 1; background: transparent}
.table_search_holder input[type="text"] {margin: 0; padding: 0 7px 1px 26px; height: 28px; font-size: 14px; border-radius: 3px}
.table_search_holder .show-filter-field {border: 1px solid #c8c8c8; border-width: 0 0 0 1px; position: absolute; right: 4px; top: 4px; bottom: 4px; padding-left: 5px}
.table_search_holder .show-filter-field i {margin: -4px -2px 0 0}
.table_search_holder button i {margin: 0}

/* -------------------  File field  -------------------  */
input[type="file"] {
  height: 36px;
  width: 280px;
  padding: 0;
  vertical-align: text-bottom;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* FF Only */
@-moz-document url-prefix() {
  input[type="file"] {
    height: 29px;
  }
}
/* Webkit Only */
input[type=file]::-webkit-file-upload-button {
  width: 0;
  padding: 8px 0;
  margin: 0;
  -webkit-appearance: none;
  border: none;
}
input[type="file"]:after {
  content: 'Upload File';
  margin: -10px 0 0 5px;
  display: inline-block;
  left: 100%;
  position: relative;
  padding: 6px 15px;
}
.touch input[type="file"]:after {
  margin-top: -1px;
}

/* -------------------  Checkboxes and Radio Inputs  -------------------  */
input[type="radio"], input[type="checkbox"] {
  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; -webkit-transform: translatez(0); transform: translatez(0); -moz-transform: translatez(0); -o-transform: translatez(0); -ms-transform: translatez(0)
}
input[type="checkbox"] + label:before, input[type="radio"] + label:before {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  top: 0.2em;
  left: -2px;
  content:'';
  margin-right: 5px;
}
input[type="checkbox"] + label, input[type="radio"] + label {
  width: auto;
  cursor: pointer;
}
input[type="radio"] + label:before {
  border-radius: 50%;
}
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before {
  background: #fff url('/images/icons/form-elements.png') no-repeat;
  background-size: 36px; /* half actual width */
}
input[type="radio"]:checked + label:before {
  background-position: -18px 0;
}
/* Radio / Checkboxes with empty labels */
input[type="checkbox"].emptyLabel + label:before, input[type="radio"].emptyLabel + label:before{
  margin-right: 0;
  top: 0;  left: -1px;
}
table input[type="checkbox"].emptyLabel + label:before, table input[type="radio"].emptyLabel + label:before {
  top: 50%;
  vertical-align: top;
}
input[type="checkbox"].emptyLabel + label, input[type="radio"].emptyLabel + label {
  margin: 0;
}

/* ------------------- Form Submit and Next buttons ------------------- */
input[type="submit"], input[type="button"], button, .link_button {
  margin-top: 15px;
  padding: 0 15px;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  line-height: 33px;
  -webkit-appearance: none; /* Remove default input button styling on iPad */
  vertical-align: middle;
}
input[type="submit"]:active, input[type="button"]:active, button:active {
  -webkit-box-shadow: none;
  box-shadow:none;
}
.link_button {display: inline-block; color: #fff}
.link_button:hover {opacity: .7; color: #fff}
button.inverted, input[type="button"].inverted, .link_button.inverted {background-color: #efefef; color: #222}
button img, input[type="button"] img, .link_button img {vertical-align: middle; margin: -2px 0 0 3px}
button i {margin-top: -3px}
button i.arrowLeft {margin-left: -8px; margin-right: 5px}
button i.arrowRight {margin-left: 7px; margin-right: -9px}

div.spinner_holder {height: 50px; position: relative; opacity: 0.7}
button.in-progress {position: relative; opacity: 0.7}
button.in-progress > span {opacity: 0}
button.in-progress .spinner, div.spinner_holder .spinner {left: 50%; top: 50%}

/* jwplayer controls fix affected by the upper code */
.jwplayer .jwcontrols button {
  margin-top: 0;
}

/* ===================
   Wrappers
   ===================*/

body#facebox {
  height: 100%;
}

body.popup {
  padding: 3%;
  height: 94%;
  width: 94%;
  background-color: #FFFFFF;
}
#wrapper {margin: 0 auto}

/* ===================
   Login & Portal Site Names
   ===================*/
.customLogo {background: none; display: table}
.customLogo a {height: 75px}
.customLogo a img:not([src=""]) + span {margin-left: 14px; line-height: 1.2}
.customLogo a img {max-width: 100%; max-height: 51px; flex-shrink: 0}
.customLogo a, .customLogo a img + span, .customLogo a span.longName {vertical-align: middle; display: flex; align-items: center}
.customLogo a span.longName {word-wrap: break-word; line-height: 1.2; margin-top: -2px; display: inline-block}
.loginPage h1.customLogo a span.longName {margin-top: 0; margin-bottom: 0}

/* ====== Mobile Bar - Nav Replacement ======*/
header .mobileBar {
  display: block;
  padding: 10px 18px 11px;
  overflow: hidden;
  color: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
header .mobileBar .leftMobileBar {
  position: absolute;
  z-index: 2;
  width: 36px; height: 32px;
  margin: -5px 0 0 -9px;
  background: url('/images/icons/mobile-nav-icon.gif') center no-repeat;
  background-size: 18px 14px;
}
header .mobileBar .middleMobileBar {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  text-align: center;
}
header .mobileBar .middleMobileBar > span {
  display: inline-block;
  overflow: hidden;
  width: 54%;
}
header .mobileBar .middleMobileBar a {
  color: #fff;
}
header .mobileBar .rightMobileBar {
  position: relative;
  z-index: 2;
  color: #fff;
  float: right;
}
header .mobileBar .backLink {
  position: absolute;
  z-index: 2;
  color: #fff;
  padding: 7px;
  top: 3px;
  left: 5px;
}
header .mobileBar .backLink img {
  width: 20px;
  height: 20px;
}

/* ====== Flowplayer captions =====*/
.flowplayer .fp-captions p {color: #fff}

/* ====== Border radius =====*/
.rightColumn .block, .leftColumn.block, #centreColumn > .block, #centreColumn > div#account_block > div.block, .user_boxes > *, .leftColumn > .block, .news_holder .post {border-radius: 10px}
.catalog_boxes > * {border-radius: 10px; overflow: hidden}
img.avatar {border-radius: 50%}

tbody:not(.highlightLesson) .modern_module_row > * {border-radius: 10px}
tbody.highlightLesson .modern_module_row > * {border-radius: 10px 10px 0 0}
tbody.highlightLesson .modern_module_row ~ tr:last-child td {border-radius: 0 0 10px 10px}
@media only screen and (max-width: 479px) {
  .modern_module_row .imgCrop {border-radius: 10px 10px 0 0}
}
@media only screen and (min-width: 480px) {
  tbody.highlightLesson .modern_module_row .imgCrop {border-radius: 10px 0 0 0}
  tbody:not(.highlightLesson) .modern_module_row .imgCrop {border-radius: 10px 0 0 10px}
}

/* ====== Centre Column Content =====*/
#centreColumn > .block, #centreColumn > div#account_block > div.block, .leftColumn > .block {background-color: #fff; padding: 5px 15px 10px}
#centreColumn > .block:last-of-type {margin-bottom: 5px}

/* ====== Left Column Content =====*/
#leftColumn > a.user_logo {display: inline-block}
#leftColumn > img:not(.noBorder), #leftColumn > a.user_logo {margin: 0 auto 10px}
#leftColumn > img.noBorder {margin: -15px 0 10px -14px}
#leftColumn > .img_crop_wrap {margin: -15px -14px 14px}
#leftColumn > .img_crop_wrap img, #leftColumn > a.user_logo img {width: 100%}
#leftColumn > .img_crop_wrap img {margin-bottom: -4px}

.leftColumn.block {margin: -19px 0 15px; background-color: #fff; padding: 5px 15px 15px}
.leftColumn.cc-pr .max_user_content_width {clear: both}
.leftColumn > .block {padding: 14px 14px 4px; margin-bottom: 14px}
.leftColumn > .block .headingLinkWrap {padding: 0 0 2px}
.leftColumn > .block .headingLinkWrap .heading_amount {top: -3px}

/* ====== Right Column Content =====*/
.rightColumn .block {margin-bottom: 15px; background-color: #fff; clear: both}
.rightColumn .block:last-child {margin-bottom: 0}

.rightColumn h2 {padding: 10px 14px 0; margin-bottom: 5px}
.rightColumn h2 span {display: inline-block}
.rightColumn a.sectionLink {float: right; padding: 12px 14px 0 0}

.headingLinkWrap {position: relative; padding-right: 10px; display: flex}
.headingLinkWrap h2 {flex: 1}
.headingLinkWrap.nowrap h2 {white-space: nowrap; display: flex !important; overflow: hidden}
.headingLinkWrap.nowrap span:not(.heading_amount) {text-overflow: ellipsis; overflow: hidden; font-size: 19px !important}
.headingLinkWrap.nowrap .heading_amount {top: 0}
.headingLinkWrap_sml h2 {font-size: 17px !important}
.rightColumn .headingLinkWrap > a {margin-top: 10px}
.rightColumn .headingLinkWrap a.avatarHolder, .rightColumn .headingLinkWrap .tooltip a, .rightColumn .headingLinkWrap .quick_edit_icon {position: static}
.rightColumn .indent .headingLinkWrap > a {top: 0; right: 0}
.rightColumn h2 + p, .rightColumn .headingLinkWrap + p,
.rightColumn h2 + .optionsRibbon {margin-top: 8px}
.rightColumn p:last-child {margin-bottom: 10px}
.rightColumn .optionsRibbon:last-child {margin-bottom: 6px}
#contentWrap .rightColumn form {margin: 8px 0 14px}
.rightColumn form button {margin-top: 0; padding: 0 10px; font-size: 15px}

.rightColumn .organizationLogo {padding: 10px}
.rightColumn .organizationLogo img {max-height: 185px; max-width: 100%}
.rightColumn .block .materialStyle img {max-width: 100%; height: auto !important}
.rightColumn .block .materialStyle > *[class*='resource-'] > * {max-width: 100%} /* videos without inline styles */
.rightColumn .block .materialStyle > *[class*='resource-'] {padding: 0 14px}
.rightColumn .block .materialStyle > .resource-vimeo > iframe {background-color: #000}
.rightColumn .block .materialStyle p {word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto}
.rightColumn .block .materialStyle p > a {word-break: break-all}

@media (max-width: 500px), (min-width: 980px) {
  /* For videos */
  .rightColumn .block .materialStyle > *[class*='resource-'] {padding-bottom: 0 !important; width: auto !important}
  .rightColumn .block .materialStyle > *[class*='resource-']:not([class*='audio']) > * {height: auto !important}/*exclude audio*/
  .rightColumn .block .materialStyle > *[class*='resource-'] > iframe {position: static !important}
  .rightColumn .block .materialStyle > .resource-flowplayer-video > .flowplayer {width: 100% !important}
}

/* Right column Flowplayer */
.flowplayer.fixed-controls .fp-time em {bottom: -22px !important}/* all flowplayers */
.rightColumn .resource-flowplayer-audio {display: flex; align-items: start; height: 34px}
.rightColumn .resource-flowplayer-audio > * {margin: 0 auto 34px !important}
.rightColumn .resource-flowplayer-audio .flowplayer:not(.is-rtl) .fp-controls .fp-play {left: 0 !important}
.rightColumn .resource-flowplayer-audio .flowplayer:not(.is-rtl) .fp-remaining,
.rightColumn .resource-flowplayer-audio .flowplayer:not(.is-rtl) .fp-duration {right: 115px !important}
.rightColumn .resource-flowplayer-audio .flowplayer:not(.is-rtl) .fp-elapsed {left: 33px !important}
.rightColumn .resource-flowplayer-audio .is-rtl.flowplayer .fp-controls {left: 0 !important; right: 0 !important}
.rightColumn .resource-flowplayer-audio .is-rtl.flowplayer .fp-controls .fp-play {right: 0 !important}
.rightColumn .resource-flowplayer-audio .is-rtl.flowplayer .fp-controls .fp-timeline {margin: 0 31px 0 114px !important}
.rightColumn .resource-flowplayer-audio .is-rtl.flowplayer .fp-remaining,
.rightColumn .resource-flowplayer-audio .is-rtl.flowplayer .fp-duration {left: 115px !important}
.rightColumn .resource-flowplayer-audio .is-rtl.flowplayer .fp-elapsed {right: 33px !important}

.rightColumn ul, .rightColumn .optionsRibbon ul, .rightColumn p, .rightColumn .indent {margin: 0 14px 5px}
.rightColumn .indent {position: relative}
.rightColumn table:not(.rubric) tr td, .rightColumn ul li {
  border-color: #f2f0f0;
}
.rightColumn ul li, #centreColumn .rightColumn ul li {
  border-width: 0 0 1px;
  border-style: solid;
  padding: 5px 0 5px 30px;
  margin: 0;
  position: relative;
}
.rightColumn ul li.centreIcon, #centreColumn .rightColumn ul li.centreIcon, #centreColumn .rightColumn .optionsRibbon ul li {
  padding: 0;
}
.rightColumn ul li:last-child, #centreColumn .rightColumn ul li:last-of-type:not(.keep_border),
.rightColumn ul li.centreIcon, #centreColumn .rightColumn ul li.centreIcon,
.rightColumn table tr:last-child td {
  border-bottom-width: 0;
}
.rightColumn ul li:not(.centreIcon) a, .rightColumn ul li p {
  margin: 0;
  display: block;
}
.rightColumn ul li:not(.centreIcon) > i {
  position: absolute;
  top: 50%;  left: 0;
  margin-top: -10px;
}
.rightColumn ul li:not(.centreIcon) i.inline, .rightColumn p i {
  margin: -4px 0 0 0;
}
.rightColumn ul li:not(.centreIcon) i.inline:after {top: -60px;}  /* remove later */
/* Lists with thumbnails */
.rightColumn ul.largeImgs li, #centreColumn .rightColumn ul.largeImgs li {
  padding-left: 0;
  /*overflow: hidden;  Removed - hides tooltips */
}
.rightColumn ul.largeImgs li img, .rightColumn p i {
  margin-right: 10px;
  vertical-align: middle;
}
.rightColumn ul.largeImgs:not(.leaderboardSml) li:not(.centreIcon) div,
.rightColumn ul.largeImgs:not(.leaderboardSml) li:not(.centreIcon) a,
.rightColumn ul.largeImgs .tooltip a, .rightColumn ul.largeImgs a span {
  width: 170px;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  margin-top: -2px;
}
.rightColumn ul.largeImgs a span {margin-top: 0}
.rightColumn ul.largeImgs:not(.leaderboardSml) li:not(.centreIcon) a:first-child {
  width: auto;
}
.rightColumn ul.largeImgs:not(.leaderboardSml) li:not(.centreIcon) a + span {display: block}
.rightColumn ul.largeImgs.certificates li {clear: both; overflow: hidden}
.rightColumn ul.largeImgs.certificates li img {float: left}
/* Logos */
.rightColumn ul.largeImgs.logos li {display: flex; align-items: center; min-height: 30px}
.rightColumn ul.largeImgs.logos li > .logo_holder {width: 36px}
.rightColumn ul.largeImgs.logos .logo_holder {width: 32px; text-align: center}
.rightColumn ul.largeImgs.logos .logo_holder img {width: auto; max-height: 32px; max-width: 32px; margin: 0 !important}
.rightColumn ul.largeImgs.logos .logo_holder + span {position: static}
/* No indent list */
.rightColumn ul.no_indent li {padding-left: 0 !important}
/* Centre Icons - toggleList & ellipsis */
li a.centreIcon i, li.centreIcon i {display: block; margin: 4px auto 0}
li a.centreIcon i.mb5 {margin-bottom: 5px}
.portal #contentBody ul.no_indent li.centreIcon {margin: 0; padding: 0}
.portal #contentBody ul.no_indent li.centreIcon + div > ol {margin-bottom: 0}
/* Due date text */
.rightColumn ul li a.dueLink span {line-height: 22px; float:left}
.rightColumn ul li a span:first-child {width: 105px}
/* Icon after word */
.rightColumn ul li span + span {position: absolute}
.rightColumn ul li span:not(.ratingStatic) i {margin: -4px 0 0 5px}
.rightColumn ul li span.ratingStatic i {margin-top: -4px}
/* Category link */
.rightColumn ul li a.inline_link_lrg, .rightColumn ul li a.inline_link {display: inline; white-space: pre-wrap !important; font-size: 16px}
.rightColumn ul li a.inline_link {font-size: 14px}
/* To grade */
.rightColumn ul li a.title_and_count {display: flex}
.rightColumn ul li a.title_and_count span:first-child {width: auto; padding-right: 5px}
.rightColumn ul li a.title_and_count .small_number_block {font: 11px/9px Arial, sans-serif; margin: 1px 0 0 auto; padding: 5px 4px; position: static; height: 8px; background-color: #767676}
/* noEllipsis list */
.rightColumn ul.noEllipsis li a, .rightColumn ul.noEllipsis li p, li.noEllipsis {
  overflow: visible !important;
  white-space: normal !important;
}
/* Form elements */
.rightColumn label {margin: 0}
.rightColumn input[type="text"],
.rightColumn input[type="password"] {
  width: 100%;
}
.rightColumn input[type="submit"],
.rightColumn input[type="button"],
.rightColumn button {
  margin-left: 14px;
}
/* Right Column Tables */
.rightColumn table:not(.calendar_small) {width: 100%; padding: 0 14px; margin: 6px 0}
.rightColumn table:not(.calendar_small) tr:first-child td {border-top-width: 0}
.rightColumn table:not(.calendar_small) tr td {padding-left: 0; padding-right: 0}
.rightColumn ul.certificates li table {margin: 0; padding: 0; width: 100%}
.rightColumn ul.certificates li table tr td:first-child {width: 40px}
.rightColumn ul.certificates li table tr td {padding-left: 0; padding-right: 0}
/* Right column calendar filter */
.rightColumn .calendar_filter .headingLinkWrap {margin-bottom: 0}
.rightColumn .calendar_filter input[type="checkbox"] + label[for*='toggle']:before {margin-right: 0}
.rightColumn .calendar_filter .calendar_filter_list {padding-bottom: 7px}
.rightColumn .calendar_filter .calendar-item .dropDownHolder {right: 14px}
.rightColumn .calendar_filter .calendar-item .dropDownHolder .dropDown {padding: 7px 0}
.rightColumn .calendar_filter label {user-select: none; font-size: 15px}
/* Right column filter form */
.rightColumn #filter_form p > label, .rightColumn #filter_form fieldset legend {margin-bottom: 5px}
.rightColumn #filter_form p:not(:first-child) > label, .rightColumn #filter_form fieldset legend {margin-top: 5px}
.rightColumn #filter_form label, .rightColumn #filter_form input, .rightColumn #filter_form select {width: 100% !important; margin: 0}
.rightColumn #filter_form fieldset {margin: 10px 14px}
.rightColumn #filter_form fieldset label {margin-left: 3px}
.rightColumn #filter_form input, .rightColumn #filter_form fieldset label, .rightColumn #filter_form select {font-size: 15px}
.rightColumn #filter_form .select2-container {width: 100%}
.rightColumn #filter_form .select2-container .select2-choices,
.rightColumn #filter_form .select2-container .select2-drop-active {border-radius: 3px; border-color: #ccc !important}
.rightColumn #filter_form .search_shortcuts a {font-size: 15px}
.rightColumn #filter_form .search_shortcuts i {margin-right: 1px; margin-left: 2px}
@media (max-width: 979px) {
  .rightColumn #filter_form {display: none}
}

/*------------------- Options Ribbon -------------------*/
.optionsRibbon {padding: 0 3px 7px 0; position: relative; left: -3px; width: 100%; height: 29px; overflow: hidden}
.optionsRibbon.withBorder {border-bottom: 1px solid #D7DCDE}
.optionsRibbon ul {display: block; float: left; list-style-type: none; margin: 3px; border-radius: 3px; background: #fff}

.optionsRibbon.optionsRibbon_multi_ul {height: auto; overflow-x: hidden !important; overflow-y: auto !important; margin-bottom: -5px}
.optionsRight.optionsRibbon_multi_ul {text-align: right; overflow-x: hidden}
.optionsRight.optionsRibbon_multi_ul ul {float: none; display: inline-block; margin-right: 0; margin-bottom: 0}
.optionsRight.optionsRibbon_multi_ul ul ~ ul {margin-left: 10px}

.optionsRibbon ul li {list-style-type: none; border-width: 0 0 0 1px; border-color: transparent; float: left; font-size: 14px; line-height: 20px; position: relative}
.optionsRibbon ul li:after {content: ''; display: block; width: 1px; left: -1px; top: 3px; bottom: 3px; position: absolute; background: #c8c8c8}
.optionsRibbon ul li:first-child, .optionsRibbon ul > span:first-child > li:first-child {border-left-width: 0}
.optionsRibbon ul span li:first-child {border-left-width: 1px}
.optionsRibbon ul li a, .optionsRibbon ul li span.quick_search {padding: 3px 8px; display: inline-block}
.optionsRibbon ul:not(.inverted) li a:hover, .optionsRibbon ul:not(.inverted) li a.highlight {background:  none}
.optionsRibbon ul li a i, .optionsRibbon ul li span.quick_search i {vertical-align: top; margin: 0 6px 0 0}
.optionsRibbon ul li a i.iconRight {margin: 0 0 0 6px}
.optionsRibbon ul li a i.single, .optionsRibbon ul li span.quick_search i.single {margin-right: -2px; margin-left: 2px}
.options_btn i.single {margin-right: -4px; margin-left: 0}
.options_btn i.single.calendar {margin-right: -5px}
.optionsRibbon ul li a i.add.single {margin-left: -1px}
.optionsRibbon ul li a i.arrowUp {margin-top: -1px}

.optionsRibbon .dropDown ul {margin: 0}
.optionsRibbon .dropDown ul, .optionsRibbon .dropDown ul li {border: 0; white-space: nowrap}
.optionsRibbon > ul > li.overflowOption, .optionsRibbon > ul > li.mobile_only {display: none}
.optionsRibbon .dropDown ul li, .optionsRibbon .dropDown ul li > a {width: 100%; box-sizing: border-box}
.optionsRibbon .dropDown ul li > a {padding: 3px 8px 4px}

.optionsRibbon span.quick_search {position: relative}
.optionsRibbon input.quick_search {font-size: 13px; line-height: 12px; padding: 1px 4px; width: 150px; height: 20px; margin: 0 10px}
.optionsRibbon a.quick-filter-button, .optionsRibbon a.quick-close-button {margin: 0; padding: 0}
.optionsRibbon a.quick-close-button {margin-left: 5px}
#SearchResultsWrapper {min-height: 200px}/* to match quick_search max-height */
.optionsRibbon input + a.quick-close-button {margin-left: 0}
.optionsRibbon span.quick_search ul {position: absolute; top: 23px; left: -2px; width: 260px; z-index: 9; border-radius: 0; max-height: 200px; overflow-x: hidden; overflow-y: auto; background-color: #fff}
.optionsRibbon span.quick_search ul li {display: block; width: 100%}
.optionsRibbon span.quick_search ul li:after {width: 0}
.compactFilterContainer + .optionsRibbon {margin-bottom: -7px}
.dashboard-search-options {margin-top: -3px}
.dashboard-search-options + form.tableForm {margin-top: 10px!important}
@media only screen and (min-width: 768px) {
  .dashboard-search-options {overflow: visible}/*prevent options jump before JS*/
}
form#QuickSearchRedirect {display: inline-block; margin: 0!important}

.optionsRight, .optionsLeft {border-width: 0; float: right; top: -2px; padding: 0 0 5px 0; width: auto}
.optionsRight {left: 0; margin-left: 30px}
.optionsLeft {float: left}

.optionsRibbon ul.selected {background: #e9e9e9}
.optionsRibbon ul li.selected a:before {content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px}
.optionsRibbon ul li.selected a i:after {left: -20px}
.optionsRibbon#view_options ul li a i {margin: 0 3px 0 0}

.optionsRibbon ul.inverted, .options_btn.inverted {border-width: 0 !important}
.optionsRibbon ul.inverted li a, .options_btn.inverted {color: #fff}
.options_btn.inverted {padding-top: 2px; padding-bottom: 3px}
.optionsRibbon ul.inverted > li > a {padding-top: 4px; padding-bottom: 4px; border-radius: 3px}
.optionsRibbon ul.inverted li a:hover, .optionsRibbon ul.inverted li a:focus,
.options_btn.inverted:hover, .options_btn.inverted:focus {color: #fff !important; opacity: 0.7}

.optionsRibbon.optionsToggle ul:not(.selected) {z-index: 1; position: relative}
.optionsRibbon.optionsToggle ul:first-child {margin-right: -4px}
.optionsRibbon.optionsToggle ul li a {cursor: pointer}

.optionsRibbon.tabsRight {position: absolute; right: -5px; left: auto; width: auto; top: 78px}
#fixedSectionHeader .alert_block:not([style*='opacity: 0']) ~ .optionsRibbon.tabsRight {top: 151px}

.options_btn {display: inline-block; font-size: 14px; padding: 1px 8px 2px; white-space: nowrap; line-height: 23px; border-radius: 3px; background-color: #fff}
.options_btn:not(.optionsRight):not(.optionsLeft) {margin: 3px 0}
.options_btn.optionsRight, .options_btn.optionsLeft {border-width: 1px; margin-top: 3px}
.options_btn i {vertical-align: top; margin: 2px 4px 0 0}
.options_btn i.arrowRight:not(.single) {margin-right: -3px; margin-left: 6px}
.options_scroll_list {width: 160px; max-height: 400px; overflow-x: hidden; overflow-y: auto; border: 0px !important}

@media screen and (max-width: 980px) {
  .optionsRibbon.tabsRight {top: 78px}
}
@media screen and (max-width: 768px) {
  .optionsRibbon.tabsRight ul li a span {display: none}
  #fixedSectionHeader .optionsRibbon.optionsRight ul li a span {display: none}
}
@media screen and (min-width: 980px) {
  .pageHeading.mobile_only + .optionsRight {position: absolute; right: 15px; left: auto; top: 15px}
}

/* OptionsRibbon in Right Column */
.rightColumn .optionsRight {top: 0}
.rightColumn .optionsRibbon:not(.optionsRight) {left: 0; padding-right: 0; margin-top: -3px; overflow: hidden}
.rightColumn p + .optionsRibbon:not(.optionsRight) {margin-top: 0}
.rightColumn .optionsRibbon ul {margin-top: 3px}
.rightColumn .optionsRibbon ul li {padding: 0}
.rightColumn .optionsRibbon ul li a {padding-bottom: 1px}

/* Table options */
.optionsRibbon.optionsRibbonTable_separate {overflow: visible; height: auto; padding-bottom: 5px}
.optionsRibbon.optionsRibbonTable_separate:before, .optionsRibbon.optionsRibbonTable_separate:after {content: " "; display: table}
.optionsRibbon.optionsRibbonTable_separate:after {clear: both}
.optionsRibbon.optionsRibbonTable_separate li:only-child > .dropDownHolder > a {padding-right: 5px}
.optionsRibbon.optionsRibbonTable_separate li:only-child > .dropDownHolder .dropDown {right: auto; left: -1px}

table.rulesList tr th:first-child,
.optionsRibbon.optionsRibbonTable_separate + table tr th:first-child {border-radius: 4px 0 0 0}
table.rulesList tr th:last-child,
.optionsRibbon.optionsRibbonTable_separate + table tr th:last-child {border-radius: 0 4px 0 0}
table.rulesList tr:last-child td:first-child,
.optionsRibbon.optionsRibbonTable_separate + table tr:last-child td:first-child {border-radius: 0 0 0 4px}
table.rulesList tr:last-child td:last-child,
.optionsRibbon.optionsRibbonTable_separate + table tr:last-child td:last-child {border-radius: 0 0 4px 0}

.optionsRibbon .dropDownHolder {position: relative}
.optionsRibbon .dropDownHolder > a i {margin: 0 0 0 3px}
.optionsRibbon .dropDownHolder > a i.ellipsis_vertical {margin: 0 -5px 0 0 !important}
.optionsRibbon .dropDownHolder .dropDown {position: absolute; top: 26px; right: -1px; z-index: 2; background: #fff}
.optionsRibbon .dropDownHolder .dropDown > a, .optionsRibbon .dropDownHolder .dropDown div {white-space: nowrap; padding: 4px 6px 3px}
#centreColumn .optionsRibbon .dropDownHolder .dropDown input {width: 137px}

/* Keep gap above optionsRibbon the same with or without .optionsRight */
.pageHeading + .optionsRibbon:not(.optionsRight), .pageHeading + .optionsRight + .optionsRibbon:not(.optionsRight) {
  margin-top: 8px;
}

/* ---------- Multiline ellipsis ---------- */
div.ellipsis {
  overflow: hidden;
  height: 36px;
}
div.ellipsis:before {
  content:"";
  float: left;
  width: 5px; height: 36px;
}
div.ellipsis > *:first-child {
  float: right;
  width: 100%;
  margin-left: -5px;
}
div.ellipsis:after {
  content: "\02026";
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  float: right; position: relative;
  top: -18px; left: 100%;
  width: 2em; margin-left: -2em;
  padding: 0 5px 5px 0;
  text-align: right;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
.lt-ie10 div.ellipsis:after {
  width: 1em;
  margin-left: -1em;
  background: #fff;
}
tbody.highlightLesson div.ellipsis {height: auto}
tbody.highlightLesson div.ellipsis:after {display: none}

/*------------------- Tables -------------------*/
table {
  border-collapse: separate;
  margin: 10px 0 20px;
  text-align: left;
}
table th, table td, table a, table div {
  vertical-align: middle;
  line-height: 16px;
}
table th, table td {
  padding: 6px 8px;
  height: 18px
}
table th.no-select, table td.no-select {
  -webkit-user-select: none; /* Remove highlight when shift selecting checkboxes */
}
table.sis th, table.sis td {
  padding: 6px 8px;
  height: 18px;
  -webkit-user-select: all; /* Remove highlight when shift selecting checkboxes */
}
table th:not([align="center"]):not([align="right"]) { /* Force IE8-10 to left align TH content by default */
  text-align: left;
}
table th {
  font-weight: normal;
}
table tr th, table tr td, table tr.highlight td {border-width: 1px 0 0 0;}
table tr:last-child td {border-bottom-width: 1px;}
table img, table div {
  display: inline-block; /* removed 'table a' for inline icon alignment */
}
table img {
  vertical-align: middle;
}
table th[valign="top"], table td[valign="top"] {
  vertical-align: top;
}
table th[valign="bottom"], table td[valign="bottom"] {
  vertical-align: bottom;
}
table td {background: #fff}/*bg needed when dragging*/
table td.breakWord {
  word-wrap: break-word;
}

/* Hide dynamic table cell names for mobile */
table.inline_table_below_769 td::before, table.inline_table_below_601 td::before {display: none}
table.inline_table_below_769 .inline_table_number, table.inline_table_below_601 .inline_table_number {text-align: center; flex: 1}

/* Tables inside forms */
form.tableForm:before, form.tableForm:after {content: " "; display: table}
form.tableForm:after {clear: both}
form.tableForm table {margin: 0}

@media screen and (max-width: 479px) {
  table:not(.notFixed):not(.moveProfileImg):not(.mobileOptimized):not(.chat):not(.plansComparisonBody) {table-layout: fixed;width:100%}
}
table.tableFixed {table-layout: fixed;width:100%}

table.moveProfileImg tr td > a:not(:only-child) {vertical-align: top}
table.moveProfileImg tr td > a ~ span {margin-bottom: -2px}
table.hasChart td {padding-top: 3px; padding-bottom: 3px}
table.noBorders td {border: 0}

/* Tables with logo cells */
table .logo_cell, table tr.original_ratio_img td {height: 32px}
table .logo_cell img, table tr.original_ratio_img img {max-height: 32px; object-fit: contain}/* only obj-fit needed once IE11 is dropped */
table tr.original_ratio_img .table_flex_content img {height: auto !important; display: inline-block}/* remove height once IE11 is dropped */
@media screen and (max-width: 767px) {
  table tr.original_ratio_img .table_flex_content a {display: block; margin: 2px 0 0 28px}
}

/* Student Module Tips */
.studentTips {clear: both; margin-top: 10px}
.studentTips > p {margin: 3px 0 10px}
.studentTips > p.floatR {font-size: 14px; margin-top: 4px}
.studentTips > p.floatR i {margin: -4px 0 0 10px}

.bundle_list .imgCrop {width: 100px}/* Purchases dashboard */

.locked {opacity: 0.5}
nav#leftColumn a.locked:hover {background: none !important; cursor: default}

.modern_module_list > table {margin: 0 0 8px !important; clear: both}
.modern_module_row .quick_edit_box,
.modern_module_row .quick_edit_box .alignR {display: block}
.modern_module_row .imgCrop .current {background-color: #fff; font-size: 14px; color: #222; padding: 3px 6px; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,.2); margin: 10px 44px 0 10px}

tbody:not(.highlightLesson) .modern_module_row ~ tr {display: none}
.modern_module_row.highlight {background-color: transparent}/*overwrites style from base-colors-user*/
.modern_module_row.highlight td:before {content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; border: 2px solid #222; border-radius: 10px; box-sizing: border-box}
tbody.highlightLesson .modern_module_row.highlight td:before {border-radius: 10px 10px 0 0}
.modern_module_row.highlight .goal_info {position: relative}
.modern_module_row.highlight label, .modern_module_row.highlight .goal_info, .modern_module_row.highlight .accordionLink, .modern_module_row.highlight a {z-index: 2}
.modern_module_row > td {height: 100%; position: relative; padding: 0 !important; border-width: 1px !important}
.modern_module_overview {display: flex; flex-direction: column; position: relative; padding: 19px 21px}
.modern_module_row .header {display: flex; align-items: flex-start}
#centreColumn .modern_module_row .header > *:first-child {flex: 1}
#centreColumn .modern_module_row .header h2 {margin: 0 10px 0 0; line-height: 1.3}
#centreColumn .modern_module_row .header .label.box.inverted:not(:last-child) {margin-right: 10px}
.modern_module_row .locked {opacity: 1}
.modern_module_row .modern_module_info {display: flex; flex-wrap: wrap; margin: auto 0 0 0; align-items: flex-end}
.modern_module_row .modern_module_info .label.box:not(.highlight) {margin-left: auto}
.modern_module_info .user_progress {margin: 0; white-space: nowrap}
.modern_module_info .user_progress.chart > span {margin: -10px}
.modern_module_info .block {margin-left: auto}
.modern_module_info .block i {margin-bottom: -1px}
.modern_module_info input[type="checkbox"] + label:before {top: 0}
.learner_module_view .modern_module_info label {margin-left: auto}
.learner_module_view .modern_module_info .block ~ label:last-of-type {margin-left: 10px}
.modern_module_info .accordionLink {padding: 0 0 0 15px; user-select: none; margin-left: auto; height: 20px; cursor: pointer}
.modern_module_info .accordionLink .label {color: #fff; position: relative; top: 2px; margin-right: 9px; font-size: 14px}
.modern_module_info .block + *,
.learner_module_view .modern_module_info label + .accordionLink {margin-left: 0}
.modern_module_row a:hover .modern_module_info i:after,
.modern_module_row .accordionLink i:after {left: -40px}
a:hover .modern_module_info .user_progress i:after {left: 0}
body:not(.catalog_item) .modern_module_list:not(.goal_list) .modern_module_info {margin-bottom: -5px}

.modern_module_row ~ tr td > span:first-child {margin: 0 5px 0 0; white-space: nowrap}
.modern_module_row ~ tr.locked {opacity: 1}
.modern_module_row ~ tr.locked span {opacity: 0.5}
.modern_module_row + tr > td {padding-top: 14px !important}
.modern_module_row ~ tr td {padding: 8px 18px; border-width: 0 1px 0 1px; display: flex !important; flex-flow: row nowrap; align-items: center; line-height: 18px}
.modern_module_row ~ tr:last-child td {border-bottom-width: 1px; padding-bottom: 14px}
.modern_module_row ~ tr td > span:nth-child(2) i {margin-top: -4px}
.modern_module_row ~ tr td > span:nth-child(2) > span:first-of-type i {margin-left: 4px}
.modern_module_row ~ tr td > span a {vertical-align: initial}
.learner_module_view .modern_module_row ~ tr td .status, .modern_module_row ~ tr td .time {margin-left: auto; padding-left: 5px}
.modern_module_row ~ tr td .time {white-space: nowrap; color: #a8a8a8; display: flex; align-items: center; margin-top: -2px}
.modern_module_row ~ tr td .time + .status {margin-left: 15px}

.competency_list .modern_module_info a.block {transition: all .15s ease-in-out}
.competency_list .modern_module_info a.block span {position: relative; top: 2px}
.competency_list .modern_module_info a.block:hover {opacity: .7}
.competency_list .modern_module_info a.block:hover span {color: #fff}
.competency_list .modern_module_info a.block:hover i:after {left: -40px}
.competency_list .modern_module_row .user_progress {padding-right: 10px}
tr.multicolumn > td {padding: 0 !important; border-width: 0 1px 1px; height: auto}
tr.multicolumn > td table {margin: 0; width: 100%}
tr.multicolumn > td table tr > * {font-size: 14px; padding: 6px 4px; padding-bottom: 6px !important}
tr.multicolumn > td table tr > td {padding-bottom: 4px !important}
tr.multicolumn > td table tr > *:first-child {padding-left: 18px}
tr.multicolumn > td table tr > *:last-child {padding-right: 18px}
tr.multicolumn > td table tr th {background-color: #e6e6e6}
/* mastery dashboard */
tr.multicolumn > td table tr .competency_name {display: flex; align-items: center}
tr.multicolumn > td table tr .mastery_lozenge {width: 40px}
tr.multicolumn > td table tr .mastery_lozenge div {height: 18px}
/* teacher lesson rows */
tr.multicolumn > td table tr a > i {margin-top: -3px}
tr.multicolumn > td table tr .time {justify-content: flex-end; margin: 0 !important}
tr.multicolumn > td table tr .time i {margin-top: -2px}
tr.multicolumn > td table tr .flex_section_name {display: flex; align-items: center}
tr.multicolumn > td table tr .flex_section_name svg {margin-right: 5px; flex-shrink: 0}
tr.multicolumn > td table tr .flex_section_name > span {white-space: normal}
tr.multicolumn > td table tr .flex_section_name > span a {margin-right: 4px}
tr.multicolumn > td table tr .flex_section_name > span i {margin-top: -3px}

.catalog_item .modern_module_list > table {margin-bottom: 2px !important}
.catalog_item .modern_module_overview {padding: 12px; justify-content: center}
.catalog_item .modern_module_overview:not(:last-child) {padding-bottom: 15px !important}
.catalog_item #centreColumn .modern_module_overview h2,
.catalog_item #centreColumn .modern_module_overview h2 span {font-size: 16px; margin: 0}
.catalog_item .modern_module_overview .header {align-items: center}
.catalog_item .modern_module_overview .header .label.box {padding-bottom: 2px; margin-left: 10px; font-size: 13px}
.catalog_item .modern_module_overview .header .label.box i {margin-top: -3px}
.catalog_item .modern_module_overview:hover .header .label.box i:after {left: -40px}
.catalog_item .modern_module_overview p {margin: 7px 0 9px; font-size: 14px !important}
.catalog_item .modern_module_row .accordionLink .label {margin-right: 4px}
.catalog_item .modern_module_row ~ tr td {padding-left: 14px; padding-right: 14px}
.catalog_item .modern_module_row ~ tr td span {font-size: 14px}

/* Path goals list */
.goal_list table:not(.draggable) .modern_module_row:not(.locked_module) .imgCrop,
.goal_list .modern_module_row:not(.locked_module) td[onclick] .modern_module_overview {cursor: pointer}
.goal_list .header {align-items: center}
.goal_list .header > a, .goal_list .block.circle_num {transition: all .15s ease-in-out}
.goal_list .header > a:hover, .goal_list .block.circle_num:hover {opacity: .7}
.goal_list .modern_module_info {padding-top: 10px}
.goal_list p ~ .modern_module_info {padding-top: 3px}
.goal_list .modern_module_info {align-items: center; flex-wrap: wrap; margin: auto 0 -15px; height: auto}
.goal_list .modern_module_info .goal_info {width: 72%; justify-content: space-between; display: flex; align-items: center; flex-wrap: wrap}
.goal_list .modern_module_info > * {white-space: nowrap; margin-bottom: 10px !important}
.goal_list .modern_module_info label {margin: 0}
.goal_list .modern_module_info .block.circle_num {margin: 0 10px}
.goal_list .modern_module_info .block.circle_num .num {border-radius: 50%; margin: 0 4px 0 0; width: 25px; height: 25px; line-height: 25px; font-size: 12px; display: inline-block; text-align: center; background-color: rgba(0,0,0,0.1)}
.goal_list .modern_module_info .progress,
.goal_list .modern_module_info .label.box {font-size: 14px}
.goal_list .modern_module_info a.label.box.highlight {background-color: #fff; color: #222; transition: all .15s ease}
.goal_list .modern_module_info a.label.box.highlight:hover {opacity: .5}

@media screen and (max-width: 768px) {
  .modern_module_row .modern_module_info {align-items: center}
}
@media screen and (min-width: 601px) {
  tr.multicolumn td {display: table-cell !important}
  tr.multicolumn > td table tr > * {border-width: 0 !important}
  tr.multicolumn > td table tr .gap {width: 10px; display: inline-block}
  tr.multicolumn > td table tr:nth-child(2) > td {padding-top: 14px !important}
  tr.multicolumn > td table tr:last-child > td {padding-bottom: 14px !important}
}
@media screen and (max-width: 600px) {
  .modern_module_list:not(.goal_list) .header, .modern_module_list:not(.goal_list) .header h2 {display: block !important}
  .modern_module_list:not(.goal_list) .header .label.box {margin-top: 10px !important}

  .learner_module_view:not(.goal_list) .modern_module_row p {margin-bottom: 0}
  .learner_module_view:not(.goal_list) .modern_module_row .modern_module_info {padding-top: 13px}

  .learner_module_view .modern_module_info .block + .accordionLink,
  .learner_module_view .modern_module_info label ~ .accordionLink {width: 100%; margin-top: 5px; text-align: right}

  .goal_list .modern_module_info .goal_info {width: 100%}
  .goal_list .modern_module_info .goal_info > *:last-child {margin-right: 0}

  tr.multicolumn td {display: block !important}
  tr.multicolumn > td table tr > * {padding-left: 18px; padding-right: 18px; width: auto; border-left-width: 0; border-right-width: 0; border-radius: 0 !important}
  tr.multicolumn > td table tr:last-child > *:last-child {border-width: 0; border-radius: 0 0 3px 3px !important}
  tr.multicolumn > td table tr:last-child > * {border-bottom-width: 1px}
  tr.multicolumn > td table tr .competency_name {margin-top: 3px}/* mastery dashboard */
  tr.multicolumn > td table tr .time {display: inline-block; vertical-align: top}/* teacher lesson rows */

  table.inline_table_below_601, table.inline_table_below_601 thead, table.inline_table_below_601 tbody, table.inline_table_below_601 tr, table.inline_table_below_601 td, table.inline_table_below_601 .show_on_inline_table {display: block}
  table.inline_table_below_601 th, table.inline_table_below_601 .hide_on_inline_table, table.inline_table_below_601 td.hide_label_on_inline_table::before {display: none}
  tr.multicolumn table.inline_table_below_601 .hide_on_inline_table {display: none !important}
  table.inline_table_below_601 th {width: auto}
  table.inline_table_below_601 td {height: auto; font-size: 15px}
  table.inline_table_below_601 td[align="center"] {text-align: left}
  table.inline_table_below_601 td::before {display: inline}
  table.inline_table_below_601 td > a:only-child {vertical-align: top}
  table.inline_table_below_601 td > *:only-child i:first-child {margin: -4px 0 -2px}
  table.inline_table_below_601 tr:last-child td {border-bottom-width: 0}
  table.inline_table_below_601 tr td:last-child {border-bottom-width: 2px}
  .multicolumn table.inline_table_below_601 tr td:last-child {border-bottom-width: 1px}
  .multicolumn table.inline_table_below_601 tr:not(:nth-child(2)) td:first-child {border-top-width: 2px}
  table.inline_table_below_601 .table_flex_content {display: flex; align-items: center}
  table.inline_table_below_601 .table_flex_content .inline_table_number {text-align: initial}
}

@media screen and (min-width: 480px) {
  .modern_module_list > table:last-of-type:not(:nth-child(1)):not(:nth-child(2)) .quick_edit_box {bottom: 136px; top: auto}
  .modern_module_list > table:last-of-type:not(:nth-child(1)):not(:nth-child(2)) .quick_edit_box .arrow {top: auto; bottom: -13px; transform: scaleY(-1)}
  .modern_module_list > table:last-of-type:not(:nth-child(1)):not(:nth-child(2)) .quick_edit_box .arrow:after {background: #f4f4f4}
  body:not(.catalog_item):not(.section_nav_page) .modern_module_list > table:last-of-type:nth-child(1),
  body:not(.catalog_item):not(.section_nav_page) .modern_module_list > table:last-of-type:nth-child(2) {margin-bottom: 180px !important}/*gap for quick editor*/
  .modern_module_row div.no-print {width: 175px; min-height: 131px; position: relative}
  .modern_module_row div.no-print .imgCrop {height: 100%; padding: 0}
  .catalog_item .modern_module_row div.no-print {width: 143px; min-height: 107px}

  body:not(.catalog_item) .competency_list > table:last-of-type:nth-child(1),
  body:not(.catalog_item) .competency_list > table:last-of-type:nth-child(2) {margin-bottom: 0 !important}

  .modern_module_row .modern_module_wrap {display: flex}
  .modern_module_row .modern_module_overview {flex: 1}
}
@media screen and (max-width: 479px) {
  .modern_module_list > table {margin-bottom: 10px !important}
  .modern_module_list table,
  .modern_module_list tbody,
  .modern_module_row,
  .modern_module_row td,
  .modern_module_wrap {width: 100%; height: auto}
  .modern_module_row > td:first-child,
  .modern_module_row div.no-print {width: 100%}
  .highlightLesson .modern_module_row ~ tr {display: block !important; height: auto}
  .modern_module_row ~ tr > td {height: auto}
  .learner_module_view .header {margin-top: -2px}

  body:not(.catalog_item) .instructor_module_view .header + .modern_module_info {margin-top: 10px}

  .competency_list .modern_module_row .header h2 {margin: 0 0 20px 0 !important}

  .goal_list.learner_module_view .modern_module_wrap {width: 100%}
  .goal_list.learner_module_view .modern_module_row .header h2 {margin: 0 !important}
  .goal_list.learner_module_view .modern_module_info {margin-bottom: -10px}
  .goal_list.learner_module_view .header + .modern_module_info {margin-top: 5px}
}
@media screen and (min-width: 360px) {
  .goal_list .header .label.box.inverted {margin-bottom: -2px}
}

/* Hide columns in small resolutions */
@media screen and (max-width: 768px) {
  table th, table td{word-wrap: break-word;}
  #centreColumn p a, table td a {word-break: break-word;} /* Break long links */

  a.scormLink {
    width: 100%;
  }

  /* Table change to inline block style */
  table.inline_table_below_769, table.inline_table_below_769 thead, table.inline_table_below_769 tbody, table.inline_table_below_769 tr, table.inline_table_below_769 td, table.inline_table_below_769 .show_on_inline_table {display: block}
  table.inline_table_below_769 th, table.inline_table_below_769 .hide_on_inline_table, table.inline_table_below_769 td.hide_label_on_inline_table::before {display: none}
  table.inline_table_below_769 th {width: auto}
  table.inline_table_below_769 td {height: auto; font-size: 15px}
  table.inline_table_below_769 td[align="center"] {text-align: left}
  table.inline_table_below_769 td::before {display: inline}
  table.inline_table_below_769 td > a:only-child {vertical-align: top}
  table.inline_table_below_769 td > *:only-child i:first-child {margin: -4px 0 -2px}
  table.inline_table_below_769 tr:last-child td {border-bottom-width: 0}
  table.inline_table_below_769 tr td:last-child {border-bottom-width: 2px}
  table.inline_table_below_769 .table_flex_content {display: flex; align-items: center}
  table.inline_table_below_769 .table_flex_content .inline_table_number {text-align: initial}
  table.inline_table_below_769 td.multirow > * {display: inline; padding: 0; position: relative; top: -2px}
  table.inline_table_below_769 td.multirow > *:not(:last-child):after {content:','}

  /* Hide table columns */
  table.hideColL_1 tr th:nth-child(1), table.hideColL_1 tr td:nth-child(1), table.hideColL_2 tr th:nth-child(2), table.hideColL_2 tr td:nth-child(2),
  table.hideColL_3 tr th:nth-child(3), table.hideColL_3 tr td:nth-child(3), table.hideColL_4 tr th:nth-child(4), table.hideColL_4 tr td:nth-child(4),
  table.hideColL_5 tr th:nth-child(5), table.hideColL_5 tr td:nth-child(5), table.hideColL_6 tr th:nth-child(6), table.hideColL_6 tr td:nth-child(6),
  table.hideColL_7 tr th:nth-child(7), table.hideColL_7 tr td:nth-child(7),
  table.hideColR_1 tr th:nth-last-child(1), table.hideColR_1 tr td:nth-last-child(1), table.hideColR_2 tr th:nth-last-child(2), table.hideColR_2 tr td:nth-last-child(2),
  table.hideColR_3 tr th:nth-last-child(3), table.hideColR_3 tr td:nth-last-child(3), table.hideColR_4 tr th:nth-last-child(4), table.hideColR_4 tr td:nth-last-child(4),
  table.hideColR_5 tr th:nth-last-child(5), table.hideColR_5 tr td:nth-last-child(5), table.hideColR_6 tr th:nth-last-child(6), table.hideColR_6 tr td:nth-last-child(6),
  table.hideColR_7 tr th:nth-last-child(7), table.hideColR_7 tr td:nth-last-child(7),
  table.hideThColL_1 tr th:nth-child(1), table.hideThColL_2 tr th:nth-child(2), table.hideThColL_3 tr th:nth-child(3), table.hideThColL_4 tr th:nth-child(4),
  table.hideThColL_5 tr th:nth-child(5), table.hideThColL_6 tr th:nth-child(6), table.hideThColL_7 tr th:nth-child(7),
  table.hideTdColL_1 tr td:nth-child(1), table.hideTdColL_2 tr td:nth-child(2), table.hideTdColL_3 tr td:nth-child(3), table.hideTdColL_4 tr td:nth-child(4),
  table.hideTdColL_5 tr td:nth-child(5), table.hideTdColL_6 tr td:nth-child(6), table.hideTdColL_7 tr td:nth-child(7),
  table th.hideCell, table td.hideCell, table .showAbove768 {
    display: none;
  }
  table.moveProfileImg span.newProfileImg, table.moveLeaderboardProfileImg span.newProfileImg {display:block; margin-bottom:5px}
  table.moveProfileImg td.oldProfileImg, table.moveLeaderboardProfileImg td.oldProfileImg {padding: 0; width: auto}
  table.moveProfileImg td.oldProfileImg img, table.moveLeaderboardProfileImg td.oldProfileImg .leaderboardUser {display: none;}
}
@media screen and (min-width: 769px) {
  table.inline_table_below_769 td.multirow > * {display: table}
  table.inline_table_below_769 td.multirow > div {padding: 3px}
}
@media screen and (min-width: 769px) {
  table.inline_table_below_769 td.multirow > * {display: table}
  table.inline_table_below_769 td.multirow > div {padding: 3px}
}

/*------------------- Lists -------------------*/
dl dt:before {
  display: inline-block;
  position: static;
  margin-right: 10px;
}
dl dt {
  margin: 20px 0 10px;
}
#facebox dl dt {
  margin: 10px 0 0;
}
#facebox dt{
  font-size: 100%;
}
#facebox dl dd {
  margin: 0 0 0 24px;
}

/*------------------- Tabnav List -------------------*/
/* Alignment */
ul.tabnav {border-width: 0 0 1px; list-style-type: none; padding: 0 0 7px; margin: 15px 0; overflow: hidden; height: 31px}
.hasRightColumn #centreColumn ul.tabnav {width: 100%}
ul.tabnav li, ul.tabnav li a {display: inline-block; position: relative}
ul.tabnav li.tabs_more_link {display: none}
ul.tabnav li a {padding: 4px 0 6px; margin: 0 8px 1px; line-height: 21px}
ul.tabnav li a.selected:after {position: absolute; left: 0; bottom: -8px; height: 3px; width: 100%; content: ''; border: 0}
ul.tabnav li:first-child a {margin-left: 0}
ul.tabnav li .dropDownHolder a.selected:after {display: none}
ul.tabnav li a span.block, .accordion_heading .block {margin-left: 5px; top: -1px; padding: 5px 4px; position: relative; vertical-align: middle; display: inline-block; min-width: 7px}
.accordion_heading .block {margin: 0 auto 0 5px}
ul.tabnav li a:not(.selected) span.block {display: none}
ul.tabnav.summary li a, ul.tabnav .dropDown.no_wrap a {white-space: nowrap}
ul.tabnav.summary li .dropDown > a:only-child {padding-bottom: 5px}
ul.tabnav.summary li .dropDown > a {display: flex; justify-content: space-between; align-items: center}

ul.tabnav li .dropDownHolder > a {padding-right: 0; padding-left: 0; margin: 0}
ul.tabnav li .dropDownHolder > a i {margin-top: -4px}
ul.tabnav li .dropDownHolder > a.highlight, ul.tabnav li .dropDownHolder > a:hover {background: none}
ul.tabnav li .dropDown {right: 0; margin-top: 7px}
ul.tabnav li .dropDown > a {padding: 4px 9px; display: block; margin: 0; border-bottom: 0; white-space: nowrap}

/* Overwrite default list styles */
#centreColumn ul.tabnav li, #centreColumn .optionsRibbon ul li, #courseToolbar ul.tabnav li, #courseToolbar .optionsRibbon ul li  {
  margin: 0 !important; padding: 0 !important}
#centreColumn .optionsRibbon ul li:before, #centreColumn ul.inlineList li:before, #centreColumn ul.tabnav li:before, #centreColumn .rightColumn li:before,
#courseToolbar .optionsRibbon ul li:before, #courseToolbar ul.inlineList li:before, #courseToolbar ul.tabnav li:before {
  display: none
}
nav#leftColumn .dropDown ul.tabnav {padding: 12px 7px 10px; margin: 0; overflow: visible}
nav#leftColumn .dropDown ul.tabnav a {padding: 0; margin: 0 8px !important}
nav#leftColumn .dropDown ul.tabnav li a.selected:after {border-width: 0 1px 1px 0; bottom: -14px; z-index: 1}

/* Shared tabnav styles from dropDown styles in styles-user.css */
.tabnav .dropDown {position: absolute; height: 0; visibility: hidden; overflow: hidden; right: -1px}
.mobile-app.android .tabnav .dropDown {overflow: visible;}
.tabnav .dDownShow {height: auto; visibility: visible; position: absolute; z-index: 10}
.tabnav .dropDown > a {width: 100%; display: block; box-sizing: border-box}

/* Inline heading tabnav optionsRibbon */
.inline_heading_tabs_options {margin-bottom: 9px}
.inline_tabs_options:after {content: " "; display: table; clear: both}
#centreColumn .inline_heading_tabs_options + h2 {margin: 0 0 2px}
.inline_tabs_options .tabnav + .optionsRight {margin-left: 0}
.inline_tabs_options .options_btn {position: relative}
.inline_heading_options > h2 {margin-top: 0 !important}
.user .inline_heading_options > h2 {margin-bottom: 7px}
@media screen and (min-width: 560px) {
  .inline_heading_options {display: flex}
  .inline_heading_options > h2 {flex: 1}
  .inline_heading_options > .optionsRight ul:last-child {margin-right: 0}
  .field-container {width: calc(50% - 2px)}
}
@media screen and (max-width: 559px) {
  .field-container {width: 100%}
}
@media screen and (max-width: 767px) {
  #fixedSectionHeader .inline_tabs_options {display: flex; flex: 1; border-bottom: 1px solid #c7c7c7}
  #fixedSectionHeader .inline_tabs_options ul.tabnav {flex: 1; margin: 0; border-bottom-width: 0}
  #fixedSectionHeader .inline_tabs_options .optionsRibbon {top: -4px}
}
@media screen and (min-width: 768px) {
  .inline_heading_tabs_options, .leftColumn > .inline_tabs_options {margin-bottom: 13px}
  .inline_tabs_options {display: flex; flex: 1; border-bottom: 1px solid #c7c7c7}
  .inline_tabs_options ul.tabnav {flex: 1; margin: 0; border-bottom-width: 0}
  .inline_tabs_options .optionsRibbon {top: -4px}
  .inline_tabs_options .options_btn {align-self: flex-start; margin-top: 1px}

  #contentWrap:not(.hasRightColumn) .inline_tabs_options ~ .catalog_negative_margin_wrap,
  .inline_tabs_options + .filters-wrapper + #SearchResultsWrapper {margin-top: 15px}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .inline_pageHeading_options:before, .inline_pageHeading_options:after {content: " "; display: table}
  .inline_pageHeading_options:after {clear: both}
}
@media screen and (min-width: 980px) {
  .inline_heading_tabs_options {display: flex; border-bottom: 1px solid #c7c7c7}
  .inline_heading_tabs_options .pageHeading {margin-top: -2px}
  .inline_heading_tabs_options .inline_tabs_options {border-bottom-width: 0; padding: 0; margin: 1px 0 0}
  .inline_heading_tabs_options .inline_tabs_options ul.tabnav {margin-left: 30px}
  .inline_tabs_options .optionsRibbon {top: -3px}
  .inline_tabs_options .options_btn {margin-top: 2px}

  .leftColumn > .inline_tabs_options {margin-right: 0; padding-right: 0}

  /* Inline heading optionsRibbon */
  .inline_pageHeading_options {display: flex; white-space: nowrap}
  .inline_pageHeading_options .pageHeading {overflow: hidden; display: flex !important; flex: 1}
  .inline_pageHeading_options .pageHeading > div {width: 100%; display: flex !important}
  .inline_pageHeading_options .pageHeading h1 {overflow: hidden; text-overflow: ellipsis}
  .inline_pageHeading_options .pageHeading i {margin-top: -4px}
  .inline_pageHeading_options .optionsRibbon {overflow: visible !important}
  .inline_pageHeading_options .optionsRibbon ul {white-space: nowrap}
  .inline_pageHeading_options .optionsRibbon ul li {display: inline-block; float: none}
}

/*------------------- HRs -------------------*/
hr {border-width: 0 0 1px; height: 0; margin: 0}

/*------------------- Alerts -------------------*/
.alert_block {width: 100%; margin: 0 0 10px}
.alert_block .alert_flex {position: relative; background-color: #fff; border: 1px solid transparent; border-radius: 3px; display: flex}
.alert_block .alert_icon {flex: 0 0 40px; text-align: center; display: flex; align-items: center; justify-content: center; padding-left: 2px}
.alert_block .alert_icon i {margin: 0}
.alert_block p {margin: 10px 36px 10px 12px; display: inline-block}
.alert_block a {color: #222}
.alert_block.close_alert .alert_flex > a:hover {opacity: 0.7}
.alert_block.close_alert .alert_flex > a:hover i:after {left: 0}
.alert_block.close_alert .alert_flex > a {display: block; height: 15px; width: 15px; position: absolute; top: 10px; right: 11px}
.alert_block:not(.close_alert) .alert_flex > a {display: none}

.alert_block.error .alert_flex {border-color: #c43030}
.alert_block.error .alert_icon {background: #c43030}
.alert_block.warning .alert_flex {border-color: #ec9a03}
.alert_block.warning .alert_icon {background: #ec9a03}
.alert_block.info .alert_flex {border-color: #1976be}
.alert_block.info .alert_icon {background: #1976be}

#fullscreen_msg_holder {display: flex; justify-content: center; align-items: center; position: fixed; top: 0; z-index: 400; width: 100%; height: 100%}
#fullscreen_msg {background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); margin: 5px; opacity: 0; transition: all .7s ease; border-radius: 8px; overflow: hidden}
#fullscreen_msg:focus {outline: 0}
#fullscreen_msg_holder .header, #fullscreen_msg_holder .fullscreen_msg_content {padding: 10px}
#fullscreen_msg_holder .header > * {color: #fff}
#fullscreen_msg_holder.fullscreen_progress div#fullscreen_msg {opacity: 1}

/* Small number blocks */
nav.mainNav .portalCart a .newAlert, #leftColumn li a span.newAlert,
header .quickLinks a .newAlert, a.rightMobileBar .newAlert, .mm-menu a .newAlert,
ul.tabnav li a.selected span.block, .accordion_heading .block, a.title_and_count .small_number_block {font: bold 10px/7px Arial, sans-serif; color: #fff !important; border-radius: 2px; text-align: center}

/* ------------------- Calendars ------------------- */
/* Tables with borders */
table.calendar th:first-child, table.calendar td:first-child,
table.withBorders th:first-child, table.withBorders td:first-child {
  border-left-width: 1px;
}
table.calendar th, table.calendar td, table.withBorders th, table.withBorders td {
  border-right-width: 1px;
}
table.calendar.all-day tr:nth-child(2) td {border-top-width: 0; height: 22px}
table.calendar.all-day td:first-child:not([rowspan]) {border-left-width: 0}
table.calendar.monthly tbody tr:first-child td {border-top-width: 0}
table.calendar th {background-color: #fff}

h1#current_month, .portal h2#current_month {line-height: 26px; float: left}
.calendarDisplay select#calendar {height: 27px; padding: 1px 1px 1px 2px}
@media screen and (max-width: 479px) {
  .calendarDisplay select#calendar {max-width: 130px}
}
#calendar2 {padding-right: 2px; padding-top: 10px; clear: both}
.class_header.calendar_heading_holder + #calendar2 {padding-right: 0}
body.portal #calendar2 {padding-top: 18px}
#calendar2 .optionsRight {padding-bottom: 0}

table.calendar, .calendar.all-day + .calendars-holder {margin: 0 0 15px}
.calendars-holder:first-child {margin-bottom: 1px}/* agenda view */
table.calendar tr th:not([align="center"]):not([align="right"]) {text-align: center}
table.calendar td {height: 90px; color: #000000; vertical-align: top; padding: 4px 5px}
table.calendar a span, table.calendar a {color: #fff}
table.calendar div.tooltip a {color: inherit}
.wrapCalendar {word-wrap: break-word; display: inline-block; width: 100%}
.wrapCalendar .tooltip .personalInfo, .wrapCalendar .tooltipBot .personalInfo {width: 203px}
table.calendar a:hover.previous, table.calendar a:hover.next {text-decoration: none}
body:not(.portal):not(.ctr_student_calendar) table.calendar td.highlight,
body:not(.portal):not(.ctr_student_calendar) table.time-divider tr td div:hover,
body:not(.portal):not(.ctr_student_calendar) table.all-day tr td:not(.all-day-heading):hover {
  background: url("/images/icons/gray-plus-retina.gif") 96% 10px no-repeat; background-size: 11px
}
table.all-day tr td:not(.all-day-heading):hover {background-position-y: 6px !important}
table.time-divider tr td div:hover {background-position-y: 4px !important}

a.class_event, a.personal_event, a.school_event, a.group_event, a.general_event {padding: 4px 5px; margin: 1px 0px; display: block; border-radius: 2px}
.class_event {background-color: #4884a6} /* blue */
.personal_event {background-color: #4ab354} /* green */
.school_event, body.portal .general_event {background-color: #e8af55} /* orange */
.group_event {background-color: #b469bc} /* purple */
.class_event:hover, .personal_event:hover, .school_event:hover, .group_event:hover, a.general_event:hover {text-decoration: underline}

/* Calendar - Week View */
body:not(.portal):not(.ctr_student_calendar) table.calendar td.editable,
body:not(.portal):not(.ctr_student_calendar) table.all-day td:not(.all-day-heading):hover,
body:not(.portal):not(.ctr_student_calendar) table.time-divider tr td div:hover {
  cursor: pointer;
}
table.all-day {
  margin: 0 0 10px;
}
table.all-day td.all-day-heading {
  text-align: center;
  vertical-align: middle;
}
table.all-day td.all-day-heading[rowspan] {border-bottom-width: 1px}
table.all-day tbody tr th {
  padding: 4px 0;
}
table.all-day tbody tr td {
  height: auto;
  padding: 0;
}
table.all-day tbody tr td a {
  margin: 1px;
}
div.calendars-holder {
  position: relative;
  border: 1px solid #e2e0e0;
  border-width: 1px 0 0 0;
}
#no_events_message + div.calendars-holder {
  border: 0;
}
table.calendar-events, table.time-divider {
  position: absolute;
  box-shadow: none;
}
table.time-divider tr th, table.calendar-events tr th {
  padding: 0;
  text-align: right !important;
  vertical-align: top;
}
table.time-divider td, table.calendar-events td {
  padding: 0;
  height: 0;
  line-height: 0;
}
/* Table - Times */
table.time-divider {margin-bottom: 0}
table.time-divider th span {
  padding-right: 3px;
}
table.time-divider tr td {
  padding-bottom: 37px;
  position: relative;
  background-repeat: repeat-x;
  background-position: 0 18px;
}
table.time-divider tr td div:not(.ffWrapper) {
  width: 100%;
  height: 18px;
  float: left;
  position: absolute;
  left: 0;
  top: 19px;
}
table.time-divider.ffTable tr td {
  position: static;
}
table.time-divider.ffTable tr td div.ffWrapper {
  position: relative;
  margin-top: -4px;
  width: 100%;
}
table.time-divider tr td div:first-child {
  top:0;
}
/* Table - Events */
table.calendar-events tr th, table.calendar-events tr td {border-bottom: 0}
table.calendar-events tr th {background: none}
table.calendar-events div {position: relative; width: 98%}
table.calendar-events div a {position: absolute; width: 100%; margin: -1px 0 0 0; word-wrap: break-word; overflow: hidden; padding: 0}
table.calendar-events div a span {padding: 0 2px; display: block}

/* Calendar - Agenda View */
.calendars-holder.showScroll::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .2)}
#centreColumn .calendar-agenda-day {border-bottom: 1px solid #e2e0e0; padding: 13px 10px 12px 2px}
#centreColumn .calendar-agenda-day .day-heading {line-height: 1.2; font-size: 18px; margin: 0 0 5px; display: flex; align-items: center}
#centreColumn .calendar-agenda-day .day-heading ~ .daily-events .event-heading,
#centreColumn .calendar-agenda-day .day-heading ~ .regular-events .event-heading {margin-top: 5px}

/* Small calendar */
table.calendar_small {margin: 0; border-width: 0 1px}
table.calendar_small th, table.calendar_small td {text-align: center !important}
table.calendar_small th {background: #fff; border-top: 0; padding: 6px 4px}
table.calendar_small td {font-size: 14px; cursor: pointer; padding: 1px 0}
table.calendar_small td.highlight {background: transparent}
table.calendar_small td div {padding: 3px; margin: 1px; width: 17px; height: 17px; word-wrap: normal; border-radius: 50%; font-size: 13px}
table.calendar_small td:not(.current):hover div {background: #f5f5f5}
table.calendar_small td.current div {color: #fff}
table.calendar_small tr:not(:first-child) td {border-width: 0}
table.calendar_small tr:first-child td {padding-top: 2px}
table.calendar_small tr:last-child td {padding-bottom: 2px}

.rightColumn .small-month-name {text-align: center; margin-right: -10px}
.rightColumn .calendar-arrows > a {position: absolute; margin-top: 10px}
.rightColumn #previous_small_calendar_link {margin-right: 0; left: 14px; width: 20px}
.rightColumn #next_small_calendar_link {right: 14px}
.rightColumn #small_calendar_container {min-height: 179px; padding: 0 15px; margin: 0}
.rightColumn #small_calendar_container tr > * {background-color: transparent}

/* Calendar picker */
.calendars-picker .headingLinkWrap {margin-bottom: 5px}
.calendars-picker .headingLinkWrap span {position: absolute; top: 10px; right: 14px}
.calendars-picker .headingLinkWrap label:before {width: 14px; height: 14px; top: 4px; left: 0}
.calendars-picker .headingLinkWrap input:checked + label:before {background: url('/images/icons/tick-small.png') #fff no-repeat; background-size: 12px; background-position: 1px 1px}
.calendar-scroller {overflow: auto; padding: 7px 0; border-top: 1px solid #f3f3f3}
.calendar-item {padding: 2px 11px 4px; position: relative}
.calendar-item input[type="checkbox"] + label {width: 100%; max-width: 210px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; padding-left: 3px}
.calendar-item:hover input[type="checkbox"] + label {width: calc(100% - 25px)}
.calendar-item input[type="checkbox"] + label:before {left: 0; width: 12px; height: 12px; top: 1px; border-radius: 50%}
.calendar-item input[type="checkbox"]:checked + label:before {width: 14px; height: 14px; border-width: 0}
.calendar-item .dropDownHolder {margin-top: -12px; cursor: pointer; position: absolute; top: 50%; right: 3px}
.calendar-item .dropDownHolder > a:not(.highlight) {display:none}
.calendar-item:hover .dropDownHolder > a {display: block}
.calendar-item .dropDownHolder > a:hover, .calendar-item .dropDownHolder > a.highlight {background: #f5f5f5}
.calendar-item .dropDownHolder > a i {margin-top: -3px}
.calendar-item .dropDownHolder .dropDown {height: auto; opacity: 1; position: absolute; z-index: 10; display: none; left: -184px; background: #fcfcfc; width: 202px; padding: 0; font-size: 12px}
.calendar-item .dropDownHolder .dropDown > a {margin-left: 5px}
.calendar-item .dropDownHolder .dropDown.dDownShow {display: block}

.color-picker {float: left; width: 100%; border-top: 1px solid #CCC; padding-bottom: 7px}
.color-picker > a {display: block; width: 21px; height: 21px; float: left; margin: 7px 0 0 7px; border-radius: 50%}
.color-picker > a:hover {transform: scale(1.15)}

/* Highlight day */
table.calendar .current, .calendar-agenda-day .current {border-radius: 50%; color: #fff}
table.calendar.all-day th div:first-child {width: 100%}
table.calendar.all-day th div:last-child {margin-top: 6px; width: 17px; height: 17px; padding: 3px}
table.calendar-events .day_heading span,
.calendar-agenda-day .day-heading span {display: inline-flex; align-items: center; justify-content: center}
table.calendar.monthly th {padding-top: 5px; padding-bottom: 0}
table.calendar.monthly .day_heading span {height: 17px; padding: 3px 0; margin-bottom: 4px; display: inline-block}
table.calendar.monthly .day_heading .current {width: 17px; padding: 3px; text-align: center}
.calendar-agenda-day .day-heading .current {width: 25px; height: 25px; padding: 1px}

@media screen and (max-width: 980px) {
  .rightColumn #small_calendar_container {max-width: 320px; min-height: 165px; margin: 0 auto 14px}
  #calendar2 {padding-top: 0}

  /* Highlight day */
  table.calendar.monthly .day_heading span {display: inline-flex !important; align-items: center; justify-content: center; margin-bottom: 0}
  table.calendar.monthly .day_heading .current, table.calendar-events .day_heading .current {width: 18px; height: 18px; padding: 4px}
}
@media screen and (min-width: 980px) {
  body[class*='_calendar'].user #centreColumn {min-height: calc(100vh - 44px)}
  #calendar2, .calendars-holder, table.calendar {transition: width .3s ease}
  .rightColumn.calendar {padding-left: 15px; margin: 0 0 0 30px; width: 249px; border-left: 1px solid #e0e0e0; overflow: visible !important; transition: margin .3s ease}
  .rightColumn.calendar, .rightColumn .calendars-picker {display: flex; flex-direction: column}
  .rightColumn.calendar:not(.right-col-visible) {margin-right: calc(-249px - 15px)}

  table.calendar.monthly td.highlight, table.all-day tr td:not(.all-day-heading):hover {background-color: #fff !important}
  table.calendar.monthly .day_heading {display: block; text-align: center; margin-top: 1px}
  table.calendar.monthly .day_heading, table.calendar.all-day th div:last-child {font-size: 13px}

  .rightColumn .rightColumn_handle {position: absolute; top: calc(50vh - 60px); width: 15px; height: 40px; background: #fff; border-radius: 3px 0 0 3px; box-shadow: -2px 1px 4px rgba(0,0,0,0.2); right: 0; left: -16px}
  .rightColumn .rightColumn_handle i {position: absolute; top: 10px; left: -2px; margin: 0; font-size: 24px}
  .rightColumn.right-col-visible .rightColumn_handle i.arrowLeft {display: none; margin-left: -2px}
  .rightColumn:not(.right-col-visible) .rightColumn_handle i.arrowRight {display: none}

  table.calendar-events .class_event, table.all-day .class_event {border: 1px solid #356e8e} /* blue */
  table.calendar-events .personal_event, table.all-day .personal_event {border: 1px solid #33953c} /* green */
  table.calendar-events .school_event, table.all-day .school_event {border: 1px solid #e09e10} /* orange */
  table.calendar-events .group_event , table.all-day .group_event {border: 1px solid #a257aa} /* purple */

  /* Group calendar */
  #centreColumn .calendar_heading_holder {display: flex}
  #centreColumn .calendar_heading_holder .pageHeading {white-space: nowrap; min-width: 0}
  #centreColumn .calendar_heading_holder .pageHeading > div {display: block}
  #centreColumn .calendar_heading_holder .pageHeading > div > h1 {overflow: hidden; text-overflow: ellipsis; display: block; float: none}
  #centreColumn .calendar_heading_holder .pageHeading + .calendar_heading_desktop {flex: 1; margin-left: 15px}
  #centreColumn .calendar_heading_holder + #calendar2.has-right-column {padding-top: 10px}
  /* Class calendar */
  #centreColumn .dashboard_header.calendar_heading_holder {display: flex}
  #centreColumn .dashboard_header.calendar_heading_holder h2 {overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 0 !important}
  #centreColumn .dashboard_header.calendar_heading_holder h2 + .calendar_heading_desktop {flex: 1; margin-left: 15px}
  #centreColumn .dashboard_header.calendar_heading_holder + #calendar2.has-right-column {padding-top: 3px}

  #calendar2.has-right-column {clear: none; padding-top: 44px}
}

/*------------------- Dashboard Blocks -------------------*/
.catalog_categories > a, .catalog_categories > div, .catalog_boxes > div, .lesson_boxes > *, .user_boxes > *, .dashboard_widget_grid > * {
  float: left;
  display: block;
  width: 100%;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.catalog_categories .draggable, .catalog_courses .draggable {background: #ffffff}

/* ---------- Catalog Boxes ---------- */
.imgCrop {height: 0; position: relative; display: block; background-size: cover; background-repeat: no-repeat; background-position: 50%; padding-bottom: 75%; overflow: hidden}
.catalog_boxes:not(.app_boxes):not(.ui-sortable) .imgCrop:hover,
.quick_edit_icon:hover {cursor: pointer}
.catalog_boxes > *.no_hover:hover .imgCrop:hover {cursor: default}
.catalog_boxes:not(.app_boxes).ui-sortable .imgCrop:hover {cursor: move}

/* hover tiles and rows */
.catalog_boxes:not(.app_boxes):not(.dashboard_widgets) > *:not(.no_hover), .user_boxes > a, .modern_module_row > td, .modern_module_row > td > a {transition: box-shadow .3s ease-in-out, border .3s ease-in-out}
.catalog_boxes:not(.app_boxes):not(.dashboard_widgets) > *:not(.no_hover):not(.highlight):hover, .user_boxes > a:hover, .modern_module_row:not(.locked_module):not(.no_hover) > td:hover, .modern_module_row.locked_module > td:hover > a {box-shadow: 3px 3px 9px rgba(0,0,0,.25); border: 1px solid #c4c4c4}
.user_boxes > *.highlight {border: 1px solid #c4c4c4}
.modern_module_row.locked_module > td:hover > a {border-width: 0}

.catalog_student .imgCrop .start, .current_lesson .imgCrop .start, .bundle_list .imgCrop .start, .modern_module_row .imgCrop .start {position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -17px; background: rgba(0,0,0,.3); border-radius: 50%; width: 34px; height: 34px; box-shadow: 0 0 0 2px rgba(0,0,0,.3)}
.bundle_list .imgCrop .start {width: 25px; height: 25px; margin: -13px 0 0 -13px}

.catalog_boxes .footer {padding: 8px 11px; cursor: default; overflow: hidden}
.catalog_boxes .footer img {vertical-align: middle}

.catalog_categories.no_flex, .catalog_courses.no_flex, .lesson_boxes.no_flex {position: relative; font-size: 0}
.catalog_categories.no_flex > div, .catalog_courses.no_flex > div,
.lesson_boxes.no_flex > a, .lesson_boxes.no_flex > div {display: inline-block; vertical-align: top; float: none}

.catalog_boxes.catalog_student .footer {height: 24px}
.catalog_boxes .footer > .block:first-child {width: 20%}
.catalog_boxes .footer > .block:first-child ~ .block {text-align: center; width: 32%}
.catalog_boxes .footer > .block:first-child ~ .block ~ .block {text-align: center; width: 29%}
.catalog_boxes .footer > .block:first-child ~ .block ~ .block ~ .block {text-align: right; width: 19%}

.catalog_boxes .footer.fiveBlocks > .block:first-child {width: 20%}
.catalog_boxes .footer.fiveBlocks > .block:first-child ~ .block {width: 15%}
.catalog_boxes .footer.fiveBlocks > .block:first-child ~ .block ~ .block {width: 32%}
.catalog_boxes .footer.fiveBlocks > .block:first-child ~ .block ~ .block ~ .block {text-align: center; width: 14%}
.catalog_boxes .footer.fiveBlocks > .block:first-child ~ .block ~ .block ~ .block ~ .block {text-align: right; width: 19%}

.catalog_boxes .footer > .circleNum {text-align: center}
.catalog_boxes .footer > .circleNum span {border-radius: 20px; padding: 0 5px; min-width: 8px}
.catalog_boxes .footer > .blockNum span:not(.textOffScreen),
.catalog_boxes .footer > .circleNum span:not(.textOffScreen) {height: 18px; line-height: 18px; font-size: 9px; display: inline-block; text-align: center; position: relative; top: -1px}
.catalog_boxes .footer > .blockNum span:not(.textOffScreen) {width: 18px}

/* ---------- Catalog items ---------- */
.catalog_courses .footer.textFooter {height: 61px}
.catalog_courses .footer.textFooter > div:not(.tooltip) {height: 42px}
.catalog_courses .footer.textFooter > div:not(.tooltip) > span {display: inline-block; width: 100%; height: 19px}
.catalog_courses .footer.textFooter > div:not(.tooltip) > span:nth-child(2) {margin-top: -4px;}
.catalog_courses .footer.textFooter .teacher {display: block}
.catalog_courses .footer.textFooter .teacher span:not(.textOffScreen) {display: block; position: relative; top: 2px}
.catalog_courses .footer.textFooter .teacher img {margin-right: 10px; float: left}
@media screen and (min-width: 480px) {
  .cartItemName {
    width: 280px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 18px;
  }
}

/* tile headings */
.catalog_boxes .header {height: auto}
.catalog_boxes:not(.narrow_headers) > a .header h2,
.catalog_boxes:not(.narrow_headers) > div .header h2 {height: 56px; overflow: hidden; display: block !important}
@supports (-webkit-line-clamp: 2) {
  .catalog_boxes:not(.narrow_headers) > div .header h2 {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden
  }
}
.catalog_student:not(.catalog_teacher):not(.narrow_headers):not(.lesson_boxes) .header a {margin-bottom: 9px}
.catalog_boxes.narrow_headers .header h2 {height: auto; min-height: 0}
.catalog_boxes .header h2 {padding: 8px 11px 0; word-break: break-word; box-sizing: border-box; width: 100%}
.catalog_boxes > div .header > a:first-of-type {display: block; height: 100%}
/* colors and text sizes */
#centreColumn .catalog_boxes h2,
.portal #contentBody .catalog_boxes .header h2,
.portal #contentBody .catalog_boxes .header h2 a,
#centreColumn .modern_module_row h2,
#centreColumn .modern_module_row h2 span {font-size: 18px; color: #fff}
.app_boxes .footer a:hover,
.catalog_student .footer .gameStatus span,
.catalog_student .footer .gradeHolder span,
.catalog_courses .footer.textFooter a.teacher:hover span,
.modern_module_overview *, .modern_module_overview h2 a:hover, .modern_module_overview a:hover span {color: #fff}
.catalog_boxes .label,
.app_boxes .footer a,
.catalog_courses .teacher span,
.catalog_boxes .lightText, .catalog_boxes .lightText *, .catalog_boxes .header .description,
.modern_module_row .label.box {color: rgba(255,255,255,0.9)}
.catalog_student .footer i.pageBlank span, 
.dashboard_widgets .label {color: #222}
.catalog_boxes .footer > .circleNum span,
.catalog_boxes .footer > .blockNum span,
.catalog_boxes .header .label.highlight,
.catalog_boxes .footer .label.highlight {background-color: #fff; color: #222}
.catalog_boxes .header .label,
.catalog_boxes .header .lightText,
.catalog_boxes .header .description,
.modern_module_row .label.box {padding: 0 11px; font-size: 15px}
.lesson_boxes .header .lightText, .lesson_boxes .header .label, #contentWrap .catalog_boxes .header .description, .dashboard_widgets .label, .modern_module_row .label.box {font-size: 14px}
/* tile labels */
.catalog_boxes .header .label, .modern_module_row .label.box {display: inline-block; margin: 0; background: transparent; line-height: 22px}
.catalog_boxes.narrow_headers.catalog_categories .header .label {padding-bottom: 6px}/*groups*/
.catalog_boxes.narrow_headers.catalog_student .header .label {padding-bottom: 2px}/*resources and users*/
.catalog_boxes.catalog_categories:not(.narrow_headers) > * > .header .label:last-child {margin: 1px 0 6px}/*category catalog*/
.catalog_boxes:not(.narrow_headers) h2 + .label.box {margin: 5px 11px 0 11px}/*class catalog*/
.catalog_boxes:not(.narrow_headers) .description + .label.box {margin: 0 11px}/*class catalog*/
.catalog_boxes .label.box, .modern_module_row .label.box, .recommendation_list .label.box {padding: 2px 7px; border-radius: 3px; background-color: rgba(0,0,0,0.1)}
.catalog_boxes:not(.app_boxes) .footer .label.box {padding: 2px 7px 1px; float: right; margin-top: 1px}
.catalog_categories:not(.app_boxes) > * .label {min-height: 25px}/*category catalog, user and resource tiles */
.catalog_boxes .label.box + .label.box.total_time {margin-left: -6px}/*total time styles*/
.modern_module_row .label.box + .label.box.total_time {margin-left: 5px}
.label.box.total_time i {margin-top: -3px}
.modern_module_row .label.box.total_time i:after {left: -40px}
a:hover .label.box.total_time i {opacity: 1}
/* catalog item tiles */
.no-flexbox .catalog_boxes:not(.narrow_headers):not(.catalog_student) > div .header {height: 139px}
.catalog_boxes:not(.narrow_headers):not(.catalog_student) .header:last-child a h2:only-child {margin-bottom: 7px}
.catalog_boxes:not(.narrow_headers):not(.catalog_student) .header:last-child .label.box:last-child {margin-bottom: 10px}
.catalog_boxes:not(.narrow_headers):not(.catalog_student) .header:last-child .lightText:last-child {margin-bottom: 9px}
.catalog_boxes:not(.narrow_headers):not(.catalog_student) .header h2 + .lightText {margin-top: 38px !important}
.portal .catalog_boxes:not(.narrow_headers) .header .lightText {margin-top: 7px}
.catalog-tile-average-rating {padding: 4px 11px 0 11px}
.catalog_boxes .catalog-tile-average-rating {height: 20px}
.catalog_categories:not(.narrow_headers) .header > a {display: flex !important; flex-direction: column}
.catalog_boxes .header .description {margin-top: 5px}
.catalog_categories .header .description {margin-bottom: 5px}
/* shared tiles styles */
.catalog_boxes > div.highlight {box-shadow: inset 0 0 0 2px #222}
.catalog_boxes > div.highlight .imgCrop {box-shadow: inset 0 2px 0 0 #222, inset -2px 0 0 #222, inset 2px 0 0 #222; border-radius: 10px 10px 0 0}
.catalog_boxes > div.highlight:hover {box-shadow: inset 0 0 0 2px #222, 3px 3px 9px rgba(0,0,0,.25) !important; border-color: transparent}
#centreColumn .footer label {padding: 4px 5px 0 0}
/* lesson tiles */
.lesson_boxes, .dashboard_widget_grid {clear: both}
.lesson_boxes:not(.no_flex), .dashboard_widget_grid,
.catalog_boxes:not(.narrow_headers):not(.catalog_student):not(.no_flex) {display: flex; flex-flow: row wrap}
.lesson_boxes:not(.no_flex) > div, .lesson_boxes:not(.no_flex) > a, .dashboard_widget_grid > *,
.catalog_boxes:not(.narrow_headers):not(.catalog_student):not(.no_flex) > div {display: flex; flex-direction: column}
.lesson_boxes > a, .lesson_boxes > div, .catalog_boxes:not(.narrow_headers):not(.catalog_student) > div {float: none; display: inline-block}
.lesson_boxes .current, .label.box.inverted, .catalog_boxes .tile_img_label {background-color: #fff; font-size: 14px; color: #222; padding: 2px 6px; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,.2)}
.catalog_boxes .tile_img_label.grey_label {background-color: rgba(0,0,0,.5); color: #fff}
.lesson_boxes .label.box.inverted {float: right; margin: 10px 10px 0 0}
.lesson_boxes > a .header h2:only-child {margin-bottom: 8px}
.lesson_boxes > a .header h2 + .label.box:last-child {margin-bottom: 10px}
.lesson_boxes .header h2 + .lightText {margin-top: 5px}
.lesson_boxes .header h2 + .label.box {margin-top: 7px; margin-bottom: 3px}
.no-flexbox .lesson_boxes.ui-sortable .header,
.flexbox .lesson_boxes.ui-sortable.no_flex .header {height: 156px !important}
.no-flexbox .lesson_boxes:not(.ui-sortable) .header {height: 168px !important}
.no-flexbox .lesson_boxes .header .lightText,
.flexbox .lesson_boxes.no_flex .header .lightText {height: 57px; overflow: hidden}
.no-flexbox .lesson_boxes .header h2 + .lightText,
.flexbox .lesson_boxes.no_flex .header h2 + .lightText {height: 95px}
.lesson_boxes .header .locked {opacity: 1}
.lesson_boxes .header .locked i, .modern_module_row .locked i {margin: 2px 0 0 5px}
.modern_module_row .locked i {margin-top: 0}
#centreColumn .lesson_boxes .footer, .dashboard_widgets .footer,
.catalog_boxes:not(.narrow_headers):not(.catalog_student) > div .footer {margin-top: auto}
#centreColumn .catalog_student .user_progress ~ .footer {margin-top: 2px}
#centreColumn .lesson_boxes .user_progress ~ .footer {margin-top: 0}
#centreColumn .lesson_boxes .footer .block {float: left; margin-top: 1px; width: 21px}
#centreColumn .lesson_boxes:not(.ui-sortable) .footer .block:first-child {width: 19px}
#centreColumn .lesson_boxes:not(.ui-sortable) .footer .block {width: 24px}
#centreColumn .lesson_boxes .footer .block i.certificate {margin-top: 1px}
#centreColumn .lesson_boxes .footer .label, .dashboard_widgets .footer .label {background: transparent; float: right; width: auto; padding: 5px 0; margin-top: -3px; line-height: 22px}
#centreColumn .lesson_boxes .footer label {padding: 4px 5px 0 0}
/* simplified user tiles */
.user_boxes {clear: both}
.user_boxes > *, .user_boxes > *.highlight {background-color: #fff}
.user_boxes > * {padding: 12px 10px 7px; position: relative; color: #222; text-align: center}
.user_boxes > * > .img_crop_circle, .user_boxes > * > .img_crop_rectangle {margin: 0 auto 8px; width: 120px; height: 120px; background-size: cover; background-repeat: no-repeat; position: relative}
.user_boxes > * > .img_crop_circle {border-radius: 50%}
.user_boxes > * > .img_crop_circle .online, .profile_header .img_holder.avatar .online:after {border-radius: 50%; background-color: #91c73b; width: 15px; height: 15px; bottom: 8px; right: 8px; position: absolute; border: 2px solid #fff}
.user_boxes input[type="checkbox"] {width: 16px; height: 16px; top: 2px; left: 1px}
.user_boxes input[type="checkbox"] + label:before {position: absolute; top: 0; left: -1px}
.user_boxes .icon {position: absolute; top: 0; right: 0}
.user_boxes .icon i {margin: -5px -6px 0 0}
.user_boxes .user_info {position: relative}
.user_boxes .user_info > .user {width: 100%; position: relative}
.user_boxes .user_info > .user label {width: 100%; margin: 0}
.user_boxes .user_info > .user label span {width: 100%; display: inline-block; padding: 0 27px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top}

/* award tiles */
.award_boxes {display: flex; display: -webkit-flex; -webkit-flex-flow: row wrap; flex-flow: row wrap}
.award_boxes > * {display: flex; display: -webkit-flex; -webkit-flex-direction: column; flex-direction: column}
.award_boxes > * > .img_crop_rectangle {width: 100%; background-size: contain; background-position: 50%}
.award_boxes .award_info {position: relative; font-size: 15px}
.award_boxes .award_info label {display: block; margin: -1px 25px 1px; max-height: 41px; overflow: hidden; word-wrap: break-word}
.award_boxes .award_info a,
.award_boxes .award_info .award_src {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.award_boxes .award_info .award_src {color: #b0b0b0}
.award_boxes .award_info .award_date {color: #b0b0b0; font-size: 13px; margin-top: 2px}
.award_boxes .icon a:hover {opacity: .8}

/* tile footers */
.catalog_categories:not(.narrow_headers) .footer {padding-top: 3px; padding-bottom: 4px}
.catalog_courses .footer.textFooter {height: 23px}
.catalog_boxes .footer .block i:after, .catalog_boxes .header .label i:after {left: -40px}
.catalog_student .footer .block img, .catalog_courses .teacher img {border-radius: 50%; border: 1px solid #fff; background-color: #fff; width: 20px; height: 20px}

/* Quick tile editer */
.has_quick_editor > div, #leftColumn .img_crop_wrap {position: relative}
.quick_edit_icon {background-color: rgba(0,0,0,.2); border-radius: 3px; width: auto; margin: 0 -4px; padding: 1px 0 1px 3px; position: absolute; top: 10px; right: 14px; z-index: 2; line-height: 10px}
.quick_edit_icon:hover i:after {left: -40px}
.no-touch .quick_edit_icon, .no-touch .quick_edit_box {opacity: 0}
.no-touch .catalog_boxes > *:hover .quick_edit_icon, .no-touch #leftColumn .img_crop_wrap:hover .quick_edit_icon, .no-touch .quick_edit_icon.show, .no-touch .modern_module_row div.no-print:hover .quick_edit_icon, .no-touch .profile_header .img_holder .img:hover .quick_edit_icon {opacity: 1}
.quick_edit_box, .quick_edit_box .arrow:after {box-shadow: 0 0 3px 1px rgba(0,0,0,.1); background-color: #fff; position: absolute; border: 1px solid #e2e0e0; border-radius: 3px}
.quick_edit_box {margin: -8px 0 2px; padding: 5px 10px 0; top: 42px; z-index: 8; left: 2px; right: 2px}
.quick_edit_box .arrow {position: absolute; width: 30px; height: 13px; top: -13px; right: -2px; overflow: hidden; z-index: 10}
.quick_edit_box .arrow:after {width: 13px; height: 13px; left: 2px; top: 6px; content: ''; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
.quick_edit_box input, #centreColumn .quick_edit_box input[type="text"] {width: 100%; margin: 0 0 9px !important}
.quick_edit_box label, #centreColumn .quick_edit_box input[type="text"], .quick_edit_box input, .quick_edit_box button {font-size: 14px}
.quick_edit_info_text {font-size: 14px; clear: both}
.quick_edit_box .alignR {background: #F4F4F4; margin: 12px -10px 0; padding: 0 10px; clear: both}
.quick_edit_box .alignR button {margin-top: 7px; margin-bottom: 6px; padding: 0 10px; line-height: 28px}
.quick_edit_box label {margin: 2px 0 4px !important; width: 100%}
.quick_edit_box .tile_colors_holder {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: -3px}
.quick_edit_box .tile_colors_holder input.jscolor {width: 61px; padding: 4px 5px; margin: 3px 5px 3px 0 !important}
.quick_edit_box .tile_colors_holder .tile_colors a {float: left; width: 21px; height: 21px; margin: 3px 5px 5px 0; border-radius: 50%}
.quick_edit_box .tile_colors_holder .tile_colors a:hover {transform: scale(1.15)}
.quick_edit_box .tile_colors_holder .options_btn {margin: 3px 0 !important}
.quick_edit_box .tile_colors_holder ~ .options_btn {margin-top: 9px}
.quick_edit_box .options_btn {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; display: inline-block; box-sizing: border-box; float: left; margin-bottom: 12px !important}
.quick_edit_box.only_image .options_btn {margin: 5px 0 11px 0 !important; min-width: 135px}
.default_image .quick_edit_box.only_image .options_btn.reset_picture {display: none !important}
.portal .quick_edit_icon i {margin-right: 0}
.portal .quick_edit_box a.options_btn[onclick*='uploader'] {display: none !important}/* hide image upload in portal quick editor */

/* quick edit uploader */
.quick_edit_box .uploader-list {width: 100%; box-sizing: border-box; margin-right: 3px}
.quick_edit_box .uploader-list .text {font-size: 14px; color: #85C3CC}
.quick_edit_box .uploader-list .text a {display: none}
.quick_edit_box .uploader-list .text b {position: absolute; top: 5px; right: 15px}
.quick_edit_box .uploader-list .progress-bar-container .text {display: none}
.quick_edit_box .uploader-list .progress-bar-container.done .text {display: block}
.quick_edit_box .uploader-list .progress-bar-container.done .progress-bar {width: 100% !important}
.quick_edit_box .uploader_container {height: 35px}

/*------------------- Content Blocks (contact overview & help centre overview) -------------------*/
.contentBlock {
  float: left;
  display: table;
  margin-bottom: 3%;
  width: 48%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.contentBlock.mt35 {margin-top: 35px;}
.contentBlock.floatR {float: right;}
.contentBlock:last-child {margin-bottom: 0;}
a.contentBlock, #wrapper.contact div.contentBlock {
  padding: 15px 25px; /* 20px 25px; */
  transition: background 0.5s ease;
}
.contentBlock .sideImg, .contentBlock .sideText {display: table-cell; vertical-align: middle;}
.contentBlock .sideImg img {width: 75px; height: 75px;}
.contentBlock .sideText {
  line-height: 22px;
  width: 100%;
  padding-left: 25px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.contentBlock .sideText .hc-limit-lines {max-height: 44px; overflow: hidden;}
.contentBlock .sideText h3 {margin-bottom: 6px; /*height: 24px; overflow: hidden;*/}
p.contentBlock .sideText {padding-left: 25px;}
a.contentBlock .sideText h3.m0 {font-size: 24px; line-height: 30px}

/*------------------ Checkout ------------------*/
/* Remove non-applicable styles when the new catalog pages replace the old */
.catalog_class.portal #leftColumn ~ #centreColumn {padding-left: 20px; padding-right: 20px}
.catalog_class #leftColumn {padding-bottom: 0 !important; -webkit-overflow-scrolling: touch}
.catalog_class.hide_nicescroll .nicescroll-rails, .catalog_class.offscreen_nicescroll .nicescroll-rails {left: -10000px !important}
.catalog_class.hide_nicescroll #leftColumn {overflow: visible !important}
.catalog_class #leftColumn > div, .catalog_class #leftColumn > div *, .catalog_class #leftColumn table a, .catalog_class #leftColumn .quick_edit_box button {color: #fff}
.catalog_class #leftColumn h1 {color: #fff; margin: 5px 0 11px; line-height: 30px; max-height: 60px; overflow: hidden}
.catalog_class #leftColumn .label.box {padding: 2px 9px; font-size: 15px; border-radius: 3px; background-color: rgba(0,0,0,0.1); line-height: 22px; display: inline-block; margin: 10px 0}
.catalog_class #leftColumn h1 + .label.box {margin-top: 5px}
.catalog_class #leftColumn .label.box:last-child {margin-bottom: 5px}
.catalog_class #leftColumn table.item_cart_options {margin: 4px 0 6px}
.catalog_class #leftColumn table.item_cart_options td {border: 0; padding: 4px 0}
.catalog_class #leftColumn tr.item_cart_row select, .catalog_class #leftColumn tr.item_cart_row input[type="text"] {width: 40px; height: 21px; font-size: 12px; margin: -2px 0 0; padding: 0 0 0 4px}
.catalog_class #leftColumn tr.item_cart_row input[type="checkbox"]:focus + label:before,
.catalog_class #leftColumn tr.item_cart_row select:focus,
.catalog_class #leftColumn tr.item_cart_row input:focus {box-shadow: none; outline: none}
.catalog_class #leftColumn tr.item_cart_row td[id*='item_quantity_label'] {position: relative}
.catalog_class #leftColumn tr.item_cart_row button {background-color: #fff; border-radius: 3px; font-size: 12px; padding: 0 7px; line-height: 19px !important; margin: 0; position: absolute; right: 0; top: 4px; display: none}
.catalog_class #leftColumn table.checkout_order td.taxable-item {position: relative}
.catalog_class #leftColumn table.checkout_order td.taxable-item:after {content: '*'; position: absolute; right: -8px; top: -4px; font-size: 12px}
.catalog_class #leftColumn table.checkout_order button {top: -1px}
.catalog_class #leftColumn a.button, .catalog_class #leftColumn input, .catalog_class #leftColumn label, .catalog_class #leftColumn select, .catalog_class #leftColumn option, .catalog_class #leftColumn button, .portal.catalog_class #leftColumn .options_btn {color: #222}
.catalog_class #leftColumn .center a.button, .catalog_class #leftColumn .center button {background-color: #fff; padding: 10px; display: inline-block; margin: 5px; border-radius: 3px; line-height: initial}
.catalog_class #leftColumn a.button i {margin: -3px 0 0 0}
.catalog_class #leftColumn a.button:hover, .catalog_class #leftColumn table a:hover {opacity: 0.7}
.catalog_class #leftColumn a.button:hover i:after {left: 0}
.checkout_order a:hover i:after {left: -40px; opacity: .7}
.catalog_class #leftColumn table td {background-color: transparent; border-color: rgba(255,255,255,0.3); padding-left: 0}
.catalog_class #centreColumn h2:not(.class_name):first-of-type {margin-top: 0}

/*------------------ Catalog item ------------------*/
.catalog_item .profile_header .teacher {font-size: 14px}
.catalog_item .profile_header .profile_info .alignR .link_button {padding: 12px 18px}
.catalog_item .item_cart_options {display: inline-block; position: relative; top: 2px; margin-left: auto; font-size: 15px}
.catalog_item .item_cart {display: inline-block; white-space: nowrap}
.catalog_item .item_cart select, .catalog_item .item_cart input[type="text"] {width: 40px !important; height: 21px; font-size: 12px; padding: 0 4px}
html:not([dir=rtl]) .catalog_item .item_cart select {margin-right: 0}
.catalog_item .item_cart input[type="text"] {margin: 0 0 0 5px}
.catalog_item .item_cart input[type="checkbox"].emptyLabel + label:before {top: 4px}
.catalog_item .item_cart ~ .item_cart {margin-top: 4px}

.catalog_item .catalog_item_tabs .tabnav {margin-top: 0}
.catalog_item .catalog_item_tabs .tab-content:not(.active-tab) {display: none}
.catalog_item .catalog_item_tabs .tab-content h3 {font-size: 16px}
.catalog_item .showLessons {width: 100%; text-align: center; position: relative}
.catalog_item .showLessons a {display: inline-block; margin-top: 5px}
.catalog_item .showLessons a i, .catalog_item .showReviews a i {margin: -4px 4px 0}
.catalog_item .showLessons.removeLines:before, .catalog_item .showLessons.removeLines:after {display: none}
.catalog_item .showLessons.removeLines a {margin-top: 10px}
.catalog_item table.certificates td {border: 0; background-color: transparent}
.catalog_item .reviews {margin-top: 20px}
.catalog_item .reviews > div:not(.hide):not(.showReviews) {display: table; margin: 14px 0}
.catalog_item .reviews .reviewImg {display: table-cell; vertical-align: middle; width: 96px; text-align: center; padding-right: 12px}
.catalog_item .reviews .reviewImg img {border-radius: 50%; border: 1px solid #c6c6c6}
.catalog_item .reviews .review {background-color: #fff; border: 1px solid #e2e0e0; position: relative; padding: 0 15px; border-radius: 4px; display: table-cell; vertical-align: middle}
.catalog_item #contentWrap .reviews .review p.primaryColorText {margin-bottom: 0}
.catalog_item #contentWrap .reviews .review p:not(.primaryColorText) {line-height: 1.4; margin-top: 2px}
.catalog_item .reviews .review > .arrow {position: absolute; width: 13px; height: 30px; top: 50%; left: -13px; margin-top: -14px; overflow: hidden; z-index: 3}
.catalog_item .reviews .review > .arrow:after {position: absolute; border: 1px solid #e2e0e0; background: #fff; width: 17px; height: 17px; left: 4px; top: 4px; border-radius: 2px; content: ''; transform: rotate(45deg)}

.catalog_item .rightColumn .catalog_item_inclusion {margin-top: 5px}
.catalog_item .rightColumn .catalog_item_inclusion li {font-size: 14px; padding-left: 0 !important}

/* sessions list */
.rightColumn .select_session p {position: relative}
.rightColumn .select_session label, .rightColumn .select_session .date {padding-left: 23px; display: inline-block}
.rightColumn .select_session input[type="radio"] + label:before {position: absolute; left: 0; top: 2px}
.rightColumn .select_session .date {font-size: 14px}
/*remove once checkbox code is adjusted */
.rightColumn .select_session label + span:not(.date) {padding-left: 23px; display: inline-block}
.rightColumn .select_session input[type="radio"].emptyLabel + label {position: absolute}
.select_session_heading {padding: 3px 0}

/* category list */
.rightColumn .categories_holder .headingLinkWrap a.hide_clear,
.rightColumn .categories_holder #filter_form .hide_clear {display: none}
@media (min-width: 980px) {
  .rightColumn .categories_holder .headingLinkWrap a[data-element] {display: none}
}
@media (max-width: 979px) {
  .rightColumn .categories_holder ul, .rightColumn .categories_holder ul .centreIcon {display: none}
  .rightColumn .categories_holder h2, .rightColumn .categories_filter h2 {margin-bottom: 10px}
  .rightColumn .categories_holder ul li:first-child {padding-top: 0 !important}
  .rightColumn .categories_holder ul li:nth-last-of-type(2) {border-width: 0 !important}
}

/* accordion */
.accordion_heading {background-color: #eee; cursor: pointer; padding: 9px 10px; margin-top: 2px; transition: .4s; border-radius: 4px; width: 100%; box-sizing: border-box; color: #222; line-height: 1.4}
.accordion_heading {display: flex; justify-content: space-between; align-items: center; user-select: none; text-align: left}
.accordion_heading.active, .accordion_heading:hover {background-color: #e2e2e2; opacity: 1 !important}
.accordion_heading:after {content: '\02795'; font-size: 12px; color: #777; margin-left: 20px; filter: grayscale(100%) brightness(90%); margin-top: 2px}
.accordion_heading.active:after {content: "\2796"}
.catalog_item .accordion_heading:after, .catalog_item .accordion_heading.active:after {display: none}
.catalog_item .accordion_heading i {margin-right: -3px}
.catalog_item .accordion_heading.active i:after {top: -40px}
@media (min-width: 769px) {
  .catalog_item .accordion_heading {display: none}
}
@media (max-width: 768px) {
  .catalog_item .tabnav, .catalog_item .accordion_heading + h2 {display: none !important}
  .catalog_item .tab-content {padding: 0 10px; max-height: 0; overflow: hidden; transition: max-height .3s ease-out}
  .catalog_item .tab-content > *:first-child {margin-top: 10px !important}
  .catalog_item .tab-content > *:first-child > p:first-child {margin-top: 0}
  .catalog_item .tab-content > ul:first-child {margin-bottom: 0}
  .catalog_item .tab-content .showLessons {margin-bottom: 10px}
  .catalog_item .catalog_item_tabs .tab-content:not(.active-tab) {display: block}
  .catalog_item .catalog_item_tabs .tab-content {display: block !important}
  .catalog_item .modern_module_list > table:last-child {margin-bottom: 10px !important}
}

/*------------------- Plans -------------------*/
.price_block h3 {font-size: 26px; color: #fff}
.price_block .plan_number span, .pricing_matrix span, #contentWrap .pricing_neo .plan_info {font-size: 15px}
.pricing_matrix:not(.indie) .price_block h3 {font-size: 24px}
.pricing_matrix .plan_number {font-size: 40px}
.pricing_matrix .plan_info {font-size: 28px}
.pricing_matrix .plan_info sup {margin-top: 5px; font-size: 20px}
.pricing_matrix.indie .plan_info {font-size: 33px}
.pricing_matrix.indie .plan_number {font-size: 50px}

.pricing_matrix, .pricing_neo {text-align: center; margin-top: 15px}
.pricing_neo {margin: 15px 0 45px}
.user .pricing_neo {margin-top: 50px}
body:not(.newSite) .pricing_matrix {margin-top: 38px}
.price_block {
  position: relative;
  display: inline-block;
  margin: 4px 0 4px -5px;
  width: 48%;
  max-width: 270px;
  box-sizing: border-box;
  vertical-align: top;
  transition: box-shadow .3s ease-in-out
}
.pricing_neo .price_block {margin: 4px 10px; background-color: #fff; display: flex; flex-direction: column}
.price_block.plan_highlight .plan_badge {
  position: absolute;
  color: #fff;
  font-size: 12px;
  width: 100%;
  padding: 4px 0;
  box-sizing: border-box
}
.price_block .price_heading {padding: 16px 0}
.plan_info {position: relative}
.pricing_neo .plan_info, .pricing_neo .plan_footer, .pricing_matrix span {color: #8c8c8c}
.pricing_matrix .price_block .plan_info:before {
  border: 1px solid #DCDCDC;
  border-width: 1px 0 0 0;
  content: '';
  position: absolute;
  top: -1px;
  left: 20px; right: 20px;
}
.matrix .plan_info span span {font-family: 'RobotoRegularNew', helvetica, arial, sans-serif}
.price_block sup {margin-right: 5px; display: inline-block; vertical-align: top}

table.plansComparisonHeader:not(.neo) tr th {padding: 8px 0}
table.plansComparisonHeader th h3 > strong {font-size: 14px; display: block; line-height: 1.2; margin-top: 2px}

table.plansComparisonHeader {border-collapse: collapse; table-layout: fixed; margin: 50px 0 0}
body:not(.neo) table.plansComparisonHeader {margin: 25px 0 0}
table.plansComparisonHeader tr:first-child th {border-radius: 5px 5px 0 0}
table.plansComparisonHeader tr th {background-color: transparent; padding: 15px 5px}
table.plansComparisonHeader tr th:not(:first-child), table.plansComparisonBody tr td:not(:first-child) {width: 15%}
table.plansComparisonHeader.neo tr th:not(:first-child), table.plansComparisonBody.neo tr td:not(:first-child) {width: 25%}
table.plansComparisonHeader.neo tr th:first-child {border-width: 0; background: transparent}
table.plansComparisonHeader th {border-width: 0; word-wrap: normal}
table.plansComparisonHeader h3 {margin: 4px 0; line-height: 1.1; width: 100%}
table.plansComparisonHeader tr:nth-child(1) th:not(:first-child) h3 {color: #fff}
table.plansComparisonHeader tr:not(:first-child) th {background: #fff; padding: 12px 8px; border-width: 1px}
table.plansComparisonHeader tr:not(:first-child) th > * {line-height: 1.4}
table.plansComparisonHeader tr:not(:first-child) th > .colorBtn {margin: 0; padding: 7px 15px  !important; font-size: 15px}
table.plansComparisonHeader tr th:last-child a {display: inline-block}
table.plansComparisonBody {background: #fff; margin: -1px 0 0}
table.plansComparisonHeader tr th:first-child,
table.plansComparisonBody tr td:first-child {border-left-width: 0}
table.plansComparisonHeader tr th:last-child,
table.plansComparisonBody tr td:last-child {border-right-width: 0}
table.plansComparisonBody tr td:not(:first-child) {text-align: center}
table.plansComparisonBody tr th {padding: 12px 8px; text-align: center !important}

table.plansComparisonBody tr th {padding: 19px 8px; background: #7475b4; color: #fff; border-bottom: 1px solid #e0e0e0; font-size: 18px; -webkit-font-smoothing: antialiased}
table.plansComparisonBody.matrix tr th {background: #899a98}
table.plansComparisonBody.neo tr th {background: #20b0c5}

table.plansComparisonBody tr td {padding: 10px 8px; line-height: 1.4}
table.plansComparisonBody tr td i {margin: 1px 0 0 2px;}
table.plansComparisonBody i.tick:after, .price_block i.tick:after {
  width: 16px; height: 16px; top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0,0V16H16V0ZM14.86,4.28,6.62,12.65v0l-.77.77a.66.66,0,0,1-.94,0L1.14,9.69a.66.66,0,0,1,0-.94L1.91,8a.68.68,0,0,1,1,0l2.51,2.49,7.77-7.91a.68.68,0,0,1,.95,0l.77.77A.68.68,0,0,1,14.86,4.28Z' fill='%23fff'/%3E%3C/svg%3E")
}/*('/images/icons/transparent-tick.svg')*/

/* NEO Plans */
.pricing_neo .plan_free .plan_number > *, .pricing_neo .plan_free .plan_more, table.plansComparisonHeader tr:last-child th span {color: #23a07e}
.pricing_neo .plan_premium .plan_number, .pricing_neo .plan_premium .plan_more {color: #008093}

table.neo.plansComparisonHeader th.plan_free, .plan_free i.tick:after, .pricing_neo .plan_free .price_heading {background-color: #2bb08c}
table.neo.plansComparisonHeader th.plan_premium, .plan_premium i.tick:after, .pricing_neo .plan_premium .price_heading, .tour .plansComparisonHeader .colorBtn {background-color: #008093}

.pricing_neo .price_block.plan_free .plan_footer {border: 4px solid #2bb08c}
.pricing_neo .price_block.plan_premium .plan_footer {border: 4px solid #008093}
.pricing_neo .price_block .plan_footer {border-width: 0 0 4px !important}

.price_block {box-shadow: 0 0 50px rgba(0,0,0,.1); border-radius: 6px}
.pricing_matrix a.price_block:hover {box-shadow: 0 0 60px rgba(0,0,0,.25)}
.price_block .price_heading {border-radius: 5px 5px 0 0}
.price_block .plan_number {display: block; background-color: #fff; color: #fff; padding: 10px 15px 23px}
.price_block .plan_number span {display: block; margin: -3px auto 0}
.pricing_neo .price_block, .pricing_neo .price_heading {border-radius: 20px 20px 0 0}
.pricing_neo .price_heading {padding: 20px 25px}
.pricing_neo .price_heading h3 {font-size: 28px}
.pricing_neo .price_heading img {margin: -43px 0 -10px 0; width: 140px; position: relative; z-index: 1}
.pricing_neo .plan_number:after,
.pricing_neo .plan_more:after {border-bottom: 1px solid #dcdcdc; content: ''; position: absolute; left: 20px; right: 20px; bottom: 0}
.pricing_neo .plan_number {position: relative; padding: 0 14px; height: 100px; display: flex; align-items: center}
.pricing_neo .plan_number span {font-size: 16px; line-height: 1.4}
.pricing_neo .price_block .colorBtn {font-size: 15px; margin-top: 8px; padding: 7px 15px !important}
.pricing_neo .plan_info {text-align: center; padding: 20px 10px 0; line-height: 26px}
.pricing_neo .plan_info strong {margin-bottom: 10px; display: inline-block}
.pricing_neo .plan_info div {display: inline-block; text-align: left}
.pricing_neo .plan_more {text-decoration: underline; position: relative; width: 100%; display: block; padding: 20px 0; margin-top: auto}
.pricing_neo .plan_footer {display: block; text-align: center; padding: 15px 20px; font-size: 15px}
.pricing_neo .plan_footer {padding: 15px 20px; height: 75px; display: flex; align-items: center; justify-content: center; flex-direction: column}
.user .pricing_neo .plan_premium .plan_number a,
.user .pricing_neo .plan_premium .plan_footer a {text-decoration: underline; font-size: 16px}
@media screen and (min-width: 628px) {
  .pricing_neo {display: flex; justify-content: center}
  .pricing_neo .price_block {max-width: 355px}
}
@media screen and (max-width: 627px) {
  .pricing_neo .price_block {width: 100%; max-width: 100%; margin: 0}
  .pricing_neo .plan_premium {margin-top: 50px}
}

.price_block.plan_highlight {margin-top: -3px}
.price_block.plan_highlight .price_heading {padding-top: 23px}
.price_block.plan_highlight .plan_footer {padding-bottom: 30px}
.price_block.plan_highlight .plan_badge {
  top: -7px; right: -7px;
  overflow: hidden;
  width: 90px; height: 90px;
  padding: 0;
  border-radius: 3px
}
.price_block.plan_highlight .plan_badge:before, .price_block.plan_highlight .plan_badge:after {
  content: '';
  display: block;
  width: 10px; height: 10px;
  background: #dfa900;
  position: absolute;
  z-index: -1
}
.price_block.plan_highlight .plan_badge:after {right: 0; bottom: 0}
.price_block.plan_highlight .plan_badge div {
  width: 130px;
  padding: 4px 0;
  margin: 24px 0 0 -12px;
  font-size: 12px;
  transform: rotate(45deg);
  background: #f5c206;
  box-shadow: 0 0 5px rgba(0,0,0,0.15)
}
.pricing_matrix.indie .plan_highlight .plan_badge div {background: #655491}
.pricing_matrix.indie .plan_highlight .plan_badge:before, .pricing_matrix.indie .plan_highlight .plan_badge:after {background: #433466}
.pricing_matrix .plan_highlight .plan_badge div {background: #698284}
.pricing_matrix .plan_highlight .plan_badge:before, .pricing_matrix .plan_highlight .plan_badge:after {background: #465f61}

/* Matrix Pricing */
.pricing_matrix .plan_highlight {position: relative; z-index: 5}
.pricing_matrix .plan_platinum {z-index: 4}
.pricing_matrix .plan_ruby {z-index: 3}
.pricing_matrix .plan_sapphire {z-index: 2}
.pricing_matrix .plan_quartz {z-index: 1}
.pricing_matrix .price_block.plan_highlight .price_heading {border-width: 24px 0 0 0 !important}
.pricing_matrix .price_block.plan_highlight .plan_info {padding-bottom: 19px}

.pricing_matrix#monthly {display: none}
table.plansComparisonHeader th.plan_indie, table.plansComparisonBody td.plan_indie i:after {background-color: #645892}
table.plansComparisonHeader th.plan_matrix, table.plansComparisonBody td.plan_matrix i:after {background-color: #6a8285}

.pricing_matrix .plan_starter .price_heading,
table.plansComparisonHeader th.plan_starter, table.plansComparisonBody td.plan_starter i:after {background-color: #4ab187}
.pricing_matrix .plan_bronze .price_heading,
table.plansComparisonHeader th.plan_bronze, table.plansComparisonBody td.plan_bronze i:after {background-color: #b8a98e}
.pricing_matrix .plan_silver .price_heading,
table.plansComparisonHeader th.plan_silver, table.plansComparisonBody td.plan_silver i:after {background-color: #a6a6a6}
.pricing_matrix .plan_gold .price_heading,
table.plansComparisonHeader th.plan_gold, table.plansComparisonBody td.plan_gold i:after {background-color: #f0b300}
.pricing_matrix .plan_platinum .price_heading {background-color: #c9c9c9}
.pricing_matrix .plan_ruby .price_heading {background-color: #9c1041}
.pricing_matrix .plan_sapphire .price_heading {background-color: #3a4290}
.pricing_matrix .plan_quartz .price_heading {background-color: #E5AA5C}

.pricing_matrix .plan_starter .plan_number, .pricing_matrix .plan_starter .plan_info {color: #4ab187}
.pricing_matrix .plan_bronze .plan_number, .pricing_matrix .plan_bronze .plan_info {color: #b8a98e}
.pricing_matrix .plan_silver .plan_number, .pricing_matrix .plan_silver .plan_info {color: #959595}
.pricing_matrix .plan_gold .plan_number, .pricing_matrix .plan_gold .plan_info {color: #f0b300}
.pricing_matrix .plan_platinum .plan_number, .pricing_matrix .plan_platinum .plan_info {color: #b9b9b9}
.pricing_matrix .plan_ruby .plan_number, .pricing_matrix .plan_ruby .plan_info {color: #9c1041}
.pricing_matrix .plan_sapphire .plan_number, .pricing_matrix .plan_sapphire .plan_info {color: #3a4290}
.pricing_matrix .plan_quartz .plan_number, .pricing_matrix .plan_quartz .plan_info {color: #E5AA5C}

.pricing_matrix .price_block {border-bottom: 3px solid transparent}
.pricing_matrix .plan_starter {border-color: #4ab187}
.pricing_matrix .plan_bronze {border-color: #b8a98e}
.pricing_matrix .plan_silver {border-color: #959595}
.pricing_matrix .plan_gold {border-color: #f0b300}
.pricing_matrix .plan_platinum {border-color: #b9b9b9}
.pricing_matrix .plan_ruby {border-color: #9c1041}
.pricing_matrix .plan_sapphire {border-color: #3a4290}
.pricing_matrix .plan_quartz {border-color: #E5AA5C}

.pricing_matrix .plan_number {background: #fff}
.pricing_matrix:not(.indie) .price_block {max-width: 163px}
.pricing_matrix .plan_info {padding: 10px 0 14px; background: #fff}
.pricing_matrix .plan_info span {display: block}

.brandedApps {border: 1px solid #e0e0e0; background: #f1f0f0; padding: 10px 20px; margin-top: 25px; display: table; width: 100%; box-sizing: border-box}
.brandedApps dt, #centreColumn .brandedApps h2:not(.class_name) {margin-top: 10px}
.brandedApps > div {display: table-cell; vertical-align: middle; width: 284px; padding-left: 25px; white-space: nowrap}
.brandedApps img {width: 130px !important; margin: 0 !important; border: none !important}
.brandedApps div > div {display: inline-block; vertical-align: middle}
.brandedApps div > div:last-child {padding-left: 20px}
.brandedApps div > div a {clear: both; display: block}
.brandedApps div > div a:not(:last-child) {margin: 0 0 7px !important}
.brandedApps div > div a img {display: block}
.fullColumn .brandedApps div > div img {float: none; height: auto}

/*------------------- 404 Error -------------------*/
.fourohfour {overflow: hidden}
.fourohfour p br {display: none}
.edu2 .fourohfour, .portal .fourohfour, #contentWrap .maintenanceHolder {margin: auto}
.edu2 .fourohfour {padding: 0 20px}
#centreColumn .fourohfour {margin-top: -14px}
.edu2 .fourohfour > img {margin: 20px 0 1px; max-width: 90%; float: right}
.fourohfour .optionsRibbon {margin-top: 15px}
.fourohfour .magnifier {overflow: hidden; position: relative; z-index: -1; width: 125px; margin: auto}
.fourohfour .magnifier img {float: right; width: 100%}
.portal .fourohfour {margin-top: -24px}

/*------------------- MAINTENANCE -------------------*/
#wrapper.maintenance {display: table}
#wrapper.maintenance #contentWrap {width: 100%; max-width: 800px; margin: auto; vertical-align: middle; display: table-cell}
#wrapper.maintenance .maintenanceHolder {max-width: 490px; padding: 20px}
#wrapper.maintenance .maintenanceHolder > img {width: 120px; margin-top: 12px}
#wrapper.maintenance footer {text-align: center; background-color: transparent; clear: both}
#wrapper.maintenance footer nav {max-width: 500px}
#wrapper.maintenance footer #socialBlocks li a:not(:hover) {background: #ECECEC}

/*------------------- How to Videos & Guides -------------------*/
.fullColumn {
  border-bottom: 1px solid #e2e0e0;
  background: #f9f9f9;
  box-shadow: inset 0 2px 2px rgba(0,0,0,.1), inset 0 -2px 2px rgba(0,0,0,.1);
}
.fullColumn:nth-child(2n + 2) {
  background: #fff;
  box-shadow: none;
}
.fullColumn div.twoThirds {
  overflow: hidden;
  margin: auto;
  padding: 20px;
  max-width: 1120px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.videos .grid {display: flex; flex-wrap: wrap; padding: 0 0 20px; margin: auto}
.videos .grid .video {width: 33.3%; padding: 0 15px 15px; box-sizing: border-box}
body:not(.user) .videos .grid {max-width: 1740px}
body:not(.user) .videos .grid .video {width: 25%}
@media screen and (max-width: 1024px) {
  .videos .grid .video {width: 50%}
  body:not(.user) .videos .grid .video {width: 33.3%}
}
@media screen and (max-width: 670px) {
  .videos .grid .video {width: 100% !important}
}

.guides a {max-width: 224px; margin: 0 10px 20px; display: inline-block; box-sizing: border-box; vertical-align: top; border-radius: 3px; overflow: hidden; box-shadow: 1px 1px 4px rgba(0,0,0,0.2); position: relative; z-index: 1}
.guides a img {-ms-interpolation-mode: bicubic; width: 100% !important}
.guides a img + span {background-color: #5e5f5f}
.guides a img[src*='/neo/'] + span, .guides a[href*='/neo/'] > span, .guides a[href*='NEO'] > span {background-color: #048497}
.guides a img[src*='/matrix/'] + span, .guides a[href*='/matrix/'] > span, .guides a[href*='MATRIX'] > span {background-color: #6a8285}
.guides a img[src*='/indie/'] + span, .guides a[href*='/indie/'] > span, .guides a[href*='INDIE'] > span {background-color: #505161}
.guides a > span {display: block; width: 102%; height: 48px; margin: -4px 0 0 -1px; padding: 0 14px; -moz-box-sizing: border-box; box-sizing: border-box; display: table}
.guides a span span {display: block; color: #fff !important; font-size: 15px; text-align: left}
.guides a span span:first-child:not(:last-child) {margin-top: 6px}
.guides a span span:first-child:last-child {display: table-cell; vertical-align: middle; text-align: center; line-height: 17px}
.guides a span + span {font-size: 12px}
.guides a > span + span {font-size: 10px; position: absolute; right: 2px; bottom: 50px; border-radius: 3px; width: auto; height: auto; padding: 3px 4px 2px; color: #fff; background-color: #333 !important}
.user .user_guides {padding: 10px 5px}
.user .user_guides a {border-radius: 8px}
.user .user_guides a:hover {box-shadow: 5px 5px 20px rgba(0,0,0,0.3)}
.user .user_guides a > span + span {font-size: 11px}
a.infographic div {display: inline-block; overflow: hidden; width: 100%; height: 244px; box-shadow: inset 0 -20px 50px -15px rgba(0,0,0,.7)}
a.infographic div img {position: relative; z-index: -1}
.matrix a.infographic > span {background-color: #7ca4a7}
.neo a.infographic > span {background-color: #23a398}
.indie a.infographic > span {background-color: #7575b4}

/*-------------------- Helper Classes --------------------*/
.visuallyhidden {width: 1px; height: 1px; position: absolute; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden}
.visuallyhidden .focusable:active, .visuallyhidden .focusable:focus {width: auto; height: auto; clip: auto; margin: 0; overflow: visible; position: static}
.visible {display: block !important; width: auto !important; height: auto !important; opacity: 1 !important}
.clearfix:before, .clearfix:after {content: " "; display: table}
.clearfix:after {clear: both}

/* ---------- Heading amount ---------- */
.heading_amount, .heading_amount_sml{min-width: 10px; height: 10px; background: rgba(0,0,0,.08); padding: 7px; border-radius: 20px; display: inline-flex !important; align-items: center; justify-content: center; font-size: 15px; margin-left: 5px; position: relative; top: -2px}
.heading_amount_sml {min-width: 6px; height: 6px; padding: 7px; font-size: 13px; top: 0}

/* ---------- Profile page ---------- */
.block.profile_header {position: relative; padding: 14px 30px 25px !important; display: flex; flex-direction: column; box-sizing: border-box}
form.profile_header {margin-top: 0 !important; margin-bottom: 0 !important}
.hasRightColumn #centreColumn > .profile_header {flex-basis: calc(100% - 62px) !important}/*padding + border for IE11*/
@supports (display: block) {
  .hasRightColumn #centreColumn > .profile_header {flex-basis: 100% !important}/* IE11 can't see this but other browsers can */
}
.profile_header ~ * {margin-top: 15px}
.profile_header > *:not(.profile_background) {position: relative; z-index: 2}
.profile_header > *[class*='quick_edit'] {position: absolute; left: 14px; right: auto}
.profile_header > .quick_edit_box {left: 0 !important}
.profile_header > .quick_edit_box .arrow {left: 11px}
.profile_header:hover > .quick_edit_icon {opacity: 1}
.profile_header .profile_header_nav {text-align: right}
.profile_header .profile_header_nav a {max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis}
.profile_header .img_holder, .profile_header .profile_info_holder, .profile_header .profile_info, .profile_header .teacher {display: flex; align-items: center}
.profile_header .img_holder {margin-top: 50px; margin-bottom: 1px; z-index: 2}
.profile_header .profile_header_nav + .img_holder {margin-top: calc(50px - 34px)}
.profile_header > .profile_types {margin: 0 0 0 auto; text-align: right}
.profile_header .profile_type {background: rgba(0,0,0,.3); border-radius: 3px; padding: 2px 5px; margin: 4px 3px 0 0; display: inline-block; font-size: 13px; color: #fff}
.profile_header .profile_types + .img_holder {margin-top: calc(50px - 24px)}
.profile_header .img_holder .img {margin-right: 30px; border-width: 0; box-shadow: 0 0 8px rgba(0,0,0,.3); width: calc(150px * 1.33); height: 150px; display: inline-block; background-size: cover; background-position: 50%; background-color: #fff; flex-shrink: 0; position: relative}
.profile_header .img_holder.header_user_logo .img {background-size: contain; background-repeat: no-repeat; border: 5px solid transparent; box-sizing: border-box}
.profile_header .img_holder:not(.avatar) .img {border-radius: 8px}
.profile_header .img_holder.avatar {margin-bottom: 15px}
.profile_header .img_holder.avatar .img {border-radius: 50%; width: 150px}
.profile_header .img_holder.avatar .img.online:after {content: ''; right: 17px}
.profile_header .img_holder.avatar .img .quick_edit_icon {margin: -3px 1px 0 0; border-radius: 50%}
.profile_header .img_holder span {color: #fff}
.profile_header .img_holder .profile_name, .profile_header .img_holder .profile_links a {font-size: 24px; display: inline-block; margin-bottom: 3px}
.profile_header .img_holder .profile_links a {font-size: 14px}
.profile_header .profile_info {justify-content: space-between; flex: 1}
.profile_header .profile_info {margin-left: 230px}
.profile_header .profile_social_links + .profile_info {margin-left: 30px}
.profile_header .img_holder.avatar + * .profile_info:first-child {margin-left: 180px}
.profile_header .img_holder:not(.avatar) + * .profile_social_links {width: 200px}
.profile_header .img_holder:not(.avatar) + * .profile_social_links,
.profile_header .img_holder:not(.avatar) + * .profile_social_links + .profile_info {margin-top: 15px}
.profile_header .profile_info span {color: #707070; font-size: 14px}
.profile_header .profile_info .alignR {margin-left: 25px}
.profile_header .profile_info .alignR:only-child {margin-left: auto}
.profile_header .profile_info .alignR > * {vertical-align: middle}
.profile_header .profile_info .alignR .link_button {line-height: 1.3; padding: 5px 12px; margin: 1px 0; font-size: 15px}
.profile_header .profile_info .alignR .link_button i {margin: -3px 0 0 -3px}
.profile_header .profile_info .alignR .link_button i:after {left: -40px}
.profile_header .profile_info .alignR a:not(.link_button) {font-size: 14px; white-space: nowrap}
.profile_header .label.box {padding: 3px 9px; font-size: 14px; border-radius: 3px; background-color: rgba(0,0,0,.04); line-height: 1.4; display: inline-block; margin: 5px 0}
.profile_header .profile_background {position: absolute; top: 0; left: 0; right: 0; height: 190px; background-size: cover; background-position: 50%; border-radius: 8px 8px 0 0}
.profile_header .profile_background:after {content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.14))}

.profile_social_links {width: 150px; min-height: 35px}
.profile_social_links a {border-radius: 50%; padding: 4px 5px 6px; display: inline-block; width: 31px; height: 31px; margin: 2px; box-sizing: border-box}
.profile_social_links a:first-child:nth-last-child(4), .profile_social_links a:first-child:nth-last-child(4) ~ a {margin: 2px 1px}
.profile_social_links a:hover {opacity: .8}
.profile_social_links a i {width: 19px !important; height: 19px !important; overflow: hidden !important; vertical-align: middle !important}
.profile_social_links a i:after {display: inline-block !important; left: -20px}
.profile_social_links a:hover i:after {left: -20px}

.leftColumn .index a {display: inline-block}
.leftColumn .index a:not(:last-child) {margin-bottom: 2px}
.leftColumn .index a i.inline {margin-right: 5px !important}

/* -- Public profile -- */
.portal.public_profile, .portal.public_profile #wrapper, .portal.public_profile .mm-page {background-color: #fff}
.portal.public_profile.grey_background, .portal.public_profile.grey_background #wrapper, .portal.public_profile.grey_background .mm-page {background-color: #f5f5f5}
.portal.public_profile #wrapper {border-width: 0 !important; padding-top: 89px}
body:not(.site_full_width).portal.public_profile #wrapper {max-width: 1600px}
.portal.public_profile #contentWrap {padding: 0 26px; box-sizing: border-box}
.portal.public_profile #centreColumn {padding-left: 0; padding-right: 0; padding-bottom: 0}
.portal.public_profile #centreColumn:focus {outline: 0}
.portal.public_profile #centreColumn h2 {margin-top: 0}
html:not([dir=rtl]) .portal.public_profile #contentWrap.hasLeftColumn:before,
[dir=rtl] .portal.public_profile #contentWrap.hasLeftColumn:after {display: none}
.portal.public_profile header {left: 0; right: 0; width: 100% !important; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); padding: 12px 26px; box-sizing: border-box; height: auto}
.portal.public_profile header .header_inner {width: 100%; max-width: 1550px; margin: auto; display: flex; align-items: center; justify-content: space-between}
.portal.public_profile.site_full_width header .header_inner {max-width: 1990px}
.portal.public_profile header .header_inner img {margin: 0}
.portal.public_profile header .header_inner span {font-size: 19px; text-align: right}
.portal.public_profile .heading_amount {color: #222}
.portal.public_profile .flex_heading {display: flex; justify-content: space-between; align-items: center; margin: 4px 0 10px}
.portal.public_profile .leftColumn .flex_heading {margin-top: -5px}
.portal.public_profile label {width: auto}
.portal.public_profile footer {background-color: transparent; min-height: 35px; display: flex; align-items: flex-start; padding: 11px 26px; box-sizing: border-box}
.portal.public_profile footer span {color: #707070 !important}
.portal.public_profile footer a {font-size: 14px; color: #222; text-decoration: underline}
.portal.public_profile footer i {margin-top: -2px}
.portal.public_profile footer .powered_by {margin-top: 0; padding: 0}
.portal.public_profile footer .footerLinks a i.arrowRightSml:after {left: 0}
.portal.public_profile #centreColumn > .block:last-of-type,
.portal.public_profile .leftColumn > .block:last-of-type {margin-bottom: 0}

@media (min-width: 980px) {
  .profile_header ~ .rightColumn {overflow: visible !important; z-index: 2; width: 249px}/*for tooltips*/
}
@media (min-width: 769px) {
  .profile_social_links {text-align: center}
  .catalog_item .profile_header .profile_info .item_cart_options {display: none}
}
@media (max-width: 767px) {
  .portal.public_profile #mainContent {padding: 7px}
  .portal.public_profile header .header_inner span {font-size: 15px}
}
@media (min-width: 501px) and (max-width: 768px) {
  .profile_header .img_holder .img {width: calc(124px * 1.33); height: 124px; top: 30px; margin-bottom: 10px}
  .profile_header .img_holder.avatar .img {width: 124px; margin-bottom: 0}

  .catalog_item .profile_header .img_holder .img {margin-bottom: 14px}
}
@media (max-width: 768px) {
  /* better breakpoint for catalog pages*/
  .user div.profile_header, .user form.profile_header {margin-top: -8px !important}
  .profile_header .img_holder, .profile_header .img_holder.avatar {margin: 20px 0 0}
  .profile_header .profile_header_nav + .img_holder {margin: -20px 0 0}
  .profile_header .profile_types + .img_holder {margin: -5px 0 0}
  .profile_header .img_holder.avatar .img.online:after {right: 12px; width: 13px; height: 13px}
  .profile_header .img_holder.avatar .img .quick_edit_icon {margin: -4px -6px 0 0}
  .profile_header .img_holder .profile_name {font-size: 22px}

  .profile_header .profile_background {height: 150px}
  .profile_social_links {width: auto; margin-left: 150px}

  .block.profile_header {padding: 14px 15px !important}
  .profile_header .profile_info_holder {display: block}
  .profile_header .img_holder:not(.avatar) + * .profile_social_links {margin: 0 0 0 196px}
  .profile_header .profile_info {margin: 30px 0 0 !important}
  .profile_header .img_holder + * .profile_social_links + .profile_info {margin-top: 20px !important}
  .profile_header + .leftColumn .inline_tabs_options .optionsRibbon {top: -7px}

  .catalog_item .profile_header .img_holder .item_cart_options {display: none}
  .catalog_item .profile_header .profile_info .item_cart_options {display: block; margin: -35px 0 10px}
}
@media (min-width: 501px) {
  .profile_header .img_holder .profile_types {display: none}
  .profile_header .img_holder .profile_name, .profile_header .img_holder .profile_links a {color: #fff}
  .profile_header .img_holder .profile_links a:hover {opacity: .6}
  .profile_header .img_holder .profile_links a i:after {left: -40px}
  .profile_header .profile_info .alignR span + .link_button {margin-left: 10px}
}
@media (max-width: 500px) {
  .profile_header .img_holder {flex-direction: column; align-items: flex-start}
  .profile_header .profile_header_nav + .img_holder {margin-top: 10px}
  .profile_header > .profile_types {display: none}
  .profile_header .profile_types + .img_holder {margin-top: 5px}
  .profile_header .img_holder .profile_types {display: block; margin-bottom: 10px}
  .profile_header .img_holder .profile_type {background: rgba(0,0,0,.5)}
  .profile_header .img_holder.avatar .img .quick_edit_icon {margin: -7px -10px 0 0}

  .profile_header .img_holder .img {width: calc(100px * 1.33); height: 100px; top: 0; margin: 0 0 10px}
  .profile_header .img_holder.avatar .img {width: 100px}
  .profile_header .img_holder.avatar .img.online:after {right: 8px; width: 11px; height: 11px}
  .profile_header .img_holder .profile_name {color: #222}
  .profile_header .profile_background {height: 110px}
  .profile_social_links {margin: 15px 0 0 !important; min-height: 0}
  .profile_header .img_holder:not(.avatar) + * .profile_social_links,
  .profile_header .img_holder:not(.avatar) + * .profile_info {margin-top: 10px !important}
  .profile_header .profile_info {flex-direction: column; align-items: flex-start; margin-top: 15px !important}
  .profile_header .profile_info > .alignR {margin: 0 !important; text-align: left; width: 100%}
  .profile_header .profile_info > *:not(.alignR) {margin-bottom: 20px}

  .catalog_item .profile_header .profile_info .item_cart_options {margin-top: 0; width: 100%}
  .catalog_item .profile_header .profile_info .item_cart {width: 100%; display: flex; justify-content: space-between}
  .catalog_item .profile_header .profile_info > *:not(.alignR) {margin-bottom: 10px}
  .catalog_item .profile_header .profile_info .alignR > * {float: right}
  .catalog_item .profile_header .profile_info .alignR > * + * {clear: both; margin-top: 5px}
}

/* ---------- Users' Content - materialStyle content in user-content.css---------- */
.materialStyle {overflow: hidden}
.optionsRight + .materialStyle {clear: both}
.materialStyle iframe {position: relative;/* Safari fix - adjust position to remove thicker font in Safari */}
#mainContent iframe {max-width: 100%}
.flowplayer {max-width: 100% !important}

/* ------------- Lists -------------*/
.edu2 #contentBody div:not(.optionsRibbon) ul:not(.twoColumnWrap) {list-style: disc; margin-left: 40px}
.edu2 #contentBody div:not(.optionsRibbon) ul:not(.twoColumnWrap) li {margin-top: 5px}

/* ------------- Hide inactive scroll-bar in IE -------------*/
/* should fix for all ie but ie10 doesn't have class - so we fix for all */
textarea {
  overflow: auto;
}

/* ------------- Lesson/Section Headers -------------*/
#fixedMarginTop {margin-top: 118px; overflow: hidden}/* initial gaps before JS */
body[class*='lesson']:not([class*='teacher']) #fixedMarginTop {margin-top: calc(118px - 38px)}/* not teacher includes student & child */
#fixedSectionHeader {position: fixed; background-color: #fff; top: 42px; padding-top: 17px; z-index: 5; width: 85%}

body[class*='lesson'].student_scorm #fixedMarginTop {margin-top: calc(118px - 96px)}
body[class*='lesson'].student_scorm #fixedMarginTop + #fixedSectionHeader .section_header_wrap {padding-bottom: 16px}

@media screen and (max-width: 767px) {
  #fixedSectionHeader {right: 7px; left: 7px; width: auto}
}
@media screen and (max-width: 979px) {
  #fixedSectionHeader {position: absolute; background: transparent}
  #fixedMarginTop {margin-top: 172px}
  body[class*='lesson']:not([class*='teacher']) #fixedMarginTop {margin-top: calc(172px - 38px)}

  body[class*='lesson'].student_scorm #fixedMarginTop {margin-top: 0}
  body[class*='lesson'].student_scorm #fixedMarginTop + #fixedSectionHeader {position: static; margin-top: -16px; padding-left: 0 !important; padding-right: 0 !important}
  body[class*='lesson'].student_scorm iframe#scorm_iframe {margin-top: 0}
  /* add the static change for no-modules lessons and assignments if possible */
}
@media screen and (min-width: 980px) and (max-width: 2050px) {
  .site_full_width #fixedSectionHeader {left: 110px; right: 15px; width: auto !important}
}
@media screen and (min-width: 1025px) and (max-width: 2050px) {
  .site_full_width:not(.keep_tablet_nav) #fixedSectionHeader {left: 219px}
}

/* Teacher overview page */
#contentHeadingWrapper .teacherLessonHeading {position: relative; height: 69px}
#contentHeadingWrapper ~ .personalize-button.optionsRibbon {margin-top: 13px}
form#sections table .table_flex_content svg,
form#sections table .table_flex_content img {margin: 0 5px; flex-shrink: 0}
form#sections table .table_flex_content > span a {margin-right: 4px; font-size: 16px; line-height: 1.3}
form#sections table td > svg {margin: 0 5px 0 0; vertical-align: middle}
form#sections table .time i {margin-top: -4px}
form#sections table .time {color: #a8a8a8}
@media screen and (max-width: 768px) {
  form#sections table .table_flex_content > span a {font-size: 14px}
}

/* Section header navigation */
.section_header_wrap, .section_end_links {display: flex; justify-content: space-between}
.section_header_wrap .centerHeading {flex: 1; text-align: center; font-size: 25px; padding: 0 15px; margin: 3px 0 -3px; min-height: 30px; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap}
.sectionLink.inverted {padding: 0 11px; font-size: 12px; margin: 2px 0 1px; border-radius: 20px; display: inline-flex; align-items: center; color: #fff; transition: all .2s ease-in-out; height: 27px}
.sectionLink.inverted > * {margin: 0}
.sectionLink.inverted .gap {width: 8px; height: 100%}
.sectionLink.inverted:not(.locked):hover {opacity: .7}
.sectionLink.inverted:hover > * {opacity: 1}
.sectionLink.inverted.circle {padding: 0; width: 27px}
.sectionLink.inverted.circle + .sectionLink.inverted {margin-left: 10px}
.sectionLink.inverted.circle > * {margin: auto}
.sectionLink.inverted.locked {cursor: default}
.sectionLink.inverted.locked i {margin-top: -1px}
.sectionLink.inverted.locked i:after {left: -40px}
html:not([dir=rtl]) .sectionLink.inverted:not(.circle):not(.align_right):first-child > *:not(span) {transform: scaleX(-1)}

.section_end_links {clear: both}
.section_end_links .sectionLink.inverted {margin: 15px 0 0; display: none}

@media screen and (max-width: 979px) {
  #fixedSectionHeader .centerHeading {font-size: 20px}
  .sectionLink.circle, .sectionLink.align_right:only-child, .centerHeading + .sectionLink.align_right {margin-left: auto !important}
  #fixedSectionHeader.no-module.no-buttons.student .section_header_wrap + h2 {margin-top: 0 !important}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  #fixedSectionHeader {top: 0}
  #fixedSectionHeader:not(.student) ~ .hasRightColumn .leftColumn {min-height: 1px}
}
@media screen and (max-width: 767px) {
  .section_end_links .sectionLink.inverted {margin-bottom: 15px}
}

/* unify margins between heading elements */
/* not:(.lesson) includes .no-module and .assignment */
#centreColumn #fixedSectionHeader .section_header_wrap ~ h2 {margin-top: 12px}/*teacher and student*/
#fixedSectionHeader h2 + .inline_tabs_options,
body[class*='teacher'] .teacherLessonHeading + .inline_tabs_options {margin-top: 10px}/*lesson overviews*/
body[class*='teacher'] #contentHeadingWrapper + script + h2 {margin-top: 0 !important}/*lesson overviews*/
#fixedSectionHeader ~ .hasRightColumn .optionsRibbon {z-index: 4}
#fixedSectionHeader ~ .optionsRibbon.optionsRight,
#fixedSectionHeader ~ .hasRightColumn .optionsRibbon.optionsRight {margin-top: 15px; padding-bottom: 0}/* student multiple submissions */
#fixedSectionHeader ~ .max_user_content_width > .materialStyle > div[style*="line-height: 1.6"] > h2:first-child {margin-top: 11px}/*adjust after line-height change*/
/* Path lesson class margins */
.modern_module_list.module_course_header > table {margin-bottom: 0 !important}
.modern_module_list.module_course_header {margin-top: 15px}
#fixedSectionHeader ~ .hasRightColumn .rightColumn {margin-top: 15px}

/* --------------- iPad fix for play button - jwplayer  ----------------- */
.jwplay button { margin-top: 0 !important; }

/* ------------------ Fix for Table styling in TinyMCE ------------------ */
.mce-insetTable td {
  line-height: 1.4;
  font-size: 12pt;
}
.mce-insetTable td span,
.mce-insetTable td p {
  font-size: inherit;
}
textarea.hasEditor {height: 300px}
.mce-container,.mce-container *,.mce-widget,.mce-widget *,.mce-reset{font-weight: 300 !important}
.mce-toolbar-grp .mce-container, .mce-toolbar-grp .mce-container *, .mce-toolbar-grp .mce-widget, .mce-toolbar-grp .mce-widget * {white-space: normal !important}/* wrap editor toolbar icons */
.mce-toolbar-grp .mce-listbox .mce-caret {top: 50%; margin-top: -2px}
.checkout-row .mce-container * {white-space: normal}

/* ----------- Fix for checkbox/radio button align in facebox ------------ */
#facebox input[type="checkbox"] + label:before, input[type="radio"] + label:before { left: 0px; }

/* -------------------------- Klass description -------------------------- */
.klass-description {
  display: block;
  position: relative;
  margin-top: 35px;
}

/* Avatar list */
.avatar_select {width: 9%; margin: 0 1% 15px 0; float: left; text-align: center}
.avatar_select input[type="radio"] + label {width: 52px; position: relative}
.avatar_select input[type="radio"] + label:before {width: 100%; height: 100%; background: none; position: absolute; border-radius: 0; border: 0; top: 0; left: 0}
.avatar_select input[type="radio"] + label img {vertical-align: bottom}

/* ---------------------- Mobile - Back to Top button --------------------- */
a.back-to-top {
  text-align: center;
  font-size: 17px;
  color: #fff;
  background: #545454;
  display: none;
  padding: 20px 10px;
}
a.back-to-top:hover {
  opacity: .7;
  filter: alpha(opacity=70);
}
a.back-to-top span {
  background: url('/images/icons/mobile-up-icon.png') 0 2px no-repeat;
  background-size: 20px;
  padding-left: 25px;
}

/* ---------------------- Tool/Tool Provider Stuff --------------------- */
.field-small-info-text,
.custom-params-info {
  display: block;
  font-size: 10pt;
}

#facebox .custom-params-info {
  padding-left: 130px;
}

/* ---------------------- File uploader --------------------- */
#Uploader {clear: both; padding: 10px 0 0}
#Uploader .facebox-content {max-height: 450px !important}
#Uploader .drive-disable-btn {margin-left: 10px}

#Uploader .tabnav li.file_upload_settings {float: right}
#Uploader .tabnav li.file_upload_settings i {margin-top: -2px}

#uploader_settings .facebox-content,
#uploader_settings .facebox-content p {padding-top: 0 !important}
#uploader_settings ul.modules li {display: inline-block !important; margin: 0 10px 10px 0}
#uploader_settings ul.modules li a {display: block; width: 100px; height: 100px}
#uploader_settings ul.modules li.hide {display: none}
#uploader_settings ul.modules li.show {display: block}

.show_resources_tab, .show_gdrive_tab, .show_onedrive_tab, .show_onedrive_business_tab, .show_settings_tab, .show_equella_tab {display: inline-block !important;}
.hide_resources_tab, .hide_gdrive_tab, .hide_onedrive_tab, .hide_onedrive_business_tab, .hide_settings_tab, .hide_equella_tab {display: none !important;}

#facebox .gdrive_file_list,
#facebox .onedrive_file_list,
#facebox .onedrive_business_file_list {min-height: 350px}
#facebox .resources_file_list {min-height: 220px}

#facebox .resources_file_list.drive-loading,
#facebox .gdrive_file_list.drive-loading,
#facebox .onedrive_file_list.drive-loading,
#facebox .onedrive_business_file_list.drive-loading,
.equella-loading {
  background: transparent url('/images/loading-animation-white-retina.gif') no-repeat center center / 100px;
}

.drive-tree-view li { display: block; margin-bottom: 3px; clear: both; overflow: hidden; }
.drive-tree-view li .drive-element-icon { display: inline-block; margin: 2px 8px 0 1px !important; float: left; }
.drive-tree-view > li ul { display: none; padding: 4px 0 0 25px; }
.drive-tree-view > li ul.open { display: block; }
.drive-tree-view li input + label { margin-right: 3px; margin-top: 1px; float: left; }
.drive-tree-view li input + label:before { top: 0px; }
.drive-tree-view li div { display: inline-block; }
.drive-tree-view .folder { margin-left: 1px; color: #222; }

.mobile-app #UploaderContainer .moxie-shim {height: 100% !important;}

/* ---------------------- News Feed edit post changes --------------------- */
#centreColumn .comments .comment {clear: both}
#centreColumn .comments .comment .wrapPost > div {padding: 6px 0 5px}
#centreColumn .comments .comment .wrapPost {word-break: break-word}
#centreColumn .comments .comment .wrapPost .post-scope i.arrowRight {height: 24px}
.embeded-code-end {margin-top: 15px}

/* ---------------------- Teacher Assignment Grade --------------------- */
body[class*='teacher'] #fixedMarginTop.static_initially {margin-top: 0}
#fixedSectionHeader.grade:not(.scrolled) {position: static; padding-top: 0; width: auto; opacity: 1}
#fixedSectionHeader.grade {padding-bottom: 0}
#fixedSectionHeader.grade ul.tabnav {margin-bottom: 0}

.rightColumn .block .student-wrapper.indent {margin-top: 14px}
.rightColumn .block .student-wrapper.peer_review.indent {margin-bottom: 14px}
.rightColumn .block .student-wrapper, .grade-student-top .grade-wrapper {display: flex; align-items: center}
.rightColumn .block .grading_arrow {height: 20px; transition: all .3s ease; padding: 2px 4px}
.rightColumn .block .grading_arrow:hover {opacity: .5}
.rightColumn .block .grading_arrow img {height: 100%}
.grade-student-top.indent {margin-top: 12px; margin-bottom: 10px; border: 1px solid #e2e0e0; background-color: #f5f5f5; padding: 5px 11px}
.grade-student-top .grade-wrapper {justify-content: space-between}
.grade-student-top .grade-wrapper .grade-group > * {vertical-align: middle}
.rightColumn .block .student-wrapper select#selected_student {margin: 0 10px; width: 100%; border-color: #e2e0e0}

.grade-student-top .grade-wrapper .grading {display: inline-block; z-index: 1; position: relative; border: 1px solid #e2e0e0; background: #fff; padding: 1px 2px}
.grade-student-top .grade-wrapper .grading i {width: 16px; height: 22px}
.grade-student-top .grade-wrapper .grading.hover-show i:hover {cursor: pointer}
.grade-student-top .grade-wrapper .grading .grading-block {position: relative; float: left; height: 22px; min-width: 16px; margin: 0 3px}
.grade-student-top .grade-wrapper .grading .grading-block > * {text-align: center}
.grade-student-top .grade-wrapper .grading .grading-block.grade {width: 45px; font-size: 14px;}
.grade-student-top .grade-wrapper .grading .grading-block.grade .grade-input {display: inline-block; margin-top: 1px}
.grade-student-top .grade-wrapper .grading .grading-block.grade .grade-value {display: inline-block; margin-top: 2px}
.grade-student-top .grade-wrapper .grading .grading-block.grade .visible {text-align: center}
.grade-student-top .grade-wrapper .grading.hover-show .grading-block .to-show {display: none}
.grade-student-top .grade-wrapper .grading.hover-show .grading-block .to-hide {display: block}
.grade-student-top .grade-wrapper .grading.hover-show:hover .grading-block .to-show,
.grade-student-top .grade-wrapper .grading.hover-show.keep .grading-block .to-show {display: inline-block}
.grade-student-top .grade-wrapper .grading.hover-show:hover .grading-block .to-hide,
.grade-student-top .grade-wrapper .grading.hover-show.keep .grading-block .to-hide {display: none}

.grade-student-top .grade-wrapper .grading .grading-block.grade.has-rubric {text-align: center}
.grade-student-top .grade-wrapper .grading .grading-block.grade.has-rubric .frame-like-input {min-width: 38px; height: 18px; border: 1px solid #909090; margin-top: 1px}
.grade-student-top .grade-wrapper .grading .grading-block.grade.has-rubric i:after,
.grade-student-top .grade-wrapper .grading .grading-block.grade.has-rubric .frame-like-input i:after {height: 18px}

#centreColumn .grade-student-top .grade-wrapper .grading .grade-marker {width: 45px; text-align: center}
#centreColumn .grade-student-top .grade-wrapper .grading .grade-marker span {text-align: center; max-height: 16px; font-size: 16px; line-height: 1}
#centreColumn .grade-student-top .grade-wrapper .grading .grade-marker span.from {width: auto}
#centreColumn .grade-student-top .grade-wrapper .grading .grade i {margin-top: -3px}
#centreColumn .grade-student-top .grade-wrapper .grading .grade-input {padding: 1px 0}
#centreColumn .grade-student-top .grade-wrapper .grading input {padding: 2px 5px; width: 40px; margin: -3px 0 0; height: 20px; font-size: 14px; text-align: center}

.grade-student-top .grade-wrapper .dropDownHolder {position: absolute; left: -2px; top: 22px}
.grade-student-top .grade-wrapper .dropDownHolder.grading_dropdown {display: none}
.grade-student-top .grade-wrapper .dropDownHolder .dropDown {background: #fff; display: block}
.grade-student-top .grade-wrapper .dropDownHolder .dropDown .scroll {max-height: 156px; overflow-y: scroll}
.grade-student-top .grade-wrapper .dropDownHolder .dropDown span {padding: 4px 5px; line-height: 18px; white-space: nowrap; font-size: 14px; display: block}
.grade-student-top .grade-wrapper .dropDownHolder .dropDown span:hover {background-color: #E8E8E8; cursor: pointer}
.grade-student-top .grade-wrapper .dropDownHolder.grading_dropdown .dropDown span > *:first-child {margin-right: 15px}
.grade-student-top .grade-wrapper .dropDownHolder .dropDown > span i {margin: -3px 5px 0 0}

.grade-student-top .grade-wrapper .special_values_dropdown {display: none; text-align: left}
.grade-student-top .grade-wrapper .grading_dropdown .scroll span {display: flex; justify-content: space-between}
#facebox #adjustment_amount {width: auto}

#grade-floating-rubric {position: fixed; border: 2px dashed #c7c7c7; z-index: 11; overflow: hidden; display: none; padding: 10px 14px; background-color: rgba(255,255,255,.9)}
#grade-floating-rubric #floating_rubric_form {display: flex; flex-direction: column; height: 100%; width: 100%; margin: 0 !important}
#grade-floating-rubric > * h2 {margin-top: -2px !important}
#grade-floating-rubric > * .grade-floating-rubric-scroll {overflow-y: auto; border-bottom: 1px solid #e2e0e0; margin-top: 10px}
#grade-floating-rubric > * table.rubric {margin: 0}
#grade-floating-rubric > * table.rubric tr td {font-size: 14px; padding: 3px}
#grade-floating-rubric > * table.rubric tr td.tlEmptyCell {background-color: initial}
#grade-floating-rubric .grade-floating-rubric-btns div {display: flex; justify-content: space-between}
#grade-floating-rubric > * button {font-size: 15px; line-height: 1.9; padding: 0 7px; margin-bottom: 5px}
html:not([dir=rtl]) #grade-floating-rubric > * button[style*='none'] + button[style*='none'] + .save_btns {margin-left: auto}
#grade-floating-rubric.minimized {margin-right: 0; right: 0; bottom: auto !important}
#grade-floating-rubric.minimized > * {height: 18px; width: 220px}
#grade-floating-rubric.minimized .grade-floating-rubric-scroll, #grade-floating-rubric.minimized .grade-floating-rubric-btns {display: none}
@media screen and (max-width: 979px) {
  #grade-floating-rubric {position: absolute; z-index: 8}
}

/* Both rubrics' ellipsis content */
table.rubric tr td .rubric_ellipsis {max-height: 66px; width: 100%; overflow: hidden; position: relative}
table.rubric tr td .rubric_ellipsis.fade_out_text:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background: linear-gradient(rgba(255,255,255,0),#fff)}
table.rubric tr td.rubricHover:hover .rubric_ellipsis.fade_out_text:after {background: linear-gradient(rgba(216,232,205,0),#d8e8cd)}
table.rubric tr td.rubricHover.selected:not(:hover) .rubric_ellipsis.fade_out_text:after {background: linear-gradient(rgba(232,232,232,0),#E8E8E8)}
table.rubric tr td.selected .rubric_ellipsis.fade_out_text:after {background: linear-gradient(rgba(245,245,245,0),#E8E8E8)}
.rightColumn table.rubric tr td .rubric_ellipsis * {font-size: 13px !important}

/* Right column on rubric grading pages */
.grading-teacher-info > * {display: inline-block; font-size: 15px; margin-right: 10px}
.rightColumn table.rubric {font-size: 13px; margin: 0; padding: 0}
html:not([dir=rtl]) .rightColumn table.rubric tr > *:first-child {border-left-width: 0}
html:not([dir=rtl]) .rightColumn table.rubric tr > *:last-child {border-right-width: 0}
.rightColumn table.rubric tr td {line-height: 1.3; padding: 3px 5px}
.rightColumn table.rubric tr:last-child td {border-bottom-width: 1px}
.rightColumn .rubric_btns {margin-top: 11px; margin-bottom: 11px; display: flex; justify-content: space-between}
.rightColumn .rubric_btns > a {margin-top: 2px}
.nicescroll-rails-vr.do_not_hide {display: block !important} /* keep visible while making rubric selections */
.nicescroll-rails-vr.do_not_hide .nicescroll-cursors {transition: width 0.15s ease-in-out}
.nicescroll-rails-vr.do_not_hide .nicescroll-cursors:hover,
.nicescroll-rails-vr.do_not_hide .nicescroll-cursors:active {width: 11px !important; border-radius: 7px !important}

.grading-teacher-comment .teacher-comment {display: block; margin-bottom: 5px}
.grading-teacher-comment-attachment, .grading-thread-comment-attachment {margin: 0 14px 15px}
.grading-teacher-comment-attachment a, .grading-thread-comment-attachment a {font-size: 14px}
.grading-teacher-comment-attachment-link a {word-wrap: break-word}

.grading-thread-comment-list {margin-top: 10px !important}
.grading-thread-comment-list .comment {position: relative; border-bottom: 1px solid #e2e0e0; padding: 10px 0}
.grading-thread-comment-list .comment:first-child {padding-top: 0}
.grading-thread-comment-list .comment:last-child {border-bottom: 0; padding-bottom: 5px}
.grading-thread-comment-list .comment .avatarText {line-height: 1.3}
.grading-thread-comment-list .comment .deleted {color: #707070}
#facebox .grading-thread-comment-list .comment .content {min-height: 45px}
.grading-thread-comment-list .comment .author,
.grading-thread-comment-list .comment .content,
.grading-thread-comment-list .comment .content * {font-size: 14px}
.grading-thread-comment-list .comment .fp-player * {font-size: 12px!important}
.grading-thread-comment-list .comment .fp-player .fp-timestamp {display: none!important}
.grading-thread-comment-list .comment .resource-flowplayer-video > div {height: auto!important}
.grading-thread-comment-list .comment .content img, .grading-thread-comment-list .comment .content [class*="flowplayer"] {max-width: 100%!important}
.grading-thread-comment-list .comment .at {display: block; font-size: 12px}
.grading-thread-comment-list .comment .content {clear: both; padding: 8px 0 0 0}
.grading-thread-comment-list .comment .content textarea {margin: 0 0 2px 0}
.grading-thread-comment-list .comment .attachments a {display: block; word-wrap: break-word; font-size: 12px; margin-bottom: 4px}
.grading-thread-comment-list .comment .content textarea, .grading-thread-comment-textarea textarea {resize: vertical}
.grading-thread-comment-list .comment .update-options {margin-top: 10px}
.grading-thread-comment-list .comment .system-notification {text-align: center}
.grading-thread-comment-textarea {margin: 0 14px 15px;}
.rightColumn .grading-thread-comment-options {margin-bottom: 11px; display: flex; justify-content: space-between}
.rightColumn .grading-thread-comment-options a {font-size: 14px}
.grading-thread-comment-attachment {margin-bottom: 11px}

.grading-teacher-comment-attachment .uploader_close_image_link, .grading-thread-comment-attachment .uploader_close_image_link {position: absolute; top: 0; right: 0; margin: 0; padding-top: 4px; padding-right: 10px; padding-left: 3px; height: 25px; background-color: #efefef}
.grading-teacher-comment-attachment .uploader_close_image_link + b, .grading-thread-comment-attachment .uploader_close_image_link + b {margin-right: 30px;}
.grading-teacher-comment-attachment .uploader_close_image_link .close_image, .grading-thread-comment-attachment .uploader_close_image_link .close_image {margin-left: 2px}

/* Popup notifications */
img.notification-content-icon {float: none!important; width: 94px!important; height: 94px!important; margin: 0!important}

/* MS Immersive reader */
.immersive-reader-button-holder {padding-top: 13px}

@media screen and (min-width: 320px) {
  .user_boxes > * {width: calc((100% / 2) - 15px + (15px / 2)); margin: 0 15px 15px 0}
  .user_boxes > *:nth-child(2n+2) {margin-right: 0}
}
@media screen and (max-width: 359px) {
  .calendar_heading_mobile .optionsRight#view_options i {display: none}
}
@media screen and (max-width: 380px) {
  table.plansComparisonHeader tr th:not(:first-child), table.plansComparisonBody tr td:not(:first-child) {width: 16%}
  table.plansComparisonHeader.indie th.plan_matrix, table.plansComparisonBody.indie td.plan_matrix {width: 18%}
  table.plansComparisonBody tr td {padding: 7px 5px; font-size: 13px}
}
@media screen and (max-width: 479px) {
  .contactForm label, .signupForm label {width:100%}
  .signupForm label span {display: inline-block}
  .captcha_span, .signupForm .captcha_span,
  .hide-480, .optionsRibbon ul.hide-480 {display: none}
  .optionsRight.optionsRibbon_multi_ul ul.hide-480 + ul {margin-left: 0}
  .optionsRibbon li.hide-480 {display: block}
  .optionsRibbon li.hide-480 > a {display: none}
  li.hide-480 + li:not(.fixForBorder480) {border-left: 0}

  .indie .price_block {width: 100%; margin-bottom: 15px}
  table.plansComparisonHeader tr th:not(:first-child) h3 {line-height: 14px}

  .catalog_boxes:not(.narrow_headers) > a .header h2,
  .catalog_boxes:not(.narrow_headers) > div .header h2 {height: auto}
}
@media screen and (min-width: 480px) {
  /* ====== Catalog Blocks ====== */
  .catalog_categories > a, .catalog_categories > div, .catalog_boxes > div {
    width: calc((100% / 2) - (15px / 2));
    margin: 0 15px 14px 0
  }
  .catalog_categories > a:nth-child(2n+2), .catalog_categories > div:nth-child(2n+2), .catalog_boxes > div:nth-child(2n+2) {margin-right: 0}

  .catalog_negative_margin_wrap {width: 100%}
  .lesson_boxes, .user_catalog_tiles, .dashboard_widget_grid, .dashboard_draggable_tiles {margin-right: -15px}
  .catalog_boxes.lesson_boxes > *,
  .catalog_boxes.user_catalog_tiles > div,
  .catalog_boxes.dashboard_draggable_tiles > *,
  .catalog_boxes.dashboard_widget_grid > * {width: calc((100% / 2) - 15px); margin-right: 15px !important}

  .small_mobile_only{display:none !important}
}
@media screen and (max-width: 559px) {
  .videos .twoThirds .embed-holder, .videos .twoThirds .sideText {width: 100%;}
  .videos .twoThirds .sideText {margin-top: 20px;}

  table.plansComparisonHeader tr th:not(:first-child) h3 {font-size: 12px !important}
  table.plansComparisonHeader tr th:nth-child(1) h3 {font-size: 15px}
  table.plansComparisonBody tr td {font-size: 14px}
  table.plansComparisonBody tr td span:not(.break-word) {font-size: 11px; display: block}
  table.plansComparisonHeader.neo tr th:not(:first-child), table.plansComparisonBody.neo tr td:not(:first-child) {width: 20%}

  #contentWrap .maintenanceHolder {text-align: center}
  #contentWrap .maintenanceHolder span br {display: none}

  .checkout_columns .checkout-row p, .checkout_column .checkout-row p {width: 100%}
  .checkout-row .accepted_cards_selectable > * {padding-bottom: 4px}
  .floating_text {clear: both; font-size: 14px; margin: -17px 0 10px !important; width: 100%}
  .floating_text a.options_btn.inverted {background: transparent !important; border: none; padding: 0; margin-right: 2px !important; margin-left: 2px !important}

  .payment_table {margin-top: 11px}
  .payment_table button {margin-top: 20px}
  .payment_table strong {display: block}
}
@media screen and (min-width: 560px) {
  #fullscreen_msg_holder .header > * {font-size: 19px}
  .fourohfour {max-width: 680px}
  .fourohfour p {margin: 50px 20px 10px 0}
  .fourohfour p br {display: block}
  #contentWrap .fourohfour p, .fourohfour p, #contentWrap .maintenanceHolder p {font-size: 17px}
  .fourohfour p, .fourohfour .optionsRibbon, .fourohfour .magnifier, .fourohfour > img, #contentWrap .maintenanceHolder p {float: left}
  .fourohfour .magnifier, .fourohfour > img {float: right}
  .fourohfour .optionsRibbon {width: auto; clear: left;}
  .edu2 .fourohfour  {min-height: 264px; position: relative}
  .edu2 .fourohfour > img {margin-top: 0; position: absolute; top: 60px; width: 220px}
  #wrapper.maintenance .maintenanceHolder > img {float: right; width: 210px; margin-top: 0}

  .user_boxes > * {width: calc(33.3% - 15px + (15px / 3))}
  .user_boxes > *:nth-child(2n+2) {margin-right: 15px}
  .user_boxes > *:nth-child(3n+3) {margin-right: 0}

  .checkout_columns .checkout-row p, .checkout_column .checkout-row p {width: 50%}
  .checkout_columns .checkout-row .full-width, .checkout_column .checkout-row .full-width {width: 100%}
  .checkout_column .checkout-row textarea {width: 100% !important}

  .payment_table {display: flex; display: -ms-flexbox; margin-top: 11px; align-items: center}
  .payment_table strong {order: 2}
  .payment_table button {order: 1; -ms-flex-order: -1; margin-top: 0}
}
@media screen and (max-width: 600px) {
  .catalog_item .reviews .reviewImg {width: 75px; text-align: left}
}
@media screen and (max-width: 639px) {
  table.plansComparisonHeader {margin-top: 25px}
  table.plansComparisonHeader tr th:not(:first-child) {padding: 6px}
  table.plansComparisonHeader tr:not(:first-child), .neo .comparison .switch_labels {display: none !important}
  table.plansComparisonHeader tr th h3 strong {display: none}
  table.plansComparisonBody tr th {font-size: 16px; padding: 13px 4px}
  table.plansComparisonBody td {font-size: 15px}
  table.plansComparisonBody tr td:not(:first-child) {padding: 6px 1px}
}
@media screen and (min-width: 740px) {
  .catalog_student > div, .catalog_boxes > div, .resources_boxes a {width: calc(33.3% - 15px + (15px / 3))}
  .catalog_student > div:nth-child(2n+2),
  .catalog_boxes > div:nth-child(2n+2),
  .resources_boxes a:nth-child(2n+2) {margin-right: 15px}
  .catalog_student > div:nth-child(3n+3),
  .catalog_boxes > div:nth-child(3n+3),
  .resources_boxes a:nth-child(3n+3) {margin-right: 0}

  .catalog_boxes.user_catalog_tiles > div {width: calc(33.3% - 15px)}/*fix IE & Edge rounding*/

  .catalog_boxes.catalog_student.dashboard_draggable_tiles > * {width: calc(33.3% - 15px)}

  .hasRightColumn .portal_catalog_tiles > div {width: calc(33.3% - 15px + 5px); margin-right: 15px}/*fix IE & Edge rounding*/
  .hasRightColumn .portal_catalog_tiles > div:nth-child(3n+3) {margin-right: 0}
}
@media screen and (max-width: 767px) {
  header nav {display: none}

  .contentBlock {margin-bottom: 20px; width: 100%; float: none}
  .contentBlock.mt35:not(.floatR) {margin-top: 30px}
  .contentBlock.mt35.floatR {margin-top: 0}
  .contentBlock img {width: 70px}
  .contentBlock .sideText {line-height: 22px; font-size: 16px; padding-left: 20px}
  a.contentBlock, #wrapper.contact div.contentBlock {padding: 10px 15px}
  a ~ p.contentBlock img {margin: 0 5px 0 10px}
  a.contentBlock .sideText h3, a.contentBlock .sideText h3.m0 {font-size: 20px}
  a.contentBlock .sideText h3.m0 {line-height: 24px}
  p.contentBlock .sideText {padding-left: 20px}

  .videos .twoThirds .sideText {padding: 0}

  .catalog_negative_margin_wrap {overflow: hidden}/*prevent horizontal scrollbar*/

  .hide-768 {display: none}
  .optionsRibbon li.hide-768 {display: block}
  .optionsRibbon li.hide-768 > a {display: none}
  li.hide-768 + li {border-left: 0}
  .forum-post-offset {margin-left: 0 !important}

  .brandedApps > div {display: block; margin: 20px auto 10px; padding: 0; width: auto; text-align: center; white-space: normal}
  .fullColumn .brandedApps a, .brandedApps div > div a {float: none; clear: none; margin: 2px 2px 0 !important; display: inline-block}
  .brandedApps div > div a:not(:last-child) {margin: 2px 2px 0 !important}
  .brandedApps div > div {padding: 0; display: block}
  .brandedApps div > div:last-child {padding: 10px 0 0}

  table.plansComparisonHeader h3, table.plansComparisonHeader span {font-size: 17px}
  table.plansComparisonHeader th span {font-size: 30px}
  table.plansComparisonHeader th span span {margin-right: 2px}
  table.plansComparisonHeader tr th:not(:first-child) {vertical-align: middle; padding: 6px 4px}
  table.plansComparisonHeader tr th:not(:first-child) h3 {font-size: 18px}
  table.plansComparisonHeader .break-word, table.plansComparisonBody .break-word {word-break: break-word; hyphens: auto}

  .tablet_desktop_only{display: none !important}
}
@media screen and (min-width: 768px) {
  .catalog_boxes > a {width: calc(33.3% - 15px + (15px / 3))}
  .catalog_boxes > a:nth-child(2n+2) {margin-right: 15px}
  .catalog_boxes > a:nth-child(3n+3) {margin-right: 0}

  .catalog_boxes.lesson_boxes > *,
  .dashboard_widget_grid > * {width: calc((100% / 2) - 15px)}

  .studentTips {min-height: 6px}
  .fourohfour .optionsRibbon {margin-top: 25px}
  .fourohfour .magnifier {width: 254px}
  .edu2 .fourohfour {min-height: 324px}
  .edu2 .fourohfour > img {top: 40px; width: 307px}
  #wrapper.maintenance footer {padding-top: 40px}
}
@media screen and (max-width: 979px) {
  input {
    margin-right: 0;
  }
  #facebox select {
    margin-left: 0 !important
  }
  table.calendar td, table.calendar-events td div > span {
    font-size: 16px;
  }
  table.all-day td a, table.calendar td div.wrapCalendar a, table.calendar-events div a {
    font-size: 14px;
  }
  table.calendar-events td a span {
    font-size: 14px !important;
  }

  header nav, #leftColumn > img {
    display: none;
  }
  .mm-menu:not(.mm-opened) {display: none !important}

  /* ====== Calendar ====== */
  .grey_background table.calendar td {background-color: transparent}
  #calendar2 > .calendar:not(.all-day) {
    border-top: 1px solid #e2e0e0;
    padding-top: 11px;
  }
  .calendarDisplay {
    margin: 3px 0 10px;
    display: inline-block;
  }
  .calendarDisplay select {
    max-width: 130px;
  }
  table.calendar table, table.calendar thead, table.calendar tbody, table.calendar th, table.calendar td, table.calendar tr {
    display: block;
  }
  table.calendar thead tr {
    position: absolute;
    top: -9999px; left: -9999px;
  }
  table.calendar td {
    height: auto;
    border: 0;
    margin: 0 -5px 3px;
  }
  table.calendar td.emptyDate, table.calendar th, table.time-divider {
    display: none;
  }
  table.calendar td div.wrapCalendar, table.all-day td, table.calendar td a.all-day-item, table.calendar-events tr td, table.calendar-events td a, table.calendar-events td div > span {
    margin-top: 5px;
  }
  table.calendar-events td div > span {
    display: inline-block;
    margin-bottom:5px;
  }
  table.calendar-events, table.calendar-events td, table.calendar-events div a {
    position: static;
  }
  table.calendar-events, table.calendar-events td, table.calendar-events div {
    width: 100%;
  }
  div.calendars-holder {
    padding-top: 5px;
  }
  table.calendar-events td, table.all-day td {
    margin-left: 0; margin-right: 0;
  }
  table.all-day td.all-day-heading {
    padding: 5px;
    background: #eaeaea;
  }
  table.calendar-events div a {
    width: auto !important;
    height: auto !important;
    padding: 3px 4px;
    margin-top: 1px;
  }

  .calendar_heading_desktop, .news_heading_desktop, .catalog_heading_desktop {display:none}
  .calendar_heading_mobile{display:block; position:relative; height:48px;}
  body.portal .calendar_heading_mobile {margin-top: -10px;}
  .calendar_heading_mobile .optionsRight, body.portal .calendar_heading_mobile .optionsRight{float:right; left:0; top:0; clear:none; margin-right:0;}
  .calendar_heading_mobile .optionsRight#view_options{position:absolute; z-index:1; width:100%; text-align:center; margin: 0;}
  .calendar_heading_mobile .optionsRight#view_options > ul {display: inline-block; float: none; margin: 3px 0 3px -3px;}
  h1#current_month{clear:both; margin-bottom:10px}
  body.portal .news_heading_mobile, .catalog_heading_mobile{display:block}
  body.portal .news_heading_mobile .optionsRight{float:right;left:0;top:-2px;clear:none}
  body.portal .news_heading_mobile .optionsCenter, .catalog_heading_mobile .optionsCenter, .calendar_heading_mobile .optionsCenter{position:absolute; width:auto;left:50%;margin-left:-25px;}
  body.portal .news_heading_mobile h1{display:block !important;clear: both;margin-bottom:10px}
  .catalog_heading_mobile .arrowUp, .news_heading_mobile .arrowUp{margin-top:0}
  body.portal .news_heading_mobile .optionsRight, .calendar_heading_mobile .optionsRight{margin-bottom: 0; z-index:2;}
  body.portal .news_heading_mobile .optionsLeft, .calendar_heading_mobile .optionsLeft{top:0; z-index:2;}
  .calendar_heading_mobile h1{margin-top: 40px}
  .calendar_event{margin-top:30px}

  .mb0mobile{margin-bottom:0 !important}
  .desktop_only{display:none !important}
  .captcha_span{margin-left:17%}

  .optionsRight.optionsRibbon_multi_ul {margin-left: 0}

  table.plansComparisonHeader th a {font-size: 12px}
  table.plansComparisonHeader th h3 > strong {font-size: 12px}
  table.plansComparisonHeader.neo tr:nth-child(1) th h3 {font-size: 20px}
  table.plansComparisonHeader.neo tr:nth-child(2) th * {font-size: 14px}

  .calendar-events .mobile_only a {font-size: 14px;padding: 3px 4px;margin-top: 1px;}
  .calendar-events .mobile_only a span {display:inline}
}
@media screen and (max-width: 767px) {
  .catalog_class #leftColumn {display: block; padding: 0}
  .catalog_class #leftColumn .center {display: block}
  .catalog_class #contentHeader {height: 64px; display: block}

  #centreColumn > .block:last-of-type {margin-bottom: 20px}

  #checkout_summary {padding: 20px}
  .floating_text {margin-top: 14px}
}
@media screen and (min-width: 768px) {
  .user header .mobileBar, .user .mobileLogo h1, nav#leftColumn ol .mobile_only {display: none}
  .user #contentWrap, .user .rightColumn, .user footer {overflow: hidden; position: relative}
  #contentWrap.hasLeftColumn:before, nav#leftColumn ol.thinMainNav.hoverMainNav {background: #E8E8E8; border-width: 0 1px 0 0}
  html:not([dir=rtl]) nav#leftColumn ol.thinMainNav.hoverMainNav {box-shadow: 2px 0 7px rgba(0,0,0,.08)}
  [dir=rtl] nav#leftColumn ol.thinMainNav.hoverMainNav {box-shadow: -2px 0 7px rgba(0,0,0,.08)}
  #contentWrap.hasLeftColumn:before {
    content: '';
    position: absolute;
    height: 100%; width: 94px;
    left: 0;
    z-index: 7
  }
  #leftColumn {
    overflow: visible;
    position: relative;
    float: left;
    height: 100%; width: 95px;
    border-width: 0 1px 0 0;
    padding: 15px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9;
  }
  .portal #contentWrap.hasLeftColumn:before {position: static}
  .portal #leftColumn {width: auto}

  .user #centreColumn {overflow: hidden; padding: 15px}

  .catalog_class .navTrigger + .site_name + div.sectionTitle,
  .catalog_class .linkHome + .site_name + div.sectionTitle,
  .catalog_class.keep_tablet_nav .navTrigger + .site_name + div.sectionTitle,
  .catalog_class.keep_tablet_nav .linkHome + .site_name + div.sectionTitle,
  .catalog_class #centreColumn {margin-left: 300px}
  .catalog_class .navTrigger {width: 0}
  .catalog_class .closeNavTrigger, .catalog_class.keep_tablet_nav .closeNavTrigger {padding-left: 15px}
  .catalog_class #leftColumn {padding: 15px 14px; position: fixed !important}
  .catalog_class #leftColumn, html:not([dir=rtl]) .catalog_class #contentWrap:before, [dir=rtl] .catalog_class #contentWrap:after {width: 300px !important; border: 0 !important}
  .catalog_class footer {z-index: 9}

  .catalog_class #leftColumn #checkout_summary a.button {margin-bottom: 20px}
  #checkout_summary {padding: 0 2px}
  .floating_text {margin: -1px 0 10px}
}
@media screen and (min-width: 840px) {
  .catalog_boxes.lesson_boxes > * {width: calc(33.3% - 15px)}/*fix IE & Edge rounding*/
}
@media screen and (max-width: 979px) {
  .user.catalog_class header .sectionTitle {display: none}

  .rightColumn.mobile_only {padding-top: 0; margin-bottom: 14px}

  /* Overwrite widths on resizeable columns on the grading pages */
  #centreColumn .resizable_columns .rightColumn,
  #centreColumn .resizable_columns .rightColumn .grading_fixed_col {width: 100% !important}
}
@media screen and (min-width: 980px) {
  header .mobileBar, .mobileLogo h1 {display: none !important}

  #wrapper {max-width: 1550px; min-width: 1110px}
  .site_full_width #wrapper {max-width: 2050px}
  .max_user_content_width {max-width: 1400px; margin: auto}
  .max_user_content_width.not_centered {margin: 0}
  .portal #wrapper {min-width: 980px}

  .fourohfour {max-width: 830px}
  .fourohfour .magnifier {width: 294px}
  #contentWrap .fourohfour p, #contentWrap .maintenanceHolder p {font-size: 22px}
  #contentWrap #centreColumn .fourohfour p {font-size: 18px}

  #wrapper.maintenance .maintenanceHolder {max-width: 650px}
  #wrapper.maintenance .maintenanceHolder > img {width: 280px}

  .user.catalog_class #leftColumn h1 {display: none}

  /* ===================
  3 Column Layout
  ===================*/
  #contentWrap, .rightColumn, footer {
    overflow: hidden;
    position: relative;
  }
  .portal #contentWrap.hasLeftColumn:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 203px;  /* minus 1px border */
    left: 0;
  }
  .portal #leftColumn {
    overflow: visible;
    position: relative;
    float: left;
    height: 100%;
    width: 204px;
    border-width: 0 1px 0 0;
    padding: 15px 14px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 9;
  }
  .rightColumn {margin-left: 15px; flex: 0 0 249px; z-index: 1; /* Chrome link vibrance */}
  .rightColumn.rightColumn_2col {display: flex; justify-content: space-between; width: 512px; flex: 0 0 512px}
  .rightColumn.rightColumn_2col .widgets {width: 249px}

  #centreColumn {overflow: hidden; padding: 15px}
  #centreColumn .leftColumn {overflow: hidden}
  body[class*="_news"] #centreColumn .leftColumn,
  body[class*="ctr_visitor_catalog"] #centreColumn .leftColumn,
  body[class*="ctr_user_catalog"] #centreColumn .leftColumn {overflow: visible}

  #centreColumn .leftColumn.calendarLeftColumn {padding-right: 0}

  .hasRightColumn #mainContent {display: flex}
  .hasRightColumn #centreColumn, #centreColumn .hasRightColumn {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; box-sizing: border-box; /* box-sizing for IE10 */}
  .hasRightColumn #centreColumn > *:not(.leftColumn):not(.rightColumn):not(script):not(#fixedSectionHeader) {display: flex; flex: 0 0 100%; margin-right: 1px}/* margin for user profile pages when margin-left 15x is on .rightcolumn *//* affects .flex_full_width */
  .hasRightColumn .leftColumn {flex: 1; align-self: flex-start}
  .leftColumn.block,
  .leftColumn.block ~ .rightColumn {margin-top: 15px}

  /* Resizeable columns on grading pages */
  #centreColumn .resizable_columns {flex-wrap: nowrap}
  #centreColumn .resizable_columns .leftColumn {flex: 1 1 auto; max-width: calc(100% - 350px); min-width: 20%}
  #centreColumn .resizable_columns .rightColumn {flex: 0 0 auto; margin: 0 -15px 0 15px !important; min-width: 350px; width: 350px; max-width: 80%; overflow: visible; /* Safari visibility */; z-index: 2; /* changes nicescroll zindex */}
  #centreColumn .resizable_columns .rightColumn .grading_fixed_col {position: fixed; overflow-y: auto !important; overflow-x: hidden; width: inherit; padding: 15px 15px 15px 17px; box-sizing: border-box; opacity: 0; transition: opacity .3s ease}
  #centreColumn .resizable_columns .column_resize_handle {width: 15px; cursor: ew-resize; position: fixed; z-index: 8; transition: bottom .3s ease; opacity: 0}
  #centreColumn .resizable_columns .column_resize_handle:before {content: ''; position: absolute; display: block; border: 1px solid #949494; border-width: 0 1px; top: 50%; left: 0; margin-top: -10px; width: 5px; height: 20px}
  #centreColumn .resizable_columns .column_resize_handle:after {content: ''; position: absolute; display: block; background-color: #dcdcdc; top: 0; bottom: 15px; left: 3px; width: 1px}
  #centreColumn #fixedSectionHeader ~ .resizable_columns .column_resize_handle:after {top: 15px}
  #centreColumn .resizable_columns .column_resize_handle:hover:before,
  #centreColumn .resizable_columns .column_resize_handle.dragging:before {opacity: .7; width: 3px; left: 1px}
  #centreColumn .resizable_columns .grading_fixed_col .rubric_block {overflow: hidden}
  #centreColumn .resizable_columns .grading_fixed_col .rubric_block form {margin: 0}

  /* ====== Left Column Content =====*/
  nav#leftColumn > .imgCrop {padding-bottom: 100%; width: 95px}

  /* ====== Calendar ====== */
  table.monthly td .day_heading > *:first-child, table.calendar-events td .day_heading {position: absolute; top: -9999px; left: -9999px}
  .calendarDisplay {float: right}
  a.class_event, a.personal_event, a.school_event, a.group_event, a.general_event {padding: 2px}
  div.calendars-holder {overflow-y: scroll}

  .mobile_only{display:none !important}
  .calendar_heading_desktop{display:block}
  .calendar_heading_mobile{display:none}
  .news_heading_desktop{display:block}
  .news_heading_mobile{display:none}
  .catalog_heading_desktop{display:block}
  .catalog_heading_mobile{display:none}

  .calendar_heading_desktop .optionsRibbon, .calendar_heading_mobile .optionsRibbon {margin-right: 11px; margin-left: 0}
  .calendar_heading_desktop ~ .calendar_heading_desktop .optionsRibbon:first-child, .calendar_heading_mobile .optionsRibbon:first-child {margin-right: 0}
  .calendar_heading_desktop .optionsRibbon.optionsLeft, .calendar_heading_mobile .optionsRibbon.optionsLeft {margin-right: 7px}
  .portal .calendar_heading_desktop .optionsRight, .portal .calendar_heading_mobile .optionsRight {margin-right: 0}

  .captcha_span{margin-left:100px}

  /* ====== Catalog Blocks ====== */
  .catalog_courses > div, .catalog_categories > a, .catalog_categories > div {width: calc(33.3% - 15px + (15px / 3))}
  .catalog_courses > div:nth-child(4n+4), .catalog_categories > a:nth-child(4n+4), .catalog_categories > div:nth-child(4n+4) {margin-right: 15px}
  .catalog_courses > div:nth-child(3n+3), .catalog_categories > a:nth-child(3n+3), .catalog_categories > div:nth-child(3n+3) {margin-right: 0}

  .catalog_courses.catalog_groups > div {width: calc((100% / 2) - 15px + (15px / 3))}
  .catalog_courses.catalog_groups > div:nth-child(3n+3) {margin-right: 15px}
  .catalog_courses.catalog_groups > div:nth-child(2n+2) {margin-right: 0}

  .user_boxes:not(.award_boxes) > * {width: calc((100% / 4) - 15px + (15px / 4))}
  .user_boxes:not(.award_boxes) > *:nth-child(3n+3) {margin-right: 15px}
  .user_boxes:not(.award_boxes) > *:nth-child(4n+4) {margin-right: 0}

  .user_boxes.award_boxes > * {width: calc((100% / 2) - 15px + (15px / 2)); margin-right: 15px}
  .user_boxes.award_boxes > *:nth-child(2n+2) {margin-right: 0}

  .hasRightColumn .catalog_boxes.lesson_boxes > *,
  .hasRightColumn .catalog_boxes.user_catalog_tiles > div {width: calc((100% / 2) - 15px)}

  #contentWrap:not(.hasRightColumn) .portal_catalog_tiles > div {width: calc((100% / 4) - 15px + (15px / 4)); margin-right: 15px}
  #contentWrap:not(.hasRightColumn) .portal_catalog_tiles > div:nth-child(4n+4) {margin-right: 0}
  .hasRightColumn .portal_catalog_tiles > div:nth-child(4n+4) {margin-right: 15px}
}
@media screen and (min-width: 980px) and (max-width: 1024px) {
  .catalog_student .footer.flex_footer .label {overflow: hidden; text-overflow: ellipsis}
}
@media screen and (min-width: 980px) and (max-width: 1189px) {
  .hide-ipad {display: none}
  .optionsRibbon li.hide-ipad {display: block}
  .optionsRibbon li.hide-ipad > a {display: none}
}
@media screen and (max-width: 1024px) {
  .materialStyle img {max-width: 100%; height: auto !important}
}
@media screen and (min-width: 1025px) {
  html:not([dir=rtl]) body:not(.keep_tablet_nav) #contentWrap.hasLeftColumn:before {width: 203px}
  body:not(.keep_tablet_nav) #leftColumn {width: 204px; padding-left: 14px; padding-right: 14px}

  .catalog_courses.catalog_teacher > div, .catalog_student > div {width: calc((100% / 2) - (15px / 2))}
  .catalog_courses.catalog_teacher > div:nth-child(3n+3), .catalog_student > div:nth-child(3n+3) {margin-right: 15px}
  .catalog_courses.catalog_teacher > div:nth-child(2n+2), .catalog_student > div:nth-child(2n+2) {margin-right: 0}

  .newSite .fullColumn div.twoThirds.guides {max-width: 1400px}
  /*.newSite.matrix .fullColumn div.twoThirds.guides #section1 {max-width: 1340px} 4 per row */

  .catalog_boxes.catalog_student.dashboard_draggable_tiles > * {width: calc((100% / 2) - 15px)}

  body:not(.keep_tablet_nav) nav#leftColumn > .imgCrop {padding-bottom: 87%; width: 204px}
}
@media screen and (min-width: 1170px) {
  .pricing_matrix:not(.indie) .price_block {max-width: 142px}
}
@media screen and (min-width: 1190px) {
  .catalog_student > div {width: calc(33.3% - 15px + (15px / 3))}
  .catalog_student > div:nth-child(2n+2),
  .catalog_student > div:nth-child(4n+4) {margin-right: 15px}
  .catalog_student > div:nth-child(3n+3) {margin-right: 0}

  .catalog_courses > div {width: calc(33.3% - 15px + (15px / 3))}
  .catalog_courses > div:nth-child(4n+4) {margin-right: 15px}
  .catalog_courses > div:nth-child(3n+3) {margin-right: 0}

  .catalog_courses.catalog_teacher > div {width: calc(33.3% - 15px + (15px / 3))}
  .catalog_courses.catalog_teacher > div:nth-child(2n+2) {margin-right: 15px}
  .catalog_courses.catalog_teacher > div:nth-child(3n+3) {margin-right: 0}

  .user_boxes.award_boxes > * {width: calc(33.3% - 15px + (15px / 3))}
  .user_boxes.award_boxes > *:nth-child(2n+2) {margin-right: 15px}
  .user_boxes.award_boxes > *:nth-child(3n+3) {margin-right: 0}

  .resources_boxes a, .people_boxes > div {width: calc((100% / 4) - 15px + (15px / 4))}
  .resources_boxes a:nth-child(3n+3), .people_boxes > div:nth-child(3n+3) {margin-right: 15px}
  .resources_boxes a:nth-child(4n+4), .people_boxes > div:nth-child(4n+4) {margin-right: 0}

  .catalog_courses.catalog_groups > div {width: calc(33.3% - 15px + (15px / 3))}
  .catalog_courses.catalog_groups > div:nth-child(2n+2) {margin-right: 15px}
  .catalog_courses.catalog_groups > div:nth-child(3n+3) {margin-right: 0}

  .catalog_courses > div, .catalog_categories > a, .catalog_categories > div {width: calc((100% / 4) - 15px + (15px / 4))}
  .catalog_courses > div:nth-child(3n+3), .catalog_categories > a:nth-child(3n+3), .catalog_categories > div:nth-child(3n+3) {margin-right: 15px}
  .catalog_courses:not(.catalog_teacher) > div:nth-child(4n+4), .catalog_categories > a:nth-child(4n+4), .catalog_categories > div:nth-child(4n+4) {margin-right: 0}

  .hasRightColumn .portal_catalog_tiles > div {width: calc((100% / 4) - 15px + (15px / 4))}
  .hasRightColumn .portal_catalog_tiles > div:nth-child(3n+3) {margin-right: 15px}
  .hasRightColumn .portal_catalog_tiles > div:nth-child(4n+4) {margin-right: 0}

  .catalog_boxes.catalog_student.dashboard_draggable_tiles > * {width: calc(33.3% - 15px)}

  .hasRightColumn .catalog_boxes.lesson_boxes > *,
  .hasRightColumn .catalog_boxes.user_catalog_tiles > div {width: calc(33.3% - 15px)}/*fix IE & Edge rounding*/
  #contentWrap:not(.hasRightColumn) .catalog_boxes.lesson_boxes > *,
  #contentWrap:not(.hasRightColumn) .catalog_boxes.user_catalog_tiles > div {width: calc((100% / 4) - 15px)}

  #contentWrap #centreColumn .fourohfour p {font-size: 22px}

  .checkout_column .checkout-row p, .checkout_columns .checkout-row p {width: 25%}
}
@media screen and (min-width: 1280px) {
  #contentWrap:not(.hasRightColumn) .portal_catalog_tiles > div {width: calc((100% / 5) - 15px + (15px / 5))}
  #contentWrap:not(.hasRightColumn) .portal_catalog_tiles > div:nth-child(4n+4) {margin-right: 15px}
  #contentWrap:not(.hasRightColumn) .portal_catalog_tiles > div:nth-child(5n+5) {margin-right: 0}
  .hasRightColumn .portal_catalog_tiles > div {width: calc((100% / 4) - 15px + (15px / 4)); margin-right: 15px}
  .hasRightColumn .portal_catalog_tiles > div:nth-child(4n+4) {margin-right: 0}

  .centre_widget_edit .catalog_negative_margin_wrap .scrollable {padding-right: 15px}
  .catalog_boxes.dashboard_widget_grid > * {width: calc(33.3% - 15px)}

  .user_boxes:not(.award_boxes) > * {width: calc((100% / 5) - 15px + (15px / 5))}
  .user_boxes:not(.award_boxes) > *:nth-child(4n+4) {margin-right: 15px}
  .user_boxes:not(.award_boxes) > *:nth-child(5n+5) {margin-right: 0}

  .user_boxes.award_boxes > * {width: calc((100% / 4) - 15px + (15px / 4))}
  .user_boxes.award_boxes > *:nth-child(3n+3) {margin-right: 15px}
  .user_boxes.award_boxes > *:nth-child(4n+4) {margin-right: 0}
}
@media screen and (max-width: 1299px) {
  .checkout_columns > div:nth-child(2) {border-width: 1px 0 0 0; margin-top: 20px; padding-top: 10px}
}
@media screen and (min-width: 1300px) {
  .checkout_columns, .checkout_columns > div:not(:only-child) + div:not(.alert_block) {display: flex; flex-flow: row wrap}
  .checkout_columns > div:not(:only-child) {width: 50%; box-sizing: border-box; padding-right: 7px}
  .checkout_columns > div:nth-child(2) {border-width: 0 0 0 1px; margin: 12px 0 7px; padding: 20px; text-align: center}
  .checkout_columns > div:nth-child(2) > * {margin: auto !important}
  .checkout_columns .checkout-row p {width: 50%}
  .checkout_columns .checkout-row .field-container {width: calc(50% - 2px)}
}
@media screen and (min-width: 1340px) {
  .pricing_matrix:not(.indie) .price_block {max-width: 163px}
}
@media screen and (min-width: 1440px) {
  .catalog_student > div, .catalog_courses.catalog_teacher > div {width: calc((100% / 4) - 15px + (15px / 4))}
  .catalog_student > div:nth-child(3n+3), .catalog_courses.catalog_teacher > div:nth-child(3n+3) {margin-right: 15px}
  .catalog_student > div:nth-child(4n+4), .catalog_courses.catalog_teacher > div:nth-child(4n+4) {margin-right: 0}

  .hasRightColumn .catalog_boxes.lesson_boxes > *,
  .hasRightColumn .catalog_boxes.user_catalog_tiles > div {width: calc((100% / 4) - 15px)}
  .catalog_boxes.catalog_student.dashboard_draggable_tiles > * {width: calc((100% / 4) - 15px)}
}
@media screen and (min-width: 1560px) {
  body:not(.edu2):not(.site_full_width) #wrapper {border: 1px solid #c8c8c8; border-width: 0 1px}

  .hasRightColumn .portal_catalog_tiles > div {width: calc((100% / 5) - 15px + (15px / 5))}
  .hasRightColumn .portal_catalog_tiles > div:nth-child(4n+4) {margin-right: 15px}
  .hasRightColumn .portal_catalog_tiles > div:nth-child(5n+5) {margin-right: 0}
}
@media screen and (min-width: 1565px) {
  .catalog_boxes.dashboard_widget_grid > * {width: calc((100% / 4) - 15px)}

  .user_boxes.award_boxes > * {width: calc((100% / 5) - (15px - (15px / 5)))}
  .user_boxes.award_boxes > *:nth-child(4n+4) {margin-right: 15px}
  .user_boxes.award_boxes > *:nth-child(5n+5) {margin-right: 0}
}
@media screen and (min-width: 1600px) {
  .catalog_boxes.lesson_boxes > *:not(.ui-sortable-helper),
  .catalog_boxes.user_catalog_tiles > div:not(.ui-sortable-helper) {width: calc((100% / 5) - 15px) !important}

  .catalog_groups > div, .app_boxes > div, .resources_boxes > a, .people_boxes > div, .chat_boxes > * {width: calc((100% / 5) - 15px + (15px / 5)) !important; margin-right: 15px !important}
  .catalog_groups > div:nth-child(5n+5), .app_boxes > div:nth-child(5n+5), .resources_boxes > a:nth-child(5n+5), .people_boxes > div:nth-child(5n+5), .chat_boxes > *:nth-child(5n+5) {margin-right: 0 !important}
}

/*IOS7 height fix*/
@media (orientation:landscape) {
  html.ipad.ios7 > body {
    position: fixed;
    bottom: 0;
    width:100%;
    height: 672px !important;
  }
}

#facebox .loginPopup.facebox-content{overflow:visible}
@media screen and (min-width: 460px) {
  #facebox .loginPopup.facebox-content {width:320px !important; padding: 40px 40px 0 !important}
  #facebox .smlSignupPopup.facebox-content, #facebox .searchPortalPopup.facebox-content {width: 340px !important; padding-bottom: 35px !important}
  #facebox .frmLogin .loginOptions a{margin-top:1px !important}
}
@media only screen and (max-width: 459px) {
  #facebox .loginPopup.facebox-content {padding-left: 20px; padding-right: 20px}
  #facebox .loginPopup.facebox-content .difSignIn {margin-left: -20px; margin-right: -20px}
}
#facebox .frmLogin label{margin:0}
#facebox .frmLogin label[for="userid"], #facebox .frmLogin label[for="password"],
#loginForm .frmLogin label[for="userid"], #loginForm .frmLogin label[for="password"] {width: 100%; margin: 0; text-align: left; color: #707070}
#loginForm ::placeholder {color: #707070}
#facebox .loginPopup.facebox-content #alerts .alert_block, #facebox .loginPopup.facebox-content #alerts + .alert_block {margin: -10px 0 10px}
#facebox .loginPopup.facebox-content #alerts + .error {border: 0}

.bjqs .imgContainer{overflow:hidden}

.forgotPassForm input[type="text"] {width:100% !important}
.forgotPassForm button {float:right}

body.chromeMacCatalogFix #facebox .facebox-content {
  -webkit-text-stroke: 0.3px;
}

#portal-login-form {max-height: 180px}
#facebox .frmLogin .sso_btn, #loginForm .sso_btn,
#facebox .frmLogin #admin_btn, #loginForm #admin_btn {margin-top: 11px}
#facebox .frmLogin .sso_btn + .sso_btn, #loginForm .sso_btn + .sso_btn {margin-top: -10px !important}
#facebox .frmLogin .sso_btn i, #loginForm .sso_btn i,
#facebox .frmLogin #admin_btn i, #loginForm #admin_btn i {margin-top: -4px}
#google_apps_btn {background: #c33b2b}
#office365_sso_btn {background: #ED4627}
#clever_btn {background: #27548c}
#saml2_btn {background: #57286f}
#illini_btn {background: #93ce4a}
#login_form .separator, #sso .separator {border-bottom: 1px solid #e6e6e6; text-align: center; color: #aaa; height: 11px; margin-bottom: 8px; margin-top: -12px}
#login_form .separator span, #sso .separator span {display: inline-block; background: #fff; padding: 0 5px}
#facebox .frmLogin .separator + button, #loginForm .frmLogin .separator + button {margin-top: 19px !important}
@media screen and (min-width: 460px) {
  #facebox .frmLogin .sso_btn + .difSignIn, #loginForm .sso_btn + .difSignIn {margin-top: 30px}
  #facebox .frmLogin .sso_btn:last-of-type, #loginForm .sso_btn:last-child {margin-bottom: 45px !important}
  #facebox .frmLogin .separator ~ .sso_btn:last-of-type, #loginForm .separator ~ .sso_btn:last-child {margin-bottom: 29px !important}
}

/* Checkout styling */
#leftColumn #checkout_summary h2 {color: #fff; font-size: 21px; margin: 4px 0 20px}
#leftColumn #checkout_summary hr {border-color: #fff}

.checkout_order {font-size: 13px}
.checkout_order tbody + tbody:before {content: ''; display: block; height: 20px}
.checkout_order td {border: none; padding: 1px 0; vertical-align: top}
.checkout_order tr:not(:nth-child(1)) td {padding: 0 0 6px}
.checkout_order tr:nth-child(1) td:nth-child(2) {padding-bottom: 8px}
.checkout_order td img {margin: 3px 10px 0 0}
.checkout_order td a {font-size: 15px; line-height: 1.3; display: inline-block}
.checkout_order td a i {margin-right: -5px}
.checkout_order .checkout_quantity {vertical-align: top; margin-top: -3px; -webkit-user-select: none}
.checkout_order .checkout_quantity a {border: 1px solid #fff; padding: 6px 3px; border-radius: 50%; position: relative; width: 15px; height: 15px; box-sizing: border-box}
.checkout_order .checkout_quantity a span {background: #fff; width: 7px; height: 1px; display: block}
.checkout_order .checkout_quantity a span + span {transform: rotate(-90deg); margin-top: -1px}
.checkout_order .checkout_quantity a:hover {background-color: #fff}
.checkout_order .checkout_quantity a:hover span {background-color: #5e5f5f}
.checkout_order .checkout_quantity div {display: inline-block; margin: 0 2px}

.checkout_totals {margin-top: 15px}
.checkout_totals td {border: none; padding: 3px 0; vertical-align: top}
.checkout_totals tr.separator_row td {padding: 15px 0 5px}
.checkout_totals tr.total_row td {font-size: 21px; line-height: 1.2; padding-top: 0}

#centreColumn > .block.checkout_columns, #centreColumn > .block.checkout_column, #centreColumn #account_block > .block.checkout_column {clear: both; padding-left: 7px; padding-right: 7px}
.checkout_columns > div form {width: 100%}
#contentWrap .checkout_columns form {margin: 0}, #contentWrap .checkout_column form {margin: 0}
.checkout_columns > div:nth-child(2) {border-color: #d4d1d1; border-style: solid}
.checkout_columns form input[type="checkbox"] + label:before,
.checkout_column form input[type="checkbox"] + label:before,
#portal_signup_form input[type="checkbox"] + label:before {left: 0}
.checkout_columns .checkout-row:before, .checkout_columns .checkout-row:after,
.checkout_column .checkout-row:before, .checkout_column .checkout-row:after {content: ""; display: table}
.checkout_columns .checkout-row:after, .checkout_column .checkout-row:after {clear: both}
.checkout_columns fieldset, .checkout_column fieldset {padding: 10px 7px 0; width: 100%}
.checkout_columns fieldset legend, .checkout_column fieldset legend {margin-bottom: 8px; width: 100%}
.checkout_columns fieldset label img, .checkout_column fieldset label img {vertical-align: middle; margin: 0 5px}
.checkout_columns fieldset + p, .checkout_column fieldset + p {margin-top: 0}
.checkout_flex_heading {display: flex; flex-flow: wrap; justify-content: space-between; align-items: center; margin: 13px 0 15px}
.checkout_flex_heading > * {white-space: nowrap; margin-top: 5px !important; margin-bottom: 5px}
.checkout_flex_heading > * .options_btn {margin-top: 0; margin-bottom: 0}
.payment_method_btns {margin: 7px}
.payment_method_btns form:first-of-type button {margin-top: 5px}

.checkout_columns .checkout-row, .checkout_column .checkout-row {display: block; width: 100%; clear: both; overflow: visible}
.checkout_column > p, .checkout_columns > p, .checkout_columns > div > p, .checkout_column form > p, .checkout_columns form > p, .checkout_columns .checkout-row > p, .checkout_column .checkout-row > p, .checkout_columns .checkout-row > .field-container, .checkout_column .checkout-row > .field-container, .checkout_column .checkout-row > div#user_state > p,  .checkout_column .checkout-row > div#user_other_state > p,  .checkout_column .checkout-row .wysiwyg ~ div {padding-left: 7px; padding-right: 7px; box-sizing: border-box}
.checkout_column .checkout-row .wysiwyg { clear: both}
.checkout-row select {margin-right: 0}
.checkout_columns form > button:not(.inverted), .checkout_column form > button:not(.inverted) {margin-right: 7px; margin-left: 7px}
.checkout_columns input[type="radio"]  + label, .checkout_column input[type="radio"]  + label {margin-top: 4px; margin-bottom: 6px}
.checkout_columns .checkbox_no_heading, .checkout_column .checkbox_no_heading {display: flex; align-items: flex-end; min-height: 49px}
.checkout_columns .checkout-row select#credit_card_month, .checkout_columns .checkout-row select#credit_card_year, .checkout_columns .checkout-row select#x_month, .checkout_columns .checkout-row select#x_year, .checkout_columns .checkout-row select#ccexpmon, .checkout_columns .checkout-row select#ccexpyr, .checkout_columns .checkout-row select#card-month, .checkout_columns .checkout-row select#card-year,
.checkout_column .checkout-row select#credit_card_month, .checkout_column .checkout-row select#credit_card_year, .checkout_column .checkout-row select#x_month, .checkout_column .checkout-row select#x_year, .checkout_column .checkout-row select#card-month, .checkout_column .checkout-row select#card-year {width: 46%; margin: 0; float: left}
.checkout_columns .checkout-row .expiration_divider, .checkout_column .checkout-row .expiration_divider  {display: inline-block; width: 8%; float: left; margin-top: 4px; text-align: center}
.checkout_columns .checkout-row .width_third, .checkout_column .checkout-row .width_third {width: 32%; margin-right: 2%; float: left; box-sizing: border-box}
.checkout_columns .checkout-row .width_third:last-child, .checkout_column .checkout-row .width_third:last-child {margin: 0}
.checkout_columns #user_country, .checkout_column #user_country, .checkout_column .checkout-row #x_country {width: 181px; margin-right: 14px}
.checkout_columns .checkout-row p > input:not(.field_set_width), .checkout_columns .checkout-row p > select:not(.field_set_width),
.checkout_column .checkout-row p > input:not(.field_set_width), .checkout_column .checkout-row p > select:not(.field_set_width) {width: 100% !important}
.checkout_columns input#credit_card_security_code, .checkout_column input#credit_card_security_code,
.checkout_columns input#ccvv, .checkout_column input#ccvv,
.checkout_columns input#x_card_code, .checkout_column input#x_card_code,
.checkout_columns input#cvc, .checkout_column input#cvc,
.checkout_columns input#card-cvc, .checkout_column input#card-cvc {width: 90px !important}
.checkout_columns .checkout-row p > label:not(.field_set_width), .checkout_column .checkout-row p > label:not(.field_set_width), .checkout_columns .checkout-row .field-container > label:not(.field_set_width), .checkout_column .checkout-row .field-container > label:not(.field_set_width) {width: 100%}
.checkout_column .checkout-row p > input[type="checkbox"][id*=user_custom] ~ label:not(.field_set_width) {margin-top: 5px}
.checkout_column .checkout-row .wysiwyg {float: none; margin-bottom: 0; width: auto; clear: both; display: block; padding-top: 10px}
.checkout_columns .checkout-row .accepted_cards, .checkout_column .checkout-row .accepted_cards {display: flex}
.checkout_columns .checkout-row .accepted_cards span, .checkout_column .checkout-row .accepted_cards span {flex-grow: 0; flex-shrink: 1; flex-basis: 55px; height: 33px}
.checkout_columns .checkout-row .accepted_cards span img, .checkout_column .checkout-row .accepted_cards span img {width: 100%; max-width: 55px; height: auto; padding: 1px 5px 0 0; box-sizing: border-box}
.checkout-row .accepted_cards_selectable {display: inline-block}
.checkout-row .accepted_cards_selectable > * {width: auto !important; padding-top: 2px}
.checkout-row .accepted_cards_selectable input[type="radio"] + label:before {top: -1px}
.checkout-row .accepted_cards_selectable label img {vertical-align: bottom}
.checkout-row .break-row {clear: both}

.portal .checkout_columns #credit_card_form .checkout-row, .portal .checkout_column #credit_card_form .checkout-row {padding: 0 !important}

/******************************************/
/* OLD checkout styling */
/******************************************/
.checkout-row {display: block; width: 100%; clear: both; overflow: hidden}
.checkout-row p {display: inline-block; float: left} /* keep */
.checkout-row input, .checkout-row select {width: auto}
.checkout-row.long-line input, .checkout-row.long-line select {width: 433px}
.checkout-row .auth-net-cards {margin-left: 16px}
.checkout-row .auth-net-cards img {margin-right: 12px}

.portal #contentBody .payment_options p label {min-width: 145px; display: table-cell}
.portal #contentBody .payment_options p img {margin: 4px; vertical-align: middle}
.portal #contentBody .payment_options p > span {display: table-cell}
.portal #credit_card_form .checkout-row {padding-left: 3px}
.portal #credit_card_form .credit_card_month {width: 60px}
.portal #credit_card_form .credit_card_year {width: 110px}
.portal #credit_card_form #user_country {width: 181px; margin-right: 14px}
.portal #credit_card_form #credit_card_month {margin: 0}

@media screen and (max-width: 490px) {
  .checkout-row.long-line input, .checkout-row.long-line select {width: auto}
  .checkout_flex_heading > * {white-space: normal}
}
@media screen and (max-width: 979px) {
  .checkout-row input, .checkout-row select, .checkout-row textarea, .checkout-row label {margin-right: 14px}
  #centreColumn .checkout-row select + select {margin-top: 0}
}
/******************************************/
/* END - OLD checkout styling */
/******************************************/

/*Mobile app editor overlay*/
.mobileAppOverlay{display: none !important;}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
  #mainContent {display: flex; width: calc(100% - 95px) !important;overflow: hidden;}
  #contentWrap{max-width: 100vw;}
}
@media only screen and (min-width: 768px) {
  #mainContent {display: flex;}
  #mainContent > #centreColumn{flex-grow: 1;}
}

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  #mainContent {display: flex; width: calc(100% - 95px) !important;overflow: hidden;}
  #contentWrap{max-width: 100vw;}
}
#editor_save_btn{
  background-color: #048497;
  color: #fff;
  float: right;
  padding: 0 10px;
  margin: 10px 7px 10px 0;
  line-height: 28px;
}
/* ====== Cart Coupon ====== */
.coupon-code-apply {
  float: right;
  margin-bottom: 10px;
  text-align: right;
}
/* reCaptcha align */
.ctr_join_no_access_code.act_index .captcha_div{
  margin-top: 15px;
}
.ctr_contact_visitor.act_index .captcha_div {
  margin-left: 174px;
}
.ctr_visitor_class_catalog.act_contact .captcha_div{
  margin-top: 15px;
}
.signupForm .captcha_div{
  margin-left: 167px;
  margin-top: 15px;
}
.contactForm .captcha_div{
  margin-left: 170px;
  margin-top: 15px;
}
@media screen and (max-width: 768px) {
  .ctr_join_no_access_code.act_index .captcha_div {margin-top: 15px;}
  .ctr_contact_visitor.act_index .captcha_div {margin-left: 0;}
  .ctr_visitor_class_catalog.act_contact .captcha_div {margin-top: 15px;}
  .signupForm .captcha_div {margin-left: 0; margin-top: 15px;}
  .contactForm .captcha_div {margin-left:0; margin-top: 15px;}
  .contactForm .captcha_div > div > div, .signupForm .captcha_div > div > div {width: 280px !important;}

}
@media screen and (max-width: 500px) {
  html, body{ height: 100%; }
  body:not(.mobileLogin).loginPage > .language {width: 160px;margin: 6px auto;padding: 6px;display: block;}
  body:not(.mobileLogin).loginPage #loginWrap #loginForm {margin-top: 10px;}
}
.remove-input {
  position: relative;
  left: -20px;
  top: -10px;
  cursor: pointer;
}

.pro-tip-container {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 25px;
  /* background: grey; */
  vertical-align: bottom;
}

.pro-tip-container .pro-tip {
  right: 8px;
  top: 6px;
}

.pro-tip {
  top: 0;
  right: 45px;
  width: 0;
  height: 0;
  border-top: 15px solid #00b532 !important;
  border-left: 15px solid transparent !important;
}

.special-grading-tip {
  top: 90px;
  right: 45px;
  width: 0;
  height: 0;
  border-bottom: 15px solid #909090 !important;
  border-left: 15px solid transparent !important;
}

.senders-placeholder span {
    padding: 5px 7px 5px 7px;
    margin: 3px 0 3px 5px;
    position: relative;
    line-height: 15px;
    font-size: 14px;
    cursor: default;
    background: #6161A0;
    color: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
}

.senders-placeholder {
    height: 31px;
    background: white;
    border: #909090 solid 1px;
    display: none;
    width: calc(100% - 222px);
    position: relative;
}
.senders-placeholder.active{
    display: inline-block;
}
.senders-placeholder.active + div{
    display: none;
}

.senders-placeholder span.more {
    background: #949292;
    position: absolute;
    right: 3px;
    top: 0;
}

.messageSendPopup #popupContent, .replyPopup #popupContent {
  height: 150px;
  overflow: auto;
  border: solid 1px rgba(128, 128, 128, 0.53);
  padding: 0 5px !important;
}

/* edit grade mappings */

#grade-scale-map .delete-row {
  position: absolute;
  right: 6px;
  top: 12px;
  cursor: pointer;
}

#grade-scale-map td {
  position: relative;
}
#grade-scale-map tr:last-child .delete-row{
  display: none;
}
#grade-scale-map .delete-row:hover:after {
  left: -20px;
}

input#grading_scale__grade {
  margin-right: 26px;
}

/* Coupon details popup */
.coupon-container {max-width: 100vw; width: 100%; position: relative; padding: 5px; height: 187px; margin: 0 -8px}
.coupon {position: relative; height: 100%; border: dashed 3px #a0a0a0; background: #efefef; margin-left: 6px}
.coupon-header {text-align: center; font-weight: 600; font-size: 32px; padding-top: 42px}
.coupon-code {text-align: center; font-size: 20px; padding: 0 0; font-weight: 600}
.coupon-print {position: absolute; bottom: 25px; left: 0; right: 0; text-align: center; color: grey; padding: 0 10px}

/* sorting icons */
.sort-icon th .asc, .sort-icon th .desc, .sort-icon th .sort-by {color: #222; padding-right: 18px; position: relative; display: inline-flex}
.sort-icon th .asc:after, .sort-icon th .desc:after, .sort-by:before, .sort-by:after {width: 0; height: 0; content: ""; position: absolute; right: 0; top: calc(50% - 2px)}
.sort-icon th .asc:after, .sort-icon th .desc:after {border-left: 5px solid transparent; border-right: 5px solid transparent}
.sort-icon th .asc:after {border-top: 5px solid #333}
.sort-icon th .desc:after {border-bottom: 5px solid #333}
.sort-by:before, .sort-by:after {border: 5px solid transparent; top: calc(50% - 1px)}
.sort-by:before {border-bottom-color: #333; margin-top: -10px}
.sort-by:after {border-top-color: #333; margin-top: 1px}

.field-container .StripeElement {
  background: white;
  border: solid 1px #909090;
  padding: 5.9px 5px;
}
.field-container {
  display: inline-block;
  margin: 10px 0;
  line-height: 1.4;
  overflow: hidden;
}
.field-container.large {
  width: 100% !important
}
.field-container.large > div {
  margin: 0 !important
}
ul.allow-overflow {overflow: visible !important}
.load-indicator:after {content: ''; border: 5px solid #dfdfdf; border-top: 5px solid #6f6f6f; height: 25px; width: 25px; border-radius: 50%; margin: 0 auto; position: absolute; top: 40%; z-index: 9; right: 0; left: 0; animation: spin 1.5s ease-in-out infinite}
.load-indicator {position: relative; height: 100%; min-height: 250px;}
.load-indicator:after {top: 400px}
.load-indicator > *:not(.tabnav):not(.inline_tabs_options):not(.pageHeading) {opacity: .5}
.profile_header + .leftColumn.load-indicator:after {top: 200px}
#question .materialStyle {overflow: visible}
.non-filter-calendar a.general_event{background: grey;}
/* catalog calendar START */
.ctr_catalog_calendar #contentWrap:not(.hasRightColumn) #centreColumn .leftColumn {padding: 0}

a.calendar_button {background: #fff; border-radius: 2px; padding: 6px; font-size: 15px; margin-left: 14px; color: #222}
.month-year {float: left; font-size: 25px; padding-right: 22px; color: #353535}
.catalog-calendar a.general_event {background: grey; min-height: 22px; padding: 2px 4px 4px 4px !important}
.tooltip.catalog_boxes > div {width: 100%; margin: 0}
.tooltip.catalog_boxes > .arrow {border: none}

.floater {position: fixed; max-width: 344px; height: auto; max-height: 100vh; width: 100%; box-shadow: 0 0 2px 0 rgba(0,0,0,0.3); left: 0; right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%); z-index: 11; border: solid 20px #fff; border-top: solid 30px #fff; background: #11a6c3}
.floater .class_name {font-size: 18px !important; margin-bottom: 10px}
.floater .header {position: relative;bottom: 0; background: #11a6c3; color: #fff !important; padding: 10px; width: 100%; margin-top: 200px}
.floater .class_name {color: #fff !important; overflow: hidden; text-overflow: ellipsis; max-height: 48px; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
.floater .highlight, .floater .label.box {background: rgba(0,0,0,0.1); text-align: center; border-radius: 2px; font-size: 15px; margin: 4px 0; color: #fff; padding: 2px 7px; display: inline-block}
.floater *, .floater {box-sizing: border-box !important}
.floater .imgCrop {top: 0px; position: absolute; left: 0; width: 100%; height: 200px; padding-bottom: 0; cursor: pointer}
.floater .close {position: absolute; top: -25px; right: -17px; width: 20px; height: 20px; z-index: 15; cursor: pointer}
div#fog {position: fixed; background: rgba(0,0,0,0.09); width: 100vw; height: 100vh; top: 0; left: 0; z-index: 10}
.floater * {color: #fff}
.floater .lightText {font-size: 15px; padding: 4px 0}
.floater .description {overflow: hidden; text-overflow: ellipsis; max-height: 70px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px}
.floater i.star:after, .floater i.starOutline:after, .floater i.starHalf:after {left: -40px}
.floater .ratingStatic {padding: 0}
.floater .footer {position: relative; bottom: 0; left: 0;/* height: 30px; */font-size: 15px; width: 100%; color: #fff !important; padding: 0 10px}
.floater .footer .teacher {display: flex}
.floater .footer .teacher:hover {opacity: .7}
.floater .footer .teacher img {border-radius: 50%; border: 1px solid #fff; background-color: #fff; width: 20px; height: 20px; margin-right: 5px}
.floater .footer .teacher span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.floater .tile_img_label {background-color: #fff; font-size: 14px; color: #222; padding: 2px 6px; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,.2)}
.floater .lightText.class-times > span:first-child {display: block; border-bottom: solid 1px rgba(4,4,4,0.2); margin-bottom: 4px}
.floater span.day-of-week {background: rgba(0,0,0,0.2); padding: 2px 4px; border-radius: 3px; padding-top: 0; margin-right: 4px}
.floater .lightText.class-times {line-height: 24px; background: #fff; padding: 4px 8px 6px; color: #222 !important; border-radius: 4px; margin-top: 5px}
.floater .lightText.class-times * {color: #222 !important}

.floater .footer .teacher {height: 30px}
.floater .footer .teacher:empty {height: 0}
a.general_event {padding: 2px 5px !important; box-sizing: border-box}
body:not(.portal):not(.ctr_student_calendar) .catalog-calendar table.all-day tr td:not(.all-day-heading):hover,
body:not(.portal):not(.ctr_student_calendar) .catalog-calendar table.time-divider tr td div:hover {background: none !important; cursor: default}

.catalog-calendar {position: relative; padding-top: 0 !important}
.catalog-calendar .event_tile_key, .catalog-calendar .key span {height: 11px; width: 11px; position: relative; float: right; overflow: visible; border-radius: 50%; border: solid 1px white; margin: 2px 2px 0; padding: 0}
.catalog-calendar span.enrolled {background: #42A0A5}
.catalog-calendar span.waitlisted {background: #ffc107}
.catalog-calendar span.full {background: #e91e1e}
.catalog-calendar span.available {background: #8BC34A}
.catalog-calendar span.completed {background: #DB617C}
.catalog-calendar span.deactivated {background: #A05EA5}
.catalog-calendar .key {display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 2px 0 4px; font-size: 14px; z-index: -1}
.catalog-calendar .key span {float: none; display: inline-block; margin-left: 10px; margin-right: 4px; vertical-align: top}
/* catalog calendar END */

/*mobile menu*/
#user-menu ol {
  color: #484848;
  top: 0!important
}
#user-menu ol>li:first-child.subMenu.mm-label {
  margin-top: 32px
}
#user-menu ol>li.subMenu a {
  white-space: normal
}
#user-menu>ol {
  padding: 13px 0 10px 12px
}
#user-menu li.userQuicklinks.mm-label {
  margin-top: 9px
}
#user-menu li.userQuicklinks.mm-label~li.userQuicklinks.mm-label {
  margin-top: 0
}
#user-menu .searchLinks, #user-menu ol>li.mm-label, #user-menu>.mm-list.mm-panel {
  box-shadow: inset -7px 0 7px -4px rgba(0, 0, 0, .1)
}
#user-menu .searchLinks {
  width: 100%
}
#user-menu .mm-list>li.mm-selected>a:not(.mm-subopen), #user-menu.mm-vertical .mm-list li.mm-selected>a.mm-subopen, #user-menu.mm-vertical .mm-list li.mm-opened>a.mm-subopen {
  border-color: #c8c8c8
}
#user-menu .mm-list>li.mm-selected a.mm-subopen,
#user-menu .mm-list>li.mm-opened a.mm-subopen {box-shadow: 0 0 5px 2px rgba(0, 0, 0, .05); margin-right: 0}
#user-menu .mm-list a:not(.mm-subopen) i {
  position: relative;
  z-index: 2
}
#user-menu .mm-list a:not(.mm-subopen) i:after {
  overflow: auto;
  left: 0
}
#user-menu .mm-list>li>a.sub_links {
  position: absolute;
  right: 0;
  top: 8px;
  line-height: 27px!important;
  background: #ebebeb;
  z-index: 2
}
#user-menu .mm-list>li.mm-selected>a.sub_links {
  line-height: 27px!important;
  background: #fff;
  border: 0;
  box-shadow: none
}
#user-menu .mm-list>li>a.sub_links:nth-child(2) {
  right: 9px
}
#user-menu .mm-list>li>a.sub_links:nth-child(3) {
  right: 35px
}
#user-menu .mm-list>li>a.sub_links:nth-child(4) {
  right: 61px
}
#user-menu .mm-list>li>a.sub_links:nth-child(5) {
  right: 87px
}
#user-menu .mm-list>li>a i {
  margin-top: -5px
}
#user-menu .mm-list>li.mm-selected>a i:after {
  left: -20px
}
#user-menu .mm-list>li>a img {
  width: 15px;
  height: 15px;
  position: relative;
  top: 1px;
  margin-right: 9px
}
#user-menu .mm-list a.floatL, #user-menu .mm-list a.floatR, #user-menu .mm-list ul .floatL, #user-menu .mm-list ul .floatR {
  float: none
}
#user-menu.mm-vertical .mm-list li.mm-label.dropDownHeading {
  margin: -1px 0 0 -10px;
  border: 1px solid #CECECE
}
#user-menu.mm-vertical .mm-list li.mm-label.dropDownHeading a {
  position: absolute;
  top: 0;
  right: 15px;
  line-height: 29px!important
}
#user-menu a .newAlert {
  margin: -9px 6px 0 0!important;
}
.mobileSearch {
  position: fixed;
  top: 0;
  width: inherit;
  z-index: 900;
  display: block!important;
  overflow: hidden
}
.searchInput, .searchLinks {
  padding: 0 11px;
  box-sizing: border-box;
  -moz-box-sizing: border-box
}
.searchInput {
  display: block;
  padding-right: 35px;
}
.searchInput input {
  width: 100%;
  padding: 3px 5px;
  border-radius: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border: 0;
  font-size: 15px
}
.searchLinks a {
  color: #fff;
  padding: 5px
}
.quickLinks .linksHolder .dropDown i, .searchInput, .searchLinks #btn-cancel, .searchLinks #btn-left, .searchLinks #btn-root, nav.local_menu_visible>ol>li:not(.subMenu):not(.userQuicklinks), nav.local_menu_visible>ol>li>a:not(.mm-subopen)>i {
  display: none
}
nav.local_menu_visible .searchLinks #btn-root, nav.local_menu_visible>ol>li.userQuicklinks a i {
  display: inline-block
}
.quickLinks #btn-search {
  margin-left: 10px;
}
.quickLinks #btn-cancel {
  position: absolute;
  right: 15px;
  top: 55px;
}
#user-menu * {box-sizing: border-box;}
body.nav-open {overflow: hidden;}
#user-menu {width: 100%;left: 0;top: 0;height: calc(100% - 44px);display: block;transform: translateX(-100%);background: rgb(250, 250, 250);position: fixed;padding-top: 44px;padding-top:calc(env(safe-area-inset-top) + 44px);transition: transform .3s ease;z-index: 3;will-change: transform;}
.nav-open:not(.android) #wrapper{transform: translateX(100%);}
.nav-open #user-menu {transform: translateX(0%);}
#user-menu ol > li > ul > li {padding: 0px 0px !important;border: solid 1px rgb(220, 220, 220);margin: 4px 0px !important;border-radius: 3px;position: relative}
#user-menu ol > li > ul {padding: 0px !important;margin: 0px;display: none;}
#user-menu ol {position: relative;width: 100%;height: 100%;overflow-y: auto;left: 0;padding: 20px 0px !important;}
#user-menu ol > li > ul > li .image {width: 43px;height: 43px;display: inline-block;background-size: cover;background-position: center;position: relative;top: 0px;left: 0px;vertical-align: bottom;margin-right: 8px;margin-left: -39px;background-color: rgb(240, 240, 240);}
#user-menu ol > li > ul > li > a {padding: 0px 0 0 39px !important;height: 43px;line-height: 43px !important;display: block;width: 100%;}
#user-menu ol > li > ul > li > a[class*='float'] {float: none}
#user-menu ol > li > ul > li i {position: absolute !important;left: 13px;top: 10.5px;line-height: 40px;}
#user-menu ol > li.mm-opened > a {border: none !important;background: white !important;display: block;position: sticky !important;top:0;z-index:1;width: calc(100% + 22px) !important;padding: 0px 22px !important;height: 50px !important;line-height: 50px !important;margin: 0px -11px !important;margin-bottom: 10px !important;box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.08) !important;border-radius: 0;overflow: visible;}
#user-menu ol > li {padding: 0 11px !important;transition: all .3s ease;transform-origin-y: bottom}
#user-menu ol >li.mm-opened {transform: translateY(44px);transform: translateY(calc(env(safe-area-inset-top) + 44px));background: white;padding: 0px 11px !important;padding-bottom: 48px !important;position: fixed;top: 0;left: 0;z-index: 9;width: 100%;height: calc(100% - 44px);height: calc(100% - calc(env(safe-area-inset-top) + 44px));overflow-y: auto;box-shadow: inset -7px 0 7px -4px rgba(0, 0, 0, .1);}
#user-menu ol > li.mm-opened > a > i {top: 15px;right: 0;margin: 0 !important;}
#user-menu ol>li:first-child {margin-top: 0 !important;}
#user-menu ol > li > ul > li i.arrowRight {left: auto;right: 7px;}
#user-menu ol > li > ul > li:not(.mm-label) > a {background: white;}
/*#user-menu ol > li.mm-opened > a > span > i {top: 10px;}*/
#user-menu .quickLinks {padding-right: 0;}
#user-menu ol > li > ul > li.mm-selected a {border: none !important;background: rgb(239, 239, 239);}
#user-menu ol > li > a {line-height: 41px;height: 43px;padding: 0px 0px !important;border: solid 1px rgb(220, 220, 220);margin: 4px 0px !important;border-radius: 3px;overflow: hidden;position: relative;display: block;padding: 0 13px !important;background: white;}
#user-menu li.Label {height: 28px;line-height: 27px;padding: 0 6px !important;background: rgb(232, 232, 232);margin-top: 17px !important;px;}
#user-menu ol > li > ul > li.Label a {position: absolute;left: 0;top: 0;width: 100%;text-align: right;background: transparent;padding: 0 6px !important;height: 100%;line-height: 26px !important;}
#user-menu a {color: rgb(36, 36, 36);}
.mm-opened > ul {display: block !important;}
#user-menu ol > li.mm-opened > a:before {content: '';position: absolute;left: 0;top: -100px;height: 100px;display: block;width: 100%;background: rgb(255, 255, 255);z-index: 9;}
#user-menu ol > li.Label {margin: 0 11px;border-radius: 3px;border: solid 1px rgb(220, 220, 220);}
#user-menu .header.mobileSearch {top: 0px;top: env(safe-area-inset-top);left: 0;height: 44px;line-height: 44px;padding: 0 20px;}
#user-menu .header.mobileSearch .exit {position: absolute;right: 0;top: 50%;width: 30px;zoom: 1.1;display: flex;transform: translateY(-50%);align-items: center}
#wrapper {transition: transform .3s ease;}
#user-menu ol a i.arrowRight {position: absolute;right: 10px !important;top: 10px;}
#user-menu ol > li.mm-opened a i.arrowRight:after {top: -20px;}
#user-menu .sub-menu {display: block;overflow: hidden;position: absolute;height: 100%;width: 100%;background: rgb(250, 250, 250);left: -100%;transform: translateX(0);transition: transform .3s ease;z-index: 10;top: 0;padding-top: 44px;padding-top: calc(env(safe-area-inset-top) + 44px);}
#user-menu .sub-menu.active {transform: translateX(100%);}
#user-menu .sub-menu.active ~ ol {display: none;}
#user-menu .header > a:not(.exit) {margin-right: 26px;}
.header.mobileSearch a:hover, .header.mobileSearch a:focus, .mobileBar a:focus, .mobileBar a:hover{outline: none;}
.header.mobileSearch a:hover i:after {left: -40px;}
#user-menu ol > li > ul > li > a.floatL, #user-menu ol > li > ul > li > a.floatR {padding: 0px 0 0 39px !important;}
#user-menu ol > li > a > span > i, #user-menu ol > li.userQuicklinks > a > i {top: -2px}
#user-menu ol > li:first-child hr {display: none;}
#user-menu ol > li > a > span:first-child {margin-right: 5px;}
.help-popup .facebox-content.help_centre{padding:10px;width:100%;overflow-x:hidden;overflow-y:auto;position:relative;display:block;box-sizing:border-box;height:calc(100% - 49px)}
.help-popup .header h4{padding:10px}
.inlineList.helpList li {padding: 5px 3px;}
.facebox-content.help_centre img{max-width:100%;height:auto}
.help-popup .facebox-content i {overflow: hidden;}
.help-popup .header{box-shadow:0 0 3px 0 rgba(0,0,0,0.28)}
.help-popup form button {vertical-align: baseline;}
@keyframes slidback {
  from {transform: translateX(100%)}
  to {transform: translateX(0%)}
}
#user-menu.open, #user-menu.opened {display: block !important;}
body.nav-open #user-menu.opened ~ #wrapper{display:none;}
body:not(.nav-open):not(.android) #user-menu.opened ~ #wrapper{animation: slidback .3s;}

@keyframes up-down {
  0%{transform:translateY(100%)}
  100%{transform:translateY(0%)}
}
.native-popup{position:fixed;top:0;left:0;background:#fff;height:100%;width:100%;z-index:99999}
.native-popup.add-popup{animation:up-down .3s}
.native-popup.remove-popup{animation:up-down .3s reverse}
.native-popup .content{height:calc(100% - 40px) !important;height: calc(100% - calc(env(safe-area-inset-top) + 40px)) !important;width:100%;position:absolute;left:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch}
.native-popup .content > iframe{width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible}
.native-popup .nav{height:40px !important;height: calc(env(safe-area-inset-top) + 40px) !important;z-index:9;position:absolute;top:0;left:0;width:100%}
.native-popup .close{position:absolute;bottom:0;right:0;padding:10px}
.native-popup.add-popup .content:empty:after{content:'';border:5px solid #dfdfdf;border-top:5px solid #94959a;height:20px;width:20px;border-radius:50%;margin:0 auto;position:absolute;top:calc(50% - 20px);z-index:9;right:0;left:0;animation:spin 1.5s ease-in-out infinite}
.native-popup .title{position:absolute;bottom:0;padding:10px;overflow:hidden;white-space:nowrap;width:calc(100% - 40px);text-overflow:ellipsis;color:#fff;font-weight:600}
.native-popup .search-bar{position:absolute;top:0;left:0;height:44px;width:100%;width:100%;background:#e8e8e8;box-shadow:0 1px 1px 0 rgba(0,0,0,0.13);overflow:hidden;z-index:1}
.native-popup .search-bar > input{width:calc(100% - 44px);height:100%;border:0;border-radius:0!important;background:rgba(255,255,255,0);box-shadow:none!important;outline:none;padding:0 15px;margin:0}
.native-popup .search-bar > *[excalibur-click]{width:44px;height:100%;position:absolute;right:0;top:0;background:#f7f7f7;text-align:center;line-height:43px}
.native-popup .search-results{position:absolute;height:calc(100% - 44px);width:100%;top:44px;left:0;overflow:auto;padding:10px}
.native-popup .content.loading:before{ background: white; width: 100%; height: 100%; top: 0; left: 0; content: '';z-index: 5;position: absolute;}
.native-popup.add-popup .content:empty:after, .native-popup .content.loading:after{content:'';border:5px solid #dfdfdf;border-top:5px solid #94959a;height:20px;width:20px;border-radius:50%;margin:0 auto;position:absolute;top:calc(50% - 20px);z-index:9;right:0;left:0;animation:spin 1.5s ease-in-out infinite}
.native-popup .pageHeading {box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); display: block;margin: 15px -10px;padding: 2px 10px; /* z-index: 1; */ background: white;}
.native-popup .pageHeading:first-child {box-shadow: none;border: none;z-index: 1;position: relative;margin-top: 0;}
.native-popup .pageHeading+.pageHeading{margin-top: -15px;font-size: 10px !important;}
.native-popup .pageHeading+.pageHeading h1 {font-size: 19px;}
.native-popup .block {padding: 8px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);}
.sectionLink.inverted * {margin: 0px;}
.tinymce-mobile-toolstrip {top: 0px !important;top: env(safe-area-inset-top) !important;position: fixed !important;box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24);}