:root {
  --body-bg-color: #cacaca;
  --bg-color: #fff;/*same for grey theme*/
  --content-bg-color: #fff;/*darker for grey theme*/
  --block-bg-color: #fff;/*same for grey theme*/
  --th-bg-color: #efefef;
  --td-row-bg-color1: #d2d2d2;
  --td-row-bg-color2: #c0efaf;
  --td-row-bg-color3: #dcf5d2;
  --editor-bg-color: #f8f8f8;
  --invert-bg-color: #f5f5f5;/*white for grey theme*/
  --highlight-bg-color: #f5f5f5;/*same for grey theme*/
  --meta-bg-color: #eaeaea;
  --icon-bg-color: #5e5f5f;
  --opacity-8-bg-color: rgba(0,0,0,.08);
  --opacity-6-bg-color: rgba(0,0,0,.06);
  --yellow-bg-color: hsl(52deg 100% 86%);
  --red-bg-color: hsl(357deg 94% 75%);
  --green-bg-color: hsl(96deg 37% 86%);
  --blue-bg-color: hsl(200deg 100% 86%);

  --input-bg-color: #fcfcfc;
  --form-elements-img: url('/images/icons/form-elements-white.png');

  --highlight-border-color: #c4c4c4;
  --main-border-color: #c8c8c8;
  --user-table-border-color: #e2e0e0;
  --table-border-color: #e2e0e0;
  --divider-border-color: #f2f0f0;
  --form-highlight: #2b94e1;
  --form-highlight-border: #0f63a1;

  --main-text-color: #222;
  --dark-grey-text-color: #707070;
  --light-grey-text-color: #a8a8a8;
  --lighter-grey-text-color: #b0b0b0;
  --red-text-color: #DB0000;
  --ai-button-bg-visited:#e6e6e6;

  --cypher-green: #22D3A5;
  --cypher-purple: #5955E2;
  --cypher-blue: #18ADE8;
}
.grey_background {
  --content-bg-color: #f5f5f5;
  --th-bg-color: #e0e2e4;
  --editor-bg-color: #fff;
  --invert-bg-color: #fff;
  --user-table-border-color: #cacaca;
}
[data-theme="dark"], [data-theme="dark"] .grey_background {
  --body-bg-color: #000;
  --bg-color: hsl(228deg 7% 10%);
  --content-bg-color: hsl(228deg 7% 10%);
  --block-bg-color: hsl(228deg 7% 17%);
  --th-bg-color: hsl(228deg 7% 25%);
  --td-row-bg-color1: hsl(228deg 7% 33%);
  --td-row-bg-color2: hsl(104deg 20% 37%);
  --td-row-bg-color3: hsl(104deg 20% 27%);
  --editor-bg-color: hsl(228deg 7% 17%);
  --invert-bg-color: hsl(228deg 7% 17%);
  --highlight-bg-color: hsl(228deg 7% 20%);
  --meta-bg-color: hsl(228deg 7% 25%);
  --icon-bg-color: #fff;
  --opacity-8-bg-color: rgba(255,255,255,.15);
  --opacity-6-bg-color: rgba(255,255,255,.09);
  --yellow-bg-color: #000;
  --red-bg-color: hsl(357deg 94% 60%);
  --green-bg-color: hsl(96deg 37% 20%);
  --blue-bg-color: hsl(200deg 100% 16%);

  --input-bg-color: hsl(228deg 7% 5%);
  --form-elements-img: url('/images/icons/form-elements-white.png');

  --highlight-border-color: hsl(228deg 7% 45%);
  --main-border-color: hsl(228deg 7% 30%);
  --user-table-border-color: hsl(228deg 7% 25%);
  --table-border-color: hsl(228deg 7% 30%);
  --divider-border-color: hsl(228deg 7% 23%);
  --form-highlight-border: hsl(205deg 100% 81%);

  --main-text-color: #fff;
  --dark-grey-text-color: #aaa;
  --light-grey-text-color: #bbb;
  --lighter-grey-text-color: #ccc;
  --red-text-color: #ff9c75;
  --ai-button-bg-visited:#27272a;
}

/* ===================
   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; fill: var(--icon-bg-color)}
.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}

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.copilot:after { top: -6480px;}
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.calendar_view_periods: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.calendar_view_agenda:after {top: -3960px}
i.arrows_update: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}
i.tag_add:after {top: -6080px}
i.tag_remove:after {top: -6100px}
i.message_queue:after {top: -6120px}
i.gotomeeting:after {top: -6140px}
i.gototraining:after {top: -6160px}
i.gotowebinar:after {top: -6180px}
i.webex:after {top: -6200px}
i.zoom:after {top: -6220px}
i.to_do_add:after {top: -6240px}
i.hotspots:after {top: -6260px}
i.rating_scale:after {top: -6280px}
i.rating_matrix:after {top: -6300px}
i.credly:after {top: -6320px}
i.karix:after {top: -6340px}
i.ms_access:after {top: -6360px}
i.coursera:after {top: -6380px}
i.udemy:after {top: -6400px}
i.linkedin:after {top: -6420px}
i.go1:after {top: -6440px}
i.edx:after {top: -6460px}

#socialBlocks a {padding: 10px; border: none}

footer #socialBlocks {
  float: none !important;
}

#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}*/

/*------------------- Selection -------------------*/
::-moz-selection, ::selection {background: #666; color: #fff; text-shadow: none}

/*------------------- IE not supported -------------------*/
@media all and (-ms-high-contrast:none) {/*IE11 only*/
  #browser_msg {display: block !important; position: fixed; z-index: 1000; width: 100%; height: 100%; background: rgba(255,255,255,.8)}
  #browser_msg > * {width: 550px; max-width: 80%; position: absolute; top: 100px; left: 50%; transform: translate(-50%, 0); background: #fff; padding: 15px 20px 10px; box-shadow: 0 0 10px rgba(0,0,0,.2); margin: 5px; border-radius: 8px; text-align: center}
  #browser_msg h1, #browser_msg p {color: #222}
  .browser_msg_icons {margin:  15px 0 20px}
  .browser_msg_icons a {text-align: center; display: inline-block}
  .browser_msg_icons a img {width: 90px; margin: 10px}
  #browser_msg span {display: block; font-size: 15px; color: #777}
}

/*------------------- Custom Layout Helpers -------------------*/
.no-scroll {overflow: hidden}
.blur_site #wrapper {filter: blur(4px); -webkit-filter: blur(4px)}
.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}
.evo-only {display: none;}
.relative { position: relative; }
.z-5 { z-index: 5; }
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.gap-2 {
  gap: 1rem;
}
.gap-05 {
  gap: 0.25rem;
}
.align-center {
  align-items: center;
}
.mt-4 {
  margin-top: 1rem;
}
/* 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, .underline_links #user-menu > ol > li > a span {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, .underline_links #user-menu > ol > li > a {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}
i.copilot-icon:after {color: white;left: -20px;top: -6480px;}
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 * {
  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 * {
  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: 20px
}
#centreColumn h2:not(.class_name) {
  margin-top: 15px;
}

body[class*="_group_configure"] #centreColumn .leftColumn h2:first-of-type:nth-of-type(1),
body[class*="_class_configure"] #centreColumn .leftColumn h2:first-of-type:nth-of-type(1) {
  margin-top: 0;
}

input[type="submit"] {
  font-size: 19px;
}
.rightColumn h2, #centreColumn .rightColumn h2 {
  font-size: 18px
}
#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, .rightColumn, .rightColumn p {
  font-size: 15px;
}
.loginPage .native-popup .nav {
  background-color: var(--left-bar-bg);
}
.privacy-app {
  text-align: center;
  padding: 15px 0 15px 0;
}
#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)}

/* Custom tooltip */
.tooltip-custom {
  position: relative;
  display: inline-block;
}

.tooltip-custom .tooltip-text {
  visibility: hidden;
  background-color: #35363a;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  border-radius: 4px;
  padding: 10px 10px;
  max-width: 800px;
  width: max-content;

  /* Position */
  position: absolute;
  z-index: 1;
  right: 2px;
  top: 20px;
}

.tooltip-custom:hover .tooltip-text {
  visibility: visible;
}

.tooltip-text * {
  color: #fff;
  margin: 0px;
}

.tooltip-text a:hover{
  color: #fff;
  text-decoration: underline;
}

.tooltip-text img {
  max-width: 400px;
  height: auto !important;
}

/*------------------- Shared colors -------------------*/
/* Text */
ul.tabnav li a:hover, ul.tabnav li a:focus, ul.tabnav li a.selected, ul.tabnav .dropDown a, ul.tabnav li a:hover span, .options_btn {color: #222; color: var(--main-text-color)}
ul.tabnav > li > a, ul.tabnav .dropDown a:hover, ul.tabnav .dropDown a:focus, nav#leftColumn ul.tabnav a, ul.tabnav li a span, .select_session .date {color: #a8a8a8; color: var(--light-grey-text-color)}/* matching list for high contrast theme in template */
.red_text {color: #DB0000; color: var(--red-text-color)}

/* Backgrounds */
html, body {background-color: #cacaca; background-color: var(--body-bg-color)}
table th {background: #efefef; background: var(--th-bg-color)}
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: #fff; background: var(--bg-color)}
ul.tabnav.summary li a:not(.selected) span.block {background: #a9a9a9}/*used?*/
.highcharts-container .highcharts-background {fill: none}

.grey_background table th {background: #e0e2e4; background: var(--th-bg-color);/*IE11*/}
.grey_background .rightColumn table:not(.rubric) td {background-color: initial}
.grey_background td.tlEmptyCell {background-color: transparent}

/* Borders */
ul.tabnav {border: 1px solid #c7c7c7; border-color: var(--main-border-color)}
table th, table td, hr, .catalog_boxes > *, img.avatar, .user_boxes > *, .post_top_bar, .news_holder .post {border: 1px solid #e2e0e0; border: 1px solid var(--table-border-color)}
#centreColumn > .block, #centreColumn > div#account_block > div.block, .leftColumn > .block, .leftColumn.block, .rightColumn .block, .block_style {background-color: #fff; background-color: var(--block-bg-color); border: 1px solid #e2e0e0; border: 1px solid var(--table-border-color)}
.options_btn, .optionsRibbon ul, .optionsRibbon ul li, .news_form .optionsRibbon ul li {border: 1px solid #c8c8c8; border: 1px solid var(--main-border-color)}

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

/* -- Dark mode -- */
[data-theme="dark"] .show_in_dark_mode {display: block !important}
a[excalibur-click='dark_mode_toggle'] {display: none !important; line-height: 1.4 !important; padding-top: 6px !important; padding-bottom: 7px !important}
@supports ((--foo: red)) {/*supports css vars*/
  a[excalibur-click='dark_mode_toggle'] {display: block !important}
}
[data-theme="dark"] .quick_edit_box label[for*="tile_color_"], [data-theme="dark"] .quick_edit_box .tile_colors_holder {display: none}
[data-theme="dark"] .badgeOptions a.highlight {background-color: hsl(228deg 7% 20%)}
[data-theme="dark"] table.calendar_small td:not(.current):hover * {background-color: hsl(228deg 7% 40%)}
[data-theme="dark"] ul.tabnav li a:not(.selected) span.block {opacity: .6; background: #5f5f5f}
/* tiles */
[data-theme="dark"] .catalog_boxes > *[class*='tile_color_'], [data-theme="dark"] .catalog_boxes > *[style*='background-color'] {background-color: var(--tile1-bg-color) !important}
/* jconfirm popup */
[data-theme="dark"] .jconfirm .jconfirm-box {background-color: var(--bg-color); color: var(--main-text-color);}
[data-theme="dark"] .jconfirm .jconfirm-box .buttons {background-color: var(--highlight-bg-color)}
/* dropdowns */
[data-theme="dark"] .select2-container-multi .select2-choices, [data-theme="dark"] .select2-results .select2-no-results, [data-theme="dark"] .select2-results .select2-searching, [data-theme="dark"] .select2-results .select2-selection-limit, [data-theme="dark"] .select2-drop {background-color: hsl(228deg 7% 5%) !important}
[data-theme="dark"] .select2-container-multi .select2-choices .select2-search-field input.select2-active {background: var(--input-bg-color) url('/images/loading-blue.gif') no-repeat 100% !important}
[data-theme="dark"] a.multiSelect {background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%)}
/* highcharts */
[data-theme="dark"] .highcharts-container .highcharts-data-label .highcharts-text-outline[stroke="#FFFFFF"] {stroke: none}
[data-theme="dark"] .highcharts-container tspan, [data-theme="dark"]  .highcharts-container text {fill: #B5B5B5 !important}
[data-theme="dark"] .highcharts-container .highcharts-label span {color: #B5B5B5 !important}
[data-theme="dark"] .highcharts-container path[stroke="#ccd6eb"] {stroke: hsl(228deg 7% 25%)}
[data-theme="dark"] .highcharts-container path[stroke="#e6e6e6"] {stroke: hsl(228deg 7% 40%)}
[data-theme="dark"] .highcharts-container path[stroke="#f2f2f2"],
[data-theme="dark"] .highcharts-container path[stroke="#ffffff"],
[data-theme="dark"] .highcharts-container rect[stroke="#ffffff"] {stroke: hsl(228deg 7% 20%)}
[data-theme="dark"] .highcharts-container .highcharts-legend > rect {fill: hsl(228deg 7% 30%); stroke: hsl(228deg 7% 40%)}
[data-theme="dark"] .highcharts-container path[fill="#effded"] {fill: #5f9257}
[data-theme="dark"] .highcharts-container .highcharts-tooltip path[fill="rgba(247,247,247,0.85)"] {fill: hsl(228deg 7% 10%)}
/* tags */
[data-theme="dark"] .form-inline .tm-tag {background-color: #5f9257 !important}
/* webkit scrollbars */
[data-theme="dark"] *:not(body)::-webkit-scrollbar {-webkit-appearance: none; width: 7px; height: 7px}
[data-theme="dark"] *:not(body)::-webkit-scrollbar-thumb {border-radius: 6px; background-color: hsl(228deg 7% 45%) !important; border-color: hsl(228deg 7% 17%) !important}
[data-theme="dark"] *:not(body)::-webkit-scrollbar-corner {background-color: hsl(228deg 7% 10%)}
/*html[data-theme="dark"]::-webkit-scrollbar {width: 13px; height: 13px; background-color: hsl(228deg 7% 10%)}
html[data-theme="dark"]::-webkit-scrollbar-track {background: linear-gradient(90deg, #434343, #434343 1px, #111 0, #111)}*/
[data-theme="dark"] .mastery.special-table .table-container::-webkit-scrollbar-track,
[data-theme="dark"] .grade_book.special-table .table-container::-webkit-scrollbar-track {background-color: #313131 !important}
/* seating */
[data-theme="dark"] .drag_container {background: url('/images/seating_chart/seating-chart-cell-dark.png')}
/* grading resize column */
[data-theme="dark"] #centreColumn .resizable_columns .column_resize_handle:before, [data-theme="dark"] .rightColumn.calendar {border-color: hsl(228deg 7% 45%)}
[data-theme="dark"] #centreColumn .resizable_columns .column_resize_handle:after, [data-theme="dark"] .rightColumn .rightColumn_handle, [data-theme="dark"] .section_nav_handle {background-color: hsl(228deg 7% 35%)}
/* date picker */
[data-theme="dark"] .ui-datepicker,
[data-theme="dark"] .ui-datepicker .ui-slider {background: var(--bg-color); border: 1px solid var(--main-border-color)}
[data-theme="dark"] .ui-datepicker .ui-slider-handle {background: var(--highlight-bg-color); border: 1px solid var(--main-border-color)}
[data-theme="dark"] .ui-datepicker-calendar .ui-state-default {color: #fff}
/* quiz progress */
[data-theme="dark"] .progress_list ul:before {background-color: hsl(228deg 7% 47%)}
[data-theme="dark"] #centreColumn .rightColumn .progress_list ul li:before {box-shadow: 0 0 0 2px #0f1010}
[data-theme="dark"] #centreColumn .rightColumn .progress_list ul li.selected:before {border-color: #0f1010}
[data-theme="dark"] #centreColumn .rightColumn .progress_list ul li a:not(:hover) * {color: #777}
[data-theme="dark"] .rightColumn .progress_list ul li > * > span:last-child {color: #fff}
[data-theme="dark"] #centreColumn .rightColumn .progress_list ul li:before {background-color: #3e3e3e}
/* icons */
[data-theme="dark"] .rightColumn .block .grading_arrow img {filter: brightness(2)}
[data-theme="dark"] #centreColumn ul li:before, [data-theme="dark"] .alert_block a:hover i,
[data-theme="dark"] *:not(:hover):not(:focus) > i[class]:not(.icon):not(.inverted):not(.icnColor):not([class*='mce']):not([class*='gb-']) {filter: brightness(2.5)}
[data-theme="dark"] #view_options a[aria-selected="true"] i:after,
[data-theme="dark"] a.section_nav_handle:hover i:after, [data-theme="dark"] a.column_resize_handle:hover i:after, [data-theme="dark"] a.rightColumn_handle:hover i:after,
[data-theme="dark"] a.section_nav_handle:focus i:after, [data-theme="dark"] a.column_resize_handle:focus i:after, [data-theme="dark"] a.rightColumn_handle:focus i:after,
[data-theme="dark"] button.options_btn i.ms_immersive_reader:after, [data-theme="dark"] .quiz_match_choice:hover i:after {left: -40px}
[data-theme="dark"] .plansComparisonBody i.tick {filter: invert(90%) grayscale(100%) !important}
[data-theme="dark"] .price_block i.tick {filter:  invert(85%) grayscale(100%) !important}
[data-theme="dark"] label img[src*="images/payment/"] {filter: brightness(10) grayscale(1)}
/* dark shadows */
[data-theme="dark"] .portal_edit .page_editor_head {box-shadow: 1px 1px 12px #000}
[data-theme="dark"] .special-table .column.table-labels, [data-theme="dark"] .special-table .table-static {box-shadow: 0 0 1px 0 hsl(228deg 7% 75%)}
[data-theme="dark"] .catalog_boxes > div.highlight .imgCrop {box-shadow: inset 0 2px 0 0 #7dbe74, inset -2px 0 0 #7dbe74, inset 2px 0 0 #7dbe74}
[data-theme="dark"] .catalog_boxes > div.highlight {box-shadow: inset 0 0 0 2px #7dbe74}
[data-theme="dark"] .catalog_boxes > div.highlight:hover {box-shadow: inset 0 0 0 2px #7dbe74, 3px 3px 9px #000 !important}
[data-theme="dark"] .modern_module_row.highlight td:before {border-color: #7dbe74}
@media screen and (max-width: 979px) {
  [data-theme="dark"] #centreColumn .pageHeading {box-shadow: 0 2px 10px #000}
}
/* temporary hacks */
[data-theme="dark"] .avatarText span[style*="background-color"] {background: var(--meta-bg-color) !important}/*LIGHT_GRAY*/
[data-theme="dark"] td[style*="background"][style*="#E0F1ff"] {background: #3d6586 !important}/*YET_ANOTHER_PALE_BLUE*/
/* Main nav */
[data-theme="dark"] #user-menu ol > li.mm-opened > .dropDown {border-top: 1px solid var(--table-border-color); border-bottom: 1px solid var(--table-border-color)}
[data-theme="dark"]:not([dir=rtl]) #user-menu ol > li.mm-opened > .dropDown {border-right: 1px solid var(--table-border-color)}

/* ===================
   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;
  background-color: var(--input-bg-color);
  border: 1px solid #ccc;
  border: 1px solid var(--main-border-color);
  -webkit-font-smoothing: inherit; /* Safari thin text fix */
  border-radius: 3px;
  box-shadow: 0 0 0 0 rgb(43,148,225,0);
  transition: box-shadow .2s ease-in-out, border .2s ease-in-out
}
input[type="text"]:hover, input[type="number"]:hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="date"]:hover, select:hover {border-color: #2b94e1; border-color: var(--form-highlight)}
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked:hover + label:before, input[type="radio"]:checked:hover + label:before {
  background-color: #2b94e1; background-color: var(--form-highlight);
  border-color: #2b94e1; border-color: var(--form-highlight)
}
input[type="text"]:focus-visible, input[type="number"]:focus-visible, input[type="tel"]:focus-visible, input[type="url"]:focus-visible, input[type="password"]:focus-visible, input[type="email"]:focus-visible, textarea:focus-visible, select:focus-visible, input[type="checkbox"]:focus-visible + label:before, input[type="radio"]:focus-visible + label:before {
  border-color: #2b94e1; border-color: var(--form-highlight);
  box-shadow: 0 0 0 3px rgb(43,148,225,.3)
}
input[type="checkbox"]:checked:focus-visible + label:before, input[type="radio"]:checked:focus-visible + label:before {
  border-color: #2b94e1; border-color: var(--form-highlight-border)
}
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-visible, .catalog_class #checkout_summary, .catalog_class #checkout_summary input[type="checkbox"]:focus-visible + label:before {
  box-shadow: none; outline: none
}
#wrapper, #contentWrap {
  overflow: visible !important;
}
#mainContent {
  width: auto;
}
@media only screen and (min-device-width: 768px) {
  #centreColumn .hasRightColumn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    max-width: -moz-available;
    max-width: -webkit-fill-available;
  }
}
.hasRightColumn #centreColumn {
  width: auto;
  max-width: -moz-available;
  max-width: -webkit-fill-available;
}
#centreColumn .hasRightColumn .leftColumn {
  flex: 1;
}
#contentWrap:not(.hasRightColumn) #centreColumn {
  overflow: visible !important;
  max-width: -moz-available;
  max-width: -webkit-fill-available;
}
body #fixedSectionHeader {
  margin-bottom: 10px;
  padding: 15px 25px 0 !important;
  position: fixed !important;
  top: 44px;
  max-width: 100%;
}
body.site_full_width #fixedSectionHeader {
  flex: 1;
  max-width: 1950px;
}
#centreColumn:not(#fixedMarginTop) .lesson-body-content {
  margin-top: 90px;
}
body.student_scorm[class*="_student_lesson"] #centreColumn:not(#fixedMarginTop) .lesson-body-content {
  margin-top: 70px;
}
body.student_scorm[class*="_student_lesson"] .section_header_wrap {
  padding-bottom: 20px;
}
@media screen and (min-width: 1550px) {
  body:not(.site_full_width).section_nav_page #fixedSectionHeader {
    margin-left: 0px !important;
    max-width: 1230px !important;
  }
}
@media screen and (min-width: 2050px) {
  body.site_full_width.section_nav_page #fixedSectionHeader {
    margin-left: 0px !important;
    max-width: 1900px !important;
  }
}
/* body.ctr_student_lesson:not(.mobile-app).section_nav_page #wrapper #centreColumn #fixedSectionHeader {
  padding: 5px !important;
} */
/* body.section_nav_page #fixedMarginTop:not(.loaded) {
  margin-top: 200px;
}
#fixedMarginTop {
  display: none !important;
} */
@media screen and (max-width: 767px) {
  #centreColumn .pageHeading {
    margin: 0px -7px 15px !important;
  }
  #fixedSectionHeader {
    width: auto !important;
  }
}
@media screen and (max-width: 979px) {
  #centreColumn .pageHeading {
    margin: 0px -7px 15px !important;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #mainContent {
    overflow: visible !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .user #centreColumn {
    overflow: visible !important;
  }
}
.select2-container .select2-choices, a.multiSelect {transition: box-shadow .2s ease-in-out, border .2s ease-in-out}
.select2-container.select2-container-active .select2-choices, a.multiSelect.active {
  border-color: #2b94e1 !important; border-color: var(--form-highlight) !important;
  box-shadow: 0 0 0 3px rgb(43,148,225,.3);
}
.select2-container .select2-choices, .select2-container .select2-drop-active {border-radius: 3px}
.select2-container .select2-choices, .select2-container .select2-choice, .select2-drop-active, .select2-drop.catalog-filter {background-color: #fcfcfc !important; background-color: var(--input-bg-color) !important; border-color: #c8c8c8 !important; border-color: var(--main-border-color) !important}
.select2-drop-mask, .select2-search input {background-color: #fcfcfc !important; background-color: var(--input-bg-color) !important}
.select2-search input {border: 1px solid #ccc !important; border: 1px solid var(--main-border-color) !important; font-size: 14px !important; font-family: inherit !important}
.select2-container .select2-choice .select2-arrow {background: none !important; border: 0 !important}

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 > label:first-child, div > label:first-child {margin-bottom: 5px}
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;
  width: 30% !important;
  min-width: 200px;
}/*('/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-image: url('/images/icons/form-elements.png');
  background-image: var(--form-elements-img);
  background-repeat: 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;
  transition: opacity .3s ease-in-out
}
input[type="submit"]:active, input[type="button"]:active, button:active {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.inverted span, .link_button.inverted span {color: inherit}
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%}

div.in-progress {position: relative; opacity: 0.7}
div.in-progress > span {opacity: 0}
div.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: #fff}/*quiz popup instructions*/
#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: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px 0;
  overflow: hidden;
  color: #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 40px;
}

header .mobileBar .mobileLeftBar {
  flex-grow: 0;
  flex-basis: auto;
}

header .mobileBar .leftMobileBar {
  display: block;
  z-index: 2;
  width: 36px; height: 32px;
  background: url('/images/icons/mobile-nav-icon.gif') center no-repeat;
  background-size: 18px 14px;
}
header .mobileBar .middleMobileBar {
  z-index: 1;
  text-align: center;
  flex-grow: 1;
}

header .mobileBar .mobileRightBar {
  z-index: 1;
  flex-grow: 0;
  flex-basis: auto;
  display: flex;
  justify-content: flex-end;
  padding: 9px 0;
}
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, .block_style {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:only-of-type > * {border-radius: 10px}
tbody.highlightLesson .modern_module_row ~ tr:last-of-type 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.highlightLesson .modern_module_row:only-of-type .imgCrop {border-radius: 10px 0 0 10px}
  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, .block_style {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; 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; clear: both}
.rightColumn .block:last-child {margin-bottom: 0}

.rightColumn h2 {padding: 10px 5px 0 14px; 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 > *[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; border-color: var(--divider-border-color)
}
.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):not(.playerStatusSml) li img:not(.avatar) {border-radius: 3px}
.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}
.rightColumn ul.largeImgs.with_sub_text span {position: relative; top: 2px}
.rightColumn ul.largeImgs.with_sub_text span span {font-size: 13px; position: relative; top: -4px}
/* 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 input[type="checkbox"] {width: auto !important}
.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 .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 2rem 0; position: relative; left: -3px; width: 100%; height: 29px; overflow: hidden}
.optionsRibbon.withBorder {border-bottom: 1px solid #D7DCDE; border-bottom: 1px solid var(--main-border-color)}
.optionsRibbon ul {display: block; float: left; list-style-type: none; margin: 3px}
.optionsRibbon ul, .news_form .optionsRibbon ul li {border-radius: 3px; background-color: #fff; background-color: var(--block-bg-color)}

.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; background: var(--main-border-color)}
.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 !important;}
.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; background-color: var(--bg-color)}
.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; background-color: var(--block-bg-color)}
.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}
}
.mini .native-popup{width:380px;max-width:100%;height:auto;min-height:262px;top:35%}
.native-popup .footer{background:var(--highlight-bg-color);overflow:hidden;padding:8px 10px;position:relative;width:100%;text-align:right;box-sizing:border-box;border-radius:0 0 8px 8px;position:absolute;bottom:0}
.native-popup .footer button{margin:0 0 0 3px;display:inline;padding:0 6px;height:28px;line-height:28px;font-size:14px}
.mini .native-popup .content{padding-bottom:44px}
.native-popup p{padding:5px 12px}
.native-popup b.count-down {position: relative;left: 0;right: 0;margin: 0 auto;text-align: center;width: 100%;display: block;font-size: 80px;color: var(--light-grey-text-color);}

.bulk-editor td.highlighted {background: #FDFD96}
.bulk-editor tr:nth-child(2) td.highlighted{background: #e5e500}
.bulk-highlight-button.hidden a, .bulk-highlight-button.hidden + li:after {display: none}
.bulk-highlight-button {background: #fdfd96}
[data-theme="dark"] .bulk-highlight-button a {color: #222 !important}
[data-theme="dark"] .bulk-highlight-button a i {filter: brightness(0) !important}

/* 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: 4; background: #fff; background-color: var(--block-bg-color)}
.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);
}
tbody.highlightLesson div.ellipsis {height: auto}
tbody.highlightLesson div.ellipsis:after {display: none}

/*------------------- Tables -------------------*/
table {
  border-collapse: separate;
  margin: 10px 0 1rem;
  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-color: #fff; background-color: var(--bg-color)}/*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}

.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}
@media screen and (min-width: 480px) {
  .modern_module_row .quick_edit_box {width: 265px; left: 1px !important}
  .modern_module_row .quick_edit_box .arrow {left: 142px}
}
.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}
.modern_module_row .quick_edit_icon i.inverted:after {left: -40px !important}/*overwrite theme*/

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}
.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; color: var(--light-grey-text-color); 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}
/* 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_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; 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) {
  .catalog_item .modern_module_overview .header .label.box {margin-left: 10px}

  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}
}

/*------------------- 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; border-bottom: 1px solid var(--main-border-color)}
  #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}
  .leftColumn > .inline_tabs_options + h2 {margin-top: 0 !important}
  .inline_tabs_options {display: flex; flex: 1; border-bottom: 1px solid #c7c7c7; border-bottom: 1px solid var(--main-border-color)}
  .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; border-bottom: 1px solid var(--main-border-color)}
  .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; background-color: var(--block-bg-color); 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.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: 300; width: 100%; height: 100%}
#fullscreen_msg {background: #fff; background: var(--bg-color); box-shadow: 0 0 10px rgba(0,0,0,.2); margin: 5px; opacity: 0; transition: all .7s ease; border-radius: 8px; overflow: hidden; max-height: calc(100% - 9px); display: flex; flex-direction: column}
#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 .header:not(.center) {display: flex; justify-content: space-between; align-items: center}
#fullscreen_msg_holder.fullscreen_progress div#fullscreen_msg {opacity: 1}
#fullscreen_msg_holder:not(.fullscreen_progress) #fullscreen_msg {opacity: 1; width: 100%; height: calc(100% - 10px); display: flex; flex-direction: column}
#fullscreen_msg_holder:not(.fullscreen_progress) .fullscreen_msg_content {flex: 1; padding: 0}

/* 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 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; background-color: var(--block-bg-color)}

.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: #222; color: var(--main-text-color); 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
}
body:not(.portal):not(.ctr_student_calendar) table.time-divider tr td div:hover {background-position: 50% 10px}
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: 1px solid var(--table-border-color); 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; border-bottom: 1px solid var(--table-border-color); 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; padding: 1px 0}
table.calendar_small td.highlight {background: transparent}
table.calendar_small td * {padding: 3px; margin: 1px; width: 17px; height: 17px; word-wrap: normal; border-radius: 50%; font-size: 13px; display: inline-block}
table.calendar_small td *, table.calendar_small td *:hover {color: #333; color: var(--main-text-color)}
table.calendar_small td:not(.current):hover * {background: #f5f5f5}
table.calendar_small td.current * {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: 168px; padding: 0 15px 10px; margin: 0}
.rightColumn #small_calendar_container tr > * {background-color: transparent}

/* JS Datepicker calendar */
.ui-datepicker-calendar th {text-align: center !important}
.ui-datepicker-calendar .ui-state-default {background: none !important; border-color: transparent !important; text-align: center; border-radius: 7px}
.ui-datepicker-calendar  .ui-state-default.ui-state-highlight {border-color: #ccc !important; border-color: var(--main-border-color) !important}
.ui-datepicker-calendar  .ui-state-default.ui-state-active,
.ui-datepicker-calendar  .ui-state-default.ui-state-hover {background-color: #2b94e1 !important; background-color: var(--form-highlight) !important; color: #fff}

/* 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; border-top: 1px solid var(--divider-border-color)}
.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; background-color: var(--block-bg-color) !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; line-height: 1.4}
  #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 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) .imgCrop:hover,
.modern_module_row [onclick]:hover,
.quick_edit_icon:hover {cursor: pointer}
.catalog_boxes > *.no_hover:hover .imgCrop:hover {cursor: default}

/* 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; border: 1px solid var(--highlight-border-color)}
.user_boxes > *.highlight {border: 1px solid #c4c4c4; border: 1px solid var(--highlight-border-color)}
.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_boxes .footer > .block .block_count_icon {font: 10px/8px Arial, sans-serif; color: #222; background-color: #fff; border-radius: 2px; padding: 1px 2px; margin-right: -1px; position: relative; top: -1px; box-shadow: 0 0 2px rgba(0,0,0,.5)}

/* ---------- 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, .catalog_boxes .header strong.class_name {padding: 8px 11px 0; word-break: break-word; box-sizing: border-box; width: 100%}
.catalog_boxes .header strong.class_name {display: inline-block}
.catalog_boxes > div .header > a:first-of-type {display: block; height: 100%}
/* colors and text sizes */
#centreColumn .catalog_boxes h2,
#centreColumn .catalog_boxes .header strong.class_name,
.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 .block:not([class*='_width_widget']) .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):not(.resources_boxes) > * .label {min-height: 25px}/*category catalog, user and resource tiles */
.catalog_boxes .label_box_wrap {margin: 0 11px}
.catalog_boxes .label_box_wrap .label.box {margin: 7px 0 0}
.label_box_wrap .label.box {vertical-align: top}
.label_box_wrap .label.box:last-child {margin-bottom: 2px}
.label_box_wrap .label.box:not(:last-child) {margin-right: 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}
@media (min-width: 601px) {
  .modern_module_row .label_box_wrap {margin: -5px 0 0; max-width: 60%; text-align: right}
  .modern_module_row .label_box_wrap .label.box {margin: 5px 0 0}
  .modern_module_row .label_box_wrap .label.box:not(:first-child) {margin-left: 5px}
}
@media (max-width: 600px) {
  .modern_module_row .header .label_box_wrap .label.box:first-child:not(:last-child) {margin-bottom: -3px}
}
/* 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_boxes .ratingStatic i:after {left: -40px}
.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}
.catalog_boxes .tile_circle_icon {background: #fff;background: var(--bg-color);border-radius: 50%;width: 32px;height: 32px;box-shadow: 0 0 10px rgba(0,0,0,.3);display: flex;align-items: center;justify-content: center;margin: 10px 0 0 10px;position: relative}
.catalog_boxes .tile_circle_icon.dismiss {position: absolute; top: 0; right: 10px; width: 23px; height: 23px; padding: 0}
.catalog_boxes .tile_circle_icon.dismiss i {margin-top: 0}
.catalog_boxes .tile_circle_icon i {margin-right: -4px}
.catalog_boxes .tile_circle_icon .tile_img_label {position: absolute; left: 38px; font-size: 13px; white-space: nowrap}
.no-touch .catalog_boxes .tile_circle_icon .tile_img_label {display: none}
.no-touch .catalog_boxes .tile_circle_icon:hover .tile_img_label {display: block}
.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 .block:not([class*='_width_widget']) .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; background-color: var(--block-bg-color)}
.user_boxes > * {padding: 12px 10px 7px; position: relative; color: #222; color: var(--main-text-color); 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,
.no-touch .dashboard_widgets .catalog_boxes > *:not(:hover) .quick_edit_icon {opacity: 0}
.no-touch .catalog_boxes > *:hover .quick_edit_icon,
.no-touch #leftColumn .img_crop_wrap:hover .quick_edit_icon, .no-touch #user-menu .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; background-color: var(--bg-color); position: absolute; border: 1px solid #e2e0e0; border: 1px solid var(--table-border-color); 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; background: var(--highlight-bg-color); 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_box a[data-tippy-content] {margin: 10px 5px 0; display: inline-block}
.quick_edit_box .options_btn[style*="display: none"] + a[data-tippy-content] {display: none}
.quick_edit_box.only_image a[data-tippy-content] {margin-top: 7px}
.modern_module_list .quick_edit_box a[data-tippy-content] {margin-top: 13px}
nav#user-menu .quick_edit_box a[data-tippy-content] {margin-top: 5px}
nav#user-menu .quick_edit_box a[data-tippy-content] i.icnColor:after {left: -20px}

/* 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 .text span.SingleFileUpload__name {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%; 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; 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; box-sizing: border-box}
.contentBlock .sideText .hc-limit-lines {max-height: 44px; overflow: hidden}
.contentBlock .sideText h3 {margin-bottom: 6px}
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 td, .catalog_class #leftColumn > div p, .catalog_class #leftColumn > div span, .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 label, .catalog_class #leftColumn button, .portal.catalog_class #leftColumn .options_btn {color: #222}
.catalog_class #leftColumn input, .catalog_class #leftColumn select {color: #222; color: var(--main-text-color)}
.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 #e2e0e0; border: 1px solid var(--table-border-color)}
.catalog_item .reviews .review {background-color: #fff; background-color: var(--block-bg-color); border: 1px solid #e2e0e0; border: 1px solid var(--table-border-color); 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; border: 1px solid var(--table-border-color); background: #fff; background-color: var(--block-bg-color); width: 17px; height: 17px; left: 4px; top: 4px; border-radius: 2px; content: ''; transform: rotate(45deg)}
@media screen and (min-width: 540px) {
  .catalog_item .reviews .review {min-width: 400px}
}

.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; background-color: var(--block-bg-color); 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; direction: ltr}
.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: 2px 0 6px}

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 0}
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; border-bottom: 1px solid var(--table-border-color); 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; border-width: 0 1px 1px 0}
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; background-color: var(--block-bg-color); 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; border-bottom: 1px solid var(--table-border-color); 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; border: 1px solid var(--table-border-color); background: #f1f0f0; background: var(--highlight-bg-color); padding: 10px 20px; margin-top: 25px; display: table; width: 100%; box-sizing: border-box; border-radius: 10px}
.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 -------------------*/
.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}
.user .videos .grid .video:not(.show) {display: none}
.videos .grid .video_title {margin-top: 10px; display: flex; justify-content: space-between; align-items: flex-start}
.videos .grid .video_title h2 {margin-top: 0 !important}
.videos .grid .video_title span {font-size: 13px; background-color: #767676; color: #fff; border-radius: 3px; padding: 2px 4px; white-space: nowrap}
body:not(.user) .videos .grid {max-width: 1740px}
.videos .grid .video {width: 25%}
@media screen and (max-width: 1024px) {
  .videos .grid .video {width: 50%}
}
@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: 10px; overflow: hidden; box-shadow: 0 0 1px rgba(0,0,0,0.4); position: relative; z-index: 1}
.guides a img {-ms-interpolation-mode: bicubic; width: 100% !important}
.guides a img + span {background-color: #fff}
.guides a > span {display: block; width: 102%; height: 50px; 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; font-size: 15px}
.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; left: 7px; top: 40px; border-radius: 3px; width: auto; height: auto; padding: 3px 4px 2px}
.user .user_guides {padding: 10px 5px}
.user .user_guides a:not(.show):not([href*='/entrepreneurs/']) {display: none}
.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}

/*-------------------- 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); background: var(--opacity-8-bg-color); 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; color: var(--dark-grey-text-color); 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}
#wrapper header a.evo-toggle > span {background: red;border-radius: 15px;padding: 0 5px;color: white !important;margin: 0 5px;}
/* -- Public profile -- */
.portal.public_profile, .portal.public_profile #wrapper, .portal.public_profile .mm-page {background-color: #fff; background-color: var(--content-bg-color)}
.portal.public_profile.grey_background, .portal.public_profile.grey_background #wrapper, .portal.public_profile.grey_background .mm-page {background-color: #f5f5f5; background-color: var(--content-bg-color);/*IE11*/}
.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; background-color: var(--block-bg-color); 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; color: var(--dark-grey-text-color) !important}
.portal.public_profile footer a {font-size: 14px; color: #222; color: var(--main-text-color); 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 (min-width: 500px) {
  .privacy-app {padding: 3px 5px;position: absolute;bottom: 25px;text-align: center;margin: 0 auto;display: inline-block;border-radius: 4px;left: 0;right: 0;width: auto;color: white;}
  .privacy-app > a {color: white;}
}
@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: 20px}
  .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; color: var(--main-text-color)}
  .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; background-color: var(--content-bg-color); top: 42px; padding-top: 17px; z-index: 5; width: 85%}

body:has(#fixedSectionHeader):has(div[role="alert"].info) #fixedMarginTop,
body:has(#fixedSectionHeader):has(div[role="alert"].error) #fixedMarginTop,
body:has(#fixedSectionHeader):has(div[role="alert"].warning) #fixedMarginTop {
  margin-top: 178px;
}

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

#scrollToTopBtn {
  display: none;
}

@media screen and (max-width: 767px) {
  #scrollToTopBtn {
    position: fixed;
    display: none;
    bottom: 25px;
    right: 15px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--link-text-color);
    color: var(--text-white);
    cursor: pointer;
    padding: 10px 12px;
    border-radius: var(--border-r-rounded);
    font-size: var(--font-size-large);
    box-shadow: var(--box-shadow);
  }

  #scrollToTopBtn.show {
      display: flex;
  }

  #scrollToTopBtn.show:hover {
      background-color: var(--link-text-color);
      opacity: 1;
  }

  #scrollToTopBtn.show i::after {
      filter: brightness(10);
  }

  body #fixedSectionHeader {
    position: relative !important;
    right: 0px;
    left: 0px;
    top: 0px !important;
    width: auto
  }
  body #fixedMarginTop {
    margin-top: 0 !important
  }
  body #centreColumn .section_end_links {
    display: none;
  }
  body #centreColumn:not(#fixedMarginTop) .lesson-body-content {
    margin-top: 0px;
  }
  body.student_scorm[class*="_student_lesson"] #centreColumn:not(#fixedMarginTop) .lesson-body-content {
    margin-top: 0px;
  }
}
@media screen and (max-width: 979px) {
  #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: 95px; right: 0; 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,
#contentHeadingWrapper + h2 + .optionsRibbon.optionsRight {margin-top: 13px}/*lesson sections intro*/
form#sections table .table_flex_content svg,
form#sections table .table_flex_content img {margin: 2px 7px; 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; color: var(--light-grey-text-color)}
@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: 21px; 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;
}

/* ---------------------- 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!important;
}

#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 #Uploader ul.tabnav li {float: left}
#facebox #Uploader ul.tabnav li.show_settings_tab {float: right}
#facebox .show_gdrive_tab a {padding-top: 4px; padding-bottom: 1}

#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; border: 1px solid var(--table-border-color); background-color: #f5f5f5; background-color: var(--content-bg-color); 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%}

.grade-student-top .grade-wrapper .grading {display: inline-block; z-index: 1; position: relative; border: 1px solid #e2e0e0; border: 1px solid var(--table-border-color); background-color: #fff; background-color: var(--block-bg-color); 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; background: var(--bg-color); 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; background-color: var(--highlight-bg-color); 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; border-bottom: 1px solid var(--table-border-color); 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; border-bottom: 1px solid var(--table-border-color); padding: 10px 0; clear:both}
.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; color: var(--dark-grey-text-color)}
#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-textarea .mce-tinymce:not(.tinymce_has_loaded) .mce-top-part {height: 34px}/*before editor loads fully prevent large height*/
.grading-thread-comment-textarea textarea.hasEditor:first-child {height: 145px}/*before editor loads match to loaded Editor height*/
.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; display:block; clear:both;}
.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,
  .checkout_column .checkout-row .mobile_phone_with_otp, .checkout_columns .checkout-row .mobile_phone_with_otp {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,
  .checkout_column .checkout-row .mobile_phone_with_otp, .checkout_columns .checkout-row .mobile_phone_with_otp {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; border-top: 1px solid var(--table-border-color);
    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}
  .user footer {overflow: hidden}
  #contentWrap.hasLeftColumn:before, nav#leftColumn ol.thinMainNav.hoverMainNav {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;padding-left:25px;padding-right:25px;}
  body[class*="ctr_onboarding"] #centreColumn,
  body[class*="dashboard"] #centreColumn,
  body[class*="dashboard"] #centreColumn .leftColumn,
  body[class*="ctr_teacher_lessons"] #centreColumn .leftColumn,
  body[class*="_calendar"] #contentWrap #centreColumn .leftColumn,
  #contentWrap:not(.hasRightColumn) #centreColumn {overflow: hidden}

  .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: 768px) and (max-width: 979px) {
  .user #centreColumn {overflow: hidden}
}
@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_home #contentWrap, footer {overflow: hidden}
  .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; 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, .rightColumn .block {width: 247px}
  .rightColumn .grading_fixed_col .block {width: auto}
  .rightColumn .sticky {position: sticky; top: 59px}
  .portal .rightColumn .sticky {top: 97px}

  #centreColumn {padding: 15px}


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

  .hasRightColumn #mainContent {display: flex}
  .hasRightColumn #centreColumn, #centreColumn .hasRightColumn {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%}
  .hasRightColumn #centreColumn > *:not(.leftColumn):not(.rightColumn):not(script):not(#fixedSectionHeader):not(#scrollToTopBtn) {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}
  .hasRightColumn .leftColumn:not(.calendarLeftColumn) {max-width: calc(100% - 264px)}
  .leftColumn.block,
  .leftColumn.block ~ .rightColumn {margin-top: 15px}

  /* Resizeable columns on grading pages */
  .column_dragging .rightColumn.resizable .block {position: relative}
  .column_dragging .rightColumn.resizable .block:before {content: ''; position: absolute; width: 100%; height: 100%; z-index: 10}
  #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 0 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}
  .calendars-holder.calendar-with-scroll {overflow-x: scroll; overflow-x: hidden}/*week view*/

  .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, .app_boxes > div {width: calc((100% / 2) - 15px + (15px / 3))}
  .catalog_courses.catalog_groups > div:nth-child(3n+3), .app_boxes > div:nth-child(3n+3) {margin-right: 15px}
  .catalog_courses.catalog_groups > div:nth-child(2n+2), .app_boxes > 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 (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 > 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}

  .catalog_courses.catalog_groups > div, .app_boxes > div {width: calc(33.3% - 15px + (15px / 3))}
  .catalog_courses.catalog_groups > div:nth-child(2n+2), .app_boxes > div:nth-child(2n+2) {margin-right: 15px}
  .catalog_courses.catalog_groups > div:nth-child(3n+3), .app_boxes > div:nth-child(3n+3) {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,
  .checkout_column .checkout-row .mobile_phone_with_otp, .checkout_columns .checkout-row .mobile_phone_with_otp {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}

  .app_boxes > div {width: calc((100% / 4) - 15px + (15px / 4))}
  .app_boxes > div:nth-child(3n+3) {margin-right: 15px}
  .app_boxes > 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: 1px solid var(--main-border-color); 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 > *, .game_boxes > * {width: calc((100% / 5) - 15px + (15px / 5)) !important; margin-right: 15px !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; color: var(--dark-grey-text-color)}
#loginForm ::placeholder {color: #707070; color: var(--dark-grey-text-color)}
#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;
}

/* dividing line with/without text */
.separator {border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid var(--table-border-color); text-align: center; height: 11px; margin-bottom: 8px; margin-top: -12px}
.separator span {display: inline-block; background-color: #fff; background-color: var(--bg-color); padding: 0 5px; color: #a0a0a0}

#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}
#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; border-radius: 3px}
.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-color: var(--divider-border-color); 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}
#contentWrap .checkout_columns .payment_method_btns form {margin-bottom: 4px}

.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 .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),
.checkout_columns .checkout-row .mobile_phone_with_otp > label:not(.field_set_width), .checkout_column .checkout-row .mobile_phone_with_otp > 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;
}
@media screen and (max-width: 767px){
  .senders-placeholder {
    width: 100% ;
    margin-top: 3px;
  }
}

.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; color: var(--main-text-color); 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; border-top: 5px solid var(--icon-bg-color)}
.sort-icon th .desc:after {border-bottom: 5px solid #333; border-bottom: 5px solid var(--icon-bg-color)}
.sort-by:before, .sort-by:after {border: 5px solid transparent; top: calc(50% - 1px)}
.sort-by:before {border-bottom-color: #333; border-bottom-color: var(--icon-bg-color); margin-top: -10px}
.sort-by:after {border-top-color: #333; border-top-color: var(--icon-bg-color); 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}

#centreColumn h2.month-year {float: left; padding-right: 15px; color: #222; color: var(--main-text-color); margin-top: 0 !important}
.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;/* create variables from theme tile colours to replace blue, also re white border */}
.floater .class_name {font-size: 18px !important; margin-bottom: 10px}
.floater .header {position: relative; bottom: 0; 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 .mobile-nav-dropDown-header {display: none;}
#user-menu ol {color: var(--main-text-color); 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; background: var(--main-border-color);
}
#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; background: var(--highlight-bg-color);
  z-index: 2
}
#user-menu .mm-list>li.mm-selected>a.sub_links {
  line-height: 27px!important;
  background: #fff;
  background: var(--bg-color);
  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; border: 1px solid var(--main-border-color)}
#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: 99;
  display: block!important;
  overflow: hidden
}
.searchInput, .searchLinks {
  padding: 0 11px;
  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: var(--bg-color); position: fixed;padding-top: 44px;padding-top:calc(env(safe-area-inset-top) + 44px);transition: transform .3s ease;z-index: 3;will-change: transform;-webkit-user-select: none;}
/*.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 var(--main-border-color); 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: var(--highlight-bg-color)}
#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;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, #user-menu ol > .mobile-menu-options > 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: var(--bg-color); 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: var(--bg-color)}
/*#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: var(--highlight-bg-color)}
#user-menu ol > li > a, #user-menu ol > .mobile-menu-options > li > a {line-height: 41px; height: 43px; padding: 0px 0px !important; border: solid 1px var(--main-border-color); margin: 4px 0px !important; border-radius: 3px; overflow: hidden; position: relative; display: block; padding: 0 13px !important; background: var(--bg-color)}
#user-menu li.Label {height: 28px; line-height: 27px; padding: 0 6px !important; background: var(--highlight-bg-color); margin-top: 17px !important}
#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: var(--main-text-color)}
.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);background: var(--bg-color); z-index: 9}
#user-menu ol > li.Label {margin: 0 11px; border-radius: 3px; border: solid 1px var(--main-border-color)}
#user-menu .header.mobileSearch {top: 0px; top: env(safe-area-inset-top); left: 0; height: 44px; line-height: 44px; padding: 0 20px;transform: translate3d(0,0,0);}
#user-menu .header.mobileSearch .exit {position: absolute; right: 0; top: 50%; margin-right: 10px; 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: #fff;background: var(--bg-color); 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: var(--bg-color) !important; height: 100%; width: 100%; z-index: 99999;    box-shadow: 0 0 10px rgb(0 0 0 / 20%);border-radius: 10px;overflow: hidden;}
.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: var(--input-bg-color); 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>input:focus, .native-popup .search-bar>*[excalibur-click]:focus {box-shadow: 0 0 0 2px #3478F6}
.native-popup .search-bar>*[excalibur-click] {width: 44px; height: 100%; position: absolute; right: 0; top: 0; background: var(--highlight-bg-color); 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: var(--bg-color); 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: var(--bg-color)}
.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)}
[data-theme="dark"] .tinymce-mobile-toolstrip {background: var(--editor-bg-color)}
.tinymce-mobile-editor-socket {background-color: var(--content-bg-color)}
.tinymce-mobile-dropup {background-color: var(--bg-color) !important}
.tinymce-mobile-styles-menu .tinymce-mobile-styles-item {border-color: var(--divider-border-color) !important}
.tinymce-mobile-android-maximized .tinymce-mobile-editor-socket {
  margin-top: 45px}/*for android that doesn't receive the generated top margin, manually add it */

@media screen and (min-width: 768px) {
  #user-menu, nav#user-menu:before, #user-menu .sub-menu > * {transition: width .2s ease}
  nav#user-menu{display: initial!important; transform: translateX(0%); width: 95px; height: auto; position: initial; will-change: auto}
  nav#user-menu:before {content: ''; height: 100%; position: fixed; left: 0; top: 0; width: 95px; z-index: 3}
  #user-menu .sub-menu{padding-top: 0;height:auto;background:#515A63;overflow:visible;transition: none;transform: translateX(100%);}
  #user-menu > ol, #user-menu .sub-menu > ol{overflow:visible;background:#515A63;min-height:calc(100vh - 40px);will-change: transform;width:95px;margin-top: 44px;position:absolute;z-index: 9;}
  #user-menu ol > li, #user-menu ol > .fixed-bottom > li{padding:0!important;/* height: 57px; */}
  #user-menu ol > li > a, #user-menu ol > .fixed-bottom > li > a{border:none;background:transparent;color:#fff;text-align:center;height:auto;line-height:20px;padding:8px 0!important;margin:0!important;border-radius:0}
  #user-menu ol > li > a span, #user-menu ol > .fixed-bottom > li > a > span{font-size:13px;display:block}
  #user-menu ol > li > a span:nth-child(2), #user-menu ol > .fixed-bottom > li > a > span:nth-child(2) {padding: 0 5px; overflow: hidden; text-overflow: ellipsis}
  #user-menu i:after{left:-40px}
  #user-menu ol > li > a > span:first-child{margin-right:0!important}
  #user-menu ol a i.arrowRight{display:none}
  #user-menu ol > li.mm-opened, #user-menu ol .fixed-bottom li.mm-opened {top: 0; position: relative; background: transparent !important; transform: none; padding: 0 !important; overflow: visible; margin: 0!important; height: auto; filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.15)); box-shadow: none}
  #user-menu ol > li.mm-opened > ul, #user-menu ol > li.mm-opened > div, #user-menu ol .fixed-bottom li.mm-opened > div {transform: translateX(95px); position: absolute; top: 0; box-shadow: none; background: #fff; background: var(--bg-color); overflow: hidden}
  #user-menu ol > li.mm-opened > .dropDown .scroll, #user-menu ol .fixed-bottom li.mm-opened > .dropDown .scroll {width: 457px}
  #user-menu li.mm-opened > .dropDown .scroll.three_column_nav {width: 560px}
  #user-menu .cta{position:absolute;bottom:0;left:0;height:48px;width:100%;background:#f5f5f5;background: var(--content-bg-color);line-height:48px;padding:0 10px;border-top: 1px solid #e2e0e0;border-top: 1px solid var(--table-border-color);}
  #user-menu .cta > li > a{padding:0 5px}
  #user-menu .sub-menu ol > li > ul > li{width:auto;position:unset;display:inline-block;border:none}
  #user-menu .sub-menu ol > li > ul > li > a{width:150px;position:relative;height:36px;line-height:36px!important}
  #user-menu ol >li.mm-opened ul i:after{left:0}
  #user-menu ol > li.mm-opened > a, #user-menu ol .fixed-bottom li.mm-opened > a {height:100% !important; width:100% !important; position:relative !important; display:block; margin:0 !important; padding:8px 0 !important; box-shadow: none !important;overflow:hidden;}
  #user-menu ol >li.mm-opened > a > span, #user-menu ol .fixed-bottom li.mm-opened > a > span{margin: 0; padding: 0; line-height: 20px}
  #user-menu ol >li.mm-opened > a > span:nth-child(2), #user-menu ol .fixed-bottom li.mm-opened >a > span:nth-child(2) {padding:0 5px}
  #user-menu ol > li.mm-opened > a:before{display:none}
  #user-menu a.floatL,#user-menu a.floatR{bottom:0}
  #user-menu ol > li > ul > li i{top:7px}
  #user-menu ol > li *{font-size:14px}
  li.Label.dropDownHeading{display:none!important}
  #user-menu ol > li{display:block!important;transition:none!important;}
  #user-menu .header{position:fixed;text-align:center;min-width: 75px;}
  #user-menu .header [excalibur-click="Excalibur.Mobile.search"],#user-menu .header .exit{display:none!important}
  #user-menu li .three_column_nav ul li{display:inline-block;width:calc(33.3333% - 3px);border:none!important;margin:4px 0!important}
  #user-menu ol > li .two_column_nav ul li{display:inline-block;width:calc(50% - 4px);border:none!important;margin:4px 0!important}
  #user-menu li .two_column_nav ul > li > a,#user-menu li .three_column_nav ul > li > a{line-height:30px!important;height:30px!important}
  #user-menu .header > a{margin-right:0!important}
  .mini_main_nav #user-menu ol > li > a span:nth-child(2){display:none}
  .mini_main_nav nav#user-menu, .mini_main_nav nav#user-menu > ol, .mini_main_nav nav#user-menu .sub-menu > ol, .mini_main_nav nav#user-menu:before{width:64px}
  body.mini_main_nav #user-menu ol >li.mm-opened > ul,body.mini_main_nav #user-menu ol >li.mm-opened > div{transform:translateX(64px)}
  #user-menu .sub-menu ~ ol{width: 189px!important; min-height: 100vh; transform: translate3d(0,0,0); transition: transform .18s ease; z-index: 99; will-change: transform; position: fixed}
  #user-menu .sub-menu:not(.active) ~ ol{box-shadow:0 4px 2px 3px rgba(0,0,0,0.08) !important}
  #user-menu .sub-menu ~ ol > li > a {text-align: left; padding: 0 10px !important; margin-left: 10px !important; width: calc(100% - 10px) !important; line-height: 35px !important; text-decoration: none; border-radius: 4px 0 0 4px; display: flex; align-items: center}
  #user-menu .sub-menu ~ ol > li > a > span {display: inline-block !important}
  #user-menu .sub-menu ~ ol > li > a > span:first-child {line-height: initial}
  #user-menu .sub-menu ~ ol >li.mm-opened > ul,#user-menu .sub-menu ~ ol >li.mm-opened > div{transform:translateX(189px)!important}
  #user-menu .sub-menu ~ ol > li.mm-opened > a > span:nth-child(2) {margin-top: -1px}
  #user-menu .sub-menu ~ ol > li > a > span i {margin: 0}
  #user-menu .sub-menu ~ ol > li > a > span:nth-child(2) {white-space: nowrap; padding-right: 0}
  #user-menu .sub-menu ~ ol >li{height:35px;}
  #user-menu .dropDown {border-radius: 0 8px 8px 0}
  #user-menu .header > a{width:100%;display:block;padding-top: 4px;}
  #user-menu ol > img:first-child,#user-menu ol > .img_crop_wrap > img,#user-menu ol > a:first-child > img, #user-menu ol > .user_logo > img{width:100%;margin-top:-20px;display:block;padding-bottom:10px;min-height: 29px;}
  #user-menu li.Label, #user-menu .mobile-menu-options {display:none!important}
  #user-menu > .header > a > i.home:after,#user-menu > .header > a > i.arrowLeft:after{top:-1420px}
  #user-menu > .header > a > i.home,#user-menu > .header > a > i.arrowLeft{transform:scaleX(1.2)}
  .mini_main_nav #user-menu ol > li{/*height:37px!important*/}
  body.fullscreen #user-menu .sub-menu.active{transform:translateX(0%)}
  body:not(.ctr_visitor_cart):not(.ctr_user_cart) nav#leftColumn {min-height: 100vh}
  body:not(.ctr_user_cart) nav#user-menu ~ #wrapper nav#leftColumn{visibility: hidden;min-height: 0;}
  body:not(.ctr_user_cart) nav#user-menu ~ #wrapper nav#leftColumn > *:not(#checkout_summary){display:none}
  #wrapper nav#leftColumn > .largeImgs, nav#leftColumn .staticMainNav > img {display: none;}
  #contentWrap.hasLeftColumn:before{display:none}
  #leftColumn ol > .img_crop_wrap, #leftColumn ol > .user_logo {display: none;}
  #leftColumn .mobileSubMenu a span {color: white;}
  #leftColumn .mobileSubMenu a{border: none !important;}
  #leftColumn .mobileSubMenu i:after{left:-40px}
  nav#leftColumn ol li {padding: 0 !important;margin: 0 !important;}
  #user-menu .dropDown > p {position:relative; display:block; height:100px; line-height:40px; padding:0 15px; width: 457px}
  body.keep_tablet_nav nav#leftColumn ol.staticMainNav > li > a {padding: 8px 0 !important;margin: 0;line-height: 20px;}
  nav#leftColumn ol.staticMainNav > li > a span{font-size: 12px !important;}
  .keep_tablet_nav nav#leftColumn ol.staticMainNav > li > a i{margin: -10px 0 0 0px;}
  #user-menu ol > li > a > span > i{margin-left: 4px;}
  .navTrigger:not(.closeNavTrigger) a {margin-left: -7px;background-size: 17px 14px;margin-bottom: -2px;}
  .mini_main_nav #user-menu ol.shortcuts > h3 {font-size: 0px;}
  .mini_main_nav #user-menu ol.shortcuts > li {height: 57px !important;}
  body.user footer {left: 95px;width: calc(100% - 95px);box-sizing: border-box;}
  body.user.mini_main_nav footer{left: 64px;width: calc(100% - 64px);}
  #user-menu ol.largeImgs {height: auto;}
  #user-menu ol.largeImgs h3 {text-align: center; border-width: 1px 0 0; padding: 15px 5px 8px; font-size: 15px}
  #user-menu ol.largeImgs li > a img {border-radius: 3px}
  #user-menu ol.largeImgs li > a img.avatar {border-radius: 50%; border: none; width: 32px; height: 32px}
  #user-menu ol.largeImgs li ol {padding: 0}
  #user-menu ol.zero-bar {display: none;}
  nav#user-menu.zero-bar, nav#user-menu.zero-bar:before{width: 0 !important;}
  nav#user-menu.zero-bar ~ #wrapper footer, .user.ctr_user_cart footer {left: 0; width: 100%}
  nav#user-menu li.userQuicklinks.cart{ display: none !important;}
  #user-menu .sub-menu.active ~ ol {transform: translate3d(-100%, 0,0); display: block;}
  #user-menu .sessionsPopout {padding-top: 10px;margin-bottom: 48px;}
  #user-menu .cta .Label{display: none;}
  #user-menu .sub_icon {position: absolute;top: 9px;right: 0;opacity: .7;}
  #user-menu li.extra-content span {font-size: 11px !important;}
  #user-menu li.extra-content > span{position: absolute;bottom: 0px;left: 54px;}
  #user-menu a.user_logo {padding: 10px;position: relative;width: 100%;display: block;padding-bottom: 0px;}
  #user-menu ul.cta.two_column_nav li {width: calc(50% - 3px); display: inline-block}
  #wrapper nav#leftColumn > .staticMainNav ~ .shortcuts{display: block;}
  #user-menu ol.left-bar-add {padding: 10px 0 0 !important; overflow: hidden}
  #leftColumn > img:not(.noBorder), #leftColumn > a.user_logo {margin-bottom: 6px;}
  nav#leftColumn ol.staticMainNav > li > a i {margin: 0 0 0 4px !important;top: -2px;}
  nav#leftColumn ol.staticMainNav > li > a > span:first-child {display: block !important;margin-bottom: 0px !important;height: auto !important;width: auto !important;}
  #user-menu ol ul li i {vertical-align: text-bottom;}
  .fullscreen #user-menu, .fullscreen #user-menu:before{width: 0 !important;transition: all .3s ease;}
  #user-menu ul.tabnav{position:absolute;width:100%;position:relative;margin-bottom:0;padding:0 14px;height:40px;margin-top: 10px;}
  #user-menu ol > li .dropDown a i {margin-right: 4px;}
  #user-menu .cta > li > a {padding: 0 8px;}
  #user-menu ol > li .wideDropDown .scroll {padding: 5px 14px;}
  #user-menu .dropDown .scroll::-webkit-scrollbar, .portalResults::-webkit-scrollbar {-webkit-appearance: none;}
  #user-menu .dropDown .scroll::-webkit-scrollbar:vertical, .portalResults::-webkit-scrollbar:vertical {width: 11px;}
  #user-menu .dropDown .scroll::-webkit-scrollbar-thumb, .portalResults::-webkit-scrollbar-thumb {border-radius: 8px;border: 2px solid #fff;background-color: rgba(0, 0, 0, .5);}
  #user-menu .dropDown .scroll::-webkit-scrollbar-track, .portalResults::-webkit-scrollbar-track {background-color: #fff;border-radius: 8px;}
  [data-theme="dark"] #user-menu .dropDown .scroll::-webkit-scrollbar-track, [data-theme="dark"] .portalResults::-webkit-scrollbar-track {background-color: hsl(228deg 7% 10%);}
  #user-menu ol > li .scroll{position:relative;max-height:400px;overflow:auto;margin-bottom:5px;padding:5px 8px}
  #user-menu li.Admin .dropDown .scroll {max-height: none;}
  nav#leftColumn ol.staticMainNav{ padding-top: 10px;}
  nav#leftColumn a.user_logo ~ .staticMainNav, nav#leftColumn .img_crop_wrap ~ .staticMainNav, nav#leftColumn img ~ .staticMainNav {padding-top: 0px !important;}
  #user-menu .header > a.show-sub > span, #user-menu .header > a.hide-sub > span {width: 40px;height: 100%;display: inline-block;padding-top: 2px;}
  #user-menu .header > a.hide-sub > span > i {margin-left: 5px;margin-top: -15px;transform: scaleX(1.2);}
  #user-menu > .header > a > span > i.home:after {top: -1420px;}
  #user-menu > .header > a > span > i.arrowLeft:after{top: -580px;}
  #user-menu .header > a.show-sub > span {border-radius: 3px 3px 0 0}
  #user-menu .header > a.show-sub > span > i {margin-left: 4px;margin-top: -14px;}
  #user-menu .header > a.show-sub {padding-top: 8px;}
  header .navTrigger:not(.closeNavTrigger) a {margin-left: -4px;background-size: 17px 14px;margin-bottom: 0px;}
  #leftColumn ol.staticMainNav:first-child + ol.staticMainNav {margin-top: -10px !important;}
  #user-menu ol .scroll hr {margin-top: 9px;margin-bottom: 8px;}
  #user-menu ol .scroll ul > hr:first-child {display: none;}
  .blur_site nav#user-menu > ol, .blur_site nav#user-menu > .header {filter: blur(4px);-webkit-filter: blur(4px);}
  #user-menu .img_crop_wrap .quick_edit_box {left: 50px; right: auto; width: 220px}
  #user-menu .img_crop_wrap .quick_edit_box .arrow {left: 13px}
  #user-menu .img_crop_wrap .quick_edit_box .options_btn i:after {left: 0}
  .mini_main_nav #user-menu .sub-menu > ol > li:hover > a{overflow:visible}
  .mini_main_nav #user-menu .sub-menu > ol > li > a > span:last-child{position:absolute;top:5px;left:57px;background:#212121;padding:4px 8px;border-radius:3px;z-index:2;color:#fff}
  .mini_main_nav #user-menu .sub-menu > ol > li:hover > a > span:last-child{display: block !important; overflow: visible}
  .mini_main_nav #user-menu .sub-menu > ol > li > a > span:last-child:before{content:'';background:#212121;height:10px;width:10px;position:absolute;left:-5px;top:9px;transform:rotate(45deg);z-index:1}
  .mini_main_nav #user-menu .header.mobileSearch {padding: 0 5px;min-width: 67px;}
  .widget-icon {display: none;}
  body > .linkHome.mobileSearch {z-index: 991;width: 95px;height: 44px;position: fixed;}

  #user-menu li .scroll li > a:first-child {max-width: calc(100% - 26px)}
  #user-menu li .scroll li > a.sub_links {padding: 0 !important; width: auto !important; margin-top: -1px}
  #user-menu a.sub_links {position: absolute; right: 0; top: 0; left: auto; width: 40px !important}
  #user-menu li .scroll li > a.sub_links:not(:first-child):nth-last-child(2) {right: 20px}
  /* make a pr to remove the code bellow later */
  #user-menu a .image {width: 36px;height: 36px;vertical-align: middle;margin-right: 10px;margin-left: -8px;border-radius: 3px;}
  /*#user-menu a .image {width: 32px;height: 32px;vertical-align: middle;margin-right: 10px;margin-left: -8px;border-radius: 0;}*/
  nav#leftColumn ol.staticMainNav > li > a span{font-size: 13px !important;}
  #user-menu .sub-menu ~ ol > li > a span {font-size: 15px !important;}
  #user-menu ol > li * {font-size: 15px;}
  nav#leftColumn ol.largeImgs li a span {font-size: 13px !important;}
  #user-menu li.extra-content > span {left: 52px;white-space: nowrap;text-overflow: ellipsis;width: calc(100% - 52px);overflow: hidden;}

  .native-popup {max-width: 1000px;margin: 0 auto;right: 0;max-height: 70vh;top: 50%;transform: translateY(-50%);width: 90vw;animation: none !important;}
  .popup-overlay {display: block;position: fixed;left: 0;top: 0;background: #0000003b;width: 100%;height: 100%;z-index: 900;}

  body.keep_tablet_nav[class*="ctr_support"] #user-menu ol > img:first-child,
  body.keep_tablet_nav[class*="ctr_help"] #user-menu ol > img:first-child,
  body.keep_tablet_nav[class*="ctr_product_news"] #user-menu ol > img:first-child ,
  body.keep_tablet_nav[class*="ctr_suggestions_forum"] #user-menu ol > img:first-child {padding: 10px}/*Temporary*/
}
/* agenda styles */
.calendars-holder.full-height {height: auto !important;}
.calendar-agenda-event *{box-sizing:border-box}
.calendar-agenda-event > div > a{display:block;width:100%;height:100%;position:absolute;top:0;left:0;padding:10px;padding-top:10px;color: var(--main-text-color);font-size:16px;}
.calendar-agenda-event > div a *{color:var(--subheading-color)!important}
.calendar-agenda-event{position:relative;padding-left:5px}
.calendar-agenda-event:last-child > div:before{height:calc(100% + 3px)}
.calendar-agenda-event > div:before{background:#e0e0e0;content:'';position:absolute;left:-24px;top:-2px;height:calc(100% + 7px);width:3px}
.calendar-agenda-event > div{position:relative;display:block;width:100%;min-height:68px;background-color: var(--block-bg-color);margin:5px;border-radius:10px;padding:10px;padding-top: 32px;padding-bottom:5px;border:1px solid var(--table-border-color);border-left: 10px solid var(--tile1-bg-color);}
.calendar-agenda-event > div p, .calendar-agenda-event > div b{font-size:14px;display: inline;}
.calendar-agenda-event > span:first-child{color:var(--light-grey-text-color);margin-left: -5px;margin-top: 14px;display: block;margin-bottom: 8px;}
.calendar-agenda-day:nth-of-type(4n + 2) .calendar-agenda-event > div {border-left-color: var(--tile2-bg-color)}
.calendar-agenda-day:nth-of-type(4n + 3) .calendar-agenda-event > div {border-left-color: var(--tile3-bg-color)}
.calendar-agenda-day:nth-of-type(4n + 4) .calendar-agenda-event > div {border-left-color: var(--tile4-bg-color)}
.calendar-agenda-event ul > li {border-bottom: 1px solid var(--divider-border-color);padding: 7px 0px !important;font-size: 14px;margin-top: 0 !important;}
.calendar-agenda-event ul > li:last-child {border-bottom: none;}
.calendar-agenda-event ul > li:before {display: none;}
.calendar-agenda-event > div b > i {vertical-align: text-top;}
.calendar-agenda-event > div ul p {margin-left: 24px;color: var(--main-text-color) !important;margin-bottom: 0 !important;}
.calendar-agenda-event > div p + div {display: block;margin-top: 0px;margin-left: 20px;font-size: 14px;margin-top: -5px;}
.calendar-agenda-event > div a svg {vertical-align: text-top;height: 20px;width: 20px;}
.calendar-agenda-event > div a span.status {position: absolute;right: 10px;padding: 5px;border-radius: 3px;background-color: var(--highlight-bg-color);font-size: 12px;padding: 2px 4px 0;color: var(--main-text-color) !important;}
#centreColumn .calendar-agenda-day .day-heading{margin-bottom:15px}
.calendar-agenda-event > div p {display: block;margin-top: 0px;margin-left: 20px;}
.calendar-agenda-event > div a svg * {fill: #555555;}
#centreColumn .calendar-agenda-day > h2 > span.current:last-child{color:#fff}

@media screen and (min-width: 768px) and (max-width: 979px) {
  body[class*="ctr_support"] #user-menu ol > img:first-child,
  body[class*="ctr_help"] #user-menu ol > img:first-child,
  body[class*="ctr_product_news"] #user-menu ol > img:first-child ,
  body[class*="ctr_suggestions_forum"] #user-menu ol > img:first-child {display: none}/*Temporary ctr_*/
  #user-menu > ol, #user-menu .sub-menu > ol {padding-top: 10px !important}
}
@media screen and (min-width: 1025px) {
  body:not(.keep_tablet_nav) #user-menu, body:not(.keep_tablet_nav) #user-menu > ol, body:not(.keep_tablet_nav) #user-menu .sub-menu > ol, body:not(.keep_tablet_nav) #user-menu:before{width:203px}
  body:not(.keep_tablet_nav) #user-menu li span {display: inline; text-align: initial}
  body:not(.keep_tablet_nav) #user-menu ol > li > a {text-align: initial}
  body:not(.keep_tablet_nav) #user-menu ol > li > a span {font-size: 14px}
  body:not(.keep_tablet_nav) #user-menu .header > a{max-width:50px}
  body:not(.keep_tablet_nav) #user-menu ol > img:first-child,body:not(.keep_tablet_nav) #user-menu ol > .img_crop_wrap > img,body:not(.keep_tablet_nav) #user-menu ol > a:first-child > img{max-width:160px;margin:0 auto}
  body:not(.keep_tablet_nav) #user-menu ol > a.user_logo > img {margin: -20px auto 0}
  body:not(.keep_tablet_nav) #user-menu .sub-menu ~ ol{width:203px!important}
  body:not(.keep_tablet_nav) #user-menu .sub-menu ~ ol >li.mm-opened > ul,body:not(.keep_tablet_nav) #user-menu .sub-menu ~ ol >li.mm-opened > div{transform:translateX(203px)!important}
  body:not(.keep_tablet_nav) #user-menu ol > li{/*height:37.8px!important*/}
  body:not(.keep_tablet_nav) #user-menu ol.left-bar-add li a {white-space: nowrap; overflow: hidden; width: 100%; padding-bottom: 2px !important; text-overflow: ellipsis}
  body:not(.keep_tablet_nav) #user-menu ol.left-bar-add li a img {vertical-align: middle}
  body:not(.keep_tablet_nav) #user-menu ol.left-bar-add li a > span {display: inline;}
  body:not(.keep_tablet_nav) #user-menu ol > li > a > span,body:not(.keep_tablet_nav) #user-menu ol > li > a{line-height:35px!important}
  body:not(.keep_tablet_nav) #user-menu ol > li > a{padding:0 21px!important}
  body:not(.keep_tablet_nav) #user-menu .sub-menu ~ ol > li > a {padding: 0 10px !important}
  body:not(.keep_tablet_nav) #user-menu ol >li.mm-opened > ul,body:not(.keep_tablet_nav) #user-menu ol >li.mm-opened > div{transform:translateX(203px)}
  body.user:not(.keep_tablet_nav) footer{left: 203px;width: calc(100% - 203px);}
  body:not(.keep_tablet_nav) #user-menu ol .largeImgs h3 {text-align: initial; padding-left: 20px; padding-right: 20px}
  body:not(.keep_tablet_nav) #user-menu ol.shortcuts li {height: auto !important;}
  body:not(.keep_tablet_nav) #user-menu ol.shortcuts li a {height: 46px !important;padding-top: 3px !important;}
  body:not(.keep_tablet_nav) #user-menu .shortcuts li a svg, body:not(.keep_tablet_nav) #user-menu .shortcuts li a img {vertical-align: middle;margin-right: 8px;}
}
#user-menu .extraLeftItems ol {min-height: auto !important;padding-top: 0 !important;}
#user-menu .scroll.hidden{display:none}
#user-menu .image{width:43px;height:43px;display:inline-block;background-size:cover;background-position:center;position:relative;top:0;left:0;vertical-align:bottom;margin-right:8px;margin-left:-10px;background-color:#f0f0f0;border-radius:2px}
#user-menu ol .scroll li{padding:0!important;margin:8px 0!important;border-radius:3px;position:relative}
#user-menu li .scroll li > a{padding:0 0 0 10px !important;height:43px;line-height:43px!important;display:block;width:100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#user-menu .scroll.has-extras{margin-bottom:48px}
#user-menu .dropDown {display: none}
#user-menu .mm-opened .dropDown{display:block}
#user-menu ol > li .scroll td a + br + span {margin-top: 0;}
.temp-page {height: 100%;background:#ffffff;background:var(--content-bg-color);position: absolute;width: 100%;z-index: 9;opacity: 0;}
.temp-page.extended-load{opacity: 1;}

.custom-loader{width: 60px; height: 50px; text-align: center; font-size: 10px; position: absolute; margin: 0 auto !important; left: 0; right: 0; top: 300px; display: none; z-index: 7}
.custom-loader > div{height: 100%; width: 8px; display: inline-block; float: left; margin-left: 2px; -webkit-animation: delay .8s infinite ease-in-out; animation: delay .8s infinite ease-in-out; border-radius: 5px; background-color: #aaaaaa}
.custom-loader .bar1{}
.custom-loader .bar2{animation-delay: -.7s}
.custom-loader .bar3{animation-delay: -.6s}
.custom-loader .bar4{animation-delay: -.5s}
.custom-loader .bar5{animation-delay: -.4s}
.custom-loader .bar6{animation-delay: -.3s}
@keyframes delay {
  0%,40%,100% {transform:scaleY(0.05)}
  20% {transform:scaleY(1)}
}
.extended-load .custom-loader{display: block;}
.extended-load:not(.temp-page){position: relative;}
.extended-load:not(.temp-page):before {background:#ffffff;background:var(--content-bg-color);content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 6;}
.extended-load.with-tabs:not(.temp-page):before{height: calc(100% - 30px);top: 40px;}
#fixedSectionHeader.grade:not(.scrolled){min-width:90%;}
#fixedSectionHeader.grade {
  left: 95px;
}
body.fullscreen #fixedSectionHeader.grade {
  left: 0px;
}
#centreColumn:has(#fixedSectionHeader.grade) #fixedMarginTop {
  margin-top: 80px;
}
body[class*='_grade'] #centreColumn .resizable_columns .column_resize_handle,
body[class*='_grade'] #centreColumn .resizable_columns .rightColumn .grading_fixed_col {
  top: 140px !important;
}
.ui-datepicker {font-size: 80% !important;}
#user-menu .sub-menu ~ ol .user_logo {display: none;}
[data-theme="dark"] .offline-settings .chart, [data-theme="dark"] .toggleWrapper{background: rgb(43, 43, 43);border: none;color: white;}
[data-theme="dark"] .offline-settings .chart:before{color: white;}
#user-menu .close-menu {display: none;}
@media screen and (max-width: 767px) {
  #user-menu {z-index: 99;}
  #user-menu ol > img:first-child{display:none}
  #user-menu ol > img:first-child,#user-menu ol > .img_crop_wrap > img,#user-menu ol > a:first-child > img,#user-menu .img_crop_wrap{display:none}
  #user-menu ul.tabnav{display:none}
  #user-menu .mm-opened .dropDown{border-left: none;}
  #user-menu .cta > li > a{padding:0 5px}
  #user-menu ul.tabnav ~ .hidden{display:block!important}
  #user-menu ol .scroll li{border:solid 1px #dcdcdc;border-color: var(--main-border-color);margin:4px 0!important;/*overflow:hidden*/}
  #user-menu .image{border-radius:0}
  #user-menu ol > li .scroll{padding:0;margin:0!important;max-height:none}
  #user-menu .Label{height:28px;line-height:27px;padding:0 6px!important;background:#e8e8e8;border:solid 1px #dcdcdc;border-color: var(--main-border-color);margin:4px 0!important;border-radius:3px;position:relative}
  #user-menu ol > li.Label{margin: 17px 11px 0 11px!important;}
  #user-menu ol .cta li:not(.Label){padding:0!important;border-radius:3px;position:relative;border:solid 1px #dcdcdc;border-color: var(--main-border-color);margin:4px 0!important;/*overflow:hidden*/}
  #user-menu ol .cta li > a{padding:0 0 0 10px !important;height:43px;line-height:43px!important;display:block;width:100%}
  #user-menu ul.cta{background: transparent;}
  #user-menu ol > li.mm-opened > a {background: white !important;}
  [data-theme="dark"] #user-menu ol > li.mm-opened > a{ background: var(--bg-color) !important;border: none !important;}
  #user-menu ol > li > a.selected, #user-menu ol > li > a:hover{background: white !important;background: var(--bg-color) !important;border: solid 1px rgb(220, 220, 220) !important;border-color: var(--main-border-color) !important;}
  #user-menu ol.largeImgs {display: none;}
  #user-menu.zero-bar .sub-menu.active ~ ol{ display: block;}
  #user-menu.zero-bar .sub-menu.active{display: none;}
  #user-menu.zero-bar .header > a:first-child {display: none;}
  #user-menu .sub_icon {display: none;}
  #user-menu .close-menu {display: block;}
  #user-menu ol .cta li.Label {padding: 0 6px !important;}
  #user-menu .wideDropDown .scroll {display: block !important;}
  #user-menu .wideDropDown li a:focus, #user-menu .cta li a:focus {box-shadow: 0 0 0px 2px #3478F6; border-radius: 3px;}
  #user-menu .cta {overflow: visible;}
  #user-menu ol .cta li:not(.Label):before, #user-menu ol .cta li:not(.Label):after {content: " "; display: table}
  #user-menu ol .cta li:not(.Label):after {clear: both}
  #user-menu a.user_logo.mobile_only {display: none;}
  #user-menu li > a[href="/help_desk_configure"] {display: none !important;}
  #user-menu li > a > i:first-child {margin-right: 5px !important;}
  #user-menu li.extra-content > span {display: none;}
  #user-menu ol > li > a span {color: #222 !important;color: var(--main-text-color) !important;}
  #user-menu ol > li.mm-opened > .dropDown .sessionsPopout form{overflow: hidden;}
  #user-menu li a.selected > span > i:after, #user-menu ol > li > a:hover i:after {left: 0px !important;}
  body > .linkHome.mobileSearch {display: none !important;}
  [data-theme="dark"] #user-menu li a.selected > span > i:after, [data-theme="dark"] #user-menu ol > li > a:hover i:after {left: -40px !important;}
  [data-theme="dark"] #user-menu li a.selected > span > i:after, #user-menu li a.selected > span > i:after, #user-menu li.mm-opened > a span > i:after {left: -20px !important;}
  ul.tabnav li a:hover {color: var(--light-grey-text-color);}
  .native-popup .content > .image-swiper {width: 100% !important;padding: 0;background: white;top: 50%!important;transform: translateY(-50%)!important;;position: absolute;left: 0;height: auto;}
  .native-popup .right-column {display: none !important;}
  .native-popup .content>iframe, .native-popup .content>video, .native-popup .content .resource-container {width: 100% !important;}
  .file-explorer .type-filter-bar > div {font-size: 0 !important;}
  .file-explorer .type-filter-bar ul.dropDown {font-size: 14px;left: 0;width: 100%;}
  .file-explorer .type-filter-bar ul.dropDown li {line-height: 38px;border-bottom: 1px solid var(--table-border-color);}
}
@media screen and (min-width: 1551px) {
  body:not(.site_full_width) {overflow-x: hidden;}
  body:not(.site_full_width) #user-menu .sub-menu {left: calc(-100% + (100% - 1550px)/2)}
  body:not(.site_full_width) #user-menu .header.mobileSearch,
  body:not(.site_full_width) nav#user-menu:before,
  body:not(.site_full_width) #user-menu .sub-menu ~ ol, body:not(.site_full_width) #user-menu > ol {left: calc((100% - 1550px)/2)}
  body:not(.site_full_width) #user-menu:after {content: ''; position: fixed; width: calc((100% - 1550px)/2); height: 100%; background-color: var(--body-bg-color); z-index: 100;}
}
@media screen and (min-width: 2050px) {
  body.site_full_width {overflow-x: hidden;}
  body.site_full_width #user-menu .sub-menu {left: calc(-100% + (100% - 2050px)/2)}
  body.site_full_width #user-menu .header.mobileSearch,
  body.site_full_width nav#user-menu:before,
  body.site_full_width #user-menu .sub-menu ~ ol, body.site_full_width #user-menu > ol {left: calc((100% - 2050px)/2)}
  body.site_full_width #user-menu:after {content: ''; position: fixed; width: calc((100% - 2050px)/2); height: 100%; background-color: var(--body-bg-color); z-index: 100;}
}
/* Thread metadata */
.thread-metadata {height: 16px;color: #555555;background-color: #c8dee2;border: #bbbbbb 1px solid;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;display: inline-block;border-radius: 3px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 12px;margin: 0 3px 3px 0;padding: 2px;text-decoration: none;transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;-webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;vertical-align: middle;}
.thread-metadata.thread-special {color: #555555;background-color: #eaeaea;border: #bbbbbb 1px solid;}
.thread-metadata i {margin-top: -3px;}

ul.file-tiles{display:flex;flex-wrap:wrap}
.file-container li.file-tile{max-width:100%;padding:0!important;position:relative;height:220px;margin:0 5px;border-radius:5px;overflow:hidden;min-width:250px;display:block;border:solid 1px #cbcbcb;border: 1px solid var(--table-border-color);cursor: pointer;}
.file-explorer:not(.list-view) .file-container li.file-tile {width: calc(25% - 10px);}
@media screen and (max-width: 1468px) {
  .file-explorer:not(.list-view) .file-container li.file-tile{width: calc(33.3% - 10px);}
}
@media screen and (max-width: 1168px) {
  .file-explorer:not(.list-view) .file-container li.file-tile{width: calc(50% - 10px);}
}
@media screen and (max-width: 560px) {
  .file-explorer:not(.list-view) .file-container li.file-tile{width: 100%;}
}
li.file-tile:before{display:none}
.file-tile .image{text-align: center;height: calc(100% - 50px);width:100%;display:block;position:absolute;top:0;left:0;background-size:cover;background-repeat:no-repeat;background-position:center;background-color:#ebebeb;}
.file-explorer .tile-content{font-size:14px;position:absolute;left:0;right: 0;margin: 0 auto;border-radius: 0;bottom: 0;width: 100%;height:60px;background: #ffffff;color: #2d2d2d;padding:8px 10px;overflow:hidden;}
.file-explorer:not(.list-view) .tile-content{border-top: 1px solid var(--table-border-color);}
.file-name{white-space:nowrap;display:block;text-overflow:ellipsis;position:relative;width:100%;overflow:hidden;min-height: 22px;font-size: 15px;line-height: 22px;}
.file-explorer:not(.list-view) .file-created {position: absolute;right: 10px;bottom: 10px;}
.file-explorer *{box-sizing:border-box}
.file-explorer .search-bar{position:sticky;top:0;left:0;width:100%;display:block;z-index:1;height:40px}
.file-explorer .explorer-head{position:sticky;top:0;left:0;display:block;position:relative;width:100%}
.file-explorer .search-bar input{border:none;background:transparent;width:100%;background:#ebebeb;height:100%;padding:0 8px;border-radius:4px}
.file-explorer .type-filter-bar{display:flex;height:40px;border-bottom:solid 1px #ccc;border-bottom: 1px solid var(--table-border-color);margin-bottom:5px; position:relative;}
.file-explorer .type-filter-bar > div, .file-explorer .type-filter-bar > li{margin:0 4px;padding:0 11px;font-size:14px;height:100%;line-height:38px;cursor: pointer;list-style: none;}
.file-explorer .type-filter-bar > div:first-child{margin-left:0}
.file-explorer.extended-load:not(.temp-page):before {top: 75px;}
.file-explorer .type-filter-bar > .selected{border-bottom:solid 2px #5b87a4}
.file-explorer .search-bar > i {position: absolute;right: 10px;top: 10px;}
.file-explorer.list-view li.file-tile .tile-content > .file-name {height: auto;font-size: 14px;line-height: inherit;}
.file-container li.file-tile:hover div.copy{display:block}
li.file-tile div.copy{position:absolute;left:5px;top:5px;background:#fff;text-align:center;padding:0!important;border-radius:3px;width:24px;padding-left:4px!important;display:none}
ul.clip-list{display:none;position:absolute;width:300px;top:44px;max-height:300px;background:#fff;right:0;overflow:auto;border: solid 1px #e2e0e0;border: 1px solid var(--table-border-color);}
.clip-board.open ul.clip-list{display:block;}
.clip-list li.file-tile{height: 48px;border-bottom:solid 1px #ededed;border-bottom: 1px solid var(--table-border-color);display: block;position: relative;}
.clip-list .file-tile .image{height: 32px;width: 32px;top: 7px;left: 9px;border-radius: 3px;}
.clip-list .tile-content{width:calc(100% - 60px);top:0;left:60px;color:#000;background:transparent;padding:5px;user-select:none;}
.clip-list *{box-sizing:border-box}
.clip-list .tile-content > div{display:none}
.clip-list .tile-content > .file-name{display:block;line-height: 36px;width: calc(100% - 30px);height:auto;left: 47px;}
span.count{padding:0 5px;position:absolute;top:5px;right:4px;background:#cb4537;border-radius:2px;width:auto;height:15px;font-size:11px;line-height:15px;text-align:center;color:#fff;font-weight:500;z-index:1}
a.clip-board{position:relative}
a.clip-board .newAlert{margin-top:5px !important;}
.file-explorer .image i {zoom: 2;margin-left: 5px;}
.file-explorer .round-icon {width: 65px;height: 65px;background: white;margin: 0 auto;border-radius: 50%;margin-top: 45px;padding-top: 11px;text-align: center;border: solid 1px #d9d9d9;border: 1px solid var(--table-border-color);}
.clip-list .image i {margin-top: 2px;}
.clip-list .remove i:after {left: -20px !important;}
.clip-list i {opacity: 1 !important;}
.cta [excalibur-click="Excalibur.Clipboard.clear"] i:after {left: 0 !important;}
.clip-list li.file-tile + .cta {border: 0 !important;}
.clip-list li.file-tile:hover {background: #f5f5f5;background: var(--highlight-bg-color);cursor:pointer;}
.file-explorer i.other::after, .clip-list i.other::after{top: -2900px;}
.file-explorer i.video::after, .clip-list i.video::after{top: -3780px;}
.popup ul.clip-list{display:block;position:relative;width:100%;top:0;height:auto;border: none;max-height: none;overflow: visible;}
.tab-content .clip-list li.file-tile:before {content:'';width: 18px;height: 18px;display: inline-block;background-image: url(/images/icons/form-elements.png);background-image: var(--form-elements-img);background-repeat: no-repeat;background-size: 36px;z-index: 9999;position: absolute;left: 0;top: 14px;border-radius: 3px;background-color: #fcfcfc;background-color: var(--input-bg-color);border: 1px solid #ccc;border: 1px solid var(--main-border-color);background-position-x: 1px;background-position-y: 1px;}
.tab-content .clip-list li.file-tile.selected:before{background-color: #2b94e1;background-color: var(--form-highlight);border-color: #2b94e1;border-color: var(--form-highlight);}
.tab-content .clip-list .image {left: 30px;}
.tab-content .clip-list .file-name {left: 68px;}
.popup .clip-list .remove{display:none}
.popup .clip-list .image i{margin-top:15px}
.popup .clip-list li.file-tile{cursor:pointer}
.clip-board + .footer {position: absolute !important;bottom: 0;left: 0;z-index: 2;}
.popup a.clip-board ul {padding-bottom: 40px;}
.popup .clip-board > i, .popup .clip-board > .newAlert {display: none;}
[aria-controls="tab_clipboard"].hidden {display: none;}
.clip-list .cta {position: sticky;bottom: 0;width: 100%;}
.clip-list .floatR, .clip-list .floatL{line-height: 32px;margin: 0 9px 0px 9px;font-size: 14px;user-select: none;cursor: pointer;}
.file-tiles p.search-navigation {display: block;width: 100%;margin-top: 18px;}
.quickLinks a.clip-board:hover ul i.icnColor:after {left: -20px;}
.native-popup .image-swiper img{width:100%; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);}
.native-popup .content.two-columns > div, .native-popup .content > .image-swiper{display:inline-block;position:relative;overflow:hidden;height:100%;background:var(--content-bg-color);padding: 16px;overflow: hidden;vertical-align: top;}
.native-popup .swiper-slide{width:auto!important}
.native-popup div#swiper-wrapper{width:100%}
.native-popup .right-column{width:240px;padding: 6px !important;}
.native-popup .content > .image-swiper{height:auto;transform:translateY(-50%);top:50%;background:transparent;overflow: visible;}
.native-popup .content.two-columns > .image-swiper{width:calc(100% - 240px); height:auto; max-height: 100%; background: transparent; overflow: visible;}g
                                                                                                                                                        .native-popup .right-column .container{padding: 0;/* border-radius:4px; */width:100%;flex: none;margin: 0;}
.native-popup *{box-sizing:border-box}
.native-popup .content > .image-swiper > div{position:relative}
.native-popup .content.two-columns{background:#222;overflow:hidden;}
.native-popup .two-columns.content>iframe, .native-popup .two-columns.content>video, .native-popup .content.two-columns .resource-container {position: relative;width: calc(100% - 244px);height: 400px;top: 50%;transform: translateY(-50%);padding: 8px;background: transparent;}
.native-popup .content.two-columns .resource-container > div {width: 100% !important;height: 100%;}
.native-popup .content.two-columns .resource-container .flowplayer, .native-popup .content.two-columns .resource-container > div iframe {width: 100% !important; height: 100%;}
.type-filter-bar ul.dropDown{width:140px;position:absolute;background:#fff;background:var(--bg-color);z-index:1;border:1px solid var(--table-border-color)}
.type-filter-bar ul.dropDown li{line-height:30px;text-align:left;margin:0!important;padding-left:8px!important}
.type-filter-bar ul.dropDown li:before{display:none}
.type-filter-bar ul.dropDown li:hover, .type-filter-bar ul.dropDown li.selected{background:var(--highlight-bg-color)}
.type-filter-bar ul.dropDown li.selected, .type-filter-bar ul.dropDown li[type="File"]{display:none;}
.type-filter-bar ul.dropDown.hidden{display:none}
.file-explorer {min-height: 900px;}
.list-view li.file-tile{width:100%;max-width:none;height:48px;border:none;border-radius:0;border-bottom:solid 1px #cbcbcb;border-bottom:1px solid var(--table-border-color);margin:0!important}
.list-view li.file-tile .tile-content{height:100%;width: calc(100% - 48px);margin-left: 48px;display: flex;}
.file-explorer .file-tile .tile-content > .file-creator, .file-explorer .file-tile .tile-content > .file-details{display:none}
.list-view li.file-tile .tile-content > *{flex-basis:0;flex-grow:1}
.list-view li.file-tile .tile-content > .file-details{position:absolute;left:10px;bottom:3px;font-size:11px;line-height:22px;display:block}
.list-view li.file-tile .tile-content > .file-rating{display:none}
.list-view li.file-tile .tile-content > .file-created,.list-view li.file-tile .tile-content > .file-creator{max-width:110px;line-height:32px;font-size:16px}
.list-view li.file-tile .tile-content > .file-creator{max-width:230px;display:block;padding:0 10px}
.list-view li.file-tile .image{width:47px;height:100%}
.list-view.file-explorer .round-icon{width:30px;height:30px;top:0;margin-top:9px;padding:2px 1px}
.list-view.file-explorer .round-icon > i{zoom:0}
.file-explorer .sort-icon{display:none}
.list-view.file-explorer .sort-icon{width:100%;display:flex;padding:6px 11px;background:#e0e2e4;background:var(--th-bg-color)}
.list-view.file-explorer .sort-icon > div{flex-grow:1;flex-basis:0}
.list-view.file-explorer .created_at{max-width:110px}
.list-view.file-explorer .creator{max-width:230px;padding:0 9px}
.list-view.file-explorer .sort-icon > div{position:relative}
.list-view.file-explorer .sort-icon > div a{color:#222;color:var(--main-text-color);position: relative;width: auto;padding-right: 15px;}
.file-explorer .type-filter-bar .toggle-listview{position:absolute;right:3px;background:#e0e2e4;background:var(--th-bg-color);height:27px;width:27px;top:6px;padding:0 4.4px;line-height:21px;border-radius:50%;border:1px solid var(--table-border-color)}
.file-explorer.list-view .type-filter-bar .toggle-listview i:after{top:-1580px}
.file-explorer .type-filter-bar a.add{position:absolute;right:40px;background:#e0e2e4;background:var(--th-bg-color);height:27px;width:27px;top:6px;padding:0 4.4px;line-height:21px;border-radius:50%;border:1px solid var(--table-border-color)}
#clip-board-tag.dl-item.hidden{display: none;}
td.modern_module_wrap .optionsRibbon{position:absolute;right:0;top:0;display:none;z-index:2;}
td.modern_module_wrap .optionsRibbon ul{display:inline-block;position:absolute;right:5px;top:5px;background: transparent;border: none;}
td.modern_module_wrap .optionsRibbon ul li a{font-size:0;padding: 0px 0;}
td.modern_module_wrap .optionsRibbon ul li a i{margin-left: 4px;margin-right: 0px;}
td.modern_module_wrap:hover .optionsRibbon{display: inline-block;width: 70px;left: auto;top: 12px;}
td.modern_module_wrap:hover  .optionsRibbon ~ a .header{max-width: calc(100% - 60px);}
@media screen and (max-width: 1024px) {
  td.modern_module_wrap .optionsRibbon{display: inline-block;width: 70px;left: auto;top: 12px;}
  td.modern_module_wrap  .optionsRibbon ~ a .header{max-width: calc(100% - 60px);}
}
@media screen and (max-width: 480px) {
  td.modern_module_wrap .optionsRibbon{display: inline-block;top: 2px !important;}
  td.modern_module_wrap .optionsRibbon{left: auto !important; right: 26px !important;}
}


@keyframes new-notification { 0%{transform: scale(1);} 50% {transform: scale(1.6);} 70% {transform: scale(.8);} 100% {transform: scale(1);} }
.newAlert.new-alert {animation: ease-in .4s new-notification;}
#centreColumn td.modern_module_wrap .optionsRibbon ul li{margin-right:4px!important;background-color:var(--block-bg-color);border:1px solid var(--main-border-color);border-radius:3px}
[data-theme="dark"] .search-bar input,[data-theme="dark"] .file-tile .image{background-color:#282a2e}
[data-theme="dark"] .file-explorer .tile-content,[data-theme="dark"] .file-explorer .round-icon,[data-theme="dark"] .clip-board.open ul.clip-list{background-color:#18181b;color:#fff}
[data-theme="dark"] .tile-content{color:#fff}
[data-theme="dark"] ul.clip-list{background-color:#18181b}

/* star rating */
.star-ratings-css{unicode-bidi:bidi-override;color:#c5c5c5;font-size: 15px;height: 22px;width:100px;position:relative;text-shadow: 0 1px 0 #c5c5c5;}
.star-ratings-css::before{content:'★★★★★';opacity:.3}
[title*="0.0"]::after{width:0}
[title*=".1"]::after{width:12.5%}
[title*=".2"]::after{width:25%}
[title*=".3"]::after{width:37.5%}
[title*=".4"]::after{width:44%}
[title*=".5"]::after{width:50%}
[title*=".6"]::after{width:62.5%}
[title*=".7"]::after{width:75%}
[title*=".8"]::after{width:87.5%}
[title*=".9"]::after{width:94.5%}
.star-ratings-css::after{color: #5e5e60;content:'★★★★★';text-shadow: 0 1px 0 #5e5e60;position:absolute;z-index:1;display:block;left:0;top:0;overflow:hidden;}

.clip-list .remove {position: absolute;right: 5px;top: 1px;cursor: pointer;}

.native-popup .resource-container > p > iframe, .native-popup .resource-container > p, .native-popup .resource-container > iframe {width: 100%; height: 100%;}

@media screen and (max-width: 480px) {
  .student-drive-assignment-desktop { display: none }
}
.student-drive-assignment-mobile { text-align: center; padding: 24px 12px; }
.student-drive-assignment-mobile img { max-width: 220px; }
@media screen and (min-width: 481px) {
  .student-drive-assignment-mobile { display: none }
}

.mobile_phone_with_otp {
  margin: 10px 0;
}

.checkout_column .checkout-row .mobile_phone_with_otp,
.checkout_columns .checkout-row .mobile_phone_with_otp {
  display: inline-block;
  float: left;
  line-height: 1.4;
  box-sizing: border-box;
  padding: 0 7px;
}

.checkout_column .checkout-row .mobile_phone_with_otp input,
.checkout_columns .checkout-row .mobile_phone_with_otp input {
  width: 100%;
}

#send_otp_container, #otp_verified_message { margin-top: 5px }
#verify_otp_container label { margin: 5px 0 }
#verify_otp_container input { margin-bottom: 5px }

.catalog_boxes.resources_boxes div.copy {
  background: #fff;
  background: var(--bg-color);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0 10px;
  position: absolute;
  right: 10px;
  top: 0px;
  opacity: .9;
  padding-left: 3px;
  box-sizing: border-box;
  display: none;
}
.catalog_boxes.resources_boxes div.copy:hover {
  opacity: 1;
}
.catalog_boxes.resources_boxes > a:hover i:after {
  left: 0;
}
.catalog_boxes.resources_boxes > a:hover div.copy{
  display: flex;
}
.micro-card  {
  max-width: 670px;
  margin: 0 auto;
  background-color: var(--block-bg-color);
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
  padding: 10px 20px 40px 20px;
  position: relative;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
}
.micro-card .embeded_resource_in_content a, .micro-card p a:not(.crosscheck) {
  text-align: left;
  font-size: 12px;
  max-width: 40%;
  width: fit-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: hsl(228deg 7% 10% / 46%);
  padding: 10px 8px;
  display: block;
  border-radius: 30px;
  text-decoration: none;
  backdrop-filter: blur(18px);
  color: white !important;
}

body.evo .micro-card-container .micro-card .materialStyle > p:not(:empty) {
  padding-bottom: 5px !important;
}

.micro-card  img {
  width: 100%;
  overflow: hidden;
  height: auto;
  border-radius: 6px;
  display: block;
  max-width: none !important;
}
.micro-card .embeded_resource_in_content {
  padding: 0px;
  overflow: hidden;
  position: relative;
  height: auto;
}
.micro-card > [class="embeded_resource_in_content"]{
  max-height: 498px;
  box-sizing: border-box;
  border-radius: 6px;
}
.micro-card .image .media_wrapper {
  max-height: 498px;
  overflow: hidden;
  position: relative;
}
.micro-card h3 {
  color: var(--main-text-color);
  font-weight: 600;
  margin: 0px;
  padding-top: 10px;
}
.micro-card span.img-url {
  display: block;
  position: absolute;
  bottom: 23px;
  font-weight: 600;
  left: 20px;
}
.micro-card .embeded_resource_in_content br {
  display: none;
}

/* custom report tables */
.custom_report_table {margin: 0; table-layout: fixed}
.custom_report_table span.related {display: block; padding: 6px 8px}
.custom_report_table span.related, .custom_report_table span.related * {font-size: 16px !important}
.custom_report_table .td_table_holder {padding: 8px}
.custom_report_table .group {background: #ffffca; color: #222}/*always grey*/
.custom_report_table .group .empty {font-style: italic; color: #222}
.custom_report_table .group.group1 {background: #ffffe2; color: #222}
.custom_report_table .group.group2 {background: #fffff2; color: #222}
.custom_report_table .summary td {background: #eeeeee; font-weight: bold}
.custom_report_table span.badge {font-size: 10px !important; line-height: 7px; font-weight: bold !important; color: #fff; margin-left: 5px; top: -1px; background-color: #767676; padding: 4px 3px; position: relative; vertical-align: middle; display: inline-block; border-radius: 2px}
.custom_report_table td table th, .custom_report_table td table td {word-wrap: normal; width: 20%}
.custom_report_table td table .string, .custom_report_table td table .text {width: 40%}
.custom_report_table td table .integer, .custom_report_table td table .float {width: 20%}
.custom_report_table td table .boolean {width: 10%}

/* Permissions */

.permissionTableWrapper table tr td .editModeContainer.hidden input[type="checkbox"],
.permissionTableWrapper table tr td .editModeContainer.hidden input[type="checkbox"] ~ label {
  display:none !important;
}
.permissionsHeader {
  display: flex;
  align-items: center;
  margin-bottom:10px;
  justify-content: end;
}
button.permissionEditButton,
a.permissionCancelButton
{
  border: 1px solid var(--main-border-color);
  color: var(--main-text-color);
  background-color: var(--block-bg-color);
  font-size: 14px;
  padding: 3px 15px;
  line-height: 20px;
  outline: none;
  margin-top: 0px !important;
  vertical-align: unset;
}

a.permissionCancelButton{
  margin-right:5px;
}


.permissionTableWrapper table {
  padding-top: 0px !important;
}

.permissionsContent span i {
  border: 1px solid transparent;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 5px;
}

.permissionsContent .permissionTableWrapper table{
  transform: rotateX(180deg);
}

.permissionLegend> span i.overrideLegend,
.permissionsContent .permissionOverride span i{
  border: 1px solid var(--table-border-color);
  background: transparent;
}

.permissionsContent .permissionLegend> span i:after,
.permissionsContent span i:after
{
  left: -18px;
  margin-top: -1px;
}

.permissionsContent .permissionLegend> span[title="locked"] i:after,
.permissionsContent .lock span i:after{
  left:1px;
}

.permissionsContent .permissionLegend> span[title="locked"] i,
.permissionsContent .lock span i{
  border: 1px solid var(--table-border-color);
  background: var(--table-border-color);
  height: 20px;
  width: 19px;
}

.permissionsContent .permissionTableWrapper table tr td .permissionOverride i:after{
  left:-18px;
  margin-top: -1px;
}

.permissionsContent .permissionTableWrapper table tr td  i:after{
  margin-top: -1px;
}

.permissionTableWrapper {
  overflow-x: auto;
  table-layout: auto;
  transform: rotateX(180deg);
}

.permissionTabContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.permissionHideContainer {
  display: none !important;
}
.legendContainer {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: baseline;
}

.permissionLegend{
  display: flex;
  justify-content: end;
  margin-top: 20px;
}

.permissionLegend> span {
  padding: 0 5px;
  line-height: 25px;
  font-size: 13px;
}

.permissionLegend> span > i {
  margin-right: 3px;
}

.permissionsHeader {
  display: flex;
  align-items: center;
  margin-bottom:10px;
}

.permissionsHeader h2 {
  justify-items: start;
  flex: 1;
}

.permissionLegend {
  display: flex;
}

.permissionDescriptionContainer    {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

.permissionsTable {
  width: 100%;
  overflow-x: auto;
  margin: auto;
}


.permissionsTable table tr td {
  padding: 10px 2px;
}

.permissionsTable table tr th, body.evo .permissionsTable table tr td {
  min-width: 100px;
}


.permissionsTable > table > * > tr > td:first-child,
.permissionsTable > table > * > tr > th:first-child {
  position: sticky;
  left:0;
  background: var(--bg-color) !important;
  white-space: nowrap;
  max-width: 240px;
  z-index:1;
}

.permissionsTable > table > * > tr > th,
.permissionsTable > table > * > tr > td {
  /* Without this, if a cell wraps onto two lines, the first column
   * will look bad, and may need padding. */
  white-space: nowrap;
}

.permissionsContent .permissionTableWrapper table tr td .lock i:after {
  opacity: .4;
}

#mainContent .permissionTableWrapper table tr th:first-child, .permissionTableWrapper tr>td:first-child {
  position: sticky !important;
  left: 0;
  z-index: 2 !important;
}

.permissionTableWrapper tr>td:first-child{
  background:var(--bg-color);
}

.permissionTableWrapper tr>th:first-child{
  background:var(--th-bg-color);
}

.permissionTableWrapper table {
  padding-top: 0px !important;
  margin: 0px !important;
}

.permissionTableWrapper{
  overflow-y:hidden;
}

.permissionsContent .permissionLegend> span[title="locked"] i:after, .permissionsContent .permissionLegend> span i.overrideLegend:after {
  display: none;
}

#centreColumn .rightColumn .block ul.largeImgs.leaderboardSml li{
  display:flex;
  align-items:center;
}

#centreColumn .rightColumn .block ul.largeImgs.leaderboardSml li a.popup-player-history,
.rightColumn:not(.games_widget_content) .leaderboardSml li > *:last-child:not(.toggleList){
  margin-left:auto;
}

.rightColumn .leaderboardSml li > *:last-child > span{
  position:relative;
}

.rightColumn:not(.games_widget_content) .leaderboardSml li > *:last-child:not(.toggleList) {
  text-overflow: unset;
}

.tablet-logo-container {
  display: none;
}

body:not(.evo) button.return-to-previous-btn {
  background-color: var(--block-bg-color, #fff);
  color: var(--main-text-color);
  border: 1px solid var(--main-border-color);
  line-height: 31px;
}

body:not(.evo) button.return-to-previous-btn:focus,
body:not(.evo) button.return-to-previous-btn:hover {
  opacity: 0.9;
  color: var(--link-text-color, #1f70c1);
}

/* hide new ui icons */
#centreColumn .section_header_wrap a.sectionLink i.fa-book
{
  display:none;
}


#centreColumn .pageHeading .hidden {
  display: none;
}

.break-word {
  word-break: break-word;
}

.tablet-logo-container {
  display: none;
}

.print_only {
  display: none;
}


/* MICRO CARD OVERRIDES REMOVE LATER */

body.evo .micro-card-container .micro-card .materialStyle {
     display: block;
}

body.evo .micro-card-container .micro-card:not(:has(.micro-image)) .materialStyle>p {
  min-width: 100% !important;
  right: auto;
}

body.evo .micro-card .image .media_wrapper {
  max-height: none;
}

body.evo .micro-card-container .micro-card:not(:has(.micro-image)) .materialStyle>p{
  top:0px;
}

.micro-card img {
  border-radius: 15px;
}

body.evo .micro-card-container .micro-card{
  box-shadow:var(--box-shadow-heavy);
}

body.evo .micro-card .embeded_resource_in_content img {
  max-height: none !important;
  max-width: none !important;
}

body.evo .micro-card-container .micro-card:not(:has(.micro-image)) .materialStyle>p{
  padding-bottom:20px;
}

/* AI Floating Action Button (FAB)  */
.ai-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: filter 0.3s ease, transform 0.2s ease, width 0.3s ease, height 0.2s ease;
  z-index: 10;
}

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

  .ai-fab {
    bottom: 80px;
    z-index: 9999;
  }


}

[dir="RTL"] .ai-fab {
  left: 20px;
  right: auto;
}

[dir="RTL"] footer #socialBlocks {
    display: flex;
}

#wrapper footer .footerLinks:first-child:last-child,
footer #socialBlocks {
  float: none;
}

button.ai-fab:hover {
  opacity: 1;
}

.ai-fab.close {
  width: 40px;
  height: 40px;
  transition: width 0.3s ease, height 0.2s ease;
}

.ai-fab::after {
  content: '';
  position: absolute;
  top: -10%;
  left: 8%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 75%);
  filter: blur(2px);
}

.ai-fab i.copilot-icon.iconColor {
  display: inline-block;
  animation: pop 1.2s;
  width: 50px;
  border-raduius: 50px;
  transition: text-shadow 0.5s ease-in-out, transform 0.3s ease-in-out;
}

.ai-fab.close i.copilot-icon.iconColor {
  display: none;
}

.ai-fab i.xCross.inverted,
.ai-fab i.fa-xmark.fa-solid.iconColor {
  display: none;
}

.ai-fab.close i.xCross.inverted,
.ai-fab.close i.fa-xmark.fa-solid.iconColor {
  display: inline-block;
}

body.evo .ai-fab i.copilot-icon.iconColor:after,
body.evo .ai-fab i:before{
  color: #fff;
}

body.evo .ai-fab i.fa-xmark:after{
  display:none;
}

body.evo .ai-fab i{
  margin-top: 5px;
  display: inline-block;
  font-size: 28px;
}

body.evo .ai-fab.close i{
  margin-top: 1px;
  font-size: 22px;
}

.ai-fab i.xCross.inverted {
  width: 17px;
  height: 17px;
}

.ai-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Star and flare container */
.ai-fab-elements {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-fab:hover .flare{
  animation: flareIn 0.9s ease-in forwards 0.6s;
}

.ai-fab.close:hover i.xClose ~ .flare{
    animation: none !important;
}

/* Lens flare */
.flare {
  position: absolute;
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, rgb(255 255 255) 0%, rgb(255 255 255 / 86%) 40%, rgb(255 255 255 / 0%) 70%);
  border-radius: 50%;
  filter: blur(0.5px);
  box-shadow:
          0 0 5px 2px rgb(255 255 255 / 0%),
          0 0 10px 5px rgb(255 255 255 / 60%);
  top: 11px;  /* Position at the tip of the star */
  left: 63%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  animation: flareIn 0.9s ease-in forwards 0.6s;
}

.flare:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, rgb(255 255 255 / 0%), rgb(255 255 255 / 56%) 50%, rgb(255 255 255 / 0%));
  filter: blur(1px);
  border-radius: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flare:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgb(255 255 255 / 82%) 50%, rgb(255 255 255 / 0%));
  filter: blur(1px);
  border-radius: 3px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
}

@keyframes scaleIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.ai-fab:hover .flare {
  animation: flareInHover 0.9s ease-in forwards !important;
}

/* Keyframe for flareIn animation */
@keyframes flareIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.2);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes flareInHover {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.2);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.5);
  }
  100% {
    opacity: .2;
    transform: translateX(-50%) scale(1);
  }
}

.ai-fab i.copilot-icon.iconColor {
  width: 20px;
  margin-top: 5px;
}

.ai-fab i.copilot-icon:after {
  left: -40px;
  top: -6480px;
}

html[dir="RTL"][data-theme="dark"]  .ai-fab i.copilot-icon:after {
  left: 0px;
  top: -6480px;
}

html[dir="RTL"][data-theme="dark"]  i.copilot-icon:after {
  left: 0px;
  top: -6480px;
}

.lesson_checkboxes_section .lesson_checkbox .materialStyle {
  margin-top: 0px;
}

.ctr_visitor_class_catalog #wrapper #contentWrap #contentBody aside.rightColumn {
  margin-left: 26px !important;
}