.animation-ring { animation: ring 325ms ease-in-out 3; }

.animation-spin { animation: spin 325ms ease-in-out infinite; }

.animation-spinning { animation: spinning 325ms ease-in-out infinite; }

.animation-fanFair { animation: fanFair 325ms ease-in-out 3; }

.animation-pulsate-opacity-to-65 { animation: pulsate-opacity-to-65 325ms ease-in-out infinite; }

.animation-shake { animation: shake 325ms ease-in-out 3; }

.animation-arrowRotateUp { animation: arrowRotateUp 325ms ease-in-out 1; }

.animation-arrowRotateDown { animation: arrowRotateDown 325ms ease-in-out 1; }

.animation-sonarPingHome { animation: sonarPingHome 325ms ease-in-out infinite; }

.animation-sonarPingTracks { animation: sonarPingTracks 325ms ease-in-out infinite; }

.animation-fade-in { animation: fade-in 325ms ease-in-out 1; }

.animation-fade-out { animation: fade-out 325ms ease-in-out 1; }

.animation-panel-fade-up { animation: panel-fade-up 325ms ease-in-out 1; }

.animation-loading { animation: loading 325ms ease-in-out infinite; }

@-webkit-keyframes ring { 0%, 100% { -ms-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  50% { -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); } }

@-moz-keyframes ring { 0%, 100% { -ms-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  50% { -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); } }

@keyframes ring { 0%, 100% { -ms-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }
  50% { -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); } }

@-webkit-keyframes spin { from { -webkit-transform-origin: center center;
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -webkit-transform-origin: center center;
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-moz-keyframes spin { from { -moz-transform-origin: center center;
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -moz-transform-origin: center center;
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spin { from { -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes spinning { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(1800deg);
    -moz-transform: rotate(1800deg);
    -webkit-transform: rotate(1800deg);
    transform: rotate(1800deg); } }

@-moz-keyframes spinning { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(1800deg);
    -moz-transform: rotate(1800deg);
    -webkit-transform: rotate(1800deg);
    transform: rotate(1800deg); } }

@keyframes spinning { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(1800deg);
    -moz-transform: rotate(1800deg);
    -webkit-transform: rotate(1800deg);
    transform: rotate(1800deg); } }

@-webkit-keyframes fanFair { 0%, 100% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translateX(0) translateY(0) rotate(0deg);
    -moz-transform: translateX(0) translateY(0) rotate(0deg);
    -webkit-transform: translateX(0) translateY(0) rotate(0deg);
    transform: translateX(0) translateY(0) rotate(0deg); }
  50% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translateX(0) translateY(10px) rotate(10deg);
    -moz-transform: translateX(0) translateY(10px) rotate(10deg);
    -webkit-transform: translateX(0) translateY(10px) rotate(10deg);
    transform: translateX(0) translateY(10px) rotate(10deg); } }

@-moz-keyframes fanFair { 0%, 100% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translateX(0) translateY(0) rotate(0deg);
    -moz-transform: translateX(0) translateY(0) rotate(0deg);
    -webkit-transform: translateX(0) translateY(0) rotate(0deg);
    transform: translateX(0) translateY(0) rotate(0deg); }
  50% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translateX(0) translateY(10px) rotate(10deg);
    -moz-transform: translateX(0) translateY(10px) rotate(10deg);
    -webkit-transform: translateX(0) translateY(10px) rotate(10deg);
    transform: translateX(0) translateY(10px) rotate(10deg); } }

@keyframes fanFair { 0%, 100% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translateX(0) translateY(0) rotate(0deg);
    -moz-transform: translateX(0) translateY(0) rotate(0deg);
    -webkit-transform: translateX(0) translateY(0) rotate(0deg);
    transform: translateX(0) translateY(0) rotate(0deg); }
  50% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translateX(0) translateY(10px) rotate(10deg);
    -moz-transform: translateX(0) translateY(10px) rotate(10deg);
    -webkit-transform: translateX(0) translateY(10px) rotate(10deg);
    transform: translateX(0) translateY(10px) rotate(10deg); } }

@-webkit-keyframes pulsate-opacity-to-65 { from { opacity: 1; }
  to { opacity: 0.65; } }

@-moz-keyframes pulsate-opacity-to-65 { from { opacity: 1; }
  to { opacity: 0.65; } }

@keyframes pulsate-opacity-to-65 { from { opacity: 1; }
  to { opacity: 0.65; } }

@-webkit-keyframes shake { 0%, 100% { -ms-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0); }
  12.5% { -ms-transform: translateX(-12px) translateY(0);
    -moz-transform: translateX(-12px) translateY(0);
    -webkit-transform: translateX(-12px) translateY(0);
    transform: translateX(-12px) translateY(0); }
  37.5% { -ms-transform: translateX(10px) translateY(0);
    -moz-transform: translateX(10px) translateY(0);
    -webkit-transform: translateX(10px) translateY(0);
    transform: translateX(10px) translateY(0); }
  62.5% { -ms-transform: translateX(-7px) translateY(0);
    -moz-transform: translateX(-7px) translateY(0);
    -webkit-transform: translateX(-7px) translateY(0);
    transform: translateX(-7px) translateY(0); }
  87.5% { -ms-transform: translateX(3px) translateY(0);
    -moz-transform: translateX(3px) translateY(0);
    -webkit-transform: translateX(3px) translateY(0);
    transform: translateX(3px) translateY(0); } }

@-moz-keyframes shake { 0%, 100% { -ms-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0); }
  12.5% { -ms-transform: translateX(-12px) translateY(0);
    -moz-transform: translateX(-12px) translateY(0);
    -webkit-transform: translateX(-12px) translateY(0);
    transform: translateX(-12px) translateY(0); }
  37.5% { -ms-transform: translateX(10px) translateY(0);
    -moz-transform: translateX(10px) translateY(0);
    -webkit-transform: translateX(10px) translateY(0);
    transform: translateX(10px) translateY(0); }
  62.5% { -ms-transform: translateX(-7px) translateY(0);
    -moz-transform: translateX(-7px) translateY(0);
    -webkit-transform: translateX(-7px) translateY(0);
    transform: translateX(-7px) translateY(0); }
  87.5% { -ms-transform: translateX(3px) translateY(0);
    -moz-transform: translateX(3px) translateY(0);
    -webkit-transform: translateX(3px) translateY(0);
    transform: translateX(3px) translateY(0); } }

@keyframes shake { 0%, 100% { -ms-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0); }
  12.5% { -ms-transform: translateX(-12px) translateY(0);
    -moz-transform: translateX(-12px) translateY(0);
    -webkit-transform: translateX(-12px) translateY(0);
    transform: translateX(-12px) translateY(0); }
  37.5% { -ms-transform: translateX(10px) translateY(0);
    -moz-transform: translateX(10px) translateY(0);
    -webkit-transform: translateX(10px) translateY(0);
    transform: translateX(10px) translateY(0); }
  62.5% { -ms-transform: translateX(-7px) translateY(0);
    -moz-transform: translateX(-7px) translateY(0);
    -webkit-transform: translateX(-7px) translateY(0);
    transform: translateX(-7px) translateY(0); }
  87.5% { -ms-transform: translateX(3px) translateY(0);
    -moz-transform: translateX(3px) translateY(0);
    -webkit-transform: translateX(3px) translateY(0);
    transform: translateX(3px) translateY(0); } }

@-webkit-keyframes arrowRotateUp { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); } }

@-moz-keyframes arrowRotateUp { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); } }

@keyframes arrowRotateUp { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); } }

@-webkit-keyframes arrowRotateDown { from { -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  to { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@-moz-keyframes arrowRotateDown { from { -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  to { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes arrowRotateDown { from { -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  to { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@-webkit-keyframes sonarPingHome { 0% { opacity: 0.15; }
  40% { opacity: 0.65; }
  100% { opacity: 0;
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3); } }

@-moz-keyframes sonarPingHome { 0% { opacity: 0.15; }
  40% { opacity: 0.65; }
  100% { opacity: 0;
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3); } }

@keyframes sonarPingHome { 0% { opacity: 0.15; }
  40% { opacity: 0.65; }
  100% { opacity: 0;
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3); } }

@-webkit-keyframes sonarPingTracks { 0% { opacity: 0.15; }
  40% { opacity: 0.65;
    box-shadow: 0 0 0 2px #fff; }
  100% { opacity: 0;
    box-shadow: 0 0 0 2px #fff;
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3); } }

@-moz-keyframes sonarPingTracks { 0% { opacity: 0.15; }
  40% { opacity: 0.65;
    box-shadow: 0 0 0 2px #fff; }
  100% { opacity: 0;
    box-shadow: 0 0 0 2px #fff;
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3); } }

@keyframes sonarPingTracks { 0% { opacity: 0.15; }
  40% { opacity: 0.65;
    box-shadow: 0 0 0 2px #fff; }
  100% { opacity: 0;
    box-shadow: 0 0 0 2px #fff;
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3); } }

@-webkit-keyframes fade-in { from { opacity: 0; }
  to { opacity: 1; } }

@-moz-keyframes fade-in { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes fade-in { from { opacity: 0; }
  to { opacity: 1; } }

@-webkit-keyframes fade-out { from { opacity: 1; }
  to { opacity: 0; } }

@-moz-keyframes fade-out { from { opacity: 1; }
  to { opacity: 0; } }

@keyframes fade-out { from { opacity: 1; }
  to { opacity: 0; } }

@-webkit-keyframes panel-fade-up { 0% { opacity: 0; }
  25% { opacity: 0;
    -ms-transform: translatey(30px);
    -moz-transform: translatey(30px);
    -webkit-transform: translatey(30px);
    transform: translatey(30px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@-moz-keyframes panel-fade-up { 0% { opacity: 0; }
  25% { opacity: 0;
    -ms-transform: translatey(30px);
    -moz-transform: translatey(30px);
    -webkit-transform: translatey(30px);
    transform: translatey(30px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@keyframes panel-fade-up { 0% { opacity: 0; }
  25% { opacity: 0;
    -ms-transform: translatey(30px);
    -moz-transform: translatey(30px);
    -webkit-transform: translatey(30px);
    transform: translatey(30px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@-webkit-keyframes loading { 0%, 100% { opacity: 1; }
  50% { opacity: 0.25; } }

@-moz-keyframes loading { 0%, 100% { opacity: 1; }
  50% { opacity: 0.25; } }

@keyframes loading { 0%, 100% { opacity: 1; }
  50% { opacity: 0.25; } }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }
*, *:before, *:after { box-sizing: border-box; }
svg { overflow: visible !important; display: inline-block; width: 100%; height: 100%; transform-origin: center center; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: fill 300ms 0s ease, stroke 300ms 0s ease, transform 300ms 0s ease, opacity 300ms 0s ease; }

.icon-defs { display: none; }

.quiz-18-icon { width: 18px; height: 18px; }

.quiz-22-icon { width: 22px; height: 22px; }

.quiz-40-icon { width: 40px; height: 40px; }

.code-challenge-18-icon { width: 18px; height: 18px; }

.code-challenge-22-icon { width: 22px; height: 22px; }

.code-challenge-40-icon { width: 40px; height: 40px; }

.local-code-challenge-18-icon { width: 18px; height: 18px; }

.local-code-challenge-22-icon { width: 22px; height: 22px; }

.local-code-challenge-40-icon { width: 40px; height: 40px; }

.video-18-icon { width: 18px; height: 18px; }

.video-22-icon { width: 22px; height: 22px; }

.video-40-icon { width: 40px; height: 40px; }

.step-complete-fill-18-icon { width: 18px; height: 18px; }

.step-complete-fill-22-icon { width: 22px; height: 22px; }

.step-complete-fill-40-icon { width: 40px; height: 40px; }

.instruction-18-icon { width: 18px; height: 18px; }

.instruction-22-icon { width: 22px; height: 22px; }

.instruction-40-icon { width: 40px; height: 40px; }

.quiz-suggested-22-icon { width: 22px; height: 22px; }

.code-challenge-suggested-22-icon { width: 22px; height: 22px; }

.local-code-challenge-suggested-22-icon { width: 22px; height: 22px; }

.video-suggested-22-icon { width: 22px; height: 22px; }

.step-complete-fill-suggested-22-icon { width: 22px; height: 22px; }

.instruction-suggested-22-icon { width: 22px; height: 22px; }

.checkmark-24-icon { width: 24px; height: 24px; }

.close-24-icon { width: 24px; height: 24px; }

.info-24-icon { width: 24px; height: 24px; }

.bonus-icon { width: 18px; height: 18px; }

.collection-icon { width: 18px; height: 18px; }

.conference-icon { width: 18px; height: 18px; }

.course-icon { width: 18px; height: 18px; }

.track-icon { width: 18px; height: 18px; }

.workshop-icon { width: 18px; height: 18px; }

.announcement-icon { width: 18px; height: 18px; }

.instruction-icon { width: 18px; height: 18px; }

.project-icon { width: 18px; height: 18px; }

.practice-icon { width: 18px; height: 18px; }

.play-icon { width: 24px; height: 26px; }

.pause-icon { width: 16px; height: 20px; }

.rewind-icon, .captions-icon, .volume-icon, .workspaces-outline-icon { width: 22px; height: 22px; }

.fullscreen-icon { width: 18px; height: 18px; }

.speed-icon { width: 23px; height: 23px; margin: 0 0 -3px -3px; }

.android-icon { width: 42px; height: 50px; }

.apis-icon { width: 50px; height: 50px; }

.business-icon { width: 60px; height: 50px; }

.csharp-icon { width: 46px; height: 50px; }

.css-icon { width: 58px; height: 50px; }

.data-analysis-icon { width: 60px; height: 57px; }

.databases-icon { width: 48px; height: 50px; }

.design-icon { width: 64px; height: 50px; }

.development-tools-icon { width: 50px; height: 50px; }

.digital-literacy-icon { width: 70px; height: 46px; }

.edi-icon { width: 60px; height: 60px; }

.go-icon { width: 70px; height: 57px; }

.html-icon { width: 70px; height: 42px; }

.ios-icon { width: 64px; height: 50px; }

.java-icon { width: 40px; height: 50px; }

.javascript-icon { width: 52px; height: 50px; }

.learning-resources-icon { width: 70px; height: 53px; }

.machine-learning-icon { width: 70px; height: 63px; }

.ai-icon { width: 70px; height: 63px; }

.php-icon { width: 70px; height: 36px; }

.python-icon { width: 50px; height: 50px; }

.quality-assurance-icon { width: 50px; height: 50px; }

.ruby-icon { width: 60px; height: 50px; }

.security-icon { width: 40px; height: 50px; }

.twentyfirst-century-skills-icon { width: 70px; height: 72px; }

.android-small-icon { width: 12px; height: 14px; }

.apis-small-icon { width: 14px; height: 14px; }

.business-small-icon { width: 12px; height: 10px; }

.csharp-small-icon { width: 11px; height: 12px; }

.css-small-icon { width: 16px; height: 6px; }

.data-analysis-small-icon { width: 14px; height: 14px; }

.databases-small-icon { width: 11px; height: 12px; }

.design-small-icon { width: 8px; height: 12px; }

.development-tools-small-icon { width: 8px; height: 14px; }

.digital-literacy-small-icon { width: 10px; height: 12px; }

.edi-small-icon { width: 12px; height: 12px; }

.go-small-icon { width: 16px; height: 13px; }

.html-small-icon { width: 24px; height: 6px; }

.ios-small-icon { width: 10px; height: 12px; }

.java-small-icon { width: 14px; height: 10px; }

.javascript-small-icon { width: 14px; height: 8px; }

.learning-resources-small-icon { width: 16px; height: 12px; }

.machine-learning-small-icon { width: 12px; height: 11px; }

.ai-small-icon { width: 12px; height: 11px; }

.php-small-icon { width: 18px; height: 6px; }

.python-small-icon { width: 14px; height: 14px; }

.quality-assurance-small-icon { width: 14px; height: 14px; }

.ruby-small-icon { width: 14px; height: 12px; }

.security-small-icon { width: 11px; height: 14px; }

.twentyfirst-century-skills-small-icon { width: 14px; height: 14px; }

.left-arrow-icon { width: 12px; height: 12px; }

.right-arrow-icon { width: 12px; height: 12px; }

.up-arrow-icon { width: 12px; height: 12px; }

.down-arrow-icon { width: 12px; height: 12px; }

.upvote-icon, .downvote-icon { width: 12px; height: 12px; }

.ellipses-icon { width: 18px; height: 18px; }

.support-icon { width: 30px; height: 30px; }

.workspaces-icon, .forum-icon { width: 30px; height: 28px; }

.tracks-icon { width: 30px; height: 26px; }

.library-icon { width: 30px; height: 24px; }

.gear-icon { width: 16px; height: 16px; }

.cash-icon, .ipad-icon, .briefcase-icon, .certificate-icon, .referrals-icon { width: 56px; height: 40px; }

.payment-generic-icon, .payment-mastercard-icon, .payment-visa-icon, .payment-paypal-icon, .payment-american-express-icon, .payment-discover-icon { width: 34px; height: 24px; }

.add-icon { width: 16px; height: 16px; }

.info-icon { width: 16px; height: 16px; }

.workspaces-small-icon { width: 16px; height: 16px; }

.search-icon { width: 16px; height: 16px; }

.star-small-icon { width: 16px; height: 16px; }

.play-outline-24-icon { width: 24px; height: 24px; }

.support-outline-24-icon { width: 24px; height: 24px; }

.search-outline-24-icon { width: 24px; height: 24px; }

.star-outline-24-icon { width: 24px; height: 24px; }

.help-outline-24-icon { width: 24px; height: 24px; }

.facebook-icon { width: 24px; height: 24px; }

.twitter-icon { width: 24px; height: 24px; }

.instagram-icon { width: 24px; height: 24px; }

.linked-in-icon { width: 24px; height: 24px; }

.website-icon { width: 24px; height: 24px; }

.github-icon { width: 24px; height: 24px; }

.dribbble-icon { width: 24px; height: 24px; }

.youtube-icon { width: 24px; height: 24px; }

.reddit-icon { width: 24px; height: 24px; }

.tiktok-icon { width: 24px; height: 24px; }

.discord-icon { width: 24px; height: 24px; }

.exam-icon, .bell-18-icon, .calendar-18-icon, .techdegree-18-icon, .megaphone-18-icon, .browser-18-icon, .briefcase-18-icon, .clock-icon { width: 18px; height: 18px; }

.mentor-18-icon, .techdegree-icon { width: 16px; height: 18px; }

.stat-quizzes-icon { width: 42px; height: 42px; }

.stat-badges-icon { width: 42px; height: 42px; }

.stat-challenges-icon { width: 42px; height: 42px; }

.stat-courses-icon { width: 42px; height: 42px; }

.stat-points-icon { width: 42px; height: 42px; }

.stat-projects-icon { width: 42px; height: 42px; }

.stat-months-icon { width: 42px; height: 42px; }

.stat-hours-icon { width: 42px; height: 42px; }

.workspaces-fork-icon { width: 16px; height: 18px; }

.trash-rounded-icon { width: 16px; height: 18px; }

.chevron-icon { width: 12px; height: 8px; }

.left-chevron-icon, .right-chevron-icon { width: 18px; height: 32px; }

.left-chevron-small-icon, .right-chevron-small-icon { width: 6px; height: 10px; }

.add-member-icon { width: 20px; height: 15px; }

.browser-handle-icon { width: 10px; height: 10px; }

.checkmark-18-icon { width: 18px; height: 18px; }

.info-i-icon { width: 2px; height: 12px; }

.failed-quiz-icon { width: 134px; height: 134px; }

.star-large-icon { width: 32px; height: 30px; }

.building-icon { width: 17px; height: 16px; }

.salary-icon { width: 16px; height: 21px; }

.complete-icon { width: 16px; height: 14px; }

.lock-thin-icon { width: 12px; height: 16px; }

.lock-wide-icon { width: 14px; height: 16px; }

.maintenance-icon { width: 30px; height: 30px; }

.complete-outline-icon { width: 22px; height: 22px; }

.treehouse-icon { width: 139px; height: 32px; }

.logo-icon { width: 30px; height: 32px; }

.resume-icon { width: 17px; height: 14px; }

.arrows-icon { width: 18px; height: 16px; }

.checkmark-icon { width: 10px; height: 8px; }

.close-icon { width: 12px; height: 12px; }

.points-icon { width: 30px; height: 30px; }

.drag-icon { width: 20px; height: 10px; }

.bell-icon { width: 26px; height: 25px; }

.fastforward-icon { margin-left: 4px; width: 14px; height: 11px; }

.beta-icon { width: 28px; height: 40px; }

.courses-grid-icon { width: 40px; height: 40px; }

.curriculum-icon { width: 40px; height: 8px; }

.download-icon { width: 32px; height: 40px; }

.library-book-icon { width: 40px; height: 31px; }

.courses-plus-icon { width: 40px; height: 40px; }

.project-review-icon { width: 40px; height: 40px; }

.quiz-click-icon { width: 40px; height: 40px; }

.community-icon { width: 40px; height: 30px; }

.video-camera-icon { width: 40px; height: 25px; }

.spotify-icon { width: 40px; height: 40px; }

.apple-podcasts-icon { width: 36px; height: 40px; }

.google-podcasts-icon { width: 40px; height: 40px; }

.loading-icon { width: 18px; height: 18px; -webkit-animation: spin 1.2s infinite linear; -moz-animation: spin 1.2s infinite linear; animation: spin 1.2s infinite linear; }

.loading-circle { fill: #b9c1c7; }

.loading-quarter-circle { fill: #60676d; }

.icon { background-repeat: no-repeat; background-position: 0 0; display: inline-block; vertical-align: middle; }

.icon-points { width: 30px; height: 30px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjk5LjU0NHB4IiBoZWlnaHQ9IjMwMHB4IiB2aWV3Qm94PSIwIDAgMjk5LjU0NCAzMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI5OS41NDQgMzAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNDksMGM1MCwwLDkyLDIyLDEyMSw2MmwtMTIxLDg4VjBIMHYzMDBoMzAwVjBIMTQ5eiIvPg0KCTxnPg0KCQk8cGF0aCBvcGFjaXR5PSIwLjQiIGZpbGw9IiNDMEM4Q0UiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBkPSJNMTUwLDE1MEw2MiwyOWMyNy0xOSw1NS0yOSw4OC0yOVYxNTB6Ii8%2BDQoJCTxwYXRoIG9wYWNpdHk9IjAuNyIgZmlsbD0iI0MwQzhDRSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAgICAiIGQ9Ik0xNTAsMTUwTDgsMTk2Qy0xMiwxMzMsOSw2Nyw2MiwyOEwxNTAsMTUweiIvPg0KCQk8cGF0aCBvcGFjaXR5PSIwLjUiIGZpbGw9IiNDMEM4Q0UiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBkPSJNMTUwLDE1MGw4OCwxMjFjLTY3LDQ5LTE2MSwzNC0yMDktMzNjLTEwLTEzLTE2LTI2LTIxLTQyDQoJCQlMMTUwLDE1MHoiLz4NCgkJPHBhdGggZmlsbD0iI0MwQzhDRSIgZD0iTTE1MCwxNTBsMTIxLTg4YzQ5LDY3LDM0LDE2MS0zMywyMTBMMTUwLDE1MHoiLz4NCgk8L2c%2BDQoJPGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBjeD0iMTUwIiBjeT0iMTUwIiByPSI3MCIvPg0KPC9nPg0KPC9zdmc%2BDQo%3D); background-size: 30px 30px; }

.icon-left { width: 17px; height: 14px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEwcHgiIGhlaWdodD0iMTM5Ljk4NnB4IiB2aWV3Qm94PSIwIDAgNTEwIDEzOS45ODYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMCAxMzkuOTg2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik03MCw0LjExOWM5LDYuOTgyLDExLDIwLjk0Nyw0LDI5LjkyNEw2NCw0OC4wMDhoODVjMTIsMCwyMSw5Ljk3NSwyMSwyMS45NDVzLTEwLDIxLjk0NS0yMSwyMS45NDVINjQNCglsMTAsMTMuOTY1YzcsOC45NzcsNSwyMi45NDItNCwyOS45MjRzLTIzLDQuOTg3LTMwLTMuOTlMNCw4My45MThDMSw3OC45MywwLDc0Ljk0LDAsNjkuOTUzYzAtNC45ODcsMS04Ljk3Nyw0LTEyLjk2N0w0MCw5LjEwNw0KCUM0OC0wLjg2OCw2MS0yLjg2Myw3MCw0LjExOXoiLz4NCjxwYXRoIGZpbGw9IiM2MDY3NkQiIGQ9Ik0yNDAsNC4xMTljOSw2Ljk4MiwxMSwyMC45NDcsNCwyOS45MjRsLTEwLDEzLjk2NWg4NWMxMiwwLDIxLDkuOTc1LDIxLDIxLjk0NXMtMTAsMjEuOTQ1LTIxLDIxLjk0NWgtODUNCglsMTAsMTMuOTY1YzcsOC45NzcsNSwyMi45NDItNCwyOS45MjRzLTIzLDQuOTg3LTMwLTMuOTlsLTM2LTQ3Ljg3OWMtMy00Ljk4Ny00LTguOTc3LTQtMTMuOTY1YzAtNC45ODcsMS04Ljk3Nyw0LTEyLjk2N2wzNi00Ny44NzkNCglDMjE4LTAuODY4LDIzMS0yLjg2MywyNDAsNC4xMTl6Ii8%2BDQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDEwLDQuMTE5YzksNi45ODIsMTEsMjAuOTQ3LDQsMjkuOTI0bC0xMCwxMy45NjVoODVjMTIsMCwyMSw5Ljk3NSwyMSwyMS45NDVzLTEwLDIxLjk0NS0yMSwyMS45NDVoLTg1DQoJbDEwLDEzLjk2NWM3LDguOTc3LDUsMjIuOTQyLTQsMjkuOTI0cy0yMyw0Ljk4Ny0zMC0zLjk5bC0zNi00Ny44NzljLTMtNC45ODctNC04Ljk3Ny00LTEzLjk2NWMwLTQuOTg3LDEtOC45NzcsNC0xMi45NjdsMzYtNDcuODc5DQoJQzM4OC0wLjg2OCw0MDEtMi44NjMsNDEwLDQuMTE5eiIvPg0KPC9zdmc%2BDQo%3D); background-size: 51px 14px; }

.icon-right-small { width: 11px; height: 9px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTFweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9IjUuOTcyIDQuOTQ4IDExIDkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgNS45NzIgNC45NDggMTEgOSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BDQo8cGF0aCBmaWxsPSIjNUZDRjgwIiBkPSJNMTQuMzQyLDUuNDk1bDIuMzUsMy4xMTZjMC4xODcsMC4yNDgsMC4yOCwwLjU0MiwwLjI4LDAuODM3YzAsMC4yOTYtMC4wOTMsMC41OS0wLjI4LDAuODM4TDE0LjM0MywxMy40DQoJYy0wLjQ1OSwwLjYxLTEuMzIzLDAuNzI5LTEuOTI3LDAuMjY2Yy0wLjYwNS0wLjQ2My0wLjcyMy0xLjMzMS0wLjI2My0xLjk0bDAuNjcyLTAuODkzSDcuMzQ3Yy0wLjc1OSwwLTEuMzc1LTAuNjIxLTEuMzc1LTEuMzg1DQoJczAuNjE2LTEuMzg0LDEuMzc1LTEuMzg0aDUuNDc4bC0wLjY3Mi0wLjg5M2MtMC40NTktMC42MTEtMC4zNDEtMS40NzgsMC4yNjMtMS45NDFDMTMuMDIsNC43NjgsMTMuODg0LDQuODg3LDE0LjM0Miw1LjQ5NXoiLz4NCjwvc3ZnPg0K); background-size: 11px 9px; }

.icon-chevron-down, .icon-chevron-up { width: 12px; height: 8px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjQwLjMgMTYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNDAuMyAxNjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkU3ODgxO30KCS5zdDF7ZmlsbDojOEU5NjlEO30KPC9zdHlsZT4KPGc%2BCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjAsODBMNC41LDI1LjhjLTYtNS45LTYtMTUuNCwwLTIxLjNjNi01LjksMTUuOC01LjksMjEuOCwwTDYwLDM3LjNMOTMuNyw0LjRjNi01LjksMTUuOC01LjksMjEuOCwwCgkJYzYsNS45LDYsMTUuNSwwLDIxLjNMNjAsODB6Ii8%2BCjwvZz4KPGc%2BCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTgwLjMsODBsLTU1LjUtNTQuMmMtNi01LjktNi0xNS40LDAtMjEuM2M2LTUuOSwxNS44LTUuOSwyMS44LDBsMzMuNiwzMi45bDMzLjctMzIuOWM2LTUuOSwxNS44LTUuOSwyMS44LDAKCQlzNiwxNS40LDAsMjEuM0wxODAuMyw4MHoiLz4KPC9nPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xODAuMyw4MGw1NS41LDU0LjJjNiw1LjksNiwxNS40LDAsMjEuM2MtNiw1LjktMTUuOCw1LjktMjEuOCwwbC0zMy42LTMyLjlsLTMzLjcsMzIuOQoJCWMtNiw1LjktMTUuOCw1LjktMjEuOCwwYy02LTUuOS02LTE1LjQsMC0yMS4zTDE4MC4zLDgweiIvPgo8L2c%2BCjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTYwLDgwbDU1LjUsNTQuMmM2LDUuOSw2LDE1LjQsMCwyMS4zYy02LDUuOS0xNS44LDUuOS0yMS44LDBMNjAsMTIyLjdsLTMzLjcsMzIuOWMtNiw1LjktMTUuOCw1LjktMjEuOCwwCgkJcy02LTE1LjQsMC0yMS4zTDYwLDgweiIvPgo8L2c%2BCjwvc3ZnPgo%3D); background-size: 24px 16px; background-position: -12px 0; }

.icon-chevron-up { background-position: -12px -8px; }

.icon-chevron-left { width: 8px; height: 12px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTYwLjE1cHgiIGhlaWdodD0iMjQwLjAwM3B4IiB2aWV3Qm94PSIwIDAgMTYwLjE1IDI0MC4wMDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2MC4xNSAyNDAuMDAzIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM2MDY3NkQiIGQ9Ik03OS45LDYwLjAxMkwyNS42NjEsMTE1LjQ4Yy01Ljg5NSw2LjAyOS0xNS40NSw2LjAyOS0yMS4zNCwwYy01Ljg5NS02LjAyOS01Ljg5NS0xNS43OTYsMC0yMS44MjYNCgkJTDM3LjIyLDYwLjAxMUw0LjMxNiwyNi4zNDljLTUuODg1LTYuMDI5LTUuODktMTUuNzk2LDAuMDA1LTIxLjgyNmM1Ljg5NS02LjAyOSwxNS40NS02LjAyOSwyMS4zNDUsMEw3OS45LDYwLjAxMnoiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGZpbGw9IiM2MDY3NkQiIGQ9Ik0tMC4xLDE3OS45OTFsNTQuMjM5LTU1LjQ2OGM1Ljg5NS02LjAyOSwxNS40NS02LjAyOSwyMS4zNCwwYzUuODk1LDYuMDI5LDUuODk1LDE1Ljc5NiwwLDIxLjgyNg0KCQlMNDIuNTgsMTc5Ljk5MmwzMi45MDQsMzMuNjYzYzUuODg1LDYuMDI5LDUuODksMTUuNzk2LTAuMDA1LDIxLjgyNnMtMTUuNDUsNi4wMjktMjEuMzQ1LDBMLTAuMSwxNzkuOTkxeiIvPg0KPC9nPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0Q0RDlERCIgZD0iTTE2MC4xNSw2MC4wMTJsLTU0LjIzOSw1NS40NjhjLTUuODk1LDYuMDI5LTE1LjQ1LDYuMDI5LTIxLjM0LDBjLTUuODk1LTYuMDI5LTUuODk1LTE1Ljc5NiwwLTIxLjgyNg0KCQlsMzIuODk5LTMzLjY0M0w4NC41NjYsMjYuMzQ4Yy01Ljg4NS02LjAyOS01Ljg5LTE1Ljc5NiwwLjAwNS0yMS44MjZjNS44OTUtNi4wMjksMTUuNDUtNi4wMjksMjEuMzQ1LDBMMTYwLjE1LDYwLjAxMnoiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik04MC4xNSwxNzkuOTkxbDU0LjIzOS01NS40NjhjNS44OTUtNi4wMjksMTUuNDUtNi4wMjksMjEuMzQsMGM1Ljg5NSw2LjAyOSw1Ljg5NSwxNS43OTYsMCwyMS44MjYNCgkJbC0zMi44OTksMzMuNjQzbDMyLjkwNCwzMy42NjNjNS44ODUsNi4wMjksNS44OSwxNS43OTYtMC4wMDUsMjEuODI2Yy01Ljg5NSw2LjAyOS0xNS40NSw2LjAyOS0yMS4zNDUsMEw4MC4xNSwxNzkuOTkxeiIvPg0KPC9nPg0KPC9zdmc%2BDQo%3D); background-size: 16px 24px; background-position: -8px -28px; }

.icon-complete { width: 28px; height: 28px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTAwcHgiIGhlaWdodD0iNTAwcHgiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MDAgNTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxjaXJjbGUgZmlsbD0iIzVGQ0Y4MCIgY3g9IjI1MCIgY3k9IjI1MCIgcj0iMjUwIi8%2BDQoJPGc%2BDQoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMjgsMzc2bC05NS05M2MtMTItMTEtMTItMzAsMC00MmMxMi0xMSwzMS0xMSw0MiwwbDQ5LDQ4bDk4LTExNmMxMS0xMiwyOS0xNCw0Mi00czE0LDI5LDQsNDFMMjI4LDM3NnoiDQoJCQkvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K); background-size: 100%; }

.icon-complete.track-updated { width: 34px; height: 34px; }

.icon-complete.stage-completed { width: 50px; height: 50px; }

.icon-stage { width: 28px; height: 31px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTYwcHgiIGhlaWdodD0iMzEwcHgiIHZpZXdCb3g9IjAgMCA1NjAgMzEwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NjAgMzEwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik00MjAsMGMtMTEsMC0xMTgsNjItMTE4LDYycy0yMiwxMS0yMiwzNGMwLDI4LDAsOTAsMCwxMThjMCwxNywxNywyOCwxNywyOHMxMTIsNjgsMTIzLDY4czEyMy02OCwxMjMtNjgNCgkJczE3LTExLDE3LTI4YzAtMjgsMC05MCwwLTExOGMwLTIzLTIyLTM0LTIyLTM0UzQzMSwwLDQyMCwwTDQyMCwweiIvPg0KPC9nPg0KPGc%2BDQoJPGc%2BDQoJCTxwYXRoIGZpbGw9IiM1RkNGODAiIGQ9Ik0xNDAsMEMxMjksMCwyMiw2MiwyMiw2MlMwLDczLDAsOTZjMCwyOCwwLDkwLDAsMTE4YzAsMTcsMTcsMjgsMTcsMjhzMTEyLDY4LDEyMyw2OHMxMjMtNjgsMTIzLTY4DQoJCQlzMTctMTEsMTctMjhjMC0yOCwwLTkwLDAtMTE4YzAtMjMtMjItMzQtMjItMzRTMTUxLDAsMTQwLDBMMTQwLDB6Ii8%2BDQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI3LDIyMGwtNTMtNTJjLTYtNi02LTE3LDAtMjNjNy02LDE3LTYsMjQsMGwyNywyN2w1NS02NmM2LTcsMTYtOCwyNC0yYzcsNiw4LDE2LDIsMjNMMTI3LDIyMHoiLz4NCgk8L2c%2BDQo8L2c%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 56px 31px; background-position: -28px 0; }

.icon-stage.icon-complete { background-position: 0 0; }

.icon-video, .icon-quiz, .icon-code-challenge, .icon-local-code-challenge, .icon-extra-credit { width: 28px; height: 28px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEyMHB4IiBoZWlnaHQ9IjI4MHB4IiB2aWV3Qm94PSIyNTAgMjI1IDExMjAgMjgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI1MCAyMjUgMTEyMCAyODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc%2BDQoJPGNpcmNsZSBmaWxsPSIjRDREOUREIiBjeD0iMzkwIiBjeT0iMzY1IiByPSIxNDAiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzc0LjQsMzA4LjhjLTEwLjktNy44LTIwLjItMS42LTIwLjIsMTAuOVY0MTBjMCwxNCw5LjMsMTguNywyMC4yLDEwLjlsNjIuMi00My42DQoJCWMxMC45LTcuOCwxMC45LTIwLjIsMC0yNi40TDM3NC40LDMwOC44eiIvPg0KPC9nPg0KPGc%2BDQoJPGNpcmNsZSBmaWxsPSIjRDREOUREIiBjeD0iNjcwIiBjeT0iMzY1IiByPSIxNDAiLz4NCgk8Zz4NCgkJPGc%2BDQoJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNjQxLjIsNDIwLjRjLTMuMSwwLTcuOC0xLjYtOS4zLTQuN0w1NzksMzY0LjRsNTIuOS01MS4zYzYuMi00LjcsMTQtNC43LDIwLjIsMHM2LjIsMTQsMCwyMC4yDQoJCQkJbC0zMi43LDMxLjFsMzIuNywzMS4xYzYuMiw0LjcsNi4yLDE0LDAsMjAuMkM2NDksNDE4LjksNjQ1LjksNDIwLjQsNjQxLjIsNDIwLjR6Ii8%2BDQoJCTwvZz4NCgkJPGc%2BDQoJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNjk3LjIsNDIwLjRjLTMuMSwwLTcuOC0xLjYtOS4zLTQuN2MtNi4yLTQuNy02LjItMTQsMC0yMC4ybDMyLjctMzEuMWwtMzIuNy0zMS4xDQoJCQkJYy02LjItNC43LTYuMi0xNCwwLTIwLjJjNi4yLTQuNywxNC00LjcsMjAuMiwwbDUyLjksNTEuM2wtNTIuOSw1MS4zQzcwMy40LDQxOC45LDcwMC4zLDQyMC40LDY5Ny4yLDQyMC40eiIvPg0KCQk8L2c%2BDQoJPC9nPg0KPC9nPg0KPGc%2BDQoJPGNpcmNsZSBmaWxsPSIjRDREOUREIiBjeD0iOTUwIiBjeT0iMzY1IiByPSIxNDAiLz4NCgk8Zz4NCgkJPGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBjeD0iODcwLjciIGN5PSIzNjUiIHI9IjI0LjkiLz4NCgkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTk1MCwzNDkuNGM3LjgsMCwxNS42LDYuMiwxNS42LDE1LjZjMCw3LjgtNi4yLDE1LjYtMTUuNiwxNS42cy0xNS42LTYuMi0xNS42LTE1LjZTOTQyLjIsMzQ5LjQsOTUwLDM0OS40DQoJCQkgTTk1MCwzNDAuMWMtMTQsMC0yNC45LDEwLjktMjQuOSwyNC45czEwLjksMjQuOSwyNC45LDI0LjlzMjQuOS0xMC45LDI0LjktMjQuOVM5NjQsMzQwLjEsOTUwLDM0MC4xTDk1MCwzNDAuMXoiLz4NCgkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwMjkuMywzNDkuNGM3LjgsMCwxNS42LDYuMiwxNS42LDE1LjZjMCw3LjgtNi4yLDE1LjYtMTUuNiwxNS42Yy05LjMsMC0xNS42LTYuMi0xNS42LTE1LjYNCgkJCVMxMDIxLjYsMzQ5LjQsMTAyOS4zLDM0OS40IE0xMDI5LjMsMzQwLjFjLTE0LDAtMjQuOSwxMC45LTI0LjksMjQuOXMxMC45LDI0LjksMjQuOSwyNC45czI0LjktMTAuOSwyNC45LTI0LjkNCgkJCVMxMDQzLjMsMzQwLjEsMTAyOS4zLDM0MC4xTDEwMjkuMywzNDAuMXoiLz4NCgk8L2c%2BDQo8L2c%2BDQo8Zz4NCgk8Y2lyY2xlIGZpbGw9IiNENEQ5REQiIGN4PSIxMjMwIiBjeT0iMzY1IiByPSIxNDAiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTMwMSw0MDMuNWMtMi41LTQuMy02LTEwLTEwLjUtMTcuMWMtNS4yLTguMi0xMC41LTE2LjQtMTMuNC0yMC44YzIuNy0zLjcsNy4zLTEwLjEsMTEuOC0xNi44DQoJCWMxMy45LTIwLjgsMTQuNS0yNS43LDEzLjktMjljLTAuNC0xLjktMS40LTMuNS0zLjEtNC42Yy0xLTAuNi0yLTEtNC0xYy0xLjksMC00LjYsMC4zLTkuMSwxYy00LjYsMC43LTEwLjcsMS43LTE4LjMsMy4xDQoJCWMtOC44LDEuNi0xNy41LDMuMy0yMi4zLDQuMmMtMi42LTMuNi03LjItMTAtMTIuMy0xNi42Yy0xMi45LTE2LjgtMTguMy0yMS45LTIxLjItMjMuOWMtMS42LTEuNy0zLjQtMi4xLTQuNy0yLjENCgkJYy0wLjcsMC0xLjMsMC4xLTEuNiwwLjJjLTAuMSwwLTAuMywwLjEtMC40LDAuMWMtMC4xLDAtMC4zLDAuMS0wLjQsMC4xYy0wLjksMC4yLTMuNiwxLjMtNC40LDQuOWMtMS40LDMuMi0zLjQsMTAuNC01LjgsMzEuNA0KCQljLTAuOSw4LjItMS42LDE2LjEtMiwyMC41Yy00LjUsMS42LTEyLjksNC43LTIxLjMsNy44Yy03LjIsMi43LTEzLjEsNS0xNy4zLDYuOGMtOC42LDMuNi0xMC4xLDQuNi0xMS4yLDYuNw0KCQljLTAuOSwxLjctMC45LDMuNi0wLjMsNS41YzEuMiwzLjEsNC4yLDcsMjYuOSwxNy43YzcuMywzLjQsMTQuNiw2LjYsMTguOCw4LjRjLTAuMiw1LjItMC41LDE1LTAuNywyNC43Yy0wLjIsOC40LTAuMiwxNS4xLTAuMSwyMA0KCQljMC4yLDkuMywwLjUsMTIuNSwzLjgsMTQuNGMwLjgsMC40LDEuOSwwLjksMy40LDAuOWMwLjcsMCwxLjUtMC4xLDIuMy0wLjNjMi0wLjYsNi43LTEuOSwyNi40LTIwLjZjNy41LTcuMiwxNC41LTE0LjMsMTguMi0xOC4xDQoJCWM1LjIsMS40LDE0LjgsMy45LDI1LDYuMmMxNi42LDMuNywyNC42LDQuNSwyOC44LDQuNWMyLjUsMCwzLjctMC4zLDQuNC0wLjVjMi42LTAuNyw0LTIuMiw0LjYtMy40DQoJCUMxMzA3LjEsNDE0LjUsMTMwNS43LDQxMS42LDEzMDEsNDAzLjV6Ii8%2BDQo8L2c%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 112px 28px; }

.icon-video { background-position: 0 0; }

.icon-code-challenge, .icon-local-code-challenge { background-position: -28px 0; }

.icon-quiz { background-position: -56px 0; }

.icon-extra-credit { background-position: -84px 0; }

.secondary-module .icon-video, .secondary-module .icon-video-small, .secondary-module .icon-code-challenge, .secondary-module .icon-quiz { width: 18px; height: 18px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTQwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCA1NDAgMTgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1NDAgMTgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxjaXJjbGUgZmlsbD0iI0Q0RDlERCIgY3g9IjkwIiBjeT0iOTAiIHI9IjkwIi8%2BDQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTgwLDUzLjg5OGMtNy01LTEzLTEtMTMsN3Y1OGMwLDksNiwxMiwxMyw3bDQwLTI4YzctNSw3LTEzLDAtMTdMODAsNTMuODk4eiIvPg0KPC9nPg0KPGc%2BDQoJPGNpcmNsZSBmaWxsPSIjRDREOUREIiBjeD0iMjcwIiBjeT0iOTAiIHI9IjkwIi8%2BDQoJPGc%2BDQoJCTxnPg0KCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTI1MS41LDEyNS42MjVjLTIsMC01LTEtNi0zbC0zNC0zM2wzNC0zM2M0LTMsOS0zLDEzLDBzNCw5LDAsMTNsLTIxLDIwbDIxLDIwYzQsMyw0LDksMCwxMw0KCQkJCUMyNTYuNSwxMjQuNjI1LDI1NC41LDEyNS42MjUsMjUxLjUsMTI1LjYyNXoiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yODcuNSwxMjUuNjI1Yy0yLDAtNS0xLTYtM2MtNC0zLTQtOSwwLTEzbDIxLTIwbC0yMS0yMGMtNC0zLTQtOSwwLTEzYzQtMyw5LTMsMTMsMGwzNCwzM2wtMzQsMzMNCgkJCQlDMjkxLjUsMTI0LjYyNSwyODkuNSwxMjUuNjI1LDI4Ny41LDEyNS42MjV6Ii8%2BDQoJCTwvZz4NCgk8L2c%2BDQo8L2c%2BDQo8Zz4NCgk8Y2lyY2xlIGZpbGw9IiNENEQ5REQiIGN4PSI0NTAiIGN5PSI5MCIgcj0iOTAiLz4NCgk8Zz4NCgkJPGNpcmNsZSBmaWxsPSIjRkZGRkZGIiBjeD0iMzk5IiBjeT0iOTAiIHI9IjE2Ii8%2BDQoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik00NTAsODBjNSwwLDEwLDQsMTAsMTBjMCw1LTQsMTAtMTAsMTBzLTEwLTQtMTAtMTBTNDQ1LDgwLDQ1MCw4MCBNNDUwLDc0Yy05LDAtMTYsNy0xNiwxNnM3LDE2LDE2LDE2DQoJCQlzMTYtNywxNi0xNlM0NTksNzQsNDUwLDc0TDQ1MCw3NHoiLz4NCgkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTUwMSw4MGM1LDAsMTAsNCwxMCwxMGMwLDUtNCwxMC0xMCwxMHMtMTAtNC0xMC0xMFM0OTYsODAsNTAxLDgwIE01MDEsNzRjLTksMC0xNiw3LTE2LDE2czcsMTYsMTYsMTYNCgkJCXMxNi03LDE2LTE2UzUxMCw3NCw1MDEsNzRMNTAxLDc0eiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K); background-size: 54px 18px; }

.secondary-module .icon-video { background-position: 0 0; }

.icon-video-small { background-position: 0 0; }

.secondary-module .icon-quiz { background-position: -36px 0; }

.secondary-module .icon-code-challenge, .secondary-module .icon-local-code-challenge { background-position: -18px 0; }

.icon-search { width: 15px; height: 18px; background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMwMCAxNTAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwMCAxNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IlNoYXBlXzI3Ml80XyI%2BDQoJPGc%2BDQoJCTxwYXRoIGZpbGw9IiNDMEM4Q0UiIGQ9Ik0xNDYuMzgyLDEyNi4yMWwtMzcuODQtMzcuMDYyYzUuOTc1LTkuMDE1LDguOTYyLTIwLjAzMyw4Ljk2Mi0zMS4wNTJDMTE3LjUwNCwyNi4wNDMsOTEuNjEzLDAsNTguNzUyLDANCgkJCUMyNi44ODYsMCwwLDI2LjA0MywwLDU4LjA5N2MwLDMyLjA1MywyNS44OTEsNTguMDk3LDU4Ljc1Miw1OC4wOTdjMTAuOTU0LDAsMjAuOTEyLTMuMDA1LDI4Ljg3OC04LjAxM2wzNy44NCwzOC4wNjMNCgkJCWM0Ljk3OSw1LjAwOCwxMy45NDEsNS4wMDgsMTkuOTE2LDBDMTUxLjM2MSwxNDAuMjM0LDE1MS4zNjEsMTMyLjIyLDE0Ni4zODIsMTI2LjIxeiBNNjAuNzQzLDg4LjE0Nw0KCQkJYy0xNi45MjgsMC0zMC44Ny0xNC4wMjMtMzAuODctMzAuMDVjMC0xNy4wMjgsMTMuOTQxLTMwLjA1LDMwLjg3LTMwLjA1czMwLjg3LDE0LjAyMywzMC44NywzMC4wNQ0KCQkJQzkwLjYxNyw3NS4xMjUsNzcuNjcyLDg4LjE0Nyw2MC43NDMsODguMTQ3eiIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJTaGFwZV8yNzJfMl8iPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjNUZDRjgwIiBkPSJNMjk2LjM4MiwxMjYuMjFsLTM3Ljg0LTM3LjA2MmM1Ljk3NS05LjAxNSw4Ljk2Mi0yMC4wMzMsOC45NjItMzEuMDUyQzI2Ny41MDQsMjYuMDQzLDI0MS42MTMsMCwyMDguNzUyLDANCgkJCUMxNzYuODg2LDAsMTUwLDI2LjA0MywxNTAsNTguMDk3YzAsMzIuMDUzLDI1Ljg5MSw1OC4wOTcsNTguNzUyLDU4LjA5N2MxMC45NTQsMCwyMC45MTItMy4wMDUsMjguODc4LTguMDEzbDM3Ljg0LDM4LjA2Mw0KCQkJYzQuOTc5LDUuMDA4LDEzLjk0MSw1LjAwOCwxOS45MTYsMEMzMDEuMzYxLDE0MC4yMzQsMzAxLjM2MSwxMzIuMjIsMjk2LjM4MiwxMjYuMjF6IE0yMTAuNzQzLDg4LjE0Nw0KCQkJYy0xNi45MjgsMC0zMC44Ny0xNC4wMjMtMzAuODctMzAuMDVjMC0xNy4wMjgsMTMuOTQxLTMwLjA1LDMwLjg3LTMwLjA1czMwLjg3LDE0LjAyMywzMC44NywzMC4wNQ0KCQkJQzI0MC42MTcsNzUuMTI1LDIyNy42NzIsODguMTQ3LDIxMC43NDMsODguMTQ3eiIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJTaGFwZV8yNzJfMV8iPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjNUZDRjgwIiBkPSJNMTY1LjUyNC0yMC41MjdsLTMuNzA2LTMuNzA2YzAuNjAxLTAuOTAyLDAuOTAyLTIuMDAzLDAuOTAyLTMuMTA1YzAtMy4yMDUtMi42MDQtNS44MS01LjkxLTUuODENCgkJCWMtMy4yMDUsMC01LjkxLDIuNjA0LTUuOTEsNS44MWMwLDMuMjA1LDIuNjA0LDUuODEsNS45MSw1LjgxYzEuMTAyLDAsMi4xMDQtMC4zMDEsMi45MDUtMC44MDFsMy44MDYsMy44MDYNCgkJCWMwLjUwMSwwLjUwMSwxLjQwMiwwLjUwMSwyLjAwMywwQzE2Ni4wMjUtMTkuMTI0LDE2Ni4wMjUtMTkuOTI2LDE2NS41MjQtMjAuNTI3eiBNMTU2LjkxLTI0LjMzMw0KCQkJYy0xLjcwMywwLTMuMTA1LTEuNDAyLTMuMTA1LTMuMDA1YzAtMS43MDMsMS40MDItMy4wMDUsMy4xMDUtMy4wMDVzMy4xMDUsMS40MDIsMy4xMDUsMy4wMDUNCgkJCUMxNTkuOTE1LTI1LjYzNSwxNTguNjEzLTI0LjMzMywxNTYuOTEtMjQuMzMzeiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K); background-size: 30px 15px; }

.icon-zip, .icon-video-file, .icon-transcript-file { width: 30px; height: 37px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOTAwcHgiIGhlaWdodD0iMzcwcHgiIHZpZXdCb3g9IjAgMCA5MDAgMzcwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA5MDAgMzcwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxyZWN0IHg9IjEzNSIgeT0iMTUwIiBmaWxsPSIjRDREOUREIiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiLz4NCgk8cGF0aCBmaWxsPSIjRDREOUREIiBkPSJNMTM1LDExMHYyMGgzMHYtMjBjLTUsMS0xMCwyLTE1LDJDMTQ1LDExMiwxNDAsMTExLDEzNSwxMTB6Ii8%2BDQoJPHJlY3QgeD0iMTM1IiB5PSIyMDEiIGZpbGw9IiNENEQ5REQiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIvPg0KCTxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik0xOTEsMEgyNEMwLDAsMCwyNCwwLDI0djMyMmMwLDI0LDI0LDI0LDI0LDI0aDI1MmMwLDAsMjQsMCwyNC0yNFYxMDBMMTkxLDB6IE0yMjEsNjBsMjAsMjBoLTIwVjYweg0KCQkgTTE2Niw3MGMwLDgtNywxNS0xNSwxNWMtOCwwLTE1LTctMTUtMTVzNy0xNSwxNS0xNUMxNTksNTUsMTY2LDYyLDE2Niw3MHogTTI3MSwzNDFIMzBWMjRoMTAxbDAsMGMtNiwxNy0xMSwzOC0xMSw0Ng0KCQljMCwxNiwxMywyOSwzMCwyOXMzMC0xMywzMC0yOWMwLTktNC0zMC0xMS00N2gyMWMwLDAsMCw0NiwwLDU1YzAsMTUsNywzMSwyNCwzMWMxNCwwLDM2LDAsNTYsMEwyNzEsMzQxTDI3MSwzNDF6Ii8%2BDQoJPHBhdGggZmlsbD0iI0Q0RDlERCIgZD0iTTEwNywyOThIODdsMjMtMjZjMS0xLDEtMiwyLTJjMS0xLDEtMSwyLTJjMS0xLDEtMiwxLTNzMC0yLDAtM3YtMWMwLTEsMC0yLTEtM2MwLTEtMS0yLTItMmMtMS0xLTItMS0zLTINCgkJYy0xLDAtMy0xLTQtMUg3MmMtMywwLTUsMS02LDJjLTEsMS0yLDMtMiw2djFjMCwzLDEsNCwyLDZjMSwxLDMsMiw2LDJoMThsLTIzLDI2Yy0xLDEtMSwyLTIsMmMtMSwxLTEsMS0yLDJjMCwxLTEsMi0xLDMNCgkJYzAsMSwwLDIsMCwzdjFjMCwxLDAsMiwxLDNjMCwxLDEsMiwyLDJjMSwxLDIsMSwzLDJjMSwwLDMsMSw0LDFoMzVjMywwLDUtMSw2LTJjMS0xLDItMywyLTZ2LTFjMC0zLTEtNC0yLTYNCgkJQzExMiwyOTksMTEwLDI5OCwxMDcsMjk4eiIvPg0KCTxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik0xNTIsMjUzaC0zYy01LDAtOCwzLTgsOXY0M2MwLDYsMyw5LDgsOWgzYzUsMCw4LTMsOC05di00M0MxNjAsMjU2LDE1NywyNTMsMTUyLDI1M3oiLz4NCgk8cGF0aCBmaWxsPSIjRDREOUREIiBkPSJNMTk3LDI1NGMtMywwLTUsMS03LDNjLTIsMi0yLDQtMiw4djQxYzAsMywxLDUsMiw2YzEsMSwzLDIsNiwyaDNjMywwLDUtMSw2LTJjMS0xLDItNCwyLTZ2LTloNw0KCQljOCwwLDE1LTIsMTktNXM3LTksNy0xNnMtMi0xMy03LTE2Yy00LTQtMTEtNS0yMC01TDE5NywyNTRMMTk3LDI1NHogTTIyMSwyNzVjMCwyLTEsNC0yLDZjLTEsMS00LDItNiwyaC03di0xNWg2DQoJCUMyMTgsMjY4LDIyMSwyNzAsMjIxLDI3NXoiLz4NCjwvZz4NCjxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik01ODMsMGMtNCwwLTE0LDAtMzMsMGgtMjBIMzY5aC0xMWMtMjQsMC0zNywwLTQxLDBjLTE3LDAtMTcsMTctMTcsMTd2MzM2YzAsMTcsMTcsMTcsMTcsMTdzMTQsMCw0MSwwaDEyDQoJaDE2MWgxMGMyOCwwLDQyLDAsNDIsMHMxNywwLDE3LTE3VjE3QzYwMCwxNyw2MDAsMCw1ODMsMHogTTM0OSwzMzBjMCw2LTQsMTAtMTAsMTBoLTEwYy02LDAtMTAtNC0xMC0xMHYtMzBjMC02LDQtMTAsMTAtMTBoMTANCgljNiwwLDEwLDQsMTAsMTBWMzMweiBNMzQ5LDI0MGMwLDYtNCwxMC0xMCwxMGgtMTBjLTYsMC0xMC00LTEwLTEwdi0zMGMwLTYsNC0xMCwxMC0xMGgxMGM2LDAsMTAsNCwxMCwxMFYyNDB6IE0zNDksMTYwDQoJYzAsNi00LDEwLTEwLDEwaC0xMGMtNiwwLTEwLTQtMTAtMTB2LTMwYzAtNiw0LTEwLDEwLTEwaDEwYzYsMCwxMCw0LDEwLDEwVjE2MHogTTM0OSw3MGMwLDYtNCwxMC0xMCwxMGgtMTBjLTYsMC0xMC00LTEwLTEwVjQwDQoJYzAtNiw0LTEwLDEwLTEwaDEwYzYsMCwxMCw0LDEwLDEwVjcweiBNNTMwLDMwdjE0MEgzNjlWMzBINTMweiBNMzY5LDM0MFYyMDBoMTYxdjE0MEgzNjl6IE01ODAsMzMwYzAsNi00LDEwLTEwLDEwaC0xMA0KCWMtNiwwLTEwLTQtMTAtMTB2LTMwYzAtNiw0LTEwLDEwLTEwaDEwYzYsMCwxMCw0LDEwLDEwVjMzMHogTTU4MCwyNDBjMCw2LTQsMTAtMTAsMTBoLTEwYy02LDAtMTAtNC0xMC0xMHYtMzBjMC02LDQtMTAsMTAtMTBoMTANCgljNiwwLDEwLDQsMTAsMTBWMjQweiBNNTgwLDE2MGMwLDYtNCwxMC0xMCwxMGgtMTBjLTYsMC0xMC00LTEwLTEwdi0zMGMwLTYsNC0xMCwxMC0xMGgxMGM2LDAsMTAsNCwxMCwxMFYxNjB6IE01ODAsNzANCgljMCw2LTQsMTAtMTAsMTBoLTEwYy02LDAtMTAtNC0xMC0xMFY0MGMwLTYsNC0xMCwxMC0xMGgxMGM2LDAsMTAsNCwxMCwxMFY3MHoiLz4NCjxnPg0KCTxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik04ODQuMTAzLDBjLTQuMDAxLDAtMTQuMDA1LDAtMzMuMDEyLDBoLTIwLjAwN0g2NjkuMDI1aC0xMS4wMDRjLTI0LjAwOSwwLTM3LjAxMywwLTQxLjAxNSwwDQoJCUM2MDAsMCw2MDAsMTcsNjAwLDE3djMzNmMwLDE3LDE3LjAwNiwxNywxNy4wMDYsMTdzMTQuMDA1LDAsNDEuMDE1LDBoMTEuMDA0aDE2MS4wNThoMTAuMDA0YzI4LjAxLDAsNDIuMDE1LDAsNDIuMDE1LDANCgkJczE3LjAwNiwwLDE3LjAwNi0xN1YxN0M5MDEuMTA5LDE3LDkwMS4xMDksMCw4ODQuMTAzLDB6IE02NDguMDE4LDMzMGMwLDYtNC4wMDEsMTAtMTAuMDA0LDEwSDYyOC4wMWMtNi4wMDIsMC0xMC4wMDQtNC0xMC4wMDQtMTANCgkJdi0zMGMwLTYsNC4wMDEtMTAsMTAuMDA0LTEwaDEwLjAwNGM2LjAwMiwwLDEwLjAwNCw0LDEwLjAwNCwxMFYzMzB6IE02NDguMDE4LDI0MGMwLDYtNC4wMDEsMTAtMTAuMDA0LDEwSDYyOC4wMQ0KCQljLTYuMDAyLDAtMTAuMDA0LTQtMTAuMDA0LTEwdi0zMGMwLTYsNC4wMDEtMTAsMTAuMDA0LTEwaDEwLjAwNGM2LjAwMiwwLDEwLjAwNCw0LDEwLjAwNCwxMFYyNDB6IE02NDguMDE4LDE2MA0KCQljMCw2LTQuMDAxLDEwLTEwLjAwNCwxMEg2MjguMDFjLTYuMDAyLDAtMTAuMDA0LTQtMTAuMDA0LTEwdi0zMGMwLTYsNC4wMDEtMTAsMTAuMDA0LTEwaDEwLjAwNGM2LjAwMiwwLDEwLjAwNCw0LDEwLjAwNCwxMFYxNjB6DQoJCSBNNjQ4LjAxOCw3MGMwLDYtNC4wMDEsMTAtMTAuMDA0LDEwSDYyOC4wMWMtNi4wMDIsMC0xMC4wMDQtNC0xMC4wMDQtMTBWNDBjMC02LDQuMDAxLTEwLDEwLjAwNC0xMGgxMC4wMDQNCgkJYzYuMDAyLDAsMTAuMDA0LDQsMTAuMDA0LDEwVjcweiBNODMwLjA4MywzMHYxNDBINjY4LjAyNVYzMEg4MzAuMDgzeiBNNjY4LjAyNSwzNDBWMjAwaDE2Mi4wNTl2MTQwSDY2OC4wMjV6IE04ODEuMTAyLDMzMA0KCQljMCw2LTQuMDAxLDEwLTEwLjAwNCwxMGgtMTAuMDA0Yy02LjAwMiwwLTEwLjAwNC00LTEwLjAwNC0xMHYtMzBjMC02LDQuMDAxLTEwLDEwLjAwNC0xMGgxMC4wMDRjNi4wMDIsMCwxMC4wMDQsNCwxMC4wMDQsMTBWMzMweg0KCQkgTTg4MS4xMDIsMjQwYzAsNi00LjAwMSwxMC0xMC4wMDQsMTBoLTEwLjAwNGMtNi4wMDIsMC0xMC4wMDQtNC0xMC4wMDQtMTB2LTMwYzAtNiw0LjAwMS0xMCwxMC4wMDQtMTBoMTAuMDA0DQoJCWM2LjAwMiwwLDEwLjAwNCw0LDEwLjAwNCwxMFYyNDB6IE04ODEuMTAyLDE2MGMwLDYtNC4wMDEsMTAtMTAuMDA0LDEwaC0xMC4wMDRjLTYuMDAyLDAtMTAuMDA0LTQtMTAuMDA0LTEwdi0zMA0KCQljMC02LDQuMDAxLTEwLDEwLjAwNC0xMGgxMC4wMDRjNi4wMDIsMCwxMC4wMDQsNCwxMC4wMDQsMTBWMTYweiBNODgxLjEwMiw3MGMwLDYtNC4wMDEsMTAtMTAuMDA0LDEwaC0xMC4wMDQNCgkJYy02LjAwMiwwLTEwLjAwNC00LTEwLjAwNC0xMFY0MGMwLTYsNC4wMDEtMTAsMTAuMDA0LTEwaDEwLjAwNGM2LjAwMiwwLDEwLjAwNCw0LDEwLjAwNCwxMFY3MHoiLz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTc0Ny4wNTMsMTA5YzAsNS0yLjAwMSw5LTUuMDAyLDExYy0zLjAwMSwzLTcuMDAzLDQtMTIuMDA0LDRjLTYuMDAyLDAtMTEuMDA0LTItMTQuMDA1LTYNCgkJCWMtNC4wMDEtNC01LjAwMi05LTUuMDAyLTE1YzAtNywxLTEyLDMuMDAxLTE3czUuMDAyLTgsNy4wMDMtMTFjMy4wMDEtMyw2LjAwMi01LDkuMDAzLTdjMy4wMDEtMiw2LjAwMi0zLDguMDAzLTRsOC4wMDMsMTMNCgkJCWMtMy4wMDEsMS02LjAwMiwzLTguMDAzLDZjLTIuMDAxLDMtNC4wMDEsNi00LjAwMSw5YzMuMDAxLDAsNi4wMDIsMSw5LjAwMyw0Qzc0NS4wNTMsMTAxLDc0Ny4wNTMsMTA1LDc0Ny4wNTMsMTA5eiBNNzkwLjA2OSwxMDkNCgkJCWMwLDUtMi4wMDEsOS01LjAwMiwxMWMtMy4wMDEsMi03LjAwMyw0LTEyLjAwNCw0Yy02LjAwMiwwLTExLjAwNC0yLTE1LjAwNS02Yy0zLjAwMS00LTUuMDAyLTktNS4wMDItMTVjMC03LDEtMTIsMy4wMDEtMTcNCgkJCXM1LjAwMi04LDcuMDAzLTExYzMuMDAxLTMsNi4wMDItNSw5LjAwMy03YzMuMDAxLTIsNi4wMDItMyw4LjAwMy00bDguMDAzLDEzYy0zLjAwMSwxLTYuMDAyLDMtOS4wMDMsNmMtMi4wMDEsMy00LjAwMSw2LTQuMDAxLDkNCgkJCWMzLjAwMSwwLDYuMDAyLDEsOS4wMDMsNEM3ODkuMDY5LDEwMSw3OTAuMDY5LDEwNSw3OTAuMDY5LDEwOXoiLz4NCgk8L2c%2BDQoJPGc%2BDQoJCTxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik03MDkuMDQsMjYxYzAtNSwyLjAwMS05LDUuMDAyLTExYzMuMDAxLTMsNy4wMDMtNCwxMi4wMDQtNGM2LjAwMiwwLDExLjAwNCwyLDE0LjAwNSw2DQoJCQljNC4wMDEsNCw1LjAwMiw5LDUuMDAyLDE1cy0xLDEyLTMuMDAxLDE3Yy0yLjAwMSw1LTUuMDAyLDgtOC4wMDMsMTFjLTMuMDAxLDMtNi4wMDIsNS05LjAwMyw3Yy0zLjAwMSwyLTYuMDAyLDMtOC4wMDMsNA0KCQkJbC04LjAwMy0xM2MzLjAwMS0xLDYuMDAyLTMsOS4wMDMtNmMzLjAwMS0yLDQuMDAxLTYsNC4wMDEtOWMtMy4wMDEsMC02LjAwMi0xLTkuMDAzLTRDNzEwLjA0LDI3MCw3MDkuMDQsMjY2LDcwOS4wNCwyNjF6DQoJCQkgTTc1My4wNTYsMjYxYzAtNSwyLjAwMS05LDUuMDAyLTExYzMuMDAxLTMsNy4wMDMtNCwxMi4wMDQtNGM2LjAwMiwwLDExLjAwNCwyLDE0LjAwNSw2YzQuMDAxLDQsNS4wMDIsOSw1LjAwMiwxNXMtMSwxMi0zLjAwMSwxNw0KCQkJYy0yLjAwMSw1LTUuMDAyLDgtOC4wMDMsMTFjLTMuMDAxLDMtNi4wMDIsNS05LjAwMyw3Yy0zLjAwMSwyLTYuMDAyLDMtOC4wMDMsNGwtOC4wMDMtMTNjMy4wMDEtMSw2LjAwMi0zLDkuMDAzLTYNCgkJCWMzLjAwMS0yLDQuMDAxLTYsNC4wMDEtOWMtMy4wMDEsMC02LjAwMi0xLTkuMDAzLTRDNzU1LjA1NiwyNzAsNzUzLjA1NiwyNjYsNzUzLjA1NiwyNjF6Ii8%2BDQoJPC9nPg0KPC9nPg0KPC9zdmc%2BDQo%3D); background-size: 90px 37px; }

.icon-video-file { background-position: -30px 0; }

.icon-transcript-file { background-position: -60px 0; }

.icon-play, .icon-play-white, .icon-video-small-white { width: 10px; height: 13px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOTkuOTk3cHgiIGhlaWdodD0iMTMwcHgiIHZpZXdCb3g9IjAgMCA5OS45OTcgMTMwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA5OS45OTcgMTMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMS45OTksMy41Yy0xMi04LTIyLTItMjIsMTN2OTdjMCwxNSwxMCwyMSwyMiwxM2w2OS00N2MxMi04LDEyLTIxLDAtMjlMMjEuOTk5LDMuNXoiLz4NCjwvc3ZnPg0K); background-size: 10px 13px; }

.icon-play-large { background: url("/assets/icons/icon-play-large-9f958a65a296dab0c53717cbd93cdf15425964fbb1b027de01be4d04d7a46503.svg") no-repeat; width: 21px; height: 28px; }

.icon-close { width: 12px; height: 12px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTIwcHgiIGhlaWdodD0iMTE5Ljk5OXB4IiB2aWV3Qm94PSIwIDAgMTIwIDExOS45OTkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyMCAxMTkuOTk5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xMTcsOTIuMjMxTDg1LDU5LjUwNGwzMi0zMi43MjdjNC0zLjk2Nyw0LTkuOTE3LDAtMTMuODg0bC0xMS05LjkxN2MtNC0zLjk2Ny0xMC0zLjk2Ny0xNCwwTDYwLDM1LjcwMg0KCUwyOCwyLjk3NWMtNC0zLjk2Ny0xMC0zLjk2Ny0xNCwwTDMsMTIuODkzYy00LDMuOTY3LTQsOS45MTcsMCwxMy44ODRsMzIsMzIuNzI3TDMsOTIuMjMxYy00LDMuOTY3LTQsOS45MTcsMCwxMy44ODRsMTEsMTAuOTA5DQoJYzQsMy45NjcsMTAsMy45NjcsMTQsMGwzMi0zMi43MjdsMzIsMzIuNzI3YzQsMy45NjcsMTAsMy45NjcsMTQsMGwxMS05LjkxN0MxMjEsMTAyLjE0OSwxMjEsOTYuMTk4LDExNyw5Mi4yMzF6Ii8%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 12px 12px; }

.icon-close-dark { width: 12px; height: 12px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTIwcHgiIGhlaWdodD0iMTE5Ljk5OXB4IiB2aWV3Qm94PSIwIDAgMTIwIDExOS45OTkiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyMCAxMTkuOTk5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik0xMTcsOTIuMjMxTDg1LDU5LjUwNGwzMi0zMi43MjdjNC0zLjk2Nyw0LTkuOTE3LDAtMTMuODg0bC0xMS05LjkxN2MtNC0zLjk2Ny0xMC0zLjk2Ny0xNCwwTDYwLDM1LjcwMg0KCUwyOCwyLjk3NWMtNC0zLjk2Ny0xMC0zLjk2Ny0xNCwwTDMsMTIuODkzYy00LDMuOTY3LTQsOS45MTcsMCwxMy44ODRsMzIsMzIuNzI3TDMsOTIuMjMxYy00LDMuOTY3LTQsOS45MTcsMCwxMy44ODRsMTEsMTAuOTA5DQoJYzQsMy45NjcsMTAsMy45NjcsMTQsMGwzMi0zMi43MjdsMzIsMzIuNzI3YzQsMy45NjcsMTAsMy45NjcsMTQsMGwxMS05LjkxN0MxMjEsMTAyLjE0OSwxMjEsOTYuMTk4LDExNyw5Mi4yMzF6Ii8%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 12px 12px; }

.icon-add-green { width: 14px; height: 14px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDIwcHgiIGhlaWdodD0iMTQwcHgiIHZpZXdCb3g9IjAgMCA0MjAgMTQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MjAgMTQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNDMEM4Q0UiIGQ9Ik0xMjAsNTBIOTAuN1YyMGMwLTExLTktMjAtMjAtMjBzLTIwLDktMjAsMjB2MzBIMjBDOSw1MCwwLDU5LDAsNzBzOSwyMCwyMCwyMGgzMC43djMwYzAsMTEsOSwyMCwyMCwyMA0KCXMyMC05LDIwLTIwVjkwSDEyMGMxMSwwLDIwLTksMjAtMjBTMTMxLDUwLDEyMCw1MHoiLz4NCjxwYXRoIGZpbGw9IiM2QkMxN0UiIGQ9Ik0yNjAsNTBoLTI5LjNWMjBjMC0xMS05LTIwLTIwLTIwcy0yMCw5LTIwLDIwdjMwSDE2MGMtMTEsMC0yMCw5LTIwLDIwczksMjAsMjAsMjBoMzAuN3YzMGMwLDExLDksMjAsMjAsMjANCglzMjAtOSwyMC0yMFY5MEgyNjBjMTEsMCwyMC05LDIwLTIwUzI3MSw1MCwyNjAsNTB6Ii8%2BDQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDAwLDUwaC0yOS4zVjIwYzAtMTEtOS0yMC0yMC0yMHMtMjAsOS0yMCwyMHYzMEgzMDBjLTExLDAtMjAsOS0yMCwyMHM5LDIwLDIwLDIwaDMwLjd2MzBjMCwxMSw5LDIwLDIwLDIwDQoJczIwLTksMjAtMjBWOTBINDAwYzExLDAsMjAtOSwyMC0yMFM0MTEsNTAsNDAwLDUweiIvPg0KPC9zdmc%2BDQo%3D); background-size: 42px 14px; background-position: -14px 0; }

.icon-mtf-error { width: 80px; height: 66px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iODBweCIgaGVpZ2h0PSI2NnB4IiB2aWV3Qm94PSIwIDAgODAgNjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDgwIDY2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik04MCwxOC4zODljMC05LjkyNy04LjA4MS0xNy45NzUtMTguMDUtMTcuOTc1Yy05LjQwNSwwLTE3LjEyMSw3LjE2NC0xNy45NjYsMTYuMzA5DQoJYy0xLjQwMS0wLjEzOC0yLjgyNy0wLjIxNi00LjI3OC0wLjIxNmMtMS4yNDIsMC0yLjQ2NiwwLjA1Ny0zLjY3MiwwLjE1OEMzNS4zNTgsNy4zNTIsMjcuNTc2LDAsMTguMDUsMEM4LjA4MSwwLDAsOC4wNDcsMCwxNy45NzQNCgljMCw2LjQ4NywzLjQ2MiwxMi4xNTMsOC42MzQsMTUuMzE0Yy0xLjEyNywyLjUtMS43NDgsNS4xNzgtMS43NDgsNy45NjZDNi44ODYsNTQuOTIsMjEuNTgsNjYsMzkuNzA2LDY2czMyLjgyLTExLjA4LDMyLjgyLTI0Ljc0Ng0KCWMwLTIuNTYzLTAuNTE3LTUuMDM1LTEuNDc3LTcuMzZDNzYuMzk4LDMwLjc3Myw4MCwyNS4wMDYsODAsMTguMzg5eiBNMTguMDUsMzEuNTMzYy03LjUyMSwwLTEzLjYxNy02LjA2OS0xMy42MTctMTMuNTYNCgljMC03LjQ4OCw2LjA5Ni0xMy41NiwxMy42MTctMTMuNTZjNy41MiwwLDEzLjYxNyw2LjA3MSwxMy42MTcsMTMuNTZDMzEuNjY3LDI1LjQ2NCwyNS41NywzMS41MzMsMTguMDUsMzEuNTMzeiBNNjIuMDA5LDMxLjUzMw0KCWMtNy41MiwwLTEzLjYxNi02LjA2OS0xMy42MTYtMTMuNTZjMC03LjQ4OCw2LjA5Ny0xMy41NiwxMy42MTYtMTMuNTZjNy41MjEsMCwxMy42MTcsNi4wNzEsMTMuNjE3LDEzLjU2DQoJQzc1LjYyNiwyNS40NjQsNjkuNTI5LDMxLjUzMyw2Mi4wMDksMzEuNTMzeiIvPg0KPGcgaWQ9IlNoYXBlXzVfY29weV8yNl8xXyIgb3BhY2l0eT0iMC44Ij4NCgk8Zz4NCgkJPGVsbGlwc2UgZmlsbD0iIzYwNjg2RSIgY3g9IjM1LjY4NSIgY3k9IjMwLjc1MSIgcng9IjEuNzcxIiByeT0iMS43NjIiLz4NCgk8L2c%2BDQo8L2c%2BDQo8ZyBpZD0iU2hhcGVfNV9jb3B5XzI3XzFfIiBvcGFjaXR5PSIwLjgiPg0KCTxnPg0KCQk8ZWxsaXBzZSBmaWxsPSIjNjA2ODZFIiBjeD0iNDQuMDUxIiBjeT0iMzAuNzUxIiByeD0iMS43NyIgcnk9IjEuNzYxIi8%2BDQoJPC9nPg0KPC9nPg0KPGcgaWQ9IlNoYXBlXzVfY29weV8yNV8zXyI%2BDQoJPGc%2BDQoJCTxlbGxpcHNlIGZpbGw9IiM2MDY4NkUiIGN4PSIxNy45OTIiIGN5PSIxNy45MzEiIHJ4PSI0LjQ5MSIgcnk9IjQuNDczIi8%2BDQoJPC9nPg0KPC9nPg0KPGcgaWQ9IlNoYXBlXzVfY29weV8yNV8xXyI%2BDQoJPGc%2BDQoJCTxlbGxpcHNlIGZpbGw9IiM2MDY4NkUiIGN4PSI2MS45NTIiIGN5PSIxNy45MzEiIHJ4PSI0LjQ5MSIgcnk9IjQuNDczIi8%2BDQoJPC9nPg0KPC9nPg0KPHBhdGggZmlsbD0iIzYwNjg2RSIgZD0iTTQ2LjcyOSw0OS42MzVjMCwzLjMyNi0zLjY5Niw2LjAyMy03LjAyMyw2LjAyM3MtNy4wMjMtMi42OTctNy4wMjMtNi4wMjNzMy42OTYtNi4wMjMsNy4wMjMtNi4wMjMNCglTNDYuNzI5LDQ2LjMwOSw0Ni43MjksNDkuNjM1eiIvPg0KPC9zdmc%2BDQo%3D); background-size: 80px 66px; }

.icon-info { width: 34px; height: 34px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2ODAgMzQwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2ODAgMzQwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6IzhFOTY5RDt9Cgkuc3Qxe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNzAsNTBjNjYsMCwxMjAsNTQsMTIwLDEyMHMtNTQsMTIwLTEyMCwxMjBTNTAsMjM2LDUwLDE3MFMxMDQsNTAsMTcwLDUwIE0xNzAsMEM3NiwwLDAsNzYsMCwxNzAKCXM3NiwxNzAsMTcwLDE3MHMxNzAtNzYsMTcwLTE3MFMyNjQsMCwxNzAsMEwxNzAsMHogTTE3MCwyNjBjLTE0LDAtMjUtMTEtMjUtMjR2LTY2YzAtMTQsMTEtMjQsMjUtMjRzMjUsMTEsMjUsMjR2NjYKCUMxOTUsMjQ5LDE4MywyNjAsMTcwLDI2MHogTTE3MCw4MGMxMy4zLDAsMjQsMTAuMywyNCwyM3MtMTAuNywyMy0yNCwyM3MtMjQtMTAuMy0yNC0yM1MxNTYuNyw4MCwxNzAsODB6Ii8%2BCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01MTAsNTBjNjYsMCwxMjAsNTQsMTIwLDEyMHMtNTQsMTIwLTEyMCwxMjBzLTEyMC01NC0xMjAtMTIwUzQ0NCw1MCw1MTAsNTAgTTUxMCwwYy05NCwwLTE3MCw3Ni0xNzAsMTcwCglzNzYsMTcwLDE3MCwxNzBzMTcwLTc2LDE3MC0xNzBTNjA0LDAsNTEwLDBMNTEwLDB6IE01MTAsMjYwYy0xNCwwLTI1LTExLTI1LTI0di02NmMwLTE0LDExLTI0LDI1LTI0czI1LDExLDI1LDI0djY2CglDNTM1LDI0OSw1MjMsMjYwLDUxMCwyNjB6IE01MTAsODBjMTMuMywwLDI0LDEwLjMsMjQsMjNzLTEwLjcsMjMtMjQsMjNzLTI0LTEwLjMtMjQtMjNTNDk2LjcsODAsNTEwLDgweiIvPgo8L3N2Zz4K); background-size: 68px 34px; }

.icon-info-small { width: 25px; height: 25px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjUwcHgiIGhlaWdodD0iMjUwcHgiIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNTAgMjUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRDREOUREIiBkPSJNMTI1LDM2Ljc2YzQ4LjY1LDAsODguMjQsMzkuNTgsODguMjQsODguMjRzLTM5LjU4LDg4LjI0LTg4LjI0LDg4LjI0Yy00OC42NSwwLTg4LjI0LTM5LjU4LTg4LjI0LTg4LjI0DQoJCQlTNzYuMzUsMzYuNzYsMTI1LDM2Ljc2IE0xMjUsMEM1NS45NiwwLDAsNTUuOTYsMCwxMjVjMCw2OS4wMyw1NS45NiwxMjUsMTI1LDEyNWM2OS4wNSwwLDEyNS01NS45NywxMjUtMTI1DQoJCQlDMjUwLDU1Ljk2LDE5NC4wNSwwLDEyNSwwTDEyNSwweiIvPg0KCTwvZz4NCgk8Zz4NCgkJPGc%2BDQoJCQk8cGF0aCBmaWxsPSIjRDREOUREIiBkPSJNMTI2LjE5LDE5My43MWMtMTAuMTUsMC0xOC4zOC04LjIzLTE4LjM4LTE4LjM4di01MGMwLTEwLjE1LDguMjMtMTguMzgsMTguMzgtMTguMzgNCgkJCQlzMTguMzgsOC4yMywxOC4zOCwxOC4zOHY1MEMxNDQuNTcsMTg1LjQ5LDEzNi4zNSwxOTMuNzEsMTI2LjE5LDE5My43MXoiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxjaXJjbGUgZmlsbD0iI0Q0RDlERCIgY3g9IjEyNi4yIiBjeT0iNzUuMDciIHI9IjE3Ljg2Ii8%2BDQoJCTwvZz4NCgk8L2c%2BDQo8L2c%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 25px 25px; }

.icon-alert { width: 34px; height: 34px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzQwcHgiIGhlaWdodD0iMzQwcHgiIHZpZXdCb3g9IjAgMCAzNDAgMzQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzNDAgMzQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRUQ1QTVBIiBkPSJNMTYwLDE5NmMtMi0zLTMtNy01LTEybC0xNC03MGMtMi0xMC0xLTE4LDQtMjRjNS02LDEyLTksMjEtOWg2YzEwLDAsMTgsMywyMiw5YzUsNiw2LDE0LDQsMjRsLTEzLDcwDQoJCQljLTEsNi0zLDEwLTUsMTJjLTIsMy01LDQtOCw0aC01QzE2NCwyMDAsMTYxLDE5OCwxNjAsMTk2eiBNMTQ1LDIzOHYtNGMwLTE1LDctMjIsMjEtMjJoNmMxNCwwLDIyLDcsMjIsMjJ2NGMwLDE1LTcsMjItMjIsMjJoLTYNCgkJCUMxNTMsMjYwLDE0NSwyNTMsMTQ1LDIzOHoiLz4NCgk8L2c%2BDQoJPHBhdGggZmlsbD0iI0VENUE1QSIgZD0iTTE3MCw1MGM2NiwwLDEyMCw1NCwxMjAsMTIwcy01NCwxMjAtMTIwLDEyMFM1MCwyMzYsNTAsMTcwUzEwNCw1MCwxNzAsNTAgTTE3MCwwQzc2LDAsMCw3NiwwLDE3MA0KCQlzNzYsMTcwLDE3MCwxNzBzMTcwLTc2LDE3MC0xNzBTMjY0LDAsMTcwLDBMMTcwLDB6Ii8%2BDQo8L2c%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 34px 34px; }

.icon-alert-gray { width: 34px; height: 34px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMzQgMzQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM0IDM0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6IzhFOTY5RDt9Cjwvc3R5bGU%2BCjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE2LDE5LjZjLTAuMi0wLjMtMC4zLTAuNy0wLjUtMS4ybC0xLjQtN2MtMC4yLTEtMC4xLTEuOCwwLjQtMi40QzE1LDguMywxNS43LDgsMTYuNiw4aDAuNgoJCWMxLDAsMS44LDAuMywyLjIsMC45YzAuNSwwLjYsMC42LDEuNCwwLjQsMi40bC0xLjMsN2MtMC4xLDAuNi0wLjMsMS0wLjUsMS4yYy0wLjIsMC4zLTAuNSwwLjQtMC44LDAuNGgtMC41CgkJQzE2LjQsMjAsMTYuMSwxOS44LDE2LDE5LjZ6IE0xNC41LDIzLjh2LTAuNGMwLTEuNSwwLjctMi4yLDIuMS0yLjJoMC42YzEuNCwwLDIuMiwwLjcsMi4yLDIuMnYwLjRjMCwxLjUtMC43LDIuMi0yLjIsMi4yaC0wLjYKCQlDMTUuMywyNiwxNC41LDI1LjMsMTQuNSwyMy44eiIvPgo8L2c%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNyw1YzYuNiwwLDEyLDUuNCwxMiwxMnMtNS40LDEyLTEyLDEyUzUsMjMuNiw1LDE3UzEwLjQsNSwxNyw1IE0xNywwQzcuNiwwLDAsNy42LDAsMTdjMCw5LjQsNy42LDE3LDE3LDE3CgljOS40LDAsMTctNy42LDE3LTE3QzM0LDcuNiwyNi40LDAsMTcsMEwxNywweiIvPgo8L3N2Zz4K); background-size: 34px 34px; text-indent: -9999px; }

.icon-alert-dark-gray { width: 34px; height: 34px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzRweCIgaGVpZ2h0PSIzNHB4IiB2aWV3Qm94PSIwIDAgMzQgMzQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDM0IDM0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM4MDhBOTEiIGQ9Ik0xNS45NTgsMTkuNTYyYy0wLjE4My0wLjI2LTAuMzQyLTAuNjctMC40ODEtMS4yMjhsLTEuMzU0LTcuMDQzYy0wLjI0NC0wLjk4OS0wLjEyNi0xLjc4NSwwLjM1Mi0yLjM4OQ0KCQljMC40NzktMC42MDMsMS4xOTMtMC45MDMsMi4xNDgtMC45MDNoMC42NWMxLjAwNiwwLDEuNzU0LDAuMzAxLDIuMjQsMC45MDNjMC40ODIsMC42MDQsMC42MDQsMS4zOTksMC4zNjIsMi4zODlsLTEuMzI4LDcuMDQzDQoJCWMtMC4xNDEsMC41NTgtMC4zMDgsMC45NjgtMC41MDksMS4yMjhjLTAuMTk5LDAuMjYyLTAuNDc1LDAuMzkzLTAuODIsMC4zOTNoLTAuNDkyQzE2LjM5NiwxOS45NTUsMTYuMTQzLDE5LjgyNCwxNS45NTgsMTkuNTYyeg0KCQkgTTE0LjU0LDIzLjgxM3YtMC40MzJjMC0xLjQ1NywwLjcxMi0yLjE4NywyLjEzNi0yLjE4N2gwLjZjMS40MzksMCwyLjE2LDAuNzI5LDIuMTYsMi4xODd2MC40MzJjMCwxLjQ1Ny0wLjcyMSwyLjE4Ny0yLjE2LDIuMTg3DQoJCWgtMC42QzE1LjI1MiwyNiwxNC41NCwyNS4yNzEsMTQuNTQsMjMuODEzeiIvPg0KPC9nPg0KPHBhdGggZmlsbD0iIzgwOEE5MSIgZD0iTTE3LDVjNi42MTcsMCwxMiw1LjM4MywxMiwxMnMtNS4zODMsMTItMTIsMTJTNSwyMy42MTcsNSwxN1MxMC4zODMsNSwxNyw1IE0xNywwQzcuNjExLDAsMCw3LjYxLDAsMTcNCgljMCw5LjM4OCw3LjYxMSwxNywxNywxN2M5LjM5MSwwLDE3LTcuNjEyLDE3LTE3QzM0LDcuNjEsMjYuMzkxLDAsMTcsMEwxNywweiIvPg0KPC9zdmc%2BDQo%3D); background-size: 34px 34px; text-indent: -9999px; }

.icon-included, .icon-check-green { width: 22px; height: 18px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDM5Ljk5OXB4IiBoZWlnaHQ9IjE4MHB4IiB2aWV3Qm94PSIwIDAgNDM5Ljk5OSAxODAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQzOS45OTkgMTgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM1RkNGODAiIGQ9Ik05MC41MDYsMTgwTDcuNSwxMDIuMDMyYy0xMC4wMDEtOS45OTYtMTAuMDAxLTI0Ljk5LDAtMzQuOTg1YzEwLjAwMS05Ljk5NiwyNy4wMDItOS45OTYsMzcuMDAyLDANCgkJbDQzLjAwMywzOS45ODNsODYuMDA2LTk3Ljk1OWM5LjAwMS0xMC45OTUsMjYuMDAyLTExLjk5NSwzNy4wMDItMi45OTljMTEuMDAxLDguOTk2LDEzLjAwMSwyMy45OSwzLDM0Ljk4NUw5MC41MDYsMTgweiIvPg0KPC9nPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0Q0RDlERCIgZD0iTTMxMC41MDYsMTgwTDIyNy41LDEwMi4wMzJjLTEwLjAwMS05Ljk5Ni0xMC4wMDEtMjQuOTksMC0zNC45ODVjMTAuMDAxLTkuOTk2LDI3LjAwMi05Ljk5NiwzNy4wMDIsMA0KCQlsNDMuMDAzLDM5Ljk4M0wzOTMuNTEsOS4wNzFjOS4wMDEtMTAuOTk1LDI2LjAwMi0xMS45OTUsMzcuMDAyLTIuOTk5YzExLjAwMSw4Ljk5NiwxMy4wMDEsMjMuOTksMywzNC45ODVMMzEwLjUwNiwxODB6Ii8%2BDQo8L2c%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 44px 18px; }

.icon-not-included { width: 18px; height: 18px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwLjAwMnB4IiB2aWV3Qm94PSIwIDAgMTgwIDE4MC4wMDIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4MCAxODAuMDAyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFRDVBNUEiIGQ9Ik0xNzUuNTI1LDEzOS43MjVsLTQ5LjcyNC00OS43MjRsNDkuNzI0LTQ5LjcyNGM1Ljk2Ny01Ljk2Nyw1Ljk2Ny0xNC45MTcsMC0xOS44OUwxNTkuNjEzLDQuNDc1DQoJYy01Ljk2Ny01Ljk2Ny0xNC45MTctNS45NjctMTkuODksMEw5MCw1NC4yTDQwLjI3Niw0LjQ3NmMtNS45NjctNS45NjctMTQuOTE3LTUuOTY3LTE5Ljg5LDBMNC40NzUsMjAuMzg4DQoJYy01Ljk2Nyw1Ljk2Ny01Ljk2NywxNC45MTcsMCwxOS44OWw0OS43MjQsNDkuNzIzTDQuNDc1LDEzOS43MjVjLTUuOTY3LDUuOTY3LTUuOTY3LDE0LjkxNywwLDE5Ljg4OWwxNS45MTIsMTUuOTEyDQoJYzUuOTY3LDUuOTY3LDE0LjkxNyw1Ljk2NywxOS44OSwwTDkwLDEyNS44MDJsNDkuNzI0LDQ5LjcyNGM1Ljk2Nyw1Ljk2NywxNC45MTcsNS45NjcsMTkuODksMGwxNS45MTItMTUuOTEyDQoJQzE3OS41MDMsMTUzLjY0NywxNzkuNTAzLDE0NC42OTcsMTc1LjUyNSwxMzkuNzI1eiIvPg0KPC9zdmc%2BDQo%3D); background-size: 18px 18px; }

.icon-play-button { width: 36px; height: 36px; border: 12px solid #fff; border-radius: 100px; }

.icon-play-button .icon-play { background: url("/assets/icons/icon-play-pause-ee3e40c3da0f1eb938dfb60167c06d5056912672d9ee8a46730402923528b124.png") no-repeat -10px 0; width: 12px; height: 18px; }

.icon-share { width: 23px; height: 18px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjMwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAyMzAgMTgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMzAgMTgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik02NC4wNywxMjUuOTE4YzkuMDEtMTQuMDIxLDMzLjAzNi0zNi4wNTUsOTAuMDk4LTM2LjA1NXYzMC4wNDZjMCw3LjAxMSw0LjAwNCw5LjAxNCwxMC4wMTEsNS4wMDgNCgkJbDYyLjA2Ny01My4wODFjNS4wMDUtNS4wMDgsNS4wMDUtMTIuMDE4LDAtMTYuMDI0TDE2NC4xNzgsMi43M2MtNS4wMDUtNS4wMDgtMTAuMDExLTMuMDA1LTEwLjAxMSw1LjAwOHYyOS4wNDQNCgkJYy0xNC4wMTUsMC04Mi4wODksMi4wMDMtOTQuMTAyLDg5LjEzNkM1OS4wNjQsMTMxLjkyNyw2MS4wNjYsMTMxLjkyNyw2NC4wNywxMjUuOTE4eiIvPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMC4wMjIsMTU5Ljk3VjU5LjgxN2g0OS4wNTNDODEuMDg4LDQ2Ljc5Nyw5Mi4xLDQwLjc4OCw5NC4xMDIsMzkuNzg3SDEyLjAxMw0KCQlDNS4wMDUsMzkuNzg3LDAsNDQuNzk0LDAsNTEuODA1djExNi4xNzdDMCwxNzQuOTkyLDUuMDA1LDE4MCwxMi4wMTMsMTgwaDE3NS4xOWM3LjAwOCwwLDEzLjAxNC01LjAwOCwxMy4wMTQtMTIuMDE4di01NC4wODINCgkJbC0yMC4wMjIsMTcuMDI2djI5LjA0NEgyMC4wMjJ6Ii8%2BDQo8L2c%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 23px 18px; }

.icon-doc { width: 13px; height: 16px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMzAgMTYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMzAgMTYwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6IzhFOTY5RDt9Cjwvc3R5bGU%2BCjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTIwLDBDOSwwLDAsOSwwLDIwdjEyMGMwLDExLDksMjAsMjAsMjBoOTBjMTEsMCwyMC05LDIwLTIwVjQ1LjdMODYuNCwwSDIweiBNNzAsNDBjMCwxMSw5LDIwLDIwLDIwaDIwdjgwSDIwCgkJVjIwaDUwVjQweiIvPgo8L2c%2BCjwvc3ZnPgo%3D); background-size: 13px 16px; }

.icon-reply { width: 17px; height: 13px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTcwcHgiIGhlaWdodD0iMTMwcHgiIHZpZXdCb3g9IjAgMCAxNzAgMTMwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNzAgMTMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik00LjM3MSwxMjUuNzY5YzkuMTE5LTEzLjk5OSwzMi41NTgtMzUuODY4LDkwLjI0NC0zNS44Njh2MzAuMDI4YzAsNy4wNCw0LjMxLDkuMDU5LDkuNjQ5LDQuNTENCglsNjEuNzQ2LTUyLjc3NmM1LjMyLTQuNTUsNS4zMi0xMS45MDksMC0xNi40NDlMMTA0LjI2NCwyLjQxN2MtNS4zNC00LjUzLTkuNjQ5LTIuNTEtOS42NDksNC41M3YyOC42OTgNCgljLTEzLjUwOS0wLjM2LTgyLjAzNCwyLjIyLTk0LjI5NCw4OC45MTRDLTAuNjQ4LDEzMS41MDgsMC41NDEsMTMxLjY0OCw0LjM3MSwxMjUuNzY5eiIvPg0KPC9zdmc%2BDQo%3D); background-size: 17px 13px; }

.icon-money { width: 60px; height: 40px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjAwcHgiIGhlaWdodD0iNDAwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MDAgNDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik01NzAsMEM1NDAsMCwzMCwwLDMwLDBDMCwwLDAsMjkuNjMxLDAsMjkuNjMxczAsMzExLjExOCwwLDM0MC43MzlDMCw0MDAsMzAsNDAwLDMwLDQwMHM1MTAsMCw1NDAsMA0KCXMzMC0yOS42MzEsMzAtMjkuNjMxVjI5LjYzMUM2MDAsMjkuNjMxLDYwMCwwLDU3MCwweiBNNDg4LjQ0LDY3LjA3MnYtN2MwLTUuNjIsNC42My0xMC4xNywxMC4zMi0xMC4xN2M1LjY3LDAsMTAuMyw0LjU2LDEwLjMsMTAuMTcNCgl2Ny4xM2MxMy40NCwyLjUxLDIwLjc4LDkuMTcsMjEuNzIsMTAuMWM0LjAxLDMuOTgsNC4wMSwxMC40MiwwLDE0LjM4Yy0zLjk5LDMuOTQtMTAuNDEsMy45OS0xNC40NSwwLjEzDQoJYy0wLjQ0LTAuMzgtNi4yMS01LjI4LTE3LjU3LTUuMjhjLTE4LjY0LDAtMjIuNywxMS40MS0yMi43LDE0LjIzYzAsNi45NiwwLDE2LjQ4LDI1LjE4LDIyLjY5MQ0KCWM0MC43OCwxMC4wNiw0MC43OCwzMy41OTEsNDAuNzgsNDIuNDUxYzAsMTIuNTctMTAuMzQsMjkuNjYxLTMyLjk2LDMzLjcwMXY3YzAsNS42MS00LjYzLDEwLjE3LTEwLjMsMTAuMTcNCgljLTUuNjksMC0xMC4zMi00LjU2LTEwLjMyLTEwLjE3di02Ljk5Yy0yMi45LTMuOTYtMzEuNDYtMjAuMjYxLTMxLjg4LTIxLjAzYy0yLjU1LTUuMDMtMC40Ny0xMS4xNCw0LjYzLTEzLjY2DQoJYzUuMDctMi41LDExLjI1LTAuNDUsMTMuODEsNC41NmMwLjE1LDAuMjYsNi4xNCwxMC42NCwyMy43NiwxMC42NGMxOC42MiwwLDIyLjYzLTExLjQxLDIyLjYzLTE0LjIzYzAtNi45NiwwLTE2LjQ4LTI1LjEzLTIyLjY5MQ0KCWMtNDAuNzctMTAuMDctNDAuNzctMzMuNTgxLTQwLjc3LTQyLjQ1MUM0NTUuNDksODguMTkyLDQ2NS43OSw3MS4xMDIsNDg4LjQ0LDY3LjA3MnogTTMwMCw0NC40NDFjNDkuNzEsMCw5MCwzOS44MDEsOTAsODguODkyDQoJYzAsMjMuNDIxLTkuMjUsNDQuNjgxLTI0LjI1LDYwLjU2MmMtNC4xNy03LjA3LTExLjI4LTE2LjY1LTIyLjkzLTI0Ljk2MWM4Ljk0LTExLjg5LDEzLjQyLTI4Ljc3MSwxMy40Mi01MC40MjENCgljMC0zMC42MzEtMjUuMjMtNTUuNTUxLTU2LjI0LTU1LjU1MXMtNTYuMjQsMjQuOTIxLTU2LjI0LDU1LjU1MWMwLDE2LjYsMi42NywzMC40NzEsOCw0MS40MjFjLTExLjg4LDYuMjYtMjAuMjYsMTUuMTYtMjYuMTgsMjMuMzYxDQoJYy05LjgyLTE0LjI0LTE1LjU4LTMxLjQ0MS0xNS41OC00OS45NzFDMjEwLDg0LjI0MiwyNTAuMyw0NC40NDEsMzAwLDQ0LjQ0MXogTTI3Ni45NiwxNTcuNzc0Yy03LjExLTcuODUtMTAuNy0yMS4wNS0xMC43LTM5LjI2MQ0KCWMwLTE4LjM4LDE1LjE1LTMzLjMzMSwzMy43NC0zMy4zMzFjMTguNjEsMCwzMy43NiwxNC45NSwzMy43NiwzMy4zMzFjMCwyMS45OTEtNS4yMiwzNi41NzEtMTUuNTIsNDMuMzMxDQoJYy0zLjM1LDIuMjItNS4yNiw2LjA2LTQuOTcsMTAuMDZjMC4yOSwzLjk5LDIuNzQsNy41Miw2LjQxLDkuMjNjMTcuODEsOC4zMSwyNS43OCwyMS42MTEsMjguNDksMjcuMTkxDQoJYy0xMy45Myw4Ljc1LTMwLjQzLDEzLjg5LTQ4LjE2LDEzLjg5Yy0yMi41NywwLTQzLjE0LTguMjctNTguOTYtMjEuODMxYzUuMzktOC43MSwxNS4wOC0yMC4yNDEsMzAuNTktMjQuNTIxDQoJYzMuNzMtMS4wNCw2LjY3LTMuOTEsNy43NS03LjU4QzI4MC40OCwxNjQuNjA0LDI3OS41NSwxNjAuNjI0LDI3Ni45NiwxNTcuNzc0eiBNOTIuOTcsNjcuMDcydi03YzAtNS42Miw0LjYzLTEwLjE3LDEwLjMtMTAuMTcNCgljNS42OCwwLDEwLjMxLDQuNTYsMTAuMzEsMTAuMTd2Ny4xM2MxMy40NSwyLjUxLDIwLjc3LDkuMTcsMjEuNzEsMTAuMWM0LjAxLDMuOTgsNC4wMSwxMC40MiwwLDE0LjM4DQoJYy0zLjk4LDMuOTQtMTAuNCwzLjk5LTE0LjQ0LDAuMTNjLTAuNDMtMC4zOC02LjIyLTUuMjgtMTcuNTgtNS4yOGMtMTguNjIsMC0yMi42OCwxMS40MS0yMi42OCwxNC4yM2MwLDYuOTYsMCwxNi40OCwyNS4xNywyMi42OTENCgljNDAuNzgsMTAuMDYsNDAuNzgsMzMuNTkxLDQwLjc4LDQyLjQ1MWMwLDEyLjU3LTEwLjMzLDI5LjY2MS0zMi45NiwzMy43MDF2N2MwLDUuNjEtNC42MywxMC4xNy0xMC4zMSwxMC4xNw0KCWMtNS42NywwLTEwLjMtNC41Ni0xMC4zLTEwLjE3di02Ljk5Yy0yMi45Mi0zLjk2LTMxLjQ2LTIwLjI2MS0zMS44OC0yMS4wM2MtMi41NS01LjAzLTAuNDctMTEuMTQsNC42My0xMy42Ng0KCWM1LjA2LTIuNSwxMS4yNS0wLjQ1LDEzLjgxLDQuNTZjMC4xNCwwLjI2LDYuMTQsMTAuNjQsMjMuNzUsMTAuNjRjMTguNjMsMCwyMi42NS0xMS40MSwyMi42NS0xNC4yM2MwLTYuOTYsMC0xNi40OC0yNS4xMy0yMi42OTENCglDNjAsMTMzLjE0Myw2MCwxMDkuNjMyLDYwLDEwMC43NzJDNjAsODguMTkyLDcwLjMsNzEuMTAyLDkyLjk3LDY3LjA3MnogTTU3MCwzNTUuNTU5YzAsMCwwLDE0LjgxLTE1LDE0Ljgxcy01MTAsMC01MTAsMA0KCXMtMTUsMC0xNS0xNC44MWMwLTE0LjgxLDAtMTQuODEsMC0xNC44MWg1NDBWMzU1LjU1OXogTTU3MCwyODEuNDg3YzAsMCwwLDE0LjgxLTE1LDE0Ljgxcy01MTAsMC01MTAsMHMtMTUsMC0xNS0xNC44MQ0KCXMwLTE0LjgxLDAtMTQuODFoNTQwVjI4MS40ODd6Ii8%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 60px 40px; }

.icon-calendar, .icon-calendar-white { width: 16px; height: 16px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzIwcHgiIGhlaWdodD0iMTYwcHgiIHZpZXdCb3g9IjAgMCAzMjAgMTYwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMjAgMTYwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNDNkNCRDEiIGQ9Ik0xMzguMjk3LDE4LjA2NWgtMjQuOTI5VjkuODg0YzAtNS40NzEtNC40MzktOS44ODQtOS44ODQtOS44ODRDOTguMDM5LDAsOTMuNiw0LjQxMyw5My42LDkuODg0djguMTgxDQoJSDY2LjQyNlY5Ljg4NEM2Ni40MjYsNC40MzksNjIuMDEzLDAsNTYuNTQyLDBjLTUuNDQ1LDAtOS44ODQsNC40MTMtOS44ODQsOS44ODR2OC4xODFIMjEuNzI5QzkuNzI5LDE4LjA2NSwwLDI3Ljc5NCwwLDM5Ljc5NHY4LjgyNg0KCXYyOS42MjZ2NjBDMCwxNTAuMjcxLDkuNzI5LDE2MCwyMS43MjksMTYwaDExNi41NDJjMTIsMCwyMS43MjktOS43MjksMjEuNzI5LTIxLjcyOXYtNjBWNDguNjQ1di04LjgyNg0KCUMxNjAuMDI2LDI3Ljc5NCwxNTAuMjk3LDE4LjA2NSwxMzguMjk3LDE4LjA2NXogTTE0MC4wNTEsNjEuMzY4djc0LjMyM2MwLDIuNC0xLjk2MSw0LjMzNS00LjMzNSw0LjMzNUgyNC4zMQ0KCWMtMi40LDAtNC4zMzUtMS45MzUtNC4zMzUtNC4zMzVWNDIuMzc0YzAtMi40LDEuOTYxLTQuMzM1LDQuMzM1LTQuMzM1aDIyLjM0OHY4LjA3N2MwLDUuNDQ1LDQuNDEzLDkuODg0LDkuODg0LDkuODg0DQoJYzUuNDQ1LDAsOS44ODQtNC40MTMsOS44ODQtOS44ODR2LTguMDc3aDI3LjE0OHY4LjA3N2MwLDUuNDQ1LDQuNDEzLDkuODg0LDkuODg0LDkuODg0YzUuNDQ1LDAsOS44ODQtNC40MTMsOS44ODQtOS44ODR2LTguMDc3DQoJaDIyLjM0OGMyLjQsMCw0LjMzNSwxLjk2MSw0LjMzNSw0LjMzNUwxNDAuMDUxLDYxLjM2OEwxNDAuMDUxLDYxLjM2OHoiLz4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTguMjk3LDE4LjA2NWgtMjQuOTI5VjkuODg0YzAtNS40NzEtNC40MzktOS44ODQtOS44ODQtOS44ODRjLTUuNDQ1LDAtOS44ODQsNC40MTMtOS44ODQsOS44ODR2OC4xODENCgloLTI3LjE3NFY5Ljg4NGMwLTUuNDQ1LTQuNDEzLTkuODg0LTkuODg0LTkuODg0Yy01LjQ0NSwwLTkuODg0LDQuNDEzLTkuODg0LDkuODg0djguMTgxaC0yNC45MjljLTEyLDAtMjEuNzI5LDkuNzI5LTIxLjcyOSwyMS43MjkNCgl2OC44MjZ2MjkuNjI2djYwYzAsMTIuMDI2LDkuNzI5LDIxLjc1NSwyMS43MjksMjEuNzU1aDExNi41NDJjMTIsMCwyMS43MjktOS43MjksMjEuNzI5LTIxLjcyOXYtNjBWNDguNjQ1di04LjgyNg0KCUMzMjAuMDI2LDI3Ljc5NCwzMTAuMjk3LDE4LjA2NSwyOTguMjk3LDE4LjA2NXogTTMwMC4wNTEsNjEuMzY4djc0LjMyM2MwLDIuNC0xLjk2MSw0LjMzNS00LjMzNSw0LjMzNUgxODQuMzENCgljLTIuNCwwLTQuMzM1LTEuOTM1LTQuMzM1LTQuMzM1VjQyLjM3NGMwLTIuNCwxLjk2MS00LjMzNSw0LjMzNS00LjMzNWgyMi4zNDh2OC4wNzdjMCw1LjQ0NSw0LjQxMyw5Ljg4NCw5Ljg4NCw5Ljg4NA0KCWM1LjQ0NSwwLDkuODg0LTQuNDEzLDkuODg0LTkuODg0di04LjA3N2gyNy4xNDh2OC4wNzdjMCw1LjQ0NSw0LjQxMyw5Ljg4NCw5Ljg4NCw5Ljg4NGM1LjQ0NSwwLDkuODg0LTQuNDEzLDkuODg0LTkuODg0di04LjA3Nw0KCWgyMi4zNDhjMi40LDAsNC4zMzUsMS45NjEsNC4zMzUsNC4zMzVMMzAwLjA1MSw2MS4zNjhMMzAwLjA1MSw2MS4zNjh6Ii8%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 32px 16px; }

.icon-calendar-white { background-position: -16px 0; }

.icon-github { width: 25px; height: 25px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjI1MHB4IiBoZWlnaHQ9Ijc1MHB4IiB2aWV3Qm94PSIwIDAgMjI1MCA3NTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyNTAgNzUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCQ0KCQk8ZWxsaXBzZSB0cmFuc2Zvcm09Im1hdHJpeCgwLjI2MjQgMC45NjUgLTAuOTY1IDAuMjYyNCA1MzIuOTY2IC01MDcuMDk2NikiIGZpbGw9IiNCN0MwQzciIGN4PSI1OTguMTgyIiBjeT0iOTUuMDcyIiByeD0iMjIuOTAyIiByeT0iMTYuMzUyIi8%2BDQoJPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTYyNC45OSwwQzU1NS45NywwLDUwMCw1NS45Nyw1MDAsMTI1czU1Ljk2LDEyNSwxMjQuOTksMTI1QzY5NC4wNCwyNTAsNzUwLDE5NC4wMyw3NTAsMTI1DQoJCVM2OTQuMDMsMCw2MjQuOTksMHogTTYzMS4zOCw5NS4zMWMwLDE5LjQxLTE4LjE2LDIxLjgzLTE4LjE2LDMwLjA4MWMwLDguMjYsMjQuMDksMTQuODcsMjQuMDksMzUuMzUNCgkJYzAsMzQuMTctNDIuMywzMi4yNS00Mi4zLDMyLjI1cy0zNi41NiwxLjMzLTM2LjU2LTI2LjIxczQxLjQ4LTI2LjQxLDQzLjYxLTI2LjQxYy0wLjUyLTYuMzMtNC43My01LjI4LTQuNzMtOC40di03LjcxDQoJCWMwLDAtMzEuMzksMy41MjEtMzEuMzktMjYuODhzMzUuOTItMzEuMjgsMzUuOTItMzEuMjhoMzUuNDRjMCw1LjQyLTE2LjE3LDMuNS0xNi4xNyw2LjM5QzYzMC4zMDEsNzYuNjYsNjMxLjM4LDgzLjY4LDYzMS4zOCw5NS4zMQ0KCQl6IE03MDMuODMxLDk4LjA3MWgtMjQuNjh2MjQuNjdoLTcuMjR2LTI0LjY3aC0yNC42OHYtNy4yNWgyNC42OFY2Ni4xMWg3LjI0djI0LjcxaDI0LjY4Vjk4LjA3MXoiLz4NCgk8cGF0aCBmaWxsPSIjQjdDMEM3IiBkPSJNNjAwLjY5MSwxODQuNDFjLTE0LjY0LDAuOTgtMjcuMDktNi44NS0yNy44Mi0xNy41M2MtMC43Mi0xMC42OCwxMC41Ny0yMC4xMywyNS4yLTIxLjEzDQoJCWMxNC42Mi0wLjk3LDI3LjA4LDYuODUsMjcuODEsMTcuNTNDNjI2LjU5LDE3My45NjEsNjE1LjMzMSwxODMuNDExLDYwMC42OTEsMTg0LjQxeiIvPg0KPC9nPg0KPGc%2BDQoJPHJlY3QgeD0iODM0LjA5IiB5PSIxMTEuNDQyIiBmaWxsPSIjQjdDMEM3IiB3aWR0aD0iMTcuNzciIGhlaWdodD0iNTMuNDM2Ii8%2BDQoJPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTg0My4xLDg1LjY5M2MtNi4xLDAtMTAuMDUsMy45OS0xMC4wNSw5LjIzOWMwLDUuMTI5LDMuODYsOS4yMzksOS44MSw5LjIzOWgwLjEyDQoJCWM2LjIxLDAsMTAuMDQtNC4xMSwxMC4wNC05LjIzOUM4NTIuOSw4OS42OTMsODQ5LjE3LDg1LjY5Myw4NDMuMSw4NS42OTN6Ii8%2BDQoJPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTg5NS40NSwxMTAuMTkxYy05LjQzLDAtMTMuNjY5LDUuMjA5LTE2LjAxLDguODV2MC4xNGgtMC4xMWMwLjAzLTAuMDMsMC4wOC0wLjEsMC4xMS0wLjE0di03LjU5OWgtMTcuNzUNCgkJYzAuMjEsNSwwLDUzLjQzNiwwLDUzLjQzNmgxNy43NVYxMzUuMDRjMC0xLjYsMC4xLTMuMTgsMC41OC00LjMxOWMxLjI5LTMuMTksNC4yLTYuNDksOS4xMS02LjQ5YzYuNDIsMCw4Ljk5MSw0LjksOC45OTEsMTIuMDY5DQoJCXYyOC41ODdoMTcuNzhWMTM0LjI3QzkxNS45MiwxMTcuODMsOTA3LjE2LDExMC4xOTEsODk1LjQ1LDExMC4xOTF6Ii8%2BDQoJPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTg3NS4wMiwwQzgwNS45NSwwLDc1MCw1NS45NTUsNzUwLDEyNXM1NS45NSwxMjUsMTI1LjAyLDEyNWM2OS4wNiwwLDEyNC45OC01NS45NjUsMTI0Ljk4LTEyNQ0KCQlDMTAwMCw1NS45MzUsOTQ0LjA3LDAsODc1LjAyLDB6IE05MzMuNzksMTc1LjY3NmMwLDQuNy0zLjg4LDguNDk5LTguNjcsOC40OTlIODI0LjkxYy00LjgzLDAtOC43MS0zLjgtOC43MS04LjQ5OVY3NC4zMTQNCgkJYzAtNC42OSwzLjg4LTguNDg5LDguNzEtOC40ODloMTAwLjIxYzQuNzgsMCw4LjY3LDMuODEsOC42Nyw4LjQ4OVYxNzUuNjc2eiIvPg0KPC9nPg0KPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTM3NS4wMSwwQzMwNS45NjUsMCwyNTAsNTUuOTcsMjUwLDEyNC45OUMyNTAsMTk0LjAyLDMwNS45NjUsMjUwLDM3NS4wMSwyNTBTNTAwLDE5NC4wMyw1MDAsMTI0Ljk5DQoJQzUwMC4wMSw1NS45Nyw0NDQuMDU1LDAsMzc1LjAxLDAgTTQxMS4yNjcsNzQuMDloLTE3LjUxOWMtMy41LDAtNi45OTksMy42My02Ljk5OSw2LjMzdjE4LjA1aDI0LjQ4OA0KCWMtMC45OCwxMy44My0yLjk5LDI2LjQ4LTIuOTksMjYuNDhIMzg2LjY0djc4LjQxaC0zMi4yMTh2LTc4LjQxaC0xNS42NTl2LTI2LjRoMTUuNjU5di0yMS41NmMwLTMuOTUtMC43OS0zMC4zNiwzMi45ODgtMzAuMzYNCgloMjMuODQ5TDQxMS4yNjcsNzQuMDlMNDExLjI2Nyw3NC4wOXoiLz4NCjxnPg0KCTxwYXRoIGZpbGw9IiNCN0MwQzciIGQ9Ik0xMzc0Ljk5NSwwQzEzMDUuOTQyLDAsMTI1MCw1NS45NywxMjUwLDEyNXM1NS45NTIsMTI1LDEyNC45OTUsMTI1QzE0NDQuMDI4LDI1MCwxNTAwLDE5NC4wMywxNTAwLDEyNQ0KCQlTMTQ0NC4wMjcsMCwxMzc0Ljk5NSwweiBNMTQ0Ny4zMzgsMTUwLjc1YzAsMTIuMzktMTAuNjIsMjIuNDgtMjMuNjIxLDIyLjQ4aC05Ny4zNTRjLTEzLjAxLDAtMjMuNzMxLTEwLjEtMjMuNzMxLTIyLjQ4di01MS41DQoJCWMwLTEyLjI4LDEwLjcyLTIyLjQ3LDIzLjczMS0yMi40N2g5Ny4zNTRjMTMsMCwyMy42MjEsMTAuMTksMjMuNjIxLDIyLjQ3VjE1MC43NUwxNDQ3LjMzOCwxNTAuNzV6Ii8%2BDQoJPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTE0MDQuMTA1LDEyMS40OGwtNDguMDczLTI2LjM0Yy0xLjc0LTAuOTYtNC4wNy0xLjEtNi0wLjM1Yy0xLjk0MSwwLjczLTMuMTgsMi4yNi0zLjE4LDMuODh2NTIuNjcNCgkJYzAsMS42MiwxLjI1LDMuMTMsMy4xOCwzLjg4YzAuODMsMC4zMSwxLjcsMC40NywyLjYyLDAuNDdjMS4xOCwwLDIuNC0wLjI3LDMuMzgtMC44M2w0OC4wNjItMjYuMzVjMS41MS0wLjgsMi4zNy0yLjEyLDIuMzctMy41MQ0KCQlDMTQwNi40NjYsMTIzLjYyLDE0MDUuNTY2LDEyMi4zMDEsMTQwNC4xMDUsMTIxLjQ4eiIvPg0KPC9nPg0KPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTEyNS4wMSwwQzU1Ljk2OSwwLDAsNTUuOTU5LDAsMTI0Ljk5OWMwLDY5LjAyLDU1Ljk2OSwxMjQuOTk5LDEyNS4wMSwxMjQuOTk5DQoJYzYyLjk1LDAsMTE1LjAxLTQ2LjUzOSwxMjMuNy0xMDcuMDdjMC44My00LjExLDEuMjItOC4zOCwxLjE1LTEyLjc2YzAuMDgtMS43MSwwLjE0LTMuNDMsMC4xNC01LjE2DQoJQzI0OS45OTksNTUuOTU5LDE5NC4wNSwwLDEyNS4wMSwweiBNMTgyLjU1LDEwMi4zMWMwLjA1LDEuMTgsMC4wNiwyLjMzLDAuMDYsMy41YzAsMzUuNjgtMjcuMTUsNzYuODMtNzYuODIsNzYuODMNCgljLTE1LjI2OSwwLTI5LjQ0LTQuNDQtNDEuNC0xMi4xMjljMi4xMSwwLjI0LDQuMjYsMC4zNyw2LjQzLDAuMzdjMTIuNjUsMCwyNC4yOS00LjI5LDMzLjU1LTExLjU0DQoJYy0xMS44Mi0wLjIyLTIxLjgtOC4wNC0yNS4yNi0xOC43NWMxLjY2LDAuMzEsMy4zNiwwLjQ5LDUuMTEsMC40OWMyLjQzLDAsNC44My0wLjM0LDcuMDktMC45NWMtMTIuMzUtMi40OC0yMS42Ny0xMy4zOS0yMS42Ny0yNi40Nw0KCWMwLTAuMTQsMC0wLjIzLDAtMC4zNGMzLjY2LDIuMDEsNy44MiwzLjI0LDEyLjI1LDMuMzhjLTcuMjgtNC44Ni0xMi4wMy0xMy4xMi0xMi4wMy0yMi40OWMwLTQuOTYsMS4zNC05LjU3LDMuNjYtMTMuNTkNCgljMTMuMzMsMTYuMzYsMzMuMjIsMjcuMDksNTUuNjgsMjguMjJjLTAuNDctMS45Ny0wLjcxLTQuMDYtMC43MS02LjE3YzAtMTQuOTIsMTIuMTItMjcuMDA5LDI3LjAxOS0yNy4wMDkNCgljNy43NiwwLDE0Ljc3LDMuMjksMTkuNyw4LjU0YzYuMTgtMS4yMiwxMS45NC0zLjQ1LDE3LjE3LTYuNTZjLTIuMDEsNi4zLTYuMjksMTEuNTktMTEuODksMTQuOTRjNS40OS0wLjYzLDEwLjY5LTIuMSwxNS41MS00LjI1DQoJQzE5Mi4zODksOTMuNzYsMTg3LjgyLDk4LjUsMTgyLjU1LDEwMi4zMXoiLz4NCjxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik0xMzc0Ljk4NCw1MDBDMTMwNS45NjcsNTAwLDEyNTAsNTU3LjM4MSwxMjUwLDYyOC4xNzJjMCw1Ni42MjEsMzUuODA4LDEwNC42NjIsODUuNDg3LDEyMS42MTMNCgljNi4yNSwxLjE4LDguNTMtMi43OCw4LjUzLTYuMThjMC0zLjA0LTAuMTEtMTEuMS0wLjE3LTIxLjhjLTM0Ljc2OSw3Ljc1LTQyLjEwOC0xNy4xOC00Mi4xMDgtMTcuMTgNCgljLTUuNjgtMTQuODEtMTMuODc5LTE4Ljc1LTEzLjg3OS0xOC43NWMtMTEuMzQ5LTcuOTUsMC44Ni03Ljc5LDAuODYtNy43OWMxMi41MzksMC45MSwxOS4xNSwxMy4yMSwxOS4xNSwxMy4yMQ0KCWMxMS4xNSwxOS41OSwyOS4yNTksMTMuOTMsMzYuMzc4LDEwLjY1YzEuMTQxLTguMjgsNC4zNTktMTMuOTMsNy45NC0xNy4xM2MtMjcuNzU5LTMuMjMtNTYuOTM3LTE0LjIzLTU2LjkzNy02My4zNDENCgljMC0xMy45OSw0Ljg3LTI1LjQzLDEyLjg3LTM0LjM5MWMtMS4yOS0zLjI0LTUuNTctMTYuMjcsMS4yMjktMzMuOTIxYzAsMCwxMC41LTMuNDUxLDM0LjM2OCwxMy4xNA0KCWM5Ljk2OS0yLjg0LDIwLjY2LTQuMjYxLDMxLjI4OS00LjMxYzEwLjYwOSwwLjA1LDIxLjMwOSwxLjQ3LDMxLjI4OSw0LjMxYzIzLjg1OS0xNi41ODEsMzQuMzM4LTEzLjE0LDM0LjMzOC0xMy4xNA0KCWM2LjgxOSwxNy42NSwyLjUzLDMwLjY4MSwxLjI0LDMzLjkyMWM4LjAxLDguOTYxLDEyLjg1LDIwLjQsMTIuODUsMzQuMzkxYzAsNDkuMjQxLTI5LjIyOSw2MC4wNzEtNTcuMDY4LDYzLjI0MQ0KCWM0LjQ5LDMuOTYsOC40OSwxMS43OCw4LjQ5LDIzLjczMWMwLDE3LjEzLTAuMTUsMzAuOTYtMC4xNSwzNS4xNjFjMCwzLjQzLDIuMjUsNy40MTEsOC42LDYuMTYNCgljNDkuNjI4LTE2Ljk4LDg1LjQwNy02NC45OTEsODUuNDA3LTEyMS41OTNDMTQ5OS45OSw1NTcuMzgxLDE0NDQuMDIyLDUwMCwxMzc0Ljk4NCw1MDB6Ii8%2BDQo8Zz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTYyOS40NzksNjI1LjY2MWMwLjgzLTAuMjcsMS42OC0wLjUyLDIuNTItMC43NmMtMS42MS0zLjY0LTMuMzYtNy4yOC01LjE4OS0xMC44Nw0KCQljLTMxLjk4Nyw5LjU3LTYzLjAzNSw5LjE3LTY1LjgzNSw5LjEyYy0wLjAyLDAuNjUtMC4wMywxLjMtMC4wMywxLjk1OWMwLDE2LjQ1LDYuMjQsMzEuNDgsMTYuNDY5LDQyLjgzDQoJCUMxNTc4Ljg2NCw2NjUuNDUxLDE1OTYuNDQyLDYzNi4zNDEsMTYyOS40NzksNjI1LjY2MXoiLz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTYyMS41Miw2MDQuMTdjLTEwLjYxLTE4Ljg3LTIyLjA1OC0zNC43My0yMy43NDktMzcuMDVjLTE3LjkxOCw4LjQ1LTMxLjMxOCwyNC45OC0zNS40NjgsNDQuODUNCgkJQzE1NjUuMTY0LDYxMi4wMSwxNTkxLjU1Myw2MTIuMTMsMTYyMS41Miw2MDQuMTd6Ii8%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTE2NjcuNDY2LDU3Ny4xODFjLTExLjMxLTEwLjA0LTI2LjE4OC0xNi4xNC00Mi40NjctMTYuMTRjLTUuMTY5LDAtMTAuMTg5LDAuNjItMTUuMDA5LDEuNzgNCgkJYzEuNzcsMi4zNywxMy40MDksMTguMjIsMjMuODk4LDM3LjVDMTY1Ni42NjcsNTkxLjc4LDE2NjYuMzA3LDU3OC44MjEsMTY2Ny40NjYsNTc3LjE4MXoiLz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTYzNS45MjksNjM1LjYzMWMtMzYuMTI3LDEyLjU5LTQ5LjA5NiwzNy42NS01MC4yNTYsNDAuMDFjMTAuODU5LDguNDcsMjQuNTA4LDEzLjUyLDM5LjMxNywxMy41Mg0KCQljOC44NywwLDE3LjMyOS0xLjgyLDI1LjAxOC01LjA5Yy0wLjk1LTUuNjItNC42Ny0yNS4yMS0xMy42NjgtNDguNThDMTYzNi4yMTgsNjM1LjU0LDE2MzYuMDc4LDYzNS41ODEsMTYzNS45MjksNjM1LjYzMXoiLz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTYyNS4wMSw1MDBjLTY5LjA0NSwwLTEyNS4wMSw1NS45Ny0xMjUuMDEsMTI0Ljk5YzAsNjkuMDMsNTUuOTY1LDEyNS4wMSwxMjUuMDEsMTI1LjAxDQoJCVMxNzUwLDY5NC4wMywxNzUwLDYyNC45OUMxNzUwLjAxLDU1NS45NzEsMTY5NC4wNTQsNTAwLDE2MjUuMDEsNTAweiBNMTYyNSw3MDAuMDAxYy00MS4zNDcsMC03NC45OTQtMzMuNjUtNzQuOTk0LTc1DQoJCXMzMy42NDctNzUsNzQuOTk0LTc1czc0Ljk5NCwzMy42NSw3NC45OTQsNzVTMTY2Ni4zNDcsNzAwLjAwMSwxNjI1LDcwMC4wMDF6Ii8%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTE2NDguMzQ4LDYzMi41MzFjOC4zNzksMjMuMDIxLDExLjc4OSw0MS43ODEsMTIuNDQ5LDQ1LjY4YzE0LjM2OS05LjcyLDI0LjU5OS0yNS4xMSwyNy40NTgtNDIuOTQNCgkJQzE2ODYuMDU1LDYzNC41NywxNjY4LjQxNiw2MjkuMzEsMTY0OC4zNDgsNjMyLjUzMXoiLz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTYzOC44MTksNjA5Ljg1MWMxLjQ5LDMuMDUsMi45Miw2LjE1LDQuMjUsOS4yOGMwLjQ2OSwxLjExLDAuOTMsMi4yMSwxLjM4LDMuMzENCgkJYzIxLjMxOS0yLjY4LDQyLjQ5NywxLjYyLDQ0LjYwNywyLjA2Yy0wLjE0LTE1LjEyLTUuNTQtMjktMTQuNDY5LTM5LjkxQzE2NzMuMjM2LDU4Ni40MTEsMTY2Mi40OTcsNjAwLjE4LDE2MzguODE5LDYwOS44NTF6Ii8%2BDQo8L2c%2BDQo8Zz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTgyMy45MjQsNjAzLjE5Yy0xLjk1LTEuMzYtNC4yMzktMi4xLTYuNjQ5LTIuMWMtNi41MywwLTExLjg0OSw1LjQ2LTExLjg0OSwxMi4xNw0KCQljMCwzLjUzLDEuNTEsNi44Myw0LjAzLDkuMTFDMTgxMi4wNTUsNjE1LjE4LDE4MTcuMDk0LDYwOC42NCwxODIzLjkyNCw2MDMuMTl6Ii8%2BDQoJPGVsbGlwc2UgZmlsbD0iI0QzRDlERCIgY3g9IjE5MjcuMTg2IiBjeT0iNTY0LjQ5IiByeD0iOC42NzkiIHJ5PSI4LjkyIi8%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTE4NzQuODcsNTkyLjY3MWMtMzQuMTY3LDAtNjEuOTY1LDE4LjM0LTYxLjk2NSw0MC44OGMwLDIyLjU0LDI3Ljc5Nyw0MC44OCw2MS45NjUsNDAuODgNCgkJYzM0LjE2NywwLDYxLjk2NS0xOC4zNCw2MS45NjUtNDAuODhDMTkzNi44MzUsNjExLjAxMSwxOTA5LjAzNyw1OTIuNjcxLDE4NzQuODcsNTkyLjY3MXogTTE4NDIuODQyLDYyNS4zNA0KCQljMC02LjAyLDQuNzUtMTAuOSwxMC42MTktMTAuOWM1Ljg2LDAsMTAuNjE5LDQuODgsMTAuNjE5LDEwLjlzLTQuNzUsMTAuOS0xMC42MTksMTAuOQ0KCQlDMTg0Ny41OTIsNjM2LjI1LDE4NDIuODQyLDYzMS4zNywxODQyLjg0Miw2MjUuMzR6IE0xODk5Ljg5OCw2NTQuODRjLTAuMzIsMC4zNC03Ljk0LDguMy0yNS4xNDgsOC4zDQoJCWMtMTcuMzA5LDAtMjQuMjI4LTguMDctMjQuNTE5LTguNDFjLTAuOTgtMS4xNzEtMC44NC0yLjkzLDAuMy0zLjkzYzEuMTMtMC45OSwyLjgzLTAuODYsMy44MSwwLjI5DQoJCWMwLjE2LDAuMTcsNS45MjksNi40OCwyMC40MDksNi40OGMxNC43MjksMCwyMS4xNzgtNi41MywyMS4yNDgtNi42YzEuMDQtMS4wOSwyLjc1OS0xLjEyLDMuODMtMC4wNQ0KCQlDMTkwMC44ODgsNjUxLjk5MSwxOTAwLjkyOCw2NTMuNzMxLDE4OTkuODk4LDY1NC44NHogTTE4OTcuNzg4LDYzNi4yNWMtNS44NywwLTEwLjYxOS00Ljg4LTEwLjYxOS0xMC45czQuNzUtMTAuOSwxMC42MTktMTAuOQ0KCQljNS44NiwwLDEwLjYxLDQuODgsMTAuNjEsMTAuOUMxOTA4LjM5Nyw2MzEuMzcsMTkwMy42NDcsNjM2LjI1LDE4OTcuNzg4LDYzNi4yNXoiLz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTkzMi43MTUsNjAxLjFjLTIuNDYsMC00LjgsMC43Ny02Ljc3OSwyLjJjNi44MjksNS40NywxMS44MzksMTIuMDMsMTQuMzk5LDE5LjI2DQoJCWMyLjY0LTIuMjksNC4yMy01LjY2LDQuMjMtOS4yOUMxOTQ0LjU2NCw2MDYuNTUsMTkzOS4yNTUsNjAxLjEsMTkzMi43MTUsNjAxLjF6Ii8%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTE4NzUuMDEsNTAwYy02OS4wNDUsMC0xMjUuMDEsNTUuOTctMTI1LjAxLDEyNC45OWMwLDY5LjAzLDU1Ljk2NSwxMjUuMDEsMTI1LjAxLDEyNS4wMQ0KCQlTMjAwMCw2OTQuMDMsMjAwMCw2MjQuOTlDMjAwMC4wMSw1NTUuOTcxLDE5NDQuMDU1LDUwMCwxODc1LjAxLDUwMHogTTE5NDEuODI1LDYyOC4zMWMwLjI4LDEuNzIsMC40NCwzLjQ3LDAuNDQsNS4yNA0KCQljMCwyNS42MS0zMC4yMjcsNDYuNDUtNjcuMzg1LDQ2LjQ1Yy0zNy4xNTgsMC02Ny4zODUtMjAuODQtNjcuMzg1LTQ2LjQ1YzAtMS44MywwLjE3LTMuNjIsMC40Ny01LjM5DQoJCWMtNC45MS0zLjI2LTcuOTQ5LTguODQtNy45NDktMTQuODljMC05Ljc4MSw3Ljc0OS0xNy43NCwxNy4yNzktMTcuNzRjNC4xOSwwLDguMTQsMS41NCwxMS4yOCw0LjMzDQoJCWMxMS42NDktNy42MSwyNy4yMjgtMTIuMzksNDQuMzk2LTEyLjcybDEyLjA3LTM1LjIybDI5LjA3OCw3LjE0YzIuMDk5LTUuMyw3LjE2LTkuMDUsMTMuMDY5LTkuMDVjNy43NzksMCwxNC4xMDksNi41LDE0LjEwOSwxNC40OQ0KCQljMCw3Ljk5LTYuMzMsMTQuNDktMTQuMTA5LDE0LjQ5Yy03Ljc2OSwwLTE0LjA4OS02LjQ4LTE0LjEwOS0xNC40NmwtMjQuNTQ4LTYuMDNsLTkuODMsMjguNjgNCgkJYzE2LjQ3OSwwLjY0LDMxLjM4OCw1LjM5LDQyLjYyNywxMi43N2MzLjE2LTIuODUsNy4xNS00LjQzLDExLjM4OS00LjQzYzkuNTI5LDAsMTcuMjc5LDcuOTYsMTcuMjc5LDE3Ljc0DQoJCUMxOTQ5Ljk5NCw2MTkuNDExLDE5NDYuODY0LDYyNS4wOCwxOTQxLjgyNSw2MjguMzF6Ii8%2BDQo8L2c%2BDQo8Zz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMjE4NS4xODUsNjA5Ljg4MWMwLjM4OSwwLjYyLDEuMDUxLDEuMjcsMS42MSwxLjc1YzAuNTUsMC40OCwxLjEwOSwwLjk4LDEuODY5LDAuOTUNCgkJYzAuMjItMC4wMSwxLjI3MS0wLjE2LDEuNDMtMC4yOWMwLjAyLTAuMDIsMC4wNC0wLjA2LDAuMDUtMC4wOGMtMC42NC0zLjI4LTEuNTItNi40Ny0yLjYyOS05LjU2Yy0wLjA3LDAuMTMtMC4xNSwwLjI1LTAuMzAxLDAuMzgNCgkJYy0wLjM2OSwwLjMzLTAuODEsMC40NC0xLjEzOSwwLjg2Yy0wLjMxMSwwLjM5LTAuMjUsMC43LTAuNTAxLDEuMTYxYy0wLjEyLDAuMjItMC40MDksMC4zMS0wLjUzLDAuNTcNCgkJYy0wLjI3MSwwLjU4LDAuMDQsMS40OSwwLjAxLDIuMTNDMjE4NS4wMjUsNjA4LjUzMSwyMTg0Ljc2NSw2MDkuMjExLDIxODUuMTg1LDYwOS44ODF6Ii8%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTIxMzMuNjU4LDU2MS45NGMwLjY5LDAuMTEsMS4zOSwwLjIxLDIuMDgsMC4zMmMtMSwzLjAyLTYuMjA5LDEtOC4zNjksMWMxLjY5LTAuNjYsNC4yMi0xLjU0LDUuNjQtMi41OA0KCQljMC43NS0wLjU1LTAuMDEtMC45MSwxLjAxLTEuNDVjLTIuOTU5LTAuNDAxLTUuOTY5LTAuNjMtOS4wMy0wLjYzYy00Ljc0LDAtOS4zNjksMC41MS0xMy44MjksMS40NmgwLjI0DQoJCWMtMC45OSwwLjU3LTIuOTA5LDIuNDQtMS43OSwzLjYxYzEuMTAxLDEuMTQxLDIuNC0wLjYxLDMuNS0xLjE2YzIuNTUtMS4yOCw1Ljk0OS0xLjQxLDguNzgtMS45NmMtMC41LDEuMzMtNC41MjksMC44NS01LjkzOSwxLjM2DQoJCWMtMS43NywwLjY1LTAuOTgsMS4xLTIuMjIsMy4wOGMwLjUzLTAuMDYsMS4xMDEsMC4yNSwxLjY0LDAuMjR2MC4zNmMtMS4yMTktMC4xMS0yLjM4LTAuNjgtMi42NCwwLjc2DQoJCWMtMS41Ni0yLjM0LTIuNTgtMi4xNS00LjI0LTAuMDhjMS42NCwwLjkxLDMuMjYsMi4wNSwxLjk2LDMuNjJjLTEuNTgsMS45MS0yLjUzLTAuNDQtMC45Mi0xLjQyYy0xLjQ3LTAuNjgtMi42MS0xLjgzLTMuNzYtMC4zNg0KCQljMC40OTEtMC4wNSwxLjAyLDAuMiwxLjUyLDAuMmMtMC4yODEsMC40MDEtMC41NiwxLjcxLTAuODMsMS44NmMtMC42MywwLjM2LTIuOTctMC40My0zLjY1OS0wLjUxYy0xLjc0LTAuMjEtMy40Ni0wLjE2LTUuMjI5LTAuMDcNCgkJYzAuMzIxLDIuMTctMi4xMDksMC4wOS0zLTAuNDRjMS42MS0xLjYzLDMuNTU5LTEuMDEsNS40Mi0wLjc2YzEuNTUsMC4yMSwzLjg1LDAuMiw0LjAzLTEuNzdjLTEuNjktMC4zNi0yLjUyLTAuMjUtMy4zOS0xLjU0DQoJCWMtMC4zNC0wLjUxLTAuNTctMS4wNC0wLjY1LTEuNTdjLTEwLjU0OSw0LjMxLTE5LjczOSwxMS4yNi0yNi43NjgsMjAuMDJjMS41NiwxLjA4LDMuMjMsMi4zOCwzLjg3LDIuOTMNCgkJYzEuMTIsMC45NiwxLjY3LDIuMTEsMi4zNywzLjI4YzAuMDQsMC4wNiwwLjY1LDEuMDMsMC45LDEuNDJjMC43NiwwLjc2LDEuMzcsMS42MiwxLjU0LDIuNjVjMC4yMSwxLjI1LTAuMjYsMi4yOC0wLjM3OSwzLjU4DQoJCWMtMC4zNTEsMy45OCwwLjIxLDcuNywzLjMxLDEwLjQ5YzAuODYsMC43OCwxLjk4LDEuMTgsMi44MzksMS45OWMwLjg5LDAuODUsMC43OCwxLjQyLDEuMzIsMi4zMWMxLjQyLDIuMzYsMy4zMiw0LjU3LDQuOTYsNi44DQoJCWMxLjQzLDEuOTQ5LDIuMDMsMS41NywwLjYyLTAuNDRjLTAuOTYtMS4zNy0yLjE0OS0yLjcxLTIuOTM5LTQuMTdjLTAuMDgtMC4xNS0wLjg5LTIuMDctMC42My0yLjAyYzIuMjIsMC40NywyLjY3LDEuOTgsNC4xMSwzLjc2DQoJCWMxLjQyLDEuNzUsMi42MywyLjczLDMuNDUsNC44NGMwLjk3LDIuNDUsMi40NCwzLjY1LDQuODUsNC43M2MxLjE4OSwwLjUzLDMuMTMsMS45NCw0LjM5OSwyLjExYzEuNSwwLjIsMi4yOS0wLjc4LDMuNzA5LTAuMQ0KCQljMC45NCwwLjQ1LDEuNjcsMS45LDIuODM5LDIuMjRjMS4xMTksMC4zMywxLjg2OS0wLjA5LDIuOTIsMC42MmMxLjI1LDAuODUsMS42OSwyLjMxLDIuODY5LDMuMmMwLjg0LDAuNjQsMi4wNTksMS40NCwzLjEzLDEuNjINCgkJYzAuNzcsMC4xMywxLjYyLTAuNDUsMi4zOC0wLjJjMS4zOCwwLjQ1LDEuNjksMi4xMywxLjI4MSwzLjQ3Yy0wLjQ1OSwxLjUtMS44NywyLjQzLTIuNDQsMy45M2MtMC41MSwxLjM1LTAuMTksMi41LTAuMzYxLDMuNzgNCgkJYy0wLjE4LDEuMzMtMS4yNS0wLjAxLTAuMTgsMi4yNGMwLjUsMS4wNSwxLjIzLDIuMDEsMS44NjksMi45N2MxLjI2LDEuOTEsMi4xNTksMy41OCwzLjg1LDUuMTJjMS4xOTksMS4wOSwzLjgwOSwyLjM2LDQuNDA5LDMuOTgNCgkJYzAuNTMsMS40NCwwLjA5LDQuNi0wLjE4LDYuMTFjLTAuNTYsMy4xNy0wLjQ3OSw2Ljk5LTEuMzU5LDkuOTRjLTAuODUsMi44Ny0xLjg1LDMuNzItMS4xMSw2Ljg1YzAuMzExLDEuMzQsMC41NSwwLjY5LDAsMi40MQ0KCQljLTAuMTYsMC41LDAsMC43LTAuMTksMS4yYy0wLjM5OSwxLjA3LTEuMzQ5LDEuNjktMS43NiwyLjc5YzEuNTEsMC4wNywxLjQsMC42LDAuOTIsMS4yYzIuNTQtMC4yMSw1LjAzOS0wLjU0LDcuNDg5LTEuMDMNCgkJYy0wLjQyOS0wLjQ1LTAuODktMC45MS0wLjg5LTEuMjNjMC0wLjM1LDEuMzU5LTIuMDksMS41NC0yLjUyYzAuMjkxLTAuNjksMC41MDEtMi4xOSwwLjkyLTIuNzNjMC43Mi0wLjkxLDIuMjgtMC41NywxLjk3OS0yLjI4DQoJCWMzLjQ4LTAuMDQsNC45Ny0wLjU2LDUuNTUtNC4xYy0wLjYyLTAuMzEtMC40OS0wLjEzLTAuNTktMC42N2MwLjEyLDAuNjQsMi42LTAuMjYsMi44MzksMC4xOWMwLjE4LDAuMzUsMy4zMy0zLjk2LDMuNjc5LTQuMzINCgkJYzAuODktMC45NSwxLjY3LTEuNjYsMi4yNC0yLjhjMC4yMi0wLjQ0LDAuNDU5LTEuOCwwLjkzLTIuNDdjLTAuMDMsMC4xMi0wLjA3LDAuMjMtMC4xMSwwLjM0YzEuMTItMS43OCwyLjU1LTEuNTYsNC4xNy0yLjI4DQoJCWMxLjYxLTAuNzIsMC40NS0wLjUyLDEuNjMtMS42NGMxLjQxLTEuMzMsMS43My0wLjU3LDIuMTMtMi43NmMwLjMtMS42Mi0wLjA5LTMuMDksMC40MjktNC41NWMwLjY2LTEuODQsMi4yNC0yLjQ0LDMuMjktNA0KCQljMC44LTEuMTksMS41Ni0zLjE0LDAuNDctNC4zNGMtMC45LTEtMy41ODktMS44Mi00LjgxLTIuMTFjLTEuNDQtMC4zNC0zLjA5LTAuMzctNC40MzktMC45MmMtMS41OC0wLjY0LTIuODk5LTIuMzItMy42OTksMC4yOA0KCQljLTAuMjYtMC4xOS0xLjM1LTAuNzktMS4zNS0xLjA4YzAsMC41NywxLjU0LTAuNTEsMS43NS0wLjc2Yy0wLjY2LDAuMDUtMi45MDksMC41NS0zLjI0LDAuMzNsMCwwYzAuMTYsMC4xMiwwLjU2LDAuMDYsMC43NCwwLjA5DQoJCWMtMC42OSwwLjM3LTAuODMsMC4yNS0wLjc0LTAuMDljMCwwLTAuMDEsMC0wLjAyLTAuMDFjMCwwLDAuMDIsMCwwLjAyLDAuMDFjMC4xOS0wLjY1LDEuMy0yLjEsMS4zMi0yLjM5DQoJCWMwLjEyLTEuNjEtMi4yMTktMy40NC0zLjQ4LTMuOGMtMS43My0wLjUtMi43Mi0wLjI4LTQuMi0xLjM2Yy0xLjgtMS4zMi0zLjU0OS0yLjc4LTUuODQtMy4wNGMtMC40NzktMC4wNS0xLjAxLDAuMjEtMS41MSwwLjE0DQoJCWMtMS4yNDEtMC4xOC0xLjY1LTAuOTgtMi42OC0xLjI0Yy0xLjI3LTAuMzItMS43NSwwLjc4LTIuNTEsMC43N2MtMS4xMiwwLTEuMzgtMS4xNy0zLjAyLTAuMTljLTIuNDIsMS40Ni0xLjEsMi4zNy0zLjg2LDEuNjcNCgkJYy0xLjQ2LTAuMzctMy4xLDAuNTItNC40ODktMC40NGMtMS4yNi0wLjg3LTEuNTQtMy4yOC0wLjMyLTQuMjk5Yy0wLjYyLDAuNTItMC42LTEuMTItMS4wNTEtMS40MmMtMC43Mi0wLjQ3LTEuODksMC4wOC0yLjcyLTAuMTINCgkJYy0xLjEyLTAuMjctMS43Ny0wLjM3LTEuNTItMS40NmMwLjI4LTEuMTgsMy4zOS00LjM5LDAuMjEtNC4zMDFjLTEuNzMsMC4wNS0yLjI5LDIuNjItNC4xMywzYy0yLjA2OSwwLjQyLTMuODctMC4yOC00Ljk1LTIuMTENCgkJYy0yLjIzLTMuODIsMS4zMS04LjUyLDQuOTQtOC44NWMyLjgyOS0wLjI2LDYuOTc5LTIuMzUsOS4wNDksMC43N2MwLjYsMC45MSwyLjA4OSw0LjQzLDIuODU5LDIuMTVjMC4yMy0wLjY5LTAuNi0zLjcxLTAuODYtNC45Nw0KCQljLTAuMDEsMC4wMS0wLjAyLDAuMDItMC4wMywwLjA0Yy0wLjAxLTAuMTQtMC4wMy0wLjI3LTAuMDQtMC40MWMwLjAxLDAuMDksMC4wNCwwLjIyLDAuMDcsMC4zN2MwLjUtMC43OCwxLjI4MS0xLjMxLDEuOTYtMS45NTENCgkJbDAsMGMwLjEtMC4wOSwwLjItMC4xOSwwLjI5MS0wLjI5Yy0wLjA5LDAuMS0wLjE5LDAuMTktMC4yOTEsMC4yOWMwLjc0LTAuNzIsMi42NS0xLjU4LDIuOTgtMi41OGMwLjE4LTAuNTUtMC42NS0xLjI3LTAuMjItMi4wMw0KCQljMC4zMzktMC41OSwxLjE1OS0wLjM1LDEuNDgtMC43NGMwLjQ1OS0wLjU2LDAuNTItMS40OCwxLTIuMDdjMC41LTAuNiwxLjQ2LTAuNjgsMS45Ni0xLjE0YzEuMTU5LTEuMDUsMS40OC0yLjI2LDIuODM5LTIuOQ0KCQljMS4yODEtMC44NywyLjY1LTIuMzYsNC4yOC0xLjY4Yy0wLjU5LDAuNjgtMi4wOSwxLjA5LTIuNTIsMS43MmMtMC4zLDAuNDMsMi4yMiwwLjE5LDIuNTYsMC4wN2MxLjQyLTAuNTIsMi41NC0xLjU4LDMuNzI5LTIuMzYNCgkJYzIuMDU5LTEuMzYsNC40NDktMS40Myw2LjkyOS0wLjkzYzAuNzYsMC4xNS0xLjM4LTIuOTItMS42LTMuMThjLTAuODYtMC45OS0xLjA4LTEuODctMi40Ny0wLjU5Yy0wLjQwOSwwLjM3LTAuODMsMS42NC0xLjEyLDIuMTYNCgkJYy0wLjg4LDEuNi0wLjY4LDEuMzktMi41OTksMi4zOGMwLjEtMC4wNSwwLjItMC4xLDAuMy0wLjE2Yy0xLjQsMC4yOC0yLjc0LDAuODktMy4zMS0wLjg1Yy0wLjE5LTAuNTgsMC42Mi0xLjQzLDAuMTctMi4wMQ0KCQljLTEtMS4yOS00LjMxOSwxLjQzLTUuNDc5LDEuODZjMC42MS00Ljc3LDYuMjUtMi4yNiw5LjI1OS0zLjIxYzAuODItMC4yNiwzLjktMS40NCw0LjA3LTIuMjJjMC4yNS0xLjE1MS0yLjQ0LTMuMDItMy4wNS0zLjU1DQoJCWMtMS4zMi0xLjEzLTIuMDMxLTEuNzgtMi43NzEtMy41M2MtMC43OS0xLjg3LTEuMzEtMy43NC0zLjMtMi4zNmMtMC43NCwwLjUxLTAuMjEsMS42My0xLjQ4LDEuOGMtMC44LDAuMTEtMS42My0wLjktMi4wODktMS4zOA0KCQljLTAuNjktMC43Mi0xLjQxLTIuNDgtMi42OC0yLjY0Yy0xLjA5LTAuMTMtNC4xMy0xLjc0LTUuNTUtMC43Yy0xLjA4OSwwLjgsMC4xNSwzLjgsMC40NzksNC44OGMwLjcxLDIuMzIsMS4xNSwyLjQxLTAuODIsMy44Ng0KCQljLTAuOTcsMC43MS0xLjU1LTAuMDUtMS4xOTksMS44N2MwLjE4LDEsMS4yNiwxLjE5LDAuNDksMi4wNmMtMC40NywwLjUzLTEuNiwwLjQ4LTIuMTUsMC4yMmMtMS43Mi0wLjgtMC4xOS0xLjg4LTEuMDEtMy4wMg0KCQljLTAuNjEtMC44NS0zLjktMS41NS01LjAyOS0yLjA2Yy0yLjQ5LTEuMTMtOS4wNi0yLjMyLTcuMDM5LTYuMThjMC41NS0xLjA1LDIuNi0yLjU5LDMuNTM5LTMuMTljMC45Ni0wLjYyLDIuMTUtMC43OSwyLjk1LTEuNjQNCgkJYzAuNDQ5LTAuNDgsMC40NzktMS44LDAuODktMi4xM2MwLjU3LTAuNDcsMi4yMy0wLjI1LDMuMTEtMC4yMmMzLjgzLTAuNzcsMC4zNDEtNi4zMiw1LjM4LTUuMzJjMS4zOSwwLjI4LDIuNzc5LDEuNjksMy45MywyLjQ3DQoJCWMxLjI5LDAuODgsMS43MiwwLjc4LDEuMzEsMi4xM2MtMC4xLDAuMzEtMS41NCwxLjcxLTEuODk5LDJjLTAuNjcsMC41Mi0xLjc2LDAuNzYtMi41NCwxLjA4YzIuNjMsMCwzLjcyOS0wLjEzLDUuODgsMS4zDQoJCWMxLjg0LDEuMjIsMi45OSwyLjA0LDUuMjQ5LDEuOTUxYy0wLjE0LTEuMS0yLjA3OS0wLjY3LTItMS43NmMwLjA2LTAuOTIsMS4yMywwLjI5LDEuMzgsMC4zYzAuNjMsMC4wMywyLjI2LDAuNzgsMS45LTAuOTgNCgkJYy0wLjMxMS0xLjU0LTMuNjc5LTAuODEtMi42LTMuMzJjMS41Mi0wLjE3LDEuMTA5LDEuNSwyLjEwOSwxLjg2YzEuMDcsMC4zNzksMi40Ni0wLjkyLDIuNjktMS44MmMtMS41LTAuNzYtNi4wNzktMi01LjU2LTQuMTYNCgkJYzMuMDYsMS45NDksNi4xMDksMy45LDkuMTY5LDUuODRjLTIuNDgsMi4yMSwxLjgsMC45NywyLjA1OSwxLjAzYzAuNzMsMC4xOCwyLjU4LDEuNzgsMS4zNywyLjA4Yy0xLjI2LDAuMzEtMS45MDktMS41MS0zLjE5LTAuMTUNCgkJYzEuMDYxLDAuMjgsNC44MSwwLjQ5LDMuODEsMi41MmMtMC4zOTksMC44MS0yLjgwOSwwLjY3LTMuNTI5LDIuMjVjMC41Mi0wLjEsMS4wOCwwLjA1LDEuNi0wLjA4Yy0xLjE0OSwxLjc5LDAuNTUsMi45OCwxLjQ5LDQuNDENCgkJYzEuMDYsMS42MywyLjU1LDQuMTIsNC42Niw0LjY0YzQuNDg5LDEuMSwzLjk1LTYuMiw3LjM1OS03LjM1YzAuOTQtMC4zMiwxLjk3LTAuMDksMi45Mi0wLjM1YzEuMDYxLTAuMywxLjYzLTEuMDYsMi40Ny0xLjY0DQoJCWMyLjA4LTEuNDMsMy44OC0xLjQ0LDYuNDYtMS41MmMwLjA2LDAsMC4xMywwLDAuMiwwYy05LjI2OS05Ljc2LTIxLjQ2OS0xNi43MS0zNS4xNzctMTkuNDMNCgkJQzIxMzYuNDA5LDU2MC4zOCwyMTM0Ljk1OSw1NjEuMDgsMjEzMy42NTgsNTYxLjk0eiIvPg0KCTxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik0yMTIxLjIyOSw1NzEuOTExYy0wLjA2LDAtMC4xMywwLTAuMTktMC4wMWMtMC4wMSwwLTAuMDIsMC4wMS0wLjAzLDAuMDFIMjEyMS4yMjl6Ii8%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTIxMjUuMDEsNTAwYy02OS4wNDUsMC0xMjUuMDEsNTUuOTctMTI1LjAxLDEyNC45OWMwLDY5LjAzLDU1Ljk2NSwxMjUuMDEsMTI1LjAxLDEyNS4wMQ0KCQlTMjI1MCw2OTQuMDMsMjI1MCw2MjQuOTlDMjI1MC4wMSw1NTUuOTcxLDIxOTQuMDU0LDUwMCwyMTI1LjAxLDUwMHogTTIxMjQuOTk5LDcwMC4wMDFjLTQxLjQxNywwLTc0Ljk5NC0zMy41OC03NC45OTQtNzUNCgkJczMzLjU3Ny03NSw3NC45OTQtNzVjNDEuNDE3LDAsNzQuOTk0LDMzLjU4LDc0Ljk5NCw3NVMyMTY2LjQxNiw3MDAuMDAxLDIxMjQuOTk5LDcwMC4wMDF6Ii8%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTIxODIuMTc1LDYzNS45NTFjMC45MiwxLjQ1LDIuNDQsMi45NSwzLjcxOSw0LjA3YzAuOTksMC44NiwyLjAxLDEuNzYsMy4yNSwyLjA4DQoJCWMxLjQ2LTUuNDYsMi4yNC0xMS4xOSwyLjI0LTE3LjFjMC0zLjQyLTAuMjYtNi43Ny0wLjc2LTEwLjA1Yy0wLjkyLDAuNjYtMS44OTksMS45Mi0yLjMxLDIuNjdjLTAuNTcsMS4wMy0wLjU0LDEuNjctMS40NCwyLjQ4DQoJCWMtMC44NSwwLjc3LTEuODg5LDEuMDEtMi42NSwxLjk5Yy0wLjcyLDAuOTEtMC41OSwxLjYzLTEuMTY5LDIuNjljLTAuMjcsMC41LTAuOTQsMC43LTEuMjMsMS4zMmMtMC42MywxLjM0LDAuMDksMy40NiwwLjAzLDQuOTUNCgkJQzIxODEuNzk1LDYzMi44MTEsMjE4MS4xOTUsNjM0LjQwMSwyMTgyLjE3NSw2MzUuOTUxeiIvPg0KPC9nPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTExNjcuMzcsMTI2LjE4YzAsMjIuNi0xOC45MSw0MC45Mi00Mi4yNCw0MC45MmMtMjMuMzMsMC00Mi4yNC0xOC4zMi00Mi4yNC00MC45Mg0KCQljMC00LjA1LDAuNjEtNy45NiwxLjc0LTExLjY2aC0xMi40OHY1Ny40YzAsMi45NywyLjQzLDUuNCw1LjQsNS40aDk0LjYyYzIuOTcsMCw1LjQtMi40Myw1LjQtNS40di01Ny40aC0xMS45Ng0KCQlDMTE2Ni43NiwxMTguMjIsMTE2Ny4zNywxMjIuMTMsMTE2Ny4zNywxMjYuMTh6Ii8%2BDQoJPGVsbGlwc2UgZmlsbD0iI0I3QzBDNyIgY3g9IjExMjUuMTMiIGN5PSIxMjQuNzExIiByeD0iMjcuMjkiIHJ5PSIyNi40NCIvPg0KCTxwYXRoIGZpbGw9IiNCN0MwQzciIGQ9Ik0xMTU2LjA0MSw5OS4wM2gxNS4zNmMzLjM2LDAsNi4xMi0yLjc1LDYuMTItNi4xMlY3OC4yN2MwLTMuMzctMi43NS02LjEyLTYuMTItNi4xMmgtMTUuMzYNCgkJYy0zLjM2LDAtNi4xMiwyLjc1LTYuMTIsNi4xMnYxNC42NEMxMTQ5LjkzLDk2LjI4LDExNTIuNjgsOTkuMDMsMTE1Ni4wNDEsOTkuMDN6Ii8%2BDQoJPHBhdGggZmlsbD0iI0I3QzBDNyIgZD0iTTExMjUuMDIsMEMxMDU1Ljk1LDAsMTAwMCw1NS45NSwxMDAwLDEyNXM1NS45NSwxMjUsMTI1LjAyLDEyNWM2OS4wNSwwLDEyNC45OC01NS45NiwxMjQuOTgtMTI1DQoJCUMxMjUwLjAwMSw1NS45MywxMTk0LjA3LDAsMTEyNS4wMiwweiBNMTE5Mi45NCwxNzUuNTAxYzAsOS41OS03Ljg1LDE3LjQ0LTE3LjQ0LDE3LjQ0aC0xMDFjLTkuNTksMC0xNy40NC03Ljg1LTE3LjQ0LTE3LjQ0di0xMDENCgkJYzAtOS41OSw3Ljg1LTE3LjQ0LDE3LjQ0LTE3LjQ0aDEwMWM5LjU5LDAsMTcuNDQsNy44NSwxNy40NCwxNy40NFYxNzUuNTAxeiIvPg0KPC9nPg0KPGc%2BDQoJDQoJCTxlbGxpcHNlIHRyYW5zZm9ybT0ibWF0cml4KDAuMjYyNCAwLjk2NSAtMC45NjUgMC4yNjI0IDc3NC4yMDY0IC0zMjIuNjk0KSIgZmlsbD0iIzk5OTk5OSIgY3g9IjU5OC4xODIiIGN5PSIzNDUuMDcyIiByeD0iMjIuOTAyIiByeT0iMTYuMzUyIi8%2BDQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTYyNC45OSwyNTBDNTU1Ljk3LDI1MCw1MDAsMzA1Ljk3LDUwMCwzNzVzNTUuOTYsMTI1LDEyNC45OSwxMjVDNjk0LjA0LDUwMCw3NTAsNDQ0LjAzLDc1MCwzNzUNCgkJUzY5NC4wMywyNTAsNjI0Ljk5LDI1MHogTTYzMS4zOCwzNDUuMzFjMCwxOS40MS0xOC4xNiwyMS44My0xOC4xNiwzMC4wODFjMCw4LjI2LDI0LjA5LDE0Ljg3LDI0LjA5LDM1LjM1DQoJCWMwLDM0LjE3LTQyLjMsMzIuMjUtNDIuMywzMi4yNXMtMzYuNTYsMS4zMy0zNi41Ni0yNi4yMXM0MS40OC0yNi40MSw0My42MS0yNi40MWMtMC41Mi02LjMzLTQuNzMtNS4yOC00LjczLTguNHYtNy43MQ0KCQljMCwwLTMxLjM5LDMuNTIxLTMxLjM5LTI2Ljg4YzAtMzAuNDAxLDM1LjkyLTMxLjI4LDM1LjkyLTMxLjI4aDM1LjQ0YzAsNS40Mi0xNi4xNywzLjUtMTYuMTcsNi4zOQ0KCQlDNjMwLjMwMSwzMjYuNjYsNjMxLjM4LDMzMy42OCw2MzEuMzgsMzQ1LjMxeiBNNzAzLjgzMSwzNDguMDdoLTI0LjY4djI0LjY3aC03LjI0di0yNC42N2gtMjQuNjh2LTcuMjVoMjQuNjhWMzE2LjExaDcuMjR2MjQuNzENCgkJaDI0LjY4VjM0OC4wN3oiLz4NCgk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNNjAwLjY5MSw0MzQuNDFjLTE0LjY0LDAuOTgtMjcuMDktNi44NS0yNy44Mi0xNy41M2MtMC43Mi0xMC42OCwxMC41Ny0yMC4xMywyNS4yLTIxLjEzDQoJCWMxNC42Mi0wLjk3LDI3LjA4LDYuODUsMjcuODEsMTcuNTNDNjI2LjU5LDQyMy45NjEsNjE1LjMzMSw0MzMuNDExLDYwMC42OTEsNDM0LjQxeiIvPg0KPC9nPg0KPGc%2BDQoJPHJlY3QgeD0iODM0LjA5IiB5PSIzNjEuNDQyIiBmaWxsPSIjOTk5OTk5IiB3aWR0aD0iMTcuNzciIGhlaWdodD0iNTMuNDM2Ii8%2BDQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTg0My4xLDMzNS42OTNjLTYuMSwwLTEwLjA1LDMuOTktMTAuMDUsOS4yMzljMCw1LjEyOSwzLjg2LDkuMjM5LDkuODEsOS4yMzloMC4xMg0KCQljNi4yMSwwLDEwLjA0LTQuMTEsMTAuMDQtOS4yMzlDODUyLjksMzM5LjY5Myw4NDkuMTcsMzM1LjY5Myw4NDMuMSwzMzUuNjkzeiIvPg0KCTxwYXRoIGZpbGw9IiM5OTk5OTkiIGQ9Ik04OTUuNDUsMzYwLjE5MWMtOS40MywwLTEzLjY2OSw1LjIwOS0xNi4wMSw4Ljg1djAuMTRoLTAuMTFjMC4wMy0wLjAzLDAuMDgtMC4xLDAuMTEtMC4xNHYtNy41OTloLTE3Ljc1DQoJCWMwLjIxLDUsMCw1My40MzYsMCw1My40MzZoMTcuNzVWMzg1LjA0YzAtMS42LDAuMS0zLjE4LDAuNTgtNC4zMTljMS4yOS0zLjE5LDQuMi02LjQ5LDkuMTEtNi40OWM2LjQyLDAsOC45OTEsNC45LDguOTkxLDEyLjA2OQ0KCQl2MjguNTg3aDE3Ljc4VjM4NC4yN0M5MTUuOTIsMzY3LjgzLDkwNy4xNiwzNjAuMTkxLDg5NS40NSwzNjAuMTkxeiIvPg0KCTxwYXRoIGZpbGw9IiM5OTk5OTkiIGQ9Ik04NzUuMDIsMjUwQzgwNS45NSwyNTAsNzUwLDMwNS45NTUsNzUwLDM3NXM1NS45NSwxMjUsMTI1LjAyLDEyNWM2OS4wNiwwLDEyNC45OC01NS45NjUsMTI0Ljk4LTEyNQ0KCQlDMTAwMCwzMDUuOTM1LDk0NC4wNywyNTAsODc1LjAyLDI1MHogTTkzMy43OSw0MjUuNjc2YzAsNC43LTMuODgsOC40OTktOC42Nyw4LjQ5OUg4MjQuOTFjLTQuODMsMC04LjcxLTMuOC04LjcxLTguNDk5VjMyNC4zMTQNCgkJYzAtNC42OSwzLjg4LTguNDg5LDguNzEtOC40ODloMTAwLjIxYzQuNzgsMCw4LjY3LDMuODEsOC42Nyw4LjQ4OVY0MjUuNjc2eiIvPg0KPC9nPg0KPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTM3NS4wMSwyNTBDMzA1Ljk2NSwyNTAsMjUwLDMwNS45NywyNTAsMzc0Ljk5QzI1MCw0NDQuMDIsMzA1Ljk2NSw1MDAsMzc1LjAxLDUwMFM1MDAsNDQ0LjAzLDUwMCwzNzQuOTkNCglDNTAwLjAxLDMwNS45Nyw0NDQuMDU1LDI1MCwzNzUuMDEsMjUwIE00MTEuMjY3LDMyNC4wOWgtMTcuNTE5Yy0zLjUsMC02Ljk5OSwzLjYzLTYuOTk5LDYuMzN2MTguMDVoMjQuNDg4DQoJYy0wLjk4LDEzLjgzLTIuOTksMjYuNDgtMi45OSwyNi40OEgzODYuNjR2NzguNDFoLTMyLjIxOHYtNzguNDFoLTE1LjY1OXYtMjYuNGgxNS42NTl2LTIxLjU2YzAtMy45NS0wLjc5LTMwLjM2LDMyLjk4OC0zMC4zNg0KCWgyMy44NDlMNDExLjI2NywzMjQuMDlMNDExLjI2NywzMjQuMDl6Ii8%2BDQo8Zz4NCgk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNMTM3NC45OTUsMjUwQzEzMDUuOTQyLDI1MCwxMjUwLDMwNS45NywxMjUwLDM3NXM1NS45NTIsMTI1LDEyNC45OTUsMTI1DQoJCUMxNDQ0LjAyOCw1MDAsMTUwMCw0NDQuMDMsMTUwMCwzNzVTMTQ0NC4wMjcsMjUwLDEzNzQuOTk1LDI1MHogTTE0NDcuMzM4LDQwMC43NWMwLDEyLjM5LTEwLjYyLDIyLjQ4LTIzLjYyMSwyMi40OGgtOTcuMzU0DQoJCWMtMTMuMDEsMC0yMy43MzEtMTAuMS0yMy43MzEtMjIuNDh2LTUxLjVjMC0xMi4yOCwxMC43Mi0yMi40NywyMy43MzEtMjIuNDdoOTcuMzU0YzEzLDAsMjMuNjIxLDEwLjE5LDIzLjYyMSwyMi40N1Y0MDAuNzUNCgkJTDE0NDcuMzM4LDQwMC43NXoiLz4NCgk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNMTQwNC4xMDUsMzcxLjQ4bC00OC4wNzMtMjYuMzRjLTEuNzQtMC45Ni00LjA3LTEuMS02LTAuMzVjLTEuOTQxLDAuNzMtMy4xOCwyLjI2LTMuMTgsMy44OHY1Mi42Nw0KCQljMCwxLjYyLDEuMjUsMy4xMywzLjE4LDMuODhjMC44MywwLjMxLDEuNywwLjQ3LDIuNjIsMC40N2MxLjE4LDAsMi40LTAuMjcsMy4zOC0wLjgzbDQ4LjA2Mi0yNi4zNWMxLjUxLTAuOCwyLjM3LTIuMTIsMi4zNy0zLjUxDQoJCUMxNDA2LjQ2NiwzNzMuNjIsMTQwNS41NjYsMzcyLjMwMSwxNDA0LjEwNSwzNzEuNDh6Ii8%2BDQo8L2c%2BDQo8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNMTI1LjAxLDI1MEM1NS45NjksMjUwLDAsMzA1Ljk2LDAsMzc1YzAsNjkuMDIsNTUuOTY5LDEyNC45OTksMTI1LjAxLDEyNC45OTkNCgljNjIuOTUsMCwxMTUuMDEtNDYuNTM5LDEyMy43LTEwNy4wN2MwLjgzLTQuMTEsMS4yMi04LjM4LDEuMTUtMTIuNzZjMC4wOC0xLjcxLDAuMTQtMy40MywwLjE0LTUuMTYNCglDMjQ5Ljk5OSwzMDUuOTYsMTk0LjA1LDI1MCwxMjUuMDEsMjUweiBNMTgyLjU1LDM1Mi4zMWMwLjA1LDEuMTgsMC4wNiwyLjMzLDAuMDYsMy41YzAsMzUuNjgtMjcuMTUsNzYuODMtNzYuODIsNzYuODMNCgljLTE1LjI2OSwwLTI5LjQ0LTQuNDQtNDEuNC0xMi4xMjljMi4xMSwwLjI0LDQuMjYsMC4zNyw2LjQzLDAuMzdjMTIuNjUsMCwyNC4yOS00LjI5LDMzLjU1LTExLjU0DQoJYy0xMS44Mi0wLjIyLTIxLjgtOC4wNC0yNS4yNi0xOC43NWMxLjY2LDAuMzEsMy4zNiwwLjQ5LDUuMTEsMC40OWMyLjQzLDAsNC44My0wLjM0LDcuMDktMC45NWMtMTIuMzUtMi40OC0yMS42Ny0xMy4zOS0yMS42Ny0yNi40Nw0KCWMwLTAuMTQsMC0wLjIzLDAtMC4zNGMzLjY2LDIuMDEsNy44MiwzLjI0LDEyLjI1LDMuMzhjLTcuMjgtNC44Ni0xMi4wMy0xMy4xMi0xMi4wMy0yMi40OWMwLTQuOTYsMS4zNC05LjU3LDMuNjYtMTMuNTkNCgljMTMuMzMsMTYuMzYsMzMuMjIsMjcuMDksNTUuNjgsMjguMjJjLTAuNDctMS45Ny0wLjcxLTQuMDYtMC43MS02LjE3YzAtMTQuOTIsMTIuMTItMjcuMDA5LDI3LjAxOS0yNy4wMDkNCgljNy43NiwwLDE0Ljc3LDMuMjksMTkuNyw4LjU0YzYuMTgtMS4yMiwxMS45NC0zLjQ1LDE3LjE3LTYuNTZjLTIuMDEsNi4zLTYuMjksMTEuNTktMTEuODksMTQuOTRjNS40OS0wLjYzLDEwLjY5LTIuMSwxNS41MS00LjI1DQoJQzE5Mi4zODksMzQzLjc2LDE4Ny44MiwzNDguNSwxODIuNTUsMzUyLjMxeiIvPg0KPGc%2BDQoJPHBhdGggZmlsbD0iIzk5OTk5OSIgZD0iTTExNjcuMzcsMzc2LjE4YzAsMjIuNi0xOC45MSw0MC45Mi00Mi4yNCw0MC45MmMtMjMuMzMsMC00Mi4yNC0xOC4zMi00Mi4yNC00MC45Mg0KCQljMC00LjA1LDAuNjEtNy45NiwxLjc0LTExLjY2aC0xMi40OHY1Ny40YzAsMi45NywyLjQzLDUuNCw1LjQsNS40aDk0LjYyYzIuOTcsMCw1LjQtMi40Myw1LjQtNS40di01Ny40aC0xMS45Ng0KCQlDMTE2Ni43NiwzNjguMjIsMTE2Ny4zNywzNzIuMTMsMTE2Ny4zNywzNzYuMTh6Ii8%2BDQoJPGVsbGlwc2UgZmlsbD0iIzk5OTk5OSIgY3g9IjExMjUuMTMiIGN5PSIzNzQuNzExIiByeD0iMjcuMjkiIHJ5PSIyNi40NCIvPg0KCTxwYXRoIGZpbGw9IiM5OTk5OTkiIGQ9Ik0xMTU2LjA0MSwzNDkuMDNoMTUuMzZjMy4zNiwwLDYuMTItMi43NSw2LjEyLTYuMTJ2LTE0LjY0YzAtMy4zNy0yLjc1LTYuMTItNi4xMi02LjEyaC0xNS4zNg0KCQljLTMuMzYsMC02LjEyLDIuNzUtNi4xMiw2LjEydjE0LjY0QzExNDkuOTMsMzQ2LjI4LDExNTIuNjgsMzQ5LjAzLDExNTYuMDQxLDM0OS4wM3oiLz4NCgk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNMTEyNS4wMiwyNTBjLTY5LjA3LDAtMTI1LjAyLDU1Ljk1LTEyNS4wMiwxMjVzNTUuOTUsMTI1LDEyNS4wMiwxMjVjNjkuMDUsMCwxMjQuOTgtNTUuOTYsMTI0Ljk4LTEyNQ0KCQlDMTI1MC4wMDEsMzA1LjkzLDExOTQuMDcsMjUwLDExMjUuMDIsMjUweiBNMTE5Mi45NCw0MjUuNTAxYzAsOS41OS03Ljg1LDE3LjQ0LTE3LjQ0LDE3LjQ0aC0xMDFjLTkuNTksMC0xNy40NC03Ljg1LTE3LjQ0LTE3LjQ0DQoJCXYtMTAxYzAtOS41OSw3Ljg1LTE3LjQ0LDE3LjQ0LTE3LjQ0aDEwMWM5LjU5LDAsMTcuNDQsNy44NSwxNy40NCwxNy40NFY0MjUuNTAxeiIvPg0KPC9nPg0KPGc%2BDQoJDQoJCTxlbGxpcHNlIHRyYW5zZm9ybT0ibWF0cml4KDAuMjYyNCAwLjk2NSAtMC45NjUgMC4yNjI0IDEwMTUuNDQ3IC0xMzguMjkxNCkiIGZpbGw9IiNEM0Q5REQiIGN4PSI1OTguMTgyIiBjeT0iNTk1LjA3MiIgcng9IjIyLjkwMiIgcnk9IjE2LjM1MiIvPg0KCTxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik02MjQuOTksNTAwQzU1NS45Nyw1MDAsNTAwLDU1NS45Nyw1MDAsNjI1czU1Ljk2LDEyNSwxMjQuOTksMTI1QzY5NC4wNCw3NTAsNzUwLDY5NC4wMyw3NTAsNjI1DQoJCVM2OTQuMDMsNTAwLDYyNC45OSw1MDB6IE02MzEuMzgsNTk1LjMxYzAsMTkuNDEtMTguMTYsMjEuODMtMTguMTYsMzAuMDgxYzAsOC4yNiwyNC4wOSwxNC44NywyNC4wOSwzNS4zNQ0KCQljMCwzNC4xNy00Mi4zLDMyLjI1LTQyLjMsMzIuMjVzLTM2LjU2LDEuMzMtMzYuNTYtMjYuMjFjMC0yNy41MzksNDEuNDgtMjYuNDEsNDMuNjEtMjYuNDFjLTAuNTItNi4zMy00LjczLTUuMjgtNC43My04LjR2LTcuNzENCgkJYzAsMC0zMS4zOSwzLjUyMS0zMS4zOS0yNi44OGMwLTMwLjQwMSwzNS45Mi0zMS4yOCwzNS45Mi0zMS4yOGgzNS40NGMwLDUuNDItMTYuMTcsMy41LTE2LjE3LDYuMzkNCgkJQzYzMC4zMDEsNTc2LjY2LDYzMS4zOCw1ODMuNjgsNjMxLjM4LDU5NS4zMXogTTcwMy44MzEsNTk4LjA3aC0yNC42OHYyNC42N2gtNy4yNHYtMjQuNjdoLTI0LjY4di03LjI1aDI0LjY4VjU2Ni4xMWg3LjI0djI0LjcxDQoJCWgyNC42OFY1OTguMDd6Ii8%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTYwMC42OTEsNjg0LjQxYy0xNC42NCwwLjk4LTI3LjA5LTYuODUtMjcuODItMTcuNTNjLTAuNzItMTAuNjgsMTAuNTctMjAuMTMsMjUuMi0yMS4xMw0KCQljMTQuNjItMC45NywyNy4wOCw2Ljg1LDI3LjgxLDE3LjUzQzYyNi41OSw2NzMuOTYxLDYxNS4zMzEsNjgzLjQxMSw2MDAuNjkxLDY4NC40MXoiLz4NCjwvZz4NCjxnPg0KCTxyZWN0IHg9IjgzNC4wOSIgeT0iNjExLjQ0MiIgZmlsbD0iI0QzRDlERCIgd2lkdGg9IjE3Ljc3IiBoZWlnaHQ9IjUzLjQzNiIvPg0KCTxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik04NDMuMSw1ODUuNjkzYy02LjEsMC0xMC4wNSwzLjk5LTEwLjA1LDkuMjM5YzAsNS4xMjksMy44Niw5LjIzOSw5LjgxLDkuMjM5aDAuMTINCgkJYzYuMjEsMCwxMC4wNC00LjExLDEwLjA0LTkuMjM5Qzg1Mi45LDU4OS42OTMsODQ5LjE3LDU4NS42OTMsODQzLjEsNTg1LjY5M3oiLz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNODk1LjQ1LDYxMC4xOTFjLTkuNDMsMC0xMy42NjksNS4yMDktMTYuMDEsOC44NXYwLjE0aC0wLjExYzAuMDMtMC4wMywwLjA4LTAuMSwwLjExLTAuMTR2LTcuNTk5aC0xNy43NQ0KCQljMC4yMSw1LDAsNTMuNDM2LDAsNTMuNDM2aDE3Ljc1VjYzNS4wNGMwLTEuNiwwLjEtMy4xOCwwLjU4LTQuMzE5YzEuMjktMy4xOSw0LjItNi40OSw5LjExLTYuNDljNi40MiwwLDguOTkxLDQuOSw4Ljk5MSwxMi4wNw0KCQl2MjguNTg3aDE3Ljc4VjYzNC4yN0M5MTUuOTIsNjE3LjgzLDkwNy4xNiw2MTAuMTkxLDg5NS40NSw2MTAuMTkxeiIvPg0KCTxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik04NzUuMDIsNTAwQzgwNS45NSw1MDAsNzUwLDU1NS45NTUsNzUwLDYyNXM1NS45NSwxMjUsMTI1LjAyLDEyNWM2OS4wNiwwLDEyNC45OC01NS45NjUsMTI0Ljk4LTEyNQ0KCQlDMTAwMCw1NTUuOTM1LDk0NC4wNyw1MDAsODc1LjAyLDUwMHogTTkzMy43OSw2NzUuNjc2YzAsNC43LTMuODgsOC40OTktOC42Nyw4LjQ5OUg4MjQuOTFjLTQuODMsMC04LjcxLTMuOC04LjcxLTguNDk5VjU3NC4zMTQNCgkJYzAtNC42OSwzLjg4LTguNDg5LDguNzEtOC40ODloMTAwLjIxYzQuNzgsMCw4LjY3LDMuODEsOC42Nyw4LjQ4OVY2NzUuNjc2eiIvPg0KPC9nPg0KPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTM3NS4wMSw1MDBDMzA1Ljk2NSw1MDAsMjUwLDU1NS45NywyNTAsNjI0Ljk5QzI1MCw2OTQuMDIsMzA1Ljk2NSw3NTAsMzc1LjAxLDc1MFM1MDAsNjk0LjAzLDUwMCw2MjQuOTkNCglDNTAwLjAxLDU1NS45Nyw0NDQuMDU1LDUwMCwzNzUuMDEsNTAwIE00MTEuMjY3LDU3NC4wOWgtMTcuNTE5Yy0zLjUsMC02Ljk5OSwzLjYzLTYuOTk5LDYuMzN2MTguMDVoMjQuNDg4DQoJYy0wLjk4LDEzLjgzLTIuOTksMjYuNDgtMi45OSwyNi40OEgzODYuNjR2NzguNDFoLTMyLjIxOHYtNzguNDFoLTE1LjY1OXYtMjYuNGgxNS42NTl2LTIxLjU2YzAtMy45NS0wLjc5LTMwLjM2LDMyLjk4OC0zMC4zNg0KCWgyMy44NDlMNDExLjI2Nyw1NzQuMDlMNDExLjI2Nyw1NzQuMDl6Ii8%2BDQo8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTI1LjAxLDUwMC4wMDFDNTUuOTY5LDUwMC4wMDEsMCw1NTUuOTYsMCw2MjVDMCw2OTQuMDIxLDU1Ljk2OSw3NTAsMTI1LjAxLDc1MA0KCWM2Mi45NSwwLDExNS4wMS00Ni41MzksMTIzLjctMTA3LjA3YzAuODMtNC4xMSwxLjIyLTguMzgsMS4xNS0xMi43NmMwLjA4LTEuNzEsMC4xNC0zLjQzLDAuMTQtNS4xNg0KCUMyNDkuOTk5LDU1NS45NiwxOTQuMDUsNTAwLjAwMSwxMjUuMDEsNTAwLjAwMXogTTE4Mi41NSw2MDIuMzExYzAuMDUsMS4xOCwwLjA2LDIuMzMsMC4wNiwzLjVjMCwzNS42OC0yNy4xNSw3Ni44My03Ni44Miw3Ni44Mw0KCWMtMTUuMjY5LDAtMjkuNDQtNC40NC00MS40LTEyLjEzYzIuMTEsMC4yNCw0LjI2LDAuMzcsNi40MywwLjM3YzEyLjY1LDAsMjQuMjktNC4yOSwzMy41NS0xMS41NGMtMTEuODItMC4yMi0yMS44LTguMDQtMjUuMjYtMTguNzUNCgljMS42NiwwLjMxLDMuMzYsMC40OSw1LjExLDAuNDljMi40MywwLDQuODMtMC4zNCw3LjA5LTAuOTVjLTEyLjM1LTIuNDgtMjEuNjctMTMuMzktMjEuNjctMjYuNDdjMC0wLjE0LDAtMC4yMywwLTAuMzQNCgljMy42NiwyLjAxLDcuODIsMy4yNCwxMi4yNSwzLjM4Yy03LjI4LTQuODYtMTIuMDMtMTMuMTItMTIuMDMtMjIuNDljMC00Ljk2LDEuMzQtOS41NywzLjY2LTEzLjU5DQoJYzEzLjMzLDE2LjM2LDMzLjIyLDI3LjA5LDU1LjY4LDI4LjIyYy0wLjQ3LTEuOTY5LTAuNzEtNC4wNi0wLjcxLTYuMTdjMC0xNC45MiwxMi4xMi0yNy4wMDksMjcuMDE5LTI3LjAwOQ0KCWM3Ljc2LDAsMTQuNzcsMy4yOSwxOS43LDguNTRjNi4xOC0xLjIyLDExLjk0LTMuNDUsMTcuMTctNi41NmMtMi4wMSw2LjMtNi4yOSwxMS41OS0xMS44OSwxNC45NGM1LjQ5LTAuNjMsMTAuNjktMi4xLDE1LjUxLTQuMjUNCglDMTkyLjM4OSw1OTMuNzYxLDE4Ny44Miw1OTguNTAxLDE4Mi41NSw2MDIuMzExeiIvPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0QzRDlERCIgZD0iTTExNjcuMzcsNjI2LjE4YzAsMjIuNi0xOC45MSw0MC45Mi00Mi4yNCw0MC45MmMtMjMuMzMsMC00Mi4yNC0xOC4zMi00Mi4yNC00MC45Mg0KCQljMC00LjA1LDAuNjEtNy45NiwxLjc0LTExLjY2aC0xMi40OHY1Ny40YzAsMi45NywyLjQzLDUuNCw1LjQsNS40aDk0LjYyYzIuOTcsMCw1LjQtMi40Myw1LjQtNS40di01Ny40aC0xMS45Ng0KCQlDMTE2Ni43Niw2MTguMjIsMTE2Ny4zNyw2MjIuMTMsMTE2Ny4zNyw2MjYuMTh6Ii8%2BDQoJPGVsbGlwc2UgZmlsbD0iI0QzRDlERCIgY3g9IjExMjUuMTMiIGN5PSI2MjQuNzExIiByeD0iMjcuMjkiIHJ5PSIyNi40NCIvPg0KCTxwYXRoIGZpbGw9IiNEM0Q5REQiIGQ9Ik0xMTU2LjA0MSw1OTkuMDNoMTUuMzZjMy4zNiwwLDYuMTItMi43NSw2LjEyLTYuMTJ2LTE0LjY0YzAtMy4zNy0yLjc1LTYuMTItNi4xMi02LjEyaC0xNS4zNg0KCQljLTMuMzYsMC02LjEyLDIuNzUtNi4xMiw2LjEydjE0LjY0QzExNDkuOTMsNTk2LjI4LDExNTIuNjgsNTk5LjAzLDExNTYuMDQxLDU5OS4wM3oiLz4NCgk8cGF0aCBmaWxsPSIjRDNEOUREIiBkPSJNMTEyNS4wMiw1MDBjLTY5LjA3LDAtMTI1LjAyLDU1Ljk1LTEyNS4wMiwxMjVzNTUuOTUsMTI1LDEyNS4wMiwxMjVjNjkuMDUsMCwxMjQuOTgtNTUuOTYsMTI0Ljk4LTEyNQ0KCQlDMTI1MC4wMDEsNTU1LjkzLDExOTQuMDcsNTAwLDExMjUuMDIsNTAweiBNMTE5Mi45NCw2NzUuNTAxYzAsOS41OS03Ljg1LDE3LjQ0LTE3LjQ0LDE3LjQ0aC0xMDFjLTkuNTksMC0xNy40NC03Ljg1LTE3LjQ0LTE3LjQ0DQoJCXYtMTAxYzAtOS41OSw3Ljg1LTE3LjQ0LDE3LjQ0LTE3LjQ0aDEwMWM5LjU5LDAsMTcuNDQsNy44NSwxNy40NCwxNy40NFY2NzUuNTAxeiIvPg0KPC9nPg0KPC9zdmc%2BDQo%3D); background-size: 225px 75px; background-position: -125px -50px; }

.icon-link, .icon-networks, .icon-image { width: 28px; height: 28px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjgwcHgiIGhlaWdodD0iNzYwLjAxM3B4IiB2aWV3Qm94PSIwIDAgMjgwIDc2MC4wMTMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI4MCA3NjAuMDEzIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik0yNTkuODQ5LDU0MC4wMTNIMjAuMTUxQzkuMDIsNTQwLjAxMywwLDU0OS4zNjMsMCw1NjAuOTAydjE3OC4yMjJjMCwxMS41MzksOS4wMiwyMC44ODksMjAuMTUxLDIwLjg4OQ0KCQloMjM5LjY5OGMxMS4xMywwLDIwLjE1MS05LjM1LDIwLjE1MS0yMC44ODlWNTYwLjkwMkMyODAsNTQ5LjM2MywyNzAuOTgsNTQwLjAxMywyNTkuODQ5LDU0MC4wMTN6IE0yMzkuNjg5LDU4MS43ODF2MTEyLjU0NQ0KCQlsLTU1LjU4Mi01Ny41OTdjLTMuMzctMy41LTguODQtMy41LTEyLjIxMSwwbC01OS4xMDIsNjEuMjQ3bC0xOC43MzEtMTkuNDA5Yy0zLjIyLTMuMzMtOC4zOS0zLjUxLTExLjgxLTAuMzlsLTQxLjk2MiwzOC4yMjgNCgkJVjU4MS43ODFIMjM5LjY4OUwyMzkuNjg5LDU4MS43ODF6Ii8%2BDQoJPGVsbGlwc2UgZmlsbD0iI0Q0RDlERCIgY3g9Ijg2LjQxMyIgY3k9IjYxNy4yMzkiIHJ4PSIxOC43NjEiIHJ5PSIxOS40MzkiLz4NCjwvZz4NCjxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik02NS44ODgsMjE0LjFjLTYuODItNi44Mi02LjgyLTE3Ljg3OSwwLTI0LjY5OUwxODkuMzk3LDY1Ljg5OGM2LjgyLTYuODIsMTcuODgtNi44MiwyNC43LDANCgljNi44Miw2LjgyLDYuODIsMTcuODc5LDAsMjQuNjk5TDkwLjU4OCwyMTQuMUM4My43NjgsMjIwLjkzLDcyLjcwOCwyMjAuOTMsNjUuODg4LDIxNC4xeiBNMTc5LjA5Nyw1NS42MDlsMTEuMzItMTEuMzE5DQoJYzEyLjQ4LTEyLjQ3OSwzMi44LTEyLjQ3OSw0NS4yOSwwYzEyLjQ4LDEyLjQ3OSwxMi40OCwzMi43OTgsMCw0NS4yNzhsLTExLjMyLDExLjMxOWwtMTEuMzIsMTEuMzE5bC00MS41Niw0MS41NTgNCgljMjIuNzUsNi42Niw0OC4zNiwxLjA1LDY2LjI3LTE2Ljg1OWwyMi42NC0yMi42MzljMjYuMTEtMjYuMTA5LDI2LjExLTY4LjU3NywwLTk0LjY4NWMtMjYuMTEtMjYuMTA5LTY4LjU4LTI2LjEwOS05NC42OSwwDQoJbC0yMi42NCwyMi42MzljLTE3LjkxLDE3LjkwOS0yMy41Miw0My41MTgtMTYuODYsNjYuMjU3bDQxLjU2LTQxLjU1OEwxNzkuMDk3LDU1LjYwOXogTTk4LjE3OCwyMjcuMWwtOC42Miw4LjYyDQoJYy0xMi40OCwxMi40NzktMzIuOCwxMi40NzktNDUuMjgsMGMtMTIuNDktMTIuNDg5LTEyLjQ5LTMyLjc5OCwwLTQ1LjI4OGw4LjYyLTguNjJsMTQuMDItMTQuMDE5bDQxLjU2LTQxLjU1OA0KCWMtMjIuNzUtNi42Ni00OC4zNi0xLjA1LTY2LjI2LDE2Ljg1OWwtMjIuNjQsMjIuNjM5Yy0yNi4xMSwyNi4xMDktMjYuMSw2OC41NzcsMCw5NC42ODVzNjguNTgsMjYuMTA5LDk0LjY5LDBsMjIuNjQtMjIuNjM5DQoJYzE3LjkxLTE3LjkwOSwyMy41My00My41MTgsMTYuODYtNjYuMjY3bC00MS41Niw0MS41NThMOTguMTc4LDIyNy4xeiIvPg0KPHBhdGggZmlsbD0iI0Q0RDlERCIgZD0iTTI0Ny4yNyw0ODQuMzczYy0xMS4xMy0xMS4wNy01MS45Ny0yMy41NS03MC41Ni0yOC44M2MtMi45My00LjY5LTUuNjItMTEtNi44OC0xOC44Mw0KCWM1LjUxLTUuNzQsOS40OC0xMy4wNywxNC40MS0yMS4yMmMxMC45Mi0xOC4xNSwxNS43Ni0zOC43LDE1Ljc2LTUzLjI0YzAtMjkuMDQtMy42Mi04Mi4yNC02MS44Mi04Mi4yNA0KCWMtNTguMTcsMC02MC45LDUzLjIxLTYwLjksODIuMjRjMCwxNC41MSw2LjM0LDM2Ljg4LDE3LjI2LDU1LjAzYzQuNDQsNy4zNSw3LjY2LDEzLjcxLDExLjg4LDE4LjgxYy0xLjYzLDguOC01LjMzLDE1LjgtOS4yNywyMC44OQ0KCWMtMjAuMzksNy4xLTYwLjg1LDIxLjk5LTcxLjU4LDMyLjc0QzExLjAyLDUwNC4yNTMsMCw1MjUuNTEzLDAsNTQwLjAxM2gyODBDMjgwLjAyLDUyNS41MjMsMjYxLjgzLDQ5OC44OTMsMjQ3LjI3LDQ4NC4zNzN6Ii8%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 28px 76px; }

.icon-link { background-position: 0 0; margin: 6px 0 0 10px; }

.icon-networks { background-position: 0 -28px; margin: 6px 0 0 10px; }

.icon-image { background-position: 0 -54px; margin: 0 0 0 10px; }

.icon-show-hide { width: 20px; height: 13px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTMwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMTMwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMTMwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxlbGxpcHNlIGZpbGw9IiNENEQ5REQiIGN4PSI5OS45OSIgY3k9IjY0LjMiIHJ4PSIyMi42MiIgcnk9IjIyLjU0Ii8%2BDQoJPHBhdGggZmlsbD0iI0Q0RDlERCIgZD0iTTEwMCwwQzQxLjc3LDAsMCw2NSwwLDY1czQxLjc2LDY1LDEwMCw2NXMxMDAtNjUsMTAwLTY1UzE1OC4yNCwwLDEwMCwweiBNOTkuOTksMTEwLjMxDQoJCWMtMjUuNDksMC00Ni4xNS0yMC41OC00Ni4xNS00Ni4wMWMwLTI1LjQsMjAuNjYtNDUuOTksNDYuMTUtNDUuOTljMjUuNSwwLDQ2LjE3LDIwLjU5LDQ2LjE3LDQ1Ljk5DQoJCUMxNDYuMTYsODkuNzMsMTI1LjUsMTEwLjMxLDk5Ljk5LDExMC4zMXoiLz4NCjwvZz4NCjwvc3ZnPg0K); background-size: 20px 13px; }

.selected .icon-show-hide { width: 20px; height: 13px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjAwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAyMDAgMTgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAgMTgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik0xNzYuODksMGMzLjM1LDAsNi43MSwxLjI4LDkuMjcsMy44NGM1LjEyLDUuMTIsNS4xMiwxMy40MiwwLDE4LjU0TDMyLjM4LDE3Ni4xNg0KCQljLTIuNTYsMi41Ni01LjkxLDMuODQtOS4yNywzLjg0cy02LjcxLTEuMjgtOS4yNy0zLjg0Yy01LjEyLTUuMTItNS4xMi0xMy40MiwwLTE4LjU0TDE2Ny42MiwzLjg0QzE3MC4xOCwxLjI4LDE3My41NCwwLDE3Ni44OSwwIg0KCQkvPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRDREOUREIiBkPSJNMTY4LjI3LDU0LjRsLTIzLjY2LDIzLjY2YzAuOTEsMy42MSwxLjU1LDcuMzMsMS41NSwxMS4yM2MwLDI1LjQ0LTIwLjY2LDQ2LjAxLTQ2LjE3LDQ2LjAxDQoJCQljLTMuODYsMC03LjU0LTAuNjEtMTEuMTItMS41bC0xNi4zMSwxNi4zMUM4MS4yLDE1My4xLDkwLjM0LDE1NSwxMDAsMTU1YzU4LjI0LDAsMTAwLTY1LDEwMC02NVMxODguMSw3MS42MiwxNjguMjcsNTQuNHoiLz4NCgkJPHBhdGggZmlsbD0iI0Q0RDlERCIgZD0iTTMxLjczLDEyNS42bDI0LTI0Yy0xLjEtMy45NC0xLjg4LTguMDEtMS44OC0xMi4zMWMwLTI1LjQsMjAuNjYtNDUuOTksNDYuMTUtNDUuOTkNCgkJCWM0LjI1LDAsOC4yOSwwLjc2LDEyLjIsMS44M2wxNS4yNS0xNS4yNUMxMTguOCwyNi45LDEwOS42NSwyNSwxMDAsMjVDNDEuNzcsMjUsMCw5MCwwLDkwUzExLjksMTA4LjM4LDMxLjczLDEyNS42eiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K); background-size: 20px 18px; }

.workspace-settings .icon-settings { width: 18px; height: 18px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTgwcHgiIGhlaWdodD0iMTgwcHgiIHZpZXdCb3g9IjAgMCAxODAgMTgwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxODAgMTgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNBQ0FFQjAiIGQ9Ik0yOC44NjIsMTA5Ljg4YzEuMDQ0LDMuMjE0LDIuMzM5LDYuMzE2LDMuODU3LDkuMjg3bC0xMi40MTgsMjIuMzQ5YzAsMCwwLDYuMDY0LDYuMDU4LDEyLjEyNQ0KCWM2LjA2Miw2LjA2LDEyLjEyNSw2LjA2LDEyLjEyNSw2LjA2bDIyLjM1MS0xMi40MThjMi45NzIsMS41MTUsNi4wNjksMi44MDgsOS4yODUsMy44NTVsNy4wMjMsMjQuNTc2YzAsMCw0LjI4Niw0LjI4NiwxMi44NTcsNC4yODYNCglzMTIuODU3LTQuMjg2LDEyLjg1Ny00LjI4Nmw3LjAyMS0yNC41NzZjMy4yMTQtMS4wNDYsNi4zMTUtMi4zNCw5LjI4Ny0zLjg1NWwyMi4zNTYsMTIuNDE4YzAsMCw2LjA1NiwwLDEyLjExOC02LjA2DQoJYzYuMDYtNi4wNiw2LjA2LTEyLjEyNSw2LjA2LTEyLjEyNWwtMTIuNDItMjIuMzQ5YzEuNTE3LTIuOTcxLDIuODEyLTYuMDczLDMuODU3LTkuMjg3bDI0LjU3OC03LjAyM2MwLDAsNC4yODYtNC4yODYsNC4yODYtMTIuODU3DQoJcy00LjI4Ni0xMi44NTctNC4yODYtMTIuODU3bC0yNC41NzgtNy4wMjNjLTEuMDQ0LTMuMjE0LTIuMzQtNi4zMTItMy44NTctOS4yODNsMTIuNDItMjIuMzUzYzAsMCwwLTYuMDYtNi4wNi0xMi4xMjENCgljLTYuMDYyLTYuMDYtMTIuMTE4LTYuMDY0LTEyLjExOC02LjA2NEwxMTkuMTY3LDMyLjcyYy0yLjk3MS0xLjUxOS02LjA3My0yLjgxMi05LjI4OS0zLjg1OWwtNy4wMjEtMjQuNTc2DQoJQzEwMi44NTcsNC4yODYsOTguNTcxLDAsOTAsMFM3Ny4xNDMsNC4yODYsNzcuMTQzLDQuMjg2TDcwLjEyLDI4Ljg2MmMtMy4yMTYsMS4wNDYtNi4zMTgsMi4zMzktOS4yODksMy44NTlMMzguNDg0LDIwLjI5OQ0KCWMwLDAtNi4wNjIsMC4wMDQtMTIuMTI1LDYuMDY0Yy02LjA1OCw2LjA2LTYuMDU4LDEyLjEyMS02LjA1OCwxMi4xMjFsMTIuNDE4LDIyLjM0OWMtMS41MTcsMi45NzItMi44MTMsNi4wNzMtMy44NTcsOS4yODcNCglMNC4yODYsNzcuMTQzQzQuMjg2LDc3LjE0MywwLDgxLjQyOSwwLDkwczQuMjg2LDEyLjg1Nyw0LjI4NiwxMi44NTdMMjguODYyLDEwOS44OHogTTYwLDkwYzAtMTYuNTY1LDEzLjQyNi0zMCwzMC0zMA0KCWMxNi41NjUsMCwzMCwxMy40MzUsMzAsMzBjMCwxNi41NjktMTMuNDM1LDMwLTMwLDMwQzczLjQyNiwxMjAsNjAsMTA2LjU2OSw2MCw5MHoiLz4NCjwvc3ZnPg0K); background-size: 18px 18px; }

.icon-new-workspace { width: 34px; height: 34px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzQwcHgiIGhlaWdodD0iMzQwcHgiIHZpZXdCb3g9IjAgMCAzNDAgMzQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzNDAgMzQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM4RDlBQTUiIGQ9Ik0zMTcuODUsMTMwLjU1N2wtMTA4LjU3LDAuMDhsLTAuMS0xMDguNTI0QzIwOS4xOCw5Ljg2NiwxOTkuMjUsMCwxODcuMDgsMGwtMzQuMzcsMC4wMg0KCUMxNDAuNDYsMCwxMzAuNTYsOS45MDYsMTMwLjU2LDIyLjE4M2wwLjE4LDEwOC40NDRsLTEwOC41Mi0wLjAzYy0xMi4yNywwLTIyLjE1LDkuODg2LTIyLjE3LDIyLjE0M0wwLDE4Ny4xNg0KCWMwLjA1LDEyLjEyNyw5Ljk2LDIyLjA1MywyMi4yLDIyLjA1M2gxMDguNTZsMC4wNywxMDguNTU0Yy0wLjAzLDEyLjI0Nyw5Ljg2LDIyLjE0MywyMi4wMiwyMi4yMzNsMzQuNDUtMC4wNw0KCWMxMi4xNSwwLjAyLDIyLjEtOS45MzYsMjIuMS0yMi4yMTNsLTAuMTEtMTA4LjUwNGwxMDguNDMsMC4wN2MxMi4yNywwLDIyLjE1LTkuODg2LDIyLjE4LTIyLjEzM2wwLjEtMzQuNDkNCglDMzQwLDE0MC41NDMsMzMwLjA3LDEzMC42MDcsMzE3Ljg1LDEzMC41NTd6Ii8%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 34px 34px; }

.workspace-delete .icon-trash { width: 18px; height: 18px; background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEzIDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkI2RTcxO30KPC9zdHlsZT4KPGc%2BCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOSwyVjBIOC43SDhINUg0LjNINHYySDB2MmgxdjEyaDFoMWg3aDFoMVY0aDFWMkg5eiBNNSwxaDN2MUg1VjF6IE0xMCwxNEgzVjRoN1YxNHoiLz4KCTxyZWN0IHg9IjUiIHk9IjUiIGNsYXNzPSJzdDAiIHdpZHRoPSIxIiBoZWlnaHQ9IjgiLz4KCTxyZWN0IHg9IjciIHk9IjUiIGNsYXNzPSJzdDAiIHdpZHRoPSIxIiBoZWlnaHQ9IjgiLz4KPC9nPgo8L3N2Zz4K); background-size: 18px 18px; }

.icon-workspace { width: 58px; height: 50px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTc5Ljk5OXB4IiBoZWlnaHQ9IjQ5OS45OThweCIgdmlld0JveD0iMCAwIDU3OS45OTkgNDk5Ljk5OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTc5Ljk5OSA0OTkuOTk4Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM4RDlBQTUiIGQ9Ik01NjEuNjMsMEgxOC4zOEM4LjIyLDAsMCw4LjIyLDAsMTguMzh2MTIzLjgwMnYzMzkuNDM2YzAsMTAuMTYsOC4yMiwxOC4zOCwxOC4zOCwxOC4zOGg1NDMuMjM5DQoJYzEwLjE2LDAsMTguMzgtOC4yMiwxOC4zOC0xOC4zOFYxNDIuMTkyVjE4LjM4QzU4MC4wMSw4LjIyLDU3MS43OSwwLDU2MS42MywweiBNMjQwLjc5NCwzNDcuNjQ2YzEwLjMzLDksMTEuNDMsMjQuNjUsMi40MywzNC45OTENCgljLTQuOTEsNS42NC0xMS44LDguNTMtMTguNzEsOC41M2MtNS43OSwwLTExLjU4LTItMTYuMjgtNi4wOWwtNzAuOTYxLTYxLjc3MWMtNS40My00LjcyLTguNTMtMTEuNTQtOC41My0xOC43MQ0KCXMzLjEtMTMuOTksOC41My0xOC43MWw3MC45NjEtNjEuNzcxYzEwLjI5LTguOTgsMjUuOTQtNy45MiwzNC45OTEsMi40M2M5LDEwLjMzLDcuOSwyNS45OS0yLjQzLDM0Ljk5MWwtNDkuNDUxLDQzLjA2MQ0KCUwyNDAuNzk0LDM0Ny42NDZ6IE00NDIuNzI4LDMyMy4yOTZsLTcwLjk2MSw2MS43NzFjLTQuNjksNC4wOS0xMC40OSw2LjA5LTE2LjI4LDYuMDljLTYuOTEsMC0xMy44LTIuODktMTguNzEtOC41Mw0KCWMtOS0xMC4zMy03LjktMjUuOTksMi40My0zNC45OTFsNDkuNDUxLTQzLjA2MWwtNDkuNDUxLTQzLjA2MWMtMTAuMzMtOS0xMS40My0yNC42NS0yLjQzLTM0Ljk5MWM5LjAyLTEwLjM2LDI0LjctMTEuNDEsMzQuOTktMi40Mw0KCWw3MC45NjEsNjEuNzcxYzUuNDMsNC43Miw4LjUzLDExLjU0LDguNTMsMTguNzFTNDQ4LjE1OCwzMTguNTg1LDQ0Mi43MjgsMzIzLjI5NnogTTU0MC4wMDksNDAuMDAxdjgwLjAwMUg0MFY0MC4wMDFINTQwLjAwOXoNCgkgTTExMC4wMDIsODAuMDAxYzAsMTEuMDUtOC45NSwyMC0yMCwyMHMtMjAtOC45NS0yMC0yMHM4Ljk1LTIwLDIwLTIwUzExMC4wMDIsNjguOTUxLDExMC4wMDIsODAuMDAxeiBNMTcwLjAwMyw4MC4wMDENCgljMCwxMS4wNS04Ljk1LDIwLTIwLDIwcy0yMC04Ljk1LTIwLTIwczguOTUtMjAsMjAtMjBTMTcwLjAwMyw2OC45NTEsMTcwLjAwMyw4MC4wMDF6IE0yMzAuMDA0LDgwLjAwMWMwLDExLjA1LTguOTUsMjAtMjAsMjANCglzLTIwLTguOTUtMjAtMjBzOC45NS0yMCwyMC0yMEMyMjEuMDU0LDYwLjAwMSwyMzAuMDA0LDY4Ljk1MSwyMzAuMDA0LDgwLjAwMXoiLz4NCjwvc3ZnPg0K); background-size: 58px 50px; }

.icon-collapse, .icon-expand { width: 15px; height: 10px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzAwcHgiIGhlaWdodD0iMjAwcHgiIHZpZXdCb3g9IjAgMCAzMDAgMjAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMDAgMjAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNENEQ5REQiIGQ9Ik0xNTAsMTguNDg0YzAsNC43LTEuODUsOS40MzEtNS40OSwxMy4wMzFMNzQuOTY1LDk5Ljk5OUw1LjQ5LDMxLjUxNWMtNy4zMi03LjItNy4zMi0xOC44OTEsMC0yNi4xMjINCgljNy4yOTEtNy4xOSwxOS4xOTEtNy4xOSwyNi41MzIsMGw0Mi45NjMsNDIuMzczbDQyLjk0My00Mi4zNzNjNy4zNC03LjE5LDE5LjIxMS03LjE5LDI2LjU4MiwwQzE0OC4xNSw4Ljk4MywxNTAsMTMuNzYzLDE1MCwxOC40ODR6DQoJIi8%2BDQo8cGF0aCBmaWxsPSIjRDREOUREIiBkPSJNMCwxODEuNTE2YzAtNC43LDEuODUtOS40MzEsNS40OS0xMy4wMzFsNjkuNTQ1LTY4LjQ4NWw2OS40NzUsNjguNDg1YzcuMzIsNy4yLDcuMzIsMTguODkxLDAsMjYuMTIyDQoJYy03LjI5MSw3LjE5LTE5LjE5MSw3LjE5LTI2LjUzMiwwbC00Mi45NjMtNDIuMzczbC00Mi45NDMsNDIuMzczYy03LjM0LDcuMTktMTkuMjExLDcuMTktMjYuNTgyLDANCglDMS44NSwxOTEuMDE3LDAsMTg2LjIzNywwLDE4MS41MTZ6Ii8%2BDQo8cGF0aCBmaWxsPSIjNjA2NzZEIiBkPSJNMzAwLDE4LjQ4NGMwLDQuNy0xLjg1LDkuNDMxLTUuNDksMTMuMDMxbC02OS41NDUsNjguNDg1TDE1NS40OSwzMS41MTVjLTcuMzItNy4yLTcuMzItMTguODkxLDAtMjYuMTIyDQoJYzcuMjkxLTcuMTksMTkuMTkxLTcuMTksMjYuNTMyLDBsNDIuOTYzLDQyLjM3M2w0Mi45NDMtNDIuMzczYzcuMzQtNy4xOSwxOS4yMTEtNy4xOSwyNi41ODIsMEMyOTguMTUsOC45ODMsMzAwLDEzLjc2MywzMDAsMTguNDg0eg0KCSIvPg0KPHBhdGggZmlsbD0iIzYwNjc2RCIgZD0iTTE1MC4wODcsMTgxLjUxNmMwLTQuNywxLjg1LTkuNDMxLDUuNDktMTMuMDMxbDY5LjU0NS02OC40ODVsNjkuNDc1LDY4LjQ4NWM3LjMyLDcuMiw3LjMyLDE4Ljg5MSwwLDI2LjEyMg0KCWMtNy4yOSw3LjE5LTE5LjE5MSw3LjE5LTI2LjUzMiwwbC00Mi45NjMtNDIuMzczbC00Mi45NDMsNDIuMzczYy03LjM0LDcuMTktMTkuMjExLDcuMTktMjYuNTgyLDANCglDMTUxLjkzOCwxOTEuMDE3LDE1MC4wODcsMTg2LjIzNywxNTAuMDg3LDE4MS41MTZ6Ii8%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 30px 20px; }

.icon-expand { background-position: 0 -10px; }

.icon-arrow-right-dark { width: 15px; height: 12px; background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNTggNDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU4IDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6IzhFOTY5RDt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NC4xLDIuOWwxMi40LDE2LjZjMSwxLjMsMS41LDIuOSwxLjUsNC41cy0wLjUsMy4xLTEuNSw0LjVMNDQuMSw0NS4xYy0yLjQsMy4zLTcsMy45LTEwLjIsMS40CglzLTMuOC03LjEtMS40LTEwLjNsMy41LTQuOEg3LjNjLTQsMC03LjMtMy4zLTcuMy03LjRzMy4yLTcuNCw3LjItNy40aDI4LjlsLTMuNS00LjhDMzAuMiw4LjYsMzAuOCw0LDM0LDEuNVM0MS43LTAuMyw0NC4xLDIuOXoiLz4KPC9zdmc%2BCg%3D%3D); background-size: 100%; }

.icon-arrow-right-light { width: 15px; height: 12px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1OHB4IiBoZWlnaHQ9IjQ4cHgiIHZpZXdCb3g9IjAgMCA1OCA0OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTggNDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQ0LjEsMi45bDEyLjQsMTYuNmMxLDEuMywxLjUsMi45LDEuNSw0LjVzLTAuNSwzLjEtMS41LDQuNUw0NC4xLDQ1LjFjLTIuNCwzLjMtNywzLjktMTAuMiwxLjQNCglzLTMuOC03LjEtMS40LTEwLjNsMy41LTQuOEg3LjNjLTQsMC03LjMtMy4zLTcuMy03LjRzMy4yLTcuNCw3LjItNy40aDI4LjlsLTMuNS00LjhDMzAuMiw4LjYsMzAuOCw0LDM0LDEuNVM0MS43LTAuMyw0NC4xLDIuOXoiLz4NCjwvc3ZnPg0K); background-size: 100%; }

.icon-maintenance { width: 30px; height: 30px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIzODAgMzgwIDQwIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDM4MCAzODAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0QyRDdEQiIgZD0iTTQwMCwzNzkuOWMtMTEsMC0yMCw5LTIwLDIwYzAsMTEsOSwyMCwyMCwyMGMxMSwwLDIwLTksMjAtMjBDNDIwLDM4OC45LDQxMSwzNzkuOSw0MDAsMzc5Ljl6IE00MDAsNDE1LjcNCgkJYy04LjcsMC0xNS44LTcuMS0xNS44LTE1LjhjMC04LjcsNy4xLTE1LjgsMTUuOC0xNS44YzguNywwLDE1LjgsNy4xLDE1LjgsMTUuOEM0MTUuOCw0MDguNiw0MDguNyw0MTUuNyw0MDAsNDE1Ljd6Ii8%2BDQoJPHBhdGggZmlsbD0iI0QyRDdEQiIgZD0iTTQwNy4zLDM5MC4ySDQwNWMtMC42LDAtMSwwLjUtMSwxdjAuMWgtNi41Yy0yLjMsMC00LjEsMS4xLTUuMywzLjNjLTAuOCwxLjUtMS4xLDMuMS0xLjEsMy4xDQoJCWMtMC4xLDAuNSwwLjIsMC45LDAuNywxLjFjMC4xLDAsMC4yLDAuMSwwLjMsMC4xYzAuNCwwLDAuNy0wLjIsMC45LTAuNWMwLDAsMS4xLTEuOCw0LjItMS44aDYuOHYwLjZjMCwwLjYsMC41LDEsMSwxaDIuMw0KCQljMC42LDAsMS0wLjUsMS0xdi02QzQwOC4zLDM5MC43LDQwNy45LDM5MC4yLDQwNy4zLDM5MC4yeiIvPg0KCTxwYXRoIGZpbGw9IiNEMkQ3REIiIGQ9Ik00MDEuNiwzOTcuOGgtMy4zYy0wLjYsMC0xLDAuNS0xLDF2MTAuOGMwLDAuNiwwLjUsMSwxLDFoMy4zYzAuNiwwLDEtMC41LDEtMXYtMTAuOA0KCQlDNDAyLjcsMzk4LjIsNDAyLjIsMzk3LjgsNDAxLjYsMzk3Ljh6Ii8%2BDQo8L2c%2BDQo8L3N2Zz4NCg%3D%3D); background-size: 30px 30px; }
.container { position: relative; max-width: 1260px; margin: 0 auto; }

.container:before, .container:after { content: " "; display: table; }

.container:after { clear: both; }

@media screen and (min-width: 970px) { .container { padding: 30px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .container { padding: 20px; } }

@media screen and (max-width: 679px) { .container { padding: 15px; } }

.container .row { margin: 0 -15px; width: auto; }
.col { float: left; width: 100%; }

@media screen and (min-width: 970px) { .col { padding: 0 15px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col { padding: 0 10px; } }

@media screen and (max-width: 679px) { .col { padding: 0 7.5px; } }

.col-container:before, .col-container:after { content: " "; display: table; }

.col-container:after { clear: both; }

@media screen and (min-width: 970px) { .col-container { margin: 0 -15px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-container { margin: 0 -10px; } }

@media screen and (max-width: 679px) { .col-container { margin: 0 -7.5px; } }

.col-center, .centered { float: none; margin: 0 auto; }

.col-5 { width: 5% !important; }

@media screen and (min-width: 970px) { .col-5-desktop { width: 5% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-5-tablet { width: 5% !important; } }

@media screen and (min-width: 680px) { .col-5-tablet-desktop, .col-5-desktop-tablet { width: 5% !important; } }

@media screen and (max-width: 969px) { .col-5-tablet-mobile, .col-5-mobile-tablet { width: 5% !important; } }

@media screen and (max-width: 679px) { .col-5-mobile { width: 5% !important; } }

.col-10 { width: 10% !important; }

@media screen and (min-width: 970px) { .col-10-desktop { width: 10% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-10-tablet { width: 10% !important; } }

@media screen and (min-width: 680px) { .col-10-tablet-desktop, .col-10-desktop-tablet { width: 10% !important; } }

@media screen and (max-width: 969px) { .col-10-tablet-mobile, .col-10-mobile-tablet { width: 10% !important; } }

@media screen and (max-width: 679px) { .col-10-mobile { width: 10% !important; } }

.col-15 { width: 15% !important; }

@media screen and (min-width: 970px) { .col-15-desktop { width: 15% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-15-tablet { width: 15% !important; } }

@media screen and (min-width: 680px) { .col-15-tablet-desktop, .col-15-desktop-tablet { width: 15% !important; } }

@media screen and (max-width: 969px) { .col-15-tablet-mobile, .col-15-mobile-tablet { width: 15% !important; } }

@media screen and (max-width: 679px) { .col-15-mobile { width: 15% !important; } }

.col-20 { width: 20% !important; }

@media screen and (min-width: 970px) { .col-20-desktop { width: 20% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-20-tablet { width: 20% !important; } }

@media screen and (min-width: 680px) { .col-20-tablet-desktop, .col-20-desktop-tablet { width: 20% !important; } }

@media screen and (max-width: 969px) { .col-20-tablet-mobile, .col-20-mobile-tablet { width: 20% !important; } }

@media screen and (max-width: 679px) { .col-20-mobile { width: 20% !important; } }

.col-25 { width: 25% !important; }

@media screen and (min-width: 970px) { .col-25-desktop { width: 25% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-25-tablet { width: 25% !important; } }

@media screen and (min-width: 680px) { .col-25-tablet-desktop, .col-25-desktop-tablet { width: 25% !important; } }

@media screen and (max-width: 969px) { .col-25-tablet-mobile, .col-25-mobile-tablet { width: 25% !important; } }

@media screen and (max-width: 679px) { .col-25-mobile { width: 25% !important; } }

.col-30 { width: 30% !important; }

@media screen and (min-width: 970px) { .col-30-desktop { width: 30% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-30-tablet { width: 30% !important; } }

@media screen and (min-width: 680px) { .col-30-tablet-desktop, .col-30-desktop-tablet { width: 30% !important; } }

@media screen and (max-width: 969px) { .col-30-tablet-mobile, .col-30-mobile-tablet { width: 30% !important; } }

@media screen and (max-width: 679px) { .col-30-mobile { width: 30% !important; } }

.col-33 { width: 33% !important; }

@media screen and (min-width: 970px) { .col-33-desktop { width: 33% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-33-tablet { width: 33% !important; } }

@media screen and (min-width: 680px) { .col-33-tablet-desktop, .col-33-desktop-tablet { width: 33% !important; } }

@media screen and (max-width: 969px) { .col-33-tablet-mobile, .col-33-mobile-tablet { width: 33% !important; } }

@media screen and (max-width: 679px) { .col-33-mobile { width: 33% !important; } }

.col-35 { width: 35% !important; }

@media screen and (min-width: 970px) { .col-35-desktop { width: 35% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-35-tablet { width: 35% !important; } }

@media screen and (min-width: 680px) { .col-35-tablet-desktop, .col-35-desktop-tablet { width: 35% !important; } }

@media screen and (max-width: 969px) { .col-35-tablet-mobile, .col-35-mobile-tablet { width: 35% !important; } }

@media screen and (max-width: 679px) { .col-35-mobile { width: 35% !important; } }

.col-40 { width: 40% !important; }

@media screen and (min-width: 970px) { .col-40-desktop { width: 40% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-40-tablet { width: 40% !important; } }

@media screen and (min-width: 680px) { .col-40-tablet-desktop, .col-40-desktop-tablet { width: 40% !important; } }

@media screen and (max-width: 969px) { .col-40-tablet-mobile, .col-40-mobile-tablet { width: 40% !important; } }

@media screen and (max-width: 679px) { .col-40-mobile { width: 40% !important; } }

.col-45 { width: 45% !important; }

@media screen and (min-width: 970px) { .col-45-desktop { width: 45% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-45-tablet { width: 45% !important; } }

@media screen and (min-width: 680px) { .col-45-tablet-desktop, .col-45-desktop-tablet { width: 45% !important; } }

@media screen and (max-width: 969px) { .col-45-tablet-mobile, .col-45-mobile-tablet { width: 45% !important; } }

@media screen and (max-width: 679px) { .col-45-mobile { width: 45% !important; } }

.col-50 { width: 50% !important; }

@media screen and (min-width: 970px) { .col-50-desktop { width: 50% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-50-tablet { width: 50% !important; } }

@media screen and (min-width: 680px) { .col-50-tablet-desktop, .col-50-desktop-tablet { width: 50% !important; } }

@media screen and (max-width: 969px) { .col-50-tablet-mobile, .col-50-mobile-tablet { width: 50% !important; } }

@media screen and (max-width: 679px) { .col-50-mobile { width: 50% !important; } }

.col-55 { width: 55% !important; }

@media screen and (min-width: 970px) { .col-55-desktop { width: 55% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-55-tablet { width: 55% !important; } }

@media screen and (min-width: 680px) { .col-55-tablet-desktop, .col-55-desktop-tablet { width: 55% !important; } }

@media screen and (max-width: 969px) { .col-55-tablet-mobile, .col-55-mobile-tablet { width: 55% !important; } }

@media screen and (max-width: 679px) { .col-55-mobile { width: 55% !important; } }

.col-60 { width: 60% !important; }

@media screen and (min-width: 970px) { .col-60-desktop { width: 60% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-60-tablet { width: 60% !important; } }

@media screen and (min-width: 680px) { .col-60-tablet-desktop, .col-60-desktop-tablet { width: 60% !important; } }

@media screen and (max-width: 969px) { .col-60-tablet-mobile, .col-60-mobile-tablet { width: 60% !important; } }

@media screen and (max-width: 679px) { .col-60-mobile { width: 60% !important; } }

.col-65 { width: 65% !important; }

@media screen and (min-width: 970px) { .col-65-desktop { width: 65% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-65-tablet { width: 65% !important; } }

@media screen and (min-width: 680px) { .col-65-tablet-desktop, .col-65-desktop-tablet { width: 65% !important; } }

@media screen and (max-width: 969px) { .col-65-tablet-mobile, .col-65-mobile-tablet { width: 65% !important; } }

@media screen and (max-width: 679px) { .col-65-mobile { width: 65% !important; } }

.col-70 { width: 70% !important; }

@media screen and (min-width: 970px) { .col-70-desktop { width: 70% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-70-tablet { width: 70% !important; } }

@media screen and (min-width: 680px) { .col-70-tablet-desktop, .col-70-desktop-tablet { width: 70% !important; } }

@media screen and (max-width: 969px) { .col-70-tablet-mobile, .col-70-mobile-tablet { width: 70% !important; } }

@media screen and (max-width: 679px) { .col-70-mobile { width: 70% !important; } }

.col-75 { width: 75% !important; }

@media screen and (min-width: 970px) { .col-75-desktop { width: 75% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-75-tablet { width: 75% !important; } }

@media screen and (min-width: 680px) { .col-75-tablet-desktop, .col-75-desktop-tablet { width: 75% !important; } }

@media screen and (max-width: 969px) { .col-75-tablet-mobile, .col-75-mobile-tablet { width: 75% !important; } }

@media screen and (max-width: 679px) { .col-75-mobile { width: 75% !important; } }

.col-80 { width: 80% !important; }

@media screen and (min-width: 970px) { .col-80-desktop { width: 80% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-80-tablet { width: 80% !important; } }

@media screen and (min-width: 680px) { .col-80-tablet-desktop, .col-80-desktop-tablet { width: 80% !important; } }

@media screen and (max-width: 969px) { .col-80-tablet-mobile, .col-80-mobile-tablet { width: 80% !important; } }

@media screen and (max-width: 679px) { .col-80-mobile { width: 80% !important; } }

.col-85 { width: 85% !important; }

@media screen and (min-width: 970px) { .col-85-desktop { width: 85% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-85-tablet { width: 85% !important; } }

@media screen and (min-width: 680px) { .col-85-tablet-desktop, .col-85-desktop-tablet { width: 85% !important; } }

@media screen and (max-width: 969px) { .col-85-tablet-mobile, .col-85-mobile-tablet { width: 85% !important; } }

@media screen and (max-width: 679px) { .col-85-mobile { width: 85% !important; } }

.col-90 { width: 90% !important; }

@media screen and (min-width: 970px) { .col-90-desktop { width: 90% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-90-tablet { width: 90% !important; } }

@media screen and (min-width: 680px) { .col-90-tablet-desktop, .col-90-desktop-tablet { width: 90% !important; } }

@media screen and (max-width: 969px) { .col-90-tablet-mobile, .col-90-mobile-tablet { width: 90% !important; } }

@media screen and (max-width: 679px) { .col-90-mobile { width: 90% !important; } }

.col-95 { width: 95% !important; }

@media screen and (min-width: 970px) { .col-95-desktop { width: 95% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-95-tablet { width: 95% !important; } }

@media screen and (min-width: 680px) { .col-95-tablet-desktop, .col-95-desktop-tablet { width: 95% !important; } }

@media screen and (max-width: 969px) { .col-95-tablet-mobile, .col-95-mobile-tablet { width: 95% !important; } }

@media screen and (max-width: 679px) { .col-95-mobile { width: 95% !important; } }

.col-100 { width: 100% !important; }

@media screen and (min-width: 970px) { .col-100-desktop { width: 100% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .col-100-tablet { width: 100% !important; } }

@media screen and (min-width: 680px) { .col-100-tablet-desktop, .col-100-desktop-tablet { width: 100% !important; } }

@media screen and (max-width: 969px) { .col-100-tablet-mobile, .col-100-mobile-tablet { width: 100% !important; } }

@media screen and (max-width: 679px) { .col-100-mobile { width: 100% !important; } }

@media screen and (min-width: 970px) { .right-desktop { float: right; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .right-tablet { float: right; } }

@media screen and (min-width: 680px) { .right-tablet-desktop, .right-desktop-tablet { float: right; } }

@media screen and (max-width: 969px) { .right-tablet-mobile, .right-mobile-tablet { float: right; } }

@media screen and (max-width: 679px) { .right-mobile { float: right; } }

@media screen and (min-width: 768px) { .right-768 { float: right; } }

.grid-container { margin: 0 -15px; }
.add-ai-fill, .add-ai-fill-before:before, .add-ai-fill-after:after, .add-ai-fill-on-hover:hover, .add-ai-fill-to-child-on-hover:hover .add-ai-fill-on-parent-hover { fill: #733A88 !important; }

.add-ai-fill-light, .add-ai-fill-light-before:before, .add-ai-fill-light-after:after, .add-ai-fill-light-on-hover:hover, .add-ai-fill-light-to-child-on-hover:hover .add-ai-fill-light-on-parent-hover { fill: #82429a !important; }

.add-ai-fill-lighter, .add-ai-fill-lighter-before:before, .add-ai-fill-lighter-after:after, .add-ai-fill-lighter-on-hover:hover, .add-ai-fill-lighter-to-child-on-hover:hover .add-ai-fill-lighter-on-parent-hover { fill: #9149ac !important; }

.add-ai-fill-lightest, .add-ai-fill-lightest-before:before, .add-ai-fill-lightest-after:after, .add-ai-fill-lightest-on-hover:hover, .add-ai-fill-lightest-to-child-on-hover:hover .add-ai-fill-lightest-on-parent-hover { fill: #a869bf !important; }

.add-ai-fill-dark, .add-ai-fill-dark-before:before, .add-ai-fill-dark-after:after, .add-ai-fill-dark-on-hover:hover, .add-ai-fill-dark-to-child-on-hover:hover .add-ai-fill-dark-on-parent-hover { fill: #643276 !important; }

.add-ai-fill-darker, .add-ai-fill-darker-before:before, .add-ai-fill-darker-after:after, .add-ai-fill-darker-on-hover:hover, .add-ai-fill-darker-to-child-on-hover:hover .add-ai-fill-darker-on-parent-hover { fill: #552b64 !important; }

.add-ai-fill-darkest, .add-ai-fill-darkest-before:before, .add-ai-fill-darkest-after:after, .add-ai-fill-darkest-on-hover:hover, .add-ai-fill-darkest-to-child-on-hover:hover .add-ai-fill-darkest-on-parent-hover { fill: #371c40 !important; }

.add-ai-stroke, .add-ai-stroke-before:before, .add-ai-stroke-after:after, .add-ai-stroke-on-hover:hover, .add-ai-stroke-to-child-on-hover:hover .add-ai-stroke-on-parent-hover { stroke: #733A88 !important; }

.add-ai-stroke-light, .add-ai-stroke-light-before:before, .add-ai-stroke-light-after:after, .add-ai-stroke-light-on-hover:hover, .add-ai-stroke-light-to-child-on-hover:hover .add-ai-stroke-light-on-parent-hover { stroke: #82429a !important; }

.add-ai-stroke-lighter, .add-ai-stroke-lighter-before:before, .add-ai-stroke-lighter-after:after, .add-ai-stroke-lighter-on-hover:hover, .add-ai-stroke-lighter-to-child-on-hover:hover .add-ai-stroke-lighter-on-parent-hover { stroke: #9149ac !important; }

.add-ai-stroke-lightest, .add-ai-stroke-lightest-before:before, .add-ai-stroke-lightest-after:after, .add-ai-stroke-lightest-on-hover:hover, .add-ai-stroke-lightest-to-child-on-hover:hover .add-ai-stroke-lightest-on-parent-hover { stroke: #a869bf !important; }

.add-ai-stroke-dark, .add-ai-stroke-dark-before:before, .add-ai-stroke-dark-after:after, .add-ai-stroke-dark-on-hover:hover, .add-ai-stroke-dark-to-child-on-hover:hover .add-ai-stroke-dark-on-parent-hover { stroke: #643276 !important; }

.add-ai-stroke-darker, .add-ai-stroke-darker-before:before, .add-ai-stroke-darker-after:after, .add-ai-stroke-darker-on-hover:hover, .add-ai-stroke-darker-to-child-on-hover:hover .add-ai-stroke-darker-on-parent-hover { stroke: #552b64 !important; }

.add-ai-stroke-darkest, .add-ai-stroke-darkest-before:before, .add-ai-stroke-darkest-after:after, .add-ai-stroke-darkest-on-hover:hover, .add-ai-stroke-darkest-to-child-on-hover:hover .add-ai-stroke-darkest-on-parent-hover { stroke: #371c40 !important; }

.add-ai-color, .add-ai-color-before:before, .add-ai-color-after:after, .add-ai-color-on-hover:hover, .add-ai-color-to-child-on-hover:hover .add-ai-color-on-parent-hover { color: #733A88 !important; }

.add-ai-color-light, .add-ai-color-light-before:before, .add-ai-color-light-after:after, .add-ai-color-light-on-hover:hover, .add-ai-color-light-to-child-on-hover:hover .add-ai-color-light-on-parent-hover { color: #82429a !important; }

.add-ai-color-lighter, .add-ai-color-lighter-before:before, .add-ai-color-lighter-after:after, .add-ai-color-lighter-on-hover:hover, .add-ai-color-lighter-to-child-on-hover:hover .add-ai-color-lighter-on-parent-hover { color: #9149ac !important; }

.add-ai-color-lightest, .add-ai-color-lightest-before:before, .add-ai-color-lightest-after:after, .add-ai-color-lightest-on-hover:hover, .add-ai-color-lightest-to-child-on-hover:hover .add-ai-color-lightest-on-parent-hover { color: #a869bf !important; }

.add-ai-color-dark, .add-ai-color-dark-before:before, .add-ai-color-dark-after:after, .add-ai-color-dark-on-hover:hover, .add-ai-color-dark-to-child-on-hover:hover .add-ai-color-dark-on-parent-hover { color: #643276 !important; }

.add-ai-color-darker, .add-ai-color-darker-before:before, .add-ai-color-darker-after:after, .add-ai-color-darker-on-hover:hover, .add-ai-color-darker-to-child-on-hover:hover .add-ai-color-darker-on-parent-hover { color: #552b64 !important; }

.add-ai-color-darkest, .add-ai-color-darkest-before:before, .add-ai-color-darkest-after:after, .add-ai-color-darkest-on-hover:hover, .add-ai-color-darkest-to-child-on-hover:hover .add-ai-color-darkest-on-parent-hover { color: #371c40 !important; }

.add-ai-border-color, .add-ai-border-color-before:before, .add-ai-border-color-after:after, .add-ai-border-color-on-hover:hover, .add-ai-border-color-to-child-on-hover:hover .add-ai-border-color-on-parent-hover { border-color: #733A88 !important; }

.add-ai-border-color-light, .add-ai-border-color-light-before:before, .add-ai-border-color-light-after:after, .add-ai-border-color-light-on-hover:hover, .add-ai-border-color-light-to-child-on-hover:hover .add-ai-border-color-light-on-parent-hover { border-color: #82429a !important; }

.add-ai-border-color-lighter, .add-ai-border-color-lighter-before:before, .add-ai-border-color-lighter-after:after, .add-ai-border-color-lighter-on-hover:hover, .add-ai-border-color-lighter-to-child-on-hover:hover .add-ai-border-color-lighter-on-parent-hover { border-color: #9149ac !important; }

.add-ai-border-color-lightest, .add-ai-border-color-lightest-before:before, .add-ai-border-color-lightest-after:after, .add-ai-border-color-lightest-on-hover:hover, .add-ai-border-color-lightest-to-child-on-hover:hover .add-ai-border-color-lightest-on-parent-hover { border-color: #a869bf !important; }

.add-ai-border-color-dark, .add-ai-border-color-dark-before:before, .add-ai-border-color-dark-after:after, .add-ai-border-color-dark-on-hover:hover, .add-ai-border-color-dark-to-child-on-hover:hover .add-ai-border-color-dark-on-parent-hover { border-color: #643276 !important; }

.add-ai-border-color-darker, .add-ai-border-color-darker-before:before, .add-ai-border-color-darker-after:after, .add-ai-border-color-darker-on-hover:hover, .add-ai-border-color-darker-to-child-on-hover:hover .add-ai-border-color-darker-on-parent-hover { border-color: #552b64 !important; }

.add-ai-border-color-darkest, .add-ai-border-color-darkest-before:before, .add-ai-border-color-darkest-after:after, .add-ai-border-color-darkest-on-hover:hover, .add-ai-border-color-darkest-to-child-on-hover:hover .add-ai-border-color-darkest-on-parent-hover { border-color: #371c40 !important; }

.add-ai-background-color, .add-ai-background-color-before:before, .add-ai-background-color-after:after, .add-ai-background-color-on-hover:hover, .add-ai-background-color-to-child-on-hover:hover .add-ai-background-color-on-parent-hover { background-color: #733A88 !important; }

.add-ai-background-color-light, .add-ai-background-color-light-before:before, .add-ai-background-color-light-after:after, .add-ai-background-color-light-on-hover:hover, .add-ai-background-color-light-to-child-on-hover:hover .add-ai-background-color-light-on-parent-hover { background-color: #82429a !important; }

.add-ai-background-color-lighter, .add-ai-background-color-lighter-before:before, .add-ai-background-color-lighter-after:after, .add-ai-background-color-lighter-on-hover:hover, .add-ai-background-color-lighter-to-child-on-hover:hover .add-ai-background-color-lighter-on-parent-hover { background-color: #9149ac !important; }

.add-ai-background-color-lightest, .add-ai-background-color-lightest-before:before, .add-ai-background-color-lightest-after:after, .add-ai-background-color-lightest-on-hover:hover, .add-ai-background-color-lightest-to-child-on-hover:hover .add-ai-background-color-lightest-on-parent-hover { background-color: #a869bf !important; }

.add-ai-background-color-dark, .add-ai-background-color-dark-before:before, .add-ai-background-color-dark-after:after, .add-ai-background-color-dark-on-hover:hover, .add-ai-background-color-dark-to-child-on-hover:hover .add-ai-background-color-dark-on-parent-hover { background-color: #643276 !important; }

.add-ai-background-color-darker, .add-ai-background-color-darker-before:before, .add-ai-background-color-darker-after:after, .add-ai-background-color-darker-on-hover:hover, .add-ai-background-color-darker-to-child-on-hover:hover .add-ai-background-color-darker-on-parent-hover { background-color: #552b64 !important; }

.add-ai-background-color-darkest, .add-ai-background-color-darkest-before:before, .add-ai-background-color-darkest-after:after, .add-ai-background-color-darkest-on-hover:hover, .add-ai-background-color-darkest-to-child-on-hover:hover .add-ai-background-color-darkest-on-parent-hover { background-color: #371c40 !important; }

.add-back-end-fill, .add-back-end-fill-before:before, .add-back-end-fill-after:after, .add-back-end-fill-on-hover:hover, .add-back-end-fill-to-child-on-hover:hover .add-back-end-fill-on-parent-hover { fill: #008297 !important; }

.add-back-end-fill-light, .add-back-end-fill-light-before:before, .add-back-end-fill-light-after:after, .add-back-end-fill-light-on-hover:hover, .add-back-end-fill-light-to-child-on-hover:hover .add-back-end-fill-light-on-parent-hover { fill: #0098b1 !important; }

.add-back-end-fill-lighter, .add-back-end-fill-lighter-before:before, .add-back-end-fill-lighter-after:after, .add-back-end-fill-lighter-on-hover:hover, .add-back-end-fill-lighter-to-child-on-hover:hover .add-back-end-fill-lighter-on-parent-hover { fill: #00aeca !important; }

.add-back-end-fill-lightest, .add-back-end-fill-lightest-before:before, .add-back-end-fill-lightest-after:after, .add-back-end-fill-lightest-on-hover:hover, .add-back-end-fill-lightest-to-child-on-hover:hover .add-back-end-fill-lightest-on-parent-hover { fill: #00dafd !important; }

.add-back-end-fill-dark, .add-back-end-fill-dark-before:before, .add-back-end-fill-dark-after:after, .add-back-end-fill-dark-on-hover:hover, .add-back-end-fill-dark-to-child-on-hover:hover .add-back-end-fill-dark-on-parent-hover { fill: #006c7e !important; }

.add-back-end-fill-darker, .add-back-end-fill-darker-before:before, .add-back-end-fill-darker-after:after, .add-back-end-fill-darker-on-hover:hover, .add-back-end-fill-darker-to-child-on-hover:hover .add-back-end-fill-darker-on-parent-hover { fill: #005664 !important; }

.add-back-end-fill-darkest, .add-back-end-fill-darkest-before:before, .add-back-end-fill-darkest-after:after, .add-back-end-fill-darkest-on-hover:hover, .add-back-end-fill-darkest-to-child-on-hover:hover .add-back-end-fill-darkest-on-parent-hover { fill: #002a31 !important; }

.add-back-end-stroke, .add-back-end-stroke-before:before, .add-back-end-stroke-after:after, .add-back-end-stroke-on-hover:hover, .add-back-end-stroke-to-child-on-hover:hover .add-back-end-stroke-on-parent-hover { stroke: #008297 !important; }

.add-back-end-stroke-light, .add-back-end-stroke-light-before:before, .add-back-end-stroke-light-after:after, .add-back-end-stroke-light-on-hover:hover, .add-back-end-stroke-light-to-child-on-hover:hover .add-back-end-stroke-light-on-parent-hover { stroke: #0098b1 !important; }

.add-back-end-stroke-lighter, .add-back-end-stroke-lighter-before:before, .add-back-end-stroke-lighter-after:after, .add-back-end-stroke-lighter-on-hover:hover, .add-back-end-stroke-lighter-to-child-on-hover:hover .add-back-end-stroke-lighter-on-parent-hover { stroke: #00aeca !important; }

.add-back-end-stroke-lightest, .add-back-end-stroke-lightest-before:before, .add-back-end-stroke-lightest-after:after, .add-back-end-stroke-lightest-on-hover:hover, .add-back-end-stroke-lightest-to-child-on-hover:hover .add-back-end-stroke-lightest-on-parent-hover { stroke: #00dafd !important; }

.add-back-end-stroke-dark, .add-back-end-stroke-dark-before:before, .add-back-end-stroke-dark-after:after, .add-back-end-stroke-dark-on-hover:hover, .add-back-end-stroke-dark-to-child-on-hover:hover .add-back-end-stroke-dark-on-parent-hover { stroke: #006c7e !important; }

.add-back-end-stroke-darker, .add-back-end-stroke-darker-before:before, .add-back-end-stroke-darker-after:after, .add-back-end-stroke-darker-on-hover:hover, .add-back-end-stroke-darker-to-child-on-hover:hover .add-back-end-stroke-darker-on-parent-hover { stroke: #005664 !important; }

.add-back-end-stroke-darkest, .add-back-end-stroke-darkest-before:before, .add-back-end-stroke-darkest-after:after, .add-back-end-stroke-darkest-on-hover:hover, .add-back-end-stroke-darkest-to-child-on-hover:hover .add-back-end-stroke-darkest-on-parent-hover { stroke: #002a31 !important; }

.add-back-end-color, .add-back-end-color-before:before, .add-back-end-color-after:after, .add-back-end-color-on-hover:hover, .add-back-end-color-to-child-on-hover:hover .add-back-end-color-on-parent-hover { color: #008297 !important; }

.add-back-end-color-light, .add-back-end-color-light-before:before, .add-back-end-color-light-after:after, .add-back-end-color-light-on-hover:hover, .add-back-end-color-light-to-child-on-hover:hover .add-back-end-color-light-on-parent-hover { color: #0098b1 !important; }

.add-back-end-color-lighter, .add-back-end-color-lighter-before:before, .add-back-end-color-lighter-after:after, .add-back-end-color-lighter-on-hover:hover, .add-back-end-color-lighter-to-child-on-hover:hover .add-back-end-color-lighter-on-parent-hover { color: #00aeca !important; }

.add-back-end-color-lightest, .add-back-end-color-lightest-before:before, .add-back-end-color-lightest-after:after, .add-back-end-color-lightest-on-hover:hover, .add-back-end-color-lightest-to-child-on-hover:hover .add-back-end-color-lightest-on-parent-hover { color: #00dafd !important; }

.add-back-end-color-dark, .add-back-end-color-dark-before:before, .add-back-end-color-dark-after:after, .add-back-end-color-dark-on-hover:hover, .add-back-end-color-dark-to-child-on-hover:hover .add-back-end-color-dark-on-parent-hover { color: #006c7e !important; }

.add-back-end-color-darker, .add-back-end-color-darker-before:before, .add-back-end-color-darker-after:after, .add-back-end-color-darker-on-hover:hover, .add-back-end-color-darker-to-child-on-hover:hover .add-back-end-color-darker-on-parent-hover { color: #005664 !important; }

.add-back-end-color-darkest, .add-back-end-color-darkest-before:before, .add-back-end-color-darkest-after:after, .add-back-end-color-darkest-on-hover:hover, .add-back-end-color-darkest-to-child-on-hover:hover .add-back-end-color-darkest-on-parent-hover { color: #002a31 !important; }

.add-back-end-border-color, .add-back-end-border-color-before:before, .add-back-end-border-color-after:after, .add-back-end-border-color-on-hover:hover, .add-back-end-border-color-to-child-on-hover:hover .add-back-end-border-color-on-parent-hover { border-color: #008297 !important; }

.add-back-end-border-color-light, .add-back-end-border-color-light-before:before, .add-back-end-border-color-light-after:after, .add-back-end-border-color-light-on-hover:hover, .add-back-end-border-color-light-to-child-on-hover:hover .add-back-end-border-color-light-on-parent-hover { border-color: #0098b1 !important; }

.add-back-end-border-color-lighter, .add-back-end-border-color-lighter-before:before, .add-back-end-border-color-lighter-after:after, .add-back-end-border-color-lighter-on-hover:hover, .add-back-end-border-color-lighter-to-child-on-hover:hover .add-back-end-border-color-lighter-on-parent-hover { border-color: #00aeca !important; }

.add-back-end-border-color-lightest, .add-back-end-border-color-lightest-before:before, .add-back-end-border-color-lightest-after:after, .add-back-end-border-color-lightest-on-hover:hover, .add-back-end-border-color-lightest-to-child-on-hover:hover .add-back-end-border-color-lightest-on-parent-hover { border-color: #00dafd !important; }

.add-back-end-border-color-dark, .add-back-end-border-color-dark-before:before, .add-back-end-border-color-dark-after:after, .add-back-end-border-color-dark-on-hover:hover, .add-back-end-border-color-dark-to-child-on-hover:hover .add-back-end-border-color-dark-on-parent-hover { border-color: #006c7e !important; }

.add-back-end-border-color-darker, .add-back-end-border-color-darker-before:before, .add-back-end-border-color-darker-after:after, .add-back-end-border-color-darker-on-hover:hover, .add-back-end-border-color-darker-to-child-on-hover:hover .add-back-end-border-color-darker-on-parent-hover { border-color: #005664 !important; }

.add-back-end-border-color-darkest, .add-back-end-border-color-darkest-before:before, .add-back-end-border-color-darkest-after:after, .add-back-end-border-color-darkest-on-hover:hover, .add-back-end-border-color-darkest-to-child-on-hover:hover .add-back-end-border-color-darkest-on-parent-hover { border-color: #002a31 !important; }

.add-back-end-background-color, .add-back-end-background-color-before:before, .add-back-end-background-color-after:after, .add-back-end-background-color-on-hover:hover, .add-back-end-background-color-to-child-on-hover:hover .add-back-end-background-color-on-parent-hover { background-color: #008297 !important; }

.add-back-end-background-color-light, .add-back-end-background-color-light-before:before, .add-back-end-background-color-light-after:after, .add-back-end-background-color-light-on-hover:hover, .add-back-end-background-color-light-to-child-on-hover:hover .add-back-end-background-color-light-on-parent-hover { background-color: #0098b1 !important; }

.add-back-end-background-color-lighter, .add-back-end-background-color-lighter-before:before, .add-back-end-background-color-lighter-after:after, .add-back-end-background-color-lighter-on-hover:hover, .add-back-end-background-color-lighter-to-child-on-hover:hover .add-back-end-background-color-lighter-on-parent-hover { background-color: #00aeca !important; }

.add-back-end-background-color-lightest, .add-back-end-background-color-lightest-before:before, .add-back-end-background-color-lightest-after:after, .add-back-end-background-color-lightest-on-hover:hover, .add-back-end-background-color-lightest-to-child-on-hover:hover .add-back-end-background-color-lightest-on-parent-hover { background-color: #00dafd !important; }

.add-back-end-background-color-dark, .add-back-end-background-color-dark-before:before, .add-back-end-background-color-dark-after:after, .add-back-end-background-color-dark-on-hover:hover, .add-back-end-background-color-dark-to-child-on-hover:hover .add-back-end-background-color-dark-on-parent-hover { background-color: #006c7e !important; }

.add-back-end-background-color-darker, .add-back-end-background-color-darker-before:before, .add-back-end-background-color-darker-after:after, .add-back-end-background-color-darker-on-hover:hover, .add-back-end-background-color-darker-to-child-on-hover:hover .add-back-end-background-color-darker-on-parent-hover { background-color: #005664 !important; }

.add-back-end-background-color-darkest, .add-back-end-background-color-darkest-before:before, .add-back-end-background-color-darkest-after:after, .add-back-end-background-color-darkest-on-hover:hover, .add-back-end-background-color-darkest-to-child-on-hover:hover .add-back-end-background-color-darkest-on-parent-hover { background-color: #002a31 !important; }

.add-data-fill, .add-data-fill-before:before, .add-data-fill-after:after, .add-data-fill-on-hover:hover, .add-data-fill-to-child-on-hover:hover .add-data-fill-on-parent-hover { fill: #9F4B84 !important; }

.add-data-fill-light, .add-data-fill-light-before:before, .add-data-fill-light-after:after, .add-data-fill-light-on-hover:hover, .add-data-fill-light-to-child-on-hover:hover .add-data-fill-light-on-parent-hover { fill: #af5592 !important; }

.add-data-fill-lighter, .add-data-fill-lighter-before:before, .add-data-fill-lighter-after:after, .add-data-fill-lighter-on-hover:hover, .add-data-fill-lighter-to-child-on-hover:hover .add-data-fill-lighter-on-parent-hover { fill: #b7669d !important; }

.add-data-fill-lightest, .add-data-fill-lightest-before:before, .add-data-fill-lightest-after:after, .add-data-fill-lightest-on-hover:hover, .add-data-fill-lightest-to-child-on-hover:hover .add-data-fill-lightest-on-parent-hover { fill: #c789b3 !important; }

.add-data-fill-dark, .add-data-fill-dark-before:before, .add-data-fill-dark-after:after, .add-data-fill-dark-on-hover:hover, .add-data-fill-dark-to-child-on-hover:hover .add-data-fill-dark-on-parent-hover { fill: #8e4376 !important; }

.add-data-fill-darker, .add-data-fill-darker-before:before, .add-data-fill-darker-after:after, .add-data-fill-darker-on-hover:hover, .add-data-fill-darker-to-child-on-hover:hover .add-data-fill-darker-on-parent-hover { fill: #7c3b67 !important; }

.add-data-fill-darkest, .add-data-fill-darkest-before:before, .add-data-fill-darkest-after:after, .add-data-fill-darkest-on-hover:hover, .add-data-fill-darkest-to-child-on-hover:hover .add-data-fill-darkest-on-parent-hover { fill: #5a2a4a !important; }

.add-data-stroke, .add-data-stroke-before:before, .add-data-stroke-after:after, .add-data-stroke-on-hover:hover, .add-data-stroke-to-child-on-hover:hover .add-data-stroke-on-parent-hover { stroke: #9F4B84 !important; }

.add-data-stroke-light, .add-data-stroke-light-before:before, .add-data-stroke-light-after:after, .add-data-stroke-light-on-hover:hover, .add-data-stroke-light-to-child-on-hover:hover .add-data-stroke-light-on-parent-hover { stroke: #af5592 !important; }

.add-data-stroke-lighter, .add-data-stroke-lighter-before:before, .add-data-stroke-lighter-after:after, .add-data-stroke-lighter-on-hover:hover, .add-data-stroke-lighter-to-child-on-hover:hover .add-data-stroke-lighter-on-parent-hover { stroke: #b7669d !important; }

.add-data-stroke-lightest, .add-data-stroke-lightest-before:before, .add-data-stroke-lightest-after:after, .add-data-stroke-lightest-on-hover:hover, .add-data-stroke-lightest-to-child-on-hover:hover .add-data-stroke-lightest-on-parent-hover { stroke: #c789b3 !important; }

.add-data-stroke-dark, .add-data-stroke-dark-before:before, .add-data-stroke-dark-after:after, .add-data-stroke-dark-on-hover:hover, .add-data-stroke-dark-to-child-on-hover:hover .add-data-stroke-dark-on-parent-hover { stroke: #8e4376 !important; }

.add-data-stroke-darker, .add-data-stroke-darker-before:before, .add-data-stroke-darker-after:after, .add-data-stroke-darker-on-hover:hover, .add-data-stroke-darker-to-child-on-hover:hover .add-data-stroke-darker-on-parent-hover { stroke: #7c3b67 !important; }

.add-data-stroke-darkest, .add-data-stroke-darkest-before:before, .add-data-stroke-darkest-after:after, .add-data-stroke-darkest-on-hover:hover, .add-data-stroke-darkest-to-child-on-hover:hover .add-data-stroke-darkest-on-parent-hover { stroke: #5a2a4a !important; }

.add-data-color, .add-data-color-before:before, .add-data-color-after:after, .add-data-color-on-hover:hover, .add-data-color-to-child-on-hover:hover .add-data-color-on-parent-hover { color: #9F4B84 !important; }

.add-data-color-light, .add-data-color-light-before:before, .add-data-color-light-after:after, .add-data-color-light-on-hover:hover, .add-data-color-light-to-child-on-hover:hover .add-data-color-light-on-parent-hover { color: #af5592 !important; }

.add-data-color-lighter, .add-data-color-lighter-before:before, .add-data-color-lighter-after:after, .add-data-color-lighter-on-hover:hover, .add-data-color-lighter-to-child-on-hover:hover .add-data-color-lighter-on-parent-hover { color: #b7669d !important; }

.add-data-color-lightest, .add-data-color-lightest-before:before, .add-data-color-lightest-after:after, .add-data-color-lightest-on-hover:hover, .add-data-color-lightest-to-child-on-hover:hover .add-data-color-lightest-on-parent-hover { color: #c789b3 !important; }

.add-data-color-dark, .add-data-color-dark-before:before, .add-data-color-dark-after:after, .add-data-color-dark-on-hover:hover, .add-data-color-dark-to-child-on-hover:hover .add-data-color-dark-on-parent-hover { color: #8e4376 !important; }

.add-data-color-darker, .add-data-color-darker-before:before, .add-data-color-darker-after:after, .add-data-color-darker-on-hover:hover, .add-data-color-darker-to-child-on-hover:hover .add-data-color-darker-on-parent-hover { color: #7c3b67 !important; }

.add-data-color-darkest, .add-data-color-darkest-before:before, .add-data-color-darkest-after:after, .add-data-color-darkest-on-hover:hover, .add-data-color-darkest-to-child-on-hover:hover .add-data-color-darkest-on-parent-hover { color: #5a2a4a !important; }

.add-data-border-color, .add-data-border-color-before:before, .add-data-border-color-after:after, .add-data-border-color-on-hover:hover, .add-data-border-color-to-child-on-hover:hover .add-data-border-color-on-parent-hover { border-color: #9F4B84 !important; }

.add-data-border-color-light, .add-data-border-color-light-before:before, .add-data-border-color-light-after:after, .add-data-border-color-light-on-hover:hover, .add-data-border-color-light-to-child-on-hover:hover .add-data-border-color-light-on-parent-hover { border-color: #af5592 !important; }

.add-data-border-color-lighter, .add-data-border-color-lighter-before:before, .add-data-border-color-lighter-after:after, .add-data-border-color-lighter-on-hover:hover, .add-data-border-color-lighter-to-child-on-hover:hover .add-data-border-color-lighter-on-parent-hover { border-color: #b7669d !important; }

.add-data-border-color-lightest, .add-data-border-color-lightest-before:before, .add-data-border-color-lightest-after:after, .add-data-border-color-lightest-on-hover:hover, .add-data-border-color-lightest-to-child-on-hover:hover .add-data-border-color-lightest-on-parent-hover { border-color: #c789b3 !important; }

.add-data-border-color-dark, .add-data-border-color-dark-before:before, .add-data-border-color-dark-after:after, .add-data-border-color-dark-on-hover:hover, .add-data-border-color-dark-to-child-on-hover:hover .add-data-border-color-dark-on-parent-hover { border-color: #8e4376 !important; }

.add-data-border-color-darker, .add-data-border-color-darker-before:before, .add-data-border-color-darker-after:after, .add-data-border-color-darker-on-hover:hover, .add-data-border-color-darker-to-child-on-hover:hover .add-data-border-color-darker-on-parent-hover { border-color: #7c3b67 !important; }

.add-data-border-color-darkest, .add-data-border-color-darkest-before:before, .add-data-border-color-darkest-after:after, .add-data-border-color-darkest-on-hover:hover, .add-data-border-color-darkest-to-child-on-hover:hover .add-data-border-color-darkest-on-parent-hover { border-color: #5a2a4a !important; }

.add-data-background-color, .add-data-background-color-before:before, .add-data-background-color-after:after, .add-data-background-color-on-hover:hover, .add-data-background-color-to-child-on-hover:hover .add-data-background-color-on-parent-hover { background-color: #9F4B84 !important; }

.add-data-background-color-light, .add-data-background-color-light-before:before, .add-data-background-color-light-after:after, .add-data-background-color-light-on-hover:hover, .add-data-background-color-light-to-child-on-hover:hover .add-data-background-color-light-on-parent-hover { background-color: #af5592 !important; }

.add-data-background-color-lighter, .add-data-background-color-lighter-before:before, .add-data-background-color-lighter-after:after, .add-data-background-color-lighter-on-hover:hover, .add-data-background-color-lighter-to-child-on-hover:hover .add-data-background-color-lighter-on-parent-hover { background-color: #b7669d !important; }

.add-data-background-color-lightest, .add-data-background-color-lightest-before:before, .add-data-background-color-lightest-after:after, .add-data-background-color-lightest-on-hover:hover, .add-data-background-color-lightest-to-child-on-hover:hover .add-data-background-color-lightest-on-parent-hover { background-color: #c789b3 !important; }

.add-data-background-color-dark, .add-data-background-color-dark-before:before, .add-data-background-color-dark-after:after, .add-data-background-color-dark-on-hover:hover, .add-data-background-color-dark-to-child-on-hover:hover .add-data-background-color-dark-on-parent-hover { background-color: #8e4376 !important; }

.add-data-background-color-darker, .add-data-background-color-darker-before:before, .add-data-background-color-darker-after:after, .add-data-background-color-darker-on-hover:hover, .add-data-background-color-darker-to-child-on-hover:hover .add-data-background-color-darker-on-parent-hover { background-color: #7c3b67 !important; }

.add-data-background-color-darkest, .add-data-background-color-darkest-before:before, .add-data-background-color-darkest-after:after, .add-data-background-color-darkest-on-hover:hover, .add-data-background-color-darkest-to-child-on-hover:hover .add-data-background-color-darkest-on-parent-hover { background-color: #5a2a4a !important; }

.add-design-fill, .add-design-fill-before:before, .add-design-fill-after:after, .add-design-fill-on-hover:hover, .add-design-fill-to-child-on-hover:hover .add-design-fill-on-parent-hover { fill: #4a4290 !important; }

.add-design-fill-light, .add-design-fill-light-before:before, .add-design-fill-light-after:after, .add-design-fill-light-on-hover:hover, .add-design-fill-light-to-child-on-hover:hover .add-design-fill-light-on-parent-hover { fill: #534aa1 !important; }

.add-design-fill-lighter, .add-design-fill-lighter-before:before, .add-design-fill-lighter-after:after, .add-design-fill-lighter-on-hover:hover, .add-design-fill-lighter-to-child-on-hover:hover .add-design-fill-lighter-on-parent-hover { fill: #5e54b1 !important; }

.add-design-fill-lightest, .add-design-fill-lightest-before:before, .add-design-fill-lightest-after:after, .add-design-fill-lightest-on-hover:hover, .add-design-fill-lightest-to-child-on-hover:hover .add-design-fill-lightest-on-parent-hover { fill: #7f77c1 !important; }

.add-design-fill-dark, .add-design-fill-dark-before:before, .add-design-fill-dark-after:after, .add-design-fill-dark-on-hover:hover, .add-design-fill-dark-to-child-on-hover:hover .add-design-fill-dark-on-parent-hover { fill: #413a7f !important; }

.add-design-fill-darker, .add-design-fill-darker-before:before, .add-design-fill-darker-after:after, .add-design-fill-darker-on-hover:hover, .add-design-fill-darker-to-child-on-hover:hover .add-design-fill-darker-on-parent-hover { fill: #38326d !important; }

.add-design-fill-darkest, .add-design-fill-darkest-before:before, .add-design-fill-darkest-after:after, .add-design-fill-darkest-on-hover:hover, .add-design-fill-darkest-to-child-on-hover:hover .add-design-fill-darkest-on-parent-hover { fill: #26224a !important; }

.add-design-stroke, .add-design-stroke-before:before, .add-design-stroke-after:after, .add-design-stroke-on-hover:hover, .add-design-stroke-to-child-on-hover:hover .add-design-stroke-on-parent-hover { stroke: #4a4290 !important; }

.add-design-stroke-light, .add-design-stroke-light-before:before, .add-design-stroke-light-after:after, .add-design-stroke-light-on-hover:hover, .add-design-stroke-light-to-child-on-hover:hover .add-design-stroke-light-on-parent-hover { stroke: #534aa1 !important; }

.add-design-stroke-lighter, .add-design-stroke-lighter-before:before, .add-design-stroke-lighter-after:after, .add-design-stroke-lighter-on-hover:hover, .add-design-stroke-lighter-to-child-on-hover:hover .add-design-stroke-lighter-on-parent-hover { stroke: #5e54b1 !important; }

.add-design-stroke-lightest, .add-design-stroke-lightest-before:before, .add-design-stroke-lightest-after:after, .add-design-stroke-lightest-on-hover:hover, .add-design-stroke-lightest-to-child-on-hover:hover .add-design-stroke-lightest-on-parent-hover { stroke: #7f77c1 !important; }

.add-design-stroke-dark, .add-design-stroke-dark-before:before, .add-design-stroke-dark-after:after, .add-design-stroke-dark-on-hover:hover, .add-design-stroke-dark-to-child-on-hover:hover .add-design-stroke-dark-on-parent-hover { stroke: #413a7f !important; }

.add-design-stroke-darker, .add-design-stroke-darker-before:before, .add-design-stroke-darker-after:after, .add-design-stroke-darker-on-hover:hover, .add-design-stroke-darker-to-child-on-hover:hover .add-design-stroke-darker-on-parent-hover { stroke: #38326d !important; }

.add-design-stroke-darkest, .add-design-stroke-darkest-before:before, .add-design-stroke-darkest-after:after, .add-design-stroke-darkest-on-hover:hover, .add-design-stroke-darkest-to-child-on-hover:hover .add-design-stroke-darkest-on-parent-hover { stroke: #26224a !important; }

.add-design-color, .add-design-color-before:before, .add-design-color-after:after, .add-design-color-on-hover:hover, .add-design-color-to-child-on-hover:hover .add-design-color-on-parent-hover { color: #4a4290 !important; }

.add-design-color-light, .add-design-color-light-before:before, .add-design-color-light-after:after, .add-design-color-light-on-hover:hover, .add-design-color-light-to-child-on-hover:hover .add-design-color-light-on-parent-hover { color: #534aa1 !important; }

.add-design-color-lighter, .add-design-color-lighter-before:before, .add-design-color-lighter-after:after, .add-design-color-lighter-on-hover:hover, .add-design-color-lighter-to-child-on-hover:hover .add-design-color-lighter-on-parent-hover { color: #5e54b1 !important; }

.add-design-color-lightest, .add-design-color-lightest-before:before, .add-design-color-lightest-after:after, .add-design-color-lightest-on-hover:hover, .add-design-color-lightest-to-child-on-hover:hover .add-design-color-lightest-on-parent-hover { color: #7f77c1 !important; }

.add-design-color-dark, .add-design-color-dark-before:before, .add-design-color-dark-after:after, .add-design-color-dark-on-hover:hover, .add-design-color-dark-to-child-on-hover:hover .add-design-color-dark-on-parent-hover { color: #413a7f !important; }

.add-design-color-darker, .add-design-color-darker-before:before, .add-design-color-darker-after:after, .add-design-color-darker-on-hover:hover, .add-design-color-darker-to-child-on-hover:hover .add-design-color-darker-on-parent-hover { color: #38326d !important; }

.add-design-color-darkest, .add-design-color-darkest-before:before, .add-design-color-darkest-after:after, .add-design-color-darkest-on-hover:hover, .add-design-color-darkest-to-child-on-hover:hover .add-design-color-darkest-on-parent-hover { color: #26224a !important; }

.add-design-border-color, .add-design-border-color-before:before, .add-design-border-color-after:after, .add-design-border-color-on-hover:hover, .add-design-border-color-to-child-on-hover:hover .add-design-border-color-on-parent-hover { border-color: #4a4290 !important; }

.add-design-border-color-light, .add-design-border-color-light-before:before, .add-design-border-color-light-after:after, .add-design-border-color-light-on-hover:hover, .add-design-border-color-light-to-child-on-hover:hover .add-design-border-color-light-on-parent-hover { border-color: #534aa1 !important; }

.add-design-border-color-lighter, .add-design-border-color-lighter-before:before, .add-design-border-color-lighter-after:after, .add-design-border-color-lighter-on-hover:hover, .add-design-border-color-lighter-to-child-on-hover:hover .add-design-border-color-lighter-on-parent-hover { border-color: #5e54b1 !important; }

.add-design-border-color-lightest, .add-design-border-color-lightest-before:before, .add-design-border-color-lightest-after:after, .add-design-border-color-lightest-on-hover:hover, .add-design-border-color-lightest-to-child-on-hover:hover .add-design-border-color-lightest-on-parent-hover { border-color: #7f77c1 !important; }

.add-design-border-color-dark, .add-design-border-color-dark-before:before, .add-design-border-color-dark-after:after, .add-design-border-color-dark-on-hover:hover, .add-design-border-color-dark-to-child-on-hover:hover .add-design-border-color-dark-on-parent-hover { border-color: #413a7f !important; }

.add-design-border-color-darker, .add-design-border-color-darker-before:before, .add-design-border-color-darker-after:after, .add-design-border-color-darker-on-hover:hover, .add-design-border-color-darker-to-child-on-hover:hover .add-design-border-color-darker-on-parent-hover { border-color: #38326d !important; }

.add-design-border-color-darkest, .add-design-border-color-darkest-before:before, .add-design-border-color-darkest-after:after, .add-design-border-color-darkest-on-hover:hover, .add-design-border-color-darkest-to-child-on-hover:hover .add-design-border-color-darkest-on-parent-hover { border-color: #26224a !important; }

.add-design-background-color, .add-design-background-color-before:before, .add-design-background-color-after:after, .add-design-background-color-on-hover:hover, .add-design-background-color-to-child-on-hover:hover .add-design-background-color-on-parent-hover { background-color: #4a4290 !important; }

.add-design-background-color-light, .add-design-background-color-light-before:before, .add-design-background-color-light-after:after, .add-design-background-color-light-on-hover:hover, .add-design-background-color-light-to-child-on-hover:hover .add-design-background-color-light-on-parent-hover { background-color: #534aa1 !important; }

.add-design-background-color-lighter, .add-design-background-color-lighter-before:before, .add-design-background-color-lighter-after:after, .add-design-background-color-lighter-on-hover:hover, .add-design-background-color-lighter-to-child-on-hover:hover .add-design-background-color-lighter-on-parent-hover { background-color: #5e54b1 !important; }

.add-design-background-color-lightest, .add-design-background-color-lightest-before:before, .add-design-background-color-lightest-after:after, .add-design-background-color-lightest-on-hover:hover, .add-design-background-color-lightest-to-child-on-hover:hover .add-design-background-color-lightest-on-parent-hover { background-color: #7f77c1 !important; }

.add-design-background-color-dark, .add-design-background-color-dark-before:before, .add-design-background-color-dark-after:after, .add-design-background-color-dark-on-hover:hover, .add-design-background-color-dark-to-child-on-hover:hover .add-design-background-color-dark-on-parent-hover { background-color: #413a7f !important; }

.add-design-background-color-darker, .add-design-background-color-darker-before:before, .add-design-background-color-darker-after:after, .add-design-background-color-darker-on-hover:hover, .add-design-background-color-darker-to-child-on-hover:hover .add-design-background-color-darker-on-parent-hover { background-color: #38326d !important; }

.add-design-background-color-darkest, .add-design-background-color-darkest-before:before, .add-design-background-color-darkest-after:after, .add-design-background-color-darkest-on-hover:hover, .add-design-background-color-darkest-to-child-on-hover:hover .add-design-background-color-darkest-on-parent-hover { background-color: #26224a !important; }

.add-experimental-fill, .add-experimental-fill-before:before, .add-experimental-fill-after:after, .add-experimental-fill-on-hover:hover, .add-experimental-fill-to-child-on-hover:hover .add-experimental-fill-on-parent-hover { fill: #733a88 !important; }

.add-experimental-fill-light, .add-experimental-fill-light-before:before, .add-experimental-fill-light-after:after, .add-experimental-fill-light-on-hover:hover, .add-experimental-fill-light-to-child-on-hover:hover .add-experimental-fill-light-on-parent-hover { fill: #82429a !important; }

.add-experimental-fill-lighter, .add-experimental-fill-lighter-before:before, .add-experimental-fill-lighter-after:after, .add-experimental-fill-lighter-on-hover:hover, .add-experimental-fill-lighter-to-child-on-hover:hover .add-experimental-fill-lighter-on-parent-hover { fill: #9149ac !important; }

.add-experimental-fill-lightest, .add-experimental-fill-lightest-before:before, .add-experimental-fill-lightest-after:after, .add-experimental-fill-lightest-on-hover:hover, .add-experimental-fill-lightest-to-child-on-hover:hover .add-experimental-fill-lightest-on-parent-hover { fill: #a869bf !important; }

.add-experimental-fill-dark, .add-experimental-fill-dark-before:before, .add-experimental-fill-dark-after:after, .add-experimental-fill-dark-on-hover:hover, .add-experimental-fill-dark-to-child-on-hover:hover .add-experimental-fill-dark-on-parent-hover { fill: #643276 !important; }

.add-experimental-fill-darker, .add-experimental-fill-darker-before:before, .add-experimental-fill-darker-after:after, .add-experimental-fill-darker-on-hover:hover, .add-experimental-fill-darker-to-child-on-hover:hover .add-experimental-fill-darker-on-parent-hover { fill: #552b64 !important; }

.add-experimental-fill-darkest, .add-experimental-fill-darkest-before:before, .add-experimental-fill-darkest-after:after, .add-experimental-fill-darkest-on-hover:hover, .add-experimental-fill-darkest-to-child-on-hover:hover .add-experimental-fill-darkest-on-parent-hover { fill: #371c40 !important; }

.add-experimental-stroke, .add-experimental-stroke-before:before, .add-experimental-stroke-after:after, .add-experimental-stroke-on-hover:hover, .add-experimental-stroke-to-child-on-hover:hover .add-experimental-stroke-on-parent-hover { stroke: #733a88 !important; }

.add-experimental-stroke-light, .add-experimental-stroke-light-before:before, .add-experimental-stroke-light-after:after, .add-experimental-stroke-light-on-hover:hover, .add-experimental-stroke-light-to-child-on-hover:hover .add-experimental-stroke-light-on-parent-hover { stroke: #82429a !important; }

.add-experimental-stroke-lighter, .add-experimental-stroke-lighter-before:before, .add-experimental-stroke-lighter-after:after, .add-experimental-stroke-lighter-on-hover:hover, .add-experimental-stroke-lighter-to-child-on-hover:hover .add-experimental-stroke-lighter-on-parent-hover { stroke: #9149ac !important; }

.add-experimental-stroke-lightest, .add-experimental-stroke-lightest-before:before, .add-experimental-stroke-lightest-after:after, .add-experimental-stroke-lightest-on-hover:hover, .add-experimental-stroke-lightest-to-child-on-hover:hover .add-experimental-stroke-lightest-on-parent-hover { stroke: #a869bf !important; }

.add-experimental-stroke-dark, .add-experimental-stroke-dark-before:before, .add-experimental-stroke-dark-after:after, .add-experimental-stroke-dark-on-hover:hover, .add-experimental-stroke-dark-to-child-on-hover:hover .add-experimental-stroke-dark-on-parent-hover { stroke: #643276 !important; }

.add-experimental-stroke-darker, .add-experimental-stroke-darker-before:before, .add-experimental-stroke-darker-after:after, .add-experimental-stroke-darker-on-hover:hover, .add-experimental-stroke-darker-to-child-on-hover:hover .add-experimental-stroke-darker-on-parent-hover { stroke: #552b64 !important; }

.add-experimental-stroke-darkest, .add-experimental-stroke-darkest-before:before, .add-experimental-stroke-darkest-after:after, .add-experimental-stroke-darkest-on-hover:hover, .add-experimental-stroke-darkest-to-child-on-hover:hover .add-experimental-stroke-darkest-on-parent-hover { stroke: #371c40 !important; }

.add-experimental-color, .add-experimental-color-before:before, .add-experimental-color-after:after, .add-experimental-color-on-hover:hover, .add-experimental-color-to-child-on-hover:hover .add-experimental-color-on-parent-hover { color: #733a88 !important; }

.add-experimental-color-light, .add-experimental-color-light-before:before, .add-experimental-color-light-after:after, .add-experimental-color-light-on-hover:hover, .add-experimental-color-light-to-child-on-hover:hover .add-experimental-color-light-on-parent-hover { color: #82429a !important; }

.add-experimental-color-lighter, .add-experimental-color-lighter-before:before, .add-experimental-color-lighter-after:after, .add-experimental-color-lighter-on-hover:hover, .add-experimental-color-lighter-to-child-on-hover:hover .add-experimental-color-lighter-on-parent-hover { color: #9149ac !important; }

.add-experimental-color-lightest, .add-experimental-color-lightest-before:before, .add-experimental-color-lightest-after:after, .add-experimental-color-lightest-on-hover:hover, .add-experimental-color-lightest-to-child-on-hover:hover .add-experimental-color-lightest-on-parent-hover { color: #a869bf !important; }

.add-experimental-color-dark, .add-experimental-color-dark-before:before, .add-experimental-color-dark-after:after, .add-experimental-color-dark-on-hover:hover, .add-experimental-color-dark-to-child-on-hover:hover .add-experimental-color-dark-on-parent-hover { color: #643276 !important; }

.add-experimental-color-darker, .add-experimental-color-darker-before:before, .add-experimental-color-darker-after:after, .add-experimental-color-darker-on-hover:hover, .add-experimental-color-darker-to-child-on-hover:hover .add-experimental-color-darker-on-parent-hover { color: #552b64 !important; }

.add-experimental-color-darkest, .add-experimental-color-darkest-before:before, .add-experimental-color-darkest-after:after, .add-experimental-color-darkest-on-hover:hover, .add-experimental-color-darkest-to-child-on-hover:hover .add-experimental-color-darkest-on-parent-hover { color: #371c40 !important; }

.add-experimental-border-color, .add-experimental-border-color-before:before, .add-experimental-border-color-after:after, .add-experimental-border-color-on-hover:hover, .add-experimental-border-color-to-child-on-hover:hover .add-experimental-border-color-on-parent-hover { border-color: #733a88 !important; }

.add-experimental-border-color-light, .add-experimental-border-color-light-before:before, .add-experimental-border-color-light-after:after, .add-experimental-border-color-light-on-hover:hover, .add-experimental-border-color-light-to-child-on-hover:hover .add-experimental-border-color-light-on-parent-hover { border-color: #82429a !important; }

.add-experimental-border-color-lighter, .add-experimental-border-color-lighter-before:before, .add-experimental-border-color-lighter-after:after, .add-experimental-border-color-lighter-on-hover:hover, .add-experimental-border-color-lighter-to-child-on-hover:hover .add-experimental-border-color-lighter-on-parent-hover { border-color: #9149ac !important; }

.add-experimental-border-color-lightest, .add-experimental-border-color-lightest-before:before, .add-experimental-border-color-lightest-after:after, .add-experimental-border-color-lightest-on-hover:hover, .add-experimental-border-color-lightest-to-child-on-hover:hover .add-experimental-border-color-lightest-on-parent-hover { border-color: #a869bf !important; }

.add-experimental-border-color-dark, .add-experimental-border-color-dark-before:before, .add-experimental-border-color-dark-after:after, .add-experimental-border-color-dark-on-hover:hover, .add-experimental-border-color-dark-to-child-on-hover:hover .add-experimental-border-color-dark-on-parent-hover { border-color: #643276 !important; }

.add-experimental-border-color-darker, .add-experimental-border-color-darker-before:before, .add-experimental-border-color-darker-after:after, .add-experimental-border-color-darker-on-hover:hover, .add-experimental-border-color-darker-to-child-on-hover:hover .add-experimental-border-color-darker-on-parent-hover { border-color: #552b64 !important; }

.add-experimental-border-color-darkest, .add-experimental-border-color-darkest-before:before, .add-experimental-border-color-darkest-after:after, .add-experimental-border-color-darkest-on-hover:hover, .add-experimental-border-color-darkest-to-child-on-hover:hover .add-experimental-border-color-darkest-on-parent-hover { border-color: #371c40 !important; }

.add-experimental-background-color, .add-experimental-background-color-before:before, .add-experimental-background-color-after:after, .add-experimental-background-color-on-hover:hover, .add-experimental-background-color-to-child-on-hover:hover .add-experimental-background-color-on-parent-hover { background-color: #733a88 !important; }

.add-experimental-background-color-light, .add-experimental-background-color-light-before:before, .add-experimental-background-color-light-after:after, .add-experimental-background-color-light-on-hover:hover, .add-experimental-background-color-light-to-child-on-hover:hover .add-experimental-background-color-light-on-parent-hover { background-color: #82429a !important; }

.add-experimental-background-color-lighter, .add-experimental-background-color-lighter-before:before, .add-experimental-background-color-lighter-after:after, .add-experimental-background-color-lighter-on-hover:hover, .add-experimental-background-color-lighter-to-child-on-hover:hover .add-experimental-background-color-lighter-on-parent-hover { background-color: #9149ac !important; }

.add-experimental-background-color-lightest, .add-experimental-background-color-lightest-before:before, .add-experimental-background-color-lightest-after:after, .add-experimental-background-color-lightest-on-hover:hover, .add-experimental-background-color-lightest-to-child-on-hover:hover .add-experimental-background-color-lightest-on-parent-hover { background-color: #a869bf !important; }

.add-experimental-background-color-dark, .add-experimental-background-color-dark-before:before, .add-experimental-background-color-dark-after:after, .add-experimental-background-color-dark-on-hover:hover, .add-experimental-background-color-dark-to-child-on-hover:hover .add-experimental-background-color-dark-on-parent-hover { background-color: #643276 !important; }

.add-experimental-background-color-darker, .add-experimental-background-color-darker-before:before, .add-experimental-background-color-darker-after:after, .add-experimental-background-color-darker-on-hover:hover, .add-experimental-background-color-darker-to-child-on-hover:hover .add-experimental-background-color-darker-on-parent-hover { background-color: #552b64 !important; }

.add-experimental-background-color-darkest, .add-experimental-background-color-darkest-before:before, .add-experimental-background-color-darkest-after:after, .add-experimental-background-color-darkest-on-hover:hover, .add-experimental-background-color-darkest-to-child-on-hover:hover .add-experimental-background-color-darkest-on-parent-hover { background-color: #371c40 !important; }

.add-front-end-fill, .add-front-end-fill-before:before, .add-front-end-fill-after:after, .add-front-end-fill-on-hover:hover, .add-front-end-fill-to-child-on-hover:hover .add-front-end-fill-on-parent-hover { fill: #3659a2 !important; }

.add-front-end-fill-light, .add-front-end-fill-light-before:before, .add-front-end-fill-light-after:after, .add-front-end-fill-light-on-hover:hover, .add-front-end-fill-light-to-child-on-hover:hover .add-front-end-fill-light-on-parent-hover { fill: #3c64b5 !important; }

.add-front-end-fill-lighter, .add-front-end-fill-lighter-before:before, .add-front-end-fill-lighter-after:after, .add-front-end-fill-lighter-on-hover:hover, .add-front-end-fill-lighter-to-child-on-hover:hover .add-front-end-fill-lighter-on-parent-hover { fill: #4970c2 !important; }

.add-front-end-fill-lightest, .add-front-end-fill-lightest-before:before, .add-front-end-fill-lightest-after:after, .add-front-end-fill-lightest-on-hover:hover, .add-front-end-fill-lightest-to-child-on-hover:hover .add-front-end-fill-lightest-on-parent-hover { fill: #6f8ecf !important; }

.add-front-end-fill-dark, .add-front-end-fill-dark-before:before, .add-front-end-fill-dark-after:after, .add-front-end-fill-dark-on-hover:hover, .add-front-end-fill-dark-to-child-on-hover:hover .add-front-end-fill-dark-on-parent-hover { fill: #304e8f !important; }

.add-front-end-fill-darker, .add-front-end-fill-darker-before:before, .add-front-end-fill-darker-after:after, .add-front-end-fill-darker-on-hover:hover, .add-front-end-fill-darker-to-child-on-hover:hover .add-front-end-fill-darker-on-parent-hover { fill: #29447c !important; }

.add-front-end-fill-darkest, .add-front-end-fill-darkest-before:before, .add-front-end-fill-darkest-after:after, .add-front-end-fill-darkest-on-hover:hover, .add-front-end-fill-darkest-to-child-on-hover:hover .add-front-end-fill-darkest-on-parent-hover { fill: #1d2f56 !important; }

.add-front-end-stroke, .add-front-end-stroke-before:before, .add-front-end-stroke-after:after, .add-front-end-stroke-on-hover:hover, .add-front-end-stroke-to-child-on-hover:hover .add-front-end-stroke-on-parent-hover { stroke: #3659a2 !important; }

.add-front-end-stroke-light, .add-front-end-stroke-light-before:before, .add-front-end-stroke-light-after:after, .add-front-end-stroke-light-on-hover:hover, .add-front-end-stroke-light-to-child-on-hover:hover .add-front-end-stroke-light-on-parent-hover { stroke: #3c64b5 !important; }

.add-front-end-stroke-lighter, .add-front-end-stroke-lighter-before:before, .add-front-end-stroke-lighter-after:after, .add-front-end-stroke-lighter-on-hover:hover, .add-front-end-stroke-lighter-to-child-on-hover:hover .add-front-end-stroke-lighter-on-parent-hover { stroke: #4970c2 !important; }

.add-front-end-stroke-lightest, .add-front-end-stroke-lightest-before:before, .add-front-end-stroke-lightest-after:after, .add-front-end-stroke-lightest-on-hover:hover, .add-front-end-stroke-lightest-to-child-on-hover:hover .add-front-end-stroke-lightest-on-parent-hover { stroke: #6f8ecf !important; }

.add-front-end-stroke-dark, .add-front-end-stroke-dark-before:before, .add-front-end-stroke-dark-after:after, .add-front-end-stroke-dark-on-hover:hover, .add-front-end-stroke-dark-to-child-on-hover:hover .add-front-end-stroke-dark-on-parent-hover { stroke: #304e8f !important; }

.add-front-end-stroke-darker, .add-front-end-stroke-darker-before:before, .add-front-end-stroke-darker-after:after, .add-front-end-stroke-darker-on-hover:hover, .add-front-end-stroke-darker-to-child-on-hover:hover .add-front-end-stroke-darker-on-parent-hover { stroke: #29447c !important; }

.add-front-end-stroke-darkest, .add-front-end-stroke-darkest-before:before, .add-front-end-stroke-darkest-after:after, .add-front-end-stroke-darkest-on-hover:hover, .add-front-end-stroke-darkest-to-child-on-hover:hover .add-front-end-stroke-darkest-on-parent-hover { stroke: #1d2f56 !important; }

.add-front-end-color, .add-front-end-color-before:before, .add-front-end-color-after:after, .add-front-end-color-on-hover:hover, .add-front-end-color-to-child-on-hover:hover .add-front-end-color-on-parent-hover { color: #3659a2 !important; }

.add-front-end-color-light, .add-front-end-color-light-before:before, .add-front-end-color-light-after:after, .add-front-end-color-light-on-hover:hover, .add-front-end-color-light-to-child-on-hover:hover .add-front-end-color-light-on-parent-hover { color: #3c64b5 !important; }

.add-front-end-color-lighter, .add-front-end-color-lighter-before:before, .add-front-end-color-lighter-after:after, .add-front-end-color-lighter-on-hover:hover, .add-front-end-color-lighter-to-child-on-hover:hover .add-front-end-color-lighter-on-parent-hover { color: #4970c2 !important; }

.add-front-end-color-lightest, .add-front-end-color-lightest-before:before, .add-front-end-color-lightest-after:after, .add-front-end-color-lightest-on-hover:hover, .add-front-end-color-lightest-to-child-on-hover:hover .add-front-end-color-lightest-on-parent-hover { color: #6f8ecf !important; }

.add-front-end-color-dark, .add-front-end-color-dark-before:before, .add-front-end-color-dark-after:after, .add-front-end-color-dark-on-hover:hover, .add-front-end-color-dark-to-child-on-hover:hover .add-front-end-color-dark-on-parent-hover { color: #304e8f !important; }

.add-front-end-color-darker, .add-front-end-color-darker-before:before, .add-front-end-color-darker-after:after, .add-front-end-color-darker-on-hover:hover, .add-front-end-color-darker-to-child-on-hover:hover .add-front-end-color-darker-on-parent-hover { color: #29447c !important; }

.add-front-end-color-darkest, .add-front-end-color-darkest-before:before, .add-front-end-color-darkest-after:after, .add-front-end-color-darkest-on-hover:hover, .add-front-end-color-darkest-to-child-on-hover:hover .add-front-end-color-darkest-on-parent-hover { color: #1d2f56 !important; }

.add-front-end-border-color, .add-front-end-border-color-before:before, .add-front-end-border-color-after:after, .add-front-end-border-color-on-hover:hover, .add-front-end-border-color-to-child-on-hover:hover .add-front-end-border-color-on-parent-hover { border-color: #3659a2 !important; }

.add-front-end-border-color-light, .add-front-end-border-color-light-before:before, .add-front-end-border-color-light-after:after, .add-front-end-border-color-light-on-hover:hover, .add-front-end-border-color-light-to-child-on-hover:hover .add-front-end-border-color-light-on-parent-hover { border-color: #3c64b5 !important; }

.add-front-end-border-color-lighter, .add-front-end-border-color-lighter-before:before, .add-front-end-border-color-lighter-after:after, .add-front-end-border-color-lighter-on-hover:hover, .add-front-end-border-color-lighter-to-child-on-hover:hover .add-front-end-border-color-lighter-on-parent-hover { border-color: #4970c2 !important; }

.add-front-end-border-color-lightest, .add-front-end-border-color-lightest-before:before, .add-front-end-border-color-lightest-after:after, .add-front-end-border-color-lightest-on-hover:hover, .add-front-end-border-color-lightest-to-child-on-hover:hover .add-front-end-border-color-lightest-on-parent-hover { border-color: #6f8ecf !important; }

.add-front-end-border-color-dark, .add-front-end-border-color-dark-before:before, .add-front-end-border-color-dark-after:after, .add-front-end-border-color-dark-on-hover:hover, .add-front-end-border-color-dark-to-child-on-hover:hover .add-front-end-border-color-dark-on-parent-hover { border-color: #304e8f !important; }

.add-front-end-border-color-darker, .add-front-end-border-color-darker-before:before, .add-front-end-border-color-darker-after:after, .add-front-end-border-color-darker-on-hover:hover, .add-front-end-border-color-darker-to-child-on-hover:hover .add-front-end-border-color-darker-on-parent-hover { border-color: #29447c !important; }

.add-front-end-border-color-darkest, .add-front-end-border-color-darkest-before:before, .add-front-end-border-color-darkest-after:after, .add-front-end-border-color-darkest-on-hover:hover, .add-front-end-border-color-darkest-to-child-on-hover:hover .add-front-end-border-color-darkest-on-parent-hover { border-color: #1d2f56 !important; }

.add-front-end-background-color, .add-front-end-background-color-before:before, .add-front-end-background-color-after:after, .add-front-end-background-color-on-hover:hover, .add-front-end-background-color-to-child-on-hover:hover .add-front-end-background-color-on-parent-hover { background-color: #3659a2 !important; }

.add-front-end-background-color-light, .add-front-end-background-color-light-before:before, .add-front-end-background-color-light-after:after, .add-front-end-background-color-light-on-hover:hover, .add-front-end-background-color-light-to-child-on-hover:hover .add-front-end-background-color-light-on-parent-hover { background-color: #3c64b5 !important; }

.add-front-end-background-color-lighter, .add-front-end-background-color-lighter-before:before, .add-front-end-background-color-lighter-after:after, .add-front-end-background-color-lighter-on-hover:hover, .add-front-end-background-color-lighter-to-child-on-hover:hover .add-front-end-background-color-lighter-on-parent-hover { background-color: #4970c2 !important; }

.add-front-end-background-color-lightest, .add-front-end-background-color-lightest-before:before, .add-front-end-background-color-lightest-after:after, .add-front-end-background-color-lightest-on-hover:hover, .add-front-end-background-color-lightest-to-child-on-hover:hover .add-front-end-background-color-lightest-on-parent-hover { background-color: #6f8ecf !important; }

.add-front-end-background-color-dark, .add-front-end-background-color-dark-before:before, .add-front-end-background-color-dark-after:after, .add-front-end-background-color-dark-on-hover:hover, .add-front-end-background-color-dark-to-child-on-hover:hover .add-front-end-background-color-dark-on-parent-hover { background-color: #304e8f !important; }

.add-front-end-background-color-darker, .add-front-end-background-color-darker-before:before, .add-front-end-background-color-darker-after:after, .add-front-end-background-color-darker-on-hover:hover, .add-front-end-background-color-darker-to-child-on-hover:hover .add-front-end-background-color-darker-on-parent-hover { background-color: #29447c !important; }

.add-front-end-background-color-darkest, .add-front-end-background-color-darkest-before:before, .add-front-end-background-color-darkest-after:after, .add-front-end-background-color-darkest-on-hover:hover, .add-front-end-background-color-darkest-to-child-on-hover:hover .add-front-end-background-color-darkest-on-parent-hover { background-color: #1d2f56 !important; }

.add-fundamentals-fill, .add-fundamentals-fill-before:before, .add-fundamentals-fill-after:after, .add-fundamentals-fill-on-hover:hover, .add-fundamentals-fill-to-child-on-hover:hover .add-fundamentals-fill-on-parent-hover { fill: #9b3b5a !important; }

.add-fundamentals-fill-light, .add-fundamentals-fill-light-before:before, .add-fundamentals-fill-light-after:after, .add-fundamentals-fill-light-on-hover:hover, .add-fundamentals-fill-light-to-child-on-hover:hover .add-fundamentals-fill-light-on-parent-hover { fill: #ad4265 !important; }

.add-fundamentals-fill-lighter, .add-fundamentals-fill-lighter-before:before, .add-fundamentals-fill-lighter-after:after, .add-fundamentals-fill-lighter-on-hover:hover, .add-fundamentals-fill-lighter-to-child-on-hover:hover .add-fundamentals-fill-lighter-on-parent-hover { fill: #bb4e71 !important; }

.add-fundamentals-fill-lightest, .add-fundamentals-fill-lightest-before:before, .add-fundamentals-fill-lightest-after:after, .add-fundamentals-fill-lightest-on-hover:hover, .add-fundamentals-fill-lightest-to-child-on-hover:hover .add-fundamentals-fill-lightest-on-parent-hover { fill: #ca728f !important; }

.add-fundamentals-fill-dark, .add-fundamentals-fill-dark-before:before, .add-fundamentals-fill-dark-after:after, .add-fundamentals-fill-dark-on-hover:hover, .add-fundamentals-fill-dark-to-child-on-hover:hover .add-fundamentals-fill-dark-on-parent-hover { fill: #89344f !important; }

.add-fundamentals-fill-darker, .add-fundamentals-fill-darker-before:before, .add-fundamentals-fill-darker-after:after, .add-fundamentals-fill-darker-on-hover:hover, .add-fundamentals-fill-darker-to-child-on-hover:hover .add-fundamentals-fill-darker-on-parent-hover { fill: #762d45 !important; }

.add-fundamentals-fill-darkest, .add-fundamentals-fill-darkest-before:before, .add-fundamentals-fill-darkest-after:after, .add-fundamentals-fill-darkest-on-hover:hover, .add-fundamentals-fill-darkest-to-child-on-hover:hover .add-fundamentals-fill-darkest-on-parent-hover { fill: #511f2f !important; }

.add-fundamentals-stroke, .add-fundamentals-stroke-before:before, .add-fundamentals-stroke-after:after, .add-fundamentals-stroke-on-hover:hover, .add-fundamentals-stroke-to-child-on-hover:hover .add-fundamentals-stroke-on-parent-hover { stroke: #9b3b5a !important; }

.add-fundamentals-stroke-light, .add-fundamentals-stroke-light-before:before, .add-fundamentals-stroke-light-after:after, .add-fundamentals-stroke-light-on-hover:hover, .add-fundamentals-stroke-light-to-child-on-hover:hover .add-fundamentals-stroke-light-on-parent-hover { stroke: #ad4265 !important; }

.add-fundamentals-stroke-lighter, .add-fundamentals-stroke-lighter-before:before, .add-fundamentals-stroke-lighter-after:after, .add-fundamentals-stroke-lighter-on-hover:hover, .add-fundamentals-stroke-lighter-to-child-on-hover:hover .add-fundamentals-stroke-lighter-on-parent-hover { stroke: #bb4e71 !important; }

.add-fundamentals-stroke-lightest, .add-fundamentals-stroke-lightest-before:before, .add-fundamentals-stroke-lightest-after:after, .add-fundamentals-stroke-lightest-on-hover:hover, .add-fundamentals-stroke-lightest-to-child-on-hover:hover .add-fundamentals-stroke-lightest-on-parent-hover { stroke: #ca728f !important; }

.add-fundamentals-stroke-dark, .add-fundamentals-stroke-dark-before:before, .add-fundamentals-stroke-dark-after:after, .add-fundamentals-stroke-dark-on-hover:hover, .add-fundamentals-stroke-dark-to-child-on-hover:hover .add-fundamentals-stroke-dark-on-parent-hover { stroke: #89344f !important; }

.add-fundamentals-stroke-darker, .add-fundamentals-stroke-darker-before:before, .add-fundamentals-stroke-darker-after:after, .add-fundamentals-stroke-darker-on-hover:hover, .add-fundamentals-stroke-darker-to-child-on-hover:hover .add-fundamentals-stroke-darker-on-parent-hover { stroke: #762d45 !important; }

.add-fundamentals-stroke-darkest, .add-fundamentals-stroke-darkest-before:before, .add-fundamentals-stroke-darkest-after:after, .add-fundamentals-stroke-darkest-on-hover:hover, .add-fundamentals-stroke-darkest-to-child-on-hover:hover .add-fundamentals-stroke-darkest-on-parent-hover { stroke: #511f2f !important; }

.add-fundamentals-color, .add-fundamentals-color-before:before, .add-fundamentals-color-after:after, .add-fundamentals-color-on-hover:hover, .add-fundamentals-color-to-child-on-hover:hover .add-fundamentals-color-on-parent-hover { color: #9b3b5a !important; }

.add-fundamentals-color-light, .add-fundamentals-color-light-before:before, .add-fundamentals-color-light-after:after, .add-fundamentals-color-light-on-hover:hover, .add-fundamentals-color-light-to-child-on-hover:hover .add-fundamentals-color-light-on-parent-hover { color: #ad4265 !important; }

.add-fundamentals-color-lighter, .add-fundamentals-color-lighter-before:before, .add-fundamentals-color-lighter-after:after, .add-fundamentals-color-lighter-on-hover:hover, .add-fundamentals-color-lighter-to-child-on-hover:hover .add-fundamentals-color-lighter-on-parent-hover { color: #bb4e71 !important; }

.add-fundamentals-color-lightest, .add-fundamentals-color-lightest-before:before, .add-fundamentals-color-lightest-after:after, .add-fundamentals-color-lightest-on-hover:hover, .add-fundamentals-color-lightest-to-child-on-hover:hover .add-fundamentals-color-lightest-on-parent-hover { color: #ca728f !important; }

.add-fundamentals-color-dark, .add-fundamentals-color-dark-before:before, .add-fundamentals-color-dark-after:after, .add-fundamentals-color-dark-on-hover:hover, .add-fundamentals-color-dark-to-child-on-hover:hover .add-fundamentals-color-dark-on-parent-hover { color: #89344f !important; }

.add-fundamentals-color-darker, .add-fundamentals-color-darker-before:before, .add-fundamentals-color-darker-after:after, .add-fundamentals-color-darker-on-hover:hover, .add-fundamentals-color-darker-to-child-on-hover:hover .add-fundamentals-color-darker-on-parent-hover { color: #762d45 !important; }

.add-fundamentals-color-darkest, .add-fundamentals-color-darkest-before:before, .add-fundamentals-color-darkest-after:after, .add-fundamentals-color-darkest-on-hover:hover, .add-fundamentals-color-darkest-to-child-on-hover:hover .add-fundamentals-color-darkest-on-parent-hover { color: #511f2f !important; }

.add-fundamentals-border-color, .add-fundamentals-border-color-before:before, .add-fundamentals-border-color-after:after, .add-fundamentals-border-color-on-hover:hover, .add-fundamentals-border-color-to-child-on-hover:hover .add-fundamentals-border-color-on-parent-hover { border-color: #9b3b5a !important; }

.add-fundamentals-border-color-light, .add-fundamentals-border-color-light-before:before, .add-fundamentals-border-color-light-after:after, .add-fundamentals-border-color-light-on-hover:hover, .add-fundamentals-border-color-light-to-child-on-hover:hover .add-fundamentals-border-color-light-on-parent-hover { border-color: #ad4265 !important; }

.add-fundamentals-border-color-lighter, .add-fundamentals-border-color-lighter-before:before, .add-fundamentals-border-color-lighter-after:after, .add-fundamentals-border-color-lighter-on-hover:hover, .add-fundamentals-border-color-lighter-to-child-on-hover:hover .add-fundamentals-border-color-lighter-on-parent-hover { border-color: #bb4e71 !important; }

.add-fundamentals-border-color-lightest, .add-fundamentals-border-color-lightest-before:before, .add-fundamentals-border-color-lightest-after:after, .add-fundamentals-border-color-lightest-on-hover:hover, .add-fundamentals-border-color-lightest-to-child-on-hover:hover .add-fundamentals-border-color-lightest-on-parent-hover { border-color: #ca728f !important; }

.add-fundamentals-border-color-dark, .add-fundamentals-border-color-dark-before:before, .add-fundamentals-border-color-dark-after:after, .add-fundamentals-border-color-dark-on-hover:hover, .add-fundamentals-border-color-dark-to-child-on-hover:hover .add-fundamentals-border-color-dark-on-parent-hover { border-color: #89344f !important; }

.add-fundamentals-border-color-darker, .add-fundamentals-border-color-darker-before:before, .add-fundamentals-border-color-darker-after:after, .add-fundamentals-border-color-darker-on-hover:hover, .add-fundamentals-border-color-darker-to-child-on-hover:hover .add-fundamentals-border-color-darker-on-parent-hover { border-color: #762d45 !important; }

.add-fundamentals-border-color-darkest, .add-fundamentals-border-color-darkest-before:before, .add-fundamentals-border-color-darkest-after:after, .add-fundamentals-border-color-darkest-on-hover:hover, .add-fundamentals-border-color-darkest-to-child-on-hover:hover .add-fundamentals-border-color-darkest-on-parent-hover { border-color: #511f2f !important; }

.add-fundamentals-background-color, .add-fundamentals-background-color-before:before, .add-fundamentals-background-color-after:after, .add-fundamentals-background-color-on-hover:hover, .add-fundamentals-background-color-to-child-on-hover:hover .add-fundamentals-background-color-on-parent-hover { background-color: #9b3b5a !important; }

.add-fundamentals-background-color-light, .add-fundamentals-background-color-light-before:before, .add-fundamentals-background-color-light-after:after, .add-fundamentals-background-color-light-on-hover:hover, .add-fundamentals-background-color-light-to-child-on-hover:hover .add-fundamentals-background-color-light-on-parent-hover { background-color: #ad4265 !important; }

.add-fundamentals-background-color-lighter, .add-fundamentals-background-color-lighter-before:before, .add-fundamentals-background-color-lighter-after:after, .add-fundamentals-background-color-lighter-on-hover:hover, .add-fundamentals-background-color-lighter-to-child-on-hover:hover .add-fundamentals-background-color-lighter-on-parent-hover { background-color: #bb4e71 !important; }

.add-fundamentals-background-color-lightest, .add-fundamentals-background-color-lightest-before:before, .add-fundamentals-background-color-lightest-after:after, .add-fundamentals-background-color-lightest-on-hover:hover, .add-fundamentals-background-color-lightest-to-child-on-hover:hover .add-fundamentals-background-color-lightest-on-parent-hover { background-color: #ca728f !important; }

.add-fundamentals-background-color-dark, .add-fundamentals-background-color-dark-before:before, .add-fundamentals-background-color-dark-after:after, .add-fundamentals-background-color-dark-on-hover:hover, .add-fundamentals-background-color-dark-to-child-on-hover:hover .add-fundamentals-background-color-dark-on-parent-hover { background-color: #89344f !important; }

.add-fundamentals-background-color-darker, .add-fundamentals-background-color-darker-before:before, .add-fundamentals-background-color-darker-after:after, .add-fundamentals-background-color-darker-on-hover:hover, .add-fundamentals-background-color-darker-to-child-on-hover:hover .add-fundamentals-background-color-darker-on-parent-hover { background-color: #762d45 !important; }

.add-fundamentals-background-color-darkest, .add-fundamentals-background-color-darkest-before:before, .add-fundamentals-background-color-darkest-after:after, .add-fundamentals-background-color-darkest-on-hover:hover, .add-fundamentals-background-color-darkest-to-child-on-hover:hover .add-fundamentals-background-color-darkest-on-parent-hover { background-color: #511f2f !important; }

.add-mobile-fill, .add-mobile-fill-before:before, .add-mobile-fill-after:after, .add-mobile-fill-on-hover:hover, .add-mobile-fill-to-child-on-hover:hover .add-mobile-fill-on-parent-hover { fill: #30826C !important; }

.add-mobile-fill-light, .add-mobile-fill-light-before:before, .add-mobile-fill-light-after:after, .add-mobile-fill-light-on-hover:hover, .add-mobile-fill-light-to-child-on-hover:hover .add-mobile-fill-light-on-parent-hover { fill: #37957b !important; }

.add-mobile-fill-lighter, .add-mobile-fill-lighter-before:before, .add-mobile-fill-lighter-after:after, .add-mobile-fill-lighter-on-hover:hover, .add-mobile-fill-lighter-to-child-on-hover:hover .add-mobile-fill-lighter-on-parent-hover { fill: #3ea78b !important; }

.add-mobile-fill-lightest, .add-mobile-fill-lightest-before:before, .add-mobile-fill-lightest-after:after, .add-mobile-fill-lightest-on-hover:hover, .add-mobile-fill-lightest-to-child-on-hover:hover .add-mobile-fill-lightest-on-parent-hover { fill: #57c1a5 !important; }

.add-mobile-fill-dark, .add-mobile-fill-dark-before:before, .add-mobile-fill-dark-after:after, .add-mobile-fill-dark-on-hover:hover, .add-mobile-fill-dark-to-child-on-hover:hover .add-mobile-fill-dark-on-parent-hover { fill: #296f5d !important; }

.add-mobile-fill-darker, .add-mobile-fill-darker-before:before, .add-mobile-fill-darker-after:after, .add-mobile-fill-darker-on-hover:hover, .add-mobile-fill-darker-to-child-on-hover:hover .add-mobile-fill-darker-on-parent-hover { fill: #225d4d !important; }

.add-mobile-fill-darkest, .add-mobile-fill-darkest-before:before, .add-mobile-fill-darkest-after:after, .add-mobile-fill-darkest-on-hover:hover, .add-mobile-fill-darkest-to-child-on-hover:hover .add-mobile-fill-darkest-on-parent-hover { fill: #14382e !important; }

.add-mobile-stroke, .add-mobile-stroke-before:before, .add-mobile-stroke-after:after, .add-mobile-stroke-on-hover:hover, .add-mobile-stroke-to-child-on-hover:hover .add-mobile-stroke-on-parent-hover { stroke: #30826C !important; }

.add-mobile-stroke-light, .add-mobile-stroke-light-before:before, .add-mobile-stroke-light-after:after, .add-mobile-stroke-light-on-hover:hover, .add-mobile-stroke-light-to-child-on-hover:hover .add-mobile-stroke-light-on-parent-hover { stroke: #37957b !important; }

.add-mobile-stroke-lighter, .add-mobile-stroke-lighter-before:before, .add-mobile-stroke-lighter-after:after, .add-mobile-stroke-lighter-on-hover:hover, .add-mobile-stroke-lighter-to-child-on-hover:hover .add-mobile-stroke-lighter-on-parent-hover { stroke: #3ea78b !important; }

.add-mobile-stroke-lightest, .add-mobile-stroke-lightest-before:before, .add-mobile-stroke-lightest-after:after, .add-mobile-stroke-lightest-on-hover:hover, .add-mobile-stroke-lightest-to-child-on-hover:hover .add-mobile-stroke-lightest-on-parent-hover { stroke: #57c1a5 !important; }

.add-mobile-stroke-dark, .add-mobile-stroke-dark-before:before, .add-mobile-stroke-dark-after:after, .add-mobile-stroke-dark-on-hover:hover, .add-mobile-stroke-dark-to-child-on-hover:hover .add-mobile-stroke-dark-on-parent-hover { stroke: #296f5d !important; }

.add-mobile-stroke-darker, .add-mobile-stroke-darker-before:before, .add-mobile-stroke-darker-after:after, .add-mobile-stroke-darker-on-hover:hover, .add-mobile-stroke-darker-to-child-on-hover:hover .add-mobile-stroke-darker-on-parent-hover { stroke: #225d4d !important; }

.add-mobile-stroke-darkest, .add-mobile-stroke-darkest-before:before, .add-mobile-stroke-darkest-after:after, .add-mobile-stroke-darkest-on-hover:hover, .add-mobile-stroke-darkest-to-child-on-hover:hover .add-mobile-stroke-darkest-on-parent-hover { stroke: #14382e !important; }

.add-mobile-color, .add-mobile-color-before:before, .add-mobile-color-after:after, .add-mobile-color-on-hover:hover, .add-mobile-color-to-child-on-hover:hover .add-mobile-color-on-parent-hover { color: #30826C !important; }

.add-mobile-color-light, .add-mobile-color-light-before:before, .add-mobile-color-light-after:after, .add-mobile-color-light-on-hover:hover, .add-mobile-color-light-to-child-on-hover:hover .add-mobile-color-light-on-parent-hover { color: #37957b !important; }

.add-mobile-color-lighter, .add-mobile-color-lighter-before:before, .add-mobile-color-lighter-after:after, .add-mobile-color-lighter-on-hover:hover, .add-mobile-color-lighter-to-child-on-hover:hover .add-mobile-color-lighter-on-parent-hover { color: #3ea78b !important; }

.add-mobile-color-lightest, .add-mobile-color-lightest-before:before, .add-mobile-color-lightest-after:after, .add-mobile-color-lightest-on-hover:hover, .add-mobile-color-lightest-to-child-on-hover:hover .add-mobile-color-lightest-on-parent-hover { color: #57c1a5 !important; }

.add-mobile-color-dark, .add-mobile-color-dark-before:before, .add-mobile-color-dark-after:after, .add-mobile-color-dark-on-hover:hover, .add-mobile-color-dark-to-child-on-hover:hover .add-mobile-color-dark-on-parent-hover { color: #296f5d !important; }

.add-mobile-color-darker, .add-mobile-color-darker-before:before, .add-mobile-color-darker-after:after, .add-mobile-color-darker-on-hover:hover, .add-mobile-color-darker-to-child-on-hover:hover .add-mobile-color-darker-on-parent-hover { color: #225d4d !important; }

.add-mobile-color-darkest, .add-mobile-color-darkest-before:before, .add-mobile-color-darkest-after:after, .add-mobile-color-darkest-on-hover:hover, .add-mobile-color-darkest-to-child-on-hover:hover .add-mobile-color-darkest-on-parent-hover { color: #14382e !important; }

.add-mobile-border-color, .add-mobile-border-color-before:before, .add-mobile-border-color-after:after, .add-mobile-border-color-on-hover:hover, .add-mobile-border-color-to-child-on-hover:hover .add-mobile-border-color-on-parent-hover { border-color: #30826C !important; }

.add-mobile-border-color-light, .add-mobile-border-color-light-before:before, .add-mobile-border-color-light-after:after, .add-mobile-border-color-light-on-hover:hover, .add-mobile-border-color-light-to-child-on-hover:hover .add-mobile-border-color-light-on-parent-hover { border-color: #37957b !important; }

.add-mobile-border-color-lighter, .add-mobile-border-color-lighter-before:before, .add-mobile-border-color-lighter-after:after, .add-mobile-border-color-lighter-on-hover:hover, .add-mobile-border-color-lighter-to-child-on-hover:hover .add-mobile-border-color-lighter-on-parent-hover { border-color: #3ea78b !important; }

.add-mobile-border-color-lightest, .add-mobile-border-color-lightest-before:before, .add-mobile-border-color-lightest-after:after, .add-mobile-border-color-lightest-on-hover:hover, .add-mobile-border-color-lightest-to-child-on-hover:hover .add-mobile-border-color-lightest-on-parent-hover { border-color: #57c1a5 !important; }

.add-mobile-border-color-dark, .add-mobile-border-color-dark-before:before, .add-mobile-border-color-dark-after:after, .add-mobile-border-color-dark-on-hover:hover, .add-mobile-border-color-dark-to-child-on-hover:hover .add-mobile-border-color-dark-on-parent-hover { border-color: #296f5d !important; }

.add-mobile-border-color-darker, .add-mobile-border-color-darker-before:before, .add-mobile-border-color-darker-after:after, .add-mobile-border-color-darker-on-hover:hover, .add-mobile-border-color-darker-to-child-on-hover:hover .add-mobile-border-color-darker-on-parent-hover { border-color: #225d4d !important; }

.add-mobile-border-color-darkest, .add-mobile-border-color-darkest-before:before, .add-mobile-border-color-darkest-after:after, .add-mobile-border-color-darkest-on-hover:hover, .add-mobile-border-color-darkest-to-child-on-hover:hover .add-mobile-border-color-darkest-on-parent-hover { border-color: #14382e !important; }

.add-mobile-background-color, .add-mobile-background-color-before:before, .add-mobile-background-color-after:after, .add-mobile-background-color-on-hover:hover, .add-mobile-background-color-to-child-on-hover:hover .add-mobile-background-color-on-parent-hover { background-color: #30826C !important; }

.add-mobile-background-color-light, .add-mobile-background-color-light-before:before, .add-mobile-background-color-light-after:after, .add-mobile-background-color-light-on-hover:hover, .add-mobile-background-color-light-to-child-on-hover:hover .add-mobile-background-color-light-on-parent-hover { background-color: #37957b !important; }

.add-mobile-background-color-lighter, .add-mobile-background-color-lighter-before:before, .add-mobile-background-color-lighter-after:after, .add-mobile-background-color-lighter-on-hover:hover, .add-mobile-background-color-lighter-to-child-on-hover:hover .add-mobile-background-color-lighter-on-parent-hover { background-color: #3ea78b !important; }

.add-mobile-background-color-lightest, .add-mobile-background-color-lightest-before:before, .add-mobile-background-color-lightest-after:after, .add-mobile-background-color-lightest-on-hover:hover, .add-mobile-background-color-lightest-to-child-on-hover:hover .add-mobile-background-color-lightest-on-parent-hover { background-color: #57c1a5 !important; }

.add-mobile-background-color-dark, .add-mobile-background-color-dark-before:before, .add-mobile-background-color-dark-after:after, .add-mobile-background-color-dark-on-hover:hover, .add-mobile-background-color-dark-to-child-on-hover:hover .add-mobile-background-color-dark-on-parent-hover { background-color: #296f5d !important; }

.add-mobile-background-color-darker, .add-mobile-background-color-darker-before:before, .add-mobile-background-color-darker-after:after, .add-mobile-background-color-darker-on-hover:hover, .add-mobile-background-color-darker-to-child-on-hover:hover .add-mobile-background-color-darker-on-parent-hover { background-color: #225d4d !important; }

.add-mobile-background-color-darkest, .add-mobile-background-color-darkest-before:before, .add-mobile-background-color-darkest-after:after, .add-mobile-background-color-darkest-on-hover:hover, .add-mobile-background-color-darkest-to-child-on-hover:hover .add-mobile-background-color-darkest-on-parent-hover { background-color: #14382e !important; }

.add-internal-fill, .add-internal-fill-before:before, .add-internal-fill-after:after, .add-internal-fill-on-hover:hover, .add-internal-fill-to-child-on-hover:hover .add-internal-fill-on-parent-hover { fill: #55616c !important; }

.add-internal-fill-light, .add-internal-fill-light-before:before, .add-internal-fill-light-after:after, .add-internal-fill-light-on-hover:hover, .add-internal-fill-light-to-child-on-hover:hover .add-internal-fill-light-on-parent-hover { fill: #606e7a !important; }

.add-internal-fill-lighter, .add-internal-fill-lighter-before:before, .add-internal-fill-lighter-after:after, .add-internal-fill-lighter-on-hover:hover, .add-internal-fill-lighter-to-child-on-hover:hover .add-internal-fill-lighter-on-parent-hover { fill: #6b7b89 !important; }

.add-internal-fill-lightest, .add-internal-fill-lightest-before:before, .add-internal-fill-lightest-after:after, .add-internal-fill-lightest-on-hover:hover, .add-internal-fill-lightest-to-child-on-hover:hover .add-internal-fill-lightest-on-parent-hover { fill: #8794a0 !important; }

.add-internal-fill-dark, .add-internal-fill-dark-before:before, .add-internal-fill-dark-after:after, .add-internal-fill-dark-on-hover:hover, .add-internal-fill-dark-to-child-on-hover:hover .add-internal-fill-dark-on-parent-hover { fill: #4a545e !important; }

.add-internal-fill-darker, .add-internal-fill-darker-before:before, .add-internal-fill-darker-after:after, .add-internal-fill-darker-on-hover:hover, .add-internal-fill-darker-to-child-on-hover:hover .add-internal-fill-darker-on-parent-hover { fill: #3f474f !important; }

.add-internal-fill-darkest, .add-internal-fill-darkest-before:before, .add-internal-fill-darkest-after:after, .add-internal-fill-darkest-on-hover:hover, .add-internal-fill-darkest-to-child-on-hover:hover .add-internal-fill-darkest-on-parent-hover { fill: #282e33 !important; }

.add-internal-stroke, .add-internal-stroke-before:before, .add-internal-stroke-after:after, .add-internal-stroke-on-hover:hover, .add-internal-stroke-to-child-on-hover:hover .add-internal-stroke-on-parent-hover { stroke: #55616c !important; }

.add-internal-stroke-light, .add-internal-stroke-light-before:before, .add-internal-stroke-light-after:after, .add-internal-stroke-light-on-hover:hover, .add-internal-stroke-light-to-child-on-hover:hover .add-internal-stroke-light-on-parent-hover { stroke: #606e7a !important; }

.add-internal-stroke-lighter, .add-internal-stroke-lighter-before:before, .add-internal-stroke-lighter-after:after, .add-internal-stroke-lighter-on-hover:hover, .add-internal-stroke-lighter-to-child-on-hover:hover .add-internal-stroke-lighter-on-parent-hover { stroke: #6b7b89 !important; }

.add-internal-stroke-lightest, .add-internal-stroke-lightest-before:before, .add-internal-stroke-lightest-after:after, .add-internal-stroke-lightest-on-hover:hover, .add-internal-stroke-lightest-to-child-on-hover:hover .add-internal-stroke-lightest-on-parent-hover { stroke: #8794a0 !important; }

.add-internal-stroke-dark, .add-internal-stroke-dark-before:before, .add-internal-stroke-dark-after:after, .add-internal-stroke-dark-on-hover:hover, .add-internal-stroke-dark-to-child-on-hover:hover .add-internal-stroke-dark-on-parent-hover { stroke: #4a545e !important; }

.add-internal-stroke-darker, .add-internal-stroke-darker-before:before, .add-internal-stroke-darker-after:after, .add-internal-stroke-darker-on-hover:hover, .add-internal-stroke-darker-to-child-on-hover:hover .add-internal-stroke-darker-on-parent-hover { stroke: #3f474f !important; }

.add-internal-stroke-darkest, .add-internal-stroke-darkest-before:before, .add-internal-stroke-darkest-after:after, .add-internal-stroke-darkest-on-hover:hover, .add-internal-stroke-darkest-to-child-on-hover:hover .add-internal-stroke-darkest-on-parent-hover { stroke: #282e33 !important; }

.add-internal-color, .add-internal-color-before:before, .add-internal-color-after:after, .add-internal-color-on-hover:hover, .add-internal-color-to-child-on-hover:hover .add-internal-color-on-parent-hover { color: #55616c !important; }

.add-internal-color-light, .add-internal-color-light-before:before, .add-internal-color-light-after:after, .add-internal-color-light-on-hover:hover, .add-internal-color-light-to-child-on-hover:hover .add-internal-color-light-on-parent-hover { color: #606e7a !important; }

.add-internal-color-lighter, .add-internal-color-lighter-before:before, .add-internal-color-lighter-after:after, .add-internal-color-lighter-on-hover:hover, .add-internal-color-lighter-to-child-on-hover:hover .add-internal-color-lighter-on-parent-hover { color: #6b7b89 !important; }

.add-internal-color-lightest, .add-internal-color-lightest-before:before, .add-internal-color-lightest-after:after, .add-internal-color-lightest-on-hover:hover, .add-internal-color-lightest-to-child-on-hover:hover .add-internal-color-lightest-on-parent-hover { color: #8794a0 !important; }

.add-internal-color-dark, .add-internal-color-dark-before:before, .add-internal-color-dark-after:after, .add-internal-color-dark-on-hover:hover, .add-internal-color-dark-to-child-on-hover:hover .add-internal-color-dark-on-parent-hover { color: #4a545e !important; }

.add-internal-color-darker, .add-internal-color-darker-before:before, .add-internal-color-darker-after:after, .add-internal-color-darker-on-hover:hover, .add-internal-color-darker-to-child-on-hover:hover .add-internal-color-darker-on-parent-hover { color: #3f474f !important; }

.add-internal-color-darkest, .add-internal-color-darkest-before:before, .add-internal-color-darkest-after:after, .add-internal-color-darkest-on-hover:hover, .add-internal-color-darkest-to-child-on-hover:hover .add-internal-color-darkest-on-parent-hover { color: #282e33 !important; }

.add-internal-border-color, .add-internal-border-color-before:before, .add-internal-border-color-after:after, .add-internal-border-color-on-hover:hover, .add-internal-border-color-to-child-on-hover:hover .add-internal-border-color-on-parent-hover { border-color: #55616c !important; }

.add-internal-border-color-light, .add-internal-border-color-light-before:before, .add-internal-border-color-light-after:after, .add-internal-border-color-light-on-hover:hover, .add-internal-border-color-light-to-child-on-hover:hover .add-internal-border-color-light-on-parent-hover { border-color: #606e7a !important; }

.add-internal-border-color-lighter, .add-internal-border-color-lighter-before:before, .add-internal-border-color-lighter-after:after, .add-internal-border-color-lighter-on-hover:hover, .add-internal-border-color-lighter-to-child-on-hover:hover .add-internal-border-color-lighter-on-parent-hover { border-color: #6b7b89 !important; }

.add-internal-border-color-lightest, .add-internal-border-color-lightest-before:before, .add-internal-border-color-lightest-after:after, .add-internal-border-color-lightest-on-hover:hover, .add-internal-border-color-lightest-to-child-on-hover:hover .add-internal-border-color-lightest-on-parent-hover { border-color: #8794a0 !important; }

.add-internal-border-color-dark, .add-internal-border-color-dark-before:before, .add-internal-border-color-dark-after:after, .add-internal-border-color-dark-on-hover:hover, .add-internal-border-color-dark-to-child-on-hover:hover .add-internal-border-color-dark-on-parent-hover { border-color: #4a545e !important; }

.add-internal-border-color-darker, .add-internal-border-color-darker-before:before, .add-internal-border-color-darker-after:after, .add-internal-border-color-darker-on-hover:hover, .add-internal-border-color-darker-to-child-on-hover:hover .add-internal-border-color-darker-on-parent-hover { border-color: #3f474f !important; }

.add-internal-border-color-darkest, .add-internal-border-color-darkest-before:before, .add-internal-border-color-darkest-after:after, .add-internal-border-color-darkest-on-hover:hover, .add-internal-border-color-darkest-to-child-on-hover:hover .add-internal-border-color-darkest-on-parent-hover { border-color: #282e33 !important; }

.add-internal-background-color, .add-internal-background-color-before:before, .add-internal-background-color-after:after, .add-internal-background-color-on-hover:hover, .add-internal-background-color-to-child-on-hover:hover .add-internal-background-color-on-parent-hover { background-color: #55616c !important; }

.add-internal-background-color-light, .add-internal-background-color-light-before:before, .add-internal-background-color-light-after:after, .add-internal-background-color-light-on-hover:hover, .add-internal-background-color-light-to-child-on-hover:hover .add-internal-background-color-light-on-parent-hover { background-color: #606e7a !important; }

.add-internal-background-color-lighter, .add-internal-background-color-lighter-before:before, .add-internal-background-color-lighter-after:after, .add-internal-background-color-lighter-on-hover:hover, .add-internal-background-color-lighter-to-child-on-hover:hover .add-internal-background-color-lighter-on-parent-hover { background-color: #6b7b89 !important; }

.add-internal-background-color-lightest, .add-internal-background-color-lightest-before:before, .add-internal-background-color-lightest-after:after, .add-internal-background-color-lightest-on-hover:hover, .add-internal-background-color-lightest-to-child-on-hover:hover .add-internal-background-color-lightest-on-parent-hover { background-color: #8794a0 !important; }

.add-internal-background-color-dark, .add-internal-background-color-dark-before:before, .add-internal-background-color-dark-after:after, .add-internal-background-color-dark-on-hover:hover, .add-internal-background-color-dark-to-child-on-hover:hover .add-internal-background-color-dark-on-parent-hover { background-color: #4a545e !important; }

.add-internal-background-color-darker, .add-internal-background-color-darker-before:before, .add-internal-background-color-darker-after:after, .add-internal-background-color-darker-on-hover:hover, .add-internal-background-color-darker-to-child-on-hover:hover .add-internal-background-color-darker-on-parent-hover { background-color: #3f474f !important; }

.add-internal-background-color-darkest, .add-internal-background-color-darkest-before:before, .add-internal-background-color-darkest-after:after, .add-internal-background-color-darkest-on-hover:hover, .add-internal-background-color-darkest-to-child-on-hover:hover .add-internal-background-color-darkest-on-parent-hover { background-color: #282e33 !important; }

.add-foundations-fill, .add-foundations-fill-before:before, .add-foundations-fill-after:after, .add-foundations-fill-on-hover:hover, .add-foundations-fill-to-child-on-hover:hover .add-foundations-fill-on-parent-hover { fill: #004e61 !important; }

.add-foundations-fill-light, .add-foundations-fill-light-before:before, .add-foundations-fill-light-after:after, .add-foundations-fill-light-on-hover:hover, .add-foundations-fill-light-to-child-on-hover:hover .add-foundations-fill-light-on-parent-hover { fill: #00637b !important; }

.add-foundations-fill-lighter, .add-foundations-fill-lighter-before:before, .add-foundations-fill-lighter-after:after, .add-foundations-fill-lighter-on-hover:hover, .add-foundations-fill-lighter-to-child-on-hover:hover .add-foundations-fill-lighter-on-parent-hover { fill: #007794 !important; }

.add-foundations-fill-lightest, .add-foundations-fill-lightest-before:before, .add-foundations-fill-lightest-after:after, .add-foundations-fill-lightest-on-hover:hover, .add-foundations-fill-lightest-to-child-on-hover:hover .add-foundations-fill-lightest-on-parent-hover { fill: #00a0c7 !important; }

.add-foundations-fill-dark, .add-foundations-fill-dark-before:before, .add-foundations-fill-dark-after:after, .add-foundations-fill-dark-on-hover:hover, .add-foundations-fill-dark-to-child-on-hover:hover .add-foundations-fill-dark-on-parent-hover { fill: #003948 !important; }

.add-foundations-fill-darker, .add-foundations-fill-darker-before:before, .add-foundations-fill-darker-after:after, .add-foundations-fill-darker-on-hover:hover, .add-foundations-fill-darker-to-child-on-hover:hover .add-foundations-fill-darker-on-parent-hover { fill: #00252e !important; }

.add-foundations-fill-darkest, .add-foundations-fill-darkest-before:before, .add-foundations-fill-darkest-after:after, .add-foundations-fill-darkest-on-hover:hover, .add-foundations-fill-darkest-to-child-on-hover:hover .add-foundations-fill-darkest-on-parent-hover { fill: black !important; }

.add-foundations-stroke, .add-foundations-stroke-before:before, .add-foundations-stroke-after:after, .add-foundations-stroke-on-hover:hover, .add-foundations-stroke-to-child-on-hover:hover .add-foundations-stroke-on-parent-hover { stroke: #004e61 !important; }

.add-foundations-stroke-light, .add-foundations-stroke-light-before:before, .add-foundations-stroke-light-after:after, .add-foundations-stroke-light-on-hover:hover, .add-foundations-stroke-light-to-child-on-hover:hover .add-foundations-stroke-light-on-parent-hover { stroke: #00637b !important; }

.add-foundations-stroke-lighter, .add-foundations-stroke-lighter-before:before, .add-foundations-stroke-lighter-after:after, .add-foundations-stroke-lighter-on-hover:hover, .add-foundations-stroke-lighter-to-child-on-hover:hover .add-foundations-stroke-lighter-on-parent-hover { stroke: #007794 !important; }

.add-foundations-stroke-lightest, .add-foundations-stroke-lightest-before:before, .add-foundations-stroke-lightest-after:after, .add-foundations-stroke-lightest-on-hover:hover, .add-foundations-stroke-lightest-to-child-on-hover:hover .add-foundations-stroke-lightest-on-parent-hover { stroke: #00a0c7 !important; }

.add-foundations-stroke-dark, .add-foundations-stroke-dark-before:before, .add-foundations-stroke-dark-after:after, .add-foundations-stroke-dark-on-hover:hover, .add-foundations-stroke-dark-to-child-on-hover:hover .add-foundations-stroke-dark-on-parent-hover { stroke: #003948 !important; }

.add-foundations-stroke-darker, .add-foundations-stroke-darker-before:before, .add-foundations-stroke-darker-after:after, .add-foundations-stroke-darker-on-hover:hover, .add-foundations-stroke-darker-to-child-on-hover:hover .add-foundations-stroke-darker-on-parent-hover { stroke: #00252e !important; }

.add-foundations-stroke-darkest, .add-foundations-stroke-darkest-before:before, .add-foundations-stroke-darkest-after:after, .add-foundations-stroke-darkest-on-hover:hover, .add-foundations-stroke-darkest-to-child-on-hover:hover .add-foundations-stroke-darkest-on-parent-hover { stroke: black !important; }

.add-foundations-color, .add-foundations-color-before:before, .add-foundations-color-after:after, .add-foundations-color-on-hover:hover, .add-foundations-color-to-child-on-hover:hover .add-foundations-color-on-parent-hover { color: #004e61 !important; }

.add-foundations-color-light, .add-foundations-color-light-before:before, .add-foundations-color-light-after:after, .add-foundations-color-light-on-hover:hover, .add-foundations-color-light-to-child-on-hover:hover .add-foundations-color-light-on-parent-hover { color: #00637b !important; }

.add-foundations-color-lighter, .add-foundations-color-lighter-before:before, .add-foundations-color-lighter-after:after, .add-foundations-color-lighter-on-hover:hover, .add-foundations-color-lighter-to-child-on-hover:hover .add-foundations-color-lighter-on-parent-hover { color: #007794 !important; }

.add-foundations-color-lightest, .add-foundations-color-lightest-before:before, .add-foundations-color-lightest-after:after, .add-foundations-color-lightest-on-hover:hover, .add-foundations-color-lightest-to-child-on-hover:hover .add-foundations-color-lightest-on-parent-hover { color: #00a0c7 !important; }

.add-foundations-color-dark, .add-foundations-color-dark-before:before, .add-foundations-color-dark-after:after, .add-foundations-color-dark-on-hover:hover, .add-foundations-color-dark-to-child-on-hover:hover .add-foundations-color-dark-on-parent-hover { color: #003948 !important; }

.add-foundations-color-darker, .add-foundations-color-darker-before:before, .add-foundations-color-darker-after:after, .add-foundations-color-darker-on-hover:hover, .add-foundations-color-darker-to-child-on-hover:hover .add-foundations-color-darker-on-parent-hover { color: #00252e !important; }

.add-foundations-color-darkest, .add-foundations-color-darkest-before:before, .add-foundations-color-darkest-after:after, .add-foundations-color-darkest-on-hover:hover, .add-foundations-color-darkest-to-child-on-hover:hover .add-foundations-color-darkest-on-parent-hover { color: black !important; }

.add-foundations-border-color, .add-foundations-border-color-before:before, .add-foundations-border-color-after:after, .add-foundations-border-color-on-hover:hover, .add-foundations-border-color-to-child-on-hover:hover .add-foundations-border-color-on-parent-hover { border-color: #004e61 !important; }

.add-foundations-border-color-light, .add-foundations-border-color-light-before:before, .add-foundations-border-color-light-after:after, .add-foundations-border-color-light-on-hover:hover, .add-foundations-border-color-light-to-child-on-hover:hover .add-foundations-border-color-light-on-parent-hover { border-color: #00637b !important; }

.add-foundations-border-color-lighter, .add-foundations-border-color-lighter-before:before, .add-foundations-border-color-lighter-after:after, .add-foundations-border-color-lighter-on-hover:hover, .add-foundations-border-color-lighter-to-child-on-hover:hover .add-foundations-border-color-lighter-on-parent-hover { border-color: #007794 !important; }

.add-foundations-border-color-lightest, .add-foundations-border-color-lightest-before:before, .add-foundations-border-color-lightest-after:after, .add-foundations-border-color-lightest-on-hover:hover, .add-foundations-border-color-lightest-to-child-on-hover:hover .add-foundations-border-color-lightest-on-parent-hover { border-color: #00a0c7 !important; }

.add-foundations-border-color-dark, .add-foundations-border-color-dark-before:before, .add-foundations-border-color-dark-after:after, .add-foundations-border-color-dark-on-hover:hover, .add-foundations-border-color-dark-to-child-on-hover:hover .add-foundations-border-color-dark-on-parent-hover { border-color: #003948 !important; }

.add-foundations-border-color-darker, .add-foundations-border-color-darker-before:before, .add-foundations-border-color-darker-after:after, .add-foundations-border-color-darker-on-hover:hover, .add-foundations-border-color-darker-to-child-on-hover:hover .add-foundations-border-color-darker-on-parent-hover { border-color: #00252e !important; }

.add-foundations-border-color-darkest, .add-foundations-border-color-darkest-before:before, .add-foundations-border-color-darkest-after:after, .add-foundations-border-color-darkest-on-hover:hover, .add-foundations-border-color-darkest-to-child-on-hover:hover .add-foundations-border-color-darkest-on-parent-hover { border-color: black !important; }

.add-foundations-background-color, .add-foundations-background-color-before:before, .add-foundations-background-color-after:after, .add-foundations-background-color-on-hover:hover, .add-foundations-background-color-to-child-on-hover:hover .add-foundations-background-color-on-parent-hover { background-color: #004e61 !important; }

.add-foundations-background-color-light, .add-foundations-background-color-light-before:before, .add-foundations-background-color-light-after:after, .add-foundations-background-color-light-on-hover:hover, .add-foundations-background-color-light-to-child-on-hover:hover .add-foundations-background-color-light-on-parent-hover { background-color: #00637b !important; }

.add-foundations-background-color-lighter, .add-foundations-background-color-lighter-before:before, .add-foundations-background-color-lighter-after:after, .add-foundations-background-color-lighter-on-hover:hover, .add-foundations-background-color-lighter-to-child-on-hover:hover .add-foundations-background-color-lighter-on-parent-hover { background-color: #007794 !important; }

.add-foundations-background-color-lightest, .add-foundations-background-color-lightest-before:before, .add-foundations-background-color-lightest-after:after, .add-foundations-background-color-lightest-on-hover:hover, .add-foundations-background-color-lightest-to-child-on-hover:hover .add-foundations-background-color-lightest-on-parent-hover { background-color: #00a0c7 !important; }

.add-foundations-background-color-dark, .add-foundations-background-color-dark-before:before, .add-foundations-background-color-dark-after:after, .add-foundations-background-color-dark-on-hover:hover, .add-foundations-background-color-dark-to-child-on-hover:hover .add-foundations-background-color-dark-on-parent-hover { background-color: #003948 !important; }

.add-foundations-background-color-darker, .add-foundations-background-color-darker-before:before, .add-foundations-background-color-darker-after:after, .add-foundations-background-color-darker-on-hover:hover, .add-foundations-background-color-darker-to-child-on-hover:hover .add-foundations-background-color-darker-on-parent-hover { background-color: #00252e !important; }

.add-foundations-background-color-darkest, .add-foundations-background-color-darkest-before:before, .add-foundations-background-color-darkest-after:after, .add-foundations-background-color-darkest-on-hover:hover, .add-foundations-background-color-darkest-to-child-on-hover:hover .add-foundations-background-color-darkest-on-parent-hover { background-color: black !important; }

.add-undefined-fill, .add-undefined-fill-before:before, .add-undefined-fill-after:after, .add-undefined-fill-on-hover:hover, .add-undefined-fill-to-child-on-hover:hover .add-undefined-fill-on-parent-hover { fill: #55616c !important; }

.add-undefined-fill-light, .add-undefined-fill-light-before:before, .add-undefined-fill-light-after:after, .add-undefined-fill-light-on-hover:hover, .add-undefined-fill-light-to-child-on-hover:hover .add-undefined-fill-light-on-parent-hover { fill: #606e7a !important; }

.add-undefined-fill-lighter, .add-undefined-fill-lighter-before:before, .add-undefined-fill-lighter-after:after, .add-undefined-fill-lighter-on-hover:hover, .add-undefined-fill-lighter-to-child-on-hover:hover .add-undefined-fill-lighter-on-parent-hover { fill: #6b7b89 !important; }

.add-undefined-fill-lightest, .add-undefined-fill-lightest-before:before, .add-undefined-fill-lightest-after:after, .add-undefined-fill-lightest-on-hover:hover, .add-undefined-fill-lightest-to-child-on-hover:hover .add-undefined-fill-lightest-on-parent-hover { fill: #8794a0 !important; }

.add-undefined-fill-dark, .add-undefined-fill-dark-before:before, .add-undefined-fill-dark-after:after, .add-undefined-fill-dark-on-hover:hover, .add-undefined-fill-dark-to-child-on-hover:hover .add-undefined-fill-dark-on-parent-hover { fill: #4a545e !important; }

.add-undefined-fill-darker, .add-undefined-fill-darker-before:before, .add-undefined-fill-darker-after:after, .add-undefined-fill-darker-on-hover:hover, .add-undefined-fill-darker-to-child-on-hover:hover .add-undefined-fill-darker-on-parent-hover { fill: #3f474f !important; }

.add-undefined-fill-darkest, .add-undefined-fill-darkest-before:before, .add-undefined-fill-darkest-after:after, .add-undefined-fill-darkest-on-hover:hover, .add-undefined-fill-darkest-to-child-on-hover:hover .add-undefined-fill-darkest-on-parent-hover { fill: #282e33 !important; }

.add-undefined-stroke, .add-undefined-stroke-before:before, .add-undefined-stroke-after:after, .add-undefined-stroke-on-hover:hover, .add-undefined-stroke-to-child-on-hover:hover .add-undefined-stroke-on-parent-hover { stroke: #55616c !important; }

.add-undefined-stroke-light, .add-undefined-stroke-light-before:before, .add-undefined-stroke-light-after:after, .add-undefined-stroke-light-on-hover:hover, .add-undefined-stroke-light-to-child-on-hover:hover .add-undefined-stroke-light-on-parent-hover { stroke: #606e7a !important; }

.add-undefined-stroke-lighter, .add-undefined-stroke-lighter-before:before, .add-undefined-stroke-lighter-after:after, .add-undefined-stroke-lighter-on-hover:hover, .add-undefined-stroke-lighter-to-child-on-hover:hover .add-undefined-stroke-lighter-on-parent-hover { stroke: #6b7b89 !important; }

.add-undefined-stroke-lightest, .add-undefined-stroke-lightest-before:before, .add-undefined-stroke-lightest-after:after, .add-undefined-stroke-lightest-on-hover:hover, .add-undefined-stroke-lightest-to-child-on-hover:hover .add-undefined-stroke-lightest-on-parent-hover { stroke: #8794a0 !important; }

.add-undefined-stroke-dark, .add-undefined-stroke-dark-before:before, .add-undefined-stroke-dark-after:after, .add-undefined-stroke-dark-on-hover:hover, .add-undefined-stroke-dark-to-child-on-hover:hover .add-undefined-stroke-dark-on-parent-hover { stroke: #4a545e !important; }

.add-undefined-stroke-darker, .add-undefined-stroke-darker-before:before, .add-undefined-stroke-darker-after:after, .add-undefined-stroke-darker-on-hover:hover, .add-undefined-stroke-darker-to-child-on-hover:hover .add-undefined-stroke-darker-on-parent-hover { stroke: #3f474f !important; }

.add-undefined-stroke-darkest, .add-undefined-stroke-darkest-before:before, .add-undefined-stroke-darkest-after:after, .add-undefined-stroke-darkest-on-hover:hover, .add-undefined-stroke-darkest-to-child-on-hover:hover .add-undefined-stroke-darkest-on-parent-hover { stroke: #282e33 !important; }

.add-undefined-color, .add-undefined-color-before:before, .add-undefined-color-after:after, .add-undefined-color-on-hover:hover, .add-undefined-color-to-child-on-hover:hover .add-undefined-color-on-parent-hover { color: #55616c !important; }

.add-undefined-color-light, .add-undefined-color-light-before:before, .add-undefined-color-light-after:after, .add-undefined-color-light-on-hover:hover, .add-undefined-color-light-to-child-on-hover:hover .add-undefined-color-light-on-parent-hover { color: #606e7a !important; }

.add-undefined-color-lighter, .add-undefined-color-lighter-before:before, .add-undefined-color-lighter-after:after, .add-undefined-color-lighter-on-hover:hover, .add-undefined-color-lighter-to-child-on-hover:hover .add-undefined-color-lighter-on-parent-hover { color: #6b7b89 !important; }

.add-undefined-color-lightest, .add-undefined-color-lightest-before:before, .add-undefined-color-lightest-after:after, .add-undefined-color-lightest-on-hover:hover, .add-undefined-color-lightest-to-child-on-hover:hover .add-undefined-color-lightest-on-parent-hover { color: #8794a0 !important; }

.add-undefined-color-dark, .add-undefined-color-dark-before:before, .add-undefined-color-dark-after:after, .add-undefined-color-dark-on-hover:hover, .add-undefined-color-dark-to-child-on-hover:hover .add-undefined-color-dark-on-parent-hover { color: #4a545e !important; }

.add-undefined-color-darker, .add-undefined-color-darker-before:before, .add-undefined-color-darker-after:after, .add-undefined-color-darker-on-hover:hover, .add-undefined-color-darker-to-child-on-hover:hover .add-undefined-color-darker-on-parent-hover { color: #3f474f !important; }

.add-undefined-color-darkest, .add-undefined-color-darkest-before:before, .add-undefined-color-darkest-after:after, .add-undefined-color-darkest-on-hover:hover, .add-undefined-color-darkest-to-child-on-hover:hover .add-undefined-color-darkest-on-parent-hover { color: #282e33 !important; }

.add-undefined-border-color, .add-undefined-border-color-before:before, .add-undefined-border-color-after:after, .add-undefined-border-color-on-hover:hover, .add-undefined-border-color-to-child-on-hover:hover .add-undefined-border-color-on-parent-hover { border-color: #55616c !important; }

.add-undefined-border-color-light, .add-undefined-border-color-light-before:before, .add-undefined-border-color-light-after:after, .add-undefined-border-color-light-on-hover:hover, .add-undefined-border-color-light-to-child-on-hover:hover .add-undefined-border-color-light-on-parent-hover { border-color: #606e7a !important; }

.add-undefined-border-color-lighter, .add-undefined-border-color-lighter-before:before, .add-undefined-border-color-lighter-after:after, .add-undefined-border-color-lighter-on-hover:hover, .add-undefined-border-color-lighter-to-child-on-hover:hover .add-undefined-border-color-lighter-on-parent-hover { border-color: #6b7b89 !important; }

.add-undefined-border-color-lightest, .add-undefined-border-color-lightest-before:before, .add-undefined-border-color-lightest-after:after, .add-undefined-border-color-lightest-on-hover:hover, .add-undefined-border-color-lightest-to-child-on-hover:hover .add-undefined-border-color-lightest-on-parent-hover { border-color: #8794a0 !important; }

.add-undefined-border-color-dark, .add-undefined-border-color-dark-before:before, .add-undefined-border-color-dark-after:after, .add-undefined-border-color-dark-on-hover:hover, .add-undefined-border-color-dark-to-child-on-hover:hover .add-undefined-border-color-dark-on-parent-hover { border-color: #4a545e !important; }

.add-undefined-border-color-darker, .add-undefined-border-color-darker-before:before, .add-undefined-border-color-darker-after:after, .add-undefined-border-color-darker-on-hover:hover, .add-undefined-border-color-darker-to-child-on-hover:hover .add-undefined-border-color-darker-on-parent-hover { border-color: #3f474f !important; }

.add-undefined-border-color-darkest, .add-undefined-border-color-darkest-before:before, .add-undefined-border-color-darkest-after:after, .add-undefined-border-color-darkest-on-hover:hover, .add-undefined-border-color-darkest-to-child-on-hover:hover .add-undefined-border-color-darkest-on-parent-hover { border-color: #282e33 !important; }

.add-undefined-background-color, .add-undefined-background-color-before:before, .add-undefined-background-color-after:after, .add-undefined-background-color-on-hover:hover, .add-undefined-background-color-to-child-on-hover:hover .add-undefined-background-color-on-parent-hover { background-color: #55616c !important; }

.add-undefined-background-color-light, .add-undefined-background-color-light-before:before, .add-undefined-background-color-light-after:after, .add-undefined-background-color-light-on-hover:hover, .add-undefined-background-color-light-to-child-on-hover:hover .add-undefined-background-color-light-on-parent-hover { background-color: #606e7a !important; }

.add-undefined-background-color-lighter, .add-undefined-background-color-lighter-before:before, .add-undefined-background-color-lighter-after:after, .add-undefined-background-color-lighter-on-hover:hover, .add-undefined-background-color-lighter-to-child-on-hover:hover .add-undefined-background-color-lighter-on-parent-hover { background-color: #6b7b89 !important; }

.add-undefined-background-color-lightest, .add-undefined-background-color-lightest-before:before, .add-undefined-background-color-lightest-after:after, .add-undefined-background-color-lightest-on-hover:hover, .add-undefined-background-color-lightest-to-child-on-hover:hover .add-undefined-background-color-lightest-on-parent-hover { background-color: #8794a0 !important; }

.add-undefined-background-color-dark, .add-undefined-background-color-dark-before:before, .add-undefined-background-color-dark-after:after, .add-undefined-background-color-dark-on-hover:hover, .add-undefined-background-color-dark-to-child-on-hover:hover .add-undefined-background-color-dark-on-parent-hover { background-color: #4a545e !important; }

.add-undefined-background-color-darker, .add-undefined-background-color-darker-before:before, .add-undefined-background-color-darker-after:after, .add-undefined-background-color-darker-on-hover:hover, .add-undefined-background-color-darker-to-child-on-hover:hover .add-undefined-background-color-darker-on-parent-hover { background-color: #3f474f !important; }

.add-undefined-background-color-darkest, .add-undefined-background-color-darkest-before:before, .add-undefined-background-color-darkest-after:after, .add-undefined-background-color-darkest-on-hover:hover, .add-undefined-background-color-darkest-to-child-on-hover:hover .add-undefined-background-color-darkest-on-parent-hover { background-color: #282e33 !important; }

.add-college-credit-fill, .add-college-credit-fill-before:before, .add-college-credit-fill-after:after, .add-college-credit-fill-on-hover:hover, .add-college-credit-fill-to-child-on-hover:hover .add-college-credit-fill-on-parent-hover { fill: #3887c8 !important; }

.add-college-credit-fill-light, .add-college-credit-fill-light-before:before, .add-college-credit-fill-light-after:after, .add-college-credit-fill-light-on-hover:hover, .add-college-credit-fill-light-to-child-on-hover:hover .add-college-credit-fill-light-on-parent-hover { fill: #4c93ce !important; }

.add-college-credit-fill-lighter, .add-college-credit-fill-lighter-before:before, .add-college-credit-fill-lighter-after:after, .add-college-credit-fill-lighter-on-hover:hover, .add-college-credit-fill-lighter-to-child-on-hover:hover .add-college-credit-fill-lighter-on-parent-hover { fill: #609fd3 !important; }

.add-college-credit-fill-lightest, .add-college-credit-fill-lightest-before:before, .add-college-credit-fill-lightest-after:after, .add-college-credit-fill-lightest-on-hover:hover, .add-college-credit-fill-lightest-to-child-on-hover:hover .add-college-credit-fill-lightest-on-parent-hover { fill: #88b7de !important; }

.add-college-credit-fill-dark, .add-college-credit-fill-dark-before:before, .add-college-credit-fill-dark-after:after, .add-college-credit-fill-dark-on-hover:hover, .add-college-credit-fill-dark-to-child-on-hover:hover .add-college-credit-fill-dark-on-parent-hover { fill: #327ab5 !important; }

.add-college-credit-fill-darker, .add-college-credit-fill-darker-before:before, .add-college-credit-fill-darker-after:after, .add-college-credit-fill-darker-on-hover:hover, .add-college-credit-fill-darker-to-child-on-hover:hover .add-college-credit-fill-darker-on-parent-hover { fill: #2c6ca1 !important; }

.add-college-credit-fill-darkest, .add-college-credit-fill-darkest-before:before, .add-college-credit-fill-darkest-after:after, .add-college-credit-fill-darkest-on-hover:hover, .add-college-credit-fill-darkest-to-child-on-hover:hover .add-college-credit-fill-darkest-on-parent-hover { fill: #215179 !important; }

.add-college-credit-stroke, .add-college-credit-stroke-before:before, .add-college-credit-stroke-after:after, .add-college-credit-stroke-on-hover:hover, .add-college-credit-stroke-to-child-on-hover:hover .add-college-credit-stroke-on-parent-hover { stroke: #3887c8 !important; }

.add-college-credit-stroke-light, .add-college-credit-stroke-light-before:before, .add-college-credit-stroke-light-after:after, .add-college-credit-stroke-light-on-hover:hover, .add-college-credit-stroke-light-to-child-on-hover:hover .add-college-credit-stroke-light-on-parent-hover { stroke: #4c93ce !important; }

.add-college-credit-stroke-lighter, .add-college-credit-stroke-lighter-before:before, .add-college-credit-stroke-lighter-after:after, .add-college-credit-stroke-lighter-on-hover:hover, .add-college-credit-stroke-lighter-to-child-on-hover:hover .add-college-credit-stroke-lighter-on-parent-hover { stroke: #609fd3 !important; }

.add-college-credit-stroke-lightest, .add-college-credit-stroke-lightest-before:before, .add-college-credit-stroke-lightest-after:after, .add-college-credit-stroke-lightest-on-hover:hover, .add-college-credit-stroke-lightest-to-child-on-hover:hover .add-college-credit-stroke-lightest-on-parent-hover { stroke: #88b7de !important; }

.add-college-credit-stroke-dark, .add-college-credit-stroke-dark-before:before, .add-college-credit-stroke-dark-after:after, .add-college-credit-stroke-dark-on-hover:hover, .add-college-credit-stroke-dark-to-child-on-hover:hover .add-college-credit-stroke-dark-on-parent-hover { stroke: #327ab5 !important; }

.add-college-credit-stroke-darker, .add-college-credit-stroke-darker-before:before, .add-college-credit-stroke-darker-after:after, .add-college-credit-stroke-darker-on-hover:hover, .add-college-credit-stroke-darker-to-child-on-hover:hover .add-college-credit-stroke-darker-on-parent-hover { stroke: #2c6ca1 !important; }

.add-college-credit-stroke-darkest, .add-college-credit-stroke-darkest-before:before, .add-college-credit-stroke-darkest-after:after, .add-college-credit-stroke-darkest-on-hover:hover, .add-college-credit-stroke-darkest-to-child-on-hover:hover .add-college-credit-stroke-darkest-on-parent-hover { stroke: #215179 !important; }

.add-college-credit-color, .add-college-credit-color-before:before, .add-college-credit-color-after:after, .add-college-credit-color-on-hover:hover, .add-college-credit-color-to-child-on-hover:hover .add-college-credit-color-on-parent-hover { color: #3887c8 !important; }

.add-college-credit-color-light, .add-college-credit-color-light-before:before, .add-college-credit-color-light-after:after, .add-college-credit-color-light-on-hover:hover, .add-college-credit-color-light-to-child-on-hover:hover .add-college-credit-color-light-on-parent-hover { color: #4c93ce !important; }

.add-college-credit-color-lighter, .add-college-credit-color-lighter-before:before, .add-college-credit-color-lighter-after:after, .add-college-credit-color-lighter-on-hover:hover, .add-college-credit-color-lighter-to-child-on-hover:hover .add-college-credit-color-lighter-on-parent-hover { color: #609fd3 !important; }

.add-college-credit-color-lightest, .add-college-credit-color-lightest-before:before, .add-college-credit-color-lightest-after:after, .add-college-credit-color-lightest-on-hover:hover, .add-college-credit-color-lightest-to-child-on-hover:hover .add-college-credit-color-lightest-on-parent-hover { color: #88b7de !important; }

.add-college-credit-color-dark, .add-college-credit-color-dark-before:before, .add-college-credit-color-dark-after:after, .add-college-credit-color-dark-on-hover:hover, .add-college-credit-color-dark-to-child-on-hover:hover .add-college-credit-color-dark-on-parent-hover { color: #327ab5 !important; }

.add-college-credit-color-darker, .add-college-credit-color-darker-before:before, .add-college-credit-color-darker-after:after, .add-college-credit-color-darker-on-hover:hover, .add-college-credit-color-darker-to-child-on-hover:hover .add-college-credit-color-darker-on-parent-hover { color: #2c6ca1 !important; }

.add-college-credit-color-darkest, .add-college-credit-color-darkest-before:before, .add-college-credit-color-darkest-after:after, .add-college-credit-color-darkest-on-hover:hover, .add-college-credit-color-darkest-to-child-on-hover:hover .add-college-credit-color-darkest-on-parent-hover { color: #215179 !important; }

.add-college-credit-border-color, .add-college-credit-border-color-before:before, .add-college-credit-border-color-after:after, .add-college-credit-border-color-on-hover:hover, .add-college-credit-border-color-to-child-on-hover:hover .add-college-credit-border-color-on-parent-hover { border-color: #3887c8 !important; }

.add-college-credit-border-color-light, .add-college-credit-border-color-light-before:before, .add-college-credit-border-color-light-after:after, .add-college-credit-border-color-light-on-hover:hover, .add-college-credit-border-color-light-to-child-on-hover:hover .add-college-credit-border-color-light-on-parent-hover { border-color: #4c93ce !important; }

.add-college-credit-border-color-lighter, .add-college-credit-border-color-lighter-before:before, .add-college-credit-border-color-lighter-after:after, .add-college-credit-border-color-lighter-on-hover:hover, .add-college-credit-border-color-lighter-to-child-on-hover:hover .add-college-credit-border-color-lighter-on-parent-hover { border-color: #609fd3 !important; }

.add-college-credit-border-color-lightest, .add-college-credit-border-color-lightest-before:before, .add-college-credit-border-color-lightest-after:after, .add-college-credit-border-color-lightest-on-hover:hover, .add-college-credit-border-color-lightest-to-child-on-hover:hover .add-college-credit-border-color-lightest-on-parent-hover { border-color: #88b7de !important; }

.add-college-credit-border-color-dark, .add-college-credit-border-color-dark-before:before, .add-college-credit-border-color-dark-after:after, .add-college-credit-border-color-dark-on-hover:hover, .add-college-credit-border-color-dark-to-child-on-hover:hover .add-college-credit-border-color-dark-on-parent-hover { border-color: #327ab5 !important; }

.add-college-credit-border-color-darker, .add-college-credit-border-color-darker-before:before, .add-college-credit-border-color-darker-after:after, .add-college-credit-border-color-darker-on-hover:hover, .add-college-credit-border-color-darker-to-child-on-hover:hover .add-college-credit-border-color-darker-on-parent-hover { border-color: #2c6ca1 !important; }

.add-college-credit-border-color-darkest, .add-college-credit-border-color-darkest-before:before, .add-college-credit-border-color-darkest-after:after, .add-college-credit-border-color-darkest-on-hover:hover, .add-college-credit-border-color-darkest-to-child-on-hover:hover .add-college-credit-border-color-darkest-on-parent-hover { border-color: #215179 !important; }

.add-college-credit-background-color, .add-college-credit-background-color-before:before, .add-college-credit-background-color-after:after, .add-college-credit-background-color-on-hover:hover, .add-college-credit-background-color-to-child-on-hover:hover .add-college-credit-background-color-on-parent-hover { background-color: #3887c8 !important; }

.add-college-credit-background-color-light, .add-college-credit-background-color-light-before:before, .add-college-credit-background-color-light-after:after, .add-college-credit-background-color-light-on-hover:hover, .add-college-credit-background-color-light-to-child-on-hover:hover .add-college-credit-background-color-light-on-parent-hover { background-color: #4c93ce !important; }

.add-college-credit-background-color-lighter, .add-college-credit-background-color-lighter-before:before, .add-college-credit-background-color-lighter-after:after, .add-college-credit-background-color-lighter-on-hover:hover, .add-college-credit-background-color-lighter-to-child-on-hover:hover .add-college-credit-background-color-lighter-on-parent-hover { background-color: #609fd3 !important; }

.add-college-credit-background-color-lightest, .add-college-credit-background-color-lightest-before:before, .add-college-credit-background-color-lightest-after:after, .add-college-credit-background-color-lightest-on-hover:hover, .add-college-credit-background-color-lightest-to-child-on-hover:hover .add-college-credit-background-color-lightest-on-parent-hover { background-color: #88b7de !important; }

.add-college-credit-background-color-dark, .add-college-credit-background-color-dark-before:before, .add-college-credit-background-color-dark-after:after, .add-college-credit-background-color-dark-on-hover:hover, .add-college-credit-background-color-dark-to-child-on-hover:hover .add-college-credit-background-color-dark-on-parent-hover { background-color: #327ab5 !important; }

.add-college-credit-background-color-darker, .add-college-credit-background-color-darker-before:before, .add-college-credit-background-color-darker-after:after, .add-college-credit-background-color-darker-on-hover:hover, .add-college-credit-background-color-darker-to-child-on-hover:hover .add-college-credit-background-color-darker-on-parent-hover { background-color: #2c6ca1 !important; }

.add-college-credit-background-color-darkest, .add-college-credit-background-color-darkest-before:before, .add-college-credit-background-color-darkest-after:after, .add-college-credit-background-color-darkest-on-hover:hover, .add-college-credit-background-color-darkest-to-child-on-hover:hover .add-college-credit-background-color-darkest-on-parent-hover { background-color: #215179 !important; }

.add-no-code-fill, .add-no-code-fill-before:before, .add-no-code-fill-after:after, .add-no-code-fill-on-hover:hover, .add-no-code-fill-to-child-on-hover:hover .add-no-code-fill-on-parent-hover { fill: #31AF7F !important; }

.add-no-code-fill-light, .add-no-code-fill-light-before:before, .add-no-code-fill-light-after:after, .add-no-code-fill-light-on-hover:hover, .add-no-code-fill-light-to-child-on-hover:hover .add-no-code-fill-light-on-parent-hover { fill: #37c38d !important; }

.add-no-code-fill-lighter, .add-no-code-fill-lighter-before:before, .add-no-code-fill-lighter-after:after, .add-no-code-fill-lighter-on-hover:hover, .add-no-code-fill-lighter-to-child-on-hover:hover .add-no-code-fill-lighter-on-parent-hover { fill: #47cc99 !important; }

.add-no-code-fill-lightest, .add-no-code-fill-lightest-before:before, .add-no-code-fill-lightest-after:after, .add-no-code-fill-lightest-on-hover:hover, .add-no-code-fill-lightest-to-child-on-hover:hover .add-no-code-fill-lightest-on-parent-hover { fill: #6fd7af !important; }

.add-no-code-fill-dark, .add-no-code-fill-dark-before:before, .add-no-code-fill-dark-after:after, .add-no-code-fill-dark-on-hover:hover, .add-no-code-fill-dark-to-child-on-hover:hover .add-no-code-fill-dark-on-parent-hover { fill: #2b9b71 !important; }

.add-no-code-fill-darker, .add-no-code-fill-darker-before:before, .add-no-code-fill-darker-after:after, .add-no-code-fill-darker-on-hover:hover, .add-no-code-fill-darker-to-child-on-hover:hover .add-no-code-fill-darker-on-parent-hover { fill: #268762 !important; }

.add-no-code-fill-darkest, .add-no-code-fill-darkest-before:before, .add-no-code-fill-darkest-after:after, .add-no-code-fill-darkest-on-hover:hover, .add-no-code-fill-darkest-to-child-on-hover:hover .add-no-code-fill-darkest-on-parent-hover { fill: #1b5f45 !important; }

.add-no-code-stroke, .add-no-code-stroke-before:before, .add-no-code-stroke-after:after, .add-no-code-stroke-on-hover:hover, .add-no-code-stroke-to-child-on-hover:hover .add-no-code-stroke-on-parent-hover { stroke: #31AF7F !important; }

.add-no-code-stroke-light, .add-no-code-stroke-light-before:before, .add-no-code-stroke-light-after:after, .add-no-code-stroke-light-on-hover:hover, .add-no-code-stroke-light-to-child-on-hover:hover .add-no-code-stroke-light-on-parent-hover { stroke: #37c38d !important; }

.add-no-code-stroke-lighter, .add-no-code-stroke-lighter-before:before, .add-no-code-stroke-lighter-after:after, .add-no-code-stroke-lighter-on-hover:hover, .add-no-code-stroke-lighter-to-child-on-hover:hover .add-no-code-stroke-lighter-on-parent-hover { stroke: #47cc99 !important; }

.add-no-code-stroke-lightest, .add-no-code-stroke-lightest-before:before, .add-no-code-stroke-lightest-after:after, .add-no-code-stroke-lightest-on-hover:hover, .add-no-code-stroke-lightest-to-child-on-hover:hover .add-no-code-stroke-lightest-on-parent-hover { stroke: #6fd7af !important; }

.add-no-code-stroke-dark, .add-no-code-stroke-dark-before:before, .add-no-code-stroke-dark-after:after, .add-no-code-stroke-dark-on-hover:hover, .add-no-code-stroke-dark-to-child-on-hover:hover .add-no-code-stroke-dark-on-parent-hover { stroke: #2b9b71 !important; }

.add-no-code-stroke-darker, .add-no-code-stroke-darker-before:before, .add-no-code-stroke-darker-after:after, .add-no-code-stroke-darker-on-hover:hover, .add-no-code-stroke-darker-to-child-on-hover:hover .add-no-code-stroke-darker-on-parent-hover { stroke: #268762 !important; }

.add-no-code-stroke-darkest, .add-no-code-stroke-darkest-before:before, .add-no-code-stroke-darkest-after:after, .add-no-code-stroke-darkest-on-hover:hover, .add-no-code-stroke-darkest-to-child-on-hover:hover .add-no-code-stroke-darkest-on-parent-hover { stroke: #1b5f45 !important; }

.add-no-code-color, .add-no-code-color-before:before, .add-no-code-color-after:after, .add-no-code-color-on-hover:hover, .add-no-code-color-to-child-on-hover:hover .add-no-code-color-on-parent-hover { color: #31AF7F !important; }

.add-no-code-color-light, .add-no-code-color-light-before:before, .add-no-code-color-light-after:after, .add-no-code-color-light-on-hover:hover, .add-no-code-color-light-to-child-on-hover:hover .add-no-code-color-light-on-parent-hover { color: #37c38d !important; }

.add-no-code-color-lighter, .add-no-code-color-lighter-before:before, .add-no-code-color-lighter-after:after, .add-no-code-color-lighter-on-hover:hover, .add-no-code-color-lighter-to-child-on-hover:hover .add-no-code-color-lighter-on-parent-hover { color: #47cc99 !important; }

.add-no-code-color-lightest, .add-no-code-color-lightest-before:before, .add-no-code-color-lightest-after:after, .add-no-code-color-lightest-on-hover:hover, .add-no-code-color-lightest-to-child-on-hover:hover .add-no-code-color-lightest-on-parent-hover { color: #6fd7af !important; }

.add-no-code-color-dark, .add-no-code-color-dark-before:before, .add-no-code-color-dark-after:after, .add-no-code-color-dark-on-hover:hover, .add-no-code-color-dark-to-child-on-hover:hover .add-no-code-color-dark-on-parent-hover { color: #2b9b71 !important; }

.add-no-code-color-darker, .add-no-code-color-darker-before:before, .add-no-code-color-darker-after:after, .add-no-code-color-darker-on-hover:hover, .add-no-code-color-darker-to-child-on-hover:hover .add-no-code-color-darker-on-parent-hover { color: #268762 !important; }

.add-no-code-color-darkest, .add-no-code-color-darkest-before:before, .add-no-code-color-darkest-after:after, .add-no-code-color-darkest-on-hover:hover, .add-no-code-color-darkest-to-child-on-hover:hover .add-no-code-color-darkest-on-parent-hover { color: #1b5f45 !important; }

.add-no-code-border-color, .add-no-code-border-color-before:before, .add-no-code-border-color-after:after, .add-no-code-border-color-on-hover:hover, .add-no-code-border-color-to-child-on-hover:hover .add-no-code-border-color-on-parent-hover { border-color: #31AF7F !important; }

.add-no-code-border-color-light, .add-no-code-border-color-light-before:before, .add-no-code-border-color-light-after:after, .add-no-code-border-color-light-on-hover:hover, .add-no-code-border-color-light-to-child-on-hover:hover .add-no-code-border-color-light-on-parent-hover { border-color: #37c38d !important; }

.add-no-code-border-color-lighter, .add-no-code-border-color-lighter-before:before, .add-no-code-border-color-lighter-after:after, .add-no-code-border-color-lighter-on-hover:hover, .add-no-code-border-color-lighter-to-child-on-hover:hover .add-no-code-border-color-lighter-on-parent-hover { border-color: #47cc99 !important; }

.add-no-code-border-color-lightest, .add-no-code-border-color-lightest-before:before, .add-no-code-border-color-lightest-after:after, .add-no-code-border-color-lightest-on-hover:hover, .add-no-code-border-color-lightest-to-child-on-hover:hover .add-no-code-border-color-lightest-on-parent-hover { border-color: #6fd7af !important; }

.add-no-code-border-color-dark, .add-no-code-border-color-dark-before:before, .add-no-code-border-color-dark-after:after, .add-no-code-border-color-dark-on-hover:hover, .add-no-code-border-color-dark-to-child-on-hover:hover .add-no-code-border-color-dark-on-parent-hover { border-color: #2b9b71 !important; }

.add-no-code-border-color-darker, .add-no-code-border-color-darker-before:before, .add-no-code-border-color-darker-after:after, .add-no-code-border-color-darker-on-hover:hover, .add-no-code-border-color-darker-to-child-on-hover:hover .add-no-code-border-color-darker-on-parent-hover { border-color: #268762 !important; }

.add-no-code-border-color-darkest, .add-no-code-border-color-darkest-before:before, .add-no-code-border-color-darkest-after:after, .add-no-code-border-color-darkest-on-hover:hover, .add-no-code-border-color-darkest-to-child-on-hover:hover .add-no-code-border-color-darkest-on-parent-hover { border-color: #1b5f45 !important; }

.add-no-code-background-color, .add-no-code-background-color-before:before, .add-no-code-background-color-after:after, .add-no-code-background-color-on-hover:hover, .add-no-code-background-color-to-child-on-hover:hover .add-no-code-background-color-on-parent-hover { background-color: #31AF7F !important; }

.add-no-code-background-color-light, .add-no-code-background-color-light-before:before, .add-no-code-background-color-light-after:after, .add-no-code-background-color-light-on-hover:hover, .add-no-code-background-color-light-to-child-on-hover:hover .add-no-code-background-color-light-on-parent-hover { background-color: #37c38d !important; }

.add-no-code-background-color-lighter, .add-no-code-background-color-lighter-before:before, .add-no-code-background-color-lighter-after:after, .add-no-code-background-color-lighter-on-hover:hover, .add-no-code-background-color-lighter-to-child-on-hover:hover .add-no-code-background-color-lighter-on-parent-hover { background-color: #47cc99 !important; }

.add-no-code-background-color-lightest, .add-no-code-background-color-lightest-before:before, .add-no-code-background-color-lightest-after:after, .add-no-code-background-color-lightest-on-hover:hover, .add-no-code-background-color-lightest-to-child-on-hover:hover .add-no-code-background-color-lightest-on-parent-hover { background-color: #6fd7af !important; }

.add-no-code-background-color-dark, .add-no-code-background-color-dark-before:before, .add-no-code-background-color-dark-after:after, .add-no-code-background-color-dark-on-hover:hover, .add-no-code-background-color-dark-to-child-on-hover:hover .add-no-code-background-color-dark-on-parent-hover { background-color: #2b9b71 !important; }

.add-no-code-background-color-darker, .add-no-code-background-color-darker-before:before, .add-no-code-background-color-darker-after:after, .add-no-code-background-color-darker-on-hover:hover, .add-no-code-background-color-darker-to-child-on-hover:hover .add-no-code-background-color-darker-on-parent-hover { background-color: #268762 !important; }

.add-no-code-background-color-darkest, .add-no-code-background-color-darkest-before:before, .add-no-code-background-color-darkest-after:after, .add-no-code-background-color-darkest-on-hover:hover, .add-no-code-background-color-darkest-to-child-on-hover:hover .add-no-code-background-color-darkest-on-parent-hover { background-color: #1b5f45 !important; }

.add-security-fill, .add-security-fill-before:before, .add-security-fill-after:after, .add-security-fill-on-hover:hover, .add-security-fill-to-child-on-hover:hover .add-security-fill-on-parent-hover { fill: #409BE9 !important; }

.add-security-fill-light, .add-security-fill-light-before:before, .add-security-fill-light-after:after, .add-security-fill-light-on-hover:hover, .add-security-fill-light-to-child-on-hover:hover .add-security-fill-light-on-parent-hover { fill: #57a7ec !important; }

.add-security-fill-lighter, .add-security-fill-lighter-before:before, .add-security-fill-lighter-after:after, .add-security-fill-lighter-on-hover:hover, .add-security-fill-lighter-to-child-on-hover:hover .add-security-fill-lighter-on-parent-hover { fill: #6eb3ee !important; }

.add-security-fill-lightest, .add-security-fill-lightest-before:before, .add-security-fill-lightest-after:after, .add-security-fill-lightest-on-hover:hover, .add-security-fill-lightest-to-child-on-hover:hover .add-security-fill-lightest-on-parent-hover { fill: #9bcbf4 !important; }

.add-security-fill-dark, .add-security-fill-dark-before:before, .add-security-fill-dark-after:after, .add-security-fill-dark-on-hover:hover, .add-security-fill-dark-to-child-on-hover:hover .add-security-fill-dark-on-parent-hover { fill: #298fe6 !important; }

.add-security-fill-darker, .add-security-fill-darker-before:before, .add-security-fill-darker-after:after, .add-security-fill-darker-on-hover:hover, .add-security-fill-darker-to-child-on-hover:hover .add-security-fill-darker-on-parent-hover { fill: #1983dd !important; }

.add-security-fill-darkest, .add-security-fill-darkest-before:before, .add-security-fill-darkest-after:after, .add-security-fill-darkest-on-hover:hover, .add-security-fill-darkest-to-child-on-hover:hover .add-security-fill-darkest-on-parent-hover { fill: #1467af !important; }

.add-security-stroke, .add-security-stroke-before:before, .add-security-stroke-after:after, .add-security-stroke-on-hover:hover, .add-security-stroke-to-child-on-hover:hover .add-security-stroke-on-parent-hover { stroke: #409BE9 !important; }

.add-security-stroke-light, .add-security-stroke-light-before:before, .add-security-stroke-light-after:after, .add-security-stroke-light-on-hover:hover, .add-security-stroke-light-to-child-on-hover:hover .add-security-stroke-light-on-parent-hover { stroke: #57a7ec !important; }

.add-security-stroke-lighter, .add-security-stroke-lighter-before:before, .add-security-stroke-lighter-after:after, .add-security-stroke-lighter-on-hover:hover, .add-security-stroke-lighter-to-child-on-hover:hover .add-security-stroke-lighter-on-parent-hover { stroke: #6eb3ee !important; }

.add-security-stroke-lightest, .add-security-stroke-lightest-before:before, .add-security-stroke-lightest-after:after, .add-security-stroke-lightest-on-hover:hover, .add-security-stroke-lightest-to-child-on-hover:hover .add-security-stroke-lightest-on-parent-hover { stroke: #9bcbf4 !important; }

.add-security-stroke-dark, .add-security-stroke-dark-before:before, .add-security-stroke-dark-after:after, .add-security-stroke-dark-on-hover:hover, .add-security-stroke-dark-to-child-on-hover:hover .add-security-stroke-dark-on-parent-hover { stroke: #298fe6 !important; }

.add-security-stroke-darker, .add-security-stroke-darker-before:before, .add-security-stroke-darker-after:after, .add-security-stroke-darker-on-hover:hover, .add-security-stroke-darker-to-child-on-hover:hover .add-security-stroke-darker-on-parent-hover { stroke: #1983dd !important; }

.add-security-stroke-darkest, .add-security-stroke-darkest-before:before, .add-security-stroke-darkest-after:after, .add-security-stroke-darkest-on-hover:hover, .add-security-stroke-darkest-to-child-on-hover:hover .add-security-stroke-darkest-on-parent-hover { stroke: #1467af !important; }

.add-security-color, .add-security-color-before:before, .add-security-color-after:after, .add-security-color-on-hover:hover, .add-security-color-to-child-on-hover:hover .add-security-color-on-parent-hover { color: #409BE9 !important; }

.add-security-color-light, .add-security-color-light-before:before, .add-security-color-light-after:after, .add-security-color-light-on-hover:hover, .add-security-color-light-to-child-on-hover:hover .add-security-color-light-on-parent-hover { color: #57a7ec !important; }

.add-security-color-lighter, .add-security-color-lighter-before:before, .add-security-color-lighter-after:after, .add-security-color-lighter-on-hover:hover, .add-security-color-lighter-to-child-on-hover:hover .add-security-color-lighter-on-parent-hover { color: #6eb3ee !important; }

.add-security-color-lightest, .add-security-color-lightest-before:before, .add-security-color-lightest-after:after, .add-security-color-lightest-on-hover:hover, .add-security-color-lightest-to-child-on-hover:hover .add-security-color-lightest-on-parent-hover { color: #9bcbf4 !important; }

.add-security-color-dark, .add-security-color-dark-before:before, .add-security-color-dark-after:after, .add-security-color-dark-on-hover:hover, .add-security-color-dark-to-child-on-hover:hover .add-security-color-dark-on-parent-hover { color: #298fe6 !important; }

.add-security-color-darker, .add-security-color-darker-before:before, .add-security-color-darker-after:after, .add-security-color-darker-on-hover:hover, .add-security-color-darker-to-child-on-hover:hover .add-security-color-darker-on-parent-hover { color: #1983dd !important; }

.add-security-color-darkest, .add-security-color-darkest-before:before, .add-security-color-darkest-after:after, .add-security-color-darkest-on-hover:hover, .add-security-color-darkest-to-child-on-hover:hover .add-security-color-darkest-on-parent-hover { color: #1467af !important; }

.add-security-border-color, .add-security-border-color-before:before, .add-security-border-color-after:after, .add-security-border-color-on-hover:hover, .add-security-border-color-to-child-on-hover:hover .add-security-border-color-on-parent-hover { border-color: #409BE9 !important; }

.add-security-border-color-light, .add-security-border-color-light-before:before, .add-security-border-color-light-after:after, .add-security-border-color-light-on-hover:hover, .add-security-border-color-light-to-child-on-hover:hover .add-security-border-color-light-on-parent-hover { border-color: #57a7ec !important; }

.add-security-border-color-lighter, .add-security-border-color-lighter-before:before, .add-security-border-color-lighter-after:after, .add-security-border-color-lighter-on-hover:hover, .add-security-border-color-lighter-to-child-on-hover:hover .add-security-border-color-lighter-on-parent-hover { border-color: #6eb3ee !important; }

.add-security-border-color-lightest, .add-security-border-color-lightest-before:before, .add-security-border-color-lightest-after:after, .add-security-border-color-lightest-on-hover:hover, .add-security-border-color-lightest-to-child-on-hover:hover .add-security-border-color-lightest-on-parent-hover { border-color: #9bcbf4 !important; }

.add-security-border-color-dark, .add-security-border-color-dark-before:before, .add-security-border-color-dark-after:after, .add-security-border-color-dark-on-hover:hover, .add-security-border-color-dark-to-child-on-hover:hover .add-security-border-color-dark-on-parent-hover { border-color: #298fe6 !important; }

.add-security-border-color-darker, .add-security-border-color-darker-before:before, .add-security-border-color-darker-after:after, .add-security-border-color-darker-on-hover:hover, .add-security-border-color-darker-to-child-on-hover:hover .add-security-border-color-darker-on-parent-hover { border-color: #1983dd !important; }

.add-security-border-color-darkest, .add-security-border-color-darkest-before:before, .add-security-border-color-darkest-after:after, .add-security-border-color-darkest-on-hover:hover, .add-security-border-color-darkest-to-child-on-hover:hover .add-security-border-color-darkest-on-parent-hover { border-color: #1467af !important; }

.add-security-background-color, .add-security-background-color-before:before, .add-security-background-color-after:after, .add-security-background-color-on-hover:hover, .add-security-background-color-to-child-on-hover:hover .add-security-background-color-on-parent-hover { background-color: #409BE9 !important; }

.add-security-background-color-light, .add-security-background-color-light-before:before, .add-security-background-color-light-after:after, .add-security-background-color-light-on-hover:hover, .add-security-background-color-light-to-child-on-hover:hover .add-security-background-color-light-on-parent-hover { background-color: #57a7ec !important; }

.add-security-background-color-lighter, .add-security-background-color-lighter-before:before, .add-security-background-color-lighter-after:after, .add-security-background-color-lighter-on-hover:hover, .add-security-background-color-lighter-to-child-on-hover:hover .add-security-background-color-lighter-on-parent-hover { background-color: #6eb3ee !important; }

.add-security-background-color-lightest, .add-security-background-color-lightest-before:before, .add-security-background-color-lightest-after:after, .add-security-background-color-lightest-on-hover:hover, .add-security-background-color-lightest-to-child-on-hover:hover .add-security-background-color-lightest-on-parent-hover { background-color: #9bcbf4 !important; }

.add-security-background-color-dark, .add-security-background-color-dark-before:before, .add-security-background-color-dark-after:after, .add-security-background-color-dark-on-hover:hover, .add-security-background-color-dark-to-child-on-hover:hover .add-security-background-color-dark-on-parent-hover { background-color: #298fe6 !important; }

.add-security-background-color-darker, .add-security-background-color-darker-before:before, .add-security-background-color-darker-after:after, .add-security-background-color-darker-on-hover:hover, .add-security-background-color-darker-to-child-on-hover:hover .add-security-background-color-darker-on-parent-hover { background-color: #1983dd !important; }

.add-security-background-color-darkest, .add-security-background-color-darkest-before:before, .add-security-background-color-darkest-after:after, .add-security-background-color-darkest-on-hover:hover, .add-security-background-color-darkest-to-child-on-hover:hover .add-security-background-color-darkest-on-parent-hover { background-color: #1467af !important; }

.add-game-development-fill, .add-game-development-fill-before:before, .add-game-development-fill-after:after, .add-game-development-fill-on-hover:hover, .add-game-development-fill-to-child-on-hover:hover .add-game-development-fill-on-parent-hover { fill: #856fc4 !important; }

.add-game-development-fill-light, .add-game-development-fill-light-before:before, .add-game-development-fill-light-after:after, .add-game-development-fill-light-on-hover:hover, .add-game-development-fill-light-to-child-on-hover:hover .add-game-development-fill-light-on-parent-hover { fill: #9481cb !important; }

.add-game-development-fill-lighter, .add-game-development-fill-lighter-before:before, .add-game-development-fill-lighter-after:after, .add-game-development-fill-lighter-on-hover:hover, .add-game-development-fill-lighter-to-child-on-hover:hover .add-game-development-fill-lighter-on-parent-hover { fill: #a493d3 !important; }

.add-game-development-fill-lightest, .add-game-development-fill-lightest-before:before, .add-game-development-fill-lightest-after:after, .add-game-development-fill-lightest-on-hover:hover, .add-game-development-fill-lightest-to-child-on-hover:hover .add-game-development-fill-lightest-on-parent-hover { fill: #c2b7e2 !important; }

.add-game-development-fill-dark, .add-game-development-fill-dark-before:before, .add-game-development-fill-dark-after:after, .add-game-development-fill-dark-on-hover:hover, .add-game-development-fill-dark-to-child-on-hover:hover .add-game-development-fill-dark-on-parent-hover { fill: #765dbd !important; }

.add-game-development-fill-darker, .add-game-development-fill-darker-before:before, .add-game-development-fill-darker-after:after, .add-game-development-fill-darker-on-hover:hover, .add-game-development-fill-darker-to-child-on-hover:hover .add-game-development-fill-darker-on-parent-hover { fill: #664bb5 !important; }

.add-game-development-fill-darkest, .add-game-development-fill-darkest-before:before, .add-game-development-fill-darkest-after:after, .add-game-development-fill-darkest-on-hover:hover, .add-game-development-fill-darkest-to-child-on-hover:hover .add-game-development-fill-darkest-on-parent-hover { fill: #523c91 !important; }

.add-game-development-stroke, .add-game-development-stroke-before:before, .add-game-development-stroke-after:after, .add-game-development-stroke-on-hover:hover, .add-game-development-stroke-to-child-on-hover:hover .add-game-development-stroke-on-parent-hover { stroke: #856fc4 !important; }

.add-game-development-stroke-light, .add-game-development-stroke-light-before:before, .add-game-development-stroke-light-after:after, .add-game-development-stroke-light-on-hover:hover, .add-game-development-stroke-light-to-child-on-hover:hover .add-game-development-stroke-light-on-parent-hover { stroke: #9481cb !important; }

.add-game-development-stroke-lighter, .add-game-development-stroke-lighter-before:before, .add-game-development-stroke-lighter-after:after, .add-game-development-stroke-lighter-on-hover:hover, .add-game-development-stroke-lighter-to-child-on-hover:hover .add-game-development-stroke-lighter-on-parent-hover { stroke: #a493d3 !important; }

.add-game-development-stroke-lightest, .add-game-development-stroke-lightest-before:before, .add-game-development-stroke-lightest-after:after, .add-game-development-stroke-lightest-on-hover:hover, .add-game-development-stroke-lightest-to-child-on-hover:hover .add-game-development-stroke-lightest-on-parent-hover { stroke: #c2b7e2 !important; }

.add-game-development-stroke-dark, .add-game-development-stroke-dark-before:before, .add-game-development-stroke-dark-after:after, .add-game-development-stroke-dark-on-hover:hover, .add-game-development-stroke-dark-to-child-on-hover:hover .add-game-development-stroke-dark-on-parent-hover { stroke: #765dbd !important; }

.add-game-development-stroke-darker, .add-game-development-stroke-darker-before:before, .add-game-development-stroke-darker-after:after, .add-game-development-stroke-darker-on-hover:hover, .add-game-development-stroke-darker-to-child-on-hover:hover .add-game-development-stroke-darker-on-parent-hover { stroke: #664bb5 !important; }

.add-game-development-stroke-darkest, .add-game-development-stroke-darkest-before:before, .add-game-development-stroke-darkest-after:after, .add-game-development-stroke-darkest-on-hover:hover, .add-game-development-stroke-darkest-to-child-on-hover:hover .add-game-development-stroke-darkest-on-parent-hover { stroke: #523c91 !important; }

.add-game-development-color, .add-game-development-color-before:before, .add-game-development-color-after:after, .add-game-development-color-on-hover:hover, .add-game-development-color-to-child-on-hover:hover .add-game-development-color-on-parent-hover { color: #856fc4 !important; }

.add-game-development-color-light, .add-game-development-color-light-before:before, .add-game-development-color-light-after:after, .add-game-development-color-light-on-hover:hover, .add-game-development-color-light-to-child-on-hover:hover .add-game-development-color-light-on-parent-hover { color: #9481cb !important; }

.add-game-development-color-lighter, .add-game-development-color-lighter-before:before, .add-game-development-color-lighter-after:after, .add-game-development-color-lighter-on-hover:hover, .add-game-development-color-lighter-to-child-on-hover:hover .add-game-development-color-lighter-on-parent-hover { color: #a493d3 !important; }

.add-game-development-color-lightest, .add-game-development-color-lightest-before:before, .add-game-development-color-lightest-after:after, .add-game-development-color-lightest-on-hover:hover, .add-game-development-color-lightest-to-child-on-hover:hover .add-game-development-color-lightest-on-parent-hover { color: #c2b7e2 !important; }

.add-game-development-color-dark, .add-game-development-color-dark-before:before, .add-game-development-color-dark-after:after, .add-game-development-color-dark-on-hover:hover, .add-game-development-color-dark-to-child-on-hover:hover .add-game-development-color-dark-on-parent-hover { color: #765dbd !important; }

.add-game-development-color-darker, .add-game-development-color-darker-before:before, .add-game-development-color-darker-after:after, .add-game-development-color-darker-on-hover:hover, .add-game-development-color-darker-to-child-on-hover:hover .add-game-development-color-darker-on-parent-hover { color: #664bb5 !important; }

.add-game-development-color-darkest, .add-game-development-color-darkest-before:before, .add-game-development-color-darkest-after:after, .add-game-development-color-darkest-on-hover:hover, .add-game-development-color-darkest-to-child-on-hover:hover .add-game-development-color-darkest-on-parent-hover { color: #523c91 !important; }

.add-game-development-border-color, .add-game-development-border-color-before:before, .add-game-development-border-color-after:after, .add-game-development-border-color-on-hover:hover, .add-game-development-border-color-to-child-on-hover:hover .add-game-development-border-color-on-parent-hover { border-color: #856fc4 !important; }

.add-game-development-border-color-light, .add-game-development-border-color-light-before:before, .add-game-development-border-color-light-after:after, .add-game-development-border-color-light-on-hover:hover, .add-game-development-border-color-light-to-child-on-hover:hover .add-game-development-border-color-light-on-parent-hover { border-color: #9481cb !important; }

.add-game-development-border-color-lighter, .add-game-development-border-color-lighter-before:before, .add-game-development-border-color-lighter-after:after, .add-game-development-border-color-lighter-on-hover:hover, .add-game-development-border-color-lighter-to-child-on-hover:hover .add-game-development-border-color-lighter-on-parent-hover { border-color: #a493d3 !important; }

.add-game-development-border-color-lightest, .add-game-development-border-color-lightest-before:before, .add-game-development-border-color-lightest-after:after, .add-game-development-border-color-lightest-on-hover:hover, .add-game-development-border-color-lightest-to-child-on-hover:hover .add-game-development-border-color-lightest-on-parent-hover { border-color: #c2b7e2 !important; }

.add-game-development-border-color-dark, .add-game-development-border-color-dark-before:before, .add-game-development-border-color-dark-after:after, .add-game-development-border-color-dark-on-hover:hover, .add-game-development-border-color-dark-to-child-on-hover:hover .add-game-development-border-color-dark-on-parent-hover { border-color: #765dbd !important; }

.add-game-development-border-color-darker, .add-game-development-border-color-darker-before:before, .add-game-development-border-color-darker-after:after, .add-game-development-border-color-darker-on-hover:hover, .add-game-development-border-color-darker-to-child-on-hover:hover .add-game-development-border-color-darker-on-parent-hover { border-color: #664bb5 !important; }

.add-game-development-border-color-darkest, .add-game-development-border-color-darkest-before:before, .add-game-development-border-color-darkest-after:after, .add-game-development-border-color-darkest-on-hover:hover, .add-game-development-border-color-darkest-to-child-on-hover:hover .add-game-development-border-color-darkest-on-parent-hover { border-color: #523c91 !important; }

.add-game-development-background-color, .add-game-development-background-color-before:before, .add-game-development-background-color-after:after, .add-game-development-background-color-on-hover:hover, .add-game-development-background-color-to-child-on-hover:hover .add-game-development-background-color-on-parent-hover { background-color: #856fc4 !important; }

.add-game-development-background-color-light, .add-game-development-background-color-light-before:before, .add-game-development-background-color-light-after:after, .add-game-development-background-color-light-on-hover:hover, .add-game-development-background-color-light-to-child-on-hover:hover .add-game-development-background-color-light-on-parent-hover { background-color: #9481cb !important; }

.add-game-development-background-color-lighter, .add-game-development-background-color-lighter-before:before, .add-game-development-background-color-lighter-after:after, .add-game-development-background-color-lighter-on-hover:hover, .add-game-development-background-color-lighter-to-child-on-hover:hover .add-game-development-background-color-lighter-on-parent-hover { background-color: #a493d3 !important; }

.add-game-development-background-color-lightest, .add-game-development-background-color-lightest-before:before, .add-game-development-background-color-lightest-after:after, .add-game-development-background-color-lightest-on-hover:hover, .add-game-development-background-color-lightest-to-child-on-hover:hover .add-game-development-background-color-lightest-on-parent-hover { background-color: #c2b7e2 !important; }

.add-game-development-background-color-dark, .add-game-development-background-color-dark-before:before, .add-game-development-background-color-dark-after:after, .add-game-development-background-color-dark-on-hover:hover, .add-game-development-background-color-dark-to-child-on-hover:hover .add-game-development-background-color-dark-on-parent-hover { background-color: #765dbd !important; }

.add-game-development-background-color-darker, .add-game-development-background-color-darker-before:before, .add-game-development-background-color-darker-after:after, .add-game-development-background-color-darker-on-hover:hover, .add-game-development-background-color-darker-to-child-on-hover:hover .add-game-development-background-color-darker-on-parent-hover { background-color: #664bb5 !important; }

.add-game-development-background-color-darkest, .add-game-development-background-color-darkest-before:before, .add-game-development-background-color-darkest-after:after, .add-game-development-background-color-darkest-on-hover:hover, .add-game-development-background-color-darkest-to-child-on-hover:hover .add-game-development-background-color-darkest-on-parent-hover { background-color: #523c91 !important; }

.add-treehouse-resources-fill, .add-treehouse-resources-fill-before:before, .add-treehouse-resources-fill-after:after, .add-treehouse-resources-fill-on-hover:hover, .add-treehouse-resources-fill-to-child-on-hover:hover .add-treehouse-resources-fill-on-parent-hover { fill: #5fcf80 !important; }

.add-treehouse-resources-fill-light, .add-treehouse-resources-fill-light-before:before, .add-treehouse-resources-fill-light-after:after, .add-treehouse-resources-fill-light-on-hover:hover, .add-treehouse-resources-fill-light-to-child-on-hover:hover .add-treehouse-resources-fill-light-on-parent-hover { fill: #73d590 !important; }

.add-treehouse-resources-fill-lighter, .add-treehouse-resources-fill-lighter-before:before, .add-treehouse-resources-fill-lighter-after:after, .add-treehouse-resources-fill-lighter-on-hover:hover, .add-treehouse-resources-fill-lighter-to-child-on-hover:hover .add-treehouse-resources-fill-lighter-on-parent-hover { fill: #86db9f !important; }

.add-treehouse-resources-fill-lightest, .add-treehouse-resources-fill-lightest-before:before, .add-treehouse-resources-fill-lightest-after:after, .add-treehouse-resources-fill-lightest-on-hover:hover, .add-treehouse-resources-fill-lightest-to-child-on-hover:hover .add-treehouse-resources-fill-lightest-on-parent-hover { fill: #ade7be !important; }

.add-treehouse-resources-fill-dark, .add-treehouse-resources-fill-dark-before:before, .add-treehouse-resources-fill-dark-after:after, .add-treehouse-resources-fill-dark-on-hover:hover, .add-treehouse-resources-fill-dark-to-child-on-hover:hover .add-treehouse-resources-fill-dark-on-parent-hover { fill: #4bc970 !important; }

.add-treehouse-resources-fill-darker, .add-treehouse-resources-fill-darker-before:before, .add-treehouse-resources-fill-darker-after:after, .add-treehouse-resources-fill-darker-on-hover:hover, .add-treehouse-resources-fill-darker-to-child-on-hover:hover .add-treehouse-resources-fill-darker-on-parent-hover { fill: #3ac162 !important; }

.add-treehouse-resources-fill-darkest, .add-treehouse-resources-fill-darkest-before:before, .add-treehouse-resources-fill-darkest-after:after, .add-treehouse-resources-fill-darkest-on-hover:hover, .add-treehouse-resources-fill-darkest-to-child-on-hover:hover .add-treehouse-resources-fill-darkest-on-parent-hover { fill: #2e9a4e !important; }

.add-treehouse-resources-stroke, .add-treehouse-resources-stroke-before:before, .add-treehouse-resources-stroke-after:after, .add-treehouse-resources-stroke-on-hover:hover, .add-treehouse-resources-stroke-to-child-on-hover:hover .add-treehouse-resources-stroke-on-parent-hover { stroke: #5fcf80 !important; }

.add-treehouse-resources-stroke-light, .add-treehouse-resources-stroke-light-before:before, .add-treehouse-resources-stroke-light-after:after, .add-treehouse-resources-stroke-light-on-hover:hover, .add-treehouse-resources-stroke-light-to-child-on-hover:hover .add-treehouse-resources-stroke-light-on-parent-hover { stroke: #73d590 !important; }

.add-treehouse-resources-stroke-lighter, .add-treehouse-resources-stroke-lighter-before:before, .add-treehouse-resources-stroke-lighter-after:after, .add-treehouse-resources-stroke-lighter-on-hover:hover, .add-treehouse-resources-stroke-lighter-to-child-on-hover:hover .add-treehouse-resources-stroke-lighter-on-parent-hover { stroke: #86db9f !important; }

.add-treehouse-resources-stroke-lightest, .add-treehouse-resources-stroke-lightest-before:before, .add-treehouse-resources-stroke-lightest-after:after, .add-treehouse-resources-stroke-lightest-on-hover:hover, .add-treehouse-resources-stroke-lightest-to-child-on-hover:hover .add-treehouse-resources-stroke-lightest-on-parent-hover { stroke: #ade7be !important; }

.add-treehouse-resources-stroke-dark, .add-treehouse-resources-stroke-dark-before:before, .add-treehouse-resources-stroke-dark-after:after, .add-treehouse-resources-stroke-dark-on-hover:hover, .add-treehouse-resources-stroke-dark-to-child-on-hover:hover .add-treehouse-resources-stroke-dark-on-parent-hover { stroke: #4bc970 !important; }

.add-treehouse-resources-stroke-darker, .add-treehouse-resources-stroke-darker-before:before, .add-treehouse-resources-stroke-darker-after:after, .add-treehouse-resources-stroke-darker-on-hover:hover, .add-treehouse-resources-stroke-darker-to-child-on-hover:hover .add-treehouse-resources-stroke-darker-on-parent-hover { stroke: #3ac162 !important; }

.add-treehouse-resources-stroke-darkest, .add-treehouse-resources-stroke-darkest-before:before, .add-treehouse-resources-stroke-darkest-after:after, .add-treehouse-resources-stroke-darkest-on-hover:hover, .add-treehouse-resources-stroke-darkest-to-child-on-hover:hover .add-treehouse-resources-stroke-darkest-on-parent-hover { stroke: #2e9a4e !important; }

.add-treehouse-resources-color, .add-treehouse-resources-color-before:before, .add-treehouse-resources-color-after:after, .add-treehouse-resources-color-on-hover:hover, .add-treehouse-resources-color-to-child-on-hover:hover .add-treehouse-resources-color-on-parent-hover { color: #5fcf80 !important; }

.add-treehouse-resources-color-light, .add-treehouse-resources-color-light-before:before, .add-treehouse-resources-color-light-after:after, .add-treehouse-resources-color-light-on-hover:hover, .add-treehouse-resources-color-light-to-child-on-hover:hover .add-treehouse-resources-color-light-on-parent-hover { color: #73d590 !important; }

.add-treehouse-resources-color-lighter, .add-treehouse-resources-color-lighter-before:before, .add-treehouse-resources-color-lighter-after:after, .add-treehouse-resources-color-lighter-on-hover:hover, .add-treehouse-resources-color-lighter-to-child-on-hover:hover .add-treehouse-resources-color-lighter-on-parent-hover { color: #86db9f !important; }

.add-treehouse-resources-color-lightest, .add-treehouse-resources-color-lightest-before:before, .add-treehouse-resources-color-lightest-after:after, .add-treehouse-resources-color-lightest-on-hover:hover, .add-treehouse-resources-color-lightest-to-child-on-hover:hover .add-treehouse-resources-color-lightest-on-parent-hover { color: #ade7be !important; }

.add-treehouse-resources-color-dark, .add-treehouse-resources-color-dark-before:before, .add-treehouse-resources-color-dark-after:after, .add-treehouse-resources-color-dark-on-hover:hover, .add-treehouse-resources-color-dark-to-child-on-hover:hover .add-treehouse-resources-color-dark-on-parent-hover { color: #4bc970 !important; }

.add-treehouse-resources-color-darker, .add-treehouse-resources-color-darker-before:before, .add-treehouse-resources-color-darker-after:after, .add-treehouse-resources-color-darker-on-hover:hover, .add-treehouse-resources-color-darker-to-child-on-hover:hover .add-treehouse-resources-color-darker-on-parent-hover { color: #3ac162 !important; }

.add-treehouse-resources-color-darkest, .add-treehouse-resources-color-darkest-before:before, .add-treehouse-resources-color-darkest-after:after, .add-treehouse-resources-color-darkest-on-hover:hover, .add-treehouse-resources-color-darkest-to-child-on-hover:hover .add-treehouse-resources-color-darkest-on-parent-hover { color: #2e9a4e !important; }

.add-treehouse-resources-border-color, .add-treehouse-resources-border-color-before:before, .add-treehouse-resources-border-color-after:after, .add-treehouse-resources-border-color-on-hover:hover, .add-treehouse-resources-border-color-to-child-on-hover:hover .add-treehouse-resources-border-color-on-parent-hover { border-color: #5fcf80 !important; }

.add-treehouse-resources-border-color-light, .add-treehouse-resources-border-color-light-before:before, .add-treehouse-resources-border-color-light-after:after, .add-treehouse-resources-border-color-light-on-hover:hover, .add-treehouse-resources-border-color-light-to-child-on-hover:hover .add-treehouse-resources-border-color-light-on-parent-hover { border-color: #73d590 !important; }

.add-treehouse-resources-border-color-lighter, .add-treehouse-resources-border-color-lighter-before:before, .add-treehouse-resources-border-color-lighter-after:after, .add-treehouse-resources-border-color-lighter-on-hover:hover, .add-treehouse-resources-border-color-lighter-to-child-on-hover:hover .add-treehouse-resources-border-color-lighter-on-parent-hover { border-color: #86db9f !important; }

.add-treehouse-resources-border-color-lightest, .add-treehouse-resources-border-color-lightest-before:before, .add-treehouse-resources-border-color-lightest-after:after, .add-treehouse-resources-border-color-lightest-on-hover:hover, .add-treehouse-resources-border-color-lightest-to-child-on-hover:hover .add-treehouse-resources-border-color-lightest-on-parent-hover { border-color: #ade7be !important; }

.add-treehouse-resources-border-color-dark, .add-treehouse-resources-border-color-dark-before:before, .add-treehouse-resources-border-color-dark-after:after, .add-treehouse-resources-border-color-dark-on-hover:hover, .add-treehouse-resources-border-color-dark-to-child-on-hover:hover .add-treehouse-resources-border-color-dark-on-parent-hover { border-color: #4bc970 !important; }

.add-treehouse-resources-border-color-darker, .add-treehouse-resources-border-color-darker-before:before, .add-treehouse-resources-border-color-darker-after:after, .add-treehouse-resources-border-color-darker-on-hover:hover, .add-treehouse-resources-border-color-darker-to-child-on-hover:hover .add-treehouse-resources-border-color-darker-on-parent-hover { border-color: #3ac162 !important; }

.add-treehouse-resources-border-color-darkest, .add-treehouse-resources-border-color-darkest-before:before, .add-treehouse-resources-border-color-darkest-after:after, .add-treehouse-resources-border-color-darkest-on-hover:hover, .add-treehouse-resources-border-color-darkest-to-child-on-hover:hover .add-treehouse-resources-border-color-darkest-on-parent-hover { border-color: #2e9a4e !important; }

.add-treehouse-resources-background-color, .add-treehouse-resources-background-color-before:before, .add-treehouse-resources-background-color-after:after, .add-treehouse-resources-background-color-on-hover:hover, .add-treehouse-resources-background-color-to-child-on-hover:hover .add-treehouse-resources-background-color-on-parent-hover { background-color: #5fcf80 !important; }

.add-treehouse-resources-background-color-light, .add-treehouse-resources-background-color-light-before:before, .add-treehouse-resources-background-color-light-after:after, .add-treehouse-resources-background-color-light-on-hover:hover, .add-treehouse-resources-background-color-light-to-child-on-hover:hover .add-treehouse-resources-background-color-light-on-parent-hover { background-color: #73d590 !important; }

.add-treehouse-resources-background-color-lighter, .add-treehouse-resources-background-color-lighter-before:before, .add-treehouse-resources-background-color-lighter-after:after, .add-treehouse-resources-background-color-lighter-on-hover:hover, .add-treehouse-resources-background-color-lighter-to-child-on-hover:hover .add-treehouse-resources-background-color-lighter-on-parent-hover { background-color: #86db9f !important; }

.add-treehouse-resources-background-color-lightest, .add-treehouse-resources-background-color-lightest-before:before, .add-treehouse-resources-background-color-lightest-after:after, .add-treehouse-resources-background-color-lightest-on-hover:hover, .add-treehouse-resources-background-color-lightest-to-child-on-hover:hover .add-treehouse-resources-background-color-lightest-on-parent-hover { background-color: #ade7be !important; }

.add-treehouse-resources-background-color-dark, .add-treehouse-resources-background-color-dark-before:before, .add-treehouse-resources-background-color-dark-after:after, .add-treehouse-resources-background-color-dark-on-hover:hover, .add-treehouse-resources-background-color-dark-to-child-on-hover:hover .add-treehouse-resources-background-color-dark-on-parent-hover { background-color: #4bc970 !important; }

.add-treehouse-resources-background-color-darker, .add-treehouse-resources-background-color-darker-before:before, .add-treehouse-resources-background-color-darker-after:after, .add-treehouse-resources-background-color-darker-on-hover:hover, .add-treehouse-resources-background-color-darker-to-child-on-hover:hover .add-treehouse-resources-background-color-darker-on-parent-hover { background-color: #3ac162 !important; }

.add-treehouse-resources-background-color-darkest, .add-treehouse-resources-background-color-darkest-before:before, .add-treehouse-resources-background-color-darkest-after:after, .add-treehouse-resources-background-color-darkest-on-hover:hover, .add-treehouse-resources-background-color-darkest-to-child-on-hover:hover .add-treehouse-resources-background-color-darkest-on-parent-hover { background-color: #2e9a4e !important; }

.add-coding-for-kids-fill, .add-coding-for-kids-fill-before:before, .add-coding-for-kids-fill-after:after, .add-coding-for-kids-fill-on-hover:hover, .add-coding-for-kids-fill-to-child-on-hover:hover .add-coding-for-kids-fill-on-parent-hover { fill: #F36C27 !important; }

.add-coding-for-kids-fill-light, .add-coding-for-kids-fill-light-before:before, .add-coding-for-kids-fill-light-after:after, .add-coding-for-kids-fill-light-on-hover:hover, .add-coding-for-kids-fill-light-to-child-on-hover:hover .add-coding-for-kids-fill-light-on-parent-hover { fill: #f47c3f !important; }

.add-coding-for-kids-fill-lighter, .add-coding-for-kids-fill-lighter-before:before, .add-coding-for-kids-fill-lighter-after:after, .add-coding-for-kids-fill-lighter-on-hover:hover, .add-coding-for-kids-fill-lighter-to-child-on-hover:hover .add-coding-for-kids-fill-lighter-on-parent-hover { fill: #f68d57 !important; }

.add-coding-for-kids-fill-lightest, .add-coding-for-kids-fill-lightest-before:before, .add-coding-for-kids-fill-lightest-after:after, .add-coding-for-kids-fill-lightest-on-hover:hover, .add-coding-for-kids-fill-lightest-to-child-on-hover:hover .add-coding-for-kids-fill-lightest-on-parent-hover { fill: #f8ae88 !important; }

.add-coding-for-kids-fill-dark, .add-coding-for-kids-fill-dark-before:before, .add-coding-for-kids-fill-dark-after:after, .add-coding-for-kids-fill-dark-on-hover:hover, .add-coding-for-kids-fill-dark-to-child-on-hover:hover .add-coding-for-kids-fill-dark-on-parent-hover { fill: #f25c0f !important; }

.add-coding-for-kids-fill-darker, .add-coding-for-kids-fill-darker-before:before, .add-coding-for-kids-fill-darker-after:after, .add-coding-for-kids-fill-darker-on-hover:hover, .add-coding-for-kids-fill-darker-to-child-on-hover:hover .add-coding-for-kids-fill-darker-on-parent-hover { fill: #db520c !important; }

.add-coding-for-kids-fill-darkest, .add-coding-for-kids-fill-darkest-before:before, .add-coding-for-kids-fill-darkest-after:after, .add-coding-for-kids-fill-darkest-on-hover:hover, .add-coding-for-kids-fill-darkest-to-child-on-hover:hover .add-coding-for-kids-fill-darkest-on-parent-hover { fill: #ab4009 !important; }

.add-coding-for-kids-stroke, .add-coding-for-kids-stroke-before:before, .add-coding-for-kids-stroke-after:after, .add-coding-for-kids-stroke-on-hover:hover, .add-coding-for-kids-stroke-to-child-on-hover:hover .add-coding-for-kids-stroke-on-parent-hover { stroke: #F36C27 !important; }

.add-coding-for-kids-stroke-light, .add-coding-for-kids-stroke-light-before:before, .add-coding-for-kids-stroke-light-after:after, .add-coding-for-kids-stroke-light-on-hover:hover, .add-coding-for-kids-stroke-light-to-child-on-hover:hover .add-coding-for-kids-stroke-light-on-parent-hover { stroke: #f47c3f !important; }

.add-coding-for-kids-stroke-lighter, .add-coding-for-kids-stroke-lighter-before:before, .add-coding-for-kids-stroke-lighter-after:after, .add-coding-for-kids-stroke-lighter-on-hover:hover, .add-coding-for-kids-stroke-lighter-to-child-on-hover:hover .add-coding-for-kids-stroke-lighter-on-parent-hover { stroke: #f68d57 !important; }

.add-coding-for-kids-stroke-lightest, .add-coding-for-kids-stroke-lightest-before:before, .add-coding-for-kids-stroke-lightest-after:after, .add-coding-for-kids-stroke-lightest-on-hover:hover, .add-coding-for-kids-stroke-lightest-to-child-on-hover:hover .add-coding-for-kids-stroke-lightest-on-parent-hover { stroke: #f8ae88 !important; }

.add-coding-for-kids-stroke-dark, .add-coding-for-kids-stroke-dark-before:before, .add-coding-for-kids-stroke-dark-after:after, .add-coding-for-kids-stroke-dark-on-hover:hover, .add-coding-for-kids-stroke-dark-to-child-on-hover:hover .add-coding-for-kids-stroke-dark-on-parent-hover { stroke: #f25c0f !important; }

.add-coding-for-kids-stroke-darker, .add-coding-for-kids-stroke-darker-before:before, .add-coding-for-kids-stroke-darker-after:after, .add-coding-for-kids-stroke-darker-on-hover:hover, .add-coding-for-kids-stroke-darker-to-child-on-hover:hover .add-coding-for-kids-stroke-darker-on-parent-hover { stroke: #db520c !important; }

.add-coding-for-kids-stroke-darkest, .add-coding-for-kids-stroke-darkest-before:before, .add-coding-for-kids-stroke-darkest-after:after, .add-coding-for-kids-stroke-darkest-on-hover:hover, .add-coding-for-kids-stroke-darkest-to-child-on-hover:hover .add-coding-for-kids-stroke-darkest-on-parent-hover { stroke: #ab4009 !important; }

.add-coding-for-kids-color, .add-coding-for-kids-color-before:before, .add-coding-for-kids-color-after:after, .add-coding-for-kids-color-on-hover:hover, .add-coding-for-kids-color-to-child-on-hover:hover .add-coding-for-kids-color-on-parent-hover { color: #F36C27 !important; }

.add-coding-for-kids-color-light, .add-coding-for-kids-color-light-before:before, .add-coding-for-kids-color-light-after:after, .add-coding-for-kids-color-light-on-hover:hover, .add-coding-for-kids-color-light-to-child-on-hover:hover .add-coding-for-kids-color-light-on-parent-hover { color: #f47c3f !important; }

.add-coding-for-kids-color-lighter, .add-coding-for-kids-color-lighter-before:before, .add-coding-for-kids-color-lighter-after:after, .add-coding-for-kids-color-lighter-on-hover:hover, .add-coding-for-kids-color-lighter-to-child-on-hover:hover .add-coding-for-kids-color-lighter-on-parent-hover { color: #f68d57 !important; }

.add-coding-for-kids-color-lightest, .add-coding-for-kids-color-lightest-before:before, .add-coding-for-kids-color-lightest-after:after, .add-coding-for-kids-color-lightest-on-hover:hover, .add-coding-for-kids-color-lightest-to-child-on-hover:hover .add-coding-for-kids-color-lightest-on-parent-hover { color: #f8ae88 !important; }

.add-coding-for-kids-color-dark, .add-coding-for-kids-color-dark-before:before, .add-coding-for-kids-color-dark-after:after, .add-coding-for-kids-color-dark-on-hover:hover, .add-coding-for-kids-color-dark-to-child-on-hover:hover .add-coding-for-kids-color-dark-on-parent-hover { color: #f25c0f !important; }

.add-coding-for-kids-color-darker, .add-coding-for-kids-color-darker-before:before, .add-coding-for-kids-color-darker-after:after, .add-coding-for-kids-color-darker-on-hover:hover, .add-coding-for-kids-color-darker-to-child-on-hover:hover .add-coding-for-kids-color-darker-on-parent-hover { color: #db520c !important; }

.add-coding-for-kids-color-darkest, .add-coding-for-kids-color-darkest-before:before, .add-coding-for-kids-color-darkest-after:after, .add-coding-for-kids-color-darkest-on-hover:hover, .add-coding-for-kids-color-darkest-to-child-on-hover:hover .add-coding-for-kids-color-darkest-on-parent-hover { color: #ab4009 !important; }

.add-coding-for-kids-border-color, .add-coding-for-kids-border-color-before:before, .add-coding-for-kids-border-color-after:after, .add-coding-for-kids-border-color-on-hover:hover, .add-coding-for-kids-border-color-to-child-on-hover:hover .add-coding-for-kids-border-color-on-parent-hover { border-color: #F36C27 !important; }

.add-coding-for-kids-border-color-light, .add-coding-for-kids-border-color-light-before:before, .add-coding-for-kids-border-color-light-after:after, .add-coding-for-kids-border-color-light-on-hover:hover, .add-coding-for-kids-border-color-light-to-child-on-hover:hover .add-coding-for-kids-border-color-light-on-parent-hover { border-color: #f47c3f !important; }

.add-coding-for-kids-border-color-lighter, .add-coding-for-kids-border-color-lighter-before:before, .add-coding-for-kids-border-color-lighter-after:after, .add-coding-for-kids-border-color-lighter-on-hover:hover, .add-coding-for-kids-border-color-lighter-to-child-on-hover:hover .add-coding-for-kids-border-color-lighter-on-parent-hover { border-color: #f68d57 !important; }

.add-coding-for-kids-border-color-lightest, .add-coding-for-kids-border-color-lightest-before:before, .add-coding-for-kids-border-color-lightest-after:after, .add-coding-for-kids-border-color-lightest-on-hover:hover, .add-coding-for-kids-border-color-lightest-to-child-on-hover:hover .add-coding-for-kids-border-color-lightest-on-parent-hover { border-color: #f8ae88 !important; }

.add-coding-for-kids-border-color-dark, .add-coding-for-kids-border-color-dark-before:before, .add-coding-for-kids-border-color-dark-after:after, .add-coding-for-kids-border-color-dark-on-hover:hover, .add-coding-for-kids-border-color-dark-to-child-on-hover:hover .add-coding-for-kids-border-color-dark-on-parent-hover { border-color: #f25c0f !important; }

.add-coding-for-kids-border-color-darker, .add-coding-for-kids-border-color-darker-before:before, .add-coding-for-kids-border-color-darker-after:after, .add-coding-for-kids-border-color-darker-on-hover:hover, .add-coding-for-kids-border-color-darker-to-child-on-hover:hover .add-coding-for-kids-border-color-darker-on-parent-hover { border-color: #db520c !important; }

.add-coding-for-kids-border-color-darkest, .add-coding-for-kids-border-color-darkest-before:before, .add-coding-for-kids-border-color-darkest-after:after, .add-coding-for-kids-border-color-darkest-on-hover:hover, .add-coding-for-kids-border-color-darkest-to-child-on-hover:hover .add-coding-for-kids-border-color-darkest-on-parent-hover { border-color: #ab4009 !important; }

.add-coding-for-kids-background-color, .add-coding-for-kids-background-color-before:before, .add-coding-for-kids-background-color-after:after, .add-coding-for-kids-background-color-on-hover:hover, .add-coding-for-kids-background-color-to-child-on-hover:hover .add-coding-for-kids-background-color-on-parent-hover { background-color: #F36C27 !important; }

.add-coding-for-kids-background-color-light, .add-coding-for-kids-background-color-light-before:before, .add-coding-for-kids-background-color-light-after:after, .add-coding-for-kids-background-color-light-on-hover:hover, .add-coding-for-kids-background-color-light-to-child-on-hover:hover .add-coding-for-kids-background-color-light-on-parent-hover { background-color: #f47c3f !important; }

.add-coding-for-kids-background-color-lighter, .add-coding-for-kids-background-color-lighter-before:before, .add-coding-for-kids-background-color-lighter-after:after, .add-coding-for-kids-background-color-lighter-on-hover:hover, .add-coding-for-kids-background-color-lighter-to-child-on-hover:hover .add-coding-for-kids-background-color-lighter-on-parent-hover { background-color: #f68d57 !important; }

.add-coding-for-kids-background-color-lightest, .add-coding-for-kids-background-color-lightest-before:before, .add-coding-for-kids-background-color-lightest-after:after, .add-coding-for-kids-background-color-lightest-on-hover:hover, .add-coding-for-kids-background-color-lightest-to-child-on-hover:hover .add-coding-for-kids-background-color-lightest-on-parent-hover { background-color: #f8ae88 !important; }

.add-coding-for-kids-background-color-dark, .add-coding-for-kids-background-color-dark-before:before, .add-coding-for-kids-background-color-dark-after:after, .add-coding-for-kids-background-color-dark-on-hover:hover, .add-coding-for-kids-background-color-dark-to-child-on-hover:hover .add-coding-for-kids-background-color-dark-on-parent-hover { background-color: #f25c0f !important; }

.add-coding-for-kids-background-color-darker, .add-coding-for-kids-background-color-darker-before:before, .add-coding-for-kids-background-color-darker-after:after, .add-coding-for-kids-background-color-darker-on-hover:hover, .add-coding-for-kids-background-color-darker-to-child-on-hover:hover .add-coding-for-kids-background-color-darker-on-parent-hover { background-color: #db520c !important; }

.add-coding-for-kids-background-color-darkest, .add-coding-for-kids-background-color-darkest-before:before, .add-coding-for-kids-background-color-darkest-after:after, .add-coding-for-kids-background-color-darkest-on-hover:hover, .add-coding-for-kids-background-color-darkest-to-child-on-hover:hover .add-coding-for-kids-background-color-darkest-on-parent-hover { background-color: #ab4009 !important; }
h1, h2, h3, h4, h5, h6 { color: #384047; display: block; font-weight: 700; margin: 0; text-rendering: optimizeLegibility; }

h1, .h1 { font-size: 36px; }

h2, .h2 { font-size: 28px; }

h3, .h3 { font-size: 20px; }

h4, .h4 { font-size: 18px; }

h5, .h5 { font-size: 16px; }

h6, .h6 { font-size: 14px; }

.secondary-heading { position: relative; padding-bottom: 15px; }

.secondary-heading:before, .secondary-heading:after { content: " "; display: table; }

.secondary-heading:after { clear: both; }

.secondary-heading h1, .secondary-heading h2, .secondary-heading h3 { font-size: 18px; color: #1a2126; font-weight: 700; line-height: 1.3; }

@media screen and (max-width: 969px) { .secondary-heading h1, .secondary-heading h2, .secondary-heading h3 { font-size: 16px; } }

.secondary-heading h1 span, .secondary-heading h2 span, .secondary-heading h3 span { font-weight: 400; font-size: 12.5px; color: #c0c7cd; }

.secondary-heading h1 { color: #384047; }

.secondary-heading h3 { font-size: 16px; }

.secondary-heading p { font-size: 14px; margin: 5px 0 0 0; line-height: 1.6; color: #1a2126; }

.secondary-heading p a { color: #3f8abf; font-weight: 700; transition: color .3s ease; }

.secondary-heading p a:hover { color: #326e99; }

.secondary-heading p strong { font-weight: 700; color: #1a2126; margin: 0; display: inline; font-size: 1em; }

.box-heading { border-bottom: 1px solid #e8ebed; padding: 0 0 15px; margin: 0 0 15px; }

hr { height: 0; margin: 30px 0; border-top: 1px solid #f0f2f4; }

hr.hr-on-gray { border-top: 1px solid #d4d9dd !important; }

hr.hr-no-mt { margin-top: 0px; }

p { font-size: 14px; line-height: 1.5; margin-bottom: 15px; }

strong { font-weight: 700; }

.lead { font-size: 16px; line-height: 1.5; margin-bottom: 30px; }

code { font-family: monospace; font-weight: 700; }

address { font-size: 12px; }

a { color: #326e99; font-weight: 500; cursor: pointer; transition: color 300ms 0s ease; }

a.icon-on-left, a.icon-on-right { font-weight: 700; }

a.icon-on-left svg, a.icon-on-right svg { vertical-align: middle; position: relative; top: -1px; fill: #3f8abf; }

a.icon-on-left svg { margin: 0 5px 0 0; }

a.icon-on-right svg { margin: 0 0 0 5px; }

a.icon-on-left:hover svg, a.icon-on-left:focus svg, a.icon-on-right:hover svg, a.icon-on-right:focus svg { fill: #303853; }

a:hover { color: #303853; }

ul, ol { font-size: 14px; }

ul.no-bullets, ol.no-bullets { list-style-type: none; }

ul.no-bullets ul, ol.no-bullets ul { list-style-type: none; }

.generic-list li { list-style-type: none; }

.check-list li, .plus-list li { list-style-type: none; padding: 7px 0 7px 24px; font-size: 14px; line-height: 1.5; }

.check-list li:before, .plus-list li:before { content: ""; width: 14px; height: 12px; background: url("/assets/icons/icon-global-863d50621b14046616519056916ec67ac8a680fcb1c994a27ec6c1a92e9569d5.svg") no-repeat -155px -61px; float: left; margin: 5px 0 0 -24px; }

.plus-list li:before { background: url("/assets/icons/icon-add-list-986921228aa108a7ef0c05be17775f0079a59af527c42f6df69955d9199708ce.svg") no-repeat top left; height: 14px; background-size: 14px; margin-left: -25px; margin-top: 3px; }

dl { margin-top: 15px; }

dt, dd { font-size: 14px; margin-bottom: 10px; line-height: 1.5; }

dt { font-weight: 700; }

.align-left { text-align: left; }

.align-right { text-align: right; }

.align-center { text-align: center; }

@media (max-width: 767px) { .align-left-mobile { text-align: left !important; } }

.text-centered { text-align: center; }
.button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, width 0.3s ease, opacity 0.3s ease; border-radius: 4px; cursor: pointer; display: inline-block; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; position: relative; margin: 0 10px 0 0; outline: none; text-align: center; text-decoration: none; vertical-align: baseline; white-space: nowrap; background-color: transparent; border: solid 2px #35A961; }

.button { font-size: 14px; height: 40px; line-height: 36px; padding: 0 15px; }

.button.square { padding: 0; width: 40px; }

.button.square { padding: 0; width: 40px; }

.button:not(.has-topic-color) { color: #35A961; }

.button svg:not(.has-topic-fill) { fill: #35A961; }

.button:hover:not(.disabled), .button:focus, .uploader.hover:not(.disabled) .button { border-color: #236f40; }

.button:hover:not(.disabled):not(.has-topic-color), .button:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button:not(.has-topic-color) { color: #236f40; }

.button:hover:not(.disabled) svg:not(.has-topic-fill), .button:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button svg:not(.has-topic-fill) { fill: #236f40; }

.button:last-child { margin-right: 0; }

.ff .button:not(.button) { line-height: 1; }

.topic-ai .button { border-color: #733A88; color: #733A88; }

.button.topic-ai { border-color: #733A88; color: #733A88; }

.topic-back-end .button { border-color: #008297; color: #008297; }

.button.topic-back-end { border-color: #008297; color: #008297; }

.topic-data .button { border-color: #9F4B84; color: #9F4B84; }

.button.topic-data { border-color: #9F4B84; color: #9F4B84; }

.topic-design .button { border-color: #4a4290; color: #4a4290; }

.button.topic-design { border-color: #4a4290; color: #4a4290; }

.topic-experimental .button { border-color: #733a88; color: #733a88; }

.button.topic-experimental { border-color: #733a88; color: #733a88; }

.topic-front-end .button { border-color: #3659a2; color: #3659a2; }

.button.topic-front-end { border-color: #3659a2; color: #3659a2; }

.topic-fundamentals .button { border-color: #9b3b5a; color: #9b3b5a; }

.button.topic-fundamentals { border-color: #9b3b5a; color: #9b3b5a; }

.topic-mobile .button { border-color: #30826C; color: #30826C; }

.button.topic-mobile { border-color: #30826C; color: #30826C; }

.topic-internal .button { border-color: #55616c; color: #55616c; }

.button.topic-internal { border-color: #55616c; color: #55616c; }

.topic-foundations .button { border-color: #004e61; color: #004e61; }

.button.topic-foundations { border-color: #004e61; color: #004e61; }

.topic-undefined .button { border-color: #55616c; color: #55616c; }

.button.topic-undefined { border-color: #55616c; color: #55616c; }

.topic-college-credit .button { border-color: #3887c8; color: #3887c8; }

.button.topic-college-credit { border-color: #3887c8; color: #3887c8; }

.topic-no-code .button { border-color: #31AF7F; color: #31AF7F; }

.button.topic-no-code { border-color: #31AF7F; color: #31AF7F; }

.topic-security .button { border-color: #409BE9; color: #409BE9; }

.button.topic-security { border-color: #409BE9; color: #409BE9; }

.topic-game-development .button { border-color: #856fc4; color: #856fc4; }

.button.topic-game-development { border-color: #856fc4; color: #856fc4; }

.topic-treehouse-resources .button { border-color: #5fcf80; color: #5fcf80; }

.button.topic-treehouse-resources { border-color: #5fcf80; color: #5fcf80; }

.topic-coding-for-kids .button { border-color: #F36C27; color: #F36C27; }

.button.topic-coding-for-kids { border-color: #F36C27; color: #F36C27; }

.topic-ai .button svg { fill: #733A88; }

.button.topic-ai svg { fill: #733A88; }

.topic-back-end .button svg { fill: #008297; }

.button.topic-back-end svg { fill: #008297; }

.topic-data .button svg { fill: #9F4B84; }

.button.topic-data svg { fill: #9F4B84; }

.topic-design .button svg { fill: #4a4290; }

.button.topic-design svg { fill: #4a4290; }

.topic-experimental .button svg { fill: #733a88; }

.button.topic-experimental svg { fill: #733a88; }

.topic-front-end .button svg { fill: #3659a2; }

.button.topic-front-end svg { fill: #3659a2; }

.topic-fundamentals .button svg { fill: #9b3b5a; }

.button.topic-fundamentals svg { fill: #9b3b5a; }

.topic-mobile .button svg { fill: #30826C; }

.button.topic-mobile svg { fill: #30826C; }

.topic-internal .button svg { fill: #55616c; }

.button.topic-internal svg { fill: #55616c; }

.topic-foundations .button svg { fill: #004e61; }

.button.topic-foundations svg { fill: #004e61; }

.topic-undefined .button svg { fill: #55616c; }

.button.topic-undefined svg { fill: #55616c; }

.topic-college-credit .button svg { fill: #3887c8; }

.button.topic-college-credit svg { fill: #3887c8; }

.topic-no-code .button svg { fill: #31AF7F; }

.button.topic-no-code svg { fill: #31AF7F; }

.topic-security .button svg { fill: #409BE9; }

.button.topic-security svg { fill: #409BE9; }

.topic-game-development .button svg { fill: #856fc4; }

.button.topic-game-development svg { fill: #856fc4; }

.topic-treehouse-resources .button svg { fill: #5fcf80; }

.button.topic-treehouse-resources svg { fill: #5fcf80; }

.topic-coding-for-kids .button svg { fill: #F36C27; }

.button.topic-coding-for-kids svg { fill: #F36C27; }

.topic-ai .button:hover:not(.disabled), .topic-ai .button:focus { border-color: #552b64; color: #552b64; }

.button:hover:not(.disabled).topic-ai, .button:focus.topic-ai { border-color: #552b64; color: #552b64; }

.topic-back-end .button:hover:not(.disabled), .topic-back-end .button:focus { border-color: #005664; color: #005664; }

.button:hover:not(.disabled).topic-back-end, .button:focus.topic-back-end { border-color: #005664; color: #005664; }

.topic-data .button:hover:not(.disabled), .topic-data .button:focus { border-color: #7c3b67; color: #7c3b67; }

.button:hover:not(.disabled).topic-data, .button:focus.topic-data { border-color: #7c3b67; color: #7c3b67; }

.topic-design .button:hover:not(.disabled), .topic-design .button:focus { border-color: #38326d; color: #38326d; }

.button:hover:not(.disabled).topic-design, .button:focus.topic-design { border-color: #38326d; color: #38326d; }

.topic-experimental .button:hover:not(.disabled), .topic-experimental .button:focus { border-color: #552b64; color: #552b64; }

.button:hover:not(.disabled).topic-experimental, .button:focus.topic-experimental { border-color: #552b64; color: #552b64; }

.topic-front-end .button:hover:not(.disabled), .topic-front-end .button:focus { border-color: #29447c; color: #29447c; }

.button:hover:not(.disabled).topic-front-end, .button:focus.topic-front-end { border-color: #29447c; color: #29447c; }

.topic-fundamentals .button:hover:not(.disabled), .topic-fundamentals .button:focus { border-color: #762d45; color: #762d45; }

.button:hover:not(.disabled).topic-fundamentals, .button:focus.topic-fundamentals { border-color: #762d45; color: #762d45; }

.topic-mobile .button:hover:not(.disabled), .topic-mobile .button:focus { border-color: #225d4d; color: #225d4d; }

.button:hover:not(.disabled).topic-mobile, .button:focus.topic-mobile { border-color: #225d4d; color: #225d4d; }

.topic-internal .button:hover:not(.disabled), .topic-internal .button:focus { border-color: #3f474f; color: #3f474f; }

.button:hover:not(.disabled).topic-internal, .button:focus.topic-internal { border-color: #3f474f; color: #3f474f; }

.topic-foundations .button:hover:not(.disabled), .topic-foundations .button:focus { border-color: #00252e; color: #00252e; }

.button:hover:not(.disabled).topic-foundations, .button:focus.topic-foundations { border-color: #00252e; color: #00252e; }

.topic-undefined .button:hover:not(.disabled), .topic-undefined .button:focus { border-color: #3f474f; color: #3f474f; }

.button:hover:not(.disabled).topic-undefined, .button:focus.topic-undefined { border-color: #3f474f; color: #3f474f; }

.topic-college-credit .button:hover:not(.disabled), .topic-college-credit .button:focus { border-color: #2c6ca1; color: #2c6ca1; }

.button:hover:not(.disabled).topic-college-credit, .button:focus.topic-college-credit { border-color: #2c6ca1; color: #2c6ca1; }

.topic-no-code .button:hover:not(.disabled), .topic-no-code .button:focus { border-color: #268762; color: #268762; }

.button:hover:not(.disabled).topic-no-code, .button:focus.topic-no-code { border-color: #268762; color: #268762; }

.topic-security .button:hover:not(.disabled), .topic-security .button:focus { border-color: #1983dd; color: #1983dd; }

.button:hover:not(.disabled).topic-security, .button:focus.topic-security { border-color: #1983dd; color: #1983dd; }

.topic-game-development .button:hover:not(.disabled), .topic-game-development .button:focus { border-color: #664bb5; color: #664bb5; }

.button:hover:not(.disabled).topic-game-development, .button:focus.topic-game-development { border-color: #664bb5; color: #664bb5; }

.topic-treehouse-resources .button:hover:not(.disabled), .topic-treehouse-resources .button:focus { border-color: #3ac162; color: #3ac162; }

.button:hover:not(.disabled).topic-treehouse-resources, .button:focus.topic-treehouse-resources { border-color: #3ac162; color: #3ac162; }

.topic-coding-for-kids .button:hover:not(.disabled), .topic-coding-for-kids .button:focus { border-color: #db520c; color: #db520c; }

.button:hover:not(.disabled).topic-coding-for-kids, .button:focus.topic-coding-for-kids { border-color: #db520c; color: #db520c; }

.topic-ai .button:hover:not(.disabled) svg, .topic-ai .button:focus svg { fill: #552b64; }

.button:hover:not(.disabled).topic-ai svg, .button:focus.topic-ai svg { fill: #552b64; }

.topic-back-end .button:hover:not(.disabled) svg, .topic-back-end .button:focus svg { fill: #005664; }

.button:hover:not(.disabled).topic-back-end svg, .button:focus.topic-back-end svg { fill: #005664; }

.topic-data .button:hover:not(.disabled) svg, .topic-data .button:focus svg { fill: #7c3b67; }

.button:hover:not(.disabled).topic-data svg, .button:focus.topic-data svg { fill: #7c3b67; }

.topic-design .button:hover:not(.disabled) svg, .topic-design .button:focus svg { fill: #38326d; }

.button:hover:not(.disabled).topic-design svg, .button:focus.topic-design svg { fill: #38326d; }

.topic-experimental .button:hover:not(.disabled) svg, .topic-experimental .button:focus svg { fill: #552b64; }

.button:hover:not(.disabled).topic-experimental svg, .button:focus.topic-experimental svg { fill: #552b64; }

.topic-front-end .button:hover:not(.disabled) svg, .topic-front-end .button:focus svg { fill: #29447c; }

.button:hover:not(.disabled).topic-front-end svg, .button:focus.topic-front-end svg { fill: #29447c; }

.topic-fundamentals .button:hover:not(.disabled) svg, .topic-fundamentals .button:focus svg { fill: #762d45; }

.button:hover:not(.disabled).topic-fundamentals svg, .button:focus.topic-fundamentals svg { fill: #762d45; }

.topic-mobile .button:hover:not(.disabled) svg, .topic-mobile .button:focus svg { fill: #225d4d; }

.button:hover:not(.disabled).topic-mobile svg, .button:focus.topic-mobile svg { fill: #225d4d; }

.topic-internal .button:hover:not(.disabled) svg, .topic-internal .button:focus svg { fill: #3f474f; }

.button:hover:not(.disabled).topic-internal svg, .button:focus.topic-internal svg { fill: #3f474f; }

.topic-foundations .button:hover:not(.disabled) svg, .topic-foundations .button:focus svg { fill: #00252e; }

.button:hover:not(.disabled).topic-foundations svg, .button:focus.topic-foundations svg { fill: #00252e; }

.topic-undefined .button:hover:not(.disabled) svg, .topic-undefined .button:focus svg { fill: #3f474f; }

.button:hover:not(.disabled).topic-undefined svg, .button:focus.topic-undefined svg { fill: #3f474f; }

.topic-college-credit .button:hover:not(.disabled) svg, .topic-college-credit .button:focus svg { fill: #2c6ca1; }

.button:hover:not(.disabled).topic-college-credit svg, .button:focus.topic-college-credit svg { fill: #2c6ca1; }

.topic-no-code .button:hover:not(.disabled) svg, .topic-no-code .button:focus svg { fill: #268762; }

.button:hover:not(.disabled).topic-no-code svg, .button:focus.topic-no-code svg { fill: #268762; }

.topic-security .button:hover:not(.disabled) svg, .topic-security .button:focus svg { fill: #1983dd; }

.button:hover:not(.disabled).topic-security svg, .button:focus.topic-security svg { fill: #1983dd; }

.topic-game-development .button:hover:not(.disabled) svg, .topic-game-development .button:focus svg { fill: #664bb5; }

.button:hover:not(.disabled).topic-game-development svg, .button:focus.topic-game-development svg { fill: #664bb5; }

.topic-treehouse-resources .button:hover:not(.disabled) svg, .topic-treehouse-resources .button:focus svg { fill: #3ac162; }

.button:hover:not(.disabled).topic-treehouse-resources svg, .button:focus.topic-treehouse-resources svg { fill: #3ac162; }

.topic-coding-for-kids .button:hover:not(.disabled) svg, .topic-coding-for-kids .button:focus svg { fill: #db520c; }

.button:hover:not(.disabled).topic-coding-for-kids svg, .button:focus.topic-coding-for-kids svg { fill: #db520c; }

.button.disabled, .button-disabled { background-color: transparent; border: solid 2px #e8ebed; cursor: default; }

.button.disabled:not(.has-topic-color), .button-disabled:not(.has-topic-color) { color: #2b363e; }

.button.disabled svg:not(.has-topic-fill), .button-disabled svg:not(.has-topic-fill) { fill: #2b363e; }

:not([class*="topic"]) .button.disabled, :not([class*="topic"]) .button-disabled { background-color: transparent; border: solid 2px #e8ebed; }

:not([class*="topic"]) .button.disabled:hover:not(.disabled), :not([class*="topic"]) .button.disabled:focus, .uploader.hover:not(.disabled) :not([class*="topic"]) .button.disabled, :not([class*="topic"]) .button-disabled:hover:not(.disabled), :not([class*="topic"]) .button-disabled:focus, .uploader.hover:not(.disabled) :not([class*="topic"]) .button-disabled { border-color: #e8ebed; }

:not([class*="topic"]) .button.disabled:hover:not(.disabled):not(.has-topic-color), :not([class*="topic"]) .button.disabled:focus:not(.has-topic-color), .uploader.hover:not(.disabled) :not([class*="topic"]) .button.disabled:not(.has-topic-color), :not([class*="topic"]) .button-disabled:hover:not(.disabled):not(.has-topic-color), :not([class*="topic"]) .button-disabled:focus:not(.has-topic-color), .uploader.hover:not(.disabled) :not([class*="topic"]) .button-disabled:not(.has-topic-color) { color: #2b363e; }

:not([class*="topic"]) .button.disabled:hover:not(.disabled) svg:not(.has-topic-fill), :not([class*="topic"]) .button.disabled:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) :not([class*="topic"]) .button.disabled svg:not(.has-topic-fill), :not([class*="topic"]) .button-disabled:hover:not(.disabled) svg:not(.has-topic-fill), :not([class*="topic"]) .button-disabled:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) :not([class*="topic"]) .button-disabled svg:not(.has-topic-fill) { fill: #2b363e; }

:not([class*="topic"]) .button.disabled:not(.has-topic-color), :not([class*="topic"]) .button-disabled:not(.has-topic-color) { color: #2b363e; }

:not([class*="topic"]) .button.disabled svg:not(.has-topic-fill), :not([class*="topic"]) .button-disabled svg:not(.has-topic-fill) { fill: #2b363e; }

[class*="topic"] .button.disabled, [class*="topic"] .button-disabled { background-color: transparent; border: solid 2px #e8ebed; opacity: 0.5; }

[class*="topic"] .button.disabled:hover:not(.disabled), [class*="topic"] .button.disabled:focus, .uploader.hover:not(.disabled) [class*="topic"] .button.disabled, [class*="topic"] .button-disabled:hover:not(.disabled), [class*="topic"] .button-disabled:focus, .uploader.hover:not(.disabled) [class*="topic"] .button-disabled { border-color: #e8ebed; }

[class*="topic"] .button.disabled:hover:not(.disabled):not(.has-topic-color), [class*="topic"] .button.disabled:focus:not(.has-topic-color), .uploader.hover:not(.disabled) [class*="topic"] .button.disabled:not(.has-topic-color), [class*="topic"] .button-disabled:hover:not(.disabled):not(.has-topic-color), [class*="topic"] .button-disabled:focus:not(.has-topic-color), .uploader.hover:not(.disabled) [class*="topic"] .button-disabled:not(.has-topic-color) { color: rgba(255, 255, 255, 0.5); }

[class*="topic"] .button.disabled:hover:not(.disabled) svg:not(.has-topic-fill), [class*="topic"] .button.disabled:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) [class*="topic"] .button.disabled svg:not(.has-topic-fill), [class*="topic"] .button-disabled:hover:not(.disabled) svg:not(.has-topic-fill), [class*="topic"] .button-disabled:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) [class*="topic"] .button-disabled svg:not(.has-topic-fill) { fill: rgba(255, 255, 255, 0.5); }

[class*="topic"] .button.disabled:not(.has-topic-color), [class*="topic"] .button-disabled:not(.has-topic-color) { color: rgba(255, 255, 255, 0.5); }

[class*="topic"] .button.disabled svg:not(.has-topic-fill), [class*="topic"] .button-disabled svg:not(.has-topic-fill) { fill: rgba(255, 255, 255, 0.5); }

.button.disabled { cursor: default; }

.button.button-blue, .button-button-blue { background-color: transparent; border: solid 2px #326e99; }

.button.button-blue:not(.has-topic-color), .button-button-blue:not(.has-topic-color) { color: #326e99; }

.button.button-blue svg:not(.has-topic-fill), .button-button-blue svg:not(.has-topic-fill) { fill: #326e99; }

.button.button-blue:hover:not(.disabled), .button.button-blue:focus, .uploader.hover:not(.disabled) .button.button-blue, .button-button-blue:hover:not(.disabled), .button-button-blue:focus, .uploader.hover:not(.disabled) .button-button-blue { border-color: #265372; }

.button.button-blue:hover:not(.disabled):not(.has-topic-color), .button.button-blue:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button.button-blue:not(.has-topic-color), .button-button-blue:hover:not(.disabled):not(.has-topic-color), .button-button-blue:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button-button-blue:not(.has-topic-color) { color: #265372; }

.button.button-blue:hover:not(.disabled) svg:not(.has-topic-fill), .button.button-blue:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button.button-blue svg:not(.has-topic-fill), .button-button-blue:hover:not(.disabled) svg:not(.has-topic-fill), .button-button-blue:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button-button-blue svg:not(.has-topic-fill) { fill: #265372; }

.button.primary, .button-primary { background-color: #35A961; border: solid 2px #35A961; }

.button.primary:not(.has-topic-color), .button-primary:not(.has-topic-color) { color: #fff; }

.button.primary svg:not(.has-topic-fill), .button-primary svg:not(.has-topic-fill) { fill: #fff; }

.button.primary:hover:not(.disabled), .button.primary:focus, .uploader.hover:not(.disabled) .button.primary, .button-primary:hover:not(.disabled), .button-primary:focus, .uploader.hover:not(.disabled) .button-primary { border-color: #29824b; background-color: #29824b; }

.button.primary:hover:not(.disabled):not(.has-topic-color), .button.primary:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button.primary:not(.has-topic-color), .button-primary:hover:not(.disabled):not(.has-topic-color), .button-primary:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button-primary:not(.has-topic-color) { color: #fff; }

.button.primary:hover:not(.disabled) svg:not(.has-topic-fill), .button.primary:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button.primary svg:not(.has-topic-fill), .button-primary:hover:not(.disabled) svg:not(.has-topic-fill), .button-primary:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button-primary svg:not(.has-topic-fill) { fill: #fff; }

.topic-ai .button.primary, .topic-ai .button-primary { background-color: #733A88; border-color: #733A88; }

.button.primary.topic-ai, .button-primary.topic-ai { background-color: #733A88; border-color: #733A88; }

.topic-back-end .button.primary, .topic-back-end .button-primary { background-color: #008297; border-color: #008297; }

.button.primary.topic-back-end, .button-primary.topic-back-end { background-color: #008297; border-color: #008297; }

.topic-data .button.primary, .topic-data .button-primary { background-color: #9F4B84; border-color: #9F4B84; }

.button.primary.topic-data, .button-primary.topic-data { background-color: #9F4B84; border-color: #9F4B84; }

.topic-design .button.primary, .topic-design .button-primary { background-color: #4a4290; border-color: #4a4290; }

.button.primary.topic-design, .button-primary.topic-design { background-color: #4a4290; border-color: #4a4290; }

.topic-experimental .button.primary, .topic-experimental .button-primary { background-color: #733a88; border-color: #733a88; }

.button.primary.topic-experimental, .button-primary.topic-experimental { background-color: #733a88; border-color: #733a88; }

.topic-front-end .button.primary, .topic-front-end .button-primary { background-color: #3659a2; border-color: #3659a2; }

.button.primary.topic-front-end, .button-primary.topic-front-end { background-color: #3659a2; border-color: #3659a2; }

.topic-fundamentals .button.primary, .topic-fundamentals .button-primary { background-color: #9b3b5a; border-color: #9b3b5a; }

.button.primary.topic-fundamentals, .button-primary.topic-fundamentals { background-color: #9b3b5a; border-color: #9b3b5a; }

.topic-mobile .button.primary, .topic-mobile .button-primary { background-color: #30826C; border-color: #30826C; }

.button.primary.topic-mobile, .button-primary.topic-mobile { background-color: #30826C; border-color: #30826C; }

.topic-internal .button.primary, .topic-internal .button-primary { background-color: #55616c; border-color: #55616c; }

.button.primary.topic-internal, .button-primary.topic-internal { background-color: #55616c; border-color: #55616c; }

.topic-foundations .button.primary, .topic-foundations .button-primary { background-color: #004e61; border-color: #004e61; }

.button.primary.topic-foundations, .button-primary.topic-foundations { background-color: #004e61; border-color: #004e61; }

.topic-undefined .button.primary, .topic-undefined .button-primary { background-color: #55616c; border-color: #55616c; }

.button.primary.topic-undefined, .button-primary.topic-undefined { background-color: #55616c; border-color: #55616c; }

.topic-college-credit .button.primary, .topic-college-credit .button-primary { background-color: #3887c8; border-color: #3887c8; }

.button.primary.topic-college-credit, .button-primary.topic-college-credit { background-color: #3887c8; border-color: #3887c8; }

.topic-no-code .button.primary, .topic-no-code .button-primary { background-color: #31AF7F; border-color: #31AF7F; }

.button.primary.topic-no-code, .button-primary.topic-no-code { background-color: #31AF7F; border-color: #31AF7F; }

.topic-security .button.primary, .topic-security .button-primary { background-color: #409BE9; border-color: #409BE9; }

.button.primary.topic-security, .button-primary.topic-security { background-color: #409BE9; border-color: #409BE9; }

.topic-game-development .button.primary, .topic-game-development .button-primary { background-color: #856fc4; border-color: #856fc4; }

.button.primary.topic-game-development, .button-primary.topic-game-development { background-color: #856fc4; border-color: #856fc4; }

.topic-treehouse-resources .button.primary, .topic-treehouse-resources .button-primary { background-color: #5fcf80; border-color: #5fcf80; }

.button.primary.topic-treehouse-resources, .button-primary.topic-treehouse-resources { background-color: #5fcf80; border-color: #5fcf80; }

.topic-coding-for-kids .button.primary, .topic-coding-for-kids .button-primary { background-color: #F36C27; border-color: #F36C27; }

.button.primary.topic-coding-for-kids, .button-primary.topic-coding-for-kids { background-color: #F36C27; border-color: #F36C27; }

.topic-ai .button.primary:hover:not(.disabled), .topic-ai .button.primary:focus, .topic-ai .button-primary:hover:not(.disabled), .topic-ai .button-primary:focus { background-color: #552b64; border-color: #552b64; }

.button.primary:hover:not(.disabled).topic-ai, .button.primary:focus.topic-ai, .button-primary:hover:not(.disabled).topic-ai, .button-primary:focus.topic-ai { background-color: #552b64; border-color: #552b64; }

.topic-back-end .button.primary:hover:not(.disabled), .topic-back-end .button.primary:focus, .topic-back-end .button-primary:hover:not(.disabled), .topic-back-end .button-primary:focus { background-color: #005664; border-color: #005664; }

.button.primary:hover:not(.disabled).topic-back-end, .button.primary:focus.topic-back-end, .button-primary:hover:not(.disabled).topic-back-end, .button-primary:focus.topic-back-end { background-color: #005664; border-color: #005664; }

.topic-data .button.primary:hover:not(.disabled), .topic-data .button.primary:focus, .topic-data .button-primary:hover:not(.disabled), .topic-data .button-primary:focus { background-color: #7c3b67; border-color: #7c3b67; }

.button.primary:hover:not(.disabled).topic-data, .button.primary:focus.topic-data, .button-primary:hover:not(.disabled).topic-data, .button-primary:focus.topic-data { background-color: #7c3b67; border-color: #7c3b67; }

.topic-design .button.primary:hover:not(.disabled), .topic-design .button.primary:focus, .topic-design .button-primary:hover:not(.disabled), .topic-design .button-primary:focus { background-color: #38326d; border-color: #38326d; }

.button.primary:hover:not(.disabled).topic-design, .button.primary:focus.topic-design, .button-primary:hover:not(.disabled).topic-design, .button-primary:focus.topic-design { background-color: #38326d; border-color: #38326d; }

.topic-experimental .button.primary:hover:not(.disabled), .topic-experimental .button.primary:focus, .topic-experimental .button-primary:hover:not(.disabled), .topic-experimental .button-primary:focus { background-color: #552b64; border-color: #552b64; }

.button.primary:hover:not(.disabled).topic-experimental, .button.primary:focus.topic-experimental, .button-primary:hover:not(.disabled).topic-experimental, .button-primary:focus.topic-experimental { background-color: #552b64; border-color: #552b64; }

.topic-front-end .button.primary:hover:not(.disabled), .topic-front-end .button.primary:focus, .topic-front-end .button-primary:hover:not(.disabled), .topic-front-end .button-primary:focus { background-color: #29447c; border-color: #29447c; }

.button.primary:hover:not(.disabled).topic-front-end, .button.primary:focus.topic-front-end, .button-primary:hover:not(.disabled).topic-front-end, .button-primary:focus.topic-front-end { background-color: #29447c; border-color: #29447c; }

.topic-fundamentals .button.primary:hover:not(.disabled), .topic-fundamentals .button.primary:focus, .topic-fundamentals .button-primary:hover:not(.disabled), .topic-fundamentals .button-primary:focus { background-color: #762d45; border-color: #762d45; }

.button.primary:hover:not(.disabled).topic-fundamentals, .button.primary:focus.topic-fundamentals, .button-primary:hover:not(.disabled).topic-fundamentals, .button-primary:focus.topic-fundamentals { background-color: #762d45; border-color: #762d45; }

.topic-mobile .button.primary:hover:not(.disabled), .topic-mobile .button.primary:focus, .topic-mobile .button-primary:hover:not(.disabled), .topic-mobile .button-primary:focus { background-color: #225d4d; border-color: #225d4d; }

.button.primary:hover:not(.disabled).topic-mobile, .button.primary:focus.topic-mobile, .button-primary:hover:not(.disabled).topic-mobile, .button-primary:focus.topic-mobile { background-color: #225d4d; border-color: #225d4d; }

.topic-internal .button.primary:hover:not(.disabled), .topic-internal .button.primary:focus, .topic-internal .button-primary:hover:not(.disabled), .topic-internal .button-primary:focus { background-color: #3f474f; border-color: #3f474f; }

.button.primary:hover:not(.disabled).topic-internal, .button.primary:focus.topic-internal, .button-primary:hover:not(.disabled).topic-internal, .button-primary:focus.topic-internal { background-color: #3f474f; border-color: #3f474f; }

.topic-foundations .button.primary:hover:not(.disabled), .topic-foundations .button.primary:focus, .topic-foundations .button-primary:hover:not(.disabled), .topic-foundations .button-primary:focus { background-color: #00252e; border-color: #00252e; }

.button.primary:hover:not(.disabled).topic-foundations, .button.primary:focus.topic-foundations, .button-primary:hover:not(.disabled).topic-foundations, .button-primary:focus.topic-foundations { background-color: #00252e; border-color: #00252e; }

.topic-undefined .button.primary:hover:not(.disabled), .topic-undefined .button.primary:focus, .topic-undefined .button-primary:hover:not(.disabled), .topic-undefined .button-primary:focus { background-color: #3f474f; border-color: #3f474f; }

.button.primary:hover:not(.disabled).topic-undefined, .button.primary:focus.topic-undefined, .button-primary:hover:not(.disabled).topic-undefined, .button-primary:focus.topic-undefined { background-color: #3f474f; border-color: #3f474f; }

.topic-college-credit .button.primary:hover:not(.disabled), .topic-college-credit .button.primary:focus, .topic-college-credit .button-primary:hover:not(.disabled), .topic-college-credit .button-primary:focus { background-color: #2c6ca1; border-color: #2c6ca1; }

.button.primary:hover:not(.disabled).topic-college-credit, .button.primary:focus.topic-college-credit, .button-primary:hover:not(.disabled).topic-college-credit, .button-primary:focus.topic-college-credit { background-color: #2c6ca1; border-color: #2c6ca1; }

.topic-no-code .button.primary:hover:not(.disabled), .topic-no-code .button.primary:focus, .topic-no-code .button-primary:hover:not(.disabled), .topic-no-code .button-primary:focus { background-color: #268762; border-color: #268762; }

.button.primary:hover:not(.disabled).topic-no-code, .button.primary:focus.topic-no-code, .button-primary:hover:not(.disabled).topic-no-code, .button-primary:focus.topic-no-code { background-color: #268762; border-color: #268762; }

.topic-security .button.primary:hover:not(.disabled), .topic-security .button.primary:focus, .topic-security .button-primary:hover:not(.disabled), .topic-security .button-primary:focus { background-color: #1983dd; border-color: #1983dd; }

.button.primary:hover:not(.disabled).topic-security, .button.primary:focus.topic-security, .button-primary:hover:not(.disabled).topic-security, .button-primary:focus.topic-security { background-color: #1983dd; border-color: #1983dd; }

.topic-game-development .button.primary:hover:not(.disabled), .topic-game-development .button.primary:focus, .topic-game-development .button-primary:hover:not(.disabled), .topic-game-development .button-primary:focus { background-color: #664bb5; border-color: #664bb5; }

.button.primary:hover:not(.disabled).topic-game-development, .button.primary:focus.topic-game-development, .button-primary:hover:not(.disabled).topic-game-development, .button-primary:focus.topic-game-development { background-color: #664bb5; border-color: #664bb5; }

.topic-treehouse-resources .button.primary:hover:not(.disabled), .topic-treehouse-resources .button.primary:focus, .topic-treehouse-resources .button-primary:hover:not(.disabled), .topic-treehouse-resources .button-primary:focus { background-color: #3ac162; border-color: #3ac162; }

.button.primary:hover:not(.disabled).topic-treehouse-resources, .button.primary:focus.topic-treehouse-resources, .button-primary:hover:not(.disabled).topic-treehouse-resources, .button-primary:focus.topic-treehouse-resources { background-color: #3ac162; border-color: #3ac162; }

.topic-coding-for-kids .button.primary:hover:not(.disabled), .topic-coding-for-kids .button.primary:focus, .topic-coding-for-kids .button-primary:hover:not(.disabled), .topic-coding-for-kids .button-primary:focus { background-color: #db520c; border-color: #db520c; }

.button.primary:hover:not(.disabled).topic-coding-for-kids, .button.primary:focus.topic-coding-for-kids, .button-primary:hover:not(.disabled).topic-coding-for-kids, .button-primary:focus.topic-coding-for-kids { background-color: #db520c; border-color: #db520c; }

.button.primary-blue, .button-primary-blue { background-color: #326e99; border: solid 2px #326e99; }

.button.primary-blue:not(.has-topic-color), .button-primary-blue:not(.has-topic-color) { color: #fff; }

.button.primary-blue svg:not(.has-topic-fill), .button-primary-blue svg:not(.has-topic-fill) { fill: #fff; }

.button.primary-blue:hover:not(.disabled), .button.primary-blue:focus, .uploader.hover:not(.disabled) .button.primary-blue, .button-primary-blue:hover:not(.disabled), .button-primary-blue:focus, .uploader.hover:not(.disabled) .button-primary-blue { border-color: #265372; background-color: #265372; }

.button.primary-blue:hover:not(.disabled):not(.has-topic-color), .button.primary-blue:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button.primary-blue:not(.has-topic-color), .button-primary-blue:hover:not(.disabled):not(.has-topic-color), .button-primary-blue:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button-primary-blue:not(.has-topic-color) { color: #fff; }

.button.primary-blue:hover:not(.disabled) svg:not(.has-topic-fill), .button.primary-blue:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button.primary-blue svg:not(.has-topic-fill), .button-primary-blue:hover:not(.disabled) svg:not(.has-topic-fill), .button-primary-blue:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button-primary-blue svg:not(.has-topic-fill) { fill: #fff; }

.topic-ai .button.primary-blue, .topic-ai .button-primary-blue { background-color: #733A88; border-color: #733A88; }

.button.primary-blue.topic-ai, .button-primary-blue.topic-ai { background-color: #733A88; border-color: #733A88; }

.topic-back-end .button.primary-blue, .topic-back-end .button-primary-blue { background-color: #008297; border-color: #008297; }

.button.primary-blue.topic-back-end, .button-primary-blue.topic-back-end { background-color: #008297; border-color: #008297; }

.topic-data .button.primary-blue, .topic-data .button-primary-blue { background-color: #9F4B84; border-color: #9F4B84; }

.button.primary-blue.topic-data, .button-primary-blue.topic-data { background-color: #9F4B84; border-color: #9F4B84; }

.topic-design .button.primary-blue, .topic-design .button-primary-blue { background-color: #4a4290; border-color: #4a4290; }

.button.primary-blue.topic-design, .button-primary-blue.topic-design { background-color: #4a4290; border-color: #4a4290; }

.topic-experimental .button.primary-blue, .topic-experimental .button-primary-blue { background-color: #733a88; border-color: #733a88; }

.button.primary-blue.topic-experimental, .button-primary-blue.topic-experimental { background-color: #733a88; border-color: #733a88; }

.topic-front-end .button.primary-blue, .topic-front-end .button-primary-blue { background-color: #3659a2; border-color: #3659a2; }

.button.primary-blue.topic-front-end, .button-primary-blue.topic-front-end { background-color: #3659a2; border-color: #3659a2; }

.topic-fundamentals .button.primary-blue, .topic-fundamentals .button-primary-blue { background-color: #9b3b5a; border-color: #9b3b5a; }

.button.primary-blue.topic-fundamentals, .button-primary-blue.topic-fundamentals { background-color: #9b3b5a; border-color: #9b3b5a; }

.topic-mobile .button.primary-blue, .topic-mobile .button-primary-blue { background-color: #30826C; border-color: #30826C; }

.button.primary-blue.topic-mobile, .button-primary-blue.topic-mobile { background-color: #30826C; border-color: #30826C; }

.topic-internal .button.primary-blue, .topic-internal .button-primary-blue { background-color: #55616c; border-color: #55616c; }

.button.primary-blue.topic-internal, .button-primary-blue.topic-internal { background-color: #55616c; border-color: #55616c; }

.topic-foundations .button.primary-blue, .topic-foundations .button-primary-blue { background-color: #004e61; border-color: #004e61; }

.button.primary-blue.topic-foundations, .button-primary-blue.topic-foundations { background-color: #004e61; border-color: #004e61; }

.topic-undefined .button.primary-blue, .topic-undefined .button-primary-blue { background-color: #55616c; border-color: #55616c; }

.button.primary-blue.topic-undefined, .button-primary-blue.topic-undefined { background-color: #55616c; border-color: #55616c; }

.topic-college-credit .button.primary-blue, .topic-college-credit .button-primary-blue { background-color: #3887c8; border-color: #3887c8; }

.button.primary-blue.topic-college-credit, .button-primary-blue.topic-college-credit { background-color: #3887c8; border-color: #3887c8; }

.topic-no-code .button.primary-blue, .topic-no-code .button-primary-blue { background-color: #31AF7F; border-color: #31AF7F; }

.button.primary-blue.topic-no-code, .button-primary-blue.topic-no-code { background-color: #31AF7F; border-color: #31AF7F; }

.topic-security .button.primary-blue, .topic-security .button-primary-blue { background-color: #409BE9; border-color: #409BE9; }

.button.primary-blue.topic-security, .button-primary-blue.topic-security { background-color: #409BE9; border-color: #409BE9; }

.topic-game-development .button.primary-blue, .topic-game-development .button-primary-blue { background-color: #856fc4; border-color: #856fc4; }

.button.primary-blue.topic-game-development, .button-primary-blue.topic-game-development { background-color: #856fc4; border-color: #856fc4; }

.topic-treehouse-resources .button.primary-blue, .topic-treehouse-resources .button-primary-blue { background-color: #5fcf80; border-color: #5fcf80; }

.button.primary-blue.topic-treehouse-resources, .button-primary-blue.topic-treehouse-resources { background-color: #5fcf80; border-color: #5fcf80; }

.topic-coding-for-kids .button.primary-blue, .topic-coding-for-kids .button-primary-blue { background-color: #F36C27; border-color: #F36C27; }

.button.primary-blue.topic-coding-for-kids, .button-primary-blue.topic-coding-for-kids { background-color: #F36C27; border-color: #F36C27; }

.topic-ai .button.primary-blue:hover:not(.disabled), .topic-ai .button.primary-blue:focus, .topic-ai .button-primary-blue:hover:not(.disabled), .topic-ai .button-primary-blue:focus { background-color: #552b64; border-color: #552b64; }

.button.primary-blue:hover:not(.disabled).topic-ai, .button.primary-blue:focus.topic-ai, .button-primary-blue:hover:not(.disabled).topic-ai, .button-primary-blue:focus.topic-ai { background-color: #552b64; border-color: #552b64; }

.topic-back-end .button.primary-blue:hover:not(.disabled), .topic-back-end .button.primary-blue:focus, .topic-back-end .button-primary-blue:hover:not(.disabled), .topic-back-end .button-primary-blue:focus { background-color: #005664; border-color: #005664; }

.button.primary-blue:hover:not(.disabled).topic-back-end, .button.primary-blue:focus.topic-back-end, .button-primary-blue:hover:not(.disabled).topic-back-end, .button-primary-blue:focus.topic-back-end { background-color: #005664; border-color: #005664; }

.topic-data .button.primary-blue:hover:not(.disabled), .topic-data .button.primary-blue:focus, .topic-data .button-primary-blue:hover:not(.disabled), .topic-data .button-primary-blue:focus { background-color: #7c3b67; border-color: #7c3b67; }

.button.primary-blue:hover:not(.disabled).topic-data, .button.primary-blue:focus.topic-data, .button-primary-blue:hover:not(.disabled).topic-data, .button-primary-blue:focus.topic-data { background-color: #7c3b67; border-color: #7c3b67; }

.topic-design .button.primary-blue:hover:not(.disabled), .topic-design .button.primary-blue:focus, .topic-design .button-primary-blue:hover:not(.disabled), .topic-design .button-primary-blue:focus { background-color: #38326d; border-color: #38326d; }

.button.primary-blue:hover:not(.disabled).topic-design, .button.primary-blue:focus.topic-design, .button-primary-blue:hover:not(.disabled).topic-design, .button-primary-blue:focus.topic-design { background-color: #38326d; border-color: #38326d; }

.topic-experimental .button.primary-blue:hover:not(.disabled), .topic-experimental .button.primary-blue:focus, .topic-experimental .button-primary-blue:hover:not(.disabled), .topic-experimental .button-primary-blue:focus { background-color: #552b64; border-color: #552b64; }

.button.primary-blue:hover:not(.disabled).topic-experimental, .button.primary-blue:focus.topic-experimental, .button-primary-blue:hover:not(.disabled).topic-experimental, .button-primary-blue:focus.topic-experimental { background-color: #552b64; border-color: #552b64; }

.topic-front-end .button.primary-blue:hover:not(.disabled), .topic-front-end .button.primary-blue:focus, .topic-front-end .button-primary-blue:hover:not(.disabled), .topic-front-end .button-primary-blue:focus { background-color: #29447c; border-color: #29447c; }

.button.primary-blue:hover:not(.disabled).topic-front-end, .button.primary-blue:focus.topic-front-end, .button-primary-blue:hover:not(.disabled).topic-front-end, .button-primary-blue:focus.topic-front-end { background-color: #29447c; border-color: #29447c; }

.topic-fundamentals .button.primary-blue:hover:not(.disabled), .topic-fundamentals .button.primary-blue:focus, .topic-fundamentals .button-primary-blue:hover:not(.disabled), .topic-fundamentals .button-primary-blue:focus { background-color: #762d45; border-color: #762d45; }

.button.primary-blue:hover:not(.disabled).topic-fundamentals, .button.primary-blue:focus.topic-fundamentals, .button-primary-blue:hover:not(.disabled).topic-fundamentals, .button-primary-blue:focus.topic-fundamentals { background-color: #762d45; border-color: #762d45; }

.topic-mobile .button.primary-blue:hover:not(.disabled), .topic-mobile .button.primary-blue:focus, .topic-mobile .button-primary-blue:hover:not(.disabled), .topic-mobile .button-primary-blue:focus { background-color: #225d4d; border-color: #225d4d; }

.button.primary-blue:hover:not(.disabled).topic-mobile, .button.primary-blue:focus.topic-mobile, .button-primary-blue:hover:not(.disabled).topic-mobile, .button-primary-blue:focus.topic-mobile { background-color: #225d4d; border-color: #225d4d; }

.topic-internal .button.primary-blue:hover:not(.disabled), .topic-internal .button.primary-blue:focus, .topic-internal .button-primary-blue:hover:not(.disabled), .topic-internal .button-primary-blue:focus { background-color: #3f474f; border-color: #3f474f; }

.button.primary-blue:hover:not(.disabled).topic-internal, .button.primary-blue:focus.topic-internal, .button-primary-blue:hover:not(.disabled).topic-internal, .button-primary-blue:focus.topic-internal { background-color: #3f474f; border-color: #3f474f; }

.topic-foundations .button.primary-blue:hover:not(.disabled), .topic-foundations .button.primary-blue:focus, .topic-foundations .button-primary-blue:hover:not(.disabled), .topic-foundations .button-primary-blue:focus { background-color: #00252e; border-color: #00252e; }

.button.primary-blue:hover:not(.disabled).topic-foundations, .button.primary-blue:focus.topic-foundations, .button-primary-blue:hover:not(.disabled).topic-foundations, .button-primary-blue:focus.topic-foundations { background-color: #00252e; border-color: #00252e; }

.topic-undefined .button.primary-blue:hover:not(.disabled), .topic-undefined .button.primary-blue:focus, .topic-undefined .button-primary-blue:hover:not(.disabled), .topic-undefined .button-primary-blue:focus { background-color: #3f474f; border-color: #3f474f; }

.button.primary-blue:hover:not(.disabled).topic-undefined, .button.primary-blue:focus.topic-undefined, .button-primary-blue:hover:not(.disabled).topic-undefined, .button-primary-blue:focus.topic-undefined { background-color: #3f474f; border-color: #3f474f; }

.topic-college-credit .button.primary-blue:hover:not(.disabled), .topic-college-credit .button.primary-blue:focus, .topic-college-credit .button-primary-blue:hover:not(.disabled), .topic-college-credit .button-primary-blue:focus { background-color: #2c6ca1; border-color: #2c6ca1; }

.button.primary-blue:hover:not(.disabled).topic-college-credit, .button.primary-blue:focus.topic-college-credit, .button-primary-blue:hover:not(.disabled).topic-college-credit, .button-primary-blue:focus.topic-college-credit { background-color: #2c6ca1; border-color: #2c6ca1; }

.topic-no-code .button.primary-blue:hover:not(.disabled), .topic-no-code .button.primary-blue:focus, .topic-no-code .button-primary-blue:hover:not(.disabled), .topic-no-code .button-primary-blue:focus { background-color: #268762; border-color: #268762; }

.button.primary-blue:hover:not(.disabled).topic-no-code, .button.primary-blue:focus.topic-no-code, .button-primary-blue:hover:not(.disabled).topic-no-code, .button-primary-blue:focus.topic-no-code { background-color: #268762; border-color: #268762; }

.topic-security .button.primary-blue:hover:not(.disabled), .topic-security .button.primary-blue:focus, .topic-security .button-primary-blue:hover:not(.disabled), .topic-security .button-primary-blue:focus { background-color: #1983dd; border-color: #1983dd; }

.button.primary-blue:hover:not(.disabled).topic-security, .button.primary-blue:focus.topic-security, .button-primary-blue:hover:not(.disabled).topic-security, .button-primary-blue:focus.topic-security { background-color: #1983dd; border-color: #1983dd; }

.topic-game-development .button.primary-blue:hover:not(.disabled), .topic-game-development .button.primary-blue:focus, .topic-game-development .button-primary-blue:hover:not(.disabled), .topic-game-development .button-primary-blue:focus { background-color: #664bb5; border-color: #664bb5; }

.button.primary-blue:hover:not(.disabled).topic-game-development, .button.primary-blue:focus.topic-game-development, .button-primary-blue:hover:not(.disabled).topic-game-development, .button-primary-blue:focus.topic-game-development { background-color: #664bb5; border-color: #664bb5; }

.topic-treehouse-resources .button.primary-blue:hover:not(.disabled), .topic-treehouse-resources .button.primary-blue:focus, .topic-treehouse-resources .button-primary-blue:hover:not(.disabled), .topic-treehouse-resources .button-primary-blue:focus { background-color: #3ac162; border-color: #3ac162; }

.button.primary-blue:hover:not(.disabled).topic-treehouse-resources, .button.primary-blue:focus.topic-treehouse-resources, .button-primary-blue:hover:not(.disabled).topic-treehouse-resources, .button-primary-blue:focus.topic-treehouse-resources { background-color: #3ac162; border-color: #3ac162; }

.topic-coding-for-kids .button.primary-blue:hover:not(.disabled), .topic-coding-for-kids .button.primary-blue:focus, .topic-coding-for-kids .button-primary-blue:hover:not(.disabled), .topic-coding-for-kids .button-primary-blue:focus { background-color: #db520c; border-color: #db520c; }

.button.primary-blue:hover:not(.disabled).topic-coding-for-kids, .button.primary-blue:focus.topic-coding-for-kids, .button-primary-blue:hover:not(.disabled).topic-coding-for-kids, .button-primary-blue:focus.topic-coding-for-kids { background-color: #db520c; border-color: #db520c; }

.button.secondary, .button-secondary { background-color: transparent; border: solid 2px #d4d9dd; }

.button.secondary:not(.has-topic-color), .button-secondary:not(.has-topic-color) { color: #1a2126; }

.button.secondary svg:not(.has-topic-fill), .button-secondary svg:not(.has-topic-fill) { fill: #1a2126; }

.button.secondary:hover:not(.disabled), .button.secondary:focus, .uploader.hover:not(.disabled) .button.secondary, .button-secondary:hover:not(.disabled), .button-secondary:focus, .uploader.hover:not(.disabled) .button-secondary { border-color: #a9b3bb; }

.button.secondary:hover:not(.disabled):not(.has-topic-color), .button.secondary:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button.secondary:not(.has-topic-color), .button-secondary:hover:not(.disabled):not(.has-topic-color), .button-secondary:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button-secondary:not(.has-topic-color) { color: #14191d; }

.button.secondary:hover:not(.disabled) svg:not(.has-topic-fill), .button.secondary:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button.secondary svg:not(.has-topic-fill), .button-secondary:hover:not(.disabled) svg:not(.has-topic-fill), .button-secondary:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button-secondary svg:not(.has-topic-fill) { fill: #14191d; }

.button.alert, .button-alert { background-color: transparent; border: solid 2px #ed5a5a; }

.button.alert:not(.has-topic-color), .button-alert:not(.has-topic-color) { color: #ed5a5a; }

.button.alert svg:not(.has-topic-fill), .button-alert svg:not(.has-topic-fill) { fill: #ed5a5a; }

.button.alert:hover:not(.disabled), .button.alert:focus, .uploader.hover:not(.disabled) .button.alert, .button-alert:hover:not(.disabled), .button-alert:focus, .uploader.hover:not(.disabled) .button-alert { border-color: #cb1616; }

.button.alert:hover:not(.disabled):not(.has-topic-color), .button.alert:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button.alert:not(.has-topic-color), .button-alert:hover:not(.disabled):not(.has-topic-color), .button-alert:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button-alert:not(.has-topic-color) { color: #cb1616; }

.button.alert:hover:not(.disabled) svg:not(.has-topic-fill), .button.alert:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button.alert svg:not(.has-topic-fill), .button-alert:hover:not(.disabled) svg:not(.has-topic-fill), .button-alert:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button-alert svg:not(.has-topic-fill) { fill: #cb1616; }

.button.caution, .button-caution { background-color: #ffd466; border: solid 2px #ffd466; }

.button.caution:not(.has-topic-color), .button-caution:not(.has-topic-color) { color: #050708; }

.button.caution svg:not(.has-topic-fill), .button-caution svg:not(.has-topic-fill) { fill: #050708; }

.button.caution:hover:not(.disabled), .button.caution:focus, .uploader.hover:not(.disabled) .button.caution, .button-caution:hover:not(.disabled), .button-caution:focus, .uploader.hover:not(.disabled) .button-caution { border-color: #ffc633; background-color: #ffc633; }

.button.caution:hover:not(.disabled):not(.has-topic-color), .button.caution:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button.caution:not(.has-topic-color), .button-caution:hover:not(.disabled):not(.has-topic-color), .button-caution:focus:not(.has-topic-color), .uploader.hover:not(.disabled) .button-caution:not(.has-topic-color) { color: #050708; }

.button.caution:hover:not(.disabled) svg:not(.has-topic-fill), .button.caution:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button.caution svg:not(.has-topic-fill), .button-caution:hover:not(.disabled) svg:not(.has-topic-fill), .button-caution:focus svg:not(.has-topic-fill), .uploader.hover:not(.disabled) .button-caution svg:not(.has-topic-fill) { fill: #050708; }

.button.inverse:not(.alert):not(.secondary):not(.disabled):not(:hover), .button-inverse:not(.alert):not(.secondary):not(.disabled):not(:hover) { opacity: 0.88; }

.button.inverse:not(.alert), .button-inverse:not(.alert) { border-color: #fff !important; }

.button.inverse:not(.alert):not(.has-topic-color), .button.inverse:not(.alert):hover:not(.disabled), .button-inverse:not(.alert):not(.has-topic-color), .button-inverse:not(.alert):hover:not(.disabled) { color: #fff; }

.button.inverse:not(.alert).primary:hover, .button-inverse:not(.alert).primary:hover { color: #101417; }

.button.inverse:not(.alert) svg:not(.has-topic-fill), .button.inverse:not(.alert):hover:not(.disabled) svg:not(.has-topic-fill), .button-inverse:not(.alert) svg:not(.has-topic-fill), .button-inverse:not(.alert):hover:not(.disabled) svg:not(.has-topic-fill) { fill: #fff; }

.button.inverse.alert:hover:not(.disabled), .button.inverse.alert:focus, .button.inverse-alert:hover:not(.disabled), .button.inverse-alert:focus, .button-inverse.alert:hover:not(.disabled), .button-inverse.alert:focus, .button-inverse-alert:hover:not(.disabled), .button-inverse-alert:focus { border-color: #fff; color: #fff; }

.button.inverse.alert:hover:not(.disabled) svg, .button.inverse.alert:focus svg, .button.inverse-alert:hover:not(.disabled) svg, .button.inverse-alert:focus svg, .button-inverse.alert:hover:not(.disabled) svg, .button-inverse.alert:focus svg, .button-inverse-alert:hover:not(.disabled) svg, .button-inverse-alert:focus svg { fill: #fff; }

.button.inverse.primary, .button.inverse-primary, .button-inverse.primary, .button-inverse-primary { background: #fff !important; }

.button.inverse.primary:not(.has-topic-color), .button.inverse-primary:not(.has-topic-color), .button-inverse.primary:not(.has-topic-color), .button-inverse-primary:not(.has-topic-color) { color: #101417; }

.button.inverse.primary svg:not(.has-topic-fill), .button.inverse-primary svg:not(.has-topic-fill), .button-inverse.primary svg:not(.has-topic-fill), .button-inverse-primary svg:not(.has-topic-fill) { fill: #101417; }

.button.inverse.secondary, .button.inverse-secondary, .button-inverse.secondary, .button-inverse-secondary { opacity: 0.5; }

.button.inverse.secondary:hover:not(.disabled), .button.inverse.secondary:focus, .button.inverse-secondary:hover:not(.disabled), .button.inverse-secondary:focus, .button-inverse.secondary:hover:not(.disabled), .button-inverse.secondary:focus, .button-inverse-secondary:hover:not(.disabled), .button-inverse-secondary:focus { opacity: 1; }

.button.inverse.disabled, .button.inverse-disabled, .button-inverse.disabled, .button-inverse-disabled { opacity: 0.15; }

.button.large, .button-large { font-size: 16px; height: 50px; line-height: 46px; padding: 0 22px; }

.button.large svg, .button-large svg { top: -2px; }

.button.large.square, .button-large.square { padding: 0; width: 50px; }

.button.small, .button-small { font-size: 12px; height: 34px; line-height: 30px; padding: 0 12px; }

.button.small.square, .button-small.square { padding: 0; width: 34px; }

.button.x-small, .button-x-small { font-size: 12px; height: 30px; line-height: 26px; padding: 0 10px; }

.button.x-small.square, .button-x-small.square { padding: 0; width: 30px; }

@media screen and (max-width: 679px) { .button.default-on-mobile { font-size: 14px; height: 40px; line-height: 36px; padding: 0 15px; }
  .button.default-on-mobile.square { padding: 0; width: 40px; }
  .button.small-on-mobile { font-size: 12px; height: 34px; line-height: 30px; padding: 0 12px; }
  .button.small-on-mobile.square { padding: 0; width: 34px; }
  .button.x-small-on-mobile { font-size: 12px; height: 30px; line-height: 26px; padding: 0 10px; }
  .button.x-small-on-mobile.square { padding: 0; width: 30px; } }

.button.full, .button.button-full { display: block; width: 100%; height: 100%; margin: 0; padding-left: 0; padding-right: 0; }

@media screen and (max-width: 679px) { .button.full-on-mobile, .button.button-full-on-mobile { display: block; width: 100%; height: 100%; margin: 0; padding-left: 0; padding-right: 0; text-align: center; } }

.button.trial { height: 80px; line-height: 20px; background-color: #409be9; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.button.trial:hover:not(.disabled) { background-color: #337cba; }

.button.close, .button.button-close { padding: 0; margin: 0; width: 28px; height: 28px; line-height: 22px; text-align: center; z-index: 2; }

.button.close svg.close-icon, .button.button-close svg.close-icon { margin: 0; top: 0; }

.button.icon-on-left svg { margin: 0 5px 0 0; }

.button.icon-on-right svg { margin: 0 0 0 5px; }

.button svg { vertical-align: middle; position: relative; top: -1px; }

.safari .button svg { top: -2px; }

.button svg.add-icon { height: 12px; width: 12px; }

.button svg.play-icon { height: 12px; width: 10px; }

.button svg.resume-icon { height: 14px; width: 16px; }

.button svg.project-icon { height: auto; width: 18px; }

.button svg.up-arrow, .button svg.up-arrow-icon, .button svg.down-arrow, .button svg.down-arrow-icon, .button svg.left-arrow, .button svg.left-arrow-icon, .button svg.right-arrow, .button svg.right-arrow-icon { height: 12px; width: 12px; }

.button svg.preview-icon { height: 11px; margin-left: 6px; width: 17px; }

.button svg.editor-icon { height: 11px; margin-left: 6px; width: 17px; }

.button svg.edit-icon { height: 12px; width: 12px; }

.button svg.gear-icon { margin-top: 2px; height: 14px; width: 14px; }

.button.large .icon-play, .button.button-large .icon-play { margin: -4px 0 0 6px; }

.button.large svg.right-arrow-icon, .button.button-large svg.right-arrow-icon { height: 13px; width: 13px; top: 0; margin-left: 4px; }

.button.large svg.play-icon, .button.button-large svg.play-icon { height: 14px; width: 11px; }

.button.large svg.resume-icon, .button.button-large svg.resume-icon { height: 14px; width: 18px; }

.button.large svg.close-icon, .button.button-large svg.close-icon { height: 14px; width: 14px; }

.button .icon-play { margin: -2px 0 0 8px; }

.button .icon-close { margin: -2px 3px 0 0px; }

.button.button-social { margin: 5px 10px 5px 0; display: inline-block; }

.button.button-social:last-child { margin: 5px 0; }

.button.mobile-disabled .mobile-message { display: none; white-space: normal; position: absolute; background: rgba(45, 51, 57, 0.9); padding: 8px 15px 0; border-radius: 4px; color: #fff; top: -1px; left: -1px; right: -1px; bottom: -3px; font-size: 13px; line-height: 1.3; font-weight: 400 !important; }

.button.mobile-disabled:hover { opacity: 1; }

.button.mobile-disabled:hover .mobile-message { display: block !important; }

.button.button-share:hover .tooltip { display: block; }

.button.button-share .icon { margin: -6px 0 0 3px; opacity: 1; }

.button.button-share .tooltip { display: none; text-align: center; }

.split-button .button.text, .split-button .button.action { float: left; z-index: 1; margin: 0; }

.split-button .button.text:hover, .split-button .button.action:hover { z-index: 2; }

.split-button .button.text { border-radius: 4px 0 0 4px; padding: 0 20px; }

.split-button .button.text.primary { border-right-color: #29824b; }

.topic-ai .split-button .button.text.primary { border-right-color: #552b64; }

.split-button .button.text.primary.topic-ai { border-right-color: #552b64; }

.topic-back-end .split-button .button.text.primary { border-right-color: #005664; }

.split-button .button.text.primary.topic-back-end { border-right-color: #005664; }

.topic-data .split-button .button.text.primary { border-right-color: #7c3b67; }

.split-button .button.text.primary.topic-data { border-right-color: #7c3b67; }

.topic-design .split-button .button.text.primary { border-right-color: #38326d; }

.split-button .button.text.primary.topic-design { border-right-color: #38326d; }

.topic-experimental .split-button .button.text.primary { border-right-color: #552b64; }

.split-button .button.text.primary.topic-experimental { border-right-color: #552b64; }

.topic-front-end .split-button .button.text.primary { border-right-color: #29447c; }

.split-button .button.text.primary.topic-front-end { border-right-color: #29447c; }

.topic-fundamentals .split-button .button.text.primary { border-right-color: #762d45; }

.split-button .button.text.primary.topic-fundamentals { border-right-color: #762d45; }

.topic-mobile .split-button .button.text.primary { border-right-color: #225d4d; }

.split-button .button.text.primary.topic-mobile { border-right-color: #225d4d; }

.topic-internal .split-button .button.text.primary { border-right-color: #3f474f; }

.split-button .button.text.primary.topic-internal { border-right-color: #3f474f; }

.topic-foundations .split-button .button.text.primary { border-right-color: #00252e; }

.split-button .button.text.primary.topic-foundations { border-right-color: #00252e; }

.topic-undefined .split-button .button.text.primary { border-right-color: #3f474f; }

.split-button .button.text.primary.topic-undefined { border-right-color: #3f474f; }

.topic-college-credit .split-button .button.text.primary { border-right-color: #2c6ca1; }

.split-button .button.text.primary.topic-college-credit { border-right-color: #2c6ca1; }

.topic-no-code .split-button .button.text.primary { border-right-color: #268762; }

.split-button .button.text.primary.topic-no-code { border-right-color: #268762; }

.topic-security .split-button .button.text.primary { border-right-color: #1983dd; }

.split-button .button.text.primary.topic-security { border-right-color: #1983dd; }

.topic-game-development .split-button .button.text.primary { border-right-color: #664bb5; }

.split-button .button.text.primary.topic-game-development { border-right-color: #664bb5; }

.topic-treehouse-resources .split-button .button.text.primary { border-right-color: #3ac162; }

.split-button .button.text.primary.topic-treehouse-resources { border-right-color: #3ac162; }

.topic-coding-for-kids .split-button .button.text.primary { border-right-color: #db520c; }

.split-button .button.text.primary.topic-coding-for-kids { border-right-color: #db520c; }

.split-button .button.action { border-radius: 0 4px 4px 0; padding: 0 10px; margin-left: -2px; min-width: 40px; }

.split-button .button.action.primary { border-left-color: #29824b; }

.topic-ai .split-button .button.action.primary { border-left-color: #552b64; }

.split-button .button.action.primary.topic-ai { border-left-color: #552b64; }

.topic-back-end .split-button .button.action.primary { border-left-color: #005664; }

.split-button .button.action.primary.topic-back-end { border-left-color: #005664; }

.topic-data .split-button .button.action.primary { border-left-color: #7c3b67; }

.split-button .button.action.primary.topic-data { border-left-color: #7c3b67; }

.topic-design .split-button .button.action.primary { border-left-color: #38326d; }

.split-button .button.action.primary.topic-design { border-left-color: #38326d; }

.topic-experimental .split-button .button.action.primary { border-left-color: #552b64; }

.split-button .button.action.primary.topic-experimental { border-left-color: #552b64; }

.topic-front-end .split-button .button.action.primary { border-left-color: #29447c; }

.split-button .button.action.primary.topic-front-end { border-left-color: #29447c; }

.topic-fundamentals .split-button .button.action.primary { border-left-color: #762d45; }

.split-button .button.action.primary.topic-fundamentals { border-left-color: #762d45; }

.topic-mobile .split-button .button.action.primary { border-left-color: #225d4d; }

.split-button .button.action.primary.topic-mobile { border-left-color: #225d4d; }

.topic-internal .split-button .button.action.primary { border-left-color: #3f474f; }

.split-button .button.action.primary.topic-internal { border-left-color: #3f474f; }

.topic-foundations .split-button .button.action.primary { border-left-color: #00252e; }

.split-button .button.action.primary.topic-foundations { border-left-color: #00252e; }

.topic-undefined .split-button .button.action.primary { border-left-color: #3f474f; }

.split-button .button.action.primary.topic-undefined { border-left-color: #3f474f; }

.topic-college-credit .split-button .button.action.primary { border-left-color: #2c6ca1; }

.split-button .button.action.primary.topic-college-credit { border-left-color: #2c6ca1; }

.topic-no-code .split-button .button.action.primary { border-left-color: #268762; }

.split-button .button.action.primary.topic-no-code { border-left-color: #268762; }

.topic-security .split-button .button.action.primary { border-left-color: #1983dd; }

.split-button .button.action.primary.topic-security { border-left-color: #1983dd; }

.topic-game-development .split-button .button.action.primary { border-left-color: #664bb5; }

.split-button .button.action.primary.topic-game-development { border-left-color: #664bb5; }

.topic-treehouse-resources .split-button .button.action.primary { border-left-color: #3ac162; }

.split-button .button.action.primary.topic-treehouse-resources { border-left-color: #3ac162; }

.topic-coding-for-kids .split-button .button.action.primary { border-left-color: #db520c; }

.split-button .button.action.primary.topic-coding-for-kids { border-left-color: #db520c; }

.split-button .button.action svg.add-icon { height: 14px; width: 14px; }

.split-button { display: inline-block; margin: 0 15px 0 0; }

.split-button:before, .split-button:after { content: " "; display: table; }

.split-button:after { clear: both; }

.button-toggle { font-size: 0; padding: 4px; background: #d4d9dd; border-radius: 5px; display: inline-block; vertical-align: middle; }

.button-toggle label { font-weight: 700; padding: 10px 21px; color: #1a2126; font-size: 14px; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; display: inline-block; border-radius: 5px; box-sizing: border-box; }

.button-toggle label.selected { background: #35A961; color: #fff; box-shadow: 0 -1px 0 #2b8a4f inset; }

.button-toggle label.selected.no { background: #ed5a5a; box-shadow: 0 -1px 0 #e93535 inset; }

.button-toggle label input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
h1.pine-header-column, h2.pine-header-column, h3.pine-header-column, h4.pine-header-column, h5.pine-header-column, h6.pine-header-column { color: #1a2126 !important; text-transform: uppercase; font-weight: 400; font-size: 14px !important; margin-bottom: 1.5rem; margin-top: 0rem; }

@media screen and (max-width: 679px) { h1.pine-header-column, h2.pine-header-column, h3.pine-header-column, h4.pine-header-column, h5.pine-header-column, h6.pine-header-column { margin-top: 1rem; } }

a.pine-link { color: #050708; font-weight: 700; cursor: pointer; transition: color 300ms 0s ease; }

a.pine-link:hover { color: #3f8abf; }

a.pine-link:hover svg { fill: #3f8abf; }

a.pine-link.icon-on-left svg { margin: 0 5px 0 0; }

a.pine-link.icon-on-left.color-blue svg { fill: #3f8abf; }

a.pine-link.icon-on-right svg { margin: 0 0 0 5px; }

a.pine-link.icon-on-right.color-blue svg { fill: #3f8abf; }

a.pine-link svg { vertical-align: middle; position: relative; top: -1px; }

a.pine-link-back { color: #1a2126; text-transform: uppercase; font-size: 14px; }

a.pine-link-back:hover { color: #050708; }

a.pine-link-back:hover svg { fill: #050708; }

a.pine-link-back svg { fill: #8e969d; height: 16px; width: 16px; position: relative; top: -1px; vertical-align: middle; }
.leap-m-b-05 { margin-bottom: 4px; }

.leap-m-b-1 { margin-bottom: 8px; }

.leap-m-b-2 { margin-bottom: 16px; }

.leap-m-b-3 { margin-bottom: 24px; }
.achievement-hero { background: #f3f4f5; position: absolute; top: 0; bottom: 0; right: 0; text-align: center; overflow: hidden; font-size: 0; border-radius: 0 5px 5px 0; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; vertical-align: middle; }

.achievement-hero img:not(.check-complete) { width: 70%; vertical-align: middle; position: absolute; z-index: 2; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
@media screen and (max-width: 679px) { .achievement-steps li a img { margin-left: -62px !important; } }
html.has-fixed-alert { position: relative; -webkit-animation: slide-down 500ms ease-in-out 1s 1 forwards; -moz-animation: slide-down 500ms ease-in-out 1s 1 forwards; animation: slide-down 500ms ease-in-out 1s 1 forwards; }

@-webkit-keyframes slide-down { from { top: 0; }
  to { top: 50px; } }

@-moz-keyframes slide-down { from { top: 0; }
  to { top: 50px; } }

@keyframes slide-down { from { top: 0; }
  to { top: 50px; } }

html.has-fixed-alert.closed-all-fixed-alerts { -webkit-animation: slide-up 400ms ease 0s 1 forwards; -moz-animation: slide-up 400ms ease 0s 1 forwards; animation: slide-up 400ms ease 0s 1 forwards; }

@-webkit-keyframes slide-up { from { top: 50px; }
  to { top: 0; } }

@-moz-keyframes slide-up { from { top: 50px; }
  to { top: 0; } }

@keyframes slide-up { from { top: 50px; }
  to { top: 0; } }

.alert-banner { padding: 15px; display: flex; justify-content: space-between; align-items: center; }

.alert-banner:not(.fixed) { margin-bottom: 30px; position: relative; border-radius: 4px; }

.alert-banner:not(.fixed).closed { display: none; }

.alert-banner.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; -ms-transform: translatey(-100%); -moz-transform: translatey(-100%); -webkit-transform: translatey(-100%); transform: translatey(-100%); }

.has-fixed-alert .alert-banner.fixed { -webkit-animation: fixed-alert-slide-in 500ms ease-in-out 1s 1 forwards; -moz-animation: fixed-alert-slide-in 500ms ease-in-out 1s 1 forwards; animation: fixed-alert-slide-in 500ms ease-in-out 1s 1 forwards; }

@-webkit-keyframes fixed-alert-slide-in { from { opacity: 0;
    -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); }
  to { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@-moz-keyframes fixed-alert-slide-in { from { opacity: 0;
    -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); }
  to { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@keyframes fixed-alert-slide-in { from { opacity: 0;
    -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); }
  to { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

.alert-banner.fixed.closed { -webkit-animation: shift-up 400ms ease 0s 1 forwards; -moz-animation: shift-up 400ms ease 0s 1 forwards; animation: shift-up 400ms ease 0s 1 forwards; }

@-webkit-keyframes shift-up { from { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); }
  to { -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); } }

@-moz-keyframes shift-up { from { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); }
  to { -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); } }

@keyframes shift-up { from { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); }
  to { -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); } }

.alert-banner.slide-in { -webkit-animation: alert-slide-in 2s ease; -moz-animation: alert-slide-in 2s ease; animation: alert-slide-in 2s ease; }

@-webkit-keyframes alert-slide-in { 0%, 85% { opacity: 0;
    -ms-transform: translatey(-20px);
    -moz-transform: translatey(-20px);
    -webkit-transform: translatey(-20px);
    transform: translatey(-20px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@-moz-keyframes alert-slide-in { 0%, 85% { opacity: 0;
    -ms-transform: translatey(-20px);
    -moz-transform: translatey(-20px);
    -webkit-transform: translatey(-20px);
    transform: translatey(-20px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@keyframes alert-slide-in { 0%, 85% { opacity: 0;
    -ms-transform: translatey(-20px);
    -moz-transform: translatey(-20px);
    -webkit-transform: translatey(-20px);
    transform: translatey(-20px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@media screen and (max-width: 969px) { .with-hero .alert-banner { margin-top: -20px; } }

.alert-banner h6 { margin: 0 0 15px 0; color: white; }

.alert-banner p { color: inherit; margin: 0; width: 100%; }

@media screen and (max-width: 679px) { .alert-banner p { flex-direction: column; align-items: unset; font-size: 13px; line-height: 18px; } }

@media screen and (min-width: 680px) { .alert-banner p { font-size: 14px; line-height: 20px; } }

.alert-banner p .icon { position: relative; margin: -5px 10px 0 -3px; }

.alert-banner ul { margin-bottom: 10px; }

.alert-banner ul li { font-size: 13px; list-style-type: disc; line-height: 1.4em; margin: 0 0 5px 15px; }

.alert-banner strong { font-weight: 700; padding-right: 3px; }

.alert-banner a:not(.button) { color: inherit; font-weight: 500; transition: color 200ms ease-in-out; }

.alert-banner a:not(.button):hover { color: white; }

.alert-banner.with-icon { padding-left: 55px; padding-right: 15px; }

.alert-banner.with-icon p > svg { position: absolute; top: 50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); left: 15px; }

.alert-banner .close-alert { background: none; padding-right: 0; margin: 0; border: none; outline: none; cursor: pointer; height: auto; line-height: 14px; transition: opacity 0.15s ease; opacity: 0.85; }

.alert-banner .close-alert:hover .close-icon { fill: #384047 !important; cursor: pointer; }

.alert-banner .close-icon { height: 14px; width: 14px; }

@media screen and (min-width: 680px) { .alert-banner.with-action p { display: flex; align-items: center; } }

.alert-banner.with-action a:not(.button) { padding-left: 5px; padding-right: 5px; }

@media screen and (max-width: 679px) { .alert-banner-action { display: block; margin: 15px 0 0 0; } }

.alert-banner-action:first-of-type { margin-left: auto; }

@media screen and (max-width: 679px) { .alert-banner-action:nth-of-type(2) { margin-top: 15px; } }

.alert-banner-action + p { display: block; text-overflow: ellipsis; white-space: nowrap; display: inline-block; overflow: hidden; margin-right: 100px; }

.alert-banner-action + p a { text-decoration: none; }

.alert-banner-action svg { fill: #fff !important; }

.alert-banner:not(.icons-only).info:not(.bgimg) button:not(.close-alert), .alert-banner:not(.icons-only).info:not(.bgimg) .button:not(.close-alert), .alert-banner:not(.icons-only).success button:not(.close-alert), .alert-banner:not(.icons-only).success .button:not(.close-alert), .alert-banner:not(.icons-only).warning button:not(.close-alert), .alert-banner:not(.icons-only).warning .button:not(.close-alert), .alert-banner:not(.icons-only).error button:not(.close-alert), .alert-banner:not(.icons-only).error .button:not(.close-alert) { background-color: #55616c; border-color: #55616c; color: #d0d9df; cursor: pointer; }

.alert-banner:not(.icons-only).info:not(.bgimg) button:not(.close-alert):hover, .alert-banner:not(.icons-only).info:not(.bgimg) .button:not(.close-alert):hover, .alert-banner:not(.icons-only).success button:not(.close-alert):hover, .alert-banner:not(.icons-only).success .button:not(.close-alert):hover, .alert-banner:not(.icons-only).warning button:not(.close-alert):hover, .alert-banner:not(.icons-only).warning .button:not(.close-alert):hover, .alert-banner:not(.icons-only).error button:not(.close-alert):hover, .alert-banner:not(.icons-only).error .button:not(.close-alert):hover { background-color: #384047 !important; border-color: #384047; color: #fff; cursor: pointer; }

.alert-banner:not(.icons-only).info { background: #e2e5e8; border-top: 0; border-right: 0; border-bottom: 0; border-left: 10px solid #7e8d9a; -webkit-box-shadow: inset 0px 0px 0px 2px #7e8d9a; -moz-box-shadow: inset 0px 0px 0px 2px #7e8d9a; box-shadow: inset 0px 0px 0px 2px #7e8d9a; color: #050708; }

.alert-banner:not(.icons-only).info strong, .alert-banner:not(.icons-only).info a:not(.button) { color: #101417; }

.alert-banner:not(.icons-only).info .close-icon { fill: #55616c; }

.alert-banner:not(.icons-only).info svg { fill: #657380; }

.alert-banner:not(.icons-only).bgimg { background: #384047; color: #fff; border: 0; box-shadow: none; padding-top: 4em; padding-bottom: 4em; }

.alert-banner:not(.icons-only).bgimg p { font-size: 18px; line-height: 130%; }

.alert-banner:not(.icons-only).bgimg strong, .alert-banner:not(.icons-only).bgimg a:not(.button) { color: #fff; }

.alert-banner:not(.icons-only).bgimg .close-alert .close-icon { fill: #fff; }

.alert-banner:not(.icons-only).bgimg .close-alert:hover .close-icon { fill: rgba(255, 255, 255, 0.7) !important; }

.alert-banner:not(.icons-only).success { background: #dbf4e2; color: #101417; border-top: 0; border-right: 0; border-bottom: 0; border-left: 10px solid #24793d; -webkit-box-shadow: inset 0px 0px 0px 2px #24793d; -moz-box-shadow: inset 0px 0px 0px 2px #24793d; box-shadow: inset 0px 0px 0px 2px #24793d; }

.alert-banner:not(.icons-only).success strong, .alert-banner:not(.icons-only).success a:not(.button) { color: #050708; }

.alert-banner:not(.icons-only).success .close-icon { fill: #55616c; }

.alert-banner:not(.icons-only).success svg { fill: #24793d; }

.alert-banner:not(.icons-only).warning { background: #fbe3d2; color: #101417; border-top: 0; border-right: 0; border-bottom: 0; border-left: 10px solid #bf570f; -webkit-box-shadow: inset 0px 0px 0px 2px #bf570f; -moz-box-shadow: inset 0px 0px 0px 2px #bf570f; box-shadow: inset 0px 0px 0px 2px #bf570f; }

.alert-banner:not(.icons-only).warning strong, .alert-banner:not(.icons-only).warning a:not(.button) { color: #050708; }

.alert-banner:not(.icons-only).warning .cta { font-weight: 700; border-bottom: 1px solid #492106; }

.alert-banner:not(.icons-only).warning .close-icon { fill: #55616c; }

.alert-banner:not(.icons-only).warning svg:not(.close-icon) { fill: #bf570f; height: 20px; width: auto; }

.alert-banner:not(.icons-only).error { background: #f4e0e0; color: #101417; border-top: 0; border-right: 0; border-bottom: 0; border-left: 10px solid #be4a4a; -webkit-box-shadow: inset 0px 0px 0px 2px #be4a4a; -moz-box-shadow: inset 0px 0px 0px 2px #be4a4a; box-shadow: inset 0px 0px 0px 2px #be4a4a; }

.alert-banner:not(.icons-only).error strong { color: #050708; }

.alert-banner:not(.icons-only).error a:not(.button) { color: #050708; }

.alert-banner:not(.icons-only).error .close-icon { fill: #55616c; }

.alert-banner:not(.icons-only).error svg:not(.close-icon) { fill: #be4a4a; height: 20px; width: auto; }

.alert-banner:not(.icons-only).error .cta { font-weight: 700; border-bottom: 1px solid #8a3232; }

.with-text-link .alert-banner-action { margin-left: auto; }

.modal .alert-banner p { margin-bottom: 0; }

.alert .icon { float: left; margin-right: 15px; }

.global-message { padding: 20px; margin: 20px 0; font-size: 14px; line-height: 1.4; color: #fff; position: relative; border-radius: 4px; }

.global-message strong { font-weight: 700; margin-right: 5px; display: inline-block; }

.global-message p { margin: 0 !important; display: inline-block; }

.global-message a { float: right; margin-left: 3px; text-decoration: underline; color: #fff; padding: 7px; margin-top: -4px; border-radius: 4px; }

.global-message a .icon { float: left; }

.global-message.success strong { color: #fff; }

.global-message.error a.cta { float: none; color: #fff; text-decoration: underline; }

@media screen and (max-width: 679px) { .global-message a { float: none; margin-top: 0; position: absolute; right: 10px; top: 10px; } }
.avatar { display: inline-block; position: relative; }

.avatar-x-small { width: 30px; height: 30px; }

.avatar-small { width: 36px; height: 36px; }

.avatar-medium { width: 48px; height: 48px; }

.avatar-large { width: 80px; height: 80px; }

.avatar-x-large { width: 120px; height: 120px; }

.avatar-container { background: #d4d9dd; border-radius: 50%; padding: 2px; width: 100%; height: 100%; border: 2px solid #edeff0; transition: border-color 300ms 0s ease; }

.avatar-white-bg .avatar-container { border-color: #fff; }

.avatar-light-green-bg .avatar-container { border-color: #f0fbf3; }

.avatar-bg-shade .avatar-container { border-color: #f9fafa; }

.avatar-deep-blue-bg .avatar-container { border-color: #3e474f; }

@media screen and (max-width: 969px) { .avatar-deep-blue-on-tablets .avatar-container { border-color: #3e474f; } }

@media screen and (max-width: 969px) { .avatar-deeper-blue-on-tablets .avatar-container { border-color: #333a41; } }

.avatar-x-small.avatar-degree-student .avatar-container { padding: 3px; }

.avatar-large .avatar-container, .avatar-x-large .avatar-container { padding: 4px; }

.avatar-large.avatar-degree-student .avatar-container { padding: 6px; }

.avatar-x-large .avatar-container { border-width: 5px; }

.avatar-x-large.avatar-degree-student .avatar-container { padding: 9px; }

.avatar-degree-student .avatar-container { background-color: #b2bdc5; border-width: 0; padding: 4px; }

.avatar-degree-graduate .avatar-container { background-color: #5fcf80; }

.avatar-moderator .avatar-container { background-color: #ff9f1f !important; }

.avatar-staff .avatar-container { background-color: #5fcf80 !important; }

.avatar-label { font-weight: 700; height: 15px; font-size: 10px; border-radius: 3px; padding: 0 3px; margin: 0 auto; line-height: 14px; z-index: 1; position: absolute; bottom: 0; left: 50%; -ms-transform: translatex(-50%); -moz-transform: translatex(-50%); -webkit-transform: translatex(-50%); transform: translatex(-50%); }

.avatar-pro .avatar-label { background: #d4d9dd; color: #596671; }

.avatar-moderator .avatar-label { background: #ff9f1f; }

.avatar-staff .avatar-label { background: #5fcf80; }

.avatar-moderator .avatar-label, .avatar-staff .avatar-label { color: #fff; }

.avatar-image { display: block; border-radius: 50%; position: relative; margin: 0 auto; width: 100%; height: 100%; transition: width 300ms 0s ease, height 300ms 0s ease; background: #edeff0; padding: 2px; }

.ie .avatar-image { border: 2px solid #edeff0; }

.avatar-white-bg .avatar-image { background: #fff; border-color: #fff; }

.avatar-light-green-bg .avatar-image { background: #f0fbf3; border-color: #f0fbf3; }

.avatar-bg-shade .avatar-image { background: #f9fafa; border-color: #f9fafa; }

.avatar-deep-blue-bg .avatar-image { background: #3e474f; border-color: #3e474f; }

@media screen and (max-width: 969px) { .avatar-deep-blue-on-tablets .avatar-image { background: #3e474f; border-color: #3e474f; } }

@media screen and (max-width: 969px) { .avatar-deeper-blue-on-tablets .avatar-image { background: #333a41; border-color: #333a41; } }

.avatar-large .avatar-image, .avatar-x-large .avatar-image { padding: 4px; border-width: 4px; }

.ie .avatar-image { padding: 0; }

.avatar-progress { position: absolute; top: 0; right: 0; bottom: 0; left: 0; stroke-width: 18px; overflow: hidden; }

.avatar-degree-graduate .avatar-progress { display: none; }

.avatar-progress .circle-progress { display: none; }

.avatar-progress .circle-progress-base, .avatar-progress .circle-progress-base-overlay { stroke: #b2bdc5; }

.avatar-points { transition: opacity 300ms 0s ease; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -ms-transform: translate(0, 0); -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); }

.avatar-link .avatar-points { opacity: 0; }

.avatar-link:hover .avatar-points { opacity: 1; }

.avatar-points.chart { position: absolute; }

.avatar-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; fill: #edeff0; z-index: 0; }

.avatar-white-bg .avatar-mask { fill: #fff; }

.avatar-light-green-bg .avatar-mask { fill: #f0fbf3; }

.avatar-bg-shade .avatar-mask { fill: #f9fafa; }

.avatar-deep-blue-bg .avatar-mask { fill: #3e474f; }

@media screen and (max-width: 969px) { .avatar-deep-blue-on-tablets .avatar-mask { fill: #3e474f; } }

@media screen and (max-width: 969px) { .avatar-deeper-blue-on-tablets .avatar-mask { fill: #333a41; } }
.marketing-banner, .marketing-banner-centered, .marketing-banner-centered-inverse, .marketing-banner-inverse { padding: 30px; background: #fff; margin-bottom: 30px; position: relative; border-radius: 4px; }

.marketing-banner-centered, .marketing-banner-centered-inverse { text-align: center; }

.marketing-banner-inverse, .marketing-banner-centered-inverse { background: #384047; }

.marketing-banner-heading { line-height: 1.3; }

.marketing-banner-inverse .marketing-banner-heading, .marketing-banner-centered-inverse .marketing-banner-heading { color: #fff; }

.marketing-banner-paragraph { max-width: 550px; }

.marketing-banner-heading + .marketing-banner-paragraph { margin-top: 15px; }

.marketing-banner-centered .marketing-banner-paragraph, .marketing-banner-centered-inverse .marketing-banner-paragraph { margin-left: auto; margin-right: auto; }

.marketing-banner-inverse .marketing-banner-paragraph, .marketing-banner-centered-inverse .marketing-banner-paragraph { color: rgba(255, 255, 255, 0.8); }

.marketing-banner-inverse .marketing-banner-paragraph a, .marketing-banner-centered-inverse .marketing-banner-paragraph a { color: #fff; font-weight: 500; }

.marketing-banner-inverse .marketing-banner-paragraph a:hover, .marketing-banner-centered-inverse .marketing-banner-paragraph a:hover { color: rgba(255, 255, 255, 0.8); }

.marketing-banner-inverse .marketing-banner-action, .marketing-banner-centered-inverse .marketing-banner-action { background: #fff; border-color: #fff; color: #3f8abf; }

.marketing-banner-close { position: absolute; top: 8px; right: 5px; vertical-align: middle; background: none; padding: 10px; margin: 0; border: none; outline: none; cursor: pointer; height: auto; line-height: 14px; opacity: 0.6; transition: opacity 0.3s ease; }

.marketing-banner-close:hover { opacity: 1; }

.marketing-banner-close .close-icon { fill: #384047; }

.marketing-banner-inverse .marketing-banner-close .close-icon, .marketing-banner-centered-inverse .marketing-banner-close .close-icon { fill: #fff; width: 14px 14px; }
.box { -webkit-animation: panel-fade-up 0.4s ease; -moz-animation: panel-fade-up 0.4s ease; animation: panel-fade-up 0.4s ease; position: relative; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; }

.box:before, .box:after { content: " "; display: table; }

.box:after { clear: both; }

@media screen and (max-width: 679px) { .box { padding: 20px; } }

@media screen and (min-width: 680px) { .box { padding: 30px; } }

@media screen and (max-width: 679px) { .box { margin-bottom: 20px; } }

@media screen and (min-width: 680px) { .box { margin-bottom: 30px; } }

.box.secondary { background-color: #f9fafa; }

.box.box--note { background: #f9fafa url("/assets/icons/icon-info-small-10250be439106afda650a1788979c5d22a65fbfa9d4abc08ca46a7a432b56f65.svg") no-repeat 20px center/30px 30px; padding-left: 70px; }

.box.box--inverse { background: #55616c; box-shadow: none; color: white; }

.box.box--inverse h1, .box.box--inverse h2, .box.box--inverse h3, .box.box--inverse h4, .box.box--inverse p { color: white; }

.box.box-shaded { background: #f9fafa; box-shadow: none; border-radius: 4px; padding: 15px; }

.box.box-outlined { border: 2px solid #d4d9dd; }

.mixed-box { -webkit-animation: panel-fade-up 0.4s ease; -moz-animation: panel-fade-up 0.4s ease; animation: panel-fade-up 0.4s ease; }

@media screen and (max-width: 679px) { .mixed-box { margin-bottom: 20px; } }

@media screen and (min-width: 680px) { .mixed-box { margin-bottom: 30px; } }

.mixed-box .contained { margin-bottom: 0; border-radius: 0; }

.mixed-box .box-header, .mixed-box .box-content, .mixed-box .box-actions, .mixed-box .box-alert, .mixed-box .box-footer { position: relative; background: #fff; }

@media screen and (max-width: 679px) { .mixed-box .box-header, .mixed-box .box-content, .mixed-box .box-actions, .mixed-box .box-alert, .mixed-box .box-footer { padding: 20px; } }

@media screen and (min-width: 680px) { .mixed-box .box-header, .mixed-box .box-content, .mixed-box .box-actions, .mixed-box .box-alert, .mixed-box .box-footer { padding: 30px; } }

.mixed-box .box-header:before, .mixed-box .box-header:after, .mixed-box .box-content:before, .mixed-box .box-content:after, .mixed-box .box-actions:before, .mixed-box .box-actions:after, .mixed-box .box-alert:before, .mixed-box .box-alert:after, .mixed-box .box-footer:before, .mixed-box .box-footer:after { content: " "; display: table; }

.mixed-box .box-header:after, .mixed-box .box-content:after, .mixed-box .box-actions:after, .mixed-box .box-alert:after, .mixed-box .box-footer:after { clear: both; }

.mixed-box .box-header.secondary, .mixed-box .box-content.secondary, .mixed-box .box-actions.secondary, .mixed-box .box-alert.secondary, .mixed-box .box-footer.secondary { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset; }

.mixed-box .box-header.secondary:not(.alert), .mixed-box .box-content.secondary:not(.alert), .mixed-box .box-actions.secondary:not(.alert), .mixed-box .box-alert.secondary:not(.alert), .mixed-box .box-footer.secondary:not(.alert) { background-color: #f9fafa; }

.mixed-box .page-header { margin-bottom: 20px; }

.mixed-box .box-header { border-radius: 4px 4px 0 0; }

.mixed-box .box-header.secondary { box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05) inset; }

@media screen and (min-width: 680px) { .mixed-box .box-actions { display: table; width: 100%; } }

.mixed-box .box-actions:not(.box-footer) { padding-top: 15px; padding-bottom: 15px; }

@media screen and (min-width: 680px) { .mixed-box .box-actions.box-footer { padding-top: 15px; padding-bottom: 15px; } }

@media screen and (min-width: 680px) { .mixed-box .box-actions .box-action-text, .mixed-box .box-actions .box-action-buttons { display: table-cell; vertical-align: middle; } }

.mixed-box .box-actions .box-action-text { line-height: 24px; width: 100%; padding-right: 10px; }

@media screen and (max-width: 969px) { .mixed-box .box-actions .box-action-text { font-size: 13px; } }

@media screen and (min-width: 970px) { .mixed-box .box-actions .box-action-text { font-size: 14px; } }

@media screen and (min-width: 680px) { .mixed-box .box-actions .box-action-text { margin: 0; height: 40px; } }

@media screen and (max-width: 679px) { .mixed-box .box-actions .box-action-text { margin: 0 0 10px; } }

.mixed-box .box-actions .box-action-text svg { vertical-align: middle; fill: #8e969d; margin: 0 5px 0 0; }

.mixed-box .box-actions.icons-only.success .box-action-text svg { fill: #35A961; }

.mixed-box .box-actions.icons-only.success .box-action-text strong { color: #35A961; }

.mixed-box .box-actions.icons-only.error .box-action-text { -webkit-animation: shake 325ms ease-in-out; -moz-animation: shake 325ms ease-in-out; animation: shake 325ms ease-in-out; }

.mixed-box .box-actions.icons-only.error .box-action-text svg { fill: #e21919; }

.mixed-box .box-actions.icons-only.error .box-action-text strong.error-text { color: #e21919; }

.mixed-box .box-actions .box-action-buttons { white-space: nowrap; }

@media screen and (max-width: 679px) { .mixed-box .box-actions .box-action-buttons .button:last-child { width: 100%; margin-top: 10px; display: block; } }

.mixed-box .box-actions.alert { margin: 0; border-radius: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset; }

.mixed-box .box-actions.alert.info, .mixed-box .box-actions.alert.icons-only { background-color: #f9fafa; }

.mixed-box .box-footer { border-radius: 0 0 4px 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); }

.mixed-box .box-footer.secondary { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 2px 0 rgba(0, 0, 0, 0.1); }

@media screen and (min-width: 680px) { .mixed-box .box-footer.secondary { padding-top: 15px; padding-bottom: 15px; } }

.mixed-box .box-footer.secondary .icon-info { float: left; margin: 0 12px 5px 0; position: relative; top: 3px; }

.mixed-box .box-footer.secondary p { font-size: 13px; line-height: 1.5; text-align: left; margin-bottom: 2px; }

.mixed-box .box-footer.secondary p a { color: #1a2126; font-weight: 700; }

.mixed-box .box-footer.secondary p strong { font-weight: 700; }

.contained { background: #fff; padding: 30px 15px; margin-bottom: 30px; position: relative; border-radius: 4px; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1); }

.contained:before, .contained:after { content: " "; display: table; }

.contained:after { clear: both; }

@media screen and (max-width: 679px) { .contained { padding: 20px 5px; } }

.contained.secondary { padding: 20px; }

.contained.secondary .disclaimer { padding: 15px 20px 15px 65px; margin: 0 -20px -20px -20px; }

.contained.secondary .disclaimer .icon.icon-info { text-indent: -9999px; }

.contained.secondary .disclaimer p { margin-bottom: 0; }
.breadcrumb { margin-bottom: 15px; }

.breadcrumb-title { font-size: 16px; line-height: 1; color: #1a2126; }

.breadcrumb-title:hover { color: #050708; }

.breadcrumb-title-icon { fill: #3f505d; margin-right: 7px; }

.breadcrumb-title-link { color: #1a2126; }

.breadcrumb-title-link:hover { color: #050708; }
.chart { position: relative; }

.chartist-tooltip { position: absolute; z-index: 1000; }

.chartist-tooltip-box { position: relative; background-color: #384047; color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); border-radius: 4px; font-size: 12px; font-weight: 700; text-align: center; }

@media screen and (min-width: 680px) { .chartist-tooltip-box { padding: 10px 20px; line-height: 20px; } }

@media screen and (max-width: 679px) { .chartist-tooltip-box { padding: 8px 15px; line-height: 18px; } }

.chart-dark .chartist-tooltip-box { background: #fff; color: #1a2126; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.15); }

.chartist-tooltip-box:after { position: absolute; z-index: 1001; content: ""; background: #384047; width: 12px; height: 12px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.chart-dark .chartist-tooltip-box:after { background-color: #fff; }

.ct-chart-donut { display: block; }

.ct-chart-donut, .ct-slice-donut { transition: stroke-dashoffset 1s cubic-bezier(0.23, 1, 0.32, 1); }

.chart-dark .ct-grid { stroke: rgba(0, 0, 0, 0.4); }

.ct-circle { opacity: 0; animation: fade-in 500ms ease 2s forwards; }

.ct-point { transition: stroke-width 300ms 0s ease; }

.ct-point.ct-circle:hover { stroke-width: 4px; }

.ct-point:not(.ct-circle):hover { stroke-width: 12px; }

.ct-series-goal .ct-line { stroke: #1a2126; }

.ct-label { font-weight: 700; position: relative; }

.chart-dark .ct-label { color: #242e35; }

.ct-label.ct-vertical { bottom: -6px; left: -10px; }

.ct-label.ct-horizontal { display: block !important; bottom: -10px; -ms-transform: translatex(-50%); -moz-transform: translatex(-50%); -webkit-transform: translatex(-50%); transform: translatex(-50%); text-align: center !important; text-anchor: middle !important; }
.radio-button, .checkbox { position: relative; list-style: none; }

.radio-button-group:not(.tight-padding):not(.with-top-border), .checkbox-group:not(.tight-padding):not(.with-top-border) { margin-top: -18px; }

.radio-button-group:not(.tight-padding):not(.with-bottom-border), .checkbox-group:not(.tight-padding):not(.with-bottom-border) { margin-bottom: -18px; }

.radio-button-group.tight-padding:not(.with-top-border):not(.with-top-margin), .checkbox-group.tight-padding:not(.with-top-border):not(.with-top-margin) { margin-top: -8px; }

.radio-button-group.tight-padding:not(.with-bottom-border):not(.with-bottom-margin), .checkbox-group.tight-padding:not(.with-bottom-border):not(.with-bottom-margin) { margin-bottom: -8px; }

.radio-button-group.with-top-margin, .checkbox-group.with-top-margin { margin-top: 18px; }

.radio-button-group.with-bottom-margin, .checkbox-group.with-bottom-margin { margin-bottom: 18px; }

.radio-button-group + .radio-button-group-heading, .checkbox-group + .radio-button-group-heading, .radio-button-group + .checkbox-group-heading, .checkbox-group + .checkbox-group-heading { margin-top: 50px; }

.radio-button-group-heading, .checkbox-group-heading { border-bottom: 2px solid #f0f2f4; padding: 0 0 15px; margin-bottom: 20px; }

.radio-button-group-heading h3, .checkbox-group-heading h3 { color: #101417; font-size: 18px; line-height: 1; }

.radio-button-group-heading p, .checkbox-group-heading p { color: #2b363e; margin: 7px 0 0; }

.with-top-border .radio-button:first-child, .with-top-border .checkbox:first-child { border-top: 1px solid rgba(56, 64, 71, 0.06); }

.with-bottom-border .radio-button:last-child, .with-bottom-border .checkbox:last-child { border-bottom: 1px solid rgba(56, 64, 71, 0.06); }

.radio-button:not(:last-child), .checkbox:not(:last-child) { border-bottom: 1px solid rgba(56, 64, 71, 0.06); }

.radio-button input, .checkbox input { display: none; }

.radio-button span:before, .radio-button span:after, .radio-button svg.checkmark-icon, .checkbox span:before, .checkbox span:after, .checkbox svg.checkmark-icon { content: ""; position: absolute; display: block; transition: background 300ms 0s ease, border-color 300ms 0s ease, opacity 300ms 0s ease, fill 300ms 0s ease; }

:not(.with-description).radio-button span:before, :not(.with-description).radio-button span:after, :not(.with-description).radio-button svg.checkmark-icon, :not(.with-description).checkbox span:before, :not(.with-description).checkbox span:after, :not(.with-description).checkbox svg.checkmark-icon { top: 50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

.radio-button span:before, .checkbox span:before { left: 0; border: 2px solid #4e5a64; width: 20px; height: 20px; }

.with-description.radio-button span:before, .with-description.checkbox span:before { top: 20px; }

.tight-padding .with-description.radio-button span:before, .tight-padding .with-description.checkbox span:before { top: 10px; }

.with-description.radio-button span:after, .with-description.checkbox span:after { top: 27px; }

.tight-padding .with-description.radio-button span:after, .tight-padding .with-description.checkbox span:after { top: 17px; }

.radio-button svg.checkmark-icon, .checkbox svg.checkmark-icon { left: 5px; fill: #4e5a64; }

.with-description.radio-button svg.checkmark-icon, .with-description.checkbox svg.checkmark-icon { top: 26px; }

.tight-padding .with-description.radio-button svg.checkmark-icon, .tight-padding .with-description.checkbox svg.checkmark-icon { top: 16px; }

.radio-button .input-checkbox-radio:not(:checked) ~ span:after, .radio-button .input-checkbox-radio:not(:checked) ~ svg.checkmark-icon, .checkbox .input-checkbox-radio:not(:checked) ~ span:after, .checkbox .input-checkbox-radio:not(:checked) ~ svg.checkmark-icon { opacity: 0; }

.radio-button .input-checkbox-radio:checked ~ span:before, .checkbox .input-checkbox-radio:checked ~ span:before { border-color: #35A961; }

.with-alert-colors .radio-button .input-checkbox-radio:checked ~ span:before, .with-alert-colors .checkbox .input-checkbox-radio:checked ~ span:before { border-color: #e21919; }

.muted-colors .radio-button .input-checkbox-radio:checked ~ span:before, .muted-colors .checkbox .input-checkbox-radio:checked ~ span:before { border-color: #1a2126; }

.radio-button .input-checkbox-radio:checked ~ span:after, .checkbox .input-checkbox-radio:checked ~ span:after { background: #35A961; }

.with-alert-colors .radio-button .input-checkbox-radio:checked ~ span:after, .with-alert-colors .checkbox .input-checkbox-radio:checked ~ span:after { background: #e21919; }

.muted-colors .radio-button .input-checkbox-radio:checked ~ span:after, .muted-colors .checkbox .input-checkbox-radio:checked ~ span:after { background: #1a2126; }

.radio-button .input-checkbox-radio:checked ~ svg.checkmark-icon, .checkbox .input-checkbox-radio:checked ~ svg.checkmark-icon { fill: #35A961; }

.with-alert-colors .radio-button .input-checkbox-radio:checked ~ svg.checkmark-icon, .with-alert-colors .checkbox .input-checkbox-radio:checked ~ svg.checkmark-icon { fill: #e21919; }

.muted-colors .radio-button .input-checkbox-radio:checked ~ svg.checkmark-icon, .muted-colors .checkbox .input-checkbox-radio:checked ~ svg.checkmark-icon { fill: #1a2126; }

.radio-button:not(:hover) .input-checkbox-radio:not(:checked) ~ span:before, .radio-button .disabled span:before, .checkbox:not(:hover) .input-checkbox-radio:not(:checked) ~ span:before, .checkbox .disabled span:before { opacity: 0.45; }

.radio-button label, .checkbox label { display: block; cursor: pointer; padding: 18px 35px 18px 34px; }

.radio-button label.disabled, .checkbox label.disabled { opacity: .5; }

.tight-padding .radio-button label, .tight-padding .checkbox label { padding-top: 8px; padding-bottom: 8px; }

.radio-button span, .checkbox span { color: #1a2126; font-size: 14px; line-height: 22px; transition: color 300ms 0s ease; }

.radio-button .input-checkbox-radio:checked ~ span, .checkbox .input-checkbox-radio:checked ~ span { font-weight: 700; color: #35A961; }

.with-alert-colors .radio-button .input-checkbox-radio:checked ~ span, .with-alert-colors .checkbox .input-checkbox-radio:checked ~ span { color: #e21919; }

.muted-colors .radio-button .input-checkbox-radio:checked ~ span, .muted-colors .checkbox .input-checkbox-radio:checked ~ span { color: #1a2126; }

.radio-button:hover span, .checkbox:hover span { color: #101417; }

.radio-button p, .radio-button .description, .checkbox p, .checkbox .description { font-size: 13px; margin: 3px 0 0; color: #2b363e; }

.radio-button-info, .checkbox-info { position: absolute; top: 50%; right: 0; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

@media screen and (min-width: 970px) { .radio-button-tooltip, .checkbox-tooltip { position: absolute; background: #fff; text-align: center; padding: 15px; width: 300px; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #1a2126; left: 50%; bottom: 100%; } }

@media screen and (max-width: 969px) { .radio-button-tooltip, .checkbox-tooltip { position: absolute; background: #fff; text-align: center; padding: 15px; width: 300px; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); color: #1a2126; top: 50%; right: 100%; } }

@media screen and (min-width: 970px) { .radio-button-tooltip:after, .checkbox-tooltip:after { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; } }

@media screen and (max-width: 969px) { .radio-button-tooltip:after, .checkbox-tooltip:after { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; left: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); top: 50%; border-radius: 0 3px 0 0; } }

.radio-button-tooltip p, .checkbox-tooltip p { font-size: 13px; color: 14px; margin: 0; }

.radio-button svg.help-outline-24-icon, .checkbox svg.help-outline-24-icon { cursor: default; fill: #8e969d; }

.radio-button svg.help-outline-24-icon:hover, .checkbox svg.help-outline-24-icon:hover { fill: #6E7881; }

@media screen and (min-width: 970px) { .radio-button svg.help-outline-24-icon:hover ~ .checkbox-tooltip, .radio-button svg.help-outline-24-icon:hover ~ .radio-button-tooltip, .checkbox svg.help-outline-24-icon:hover ~ .checkbox-tooltip, .checkbox svg.help-outline-24-icon:hover ~ .radio-button-tooltip { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); } }

@media screen and (max-width: 969px) { .radio-button svg.help-outline-24-icon:hover ~ .checkbox-tooltip, .radio-button svg.help-outline-24-icon:hover ~ .radio-button-tooltip, .checkbox svg.help-outline-24-icon:hover ~ .checkbox-tooltip, .checkbox svg.help-outline-24-icon:hover ~ .radio-button-tooltip { visibility: visible; opacity: 1; -ms-transform: translate(-10px, -50%); -moz-transform: translate(-10px, -50%); -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); } }

.radio-button span:before, .radio-button span:after { border-radius: 50%; }

.radio-button span:after { background: #4e5a64; width: 6px; height: 6px; top: 4px; left: 7px; }

.checkbox span:before { border-radius: 4px; }
.circle-progress { overflow: visible; fill: none; stroke-width: 2px; stroke-dasharray: 0; stroke-dashoffset: 0; transition: stroke-dashoffset 300ms ease-in-out; -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.ff .circle-progress { -webkit-animation: rotate-90 0s 1 linear forwards; -moz-animation: rotate-90 0s 1 linear forwards; animation: rotate-90 0s 1 linear forwards; }

@-webkit-keyframes rotate-90 { to { -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg); } }

@-moz-keyframes rotate-90 { to { -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg); } }

@keyframes rotate-90 { to { -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg); } }

.circle-progress-base, .circle-progress-base-overlay { stroke: #dfe3e4; transition: stroke 300ms 0s ease; }

.circle-progress-bar { stroke: #5fcf80; }
.content-block-list { clear: both; }

.content-block-list:before, .content-block-list:after { content: " "; display: table; }

.content-block-list:after { clear: both; }

.content-block-list > li { list-style-type: none; margin-bottom: 30px; }

@media screen and (max-width: 679px) { .content-block-list > li { margin-bottom: 15px; } }

.content-block { display: block; overflow: hidden; position: relative; z-index: 0; border-radius: 5px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); }

.content-block.in-progress { border-radius: 5px 5px 0 0; }

#library-pjax .content-block.in-progress { border-radius: 5px; }

.content-block.in-progress .achievement-hero { border-radius: 0 5px 0 0; }

.content-block.complete .content-meta strong { color: #5fcf80; }

.content-block.complete .content-meta h3 { color: #2b363e; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }

.content-block.complete .achievement-hero img { opacity: .25; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }

.content-block.complete:hover .content-meta h3 { color: #384047; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; }

.content-block.complete:hover .achievement-hero img { opacity: 1; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }

@media screen and (max-width: 679px) { .content-block.track .content-meta .button-resume { margin-right: 0; } }

.content-meta { background: #fff; height: 220px; padding: 30px 30px 75px; position: relative; box-sizing: border-box; }

@media screen and (max-width: 679px) { .content-meta { min-height: 200px; padding: 20px 20px 65px; } }

.content-meta:after { content: ""; width: 1px; background: #fff; display: block; position: absolute; top: 60px; bottom: 60px; right: 0; opacity: .4; }

.content-meta .icon-github { float: right; }

.content-meta .title { display: block; }

.content-meta strong { font-size: 14px; font-weight: 700; color: #2b363e; margin-bottom: 7px; display: block; }

@media screen and (max-width: 679px) { .content-meta strong { font-size: 12px; } }

.content-meta h3 { line-height: 1.3; font-weight: 700; font-size: 18px; color: #384047; max-height: 70px; overflow: hidden; margin-bottom: 5px; }

@media screen and (max-width: 679px) { .content-meta h3 { font-size: 16px; } }

.content-meta p { font-size: 12px; color: #2b363e; line-height: 1.3; margin-bottom: 0; }

.content-meta p strong { font-size: 12px; font-weight: 700; display: inline; color: #2b363e; }

.content-meta .description { font-size: 14px; color: #1a2126; margin-top: 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.2; }

.content-meta .icon-complete { float: right; margin-left: 20px; }

.content-meta .content-actions-container { position: absolute; bottom: 30px; right: 30px; left: 30px; }

@media screen and (max-width: 679px) { .content-meta .content-actions-container { bottom: 20px; right: 20px; left: 20px; } }

.content-meta .content-actions-container .button-resume { margin-right: 15px; }

.content-meta .content-actions-container .progress-container { height: 10px; margin-top: 15px; }

.content-meta .content-actions-container .icon-complete, .content-meta .content-actions-container .icon-points { float: left; margin: 2px 10px 0 0; }

.content-meta .content-actions-container strong { color: #384047 !important; margin-bottom: 2px; font-size: 14px; }

.content-meta .content-actions-container p { font-size: 12px; }

.content-meta > a:hover strong, .content-meta > a:hover p { color: #1a2126; }

.content-meta > a:hover h3 { color: #0b0d0e; }

.content-meta .content-stats li { list-style-type: none; float: left; padding-right: 15px; margin-right: 15px; border-right: 1px solid #d4d9dd; }

.content-meta .content-stats li:last-child { border: none; }

.content-meta .content-stats li strong { font-size: 14px; font-weight: 700; color: #384047; }

.content-meta .content-stats li p { font-size: 12px; color: #2b363e; margin: 0; float: none; font-weight: 400; }

.content-meta .content-stats p { font-weight: 700; float: right; font-size: 14px; margin: 10px 0 0; color: #c6ccd2; }
.data-item { padding: 0 0 8px; margin-bottom: 18px; border-bottom: 1px solid #edeff0; word-wrap: break-word; }

.data-item:before, .data-item:after { content: " "; display: table; }

.data-item:after { clear: both; }

.data-item a { color: #3f8abf; }
.deprecated-avatar { background-color: #d4d9dd; width: 40px; height: 40px; overflow: hidden; border: 5px solid #edeff0; border-radius: 50%; background-position: center; background-size: contain; display: inline-block; }

.deprecated-avatar img { width: 50px; display: none; }

.deprecated-avatar-large { width: 90px; height: 90px; }

.deprecated-avatar.staff { border-color: #5fcf80; }

.deprecated-avatar.moderator { border-color: #ff9f1f; }
.disclaimer { background: #f9fafa; border-top: 1px solid #e8ebed; padding: 15px 30px 15px 75px; margin: 0 -30px -30px -30px; overflow: hidden; clear: both; box-sizing: border-box; border-radius: 0 0 5px 5px; }

@media screen and (max-width: 679px) { .disclaimer { padding: 15px 20px 15px 75px; margin: 0 -20px -20px -20px; } }

.disclaimer .icon { float: left; margin: 0 0 0 -45px; }

.disclaimer p { margin: 0; line-height: 1.6; font-size: 13px; color: #1a2126; }

.disclaimer strong { font-weight: 700; }

.disclaimer a { color: #1a2126; font-weight: 700; }

.disclaimer .button-container { text-align: right; margin: -5px 0; font-size: 0; }

.disclaimer .button-container .button { margin: 0 0 0 10px; }
@charset "UTF-8";
.card { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; position: relative; padding: 0 15px; transition: transform 50ms 0s ease; -webkit-animation: card-fade-up 0.5s ease; -moz-animation: card-fade-up 0.5s ease; animation: card-fade-up 0.5s ease; }

@media screen and (max-width: 679px) { .card { margin-bottom: 20px; } }

@media screen and (min-width: 680px) { .card { margin-bottom: 30px; } }

@-webkit-keyframes card-fade-up { 0% { opacity: 0;
    -ms-transform: translatey(20px);
    -moz-transform: translatey(20px);
    -webkit-transform: translatey(20px);
    transform: translatey(20px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@-moz-keyframes card-fade-up { 0% { opacity: 0;
    -ms-transform: translatey(20px);
    -moz-transform: translatey(20px);
    -webkit-transform: translatey(20px);
    transform: translatey(20px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@keyframes card-fade-up { 0% { opacity: 0;
    -ms-transform: translatey(20px);
    -moz-transform: translatey(20px);
    -webkit-transform: translatey(20px);
    transform: translatey(20px); }
  100% { opacity: 1;
    -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

.modal .card { z-index: 500; width: auto; }

.card-list .card:active { -ms-transform: translatey(3px); -moz-transform: translatey(3px); -webkit-transform: translatey(3px); transform: translatey(3px); }

.card:hover, .card:active { z-index: 10; }

.card .hidden { display: none; }

.card.current-card, .card.variable-height { width: 100%; }

@media screen and (min-width: 750px) and (max-width: 1259px) { .card { width: 50%; float: left; }
  .card:nth-child(even) { padding-left: 15px; }
  .card:nth-child(even) .card-tags, .card:nth-child(even) .card-actions { left: 45px; }
  .card:nth-child(even) .confirmation-tarp { left: 15px; }
  .card:nth-child(odd) { padding-right: 15px; }
  .card:nth-child(odd) .card-actions { right: 45px; }
  .card:nth-child(odd).current-card .actions { right: 30px; }
  .card:nth-child(odd) .confirmation-tarp { right: 15px; }
  .card.current-card { width: 100%; padding-right: 0; } }

@media screen and (min-width: 1260px) { .card { float: left; width: 33.3%; } }

.card-list-single .card, .card-description-show .card { width: 100%; }

.card-list { list-style: none; margin: 0 -15px; }

.card-list:before, .card-list:after { content: " "; display: table; }

.card-list:after { clear: both; }

@media screen and (min-width: 1300px) { .card-list.truncated .card:nth-child(4) { display: none; } }

.card.track.variable-height { margin-bottom: 10px; }

.card.track:not(.variable-height) { margin-bottom: 40px; }

.card.track .card-tags { right: 45px; left: auto; }

.card.track .card-actions .resume { display: inherit; }

.card.track.premium-video .card-tags { right: 95px; }

.card.track.current-card > a { padding-bottom: 90px; }

.card.track .track-due-date { float: right; }

.card.track.expired .card-progress { opacity: .5; }

.card-box { position: relative; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); border-radius: 5px 5px 4px 4px; display: block; min-height: 310px; padding: 88px 30px 30px; }

.card-box:before, .card-box:after { content: " "; display: table; }

.card-box:after { clear: both; }

.card-box:hover, .card-box-hover { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }

.card-box.card-link { font-weight: 400; }

.card-box:not(.has-topic-background-color) { background: #fff; }

.card-techdegree .card-box { transition: background-color 300ms 0s ease; }

.card-techdegree .card-box:before { display: block; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url(/assets/global/education-cards/techdegree-bg-eacf663b922381ef3edabda2c4fb9ffcc4dff91c1f3943ce4b478335df7aad5c.jpg); background-size: cover; opacity: .1; }

.modal .card-box.trailer { padding-bottom: 90px; }

.modal .card-box.trailer .estimate { display: none; }

.recommended-card .card-box { padding: 0px 30px; border-radius: 4px 4px 0 0; min-height: 0; }

.card-trailer .card-box { padding-top: 265px; }

.variable-height .card-box { padding-bottom: 100px; }

a.card-box { cursor: pointer; }

.track .card-box:after, .track .card-box:before { content: ""; background: #fff; height: 5px; display: block; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.07) inset, 0 2px 0 rgba(0, 0, 0, 0.07); border-radius: 0 0 4px 4px; position: absolute; top: 100%; right: 10px; left: 10px; transition: .1s ease-in-out; }

.track .card-box:before { height: 10px; left: 20px; right: 20px; }

.track .card-box.card-link:hover:after { height: 10px; }

.track .card-box.card-link:hover:before { height: 20px; }

.card-techdegree .card-type, .card-techdegree .card-description, .card-techdegree .card-description-markdown, .card-techdegree .card-title { color: #fff; }

.card-hero { position: relative; margin: -90px -30px 30px; height: 211px; border-radius: 4px 4px 0 0; text-align: center; transition: background-color 300ms 0s ease; }

.card-hero:before { display: block; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url(/assets/global/education-cards/techdegree-bg-eacf663b922381ef3edabda2c4fb9ffcc4dff91c1f3943ce4b478335df7aad5c.jpg); background-size: cover; opacity: .1; }

.card-hero .seal { width: 134px; height: 134px; display: inline-block; fill: #fff; position: absolute; top: 50%; left: 50%; z-index: 2; margin: -67px 0 0 -67px; }

.card-hero .seal-interior, .card-hero .seal-leaf-cap-interior { display: none; }

.card-hero .seal-cap-glow { opacity: .4; }

.card-cta { float: right; margin: 0 0 0 10px; font-size: 13px; }

.card-type { display: block; margin: 0 0 7px; line-height: 12px; font-size: 14px; color: #1a2126; }

.card-techdegree .card-type { opacity: 0.7; }

.card-experiment-b .card-type { font-size: 13px; margin: 0 0 5px; }

.card-title { font-size: 18px; line-height: 24px; letter-spacing: normal; margin: 0 0 20px; color: #101417; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card-experiment-b .card-title { margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card-techdegree .card-title { opacity: 1; }

.recommended-card .card-title { margin-bottom: 0; overflow: visible; }

.card-description, .card-description-markdown { position: relative; z-index: 0; font-size: 14px; overflow: hidden; margin: 0; color: #2b363e; font-weight: 400; }

.card-techdegree .card-description, .card-techdegree .card-description-markdown { opacity: 0.8; }

.modal .card-description, .modal .card-description-markdown { color: #1a2126; }

.card-description-salary { font-weight: 700; }

.card-description a, .card-description-markdown a { display: inline; font-weight: 700; }

.topic-ai.card-description a, .topic-ai.card-description-markdown a { color: #733A88; }

.topic-ai .card-description a, .topic-ai .card-description-markdown a { color: #733A88; }

.topic-back-end.card-description a, .topic-back-end.card-description-markdown a { color: #008297; }

.topic-back-end .card-description a, .topic-back-end .card-description-markdown a { color: #008297; }

.topic-data.card-description a, .topic-data.card-description-markdown a { color: #9F4B84; }

.topic-data .card-description a, .topic-data .card-description-markdown a { color: #9F4B84; }

.topic-design.card-description a, .topic-design.card-description-markdown a { color: #4a4290; }

.topic-design .card-description a, .topic-design .card-description-markdown a { color: #4a4290; }

.topic-experimental.card-description a, .topic-experimental.card-description-markdown a { color: #733a88; }

.topic-experimental .card-description a, .topic-experimental .card-description-markdown a { color: #733a88; }

.topic-front-end.card-description a, .topic-front-end.card-description-markdown a { color: #3659a2; }

.topic-front-end .card-description a, .topic-front-end .card-description-markdown a { color: #3659a2; }

.topic-fundamentals.card-description a, .topic-fundamentals.card-description-markdown a { color: #9b3b5a; }

.topic-fundamentals .card-description a, .topic-fundamentals .card-description-markdown a { color: #9b3b5a; }

.topic-mobile.card-description a, .topic-mobile.card-description-markdown a { color: #30826C; }

.topic-mobile .card-description a, .topic-mobile .card-description-markdown a { color: #30826C; }

.topic-internal.card-description a, .topic-internal.card-description-markdown a { color: #55616c; }

.topic-internal .card-description a, .topic-internal .card-description-markdown a { color: #55616c; }

.topic-foundations.card-description a, .topic-foundations.card-description-markdown a { color: #004e61; }

.topic-foundations .card-description a, .topic-foundations .card-description-markdown a { color: #004e61; }

.topic-undefined.card-description a, .topic-undefined.card-description-markdown a { color: #55616c; }

.topic-undefined .card-description a, .topic-undefined .card-description-markdown a { color: #55616c; }

.topic-college-credit.card-description a, .topic-college-credit.card-description-markdown a { color: #3887c8; }

.topic-college-credit .card-description a, .topic-college-credit .card-description-markdown a { color: #3887c8; }

.topic-no-code.card-description a, .topic-no-code.card-description-markdown a { color: #31AF7F; }

.topic-no-code .card-description a, .topic-no-code .card-description-markdown a { color: #31AF7F; }

.topic-security.card-description a, .topic-security.card-description-markdown a { color: #409BE9; }

.topic-security .card-description a, .topic-security .card-description-markdown a { color: #409BE9; }

.topic-game-development.card-description a, .topic-game-development.card-description-markdown a { color: #856fc4; }

.topic-game-development .card-description a, .topic-game-development .card-description-markdown a { color: #856fc4; }

.topic-treehouse-resources.card-description a, .topic-treehouse-resources.card-description-markdown a { color: #5fcf80; }

.topic-treehouse-resources .card-description a, .topic-treehouse-resources .card-description-markdown a { color: #5fcf80; }

.topic-coding-for-kids.card-description a, .topic-coding-for-kids.card-description-markdown a { color: #F36C27; }

.topic-coding-for-kids .card-description a, .topic-coding-for-kids .card-description-markdown a { color: #F36C27; }

.card:not(.variable-height) .card-description, .card:not(.variable-height) .card-description-markdown { max-height: 40px; }

.webkit .card:not(.variable-height) .card-description, .webkit .card:not(.variable-height) .card-description-markdown { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

html:not(.webkit) .card:not(.variable-height):not(.card-techdegree) .card-description:after, html:not(.webkit) .card:not(.variable-height):not(.card-techdegree) .card-description-markdown:after { position: absolute; bottom: 0; right: 0; height: 16px; width: 80px; content: ""; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff 40%, #fff); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 40%, #fff); }

.card-description-markdown hr { display: none; }

.card-description p:last-child, .card-description-markdown p:last-child { margin: 0; }

.card .current-step { position: absolute; left: 30px; right: 30px; bottom: 80px; margin: 0; height: 19px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #2b363e; }

.card .current-step svg { position: relative; vertical-align: middle; height: 16px; width: 16px; margin-right: 5px; top: -1px; fill: #2b363e; }

.safari .card .current-step svg { top: -2px; }

.card-progress { position: absolute; top: 0; right: 0; left: 0; border-radius: 4px 4px 0 0; color: #fff; display: flex; justify-content: space-between; align-items: center; flex-direction: row; justify-items: center; height: 58px; line-height: 58px; padding: 0 30px; background-color: #55616c; transition: background-color 300ms 0s ease; }

.topic-ai.card-progress { background-color: #733A88; }

.topic-ai .card-progress { background-color: #733A88; }

.topic-back-end.card-progress { background-color: #008297; }

.topic-back-end .card-progress { background-color: #008297; }

.topic-data.card-progress { background-color: #9F4B84; }

.topic-data .card-progress { background-color: #9F4B84; }

.topic-design.card-progress { background-color: #4a4290; }

.topic-design .card-progress { background-color: #4a4290; }

.topic-experimental.card-progress { background-color: #733a88; }

.topic-experimental .card-progress { background-color: #733a88; }

.topic-front-end.card-progress { background-color: #3659a2; }

.topic-front-end .card-progress { background-color: #3659a2; }

.topic-fundamentals.card-progress { background-color: #9b3b5a; }

.topic-fundamentals .card-progress { background-color: #9b3b5a; }

.topic-mobile.card-progress { background-color: #30826C; }

.topic-mobile .card-progress { background-color: #30826C; }

.topic-internal.card-progress { background-color: #55616c; }

.topic-internal .card-progress { background-color: #55616c; }

.topic-foundations.card-progress { background-color: #004e61; }

.topic-foundations .card-progress { background-color: #004e61; }

.topic-undefined.card-progress { background-color: #55616c; }

.topic-undefined .card-progress { background-color: #55616c; }

.topic-college-credit.card-progress { background-color: #3887c8; }

.topic-college-credit .card-progress { background-color: #3887c8; }

.topic-no-code.card-progress { background-color: #31AF7F; }

.topic-no-code .card-progress { background-color: #31AF7F; }

.topic-security.card-progress { background-color: #409BE9; }

.topic-security .card-progress { background-color: #409BE9; }

.topic-game-development.card-progress { background-color: #856fc4; }

.topic-game-development .card-progress { background-color: #856fc4; }

.topic-treehouse-resources.card-progress { background-color: #5fcf80; }

.topic-treehouse-resources .card-progress { background-color: #5fcf80; }

.topic-coding-for-kids.card-progress { background-color: #F36C27; }

.topic-coding-for-kids .card-progress { background-color: #F36C27; }

.card-techdegree .card-progress { background: none; border-bottom: 2px solid rgba(255, 255, 255, 0.1); }

.card-progress .modal-close { line-height: 0px; padding: 5px; background: rgba(0, 0, 0, 0.15); border-radius: 3px; z-index: 1; border: 0; cursor: pointer; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }

.card-progress .modal-close:hover { background: rgba(0, 0, 0, 0.25); }

.card-progress .modal-close svg { fill: #fff; width: 12px; height: 12px; top: 0; margin: 0; }

.card-stages { display: inline-block; margin: 0; overflow: hidden; width: 100%; height: 10px; -webkit-mask-image: linear-gradient(to left, transparent 0%, black 30%); mask-image: linear-gradient(to left, transparent 0%, black 30%); }

.upcoming .card-stages, .completed .card-stages, .conference .card-stages { display: none; }

.card-stages li { background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 100px; text-indent: -100px; overflow: hidden; display: block; float: left; height: 10px; margin: 0 7px 0 0 !important; width: 10px; }

.card-stages li.current { border-color: #fff; }

.card-stages li.complete { background-color: #fff; border-color: #fff; }

.card-icon { fill: #fff; height: 18px; width: 18px; margin-right: 15px; }

.card-estimate { color: #fff; font-size: 14px; font-weight: 700; margin-left: auto; text-align: right; white-space: nowrap; }

.card-trailer .card-estimate { display: none; }

.upcoming .card-estimate { display: none; }

.card-recommendation-thumb { position: relative; display: block; padding: 0; margin: 0 -30px 0; min-height: 250px; text-align: center; overflow: hidden; z-index: 1; box-shadow: none; border-radius: 4px 4px 0 0; }

.card-recommendation-thumb img { width: 100%; opacity: .1; }

.card-recommendation-meta { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.card-recommendation-meta h3 { font-size: 18px; margin: 0 0 30px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.card-recommendation-meta strong { font-size: 14px; margin-bottom: 5px; color: #fff; opacity: .5; }

.card-recommendation-meta .loading-circle { fill: rgba(255, 255, 255, 0.5); }

.card-recommendation-meta .loading-quarter-circle { fill: #fff; }

.card-recommendation { margin: 0; text-align: left; font-weight: 400; font-size: 12px; padding-left: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0 0 4px 4px; padding: 20px 15px 20px 35px; color: #2b363e; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1); }

.card-recommendation:hover { overflow: auto; white-space: normal; text-overflow: clip; }

.card-recommendation strong { display: inline; color: static; }

.card-recommendation .right-arrow-icon { position: relative; margin: 3px 0 0 -20px; float: left; }

.card-course-trailer { margin: -30px -30px 30px; background: #384047; }

.card-course-trailer .mejs-container, .card-course-trailer .mejs-container .mejs-mediaelement video { border-radius: 0 !important; }

.card-meta { display: block; }

.card-tags { position: absolute; bottom: 30px; left: 45px; right: 125px; height: 36px; margin: 0; overflow: hidden; z-index: 2; white-space: nowrap; transition: opacity 0.15s ease 0.15s; }

.card-tags:hover { overflow: visible; }

.completed .card-tags { display: none; }

.fade-out-quick .card-tags { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; }

.card-tags li { margin: 0 10px 0 0; }

.card-tags li.new-content > a, .card-tags li.new-content > span, .card-tags li.pro-content > a, .card-tags li.pro-content > span, .card-tags li.techdegree-content > a, .card-tags li.techdegree-content > span { color: #fff; }

.topic-ai.card-tags li.new-content > a, .topic-ai.card-tags li.new-content > span, .topic-ai.card-tags li.pro-content > a, .topic-ai.card-tags li.pro-content > span, .topic-ai.card-tags li.techdegree-content > a, .topic-ai.card-tags li.techdegree-content > span { background-color: #733A88; border-color: #733A88; }

.topic-ai .card-tags li.new-content > a, .topic-ai .card-tags li.new-content > span, .topic-ai .card-tags li.pro-content > a, .topic-ai .card-tags li.pro-content > span, .topic-ai .card-tags li.techdegree-content > a, .topic-ai .card-tags li.techdegree-content > span { background-color: #733A88; border-color: #733A88; }

.topic-back-end.card-tags li.new-content > a, .topic-back-end.card-tags li.new-content > span, .topic-back-end.card-tags li.pro-content > a, .topic-back-end.card-tags li.pro-content > span, .topic-back-end.card-tags li.techdegree-content > a, .topic-back-end.card-tags li.techdegree-content > span { background-color: #008297; border-color: #008297; }

.topic-back-end .card-tags li.new-content > a, .topic-back-end .card-tags li.new-content > span, .topic-back-end .card-tags li.pro-content > a, .topic-back-end .card-tags li.pro-content > span, .topic-back-end .card-tags li.techdegree-content > a, .topic-back-end .card-tags li.techdegree-content > span { background-color: #008297; border-color: #008297; }

.topic-data.card-tags li.new-content > a, .topic-data.card-tags li.new-content > span, .topic-data.card-tags li.pro-content > a, .topic-data.card-tags li.pro-content > span, .topic-data.card-tags li.techdegree-content > a, .topic-data.card-tags li.techdegree-content > span { background-color: #9F4B84; border-color: #9F4B84; }

.topic-data .card-tags li.new-content > a, .topic-data .card-tags li.new-content > span, .topic-data .card-tags li.pro-content > a, .topic-data .card-tags li.pro-content > span, .topic-data .card-tags li.techdegree-content > a, .topic-data .card-tags li.techdegree-content > span { background-color: #9F4B84; border-color: #9F4B84; }

.topic-design.card-tags li.new-content > a, .topic-design.card-tags li.new-content > span, .topic-design.card-tags li.pro-content > a, .topic-design.card-tags li.pro-content > span, .topic-design.card-tags li.techdegree-content > a, .topic-design.card-tags li.techdegree-content > span { background-color: #4a4290; border-color: #4a4290; }

.topic-design .card-tags li.new-content > a, .topic-design .card-tags li.new-content > span, .topic-design .card-tags li.pro-content > a, .topic-design .card-tags li.pro-content > span, .topic-design .card-tags li.techdegree-content > a, .topic-design .card-tags li.techdegree-content > span { background-color: #4a4290; border-color: #4a4290; }

.topic-experimental.card-tags li.new-content > a, .topic-experimental.card-tags li.new-content > span, .topic-experimental.card-tags li.pro-content > a, .topic-experimental.card-tags li.pro-content > span, .topic-experimental.card-tags li.techdegree-content > a, .topic-experimental.card-tags li.techdegree-content > span { background-color: #733a88; border-color: #733a88; }

.topic-experimental .card-tags li.new-content > a, .topic-experimental .card-tags li.new-content > span, .topic-experimental .card-tags li.pro-content > a, .topic-experimental .card-tags li.pro-content > span, .topic-experimental .card-tags li.techdegree-content > a, .topic-experimental .card-tags li.techdegree-content > span { background-color: #733a88; border-color: #733a88; }

.topic-front-end.card-tags li.new-content > a, .topic-front-end.card-tags li.new-content > span, .topic-front-end.card-tags li.pro-content > a, .topic-front-end.card-tags li.pro-content > span, .topic-front-end.card-tags li.techdegree-content > a, .topic-front-end.card-tags li.techdegree-content > span { background-color: #3659a2; border-color: #3659a2; }

.topic-front-end .card-tags li.new-content > a, .topic-front-end .card-tags li.new-content > span, .topic-front-end .card-tags li.pro-content > a, .topic-front-end .card-tags li.pro-content > span, .topic-front-end .card-tags li.techdegree-content > a, .topic-front-end .card-tags li.techdegree-content > span { background-color: #3659a2; border-color: #3659a2; }

.topic-fundamentals.card-tags li.new-content > a, .topic-fundamentals.card-tags li.new-content > span, .topic-fundamentals.card-tags li.pro-content > a, .topic-fundamentals.card-tags li.pro-content > span, .topic-fundamentals.card-tags li.techdegree-content > a, .topic-fundamentals.card-tags li.techdegree-content > span { background-color: #9b3b5a; border-color: #9b3b5a; }

.topic-fundamentals .card-tags li.new-content > a, .topic-fundamentals .card-tags li.new-content > span, .topic-fundamentals .card-tags li.pro-content > a, .topic-fundamentals .card-tags li.pro-content > span, .topic-fundamentals .card-tags li.techdegree-content > a, .topic-fundamentals .card-tags li.techdegree-content > span { background-color: #9b3b5a; border-color: #9b3b5a; }

.topic-mobile.card-tags li.new-content > a, .topic-mobile.card-tags li.new-content > span, .topic-mobile.card-tags li.pro-content > a, .topic-mobile.card-tags li.pro-content > span, .topic-mobile.card-tags li.techdegree-content > a, .topic-mobile.card-tags li.techdegree-content > span { background-color: #30826C; border-color: #30826C; }

.topic-mobile .card-tags li.new-content > a, .topic-mobile .card-tags li.new-content > span, .topic-mobile .card-tags li.pro-content > a, .topic-mobile .card-tags li.pro-content > span, .topic-mobile .card-tags li.techdegree-content > a, .topic-mobile .card-tags li.techdegree-content > span { background-color: #30826C; border-color: #30826C; }

.topic-internal.card-tags li.new-content > a, .topic-internal.card-tags li.new-content > span, .topic-internal.card-tags li.pro-content > a, .topic-internal.card-tags li.pro-content > span, .topic-internal.card-tags li.techdegree-content > a, .topic-internal.card-tags li.techdegree-content > span { background-color: #55616c; border-color: #55616c; }

.topic-internal .card-tags li.new-content > a, .topic-internal .card-tags li.new-content > span, .topic-internal .card-tags li.pro-content > a, .topic-internal .card-tags li.pro-content > span, .topic-internal .card-tags li.techdegree-content > a, .topic-internal .card-tags li.techdegree-content > span { background-color: #55616c; border-color: #55616c; }

.topic-foundations.card-tags li.new-content > a, .topic-foundations.card-tags li.new-content > span, .topic-foundations.card-tags li.pro-content > a, .topic-foundations.card-tags li.pro-content > span, .topic-foundations.card-tags li.techdegree-content > a, .topic-foundations.card-tags li.techdegree-content > span { background-color: #004e61; border-color: #004e61; }

.topic-foundations .card-tags li.new-content > a, .topic-foundations .card-tags li.new-content > span, .topic-foundations .card-tags li.pro-content > a, .topic-foundations .card-tags li.pro-content > span, .topic-foundations .card-tags li.techdegree-content > a, .topic-foundations .card-tags li.techdegree-content > span { background-color: #004e61; border-color: #004e61; }

.topic-undefined.card-tags li.new-content > a, .topic-undefined.card-tags li.new-content > span, .topic-undefined.card-tags li.pro-content > a, .topic-undefined.card-tags li.pro-content > span, .topic-undefined.card-tags li.techdegree-content > a, .topic-undefined.card-tags li.techdegree-content > span { background-color: #55616c; border-color: #55616c; }

.topic-undefined .card-tags li.new-content > a, .topic-undefined .card-tags li.new-content > span, .topic-undefined .card-tags li.pro-content > a, .topic-undefined .card-tags li.pro-content > span, .topic-undefined .card-tags li.techdegree-content > a, .topic-undefined .card-tags li.techdegree-content > span { background-color: #55616c; border-color: #55616c; }

.topic-college-credit.card-tags li.new-content > a, .topic-college-credit.card-tags li.new-content > span, .topic-college-credit.card-tags li.pro-content > a, .topic-college-credit.card-tags li.pro-content > span, .topic-college-credit.card-tags li.techdegree-content > a, .topic-college-credit.card-tags li.techdegree-content > span { background-color: #3887c8; border-color: #3887c8; }

.topic-college-credit .card-tags li.new-content > a, .topic-college-credit .card-tags li.new-content > span, .topic-college-credit .card-tags li.pro-content > a, .topic-college-credit .card-tags li.pro-content > span, .topic-college-credit .card-tags li.techdegree-content > a, .topic-college-credit .card-tags li.techdegree-content > span { background-color: #3887c8; border-color: #3887c8; }

.topic-no-code.card-tags li.new-content > a, .topic-no-code.card-tags li.new-content > span, .topic-no-code.card-tags li.pro-content > a, .topic-no-code.card-tags li.pro-content > span, .topic-no-code.card-tags li.techdegree-content > a, .topic-no-code.card-tags li.techdegree-content > span { background-color: #31AF7F; border-color: #31AF7F; }

.topic-no-code .card-tags li.new-content > a, .topic-no-code .card-tags li.new-content > span, .topic-no-code .card-tags li.pro-content > a, .topic-no-code .card-tags li.pro-content > span, .topic-no-code .card-tags li.techdegree-content > a, .topic-no-code .card-tags li.techdegree-content > span { background-color: #31AF7F; border-color: #31AF7F; }

.topic-security.card-tags li.new-content > a, .topic-security.card-tags li.new-content > span, .topic-security.card-tags li.pro-content > a, .topic-security.card-tags li.pro-content > span, .topic-security.card-tags li.techdegree-content > a, .topic-security.card-tags li.techdegree-content > span { background-color: #409BE9; border-color: #409BE9; }

.topic-security .card-tags li.new-content > a, .topic-security .card-tags li.new-content > span, .topic-security .card-tags li.pro-content > a, .topic-security .card-tags li.pro-content > span, .topic-security .card-tags li.techdegree-content > a, .topic-security .card-tags li.techdegree-content > span { background-color: #409BE9; border-color: #409BE9; }

.topic-game-development.card-tags li.new-content > a, .topic-game-development.card-tags li.new-content > span, .topic-game-development.card-tags li.pro-content > a, .topic-game-development.card-tags li.pro-content > span, .topic-game-development.card-tags li.techdegree-content > a, .topic-game-development.card-tags li.techdegree-content > span { background-color: #856fc4; border-color: #856fc4; }

.topic-game-development .card-tags li.new-content > a, .topic-game-development .card-tags li.new-content > span, .topic-game-development .card-tags li.pro-content > a, .topic-game-development .card-tags li.pro-content > span, .topic-game-development .card-tags li.techdegree-content > a, .topic-game-development .card-tags li.techdegree-content > span { background-color: #856fc4; border-color: #856fc4; }

.topic-treehouse-resources.card-tags li.new-content > a, .topic-treehouse-resources.card-tags li.new-content > span, .topic-treehouse-resources.card-tags li.pro-content > a, .topic-treehouse-resources.card-tags li.pro-content > span, .topic-treehouse-resources.card-tags li.techdegree-content > a, .topic-treehouse-resources.card-tags li.techdegree-content > span { background-color: #5fcf80; border-color: #5fcf80; }

.topic-treehouse-resources .card-tags li.new-content > a, .topic-treehouse-resources .card-tags li.new-content > span, .topic-treehouse-resources .card-tags li.pro-content > a, .topic-treehouse-resources .card-tags li.pro-content > span, .topic-treehouse-resources .card-tags li.techdegree-content > a, .topic-treehouse-resources .card-tags li.techdegree-content > span { background-color: #5fcf80; border-color: #5fcf80; }

.topic-coding-for-kids.card-tags li.new-content > a, .topic-coding-for-kids.card-tags li.new-content > span, .topic-coding-for-kids.card-tags li.pro-content > a, .topic-coding-for-kids.card-tags li.pro-content > span, .topic-coding-for-kids.card-tags li.techdegree-content > a, .topic-coding-for-kids.card-tags li.techdegree-content > span { background-color: #F36C27; border-color: #F36C27; }

.topic-coding-for-kids .card-tags li.new-content > a, .topic-coding-for-kids .card-tags li.new-content > span, .topic-coding-for-kids .card-tags li.pro-content > a, .topic-coding-for-kids .card-tags li.pro-content > span, .topic-coding-for-kids .card-tags li.techdegree-content > a, .topic-coding-for-kids .card-tags li.techdegree-content > span { background-color: #F36C27; border-color: #F36C27; }

.topic-ai.card-tags li.new-content > a:hover, .topic-ai.card-tags li.pro-content > a:hover, .topic-ai.card-tags li.techdegree-content > a:hover { background-color: #643276; border-color: #643276; }

.topic-ai .card-tags li.new-content > a:hover, .topic-ai .card-tags li.pro-content > a:hover, .topic-ai .card-tags li.techdegree-content > a:hover { background-color: #643276; border-color: #643276; }

.topic-back-end.card-tags li.new-content > a:hover, .topic-back-end.card-tags li.pro-content > a:hover, .topic-back-end.card-tags li.techdegree-content > a:hover { background-color: #006c7e; border-color: #006c7e; }

.topic-back-end .card-tags li.new-content > a:hover, .topic-back-end .card-tags li.pro-content > a:hover, .topic-back-end .card-tags li.techdegree-content > a:hover { background-color: #006c7e; border-color: #006c7e; }

.topic-data.card-tags li.new-content > a:hover, .topic-data.card-tags li.pro-content > a:hover, .topic-data.card-tags li.techdegree-content > a:hover { background-color: #8e4376; border-color: #8e4376; }

.topic-data .card-tags li.new-content > a:hover, .topic-data .card-tags li.pro-content > a:hover, .topic-data .card-tags li.techdegree-content > a:hover { background-color: #8e4376; border-color: #8e4376; }

.topic-design.card-tags li.new-content > a:hover, .topic-design.card-tags li.pro-content > a:hover, .topic-design.card-tags li.techdegree-content > a:hover { background-color: #413a7f; border-color: #413a7f; }

.topic-design .card-tags li.new-content > a:hover, .topic-design .card-tags li.pro-content > a:hover, .topic-design .card-tags li.techdegree-content > a:hover { background-color: #413a7f; border-color: #413a7f; }

.topic-experimental.card-tags li.new-content > a:hover, .topic-experimental.card-tags li.pro-content > a:hover, .topic-experimental.card-tags li.techdegree-content > a:hover { background-color: #643276; border-color: #643276; }

.topic-experimental .card-tags li.new-content > a:hover, .topic-experimental .card-tags li.pro-content > a:hover, .topic-experimental .card-tags li.techdegree-content > a:hover { background-color: #643276; border-color: #643276; }

.topic-front-end.card-tags li.new-content > a:hover, .topic-front-end.card-tags li.pro-content > a:hover, .topic-front-end.card-tags li.techdegree-content > a:hover { background-color: #304e8f; border-color: #304e8f; }

.topic-front-end .card-tags li.new-content > a:hover, .topic-front-end .card-tags li.pro-content > a:hover, .topic-front-end .card-tags li.techdegree-content > a:hover { background-color: #304e8f; border-color: #304e8f; }

.topic-fundamentals.card-tags li.new-content > a:hover, .topic-fundamentals.card-tags li.pro-content > a:hover, .topic-fundamentals.card-tags li.techdegree-content > a:hover { background-color: #89344f; border-color: #89344f; }

.topic-fundamentals .card-tags li.new-content > a:hover, .topic-fundamentals .card-tags li.pro-content > a:hover, .topic-fundamentals .card-tags li.techdegree-content > a:hover { background-color: #89344f; border-color: #89344f; }

.topic-mobile.card-tags li.new-content > a:hover, .topic-mobile.card-tags li.pro-content > a:hover, .topic-mobile.card-tags li.techdegree-content > a:hover { background-color: #296f5d; border-color: #296f5d; }

.topic-mobile .card-tags li.new-content > a:hover, .topic-mobile .card-tags li.pro-content > a:hover, .topic-mobile .card-tags li.techdegree-content > a:hover { background-color: #296f5d; border-color: #296f5d; }

.topic-internal.card-tags li.new-content > a:hover, .topic-internal.card-tags li.pro-content > a:hover, .topic-internal.card-tags li.techdegree-content > a:hover { background-color: #4a545e; border-color: #4a545e; }

.topic-internal .card-tags li.new-content > a:hover, .topic-internal .card-tags li.pro-content > a:hover, .topic-internal .card-tags li.techdegree-content > a:hover { background-color: #4a545e; border-color: #4a545e; }

.topic-foundations.card-tags li.new-content > a:hover, .topic-foundations.card-tags li.pro-content > a:hover, .topic-foundations.card-tags li.techdegree-content > a:hover { background-color: #003948; border-color: #003948; }

.topic-foundations .card-tags li.new-content > a:hover, .topic-foundations .card-tags li.pro-content > a:hover, .topic-foundations .card-tags li.techdegree-content > a:hover { background-color: #003948; border-color: #003948; }

.topic-undefined.card-tags li.new-content > a:hover, .topic-undefined.card-tags li.pro-content > a:hover, .topic-undefined.card-tags li.techdegree-content > a:hover { background-color: #4a545e; border-color: #4a545e; }

.topic-undefined .card-tags li.new-content > a:hover, .topic-undefined .card-tags li.pro-content > a:hover, .topic-undefined .card-tags li.techdegree-content > a:hover { background-color: #4a545e; border-color: #4a545e; }

.topic-college-credit.card-tags li.new-content > a:hover, .topic-college-credit.card-tags li.pro-content > a:hover, .topic-college-credit.card-tags li.techdegree-content > a:hover { background-color: #327ab5; border-color: #327ab5; }

.topic-college-credit .card-tags li.new-content > a:hover, .topic-college-credit .card-tags li.pro-content > a:hover, .topic-college-credit .card-tags li.techdegree-content > a:hover { background-color: #327ab5; border-color: #327ab5; }

.topic-no-code.card-tags li.new-content > a:hover, .topic-no-code.card-tags li.pro-content > a:hover, .topic-no-code.card-tags li.techdegree-content > a:hover { background-color: #2b9b71; border-color: #2b9b71; }

.topic-no-code .card-tags li.new-content > a:hover, .topic-no-code .card-tags li.pro-content > a:hover, .topic-no-code .card-tags li.techdegree-content > a:hover { background-color: #2b9b71; border-color: #2b9b71; }

.topic-security.card-tags li.new-content > a:hover, .topic-security.card-tags li.pro-content > a:hover, .topic-security.card-tags li.techdegree-content > a:hover { background-color: #298fe6; border-color: #298fe6; }

.topic-security .card-tags li.new-content > a:hover, .topic-security .card-tags li.pro-content > a:hover, .topic-security .card-tags li.techdegree-content > a:hover { background-color: #298fe6; border-color: #298fe6; }

.topic-game-development.card-tags li.new-content > a:hover, .topic-game-development.card-tags li.pro-content > a:hover, .topic-game-development.card-tags li.techdegree-content > a:hover { background-color: #765dbd; border-color: #765dbd; }

.topic-game-development .card-tags li.new-content > a:hover, .topic-game-development .card-tags li.pro-content > a:hover, .topic-game-development .card-tags li.techdegree-content > a:hover { background-color: #765dbd; border-color: #765dbd; }

.topic-treehouse-resources.card-tags li.new-content > a:hover, .topic-treehouse-resources.card-tags li.pro-content > a:hover, .topic-treehouse-resources.card-tags li.techdegree-content > a:hover { background-color: #4bc970; border-color: #4bc970; }

.topic-treehouse-resources .card-tags li.new-content > a:hover, .topic-treehouse-resources .card-tags li.pro-content > a:hover, .topic-treehouse-resources .card-tags li.techdegree-content > a:hover { background-color: #4bc970; border-color: #4bc970; }

.topic-coding-for-kids.card-tags li.new-content > a:hover, .topic-coding-for-kids.card-tags li.pro-content > a:hover, .topic-coding-for-kids.card-tags li.techdegree-content > a:hover { background-color: #f25c0f; border-color: #f25c0f; }

.topic-coding-for-kids .card-tags li.new-content > a:hover, .topic-coding-for-kids .card-tags li.pro-content > a:hover, .topic-coding-for-kids .card-tags li.techdegree-content > a:hover { background-color: #f25c0f; border-color: #f25c0f; }

.card-tags li.qa-content > a, .card-tags li.qa-content > span { border-color: #ed5a5a; color: #ed5a5a; padding-left: 15px; padding-right: 15px; }

.card-tags li.upcoming-content > a, .card-tags li.upcoming-content > span { border-style: dashed; border-color: #e6e8eb; padding-left: 15px; padding-right: 15px; }

.card-tags li:last-child { margin-right: 0; }

.card-tags li.truncated-tags { display: none; }

.card-tags li.truncated-tags > span { padding: 0; font-size: 11px; text-indent: 1px; width: 36px; text-align: center; }

.card-tags li.truncated-tags > span:after { content: "•••"; letter-spacing: 1px; }

.card-tags li.topics ul .topic.topic-ai:before { color: #733A88; }

.card-tags li.topics ul .topic.topic-back-end:before { color: #008297; }

.card-tags li.topics ul .topic.topic-data:before { color: #9F4B84; }

.card-tags li.topics ul .topic.topic-design:before { color: #4a4290; }

.card-tags li.topics ul .topic.topic-experimental:before { color: #733a88; }

.card-tags li.topics ul .topic.topic-front-end:before { color: #3659a2; }

.card-tags li.topics ul .topic.topic-fundamentals:before { color: #9b3b5a; }

.card-tags li.topics ul .topic.topic-mobile:before { color: #30826C; }

.card-tags li.topics ul .topic.topic-internal:before { color: #55616c; }

.card-tags li.topics ul .topic.topic-foundations:before { color: #004e61; }

.card-tags li.topics ul .topic.topic-undefined:before { color: #55616c; }

.card-tags li.topics ul .topic.topic-college-credit:before { color: #3887c8; }

.card-tags li.topics ul .topic.topic-no-code:before { color: #31AF7F; }

.card-tags li.topics ul .topic.topic-security:before { color: #409BE9; }

.card-tags li.topics ul .topic.topic-game-development:before { color: #856fc4; }

.card-tags li.topics ul .topic.topic-treehouse-resources:before { color: #5fcf80; }

.card-tags li.topics ul .topic.topic-coding-for-kids:before { color: #F36C27; }

.card-tags li.topics ul .topic:before { content: "•"; margin-right: 4px; font-size: 20px; vertical-align: middle; position: relative; top: -1px; }

.card-tags li.truncated-tags, .card-tags li.topics { position: relative; }

.card-tags li.truncated-tags:hover ul, .card-tags li.topics:hover ul { bottom: 43px; opacity: 1; transition: bottom 0.3s ease, opacity 0.3s ease; }

.card-tags li.truncated-tags ul, .card-tags li.topics ul { opacity: 0; position: absolute; bottom: 35px; left: -10px; padding: 15px 20px; background: #282e33; border-radius: 4px; }

.card-tags li.truncated-tags ul:after, .card-tags li.topics ul:after { position: absolute; bottom: -5px; left: 22px; content: ""; background: #282e33; width: 10px; height: 10px; border-radius: 0 0 3px 0; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.card-tags li.truncated-tags ul li, .card-tags li.topics ul li { display: block; }

.card-tags li.truncated-tags ul li a, .card-tags li.truncated-tags ul li span, .card-tags li.topics ul li a, .card-tags li.topics ul li span { padding: 0; line-height: 24px; font-size: 13px; border: none; color: #fff; font-weight: 700; }

.card-tags.truncated .truncated-tags { display: inline-block; }

.card-status { bottom: 40px; position: absolute; display: none; }

.completed .card-status { display: block; }

.card-status-icon { margin-right: 5px; position: relative; top: 1px; fill: #55616c; }

.topic-ai.card-status-icon { fill: #733A88; }

.topic-ai .card-status-icon { fill: #733A88; }

.topic-back-end.card-status-icon { fill: #008297; }

.topic-back-end .card-status-icon { fill: #008297; }

.topic-data.card-status-icon { fill: #9F4B84; }

.topic-data .card-status-icon { fill: #9F4B84; }

.topic-design.card-status-icon { fill: #4a4290; }

.topic-design .card-status-icon { fill: #4a4290; }

.topic-experimental.card-status-icon { fill: #733a88; }

.topic-experimental .card-status-icon { fill: #733a88; }

.topic-front-end.card-status-icon { fill: #3659a2; }

.topic-front-end .card-status-icon { fill: #3659a2; }

.topic-fundamentals.card-status-icon { fill: #9b3b5a; }

.topic-fundamentals .card-status-icon { fill: #9b3b5a; }

.topic-mobile.card-status-icon { fill: #30826C; }

.topic-mobile .card-status-icon { fill: #30826C; }

.topic-internal.card-status-icon { fill: #55616c; }

.topic-internal .card-status-icon { fill: #55616c; }

.topic-foundations.card-status-icon { fill: #004e61; }

.topic-foundations .card-status-icon { fill: #004e61; }

.topic-undefined.card-status-icon { fill: #55616c; }

.topic-undefined .card-status-icon { fill: #55616c; }

.topic-college-credit.card-status-icon { fill: #3887c8; }

.topic-college-credit .card-status-icon { fill: #3887c8; }

.topic-no-code.card-status-icon { fill: #31AF7F; }

.topic-no-code .card-status-icon { fill: #31AF7F; }

.topic-security.card-status-icon { fill: #409BE9; }

.topic-security .card-status-icon { fill: #409BE9; }

.topic-game-development.card-status-icon { fill: #856fc4; }

.topic-game-development .card-status-icon { fill: #856fc4; }

.topic-treehouse-resources.card-status-icon { fill: #5fcf80; }

.topic-treehouse-resources .card-status-icon { fill: #5fcf80; }

.topic-coding-for-kids.card-status-icon { fill: #F36C27; }

.topic-coding-for-kids .card-status-icon { fill: #F36C27; }

.card-status-title { color: #1a2126; font-weight: 700; }

.card.completed .card-status { display: block; }

.card-actions { pointer-events: none; list-style: none; display: block; position: absolute; left: 45px; right: 45px; bottom: 30px; z-index: 1; }

.card-techdegree .card-actions { left: 30px; right: 30px !important; }

.completed .card-actions, .card:not(.track):not(.card-techdegree):not(.personalized) .card-actions { display: none; }

.completed.instruction .card-actions { display: block; }

.card-actions .bookmarkable { padding: 0 !important; }

.card-actions .bookmarkable .bookmark, .card-actions .bookmarkable .unbookmark { pointer-events: auto; }

.card-button { height: 36px !important; padding: 0 18px !important; line-height: 32px !important; font-size: 14px !important; }

.card-action { position: relative; float: left; pointer-events: auto; }

.card-action.resume, .card-action.secondary-action { float: left; }

.card-action.resume .button, .card-action.secondary-action .button { height: 36px; padding: 0 22px; line-height: 32px; }

.card-action.resume .button.button-primary, .card-action.resume .button.primary, .card-action.secondary-action .button.button-primary, .card-action.secondary-action .button.primary { border-width: 0 0 2px; line-height: 34px; }

.topic-ai.card-action.resume .button.button-primary, .topic-ai.card-action.resume .button.primary, .topic-ai.card-action.secondary-action .button.button-primary, .topic-ai.card-action.secondary-action .button.primary { background-color: #733A88; }

.topic-ai .card-action.resume .button.button-primary, .topic-ai .card-action.resume .button.primary, .topic-ai .card-action.secondary-action .button.button-primary, .topic-ai .card-action.secondary-action .button.primary { background-color: #733A88; }

.topic-back-end.card-action.resume .button.button-primary, .topic-back-end.card-action.resume .button.primary, .topic-back-end.card-action.secondary-action .button.button-primary, .topic-back-end.card-action.secondary-action .button.primary { background-color: #008297; }

.topic-back-end .card-action.resume .button.button-primary, .topic-back-end .card-action.resume .button.primary, .topic-back-end .card-action.secondary-action .button.button-primary, .topic-back-end .card-action.secondary-action .button.primary { background-color: #008297; }

.topic-data.card-action.resume .button.button-primary, .topic-data.card-action.resume .button.primary, .topic-data.card-action.secondary-action .button.button-primary, .topic-data.card-action.secondary-action .button.primary { background-color: #9F4B84; }

.topic-data .card-action.resume .button.button-primary, .topic-data .card-action.resume .button.primary, .topic-data .card-action.secondary-action .button.button-primary, .topic-data .card-action.secondary-action .button.primary { background-color: #9F4B84; }

.topic-design.card-action.resume .button.button-primary, .topic-design.card-action.resume .button.primary, .topic-design.card-action.secondary-action .button.button-primary, .topic-design.card-action.secondary-action .button.primary { background-color: #4a4290; }

.topic-design .card-action.resume .button.button-primary, .topic-design .card-action.resume .button.primary, .topic-design .card-action.secondary-action .button.button-primary, .topic-design .card-action.secondary-action .button.primary { background-color: #4a4290; }

.topic-experimental.card-action.resume .button.button-primary, .topic-experimental.card-action.resume .button.primary, .topic-experimental.card-action.secondary-action .button.button-primary, .topic-experimental.card-action.secondary-action .button.primary { background-color: #733a88; }

.topic-experimental .card-action.resume .button.button-primary, .topic-experimental .card-action.resume .button.primary, .topic-experimental .card-action.secondary-action .button.button-primary, .topic-experimental .card-action.secondary-action .button.primary { background-color: #733a88; }

.topic-front-end.card-action.resume .button.button-primary, .topic-front-end.card-action.resume .button.primary, .topic-front-end.card-action.secondary-action .button.button-primary, .topic-front-end.card-action.secondary-action .button.primary { background-color: #3659a2; }

.topic-front-end .card-action.resume .button.button-primary, .topic-front-end .card-action.resume .button.primary, .topic-front-end .card-action.secondary-action .button.button-primary, .topic-front-end .card-action.secondary-action .button.primary { background-color: #3659a2; }

.topic-fundamentals.card-action.resume .button.button-primary, .topic-fundamentals.card-action.resume .button.primary, .topic-fundamentals.card-action.secondary-action .button.button-primary, .topic-fundamentals.card-action.secondary-action .button.primary { background-color: #9b3b5a; }

.topic-fundamentals .card-action.resume .button.button-primary, .topic-fundamentals .card-action.resume .button.primary, .topic-fundamentals .card-action.secondary-action .button.button-primary, .topic-fundamentals .card-action.secondary-action .button.primary { background-color: #9b3b5a; }

.topic-mobile.card-action.resume .button.button-primary, .topic-mobile.card-action.resume .button.primary, .topic-mobile.card-action.secondary-action .button.button-primary, .topic-mobile.card-action.secondary-action .button.primary { background-color: #30826C; }

.topic-mobile .card-action.resume .button.button-primary, .topic-mobile .card-action.resume .button.primary, .topic-mobile .card-action.secondary-action .button.button-primary, .topic-mobile .card-action.secondary-action .button.primary { background-color: #30826C; }

.topic-internal.card-action.resume .button.button-primary, .topic-internal.card-action.resume .button.primary, .topic-internal.card-action.secondary-action .button.button-primary, .topic-internal.card-action.secondary-action .button.primary { background-color: #55616c; }

.topic-internal .card-action.resume .button.button-primary, .topic-internal .card-action.resume .button.primary, .topic-internal .card-action.secondary-action .button.button-primary, .topic-internal .card-action.secondary-action .button.primary { background-color: #55616c; }

.topic-foundations.card-action.resume .button.button-primary, .topic-foundations.card-action.resume .button.primary, .topic-foundations.card-action.secondary-action .button.button-primary, .topic-foundations.card-action.secondary-action .button.primary { background-color: #004e61; }

.topic-foundations .card-action.resume .button.button-primary, .topic-foundations .card-action.resume .button.primary, .topic-foundations .card-action.secondary-action .button.button-primary, .topic-foundations .card-action.secondary-action .button.primary { background-color: #004e61; }

.topic-undefined.card-action.resume .button.button-primary, .topic-undefined.card-action.resume .button.primary, .topic-undefined.card-action.secondary-action .button.button-primary, .topic-undefined.card-action.secondary-action .button.primary { background-color: #55616c; }

.topic-undefined .card-action.resume .button.button-primary, .topic-undefined .card-action.resume .button.primary, .topic-undefined .card-action.secondary-action .button.button-primary, .topic-undefined .card-action.secondary-action .button.primary { background-color: #55616c; }

.topic-college-credit.card-action.resume .button.button-primary, .topic-college-credit.card-action.resume .button.primary, .topic-college-credit.card-action.secondary-action .button.button-primary, .topic-college-credit.card-action.secondary-action .button.primary { background-color: #3887c8; }

.topic-college-credit .card-action.resume .button.button-primary, .topic-college-credit .card-action.resume .button.primary, .topic-college-credit .card-action.secondary-action .button.button-primary, .topic-college-credit .card-action.secondary-action .button.primary { background-color: #3887c8; }

.topic-no-code.card-action.resume .button.button-primary, .topic-no-code.card-action.resume .button.primary, .topic-no-code.card-action.secondary-action .button.button-primary, .topic-no-code.card-action.secondary-action .button.primary { background-color: #31AF7F; }

.topic-no-code .card-action.resume .button.button-primary, .topic-no-code .card-action.resume .button.primary, .topic-no-code .card-action.secondary-action .button.button-primary, .topic-no-code .card-action.secondary-action .button.primary { background-color: #31AF7F; }

.topic-security.card-action.resume .button.button-primary, .topic-security.card-action.resume .button.primary, .topic-security.card-action.secondary-action .button.button-primary, .topic-security.card-action.secondary-action .button.primary { background-color: #409BE9; }

.topic-security .card-action.resume .button.button-primary, .topic-security .card-action.resume .button.primary, .topic-security .card-action.secondary-action .button.button-primary, .topic-security .card-action.secondary-action .button.primary { background-color: #409BE9; }

.topic-game-development.card-action.resume .button.button-primary, .topic-game-development.card-action.resume .button.primary, .topic-game-development.card-action.secondary-action .button.button-primary, .topic-game-development.card-action.secondary-action .button.primary { background-color: #856fc4; }

.topic-game-development .card-action.resume .button.button-primary, .topic-game-development .card-action.resume .button.primary, .topic-game-development .card-action.secondary-action .button.button-primary, .topic-game-development .card-action.secondary-action .button.primary { background-color: #856fc4; }

.topic-treehouse-resources.card-action.resume .button.button-primary, .topic-treehouse-resources.card-action.resume .button.primary, .topic-treehouse-resources.card-action.secondary-action .button.button-primary, .topic-treehouse-resources.card-action.secondary-action .button.primary { background-color: #5fcf80; }

.topic-treehouse-resources .card-action.resume .button.button-primary, .topic-treehouse-resources .card-action.resume .button.primary, .topic-treehouse-resources .card-action.secondary-action .button.button-primary, .topic-treehouse-resources .card-action.secondary-action .button.primary { background-color: #5fcf80; }

.topic-coding-for-kids.card-action.resume .button.button-primary, .topic-coding-for-kids.card-action.resume .button.primary, .topic-coding-for-kids.card-action.secondary-action .button.button-primary, .topic-coding-for-kids.card-action.secondary-action .button.primary { background-color: #F36C27; }

.topic-coding-for-kids .card-action.resume .button.button-primary, .topic-coding-for-kids .card-action.resume .button.primary, .topic-coding-for-kids .card-action.secondary-action .button.button-primary, .topic-coding-for-kids .card-action.secondary-action .button.primary { background-color: #F36C27; }

.topic-ai.card-action.resume .button.button-primary, .topic-ai.card-action.resume .button.primary, .topic-ai.card-action.secondary-action .button.button-primary, .topic-ai.card-action.secondary-action .button.primary { border-color: #643276; }

.topic-ai .card-action.resume .button.button-primary, .topic-ai .card-action.resume .button.primary, .topic-ai .card-action.secondary-action .button.button-primary, .topic-ai .card-action.secondary-action .button.primary { border-color: #643276; }

.topic-back-end.card-action.resume .button.button-primary, .topic-back-end.card-action.resume .button.primary, .topic-back-end.card-action.secondary-action .button.button-primary, .topic-back-end.card-action.secondary-action .button.primary { border-color: #006c7e; }

.topic-back-end .card-action.resume .button.button-primary, .topic-back-end .card-action.resume .button.primary, .topic-back-end .card-action.secondary-action .button.button-primary, .topic-back-end .card-action.secondary-action .button.primary { border-color: #006c7e; }

.topic-data.card-action.resume .button.button-primary, .topic-data.card-action.resume .button.primary, .topic-data.card-action.secondary-action .button.button-primary, .topic-data.card-action.secondary-action .button.primary { border-color: #8e4376; }

.topic-data .card-action.resume .button.button-primary, .topic-data .card-action.resume .button.primary, .topic-data .card-action.secondary-action .button.button-primary, .topic-data .card-action.secondary-action .button.primary { border-color: #8e4376; }

.topic-design.card-action.resume .button.button-primary, .topic-design.card-action.resume .button.primary, .topic-design.card-action.secondary-action .button.button-primary, .topic-design.card-action.secondary-action .button.primary { border-color: #413a7f; }

.topic-design .card-action.resume .button.button-primary, .topic-design .card-action.resume .button.primary, .topic-design .card-action.secondary-action .button.button-primary, .topic-design .card-action.secondary-action .button.primary { border-color: #413a7f; }

.topic-experimental.card-action.resume .button.button-primary, .topic-experimental.card-action.resume .button.primary, .topic-experimental.card-action.secondary-action .button.button-primary, .topic-experimental.card-action.secondary-action .button.primary { border-color: #643276; }

.topic-experimental .card-action.resume .button.button-primary, .topic-experimental .card-action.resume .button.primary, .topic-experimental .card-action.secondary-action .button.button-primary, .topic-experimental .card-action.secondary-action .button.primary { border-color: #643276; }

.topic-front-end.card-action.resume .button.button-primary, .topic-front-end.card-action.resume .button.primary, .topic-front-end.card-action.secondary-action .button.button-primary, .topic-front-end.card-action.secondary-action .button.primary { border-color: #304e8f; }

.topic-front-end .card-action.resume .button.button-primary, .topic-front-end .card-action.resume .button.primary, .topic-front-end .card-action.secondary-action .button.button-primary, .topic-front-end .card-action.secondary-action .button.primary { border-color: #304e8f; }

.topic-fundamentals.card-action.resume .button.button-primary, .topic-fundamentals.card-action.resume .button.primary, .topic-fundamentals.card-action.secondary-action .button.button-primary, .topic-fundamentals.card-action.secondary-action .button.primary { border-color: #89344f; }

.topic-fundamentals .card-action.resume .button.button-primary, .topic-fundamentals .card-action.resume .button.primary, .topic-fundamentals .card-action.secondary-action .button.button-primary, .topic-fundamentals .card-action.secondary-action .button.primary { border-color: #89344f; }

.topic-mobile.card-action.resume .button.button-primary, .topic-mobile.card-action.resume .button.primary, .topic-mobile.card-action.secondary-action .button.button-primary, .topic-mobile.card-action.secondary-action .button.primary { border-color: #296f5d; }

.topic-mobile .card-action.resume .button.button-primary, .topic-mobile .card-action.resume .button.primary, .topic-mobile .card-action.secondary-action .button.button-primary, .topic-mobile .card-action.secondary-action .button.primary { border-color: #296f5d; }

.topic-internal.card-action.resume .button.button-primary, .topic-internal.card-action.resume .button.primary, .topic-internal.card-action.secondary-action .button.button-primary, .topic-internal.card-action.secondary-action .button.primary { border-color: #4a545e; }

.topic-internal .card-action.resume .button.button-primary, .topic-internal .card-action.resume .button.primary, .topic-internal .card-action.secondary-action .button.button-primary, .topic-internal .card-action.secondary-action .button.primary { border-color: #4a545e; }

.topic-foundations.card-action.resume .button.button-primary, .topic-foundations.card-action.resume .button.primary, .topic-foundations.card-action.secondary-action .button.button-primary, .topic-foundations.card-action.secondary-action .button.primary { border-color: #003948; }

.topic-foundations .card-action.resume .button.button-primary, .topic-foundations .card-action.resume .button.primary, .topic-foundations .card-action.secondary-action .button.button-primary, .topic-foundations .card-action.secondary-action .button.primary { border-color: #003948; }

.topic-undefined.card-action.resume .button.button-primary, .topic-undefined.card-action.resume .button.primary, .topic-undefined.card-action.secondary-action .button.button-primary, .topic-undefined.card-action.secondary-action .button.primary { border-color: #4a545e; }

.topic-undefined .card-action.resume .button.button-primary, .topic-undefined .card-action.resume .button.primary, .topic-undefined .card-action.secondary-action .button.button-primary, .topic-undefined .card-action.secondary-action .button.primary { border-color: #4a545e; }

.topic-college-credit.card-action.resume .button.button-primary, .topic-college-credit.card-action.resume .button.primary, .topic-college-credit.card-action.secondary-action .button.button-primary, .topic-college-credit.card-action.secondary-action .button.primary { border-color: #327ab5; }

.topic-college-credit .card-action.resume .button.button-primary, .topic-college-credit .card-action.resume .button.primary, .topic-college-credit .card-action.secondary-action .button.button-primary, .topic-college-credit .card-action.secondary-action .button.primary { border-color: #327ab5; }

.topic-no-code.card-action.resume .button.button-primary, .topic-no-code.card-action.resume .button.primary, .topic-no-code.card-action.secondary-action .button.button-primary, .topic-no-code.card-action.secondary-action .button.primary { border-color: #2b9b71; }

.topic-no-code .card-action.resume .button.button-primary, .topic-no-code .card-action.resume .button.primary, .topic-no-code .card-action.secondary-action .button.button-primary, .topic-no-code .card-action.secondary-action .button.primary { border-color: #2b9b71; }

.topic-security.card-action.resume .button.button-primary, .topic-security.card-action.resume .button.primary, .topic-security.card-action.secondary-action .button.button-primary, .topic-security.card-action.secondary-action .button.primary { border-color: #298fe6; }

.topic-security .card-action.resume .button.button-primary, .topic-security .card-action.resume .button.primary, .topic-security .card-action.secondary-action .button.button-primary, .topic-security .card-action.secondary-action .button.primary { border-color: #298fe6; }

.topic-game-development.card-action.resume .button.button-primary, .topic-game-development.card-action.resume .button.primary, .topic-game-development.card-action.secondary-action .button.button-primary, .topic-game-development.card-action.secondary-action .button.primary { border-color: #765dbd; }

.topic-game-development .card-action.resume .button.button-primary, .topic-game-development .card-action.resume .button.primary, .topic-game-development .card-action.secondary-action .button.button-primary, .topic-game-development .card-action.secondary-action .button.primary { border-color: #765dbd; }

.topic-treehouse-resources.card-action.resume .button.button-primary, .topic-treehouse-resources.card-action.resume .button.primary, .topic-treehouse-resources.card-action.secondary-action .button.button-primary, .topic-treehouse-resources.card-action.secondary-action .button.primary { border-color: #4bc970; }

.topic-treehouse-resources .card-action.resume .button.button-primary, .topic-treehouse-resources .card-action.resume .button.primary, .topic-treehouse-resources .card-action.secondary-action .button.button-primary, .topic-treehouse-resources .card-action.secondary-action .button.primary { border-color: #4bc970; }

.topic-coding-for-kids.card-action.resume .button.button-primary, .topic-coding-for-kids.card-action.resume .button.primary, .topic-coding-for-kids.card-action.secondary-action .button.button-primary, .topic-coding-for-kids.card-action.secondary-action .button.primary { border-color: #f25c0f; }

.topic-coding-for-kids .card-action.resume .button.button-primary, .topic-coding-for-kids .card-action.resume .button.primary, .topic-coding-for-kids .card-action.secondary-action .button.button-primary, .topic-coding-for-kids .card-action.secondary-action .button.primary { border-color: #f25c0f; }

.topic-ai.card-action.resume .button.button-primary:hover, .topic-ai.card-action.resume .button.button-primary:focus, .topic-ai.card-action.resume .button.primary:hover, .topic-ai.card-action.resume .button.primary:focus, .topic-ai.card-action.secondary-action .button.button-primary:hover, .topic-ai.card-action.secondary-action .button.button-primary:focus, .topic-ai.card-action.secondary-action .button.primary:hover, .topic-ai.card-action.secondary-action .button.primary:focus { background-color: #67347a; }

.topic-ai .card-action.resume .button.button-primary:hover, .topic-ai .card-action.resume .button.button-primary:focus, .topic-ai .card-action.resume .button.primary:hover, .topic-ai .card-action.resume .button.primary:focus, .topic-ai .card-action.secondary-action .button.button-primary:hover, .topic-ai .card-action.secondary-action .button.button-primary:focus, .topic-ai .card-action.secondary-action .button.primary:hover, .topic-ai .card-action.secondary-action .button.primary:focus { background-color: #67347a; }

.topic-back-end.card-action.resume .button.button-primary:hover, .topic-back-end.card-action.resume .button.button-primary:focus, .topic-back-end.card-action.resume .button.primary:hover, .topic-back-end.card-action.resume .button.primary:focus, .topic-back-end.card-action.secondary-action .button.button-primary:hover, .topic-back-end.card-action.secondary-action .button.button-primary:focus, .topic-back-end.card-action.secondary-action .button.primary:hover, .topic-back-end.card-action.secondary-action .button.primary:focus { background-color: #007083; }

.topic-back-end .card-action.resume .button.button-primary:hover, .topic-back-end .card-action.resume .button.button-primary:focus, .topic-back-end .card-action.resume .button.primary:hover, .topic-back-end .card-action.resume .button.primary:focus, .topic-back-end .card-action.secondary-action .button.button-primary:hover, .topic-back-end .card-action.secondary-action .button.button-primary:focus, .topic-back-end .card-action.secondary-action .button.primary:hover, .topic-back-end .card-action.secondary-action .button.primary:focus { background-color: #007083; }

.topic-data.card-action.resume .button.button-primary:hover, .topic-data.card-action.resume .button.button-primary:focus, .topic-data.card-action.resume .button.primary:hover, .topic-data.card-action.resume .button.primary:focus, .topic-data.card-action.secondary-action .button.button-primary:hover, .topic-data.card-action.secondary-action .button.button-primary:focus, .topic-data.card-action.secondary-action .button.primary:hover, .topic-data.card-action.secondary-action .button.primary:focus { background-color: #914478; }

.topic-data .card-action.resume .button.button-primary:hover, .topic-data .card-action.resume .button.button-primary:focus, .topic-data .card-action.resume .button.primary:hover, .topic-data .card-action.resume .button.primary:focus, .topic-data .card-action.secondary-action .button.button-primary:hover, .topic-data .card-action.secondary-action .button.button-primary:focus, .topic-data .card-action.secondary-action .button.primary:hover, .topic-data .card-action.secondary-action .button.primary:focus { background-color: #914478; }

.topic-design.card-action.resume .button.button-primary:hover, .topic-design.card-action.resume .button.button-primary:focus, .topic-design.card-action.resume .button.primary:hover, .topic-design.card-action.resume .button.primary:focus, .topic-design.card-action.secondary-action .button.button-primary:hover, .topic-design.card-action.secondary-action .button.button-primary:focus, .topic-design.card-action.secondary-action .button.primary:hover, .topic-design.card-action.secondary-action .button.primary:focus { background-color: #433c82; }

.topic-design .card-action.resume .button.button-primary:hover, .topic-design .card-action.resume .button.button-primary:focus, .topic-design .card-action.resume .button.primary:hover, .topic-design .card-action.resume .button.primary:focus, .topic-design .card-action.secondary-action .button.button-primary:hover, .topic-design .card-action.secondary-action .button.button-primary:focus, .topic-design .card-action.secondary-action .button.primary:hover, .topic-design .card-action.secondary-action .button.primary:focus { background-color: #433c82; }

.topic-experimental.card-action.resume .button.button-primary:hover, .topic-experimental.card-action.resume .button.button-primary:focus, .topic-experimental.card-action.resume .button.primary:hover, .topic-experimental.card-action.resume .button.primary:focus, .topic-experimental.card-action.secondary-action .button.button-primary:hover, .topic-experimental.card-action.secondary-action .button.button-primary:focus, .topic-experimental.card-action.secondary-action .button.primary:hover, .topic-experimental.card-action.secondary-action .button.primary:focus { background-color: #67347a; }

.topic-experimental .card-action.resume .button.button-primary:hover, .topic-experimental .card-action.resume .button.button-primary:focus, .topic-experimental .card-action.resume .button.primary:hover, .topic-experimental .card-action.resume .button.primary:focus, .topic-experimental .card-action.secondary-action .button.button-primary:hover, .topic-experimental .card-action.secondary-action .button.button-primary:focus, .topic-experimental .card-action.secondary-action .button.primary:hover, .topic-experimental .card-action.secondary-action .button.primary:focus { background-color: #67347a; }

.topic-front-end.card-action.resume .button.button-primary:hover, .topic-front-end.card-action.resume .button.button-primary:focus, .topic-front-end.card-action.resume .button.primary:hover, .topic-front-end.card-action.resume .button.primary:focus, .topic-front-end.card-action.secondary-action .button.button-primary:hover, .topic-front-end.card-action.secondary-action .button.button-primary:focus, .topic-front-end.card-action.secondary-action .button.primary:hover, .topic-front-end.card-action.secondary-action .button.primary:focus { background-color: #315193; }

.topic-front-end .card-action.resume .button.button-primary:hover, .topic-front-end .card-action.resume .button.button-primary:focus, .topic-front-end .card-action.resume .button.primary:hover, .topic-front-end .card-action.resume .button.primary:focus, .topic-front-end .card-action.secondary-action .button.button-primary:hover, .topic-front-end .card-action.secondary-action .button.button-primary:focus, .topic-front-end .card-action.secondary-action .button.primary:hover, .topic-front-end .card-action.secondary-action .button.primary:focus { background-color: #315193; }

.topic-fundamentals.card-action.resume .button.button-primary:hover, .topic-fundamentals.card-action.resume .button.button-primary:focus, .topic-fundamentals.card-action.resume .button.primary:hover, .topic-fundamentals.card-action.resume .button.primary:focus, .topic-fundamentals.card-action.secondary-action .button.button-primary:hover, .topic-fundamentals.card-action.secondary-action .button.button-primary:focus, .topic-fundamentals.card-action.secondary-action .button.primary:hover, .topic-fundamentals.card-action.secondary-action .button.primary:focus { background-color: #8c3551; }

.topic-fundamentals .card-action.resume .button.button-primary:hover, .topic-fundamentals .card-action.resume .button.button-primary:focus, .topic-fundamentals .card-action.resume .button.primary:hover, .topic-fundamentals .card-action.resume .button.primary:focus, .topic-fundamentals .card-action.secondary-action .button.button-primary:hover, .topic-fundamentals .card-action.secondary-action .button.button-primary:focus, .topic-fundamentals .card-action.secondary-action .button.primary:hover, .topic-fundamentals .card-action.secondary-action .button.primary:focus { background-color: #8c3551; }

.topic-mobile.card-action.resume .button.button-primary:hover, .topic-mobile.card-action.resume .button.button-primary:focus, .topic-mobile.card-action.resume .button.primary:hover, .topic-mobile.card-action.resume .button.primary:focus, .topic-mobile.card-action.secondary-action .button.button-primary:hover, .topic-mobile.card-action.secondary-action .button.button-primary:focus, .topic-mobile.card-action.secondary-action .button.primary:hover, .topic-mobile.card-action.secondary-action .button.primary:focus { background-color: #2a7360; }

.topic-mobile .card-action.resume .button.button-primary:hover, .topic-mobile .card-action.resume .button.button-primary:focus, .topic-mobile .card-action.resume .button.primary:hover, .topic-mobile .card-action.resume .button.primary:focus, .topic-mobile .card-action.secondary-action .button.button-primary:hover, .topic-mobile .card-action.secondary-action .button.button-primary:focus, .topic-mobile .card-action.secondary-action .button.primary:hover, .topic-mobile .card-action.secondary-action .button.primary:focus { background-color: #2a7360; }

.topic-internal.card-action.resume .button.button-primary:hover, .topic-internal.card-action.resume .button.button-primary:focus, .topic-internal.card-action.resume .button.primary:hover, .topic-internal.card-action.resume .button.primary:focus, .topic-internal.card-action.secondary-action .button.button-primary:hover, .topic-internal.card-action.secondary-action .button.button-primary:focus, .topic-internal.card-action.secondary-action .button.primary:hover, .topic-internal.card-action.secondary-action .button.primary:focus { background-color: #4c5761; }

.topic-internal .card-action.resume .button.button-primary:hover, .topic-internal .card-action.resume .button.button-primary:focus, .topic-internal .card-action.resume .button.primary:hover, .topic-internal .card-action.resume .button.primary:focus, .topic-internal .card-action.secondary-action .button.button-primary:hover, .topic-internal .card-action.secondary-action .button.button-primary:focus, .topic-internal .card-action.secondary-action .button.primary:hover, .topic-internal .card-action.secondary-action .button.primary:focus { background-color: #4c5761; }

.topic-foundations.card-action.resume .button.button-primary:hover, .topic-foundations.card-action.resume .button.button-primary:focus, .topic-foundations.card-action.resume .button.primary:hover, .topic-foundations.card-action.resume .button.primary:focus, .topic-foundations.card-action.secondary-action .button.button-primary:hover, .topic-foundations.card-action.secondary-action .button.button-primary:focus, .topic-foundations.card-action.secondary-action .button.primary:hover, .topic-foundations.card-action.secondary-action .button.primary:focus { background-color: #003e4d; }

.topic-foundations .card-action.resume .button.button-primary:hover, .topic-foundations .card-action.resume .button.button-primary:focus, .topic-foundations .card-action.resume .button.primary:hover, .topic-foundations .card-action.resume .button.primary:focus, .topic-foundations .card-action.secondary-action .button.button-primary:hover, .topic-foundations .card-action.secondary-action .button.button-primary:focus, .topic-foundations .card-action.secondary-action .button.primary:hover, .topic-foundations .card-action.secondary-action .button.primary:focus { background-color: #003e4d; }

.topic-undefined.card-action.resume .button.button-primary:hover, .topic-undefined.card-action.resume .button.button-primary:focus, .topic-undefined.card-action.resume .button.primary:hover, .topic-undefined.card-action.resume .button.primary:focus, .topic-undefined.card-action.secondary-action .button.button-primary:hover, .topic-undefined.card-action.secondary-action .button.button-primary:focus, .topic-undefined.card-action.secondary-action .button.primary:hover, .topic-undefined.card-action.secondary-action .button.primary:focus { background-color: #4c5761; }

.topic-undefined .card-action.resume .button.button-primary:hover, .topic-undefined .card-action.resume .button.button-primary:focus, .topic-undefined .card-action.resume .button.primary:hover, .topic-undefined .card-action.resume .button.primary:focus, .topic-undefined .card-action.secondary-action .button.button-primary:hover, .topic-undefined .card-action.secondary-action .button.button-primary:focus, .topic-undefined .card-action.secondary-action .button.primary:hover, .topic-undefined .card-action.secondary-action .button.primary:focus { background-color: #4c5761; }

.topic-college-credit.card-action.resume .button.button-primary:hover, .topic-college-credit.card-action.resume .button.button-primary:focus, .topic-college-credit.card-action.resume .button.primary:hover, .topic-college-credit.card-action.resume .button.primary:focus, .topic-college-credit.card-action.secondary-action .button.button-primary:hover, .topic-college-credit.card-action.secondary-action .button.button-primary:focus, .topic-college-credit.card-action.secondary-action .button.primary:hover, .topic-college-credit.card-action.secondary-action .button.primary:focus { background-color: #337cb9; }

.topic-college-credit .card-action.resume .button.button-primary:hover, .topic-college-credit .card-action.resume .button.button-primary:focus, .topic-college-credit .card-action.resume .button.primary:hover, .topic-college-credit .card-action.resume .button.primary:focus, .topic-college-credit .card-action.secondary-action .button.button-primary:hover, .topic-college-credit .card-action.secondary-action .button.button-primary:focus, .topic-college-credit .card-action.secondary-action .button.primary:hover, .topic-college-credit .card-action.secondary-action .button.primary:focus { background-color: #337cb9; }

.topic-no-code.card-action.resume .button.button-primary:hover, .topic-no-code.card-action.resume .button.button-primary:focus, .topic-no-code.card-action.resume .button.primary:hover, .topic-no-code.card-action.resume .button.primary:focus, .topic-no-code.card-action.secondary-action .button.button-primary:hover, .topic-no-code.card-action.secondary-action .button.button-primary:focus, .topic-no-code.card-action.secondary-action .button.primary:hover, .topic-no-code.card-action.secondary-action .button.primary:focus { background-color: #2d9f73; }

.topic-no-code .card-action.resume .button.button-primary:hover, .topic-no-code .card-action.resume .button.button-primary:focus, .topic-no-code .card-action.resume .button.primary:hover, .topic-no-code .card-action.resume .button.primary:focus, .topic-no-code .card-action.secondary-action .button.button-primary:hover, .topic-no-code .card-action.secondary-action .button.button-primary:focus, .topic-no-code .card-action.secondary-action .button.primary:hover, .topic-no-code .card-action.secondary-action .button.primary:focus { background-color: #2d9f73; }

.topic-security.card-action.resume .button.button-primary:hover, .topic-security.card-action.resume .button.button-primary:focus, .topic-security.card-action.resume .button.primary:hover, .topic-security.card-action.resume .button.primary:focus, .topic-security.card-action.secondary-action .button.button-primary:hover, .topic-security.card-action.secondary-action .button.button-primary:focus, .topic-security.card-action.secondary-action .button.primary:hover, .topic-security.card-action.secondary-action .button.primary:focus { background-color: #2e91e7; }

.topic-security .card-action.resume .button.button-primary:hover, .topic-security .card-action.resume .button.button-primary:focus, .topic-security .card-action.resume .button.primary:hover, .topic-security .card-action.resume .button.primary:focus, .topic-security .card-action.secondary-action .button.button-primary:hover, .topic-security .card-action.secondary-action .button.button-primary:focus, .topic-security .card-action.secondary-action .button.primary:hover, .topic-security .card-action.secondary-action .button.primary:focus { background-color: #2e91e7; }

.topic-game-development.card-action.resume .button.button-primary:hover, .topic-game-development.card-action.resume .button.button-primary:focus, .topic-game-development.card-action.resume .button.primary:hover, .topic-game-development.card-action.resume .button.primary:focus, .topic-game-development.card-action.secondary-action .button.button-primary:hover, .topic-game-development.card-action.secondary-action .button.button-primary:focus, .topic-game-development.card-action.secondary-action .button.primary:hover, .topic-game-development.card-action.secondary-action .button.primary:focus { background-color: #7961be; }

.topic-game-development .card-action.resume .button.button-primary:hover, .topic-game-development .card-action.resume .button.button-primary:focus, .topic-game-development .card-action.resume .button.primary:hover, .topic-game-development .card-action.resume .button.primary:focus, .topic-game-development .card-action.secondary-action .button.button-primary:hover, .topic-game-development .card-action.secondary-action .button.button-primary:focus, .topic-game-development .card-action.secondary-action .button.primary:hover, .topic-game-development .card-action.secondary-action .button.primary:focus { background-color: #7961be; }

.topic-treehouse-resources.card-action.resume .button.button-primary:hover, .topic-treehouse-resources.card-action.resume .button.button-primary:focus, .topic-treehouse-resources.card-action.resume .button.primary:hover, .topic-treehouse-resources.card-action.resume .button.primary:focus, .topic-treehouse-resources.card-action.secondary-action .button.button-primary:hover, .topic-treehouse-resources.card-action.secondary-action .button.button-primary:focus, .topic-treehouse-resources.card-action.secondary-action .button.primary:hover, .topic-treehouse-resources.card-action.secondary-action .button.primary:focus { background-color: #4fca74; }

.topic-treehouse-resources .card-action.resume .button.button-primary:hover, .topic-treehouse-resources .card-action.resume .button.button-primary:focus, .topic-treehouse-resources .card-action.resume .button.primary:hover, .topic-treehouse-resources .card-action.resume .button.primary:focus, .topic-treehouse-resources .card-action.secondary-action .button.button-primary:hover, .topic-treehouse-resources .card-action.secondary-action .button.button-primary:focus, .topic-treehouse-resources .card-action.secondary-action .button.primary:hover, .topic-treehouse-resources .card-action.secondary-action .button.primary:focus { background-color: #4fca74; }

.topic-coding-for-kids.card-action.resume .button.button-primary:hover, .topic-coding-for-kids.card-action.resume .button.button-primary:focus, .topic-coding-for-kids.card-action.resume .button.primary:hover, .topic-coding-for-kids.card-action.resume .button.primary:focus, .topic-coding-for-kids.card-action.secondary-action .button.button-primary:hover, .topic-coding-for-kids.card-action.secondary-action .button.button-primary:focus, .topic-coding-for-kids.card-action.secondary-action .button.primary:hover, .topic-coding-for-kids.card-action.secondary-action .button.primary:focus { background-color: #f25f14; }

.topic-coding-for-kids .card-action.resume .button.button-primary:hover, .topic-coding-for-kids .card-action.resume .button.button-primary:focus, .topic-coding-for-kids .card-action.resume .button.primary:hover, .topic-coding-for-kids .card-action.resume .button.primary:focus, .topic-coding-for-kids .card-action.secondary-action .button.button-primary:hover, .topic-coding-for-kids .card-action.secondary-action .button.button-primary:focus, .topic-coding-for-kids .card-action.secondary-action .button.primary:hover, .topic-coding-for-kids .card-action.secondary-action .button.primary:focus { background-color: #f25f14; }

.topic-ai.card-action.resume .button.button-primary:hover, .topic-ai.card-action.resume .button.button-primary:focus, .topic-ai.card-action.resume .button.primary:hover, .topic-ai.card-action.resume .button.primary:focus, .topic-ai.card-action.secondary-action .button.button-primary:hover, .topic-ai.card-action.secondary-action .button.button-primary:focus, .topic-ai.card-action.secondary-action .button.primary:hover, .topic-ai.card-action.secondary-action .button.primary:focus { border-color: #552b64; }

.topic-ai .card-action.resume .button.button-primary:hover, .topic-ai .card-action.resume .button.button-primary:focus, .topic-ai .card-action.resume .button.primary:hover, .topic-ai .card-action.resume .button.primary:focus, .topic-ai .card-action.secondary-action .button.button-primary:hover, .topic-ai .card-action.secondary-action .button.button-primary:focus, .topic-ai .card-action.secondary-action .button.primary:hover, .topic-ai .card-action.secondary-action .button.primary:focus { border-color: #552b64; }

.topic-back-end.card-action.resume .button.button-primary:hover, .topic-back-end.card-action.resume .button.button-primary:focus, .topic-back-end.card-action.resume .button.primary:hover, .topic-back-end.card-action.resume .button.primary:focus, .topic-back-end.card-action.secondary-action .button.button-primary:hover, .topic-back-end.card-action.secondary-action .button.button-primary:focus, .topic-back-end.card-action.secondary-action .button.primary:hover, .topic-back-end.card-action.secondary-action .button.primary:focus { border-color: #005664; }

.topic-back-end .card-action.resume .button.button-primary:hover, .topic-back-end .card-action.resume .button.button-primary:focus, .topic-back-end .card-action.resume .button.primary:hover, .topic-back-end .card-action.resume .button.primary:focus, .topic-back-end .card-action.secondary-action .button.button-primary:hover, .topic-back-end .card-action.secondary-action .button.button-primary:focus, .topic-back-end .card-action.secondary-action .button.primary:hover, .topic-back-end .card-action.secondary-action .button.primary:focus { border-color: #005664; }

.topic-data.card-action.resume .button.button-primary:hover, .topic-data.card-action.resume .button.button-primary:focus, .topic-data.card-action.resume .button.primary:hover, .topic-data.card-action.resume .button.primary:focus, .topic-data.card-action.secondary-action .button.button-primary:hover, .topic-data.card-action.secondary-action .button.button-primary:focus, .topic-data.card-action.secondary-action .button.primary:hover, .topic-data.card-action.secondary-action .button.primary:focus { border-color: #7c3b67; }

.topic-data .card-action.resume .button.button-primary:hover, .topic-data .card-action.resume .button.button-primary:focus, .topic-data .card-action.resume .button.primary:hover, .topic-data .card-action.resume .button.primary:focus, .topic-data .card-action.secondary-action .button.button-primary:hover, .topic-data .card-action.secondary-action .button.button-primary:focus, .topic-data .card-action.secondary-action .button.primary:hover, .topic-data .card-action.secondary-action .button.primary:focus { border-color: #7c3b67; }

.topic-design.card-action.resume .button.button-primary:hover, .topic-design.card-action.resume .button.button-primary:focus, .topic-design.card-action.resume .button.primary:hover, .topic-design.card-action.resume .button.primary:focus, .topic-design.card-action.secondary-action .button.button-primary:hover, .topic-design.card-action.secondary-action .button.button-primary:focus, .topic-design.card-action.secondary-action .button.primary:hover, .topic-design.card-action.secondary-action .button.primary:focus { border-color: #38326d; }

.topic-design .card-action.resume .button.button-primary:hover, .topic-design .card-action.resume .button.button-primary:focus, .topic-design .card-action.resume .button.primary:hover, .topic-design .card-action.resume .button.primary:focus, .topic-design .card-action.secondary-action .button.button-primary:hover, .topic-design .card-action.secondary-action .button.button-primary:focus, .topic-design .card-action.secondary-action .button.primary:hover, .topic-design .card-action.secondary-action .button.primary:focus { border-color: #38326d; }

.topic-experimental.card-action.resume .button.button-primary:hover, .topic-experimental.card-action.resume .button.button-primary:focus, .topic-experimental.card-action.resume .button.primary:hover, .topic-experimental.card-action.resume .button.primary:focus, .topic-experimental.card-action.secondary-action .button.button-primary:hover, .topic-experimental.card-action.secondary-action .button.button-primary:focus, .topic-experimental.card-action.secondary-action .button.primary:hover, .topic-experimental.card-action.secondary-action .button.primary:focus { border-color: #552b64; }

.topic-experimental .card-action.resume .button.button-primary:hover, .topic-experimental .card-action.resume .button.button-primary:focus, .topic-experimental .card-action.resume .button.primary:hover, .topic-experimental .card-action.resume .button.primary:focus, .topic-experimental .card-action.secondary-action .button.button-primary:hover, .topic-experimental .card-action.secondary-action .button.button-primary:focus, .topic-experimental .card-action.secondary-action .button.primary:hover, .topic-experimental .card-action.secondary-action .button.primary:focus { border-color: #552b64; }

.topic-front-end.card-action.resume .button.button-primary:hover, .topic-front-end.card-action.resume .button.button-primary:focus, .topic-front-end.card-action.resume .button.primary:hover, .topic-front-end.card-action.resume .button.primary:focus, .topic-front-end.card-action.secondary-action .button.button-primary:hover, .topic-front-end.card-action.secondary-action .button.button-primary:focus, .topic-front-end.card-action.secondary-action .button.primary:hover, .topic-front-end.card-action.secondary-action .button.primary:focus { border-color: #29447c; }

.topic-front-end .card-action.resume .button.button-primary:hover, .topic-front-end .card-action.resume .button.button-primary:focus, .topic-front-end .card-action.resume .button.primary:hover, .topic-front-end .card-action.resume .button.primary:focus, .topic-front-end .card-action.secondary-action .button.button-primary:hover, .topic-front-end .card-action.secondary-action .button.button-primary:focus, .topic-front-end .card-action.secondary-action .button.primary:hover, .topic-front-end .card-action.secondary-action .button.primary:focus { border-color: #29447c; }

.topic-fundamentals.card-action.resume .button.button-primary:hover, .topic-fundamentals.card-action.resume .button.button-primary:focus, .topic-fundamentals.card-action.resume .button.primary:hover, .topic-fundamentals.card-action.resume .button.primary:focus, .topic-fundamentals.card-action.secondary-action .button.button-primary:hover, .topic-fundamentals.card-action.secondary-action .button.button-primary:focus, .topic-fundamentals.card-action.secondary-action .button.primary:hover, .topic-fundamentals.card-action.secondary-action .button.primary:focus { border-color: #762d45; }

.topic-fundamentals .card-action.resume .button.button-primary:hover, .topic-fundamentals .card-action.resume .button.button-primary:focus, .topic-fundamentals .card-action.resume .button.primary:hover, .topic-fundamentals .card-action.resume .button.primary:focus, .topic-fundamentals .card-action.secondary-action .button.button-primary:hover, .topic-fundamentals .card-action.secondary-action .button.button-primary:focus, .topic-fundamentals .card-action.secondary-action .button.primary:hover, .topic-fundamentals .card-action.secondary-action .button.primary:focus { border-color: #762d45; }

.topic-mobile.card-action.resume .button.button-primary:hover, .topic-mobile.card-action.resume .button.button-primary:focus, .topic-mobile.card-action.resume .button.primary:hover, .topic-mobile.card-action.resume .button.primary:focus, .topic-mobile.card-action.secondary-action .button.button-primary:hover, .topic-mobile.card-action.secondary-action .button.button-primary:focus, .topic-mobile.card-action.secondary-action .button.primary:hover, .topic-mobile.card-action.secondary-action .button.primary:focus { border-color: #225d4d; }

.topic-mobile .card-action.resume .button.button-primary:hover, .topic-mobile .card-action.resume .button.button-primary:focus, .topic-mobile .card-action.resume .button.primary:hover, .topic-mobile .card-action.resume .button.primary:focus, .topic-mobile .card-action.secondary-action .button.button-primary:hover, .topic-mobile .card-action.secondary-action .button.button-primary:focus, .topic-mobile .card-action.secondary-action .button.primary:hover, .topic-mobile .card-action.secondary-action .button.primary:focus { border-color: #225d4d; }

.topic-internal.card-action.resume .button.button-primary:hover, .topic-internal.card-action.resume .button.button-primary:focus, .topic-internal.card-action.resume .button.primary:hover, .topic-internal.card-action.resume .button.primary:focus, .topic-internal.card-action.secondary-action .button.button-primary:hover, .topic-internal.card-action.secondary-action .button.button-primary:focus, .topic-internal.card-action.secondary-action .button.primary:hover, .topic-internal.card-action.secondary-action .button.primary:focus { border-color: #3f474f; }

.topic-internal .card-action.resume .button.button-primary:hover, .topic-internal .card-action.resume .button.button-primary:focus, .topic-internal .card-action.resume .button.primary:hover, .topic-internal .card-action.resume .button.primary:focus, .topic-internal .card-action.secondary-action .button.button-primary:hover, .topic-internal .card-action.secondary-action .button.button-primary:focus, .topic-internal .card-action.secondary-action .button.primary:hover, .topic-internal .card-action.secondary-action .button.primary:focus { border-color: #3f474f; }

.topic-foundations.card-action.resume .button.button-primary:hover, .topic-foundations.card-action.resume .button.button-primary:focus, .topic-foundations.card-action.resume .button.primary:hover, .topic-foundations.card-action.resume .button.primary:focus, .topic-foundations.card-action.secondary-action .button.button-primary:hover, .topic-foundations.card-action.secondary-action .button.button-primary:focus, .topic-foundations.card-action.secondary-action .button.primary:hover, .topic-foundations.card-action.secondary-action .button.primary:focus { border-color: #00252e; }

.topic-foundations .card-action.resume .button.button-primary:hover, .topic-foundations .card-action.resume .button.button-primary:focus, .topic-foundations .card-action.resume .button.primary:hover, .topic-foundations .card-action.resume .button.primary:focus, .topic-foundations .card-action.secondary-action .button.button-primary:hover, .topic-foundations .card-action.secondary-action .button.button-primary:focus, .topic-foundations .card-action.secondary-action .button.primary:hover, .topic-foundations .card-action.secondary-action .button.primary:focus { border-color: #00252e; }

.topic-undefined.card-action.resume .button.button-primary:hover, .topic-undefined.card-action.resume .button.button-primary:focus, .topic-undefined.card-action.resume .button.primary:hover, .topic-undefined.card-action.resume .button.primary:focus, .topic-undefined.card-action.secondary-action .button.button-primary:hover, .topic-undefined.card-action.secondary-action .button.button-primary:focus, .topic-undefined.card-action.secondary-action .button.primary:hover, .topic-undefined.card-action.secondary-action .button.primary:focus { border-color: #3f474f; }

.topic-undefined .card-action.resume .button.button-primary:hover, .topic-undefined .card-action.resume .button.button-primary:focus, .topic-undefined .card-action.resume .button.primary:hover, .topic-undefined .card-action.resume .button.primary:focus, .topic-undefined .card-action.secondary-action .button.button-primary:hover, .topic-undefined .card-action.secondary-action .button.button-primary:focus, .topic-undefined .card-action.secondary-action .button.primary:hover, .topic-undefined .card-action.secondary-action .button.primary:focus { border-color: #3f474f; }

.topic-college-credit.card-action.resume .button.button-primary:hover, .topic-college-credit.card-action.resume .button.button-primary:focus, .topic-college-credit.card-action.resume .button.primary:hover, .topic-college-credit.card-action.resume .button.primary:focus, .topic-college-credit.card-action.secondary-action .button.button-primary:hover, .topic-college-credit.card-action.secondary-action .button.button-primary:focus, .topic-college-credit.card-action.secondary-action .button.primary:hover, .topic-college-credit.card-action.secondary-action .button.primary:focus { border-color: #2c6ca1; }

.topic-college-credit .card-action.resume .button.button-primary:hover, .topic-college-credit .card-action.resume .button.button-primary:focus, .topic-college-credit .card-action.resume .button.primary:hover, .topic-college-credit .card-action.resume .button.primary:focus, .topic-college-credit .card-action.secondary-action .button.button-primary:hover, .topic-college-credit .card-action.secondary-action .button.button-primary:focus, .topic-college-credit .card-action.secondary-action .button.primary:hover, .topic-college-credit .card-action.secondary-action .button.primary:focus { border-color: #2c6ca1; }

.topic-no-code.card-action.resume .button.button-primary:hover, .topic-no-code.card-action.resume .button.button-primary:focus, .topic-no-code.card-action.resume .button.primary:hover, .topic-no-code.card-action.resume .button.primary:focus, .topic-no-code.card-action.secondary-action .button.button-primary:hover, .topic-no-code.card-action.secondary-action .button.button-primary:focus, .topic-no-code.card-action.secondary-action .button.primary:hover, .topic-no-code.card-action.secondary-action .button.primary:focus { border-color: #268762; }

.topic-no-code .card-action.resume .button.button-primary:hover, .topic-no-code .card-action.resume .button.button-primary:focus, .topic-no-code .card-action.resume .button.primary:hover, .topic-no-code .card-action.resume .button.primary:focus, .topic-no-code .card-action.secondary-action .button.button-primary:hover, .topic-no-code .card-action.secondary-action .button.button-primary:focus, .topic-no-code .card-action.secondary-action .button.primary:hover, .topic-no-code .card-action.secondary-action .button.primary:focus { border-color: #268762; }

.topic-security.card-action.resume .button.button-primary:hover, .topic-security.card-action.resume .button.button-primary:focus, .topic-security.card-action.resume .button.primary:hover, .topic-security.card-action.resume .button.primary:focus, .topic-security.card-action.secondary-action .button.button-primary:hover, .topic-security.card-action.secondary-action .button.button-primary:focus, .topic-security.card-action.secondary-action .button.primary:hover, .topic-security.card-action.secondary-action .button.primary:focus { border-color: #1983dd; }

.topic-security .card-action.resume .button.button-primary:hover, .topic-security .card-action.resume .button.button-primary:focus, .topic-security .card-action.resume .button.primary:hover, .topic-security .card-action.resume .button.primary:focus, .topic-security .card-action.secondary-action .button.button-primary:hover, .topic-security .card-action.secondary-action .button.button-primary:focus, .topic-security .card-action.secondary-action .button.primary:hover, .topic-security .card-action.secondary-action .button.primary:focus { border-color: #1983dd; }

.topic-game-development.card-action.resume .button.button-primary:hover, .topic-game-development.card-action.resume .button.button-primary:focus, .topic-game-development.card-action.resume .button.primary:hover, .topic-game-development.card-action.resume .button.primary:focus, .topic-game-development.card-action.secondary-action .button.button-primary:hover, .topic-game-development.card-action.secondary-action .button.button-primary:focus, .topic-game-development.card-action.secondary-action .button.primary:hover, .topic-game-development.card-action.secondary-action .button.primary:focus { border-color: #664bb5; }

.topic-game-development .card-action.resume .button.button-primary:hover, .topic-game-development .card-action.resume .button.button-primary:focus, .topic-game-development .card-action.resume .button.primary:hover, .topic-game-development .card-action.resume .button.primary:focus, .topic-game-development .card-action.secondary-action .button.button-primary:hover, .topic-game-development .card-action.secondary-action .button.button-primary:focus, .topic-game-development .card-action.secondary-action .button.primary:hover, .topic-game-development .card-action.secondary-action .button.primary:focus { border-color: #664bb5; }

.topic-treehouse-resources.card-action.resume .button.button-primary:hover, .topic-treehouse-resources.card-action.resume .button.button-primary:focus, .topic-treehouse-resources.card-action.resume .button.primary:hover, .topic-treehouse-resources.card-action.resume .button.primary:focus, .topic-treehouse-resources.card-action.secondary-action .button.button-primary:hover, .topic-treehouse-resources.card-action.secondary-action .button.button-primary:focus, .topic-treehouse-resources.card-action.secondary-action .button.primary:hover, .topic-treehouse-resources.card-action.secondary-action .button.primary:focus { border-color: #3ac162; }

.topic-treehouse-resources .card-action.resume .button.button-primary:hover, .topic-treehouse-resources .card-action.resume .button.button-primary:focus, .topic-treehouse-resources .card-action.resume .button.primary:hover, .topic-treehouse-resources .card-action.resume .button.primary:focus, .topic-treehouse-resources .card-action.secondary-action .button.button-primary:hover, .topic-treehouse-resources .card-action.secondary-action .button.button-primary:focus, .topic-treehouse-resources .card-action.secondary-action .button.primary:hover, .topic-treehouse-resources .card-action.secondary-action .button.primary:focus { border-color: #3ac162; }

.topic-coding-for-kids.card-action.resume .button.button-primary:hover, .topic-coding-for-kids.card-action.resume .button.button-primary:focus, .topic-coding-for-kids.card-action.resume .button.primary:hover, .topic-coding-for-kids.card-action.resume .button.primary:focus, .topic-coding-for-kids.card-action.secondary-action .button.button-primary:hover, .topic-coding-for-kids.card-action.secondary-action .button.button-primary:focus, .topic-coding-for-kids.card-action.secondary-action .button.primary:hover, .topic-coding-for-kids.card-action.secondary-action .button.primary:focus { border-color: #db520c; }

.topic-coding-for-kids .card-action.resume .button.button-primary:hover, .topic-coding-for-kids .card-action.resume .button.button-primary:focus, .topic-coding-for-kids .card-action.resume .button.primary:hover, .topic-coding-for-kids .card-action.resume .button.primary:focus, .topic-coding-for-kids .card-action.secondary-action .button.button-primary:hover, .topic-coding-for-kids .card-action.secondary-action .button.button-primary:focus, .topic-coding-for-kids .card-action.secondary-action .button.primary:hover, .topic-coding-for-kids .card-action.secondary-action .button.primary:focus { border-color: #db520c; }

.card-action.resume .button.button-primary:hover ~ .card-box, .card-action.resume .button.primary:hover ~ .card-box, .card-action.secondary-action .button.button-primary:hover ~ .card-box, .card-action.secondary-action .button.primary:hover ~ .card-box { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }

.card-action.resume { margin-left: 0; display: none; }

.topic-ai.card-action-trailer:hover a, .topic-ai.card-action-trailer:focus a, .topic-ai.card-action-trailer.loading a, .topic-ai.card-action.bookmarkable:hover a, .topic-ai.card-action.bookmarkable:focus a, .topic-ai.card-action.bookmarkable.loading a { border-color: #733A88; }

.topic-ai .card-action-trailer:hover a, .topic-ai .card-action-trailer:focus a, .topic-ai .card-action-trailer.loading a, .topic-ai .card-action.bookmarkable:hover a, .topic-ai .card-action.bookmarkable:focus a, .topic-ai .card-action.bookmarkable.loading a { border-color: #733A88; }

.topic-back-end.card-action-trailer:hover a, .topic-back-end.card-action-trailer:focus a, .topic-back-end.card-action-trailer.loading a, .topic-back-end.card-action.bookmarkable:hover a, .topic-back-end.card-action.bookmarkable:focus a, .topic-back-end.card-action.bookmarkable.loading a { border-color: #008297; }

.topic-back-end .card-action-trailer:hover a, .topic-back-end .card-action-trailer:focus a, .topic-back-end .card-action-trailer.loading a, .topic-back-end .card-action.bookmarkable:hover a, .topic-back-end .card-action.bookmarkable:focus a, .topic-back-end .card-action.bookmarkable.loading a { border-color: #008297; }

.topic-data.card-action-trailer:hover a, .topic-data.card-action-trailer:focus a, .topic-data.card-action-trailer.loading a, .topic-data.card-action.bookmarkable:hover a, .topic-data.card-action.bookmarkable:focus a, .topic-data.card-action.bookmarkable.loading a { border-color: #9F4B84; }

.topic-data .card-action-trailer:hover a, .topic-data .card-action-trailer:focus a, .topic-data .card-action-trailer.loading a, .topic-data .card-action.bookmarkable:hover a, .topic-data .card-action.bookmarkable:focus a, .topic-data .card-action.bookmarkable.loading a { border-color: #9F4B84; }

.topic-design.card-action-trailer:hover a, .topic-design.card-action-trailer:focus a, .topic-design.card-action-trailer.loading a, .topic-design.card-action.bookmarkable:hover a, .topic-design.card-action.bookmarkable:focus a, .topic-design.card-action.bookmarkable.loading a { border-color: #4a4290; }

.topic-design .card-action-trailer:hover a, .topic-design .card-action-trailer:focus a, .topic-design .card-action-trailer.loading a, .topic-design .card-action.bookmarkable:hover a, .topic-design .card-action.bookmarkable:focus a, .topic-design .card-action.bookmarkable.loading a { border-color: #4a4290; }

.topic-experimental.card-action-trailer:hover a, .topic-experimental.card-action-trailer:focus a, .topic-experimental.card-action-trailer.loading a, .topic-experimental.card-action.bookmarkable:hover a, .topic-experimental.card-action.bookmarkable:focus a, .topic-experimental.card-action.bookmarkable.loading a { border-color: #733a88; }

.topic-experimental .card-action-trailer:hover a, .topic-experimental .card-action-trailer:focus a, .topic-experimental .card-action-trailer.loading a, .topic-experimental .card-action.bookmarkable:hover a, .topic-experimental .card-action.bookmarkable:focus a, .topic-experimental .card-action.bookmarkable.loading a { border-color: #733a88; }

.topic-front-end.card-action-trailer:hover a, .topic-front-end.card-action-trailer:focus a, .topic-front-end.card-action-trailer.loading a, .topic-front-end.card-action.bookmarkable:hover a, .topic-front-end.card-action.bookmarkable:focus a, .topic-front-end.card-action.bookmarkable.loading a { border-color: #3659a2; }

.topic-front-end .card-action-trailer:hover a, .topic-front-end .card-action-trailer:focus a, .topic-front-end .card-action-trailer.loading a, .topic-front-end .card-action.bookmarkable:hover a, .topic-front-end .card-action.bookmarkable:focus a, .topic-front-end .card-action.bookmarkable.loading a { border-color: #3659a2; }

.topic-fundamentals.card-action-trailer:hover a, .topic-fundamentals.card-action-trailer:focus a, .topic-fundamentals.card-action-trailer.loading a, .topic-fundamentals.card-action.bookmarkable:hover a, .topic-fundamentals.card-action.bookmarkable:focus a, .topic-fundamentals.card-action.bookmarkable.loading a { border-color: #9b3b5a; }

.topic-fundamentals .card-action-trailer:hover a, .topic-fundamentals .card-action-trailer:focus a, .topic-fundamentals .card-action-trailer.loading a, .topic-fundamentals .card-action.bookmarkable:hover a, .topic-fundamentals .card-action.bookmarkable:focus a, .topic-fundamentals .card-action.bookmarkable.loading a { border-color: #9b3b5a; }

.topic-mobile.card-action-trailer:hover a, .topic-mobile.card-action-trailer:focus a, .topic-mobile.card-action-trailer.loading a, .topic-mobile.card-action.bookmarkable:hover a, .topic-mobile.card-action.bookmarkable:focus a, .topic-mobile.card-action.bookmarkable.loading a { border-color: #30826C; }

.topic-mobile .card-action-trailer:hover a, .topic-mobile .card-action-trailer:focus a, .topic-mobile .card-action-trailer.loading a, .topic-mobile .card-action.bookmarkable:hover a, .topic-mobile .card-action.bookmarkable:focus a, .topic-mobile .card-action.bookmarkable.loading a { border-color: #30826C; }

.topic-internal.card-action-trailer:hover a, .topic-internal.card-action-trailer:focus a, .topic-internal.card-action-trailer.loading a, .topic-internal.card-action.bookmarkable:hover a, .topic-internal.card-action.bookmarkable:focus a, .topic-internal.card-action.bookmarkable.loading a { border-color: #55616c; }

.topic-internal .card-action-trailer:hover a, .topic-internal .card-action-trailer:focus a, .topic-internal .card-action-trailer.loading a, .topic-internal .card-action.bookmarkable:hover a, .topic-internal .card-action.bookmarkable:focus a, .topic-internal .card-action.bookmarkable.loading a { border-color: #55616c; }

.topic-foundations.card-action-trailer:hover a, .topic-foundations.card-action-trailer:focus a, .topic-foundations.card-action-trailer.loading a, .topic-foundations.card-action.bookmarkable:hover a, .topic-foundations.card-action.bookmarkable:focus a, .topic-foundations.card-action.bookmarkable.loading a { border-color: #004e61; }

.topic-foundations .card-action-trailer:hover a, .topic-foundations .card-action-trailer:focus a, .topic-foundations .card-action-trailer.loading a, .topic-foundations .card-action.bookmarkable:hover a, .topic-foundations .card-action.bookmarkable:focus a, .topic-foundations .card-action.bookmarkable.loading a { border-color: #004e61; }

.topic-undefined.card-action-trailer:hover a, .topic-undefined.card-action-trailer:focus a, .topic-undefined.card-action-trailer.loading a, .topic-undefined.card-action.bookmarkable:hover a, .topic-undefined.card-action.bookmarkable:focus a, .topic-undefined.card-action.bookmarkable.loading a { border-color: #55616c; }

.topic-undefined .card-action-trailer:hover a, .topic-undefined .card-action-trailer:focus a, .topic-undefined .card-action-trailer.loading a, .topic-undefined .card-action.bookmarkable:hover a, .topic-undefined .card-action.bookmarkable:focus a, .topic-undefined .card-action.bookmarkable.loading a { border-color: #55616c; }

.topic-college-credit.card-action-trailer:hover a, .topic-college-credit.card-action-trailer:focus a, .topic-college-credit.card-action-trailer.loading a, .topic-college-credit.card-action.bookmarkable:hover a, .topic-college-credit.card-action.bookmarkable:focus a, .topic-college-credit.card-action.bookmarkable.loading a { border-color: #3887c8; }

.topic-college-credit .card-action-trailer:hover a, .topic-college-credit .card-action-trailer:focus a, .topic-college-credit .card-action-trailer.loading a, .topic-college-credit .card-action.bookmarkable:hover a, .topic-college-credit .card-action.bookmarkable:focus a, .topic-college-credit .card-action.bookmarkable.loading a { border-color: #3887c8; }

.topic-no-code.card-action-trailer:hover a, .topic-no-code.card-action-trailer:focus a, .topic-no-code.card-action-trailer.loading a, .topic-no-code.card-action.bookmarkable:hover a, .topic-no-code.card-action.bookmarkable:focus a, .topic-no-code.card-action.bookmarkable.loading a { border-color: #31AF7F; }

.topic-no-code .card-action-trailer:hover a, .topic-no-code .card-action-trailer:focus a, .topic-no-code .card-action-trailer.loading a, .topic-no-code .card-action.bookmarkable:hover a, .topic-no-code .card-action.bookmarkable:focus a, .topic-no-code .card-action.bookmarkable.loading a { border-color: #31AF7F; }

.topic-security.card-action-trailer:hover a, .topic-security.card-action-trailer:focus a, .topic-security.card-action-trailer.loading a, .topic-security.card-action.bookmarkable:hover a, .topic-security.card-action.bookmarkable:focus a, .topic-security.card-action.bookmarkable.loading a { border-color: #409BE9; }

.topic-security .card-action-trailer:hover a, .topic-security .card-action-trailer:focus a, .topic-security .card-action-trailer.loading a, .topic-security .card-action.bookmarkable:hover a, .topic-security .card-action.bookmarkable:focus a, .topic-security .card-action.bookmarkable.loading a { border-color: #409BE9; }

.topic-game-development.card-action-trailer:hover a, .topic-game-development.card-action-trailer:focus a, .topic-game-development.card-action-trailer.loading a, .topic-game-development.card-action.bookmarkable:hover a, .topic-game-development.card-action.bookmarkable:focus a, .topic-game-development.card-action.bookmarkable.loading a { border-color: #856fc4; }

.topic-game-development .card-action-trailer:hover a, .topic-game-development .card-action-trailer:focus a, .topic-game-development .card-action-trailer.loading a, .topic-game-development .card-action.bookmarkable:hover a, .topic-game-development .card-action.bookmarkable:focus a, .topic-game-development .card-action.bookmarkable.loading a { border-color: #856fc4; }

.topic-treehouse-resources.card-action-trailer:hover a, .topic-treehouse-resources.card-action-trailer:focus a, .topic-treehouse-resources.card-action-trailer.loading a, .topic-treehouse-resources.card-action.bookmarkable:hover a, .topic-treehouse-resources.card-action.bookmarkable:focus a, .topic-treehouse-resources.card-action.bookmarkable.loading a { border-color: #5fcf80; }

.topic-treehouse-resources .card-action-trailer:hover a, .topic-treehouse-resources .card-action-trailer:focus a, .topic-treehouse-resources .card-action-trailer.loading a, .topic-treehouse-resources .card-action.bookmarkable:hover a, .topic-treehouse-resources .card-action.bookmarkable:focus a, .topic-treehouse-resources .card-action.bookmarkable.loading a { border-color: #5fcf80; }

.topic-coding-for-kids.card-action-trailer:hover a, .topic-coding-for-kids.card-action-trailer:focus a, .topic-coding-for-kids.card-action-trailer.loading a, .topic-coding-for-kids.card-action.bookmarkable:hover a, .topic-coding-for-kids.card-action.bookmarkable:focus a, .topic-coding-for-kids.card-action.bookmarkable.loading a { border-color: #F36C27; }

.topic-coding-for-kids .card-action-trailer:hover a, .topic-coding-for-kids .card-action-trailer:focus a, .topic-coding-for-kids .card-action-trailer.loading a, .topic-coding-for-kids .card-action.bookmarkable:hover a, .topic-coding-for-kids .card-action.bookmarkable:focus a, .topic-coding-for-kids .card-action.bookmarkable.loading a { border-color: #F36C27; }

.topic-ai.card-action-trailer:hover a svg, .topic-ai.card-action-trailer:focus a svg, .topic-ai.card-action-trailer.loading a svg, .topic-ai.card-action.bookmarkable:hover a svg, .topic-ai.card-action.bookmarkable:focus a svg, .topic-ai.card-action.bookmarkable.loading a svg { fill: #733A88; }

.topic-ai .card-action-trailer:hover a svg, .topic-ai .card-action-trailer:focus a svg, .topic-ai .card-action-trailer.loading a svg, .topic-ai .card-action.bookmarkable:hover a svg, .topic-ai .card-action.bookmarkable:focus a svg, .topic-ai .card-action.bookmarkable.loading a svg { fill: #733A88; }

.topic-back-end.card-action-trailer:hover a svg, .topic-back-end.card-action-trailer:focus a svg, .topic-back-end.card-action-trailer.loading a svg, .topic-back-end.card-action.bookmarkable:hover a svg, .topic-back-end.card-action.bookmarkable:focus a svg, .topic-back-end.card-action.bookmarkable.loading a svg { fill: #008297; }

.topic-back-end .card-action-trailer:hover a svg, .topic-back-end .card-action-trailer:focus a svg, .topic-back-end .card-action-trailer.loading a svg, .topic-back-end .card-action.bookmarkable:hover a svg, .topic-back-end .card-action.bookmarkable:focus a svg, .topic-back-end .card-action.bookmarkable.loading a svg { fill: #008297; }

.topic-data.card-action-trailer:hover a svg, .topic-data.card-action-trailer:focus a svg, .topic-data.card-action-trailer.loading a svg, .topic-data.card-action.bookmarkable:hover a svg, .topic-data.card-action.bookmarkable:focus a svg, .topic-data.card-action.bookmarkable.loading a svg { fill: #9F4B84; }

.topic-data .card-action-trailer:hover a svg, .topic-data .card-action-trailer:focus a svg, .topic-data .card-action-trailer.loading a svg, .topic-data .card-action.bookmarkable:hover a svg, .topic-data .card-action.bookmarkable:focus a svg, .topic-data .card-action.bookmarkable.loading a svg { fill: #9F4B84; }

.topic-design.card-action-trailer:hover a svg, .topic-design.card-action-trailer:focus a svg, .topic-design.card-action-trailer.loading a svg, .topic-design.card-action.bookmarkable:hover a svg, .topic-design.card-action.bookmarkable:focus a svg, .topic-design.card-action.bookmarkable.loading a svg { fill: #4a4290; }

.topic-design .card-action-trailer:hover a svg, .topic-design .card-action-trailer:focus a svg, .topic-design .card-action-trailer.loading a svg, .topic-design .card-action.bookmarkable:hover a svg, .topic-design .card-action.bookmarkable:focus a svg, .topic-design .card-action.bookmarkable.loading a svg { fill: #4a4290; }

.topic-experimental.card-action-trailer:hover a svg, .topic-experimental.card-action-trailer:focus a svg, .topic-experimental.card-action-trailer.loading a svg, .topic-experimental.card-action.bookmarkable:hover a svg, .topic-experimental.card-action.bookmarkable:focus a svg, .topic-experimental.card-action.bookmarkable.loading a svg { fill: #733a88; }

.topic-experimental .card-action-trailer:hover a svg, .topic-experimental .card-action-trailer:focus a svg, .topic-experimental .card-action-trailer.loading a svg, .topic-experimental .card-action.bookmarkable:hover a svg, .topic-experimental .card-action.bookmarkable:focus a svg, .topic-experimental .card-action.bookmarkable.loading a svg { fill: #733a88; }

.topic-front-end.card-action-trailer:hover a svg, .topic-front-end.card-action-trailer:focus a svg, .topic-front-end.card-action-trailer.loading a svg, .topic-front-end.card-action.bookmarkable:hover a svg, .topic-front-end.card-action.bookmarkable:focus a svg, .topic-front-end.card-action.bookmarkable.loading a svg { fill: #3659a2; }

.topic-front-end .card-action-trailer:hover a svg, .topic-front-end .card-action-trailer:focus a svg, .topic-front-end .card-action-trailer.loading a svg, .topic-front-end .card-action.bookmarkable:hover a svg, .topic-front-end .card-action.bookmarkable:focus a svg, .topic-front-end .card-action.bookmarkable.loading a svg { fill: #3659a2; }

.topic-fundamentals.card-action-trailer:hover a svg, .topic-fundamentals.card-action-trailer:focus a svg, .topic-fundamentals.card-action-trailer.loading a svg, .topic-fundamentals.card-action.bookmarkable:hover a svg, .topic-fundamentals.card-action.bookmarkable:focus a svg, .topic-fundamentals.card-action.bookmarkable.loading a svg { fill: #9b3b5a; }

.topic-fundamentals .card-action-trailer:hover a svg, .topic-fundamentals .card-action-trailer:focus a svg, .topic-fundamentals .card-action-trailer.loading a svg, .topic-fundamentals .card-action.bookmarkable:hover a svg, .topic-fundamentals .card-action.bookmarkable:focus a svg, .topic-fundamentals .card-action.bookmarkable.loading a svg { fill: #9b3b5a; }

.topic-mobile.card-action-trailer:hover a svg, .topic-mobile.card-action-trailer:focus a svg, .topic-mobile.card-action-trailer.loading a svg, .topic-mobile.card-action.bookmarkable:hover a svg, .topic-mobile.card-action.bookmarkable:focus a svg, .topic-mobile.card-action.bookmarkable.loading a svg { fill: #30826C; }

.topic-mobile .card-action-trailer:hover a svg, .topic-mobile .card-action-trailer:focus a svg, .topic-mobile .card-action-trailer.loading a svg, .topic-mobile .card-action.bookmarkable:hover a svg, .topic-mobile .card-action.bookmarkable:focus a svg, .topic-mobile .card-action.bookmarkable.loading a svg { fill: #30826C; }

.topic-internal.card-action-trailer:hover a svg, .topic-internal.card-action-trailer:focus a svg, .topic-internal.card-action-trailer.loading a svg, .topic-internal.card-action.bookmarkable:hover a svg, .topic-internal.card-action.bookmarkable:focus a svg, .topic-internal.card-action.bookmarkable.loading a svg { fill: #55616c; }

.topic-internal .card-action-trailer:hover a svg, .topic-internal .card-action-trailer:focus a svg, .topic-internal .card-action-trailer.loading a svg, .topic-internal .card-action.bookmarkable:hover a svg, .topic-internal .card-action.bookmarkable:focus a svg, .topic-internal .card-action.bookmarkable.loading a svg { fill: #55616c; }

.topic-foundations.card-action-trailer:hover a svg, .topic-foundations.card-action-trailer:focus a svg, .topic-foundations.card-action-trailer.loading a svg, .topic-foundations.card-action.bookmarkable:hover a svg, .topic-foundations.card-action.bookmarkable:focus a svg, .topic-foundations.card-action.bookmarkable.loading a svg { fill: #004e61; }

.topic-foundations .card-action-trailer:hover a svg, .topic-foundations .card-action-trailer:focus a svg, .topic-foundations .card-action-trailer.loading a svg, .topic-foundations .card-action.bookmarkable:hover a svg, .topic-foundations .card-action.bookmarkable:focus a svg, .topic-foundations .card-action.bookmarkable.loading a svg { fill: #004e61; }

.topic-undefined.card-action-trailer:hover a svg, .topic-undefined.card-action-trailer:focus a svg, .topic-undefined.card-action-trailer.loading a svg, .topic-undefined.card-action.bookmarkable:hover a svg, .topic-undefined.card-action.bookmarkable:focus a svg, .topic-undefined.card-action.bookmarkable.loading a svg { fill: #55616c; }

.topic-undefined .card-action-trailer:hover a svg, .topic-undefined .card-action-trailer:focus a svg, .topic-undefined .card-action-trailer.loading a svg, .topic-undefined .card-action.bookmarkable:hover a svg, .topic-undefined .card-action.bookmarkable:focus a svg, .topic-undefined .card-action.bookmarkable.loading a svg { fill: #55616c; }

.topic-college-credit.card-action-trailer:hover a svg, .topic-college-credit.card-action-trailer:focus a svg, .topic-college-credit.card-action-trailer.loading a svg, .topic-college-credit.card-action.bookmarkable:hover a svg, .topic-college-credit.card-action.bookmarkable:focus a svg, .topic-college-credit.card-action.bookmarkable.loading a svg { fill: #3887c8; }

.topic-college-credit .card-action-trailer:hover a svg, .topic-college-credit .card-action-trailer:focus a svg, .topic-college-credit .card-action-trailer.loading a svg, .topic-college-credit .card-action.bookmarkable:hover a svg, .topic-college-credit .card-action.bookmarkable:focus a svg, .topic-college-credit .card-action.bookmarkable.loading a svg { fill: #3887c8; }

.topic-no-code.card-action-trailer:hover a svg, .topic-no-code.card-action-trailer:focus a svg, .topic-no-code.card-action-trailer.loading a svg, .topic-no-code.card-action.bookmarkable:hover a svg, .topic-no-code.card-action.bookmarkable:focus a svg, .topic-no-code.card-action.bookmarkable.loading a svg { fill: #31AF7F; }

.topic-no-code .card-action-trailer:hover a svg, .topic-no-code .card-action-trailer:focus a svg, .topic-no-code .card-action-trailer.loading a svg, .topic-no-code .card-action.bookmarkable:hover a svg, .topic-no-code .card-action.bookmarkable:focus a svg, .topic-no-code .card-action.bookmarkable.loading a svg { fill: #31AF7F; }

.topic-security.card-action-trailer:hover a svg, .topic-security.card-action-trailer:focus a svg, .topic-security.card-action-trailer.loading a svg, .topic-security.card-action.bookmarkable:hover a svg, .topic-security.card-action.bookmarkable:focus a svg, .topic-security.card-action.bookmarkable.loading a svg { fill: #409BE9; }

.topic-security .card-action-trailer:hover a svg, .topic-security .card-action-trailer:focus a svg, .topic-security .card-action-trailer.loading a svg, .topic-security .card-action.bookmarkable:hover a svg, .topic-security .card-action.bookmarkable:focus a svg, .topic-security .card-action.bookmarkable.loading a svg { fill: #409BE9; }

.topic-game-development.card-action-trailer:hover a svg, .topic-game-development.card-action-trailer:focus a svg, .topic-game-development.card-action-trailer.loading a svg, .topic-game-development.card-action.bookmarkable:hover a svg, .topic-game-development.card-action.bookmarkable:focus a svg, .topic-game-development.card-action.bookmarkable.loading a svg { fill: #856fc4; }

.topic-game-development .card-action-trailer:hover a svg, .topic-game-development .card-action-trailer:focus a svg, .topic-game-development .card-action-trailer.loading a svg, .topic-game-development .card-action.bookmarkable:hover a svg, .topic-game-development .card-action.bookmarkable:focus a svg, .topic-game-development .card-action.bookmarkable.loading a svg { fill: #856fc4; }

.topic-treehouse-resources.card-action-trailer:hover a svg, .topic-treehouse-resources.card-action-trailer:focus a svg, .topic-treehouse-resources.card-action-trailer.loading a svg, .topic-treehouse-resources.card-action.bookmarkable:hover a svg, .topic-treehouse-resources.card-action.bookmarkable:focus a svg, .topic-treehouse-resources.card-action.bookmarkable.loading a svg { fill: #5fcf80; }

.topic-treehouse-resources .card-action-trailer:hover a svg, .topic-treehouse-resources .card-action-trailer:focus a svg, .topic-treehouse-resources .card-action-trailer.loading a svg, .topic-treehouse-resources .card-action.bookmarkable:hover a svg, .topic-treehouse-resources .card-action.bookmarkable:focus a svg, .topic-treehouse-resources .card-action.bookmarkable.loading a svg { fill: #5fcf80; }

.topic-coding-for-kids.card-action-trailer:hover a svg, .topic-coding-for-kids.card-action-trailer:focus a svg, .topic-coding-for-kids.card-action-trailer.loading a svg, .topic-coding-for-kids.card-action.bookmarkable:hover a svg, .topic-coding-for-kids.card-action.bookmarkable:focus a svg, .topic-coding-for-kids.card-action.bookmarkable.loading a svg { fill: #F36C27; }

.topic-coding-for-kids .card-action-trailer:hover a svg, .topic-coding-for-kids .card-action-trailer:focus a svg, .topic-coding-for-kids .card-action-trailer.loading a svg, .topic-coding-for-kids .card-action.bookmarkable:hover a svg, .topic-coding-for-kids .card-action.bookmarkable:focus a svg, .topic-coding-for-kids .card-action.bookmarkable.loading a svg { fill: #F36C27; }

.topic-ai.card-action-trailer a:hover, .topic-ai.card-action-trailer a:focus, .topic-ai.card-action-trailer span:hover, .topic-ai.card-action-trailer span:focus, .topic-ai.card-action.bookmarkable a:hover, .topic-ai.card-action.bookmarkable a:focus, .topic-ai.card-action.bookmarkable span:hover, .topic-ai.card-action.bookmarkable span:focus { border-color: #552b64; }

.topic-ai .card-action-trailer a:hover, .topic-ai .card-action-trailer a:focus, .topic-ai .card-action-trailer span:hover, .topic-ai .card-action-trailer span:focus, .topic-ai .card-action.bookmarkable a:hover, .topic-ai .card-action.bookmarkable a:focus, .topic-ai .card-action.bookmarkable span:hover, .topic-ai .card-action.bookmarkable span:focus { border-color: #552b64; }

.topic-back-end.card-action-trailer a:hover, .topic-back-end.card-action-trailer a:focus, .topic-back-end.card-action-trailer span:hover, .topic-back-end.card-action-trailer span:focus, .topic-back-end.card-action.bookmarkable a:hover, .topic-back-end.card-action.bookmarkable a:focus, .topic-back-end.card-action.bookmarkable span:hover, .topic-back-end.card-action.bookmarkable span:focus { border-color: #005664; }

.topic-back-end .card-action-trailer a:hover, .topic-back-end .card-action-trailer a:focus, .topic-back-end .card-action-trailer span:hover, .topic-back-end .card-action-trailer span:focus, .topic-back-end .card-action.bookmarkable a:hover, .topic-back-end .card-action.bookmarkable a:focus, .topic-back-end .card-action.bookmarkable span:hover, .topic-back-end .card-action.bookmarkable span:focus { border-color: #005664; }

.topic-data.card-action-trailer a:hover, .topic-data.card-action-trailer a:focus, .topic-data.card-action-trailer span:hover, .topic-data.card-action-trailer span:focus, .topic-data.card-action.bookmarkable a:hover, .topic-data.card-action.bookmarkable a:focus, .topic-data.card-action.bookmarkable span:hover, .topic-data.card-action.bookmarkable span:focus { border-color: #7c3b67; }

.topic-data .card-action-trailer a:hover, .topic-data .card-action-trailer a:focus, .topic-data .card-action-trailer span:hover, .topic-data .card-action-trailer span:focus, .topic-data .card-action.bookmarkable a:hover, .topic-data .card-action.bookmarkable a:focus, .topic-data .card-action.bookmarkable span:hover, .topic-data .card-action.bookmarkable span:focus { border-color: #7c3b67; }

.topic-design.card-action-trailer a:hover, .topic-design.card-action-trailer a:focus, .topic-design.card-action-trailer span:hover, .topic-design.card-action-trailer span:focus, .topic-design.card-action.bookmarkable a:hover, .topic-design.card-action.bookmarkable a:focus, .topic-design.card-action.bookmarkable span:hover, .topic-design.card-action.bookmarkable span:focus { border-color: #38326d; }

.topic-design .card-action-trailer a:hover, .topic-design .card-action-trailer a:focus, .topic-design .card-action-trailer span:hover, .topic-design .card-action-trailer span:focus, .topic-design .card-action.bookmarkable a:hover, .topic-design .card-action.bookmarkable a:focus, .topic-design .card-action.bookmarkable span:hover, .topic-design .card-action.bookmarkable span:focus { border-color: #38326d; }

.topic-experimental.card-action-trailer a:hover, .topic-experimental.card-action-trailer a:focus, .topic-experimental.card-action-trailer span:hover, .topic-experimental.card-action-trailer span:focus, .topic-experimental.card-action.bookmarkable a:hover, .topic-experimental.card-action.bookmarkable a:focus, .topic-experimental.card-action.bookmarkable span:hover, .topic-experimental.card-action.bookmarkable span:focus { border-color: #552b64; }

.topic-experimental .card-action-trailer a:hover, .topic-experimental .card-action-trailer a:focus, .topic-experimental .card-action-trailer span:hover, .topic-experimental .card-action-trailer span:focus, .topic-experimental .card-action.bookmarkable a:hover, .topic-experimental .card-action.bookmarkable a:focus, .topic-experimental .card-action.bookmarkable span:hover, .topic-experimental .card-action.bookmarkable span:focus { border-color: #552b64; }

.topic-front-end.card-action-trailer a:hover, .topic-front-end.card-action-trailer a:focus, .topic-front-end.card-action-trailer span:hover, .topic-front-end.card-action-trailer span:focus, .topic-front-end.card-action.bookmarkable a:hover, .topic-front-end.card-action.bookmarkable a:focus, .topic-front-end.card-action.bookmarkable span:hover, .topic-front-end.card-action.bookmarkable span:focus { border-color: #29447c; }

.topic-front-end .card-action-trailer a:hover, .topic-front-end .card-action-trailer a:focus, .topic-front-end .card-action-trailer span:hover, .topic-front-end .card-action-trailer span:focus, .topic-front-end .card-action.bookmarkable a:hover, .topic-front-end .card-action.bookmarkable a:focus, .topic-front-end .card-action.bookmarkable span:hover, .topic-front-end .card-action.bookmarkable span:focus { border-color: #29447c; }

.topic-fundamentals.card-action-trailer a:hover, .topic-fundamentals.card-action-trailer a:focus, .topic-fundamentals.card-action-trailer span:hover, .topic-fundamentals.card-action-trailer span:focus, .topic-fundamentals.card-action.bookmarkable a:hover, .topic-fundamentals.card-action.bookmarkable a:focus, .topic-fundamentals.card-action.bookmarkable span:hover, .topic-fundamentals.card-action.bookmarkable span:focus { border-color: #762d45; }

.topic-fundamentals .card-action-trailer a:hover, .topic-fundamentals .card-action-trailer a:focus, .topic-fundamentals .card-action-trailer span:hover, .topic-fundamentals .card-action-trailer span:focus, .topic-fundamentals .card-action.bookmarkable a:hover, .topic-fundamentals .card-action.bookmarkable a:focus, .topic-fundamentals .card-action.bookmarkable span:hover, .topic-fundamentals .card-action.bookmarkable span:focus { border-color: #762d45; }

.topic-mobile.card-action-trailer a:hover, .topic-mobile.card-action-trailer a:focus, .topic-mobile.card-action-trailer span:hover, .topic-mobile.card-action-trailer span:focus, .topic-mobile.card-action.bookmarkable a:hover, .topic-mobile.card-action.bookmarkable a:focus, .topic-mobile.card-action.bookmarkable span:hover, .topic-mobile.card-action.bookmarkable span:focus { border-color: #225d4d; }

.topic-mobile .card-action-trailer a:hover, .topic-mobile .card-action-trailer a:focus, .topic-mobile .card-action-trailer span:hover, .topic-mobile .card-action-trailer span:focus, .topic-mobile .card-action.bookmarkable a:hover, .topic-mobile .card-action.bookmarkable a:focus, .topic-mobile .card-action.bookmarkable span:hover, .topic-mobile .card-action.bookmarkable span:focus { border-color: #225d4d; }

.topic-internal.card-action-trailer a:hover, .topic-internal.card-action-trailer a:focus, .topic-internal.card-action-trailer span:hover, .topic-internal.card-action-trailer span:focus, .topic-internal.card-action.bookmarkable a:hover, .topic-internal.card-action.bookmarkable a:focus, .topic-internal.card-action.bookmarkable span:hover, .topic-internal.card-action.bookmarkable span:focus { border-color: #3f474f; }

.topic-internal .card-action-trailer a:hover, .topic-internal .card-action-trailer a:focus, .topic-internal .card-action-trailer span:hover, .topic-internal .card-action-trailer span:focus, .topic-internal .card-action.bookmarkable a:hover, .topic-internal .card-action.bookmarkable a:focus, .topic-internal .card-action.bookmarkable span:hover, .topic-internal .card-action.bookmarkable span:focus { border-color: #3f474f; }

.topic-foundations.card-action-trailer a:hover, .topic-foundations.card-action-trailer a:focus, .topic-foundations.card-action-trailer span:hover, .topic-foundations.card-action-trailer span:focus, .topic-foundations.card-action.bookmarkable a:hover, .topic-foundations.card-action.bookmarkable a:focus, .topic-foundations.card-action.bookmarkable span:hover, .topic-foundations.card-action.bookmarkable span:focus { border-color: #00252e; }

.topic-foundations .card-action-trailer a:hover, .topic-foundations .card-action-trailer a:focus, .topic-foundations .card-action-trailer span:hover, .topic-foundations .card-action-trailer span:focus, .topic-foundations .card-action.bookmarkable a:hover, .topic-foundations .card-action.bookmarkable a:focus, .topic-foundations .card-action.bookmarkable span:hover, .topic-foundations .card-action.bookmarkable span:focus { border-color: #00252e; }

.topic-undefined.card-action-trailer a:hover, .topic-undefined.card-action-trailer a:focus, .topic-undefined.card-action-trailer span:hover, .topic-undefined.card-action-trailer span:focus, .topic-undefined.card-action.bookmarkable a:hover, .topic-undefined.card-action.bookmarkable a:focus, .topic-undefined.card-action.bookmarkable span:hover, .topic-undefined.card-action.bookmarkable span:focus { border-color: #3f474f; }

.topic-undefined .card-action-trailer a:hover, .topic-undefined .card-action-trailer a:focus, .topic-undefined .card-action-trailer span:hover, .topic-undefined .card-action-trailer span:focus, .topic-undefined .card-action.bookmarkable a:hover, .topic-undefined .card-action.bookmarkable a:focus, .topic-undefined .card-action.bookmarkable span:hover, .topic-undefined .card-action.bookmarkable span:focus { border-color: #3f474f; }

.topic-college-credit.card-action-trailer a:hover, .topic-college-credit.card-action-trailer a:focus, .topic-college-credit.card-action-trailer span:hover, .topic-college-credit.card-action-trailer span:focus, .topic-college-credit.card-action.bookmarkable a:hover, .topic-college-credit.card-action.bookmarkable a:focus, .topic-college-credit.card-action.bookmarkable span:hover, .topic-college-credit.card-action.bookmarkable span:focus { border-color: #2c6ca1; }

.topic-college-credit .card-action-trailer a:hover, .topic-college-credit .card-action-trailer a:focus, .topic-college-credit .card-action-trailer span:hover, .topic-college-credit .card-action-trailer span:focus, .topic-college-credit .card-action.bookmarkable a:hover, .topic-college-credit .card-action.bookmarkable a:focus, .topic-college-credit .card-action.bookmarkable span:hover, .topic-college-credit .card-action.bookmarkable span:focus { border-color: #2c6ca1; }

.topic-no-code.card-action-trailer a:hover, .topic-no-code.card-action-trailer a:focus, .topic-no-code.card-action-trailer span:hover, .topic-no-code.card-action-trailer span:focus, .topic-no-code.card-action.bookmarkable a:hover, .topic-no-code.card-action.bookmarkable a:focus, .topic-no-code.card-action.bookmarkable span:hover, .topic-no-code.card-action.bookmarkable span:focus { border-color: #268762; }

.topic-no-code .card-action-trailer a:hover, .topic-no-code .card-action-trailer a:focus, .topic-no-code .card-action-trailer span:hover, .topic-no-code .card-action-trailer span:focus, .topic-no-code .card-action.bookmarkable a:hover, .topic-no-code .card-action.bookmarkable a:focus, .topic-no-code .card-action.bookmarkable span:hover, .topic-no-code .card-action.bookmarkable span:focus { border-color: #268762; }

.topic-security.card-action-trailer a:hover, .topic-security.card-action-trailer a:focus, .topic-security.card-action-trailer span:hover, .topic-security.card-action-trailer span:focus, .topic-security.card-action.bookmarkable a:hover, .topic-security.card-action.bookmarkable a:focus, .topic-security.card-action.bookmarkable span:hover, .topic-security.card-action.bookmarkable span:focus { border-color: #1983dd; }

.topic-security .card-action-trailer a:hover, .topic-security .card-action-trailer a:focus, .topic-security .card-action-trailer span:hover, .topic-security .card-action-trailer span:focus, .topic-security .card-action.bookmarkable a:hover, .topic-security .card-action.bookmarkable a:focus, .topic-security .card-action.bookmarkable span:hover, .topic-security .card-action.bookmarkable span:focus { border-color: #1983dd; }

.topic-game-development.card-action-trailer a:hover, .topic-game-development.card-action-trailer a:focus, .topic-game-development.card-action-trailer span:hover, .topic-game-development.card-action-trailer span:focus, .topic-game-development.card-action.bookmarkable a:hover, .topic-game-development.card-action.bookmarkable a:focus, .topic-game-development.card-action.bookmarkable span:hover, .topic-game-development.card-action.bookmarkable span:focus { border-color: #664bb5; }

.topic-game-development .card-action-trailer a:hover, .topic-game-development .card-action-trailer a:focus, .topic-game-development .card-action-trailer span:hover, .topic-game-development .card-action-trailer span:focus, .topic-game-development .card-action.bookmarkable a:hover, .topic-game-development .card-action.bookmarkable a:focus, .topic-game-development .card-action.bookmarkable span:hover, .topic-game-development .card-action.bookmarkable span:focus { border-color: #664bb5; }

.topic-treehouse-resources.card-action-trailer a:hover, .topic-treehouse-resources.card-action-trailer a:focus, .topic-treehouse-resources.card-action-trailer span:hover, .topic-treehouse-resources.card-action-trailer span:focus, .topic-treehouse-resources.card-action.bookmarkable a:hover, .topic-treehouse-resources.card-action.bookmarkable a:focus, .topic-treehouse-resources.card-action.bookmarkable span:hover, .topic-treehouse-resources.card-action.bookmarkable span:focus { border-color: #3ac162; }

.topic-treehouse-resources .card-action-trailer a:hover, .topic-treehouse-resources .card-action-trailer a:focus, .topic-treehouse-resources .card-action-trailer span:hover, .topic-treehouse-resources .card-action-trailer span:focus, .topic-treehouse-resources .card-action.bookmarkable a:hover, .topic-treehouse-resources .card-action.bookmarkable a:focus, .topic-treehouse-resources .card-action.bookmarkable span:hover, .topic-treehouse-resources .card-action.bookmarkable span:focus { border-color: #3ac162; }

.topic-coding-for-kids.card-action-trailer a:hover, .topic-coding-for-kids.card-action-trailer a:focus, .topic-coding-for-kids.card-action-trailer span:hover, .topic-coding-for-kids.card-action-trailer span:focus, .topic-coding-for-kids.card-action.bookmarkable a:hover, .topic-coding-for-kids.card-action.bookmarkable a:focus, .topic-coding-for-kids.card-action.bookmarkable span:hover, .topic-coding-for-kids.card-action.bookmarkable span:focus { border-color: #db520c; }

.topic-coding-for-kids .card-action-trailer a:hover, .topic-coding-for-kids .card-action-trailer a:focus, .topic-coding-for-kids .card-action-trailer span:hover, .topic-coding-for-kids .card-action-trailer span:focus, .topic-coding-for-kids .card-action.bookmarkable a:hover, .topic-coding-for-kids .card-action.bookmarkable a:focus, .topic-coding-for-kids .card-action.bookmarkable span:hover, .topic-coding-for-kids .card-action.bookmarkable span:focus { border-color: #db520c; }

.topic-ai.card-action-trailer a:hover svg, .topic-ai.card-action-trailer a:focus svg, .topic-ai.card-action-trailer span:hover svg, .topic-ai.card-action-trailer span:focus svg, .topic-ai.card-action.bookmarkable a:hover svg, .topic-ai.card-action.bookmarkable a:focus svg, .topic-ai.card-action.bookmarkable span:hover svg, .topic-ai.card-action.bookmarkable span:focus svg { fill: #552b64; }

.topic-ai .card-action-trailer a:hover svg, .topic-ai .card-action-trailer a:focus svg, .topic-ai .card-action-trailer span:hover svg, .topic-ai .card-action-trailer span:focus svg, .topic-ai .card-action.bookmarkable a:hover svg, .topic-ai .card-action.bookmarkable a:focus svg, .topic-ai .card-action.bookmarkable span:hover svg, .topic-ai .card-action.bookmarkable span:focus svg { fill: #552b64; }

.topic-back-end.card-action-trailer a:hover svg, .topic-back-end.card-action-trailer a:focus svg, .topic-back-end.card-action-trailer span:hover svg, .topic-back-end.card-action-trailer span:focus svg, .topic-back-end.card-action.bookmarkable a:hover svg, .topic-back-end.card-action.bookmarkable a:focus svg, .topic-back-end.card-action.bookmarkable span:hover svg, .topic-back-end.card-action.bookmarkable span:focus svg { fill: #005664; }

.topic-back-end .card-action-trailer a:hover svg, .topic-back-end .card-action-trailer a:focus svg, .topic-back-end .card-action-trailer span:hover svg, .topic-back-end .card-action-trailer span:focus svg, .topic-back-end .card-action.bookmarkable a:hover svg, .topic-back-end .card-action.bookmarkable a:focus svg, .topic-back-end .card-action.bookmarkable span:hover svg, .topic-back-end .card-action.bookmarkable span:focus svg { fill: #005664; }

.topic-data.card-action-trailer a:hover svg, .topic-data.card-action-trailer a:focus svg, .topic-data.card-action-trailer span:hover svg, .topic-data.card-action-trailer span:focus svg, .topic-data.card-action.bookmarkable a:hover svg, .topic-data.card-action.bookmarkable a:focus svg, .topic-data.card-action.bookmarkable span:hover svg, .topic-data.card-action.bookmarkable span:focus svg { fill: #7c3b67; }

.topic-data .card-action-trailer a:hover svg, .topic-data .card-action-trailer a:focus svg, .topic-data .card-action-trailer span:hover svg, .topic-data .card-action-trailer span:focus svg, .topic-data .card-action.bookmarkable a:hover svg, .topic-data .card-action.bookmarkable a:focus svg, .topic-data .card-action.bookmarkable span:hover svg, .topic-data .card-action.bookmarkable span:focus svg { fill: #7c3b67; }

.topic-design.card-action-trailer a:hover svg, .topic-design.card-action-trailer a:focus svg, .topic-design.card-action-trailer span:hover svg, .topic-design.card-action-trailer span:focus svg, .topic-design.card-action.bookmarkable a:hover svg, .topic-design.card-action.bookmarkable a:focus svg, .topic-design.card-action.bookmarkable span:hover svg, .topic-design.card-action.bookmarkable span:focus svg { fill: #38326d; }

.topic-design .card-action-trailer a:hover svg, .topic-design .card-action-trailer a:focus svg, .topic-design .card-action-trailer span:hover svg, .topic-design .card-action-trailer span:focus svg, .topic-design .card-action.bookmarkable a:hover svg, .topic-design .card-action.bookmarkable a:focus svg, .topic-design .card-action.bookmarkable span:hover svg, .topic-design .card-action.bookmarkable span:focus svg { fill: #38326d; }

.topic-experimental.card-action-trailer a:hover svg, .topic-experimental.card-action-trailer a:focus svg, .topic-experimental.card-action-trailer span:hover svg, .topic-experimental.card-action-trailer span:focus svg, .topic-experimental.card-action.bookmarkable a:hover svg, .topic-experimental.card-action.bookmarkable a:focus svg, .topic-experimental.card-action.bookmarkable span:hover svg, .topic-experimental.card-action.bookmarkable span:focus svg { fill: #552b64; }

.topic-experimental .card-action-trailer a:hover svg, .topic-experimental .card-action-trailer a:focus svg, .topic-experimental .card-action-trailer span:hover svg, .topic-experimental .card-action-trailer span:focus svg, .topic-experimental .card-action.bookmarkable a:hover svg, .topic-experimental .card-action.bookmarkable a:focus svg, .topic-experimental .card-action.bookmarkable span:hover svg, .topic-experimental .card-action.bookmarkable span:focus svg { fill: #552b64; }

.topic-front-end.card-action-trailer a:hover svg, .topic-front-end.card-action-trailer a:focus svg, .topic-front-end.card-action-trailer span:hover svg, .topic-front-end.card-action-trailer span:focus svg, .topic-front-end.card-action.bookmarkable a:hover svg, .topic-front-end.card-action.bookmarkable a:focus svg, .topic-front-end.card-action.bookmarkable span:hover svg, .topic-front-end.card-action.bookmarkable span:focus svg { fill: #29447c; }

.topic-front-end .card-action-trailer a:hover svg, .topic-front-end .card-action-trailer a:focus svg, .topic-front-end .card-action-trailer span:hover svg, .topic-front-end .card-action-trailer span:focus svg, .topic-front-end .card-action.bookmarkable a:hover svg, .topic-front-end .card-action.bookmarkable a:focus svg, .topic-front-end .card-action.bookmarkable span:hover svg, .topic-front-end .card-action.bookmarkable span:focus svg { fill: #29447c; }

.topic-fundamentals.card-action-trailer a:hover svg, .topic-fundamentals.card-action-trailer a:focus svg, .topic-fundamentals.card-action-trailer span:hover svg, .topic-fundamentals.card-action-trailer span:focus svg, .topic-fundamentals.card-action.bookmarkable a:hover svg, .topic-fundamentals.card-action.bookmarkable a:focus svg, .topic-fundamentals.card-action.bookmarkable span:hover svg, .topic-fundamentals.card-action.bookmarkable span:focus svg { fill: #762d45; }

.topic-fundamentals .card-action-trailer a:hover svg, .topic-fundamentals .card-action-trailer a:focus svg, .topic-fundamentals .card-action-trailer span:hover svg, .topic-fundamentals .card-action-trailer span:focus svg, .topic-fundamentals .card-action.bookmarkable a:hover svg, .topic-fundamentals .card-action.bookmarkable a:focus svg, .topic-fundamentals .card-action.bookmarkable span:hover svg, .topic-fundamentals .card-action.bookmarkable span:focus svg { fill: #762d45; }

.topic-mobile.card-action-trailer a:hover svg, .topic-mobile.card-action-trailer a:focus svg, .topic-mobile.card-action-trailer span:hover svg, .topic-mobile.card-action-trailer span:focus svg, .topic-mobile.card-action.bookmarkable a:hover svg, .topic-mobile.card-action.bookmarkable a:focus svg, .topic-mobile.card-action.bookmarkable span:hover svg, .topic-mobile.card-action.bookmarkable span:focus svg { fill: #225d4d; }

.topic-mobile .card-action-trailer a:hover svg, .topic-mobile .card-action-trailer a:focus svg, .topic-mobile .card-action-trailer span:hover svg, .topic-mobile .card-action-trailer span:focus svg, .topic-mobile .card-action.bookmarkable a:hover svg, .topic-mobile .card-action.bookmarkable a:focus svg, .topic-mobile .card-action.bookmarkable span:hover svg, .topic-mobile .card-action.bookmarkable span:focus svg { fill: #225d4d; }

.topic-internal.card-action-trailer a:hover svg, .topic-internal.card-action-trailer a:focus svg, .topic-internal.card-action-trailer span:hover svg, .topic-internal.card-action-trailer span:focus svg, .topic-internal.card-action.bookmarkable a:hover svg, .topic-internal.card-action.bookmarkable a:focus svg, .topic-internal.card-action.bookmarkable span:hover svg, .topic-internal.card-action.bookmarkable span:focus svg { fill: #3f474f; }

.topic-internal .card-action-trailer a:hover svg, .topic-internal .card-action-trailer a:focus svg, .topic-internal .card-action-trailer span:hover svg, .topic-internal .card-action-trailer span:focus svg, .topic-internal .card-action.bookmarkable a:hover svg, .topic-internal .card-action.bookmarkable a:focus svg, .topic-internal .card-action.bookmarkable span:hover svg, .topic-internal .card-action.bookmarkable span:focus svg { fill: #3f474f; }

.topic-foundations.card-action-trailer a:hover svg, .topic-foundations.card-action-trailer a:focus svg, .topic-foundations.card-action-trailer span:hover svg, .topic-foundations.card-action-trailer span:focus svg, .topic-foundations.card-action.bookmarkable a:hover svg, .topic-foundations.card-action.bookmarkable a:focus svg, .topic-foundations.card-action.bookmarkable span:hover svg, .topic-foundations.card-action.bookmarkable span:focus svg { fill: #00252e; }

.topic-foundations .card-action-trailer a:hover svg, .topic-foundations .card-action-trailer a:focus svg, .topic-foundations .card-action-trailer span:hover svg, .topic-foundations .card-action-trailer span:focus svg, .topic-foundations .card-action.bookmarkable a:hover svg, .topic-foundations .card-action.bookmarkable a:focus svg, .topic-foundations .card-action.bookmarkable span:hover svg, .topic-foundations .card-action.bookmarkable span:focus svg { fill: #00252e; }

.topic-undefined.card-action-trailer a:hover svg, .topic-undefined.card-action-trailer a:focus svg, .topic-undefined.card-action-trailer span:hover svg, .topic-undefined.card-action-trailer span:focus svg, .topic-undefined.card-action.bookmarkable a:hover svg, .topic-undefined.card-action.bookmarkable a:focus svg, .topic-undefined.card-action.bookmarkable span:hover svg, .topic-undefined.card-action.bookmarkable span:focus svg { fill: #3f474f; }

.topic-undefined .card-action-trailer a:hover svg, .topic-undefined .card-action-trailer a:focus svg, .topic-undefined .card-action-trailer span:hover svg, .topic-undefined .card-action-trailer span:focus svg, .topic-undefined .card-action.bookmarkable a:hover svg, .topic-undefined .card-action.bookmarkable a:focus svg, .topic-undefined .card-action.bookmarkable span:hover svg, .topic-undefined .card-action.bookmarkable span:focus svg { fill: #3f474f; }

.topic-college-credit.card-action-trailer a:hover svg, .topic-college-credit.card-action-trailer a:focus svg, .topic-college-credit.card-action-trailer span:hover svg, .topic-college-credit.card-action-trailer span:focus svg, .topic-college-credit.card-action.bookmarkable a:hover svg, .topic-college-credit.card-action.bookmarkable a:focus svg, .topic-college-credit.card-action.bookmarkable span:hover svg, .topic-college-credit.card-action.bookmarkable span:focus svg { fill: #2c6ca1; }

.topic-college-credit .card-action-trailer a:hover svg, .topic-college-credit .card-action-trailer a:focus svg, .topic-college-credit .card-action-trailer span:hover svg, .topic-college-credit .card-action-trailer span:focus svg, .topic-college-credit .card-action.bookmarkable a:hover svg, .topic-college-credit .card-action.bookmarkable a:focus svg, .topic-college-credit .card-action.bookmarkable span:hover svg, .topic-college-credit .card-action.bookmarkable span:focus svg { fill: #2c6ca1; }

.topic-no-code.card-action-trailer a:hover svg, .topic-no-code.card-action-trailer a:focus svg, .topic-no-code.card-action-trailer span:hover svg, .topic-no-code.card-action-trailer span:focus svg, .topic-no-code.card-action.bookmarkable a:hover svg, .topic-no-code.card-action.bookmarkable a:focus svg, .topic-no-code.card-action.bookmarkable span:hover svg, .topic-no-code.card-action.bookmarkable span:focus svg { fill: #268762; }

.topic-no-code .card-action-trailer a:hover svg, .topic-no-code .card-action-trailer a:focus svg, .topic-no-code .card-action-trailer span:hover svg, .topic-no-code .card-action-trailer span:focus svg, .topic-no-code .card-action.bookmarkable a:hover svg, .topic-no-code .card-action.bookmarkable a:focus svg, .topic-no-code .card-action.bookmarkable span:hover svg, .topic-no-code .card-action.bookmarkable span:focus svg { fill: #268762; }

.topic-security.card-action-trailer a:hover svg, .topic-security.card-action-trailer a:focus svg, .topic-security.card-action-trailer span:hover svg, .topic-security.card-action-trailer span:focus svg, .topic-security.card-action.bookmarkable a:hover svg, .topic-security.card-action.bookmarkable a:focus svg, .topic-security.card-action.bookmarkable span:hover svg, .topic-security.card-action.bookmarkable span:focus svg { fill: #1983dd; }

.topic-security .card-action-trailer a:hover svg, .topic-security .card-action-trailer a:focus svg, .topic-security .card-action-trailer span:hover svg, .topic-security .card-action-trailer span:focus svg, .topic-security .card-action.bookmarkable a:hover svg, .topic-security .card-action.bookmarkable a:focus svg, .topic-security .card-action.bookmarkable span:hover svg, .topic-security .card-action.bookmarkable span:focus svg { fill: #1983dd; }

.topic-game-development.card-action-trailer a:hover svg, .topic-game-development.card-action-trailer a:focus svg, .topic-game-development.card-action-trailer span:hover svg, .topic-game-development.card-action-trailer span:focus svg, .topic-game-development.card-action.bookmarkable a:hover svg, .topic-game-development.card-action.bookmarkable a:focus svg, .topic-game-development.card-action.bookmarkable span:hover svg, .topic-game-development.card-action.bookmarkable span:focus svg { fill: #664bb5; }

.topic-game-development .card-action-trailer a:hover svg, .topic-game-development .card-action-trailer a:focus svg, .topic-game-development .card-action-trailer span:hover svg, .topic-game-development .card-action-trailer span:focus svg, .topic-game-development .card-action.bookmarkable a:hover svg, .topic-game-development .card-action.bookmarkable a:focus svg, .topic-game-development .card-action.bookmarkable span:hover svg, .topic-game-development .card-action.bookmarkable span:focus svg { fill: #664bb5; }

.topic-treehouse-resources.card-action-trailer a:hover svg, .topic-treehouse-resources.card-action-trailer a:focus svg, .topic-treehouse-resources.card-action-trailer span:hover svg, .topic-treehouse-resources.card-action-trailer span:focus svg, .topic-treehouse-resources.card-action.bookmarkable a:hover svg, .topic-treehouse-resources.card-action.bookmarkable a:focus svg, .topic-treehouse-resources.card-action.bookmarkable span:hover svg, .topic-treehouse-resources.card-action.bookmarkable span:focus svg { fill: #3ac162; }

.topic-treehouse-resources .card-action-trailer a:hover svg, .topic-treehouse-resources .card-action-trailer a:focus svg, .topic-treehouse-resources .card-action-trailer span:hover svg, .topic-treehouse-resources .card-action-trailer span:focus svg, .topic-treehouse-resources .card-action.bookmarkable a:hover svg, .topic-treehouse-resources .card-action.bookmarkable a:focus svg, .topic-treehouse-resources .card-action.bookmarkable span:hover svg, .topic-treehouse-resources .card-action.bookmarkable span:focus svg { fill: #3ac162; }

.topic-coding-for-kids.card-action-trailer a:hover svg, .topic-coding-for-kids.card-action-trailer a:focus svg, .topic-coding-for-kids.card-action-trailer span:hover svg, .topic-coding-for-kids.card-action-trailer span:focus svg, .topic-coding-for-kids.card-action.bookmarkable a:hover svg, .topic-coding-for-kids.card-action.bookmarkable a:focus svg, .topic-coding-for-kids.card-action.bookmarkable span:hover svg, .topic-coding-for-kids.card-action.bookmarkable span:focus svg { fill: #db520c; }

.topic-coding-for-kids .card-action-trailer a:hover svg, .topic-coding-for-kids .card-action-trailer a:focus svg, .topic-coding-for-kids .card-action-trailer span:hover svg, .topic-coding-for-kids .card-action-trailer span:focus svg, .topic-coding-for-kids .card-action.bookmarkable a:hover svg, .topic-coding-for-kids .card-action.bookmarkable a:focus svg, .topic-coding-for-kids .card-action.bookmarkable span:hover svg, .topic-coding-for-kids .card-action.bookmarkable span:focus svg { fill: #db520c; }

.card-action-trailer .bookmark:before, .card-action-trailer .bookmark:after, .card-action.bookmarkable .bookmark:before, .card-action.bookmarkable .bookmark:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.card-action-trailer .bookmark:before, .card-action.bookmarkable .bookmark:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.card-action-trailer .bookmark:after, .card-action.bookmarkable .bookmark:after { content: "Bookmark"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.card-action-trailer .bookmark:hover:before, .card-action.bookmarkable .bookmark:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.card-action-trailer .bookmark:hover:after, .card-action.bookmarkable .bookmark:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.bookmarked .card-action-trailer .bookmark, .bookmarked .card-action.bookmarkable .bookmark { display: none; }

.card-action-trailer .unbookmark:before, .card-action-trailer .unbookmark:after, .card-action.bookmarkable .unbookmark:before, .card-action.bookmarkable .unbookmark:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.card-action-trailer .unbookmark:before, .card-action.bookmarkable .unbookmark:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.card-action-trailer .unbookmark:after, .card-action.bookmarkable .unbookmark:after { content: "Remove Bookmark"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.card-action-trailer .unbookmark:hover:before, .card-action.bookmarkable .unbookmark:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.card-action-trailer .unbookmark:hover:after, .card-action.bookmarkable .unbookmark:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.topic-ai.card-action-trailer .unbookmark, .topic-ai.card-action.bookmarkable .unbookmark { border-color: #733A88; }

.topic-ai .card-action-trailer .unbookmark, .topic-ai .card-action.bookmarkable .unbookmark { border-color: #733A88; }

.topic-back-end.card-action-trailer .unbookmark, .topic-back-end.card-action.bookmarkable .unbookmark { border-color: #008297; }

.topic-back-end .card-action-trailer .unbookmark, .topic-back-end .card-action.bookmarkable .unbookmark { border-color: #008297; }

.topic-data.card-action-trailer .unbookmark, .topic-data.card-action.bookmarkable .unbookmark { border-color: #9F4B84; }

.topic-data .card-action-trailer .unbookmark, .topic-data .card-action.bookmarkable .unbookmark { border-color: #9F4B84; }

.topic-design.card-action-trailer .unbookmark, .topic-design.card-action.bookmarkable .unbookmark { border-color: #4a4290; }

.topic-design .card-action-trailer .unbookmark, .topic-design .card-action.bookmarkable .unbookmark { border-color: #4a4290; }

.topic-experimental.card-action-trailer .unbookmark, .topic-experimental.card-action.bookmarkable .unbookmark { border-color: #733a88; }

.topic-experimental .card-action-trailer .unbookmark, .topic-experimental .card-action.bookmarkable .unbookmark { border-color: #733a88; }

.topic-front-end.card-action-trailer .unbookmark, .topic-front-end.card-action.bookmarkable .unbookmark { border-color: #3659a2; }

.topic-front-end .card-action-trailer .unbookmark, .topic-front-end .card-action.bookmarkable .unbookmark { border-color: #3659a2; }

.topic-fundamentals.card-action-trailer .unbookmark, .topic-fundamentals.card-action.bookmarkable .unbookmark { border-color: #9b3b5a; }

.topic-fundamentals .card-action-trailer .unbookmark, .topic-fundamentals .card-action.bookmarkable .unbookmark { border-color: #9b3b5a; }

.topic-mobile.card-action-trailer .unbookmark, .topic-mobile.card-action.bookmarkable .unbookmark { border-color: #30826C; }

.topic-mobile .card-action-trailer .unbookmark, .topic-mobile .card-action.bookmarkable .unbookmark { border-color: #30826C; }

.topic-internal.card-action-trailer .unbookmark, .topic-internal.card-action.bookmarkable .unbookmark { border-color: #55616c; }

.topic-internal .card-action-trailer .unbookmark, .topic-internal .card-action.bookmarkable .unbookmark { border-color: #55616c; }

.topic-foundations.card-action-trailer .unbookmark, .topic-foundations.card-action.bookmarkable .unbookmark { border-color: #004e61; }

.topic-foundations .card-action-trailer .unbookmark, .topic-foundations .card-action.bookmarkable .unbookmark { border-color: #004e61; }

.topic-undefined.card-action-trailer .unbookmark, .topic-undefined.card-action.bookmarkable .unbookmark { border-color: #55616c; }

.topic-undefined .card-action-trailer .unbookmark, .topic-undefined .card-action.bookmarkable .unbookmark { border-color: #55616c; }

.topic-college-credit.card-action-trailer .unbookmark, .topic-college-credit.card-action.bookmarkable .unbookmark { border-color: #3887c8; }

.topic-college-credit .card-action-trailer .unbookmark, .topic-college-credit .card-action.bookmarkable .unbookmark { border-color: #3887c8; }

.topic-no-code.card-action-trailer .unbookmark, .topic-no-code.card-action.bookmarkable .unbookmark { border-color: #31AF7F; }

.topic-no-code .card-action-trailer .unbookmark, .topic-no-code .card-action.bookmarkable .unbookmark { border-color: #31AF7F; }

.topic-security.card-action-trailer .unbookmark, .topic-security.card-action.bookmarkable .unbookmark { border-color: #409BE9; }

.topic-security .card-action-trailer .unbookmark, .topic-security .card-action.bookmarkable .unbookmark { border-color: #409BE9; }

.topic-game-development.card-action-trailer .unbookmark, .topic-game-development.card-action.bookmarkable .unbookmark { border-color: #856fc4; }

.topic-game-development .card-action-trailer .unbookmark, .topic-game-development .card-action.bookmarkable .unbookmark { border-color: #856fc4; }

.topic-treehouse-resources.card-action-trailer .unbookmark, .topic-treehouse-resources.card-action.bookmarkable .unbookmark { border-color: #5fcf80; }

.topic-treehouse-resources .card-action-trailer .unbookmark, .topic-treehouse-resources .card-action.bookmarkable .unbookmark { border-color: #5fcf80; }

.topic-coding-for-kids.card-action-trailer .unbookmark, .topic-coding-for-kids.card-action.bookmarkable .unbookmark { border-color: #F36C27; }

.topic-coding-for-kids .card-action-trailer .unbookmark, .topic-coding-for-kids .card-action.bookmarkable .unbookmark { border-color: #F36C27; }

.card:not(.bookmarked) .card-action-trailer .unbookmark, .card:not(.bookmarked) .card-action.bookmarkable .unbookmark { display: none; }

.topic-ai.card-action-trailer .unbookmark svg, .topic-ai.card-action.bookmarkable .unbookmark svg { fill: #733A88; }

.topic-ai .card-action-trailer .unbookmark svg, .topic-ai .card-action.bookmarkable .unbookmark svg { fill: #733A88; }

.topic-back-end.card-action-trailer .unbookmark svg, .topic-back-end.card-action.bookmarkable .unbookmark svg { fill: #008297; }

.topic-back-end .card-action-trailer .unbookmark svg, .topic-back-end .card-action.bookmarkable .unbookmark svg { fill: #008297; }

.topic-data.card-action-trailer .unbookmark svg, .topic-data.card-action.bookmarkable .unbookmark svg { fill: #9F4B84; }

.topic-data .card-action-trailer .unbookmark svg, .topic-data .card-action.bookmarkable .unbookmark svg { fill: #9F4B84; }

.topic-design.card-action-trailer .unbookmark svg, .topic-design.card-action.bookmarkable .unbookmark svg { fill: #4a4290; }

.topic-design .card-action-trailer .unbookmark svg, .topic-design .card-action.bookmarkable .unbookmark svg { fill: #4a4290; }

.topic-experimental.card-action-trailer .unbookmark svg, .topic-experimental.card-action.bookmarkable .unbookmark svg { fill: #733a88; }

.topic-experimental .card-action-trailer .unbookmark svg, .topic-experimental .card-action.bookmarkable .unbookmark svg { fill: #733a88; }

.topic-front-end.card-action-trailer .unbookmark svg, .topic-front-end.card-action.bookmarkable .unbookmark svg { fill: #3659a2; }

.topic-front-end .card-action-trailer .unbookmark svg, .topic-front-end .card-action.bookmarkable .unbookmark svg { fill: #3659a2; }

.topic-fundamentals.card-action-trailer .unbookmark svg, .topic-fundamentals.card-action.bookmarkable .unbookmark svg { fill: #9b3b5a; }

.topic-fundamentals .card-action-trailer .unbookmark svg, .topic-fundamentals .card-action.bookmarkable .unbookmark svg { fill: #9b3b5a; }

.topic-mobile.card-action-trailer .unbookmark svg, .topic-mobile.card-action.bookmarkable .unbookmark svg { fill: #30826C; }

.topic-mobile .card-action-trailer .unbookmark svg, .topic-mobile .card-action.bookmarkable .unbookmark svg { fill: #30826C; }

.topic-internal.card-action-trailer .unbookmark svg, .topic-internal.card-action.bookmarkable .unbookmark svg { fill: #55616c; }

.topic-internal .card-action-trailer .unbookmark svg, .topic-internal .card-action.bookmarkable .unbookmark svg { fill: #55616c; }

.topic-foundations.card-action-trailer .unbookmark svg, .topic-foundations.card-action.bookmarkable .unbookmark svg { fill: #004e61; }

.topic-foundations .card-action-trailer .unbookmark svg, .topic-foundations .card-action.bookmarkable .unbookmark svg { fill: #004e61; }

.topic-undefined.card-action-trailer .unbookmark svg, .topic-undefined.card-action.bookmarkable .unbookmark svg { fill: #55616c; }

.topic-undefined .card-action-trailer .unbookmark svg, .topic-undefined .card-action.bookmarkable .unbookmark svg { fill: #55616c; }

.topic-college-credit.card-action-trailer .unbookmark svg, .topic-college-credit.card-action.bookmarkable .unbookmark svg { fill: #3887c8; }

.topic-college-credit .card-action-trailer .unbookmark svg, .topic-college-credit .card-action.bookmarkable .unbookmark svg { fill: #3887c8; }

.topic-no-code.card-action-trailer .unbookmark svg, .topic-no-code.card-action.bookmarkable .unbookmark svg { fill: #31AF7F; }

.topic-no-code .card-action-trailer .unbookmark svg, .topic-no-code .card-action.bookmarkable .unbookmark svg { fill: #31AF7F; }

.topic-security.card-action-trailer .unbookmark svg, .topic-security.card-action.bookmarkable .unbookmark svg { fill: #409BE9; }

.topic-security .card-action-trailer .unbookmark svg, .topic-security .card-action.bookmarkable .unbookmark svg { fill: #409BE9; }

.topic-game-development.card-action-trailer .unbookmark svg, .topic-game-development.card-action.bookmarkable .unbookmark svg { fill: #856fc4; }

.topic-game-development .card-action-trailer .unbookmark svg, .topic-game-development .card-action.bookmarkable .unbookmark svg { fill: #856fc4; }

.topic-treehouse-resources.card-action-trailer .unbookmark svg, .topic-treehouse-resources.card-action.bookmarkable .unbookmark svg { fill: #5fcf80; }

.topic-treehouse-resources .card-action-trailer .unbookmark svg, .topic-treehouse-resources .card-action.bookmarkable .unbookmark svg { fill: #5fcf80; }

.topic-coding-for-kids.card-action-trailer .unbookmark svg, .topic-coding-for-kids.card-action.bookmarkable .unbookmark svg { fill: #F36C27; }

.topic-coding-for-kids .card-action-trailer .unbookmark svg, .topic-coding-for-kids .card-action.bookmarkable .unbookmark svg { fill: #F36C27; }

.card-action-trailer .add-icon, .card-action.bookmarkable .add-icon { top: 1px; position: relative; }

.card-action-trailer.loading a svg, .card-action.bookmarkable.loading a svg { display: none; }

.card-action-trailer.loading a .loading-icon, .card-action.bookmarkable.loading a .loading-icon { display: inline-block; }

.card-action.secondary { float: right; margin: 0 0 0 10px; height: 36px; line-height: 36px; }

.card-action-button, .card-action-info { position: relative; background-color: transparent; display: inline-block; border: 2px solid #e8ebed; padding: 0; text-align: center; line-height: 36px; width: 36px; height: 36px; border-radius: 50%; transition: all 300ms 0s ease; }

.card-action-button.large, .card-action-info.large { width: 40px; height: 40px; line-height: 40px; }

.card-action-button:hover, .card-action-button:focus, .card-action-info:hover, .card-action-info:focus { border-color: #6E7881; }

.card-action-button:hover svg, .card-action-button:focus svg, .card-action-info:hover svg, .card-action-info:focus svg { fill: #6E7881; }

.card-action-button-inverse, .card-action-info-inverse { border-color: rgba(255, 255, 255, 0.4); }

.card-action-button-inverse:hover, .card-action-info-inverse:hover { border-color: #fff; }

.card-action-button svg, .card-action-info svg { position: relative; pointer-events: none; fill: #8e969d; }

.card-techdegree .card-action-button svg, .card-techdegree .card-action-info svg { fill: #fff; }

.card-action-button svg.loading-icon, .card-action-info svg.loading-icon { top: 2px; display: none; }

.loading.card-action-button svg.loading-icon, .loading.card-action-info svg.loading-icon { display: inline-block; }

.card-action-button svg.loading-icon .loading-circle, .card-action-info svg.loading-icon .loading-circle { fill: #e2e5e8; }

.topic-ai.card-action-button svg.loading-icon .loading-quarter-circle, .topic-ai.card-action-info svg.loading-icon .loading-quarter-circle { fill: #733A88; }

.topic-ai .card-action-button svg.loading-icon .loading-quarter-circle, .topic-ai .card-action-info svg.loading-icon .loading-quarter-circle { fill: #733A88; }

.topic-back-end.card-action-button svg.loading-icon .loading-quarter-circle, .topic-back-end.card-action-info svg.loading-icon .loading-quarter-circle { fill: #008297; }

.topic-back-end .card-action-button svg.loading-icon .loading-quarter-circle, .topic-back-end .card-action-info svg.loading-icon .loading-quarter-circle { fill: #008297; }

.topic-data.card-action-button svg.loading-icon .loading-quarter-circle, .topic-data.card-action-info svg.loading-icon .loading-quarter-circle { fill: #9F4B84; }

.topic-data .card-action-button svg.loading-icon .loading-quarter-circle, .topic-data .card-action-info svg.loading-icon .loading-quarter-circle { fill: #9F4B84; }

.topic-design.card-action-button svg.loading-icon .loading-quarter-circle, .topic-design.card-action-info svg.loading-icon .loading-quarter-circle { fill: #4a4290; }

.topic-design .card-action-button svg.loading-icon .loading-quarter-circle, .topic-design .card-action-info svg.loading-icon .loading-quarter-circle { fill: #4a4290; }

.topic-experimental.card-action-button svg.loading-icon .loading-quarter-circle, .topic-experimental.card-action-info svg.loading-icon .loading-quarter-circle { fill: #733a88; }

.topic-experimental .card-action-button svg.loading-icon .loading-quarter-circle, .topic-experimental .card-action-info svg.loading-icon .loading-quarter-circle { fill: #733a88; }

.topic-front-end.card-action-button svg.loading-icon .loading-quarter-circle, .topic-front-end.card-action-info svg.loading-icon .loading-quarter-circle { fill: #3659a2; }

.topic-front-end .card-action-button svg.loading-icon .loading-quarter-circle, .topic-front-end .card-action-info svg.loading-icon .loading-quarter-circle { fill: #3659a2; }

.topic-fundamentals.card-action-button svg.loading-icon .loading-quarter-circle, .topic-fundamentals.card-action-info svg.loading-icon .loading-quarter-circle { fill: #9b3b5a; }

.topic-fundamentals .card-action-button svg.loading-icon .loading-quarter-circle, .topic-fundamentals .card-action-info svg.loading-icon .loading-quarter-circle { fill: #9b3b5a; }

.topic-mobile.card-action-button svg.loading-icon .loading-quarter-circle, .topic-mobile.card-action-info svg.loading-icon .loading-quarter-circle { fill: #30826C; }

.topic-mobile .card-action-button svg.loading-icon .loading-quarter-circle, .topic-mobile .card-action-info svg.loading-icon .loading-quarter-circle { fill: #30826C; }

.topic-internal.card-action-button svg.loading-icon .loading-quarter-circle, .topic-internal.card-action-info svg.loading-icon .loading-quarter-circle { fill: #55616c; }

.topic-internal .card-action-button svg.loading-icon .loading-quarter-circle, .topic-internal .card-action-info svg.loading-icon .loading-quarter-circle { fill: #55616c; }

.topic-foundations.card-action-button svg.loading-icon .loading-quarter-circle, .topic-foundations.card-action-info svg.loading-icon .loading-quarter-circle { fill: #004e61; }

.topic-foundations .card-action-button svg.loading-icon .loading-quarter-circle, .topic-foundations .card-action-info svg.loading-icon .loading-quarter-circle { fill: #004e61; }

.topic-undefined.card-action-button svg.loading-icon .loading-quarter-circle, .topic-undefined.card-action-info svg.loading-icon .loading-quarter-circle { fill: #55616c; }

.topic-undefined .card-action-button svg.loading-icon .loading-quarter-circle, .topic-undefined .card-action-info svg.loading-icon .loading-quarter-circle { fill: #55616c; }

.topic-college-credit.card-action-button svg.loading-icon .loading-quarter-circle, .topic-college-credit.card-action-info svg.loading-icon .loading-quarter-circle { fill: #3887c8; }

.topic-college-credit .card-action-button svg.loading-icon .loading-quarter-circle, .topic-college-credit .card-action-info svg.loading-icon .loading-quarter-circle { fill: #3887c8; }

.topic-no-code.card-action-button svg.loading-icon .loading-quarter-circle, .topic-no-code.card-action-info svg.loading-icon .loading-quarter-circle { fill: #31AF7F; }

.topic-no-code .card-action-button svg.loading-icon .loading-quarter-circle, .topic-no-code .card-action-info svg.loading-icon .loading-quarter-circle { fill: #31AF7F; }

.topic-security.card-action-button svg.loading-icon .loading-quarter-circle, .topic-security.card-action-info svg.loading-icon .loading-quarter-circle { fill: #409BE9; }

.topic-security .card-action-button svg.loading-icon .loading-quarter-circle, .topic-security .card-action-info svg.loading-icon .loading-quarter-circle { fill: #409BE9; }

.topic-game-development.card-action-button svg.loading-icon .loading-quarter-circle, .topic-game-development.card-action-info svg.loading-icon .loading-quarter-circle { fill: #856fc4; }

.topic-game-development .card-action-button svg.loading-icon .loading-quarter-circle, .topic-game-development .card-action-info svg.loading-icon .loading-quarter-circle { fill: #856fc4; }

.topic-treehouse-resources.card-action-button svg.loading-icon .loading-quarter-circle, .topic-treehouse-resources.card-action-info svg.loading-icon .loading-quarter-circle { fill: #5fcf80; }

.topic-treehouse-resources .card-action-button svg.loading-icon .loading-quarter-circle, .topic-treehouse-resources .card-action-info svg.loading-icon .loading-quarter-circle { fill: #5fcf80; }

.topic-coding-for-kids.card-action-button svg.loading-icon .loading-quarter-circle, .topic-coding-for-kids.card-action-info svg.loading-icon .loading-quarter-circle { fill: #F36C27; }

.topic-coding-for-kids .card-action-button svg.loading-icon .loading-quarter-circle, .topic-coding-for-kids .card-action-info svg.loading-icon .loading-quarter-circle { fill: #F36C27; }

.card-action-button svg.building-icon, .card-action-info svg.building-icon { position: absolute; top: 7px; left: 7px; }

.card-action-button svg.salary-icon, .card-action-info svg.salary-icon { top: 3px; }

.card-action-button svg.play-icon, .card-action-info svg.play-icon { width: 12px; height: 14px; left: 2px; }

.loading.card-action-button svg.play-icon, .loading.card-action-info svg.play-icon { display: none; }

.topic-ai .card-action-button:hover, .topic-ai .card-action-button:focus { border-color: #733A88; }

.topic-back-end .card-action-button:hover, .topic-back-end .card-action-button:focus { border-color: #008297; }

.topic-data .card-action-button:hover, .topic-data .card-action-button:focus { border-color: #9F4B84; }

.topic-design .card-action-button:hover, .topic-design .card-action-button:focus { border-color: #4a4290; }

.topic-experimental .card-action-button:hover, .topic-experimental .card-action-button:focus { border-color: #733a88; }

.topic-front-end .card-action-button:hover, .topic-front-end .card-action-button:focus { border-color: #3659a2; }

.topic-fundamentals .card-action-button:hover, .topic-fundamentals .card-action-button:focus { border-color: #9b3b5a; }

.topic-mobile .card-action-button:hover, .topic-mobile .card-action-button:focus { border-color: #30826C; }

.topic-internal .card-action-button:hover, .topic-internal .card-action-button:focus { border-color: #55616c; }

.topic-foundations .card-action-button:hover, .topic-foundations .card-action-button:focus { border-color: #004e61; }

.topic-undefined .card-action-button:hover, .topic-undefined .card-action-button:focus { border-color: #55616c; }

.topic-college-credit .card-action-button:hover, .topic-college-credit .card-action-button:focus { border-color: #3887c8; }

.topic-no-code .card-action-button:hover, .topic-no-code .card-action-button:focus { border-color: #31AF7F; }

.topic-security .card-action-button:hover, .topic-security .card-action-button:focus { border-color: #409BE9; }

.topic-game-development .card-action-button:hover, .topic-game-development .card-action-button:focus { border-color: #856fc4; }

.topic-treehouse-resources .card-action-button:hover, .topic-treehouse-resources .card-action-button:focus { border-color: #5fcf80; }

.topic-coding-for-kids .card-action-button:hover, .topic-coding-for-kids .card-action-button:focus { border-color: #F36C27; }

.topic-ai .card-action-button:hover svg, .topic-ai .card-action-button:focus svg { fill: #733A88; }

.topic-back-end .card-action-button:hover svg, .topic-back-end .card-action-button:focus svg { fill: #008297; }

.topic-data .card-action-button:hover svg, .topic-data .card-action-button:focus svg { fill: #9F4B84; }

.topic-design .card-action-button:hover svg, .topic-design .card-action-button:focus svg { fill: #4a4290; }

.topic-experimental .card-action-button:hover svg, .topic-experimental .card-action-button:focus svg { fill: #733a88; }

.topic-front-end .card-action-button:hover svg, .topic-front-end .card-action-button:focus svg { fill: #3659a2; }

.topic-fundamentals .card-action-button:hover svg, .topic-fundamentals .card-action-button:focus svg { fill: #9b3b5a; }

.topic-mobile .card-action-button:hover svg, .topic-mobile .card-action-button:focus svg { fill: #30826C; }

.topic-internal .card-action-button:hover svg, .topic-internal .card-action-button:focus svg { fill: #55616c; }

.topic-foundations .card-action-button:hover svg, .topic-foundations .card-action-button:focus svg { fill: #004e61; }

.topic-undefined .card-action-button:hover svg, .topic-undefined .card-action-button:focus svg { fill: #55616c; }

.topic-college-credit .card-action-button:hover svg, .topic-college-credit .card-action-button:focus svg { fill: #3887c8; }

.topic-no-code .card-action-button:hover svg, .topic-no-code .card-action-button:focus svg { fill: #31AF7F; }

.topic-security .card-action-button:hover svg, .topic-security .card-action-button:focus svg { fill: #409BE9; }

.topic-game-development .card-action-button:hover svg, .topic-game-development .card-action-button:focus svg { fill: #856fc4; }

.topic-treehouse-resources .card-action-button:hover svg, .topic-treehouse-resources .card-action-button:focus svg { fill: #5fcf80; }

.topic-coding-for-kids .card-action-button:hover svg, .topic-coding-for-kids .card-action-button:focus svg { fill: #F36C27; }

.card-action-trailer:before, .card-action-trailer:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.card-action-trailer:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.card-action-trailer:after { content: "Watch Trailer"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.card-action-trailer:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.card-action-trailer:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.card-action-trailer .tooltip { display: none; }

.card:first-child .card-action-trailer .tooltip { display: block; width: 230px; margin-left: -115px; -webkit-animation: floater 1s ease infinite; -moz-animation: floater 1s ease infinite; animation: floater 1s ease infinite; }

@-webkit-keyframes floater { 0%, 100% { -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% { -ms-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); } }

@-moz-keyframes floater { 0%, 100% { -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% { -ms-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); } }

@keyframes floater { 0%, 100% { -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% { -ms-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); } }

.card-tooltip { position: absolute; background: #384047; text-align: center; padding: 15px 20px; width: 280px; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.card-tooltip p { color: #fff; line-height: 1.6; margin: 0; }

.card-tooltip p strong { color: #fff; }

.card-tooltip:after { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.card-action:hover .card-tooltip { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.card .confirmation-tarp { display: none; position: absolute; top: 58px; right: 15px; bottom: 0; left: 15px; z-index: 3; background: rgba(255, 255, 255, 0.97); padding: 60px 30px 0; border-radius: 0 0 4px 4px; text-align: center; -webkit-animation: fade-in 0.15s ease-in; -moz-animation: fade-in 0.15s ease-in; animation: fade-in 0.15s ease-in; }

.card .confirmation-tarp.fade-out { -webkit-animation: fade-out 0.3s ease-out forwards; -moz-animation: fade-out 0.3s ease-out forwards; animation: fade-out 0.3s ease-out forwards; }

.card .confirmation-tarp h4 { font-weight: 700; font-size: 18px; line-height: 24px; margin-bottom: 8px; color: #101417; }

.card .confirmation-tarp p { font-size: 14px; color: #2b363e; margin-bottom: 20px; }

.card .confirmation-tarp .button { display: block; margin: 20px 0 0; }

.card .confirmation-tarp .button .loading-icon { display: none; width: 18px; height: 18px; margin: 0 auto; opacity: 1; opacity: 1; }

.loading .card .confirmation-tarp .button-secondary span { display: none; }

.loading .card .confirmation-tarp .button-secondary .loading-icon { display: block; }

.card .confirmation-tarp .view-all { font-size: 14px; font-weight: 700; position: relative; top: 10px; }

.topic-ai.card .confirmation-tarp .view-all { color: #733A88; }

.topic-ai .card .confirmation-tarp .view-all { color: #733A88; }

.topic-back-end.card .confirmation-tarp .view-all { color: #008297; }

.topic-back-end .card .confirmation-tarp .view-all { color: #008297; }

.topic-data.card .confirmation-tarp .view-all { color: #9F4B84; }

.topic-data .card .confirmation-tarp .view-all { color: #9F4B84; }

.topic-design.card .confirmation-tarp .view-all { color: #4a4290; }

.topic-design .card .confirmation-tarp .view-all { color: #4a4290; }

.topic-experimental.card .confirmation-tarp .view-all { color: #733a88; }

.topic-experimental .card .confirmation-tarp .view-all { color: #733a88; }

.topic-front-end.card .confirmation-tarp .view-all { color: #3659a2; }

.topic-front-end .card .confirmation-tarp .view-all { color: #3659a2; }

.topic-fundamentals.card .confirmation-tarp .view-all { color: #9b3b5a; }

.topic-fundamentals .card .confirmation-tarp .view-all { color: #9b3b5a; }

.topic-mobile.card .confirmation-tarp .view-all { color: #30826C; }

.topic-mobile .card .confirmation-tarp .view-all { color: #30826C; }

.topic-internal.card .confirmation-tarp .view-all { color: #55616c; }

.topic-internal .card .confirmation-tarp .view-all { color: #55616c; }

.topic-foundations.card .confirmation-tarp .view-all { color: #004e61; }

.topic-foundations .card .confirmation-tarp .view-all { color: #004e61; }

.topic-undefined.card .confirmation-tarp .view-all { color: #55616c; }

.topic-undefined .card .confirmation-tarp .view-all { color: #55616c; }

.topic-college-credit.card .confirmation-tarp .view-all { color: #3887c8; }

.topic-college-credit .card .confirmation-tarp .view-all { color: #3887c8; }

.topic-no-code.card .confirmation-tarp .view-all { color: #31AF7F; }

.topic-no-code .card .confirmation-tarp .view-all { color: #31AF7F; }

.topic-security.card .confirmation-tarp .view-all { color: #409BE9; }

.topic-security .card .confirmation-tarp .view-all { color: #409BE9; }

.topic-game-development.card .confirmation-tarp .view-all { color: #856fc4; }

.topic-game-development .card .confirmation-tarp .view-all { color: #856fc4; }

.topic-treehouse-resources.card .confirmation-tarp .view-all { color: #5fcf80; }

.topic-treehouse-resources .card .confirmation-tarp .view-all { color: #5fcf80; }

.topic-coding-for-kids.card .confirmation-tarp .view-all { color: #F36C27; }

.topic-coding-for-kids .card .confirmation-tarp .view-all { color: #F36C27; }

.card .confirmation-tarp .view-all svg { margin-left: 3px; position: relative; top: 2px; }

.topic-ai.card .confirmation-tarp .view-all svg { fill: #733A88; }

.topic-ai .card .confirmation-tarp .view-all svg { fill: #733A88; }

.topic-back-end.card .confirmation-tarp .view-all svg { fill: #008297; }

.topic-back-end .card .confirmation-tarp .view-all svg { fill: #008297; }

.topic-data.card .confirmation-tarp .view-all svg { fill: #9F4B84; }

.topic-data .card .confirmation-tarp .view-all svg { fill: #9F4B84; }

.topic-design.card .confirmation-tarp .view-all svg { fill: #4a4290; }

.topic-design .card .confirmation-tarp .view-all svg { fill: #4a4290; }

.topic-experimental.card .confirmation-tarp .view-all svg { fill: #733a88; }

.topic-experimental .card .confirmation-tarp .view-all svg { fill: #733a88; }

.topic-front-end.card .confirmation-tarp .view-all svg { fill: #3659a2; }

.topic-front-end .card .confirmation-tarp .view-all svg { fill: #3659a2; }

.topic-fundamentals.card .confirmation-tarp .view-all svg { fill: #9b3b5a; }

.topic-fundamentals .card .confirmation-tarp .view-all svg { fill: #9b3b5a; }

.topic-mobile.card .confirmation-tarp .view-all svg { fill: #30826C; }

.topic-mobile .card .confirmation-tarp .view-all svg { fill: #30826C; }

.topic-internal.card .confirmation-tarp .view-all svg { fill: #55616c; }

.topic-internal .card .confirmation-tarp .view-all svg { fill: #55616c; }

.topic-foundations.card .confirmation-tarp .view-all svg { fill: #004e61; }

.topic-foundations .card .confirmation-tarp .view-all svg { fill: #004e61; }

.topic-undefined.card .confirmation-tarp .view-all svg { fill: #55616c; }

.topic-undefined .card .confirmation-tarp .view-all svg { fill: #55616c; }

.topic-college-credit.card .confirmation-tarp .view-all svg { fill: #3887c8; }

.topic-college-credit .card .confirmation-tarp .view-all svg { fill: #3887c8; }

.topic-no-code.card .confirmation-tarp .view-all svg { fill: #31AF7F; }

.topic-no-code .card .confirmation-tarp .view-all svg { fill: #31AF7F; }

.topic-security.card .confirmation-tarp .view-all svg { fill: #409BE9; }

.topic-security .card .confirmation-tarp .view-all svg { fill: #409BE9; }

.topic-game-development.card .confirmation-tarp .view-all svg { fill: #856fc4; }

.topic-game-development .card .confirmation-tarp .view-all svg { fill: #856fc4; }

.topic-treehouse-resources.card .confirmation-tarp .view-all svg { fill: #5fcf80; }

.topic-treehouse-resources .card .confirmation-tarp .view-all svg { fill: #5fcf80; }

.topic-coding-for-kids.card .confirmation-tarp .view-all svg { fill: #F36C27; }

.topic-coding-for-kids .card .confirmation-tarp .view-all svg { fill: #F36C27; }

.card:not([data-location=bookmarks]) .bookmarkable-tarp .removed-wrapper { display: none; }

.card[data-location=bookmarks].personalized:not(.bookmarked) { opacity: 0; pointer-events: none; -webkit-animation: fall-out 0.3s ease-out; -moz-animation: fall-out 0.3s ease-out; animation: fall-out 0.3s ease-out; }

@-webkit-keyframes fall-out { from { -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform-origin: center center;
    opacity: 1; }
  to { -ms-transform: translate(0px, 500px) rotate(15deg);
    -moz-transform: translate(0px, 500px) rotate(15deg);
    -webkit-transform: translate(0px, 500px) rotate(15deg);
    transform: translate(0px, 500px) rotate(15deg);
    -webkit-transform-origin: center center;
    opacity: 0; } }

@-moz-keyframes fall-out { from { -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -moz-transform-origin: center center;
    opacity: 1; }
  to { -ms-transform: translate(0px, 500px) rotate(15deg);
    -moz-transform: translate(0px, 500px) rotate(15deg);
    -webkit-transform: translate(0px, 500px) rotate(15deg);
    transform: translate(0px, 500px) rotate(15deg);
    -moz-transform-origin: center center;
    opacity: 0; } }

@keyframes fall-out { from { -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    opacity: 1; }
  to { -ms-transform: translate(0px, 500px) rotate(15deg);
    -moz-transform: translate(0px, 500px) rotate(15deg);
    -webkit-transform: translate(0px, 500px) rotate(15deg);
    transform: translate(0px, 500px) rotate(15deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    opacity: 0; } }

#card-trailer-modal { width: 50%; padding: 0; margin: 30px auto; max-width: 800px; }

@media screen and (min-width: 680px) { #card-trailer-modal { width: 90%; } }

@media screen and (max-width: 679px) { #card-trailer-modal { width: 100%; } }

.coursecard-org-stats { position: absolute; bottom: 105px; right: 15px; z-index: 3; }

.coursecard-org-stats li { float: left; margin-right: 20px; }

.coursecard-org-stats li svg { height: 14px; width: auto; fill: #8e969d; }

.coursecard-org-stats h4 { display: inline; }
.empty-placeholder { height: 300px; line-height: 300px; text-align: center; }

.empty-placeholder strong { font-weight: 700; font-size: 14px; color: #2b363e; }
.dialog { position: relative; max-width: 840px; margin: 0 auto; outline: none; }

.dialog:not(.active) { display: none; }

.dialog-tarp { background: rgba(40, 46, 51, 0.93); transition: opacity 300ms 0s ease; z-index: 500; }

.dialog-tarp.active { display: table; width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }

@media screen and (min-width: 680px) { .dialog-tarp.active { padding: 30px 70px; } }

@media screen and (max-width: 679px) { .dialog-tarp.active { padding: 15px 50px; } }

.dialog-tarp:not(.active) { opacity: 0; }

.dialog-container { display: table-cell; vertical-align: middle; }

.dialog-close { border-radius: 0 4px 4px 0; transition: transform 300ms 0s ease; position: absolute; top: 0; }

@media screen and (min-width: 680px) { .dialog-close { padding: 0 11px 0 30px; right: -50px; } }

@media screen and (max-width: 679px) { .dialog-close { padding: 0 8px 0 20px !important; right: -40px; } }

.dialog-close:hover, .dialog-close:focus { -ms-transform: translatex(4px); -moz-transform: translatex(4px); -webkit-transform: translatex(4px); transform: translatex(4px); }

@media screen and (max-width: 679px) { .dialog-close svg { width: 10px; height: 10px; } }
.dropdown { background: #f9fafa; min-width: 200px; max-width: 420px; position: absolute; top: 50px; display: none; z-index: 100; border-radius: 5px; text-align: left; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.08); }

.dropdown-show .dropdown { display: block; }

.dropdown:before { position: absolute; content: ""; background: #fff; width: 12px; height: 12px; border-radius: 3px 0 0 0; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.08); top: -6px; }

.dropdown.left, .dropdown-left { left: 0; }

.dropdown.left:before, .dropdown-left:before { left: 20px; }

.dropdown.right, .dropdown-right { right: -20px; }

.dropdown.right:before, .dropdown-right:before { right: 20px; }

.dropdown .dropdown-title { display: block; background: #fff; font-size: 16px; line-height: 20px; position: relative; z-index: 1; border-bottom: 1px solid #e8ebed; border-radius: 5px 5px 0 0; margin: 0; }

.dropdown .dropdown-title a { display: block; padding: 15px 20px; color: #101417; }

.dropdown .dropdown-title a:hover { color: black; }

.dropdown > ul { margin: 0; background: #f9fafa; }

.dropdown > ul > li { list-style: none; border: 0 solid #f0f2f4; border-width: 0 0 1px; font-weight: 400; margin: 0; transition: background-color 0.3s ease, border-color 0.3s ease; }

.dropdown > ul > li:last-child { border-bottom: none; }

.dropdown > ul > li:not(.without-hover):hover { background: #fff; border-color: #e8ebed; }

.dropdown > ul > li:not(.without-hover):hover > a { color: #101417; }

.dropdown > ul > li:not(.without-hover):hover > a svg { fill: #1a2126; }

.dropdown > ul > li > a { position: relative; display: block; padding: 15px 20px; font-size: 14px; line-height: 18px; font-weight: 700; color: #1a2126; transition: background-color 0.3s ease, color 0.3s ease; }

.dropdown > ul > li > a:before, .dropdown > ul > li > a:after { content: " "; display: table; }

.dropdown > ul > li > a:after { clear: both; }

.dropdown > ul > li > a > svg { fill: #2b363e; }

.dropdown .empty { padding: 60px 20px; margin: 0; font-size: 14px; color: #2b363e; text-align: center; }

.dropdown .empty .button { margin: 15px 40px; display: block; }

.dropdown .dropdown-secondary { position: relative; display: block; padding: 15px 20px; font-size: 14px; line-height: 18px; font-weight: 700; color: #1a2126; transition: background-color 0.3s ease, color 0.3s ease; border-radius: 0 0 5px 5px; background: #fff; border-top: 1px solid #e8ebed; }

.dropdown .dropdown-secondary:before, .dropdown .dropdown-secondary:after { content: " "; display: table; }

.dropdown .dropdown-secondary:after { clear: both; }

.dropdown .dropdown-secondary > svg { fill: #2b363e; }

.dropdown .dropdown-secondary:hover { background: #edeff0; color: #101417; }
.ui-helper-hidden-accessible { display: none; }

.ui-autocomplete { margin-top: 5px; background: #2d3339; width: 200px; padding: 5px; border-radius: 5px; }

.ui-autocomplete:before { position: absolute; z-index: 1001; content: ""; background: #2d3339; width: 7px; height: 7px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 50%) rotate(45deg); -moz-transform: translate(-50%, 50%) rotate(45deg); -webkit-transform: translate(-50%, 50%) rotate(45deg); transform: translate(-50%, 50%) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; left: 20px; }

.ui-autocomplete .ui-corner-all { display: block; padding: 10px; font-weight: 700; font-size: 14px; color: #60676d; border-radius: 3px; }

.ui-autocomplete .ui-state-focus { background: #384047; color: #fff; }
div.chosen-container { width: 100%; margin-bottom: 15px; }

div.chosen-container ul.chosen-choices, div.chosen-container a.chosen-single { background: #e8ebed; border: 2px solid #e8ebed; outline: none; font-size: 14px; padding-right: 40px; height: 44px; color: #101417; box-shadow: none; border-radius: 5px; transition: background 0.25s ease; }

div.chosen-container ul.chosen-choices.chosen-default, div.chosen-container a.chosen-single.chosen-default { color: #2b363e; }

div.chosen-container ul.chosen-choices li.search-field input, div.chosen-container a.chosen-single li.search-field input { height: 40px !important; padding: 10px !important; margin: 0 !important; color: #2b363e !important; background: none !important; }

div.chosen-container ul.chosen-choices li.search-choice, div.chosen-container a.chosen-single li.search-choice { display: inline-block; border-radius: 3px; box-shadow: none; transition: background 0.25s ease; background: #fff; color: #1a2126; font-weight: 700; padding: 0 28px 0 10px; font-size: 12px; line-height: 30px; white-space: nowrap; position: relative; border: none; margin: 5px 0 0 5px; }

div.chosen-container ul.chosen-choices li.search-choice.search-choice-disabled, div.chosen-container a.chosen-single li.search-choice.search-choice-disabled { padding-right: 10px; }

div.chosen-container ul.chosen-choices li.search-choice a.search-choice-close, div.chosen-container a.chosen-single li.search-choice a.search-choice-close { top: 9px; right: 8px; }

div.chosen-container a.chosen-single span { line-height: 40px; }

div.chosen-container a.chosen-single > div { display: none; }

div.chosen-container a.chosen-single abbr.search-choice-close { display: none; }

div.chosen-container:after { background: #8e969d url("/assets/icons/icon-select-51601cb6198c7cd20126d036b213e0cde1b06ad6f9b8a4f8f6b2fc6eae40f0ed.svg") no-repeat center; content: ""; position: absolute; right: 7px; top: 7px; bottom: 7px; width: 30px; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

div.chosen-container div.chosen-drop { border: 2px solid #d4d9dd; padding: 0 5px; border-top: 0; margin-top: -2px; border-radius: 0 0 5px 5px; box-shadow: none; }

div.chosen-container div.chosen-drop div.chosen-search { padding: 0; margin: 0 0 5px; }

div.chosen-container div.chosen-drop div.chosen-search input { border: 2px solid #f0f2f4; line-height: 22px; background: none !important; padding-right: 25px; border-radius: 3px; }

div.chosen-container div.chosen-drop div.chosen-search:after { position: absolute; content: ""; top: 3px; right: 8px; width: 15px; height: 30px; background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMwMCAxNTAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwMCAxNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IlNoYXBlXzI3Ml80XyI%2BDQoJPGc%2BDQoJCTxwYXRoIGZpbGw9IiNDMEM4Q0UiIGQ9Ik0xNDYuMzgyLDEyNi4yMWwtMzcuODQtMzcuMDYyYzUuOTc1LTkuMDE1LDguOTYyLTIwLjAzMyw4Ljk2Mi0zMS4wNTJDMTE3LjUwNCwyNi4wNDMsOTEuNjEzLDAsNTguNzUyLDANCgkJCUMyNi44ODYsMCwwLDI2LjA0MywwLDU4LjA5N2MwLDMyLjA1MywyNS44OTEsNTguMDk3LDU4Ljc1Miw1OC4wOTdjMTAuOTU0LDAsMjAuOTEyLTMuMDA1LDI4Ljg3OC04LjAxM2wzNy44NCwzOC4wNjMNCgkJCWM0Ljk3OSw1LjAwOCwxMy45NDEsNS4wMDgsMTkuOTE2LDBDMTUxLjM2MSwxNDAuMjM0LDE1MS4zNjEsMTMyLjIyLDE0Ni4zODIsMTI2LjIxeiBNNjAuNzQzLDg4LjE0Nw0KCQkJYy0xNi45MjgsMC0zMC44Ny0xNC4wMjMtMzAuODctMzAuMDVjMC0xNy4wMjgsMTMuOTQxLTMwLjA1LDMwLjg3LTMwLjA1czMwLjg3LDE0LjAyMywzMC44NywzMC4wNQ0KCQkJQzkwLjYxNyw3NS4xMjUsNzcuNjcyLDg4LjE0Nyw2MC43NDMsODguMTQ3eiIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJTaGFwZV8yNzJfMl8iPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjNUZDRjgwIiBkPSJNMjk2LjM4MiwxMjYuMjFsLTM3Ljg0LTM3LjA2MmM1Ljk3NS05LjAxNSw4Ljk2Mi0yMC4wMzMsOC45NjItMzEuMDUyQzI2Ny41MDQsMjYuMDQzLDI0MS42MTMsMCwyMDguNzUyLDANCgkJCUMxNzYuODg2LDAsMTUwLDI2LjA0MywxNTAsNTguMDk3YzAsMzIuMDUzLDI1Ljg5MSw1OC4wOTcsNTguNzUyLDU4LjA5N2MxMC45NTQsMCwyMC45MTItMy4wMDUsMjguODc4LTguMDEzbDM3Ljg0LDM4LjA2Mw0KCQkJYzQuOTc5LDUuMDA4LDEzLjk0MSw1LjAwOCwxOS45MTYsMEMzMDEuMzYxLDE0MC4yMzQsMzAxLjM2MSwxMzIuMjIsMjk2LjM4MiwxMjYuMjF6IE0yMTAuNzQzLDg4LjE0Nw0KCQkJYy0xNi45MjgsMC0zMC44Ny0xNC4wMjMtMzAuODctMzAuMDVjMC0xNy4wMjgsMTMuOTQxLTMwLjA1LDMwLjg3LTMwLjA1czMwLjg3LDE0LjAyMywzMC44NywzMC4wNQ0KCQkJQzI0MC42MTcsNzUuMTI1LDIyNy42NzIsODguMTQ3LDIxMC43NDMsODguMTQ3eiIvPg0KCTwvZz4NCjwvZz4NCjxnIGlkPSJTaGFwZV8yNzJfMV8iPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjNUZDRjgwIiBkPSJNMTY1LjUyNC0yMC41MjdsLTMuNzA2LTMuNzA2YzAuNjAxLTAuOTAyLDAuOTAyLTIuMDAzLDAuOTAyLTMuMTA1YzAtMy4yMDUtMi42MDQtNS44MS01LjkxLTUuODENCgkJCWMtMy4yMDUsMC01LjkxLDIuNjA0LTUuOTEsNS44MWMwLDMuMjA1LDIuNjA0LDUuODEsNS45MSw1LjgxYzEuMTAyLDAsMi4xMDQtMC4zMDEsMi45MDUtMC44MDFsMy44MDYsMy44MDYNCgkJCWMwLjUwMSwwLjUwMSwxLjQwMiwwLjUwMSwyLjAwMywwQzE2Ni4wMjUtMTkuMTI0LDE2Ni4wMjUtMTkuOTI2LDE2NS41MjQtMjAuNTI3eiBNMTU2LjkxLTI0LjMzMw0KCQkJYy0xLjcwMywwLTMuMTA1LTEuNDAyLTMuMTA1LTMuMDA1YzAtMS43MDMsMS40MDItMy4wMDUsMy4xMDUtMy4wMDVzMy4xMDUsMS40MDIsMy4xMDUsMy4wMDUNCgkJCUMxNTkuOTE1LTI1LjYzNSwxNTguNjEzLTI0LjMzMywxNTYuOTEtMjQuMzMzeiIvPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K); background-size: 30px 30px; }

div.chosen-container div.chosen-drop ul.chosen-results { margin: 0; padding: 0 0 5px; }

div.chosen-container div.chosen-drop ul.chosen-results li { color: #1a2126; font-size: 12px; line-height: 32px; padding: 0 10px; }

div.chosen-container div.chosen-drop ul.chosen-results li.group-result { color: #101417; }

div.chosen-container div.chosen-drop ul.chosen-results li.result-selected { color: #1a2126; font-weight: 700; }

div.chosen-container div.chosen-drop ul.chosen-results li.disabled-result { color: #587081; }

div.chosen-container div.chosen-drop ul.chosen-results li.highlighted { background: #3f8abf; color: #fff; border-radius: 3px; }

div.chosen-container.chosen-drop-empty div.chosen-drop { display: none; }

div.chosen-container-active.chosen-with-drop:not(.chosen-drop-empty) ul.chosen-choices, div.chosen-container-active.chosen-with-drop:not(.chosen-drop-empty) a.chosen-single { border-radius: 5px 5px 0 0; }

div.chosen-container-active ul.chosen-choices, div.chosen-container-active a.chosen-single { background: #fff !important; border: 2px solid #d4d9dd !important; }

div.chosen-container-active ul.chosen-choices li.search-choice, div.chosen-container-active a.chosen-single li.search-choice { background: #f0f2f4; color: #1a2126; }

div.chosen-container-active ul.chosen-choices li.search-choice.search-choice-focus, div.chosen-container-active a.chosen-single li.search-choice.search-choice-focus { background: #d4d9dd; color: #101417; }

div.chosen-container-active ul.chosen-choices li.search-field input, div.chosen-container-active a.chosen-single li.search-field input { color: #101417 !important; }

.form-item .field_with_errors .chosen-container { margin-bottom: 0; }

.form-item .field_with_errors .chosen-container-active .chosen-single { border: solid 2px #d4d9dd !important; }

.form-item .field_with_errors .chosen-single { border: solid 2px #ed5a5a !important; border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; }
label { font-weight: 700; }

label .form-label-required { color: #be4a4a; }

.form-item { position: relative; margin-bottom: 13px; }

.form-item .input-text { margin-bottom: 0; }

.form-item label { position: absolute; top: 13px; right: 18px; left: 18px; line-height: 1.3; margin: 0; font-size: 14px; white-space: nowrap; cursor: text; color: #1a2126; z-index: 5; overflow: hidden; font-weight: 400; }

.form-item.form-item-inline label { white-space: normal; }

.form-item .radio-button-group label, .form-item .checkbox-group label { white-space: normal; position: unset; cursor: pointer; }

.form-item p { color: #2b363e; font-size: 14px; margin: 5px 0 0; line-height: 1.4; }

.form-item p label { position: relative; font-size: 14px; top: 2px; left: 0; }

.form-item p a { font-weight: 700; color: #1a2126; }

.form-item p a:hover { text-decoration: underline; }

.form-item.with-label-below { margin-bottom: 0; }

.form-item.with-label-below .input-text { margin-bottom: 0; }

.form-prefill .text { padding-left: 147px; }

/* INPUT & TEXTAREA */
.input-text, textarea { background: #e8ebed; margin: 0; font-size: 14px; color: #050708; width: 100%; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 12px 15px; outline: 0; border: 2px solid #e8ebed; -webkit-appearance: none; border-radius: 5px; box-shadow: 0; box-sizing: border-box; transition: .2s; }

.input-text::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #1a2126; }

.input-text:-moz-placeholder, textarea:-moz-placeholder { color: #1a2126; }

.input-text::-moz-placeholder, textarea::-moz-placeholder { color: #1a2126; }

.input-text:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #1a2126; }

.input-text .placeholder, textarea .placeholder { color: #1a2126; }

.input-text:focus, textarea:focus { background: #fff; border-color: #8a97a3; }

.input-text::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #1a2126; }

.input-text { margin-bottom: 15px; }

.expanding-input { height: 45px; min-height: 0; resize: none; }

textarea { width: 100%; padding: 11px 15px; margin: 0; min-height: 155px; display: block; line-height: 1.5; font-weight: 400; transition: height .4s, .2s; }

textarea.embed-code { font-family: Courier, "Helvetica Neue", Helvetica, Arial, sans-serif; }

.add-field { font-weight: 700; font-size: 14px; margin: 0 0 10px; color: #1a2126; display: inline-block; }

.add-field:hover { color: #1a2126; }

.remove-field { position: absolute; width: 24px; top: 10px; right: 10px; bottom: 10px; background: #b7c0c7 url("/assets/icons/icon-close-white-fbecdc3dae6799b96eee1dc532cd14701a8193754c83b3a5a95dd46ec154bb0d.svg") no-repeat center; background-size: 12px 12px; overflow: hidden; text-indent: -9999px; border-radius: 3px; }

.remove-field:hover { background-color: #be4a4a; }

/* Select */
.form-element { background: #e8ebed; border: 2px solid #e8ebed; font-weight: 400; color: #1a2126; line-height: 1; display: block; border-radius: 5px; }

.form-element span { padding: 14px 50px 13px 13px; overflow: visible; font-size: 14px; font-weight: 700; }

.form-element select { /* change these to adjust positioning of select element */ top: 0px; left: 0px; width: 100%; }

.form-element:active, .form-element:focus, .form-element.active, .form-element.focus { border-color: #e8ebed; background: #fff; }

.form-element:active:after, .form-element:focus:after, .form-element.active:after, .form-element.focus:after { background-color: #1a2126; }

div.form-element:after { background: #b7c0c7 url("/assets/icons/icon-select-51601cb6198c7cd20126d036b213e0cde1b06ad6f9b8a4f8f6b2fc6eae40f0ed.svg") no-repeat center; content: ""; position: absolute; right: 3px; top: 3px; bottom: 3px; width: 30px; border-radius: 3px; }

.form-element-inline .form-element { margin-right: 10px; display: inline-block; }

/* Uploader */
.uploader { margin-bottom: 15px; }

.uploader .button { float: left; margin-right: 10px; margin-bottom: 0; }

.uploader .filename { cursor: pointer; line-height: 40px; font-size: 14px; color: #2b363e; }

/* Select */
div.form-element span { cursor: pointer; }

div.form-element.disabled span { color: #bbb; }

/* Uploader */
.uploader { cursor: pointer; }

.form-element, .uploader { vertical-align: middle; zoom: 1; }

.form-element select:focus, .radio input:focus, .checker input:focus, .uploader input:focus { outline: 0; }

/* Select */
.form-element { position: relative; overflow: hidden; }

.form-element span { display: block; text-overflow: ellipsis; white-space: nowrap; min-height: 14px; }

.form-element select { position: absolute; top: 0; bottom: 0; opacity: 0; border: none; background: none; z-index: 1; }

/* Uploader */
.uploader { position: relative; cursor: default; }

.uploader span.filename { display: inline-block; text-overflow: ellipsis; word-break: break-all; cursor: default; }

.uploader input { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; border: none; cursor: default; z-index: 1; cursor: pointer; }

.message { padding: 15px; margin-bottom: 10px; border-radius: 5px; }

.message p { font-size: 14px; margin-bottom: 0 !important; }

.message.error { background: #be4a4a; }

.message.error p { color: #fff !important; font-size: 14px !important; }

.message.waiting { text-align: center; }

.form-item .error-message, .form-item .warning-message { color: #fff !important; margin: 0; font-size: 14px !important; font-weight: 700; color: #fff !important; display: flex; white-space: pre-wrap; background: #be4a4a; padding: 7px 14px; line-height: 1.3; border-radius: 0 0 5px 5px; }

.form-item .error-message a, .form-item .warning-message a { color: #fff !important; }

.form-item .error-message svg, .form-item .warning-message svg { fill: #fff; width: 20px; margin-right: 8px; }

.form-item.error input { border: solid 2px #be4a4a; border-radius: 5px 5px 0 0; }

.form-item.error .radio-button-group { border: solid 2px #be4a4a; border-radius: 5px 5px 0px 0px; padding-top: 2px; }

.form-item .warning-message { background: #bf570f; }

.form-item .field_with_errors input { border: solid 2px #be4a4a; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }

.form-item .field_with_warnings input { border: solid 2px #bf570f; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }

.form-item input.email.field_with_errors, .form-item input.password.field_with_errors, .form-item input.form-element.field_with_errors, .form-item input.text.field_with_errors, .form-item textarea.form-element.field_with_errors, .form-item .form-element.field_with_errors { border-color: #be4a4a; border-bottom: 0px; background-color: #f4e0e0; border-radius: 5px 5px 0 0 !important; }

.form-item .field_with_errors label, .form-item .field_with_errors label span { color: 14px; }

textarea.field_with_errors { border-color: #be4a4a; background-color: #f4e0e0; }

.text.field_with_errors { border-color: #be4a4a; background-color: #f4e0e0; }

label.disabled { cursor: not-allowed; }

label.disabled p { color: #000; }

input[disabled] { cursor: not-allowed; opacity: 50%; }

fieldset { padding: 0 0 5px; margin-bottom: 18px; border-bottom: 1px solid #edeff0; }

fieldset label { font-size: 14px; margin-bottom: 10px; display: block; }

fieldset label input { margin: -2px 3px 0 0; }

fieldset p label { font-size: 14px; }

fieldset h4 { font-size: 14px; margin: 0 0 10px; }

fieldset .button { margin-bottom: 15px; }

fieldset .grid-25 label, fieldset .grid-25 strong, fieldset .grid-20 label, fieldset .grid-20 strong { font-weight: 700; display: block; font-size: 14px; margin: 10px 15px 10px 0; }

fieldset .grid-25 strong, fieldset .grid-20 strong { margin-bottom: 3px; }

fieldset .grid-25 p, fieldset .grid-20 p { font-size: 12px; color: #2b363e; line-height: 1.3; margin-bottom: 15px; }

.upload-field-profile { float: left; margin: 0 20px 10px -100px; background-size: cover; }

.upload-field-profile-container { padding-left: 110px; }

.upload-field-profile-container:before, .upload-field-profile-container:after { content: " "; display: table; }

.upload-field-profile-container:after { clear: both; }

.upload-field-profile-container .uploader { margin: 15px 0 10px; overflow: hidden; }

.upload-field-profile-container p { font-size: 14px; color: #2b363e; margin-bottom: 10px; line-height: 1.5; }

.upload-field-profile-container a { font-weight: 700; color: #1a2126; }

.upload-field-profile-container a:hover { color: #101417; }

.textarea-title textarea.form-element { height: 45px; min-height: 0; padding: 11px 15px; resize: none; }

.form-footer { margin-bottom: -10px; width: 100%; display: inline-block; }

.form-footer:before, .form-footer:after { content: " "; display: table; }

.form-footer:after { clear: both; }

.form-footer .button { margin: 0 10px 10px 0; float: left; }

.form-footer .button.button-right { float: right; }

.form-footer.text-centered .button { float: none; margin-right: 0; }

.form-footer p { color: #1a2126; font-size: 13px; line-height: 1.4; padding: 13px 0 0; margin: 0 !important; display: inline-block; }

.form-footer p button { margin-top: -13px; padding: 9px 12px; }

.form-footer .input-checkbox { margin-top: -2px; }

.form-footer label { font-size: 14px; }

@media screen and (max-width: 679px) { .form-footer { margin-bottom: 0; } }

.form-item-inline { padding-left: 20px; }

.form-item-inline .input-checkbox, .form-item-inline .input-radio { float: left; margin: 2px 0 0 -20px; }

.form-item-inline label, .form-item-inline strong { position: relative; top: 0; left: 0; font-size: 14px; font-weight: 700; color: #1a2126; display: inline-block; }

.form-item-inline strong a { color: #1a2126; }

.credit-card-chosen .form-element { margin-bottom: 5px; }
span.loading-spinner { width: 100px; height: 100px; position: relative; top: 18px; left: 10px; border: solid 3px #b9c1c7; border-radius: 100px; -webkit-animation: spin 1.2s infinite linear; -moz-animation: spin 1.2s infinite linear; animation: spin 1.2s infinite linear; display: none; }

html.loading span.loading-spinner { display: inline-block; }

span.loading-spinner > span { display: inline-block; width: 100px; height: 100px; border: solid 3px #60676d; position: absolute; top: -3px; left: -3px; z-index: 2; clip: rect(0, 9px, 10px, 0); border-radius: 100px; }

span.loading-spinner.loading-spinner-large { width: 80px; height: 80px; top: 0; left: 0; margin: 0 0 -45px; border: 15px solid #f0f2f4; display: inline-block; }

span.loading-spinner.loading-spinner-large > span { width: 80px; height: 80px; border: 15px solid #384047; clip: rect(0, 40px, 40px, 0); top: -15px; left: -15px; }
.transparent-while-loading { opacity: 0.3; }
.markdown-zone h1, .markdown-zone h2, .markdown-zone h3, .markdown-zone h4, .markdown-zone h5, .markdown-zone h6 { font-weight: 700; margin-bottom: 25px; }

.markdown-zone h1:not(:first-child), .markdown-zone h2:not(:first-child), .markdown-zone h3:not(:first-child), .markdown-zone h4:not(:first-child), .markdown-zone h5:not(:first-child), .markdown-zone h6:not(:first-child) { margin-top: 30px; }

.markdown-zone h1, .markdown-zone h2 { color: #384047; }

.markdown-zone h1 { font-size: 20px; }

.markdown-zone h2 { font-size: 17px; }

.markdown-zone h3, .markdown-zone h4, .markdown-zone h5, .markdown-zone h6 { font-size: 14px; margin-bottom: 15px; color: #2d3339; }

.markdown-zone p, .markdown-zone pre { line-height: 1.5; }

@media screen and (min-width: 680px) { .markdown-zone p, .markdown-zone pre { font-size: 14px; } }

@media screen and (max-width: 679px) { .markdown-zone p, .markdown-zone pre { font-size: 14px; } }

.markdown-zone p { color: #1a2126; font-size: 14px; margin-bottom: 15px; }

.markdown-zone pre { margin-bottom: 20px; color: #101417; }

.markdown-zone pre code { font-family: courier, sans-serif; padding: 10px; color: #fff; display: block; overflow-x: auto; background: #384047; border-radius: 5px; }

.markdown-zone code { word-wrap: break-word; font-family: "monoco", courier, monospace, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7b59ad; padding: .2em .3em; font-size: 90%; background-color: #f9fafa; border: 1px solid #e8ebed; border-radius: 4px; }

.markdown-zone a { cursor: pointer; transition: color 300ms 0s ease; text-decoration: none; font-weight: 700; color: #326e99; }

.markdown-zone a:hover { text-decoration: underline; color: #303853; }

.markdown-zone blockquote { border-left: 4px solid #d4d9dd; display: block; margin-left: 10px; padding-left: 10px; font-size: 16px; color: #101417; font-weight: 400; }

.markdown-zone blockquote p { color: #101417; margin-bottom: 10px; }

.markdown-zone blockquote p:last-of-type { margin-bottom: 0; }

.markdown-zone img { max-width: 100%; max-height: auto; }

.markdown-zone img.emoji { vertical-align: -22%; }

.markdown-zone strong { font-weight: 700; }

.markdown-zone em { font-style: italic; }

.markdown-zone ul, .markdown-zone ol { list-style: outside; padding-left: 20px; margin: 0 0 30px; }

.markdown-zone ul li, .markdown-zone ol li { margin: 0 0 10px; line-height: 1.5; }

@media screen and (min-width: 680px) { .markdown-zone ul li, .markdown-zone ol li { font-size: 14px; } }

@media screen and (max-width: 679px) { .markdown-zone ul li, .markdown-zone ol li { font-size: 14px; } }

.markdown-zone ul li li, .markdown-zone ul li p, .markdown-zone ol li li, .markdown-zone ol li p { font-size: 14px; }

.markdown-zone ul li:last-of-type, .markdown-zone ol li:last-of-type { margin-bottom: 0; }

.markdown-zone ul li h3, .markdown-zone ol li h3 { margin-bottom: 10px; font-size: 14px; color: #8d9aa5; }

.markdown-zone ul li ul, .markdown-zone ol li ul { margin-top: 8px; }

.markdown-zone ul li li, .markdown-zone ol li li { list-style-type: circle; }

.markdown-zone ul li ol, .markdown-zone ol li ol { margin-top: 5px; }

.markdown-zone ol > li { list-style-type: decimal; }

.markdown-zone hr { border-color: #d4d9dd; }

.markdown-zone .highlight { margin-bottom: 20px; font-size: 14px; font-family: "monoco", courier, monospace, "Helvetica Neue", Helvetica, Arial, sans-serif; background: #2d3339; padding: 15px; overflow: hidden; overflow-x: scroll; border-radius: 5px; }

.markdown-zone .highlight pre { margin-bottom: 10px; color: #f8f8f8; }
.mobile-awareness { background: #39ADD1; border-radius: 4px; text-align: center; padding: 40px 0 0; margin: 0 0 30px; position: relative; overflow: hidden; }

.mobile-awareness-heading, .mobile-awareness-subline, .mobile-awareness-link { color: #fff; padding: 0 15px; position: relative; z-index: 2; }

.mobile-awareness-heading { margin: 0 0 10px; font-size: 24px; }

.mobile-awareness-subline { font-size: 16px; margin-bottom: 20px; color: rgba(255, 255, 255, 0.75); }

.mobile-awareness-link { padding: 0 15px; font-size: 16px; margin-bottom: 70px; font-weight: 700; display: inline-block; }

.mobile-awareness-close { position: absolute; top: 20px; right: 20px; padding: 10px; z-index: 3; }

.mobile-awareness-close svg { fill: rgba(255, 255, 255, 0.5); }

.mobile-awareness-close:hover svg { fill: white; }

.mobile-awareness #header-bg { position: absolute; bottom: 0; right: 0; left: 0; width: 100%; height: auto; border-bottom: 20px solid #2879ad; border-radius: 0 0 4px 4px; }

.mobile-awareness #header-bg .window { -webkit-animation: window-lit 20s infinite ease-in-out; -moz-animation: window-lit 20s infinite ease-in-out; animation: window-lit 20s infinite ease-in-out; }

.mobile-awareness #cloud1, .mobile-awareness #cloud2 { position: absolute; top: 20px; height: auto; width: 10%; }

.mobile-awareness #cloud1 { top: 30px; left: 40px; -webkit-animation: cloud1 60s infinite linear; -moz-animation: cloud1 60s infinite linear; animation: cloud1 60s infinite linear; }

.mobile-awareness #cloud2 { right: 50px; width: 15%; -webkit-animation: cloud2 40s infinite linear; -moz-animation: cloud2 40s infinite linear; animation: cloud2 40s infinite linear; }

.mobile-awareness #bus { position: absolute; bottom: 10px; width: 20%; height: auto; z-index: 1; -webkit-animation: bus-ride 20s infinite linear; -moz-animation: bus-ride 20s infinite linear; animation: bus-ride 20s infinite linear; }

.mobile-awareness #plane { position: absolute; top: 20px; width: 10%; height: auto; z-index: 1; -webkit-animation: plane-soar 40s infinite linear; -moz-animation: plane-soar 40s infinite linear; animation: plane-soar 40s infinite linear; }

.mobile-awareness-alt-heading { margin: 0 0 10px; font-size: 18px; line-height: 1.4em; }

.mobile-awareness-alt-subline { color: #2b363e; }

.mobile-awareness-alt-link { color: #3f8abf; font-size: 14px; font-weight: 700; display: inline-block; margin-right: 15px; }

.mobile-awareness-alt .mobile-illustration { width: 20%; float: right; margin: 0 0 0 30px; }

@-webkit-keyframes plane-soar { 0% { opacity: 1;
    right: -100%; }
  30% { opacity: 1;
    right: 200%; }
  33%, 100% { opacity: 0; } }

@-moz-keyframes plane-soar { 0% { opacity: 1;
    right: -100%; }
  30% { opacity: 1;
    right: 200%; }
  33%, 100% { opacity: 0; } }

@keyframes plane-soar { 0% { opacity: 1;
    right: -100%; }
  30% { opacity: 1;
    right: 200%; }
  33%, 100% { opacity: 0; } }

@-webkit-keyframes bus-ride { 0%, 15% { opacity: 0; }
  16% { opacity: 1;
    left: -100%; }
  100% { opacity: 1;
    left: 200%; } }

@-moz-keyframes bus-ride { 0%, 15% { opacity: 0; }
  16% { opacity: 1;
    left: -100%; }
  100% { opacity: 1;
    left: 200%; } }

@keyframes bus-ride { 0%, 15% { opacity: 0; }
  16% { opacity: 1;
    left: -100%; }
  100% { opacity: 1;
    left: 200%; } }

@-webkit-keyframes window-lit { 0%, 30%, 66% { fill: #288BBF; }
  33%, 36%, 44%, 57%, 60%, 63% { fill: #ffd55c; }
  35%, 38%, 52% { fill: rgba(255, 213, 92, 0.4); }
  46%, 62% { fill: rgba(255, 213, 92, 0.7); } }

@-moz-keyframes window-lit { 0%, 30%, 66% { fill: #288BBF; }
  33%, 36%, 44%, 57%, 60%, 63% { fill: #ffd55c; }
  35%, 38%, 52% { fill: rgba(255, 213, 92, 0.4); }
  46%, 62% { fill: rgba(255, 213, 92, 0.7); } }

@keyframes window-lit { 0%, 30%, 66% { fill: #288BBF; }
  33%, 36%, 44%, 57%, 60%, 63% { fill: #ffd55c; }
  35%, 38%, 52% { fill: rgba(255, 213, 92, 0.4); }
  46%, 62% { fill: rgba(255, 213, 92, 0.7); } }

@-webkit-keyframes cloud1 { 0% { opacity: .1;
    left: -20%; }
  50% { opacity: 1;
    left: 80%; }
  100% { opacity: .1;
    left: 90%; } }

@-moz-keyframes cloud1 { 0% { opacity: .1;
    left: -20%; }
  50% { opacity: 1;
    left: 80%; }
  100% { opacity: .1;
    left: 90%; } }

@keyframes cloud1 { 0% { opacity: .1;
    left: -20%; }
  50% { opacity: 1;
    left: 80%; }
  100% { opacity: .1;
    left: 90%; } }

@-webkit-keyframes cloud2 { 0% { opacity: .5;
    right: -20%; }
  80% { opacity: 1;
    right: 80%; }
  100% { opacity: .1;
    right: 90%; } }

@-moz-keyframes cloud2 { 0% { opacity: .5;
    right: -20%; }
  80% { opacity: 1;
    right: 80%; }
  100% { opacity: .1;
    right: 90%; } }

@keyframes cloud2 { 0% { opacity: .5;
    right: -20%; }
  80% { opacity: 1;
    right: 80%; }
  100% { opacity: .1;
    right: 90%; } }
.modal { position: absolute; top: 0; right: 0; left: 0; max-width: 1340px; z-index: 50000; }

@media screen and (min-width: 970px) { .modal { padding: 30px; margin: 0 auto; }
  .treehouse-layout .modal { left: 70px; } }

@media screen and (max-width: 969px) { .modal { padding: 10px 30px; } }

.modal .module + .module { margin-bottom: 0; }

.modal p, .modal li { line-height: 1.4; font-size: 14px; }

.modal p { margin-bottom: 20px; }

.modal li { margin: 0 0 5px 10px; }

.modal .grid-container { margin: 0 -15px; }

.modal .achievement-hero { background: #f9fafa; border-bottom: 1px solid #edeff0; padding: 50px 0; position: relative; text-align: center; float: none; overflow: hidden; min-height: 150px; line-height: 1; font-size: inherit; border-radius: 5px 5px 0 0; }

@media screen and (min-width: 680px) { .modal .achievement-hero { margin: -30px -30px 30px; } }

@media screen and (max-width: 679px) { .modal .achievement-hero { margin: -20px -20px 20px; } }

.modal .achievement-hero.track-complete { background-color: #5fcf80; background-image: url("/assets/icons/icon-track-completion-card-9709633e0a78b73436004489b5f44aecba91cfb33329115ecd47847cd743046b.svg"); background-size: 100%; }

.modal .achievement-hero.track-complete p { color: #d5f2dd; font-size: 18px; font-weight: 700; }

.modal .achievement-hero.track-complete p .points-total { color: #fff; display: block; font-size: 52px; }

.modal .achievement-hero .check-complete { margin: 10px 0 15px 0; width: 20%; }

.modal .achievement-hero .achievement-badge { line-height: 240px; width: 200px; height: 240px; position: relative; text-align: center; display: inline-block; }

.modal .achievement-hero .achievement-badge img { width: 200px; }

.modal .achievement-hero .achievement-badge .icon-complete { position: absolute; top: 35px; right: -20px; z-index: 2; }

.modal .achievement-hero .achievement-badge .points-earned { position: absolute; background: #f9fafa; padding: 5px; width: 60px; height: 60px; line-height: 57px; bottom: 35px; left: -50px; z-index: 2; border-radius: 80px; -webkit-animation-name: fanFair; -moz-animation-name: fanFair; animation-name: fanFair; -webkit-animation-duration: 13s; -moz-animation-duration: 13s; animation-duration: 13s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.modal .achievement-hero .achievement-badge .points-earned sup { font-size: 14px; margin: 0 1px 0 -.25em; }

.modal .achievement-hero .achievement-badge .points-earned h3 { font-size: 18px; }

.modal .achievement-hero .points-earned { position: relative; width: 240px; height: 165px; padding-top: 75px; margin-left: 15px; text-align: center; display: inline-block; }

.modal .achievement-hero .points-earned .icon { position: absolute; top: 0; left: 0; }

.modal-active .modal .achievement-hero .points-earned .icon { -webkit-animation-name: spinning; -moz-animation-name: spinning; animation-name: spinning; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; }

.modal .achievement-hero .points-earned h3 { font-size: 64px; font-weight: 700; display: inline-block; }

.modal .achievement-hero .points-earned sup { font-size: 48px; font-weight: 700; color: #2b363e; margin: 0 3px 0 -.65em; display: inline-block; }

.modal .achievement-hero .points-earned p { font-weight: 700; font-size: 18px; margin-bottom: 30px; }

.modal .achievement-hero .points-earned img { width: 150px; margin-bottom: -250px; }

.modal.modal-active .achievement-hero .points-earned .icon { -webkit-animation-name: spinning; -moz-animation-name: spinning; animation-name: spinning; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; }

.modal .modal-callout h2 { font-size: 26px; color: #384047; font-weight: 700; margin-bottom: 8px; line-height: 34px; }

.modal .modal-callout p { font-size: 15px; color: #1a2126; line-height: 1.6; font-weight: 400; }

.modal .modal-callout p a { font-weight: 700; color: #101417; }

.modal .modal-callout p strong { font-weight: 700; color: #1a2126; }

.modal .achievement-rewards { position: relative; }

.modal .achievement-rewards-callout { background: #384047; position: absolute; bottom: 30px; right: 15px; left: 15px; padding: 0 115px 0 20px; z-index: 1; border-radius: 5px; }

.modal .achievement-rewards-callout:before, .modal .achievement-rewards-callout:after { content: " "; display: table; }

.modal .achievement-rewards-callout:after { clear: both; }

.modal .achievement-rewards-callout .badge-earned { padding: 22px 0 22px 65px; }

.modal .achievement-rewards-callout .badge-earned img { float: left; width: 50px; margin: 0 0 0 -65px; }

.modal .achievement-rewards-callout .badge-earned strong { font-size: 14px; font-weight: 700; color: #5fcf80; display: block; margin: 7px 0 5px; }

.modal .achievement-rewards-callout .badge-earned h3 { font-weight: 700; font-size: 18px; line-height: 1.2; color: #fff; }

.modal .achievement-rewards-callout .points-earned { width: 75px; height: 75px; line-height: 75px; padding: 0; margin: 10px -95px 10px 0; float: right; text-align: center; position: relative; }

.modal .achievement-rewards-callout .points-earned img { position: absolute; width: 75px; top: 0; left: 0; margin: 0; opacity: .2; -webkit-animation: spinning 350ms linear 0s infinite; -moz-animation: spinning 350ms linear 0s infinite; animation: spinning 350ms linear 0s infinite; }

.modal .achievement-rewards-callout .points-earned strong { color: #fff; font-weight: 700; font-size: 18px; }

.modal .achievement-rewards-callout .points-earned sup { color: #101417; font-weight: 700; font-size: 18px; margin: -10px 1px 0 -3px; display: inline-block; }

.modal-close.button { position: absolute; margin: 0; z-index: 2; }

@media screen and (min-width: 680px) { .modal-close.button { right: 15px; top: 15px; } }

@media screen and (max-width: 679px) { .modal-close.button { top: 10px; right: 10px; } }

.modal-tarp { background: rgba(45, 51, 57, 0.7); position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 30px 15px; z-index: 499; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; }

@media screen and (min-width: 970px) { .treehouse-layout .modal-tarp { left: 70px; } }

@media screen and (max-width: 969px) { .treehouse-layout .modal-tarp { left: 0; } }

.desktop-nav-expanded .treehouse-layout .modal-tarp { left: 220px; }

.modal .mixed-box .box-footer .icon { float: left; margin: 0 12px 5px 0; position: relative; top: 3px; }

.modal .mixed-box .box-footer p { font-size: 13px; color: #2b363e; line-height: 1.5; text-align: left; margin-bottom: 2px; }

.modal .mixed-box .box-footer p a { color: #1a2126; font-weight: 700; }

.modal .mixed-box .box-footer p strong { font-weight: 700; }

#overlay { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; }

#closePopup { position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 18px; background: transparent; border: none; color: #fff; }

.library-cta { position: relative; height: 294px; min-width: 740px; max-width: 884px; padding: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: space-around; border-radius: 4px; padding: 20px 68px; background-color: #0E9298 !important; background: url(/assets/views/landing_pages/career_toolbox_gradient-06757f5d4d06e5d6777979b7d57331f47a532a16505ecdba7d1f7f201a749b67.webp); }

@media screen and (max-width: 969px) { .library-cta { min-width: 300px; flex-direction: column; height: 420px; align-items: center; justify-content: center; gap: 30px; text-align: center; padding: 20px; } }

.library-cta img { max-height: 170px; max-width: 300px; border-radius: 4px; margin-left: 30px; }

@media screen and (max-width: 969px) { .library-cta img { max-width: 200px; } }

.library-cta img.external-link { height: 15px; }

.library-cta-text { max-width: 400px; }

@media screen and (max-width: 969px) { .library-cta-text { display: flex; flex-direction: column; align-items: center; order: 1; } }

.library-cta-text h3 { color: #fff; font-size: 27px; font-weight: 400; line-height: 32px !important; }

@media screen and (max-width: 969px) { .library-cta-text h3 { font-size: 16px; line-height: 20px !important; } }

.library-cta-text .button { display: flex; align-items: center; justify-content: center; width: 260px; margin-block: 20px 10px; color: #133EA2 !important; line-height: 53px; border: none; background-color: #fff; }

.library-cta-text .button img { margin-left: 10px; }

@media screen and (max-width: 969px) { .library-cta-text .button { width: 230px; height: 40px; font-size: 14px; line-height: 18px !important; } }

.library-cta-text .button:hover { color: #0E9298 !important; }

.library-cta #dontShowAgain { font-size: 12px; font-weight: 500; color: #fff; text-decoration: underline; margin-left: 60.835px; }

@media screen and (max-width: 969px) { .library-cta #dontShowAgain { margin-left: 0; } }

.library-cta #dontShowAgain:hover { cursor: pointer; }
.nav-list { border-top: none; margin: -15px; overflow: hidden; border-radius: 5px; }

.nav-list li { list-style-type: none; }

.nav-list li:last-child { border: none; }

.nav-list li:last-child a { border-bottom: none; }

.nav-list a .topic-color, .nav-list strong .topic-color { background: transparent; position: absolute; font-size: 24px; right: 15px; top: 10px; padding: 0; border-bottom: none; }

.nav-list a .icon, .nav-list strong .icon { margin: -8px 5px -5px 0px; position: relative; }

.nav-list a.selected, .nav-list strong.selected { color: #101417; background: #fff; border-color: #d4d9dd; z-index: 1; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); }

.nav-list strong { padding-right: 40px; }

.nav-list a:hover { background: #fff; color: #101417; }
#no-results { display: none; margin: 40px 0; }

#no-results p { color: #1a2126; font-size: 1.8em; font-weight: 700; margin-bottom: 30px; text-align: center; }

#no-results p.reset { font-size: 14px; font-weight: 400; }
.notification-list-pull-up { margin-top: -20px; }

.notification-list-empty { text-align: center; min-height: 200px; line-height: 200px; }

.notification-list-empty strong { font-size: 1.4em; color: #d4d9dd; font-weight: 700; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: inline-block; }

.notification-item { border-bottom: 1px solid #e8ebed; }

.notification-unread { background: #fff; box-shadow: 0 1px 0 #e8ebed; }

.notification-anchor { position: relative; display: block; font-size: 14px; line-height: 18px; font-weight: 700; color: #1a2126; transition: color 0.3s ease, background-color 0.3s ease; padding: 20px 76px 20px 0 !important; }

.notification-dropdown .notification-anchor { padding-left: 20px !important; padding-right: 96px !important; }

.notification-anchor p { font-size: 13px; }

.notification-meta { font-size: 12px; margin-bottom: 5px; color: #1a2126; }

.notification-dropdown .notification-meta { color: #2b363e; }

.notification-title { color: #384047; font-size: 14px; transition: color 0.3s ease; }

.notifications-index .topic-ai .notification-title { color: #733A88; }

.notifications-index .topic-back-end .notification-title { color: #008297; }

.notifications-index .topic-data .notification-title { color: #9F4B84; }

.notifications-index .topic-design .notification-title { color: #4a4290; }

.notifications-index .topic-experimental .notification-title { color: #733a88; }

.notifications-index .topic-front-end .notification-title { color: #3659a2; }

.notifications-index .topic-fundamentals .notification-title { color: #9b3b5a; }

.notifications-index .topic-mobile .notification-title { color: #30826C; }

.notifications-index .topic-internal .notification-title { color: #55616c; }

.notifications-index .topic-foundations .notification-title { color: #004e61; }

.notifications-index .topic-undefined .notification-title { color: #55616c; }

.notifications-index .topic-college-credit .notification-title { color: #3887c8; }

.notifications-index .topic-no-code .notification-title { color: #31AF7F; }

.notifications-index .topic-security .notification-title { color: #409BE9; }

.notifications-index .topic-game-development .notification-title { color: #856fc4; }

.notifications-index .topic-treehouse-resources .notification-title { color: #5fcf80; }

.notifications-index .topic-coding-for-kids .notification-title { color: #F36C27; }

.notification-item:hover .topic-ai .notification-title { color: #733A88; }

.notification-item:hover .topic-back-end .notification-title { color: #008297; }

.notification-item:hover .topic-data .notification-title { color: #9F4B84; }

.notification-item:hover .topic-design .notification-title { color: #4a4290; }

.notification-item:hover .topic-experimental .notification-title { color: #733a88; }

.notification-item:hover .topic-front-end .notification-title { color: #3659a2; }

.notification-item:hover .topic-fundamentals .notification-title { color: #9b3b5a; }

.notification-item:hover .topic-mobile .notification-title { color: #30826C; }

.notification-item:hover .topic-internal .notification-title { color: #55616c; }

.notification-item:hover .topic-foundations .notification-title { color: #004e61; }

.notification-item:hover .topic-undefined .notification-title { color: #55616c; }

.notification-item:hover .topic-college-credit .notification-title { color: #3887c8; }

.notification-item:hover .topic-no-code .notification-title { color: #31AF7F; }

.notification-item:hover .topic-security .notification-title { color: #409BE9; }

.notification-item:hover .topic-game-development .notification-title { color: #856fc4; }

.notification-item:hover .topic-treehouse-resources .notification-title { color: #5fcf80; }

.notification-item:hover .topic-coding-for-kids .notification-title { color: #F36C27; }

.notification-item.notification-unread .topic-ai .notification-title { color: #733A88; }

.notification-item.notification-unread .topic-back-end .notification-title { color: #008297; }

.notification-item.notification-unread .topic-data .notification-title { color: #9F4B84; }

.notification-item.notification-unread .topic-design .notification-title { color: #4a4290; }

.notification-item.notification-unread .topic-experimental .notification-title { color: #733a88; }

.notification-item.notification-unread .topic-front-end .notification-title { color: #3659a2; }

.notification-item.notification-unread .topic-fundamentals .notification-title { color: #9b3b5a; }

.notification-item.notification-unread .topic-mobile .notification-title { color: #30826C; }

.notification-item.notification-unread .topic-internal .notification-title { color: #55616c; }

.notification-item.notification-unread .topic-foundations .notification-title { color: #004e61; }

.notification-item.notification-unread .topic-undefined .notification-title { color: #55616c; }

.notification-item.notification-unread .topic-college-credit .notification-title { color: #3887c8; }

.notification-item.notification-unread .topic-no-code .notification-title { color: #31AF7F; }

.notification-item.notification-unread .topic-security .notification-title { color: #409BE9; }

.notification-item.notification-unread .topic-game-development .notification-title { color: #856fc4; }

.notification-item.notification-unread .topic-treehouse-resources .notification-title { color: #5fcf80; }

.notification-item.notification-unread .topic-coding-for-kids .notification-title { color: #F36C27; }

.notification-dropdown .notification-item:not(.notification-unread):not(:hover) .notification-title { color: #1a2126; }

.notification-timestamp { font-weight: 400; }

.notification-message { font-weight: 400; margin-bottom: 0; margin-top: 5px; color: #1a2126; }

.notification-dropdown .notification-message { color: #2b363e; }

.notification-dropdown .notification-message strong { color: #2b363e; }

.notification-avatar, .notification-type { position: absolute; right: 0; top: 50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

.notification-dropdown .notification-avatar, .notification-dropdown .notification-type { right: 20px; }

.notification-type { border-radius: 50%; display: block; width: 44px; height: 44px; border: 2px solid #55616c; transition: opacity 0.3s ease, border 0.3s ease; }

.notifications-index .topic-ai .notification-type { border-color: #733A88; }

.notifications-index .topic-back-end .notification-type { border-color: #008297; }

.notifications-index .topic-data .notification-type { border-color: #9F4B84; }

.notifications-index .topic-design .notification-type { border-color: #4a4290; }

.notifications-index .topic-experimental .notification-type { border-color: #733a88; }

.notifications-index .topic-front-end .notification-type { border-color: #3659a2; }

.notifications-index .topic-fundamentals .notification-type { border-color: #9b3b5a; }

.notifications-index .topic-mobile .notification-type { border-color: #30826C; }

.notifications-index .topic-internal .notification-type { border-color: #55616c; }

.notifications-index .topic-foundations .notification-type { border-color: #004e61; }

.notifications-index .topic-undefined .notification-type { border-color: #55616c; }

.notifications-index .topic-college-credit .notification-type { border-color: #3887c8; }

.notifications-index .topic-no-code .notification-type { border-color: #31AF7F; }

.notifications-index .topic-security .notification-type { border-color: #409BE9; }

.notifications-index .topic-game-development .notification-type { border-color: #856fc4; }

.notifications-index .topic-treehouse-resources .notification-type { border-color: #5fcf80; }

.notifications-index .topic-coding-for-kids .notification-type { border-color: #F36C27; }

.notification-item:hover .topic-ai .notification-type { border-color: #733A88; }

.notification-item:hover .topic-back-end .notification-type { border-color: #008297; }

.notification-item:hover .topic-data .notification-type { border-color: #9F4B84; }

.notification-item:hover .topic-design .notification-type { border-color: #4a4290; }

.notification-item:hover .topic-experimental .notification-type { border-color: #733a88; }

.notification-item:hover .topic-front-end .notification-type { border-color: #3659a2; }

.notification-item:hover .topic-fundamentals .notification-type { border-color: #9b3b5a; }

.notification-item:hover .topic-mobile .notification-type { border-color: #30826C; }

.notification-item:hover .topic-internal .notification-type { border-color: #55616c; }

.notification-item:hover .topic-foundations .notification-type { border-color: #004e61; }

.notification-item:hover .topic-undefined .notification-type { border-color: #55616c; }

.notification-item:hover .topic-college-credit .notification-type { border-color: #3887c8; }

.notification-item:hover .topic-no-code .notification-type { border-color: #31AF7F; }

.notification-item:hover .topic-security .notification-type { border-color: #409BE9; }

.notification-item:hover .topic-game-development .notification-type { border-color: #856fc4; }

.notification-item:hover .topic-treehouse-resources .notification-type { border-color: #5fcf80; }

.notification-item:hover .topic-coding-for-kids .notification-type { border-color: #F36C27; }

.notification-item.notification-unread .topic-ai .notification-type { border-color: #733A88; }

.notification-item.notification-unread .topic-back-end .notification-type { border-color: #008297; }

.notification-item.notification-unread .topic-data .notification-type { border-color: #9F4B84; }

.notification-item.notification-unread .topic-design .notification-type { border-color: #4a4290; }

.notification-item.notification-unread .topic-experimental .notification-type { border-color: #733a88; }

.notification-item.notification-unread .topic-front-end .notification-type { border-color: #3659a2; }

.notification-item.notification-unread .topic-fundamentals .notification-type { border-color: #9b3b5a; }

.notification-item.notification-unread .topic-mobile .notification-type { border-color: #30826C; }

.notification-item.notification-unread .topic-internal .notification-type { border-color: #55616c; }

.notification-item.notification-unread .topic-foundations .notification-type { border-color: #004e61; }

.notification-item.notification-unread .topic-undefined .notification-type { border-color: #55616c; }

.notification-item.notification-unread .topic-college-credit .notification-type { border-color: #3887c8; }

.notification-item.notification-unread .topic-no-code .notification-type { border-color: #31AF7F; }

.notification-item.notification-unread .topic-security .notification-type { border-color: #409BE9; }

.notification-item.notification-unread .topic-game-development .notification-type { border-color: #856fc4; }

.notification-item.notification-unread .topic-treehouse-resources .notification-type { border-color: #5fcf80; }

.notification-item.notification-unread .topic-coding-for-kids .notification-type { border-color: #F36C27; }

.notification-dropdown .notification-item:not(.notification-unread):not(:hover) .notification-type { border-color: #d4d9dd; }

.notification-icon { fill: #55616c; position: relative; height: 18px; width: 18px; position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.notifications-index .topic-ai .notification-icon { fill: #733A88; }

.notifications-index .topic-back-end .notification-icon { fill: #008297; }

.notifications-index .topic-data .notification-icon { fill: #9F4B84; }

.notifications-index .topic-design .notification-icon { fill: #4a4290; }

.notifications-index .topic-experimental .notification-icon { fill: #733a88; }

.notifications-index .topic-front-end .notification-icon { fill: #3659a2; }

.notifications-index .topic-fundamentals .notification-icon { fill: #9b3b5a; }

.notifications-index .topic-mobile .notification-icon { fill: #30826C; }

.notifications-index .topic-internal .notification-icon { fill: #55616c; }

.notifications-index .topic-foundations .notification-icon { fill: #004e61; }

.notifications-index .topic-undefined .notification-icon { fill: #55616c; }

.notifications-index .topic-college-credit .notification-icon { fill: #3887c8; }

.notifications-index .topic-no-code .notification-icon { fill: #31AF7F; }

.notifications-index .topic-security .notification-icon { fill: #409BE9; }

.notifications-index .topic-game-development .notification-icon { fill: #856fc4; }

.notifications-index .topic-treehouse-resources .notification-icon { fill: #5fcf80; }

.notifications-index .topic-coding-for-kids .notification-icon { fill: #F36C27; }

.notification-item:hover .topic-ai .notification-icon { fill: #733A88; }

.notification-item:hover .topic-back-end .notification-icon { fill: #008297; }

.notification-item:hover .topic-data .notification-icon { fill: #9F4B84; }

.notification-item:hover .topic-design .notification-icon { fill: #4a4290; }

.notification-item:hover .topic-experimental .notification-icon { fill: #733a88; }

.notification-item:hover .topic-front-end .notification-icon { fill: #3659a2; }

.notification-item:hover .topic-fundamentals .notification-icon { fill: #9b3b5a; }

.notification-item:hover .topic-mobile .notification-icon { fill: #30826C; }

.notification-item:hover .topic-internal .notification-icon { fill: #55616c; }

.notification-item:hover .topic-foundations .notification-icon { fill: #004e61; }

.notification-item:hover .topic-undefined .notification-icon { fill: #55616c; }

.notification-item:hover .topic-college-credit .notification-icon { fill: #3887c8; }

.notification-item:hover .topic-no-code .notification-icon { fill: #31AF7F; }

.notification-item:hover .topic-security .notification-icon { fill: #409BE9; }

.notification-item:hover .topic-game-development .notification-icon { fill: #856fc4; }

.notification-item:hover .topic-treehouse-resources .notification-icon { fill: #5fcf80; }

.notification-item:hover .topic-coding-for-kids .notification-icon { fill: #F36C27; }

.notification-item.notification-unread .topic-ai .notification-icon { fill: #733A88; }

.notification-item.notification-unread .topic-back-end .notification-icon { fill: #008297; }

.notification-item.notification-unread .topic-data .notification-icon { fill: #9F4B84; }

.notification-item.notification-unread .topic-design .notification-icon { fill: #4a4290; }

.notification-item.notification-unread .topic-experimental .notification-icon { fill: #733a88; }

.notification-item.notification-unread .topic-front-end .notification-icon { fill: #3659a2; }

.notification-item.notification-unread .topic-fundamentals .notification-icon { fill: #9b3b5a; }

.notification-item.notification-unread .topic-mobile .notification-icon { fill: #30826C; }

.notification-item.notification-unread .topic-internal .notification-icon { fill: #55616c; }

.notification-item.notification-unread .topic-foundations .notification-icon { fill: #004e61; }

.notification-item.notification-unread .topic-undefined .notification-icon { fill: #55616c; }

.notification-item.notification-unread .topic-college-credit .notification-icon { fill: #3887c8; }

.notification-item.notification-unread .topic-no-code .notification-icon { fill: #31AF7F; }

.notification-item.notification-unread .topic-security .notification-icon { fill: #409BE9; }

.notification-item.notification-unread .topic-game-development .notification-icon { fill: #856fc4; }

.notification-item.notification-unread .topic-treehouse-resources .notification-icon { fill: #5fcf80; }

.notification-item.notification-unread .topic-coding-for-kids .notification-icon { fill: #F36C27; }

.notification-dropdown .notification-item:not(.notification-unread):not(:hover) .notification-icon { fill: #d4d9dd; }

.notification-avatar { margin-right: -2px; }

.notification-dropdown .notification-item:not(.notification-unread):not(:hover) .notification-avatar { opacity: 0.5; }
.control-container { background-color: #fff; padding: 0; position: relative; }

.control-container-attached { border-radius: 4px 4px 0 0; }

.control-container:not(.control-container-attached) { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); border-radius: 4px; }

@media screen and (min-width: 680px) { .control-container:not(.control-container-attached) { margin-bottom: 30px; } }

@media screen and (max-width: 679px) { .control-container:not(.control-container-attached) { margin-bottom: 15px; } }

.control-container.with-subnav, .control-container.with-search { box-shadow: 0; }

.control-container.with-subnav .nav, .control-container.with-search .nav { padding: 25px 30px; }

.control-container.attached { background-color: #f9fafa; box-shadow: 0 1px 0 0 #e8ebed; border-radius: 4px 4px 0 0; }

@media screen and (min-width: 680px) { .control-container.attached { margin: -30px -30px 0; } }

@media screen and (max-width: 679px) { .control-container.attached { margin: -20px -20px 0; } }

.control-container.attached .search { display: block; padding: 15px 30px; position: relative; }

.control-container.attached .search .search-form { left: 30px; position: absolute; top: 15px; width: 40%; }

@media screen and (max-width: 969px) { .control-container.attached .search .search-form { width: 26%; } }

@media screen and (max-width: 679px) { .control-container.attached .search .search-form { left: auto; position: relative; top: auto; width: 100%; margin-bottom: 15px; } }

.control-container.attached .search .search-form .search-input { padding: 0; width: 100%; }

.control-container.attached .search .search-form .search-input input { border-radius: 100px; border: 2px solid #e8ebed; margin: 0; padding: 11px 40px; color: #2b363e; }

.control-container.attached .search .search-form .search-input input::-webkit-input-placeholder { transition: color 300ms ease; }

.control-container.attached .search .search-form .search-input input:-moz-placeholder { transition: color 300ms ease; }

.control-container.attached .search .search-form .search-input input::-moz-placeholder { transition: color 300ms ease; }

.control-container.attached .search .search-form .search-input input:-ms-input-placeholder { transition: color 300ms ease; }

.control-container.attached .search .search-form .search-input input .placeholder { transition: color 300ms ease; }

.control-container.attached .search .search-form .search-input input:focus { color: #101417; }

.control-container.attached .search .search-form .search-input input:focus::-webkit-input-placeholder { color: #546b7b; }

.control-container.attached .search .search-form .search-input input:focus:-moz-placeholder { color: #546b7b; }

.control-container.attached .search .search-form .search-input input:focus::-moz-placeholder { color: #546b7b; }

.control-container.attached .search .search-form .search-input input:focus:-ms-input-placeholder { color: #546b7b; }

.control-container.attached .search .search-form .search-input input:focus .placeholder { color: #546b7b; }

.control-container.attached .search .search-form:hover .search-input input { border-color: #d4d9dd; }

.control-container.attached .search .search-form:hover .search-input input:not(:focus)::-webkit-input-placeholder { color: #101417; }

.control-container.attached .search .search-form:hover .search-input input:not(:focus):-moz-placeholder { color: #101417; }

.control-container.attached .search .search-form:hover .search-input input:not(:focus)::-moz-placeholder { color: #101417; }

.control-container.attached .search .search-form:hover .search-input input:not(:focus):-ms-input-placeholder { color: #101417; }

.control-container.attached .search .search-form:hover .search-input input:not(:focus) .placeholder { color: #101417; }

.control-container.attached .search .search-form:hover label svg { fill: #70808e; }

.control-container.attached .search label { display: block; margin: 11px 0 0 18px; padding: 0; position: absolute; z-index: 1; }

.control-container.attached .search label svg { fill: #8e969d; height: 14px; width: 14px; }

.control-container.attached .dropdown-parent#topic .topic-color { margin-top: 9px; }

.control-container.attached .dropdown-parent#topic .dropdown-parent-label .topic-color { line-height: 1.6; margin-top: 2px; }

@media screen and (max-width: 679px) { .control-container.attached .dropdown-parent#topic .dropdown-parent-label .topic-color { line-height: 0; margin-top: 10px; } }

@media screen and (min-width: 680px) { .control-container.attached .dropdown-parent .dropdown-child { top: 40px; } }

.control-container.attached .control-page-items { line-height: 40px; }

@media screen and (max-width: 679px) { .control-container.attached .control-page-items { line-height: 1.4; } }

.control-container.attached .control-page-items .button-container { display: inline-block; margin-left: 30px; }

@media screen and (max-width: 679px) { .control-container.attached .control-page-items .button-container { display: block; margin: 15px 0 10px 0; } }

@media screen and (max-width: 679px) { .control-container.attached .control-page-items .button-container .button { width: 100%; } }

.control-container .nav { padding: 20px 30px; }

@media screen and (max-width: 679px) { .control-container .nav { display: none; } }

@media screen and (min-width: 680px) { .control-container .nav { display: block; } }

.control-container .nav li { display: inline-block; margin-right: 30px; }

.control-container .nav li.current a { color: #2d3339; }

.control-container .nav li.nav-align-right { float: right; margin-right: 0px; }

.control-container .nav a { color: #2b363e; display: block; font-size: 16px; font-weight: 700; }

.control-container .nav a:hover { color: #384047; }

.control-container .nav a.current, .control-container .nav a.selected { color: #2d3339; }

.control-container .subnav { background-color: #f9fafa; border-top: 1px solid #e8ebed; display: block; padding: 0 30px; border-radius: 0 0 4px 4px; }

.control-container-attached.control-container .subnav { border-top: none; border-radius: 4px 4px 0 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07); }

@media screen and (max-width: 679px) { .control-container .subnav { margin-bottom: -18px; padding: 0 15px; } }

.control-container .subnav li { position: relative; margin: 15px 0; }

@media screen and (min-width: 680px) { .control-container .subnav li { display: inline-block; margin-right: 30px; } }

.control-container .subnav a { color: #2b363e; display: block; font-size: 14px; padding: 7px 0; font-weight: 700; }

@media screen and (max-width: 679px) { .control-container .subnav a { padding: 20px 0; } }

.control-container .subnav a:hover { color: #384047; }

.control-container .subnav a.disabled, .control-container .subnav a.disabled:hover { color: #587081; cursor: not-allowed; }

.control-container .subnav a .tiny-tag { margin: 0 0 0 3px; top: -1px; }

.control-container .subnav .selected { margin: 0 -12px; padding: 3px 12px; border-radius: 100px; }

@media screen and (min-width: 680px) { .control-container .subnav .selected { background-color: #101417; color: #fff; } }

@media screen and (max-width: 679px) { .control-container .subnav .selected { margin: -10px -12px; padding: 10px 12px; color: #384047; }
  .control-container .subnav .selected .tiny-tag { color: #fff; background: #5fcf80; } }

.control-container .subnav .selected:hover { color: #fff; }

@media screen and (max-width: 679px) { .control-container .subnav .selected:hover { color: #384047; } }

.control-container .subnav .selected .tiny-tag { background: #1a2126; color: rgba(255, 255, 255, 0.5); top: -1px; }

.control-container.styleguide .search { background-color: #f9fafa; border-top: 1px solid #e8ebed; display: block; padding: 26px 30px; position: relative; border-radius: 0 0 4px 4px; }

.control-container.styleguide .search .search-form { left: 15px; position: absolute; top: 12px; width: 40%; }

@media screen and (max-width: 679px) { .control-container.styleguide .search .search-form { left: auto; position: relative; top: auto; width: 100%; margin-bottom: 15px; } }

.control-container.styleguide .search .search-form .search-input { padding: 0; width: 100%; }

.control-container.styleguide .search .search-form .search-input input { border-radius: 100px; border: 2px solid #f0f2f4; margin: 0; padding: 11px 40px; }

.control-container.styleguide .search .search-form:hover .search-input input, .control-container.styleguide .search .search-form:focus .search-input input { border-color: #c6ccd2; }

.control-container.styleguide .search .search-form:hover .search-input input::-webkit-input-placeholder, .control-container.styleguide .search .search-form:focus .search-input input::-webkit-input-placeholder { color: #7e8d9a; }

.control-container.styleguide .search .search-form:hover .search-input input:-moz-placeholder, .control-container.styleguide .search .search-form:focus .search-input input:-moz-placeholder { color: #7e8d9a; }

.control-container.styleguide .search .search-form:hover .search-input input::-moz-placeholder, .control-container.styleguide .search .search-form:focus .search-input input::-moz-placeholder { color: #7e8d9a; }

.control-container.styleguide .search .search-form:hover .search-input input:-ms-input-placeholder, .control-container.styleguide .search .search-form:focus .search-input input:-ms-input-placeholder { color: #7e8d9a; }

.control-container.styleguide .search .search-form:hover .search-input input .placeholder, .control-container.styleguide .search .search-form:focus .search-input input .placeholder { color: #7e8d9a; }

.control-container.styleguide .search .search-form:hover label svg, .control-container.styleguide .search .search-form:focus label svg { fill: #8d9aa5; }

.control-container.styleguide .search label { display: block; margin: 12px 0 0 18px; padding: 0; position: absolute; z-index: 99; }

.control-container.styleguide .search label svg { fill: #b7c0c7; height: 14px; width: 14px; }

.control-container .dropdown-parent { position: relative; display: inline-block; }

@media screen and (max-width: 679px) { .control-container .dropdown-parent { display: block; border-bottom: 1px solid #f0f2f4; padding: 15px 0; } }

@media screen and (max-width: 679px) { .control-container .dropdown-parent:last-child { border-bottom: none; } }

.control-container .dropdown-parent.hidden { display: none; }

.control-container .dropdown-parent .dropdown-parent-label { font-size: 14px; font-weight: 700; color: #2b363e; }

@media screen and (max-width: 679px) { .control-container .dropdown-parent .dropdown-parent-label .mobile-label { font-weight: 400; color: #1a2126; padding-right: 10px; } }

@media screen and (max-width: 679px) { .control-container .dropdown-parent .dropdown-parent-label { display: block; padding: 24px 0; margin: -24px 0; cursor: pointer; } }

@media screen and (min-width: 680px) { .control-container .dropdown-parent .dropdown-parent-label { padding: 24px 10px; } }

.control-container .dropdown-parent .dropdown-parent-label:after { display: inline-block; content: ""; width: 12px; height: 8px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjQwLjMgMTYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNDAuMyAxNjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNkU3ODgxO30KCS5zdDF7ZmlsbDojOEU5NjlEO30KPC9zdHlsZT4KPGc%2BCgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNjAsODBMNC41LDI1LjhjLTYtNS45LTYtMTUuNCwwLTIxLjNjNi01LjksMTUuOC01LjksMjEuOCwwTDYwLDM3LjNMOTMuNyw0LjRjNi01LjksMTUuOC01LjksMjEuOCwwCgkJYzYsNS45LDYsMTUuNSwwLDIxLjNMNjAsODB6Ii8%2BCjwvZz4KPGc%2BCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTgwLjMsODBsLTU1LjUtNTQuMmMtNi01LjktNi0xNS40LDAtMjEuM2M2LTUuOSwxNS44LTUuOSwyMS44LDBsMzMuNiwzMi45bDMzLjctMzIuOWM2LTUuOSwxNS44LTUuOSwyMS44LDAKCQlzNiwxNS40LDAsMjEuM0wxODAuMyw4MHoiLz4KPC9nPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xODAuMyw4MGw1NS41LDU0LjJjNiw1LjksNiwxNS40LDAsMjEuM2MtNiw1LjktMTUuOCw1LjktMjEuOCwwbC0zMy42LTMyLjlsLTMzLjcsMzIuOQoJCWMtNiw1LjktMTUuOCw1LjktMjEuOCwwYy02LTUuOS02LTE1LjQsMC0yMS4zTDE4MC4zLDgweiIvPgo8L2c%2BCjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTYwLDgwbDU1LjUsNTQuMmM2LDUuOSw2LDE1LjQsMCwyMS4zYy02LDUuOS0xNS44LDUuOS0yMS44LDBMNjAsMTIyLjdsLTMzLjcsMzIuOWMtNiw1LjktMTUuOCw1LjktMjEuOCwwCgkJcy02LTE1LjQsMC0yMS4zTDYwLDgweiIvPgo8L2c%2BCjwvc3ZnPgo%3D); background-size: 24px 16px; background-position: -12px 0; }

@media screen and (max-width: 679px) { .control-container .dropdown-parent .dropdown-parent-label:after { position: absolute; right: 4px; top: 18px; } }

@media screen and (min-width: 680px) { .control-container .dropdown-parent .dropdown-parent-label:after { margin: 0 5px 0 8px; } }

.control-container .dropdown-parent#topic .dropdown-child { min-width: 210px; }

.control-container .dropdown-parent#topic .topic-color { font-size: 24px; line-height: 0px; float: left; margin: 13px -5px 0 10px; }

@media screen and (max-width: 679px) { .control-container .dropdown-parent#topic .topic-color { margin: 13px 3px 0 -2px; } }

.control-container .dropdown-parent#topic li a .topic-color { margin: 9px 5px 0 -3px; }

.control-container .dropdown-parent:hover > a, .control-container .dropdown-parent:hover a:hover { color: #384047; }

.control-container .dropdown-parent:hover > a:after { background-position: 0 0; }

.control-container .dropdown-parent .dropdown-child { text-align: left; background: #fff; border-radius: 4px; display: none; position: absolute; right: -10px; z-index: 99; padding: 5px 0; min-width: 120px; max-width: 250px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); }

@media screen and (max-width: 679px) { .control-container .dropdown-parent .dropdown-child { top: 35px; } }

@media screen and (min-width: 680px) { .control-container .dropdown-parent .dropdown-child { top: 25px; } }

.control-container .dropdown-parent .dropdown-child li { display: block; line-height: 1.4; margin: 0; }

.control-container .dropdown-parent .dropdown-child li.heading { padding: 10px 20px 10px 40px; color: #587081; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; }

.control-container .dropdown-parent .dropdown-child a { display: block !important; margin: 0; padding: 10px 20px 10px 40px; font-weight: 400; position: relative; text-overflow: ellipsis; white-space: nowrap; display: inline-block; overflow: hidden; color: #1a2126; }

.control-container .dropdown-parent .dropdown-child a:hover { color: #101417; background: #f9fafa; }

.control-container .dropdown-parent .dropdown-child a:hover:before { content: ''; width: 14px; height: 12px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDIwcHgiIGhlaWdodD0iMTIwcHgiIHZpZXdCb3g9IjAgMCA0MjAgMTIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MjAgMTIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM1RkNGODAiIGQ9Ik01Ny4zMiwxMjBMNC40ODYsNjcuOTc0Yy01Ljk4MS02LjAwMy01Ljk4MS0xNy4wMDksMC0yMy4wMTJjNi45NzgtNi4wMDMsMTYuOTQ3LTYuMDAzLDIzLjkyNSwwDQoJCWwyNi45MTUsMjcuMDE0bDU0LjgyOC02Ni4wMzNjNS45ODEtNy4wMDQsMTUuOTUtOC4wMDQsMjMuOTI1LTIuMDAxYzYuOTc4LDYuMDAzLDcuOTc1LDE2LjAwOCwxLjk5NCwyMy4wMTJMNTcuMzIsMTIweiIvPg0KPC9nPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0Q0RDlERCIgZD0iTTE5Ny4zMiwxMjBsLTUyLjgzNC01Mi4wMjZjLTUuOTgxLTYuMDAzLTUuOTgxLTE3LjAwOSwwLTIzLjAxMmM2Ljk3OC02LjAwMywxNi45NDctNi4wMDMsMjMuOTI1LDANCgkJbDI2LjkxNSwyNy4wMTRsNTQuODI4LTY2LjAzM2M1Ljk4MS03LjAwNCwxNS45NS04LjAwNCwyMy45MjUtMi4wMDFjNi45NzgsNi4wMDMsNy45NzUsMTYuMDA4LDEuOTk0LDIzLjAxMkwxOTcuMzIsMTIweiIvPg0KPC9nPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTMzNy4zMiwxMjBsLTUyLjgzNC01Mi4wMjZjLTUuOTgxLTYuMDAzLTUuOTgxLTE3LjAwOSwwLTIzLjAxMmM2Ljk3OC02LjAwMywxNi45NDctNi4wMDMsMjMuOTI1LDANCgkJbDI2LjkxNSwyNy4wMTRsNTQuODI4LTY2LjAzM2M1Ljk4MS03LjAwNCwxNS45NS04LjAwNCwyMy45MjUtMi4wMDFjNi45NzgsNi4wMDMsNy45NzUsMTYuMDA4LDEuOTk0LDIzLjAxMkwzMzcuMzIsMTIweiIvPg0KPC9nPg0KPC9zdmc%2BDQo%3D); background-size: 42px 12px; background-position: -14px 0; display: inline-block; position: absolute; top: 11px; left: 13px; }

.control-container .dropdown-parent .dropdown-child a.selected { color: #050708; font-weight: 700; }

.control-container .dropdown-parent .dropdown-child a.selected:before { content: ''; display: block; width: 14px; height: 12px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI%2BDQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDIwcHgiIGhlaWdodD0iMTIwcHgiIHZpZXdCb3g9IjAgMCA0MjAgMTIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MjAgMTIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM1RkNGODAiIGQ9Ik01Ny4zMiwxMjBMNC40ODYsNjcuOTc0Yy01Ljk4MS02LjAwMy01Ljk4MS0xNy4wMDksMC0yMy4wMTJjNi45NzgtNi4wMDMsMTYuOTQ3LTYuMDAzLDIzLjkyNSwwDQoJCWwyNi45MTUsMjcuMDE0bDU0LjgyOC02Ni4wMzNjNS45ODEtNy4wMDQsMTUuOTUtOC4wMDQsMjMuOTI1LTIuMDAxYzYuOTc4LDYuMDAzLDcuOTc1LDE2LjAwOCwxLjk5NCwyMy4wMTJMNTcuMzIsMTIweiIvPg0KPC9nPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0Q0RDlERCIgZD0iTTE5Ny4zMiwxMjBsLTUyLjgzNC01Mi4wMjZjLTUuOTgxLTYuMDAzLTUuOTgxLTE3LjAwOSwwLTIzLjAxMmM2Ljk3OC02LjAwMywxNi45NDctNi4wMDMsMjMuOTI1LDANCgkJbDI2LjkxNSwyNy4wMTRsNTQuODI4LTY2LjAzM2M1Ljk4MS03LjAwNCwxNS45NS04LjAwNCwyMy45MjUtMi4wMDFjNi45NzgsNi4wMDMsNy45NzUsMTYuMDA4LDEuOTk0LDIzLjAxMkwxOTcuMzIsMTIweiIvPg0KPC9nPg0KPGc%2BDQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTMzNy4zMiwxMjBsLTUyLjgzNC01Mi4wMjZjLTUuOTgxLTYuMDAzLTUuOTgxLTE3LjAwOSwwLTIzLjAxMmM2Ljk3OC02LjAwMywxNi45NDctNi4wMDMsMjMuOTI1LDANCgkJbDI2LjkxNSwyNy4wMTRsNTQuODI4LTY2LjAzM2M1Ljk4MS03LjAwNCwxNS45NS04LjAwNCwyMy45MjUtMi4wMDFjNi45NzgsNi4wMDMsNy45NzUsMTYuMDA4LDEuOTk0LDIzLjAxMkwzMzcuMzIsMTIweiIvPg0KPC9nPg0KPC9zdmc%2BDQo%3D); background-size: 42px 12px; background-position: 0; display: inline-block; position: absolute; top: 11px; left: 13px; }

.control-container.search { padding: 18px 30px; }

@media screen and (max-width: 679px) { .control-container.search { padding-top: 15px; } }

.control-container .search-container { position: absolute; left: 0; bottom: 0; top: 0; right: 50%; z-index: 1; }

@media screen and (max-width: 679px) { .control-container .search-container { margin: -12px 0 0; border-bottom: 1px solid #f0f2f4; position: relative; } }

.control-container .search-container + .control-page-items { opacity: 1; transition: opacity .05s ease; }

.control-container .search-icon { fill: #101417; }

.control-container .search-form { display: table; width: 100%; position: relative; }

.control-container label, .control-container .search-topics, .control-container .search-input { display: table-cell; vertical-align: top; }

.control-container label { padding: 21px 15px 0 30px; }

@media screen and (max-width: 679px) { .control-container label { padding: 22px 15px 17px 0; } }

.control-container label .loading-icon { display: none; width: 16px; height: 16px; }

.loading .control-container label .loading-icon { display: block; }

.control-container label .search-icon { width: 16px; height: 16px; }

.loading .control-container label .search-icon { display: none; }

.control-container .search-topics { padding: 13px 10px 0 0; }

@media screen and (max-width: 969px) { .control-container .search-topics { display: none; } }

.control-container .search-topics .tags { white-space: nowrap; }

.control-container .search-topics li { white-space: nowrap; display: inline-block; }

.control-container .search-input { width: 100%; padding-top: 10px; }

.control-container .search-input input { margin: 0; padding-right: 0; padding-left: 0; width: 100%; background: #fff; border: 0; }

@media screen and (max-width: 679px) { .control-container-mobile-nav { display: block; } }

@media screen and (min-width: 680px) { .control-container-mobile-nav { display: none; } }

.control-container-mobile-nav .form-element { width: 100% !important; background: #fff; border-color: #fff; }

.control-container-mobile-nav .form-element:after { background: none; }

.control-container-mobile-nav .form-element span { font-size: 16px; padding: 20px; }

.control-container-mobile-nav .form-element span:after { background: url("/assets/icons/icon-global-863d50621b14046616519056916ec67ac8a680fcb1c994a27ec6c1a92e9569d5.svg") no-repeat -227px -50px; content: ""; width: 15px; height: 10px; position: absolute; top: 23px; right: 20px; }

@media screen and (max-width: 679px) { .control-container .control-page-items { margin-bottom: -10px; } }

@media screen and (min-width: 680px) { .control-container .control-page-items { text-align: right; margin-left: 30px; } }

.control-container .sorting-container { margin: 0; }

@media screen and (min-width: 680px) { .control-container .filter-container { margin: 0 -5px 0 10px; } }

.caret-dropdown { position: absolute; right: 5px; top: 0; }

.caret-dropdown__parent.dropdown-parent-label { position: relative; display: inline-block; }

.caret-dropdown__label { padding: 20px; }

.caret-dropdown__label svg { width: 14px; height: 11px; fill: white; }

.caret-dropdown__label svg:hover { opacity: 0.5; }

.caret-dropdown__child { text-align: left; background: #fff; border-radius: 4px; display: none; position: absolute; right: -10px; z-index: 99; padding: 5px 0; min-width: 120px; max-width: 250px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); }

@media screen and (max-width: 679px) { .caret-dropdown__child { top: 40px; } }

@media screen and (min-width: 680px) { .caret-dropdown__child { top: 42px; right: -25px; } }

.caret-dropdown__child li { display: block; line-height: 1.4; margin: 0; }

.caret-dropdown__child li.heading { padding: 10px 20px 10px 40px; color: #587081; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; }

.caret-dropdown__child a { color: #1a2126; font-weight: 400; display: block !important; margin: 0; padding: 10px 20px 10px 20px; position: relative; text-overflow: ellipsis; white-space: nowrap; display: inline-block; overflow: hidden; }

.caret-dropdown__child a:hover { color: #101417; background: #f9fafa; }

@media screen and (max-width: 680px) { .section-heading.company-library .control-container:not(.control-container-attached) { margin-bottom: 30px; }
  .section-heading.company-library .control-container .dropdown-parent .dropdown-parent-label { padding: 0px 20px 10px 20px; margin: 0; }
  .section-heading.company-library .control-container .dropdown-parent .dropdown-parent-label:after { top: 22px; right: 15px; } }

@media screen and (min-width: 680px) { .section-heading.company-library .control-container { float: right; height: 34px; padding: 0px; margin-top: 0px; line-height: 28px; background-color: transparent; box-shadow: none; border: 2px solid #d4d9dd; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; transition: border-color 0.2s ease; }
  .section-heading.company-library .control-container:hover { border-color: #b7c0c7; }
  .section-heading.company-library .control-container .control-page-items { margin-left: 0px; }
  .section-heading.company-library .control-container .filter-container { margin: 0 -5px 0 0; padding: 0 10px 0 4px; }
  .section-heading.company-library .control-container .dropdown-parent .dropdown-parent-label { margin-top: 6px; padding: 0 2px 0 10px; color: #1a2126; font-size: 12px !important; }
  .section-heading.company-library .control-container .dropdown-parent .dropdown-parent-label:after { background-position: 0 0 !important; opacity: 0.5; margin-left: 8px; background-size: 20px 14px; }
  .section-heading.company-library .control-container .dropdown-parent .dropdown-parent-label:hover:after { opacity: 1; }
  .section-heading.company-library .control-container .dropdown-parent-label .topic-color { margin-top: 18px; } }
.popover { position: absolute; background: #fff; border: 1px solid #e8ebed; width: 190px; color: #fff; text-align: left; text-shadow: none; line-height: 1; z-index: 9999; display: block; border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); padding: 10px 0; }

.popover ul li a { color: #2b363e; font-weight: 700; display: block; padding: 8px 15px; margin: 0; width: 100%; }

.popover ul li a:hover { color: #1a2126; background: #edeff0; }

.popover ul li a.disabled { opacity: 0.5; }

.popover-caret:before, .popover-caret:after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }

.popover-caret:before { left: 93px; border-width: 11px; }

.popover-caret:after { left: 94px; border-width: 10px; }

.popover-bottom { top: 100%; left: -70px; margin-top: 13px; }

.popover-bottom .popover-caret:before, .popover-bottom .popover-caret:after { border-top: 0; }

.popover-bottom .popover-caret:before { top: -11px; border-bottom-color: #d4d9dd; }

.popover-bottom .popover-caret:after { top: -10px; border-bottom-color: #FFF; }

.popover-top { bottom: 100%; left: -70px; margin-bottom: 13px; }

.popover-top .popover-caret:before, .popover-top .popover-caret:after { border-bottom: 0; }

.popover-top .popover-caret:before { bottom: -11px; border-top-color: #d4d9dd; }

.popover-top .popover-caret:after { bottom: -10px; border-top-color: #FFF; }

.popover p { margin: 0; }

.popover p, .popover li { color: #1a2126; font-size: 13px; font-weight: 400; }

.popover-offset-left { right: -10px; left: auto; }

.popover-offset-left .popover-caret:before { left: 156px; }

.popover-offset-left .popover-caret:after { left: 157px; }

.popover-offset-right { left: -10px; right: auto; }

.popover-offset-right .popover-caret:before { left: 13px; }

.popover-offset-right .popover-caret:after { left: 14px; }
.profile-list { list-style: none; margin: 0; }

.profile-list:before, .profile-list:after { content: " "; display: table; }

.profile-list:after { clear: both; }

.profile-item { -webkit-animation: panel-fade-up 0.4s ease; -moz-animation: panel-fade-up 0.4s ease; animation: panel-fade-up 0.4s ease; position: relative; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; display: block; line-height: 18px; }

.profile-item:before, .profile-item:after { content: " "; display: table; }

.profile-item:after { clear: both; }

@media screen and (max-width: 679px) { .profile-item { margin-bottom: 20px; } }

@media screen and (min-width: 680px) { .profile-item { margin-bottom: 30px; } }

@media screen and (min-width: 680px) { .profile-item { float: left; width: 49%; }
  .profile-item:nth-child(even) { margin-left: 1%; }
  .profile-item:nth-child(odd) { margin-right: 1%; } }

@media screen and (min-width: 1400px) { #container:not(.with-sidebar) .profile-item { width: 32%; margin-left: 1%; margin-right: 1%; }
  #container:not(.with-sidebar) .profile-item:nth-child(3n) { margin-right: 0; }
  #container:not(.with-sidebar) .profile-item:nth-child(3n + 1) { margin-left: 0; } }

.profile-card { display: block; }

@media screen and (max-width: 679px) { .profile-card { padding: 20px; } }

@media screen and (min-width: 680px) { .profile-card { padding: 30px; } }

@media screen and (min-width: 680px) { .profile-card { height: 160px; } }

@media screen and (max-width: 679px) { .profile-card { padding: 15px 15px 60px; } }

.profile-photo { display: block; position: absolute; }

@media screen and (max-width: 679px) { .profile-photo { top: 15px; right: 15px; width: 80px; height: 80px; border-radius: 40px; } }

@media screen and (min-width: 680px) { .profile-photo { top: 50%; right: 30px; margin-top: -45px; width: 90px; height: 90px; border-radius: 45px; } }

@media screen and (max-width: 679px) { .profile-meta { margin-right: 95px; } }

@media screen and (min-width: 680px) { .profile-meta { margin-right: 120px; height: 100px; position: relative; } }

.profile-meta-name { font-weight: 700; font-size: 18px; line-height: 22px; display: block; color: #101417; margin: 0; }

@media screen and (min-width: 680px) { .profile-meta-name { margin-top: -5px; } }

@media screen and (max-width: 679px) { .profile-meta-name { margin-top: -2px; } }

.profile-meta-role { font-weight: 400; font-size: 14px; display: block; color: #2b363e; margin: 0; }

@media screen and (min-width: 680px) { .profile-meta-role { line-height: 26px; } }

@media screen and (max-width: 679px) { .profile-meta-role { line-height: 22px; } }

.profile-tags { position: absolute; z-index: 1; white-space: nowrap; overflow: hidden; margin: 0; }

@media screen and (max-width: 679px) { .profile-tags { bottom: 15px; left: 15px; right: 115px; } }

@media screen and (min-width: 680px) { .profile-tags { bottom: 30px; left: 30px; right: 140px; } }

.profile-tags:after { content: ""; position: absolute; height: 100%; width: 20px; top: 0; right: 0; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }

.profile-tags li { margin-bottom: 0; }

@media screen and (max-width: 679px) { .profile-tags li a, .profile-tags li span { font-size: 12px; padding: 0 10px; line-height: 26px; } }
.progress-container { background: #edeff0; position: relative; overflow: hidden; height: 10px; border-radius: 15px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05) inset; }

.progress-status { background: #35A961; position: absolute; top: 0; bottom: 0; border-radius: 15px 0 0 15px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05) inset; }
.radial-progress { width: 80px; height: 80px; position: relative; display: inline-block; }

.radial-progress:after { content: ""; border: 6px solid #d4d9dd; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; }

.radial-progress .progress { text-align: center; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 1em; line-height: 1; color: #384047; }

.radial-progress.unstarted .progress { color: #1a2126; }

.radial-progress svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; }

.radial-progress svg .background { stroke: #d4d9dd; }

.radial-progress svg path.foreground { transition: stroke-dashoffset 0.5s; stroke: #5fcf80; stroke-dasharray: 1000 1000; stroke-dashoffset: -1000; }
.secondary-module .content-meta { height: auto; padding: 20px; }

.secondary-module .content-meta strong { font-size: 12px; }

.secondary-module .content-meta p { margin: 0; }

.secondary-module .content-meta h3 { font-size: 14px; }

.secondary-module .content-actions-container { display: none; }

.secondary-module .current-step a { padding: 15px 20px; font-size: 14px; }

.secondary-module .current-step .icon { margin: -6px 5px -2px 0; float: none; width: 18px; height: 18px; }
.sorting-container { margin: -30px 0 0 0; }

@media screen and (max-width: 679px) { .sorting-container { margin: -15px 0 0; } }

.sorting-container li { list-style-type: none; margin: 0 30px 0 0; display: inline-block; }

@media screen and (max-width: 679px) { .sorting-container li { display: block; margin: 0; border-bottom: 1px solid #f0f2f4; }
  .sorting-container li:last-child { border: none; } }

.sorting-container a, .sorting-container .dropdown-parent-label { font-weight: 700; font-size: 14px; display: block; padding: 25px 0; color: #2b363e; }

@media screen and (max-width: 679px) { .sorting-container a, .sorting-container .dropdown-parent-label { padding: 15px 0; } }

.sorting-container a:hover, .sorting-container .dropdown-parent-label:hover { color: #1a2126; }

.sorting-container a.selected, .sorting-container .dropdown-parent-label.selected { color: #384047; }

.sorting-container.sorting-standalone { margin-bottom: -30px; }

@media screen and (max-width: 679px) { .sorting-container.sorting-standalone { margin-bottom: -15px; } }
.star-rating-container { direction: rtl; margin: 0 auto; width: 190px; }

.star-rating-container:before, .star-rating-container:after { content: " "; display: table; }

.star-rating-container:after { clear: both; }

.star-rating-input { display: none; }

.star-rating-icon { cursor: pointer; padding: 0 3px; display: block; float: right; }

.star-rating-icon svg { fill: none; stroke: #55616c; stroke-width: 2px; }

.star-rating-container:not(:hover):not(.rating-chosen) .star-rating-icon svg { stroke: #FFD365; }

.star-rating-icon:hover svg, .star-rating-icon:hover ~ .star-rating-icon svg { stroke: #FFD365; }

.star-rating-input:checked ~ .star-rating-icon svg { fill: #FFD365; stroke: #FFD365; }
.students-list li { list-style-type: none; border-bottom: 1px solid #dde0e4; padding-bottom: 10px; margin-bottom: 10px; }

.students-list li:before, .students-list li:after { content: " "; display: table; }

.students-list li:after { clear: both; }

.students-list li:last-child { border: none; }

.students-list .deprecated-avatar { width: 32px; height: 32px; display: block; float: left; margin: 0px 10px 0px 0; background-position: center; background-size: auto 32px; border-radius: 32px; }

.students-list .deprecated-avatar img { display: none; }

.students-list h4 { font-size: 14px; font-weight: 700; color: #384047; padding-top: 4px; margin-bottom: 3px; word-break: break-all; }

.students-list h4 a { color: #384047; }

.students-list p { font-size: 12px; color: #1a2126; margin: 0; }

.students-list .button { float: right; margin-left: 10px; }

.students-list.student-list-large li { border-color: #edeff0; }

.students-list.student-list-large .deprecated-avatar { width: 50px; height: 50px; margin-bottom: 0; background-size: auto 50px; border-radius: 50px; }

.students-list.student-list-large h4 { padding-top: 10px; margin: 0 0 8px; }

.students-list.student-list-large p { font-size: 14px; }

.students-list.student-list-large .button { margin-top: 5px; }

.contained.secondary .students-list li { margin: 0 -20px 15px; padding: 0 20px 15px; border-color: #edeff0; }

.contained.secondary .students-list li:before, .contained.secondary .students-list li:after { content: " "; display: table; }

.contained.secondary .students-list li:after { clear: both; }

.contained.secondary .students-list .deprecated-avatar { margin-left: -5px; }

.contained.secondary .students-list p { color: #2b363e; }

.contained.secondary .students-list .rank { float: right; font-size: 18px; margin-top: 7px; color: #2b363e; }
.survey-progress { list-style: none; text-align: center; display: table; }

@media screen and (min-width: 680px) { .survey-progress { width: 85%; margin: 0 auto 30px; } }

@media screen and (max-width: 679px) { .survey-progress { width: 92%; margin: 10px auto 20px; } }

.survey-progress li { position: relative; display: table-cell; color: #525b63; line-height: 1; font-weight: 700; white-space: nowrap; }

@media screen and (min-width: 680px) { .survey-progress li { font-size: 13px; } }

@media screen and (max-width: 679px) { .survey-progress li { font-size: 12px; } }

.survey-progress li svg { fill: #5fcf80; width: 14px; left: 50%; margin-left: -6px; position: absolute; left: 50%; }

.survey-progress li svg.checkmark-icon { height: 10px; top: 9px; }

.survey-progress li svg.close-icon { height: 12px; top: 8px; }

.survey-progress li a { transition: color 300ms 0s ease; color: inherit; display: block; height: 100%; position: relative; }

.survey-progress li a:hover { color: #24282b; }

.survey-progress li span { display: block; width: 200px; text-align: center; margin-left: -100px; position: absolute; top: 38px; left: 50%; }

.survey-progress li:not(.divider) { height: 49px; }

@media screen and (min-width: 680px) { .survey-progress li:not(.divider) { width: 68px; } }

@media screen and (max-width: 679px) { .survey-progress li:not(.divider) { width: 48px; } }

.survey-progress li:not(.divider):before { content: ' '; display: inline-block; width: 28px; height: 28px; border: 2px solid #cbd4d8; border-radius: 28px; position: absolute; top: 0; left: 50%; margin-left: -14px; }

.survey-progress li.current:before, .survey-progress li.complete:before { border-color: #5fcf80; }

.survey-progress li.divider:before { content: ' '; display: block; width: 100%; height: 2px; background: rgba(0, 0, 0, 0.04); border-radius: 10px; position: absolute; top: 13px; }

.survey-header { position: relative; text-align: center; }

@media screen and (min-width: 680px) { .survey-header.without-divider:not(.without-margin) { margin-bottom: 25px; } }

@media screen and (max-width: 679px) { .survey-header.without-divider:not(.without-margin) { margin-bottom: 15px; } }

.survey-header:not(.without-divider) { border-bottom: 1px solid #f0f2f4; }

@media screen and (min-width: 680px) { .survey-header:not(.without-divider) { padding: 0 0 30px; } }

@media screen and (max-width: 679px) { .survey-header:not(.without-divider) { padding: 0 0 20px; } }

.survey-header h1 { color: #384047; line-height: 1.5; }

@media screen and (min-width: 680px) { .survey-header h1 { font-size: 24px; } }

@media screen and (max-width: 679px) { .survey-header h1 { font-size: 18px; } }

.survey-header h2, .survey-header p { color: #8d9aa5; line-height: 1.6; font-weight: 400; }

@media screen and (min-width: 680px) { .survey-header h2, .survey-header p { font-size: 16px; } }

@media screen and (max-width: 679px) { .survey-header h2, .survey-header p { font-size: 14px; } }

.survey-header h1 + h2, .survey-header h2 + h1 { margin-top: 3px; }

@media screen and (min-width: 680px) { .survey-header p + h1 { margin-top: 10px; } }

@media screen and (max-width: 679px) { .survey-header p + h1 { margin-top: 5px; } }

.survey-heading-text { text-align: center; padding: 10px 0 40px; }

@media screen and (max-width: 679px) { .survey-heading-text { padding: 0 0 20px; } }

.survey-heading-text h1 { margin-bottom: 5px; line-height: 1.5; }

@media screen and (min-width: 680px) { .survey-heading-text h1 { font-size: 24px; } }

@media screen and (max-width: 679px) { .survey-heading-text h1 { font-size: 20px; } }

.survey-heading-text p { color: #2b363e; line-height: 1.5; padding: 0; margin: 0; }

@media screen and (min-width: 680px) { .survey-heading-text p { font-size: 16px; } }

@media screen and (max-width: 679px) { .survey-heading-text p { font-size: 14px; } }

@media screen and (max-width: 969px) { .survey-heading-text p { padding: 0 20px; } }

.survey fieldset:not(:last-child) { border-bottom: 2px solid #f0f2f4; }

.survey fieldset:last-child { margin: 0; padding: 0; }

.survey fieldset:last-child .form-item { margin: 0; }

.survey .step:not(.current-wizard-step) { display: none; }

.survey-list { margin: 0; padding: 0; list-style: none; }

.survey-list.with-top-margin { margin-top: 30px; }

.survey-list.with-top-border { border-top: 1px solid #f0f2f4; }

.survey-list.with-bottom-border { border-bottom: 1px solid #f0f2f4; margin-bottom: 30px; }

.survey-list-item { position: relative; }

@media screen and (min-width: 680px) { .padded-list-items .survey-list-item { padding: 30px 0 30px 44px; } }

@media screen and (max-width: 679px) { .padded-list-items .survey-list-item { padding: 20px 0 20px 35px; } }

.padded-list-items.tight-padding .survey-list-item { padding-top: 15px; padding-bottom: 15px; }

.survey-list-item:not(:last-child) { border-bottom: 1px solid #f0f2f4; }

.survey-list-item-icon { display: block; fill: #6c879b; position: absolute; top: 50%; right: 10px; transition: fill 300ms 0s ease, opacity 150ms 0s ease, transform 150ms 0s ease; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

.survey-list-item-icon-container:hover .survey-list-item-icon.close-24-icon { fill: #2b363e; }

.survey-list-item-icon-container:hover .survey-list-item-icon.help-outline-24-icon { fill: #35A961; }

.showing-description .survey-list-item-icon.right-arrow-icon { -ms-transform: translate(-10px, -50%) rotate(90deg); -moz-transform: translate(-10px, -50%) rotate(90deg); -webkit-transform: translate(-10px, -50%) rotate(90deg); transform: translate(-10px, -50%) rotate(90deg); }

.showing-description .survey-list-item-icon.help-outline-24-icon { opacity: 0; }

li:not(.showing-description) .survey-list-item-icon.close-24-icon { opacity: 0; }

.survey-list-item-icon-container { display: block; position: absolute; cursor: pointer; padding: 10px; width: 44px; height: 44px; }

@media screen and (min-width: 680px) { .survey-list-item-icon-container { top: 20px; right: 5px; } }

@media screen and (max-width: 679px) { .survey-list-item-icon-container { top: 10px; right: -10px; } }

.tight-padding .survey-list-item-icon-container { top: 10px; }

li:not(.showing-description) .survey-list-item-icon-container:before, li:not(.showing-description) .survey-list-item-icon-container:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

li:not(.showing-description) .survey-list-item-icon-container:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 20px) rotate(45deg); -moz-transform: translate(-50%, 20px) rotate(45deg); -webkit-transform: translate(-50%, 20px) rotate(45deg); transform: translate(-50%, 20px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

li:not(.showing-description) .survey-list-item-icon-container:after { content: "What's this?"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 15px); -moz-transform: translate(-50%, 15px); -webkit-transform: translate(-50%, 15px); transform: translate(-50%, 15px); color: #fff; left: 50%; bottom: 100%; }

li:not(.showing-description) .survey-list-item-icon-container:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

li:not(.showing-description) .survey-list-item-icon-container:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

.survey-list-item-description { position: relative; background: #f9fafa; margin-bottom: -1px; border: 1px solid #f0f2f4; border-width: 1px 0; max-height: 1000px; transition: max-height 300ms 0s ease, opacity 600ms 0s ease, padding 300ms 0s ease; }

@media screen and (max-width: 679px) { .survey-list-item-description { padding: 20px; margin-left: -20px; margin-right: -20px; } }

@media screen and (min-width: 680px) { .survey-list-item-description { padding: 30px; margin-left: -30px; margin-right: -30px; } }

li:not(.showing-description) .survey-list-item-description { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }

.survey-list-item-description p { line-height: 1.8; color: #2b363e; }

.survey-list-item-description:after { content: " "; display: block; background: #f9fafa; border: 1px solid #e8ebed; border-width: 1px 0 0 1px; border-radius: 4px 0 0 0; position: absolute; top: -6px; width: 12px; height: 12px; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

@media screen and (min-width: 680px) { .survey-list-item-description:after { right: 51px; } }

@media screen and (max-width: 679px) { .survey-list-item-description:after { right: 26px; } }

.survey-list-item-link { position: relative; display: block; color: #1a2126; transition: color 300ms 0s ease; }

@media screen and (min-width: 680px) { .survey-list-item-link { padding: 30px 0; } }

@media screen and (max-width: 679px) { .survey-list-item-link { padding: 20px 0; } }

@media screen and (min-width: 680px) { .survey-list-item-link:not(.accordion-link) { padding-left: 44px; } }

@media screen and (max-width: 679px) { .survey-list-item-link:not(.accordion-link) { padding-left: 35px; } }

.tight-padding .survey-list-item-link { padding-top: 20px; padding-bottom: 20px; }

.ui-sortable .survey-list-item-link { cursor: move; background: #fff; }

@media screen and (min-width: 680px) { .ui-sortable .survey-list-item-link { padding-left: 78px; } }

@media screen and (max-width: 679px) { .ui-sortable .survey-list-item-link { padding-left: 68px; } }

.ui-sortable .survey-list-item-link:before { content: ""; background: url("/assets/global/drag-75169656971734810cda7f11d0c0d1020e61809fa138f5ce81781208cbf1e230.svg"); background-size: 20px 10px; width: 20px; height: 10px; position: absolute; top: 50%; left: 0; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

.survey-list-item-link:hover { color: black; }

@media screen and (max-width: 679px) { .survey-list-item-radio, .survey-list-item-checkbox, .survey-list-item-rank { top: 22px; width: 20px; height: 20px; } }

@media screen and (min-width: 680px) { .survey-list-item-radio, .survey-list-item-checkbox, .survey-list-item-rank { top: 30px; width: 24px; height: 24px; } }

.tight-padding .survey-list-item-radio, .tight-padding .survey-list-item-checkbox, .tight-padding .survey-list-item-rank { top: 20px; }

.survey-list-item-radio, .survey-list-item-radio:after, .survey-list-item-checkbox, .survey-list-item-checkbox:after, .survey-list-item-rank, .survey-list-item-rank:after { display: block; border: 2px solid #000; border-radius: 4px; position: absolute; }

.survey-list-item-radio, .survey-list-item-checkbox { opacity: 0.5; left: 0; }

.survey-list-item-radio, .survey-list-item-radio:after, .survey-list-item-checkbox, .survey-list-item-checkbox:after { transition: opacity 150ms 0s ease, border-color 150ms 0s ease; }

a:hover .survey-list-item-radio, a:active .survey-list-item-radio, a.checked .survey-list-item-radio, a:hover .survey-list-item-radio:after, a:active .survey-list-item-radio:after, a.checked .survey-list-item-radio:after, a:hover .survey-list-item-checkbox, a:active .survey-list-item-checkbox, a.checked .survey-list-item-checkbox, a:hover .survey-list-item-checkbox:after, a:active .survey-list-item-checkbox:after, a.checked .survey-list-item-checkbox:after { opacity: 1; }

a:active .survey-list-item-radio, a.checked .survey-list-item-radio, a:active .survey-list-item-radio:after, a.checked .survey-list-item-radio:after, a:active .survey-list-item-checkbox, a.checked .survey-list-item-checkbox, a:active .survey-list-item-checkbox:after, a.checked .survey-list-item-checkbox:after { border-color: #35A961; }

.survey-list-item-rank { left: 30px; top: 50%; color: #000; opacity: 0.4; text-align: center; font-weight: 700; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

@media screen and (min-width: 680px) { .survey-list-item-rank { line-height: 20px; } }

@media screen and (max-width: 679px) { .survey-list-item-rank { line-height: 16px; font-size: 11px; } }

.survey-list-item-radio, .survey-list-item-radio:after { border-radius: 50%; }

.survey-list-item-radio:after { content: " "; opacity: 0; left: 50%; top: 50%; }

@media screen and (max-width: 679px) { .survey-list-item-radio:after { margin-top: -3px; margin-left: -3px; border-width: 3px; width: 6px; height: 6px; } }

@media screen and (min-width: 680px) { .survey-list-item-radio:after { margin-top: -4px; margin-left: -4px; border-width: 4px; width: 8px; height: 8px; } }

.survey-list-item .input-radio { position: absolute; top: 50%; left: 3px; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); z-index: 0; cursor: pointer; }

.ie .survey-list-item .input-radio { left: 5px; margin-top: -1px; }

.survey-list-item .input-radio:before, .survey-list-item .input-radio:after { display: block; content: " "; border-radius: 50%; border: 2px solid #000; z-index: 1; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: opacity 150ms 0s ease, border-color 150ms 0s ease; margin-top: -4px; }

.survey-list-item .input-radio:before { background: #fff; width: 24px; height: 24px; }

.survey-list-item .input-radio:after { width: 8px; height: 8px; border-width: 4px; }

.survey-list-item .input-radio:not(:checked):before { border-color: #d4d9dd; }

.survey-list-item .input-radio:not(:checked):after { opacity: 0; }

.survey-list-item .input-radio:checked:before, .survey-list-item .input-radio:checked:after { border-color: #35A961; }

.survey-list-item-checkbox svg { opacity: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

a:active .survey-list-item-checkbox svg, a.checked .survey-list-item-checkbox svg { opacity: 1; fill: #35A961; }

.survey-list-item p { margin: 0; }

.survey-list-item-label, .survey-list-item label { display: block; font-size: 14px; line-height: 24px; transition: color 300ms 0s ease; cursor: pointer; }

.ui-sortable .survey-list-item-label, .ui-sortable .survey-list-item label { cursor: move; }

.survey-list-item-label:hover, .survey-list-item label:hover { color: black; }

.showing-description .survey-list-item-label, .showing-description .survey-list-item label { font-weight: 700; }

.survey-actions { text-align: center; margin: 30px 0; }

@media screen and (max-width: 679px) { .survey-actions-back { margin-bottom: 10px; } }

.survey-actions .hidden { display: none !important; }
.markdown-zone table, table.data { width: 100%; border-collapse: collapse; }

@media screen and (max-width: 679px) { .markdown-zone table, table.data { margin-bottom: 20px; } }

@media screen and (min-width: 680px) { .markdown-zone table, table.data { margin-bottom: 30px; } }

.markdown-zone table thead, table.data thead { border-bottom: 1px solid #dfe3e4; }

.markdown-zone table tr, table.data tr { border-bottom: 1px solid #dfe3e4; }

.markdown-zone table tr:last-child, table.data tr:last-child { border: none; }

.markdown-zone table tbody tr:nth-child(odd), table.data tbody tr:nth-child(odd) { background: #f9fafa; }

.markdown-zone table td, .markdown-zone table th, table.data td, table.data th { vertical-align: top; font-size: 14px; text-align: left; line-height: 1.5; }

@media screen and (max-width: 969px) { .markdown-zone table td, .markdown-zone table th, table.data td, table.data th { padding: 15px 5px; } }

@media screen and (min-width: 970px) { .markdown-zone table td, .markdown-zone table th, table.data td, table.data th { padding: 15px; } }

.markdown-zone table td.actions, .markdown-zone table th.actions, table.data td.actions, table.data th.actions { text-align: right; }

.markdown-zone table th, table.data th { padding-top: 0; padding-bottom: 0; color: #2b363e; font-weight: 700; }

.markdown-zone table thead th, table.data thead th { padding-bottom: 10px; }

.markdown-zone table.dataframe thead th, table.data.dataframe thead th { text-align: left !important; }

.markdown-zone table.dataframe td, .markdown-zone table.dataframe th, table.data.dataframe td, table.data.dataframe th { border-left: 1px solid #dfe3e4; }

.markdown-zone table.dataframe td:first-child, .markdown-zone table.dataframe th:first-child, table.data.dataframe td:first-child, table.data.dataframe th:first-child { border-left: none; }

.markdown--jupyter-notebook div:not(.highlight) { overflow-y: scroll; margin-bottom: 30px; }

.markdown--jupyter-notebook div:not(.highlight) table { margin-bottom: 10px; }
.tabs { margin: 15px 0 30px; position: relative; }

.tabs:before, .tabs:after { content: " "; display: table; }

.tabs:after { clear: both; }

@media screen and (min-width: 680px) { .tabs { border-bottom: 2px solid rgba(0, 0, 0, 0.08); } }

.tabs h2 { font-size: 24px; line-height: 24px; }

@media screen and (min-width: 680px) { .tabs h2 { position: absolute; left: 0; bottom: 20px; } }

@media screen and (max-width: 679px) { .tabs h2 { padding-bottom: 20px; margin-bottom: -2px; border-bottom: 2px solid rgba(0, 0, 0, 0.05); } }

.tabs ul { list-style: none; }

.tabs ul:before, .tabs ul:after { content: " "; display: table; }

.tabs ul:after { clear: both; }

@media screen and (min-width: 680px) { .right.tabs ul { float: right; } }

.tabs li { font-size: 14px; font-weight: 700; position: relative; margin: 0; transition: border-color .15s ease; }

@media screen and (min-width: 970px) { .left.tabs li { margin-right: 30px; }
  .right.tabs li { margin-left: 30px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .left.tabs li { margin-right: 20px; }
  .right.tabs li { margin-left: 20px; } }

@media screen and (min-width: 680px) { .tabs li { border-bottom: 2px solid transparent; bottom: -2px; }
  .left.tabs li { float: left; }
  .right.tabs li { float: left; } }

@media screen and (max-width: 679px) { .tabs li { border-bottom: 2px solid rgba(0, 0, 0, 0.05); } }

.tabs li.current a, .tabs li:hover a { color: black; }

.tabs li.current { border-color: #b5bec2; }

.tabs li.current a { cursor: default; }

.tabs li a { display: block; color: #2b363e; transition: color .15s ease; }

@media screen and (min-width: 680px) { .tabs li a { padding: 0 0 22px; } }

@media screen and (max-width: 679px) { .tabs li a { padding: 15px 0; } }

.tabs li a:hover { color: #101417; }
.tag, .tags > li > a, .tags > li > span { display: inline-block; border-radius: 100px; background: transparent; border: 2px solid #d4d9dd; font-weight: 700; padding: 0 11px; font-size: 13px; line-height: 32px; white-space: nowrap; position: relative; text-align: center; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }

.tag:not(.has-topic-color), .tags > li > a:not(.has-topic-color), .tags > li > span:not(.has-topic-color) { color: #55616c; }

.tags > li { display: inline-block; margin: 0 7px 9px 0; }

.tags > li.topic-ai > a, .tags > li.topic-ai > span { color: #733A88; }

.tags > li.topic-back-end > a, .tags > li.topic-back-end > span { color: #008297; }

.tags > li.topic-data > a, .tags > li.topic-data > span { color: #9F4B84; }

.tags > li.topic-design > a, .tags > li.topic-design > span { color: #4a4290; }

.tags > li.topic-experimental > a, .tags > li.topic-experimental > span { color: #733a88; }

.tags > li.topic-front-end > a, .tags > li.topic-front-end > span { color: #3659a2; }

.tags > li.topic-fundamentals > a, .tags > li.topic-fundamentals > span { color: #9b3b5a; }

.tags > li.topic-mobile > a, .tags > li.topic-mobile > span { color: #30826C; }

.tags > li.topic-internal > a, .tags > li.topic-internal > span { color: #55616c; }

.tags > li.topic-foundations > a, .tags > li.topic-foundations > span { color: #004e61; }

.tags > li.topic-undefined > a, .tags > li.topic-undefined > span { color: #55616c; }

.tags > li.topic-college-credit > a, .tags > li.topic-college-credit > span { color: #3887c8; }

.tags > li.topic-no-code > a, .tags > li.topic-no-code > span { color: #31AF7F; }

.tags > li.topic-security > a, .tags > li.topic-security > span { color: #409BE9; }

.tags > li.topic-game-development > a, .tags > li.topic-game-development > span { color: #856fc4; }

.tags > li.topic-treehouse-resources > a, .tags > li.topic-treehouse-resources > span { color: #5fcf80; }

.tags > li.topic-coding-for-kids > a, .tags > li.topic-coding-for-kids > span { color: #F36C27; }

.tags > li.topic-ai > a:hover { color: #733A88; border-color: #733A88; }

.tags > li.topic-back-end > a:hover { color: #008297; border-color: #008297; }

.tags > li.topic-data > a:hover { color: #9F4B84; border-color: #9F4B84; }

.tags > li.topic-design > a:hover { color: #4a4290; border-color: #4a4290; }

.tags > li.topic-experimental > a:hover { color: #733a88; border-color: #733a88; }

.tags > li.topic-front-end > a:hover { color: #3659a2; border-color: #3659a2; }

.tags > li.topic-fundamentals > a:hover { color: #9b3b5a; border-color: #9b3b5a; }

.tags > li.topic-mobile > a:hover { color: #30826C; border-color: #30826C; }

.tags > li.topic-internal > a:hover { color: #55616c; border-color: #55616c; }

.tags > li.topic-foundations > a:hover { color: #004e61; border-color: #004e61; }

.tags > li.topic-undefined > a:hover { color: #55616c; border-color: #55616c; }

.tags > li.topic-college-credit > a:hover { color: #3887c8; border-color: #3887c8; }

.tags > li.topic-no-code > a:hover { color: #31AF7F; border-color: #31AF7F; }

.tags > li.topic-security > a:hover { color: #409BE9; border-color: #409BE9; }

.tags > li.topic-game-development > a:hover { color: #856fc4; border-color: #856fc4; }

.tags > li.topic-treehouse-resources > a:hover { color: #5fcf80; border-color: #5fcf80; }

.tags > li.topic-coding-for-kids > a:hover { color: #F36C27; border-color: #F36C27; }

.tags > li > a.hidden { display: none; }

.tags > li > a:hover { border-color: #2b363e; color: #1a2126; }

.tags > li.pro-content > a, .tags > li.pro-content > span, .tags > li.techdegree-content > a, .tags > li.techdegree-content > span { color: #fff; }

.topic-ai.tags li.pro-content > a, .topic-ai.tags li.pro-content > span, .topic-ai.tags li.techdegree-content > a, .topic-ai.tags li.techdegree-content > span { background-color: #733A88; border-color: #733A88; }

.topic-ai .tags > li.pro-content > a, .topic-ai .tags > li.pro-content > span, .topic-ai .tags > li.techdegree-content > a, .topic-ai .tags > li.techdegree-content > span { background-color: #733A88; border-color: #733A88; }

.topic-back-end.tags li.pro-content > a, .topic-back-end.tags li.pro-content > span, .topic-back-end.tags li.techdegree-content > a, .topic-back-end.tags li.techdegree-content > span { background-color: #008297; border-color: #008297; }

.topic-back-end .tags > li.pro-content > a, .topic-back-end .tags > li.pro-content > span, .topic-back-end .tags > li.techdegree-content > a, .topic-back-end .tags > li.techdegree-content > span { background-color: #008297; border-color: #008297; }

.topic-data.tags li.pro-content > a, .topic-data.tags li.pro-content > span, .topic-data.tags li.techdegree-content > a, .topic-data.tags li.techdegree-content > span { background-color: #9F4B84; border-color: #9F4B84; }

.topic-data .tags > li.pro-content > a, .topic-data .tags > li.pro-content > span, .topic-data .tags > li.techdegree-content > a, .topic-data .tags > li.techdegree-content > span { background-color: #9F4B84; border-color: #9F4B84; }

.topic-design.tags li.pro-content > a, .topic-design.tags li.pro-content > span, .topic-design.tags li.techdegree-content > a, .topic-design.tags li.techdegree-content > span { background-color: #4a4290; border-color: #4a4290; }

.topic-design .tags > li.pro-content > a, .topic-design .tags > li.pro-content > span, .topic-design .tags > li.techdegree-content > a, .topic-design .tags > li.techdegree-content > span { background-color: #4a4290; border-color: #4a4290; }

.topic-experimental.tags li.pro-content > a, .topic-experimental.tags li.pro-content > span, .topic-experimental.tags li.techdegree-content > a, .topic-experimental.tags li.techdegree-content > span { background-color: #733a88; border-color: #733a88; }

.topic-experimental .tags > li.pro-content > a, .topic-experimental .tags > li.pro-content > span, .topic-experimental .tags > li.techdegree-content > a, .topic-experimental .tags > li.techdegree-content > span { background-color: #733a88; border-color: #733a88; }

.topic-front-end.tags li.pro-content > a, .topic-front-end.tags li.pro-content > span, .topic-front-end.tags li.techdegree-content > a, .topic-front-end.tags li.techdegree-content > span { background-color: #3659a2; border-color: #3659a2; }

.topic-front-end .tags > li.pro-content > a, .topic-front-end .tags > li.pro-content > span, .topic-front-end .tags > li.techdegree-content > a, .topic-front-end .tags > li.techdegree-content > span { background-color: #3659a2; border-color: #3659a2; }

.topic-fundamentals.tags li.pro-content > a, .topic-fundamentals.tags li.pro-content > span, .topic-fundamentals.tags li.techdegree-content > a, .topic-fundamentals.tags li.techdegree-content > span { background-color: #9b3b5a; border-color: #9b3b5a; }

.topic-fundamentals .tags > li.pro-content > a, .topic-fundamentals .tags > li.pro-content > span, .topic-fundamentals .tags > li.techdegree-content > a, .topic-fundamentals .tags > li.techdegree-content > span { background-color: #9b3b5a; border-color: #9b3b5a; }

.topic-mobile.tags li.pro-content > a, .topic-mobile.tags li.pro-content > span, .topic-mobile.tags li.techdegree-content > a, .topic-mobile.tags li.techdegree-content > span { background-color: #30826C; border-color: #30826C; }

.topic-mobile .tags > li.pro-content > a, .topic-mobile .tags > li.pro-content > span, .topic-mobile .tags > li.techdegree-content > a, .topic-mobile .tags > li.techdegree-content > span { background-color: #30826C; border-color: #30826C; }

.topic-internal.tags li.pro-content > a, .topic-internal.tags li.pro-content > span, .topic-internal.tags li.techdegree-content > a, .topic-internal.tags li.techdegree-content > span { background-color: #55616c; border-color: #55616c; }

.topic-internal .tags > li.pro-content > a, .topic-internal .tags > li.pro-content > span, .topic-internal .tags > li.techdegree-content > a, .topic-internal .tags > li.techdegree-content > span { background-color: #55616c; border-color: #55616c; }

.topic-foundations.tags li.pro-content > a, .topic-foundations.tags li.pro-content > span, .topic-foundations.tags li.techdegree-content > a, .topic-foundations.tags li.techdegree-content > span { background-color: #004e61; border-color: #004e61; }

.topic-foundations .tags > li.pro-content > a, .topic-foundations .tags > li.pro-content > span, .topic-foundations .tags > li.techdegree-content > a, .topic-foundations .tags > li.techdegree-content > span { background-color: #004e61; border-color: #004e61; }

.topic-undefined.tags li.pro-content > a, .topic-undefined.tags li.pro-content > span, .topic-undefined.tags li.techdegree-content > a, .topic-undefined.tags li.techdegree-content > span { background-color: #55616c; border-color: #55616c; }

.topic-undefined .tags > li.pro-content > a, .topic-undefined .tags > li.pro-content > span, .topic-undefined .tags > li.techdegree-content > a, .topic-undefined .tags > li.techdegree-content > span { background-color: #55616c; border-color: #55616c; }

.topic-college-credit.tags li.pro-content > a, .topic-college-credit.tags li.pro-content > span, .topic-college-credit.tags li.techdegree-content > a, .topic-college-credit.tags li.techdegree-content > span { background-color: #3887c8; border-color: #3887c8; }

.topic-college-credit .tags > li.pro-content > a, .topic-college-credit .tags > li.pro-content > span, .topic-college-credit .tags > li.techdegree-content > a, .topic-college-credit .tags > li.techdegree-content > span { background-color: #3887c8; border-color: #3887c8; }

.topic-no-code.tags li.pro-content > a, .topic-no-code.tags li.pro-content > span, .topic-no-code.tags li.techdegree-content > a, .topic-no-code.tags li.techdegree-content > span { background-color: #31AF7F; border-color: #31AF7F; }

.topic-no-code .tags > li.pro-content > a, .topic-no-code .tags > li.pro-content > span, .topic-no-code .tags > li.techdegree-content > a, .topic-no-code .tags > li.techdegree-content > span { background-color: #31AF7F; border-color: #31AF7F; }

.topic-security.tags li.pro-content > a, .topic-security.tags li.pro-content > span, .topic-security.tags li.techdegree-content > a, .topic-security.tags li.techdegree-content > span { background-color: #409BE9; border-color: #409BE9; }

.topic-security .tags > li.pro-content > a, .topic-security .tags > li.pro-content > span, .topic-security .tags > li.techdegree-content > a, .topic-security .tags > li.techdegree-content > span { background-color: #409BE9; border-color: #409BE9; }

.topic-game-development.tags li.pro-content > a, .topic-game-development.tags li.pro-content > span, .topic-game-development.tags li.techdegree-content > a, .topic-game-development.tags li.techdegree-content > span { background-color: #856fc4; border-color: #856fc4; }

.topic-game-development .tags > li.pro-content > a, .topic-game-development .tags > li.pro-content > span, .topic-game-development .tags > li.techdegree-content > a, .topic-game-development .tags > li.techdegree-content > span { background-color: #856fc4; border-color: #856fc4; }

.topic-treehouse-resources.tags li.pro-content > a, .topic-treehouse-resources.tags li.pro-content > span, .topic-treehouse-resources.tags li.techdegree-content > a, .topic-treehouse-resources.tags li.techdegree-content > span { background-color: #5fcf80; border-color: #5fcf80; }

.topic-treehouse-resources .tags > li.pro-content > a, .topic-treehouse-resources .tags > li.pro-content > span, .topic-treehouse-resources .tags > li.techdegree-content > a, .topic-treehouse-resources .tags > li.techdegree-content > span { background-color: #5fcf80; border-color: #5fcf80; }

.topic-coding-for-kids.tags li.pro-content > a, .topic-coding-for-kids.tags li.pro-content > span, .topic-coding-for-kids.tags li.techdegree-content > a, .topic-coding-for-kids.tags li.techdegree-content > span { background-color: #F36C27; border-color: #F36C27; }

.topic-coding-for-kids .tags > li.pro-content > a, .topic-coding-for-kids .tags > li.pro-content > span, .topic-coding-for-kids .tags > li.techdegree-content > a, .topic-coding-for-kids .tags > li.techdegree-content > span { background-color: #F36C27; border-color: #F36C27; }

.topic-ai.tags li.pro-content > a:hover, .topic-ai.tags li.techdegree-content > a:hover { background-color: #643276; border-color: #643276; }

.topic-ai .tags > li.pro-content > a:hover, .topic-ai .tags > li.techdegree-content > a:hover { background-color: #643276; border-color: #643276; }

.topic-back-end.tags li.pro-content > a:hover, .topic-back-end.tags li.techdegree-content > a:hover { background-color: #006c7e; border-color: #006c7e; }

.topic-back-end .tags > li.pro-content > a:hover, .topic-back-end .tags > li.techdegree-content > a:hover { background-color: #006c7e; border-color: #006c7e; }

.topic-data.tags li.pro-content > a:hover, .topic-data.tags li.techdegree-content > a:hover { background-color: #8e4376; border-color: #8e4376; }

.topic-data .tags > li.pro-content > a:hover, .topic-data .tags > li.techdegree-content > a:hover { background-color: #8e4376; border-color: #8e4376; }

.topic-design.tags li.pro-content > a:hover, .topic-design.tags li.techdegree-content > a:hover { background-color: #413a7f; border-color: #413a7f; }

.topic-design .tags > li.pro-content > a:hover, .topic-design .tags > li.techdegree-content > a:hover { background-color: #413a7f; border-color: #413a7f; }

.topic-experimental.tags li.pro-content > a:hover, .topic-experimental.tags li.techdegree-content > a:hover { background-color: #643276; border-color: #643276; }

.topic-experimental .tags > li.pro-content > a:hover, .topic-experimental .tags > li.techdegree-content > a:hover { background-color: #643276; border-color: #643276; }

.topic-front-end.tags li.pro-content > a:hover, .topic-front-end.tags li.techdegree-content > a:hover { background-color: #304e8f; border-color: #304e8f; }

.topic-front-end .tags > li.pro-content > a:hover, .topic-front-end .tags > li.techdegree-content > a:hover { background-color: #304e8f; border-color: #304e8f; }

.topic-fundamentals.tags li.pro-content > a:hover, .topic-fundamentals.tags li.techdegree-content > a:hover { background-color: #89344f; border-color: #89344f; }

.topic-fundamentals .tags > li.pro-content > a:hover, .topic-fundamentals .tags > li.techdegree-content > a:hover { background-color: #89344f; border-color: #89344f; }

.topic-mobile.tags li.pro-content > a:hover, .topic-mobile.tags li.techdegree-content > a:hover { background-color: #296f5d; border-color: #296f5d; }

.topic-mobile .tags > li.pro-content > a:hover, .topic-mobile .tags > li.techdegree-content > a:hover { background-color: #296f5d; border-color: #296f5d; }

.topic-internal.tags li.pro-content > a:hover, .topic-internal.tags li.techdegree-content > a:hover { background-color: #4a545e; border-color: #4a545e; }

.topic-internal .tags > li.pro-content > a:hover, .topic-internal .tags > li.techdegree-content > a:hover { background-color: #4a545e; border-color: #4a545e; }

.topic-foundations.tags li.pro-content > a:hover, .topic-foundations.tags li.techdegree-content > a:hover { background-color: #003948; border-color: #003948; }

.topic-foundations .tags > li.pro-content > a:hover, .topic-foundations .tags > li.techdegree-content > a:hover { background-color: #003948; border-color: #003948; }

.topic-undefined.tags li.pro-content > a:hover, .topic-undefined.tags li.techdegree-content > a:hover { background-color: #4a545e; border-color: #4a545e; }

.topic-undefined .tags > li.pro-content > a:hover, .topic-undefined .tags > li.techdegree-content > a:hover { background-color: #4a545e; border-color: #4a545e; }

.topic-college-credit.tags li.pro-content > a:hover, .topic-college-credit.tags li.techdegree-content > a:hover { background-color: #327ab5; border-color: #327ab5; }

.topic-college-credit .tags > li.pro-content > a:hover, .topic-college-credit .tags > li.techdegree-content > a:hover { background-color: #327ab5; border-color: #327ab5; }

.topic-no-code.tags li.pro-content > a:hover, .topic-no-code.tags li.techdegree-content > a:hover { background-color: #2b9b71; border-color: #2b9b71; }

.topic-no-code .tags > li.pro-content > a:hover, .topic-no-code .tags > li.techdegree-content > a:hover { background-color: #2b9b71; border-color: #2b9b71; }

.topic-security.tags li.pro-content > a:hover, .topic-security.tags li.techdegree-content > a:hover { background-color: #298fe6; border-color: #298fe6; }

.topic-security .tags > li.pro-content > a:hover, .topic-security .tags > li.techdegree-content > a:hover { background-color: #298fe6; border-color: #298fe6; }

.topic-game-development.tags li.pro-content > a:hover, .topic-game-development.tags li.techdegree-content > a:hover { background-color: #765dbd; border-color: #765dbd; }

.topic-game-development .tags > li.pro-content > a:hover, .topic-game-development .tags > li.techdegree-content > a:hover { background-color: #765dbd; border-color: #765dbd; }

.topic-treehouse-resources.tags li.pro-content > a:hover, .topic-treehouse-resources.tags li.techdegree-content > a:hover { background-color: #4bc970; border-color: #4bc970; }

.topic-treehouse-resources .tags > li.pro-content > a:hover, .topic-treehouse-resources .tags > li.techdegree-content > a:hover { background-color: #4bc970; border-color: #4bc970; }

.topic-coding-for-kids.tags li.pro-content > a:hover, .topic-coding-for-kids.tags li.techdegree-content > a:hover { background-color: #f25c0f; border-color: #f25c0f; }

.topic-coding-for-kids .tags > li.pro-content > a:hover, .topic-coding-for-kids .tags > li.techdegree-content > a:hover { background-color: #f25c0f; border-color: #f25c0f; }

.tags > li.hidden { display: none; }

.tags.large > li > a, .tags.large > li > span { font-size: 16px; line-height: 40px; padding: 0 18px; }
.test-container { border-bottom: 1px solid #edeff0; margin: 0 -30px; clear: both; }

.test-output { width: auto; border-top: 1px solid #edeff0; line-height: 40px; font-size: 14px; display: block; padding: 15px 30px; color: #1a2126; }

.test-output svg { margin: -5px 5px 0 0; vertical-align: middle; }

.test-output .right-chevron-icon { height: 15px; float: right; margin: 12px -10px 0 0; }

.test-with-content { cursor: pointer; }

.test-content { display: none; margin: 0 33px; }

.test-content .h6 { line-height: 1.2; }

.test-content p { color: #1a2126; }

.test-open .right-chevron-icon { -ms-transform: translate(-5px, 6px) rotate(90deg); -moz-transform: translate(-5px, 6px) rotate(90deg); -webkit-transform: translate(-5px, 6px) rotate(90deg); transform: translate(-5px, 6px) rotate(90deg); }

.test-open .test-content { display: block; }

.test-passed .checkmark-24-icon { fill: #5fcf80; }

.test-passed .colored { color: #5fcf80; }

.test-passed #le-passed { height: 200px; margin-bottom: 30px; }

.test-failed .close-24-icon { fill: #ed5a5a; }

.test-failed .colored { color: #ed5a5a; }

.test-running.pinata-container { display: block; height: 300px; width: 100%; }

.test-running.pinata-container #pinata { overflow: visible; position: absolute; left: 50%; top: -25px; width: 150px; margin-left: -75px; transform-origin: top center; }

.pt-results h4 { margin: 20px 0; }

.pt .clicked { opacity: .5; }

.pt .test-container { margin: 0; border: 0; }

.pt .test-output:hover { color: #1a2126; }

.pt-dispute { border: solid 2px #e8ebed; border-radius: 5px; padding: 20px; margin: 30px 0; width: 100%; position: relative; }

.pt-dispute-button { float: right; margin: -4px 0px 0 0; }

.submitted .pt-dispute-button { display: none; }

.pt-dispute-thanks { color: #5fcf80; font-size: 14px; font-weight: 700; line-height: 1.5; }

.submitted .pt-dispute-thanks { display: block; }

.pt-dispute-question { font-size: 14px; font-weight: 700; line-height: 1.5; margin: 0; }

.submitted .pt-dispute-question { display: none; }

.pt-dispute textarea { margin-top: 22px; margin-bottom: 20px; }
.tooltip { position: absolute; background: #2d3339; width: max-content; max-width: 200px; padding: 15px; color: #fff; text-align: left; text-shadow: none; line-height: 1; z-index: 50000; display: block; border-radius: 4px; white-space: normal; transition: opacity 300ms 0s ease, transform 300ms 0s ease, visibility 300ms 0s ease; }

.tooltip-container { position: relative; }

.tooltip-small { width: auto; text-align: center; margin: 0; padding: 10px; }

.tooltip-right, .tooltip-left { top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.tooltip-right { left: 100%; margin-left: 5px; }

.tooltip-left { right: 100%; margin-right: 5px; }

.tooltip-top, .tooltip-bottom { left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.tooltip-top { bottom: 100%; }

.tooltip-bottom { top: 100%; }

.tooltip:before { content: ""; position: absolute; background: #2d3339; width: 10px; height: 10px; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.tooltip-top:before, .tooltip-bottom:before { left: 50%; margin-left: -5px; }

.tooltip-top:before { bottom: -5px; border-radius: 0 0 3px 0; }

.tooltip-bottom:before { top: -5px; border-radius: 3px 0 0 0; }

.tooltip-left:before, .tooltip-right:before { top: 50%; margin-top: -5px; }

.tooltip-left:before { right: -5px; border-radius: 0 3px 0 0; }

.tooltip-right:before { left: -5px; border-radius: 0 0 0 3px; }

.tooltip-heading { color: #fff; font-weight: 700; display: block; margin-bottom: 5px; line-height: 1.4; font-size: 14px; }

.tooltip-small .tooltip-heading { margin: 0; }

.tooltip-description { margin: 0 !important; color: #a6b6c2; font-size: 13px !important; font-weight: 400; line-height: 1.4; }

.tooltip-description strong { display: inline; font-size: 13px; }

.tooltip-topic-text { position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: 220px; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); left: 50%; top: 100%; display: block; font-weight: 700; font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; }

.tooltip-topic-text p { margin-bottom: 0px; }

.tooltip-topic-text:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05); -ms-transform: translate(-50%, 50%) rotate(45deg); -moz-transform: translate(-50%, 50%) rotate(45deg); -webkit-transform: translate(-50%, 50%) rotate(45deg); transform: translate(-50%, 50%) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

li:hover .tooltip-topic-text, button:hover .tooltip-topic-text { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -3px); -moz-transform: translate(-50%, -3px); -webkit-transform: translate(-50%, -3px); transform: translate(-50%, -3px); }

li:first-child .tooltip-topic-text { left: 85px; }

li:first-child .tooltip-topic-text:before { left: 46px; }

li:last-child .tooltip-topic-text { left: auto; right: -135px; }

li:last-child .tooltip-topic-text:before { left: auto; right: 36px; }

.tooltip-topic-text em { display: block; color: #2b363e; font-size: 13px; line-height: 18px; font-weight: 400; margin: 4px 0 0; }
.topic-filters { list-style-type: none; margin-bottom: 20px; padding-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 20px; }

@media screen and (max-width: 969px) { .topic-filters { grid-template-columns: 1fr 1fr 1fr; } }

@media screen and (max-width: 679px) { .topic-filters { grid-template-columns: 1fr 1fr; } }

@media screen and (max-width: 480px) { .topic-filters { grid-template-columns: 1fr; } }

.topic-filter { width: 100%; height: 100px; display: block; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; box-decoration-break: clone; transition: transform 0.2s; }

.topic-filter .topic-filter-cover { width: 80px; height: 80px; transition: background-color 0.3s ease; position: relative; }

.topic-filter .topic-filter-cover .topic-filter__icon { height: auto; max-width: 70px; margin-left: 5px; margin-top: 5px; }

.topic-filter a { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; background: white; width: 100%; height: 80px; display: flex; align-items: center; transition: transform 0.2s; }

.topic-filter a span { width: calc(100% - 80px); display: inline-block; color: #384047; font-weight: 700; line-height: 1.3em; padding-right: 10px; }

.topic-filter:hover { -ms-transform: translate3d(0px, -3px, 0px); -moz-transform: translate3d(0px, -3px, 0px); -webkit-transform: translate3d(0px, -3px, 0px); transform: translate3d(0px, -3px, 0px); }
.user-tooltip { opacity: 0; visibility: hidden; text-align: center; font-size: 13px; color: #2b363e; line-height: 20px; width: auto; padding: 15px; min-width: 230px; transition-delay: 750ms; }

.user-tooltip-link:hover .user-tooltip { opacity: 1; visibility: visible; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.user-tooltip-degree-graduate { background: url(/assets/shared/tooltips/tooltip-confetti-c72213e0bca70e85be9edec556e422dba2e9e8442489293b13840a9e77b3f7cd.svg) no-repeat top center; background-size: cover; }

.user-tooltip-degree-graduate, .user-tooltip-degree-graduate:before, .user-tooltip-degree-graduate:after { background-color: #5ec87d; }

.user-tooltip-link { position: relative; }

.user-tooltip-status { position: relative; width: 36px; height: 36px; margin: 0 auto 10px; }

.user-tooltip-degree-seal, .user-tooltip-degree-progress { stroke-width: 2px; width: 34px; height: 34px; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; }

.user-tooltip-degree-progress .circle-progress-base, .user-tooltip-degree-progress .circle-progress-base-overlay { stroke: rgba(43, 54, 62, 0.4); }

.user-tooltip-degree-progress .circle-progress-bar { stroke: #fff; }

.user-tooltip-degree-seal { fill: none; stroke: #fff; }

.user-tooltip-degree-icon { fill: #fff; position: relative; top: 11px; }

.user-tooltip-name { color: #fff; font-size: 15px; margin-bottom: 2px; }

.user-tooltip-name, .user-tooltip-type, .user-tooltip-degree { font-weight: 700; white-space: nowrap; }

.user-tooltip-name, .user-tooltip-type, .user-tooltip-degree, .user-tooltip-points-total { display: block; }

.user-tooltip-degree-graduate .user-tooltip-name, .user-tooltip-degree-graduate .user-tooltip-type, .user-tooltip-degree-graduate .user-tooltip-degree, .user-tooltip-degree-graduate .user-tooltip-points-total { color: #fff; }

.user-tooltip-degree-graduate .user-tooltip-type, .user-tooltip-degree-graduate .user-tooltip-degree, .user-tooltip-degree-graduate .user-tooltip-points-total { color: #ccffdb; }
.inactive { opacity: .5; }

.hidden { display: none; }

.centered { margin: 0 auto; float: none; clear: both; }

.scale-3d-chrome-fix { transform: scale3d(1, 1, 1); }
.mejs-container { background: #2d3339; clear: both; outline: none; }

.fixed-controls.mejs-container { position: relative; }

:not(.mejs-container-fullscreen).mejs-container { width: auto !important; height: auto !important; }

:not(.mejs-container-fullscreen).mejs-container:not(.has-stage-progress) { border-radius: 4px; }

.fixed-controls.connect-to-box:not(.has-stage-progress):not(.mejs-container-fullscreen).mejs-container { border-radius: 4px 4px 0 0; }

.mejs-container * { outline: none; }

.mejs-container .mejs-mediaelement { position: relative; height: auto; width: auto; top: 0; left: 0; right: 0; bottom: 0; transition: padding .25s ease; }

.mejs-container-fullscreen.fixed-controls.mejs-container .mejs-mediaelement { position: absolute; bottom: 60px; }

.mejs-container .mejs-mediaelement video { display: block; margin: 0 auto; object-fit: contain; object-position: center center; height: auto !important; width: 100% !important; }

:not(.mejs-container-fullscreen).mejs-container .mejs-mediaelement video { max-width: 1280px; max-height: 720px; }

:not(.max-width-reached):not(.fixed-controls):not(.mejs-container-fullscreen).mejs-container .mejs-mediaelement video { border-radius: 4px; }

:not(.max-width-reached.padded-when-max-width-reached).fixed-controls:not(.mejs-container-fullscreen).mejs-container .mejs-mediaelement video { border-radius: 4px 4px 0 0; }

.max-width-reached.padded-when-max-width-reached.fixed-controls:not(.mejs-container-fullscreen).mejs-container .mejs-mediaelement video { border-radius: 4px; }

.mejs-container-fullscreen.fixed-controls.mejs-container .mejs-mediaelement video { position: absolute; height: 100% !important; top: 0; left: 0; right: 0; bottom: 0; }

.mejs-container .mejs-overlay, .mejs-container .mejs-layers .mejs-poster { height: auto !important; bottom: 0; z-index: 1; }

.mejs-treehouse-is-playing.mejs-container .mejs-overlay, .mejs-treehouse-is-playing.mejs-container .mejs-layers .mejs-poster { display: none; }

.fixed-controls.mejs-container .mejs-overlay, .fixed-controls.mejs-container .mejs-layers .mejs-poster { bottom: 60px; border-radius: 4px 4px 0 0 !important; }

.mejs-container .mejs-manualoverlay { position: absolute; width: 100%; height: 100%; background-color: rgba(56, 64, 71, 0.8); pointer-events: none; z-index: 1; }

.mejs-container .mejs-manualoverlay .mejs-overlay-button { background: url("/assets/icons/icon-player-9337e1fbafdc2581ecbd85f22c9c9acbe855b380b407c499ac7e396d0ff41bb8.svg") no-repeat !important; margin: -80px 0 0 -50px; }

.mejs-container .mejs-controls { background: rgba(56, 64, 71, 0.98); height: 60px; width: auto; z-index: 100; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 2px 0; }

.no-controls.mejs-container .mejs-controls { display: none !important; }

@media screen and (min-width: 680px) and (max-width: 969px) { .mejs-container .mejs-controls { bottom: 15px; left: 15px; right: 15px; } }

@media screen and (min-width: 970px) { .mejs-container .mejs-controls { bottom: 30px; left: 30px; right: 30px; } }

.fixed-controls.mejs-container .mejs-controls { background: #384047; bottom: 0; left: 0; right: 0; box-shadow: none; }

:not(.mejs-container-fullscreen).fixed-controls.mejs-container .mejs-controls { position: relative; }

:not(.mejs-container-fullscreen).fixed-controls.mejs-container .mejs-controls:not(.connect-to-box) { border-radius: 0 0 4px 4px; }

:not(.mejs-container-fullscreen).fixed-controls.mejs-container .mejs-controls.connect-to-box { border-radius: 0; }

.mejs-container-fullscreen.fixed-controls.mejs-container .mejs-controls { position: fixed; border-radius: 0; }

.mejs-container .mejs-controls div { height: auto; }

.mejs-container .mejs-controls button { border-radius: 0; }

.mejs-container .mejs-controls .mejs-playpause-button { height: 60px; width: 60px; cursor: pointer; border-radius: 5px 0 0 5px; }

.fixed-controls.mejs-container .mejs-controls .mejs-playpause-button { border-radius: 0; }

.mejs-container .mejs-controls .mejs-button { height: 60px; position: relative; width: 38px; overflow: visible !important; }

.mejs-container .mejs-controls .mejs-button:last-child { margin-right: 10px; }

.mejs-container .mejs-controls .mejs-button button { background: none; position: relative; margin: 0; padding: 0 8px; outline: none; border: none; height: 100%; width: 100%; overflow: visible; }

.mejs-container .mejs-controls .mejs-button button svg { top: 0; fill: #a8afb5; }

.mejs-container .mejs-controls .mejs-button button:hover svg { fill: #fff; }

.mejs-container .mejs-controls .mejs-button button:focus { background-color: rgba(0, 0, 0, 0.9); }

.mejs-container .mejs-controls .mejs-button button:focus svg { fill: #fff; }

.mejs-container .mejs-controls .mejs-button.mejs-playpause-button { width: 60px; transition: background 0.3s ease; border-radius: 4px 0 0 4px; }

.mejs-container .mejs-controls .mejs-button.mejs-playpause-button svg { fill: #fff; }

.mejs-container .mejs-controls .mejs-button.mejs-playpause-button:hover svg { fill: #fff; }

.mejs-container .mejs-controls .mejs-button.mejs-playpause-button:focus { background-color: rgba(0, 0, 0, 0.9); }

.mejs-container .mejs-controls .mejs-button.mejs-playpause-button:focus svg { fill: #fff; }

.mejs-container .mejs-controls .mejs-button.mejs-playpause-button:not(:hover) svg { opacity: 0.85; }

.mejs-container .mejs-controls .mejs-button.mejs-pause svg.play-icon { display: none; }

.mejs-container .mejs-controls .mejs-button.mejs-play svg.play-icon { width: 20px; height: 22px; }

.mejs-container .mejs-controls .mejs-button.mejs-play svg.pause-icon { display: none; }

@media screen and (max-width: 679px) { .mejs-container .mejs-controls .mejs-button.mejs-rewind-button { display: none; } }

.simple-controls.mejs-container .mejs-controls .mejs-button.mejs-rewind-button { display: none; }

.mejs-container .mejs-controls .mejs-button.mejs-rewind-button:before, .mejs-container .mejs-controls .mejs-button.mejs-rewind-button:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.mejs-container .mejs-controls .mejs-button.mejs-rewind-button:before { position: absolute; z-index: 1001; content: ""; background: #24292e; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 11px) rotate(45deg); -moz-transform: translate(-50%, 11px) rotate(45deg); -webkit-transform: translate(-50%, 11px) rotate(45deg); transform: translate(-50%, 11px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.mejs-container .mejs-controls .mejs-button.mejs-rewind-button:after { content: "Rewind Video"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #24292e; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 6px); -moz-transform: translate(-50%, 6px); -webkit-transform: translate(-50%, 6px); transform: translate(-50%, 6px); color: #fff; left: 50%; bottom: 100%; }

.mejs-container .mejs-controls .mejs-button.mejs-rewind-button:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 9px) rotate(45deg); -moz-transform: translate(-50%, 9px) rotate(45deg); -webkit-transform: translate(-50%, 9px) rotate(45deg); transform: translate(-50%, 9px) rotate(45deg); }

.mejs-container .mejs-controls .mejs-button.mejs-rewind-button:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 4px); -moz-transform: translate(-50%, 4px); -webkit-transform: translate(-50%, 4px); transform: translate(-50%, 4px); }

.mejs-container .mejs-controls .mejs-button.mejs-rewind-button button svg { top: -2px; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button { width: 38px !important; }

.simple-controls.mejs-container .mejs-controls .mejs-button.mejs-speed-button { display: none; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button:hover .mejs-speed-controls { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 4px); -moz-transform: translate(-50%, 4px); -webkit-transform: translate(-50%, 4px); transform: translate(-50%, 4px); }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls { position: absolute; background: #24292e; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 6px); -moz-transform: translate(-50%, 6px); -webkit-transform: translate(-50%, 6px); transform: translate(-50%, 6px); color: #fff; left: 50%; bottom: 100%; width: 40px; padding: 10px; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls:after { position: absolute; z-index: 1001; content: ""; background: #24292e; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol { margin: 0 !important; padding: 0; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li { list-style: none; margin: 0 !important; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed { background: #384047; font-size: 0; cursor: pointer; width: 20px; height: 20px; position: relative; z-index: 2; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #2e9a4e; }

.topic-ai .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #552b64; }

.topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #005664; }

.topic-data .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #7c3b67; }

.topic-design .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #38326d; }

.topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #552b64; }

.topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #29447c; }

.topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #762d45; }

.topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #225d4d; }

.topic-internal .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #3f474f; }

.topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #00252e; }

.topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #3f474f; }

.topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #2c6ca1; }

.topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #268762; }

.topic-security .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #1983dd; }

.topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #664bb5; }

.topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #3ac162; }

.topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover { background: #db520c; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #5fcf80; }

.topic-ai .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #733A88; }

.topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #008297; }

.topic-data .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #9F4B84; }

.topic-design .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #4a4290; }

.topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #733a88; }

.topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #3659a2; }

.topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #9b3b5a; }

.topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #30826C; }

.topic-internal .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #55616c; }

.topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #004e61; }

.topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #55616c; }

.topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #3887c8; }

.topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #31AF7F; }

.topic-security .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #409BE9; }

.topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #856fc4; }

.topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #5fcf80; }

.topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover ~ .mejs-speed { background: #F36C27; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:first-child { border-radius: 4px 4px 0 0; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:last-child { border-radius: 0 0 4px 4px; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed:hover .speed-tooltip { visibility: visible; opacity: 1; -ms-transform: translate(-20px, -50%); -moz-transform: translate(-20px, -50%); -webkit-transform: translate(-20px, -50%); transform: translate(-20px, -50%); }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed .speed-tooltip { position: absolute; background: #24292e; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-15px, -50%); -moz-transform: translate(-15px, -50%); -webkit-transform: translate(-15px, -50%); transform: translate(-15px, -50%); color: #fff; top: 50%; right: 100%; font-weight: 700; font-size: 14px; line-height: 18px; padding: 10px 15px; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol li.mejs-speed .speed-tooltip:before { position: absolute; z-index: 1001; content: ""; background: #24292e; width: 10px; height: 10px; left: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); top: 50%; border-radius: 0 3px 0 0; }

.mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #5fcf80; }

.topic-ai .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-ai .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #733A88; }

.topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #008297; }

.topic-data .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-data .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #9F4B84; }

.topic-design .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-design .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #4a4290; }

.topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #733a88; }

.topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #3659a2; }

.topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #9b3b5a; }

.topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #30826C; }

.topic-internal .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-internal .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #55616c; }

.topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #004e61; }

.topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #55616c; }

.topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #3887c8; }

.topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #31AF7F; }

.topic-security .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-security .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #409BE9; }

.topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #856fc4; }

.topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #5fcf80; }

.topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed, .topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-speed-button .mejs-speed-controls ol:not(:hover) li.mejs-speed.current-speed ~ .mejs-speed { background: #F36C27; }

.mejs-container .mejs-controls .mejs-button.mejs-captions-button:hover .mejs-captions-selector { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 4px); -moz-transform: translate(-50%, 4px); -webkit-transform: translate(-50%, 4px); transform: translate(-50%, 4px); }

.mejs-container .mejs-controls .mejs-button.mejs-captions-button .mejs-captions-selector { position: absolute; background: #24292e; text-align: center; padding: 10px 15px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 6px); -moz-transform: translate(-50%, 6px); -webkit-transform: translate(-50%, 6px); transform: translate(-50%, 6px); color: #fff; left: 50%; bottom: 100%; border: none; width: 130px; height: auto !important; overflow: visible; }

.mejs-container .mejs-controls .mejs-button.mejs-captions-button .mejs-captions-selector:after { position: absolute; z-index: 1001; content: ""; background: #24292e; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.mejs-container .mejs-controls .mejs-button.mejs-captions-button .mejs-captions-selector li { padding: 5px 0; margin: 0; text-align: left; }

.mejs-container .mejs-controls .mejs-button.mejs-captions-button .mejs-captions-selector li label { font: 700 14px/20px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b363e; padding: 0 0 0 8px; cursor: pointer; }

.mejs-container .mejs-controls .mejs-button.mejs-captions-button .mejs-captions-selector li label:hover { color: #fff; }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button button { overflow: hidden; }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button.mejs-unmute button { width: 20px; }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button:hover .mejs-volume-slider { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 4px); -moz-transform: translate(-50%, 4px); -webkit-transform: translate(-50%, 4px); transform: translate(-50%, 4px); }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-slider { position: absolute; background: #24292e; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 6px); -moz-transform: translate(-50%, 6px); -webkit-transform: translate(-50%, 6px); transform: translate(-50%, 6px); color: #fff; left: 50%; bottom: 100%; display: block !important; width: 40px; height: 130px; padding: 10px; padding: 10px; overflow: visible; top: auto; }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-slider:after { position: absolute; z-index: 1001; content: ""; background: #24292e; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-total, .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { width: 20px; left: auto; float: none; border-radius: 3px; }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-total { position: absolute; left: 10px; bottom: 10px; right: 10px; top: 10px; height: auto; background: #384047; }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #5fcf80; top: auto !important; bottom: 10px; border-radius: 3px; }

.topic-ai .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #733A88; }

.topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #008297; }

.topic-data .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #9F4B84; }

.topic-design .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #4a4290; }

.topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #733a88; }

.topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #3659a2; }

.topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #9b3b5a; }

.topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #30826C; }

.topic-internal .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #55616c; }

.topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #004e61; }

.topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #55616c; }

.topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #3887c8; }

.topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #31AF7F; }

.topic-security .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #409BE9; }

.topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #856fc4; }

.topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #5fcf80; }

.topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-current { background: #F36C27; }

.mejs-container .mejs-controls .mejs-button.mejs-volume-button .mejs-volume-handle { left: auto; width: 20px; background: transparent; }

.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button { width: 34px; }

.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:before, .mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:before { position: absolute; z-index: 1001; content: ""; background: #24292e; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 11px) rotate(45deg); -moz-transform: translate(-50%, 11px) rotate(45deg); -webkit-transform: translate(-50%, 11px) rotate(45deg); transform: translate(-50%, 11px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:after { content: "Fullscreen"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #24292e; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 6px); -moz-transform: translate(-50%, 6px); -webkit-transform: translate(-50%, 6px); transform: translate(-50%, 6px); color: #fff; left: 50%; bottom: 100%; }

.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 9px) rotate(45deg); -moz-transform: translate(-50%, 9px) rotate(45deg); -webkit-transform: translate(-50%, 9px) rotate(45deg); transform: translate(-50%, 9px) rotate(45deg); }

.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 4px); -moz-transform: translate(-50%, 4px); -webkit-transform: translate(-50%, 4px); transform: translate(-50%, 4px); }

.mejs-container-fullscreen.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:after { content: "Exit Fullscreen"; white-space: normal; }

.mejs-container-fullscreen.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:last-child:after { left: 0; }

.mejs-container-fullscreen.fixed-controls.mejs-container .mejs-controls .mejs-button.mejs-fullscreen-button:last-child:after { left: -20px; }

.mejs-container .mejs-controls .mejs-button.mejs-workspaces-button, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button { width: auto; border-left: 2px solid #31383e; margin: 0 0 0 12px; }

.mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #5fcf80; stroke: #5fcf80; }

.topic-ai .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-ai .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #733A88; }

.topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #008297; }

.topic-data .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-data .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #9F4B84; }

.topic-design .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-design .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #4a4290; }

.topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #733a88; }

.topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #3659a2; }

.topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #9b3b5a; }

.topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #30826C; }

.topic-internal .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-internal .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #55616c; }

.topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #004e61; }

.topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #55616c; }

.topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #3887c8; }

.topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #31AF7F; }

.topic-security .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-security .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #409BE9; }

.topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #856fc4; }

.topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #5fcf80; }

.topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { fill: #F36C27; }

.topic-ai .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-ai .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #733A88; }

.topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #008297; }

.topic-data .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-data .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #9F4B84; }

.topic-design .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-design .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #4a4290; }

.topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #733a88; }

.topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #3659a2; }

.topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #9b3b5a; }

.topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #30826C; }

.topic-internal .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-internal .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #55616c; }

.topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #004e61; }

.topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #55616c; }

.topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #3887c8; }

.topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #31AF7F; }

.topic-security .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-security .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #409BE9; }

.topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #856fc4; }

.topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #5fcf80; }

.topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button:not(:hover) .button svg, .topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button:not(:hover) .button svg { stroke: #F36C27; }

.mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { width: auto; padding: 0 20px; font-size: 14px; color: #5fcf80; -webkit-animation: pulsate-opacity-to-65 1.05s linear 0s 8 alternate; -moz-animation: pulsate-opacity-to-65 1.05s linear 0s 8 alternate; animation: pulsate-opacity-to-65 1.05s linear 0s 8 alternate; }

.mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button.loading, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button.loading { -webkit-animation: loading 2s infinite; -moz-animation: loading 2s infinite; animation: loading 2s infinite; }

.topic-ai .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-ai .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #85439d; }

.topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-back-end .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #009cb6; }

.topic-data .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-data .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #b05894; }

.topic-design .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-design .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #554ca5; }

.topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-experimental .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #85439d; }

.topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-front-end .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #3e66b9; }

.topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-fundamentals .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #b14367; }

.topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-mobile .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #38987f; }

.topic-internal .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-internal .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #62707d; }

.topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-foundations .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #006780; }

.topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-undefined .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #62707d; }

.topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-college-credit .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #5095cf; }

.topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-no-code .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #38c790; }

.topic-security .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-security .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #5ba9ec; }

.topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-game-development .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #9785cd; }

.topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-treehouse-resources .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #77d693; }

.topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button, .topic-coding-for-kids .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button { color: #f58044; }

.mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button span, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button span { display: none; }

@media screen and (min-width: 840px) { .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button span, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button span { display: inline-block; } }

.mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button svg, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button svg { margin-right: 0; margin-left: 9px; }

@media screen and (min-width: 840px) { .mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button svg, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button svg { margin-right: 9px; } }

.mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button:hover, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button:hover { color: #fff; }

.mejs-container .mejs-controls .mejs-button.mejs-workspaces-button .button:hover svg, .mejs-container .mejs-controls .mejs-button.mejs-sql-playground-button .button:hover svg { fill: #fff; stroke: #fff; }

.mejs-container .mejs-controls .mejs-time { height: 60px; box-sizing: border-box; }

@media screen and (max-width: 679px) { .mejs-container .mejs-controls .mejs-time { display: none; } }

.mejs-container .mejs-controls .mejs-time.mejs-currenttime-container { width: 64px; padding: 0 0 0 15px; }

.mejs-container .mejs-controls .mejs-time.mejs-duration-container { width: 70px; padding: 0 40px 0 10px; }

.mejs-container .mejs-controls .mejs-time.long-duration { width: 80px; padding-left: 10px; }

.mejs-container .mejs-controls .mejs-time .mejs-currenttime, .mejs-container .mejs-controls .mejs-time .mejs-duration { font: 13px/60px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #a8afb5; margin: 0; }

.mejs-container .mejs-controls .mejs-time-rail { padding: 23px 0 0; height: 100%; }

@media screen and (max-width: 679px) { .mejs-container .mejs-controls .mejs-time-rail { margin: 0 10px; } }

.mejs-container .mejs-controls .mejs-time-rail span { height: auto; border-radius: none; }

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded { display: none; }

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-total, .mejs-container .mejs-controls .mejs-time-rail .mejs-time-handle, .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current, .mejs-container .mejs-controls .mejs-time-rail .mejs-time-buffering { background: #171a1d; height: 14px; border-radius: 14px; }

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #5fcf80; border: 3px solid black; transition: width 0.15s ease; }

.topic-ai .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #733A88; }

.topic-back-end .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #008297; }

.topic-data .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #9F4B84; }

.topic-design .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #4a4290; }

.topic-experimental .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #733a88; }

.topic-front-end .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #3659a2; }

.topic-fundamentals .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #9b3b5a; }

.topic-mobile .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #30826C; }

.topic-internal .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #55616c; }

.topic-foundations .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #004e61; }

.topic-undefined .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #55616c; }

.topic-college-credit .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #3887c8; }

.topic-no-code .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #31AF7F; }

.topic-security .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #409BE9; }

.topic-game-development .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #856fc4; }

.topic-treehouse-resources .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #5fcf80; }

.topic-coding-for-kids .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #F36C27; }

.mejs-container .mejs-controls .mejs-time-rail:hover .mejs-time-float { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; background: #24292e; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 6px); -moz-transform: translate(-50%, 6px); -webkit-transform: translate(-50%, 6px); transform: translate(-50%, 6px); color: #fff; left: 50%; bottom: 100%; padding-left: 20px; padding-right: 20px; top: auto; width: auto; border: none; margin: 0; }

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float-current { font: 700 14px/18px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; position: relative; width: auto; display: inline; color: #fff; }

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float-corner { position: absolute; z-index: 1001; content: ""; background: #24292e; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; border: none; }

.mejs-container .mejs-controls .mejs-time-total { margin: 0; background: #000; }

.mejs-captions-layer { left: 0; right: 0; z-index: 99; bottom: 60px; }

.mejs-captions-layer .mejs-captions-position { width: auto; }

@media screen and (min-width: 680px) { .mejs-captions-layer .mejs-captions-position { bottom: 15px; left: 30px; right: 30px; } }

@media screen and (max-width: 679px) { .mejs-captions-layer .mejs-captions-position { left: 20px; right: 20px; bottom: 10px; } }

.mejs-captions-layer .mejs-captions-text { padding: 10px; background: rgba(0, 0, 0, 0.85); color: #fff; border: none; line-height: 1.45; display: inline-block; box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px 5px; border-radius: 4px; }

.mejs-captions-layer .mejs-captions-text:hover { cursor: move; cursor: -webkit-grab; }

.mejs-captions-layer .mejs-captions-text:active { cursor: -webkit-grabbing; }

@media screen and (min-width: 970px) { .mejs-captions-layer .mejs-captions-text { font-size: 18px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .mejs-captions-layer .mejs-captions-text { font-size: 16px; } }

@media screen and (max-width: 679px) { .mejs-captions-layer .mejs-captions-text { font-size: 14px; } }

.mejs-overlay { height: auto !important; width: auto !important; top: 0; left: 0; bottom: 0; right: 0; }

div.mejs-container:not(.mejs-treehouse-is-paused) .mejs-overlay { border-radius: 4px; background: rgba(0, 0, 0, 0.25); }

.mejs-overlay:hover .mejs-overlay-button { background: url("/assets/icons/icon-player-9337e1fbafdc2581ecbd85f22c9c9acbe855b380b407c499ac7e396d0ff41bb8.svg") no-repeat; }

.mejs-overlay .mejs-overlay-button { background: url("/assets/icons/icon-player-9337e1fbafdc2581ecbd85f22c9c9acbe855b380b407c499ac7e396d0ff41bb8.svg") no-repeat; width: 100px; height: 100px; margin-top: -50px !important; }

.mejs-overlay .mejs-overlay-loading { background: none; width: 100px; height: 100px; margin: -50px 0 0 -50px; transform-origin: center center; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; }

.mejs-overlay .mejs-overlay-loading span { background: url("/assets/icons/icon-player-9337e1fbafdc2581ecbd85f22c9c9acbe855b380b407c499ac7e396d0ff41bb8.svg") no-repeat -122px -23px; width: 118px; height: 100px; margin-left: -18px; }

@media screen and (min-width: 680px) { .mejs-treehouse-is-paused .mejs-overlay-play .mejs-overlay-button { display: none; } }

@media screen and (max-width: 679px) { .mejs-treehouse-is-paused .mejs-overlay-play .mejs-overlay-button { display: block !important; } }
.pine-body { background-color: #f9fafa; padding: 1.5rem; }
.pine-box { padding: 1.5rem; background: #fff; border: 1px solid #d4d9dd; border-radius: 4px; }
.with-arrow { display: flex; width: 100%; margin-top: 1.5rem; background-color: #f9fafa; border: solid 2px #f9fafa; color: #101417 !important; }

.with-arrow:hover, .with-arrow:focus { color: #326e99 !important; border: solid 2px #f9fafa !important; }

.with-arrow:hover svg, .with-arrow:focus svg { transform: translateX(5px); fill: #326e99 !important; }

.with-arrow svg { align-self: center; height: 20px; margin-left: auto; fill: #8e969d !important; }
table.pine-table { border-collapse: separate; background-color: #fff; border: solid 1px #d4d9dd; border-radius: 4px; }

table.pine-table th, table.pine-table td { padding: 2rem; vertical-align: middle; }

@media screen and (max-width: 1280px) { table.pine-table th, table.pine-table td { padding: 1rem; } }

table.pine-table th { color: #2b363e; font-weight: 700; border-bottom: 1px solid #d4d9dd; text-align: left; }

table.pine-table td { border-bottom: 1px solid #f0f2f4; }

table.pine-table td a:not(.alert):hover { color: #3f8abf !important; }

table.pine-table-stacked { border-collapse: separate; background-color: #fff; }

table.pine-table-stacked th, table.pine-table-stacked td { padding: 2rem; vertical-align: middle; }

@media screen and (max-width: 1280px) { table.pine-table-stacked th, table.pine-table-stacked td { padding: 1rem; } }

table.pine-table-stacked th { color: #1a2126; font-weight: 700; }

table.pine-table-stacked td { border-bottom: 1px solid #f0f2f4; }

table.pine-table-stacked td a:hover { color: #3f8abf !important; }

table.pine-table-stacked-top { border: solid 1px #d4d9dd; border-top-left-radius: 4px; border-top-right-radius: 4px; table-layout: fixed; }

table.pine-table-stacked-top th { padding: 2rem 2rem 0 2rem; border-right: solid 1px #f0f2f4; text-align: center; vertical-align: top; }

@media screen and (max-width: 1280px) { table.pine-table-stacked-top th { padding: 1rem 1rem 0 1rem; } }

table.pine-table-stacked-top th p { margin-bottom: 0rem; color: #2b363e; font-size: 1rem; }

table.pine-table-stacked-top td { padding: 0 2rem 2rem 2rem; vertical-align: top; border-right: solid 1px #f0f2f4; text-align: center; }

@media screen and (max-width: 1280px) { table.pine-table-stacked-top td { padding: 0 1rem 1rem 1rem; } }

table.pine-table-stacked-top td p { font-size: 2.25rem; font-weight: 700; color: #050708; margin-bottom: 0rem; }

@media screen and (max-width: 1280px) { table.pine-table-stacked-top td { padding: 1rem; } }

@media screen and (max-width: 969px) { table.pine-table-stacked-top td:before { padding: 10px !important; text-align: left; } }

table.pine-table-stacked-bottom { border-bottom: solid 1px #d4d9dd; border-left: solid 1px #d4d9dd; border-right: solid 1px #d4d9dd; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }

table.pine-table-stacked-bottom th { text-align: left; border-bottom: 1px solid #d4d9dd; }

@media screen and (max-width: 969px) { table.pine-table-stacked-bottom th { display: none; } }

table.pine-table-stacked-bottom td p { margin: 0rem; color: #1a2126; }

table.pine-table, table.pine-table-stacked { width: 100%; }

@media screen and (max-width: 969px) { table.pine-table, table.pine-table-stacked { table-layout: fixed; } }

@media screen and (max-width: 679px) { table.pine-table, table.pine-table-stacked { display: block; overflow: hidden; } }

@media screen and (max-width: 969px) { table.pine-table thead, table.pine-table-stacked thead { display: block; } }

@media screen and (max-width: 969px) { table.pine-table thead tr, table.pine-table-stacked thead tr { position: absolute; top: -9999px; left: -9999px; } }

@media screen and (max-width: 969px) { table.pine-table tbody, table.pine-table-stacked tbody { display: block; } }

@media screen and (max-width: 969px) { table.pine-table tr, table.pine-table-stacked tr { display: block; } }

@media screen and (max-width: 969px) { table.pine-table tr:nth-child(even), table.pine-table-stacked tr:nth-child(even) { background: #f9fafa; } }

@media screen and (max-width: 969px) { table.pine-table th, table.pine-table td, table.pine-table-stacked th, table.pine-table-stacked td { display: block; } }

@media screen and (max-width: 969px) { table.pine-table td, table.pine-table-stacked td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50% !important; } }

@media screen and (max-width: 969px) { table.pine-table td:before, table.pine-table-stacked td:before { position: absolute; top: 0; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; font-weight: 500; padding: 1rem; content: attr(data-name); } }
/* Pine Theme */
/* Pine Theme */
html { overflow-x: hidden; }

body { font: 14px/24px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; background: #edeff0; color: #1a2126; -webkit-font-smoothing: antialiased; transition: padding-top 600ms 0s ease; }

@media screen and (max-width: 679px) { body { padding-top: 50px; } }

@media screen and (min-width: 680px) { body { padding-top: 70px; } }

ul { list-style: none; }

a { cursor: pointer; text-decoration: none; }

.margin-max { margin-top: 90px; }

@media screen and (min-width: 960px) { .margin-max { margin-top: 150px; } }

.margin-mid { margin-top: 70px; }

@media screen and (min-width: 960px) { .margin-mid { margin-top: 110px; } }

.margin-min { margin-top: 50px; }

@media screen and (min-width: 960px) { .margin-min { margin-top: 70px; } }
header.header { text-align: center; }

header.header h1 { font-size: 40px; margin: 0; }

.has-sticky-subnav { position: relative; z-index: 2; }

.dropdown { background: #f9fafa; min-width: 200px; max-width: 420px; position: absolute; top: 50px; display: none; z-index: 100; border-radius: 5px; text-align: left; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.08); }

.dropdown-show .dropdown { display: block; }

.dropdown:before { position: absolute; content: ""; background: #fff; width: 12px; height: 12px; border-radius: 3px 0 0 0; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.08); top: -6px; }

.dropdown.left, .dropdown-left { left: 0; }

.dropdown.left:before, .dropdown-left:before { left: 20px; }

.dropdown.right, .dropdown-right { right: -20px; }

.dropdown.right:before, .dropdown-right:before { right: 20px; }

.dropdown .dropdown-title { display: block; background: #fff; font-size: 16px; line-height: 20px; position: relative; z-index: 1; border-bottom: 1px solid #e8ebed; border-radius: 5px 5px 0 0; margin: 0; }

.dropdown .dropdown-title a { display: block; padding: 15px 20px; color: #101417; }

.dropdown .dropdown-title a:hover { color: black; }

.dropdown > ul { margin: 0; background: #f9fafa; }

.dropdown > ul > li { list-style: none; border: 0 solid #f0f2f4; border-width: 0 0 1px; font-weight: 400; margin: 0; transition: background-color 0.3s ease, border-color 0.3s ease; }

.dropdown > ul > li:last-child { border-bottom: none; }

.dropdown > ul > li:not(.without-hover):hover { background: #fff; border-color: #e8ebed; }

.dropdown > ul > li:not(.without-hover):hover > a { color: #101417; }

.dropdown > ul > li:not(.without-hover):hover > a svg { fill: #1a2126; }

.dropdown > ul > li > a { position: relative; display: block; padding: 15px 20px; font-size: 14px; line-height: 18px; font-weight: 700; color: #1a2126; transition: background-color 0.3s ease, color 0.3s ease; }

.dropdown > ul > li > a:before, .dropdown > ul > li > a:after { content: " "; display: table; }

.dropdown > ul > li > a:after { clear: both; }

.dropdown > ul > li > a > svg { fill: #2b363e; }

.dropdown .empty { padding: 60px 20px; margin: 0; font-size: 14px; color: #2b363e; text-align: center; }

.dropdown .empty .button { margin: 15px 40px; display: block; }

.dropdown .dropdown-secondary { position: relative; display: block; padding: 15px 20px; font-size: 14px; line-height: 18px; font-weight: 700; color: #1a2126; transition: background-color 0.3s ease, color 0.3s ease; border-radius: 0 0 5px 5px; background: #fff; border-top: 1px solid #e8ebed; }

.dropdown .dropdown-secondary:before, .dropdown .dropdown-secondary:after { content: " "; display: table; }

.dropdown .dropdown-secondary:after { clear: both; }

.dropdown .dropdown-secondary > svg { fill: #2b363e; }

.dropdown .dropdown-secondary:hover { background: #edeff0; color: #101417; }

body { transition: padding 600ms 0s ease; }

.header-nav-item-profile-dropdown { top: 96%; right: -90px; max-width: 200px; }

body { padding-top: 0 !important; }

.nav { z-index: 1 !important; box-shadow: none !important; position: static !important; }

.nav22-override { z-index: 9 !important; position: absolute !important; box-shadow: none !important; }

@media screen and (max-width: 970px) { .signin22-wrapper #signout22 { right: 30px !important; top: -2px !important; } }

@media screen and (max-width: 679px) { .signin22-wrapper #signout22 { top: -3px !important; right: -100px !important; } }

@media screen and (max-width: 970px) { .signin22-wrapper { display: block !important; } }

@media screen and (max-width: 679px) { .nav22-mobile-override { right: 10px !important; } }

.nav { display: flex; align-items: center; background: #fff; box-shadow: 0 0 1px rgba(0, 65, 94, 0.2); z-index: 102; transition: height 600ms 0s ease; position: fixed; top: 0; right: 0; left: 0; }

@media screen and (max-width: 679px) { .nav { height: 50px; } }

@media screen and (min-width: 680px) { .nav { height: 70px; } }

@media screen and (max-width: 969px) { .hamburger-button-clicked .nav { bottom: 0; height: 100%; overflow-y: auto; } }

@media screen and (max-width: 679px) { .nav { display: flex; flex-wrap: wrap; align-content: space-between; } }

@media screen and (max-width: 969px) { .hamburger-button-clicked .nav { height: 100vh; align-items: start; } }

.nav-container { padding-top: 0; padding-bottom: 0; width: 100%; position: relative; max-width: 1260px; margin: 0 auto; height: 70px; display: flex; }

@media screen and (max-width: 969px) { .nav-container { padding: 30px; } }

@media screen and (max-width: 679px) { .nav-container { padding: 0 15px; } }

@media screen and (max-width: 969px) { .nav-container { flex-wrap: wrap; padding: 0 !important; }
  .hamburger-button-clicked .nav-container { height: 94vh; } }

.nav-container-2022 { padding-top: 0; padding-bottom: 0; width: 100%; position: relative; max-width: 1400px; margin: 0 auto; }

@media screen and (max-width: 969px) { .nav-container-2022 { padding: 30px; } }

@media screen and (max-width: 679px) { .nav-container-2022 { padding: 0 15px; } }

.nav-list { list-style: none; position: relative; width: 100%; margin: 0 auto; text-align: right; overflow: visible; padding-left: 0; position: inherit; }

@media screen and (max-width: 969px) { .nav-list { text-align: left; } }

.nav-list:before, .nav-list:after { content: " "; display: table; }

.nav-list:after { clear: both; }

@media screen and (max-width: 679px) { .hamburger-button-clicked .nav-list { padding-top: 50px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .hamburger-button-clicked .nav-list { padding-top: 70px; } }

.nav-list:before, .nav-list:after { content: " "; display: table; }

.nav-list:after { clear: both; }

@media screen and (max-width: 969px) { .nav-list { padding: 0 15px; }
  .hamburger-button-clicked .nav-list { min-height: 91vh; } }

@media screen and (max-width: 679px) { .nav-list { text-align: left; } }

.nav-list-2022 { list-style: none; position: relative; width: 100%; margin: 0 auto; text-align: left; padding-left: 9em; cursor: default; }

@media screen and (max-width: 969px) { .nav-list-2022 { text-align: right; } }

.nav-list-2022:before, .nav-list-2022:after { content: " "; display: table; }

.nav-list-2022:after { clear: both; }

@media screen and (max-width: 679px) { .hamburger-button-clicked .nav-list-2022 { padding-top: 50px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .hamburger-button-clicked .nav-list-2022 { padding-top: 70px; } }

.nav-list-2022:before, .nav-list-2022:after { content: " "; display: table; }

.nav-list-2022:after { clear: both; }

@media screen and (min-width: 1300px) { .nav-list-2022 { margin-left: 30px; } }

@media screen and (max-width: 970px) { .nav-list-2022 { padding-left: 0; margin-left: 0; } }

@media screen and (max-width: 679px) { .nav-list-2022 { text-align: left; } }

.nav-block-2022 { margin: 0 0 0 15px; }

.nav-item { font-weight: 700; line-height: 30px; font-size: 14px; display: inline-block; }

@media screen and (max-width: 679px) { .nav-item { line-height: 50px; } }

@media screen and (min-width: 680px) { .nav-item { line-height: 70px; } }

@media screen and (min-width: 970px) { .nav-item { margin: 0 30px 0 0; } }

@media screen and (min-width: 970px) { .nav-item { margin: 0 10px; } }

.nav-item-secondary { transition: opacity 200ms 0s ease; }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-secondary { opacity: 1; } }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-secondary { right: 30px; } }

@media screen and (max-width: 969px) { .nav-item-tablet { display: none; min-width: 200px; line-height: 40px; font-size: 18px; }
  .hamburger-button-clicked .nav-item-tablet { display: block; } }

.nav-item-tablet.nav-item-show-on-mobile { border-bottom: 2px solid #d4d9dd; }

.nav-item-show-on-mobile { display: none; }

@media screen and (max-width: 969px) { .nav-item-show-on-mobile { display: block; display: none; min-width: 200px; line-height: 40px; font-size: 18px; border-bottom: 2px solid #d4d9dd; }
  .hamburger-button-clicked .nav-item-show-on-mobile { display: block; } }

.nav-item-show-on-mobile-container { float: right; height: 70px; display: flex; align-items: center; justify-content: center; }

.nav-item-show-on-mobile-container .toggle-steps { padding: 0; margin: 0; }

.nav-item-show-on-mobile .nav-link { color: #3b3b3b; font-size: 16px; font-weight: 400; display: inline-block; }

.nav-item .toggle-steps-hide { display: none; }

.nav-item-mobile .current a { color: #303853; border-bottom: 2px solid #b7c0c7; padding-bottom: 2px; }

.nav-item-submenu { font-size: 1rem; line-height: 40px; padding-left: 15px; padding-bottom: 1rem; margin: 0; }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { margin-top: 12px; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { position: absolute; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { top: 0; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { right: 60px; } }

@media screen and (max-width: 380px) { .nav-item-cta { right: 52px; } }

.nav-item-logo { transition: top 600ms 0s ease; }

@media screen and (min-width: 970px) { .nav-item-logo { position: absolute; left: 0; position: absolute; top: 17px; } }

@media screen and (max-width: 969px) { .nav-item-logo { width: 30px; height: 32px; position: absolute; top: -8px; } }

@media screen and (max-width: 680px) { .nav-item-logo { position: absolute; top: 9px; } }

@media screen and (min-width: 679px) { .nav-item-logo { margin-top: 24px; } }

@media screen and (min-width: 970px) { .nav-item-logo { margin-top: 0; } }

.nav-item-logo-container { margin: 0; position: relative; width: 100%; height: 100%; line-height: 1.3; }

.nav-item-logo-icon { display: block; }

@media screen and (max-width: 380px) { .nav-item-logo-icon { max-width: 110px; margin-top: 5px; } }

.nav-item-logo-icon .icon-treehouse { fill: #3e474f; }

.nav-item-logo-icon .icon-logo { fill: #5fcf80; }

.nav-item:hover .nav-item-logo-icon .icon-treehouse { fill: #282d32; }

.nav-item:hover .nav-item-logo-icon .icon-logo { fill: #3ac162; }

@media screen and (max-width: 969px) { .nav-item-free-trial { margin-top: 19px !important; } }

@media screen and (max-width: 679px) { .nav-item-free-trial { margin-top: 10px !important; } }

@media screen and (max-width: 969px) { .nav-item-sign-in { position: absolute; } }

@media screen and (max-width: 969px) { .nav-item-sign-in { top: 18px !important; } }

@media screen and (max-width: 679px) { .nav-item-sign-in { right: 40px; } }

.nav-item-sign-in-secondary { transition: opacity 200ms 0s ease; }

@media screen and (min-width: 680px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-secondary { opacity: 1; } }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-secondary { right: 30px; } }

@media screen and (max-width: 679px) { .visitor .nav-item-sign-in { top: 12px !important; } }

@media screen and (max-width: 969px) { .visitor .nav-item-sign-in { top: -7px; } }

@media screen and (max-width: 969px) { .visitor .nav-item-sign-in { right: 10px; } }

@media screen and (max-width: 380px) { .visitor .nav-item-sign-in { right: 0; left: 47%; }
  .visitor .nav-item-sign-in a { font-size: 12px; } }

.logged-in .nav-item-sign-in { right: -80px; display: inline-block !important; }

.nav-item-sign-in-2022 { position: absolute; z-index: 11; top: -145px; right: 180px; font-size: 1rem; color: #fff; }

@media screen and (max-width: 969px) { .nav-item-sign-in-2022 { position: absolute; } }

@media screen and (max-width: 969px) { .nav-item-sign-in-2022 { top: 0; } }

@media screen and (max-width: 969px) { .nav-item-sign-in-2022 { right: 97px; } }

.nav-item-sign-in-2022-secondary { transition: opacity 200ms 0s ease; }

@media screen and (min-width: 680px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-2022-secondary { opacity: 1; } }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-2022-secondary { right: 30px; } }

@media screen and (max-width: 679px) { .visitor .nav-item-sign-in-2022 { top: 7px !important; } }

@media screen and (max-width: 969px) { .visitor .nav-item-sign-in-2022 { top: -7px; } }

@media screen and (max-width: 969px) { .visitor .nav-item-sign-in-2022 { right: 10px; } }

.logged-in .nav-item-sign-in-2022 { right: -80px; display: inline-block !important; }

.nav-item-sign-in-2022 a:hover { color: #edba36 !important; }

.nav .current .nav-toggle { border-bottom: 4px solid #cccccc; }

.nav-block { display: inline-block; }

@media screen and (min-width: 970px) { .nav-block { float: left; margin-left: 15%; } }

@media screen and (max-width: 969px) { .nav-block { width: 100%; } }

.nav-block-mobile-tablet { display: none; }

@media screen and (max-width: 969px) { .nav-block-mobile-tablet { display: none; min-width: 200px; margin: 0 auto; clear: both; line-height: 40px; top: 200px; }
  .hamburger-button-clicked .nav-block-mobile-tablet { display: block; } }

@media screen and (max-width: 969px) { .nav-block-hide-on-mobile { display: none; } }

.nav-social { padding: 1rem 0; text-align: center; width: 100%; background-color: #2d3339; }

@media screen and (max-width: 969px) { .hamburger-button-clicked .nav-social { display: flex !important; align-items: center; justify-content: center; gap: 20px; } }

.nav-social svg { fill: #fff; }

.nav-social-link { display: flex; }

.nav-link, .nav a { color: #387bab; transition: color 300ms 0s ease; font-weight: 700; }

.nav-link:hover, .nav-link:active, .nav-link:focus, .nav a:hover, .nav a:active, .nav a:focus { color: #2a5d81; }

.nav-link-2022, .nav a { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #3b3b3b; transition: color 300ms 0s ease; font-weight: 300; font-size: 1rem; }

.nav-link-2022:hover, .nav-link-2022:active, .nav-link-2022:focus, .nav a:hover, .nav a:active, .nav a:focus { color: #3b3b3b; }

.nav-link-2022-w, .nav a-w { color: #fff !important; }

.nav-link-2022:not(.nav-link-sign-in):hover, .nav a:not(.nav-link-sign-in):hover { background-color: #F0F0F0; }

.nav-link { position: relative; }

@media screen and (max-width: 969px) { .nav-link { display: block; } }

@media screen and (min-width: 970px) { .nav-link { display: inline-block; } }

@media screen and (max-width: 969px) { .nav-link:not(.nav-link-sign-in):not(.nav-link-sign-out):not(.nav-link-logo):not(.nav-link-free-trial) { margin: 1rem 15px; } }

.current .nav-link { color: #303853; }

.current .nav-link::after { content: ''; position: absolute; width: 100%; height: 0; left: 0; bottom: 21px; border-bottom: 4px solid #cccccc; }

@media screen and (max-width: 969px) { .current .nav-link::after { bottom: 6px; } }

.nav-link.button:not(.button--primary-ubora) { font-size: 12px; height: 30px; line-height: 26px; padding: 0 10px; background: #008298; background: linear-gradient(to bottom, #008298 0%, #007589 100%); border-color: transparent; color: #fff !important; }

@media screen and (max-width: 380px) { .nav-link.button:not(.button--primary-ubora) { padding: 0 5px; } }

.nav-link.button:not(.button--primary-ubora):hover, .nav-link.button:not(.button--primary-ubora):active, .nav-link.button:not(.button--primary-ubora):focus { background: linear-gradient(#004652, #004652); border-color: transparent !important; color: #fff !important; }

.nav-link-sign-in:hover, .nav-link-sign-out:hover { color: #0e8397 !important; }

@media screen and (max-width: 969px) { .nav-link-sign-in, .nav-link-sign-out { line-height: 30px; font-size: 14px; } }

.nav-link-learn::after { content: ''; position: relative; display: inline-block; margin-left: 4px; top: -1px; width: 12px; height: 7px; background-size: auto; background-repeat: no-repeat; background-position: center; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2010%22%3E%0D%0A%09%3Cpath%20fill%3D%22%237b8b8e%22%20d%3D%22M9.5%2C9.5c-0.4%2C0-0.7-0.1-1-0.4L2%2C3.1C1.4%2C2.5%2C1.3%2C1.6%2C1.9%2C1C2.5%2C0.4%2C3.4%2C0.3%2C4%2C0.9L9.5%2C6L15%2C0.9%0D%0A%09%09c0.6-0.6%2C1.6-0.5%2C2.1%2C0.1c0.6%2C0.6%2C0.5%2C1.6-0.1%2C2.1l-6.5%2C6C10.2%2C9.4%2C9.9%2C9.5%2C9.5%2C9.5z%22%2F%3E%0D%0A%3C%2Fsvg%3E"); }

.nav .nav-dropdown { position: relative; }

.nav .nav-dropdown.active .nav-toggle { border-bottom: 4px solid #53b16b; }

.nav .nav-dropdown-menu { display: none; position: absolute; padding-block: 10px; top: 75px; left: 0; z-index: 999; background: #fff; border: 2px solid #cccccc; }

.nav .nav-dropdown.active .nav-dropdown-menu { display: flex; flex-direction: column; text-align: left; white-space: nowrap; }

.nav .nav-dropdown-menu a { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 40px; padding-inline: 24px; }

.nav .nav-dropdown-menu a:hover { background: #F0F0F0; }

.nav .nav-toggle { font-size: 16px; line-height: 30px; border: none; background: #fff; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; }

.toggle-steps { display: block; font-weight: 500; cursor: pointer; }

.toggle-steps:not(.nav-link) { font-size: 1.5rem; color: #4b5658; padding-bottom: 1.5rem; margin-bottom: 1rem; }

.toggle-steps:not(.nav-link) .marketing-layout, .marketing-2020-layout .toggle-steps:not(.nav-link) { border-bottom: 2px solid #d4d9dd; }

@media screen and (max-width: 969px) { .toggle-steps.nav-link { color: #0098b1; border-bottom: 2px solid #d4d9dd; } }

.toggle-steps.nav-link .toggle-steps-view-chevron { cursor: pointer; }

@media screen and (min-width: 969px) { .toggle-steps.nav-link .toggle-steps-view-chevron { display: none; } }

.toggle-steps-view { display: flex; align-items: center; }

.toggle-steps-view-2 { justify-content: space-between; }

.toggle-steps-view-minusplus:after { content: '+'; position: relative; margin-left: auto; padding: 0.5rem; border-radius: 50%; height: 40px; min-width: 34px; color: #0e8397; font-weight: 700; }

.toggle-steps-view-plusminus:after { content: '+'; position: relative; margin-left: auto; padding: 0.5rem; border-radius: 50%; height: 40px; min-width: 34px; color: #0e8397; font-weight: 700; }

.toggle-steps-view-chevron { position: relative; margin-left: auto; background-color: #0098b1; padding: 1rem; border-radius: 50%; height: 40px; min-width: 40px; }

.toggle-steps-view-chevron svg { fill: white; position: absolute; top: 17px; left: 14px; }

.toggle-steps.selected .chevron-icon { transform: rotate(180deg); }

.toggle-steps.selected-2 .toggle-steps-view-minusplus:after { content: "-"; position: relative; margin-left: auto; padding: 0.5rem; border-radius: 50%; height: 40px; min-width: 34px; color: #0e8397; font-weight: 700; }

.toggle-steps.selected-2 .toggle-steps-view-plusminus:after { content: "-"; position: relative; margin-left: auto; padding: 0.5rem; border-radius: 50%; height: 40px; min-width: 34px; color: #0e8397; font-weight: 700; }

.toggle-steps.selected-2 .toggle-steps-view-2 { justify-content: space-between; }

.steps-list { max-width: 800px; }

.steps-list-override { max-width: 1018px; }

@media screen and (max-width: 969px) { .toggle-steps-hide { display: none; } }

.header { background: #3e474f; z-index: 102; transition: height 600ms 0s ease; position: fixed; top: 0; right: 0; left: 0; }

@media screen and (max-width: 679px) { .header { height: 50px; } }

@media screen and (min-width: 680px) { .header { height: 70px; } }

@media screen and (max-width: 969px) { .hamburger-button-clicked .header { bottom: 0; height: 100%; overflow-y: auto; } }

@media screen and (max-width: 969px) { .hamburger-button-clicked .header { height: auto; } }

.header-loading-bar { background: #5fcf80; position: fixed; top: 0; left: 0; width: 100%; height: 2px; }

.header-nav { padding-top: 0; padding-bottom: 0; height: 100%; padding: 0 10px 0 10px; }

@media screen and (min-width: 1200px) { .header-nav { padding: 0 30px 0 30px; } }

.header-nav .nav-dropdown { position: relative; }

.header-nav .nav-dropdown.active .nav-toggle { border-bottom: 4px solid #53b16b; }

.header-nav .nav-dropdown-menu { display: none; position: absolute; top: 75px; left: 0; z-index: 999; background: #3e474f; }

.header-nav .nav-dropdown.active .nav-dropdown-menu { display: flex; flex-direction: column; text-align: left; white-space: nowrap; padding: 10px; }

.header-nav .nav-dropdown.active .nav-dropdown-menu a { font-weight: 400; font-size: 16px; line-height: 40px; padding-inline: 10px; }

.header-nav .nav-dropdown.active .nav-dropdown-menu a:hover { background: #adb6b9; }

.header-nav .nav-toggle { color: #adb6b9; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 30px; background: transparent; border: none; }

.header-nav .nav-toggle:hover { cursor: pointer; color: #fff; }

.header-nav .dropdown-item .current { border-bottom: 4px solid #cccccc; }

.header-nav .current .nav-toggle { color: #adb6b9; border-bottom: 4px solid #cccccc; }

.header-nav-list { list-style: none; position: relative; width: 100%; margin: 0 auto; text-align: right; }

@media screen and (max-width: 969px) { .header-nav-list { text-align: left; } }

.header-nav-list:before, .header-nav-list:after { content: " "; display: table; }

.header-nav-list:after { clear: both; }

@media screen and (max-width: 679px) { .hamburger-button-clicked .header-nav-list { padding-top: 50px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .hamburger-button-clicked .header-nav-list { padding-top: 70px; } }

.header-nav-item { font-weight: 700; font-size: 16px; text-align: center; }

@media screen and (max-width: 679px) { .header-nav-item { line-height: 50px; } }

@media screen and (min-width: 680px) { .header-nav-item { line-height: 70px; } }

@media screen and (min-width: 970px) { .header-nav-item { float: left; margin-right: 25px; transition: opacity 600ms 0s ease; } }

@media screen and (min-width: 970px) and (min-width: 970px) and (max-width: 1200px) { .header-nav-item { margin-right: 13px; font-size: 15px; } }

.header-nav-item-primary { font-size: 18px; }

@media screen and (min-width: 970px) and (max-width: 1200px) { .header-nav-item-primary { font-size: 15px; } }

@media screen and (max-width: 969px) { .header-nav-item-primary { line-height: 40px; } }

@media screen and (min-width: 970px) { .header-has-button.scrolled-past-hero.scrolling-down .header-nav-item-secondary { opacity: 0; visibility: hidden; } }

@media screen and (max-width: 969px) { .header-nav-item-secondary { line-height: 38px; } }

.header-nav-item-desktop { display: none; }

@media screen and (min-width: 970px) { .header-nav-item-desktop { display: inline-block; } }

.header-nav-item-mobile { display: none; }

@media screen and (max-width: 969px) { .header-nav-item-mobile { display: none; min-width: 200px; margin: 0 auto; clear: both; line-height: 40px; width: 60%; max-width: 300px; text-align: center; }
  .hamburger-button-clicked .header-nav-item-mobile { display: block; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .header-nav-item-mobile .nav-item-submenu { padding-left: 0; padding-bottom: 0; } }

.header-nav-item-mobile .toggle-steps-hide { display: none; }

.header-nav-item-mobile-container { display: none; }

@media screen and (max-width: 969px) { .header-nav-item-mobile-container { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
  .header-nav-item-mobile-container .nav-link { color: #adb6b9; }
  .header-nav-item-mobile-container .nav-link:not(.nav-link-sign-in):not(.nav-link-sign-out):not(.nav-link-logo):not(.nav-link-free-trial) { font-size: 16px; font-weight: 500; color: #adb6b9; margin: 0; margin-right: 10px; }
  .header-nav-item-mobile-container .toggle-steps { padding: 0; margin: 0; border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
  .header-nav-item-mobile-container .toggle-steps svg { fill: #adb6b9; margin-bottom: 3px; } }

.header-nav-item-logo { transition: top 600ms 0s ease; }

@media screen and (min-width: 970px) { .header-nav-item-logo { position: relative; line-height: 34px; top: 9px; } }

@media screen and (max-width: 969px) { .header-nav-item-logo { text-align: center; top: 9px; } }

.header-nav-item-logo-container { margin: 0; position: relative; width: 100%; height: 100%; }

.header-nav-item-logo-link { display: block; position: relative; width: 100%; height: 100%; }

.header-nav-item-logo-icon { display: inline-block; position: relative; fill: #5fcf80; top: 8px; }

.header-nav-link:hover .header-nav-item-logo-icon, .header-nav-link:focus .header-nav-item-logo-icon { fill: #fff; }

@media screen and (min-width: 970px) { .header-nav-item-logo-icon { top: 9px; } }

@media screen and (max-width: 969px) { .header-nav-item-logo-icon { position: relative; } }

.hamburger-button-clicked .header-nav-item-logo-icon { float: none; }

@media screen and (min-width: 970px) { .header-nav-item-logo-text { display: inline-block; margin-left: 10px; border-right: 2px solid rgba(255, 255, 255, 0.1); padding-inline: 28px; } }

@media screen and (max-width: 969px) { .header-nav-item-logo-text { display: none; } }

@media screen and (max-width: 969px) { .hamburger-button-clicked .header-nav-item-logo-text { display: block; position: relative; top: 5px; margin-bottom: 12px; } }

@media screen and (max-width: 969px) { .logged-in .header-nav-item-techdegrees { margin-top: 15px; padding-top: 15px; border-top: 2px solid rgba(255, 255, 255, 0.07); display: none; }
  .hamburger-button-clicked .logged-in .header-nav-item-techdegrees { display: block; } }

@media screen and (max-width: 969px) { .logged-in .header-nav-item-support { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 2px solid rgba(255, 255, 255, 0.07); display: none; }
  .hamburger-button-clicked .logged-in .header-nav-item-support { display: block; } }

@media screen and (min-width: 970px) { .header-nav-item-organization { margin-right: 0; position: absolute; top: 0; }
  .header-nav-item-profile-points-size-2 .header-nav-item-organization { right: 255px; }
  .header-nav-item-profile-points-size-3 .header-nav-item-organization { right: 265px; }
  .header-nav-item-profile-points-size-4 .header-nav-item-organization { right: 275px; }
  .header-nav-item-profile-points-size-5 .header-nav-item-organization { right: 285px; }
  .header-nav-item-profile-points-size-6 .header-nav-item-organization { right: 295px; } }

@media screen and (max-width: 969px) { .header-nav-item-organization { display: none; margin-bottom: 9px; }
  .hamburger-button-clicked .header-nav-item-organization { display: block; } }

@media screen and (min-width: 970px) { .header-nav-item-workspaces { padding-right: 22px; border-right: 2px solid rgba(255, 255, 255, 0.1); margin-right: 0; line-height: 34px; position: absolute; top: 18px; right: 120px; }
  .header-nav-item-profile-points-size-2 .header-nav-item-workspaces { right: 137px; }
  .header-nav-item-profile-points-size-3 .header-nav-item-workspaces { right: 147px; }
  .header-nav-item-profile-points-size-4 .header-nav-item-workspaces { right: 157px; }
  .header-nav-item-profile-points-size-5 .header-nav-item-workspaces { right: 167px; }
  .header-nav-item-profile-points-size-6 .header-nav-item-workspaces { right: 177px; } }

@media screen and (max-width: 969px) { .header-nav-item-workspaces { display: none; }
  .hamburger-button-clicked .header-nav-item-workspaces { display: block; } }

@media screen and (min-width: 970px) { .header-nav-item-settings { display: none; } }

@media screen and (max-width: 969px) { .header-nav-item-settings { display: none; }
  .hamburger-button-clicked .header-nav-item-settings { display: block; } }

@media screen and (min-width: 970px) { .header-nav-item-sign-out { display: none; } }

@media screen and (max-width: 969px) { .header-nav-item-sign-out { display: none; }
  .hamburger-button-clicked .header-nav-item-sign-out { display: block; } }

@media screen and (min-width: 970px) { .header-nav-item-profile { line-height: 36px; position: absolute; top: 0; right: 26px; margin-right: 0; height: 70px; } }

@media screen and (max-width: 969px) { .header-nav-item-profile { display: none; margin-top: 15px; margin-bottom: 5px; line-height: 28px; padding-top: 20px; border-top: 2px solid rgba(255, 255, 255, 0.07); }
  .hamburger-button-clicked .header-nav-item-profile { display: block; } }

.header-nav-item-profile-dropdown { top: 96% !important; right: -10px !important; }

@media screen and (max-width: 969px) { .header-nav-item-profile-dropdown { display: none !important; } }

.header-nav-item-profile-dropdown-title-link { line-height: 20px; }

.header-nav-item-profile-dropdown-title-name { display: block; color: #101417; font-size: 14px; font-weight: 700; }

.header-nav-item-profile-dropdown-title-label { color: #2b363e; font-size: 12px; font-weight: 400; }

@media screen and (min-width: 970px) { .header-nav-item-profile-avatar { float: right; margin: 17px 18px 0 0; } }

@media screen and (max-width: 969px) { .header-nav-item-profile-avatar { display: block; margin: 0 auto 5px; } }

.header-nav-item-profile-avatar .avatar-image { overflow: hidden; }

.header-nav-item-profile-points { font-weight: 700; }

@media screen and (min-width: 970px) { .header-nav-item-profile-points { margin-right: 7px; line-height: 70px; float: right; } }

@media screen and (max-width: 969px) { .header-nav-item-profile-points { display: block; color: #fff; line-height: 20px; font-size: 20px; padding-top: 5px; } }

.header-nav-item-profile-text { font-size: 14px; line-height: 18px; }

@media screen and (min-width: 970px) { .header-nav-item-profile-text { display: none; } }

.header-nav-item-profile-chevron { fill: #adb6b9; position: absolute; top: 50%; right: 10px; margin-top: -4px; }

.header-nav-link:hover .header-nav-item-profile-chevron, .header-nav-link:focus .header-nav-item-profile-chevron { fill: #fff; }

@media screen and (max-width: 969px) { .header-nav-item-profile-chevron { display: none; } }

@media screen and (min-width: 970px) { .header-nav-item-notifications { position: absolute; top: 0; right: -10px; height: 70px; margin-right: 0; display: block; } }

@media screen and (max-width: 969px) { .header-nav-item-notifications { position: unset; display: none; }
  .hamburger-button-clicked .header-nav-item-notifications { display: block; } }

.header-nav-item-notifications-count { color: #fff; font-weight: 700; border-radius: 4px; }

@media screen and (min-width: 970px) { .header-nav-item-notifications-count { display: block; background: #ed5a5a; position: absolute; top: 16px; right: 3px; font-size: 14px; padding: 0 3px; line-height: 16px; }
  .header-nav-item-notifications-count-double-digits { right: -3px; font-size: 13px; line-height: 15px; } }

@media screen and (max-width: 969px) { .header-nav-item-notifications-count { display: inline-block; background: #1a2126; padding: 0 4px; line-height: 22px; margin-right: 4px; } }

.header-nav-item-notifications-count-hidden { display: none; }

@media screen and (min-width: 970px) { .header-nav-item-notifications-text { display: none; } }

.header-nav-item-notifications-icon { fill: #adb6b9; width: 26px; height: 25px; }

@media screen and (min-width: 970px) { .header-nav-item-notifications-icon { margin-top: 22px; } }

.header-nav-item-notifications:hover .header-nav-item-notifications-icon, .header-nav-link:focus .header-nav-item-notifications-icon { fill: #fff; }

.header-nav-item-notifications-dropdown { width: 420px; right: -2px !important; top: 96% !important; }

@media screen and (max-width: 969px) { .header-nav-item-notifications-dropdown { display: none !important; } }

.header-nav-item-notifications-dropdown .loading { text-align: center; }

.header-nav-item-notifications-dropdown .notification-list { max-height: 360px; overflow-y: auto; }

.header-nav-item-notifications-dropdown-all { color: #fff !important; background-color: #5fcf80 !important; }

.header-nav-item-notifications-dropdown-all:hover { background-color: #2e9a4e !important; }

.header-nav-link { display: block; color: #adb6b9; }

.header-nav-link:before, .header-nav-link:after { content: " "; display: table; }

.header-nav-link:after { clear: both; }

.header-nav-link:focus { color: #fff; }

.header-nav-item-current .header-nav-link, .header-nav-item:hover .header-nav-link { color: #fff; }

.header-nav-item-sign-up .header-nav-link { color: #5fcf80; }

@media screen and (min-width: 970px) { .header-nav-item-profile .header-nav-link, .header-nav-item-notifications .header-nav-link { padding: 0 10px; height: 100%; } }

.header-button { position: absolute; opacity: 0; margin: 0; visibility: hidden; transition: opacity 600ms 0s ease; }

@media screen and (max-width: 969px) { .header-button { top: 8px; } }

@media screen and (min-width: 970px) { .header-button { top: 15px; } }

@media screen and (min-width: 970px) { .header-button { right: 30px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .header-button { right: 20px; } }

@media screen and (max-width: 679px) { .header-button { right: 15px; } }

.header-has-button.scrolled-past-hero.scrolling-down .header-button { opacity: 1; visibility: visible; }

@media screen and (max-width: 969px) { .header-button { height: 32px; line-height: 28px; padding: 0 10px; } }

.hamburger-button-clicked .header-button { display: none; }
.sidebar { float: right; }

.sidebar h3 { margin: 0 0 15px 0; font-size: 18px; color: #1a2126; }

.sidebar #sidebar-nav { background: #f9fafa; overflow: hidden; margin: 0 0 20px; border-radius: 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }

@media screen and (max-width: 679px) { .sidebar #sidebar-nav { display: none; } }

.sidebar #sidebar-nav li { border-bottom: 1px solid #f0f2f4; color: #1a2126; position: relative; transition: background-color 0.3s ease, color 0.3s ease; }

.sidebar #sidebar-nav li:first-child { border-radius: 5px 5px 0 0; }

.sidebar #sidebar-nav li:last-child { border-bottom: none; border-radius: 0 0 5px 5px; }

.sidebar #sidebar-nav li:hover { background: #fff; color: #050708; }

.sidebar #sidebar-nav li.current { background: #fff; color: #050708; border-color: #d4d9dd; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); z-index: 1; }

.sidebar #sidebar-nav li a { display: block; font-weight: 700; color: inherit; font-size: 14px; padding: 15px 20px; transition: padding 0.3s ease; }

@media screen and (min-width: 680px) { .sidebar div#uniform-nav-list-select { display: none; } }

@media screen and (max-width: 679px) { .sidebar div#uniform-nav-list-select { display: block !important; background: #fff; font-weight: 700; background: #fff; margin-bottom: 15px; border: none; border-bottom: 1px solid #d4d9dd; border-radius: 4px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); width: auto !important; }
  .sidebar div#uniform-nav-list-select:after { background: none; }
  .sidebar div#uniform-nav-list-select span { margin: 0; font-size: 16px; color: #101417; padding: 20px; display: block; }
  .sidebar div#uniform-nav-list-select span:after { background: url("/assets/icons/icon-global-863d50621b14046616519056916ec67ac8a680fcb1c994a27ec6c1a92e9569d5.svg") no-repeat -227px -50px; content: ""; width: 15px; height: 10px; position: absolute; right: 20px; top: 23px; } }

@media screen and (max-width: 679px) { .sidebar select#nav-list-select { display: block; width: 100%; } }

@media screen and (min-width: 680px) { .sidebar select#nav-list-select { display: none; } }

.sidebar div.module { margin: 0 0 30px; }
.module { margin-bottom: 50px; }

.module:before, .module:after { content: " "; display: table; }

.module:after { clear: both; }

.module p, .module address { font-size: 14px; color: #1a2126; line-height: 1.6; margin-bottom: 15px; }

.module p a, .module address a { color: #101417; font-weight: 700; }

.module p a:hover, .module address a:hover { color: #101417; }

.module p a.link-primary, .module address a.link-primary { color: #3f8abf; }

.module p a.link-primary:hover, .module address a.link-primary:hover { color: #3f8abf; }

.module.featured p { font-size: 1.8em; }

.module .note { font-size: 14px; color: #2b363e; }

.secondary-module p { font-size: 14px; line-height: 1.4; color: #2b363e; margin-bottom: 10px; }

.secondary-module p a { font-weight: 700; color: #1a2126; }

.secondary-module p a:hover { color: #101417; }

.secondary-module table { width: 100%; }

.secondary-module th, .secondary-module td { text-align: left; }

.secondary-module th { padding: 5px 10px 5px 0; font-size: 12px; color: #2b363e; border-bottom: 1px solid #f0f2f4; }

.secondary-module td { padding: 10px 10px 10px 0; }

.secondary-module td h3 { font-size: 1.4em; font-weight: 700; }

.secondary-module td strong { font-size: 1.4em; font-weight: 700; display: block; color: #101417; }

.secondary-module td p { font-size: 12px !important; color: #2b363e !important; }

.secondary-module .icon { float: right; margin: 0 0 10px 10px; }

.secondary-module .icon-forum { opacity: .3; }

.contained .secondary-module .secondary-heading { padding-bottom: 15px; }

.contained .secondary-module .secondary-heading h2 { font-size: 1.6em; }

.contained .secondary-module p { font-size: 14px; line-height: 1.4; color: #1a2126; margin-bottom: 15px; }

.contained .secondary-module p a { font-weight: 700; color: #1a2126; }

.contained .secondary-module p strong { font-weight: 700; }
blockquote { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }

blockquote { color: #5fcf80; font-weight: 500; font-size: 22px; line-height: 1.6; }

.mareting-layout blockquote { text-align: center; }

blockquote { padding: 15px 20px; margin-bottom: 20px; }

.markdown-zone blockquote { padding-left: 20px; border-left: solid 4px #d4d9dd; margin-left: 0; }

blockquote p { padding-top: 0; }

.markdown-zone blockquote p { color: #1a2126; margin-bottom: 0; }
.hamburger { left: 0; }

.hamburger, .hamburger:after, .hamburger:before { border-radius: 4px; background: #2b363e; width: 100%; height: 3px; position: absolute; margin-top: -1px; transition: background 300ms 0s ease, transform 300ms 0s ease, top 300ms 0.2s ease, bottom 300ms 0.2s ease; }

.hamburger-button-clicked .hamburger, .hamburger-button-clicked .hamburger:after, .hamburger-button-clicked .hamburger:before { transition: background 300ms 0s ease, transform 300ms 0.2s ease, top 300ms 0s ease, bottom 300ms 0s ease; }

.hamburger-button-clicked .hamburger, .hamburger-button:focus .hamburger, .hamburger-button-clicked .hamburger:after, .hamburger-button:focus .hamburger:after, .hamburger-button-clicked .hamburger:before, .hamburger-button:focus .hamburger:before { background: #1a2126; }

.hamburger-button-inverse.hamburger-button-clicked .hamburger, .hamburger-button-inverse.hamburger-button:focus .hamburger, .hamburger-button-inverse.hamburger-button-clicked .hamburger:after, .hamburger-button-inverse.hamburger-button:focus .hamburger:after, .hamburger-button-inverse.hamburger-button-clicked .hamburger:before, .hamburger-button-inverse.hamburger-button:focus .hamburger:before { background: #fff; }

.hamburger-button-clicked .hamburger { background: transparent !important; }

.hamburger:before, .hamburger:after { content: " "; }

.hamburger:before { left: 0; width: 14px; }

@media screen and (max-width: 679px) { .hamburger:before { top: -7px; } }

@media screen and (min-width: 680px) { .hamburger:before { top: -8px; } }

.hamburger-button-clicked .hamburger:before { width: 28px; top: 0; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.hamburger:after { right: 0; width: 14px; }

@media screen and (max-width: 679px) { .hamburger:after { bottom: -8px; } }

@media screen and (min-width: 680px) { .hamburger:after { bottom: -9px; } }

.hamburger-button-clicked .hamburger:after { width: 28px; bottom: 0; -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.hamburger-button { border: 0; background: none; cursor: pointer; position: absolute; height: 30px; padding: 0; z-index: 1; transition: opacity 600ms 0s ease, top 600ms 0s ease; position: left; }

@media screen and (max-width: 679px) { .hamburger-button { top: 10px; } }

@media screen and (min-width: 680px) { .hamburger-button { top: 20px; } }

@media screen and (max-width: 969px) { .hamburger-button { right: 15px; } }

@media screen and (max-width: 679px) { .hamburger-button { width: 28px; } }

@media screen and (min-width: 680px) { .hamburger-button { width: 30px; } }

@media screen and (min-width: 970px) { .hamburger-button { opacity: 0; visibility: hidden; } }

.hamburger-button:focus { outline: none; }

@media screen and (max-width: 969px) { .hamburger-button-clicked { overflow: hidden; } }
.hero { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-size: cover; position: relative; margin-bottom: 30px; overflow: hidden; z-index: 0; background-position: center center; text-align: center; transition: height 0.5s ease, opacity 0.5s ease, max-height 0.5s ease; }

.hero:not(.has-topic-background-color) { background-color: #2d3339; }

.hero.hero-video-in-progress { background: #2d3339 !important; }

.marketing-layout .hero { background: url(/assets/layouts/header-bg-0e6a992b193cbbf0ea2d9b2a00521d3d8aba1f47908c04dd57782e774c20f0f5.svg) #f6f9fa 0 -70px repeat; border-bottom: solid 1px #e9f0f3; padding: 50px 0; }

@media screen and (max-width: 679px) { .treehouse-layout .hero { margin: 0 -10px 10px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .treehouse-layout .hero { margin: 0 -15px 15px; } }

@media screen and (min-width: 970px) { .treehouse-layout .hero { border-radius: 4px; } }

@media screen and (max-width: 969px) { .hero.hero-video-in-progress:before { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 78px; background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); } }

.hero-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

@media screen and (min-width: 970px) { .hero-content { padding: 60px 30px; } }

@media screen and (max-width: 969px) { .hero-content { padding: 82px 15px 60px; } }

@media screen and (max-width: 679px) { .hero-content { padding: 82px 10px 30px; } }

.hero-video-in-progress:not(.hero-video-stopped) .hero-content { display: none; }

.hero-title-inverse, .hero-copy-inverse { color: #fff; }

.hero-title, .hero-title-bottom { margin: 0 0 10px; line-height: 1.5; }

@media screen and (min-width: 970px) { .hero-title, .hero-title-bottom { font-size: 34px; } }

@media screen and (max-width: 969px) { .hero-title, .hero-title-bottom { font-size: 26px; } }

.hero-copy { opacity: 0.8; line-height: 1.6; margin: 0 0 20px; }

@media screen and (min-width: 970px) { .hero-copy { font-size: 18px; font-weight: 700; } }

@media screen and (max-width: 969px) { .hero-copy { font-size: 14px; } }

.hero-title-bottom { transition: opacity 0.3s ease; position: absolute; margin: 0; padding: 0; z-index: 3; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }

@media screen and (max-width: 679px) { .hero-title-bottom { font-size: 13px; font-weight: 400; line-height: 20px; bottom: 6.5%; } }

@media screen and (min-width: 680px) { .hero-title-bottom { left: 30px; right: 30px; bottom: 8%; font-size: 16px; font-weight: 400; line-height: 26px; } }

@media screen and (max-width: 969px) { .hero-title-bottom { left: 10px; right: 10px; } }

@media screen and (min-width: 1000px) { .hero-title-bottom { font-size: 18px; line-height: 30px; } }

@media screen and (min-width: 1200px) { .hero-title-bottom { font-size: 22px; line-height: 34px; } }

html:not(.hero-loaded) .hero-title-bottom, .hero-video-in-progress:not(.hero-video-stopped) .hero-title-bottom { opacity: 0; }

.hero-background { visibility: hidden; display: block; width: 100%; max-height: 450px; }

.hero-video-in-progress:not(.hero-video-stopped) .hero-background { display: none; }

.hero-play { cursor: pointer; background: transparent; border: 6px solid rgba(255, 255, 255, 0.7); box-shadow: none; text-align: center; position: absolute; z-index: 3; left: 50%; margin: 0; outline: none; transition: border-color 0.3s ease, opacity 0.5s ease; }

@media screen and (min-width: 970px) { .hero-play { width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; border-radius: 100px; } }

@media screen and (max-width: 969px) { .hero-play { width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; border-radius: 80px; } }

@media screen and (min-width: 680px) { .hero-play { top: 50%; } }

@media screen and (max-width: 679px) { .hero-play { top: 55%; } }

.hero-play:hover { border-color: #fff; }

html:not(.hero-loaded) .hero-play { opacity: 0; }

.hero-video-in-progress:not(.hero-video-stopped) .hero-play { display: none; }

.hero-play svg { height: 40%; width: 55%; left: 12%; position: relative; fill: #fff; }

.ff .hero-play svg { top: 3px; }

.hero-close-video { transition: opacity 0.3s ease; opacity: 0; margin: 0; position: absolute; top: 15px; width: 30px; height: 30px; z-index: 10; cursor: pointer; transition: background 300ms 0s ease; border-radius: 4px; }

@media screen and (min-width: 970px) { .hero-close-video { right: 30px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .hero-close-video { right: 20px; } }

@media screen and (max-width: 679px) { .hero-close-video { right: 15px; } }

@media screen and (max-width: 969px) { .hero-close-video { display: none; } }

.hero-video-in-progress:not(.hero-video-stopped) .hero-close-video { opacity: 1; }

.hero-close-video, .hero-close-video:hover, .hero-close-video:active { border-color: #fff; }

.hero-close-video, .hero-close-video:active { background: rgba(0, 0, 0, 0.15); }

.hero-close-video:hover { background: rgba(0, 0, 0, 0.35); }

.hero-close-video-icon { fill: #fff !important; }

.hero-video { display: none; border-radius: 0 !important; }

.hero-video-in-progress:not(.hero-video-stopped) .hero-video { display: block; }

.hero div.mejs-container:not(.mejs-container-fullscreen) { background-color: #2d3339; }

.hero div.mejs-container:not(.mejs-container-fullscreen) div.mejs-mediaelement { position: relative; margin: 0 auto; height: auto; }

.hero div.mejs-container:not(.mejs-container-fullscreen) div.mejs-mediaelement video { max-height: 550px; }

.hero div.mejs-container:not(.mejs-container-fullscreen) div.mejs-controls { transition: bottom 0.4s cubic-bezier(0, 0.99, 0.11, 1.25) 0.5s; z-index: 3; }

html:not(.hero-video-in-progress) .hero div.mejs-container:not(.mejs-container-fullscreen) div.mejs-controls { bottom: -60px; }

.hero div.mejs-container:not(.mejs-container-fullscreen) div.mejs-overlay-play { height: 100% !important; }

@media screen and (min-width: 680px) { .hero div.mejs-container:not(.mejs-container-fullscreen) div.mejs-overlay-play div.mejs-overlay-button { margin-top: -50px !important; } }

@media screen and (max-width: 679px) { .hero div.mejs-container:not(.mejs-container-fullscreen) div.mejs-overlay-play div.mejs-overlay-button { margin-top: -35px !important; } }

.hero svg.loading-icon { width: 22px; height: 22px; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -11px; }

.hero svg.loading-icon path.loading-circle { fill: #dce0e2; }

.hero svg.loading-icon path.loading-quarter-circle { fill: #fff; }

.hero-loaded .hero svg.loading-icon { display: none; }

.hero-color-strip { transition: opacity 0.25s ease; position: absolute; width: 100%; z-index: 2; overflow: hidden; bottom: 0; display: table; }

.hero-color-strip div { display: table-cell; width: 10%; height: 4px; }

.hero-color-blue { background-color: #3f8abf; }

.hero-color-green { background-color: #5fcf80; }

.hero-color-dark-green { background-color: #35A961; }

.hero-color-yellow { background-color: #ffd466; }

.hero-color-orange { background-color: #ff9f1f; }

.hero-color-red { background-color: #ed5a5a; }

.hero-color-light-pink { background-color: #ff8eb4; }

.hero-color-pink { background-color: #ff5b89; }

.hero-color-light-purple { background-color: #a083c8; }

.hero-color-purple { background-color: #8363b2; }

.legacy-hero { overflow: hidden; position: relative; z-index: 0; border-radius: 5px 5px 0 0; }

.topic-ai .legacy-hero { background: #733A88; }

.topic-back-end .legacy-hero { background: #008297; }

.topic-data .legacy-hero { background: #9F4B84; }

.topic-design .legacy-hero { background: #4a4290; }

.topic-experimental .legacy-hero { background: #733a88; }

.topic-front-end .legacy-hero { background: #3659a2; }

.topic-fundamentals .legacy-hero { background: #9b3b5a; }

.topic-mobile .legacy-hero { background: #30826C; }

.topic-internal .legacy-hero { background: #55616c; }

.topic-foundations .legacy-hero { background: #004e61; }

.topic-undefined .legacy-hero { background: #55616c; }

.topic-college-credit .legacy-hero { background: #3887c8; }

.topic-no-code .legacy-hero { background: #31AF7F; }

.topic-security .legacy-hero { background: #409BE9; }

.topic-game-development .legacy-hero { background: #856fc4; }

.topic-treehouse-resources .legacy-hero { background: #5fcf80; }

.topic-coding-for-kids .legacy-hero { background: #F36C27; }

.legacy-hero .qa-banner { background: #ed5a5a; color: #FFF; font-size: 1.6em; font-weight: 700; padding: 0.5em; display: inline; }

.legacy-hero h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 10px; display: block; opacity: .5; }

.legacy-hero h1 { font-size: 36px; color: #FFF; font-weight: 700; line-height: 1.2; margin-bottom: 15px; display: block; }

.legacy-hero p { font-size: 16px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; margin-bottom: 30px; }

.legacy-hero ul.tags { position: absolute; bottom: 30px; }

@media screen and (min-width: 680px) { .legacy-hero ul.tags { left: 30px; } }

@media screen and (max-width: 679px) { .legacy-hero ul.tags { left: 20px; } }

.legacy-hero ul.tags li a, .legacy-hero ul.tags li span { color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.75); margin: 10px 10px 0 0; }

.legacy-hero ul.tags li a:hover, .legacy-hero ul.tags li span:hover { color: #fff; border-color: #fff; }

.legacy-hero .markdown-zone a { color: inherit !important; text-decoration: underline; }

.legacy-hero .progress-container { bottom: -30px; right: 15px; left: 15px; height: 20px; }

.legacy-hero .achievement-hero { background: none; text-align: center; position: absolute; top: 0; bottom: 0; right: 15px; width: 25%; }

.legacy-hero .achievement-hero:before { content: ''; height: 100%; margin-right: -0.25em; display: inline-block; }

.legacy-hero .achievement-hero img { width: 75%; -webkit-animation-duration: 15s; -moz-animation-duration: 15s; animation-duration: 15s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; }

@media screen and (max-width: 679px) { .legacy-hero .achievement-hero img { display: none; } }
#welcome-panel.promo { background-color: #5D81E6; }

#welcome-panel.promo h2, #welcome-panel.promo h3, #welcome-panel.promo p { color: #fff; }

#welcome-panel.closed { -webkit-animation: close-panel 300ms ease-in-out 0s 1 forwards; -moz-animation: close-panel 300ms ease-in-out 0s 1 forwards; animation: close-panel 300ms ease-in-out 0s 1 forwards; }

@-webkit-keyframes close-panel { from { opacity: 1; }
  to { opacity: 0;
    -ms-transform: translatey(-30px);
    -moz-transform: translatey(-30px);
    -webkit-transform: translatey(-30px);
    transform: translatey(-30px); } }

@-moz-keyframes close-panel { from { opacity: 1; }
  to { opacity: 0;
    -ms-transform: translatey(-30px);
    -moz-transform: translatey(-30px);
    -webkit-transform: translatey(-30px);
    transform: translatey(-30px); } }

@keyframes close-panel { from { opacity: 1; }
  to { opacity: 0;
    -ms-transform: translatey(-30px);
    -moz-transform: translatey(-30px);
    -webkit-transform: translatey(-30px);
    transform: translatey(-30px); } }

#welcome-panel.closed:not(.animating) { display: none; }

#welcome-panel-close { position: absolute; top: 15px; right: 15px; margin: 0; z-index: 20; }

#welcome-panel h2 { font-size: 28px; margin-bottom: 15px; }

#welcome-panel h3 { margin-bottom: 10px; }

#welcome-panel h4 { font-size: 18px; margin-bottom: 10px; }

@media screen and (max-width: 969px) { #welcome-panel h4 { margin-top: 30px; } }

#welcome-panel em { font-style: italic; }

#welcome-panel p { margin-bottom: 20px; color: #2b363e; }

#welcome-panel p.subheader { margin: -5px 0 30px; }

#welcome-panel p:last-child { margin-bottom: 0; }

#welcome-panel p a { font-weight: 700; color: #3f8abf; }

#welcome-panel p a.button { color: #101417; }

#welcome-panel.techdegree-trial p { font-size: 16px; color: #101417; }

@media screen and (min-width: 880px) { #welcome-panel.techdegree-trial p { margin-bottom: 0 !important; margin-right: 290px; } }

@media screen and (min-width: 1100px) { .accounts-subscription #welcome-panel.techdegree-trial p { margin-bottom: 0 !important; margin-right: 290px; } }

@media screen and (min-width: 880px) { #welcome-panel .actions { position: absolute; right: 30px; top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } }

@media screen and (min-width: 880px) { .accounts-subscription #welcome-panel .actions { position: absolute; right: 30px; top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } }

.welcome-panel-img { width: 100%; height: auto; max-width: 350px; }

.community-cta-2023 { background: url(/assets/views/marketing/shared/community-blue-gradient-99a5eecca2ac084f15533a27c54102a1a8799ed5f8ba1d96fe1114f72724f16f.webp); padding: 30px 30px 20px; }

@media screen and (max-width: 970px) { .community-cta-2023 { padding: 40px 80px 20px; } }

@media screen and (max-width: 768px) { .community-cta-2023 { padding: 20px 50px; } }

@media screen and (max-width: 475px) { .community-cta-2023 { padding: 20px; } }

.community-cta-container { min-height: 300px; display: flex; align-items: center; justify-content: center; gap: 60px; }

.community-cta-text { width: 61%; }

@media screen and (max-width: 970px) { .community-cta-text { text-align: center; width: 100%; } }

.community-cta-text h2, .community-cta-text h3, .community-cta-text p { color: white !important; }

@media screen and (max-width: 768px) { .community-cta-text h2 { font-size: 16px !important; line-height: 22px; } }

@media screen and (max-width: 475px) { .community-cta-text h2 { margin-bottom: 12px !important; margin: 0 auto 15px; width: 55%; } }

@media screen and (max-width: 400px) { .community-cta-text h2 { width: 66%; } }

@media screen and (max-width: 376px) { .community-cta-text h2 { width: 100%; } }

@media screen and (max-width: 768px) { .community-cta-text h3 { font-size: 14px; } }

.community-cta-text p { line-height: 15px; margin-bottom: 30px !important; }

.community-cta-text p span, .community-cta-text p a { color: #F6D064 !important; font-weight: 500; }

@media screen and (max-width: 768px) { .community-cta-text p { font-size: 12px; margin-bottom: 20px !important; } }

@media screen and (max-width: 475px) { .community-cta-text p { font-size: 10px; line-height: 13px; } }

.community-cta-text .button--primary { background-color: #F6D064; color: #30383E; border: none; width: 202px; height: 39px; font-size: 16px; line-height: 40px; margin-top: 5px; }

@media screen and (max-width: 475px) { .community-cta-text .button--primary { margin-top: 0; } }

@media screen and (max-width: 970px) { .community-cta-image { display: none; } }

.community-cta-image img { width: 330px; }

.welcome-panel-wrapper { display: flex; justify-content: space-between; align-items: center; }

.welcome-panel-margin-top { margin-top: 12px; }

.welcome-panel-flexbox { display: flex; justify-content: space-between; align-items: center; gap: 1em; }

.welcome-panel-flexbox p { max-width: 335px; }

@media screen and (max-width: 970px) { .welcome-panel-flexbox p { max-width: 100%; } }

.welcome-panel-flexbox img { transition: opacity 0.3s ease; opacity: 1; visibility: visible; }

@media screen and (max-width: 990px) { .welcome-panel-flexbox img { opacity: 0; } }

@media screen and (max-width: 970px) { .welcome-panel-flexbox img { visibility: hidden; height: 0; width: 0; overflow: hidden; } }
.stage-progress-container { background-color: #55616c; position: relative; z-index: 3; width: 100%; border-radius: 4px 4px 0 0; }

.stage-progress-list { text-align: center; display: table; width: 100%; border-radius: 4px 4px 0 0; transition-delay: .5s; transition: transform 0.3s ease; }

.topic-ai .stage-progress-list { background-color: #733A88; }

.stage-progress-list.topic-ai { background-color: #733A88; }

.topic-back-end .stage-progress-list { background-color: #008297; }

.stage-progress-list.topic-back-end { background-color: #008297; }

.topic-data .stage-progress-list { background-color: #9F4B84; }

.stage-progress-list.topic-data { background-color: #9F4B84; }

.topic-design .stage-progress-list { background-color: #4a4290; }

.stage-progress-list.topic-design { background-color: #4a4290; }

.topic-experimental .stage-progress-list { background-color: #733a88; }

.stage-progress-list.topic-experimental { background-color: #733a88; }

.topic-front-end .stage-progress-list { background-color: #3659a2; }

.stage-progress-list.topic-front-end { background-color: #3659a2; }

.topic-fundamentals .stage-progress-list { background-color: #9b3b5a; }

.stage-progress-list.topic-fundamentals { background-color: #9b3b5a; }

.topic-mobile .stage-progress-list { background-color: #30826C; }

.stage-progress-list.topic-mobile { background-color: #30826C; }

.topic-internal .stage-progress-list { background-color: #55616c; }

.stage-progress-list.topic-internal { background-color: #55616c; }

.topic-foundations .stage-progress-list { background-color: #004e61; }

.stage-progress-list.topic-foundations { background-color: #004e61; }

.topic-undefined .stage-progress-list { background-color: #55616c; }

.stage-progress-list.topic-undefined { background-color: #55616c; }

.topic-college-credit .stage-progress-list { background-color: #3887c8; }

.stage-progress-list.topic-college-credit { background-color: #3887c8; }

.topic-no-code .stage-progress-list { background-color: #31AF7F; }

.stage-progress-list.topic-no-code { background-color: #31AF7F; }

.topic-security .stage-progress-list { background-color: #409BE9; }

.stage-progress-list.topic-security { background-color: #409BE9; }

.topic-game-development .stage-progress-list { background-color: #856fc4; }

.stage-progress-list.topic-game-development { background-color: #856fc4; }

.topic-treehouse-resources .stage-progress-list { background-color: #5fcf80; }

.stage-progress-list.topic-treehouse-resources { background-color: #5fcf80; }

.topic-coding-for-kids .stage-progress-list { background-color: #F36C27; }

.stage-progress-list.topic-coding-for-kids { background-color: #F36C27; }

@media screen and (min-width: 970px) { .stage-progress-list { padding: 0 20px; height: 60px; } }

@media screen and (max-width: 969px) { .stage-progress-list { padding: 0 10px; height: 46px; } }

.show-mobile-steps .stage-progress-list { height: 46px; }

.stage-progress-item { position: relative; display: table-cell; }

.hide-dividers .stage-progress-item-divider { display: none; }

.stage-progress-item-divider:before { content: ""; background: #fff; height: 2px; color: #fff; opacity: 0.1; border-radius: 2px; position: absolute; top: 50%; right: 0; left: 0; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

.stage-progress-step { width: 42px; }

.show-mobile-steps .stage-progress-step { width: 20px; }

.hide-dividers .stage-progress-step { width: auto; }

.stage-progress-step-link { color: #55616c; display: block; position: relative; width: 42px; height: 60px; transition: opacity 0.3s ease; }

.show-mobile-steps .stage-progress-step-link { width: 20px; height: 46px; }

.hide-dividers .stage-progress-step-link { width: auto; }

li:hover .stage-progress-step-link { color: #3f474f; }

.stage-progress-step-icon, .stage-progress-step-profile-img { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: opacity 0.3s ease; }

.show-mobile-steps .stage-progress-step-icon, .show-mobile-steps .stage-progress-step-profile-img { display: none; }

.stage-progress-step-profile-img { display: block; z-index: 10; border-radius: 50%; width: 22px; height: 22px; }

li:hover .stage-progress-step-profile-img { opacity: 0; }

.show-mobile-steps .stage-progress-step-profile-img { display: none; }

.completed .stage-progress-step-profile-img { opacity: 0; }

.stage-progress-step-icon { fill: #fff; }

li:not(.suggested) .stage-progress-step-icon-step { opacity: 0.7; }

.completed:not(:hover) .stage-progress-step-icon-step { opacity: 0; }

li:hover .stage-progress-step-icon-step { opacity: 1; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3); border-radius: 100%; }

.current .stage-progress-step-icon-step { fill: #5fcf80; }

.stage-progress-step-icon-step-completed { opacity: 0; }

.completed:not(:hover) .stage-progress-step-icon-step-completed { opacity: 1; }

.stage-progress-step-mobile-dot { width: 8px; height: 8px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); fill: none; stroke-width: 2px; stroke: #fff; display: none; }

.show-mobile-steps .stage-progress-step-mobile-dot { display: inline-block; }

.completed .stage-progress-step-mobile-dot { fill: #fff; }

.suggested:not(.completed) .stage-progress-step-mobile-dot { stroke-dasharray: 0.5,3; stroke-linecap: round; }

li:not(.suggested):not(.completed):not(:hover) .stage-progress-step-mobile-dot { opacity: 0.3; }

.stage-progress-step-progress { width: 28px; height: 28px; transform-origin: center center; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%) rotate(-90deg); -moz-transform: translate(-50%, -50%) rotate(-90deg); -webkit-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); }

.ff .stage-progress-step-progress { animation: none; }

.show-mobile-steps .stage-progress-step-progress { display: none; }

.stage-progress-step-progress .circle-progress-base { stroke: #fff; -webkit-animation: pulsate-stroke-opacity 1.15s linear 0s infinite alternate; -moz-animation: pulsate-stroke-opacity 1.15s linear 0s infinite alternate; animation: pulsate-stroke-opacity 1.15s linear 0s infinite alternate; }

@-webkit-keyframes pulsate-stroke-opacity { from { opacity: 0.2; }
  to { opacity: 0.5; } }

@-moz-keyframes pulsate-stroke-opacity { from { opacity: 0.2; }
  to { opacity: 0.5; } }

@keyframes pulsate-stroke-opacity { from { opacity: 0.2; }
  to { opacity: 0.5; } }

.completed .stage-progress-step-progress .circle-progress-base { opacity: 1; -webkit-animation: none; -moz-animation: none; animation: none; }

.stage-progress-step-progress .circle-progress-base-overlay { display: none; }

.stage-progress-step-progress .circle-progress-bar { stroke: #fff; }

.completed .stage-progress-step-progress .circle-progress-bar { opacity: 0; }

.stage-progress-step-tooltip { position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: 220px; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); left: 50%; top: 100%; display: block; font-weight: 700; font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; }

.stage-progress-step-tooltip:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05); -ms-transform: translate(-50%, 50%) rotate(45deg); -moz-transform: translate(-50%, 50%) rotate(45deg); -webkit-transform: translate(-50%, 50%) rotate(45deg); transform: translate(-50%, 50%) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

li:hover .stage-progress-step-tooltip { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -3px); -moz-transform: translate(-50%, -3px); -webkit-transform: translate(-50%, -3px); transform: translate(-50%, -3px); }

li:first-child .stage-progress-step-tooltip { left: 85px; }

li:first-child .stage-progress-step-tooltip:before { left: 46px; }

li:last-child .stage-progress-step-tooltip { left: auto; right: -135px; }

li:last-child .stage-progress-step-tooltip:before { left: auto; right: 36px; }

.stage-progress-step-tooltip em { display: block; color: #2b363e; font-size: 13px; line-height: 18px; font-weight: 400; margin: 4px 0 0; }
.pagination-container { margin-top: 30px; text-align: center; }

.pagination-container:before, .pagination-container:after { content: " "; display: table; }

.pagination-container:after { clear: both; }

.pagination-container .pagination-nav { font-weight: 700; font-size: 14px; color: #1a2126; background: #fff; }

.pagination-container .pagination-nav:hover { color: #1a2126; }

.pagination-container .button.disabled { opacity: .5; }

.pagination-container .pagination-next, .pagination-container .button:first-child { float: left; }

.pagination-container .pagination-next .icon, .pagination-container .button:first-child .icon { margin: -2px 0 0 5px; }

.pagination-container .pagination-prev, .pagination-container .button:last-child { float: right; }

.pagination-container .pagination-prev .icon, .pagination-container .button:last-child .icon { margin: -2px 5px 0 0; }

.pagination-container span.page { cursor: default; background-color: #5fcf80; border-color: #5fcf80; }

@media (max-width: 679px) { .pagination-container .page, .pagination-container .gap { display: none; } }

.pagination-container .page-number { font-size: 14px; font-weight: 700; padding: 12px 0; color: #2b363e; display: inline-block; white-space: nowrap; overflow: hidden; }

.pagination-container .page-number.only-mobile { display: none; }

@media (max-width: 679px) { .pagination-container .page-number.only-mobile { display: inline-block; } }

.pagination-container .page-number li { list-style-type: none; font-size: 14px; font-weight: 700; color: #2b363e; display: inline-block; }

.pagination-container .page-number span { padding: 5px 10px; }

.pagination-container .page-number a { padding: 5px 10px; color: #1a2126; }

.pagination-container .page-number a:hover { color: #1a2126; }

.pagination-container .pagination-info { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; margin-inline: 20px; }

.pagination-container .button-primary { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 800; height: 32px; padding: 0 12px; color: #35A961; border-color: #35A961; background-color: transparent; border-radius: 4px; }

.pagination-container .button-primary:hover { background-color: #29824b; border-color: #29824b; color: transparent; cursor: pointer; }

.pagination-container .button-primary:focus { color: #29824b; }
footer .footer2022 { max-width: 1440px; margin: 0 auto; background-color: #3e474f; color: #fff; }

footer .footer2022-courses { padding-top: 1.3em; }

@media screen and (max-width: 679px) { footer .footer2022-explore { padding-top: 1.4em; } }

footer .footer2022-treehouse-logo { padding: 3em 0 0 3em; width: 254px; }

@media screen and (max-width: 970px) { footer .footer2022-treehouse-logo { padding: 3em 0 0 0; } }

footer .footer2022-container { display: flex; box-sizing: border-box; flex-direction: row; flex-wrap: nowrap; }

@media screen and (max-width: 970px) { footer .footer2022-container { flex-direction: column; } }

footer .footer2022-left { width: 50%; height: 600px; display: flex; flex-direction: column; border-right: 1px solid #5f666b; border-bottom: 1px solid #5f666b; justify-content: space-between; }

@media screen and (max-width: 970px) { footer .footer2022-left { width: 100%; align-items: center; border-right: none; border-bottom: none; } }

footer .footer2022-left ul { padding-left: 1em; }

footer .footer2022-left-design { width: 758px; max-height: 296px; }

@media screen and (max-width: 970px) { footer .footer2022-left-design { width: 100%; } }

footer .footer2022-left .catcta2022 a { padding-left: 3rem; text-decoration: underline; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.25rem; color: #fff; letter-spacing: 1px; font-weight: 700; }

@media screen and (max-width: 970px) { footer .footer2022-left .catcta2022 a { padding: 0; } }

footer .footer2022-left .social { display: flex; margin: 0; justify-content: space-evenly; max-width: 300px; }

@media screen and (max-width: 970px) { footer .footer2022-left .social { gap: 2em; } }

footer .footer2022-left .social li { margin-right: 5px; }

@media screen and (max-width: 679px) { footer .footer2022-left .social li { margin-right: 4px; border-bottom: none; } }

footer .footer2022-left .social a { width: 35px; height: 35px; display: inline-block; }

footer .footer2022-left .social a svg { width: 35px; height: 35px; fill: #fff; }

footer .footer2022-right { padding: 5em; height: 600px; width: 50%; display: flex; border-bottom: 1px solid #5f666b; }

@media screen and (max-width: 970px) { footer .footer2022-right { width: 100%; } }

@media screen and (max-width: 679px) { footer .footer2022-right { flex-direction: column; margin-bottom: 24em; border-bottom: none; padding: 2em; } }

footer .footer2022-right-col1 { width: 50%; display: flex; }

@media screen and (max-width: 679px) { footer .footer2022-right-col1 { width: 100%; } }

footer .footer2022-right-col1-links h4 { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.25rem; color: #fff; letter-spacing: 5px; padding-bottom: 1em; }

footer .footer2022-right-col1-links li { padding: 1em 0; }

footer .footer2022-right-col1-links li a { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; color: #fff; letter-spacing: 2px; font-weight: 300; }

footer .footer2022-right-col2 { width: 50%; display: flex; flex-direction: column; }

@media screen and (max-width: 679px) { footer .footer2022-right-col2 { width: 100%; } }

footer .footer2022-right-col2 h4 { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.25rem; color: #fff; letter-spacing: 5px; padding-bottom: 1em; }

footer .footer2022-right-col2-links li { padding: 1em 0; }

footer .footer2022-right-col2-links li a { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; color: #fff; letter-spacing: 2px; font-weight: 300; }

footer .legal-links-2022-flex { display: flex; padding: 2em; justify-content: space-between; }

@media screen and (max-width: 679px) { footer .legal-links-2022-flex { flex-direction: column-reverse; align-items: center; gap: 1em; margin-top: 2em; } }

footer .legal-links-2022-flex .legal-links-2022-left .copyright-message-2022 { font-family: 'Poppins', sans-serif; font-size: 0.75rem; color: #fff; letter-spacing: 5px; text-transform: uppercase; }

footer .legal-links-2022-flex .legal-links-2022-right span, footer .legal-links-2022-flex .legal-links-2022-right a { font-family: 'Poppins', sans-serif; font-size: 0.75rem; color: #fff; letter-spacing: 5px; text-transform: uppercase; }

footer .footer { background-color: #f6f9fa; box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; }

@media screen and (max-width: 679px) { footer .footer { display: block; width: 100%; padding: 2rem 3rem; } }

@media screen and (max-width: 969px) { footer .footer { padding: 2rem 3rem; } }

@media screen and (min-width: 970px) { footer .footer { padding: 3rem 2rem 1rem 2rem; } }

footer .footer h4 { margin: 0; padding: 1rem 0 0.5rem 0; }

@media screen and (max-width: 969px) { footer .footer h4 { font-size: 16px !important; } }

footer .footer li { font-size: 14px !important; color: #3E474F; padding: 0.5em 0; line-height: 18px; }

@media screen and (max-width: 679px) { footer .footer li { border-bottom: 1px solid white; } }

footer .footer a { font-size: 14px !important; font-weight: 400; color: #3E474F; padding: 0.5em 0; line-height: 18px; }

footer .footer a:hover, footer .footer a:active, footer .footer a:focus { text-decoration: underline; }

footer .footer-left { padding-right: 2rem; flex-basis: 0; }

@media screen and (max-width: 679px) { footer .footer-left { padding-bottom: 1rem; width: 100%; padding-right: 0; } }

footer .footer-middle { height: 100%; display: inline-block; padding: 0 2rem 1rem 2rem; border-left: 2px solid #0098B1; border-right: 2px solid #0098B1; }

@media screen and (max-width: 679px) { footer .footer-middle { padding: 0; border-top: 2px solid #0098B1; border-bottom: 2px solid #0098B1; border-left: none; border-right: none; width: 100% !important; } }

@media screen and (max-width: 969px) { footer .footer-middle { padding: 0; } }

footer .footer-middle .catcta a { padding-left: 1rem; font-size: 18px !important; text-decoration: underline; font-weight: 500; }

@media screen and (max-width: 679px) { footer .footer-middle .catcta a { padding: 0; } }

footer .footer-catalogue { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }

@media screen and (max-width: 679px) { footer .footer-catalogue { flex-direction: column; } }

footer .footer-catalogue h3 { text-decoration: none; }

footer .footer-catalogue-tech { flex-grow: 4; padding: 0 1rem; }

footer .footer-catalogue-tech h4 > a { font-size: 18px !important; color: #40484A; font-weight: 500; }

@media screen and (max-width: 679px) { footer .footer-catalogue-tech { padding: 0; } }

footer .footer-catalogue-tracks { flex-grow: 4; padding: 0 1rem; }

@media screen and (max-width: 679px) { footer .footer-catalogue-tracks { padding: 0; } }

footer .footer-catalogue-courses { flex-grow: 4; padding: 0 1rem; }

@media screen and (max-width: 679px) { footer .footer-catalogue-courses { padding: 0; } }

footer .footer-right { padding-left: 2rem; }

footer .footer-right .list-h4 { padding-top: 1rem; }

@media screen and (max-width: 679px) { footer .footer-right { padding-left: 0; width: 100%; } }

footer .footer-dev-container { border-top: none; padding-left: 10px; position: fixed !important; bottom: 0; z-index: 200; }

footer .footer-dev-container:before, footer .footer-dev-container:after { content: " "; display: table; }

footer .footer-dev-container:after { clear: both; }

footer .footer-dev-list { margin-right: 10px; padding: 0; float: left; }

footer .footer-dev-listaccounts, footer .footer-dev-listaction { margin-left: 15px; }

footer .links-2020-footer { margin: 0; }

@media screen and (min-width: 680px) { footer .links-2020-footer li:nth-child(1) { order: 1; }
  footer .links-2020-footer li:nth-child(2) { order: 3; }
  footer .links-2020-footer li:nth-child(3) { order: 5; }
  footer .links-2020-footer li:nth-child(4) { order: 7; }
  footer .links-2020-footer li:nth-child(5) { order: 9; }
  footer .links-2020-footer li:nth-child(6) { order: 10; }
  footer .links-2020-footer li:nth-child(7) { order: 2; }
  footer .links-2020-footer li:nth-child(8) { order: 4; }
  footer .links-2020-footer li:nth-child(9) { order: 6; }
  footer .links-2020-footer li:nth-child(10) { order: 8; }
  footer .links-2020-footer li:nth-child(11) { order: 11; }
  footer .links-2020-footer li:nth-child(12) { order: 12; } }

footer .footer-tail { background-color: #f6f9fa; padding: 1rem 0; }

footer .footer-tail .social { display: flex; justify-content: center; margin: 0; }

footer .footer-tail .social li { margin-right: 5px; }

@media screen and (max-width: 679px) { footer .footer-tail .social li { margin-right: 4px; border-bottom: none; } }

footer .footer-tail .social li:nth-child(7) a svg { width: 24px; height: 19px; }

footer .footer-tail .social a { width: 35px; height: 35px; display: flex; align-items: center; }

footer .footer-tail .social a svg { width: 35px; height: 35px; fill: #4B5658; }

footer .footer-tail .legal-links { margin: 1rem 0; display: flex; flex-direction: row; justify-content: center; text-align: center; }

footer .footer-tail .legal-links span { color: #0098B1; }

footer .footer-tail .legal-links a { display: inline-block; padding: 0 1rem; font-size: 14px !important; font-weight: 400; color: #3E474F; }

footer .footer-tail .legal-links a:hover, footer .footer-tail .legal-links a:active, footer .footer-tail .legal-links a:focus { text-decoration: underline; }

footer .footer-tail .copyright-message { margin-bottom: 15px; text-align: center; font-size: 14px !important; font-weight: 400; color: #3E474F; }

.color-bar-footer { display: block; height: 3px; }
.footer-dev-list { display: inline-block; border-top: none; margin: 0 0 0 20px; padding: 20px 0; }

.footer-dev-list:before, .footer-dev-list:after { content: " "; display: table; }

.footer-dev-list:after { clear: both; }

.footer-dev-list li { list-style: none; }

.footer-dev-list > li { float: left; padding: 0; color: #c6ccd2; position: relative; }

.footer-dev-list > li:hover ul { display: block; }

.footer-dev-list > li:hover > a { background: #2d3339; color: #fff; border-radius: 0 0 5px 5px; border: 2px solid #2d3339; box-shadow: none; }

.footer-dev-list > li:hover > a .icon { background-position: -123px -33px; }

.footer-dev-list > li > a { background: #f9fafa; font-weight: 700; padding: 12px 15px; color: #1a2126; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); border-radius: 5px; border: 2px solid #2b363e; }

.footer-dev-list > li > a .icon { margin: -2px 0px 0 7px; }

.footer-dev-list a { font-size: 14px; display: block; font-weight: 700; color: #b8c5ce; text-decoration: none; padding: 8px 15px; line-height: 18px; }

.footer-dev-list a:hover { color: #fff; }

.footer-dev-list ul { background: #384047 url("/assets/dev-stripes-0df15acae28e6b0095253b1fc0d072ca1c7bb55a709de3543953fafe6c11609a.svg") repeat-x 0 -2px; padding-top: 3px; padding-left: 0; width: 250px; position: absolute; bottom: 100%; left: 0; z-index: 2; margin: 0; display: none; overflow: hidden; border-radius: 5px 5px 5px 0; }

.footer-dev-list ul li { list-style-type: none; font-size: 14px; padding: 0; color: #c6ccd2; }

.footer-dev-list ul li.break { border-bottom: 1px rgba(255, 255, 255, 0.2) solid; }

.footer-dev-list ul li:last-child { border: none; }

.footer-dev-list ul li a { font-weight: 400; padding: 10px 15px; }

.footer-dev-list ul li a:hover { background: #414a52; }

@media screen and (max-height: 1200px) { .footer-dev-listaccounts ul { height: 500px; overflow-y: scroll; } }
.navbar-announcement-margin { margin-top: 20px; }

.navbar-announcement-padding { padding-top: 30px; }

.navbar-announcement-margin-application { margin-top: 40px; }

.nav-announcement { min-height: 40px; position: fixed; display: flex; align-items: center; justify-content: center; top: 0; left: 0; right: 0; z-index: 5000; word-break: break-word; padding: 0 20px; }

.nav-announcement .nav-announcement-slider { max-width: 900px; padding: 5px 0px; }

.nav-announcement .nav-announcement-slider .swiper-slide-active { margin: auto; }

.nav-announcement .nav-announcement-slider .swiper-button-prev, .nav-announcement .nav-announcement-slider .swiper-button-next { color: #fff; }

.nav-announcement .nav-announcement-slider .swiper-button-prev::after, .nav-announcement .nav-announcement-slider .swiper-button-next::after { line-height: 2 !important; font-size: 1.2rem !important; font-weight: 600 !important; }

.nav-announcement .nav-announcement-slider .announcement-message { text-align: center; font-size: 13px; font-weight: 500; line-height: 16px; word-break: break-word; padding-inline: 40px; width: 100%; margin: 0 auto; }

.nav-announcement .nav-announcement-slider .announcement-message a { color: inherit !important; }

.nav-announcement .nav-announcement-slider .announcement-message a:hover { color: #3333ff !important; text-decoration: underline; }

.nav-announcement .nav-announcement-slider .announcement-message:hover { color: #fff; }

.nav-announcement .nav-announcement-slider .announcement-message.grabbable { cursor: grab; }
.plan-panel { position: relative; z-index: 2; padding: 30px; border-radius: 4px; background: white; text-align: left; box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.15); }

.plan-panel-header:before, .plan-panel-header:after { content: " "; display: table; }

.plan-panel-header:after { clear: both; }

.plan-panel-header h3 { float: left; margin: 0 0 20px 0; }

.plan-panel-header span { float: right; font-size: 26px; color: #5fcf80; }

.plan-panel-features { margin: 0 0 30px 0; }

.plan-panel-features li { position: relative; line-height: 1.5em; margin-bottom: 20px; padding: 0 0 0 34px; list-style: none; }

.plan-panel-features li.strikethrough { text-decoration: line-through; }

.plan-panel-features li .check-circle-icon, .plan-panel-features li .cross-circle-icon { position: absolute; top: -1px; left: 0px; width: 24px; height: 24px; }

.plan-panel-features li .check-circle-icon { fill: #5fcf80; }

.plan-panel-features li .cross-circle-icon { fill: #c6ccd2; }

.plan-basic { margin-bottom: 20px; }

@media screen and (max-width: 767px) { .plan-basic { top: 0px; } }

.plan-pro { margin-bottom: 20px; }

.plan-pro .plan-panel-header span { color: #3f8abf; }

.plan-pro .plan-panel-features li .check-circle-icon { fill: #3f8abf; }

.plan-pro .button-primary { background: #3f8abf; border-color: #3f8abf; }

.plan-pro .button-primary:hover { background: #3f8abf; border-color: #3f8abf; }

.plan-b2b .plan-panel-header span { color: #ff9f1f; }

.plan-b2b .plan-panel-features li .check-circle-icon { fill: #ff9f1f; }

.plan-b2b .button-primary { background: #ff9f1f; border-color: #ff9f1f; }

.plan-b2b .button-primary:hover { background: #eb8600; border-color: #eb8600; }

.plan-td .plan-panel-header span { color: #387BC9; }

.plan-td .plan-panel-features li .check-circle-icon { fill: #387BC9; }

.plan-td .button-primary { border-color: #387BC9; background-color: #387BC9; }

.plan-td .button-primary:hover, .plan-td .button-primary:focus { border-color: #2c63a2; background-color: #2c63a2; }
.dropdown { background: #f9fafa; min-width: 200px; max-width: 420px; position: absolute; top: 50px; display: none; z-index: 100; border-radius: 5px; text-align: left; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.08); }

.dropdown-show .dropdown { display: block; }

.dropdown:before { position: absolute; content: ""; background: #fff; width: 12px; height: 12px; border-radius: 3px 0 0 0; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.08); top: -6px; }

.dropdown.left, .dropdown-left { left: 0; }

.dropdown.left:before, .dropdown-left:before { left: 20px; }

.dropdown.right, .dropdown-right { right: -20px; }

.dropdown.right:before, .dropdown-right:before { right: 20px; }

.dropdown .dropdown-title { display: block; background: #fff; font-size: 16px; line-height: 20px; position: relative; z-index: 1; border-bottom: 1px solid #e8ebed; border-radius: 5px 5px 0 0; margin: 0; }

.dropdown .dropdown-title a { display: block; padding: 15px 20px; color: #101417; }

.dropdown .dropdown-title a:hover { color: black; }

.dropdown > ul { margin: 0; background: #f9fafa; }

.dropdown > ul > li { list-style: none; border: 0 solid #f0f2f4; border-width: 0 0 1px; font-weight: 400; margin: 0; transition: background-color 0.3s ease, border-color 0.3s ease; }

.dropdown > ul > li:last-child { border-bottom: none; }

.dropdown > ul > li:not(.without-hover):hover { background: #fff; border-color: #e8ebed; }

.dropdown > ul > li:not(.without-hover):hover > a { color: #101417; }

.dropdown > ul > li:not(.without-hover):hover > a svg { fill: #1a2126; }

.dropdown > ul > li > a { position: relative; display: block; padding: 15px 20px; font-size: 14px; line-height: 18px; font-weight: 700; color: #1a2126; transition: background-color 0.3s ease, color 0.3s ease; }

.dropdown > ul > li > a:before, .dropdown > ul > li > a:after { content: " "; display: table; }

.dropdown > ul > li > a:after { clear: both; }

.dropdown > ul > li > a > svg { fill: #2b363e; }

.dropdown .empty { padding: 60px 20px; margin: 0; font-size: 14px; color: #2b363e; text-align: center; }

.dropdown .empty .button { margin: 15px 40px; display: block; }

.dropdown .dropdown-secondary { position: relative; display: block; padding: 15px 20px; font-size: 14px; line-height: 18px; font-weight: 700; color: #1a2126; transition: background-color 0.3s ease, color 0.3s ease; border-radius: 0 0 5px 5px; background: #fff; border-top: 1px solid #e8ebed; }

.dropdown .dropdown-secondary:before, .dropdown .dropdown-secondary:after { content: " "; display: table; }

.dropdown .dropdown-secondary:after { clear: both; }

.dropdown .dropdown-secondary > svg { fill: #2b363e; }

.dropdown .dropdown-secondary:hover { background: #edeff0; color: #101417; }

body { transition: padding 600ms 0s ease; }

.header-nav-item-profile-dropdown { top: 96%; right: -90px; max-width: 200px; }

body { padding-top: 0 !important; }

.nav { z-index: 1 !important; box-shadow: none !important; position: static !important; }

.nav22-override { z-index: 9 !important; position: absolute !important; box-shadow: none !important; }

@media screen and (max-width: 970px) { .signin22-wrapper #signout22 { right: 30px !important; top: -2px !important; } }

@media screen and (max-width: 679px) { .signin22-wrapper #signout22 { top: -3px !important; right: -100px !important; } }

@media screen and (max-width: 970px) { .signin22-wrapper { display: block !important; } }

@media screen and (max-width: 679px) { .nav22-mobile-override { right: 10px !important; } }

.nav { display: flex; align-items: center; background: #fff; box-shadow: 0 0 1px rgba(0, 65, 94, 0.2); z-index: 102; transition: height 600ms 0s ease; position: fixed; top: 0; right: 0; left: 0; }

@media screen and (max-width: 679px) { .nav { height: 50px; } }

@media screen and (min-width: 680px) { .nav { height: 70px; } }

@media screen and (max-width: 969px) { .hamburger-button-clicked .nav { bottom: 0; height: 100%; overflow-y: auto; } }

@media screen and (max-width: 679px) { .nav { display: flex; flex-wrap: wrap; align-content: space-between; } }

@media screen and (max-width: 969px) { .hamburger-button-clicked .nav { height: 100vh; align-items: start; } }

.nav-container { padding-top: 0; padding-bottom: 0; width: 100%; position: relative; max-width: 1260px; margin: 0 auto; height: 70px; display: flex; }

@media screen and (max-width: 969px) { .nav-container { padding: 30px; } }

@media screen and (max-width: 679px) { .nav-container { padding: 0 15px; } }

@media screen and (max-width: 969px) { .nav-container { flex-wrap: wrap; padding: 0 !important; }
  .hamburger-button-clicked .nav-container { height: 94vh; } }

.nav-container-2022 { padding-top: 0; padding-bottom: 0; width: 100%; position: relative; max-width: 1400px; margin: 0 auto; }

@media screen and (max-width: 969px) { .nav-container-2022 { padding: 30px; } }

@media screen and (max-width: 679px) { .nav-container-2022 { padding: 0 15px; } }

.nav-list { list-style: none; position: relative; width: 100%; margin: 0 auto; text-align: right; overflow: visible; padding-left: 0; position: inherit; }

@media screen and (max-width: 969px) { .nav-list { text-align: left; } }

.nav-list:before, .nav-list:after { content: " "; display: table; }

.nav-list:after { clear: both; }

@media screen and (max-width: 679px) { .hamburger-button-clicked .nav-list { padding-top: 50px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .hamburger-button-clicked .nav-list { padding-top: 70px; } }

.nav-list:before, .nav-list:after { content: " "; display: table; }

.nav-list:after { clear: both; }

@media screen and (max-width: 969px) { .nav-list { padding: 0 15px; }
  .hamburger-button-clicked .nav-list { min-height: 91vh; } }

@media screen and (max-width: 679px) { .nav-list { text-align: left; } }

.nav-list-2022 { list-style: none; position: relative; width: 100%; margin: 0 auto; text-align: left; padding-left: 9em; cursor: default; }

@media screen and (max-width: 969px) { .nav-list-2022 { text-align: right; } }

.nav-list-2022:before, .nav-list-2022:after { content: " "; display: table; }

.nav-list-2022:after { clear: both; }

@media screen and (max-width: 679px) { .hamburger-button-clicked .nav-list-2022 { padding-top: 50px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .hamburger-button-clicked .nav-list-2022 { padding-top: 70px; } }

.nav-list-2022:before, .nav-list-2022:after { content: " "; display: table; }

.nav-list-2022:after { clear: both; }

@media screen and (min-width: 1300px) { .nav-list-2022 { margin-left: 30px; } }

@media screen and (max-width: 970px) { .nav-list-2022 { padding-left: 0; margin-left: 0; } }

@media screen and (max-width: 679px) { .nav-list-2022 { text-align: left; } }

.nav-block-2022 { margin: 0 0 0 15px; }

.nav-item { font-weight: 700; line-height: 30px; font-size: 14px; display: inline-block; }

@media screen and (max-width: 679px) { .nav-item { line-height: 50px; } }

@media screen and (min-width: 680px) { .nav-item { line-height: 70px; } }

@media screen and (min-width: 970px) { .nav-item { margin: 0 30px 0 0; } }

@media screen and (min-width: 970px) { .nav-item { margin: 0 10px; } }

.nav-item-secondary { transition: opacity 200ms 0s ease; }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-secondary { opacity: 1; } }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-secondary { right: 30px; } }

@media screen and (max-width: 969px) { .nav-item-tablet { display: none; min-width: 200px; line-height: 40px; font-size: 18px; }
  .hamburger-button-clicked .nav-item-tablet { display: block; } }

.nav-item-tablet.nav-item-show-on-mobile { border-bottom: 2px solid #d4d9dd; }

.nav-item-show-on-mobile { display: none; }

@media screen and (max-width: 969px) { .nav-item-show-on-mobile { display: block; display: none; min-width: 200px; line-height: 40px; font-size: 18px; border-bottom: 2px solid #d4d9dd; }
  .hamburger-button-clicked .nav-item-show-on-mobile { display: block; } }

.nav-item-show-on-mobile-container { float: right; height: 70px; display: flex; align-items: center; justify-content: center; }

.nav-item-show-on-mobile-container .toggle-steps { padding: 0; margin: 0; }

.nav-item-show-on-mobile .nav-link { color: #3b3b3b; font-size: 16px; font-weight: 400; display: inline-block; }

.nav-item .toggle-steps-hide { display: none; }

.nav-item-mobile .current a { color: #303853; border-bottom: 2px solid #b7c0c7; padding-bottom: 2px; }

.nav-item-submenu { font-size: 1rem; line-height: 40px; padding-left: 15px; padding-bottom: 1rem; margin: 0; }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { margin-top: 12px; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { position: absolute; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { top: 0; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { right: 60px; } }

@media screen and (max-width: 380px) { .nav-item-cta { right: 52px; } }

.nav-item-logo { transition: top 600ms 0s ease; }

@media screen and (min-width: 970px) { .nav-item-logo { position: absolute; left: 0; position: absolute; top: 17px; } }

@media screen and (max-width: 969px) { .nav-item-logo { width: 30px; height: 32px; position: absolute; top: -8px; } }

@media screen and (max-width: 680px) { .nav-item-logo { position: absolute; top: 9px; } }

@media screen and (min-width: 679px) { .nav-item-logo { margin-top: 24px; } }

@media screen and (min-width: 970px) { .nav-item-logo { margin-top: 0; } }

.nav-item-logo-container { margin: 0; position: relative; width: 100%; height: 100%; line-height: 1.3; }

.nav-item-logo-icon { display: block; }

@media screen and (max-width: 380px) { .nav-item-logo-icon { max-width: 110px; margin-top: 5px; } }

.nav-item-logo-icon .icon-treehouse { fill: #3e474f; }

.nav-item-logo-icon .icon-logo { fill: #5fcf80; }

.nav-item:hover .nav-item-logo-icon .icon-treehouse { fill: #282d32; }

.nav-item:hover .nav-item-logo-icon .icon-logo { fill: #3ac162; }

@media screen and (max-width: 969px) { .nav-item-free-trial { margin-top: 19px !important; } }

@media screen and (max-width: 679px) { .nav-item-free-trial { margin-top: 10px !important; } }

@media screen and (max-width: 969px) { .nav-item-sign-in { position: absolute; } }

@media screen and (max-width: 969px) { .nav-item-sign-in { top: 18px !important; } }

@media screen and (max-width: 679px) { .nav-item-sign-in { right: 40px; } }

.nav-item-sign-in-secondary { transition: opacity 200ms 0s ease; }

@media screen and (min-width: 680px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-secondary { opacity: 1; } }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-secondary { right: 30px; } }

@media screen and (max-width: 679px) { .visitor .nav-item-sign-in { top: 12px !important; } }

@media screen and (max-width: 969px) { .visitor .nav-item-sign-in { top: -7px; } }

@media screen and (max-width: 969px) { .visitor .nav-item-sign-in { right: 10px; } }

@media screen and (max-width: 380px) { .visitor .nav-item-sign-in { right: 0; left: 47%; }
  .visitor .nav-item-sign-in a { font-size: 12px; } }

.logged-in .nav-item-sign-in { right: -80px; display: inline-block !important; }

.nav-item-sign-in-2022 { position: absolute; z-index: 11; top: -145px; right: 180px; font-size: 1rem; color: #fff; }

@media screen and (max-width: 969px) { .nav-item-sign-in-2022 { position: absolute; } }

@media screen and (max-width: 969px) { .nav-item-sign-in-2022 { top: 0; } }

@media screen and (max-width: 969px) { .nav-item-sign-in-2022 { right: 97px; } }

.nav-item-sign-in-2022-secondary { transition: opacity 200ms 0s ease; }

@media screen and (min-width: 680px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-2022-secondary { opacity: 1; } }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-2022-secondary { right: 30px; } }

@media screen and (max-width: 679px) { .visitor .nav-item-sign-in-2022 { top: 7px !important; } }

@media screen and (max-width: 969px) { .visitor .nav-item-sign-in-2022 { top: -7px; } }

@media screen and (max-width: 969px) { .visitor .nav-item-sign-in-2022 { right: 10px; } }

.logged-in .nav-item-sign-in-2022 { right: -80px; display: inline-block !important; }

.nav-item-sign-in-2022 a:hover { color: #edba36 !important; }

.nav .current .nav-toggle { border-bottom: 4px solid #cccccc; }

.nav-block { display: inline-block; }

@media screen and (min-width: 970px) { .nav-block { float: left; margin-left: 15%; } }

@media screen and (max-width: 969px) { .nav-block { width: 100%; } }

.nav-block-mobile-tablet { display: none; }

@media screen and (max-width: 969px) { .nav-block-mobile-tablet { display: none; min-width: 200px; margin: 0 auto; clear: both; line-height: 40px; top: 200px; }
  .hamburger-button-clicked .nav-block-mobile-tablet { display: block; } }

@media screen and (max-width: 969px) { .nav-block-hide-on-mobile { display: none; } }

.nav-social { padding: 1rem 0; text-align: center; width: 100%; background-color: #2d3339; }

@media screen and (max-width: 969px) { .hamburger-button-clicked .nav-social { display: flex !important; align-items: center; justify-content: center; gap: 20px; } }

.nav-social svg { fill: #fff; }

.nav-social-link { display: flex; }

.nav-link, .nav a { color: #387bab; transition: color 300ms 0s ease; font-weight: 700; }

.nav-link:hover, .nav-link:active, .nav-link:focus, .nav a:hover, .nav a:active, .nav a:focus { color: #2a5d81; }

.nav-link-2022, .nav a { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #3b3b3b; transition: color 300ms 0s ease; font-weight: 300; font-size: 1rem; }

.nav-link-2022:hover, .nav-link-2022:active, .nav-link-2022:focus, .nav a:hover, .nav a:active, .nav a:focus { color: #3b3b3b; }

.nav-link-2022-w, .nav a-w { color: #fff !important; }

.nav-link-2022:not(.nav-link-sign-in):hover, .nav a:not(.nav-link-sign-in):hover { background-color: #F0F0F0; }

.nav-link { position: relative; }

@media screen and (max-width: 969px) { .nav-link { display: block; } }

@media screen and (min-width: 970px) { .nav-link { display: inline-block; } }

@media screen and (max-width: 969px) { .nav-link:not(.nav-link-sign-in):not(.nav-link-sign-out):not(.nav-link-logo):not(.nav-link-free-trial) { margin: 1rem 15px; } }

.current .nav-link { color: #303853; }

.current .nav-link::after { content: ''; position: absolute; width: 100%; height: 0; left: 0; bottom: 21px; border-bottom: 4px solid #cccccc; }

@media screen and (max-width: 969px) { .current .nav-link::after { bottom: 6px; } }

.nav-link.button:not(.button--primary-ubora) { font-size: 12px; height: 30px; line-height: 26px; padding: 0 10px; background: #008298; background: linear-gradient(to bottom, #008298 0%, #007589 100%); border-color: transparent; color: #fff !important; }

@media screen and (max-width: 380px) { .nav-link.button:not(.button--primary-ubora) { padding: 0 5px; } }

.nav-link.button:not(.button--primary-ubora):hover, .nav-link.button:not(.button--primary-ubora):active, .nav-link.button:not(.button--primary-ubora):focus { background: linear-gradient(#004652, #004652); border-color: transparent !important; color: #fff !important; }

.nav-link-sign-in:hover, .nav-link-sign-out:hover { color: #0e8397 !important; }

@media screen and (max-width: 969px) { .nav-link-sign-in, .nav-link-sign-out { line-height: 30px; font-size: 14px; } }

.nav-link-learn::after { content: ''; position: relative; display: inline-block; margin-left: 4px; top: -1px; width: 12px; height: 7px; background-size: auto; background-repeat: no-repeat; background-position: center; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2010%22%3E%0D%0A%09%3Cpath%20fill%3D%22%237b8b8e%22%20d%3D%22M9.5%2C9.5c-0.4%2C0-0.7-0.1-1-0.4L2%2C3.1C1.4%2C2.5%2C1.3%2C1.6%2C1.9%2C1C2.5%2C0.4%2C3.4%2C0.3%2C4%2C0.9L9.5%2C6L15%2C0.9%0D%0A%09%09c0.6-0.6%2C1.6-0.5%2C2.1%2C0.1c0.6%2C0.6%2C0.5%2C1.6-0.1%2C2.1l-6.5%2C6C10.2%2C9.4%2C9.9%2C9.5%2C9.5%2C9.5z%22%2F%3E%0D%0A%3C%2Fsvg%3E"); }

.nav .nav-dropdown { position: relative; }

.nav .nav-dropdown.active .nav-toggle { border-bottom: 4px solid #53b16b; }

.nav .nav-dropdown-menu { display: none; position: absolute; padding-block: 10px; top: 75px; left: 0; z-index: 999; background: #fff; border: 2px solid #cccccc; }

.nav .nav-dropdown.active .nav-dropdown-menu { display: flex; flex-direction: column; text-align: left; white-space: nowrap; }

.nav .nav-dropdown-menu a { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 40px; padding-inline: 24px; }

.nav .nav-dropdown-menu a:hover { background: #F0F0F0; }

.nav .nav-toggle { font-size: 16px; line-height: 30px; border: none; background: #fff; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.toggle-steps { display: block; font-weight: 500; cursor: pointer; }

.toggle-steps:not(.nav-link) { font-size: 1.5rem; color: #4b5658; padding-bottom: 1.5rem; margin-bottom: 1rem; }

.toggle-steps:not(.nav-link) .marketing-layout, .marketing-2020-layout .toggle-steps:not(.nav-link) { border-bottom: 2px solid #d4d9dd; }

@media screen and (max-width: 969px) { .toggle-steps.nav-link { color: #0098b1; border-bottom: 2px solid #d4d9dd; } }

.toggle-steps.nav-link .toggle-steps-view-chevron { cursor: pointer; }

@media screen and (min-width: 969px) { .toggle-steps.nav-link .toggle-steps-view-chevron { display: none; } }

.toggle-steps-view { display: flex; align-items: center; }

.toggle-steps-view-2 { justify-content: space-between; }

.toggle-steps-view-minusplus:after { content: '+'; position: relative; margin-left: auto; padding: 0.5rem; border-radius: 50%; height: 40px; min-width: 34px; color: #0e8397; font-weight: 700; }

.toggle-steps-view-plusminus:after { content: '+'; position: relative; margin-left: auto; padding: 0.5rem; border-radius: 50%; height: 40px; min-width: 34px; color: #0e8397; font-weight: 700; }

.toggle-steps-view-chevron { position: relative; margin-left: auto; background-color: #0098b1; padding: 1rem; border-radius: 50%; height: 40px; min-width: 40px; }

.toggle-steps-view-chevron svg { fill: white; position: absolute; top: 17px; left: 14px; }

.toggle-steps.selected .chevron-icon { transform: rotate(180deg); }

.toggle-steps.selected-2 .toggle-steps-view-minusplus:after { content: "-"; position: relative; margin-left: auto; padding: 0.5rem; border-radius: 50%; height: 40px; min-width: 34px; color: #0e8397; font-weight: 700; }

.toggle-steps.selected-2 .toggle-steps-view-plusminus:after { content: "-"; position: relative; margin-left: auto; padding: 0.5rem; border-radius: 50%; height: 40px; min-width: 34px; color: #0e8397; font-weight: 700; }

.toggle-steps.selected-2 .toggle-steps-view-2 { justify-content: space-between; }

.steps-list { max-width: 800px; }

.steps-list-override { max-width: 1018px; }

@media screen and (max-width: 969px) { .toggle-steps-hide { display: none; } }
#new_forum_post_form { display: none; }

#new_forum_post_form .mixed-box { max-width: 720px; margin: 0 auto; }

#new_forum_post_form .box-header { padding-top: 25px; padding-bottom: 0; }

#new_forum_post_form .box-header .modal-close { top: 20px; }

@media screen and (min-width: 680px) { #new_forum_post_form .box-header .modal-close { right: 30px; } }

@media screen and (max-width: 679px) { #new_forum_post_form .box-header .modal-close { right: 20px; } }

#new_forum_post_form .box-header h2 { font-size: 18px; line-height: 20px; color: #2d3339; }

#new_forum_post_form .box-content, #new_forum_post_form .box-footer:not(.secondary) { padding-top: 20px; }

#new_forum_post_form .discussion-title label { font-size: 16px; top: 15px; left: 17px; }

#new_forum_post_form .discussion-title textarea.form-element { font-weight: 400; font-size: 16px; height: 74px !important; min-height: 0; padding: 11px 15px; resize: none; line-height: 24px; background: #fff; }

#new_forum_post_form .discussion-title .avatar { position: absolute; top: 25px; left: 20px; z-index: 1; }

#new_forum_post_form .form-footer button { margin-right: 15px; margin-bottom: 0; }

@media screen and (min-width: 680px) { #new_forum_post_form .form-footer p { padding-top: 12px; } }

@media screen and (max-width: 679px) { #new_forum_post_form .form-footer p { display: none; } }

@media screen and (min-width: 680px) { #new_forum_post_form #posting-tips { padding-top: 25px; padding-bottom: 25px; } }

#new_forum_post_form #posting-tips h4 { font-size: 14px; line-height: 20px; color: #1a2126; margin: 0 0 15px; }

#new_forum_post_form #posting-tips ul { list-style: none; }

#new_forum_post_form #posting-tips li { font-size: 13px; line-height: 1.5; }

#new_forum_post_form #posting-tips li:not(:last-child) { margin-bottom: 15px; }

#new_forum_post_form #posting-tips p { padding-left: 39px; color: #2b363e; margin: 0; position: relative; }

#new_forum_post_form #posting-tips a { font-weight: 700; color: #1a2126; transition: color 0.3s ease; }

#new_forum_post_form #posting-tips a:hover { color: #35A961; }

#new_forum_post_form #posting-tips svg { position: absolute; top: 3px; left: 0; fill: #546b7b; }

#new_forum_post_form .suggested-questions h3 { margin: 5px 0 10px 0; font-size: 15px; font-weight: 700; color: #1a2126; }

#new_forum_post_form .suggested-questions ul { list-style: none; }

#new_forum_post_form .suggested-questions ul li { padding: 11px 0 10px 0; border-top: 1px solid #f0f2f4; line-height: 1.4; font-size: 14px; position: relative; }

#new_forum_post_form .suggested-questions ul li.best { background: url("/assets/icons/icon-check-circle-dcf12c5980aa2b3a2990cb5faf8dd33b0c27b9cfa4602a9fca5dc138b317c12d.svg") no-repeat right 13px; width: 100%; background-size: 21px 18px; }

#new_forum_post_form .suggested-questions ul li.best strong { font-weight: 700; color: #5fcf80; }

#new_forum_post_form .suggested-questions ul li a { font-weight: 700; color: #3f8abf; display: block; padding-right: 40px; }

#new_forum_post_form .suggested-questions ul li a span { display: block; color: #2b363e; font-weight: 400; padding-top: 2px; }

#new_forum_post_form .suggested-questions ul li a span em { margin: 0 3px; font-weight: 400; color: #2b363e; }

#new_forum_post_form .suggested-questions ul li strong { font-weight: 400; font-size: 13px; }

#new_forum_post_form .no-existing-questions { margin: 0 0 5px 0; padding-top: 11px; }

#new_forum_post_form .no-existing-questions p { background: #f9fafa; padding: 16px 10px 15px 10px; font-weight: 700; text-align: center; font-size: 13px; border-radius: 5px; color: #2b363e; margin: -10px -15px 15px -15px; }

#new_forum_post_form .no-existing-questions p .icon { width: 21px; height: 21px; background-size: 21px 21px; margin: -3px 3px 0 0; }

#new_forum_post_form .step-2 .discussion-title label, #new_forum_post_form .step-3 .discussion-title label { left: 70px; }

#new_forum_post_form .step-2 .discussion-title textarea.form-element, #new_forum_post_form .step-3 .discussion-title textarea.form-element { padding-left: 70px; }

#new_forum_post_form .step-2 .mentions-input-box textarea.form-element, #new_forum_post_form .step-3 .mentions-input-box textarea.form-element { min-height: 215px; line-height: 1.5 !important; }

#new_forum_post_form .step-3 #post-options { border-bottom: 1px solid #f0f2f4; margin: 0 0 30px; list-style: none; }

#new_forum_post_form .step-3 #post-options input { float: left; margin: 6px 12px 0 0; vertical-align: middle; }

#new_forum_post_form .step-3 #post-options label { font-size: 14px; color: #1a2126; line-height: 1; }

#new_forum_post_form .step-3 .code-attachments { display: block; height: auto; border-radius: 5px; border: 2px solid #e8ebed; margin-bottom: 15px; padding: 12px 15px 10px 15px; }

#new_forum_post_form .step-3 .code-attachments .file { margin-right: 15px; font-weight: 700; display: inline-block; }

#new_forum_post_form .step-3 .code-attachments .icon { margin-right: 8px; }

#new_forum_post_form .modal-flow-step-two { display: none; }

#new_forum_post_form .modal-flow-step-three { display: none; }

#new_forum_post_form .code-attachment-filename { display: block; height: auto; background: #2d3339; padding: 18px 15px 22px 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 14px; font-weight: 700; margin-bottom: -4px; color: #FFF; }

#new_forum_post_form .code-attachment-filename span { cursor: pointer; }

#new_forum_post_form .code-attachment-filename span.icon { margin: -4px 5px 0 0; opacity: 0.5; }

#new_forum_post_form .forum-preview { display: none; background: #FFF; border: 2px solid #d4d9dd; margin: 0 0 15px 0; padding: 11px 15px 39px 15px; outline: 0; -webkit-appearance: none; border-radius: 5px; min-height: 101px; transition: 0; }

#new_forum_post_form #question-modal-form .forum-preview { min-height: 161px; }

#new_forum_post_form .form-item .forum-preview p { margin-top: 0; margin-bottom: 21px; }

#new_forum_post_form .discussion-comments textarea.form-element { padding-bottom: 39px; transition: 0; line-height: 1.5 !important; }

#new_forum_post_form #question-modal-form #forum_post_body { padding-bottom: 39px; transition: 0; }
.plan-pricetable { font-size: 14px; margin-bottom: 15px; display: block; width: 100%; }

.plan-pricetable tr { height: 30px; }

.plan-pricetable tr td { vertical-align: middle; text-align: right; width: 20%; }

.plan-pricetable tr .plan-pricetable-heading { width: 80%; text-align: left; }

.plan-pricetable tr:last-child { border-top: 1px solid #eaeaea; height: 50px; }
.modal-points dl div { min-height: 60px; margin-bottom: 20px; vertical-align: middle; }

.modal-points dl dt { font-size: 14px; font-weight: 400; line-height: 1.5; display: block; margin-bottom: 10px; }

.modal-points dl strong { display: block; font-weight: 700; color: #326e99; }

.modal-points dl dd { font-size: 18px; font-weight: 700; color: #050708; display: block; }
div.video-modal .box, div.video-modal .mixed-box { max-width: 900px; margin: 0 auto; }

div.video-modal button.modal-close { top: 40px; right: 40px; background: rgba(0, 0, 0, 0.2); }

div.video-modal p.video-description { margin: 0; line-height: 1.6; }
#project-submission-content .note { line-height: 1.5; }
.modal svg#confetti-bg { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.modal svg#confetti-bg ellipse, .modal svg#confetti-bg path, .modal svg#confetti-bg polygon, .modal svg#confetti-bg rect { -webkit-animation-name: fanFair; -moz-animation-name: fanFair; animation-name: fanFair; -webkit-animation-duration: 10s; -moz-animation-duration: 10s; animation-duration: 10s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.modal svg#confetti-bg polygon, .modal svg#confetti-bg rect { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; animation-delay: 3s; }
#sell-modal svg#guarantee-icon { width: 200px; }
.step-overlay { background: #384047; display: none; text-align: center; overflow: hidden; position: relative; min-height: 450px; max-height: 560px; }

.step-overlay-loading .step-overlay, .step-completed .step-overlay { display: block; }

.step-overlay-rounded-bottom .step-overlay { border-radius: 0 0 5px 5px; }

.step-overlay-container { overflow: hidden; margin: -35px auto 0; position: absolute; top: 50%; right: 0; left: 0; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); transition: opacity 300ms 0s ease; }

@media screen and (min-width: 680px) { .step-overlay-container { padding: 60px 30px; } }

@media screen and (max-width: 679px) { .step-overlay-container { padding: 30px; } }

.step-overlay-container:not(.current) { opacity: 0; z-index: -1; }

.step-overlay-container:not(.step-progress) { height: 100%; margin-top: 5px; }

.step-overlay-container.active { opacity: 1; z-index: 1; }

.rate-step .step-overlay-container.active { opacity: 0; z-index: -1; }

.step-overlay-loading-container { position: relative; }

@media screen and (min-width: 680px) { .step-overlay-loading-container { height: 500px; } }

@media screen and (max-width: 679px) { .step-overlay-loading-container { height: 300px; } }

.step-overlay-loading-icon { width: 24px; height: 24px; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; }

.step-overlay-loading-icon .loading-circle { fill: #475059; }

.step-overlay-loading-icon .loading-quarter-circle { fill: #b9c1ca; }

.step-overlay-title, .step-overlay-subtitle { line-height: 1.2; position: relative; z-index: 1; }

.step-overlay-title { color: #fff; margin: 0 0 6px; }

@media screen and (min-width: 680px) { .step-overlay-title { font-size: 32px; } }

@media screen and (max-width: 679px) { .step-overlay-title { font-size: 20px; } }

.step-overlay-subtitle { color: #87929d; }

@media screen and (min-width: 680px) { .step-overlay-subtitle { font-size: 20px; } }

@media screen and (max-width: 679px) { .step-overlay-subtitle { font-size: 14px; } }

.step-overlay .recommended-card { float: none; }

.step-practice { margin-bottom: 20px; }

@media screen and (min-width: 680px) { .step-practice { border-left: 1px solid rgba(255, 255, 255, 0.1); } }

@media screen and (max-width: 679px) { .step-practice { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 30px; } }

.step-practice-card { margin-left: auto; margin-right: auto; float: none; width: 80%; text-align: left; margin-top: 30px; }

.step-card { float: none; text-align: left; margin: 30px auto; }

@media screen and (min-width: 680px) { .step-card { width: 70% !important; } }

@media screen and (max-width: 679px) { .step-card { width: 100% !important; } }
.step-overlay-button-group { background: #323a40; list-style: none; height: 70px; position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; }

@media screen and (min-width: 680px) { .step-overlay-button-group { padding: 15px 30px; } }

@media screen and (max-width: 679px) { .step-overlay-button-group { padding: 15px; } }

.step-overlay-rounded-bottom .step-overlay-button-group { border-radius: 0 0 4px 4px; }

.step-overlay-button-item { float: left; }

.step-overlay-button-item:not(:first-child) { margin-left: 10px; }

.step-overlay-button-item.primary { float: right; }

.rated-step .step-overlay-button-item-text { display: none; }

.step-overlay-button-secondary { background-color: #475059; border-color: #475059 !important; }

.step-overlay-button-secondary, .step-overlay-button-secondary:active { color: #b9c1ca !important; }

.step-overlay-button-secondary svg:not(.star-small-icon), .step-overlay-button-secondary:active svg:not(.star-small-icon) { fill: #b9c1ca !important; }

.step-overlay-button-secondary:hover { background-color: #424b53; border-color: #424b53 !important; color: #fff !important; }

button:not(.step-rated).step-overlay-button-secondary:hover svg.star-small-icon { stroke: #fff; }

.step-overlay-button-secondary:hover svg:not(.star-small-icon) { fill: #fff !important; }

.step-overlay-button-secondary-text { margin-left: 7px; }

.step-failed .step-overlay-button-next { display: none; }

.step-overlay-button-skip, .step-overlay-button-retry { display: none; }

.step-failed .step-overlay-button-skip, .step-failed .step-overlay-button-retry { display: block; }

.step-overlay-button-feedback.step-rated span { display: none; }

.step-overlay-button-feedback-icon { stroke-width: 2px; stroke-linecap: round; }

svg.step-overlay-button-feedback-icon { width: 14px; height: 14px; }

button.step-overlay-button-feedback .step-overlay-button-feedback-icon:not(.has-topic-fill), button.step-overlay-button-feedback:hover .step-overlay-button-feedback-icon:not(.has-topic-fill) { fill: none; }

.step-overlay-button-feedback-icon:not(.has-topic-stroke) { stroke: #b9c1ca; }

.step-rated .step-overlay-button-feedback-icon:not(.has-topic-stroke) { stroke: #697684; }

.step-overlay-button-feedback-icon:not(:first-child) { margin-left: 2px; }

button:not(.step-rated) .step-overlay-button-feedback-icon:nth-child(n+2) { display: none; }
.step-overlay-pagination { transition: opacity 300ms 0s ease; }

.rate-step .step-overlay-pagination, .step-failed .step-overlay-pagination { opacity: 0; pointer-events: none; }

.step-overlay-pagination-action { border: none; cursor: pointer; width: 12.5%; z-index: 3; overflow: hidden; background: none; outline: none; position: absolute; top: 0; bottom: 0; }

@media screen and (max-width: 969px) { .step-overlay-pagination-action { display: none; } }

.step-overlay-pagination-action-prev { left: 0; }

.step-overlay-pagination-action-next { right: 0; }

.step-overlay-pagination-circle { display: block; background: rgba(0, 0, 0, 0.05); position: absolute; top: 50%; margin-top: -95px; border-radius: 50%; width: 120px; height: 120px; transition: transform 300ms 0s ease; }

.step-overlay-pagination-action-prev .step-overlay-pagination-circle { left: -90px; }

.step-overlay-pagination-action-next .step-overlay-pagination-circle { right: -90px; }

.step-overlay-pagination-action-prev:hover .step-overlay-pagination-circle { -ms-transform: translatex(30px); -moz-transform: translatex(30px); -webkit-transform: translatex(30px); transform: translatex(30px); }

.step-overlay-pagination-action-next:hover .step-overlay-pagination-circle { -ms-transform: translatex(-30px); -moz-transform: translatex(-30px); -webkit-transform: translatex(-30px); transform: translatex(-30px); }

.step-overlay-pagination-icon { fill: #fff; opacity: 0; position: absolute; top: 50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

.step-overlay-pagination-action-prev .step-overlay-pagination-icon { left: 75px; }

.step-overlay-pagination-action-next .step-overlay-pagination-icon { right: 75px; }

.step-overlay-pagination-action:hover .step-overlay-pagination-icon { opacity: 0.75; }

.step-overlay-pagination-list { position: absolute; margin: 0 auto; width: 100%; list-style: none; z-index: 3; }

@media screen and (min-width: 680px) { .step-overlay-pagination-list { bottom: 135px; } }

@media screen and (max-width: 679px) { .step-overlay-pagination-list { bottom: 150px; } }

.step-overlay-pagination-item { margin: 0 4px; display: inline-block; }

.step-overlay-pagination-dot { display: inline-block; border: 2px solid #fff; overflow: hidden; text-indent: -1000px; border-radius: 50%; transition: opacity 300ms 0s ease, background 300ms 0s ease; }

@media screen and (min-width: 680px) { .step-overlay-pagination-dot { width: 12px; height: 12px; } }

@media screen and (max-width: 679px) { .step-overlay-pagination-dot { width: 10px; height: 10px; } }

.step-overlay-pagination-dot.active, .step-overlay-pagination-dot:hover { background: #fff; }

.step-overlay-pagination-dot:not(.active) { opacity: 0.1; }

.step-overlay-pagination-dot:not(.active):hover { opacity: 0.3; }
.step-failed .step-progress { display: none; }

.step-progress-container { margin: 30px 0; max-width: 1000px; display: inline-block; width: 60%; }

@media screen and (min-width: 680px) { .step-progress-container { margin-top: 30px; } }

@media screen and (max-width: 679px) { .step-progress-container { margin-top: 15px; } }

.step-progress-container-outer { display: flex; align-items: center; justify-content: center; }

.step-progress-today { display: table-cell; border-right: 2px solid rgba(255, 255, 255, 0.05); padding-right: 80px; vertical-align: middle; width: 260px; }

@media screen and (max-width: 969px) { .step-progress-today { display: none; } }

.step-progress-today-container { position: relative; width: 180px; height: 180px; }

.step-progress-today-container p { position: absolute; top: 50%; left: 0; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); font-size: 48px; line-height: 40px; height: 70px; font-weight: 700; width: 100%; margin: 0; }

.step-progress-today-container p span { font-size: 14px; display: block; color: #87929d; }

.step-progress-today-circle { width: 180px; height: 180px; stroke-width: 6px; stroke-linecap: round; }

.step-progress-today-circle .circle-progress-base, .step-progress-today-circle .circle-progress-base-overlay { stroke: #2d3339; }

@media screen and (min-width: 680px) { .step-progress-chart { height: 220px; } }

@media screen and (max-width: 679px) { .step-progress-chart { height: 180px; } }

.topic-ai .step-progress-chart .step-progress-stroke { stroke: #bd8dce; }

.step-progress-chart .step-progress-stroke.topic-ai { stroke: #bd8dce; }

.topic-back-end .step-progress-chart .step-progress-stroke { stroke: #31e2ff; }

.step-progress-chart .step-progress-stroke.topic-back-end { stroke: #31e2ff; }

.topic-data .step-progress-chart .step-progress-stroke { stroke: #d8abc9; }

.step-progress-chart .step-progress-stroke.topic-data { stroke: #d8abc9; }

.topic-design .step-progress-chart .step-progress-stroke { stroke: #a09ad1; }

.step-progress-chart .step-progress-stroke.topic-design { stroke: #a09ad1; }

.topic-experimental .step-progress-chart .step-progress-stroke { stroke: #bd8dce; }

.step-progress-chart .step-progress-stroke.topic-experimental { stroke: #bd8dce; }

.topic-front-end .step-progress-chart .step-progress-stroke { stroke: #95acdc; }

.step-progress-chart .step-progress-stroke.topic-front-end { stroke: #95acdc; }

.topic-fundamentals .step-progress-chart .step-progress-stroke { stroke: #d897ac; }

.step-progress-chart .step-progress-stroke.topic-fundamentals { stroke: #d897ac; }

.topic-mobile .step-progress-chart .step-progress-stroke { stroke: #7ccfb9; }

.step-progress-chart .step-progress-stroke.topic-mobile { stroke: #7ccfb9; }

.topic-internal .step-progress-chart .step-progress-stroke { stroke: #a3adb7; }

.step-progress-chart .step-progress-stroke.topic-internal { stroke: #a3adb7; }

.topic-foundations .step-progress-chart .step-progress-stroke { stroke: #00c9fa; }

.step-progress-chart .step-progress-stroke.topic-foundations { stroke: #00c9fa; }

.topic-undefined .step-progress-chart .step-progress-stroke { stroke: #a3adb7; }

.step-progress-chart .step-progress-stroke.topic-undefined { stroke: #a3adb7; }

.topic-college-credit .step-progress-chart .step-progress-stroke { stroke: #b0cfe9; }

.step-progress-chart .step-progress-stroke.topic-college-credit { stroke: #b0cfe9; }

.topic-no-code .step-progress-chart .step-progress-stroke { stroke: #97e2c5; }

.step-progress-chart .step-progress-stroke.topic-no-code { stroke: #97e2c5; }

.topic-security .step-progress-chart .step-progress-stroke { stroke: #c9e3f9; }

.step-progress-chart .step-progress-stroke.topic-security { stroke: #c9e3f9; }

.topic-game-development .step-progress-chart .step-progress-stroke { stroke: #e1dcf0; }

.step-progress-chart .step-progress-stroke.topic-game-development { stroke: #e1dcf0; }

.topic-treehouse-resources .step-progress-chart .step-progress-stroke { stroke: #d5f2dd; }

.step-progress-chart .step-progress-stroke.topic-treehouse-resources { stroke: #d5f2dd; }

.topic-coding-for-kids .step-progress-chart .step-progress-stroke { stroke: #fbcfb8; }

.step-progress-chart .step-progress-stroke.topic-coding-for-kids { stroke: #fbcfb8; }

.topic-ai .step-progress-chart .step-progress-fill { fill: #bd8dce; }

.step-progress-chart .step-progress-fill.topic-ai { fill: #bd8dce; }

.topic-back-end .step-progress-chart .step-progress-fill { fill: #31e2ff; }

.step-progress-chart .step-progress-fill.topic-back-end { fill: #31e2ff; }

.topic-data .step-progress-chart .step-progress-fill { fill: #d8abc9; }

.step-progress-chart .step-progress-fill.topic-data { fill: #d8abc9; }

.topic-design .step-progress-chart .step-progress-fill { fill: #a09ad1; }

.step-progress-chart .step-progress-fill.topic-design { fill: #a09ad1; }

.topic-experimental .step-progress-chart .step-progress-fill { fill: #bd8dce; }

.step-progress-chart .step-progress-fill.topic-experimental { fill: #bd8dce; }

.topic-front-end .step-progress-chart .step-progress-fill { fill: #95acdc; }

.step-progress-chart .step-progress-fill.topic-front-end { fill: #95acdc; }

.topic-fundamentals .step-progress-chart .step-progress-fill { fill: #d897ac; }

.step-progress-chart .step-progress-fill.topic-fundamentals { fill: #d897ac; }

.topic-mobile .step-progress-chart .step-progress-fill { fill: #7ccfb9; }

.step-progress-chart .step-progress-fill.topic-mobile { fill: #7ccfb9; }

.topic-internal .step-progress-chart .step-progress-fill { fill: #a3adb7; }

.step-progress-chart .step-progress-fill.topic-internal { fill: #a3adb7; }

.topic-foundations .step-progress-chart .step-progress-fill { fill: #00c9fa; }

.step-progress-chart .step-progress-fill.topic-foundations { fill: #00c9fa; }

.topic-undefined .step-progress-chart .step-progress-fill { fill: #a3adb7; }

.step-progress-chart .step-progress-fill.topic-undefined { fill: #a3adb7; }

.topic-college-credit .step-progress-chart .step-progress-fill { fill: #b0cfe9; }

.step-progress-chart .step-progress-fill.topic-college-credit { fill: #b0cfe9; }

.topic-no-code .step-progress-chart .step-progress-fill { fill: #97e2c5; }

.step-progress-chart .step-progress-fill.topic-no-code { fill: #97e2c5; }

.topic-security .step-progress-chart .step-progress-fill { fill: #c9e3f9; }

.step-progress-chart .step-progress-fill.topic-security { fill: #c9e3f9; }

.topic-game-development .step-progress-chart .step-progress-fill { fill: #e1dcf0; }

.step-progress-chart .step-progress-fill.topic-game-development { fill: #e1dcf0; }

.topic-treehouse-resources .step-progress-chart .step-progress-fill { fill: #d5f2dd; }

.step-progress-chart .step-progress-fill.topic-treehouse-resources { fill: #d5f2dd; }

.topic-coding-for-kids .step-progress-chart .step-progress-fill { fill: #fbcfb8; }

.step-progress-chart .step-progress-fill.topic-coding-for-kids { fill: #fbcfb8; }

.step-progress-this-week { padding: 15px 0 5px; }

@media screen and (min-width: 970px) { .step-progress .with-daily-progress { padding-left: 65px; } }

.step-progress-feedback { display: flex; justify-content: center; /* Both emojis */ /* Like emoji */ /* Dislike emoji */ /* Keyframes */ }

.step-progress-feedback-experiment { text-align: center; width: 30%; display: inline-block; }

.step-progress-feedback-experiment h4 { display: inline-block; color: white; width: 75%; }

.step-progress-feedback-interactions { display: inline-block; width: 60%; }

.step-progress-feedback .step { display: none; }

.step-progress-feedback .current-wizard-step { display: flex; width: 80%; flex-direction: column; align-items: center; border-left: 2px solid #55616c; }

.step-progress-feedback .current-wizard-step .feedback-title { color: #f9fafa; }

.step-progress-feedback .current-wizard-step .feedback-instruction { color: #f9fafa; }

.step-progress-feedback .step-overlay-title { margin: 0 0 30px; }

.step-progress-feedback-thank-you, .step-progress-feedback-loading-container { display: block; height: 300px; padding-top: 140px; }

.step-progress-feedback-gradient { width: 0; height: 0; position: absolute; }

.step-progress-feedback-like, .step-progress-feedback-dislike { display: inline-block; max-width: 75px; margin: 24px 16px 0; }

.step-progress-feedback-like a, .step-progress-feedback-dislike a { display: inline-block; }

.step-progress-feedback-like a .like-text, .step-progress-feedback-like a .dislike-text, .step-progress-feedback-dislike a .like-text, .step-progress-feedback-dislike a .dislike-text { color: #fff; font-family: arial; background-color: rgba(0, 0, 0, 0.25); padding: 10px; border-radius: 4px; }

.step-progress-feedback-stop-asking { margin-top: 24px; }

.step-progress-feedback-like a:hover .like-text, .step-progress-feedback-dislike a:hover .dislike-text { background-color: rgba(0, 0, 0, 0.5); }

.step-progress-feedback #like-emoji-face-blush { display: none; }

.step-progress-feedback-like a:hover #like-emoji-face { fill: #FFDA6A; }

.step-progress-feedback-like a:hover #like-emoji-face-blush { display: inherit; }

.step-progress-feedback-like a:hover #like-emoji { transform: scale(1.1); transform-origin: center; animation: bigger 2s linear 1; animation: bounce-emoji 2s linear infinite; filter: drop-shadow(0 0 25px rgba(255, 140, 0, 0.6)); }

.step-progress-feedback-like a:hover .like-emoji-face-eye-left { transform-origin: center; transform: scale(0.7) translate(-8px); }

.step-progress-feedback-like a:hover .like-emoji-face-eye-right { transform-origin: center; transform: scale(0.7) translate(8px); }

.step-progress-feedback-like a:hover #like-emoji-face-mouth { transform: translateY(-22px) scale(1.6); transform-origin: center; }

.step-progress-feedback-dislike a:hover #dislike-emoji { transform: scale(1.1); transform-origin: center; animation: bigger 2s linear 1; animation: bounce-emoji 2s linear infinite; filter: drop-shadow(0 0 25px rgba(109, 0, 0, 0.7)); }

.step-progress-feedback-dislike a:hover #dislike-emoji-face { fill: url(#like-gradient) #B14646; }

.step-progress-feedback-dislike a:hover #dislike-emoji-face-mouth { transform: translateY(-7px) scale(1.3); transform-origin: center; }

@keyframes bounce-emoji { 10%, 30%, 50%, 70%, 90% { transform: translateY(-10px); }
  20%, 40%, 60%, 80% { transform: translateY(-5px); } }

@keyframes bigger { 100% { scale: 1.1; } }

.step-progress-feedback-responses { width: 50%; margin: 20px auto; }

.step-progress-feedback-responses svg { margin: 0 auto 10px auto; width: 100px; height: auto; }

.step-progress-feedback-responses #like-emoji-face { fill: #FFDA6A; }

.step-progress-feedback-responses #like-emoji-face-blush { display: inherit; }

.step-progress-feedback-responses #dislike-emoji-face { fill: url(#like-gradient) #FFDA6A; }

.step-progress-feedback-responses .button.large { display: block; margin: 15px 0 0 0; background-color: #475059; color: #edeff0; line-height: 42px; border: 3px solid #475059; height: 50px; }

.step-progress-feedback-responses .button.large:hover { color: #edeff0 !important; border: 3px solid #edeff0; }

.chartist-tooltip { display: none; }

.chartist-tooltip.tooltip-show { display: block; }

.ct-tooltip-date { display: block; }

@media screen and (min-width: 680px) { .ct-tooltip-date { font-size: 15px; } }

@media screen and (max-width: 679px) { .ct-tooltip-date { font-size: 13px; } }

.ct-tooltip-steps-complete { color: #2b363e; font-weight: 400; white-space: nowrap; }
.quiz-failed-message { max-width: 800px; }

.quiz-failed-icon { display: block; margin: 0 auto; fill: #ffffff; }

@media screen and (min-width: 680px) { .quiz-failed-icon { margin-top: 30px; } }

@media screen and (max-width: 679px) { .quiz-failed-icon { margin-top: 20px; } }
.step-feedback { max-width: 560px; }

.rate-step .step-feedback { opacity: 1; z-index: 1; }

.success .step-feedback-stars { display: none; }

.step-feedback-label { display: block; color: #8a95a1; margin: 20px 0; }

@media screen and (min-width: 680px) { .step-feedback-label { font-size: 18px; line-height: 28px; } }

@media screen and (max-width: 679px) { .step-feedback-label { font-size: 16px; line-height: 26px; } }

.success .step-feedback-label { font-size: 22px; font-weight: 700; color: #fff; }

.step-feedback-textarea { min-height: 90px; max-height: 150px; margin-bottom: 20px; }

.step-feedback-textarea, .step-feedback-textarea:active, .step-feedback-textarea:hover { background: #31383e !important; border-color: #3f4850 !important; color: #fff !important; }

.success .step-feedback-textarea { display: none; }

@media screen and (min-width: 680px) { .step-feedback-action-submit { padding-right: 10px; } }

@media screen and (max-width: 679px) { .step-feedback-action-submit { padding-bottom: 15px; } }

@media screen and (min-width: 680px) { .step-feedback-action-cancel { padding-left: 10px; } }

.success .step-feedback-action-submit, .success .step-feedback-action-cancel { display: none; }

.loading .step-feedback-action-submit, .loading .step-feedback-action-cancel { opacity: 0.5; }

.step-feedback:not(.success) .step-feedback-action-done { display: none; }
.step-failed .badge-earned-container { display: none; }

.badge-earned-container #confetti-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.1; z-index: 0; }

.badge-earned-container #confetti-bg ellipse, .badge-earned-container #confetti-bg path, .badge-earned-container #confetti-bg polygon, .badge-earned-container #confetti-bg rect { -webkit-animation: fanFair 10s ease-in-out 0s infinite; -moz-animation: fanFair 10s ease-in-out 0s infinite; animation: fanFair 10s ease-in-out 0s infinite; }

.badge-earned-container #confetti-bg polygon, .badge-earned-container #confetti-bg rect { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; animation-delay: 3s; }

.badge-earned-badge-container { position: relative; margin: 30px auto; }

@media screen and (min-width: 680px) { .badge-earned-badge-container { max-width: 220px; height: 240px; } }

@media screen and (max-width: 679px) { .badge-earned-badge-container { max-width: 140px; margin-top: 20px; height: 154px; } }

.badge-earned-badge-icon { width: 100%; -webkit-animation: bounce 350ms cubic-bezier(0.5, 0, 0.5, 1.75) 0s 1; -moz-animation: bounce 350ms cubic-bezier(0.5, 0, 0.5, 1.75) 0s 1; animation: bounce 350ms cubic-bezier(0.5, 0, 0.5, 1.75) 0s 1; }

@-webkit-keyframes bounce { 0%, 100% { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); }
  50% { -ms-transform: translatey(-10%);
    -moz-transform: translatey(-10%);
    -webkit-transform: translatey(-10%);
    transform: translatey(-10%); } }

@-moz-keyframes bounce { 0%, 100% { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); }
  50% { -ms-transform: translatey(-10%);
    -moz-transform: translatey(-10%);
    -webkit-transform: translatey(-10%);
    transform: translatey(-10%); } }

@keyframes bounce { 0%, 100% { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); }
  50% { -ms-transform: translatey(-10%);
    -moz-transform: translatey(-10%);
    -webkit-transform: translatey(-10%);
    transform: translatey(-10%); } }

.badge-earned-points-container { background: #384047; border-radius: 50%; padding: 8px; margin-top: -38px; z-index: 20; width: 76px; height: 76px; position: absolute; top: 50%; -webkit-animation: spin-3600 1500ms ease-in-out 450ms 1; -moz-animation: spin-3600 1500ms ease-in-out 450ms 1; animation: spin-3600 1500ms ease-in-out 450ms 1; }

@media screen and (min-width: 680px) { .badge-earned-points-container { left: -50px; } }

@media screen and (max-width: 679px) { .badge-earned-points-container { left: -55px; } }

@-webkit-keyframes spin-3600 { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(3600deg);
    -moz-transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    transform: rotate(3600deg); } }

@-moz-keyframes spin-3600 { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(3600deg);
    -moz-transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    transform: rotate(3600deg); } }

@keyframes spin-3600 { from { -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to { -ms-transform: rotate(3600deg);
    -moz-transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    transform: rotate(3600deg); } }

.badge-earned-points-container .points-earned-30-icon { fill: #87929d; width: 60px; height: 60px; }

.badge-earned-points-container .points-earned-30-icon .points-text { fill: #a1a9b0; }

.badge-earned-points-container .points-earned-30-icon .topic-points-1, .badge-earned-points-container .points-earned-30-icon .topic-points-2 { opacity: 0.5; }

.badge-earned-points-container .points-earned-30-icon .topic-points-3 { opacity: 0.2; }

.badge-earned-points-container .points-earned-30-icon .topic-points-4 { opacity: 0.4; }

.badge-earned-sharing-list { display: flex; justify-content: center; position: relative; top: 5; z-index: 1; border-top: 2px solid rgba(255, 255, 255, 0.1); padding: 15px 55px 20px; margin: 0 auto; max-width: 242px; }

.badge-earned-sharing-list:before, .badge-earned-sharing-list:after { content: " "; display: table; }

.badge-earned-sharing-list:after { clear: both; }

.badge-earned-sharing-item { float: left; }

.badge-earned-sharing-item:not(:last-child) { margin-right: 15px; }

.badge-earned-sharing-link { display: block; border: 2px solid #87929d; border-radius: 50%; position: relative; width: 34px; height: 34px; transition: border-color 300ms 0s ease; }

.badge-earned-sharing-link:hover { border-color: #fff; }

.badge-earned-sharing-icon { fill: #87929d; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

a:hover .badge-earned-sharing-icon { fill: #fff; }

.badge-earned-all-icon { position: absolute; width: 190px; }

@media screen and (max-width: 679px) { .badge-earned-all-icon { width: 160px; } }

.badge-earned-all-container { position: relative; margin: 30px auto 20px auto; height: 209px; width: 100%; }

@media screen and (max-width: 679px) { .badge-earned-all-container { height: 176px; } }

.badge-earned-all-container #confetti-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.badge-earned-all-1 { max-width: 190px; }

.badge-earned-all-1 .badge-earned-all-icon:nth-child(1) { margin-left: -95px; }

@media screen and (max-width: 679px) { .badge-earned-all-1 .badge-earned-all-icon:nth-child(1) { margin-left: -80px; } }

.badge-earned-all-2 { max-width: 332.5px; }

@media screen and (max-width: 679px) { .badge-earned-all-2 { max-width: 224px; } }

.badge-earned-all-2 .badge-earned-all-icon:nth-child(1) { left: 0; z-index: 1; }

.badge-earned-all-2 .badge-earned-all-icon:nth-child(2) { right: 0; }

.badge-earned-all-3 { width: 90%; max-width: 399px; }

.badge-earned-all-3 .badge-earned-all-icon:nth-child(2) { left: 0; top: 20px; z-index: -1; width: 150px; }

@media screen and (max-width: 679px) { .badge-earned-all-3 .badge-earned-all-icon:nth-child(2) { width: 120px; } }

.badge-earned-all-3 .badge-earned-all-icon:nth-child(1) { left: 100px; z-index: 1; }

.badge-earned-all-3 .badge-earned-all-icon:nth-child(3) { left: 0; top: 20px; z-index: -1; width: 150px; right: 0 !important; left: auto; }

@media screen and (max-width: 679px) { .badge-earned-all-3 .badge-earned-all-icon:nth-child(3) { width: 120px; } }

.badge-earned-all-4 { width: 80%; max-width: 456px; }

.badge-earned-all-4 .badge-earned-all-icon:nth-child(1) { left: 18%; z-index: 1; }

.badge-earned-all-4 .badge-earned-all-icon:nth-child(2) { right: 18%; }

.badge-earned-all-4 .badge-earned-all-icon:nth-child(3) { left: 0; top: 20px; z-index: -1; width: 150px; }

@media screen and (max-width: 679px) { .badge-earned-all-4 .badge-earned-all-icon:nth-child(3) { width: 120px; } }

.badge-earned-all-4 .badge-earned-all-icon:nth-child(4) { left: 0; top: 20px; z-index: -1; width: 150px; right: 0 !important; left: auto; }

@media screen and (max-width: 679px) { .badge-earned-all-4 .badge-earned-all-icon:nth-child(4) { width: 120px; } }

.badge-earned-all-5 { max-width: 532px; }

.badge-earned-all-5 .badge-earned-all-icon { left: 0; top: 20px; z-index: -1; width: 150px; }

@media screen and (max-width: 679px) { .badge-earned-all-5 .badge-earned-all-icon { width: 120px; } }

.badge-earned-all-5 .badge-earned-all-icon:nth-child(1) { width: 190px; z-index: 2; left: 50%; top: 0px; margin-left: -95px; }

@media screen and (max-width: 679px) { .badge-earned-all-5 .badge-earned-all-icon:nth-child(1) { margin-left: -80px; width: 160px; } }

.badge-earned-all-5 .badge-earned-all-icon:nth-child(3) { left: 15%; z-index: 1; }

@media screen and (max-width: 539px) { .badge-earned-all-5 .badge-earned-all-icon:nth-child(3) { left: 10%; } }

.badge-earned-all-5 .badge-earned-all-icon:nth-child(4) { right: 15%; left: auto; z-index: 1; }

@media screen and (max-width: 539px) { .badge-earned-all-5 .badge-earned-all-icon:nth-child(4) { right: 10%; } }

.badge-earned-all-5 .badge-earned-all-icon:nth-child(5) { right: 0; left: auto; }
.authors-index-hero, .authors-sign-up-hero { min-height: 300px; }

.authors-index-hero .container, .authors-sign-up-hero .container { padding: 0; }

.authors-index .hero-content, .authors-sign-up .hero-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 1100px; }

.authors-controller.index-action.loaded:not(.hero-video-in-progress) .hero:after, .authors-controller.index-action.hero-video-stopped .hero:after, .authors-controller.sign-up-action.loaded:not(.hero-video-in-progress) .hero:after, .authors-controller.sign-up-action.hero-video-stopped .hero:after { display: block; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

@media screen and (min-width: 970px) { .authors-controller.index-action.loaded:not(.hero-video-in-progress) .hero:after, .authors-controller.index-action.hero-video-stopped .hero:after, .authors-controller.sign-up-action.loaded:not(.hero-video-in-progress) .hero:after, .authors-controller.sign-up-action.hero-video-stopped .hero:after { background: rgba(0, 0, 0, 0.1); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); } }

@media screen and (max-width: 969px) { .authors-controller.index-action.loaded:not(.hero-video-in-progress) .hero:after, .authors-controller.index-action.hero-video-stopped .hero:after, .authors-controller.sign-up-action.loaded:not(.hero-video-in-progress) .hero:after, .authors-controller.sign-up-action.hero-video-stopped .hero:after { background: rgba(0, 0, 0, 0.45); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)); } }

.authors-controller.index-action.hero-video-stopped .hero div.mejs-container, .authors-controller.index-action.hero-video-stopped .hero video, .authors-controller.index-action:not(.hero-video-in-progress) .hero div.mejs-container, .authors-controller.index-action:not(.hero-video-in-progress) .hero video, .authors-controller.sign-up-action.hero-video-stopped .hero div.mejs-container, .authors-controller.sign-up-action.hero-video-stopped .hero video, .authors-controller.sign-up-action:not(.hero-video-in-progress) .hero div.mejs-container, .authors-controller.sign-up-action:not(.hero-video-in-progress) .hero video { opacity: 0; }

@media screen and (max-width: 679px) { .authors-controller.index-action.hero-video-stopped .hero .hero-title, .authors-controller.index-action:not(.hero-video-in-progress) .hero .hero-title, .authors-controller.sign-up-action.hero-video-stopped .hero .hero-title, .authors-controller.sign-up-action:not(.hero-video-in-progress) .hero .hero-title { opacity: 0; } }
.authors-index .pagination-container { margin-top: 0; margin-bottom: 30px; }
.module-referrals .icon-money { float: right; margin: 0 0 10px 10px; }

.org-member-overview .activity-list { background-color: #f9fafa; margin: 15px -30px 0px -30px; padding: 0 30px; border-top: 2px solid #e8ebed; border-bottom: 2px solid #e8ebed; }

@media screen and (max-width: 679px) { .org-member-overview .activity-list { margin: 15px -20px 0px -20px; } }

.org-member-overview .activity-list li { list-style-type: none; margin-top: 30px; }

.org-member-overview .activity-list li:last-child { padding-bottom: 20px; }

.org-member-overview .activity-list h3 { font-size: 14px; line-height: 1.4em; margin-bottom: 5px; }

.org-member-overview .activity-list h3 .timestamp { font-weight: 400; }

.org-member-overview .activity-list .activity-achievement { border: 2px solid #e8ebed; background: white; overflow: hidden; border-radius: 5px; padding: 20px; }

.org-member-overview .activity-list .activity-achievement-img { display: inline-block; vertical-align: middle; }

.org-member-overview .activity-list .activity-achievement-img a { display: block; }

.org-member-overview .activity-list .activity-achievement-icon { display: inline-block; vertical-align: middle; background-color: #edeff0; border-radius: 50px; height: 50px; width: 50px; border: solid 2px #c6ccd2; }

.org-member-overview .activity-list .activity-achievement-icon a { position: absolute; width: 50px; line-height: 50px; }

.org-member-overview .activity-list .activity-achievement-icon svg { width: 24px; fill: #55616c; position: relative; left: 11px; top: 1px; }

.org-member-overview .activity-list .activity-achievement-icon svg.profile-icon { height: 24px; top: 11px; }

.org-member-overview .activity-list .activity-achievement-icon svg.play-icon { width: 17px; height: 15px; left: 17px; }

.org-member-overview .activity-list .activity-achievement-text { display: inline-block; vertical-align: middle; margin-left: 20px; width: calc(100% - 90px); }

.org-member-overview .activity-list .activity-achievement img { width: 50px; }

.org-member-overview .activity-list .activity-achievement strong { font-size: 14px; color: #101417; line-height: 18px; margin-bottom: 5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.org-member-overview .activity-list .activity-achievement strong a { color: #1a2126; font-weight: 700; }

.org-member-overview .activity-list .activity-achievement strong a:hover { color: #050708; }

.org-member-overview .activity-list .activity-achievement p { font-size: 12px; color: #1a2126; margin: 0; }

.org-member-overview .topic-points-radar-chart canvas { max-width: 350px; max-height: 350px; margin: auto; }

.activity-list.activity-list-org { background-color: #f9fafa; margin: 15px -30px 0px -30px; padding: 0 30px; border-top: 2px solid #e8ebed; border-bottom: 2px solid #e8ebed; }

@media screen and (max-width: 679px) { .activity-list.activity-list-org { margin: 15px -20px 0px -20px; } }

.activity-list.activity-list-org li { list-style-type: none; margin-left: 32px; border-left: 2px solid #e8ebed; }

.activity-list.activity-list-org li:first-child { margin-top: 20px; }

.activity-list.activity-list-org li:first-child .activity-block { border-top: none; padding-top: 0; }

.activity-list.activity-list-org li:last-child { padding-bottom: 20px; }

.activity-list.activity-list-org .activity-block { padding: 20px 0 20px 80px; margin-left: -32px; }

.activity-list.activity-list-org .avatar { float: left; margin-left: -67px; }

.activity-list.activity-list-org h3 { font-size: 14px; color: #2b363e; padding: 9px 0 15px 0; line-height: 1.4em; }

.activity-list.activity-list-org h3 a { font-weight: 700; }

.activity-list.activity-list-org h3 a:hover { color: #384047; text-decoration: underline; }

.activity-list.activity-list-org h3 .timestamp { font-weight: 400; }

.activity-list.activity-list-org .activity-achievement { position: relative; padding: 15px 15px 0; border: 2px solid #e8ebed; max-width: 450px; background: white; overflow: hidden; border-radius: 5px; }

.activity-list.activity-list-org .activity-achievement:before, .activity-list.activity-list-org .activity-achievement:after { content: " "; display: table; }

.activity-list.activity-list-org .activity-achievement:after { clear: both; }

.activity-list.activity-list-org .activity-achievement:before { position: absolute; content: ""; background: #e8ebed; width: 10px; height: 10px; border-radius: 3px 0 0 0; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: -2px -2px 0px #e8ebed; top: -4px; left: 44px; }

.activity-list.activity-list-org .activity-achievement img { float: left; width: 50px; margin: 0 10px 15px; }

.activity-list.activity-list-org .activity-achievement strong { font-size: 14px; font-weight: 700; color: #384047; display: block; margin-bottom: 5px; padding: 10px 0 0 0; }

.activity-list.activity-list-org .activity-achievement strong a { color: #384047; }

.activity-list.activity-list-org .activity-achievement strong a:hover { color: #2d3339; text-decoration: underline; }

.activity-list.activity-list-org .activity-achievement p { font-size: 12px; color: #2b363e; }

.activity-list.activity-list-org .activity-achievement .current-step { clear: left; margin: -15px -15px 0 -15px; }

.activity-list.activity-list-org .activity-achievement .current-step a { background: #fff; padding: 15px; display: block; font-weight: 700; font-size: 14px; color: #2b363e; border-top: 1px solid #f0f2f4; }

.activity-list.activity-list-org .activity-achievement .current-step a:hover { color: #1a2126; }

.activity-list.activity-list-org .activity-achievement .current-step .icon { margin: -2px 10px -2px 0; }

.sorting-container + .activity-list .activity-achievement { border: none; }

.content-block.track h3 { margin-bottom: 0; }

.content-block.track .hero-points { margin: 30px 0 0 0; }

.content-block.track .hero-points .points-timeline { width: 100%; }

.content-block.track .hero-points .points-timeline .course-progress-count { font-size: 18px; font-weight: 700; line-height: 18px; }

.content-block.track .hero-points .points-detail-container { padding: 0 15px; }

.content-block.track .hero-points .points-detail-container table { z-index: 99; }

.content-block.track .hero-points .points-detail-container a { height: 18px; }
.dashboard-controller .total-points-container { margin: 0; padding: 0; border-bottom: 1px solid #eee; }

.dashboard-controller .total-points-container .toggle { display: block; font-size: 16px; font-weight: 700; padding: 30px; position: absolute; right: 0; top: 15px; }

@media screen and (max-width: 679px) { .dashboard-controller .total-points-container .toggle { top: 10px; } }

.dashboard-controller .total-points-container .toggle .icon { display: inline-block; text-indent: -9999px; position: relative; right: -10px; top: -5px; }

.dashboard-controller .total-points-container .toggle:hover .icon-collapsed { background-position: -15px 0; }

.dashboard-controller .total-points-container .toggle:hover .icon-expand { background-position: -15px -10px; }

.dashboard-controller .total-points-container.collapsed { border: none; }

.dashboard-controller .total-points-container.collapsed .points-donut { position: absolute; height: 70px; line-height: 70px; margin-left: -5px; top: 20px; overflow: hidden; }

@media screen and (max-width: 679px) { .dashboard-controller .total-points-container.collapsed .points-donut { top: 10px; } }

.dashboard-controller .total-points-container.collapsed .points-donut img, .dashboard-controller .total-points-container.collapsed .points-donut canvas { height: auto; max-width: 70px; width: auto !important; }

.dashboard-controller .total-points-container.collapsed .total-points h1, .dashboard-controller .total-points-container.collapsed .total-points p { padding-left: 80px; }

.dashboard-controller .total-points-container.expanded { margin-bottom: 30px; padding-bottom: 25px; }

.dashboard-controller #expanded-points .points-donut, .dashboard-controller .points-container .points-donut { height: 200px; line-height: 200px; margin-bottom: 30px; text-align: center; }

@media screen and (max-width: 679px) { .dashboard-controller #expanded-points .points-donut, .dashboard-controller .points-container .points-donut { margin-bottom: 20px; } }

.dashboard-controller #expanded-points .points-donut img, .dashboard-controller #expanded-points .points-donut canvas, .dashboard-controller .points-container .points-donut img, .dashboard-controller .points-container .points-donut canvas { width: 100% !important; height: auto !important; max-width: 200px; vertical-align: middle; }

.dashboard-controller .total-points { line-height: 1; text-align: left; display: inline-block; }

.dashboard-controller .total-points h1 { font-size: 30px; font-weight: 700; color: #384047; margin-bottom: 6px; }

.dashboard-controller .total-points p { font-size: 14px; font-weight: 700; line-height: 1; margin-bottom: 0; color: #2b363e; }

.dashboard-controller .points-breakdown { margin-bottom: 10px; }

.dashboard-controller .points-breakdown:before, .dashboard-controller .points-breakdown:after { content: " "; display: table; }

.dashboard-controller .points-breakdown:after { clear: both; }

.dashboard-controller .points-breakdown ul { margin: -10px 0 0; }

.dashboard-controller .points-breakdown li { list-style-type: none; position: relative; }

.dashboard-controller .points-breakdown .topic-stat { padding: 17px 0 17px 25px; }

.dashboard-controller .points-breakdown .points-tooltip-wrapper { float: left; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.dashboard-controller .points-breakdown .points-tooltip-wrapper .tooltip.tooltip-top { margin-left: -15%; }

.dashboard-controller .points-breakdown .points-tooltip { text-align: center; display: none; width: 60%; }

.dashboard-controller .points-breakdown .points-tooltip-heading { font-size: 15px; margin: 0 0 3px; line-height: 1; }

.dashboard-controller .points-breakdown .points-tooltip-label { font-size: 13px; }

.dashboard-controller .points-breakdown .points-tooltip .tooltip-achievement-points { border-bottom: 1px solid #4a555e; padding-bottom: 14px; margin-bottom: 15px; }

.dashboard-controller .points-breakdown span { display: block; width: 15px; height: 15px; text-indent: -9999px; float: left; margin: 3px 0 0 -25px; border-radius: 50%; }

.dashboard-controller .points-breakdown span:not(.has-topic-background-color) { background-color: #d4d9dd; }

.dashboard-controller .points-breakdown h3 { font-size: 18px; font-weight: 700; color: #384047; margin-bottom: 5px; }

.dashboard-controller .points-breakdown .topic-stat-name { font-size: 14px; color: #2b363e; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; display: inline-block; overflow: hidden; display: block; }
.homepage2020 { position: relative; }

.homepage2020-100daysofcode::before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url(/assets/views/marketing/homepage/100-days-of-code-bg-b55134a18cc519086fb00fda35e7be2f67251d8e0deb3828f2c7c8d514b32ff7.svg) center/cover no-repeat !important; background-color: #274074 !important; background-position-y: 35% !important; z-index: 0; opacity: 0.5; border-radius: 4px; }

.homepage2020-100daysofcode p { z-index: 4; }

.dashboard-index .view-all { margin: 0; }

@media screen and (min-width: 1300px) { .dashboard-index .view-all.view-all-3 { display: none; } }

@media screen and (max-width: 1299px) { .dashboard-index .view-all.view-all-2 { display: none; } }

.dashboard-index .view-all.view-all-1 { display: none; }

.dashboard-index .card-list { margin-bottom: 15px; }

.dashboard-index .card-list.collapsed .card:nth-child(n+4) { display: none; }

@media screen and (min-width: 700px) and (max-width: 1299px) { .dashboard-index .card-list.collapsed .card:nth-child(n+3) { display: none; } }

@media screen and (max-width: 679px) { .dashboard-index .card-list.collapsed .card:nth-child(n+2) { display: none; } }

@media screen and (max-width: 969px) { .dashboard-index .card-list.collapsed .card:nth-child(n+3) { display: none; } }

.dashboard-index .content-suggestions .box-header h3 { font-size: 22px; margin-bottom: 15px; }

.dashboard-index .content-suggestions .box-header .track-header { border-bottom: 1px solid #e8ebed; margin: 0 0 30px 0; padding-bottom: 30px; }

@media screen and (max-width: 679px) { .dashboard-index .content-suggestions .box-header .track-header { padding-bottom: 20px; } }

.dashboard-index .content-suggestions .box-header .track-header h4 { font-size: 16px; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-ai a { color: #733A88; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-back-end a { color: #008297; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-data a { color: #9F4B84; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-design a { color: #4a4290; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-experimental a { color: #733a88; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-front-end a { color: #3659a2; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-fundamentals a { color: #9b3b5a; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-mobile a { color: #30826C; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-internal a { color: #55616c; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-foundations a { color: #004e61; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-undefined a { color: #55616c; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-college-credit a { color: #3887c8; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-no-code a { color: #31AF7F; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-security a { color: #409BE9; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-game-development a { color: #856fc4; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-treehouse-resources a { color: #5fcf80; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-coding-for-kids a { color: #F36C27; }

.topic-ai .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #733A88; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-ai svg { fill: #733A88; }

.topic-back-end .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #008297; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-back-end svg { fill: #008297; }

.topic-data .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #9F4B84; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-data svg { fill: #9F4B84; }

.topic-design .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #4a4290; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-design svg { fill: #4a4290; }

.topic-experimental .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #733a88; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-experimental svg { fill: #733a88; }

.topic-front-end .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #3659a2; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-front-end svg { fill: #3659a2; }

.topic-fundamentals .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #9b3b5a; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-fundamentals svg { fill: #9b3b5a; }

.topic-mobile .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #30826C; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-mobile svg { fill: #30826C; }

.topic-internal .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #55616c; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-internal svg { fill: #55616c; }

.topic-foundations .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #004e61; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-foundations svg { fill: #004e61; }

.topic-undefined .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #55616c; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-undefined svg { fill: #55616c; }

.topic-college-credit .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #3887c8; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-college-credit svg { fill: #3887c8; }

.topic-no-code .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #31AF7F; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-no-code svg { fill: #31AF7F; }

.topic-security .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #409BE9; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-security svg { fill: #409BE9; }

.topic-game-development .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #856fc4; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-game-development svg { fill: #856fc4; }

.topic-treehouse-resources .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #5fcf80; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-treehouse-resources svg { fill: #5fcf80; }

.topic-coding-for-kids .dashboard-index .content-suggestions .box-header .track-header h4 svg { fill: #F36C27; }

.dashboard-index .content-suggestions .box-header .track-header h4.topic-coding-for-kids svg { fill: #F36C27; }

.dashboard-index .content-suggestions .box-header .track-header h4 svg { vertical-align: text-top; margin-right: 16px; }

.dashboard-index .content-suggestions .box-header .track-header .button { position: absolute; right: 30px; top: 18px; }

@media screen and (max-width: 679px) { .dashboard-index .content-suggestions .box-header .track-header .button { display: none; } }

.dashboard-index .content-suggestions .box-header p { font-size: 16px; margin-bottom: 0; }

.dashboard-index .content-suggestions .box-header p strong, .dashboard-index .content-suggestions .box-header p .activity-title { font-weight: 700; }

.dashboard-index .content-suggestions .box-content.secondary { padding-top: 0; }

.dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a { position: relative; }

.dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a img, .dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a svg { position: absolute; }

.dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a svg { fill: #8e969d; height: 22px; left: 30px; top: 18px; width: 22px; }

.dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a.current p, .dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a.current strong { color: #101417; }

.dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a img { left: 27px; top: 14px; width: 28px; height: 28px; margin-left: 0 !important; padding: 2px; border: 2px solid #5fcf80; border-radius: 26px; }

@media screen and (max-width: 679px) { .dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a svg { left: 20px; top: 12px; }
  .dashboard-index .content-suggestions .box-content.secondary .achievement-steps li a img { left: 17px; top: 9px; } }

.dashboard-index .content-suggestions .box-footer { padding-top: 20px; padding-bottom: 20px; }

.dashboard-index .content-suggestions .box-footer .suggestion-time-estimate { color: #2b363e; font-size: 14px; margin-left: 10px; margin-top: 14px; }

.dashboard-index .content-suggestions .box-footer .suggestion-time-estimate strong { color: #101417; font-weight: 700; }

.dashboard-index .content-suggestions .box-footer .on-track-notice { float: right; font-size: 14px; margin-top: 14px; }

.dashboard-index .content-suggestions .box-footer .on-track-notice a { font-weight: 700; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-html a { color: #3659a2; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-html a:hover { color: #304e8f; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-css a { color: #3659a2; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-css a:hover { color: #304e8f; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-javascript a { color: #3659a2; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-javascript a:hover { color: #304e8f; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-java a { color: #008297; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-java a:hover { color: #006c7e; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-ruby a { color: #008297; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-ruby a:hover { color: #006c7e; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-business a { color: #9b3b5a; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-business a:hover { color: #89344f; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-php a { color: #008297; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-php a:hover { color: #006c7e; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-ios a { color: #30826C; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-ios a:hover { color: #296f5d; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-android a { color: #30826C; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-android a:hover { color: #296f5d; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-design a { color: #4a4290; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-design a:hover { color: #413a7f; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-development-tools a { color: #9b3b5a; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-development-tools a:hover { color: #89344f; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-python a { color: #008297; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-python a:hover { color: #006c7e; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-digital-literacy a { color: #9b3b5a; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-digital-literacy a:hover { color: #89344f; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-csharp a { color: #008297; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-csharp a:hover { color: #006c7e; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-databases a { color: #9F4B84; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-databases a:hover { color: #8e4376; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-go a { color: #733a88; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-go a:hover { color: #643276; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-apis a { color: #008297; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-apis a:hover { color: #006c7e; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-data-analysis a { color: #9F4B84; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-data-analysis a:hover { color: #8e4376; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-security a { color: #409BE9; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-security a:hover { color: #298fe6; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-quality-assurance a { color: #9b3b5a; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-quality-assurance a:hover { color: #89344f; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-machine-learning a { color: #733a88; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-machine-learning a:hover { color: #643276; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-ai a { color: #733A88; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-ai a:hover { color: #643276; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-undefined a { color: #55616c; }

.dashboard-index .content-suggestions .box-footer .on-track-notice.topic-undefined a:hover { color: #4a545e; }

@media screen and (max-width: 969px) { .dashboard-index .content-suggestions .box-footer .on-track-notice { display: none; } }

.dashboard-index .content-suggestions .achievement-steps { margin-top: 0; padding-bottom: 0; }

.dashboard-index .content-suggestions .achievement-steps a { padding-left: 70px; }

.dashboard-index .content-suggestions .achievement-steps a .icon { margin-left: -65px; }

.dashboard-index .content-suggestions.topic-html .box-header .activity-title { color: #3659a2; }

.dashboard-index .content-suggestions.topic-html .box-header .activity-title:hover { color: #304e8f; }

.dashboard-index .content-suggestions.topic-html .box-footer .button { background-color: #3659a2; border-color: #3659a2; }

.dashboard-index .content-suggestions.topic-html .box-footer .button:hover { background-color: #304e8f; border-color: #304e8f; }

.dashboard-index .content-suggestions.topic-html .achievement-steps li a svg.complete-outline-icon { fill: #3659a2; }

.dashboard-index .content-suggestions.topic-html .achievement-steps li a img { border-color: #3659a2 !important; }

.dashboard-index .content-suggestions.topic-css .box-header .activity-title { color: #3659a2; }

.dashboard-index .content-suggestions.topic-css .box-header .activity-title:hover { color: #304e8f; }

.dashboard-index .content-suggestions.topic-css .box-footer .button { background-color: #3659a2; border-color: #3659a2; }

.dashboard-index .content-suggestions.topic-css .box-footer .button:hover { background-color: #304e8f; border-color: #304e8f; }

.dashboard-index .content-suggestions.topic-css .achievement-steps li a svg.complete-outline-icon { fill: #3659a2; }

.dashboard-index .content-suggestions.topic-css .achievement-steps li a img { border-color: #3659a2 !important; }

.dashboard-index .content-suggestions.topic-javascript .box-header .activity-title { color: #3659a2; }

.dashboard-index .content-suggestions.topic-javascript .box-header .activity-title:hover { color: #304e8f; }

.dashboard-index .content-suggestions.topic-javascript .box-footer .button { background-color: #3659a2; border-color: #3659a2; }

.dashboard-index .content-suggestions.topic-javascript .box-footer .button:hover { background-color: #304e8f; border-color: #304e8f; }

.dashboard-index .content-suggestions.topic-javascript .achievement-steps li a svg.complete-outline-icon { fill: #3659a2; }

.dashboard-index .content-suggestions.topic-javascript .achievement-steps li a img { border-color: #3659a2 !important; }

.dashboard-index .content-suggestions.topic-java .box-header .activity-title { color: #008297; }

.dashboard-index .content-suggestions.topic-java .box-header .activity-title:hover { color: #006c7e; }

.dashboard-index .content-suggestions.topic-java .box-footer .button { background-color: #008297; border-color: #008297; }

.dashboard-index .content-suggestions.topic-java .box-footer .button:hover { background-color: #006c7e; border-color: #006c7e; }

.dashboard-index .content-suggestions.topic-java .achievement-steps li a svg.complete-outline-icon { fill: #008297; }

.dashboard-index .content-suggestions.topic-java .achievement-steps li a img { border-color: #008297 !important; }

.dashboard-index .content-suggestions.topic-ruby .box-header .activity-title { color: #008297; }

.dashboard-index .content-suggestions.topic-ruby .box-header .activity-title:hover { color: #006c7e; }

.dashboard-index .content-suggestions.topic-ruby .box-footer .button { background-color: #008297; border-color: #008297; }

.dashboard-index .content-suggestions.topic-ruby .box-footer .button:hover { background-color: #006c7e; border-color: #006c7e; }

.dashboard-index .content-suggestions.topic-ruby .achievement-steps li a svg.complete-outline-icon { fill: #008297; }

.dashboard-index .content-suggestions.topic-ruby .achievement-steps li a img { border-color: #008297 !important; }

.dashboard-index .content-suggestions.topic-business .box-header .activity-title { color: #9b3b5a; }

.dashboard-index .content-suggestions.topic-business .box-header .activity-title:hover { color: #89344f; }

.dashboard-index .content-suggestions.topic-business .box-footer .button { background-color: #9b3b5a; border-color: #9b3b5a; }

.dashboard-index .content-suggestions.topic-business .box-footer .button:hover { background-color: #89344f; border-color: #89344f; }

.dashboard-index .content-suggestions.topic-business .achievement-steps li a svg.complete-outline-icon { fill: #9b3b5a; }

.dashboard-index .content-suggestions.topic-business .achievement-steps li a img { border-color: #9b3b5a !important; }

.dashboard-index .content-suggestions.topic-php .box-header .activity-title { color: #008297; }

.dashboard-index .content-suggestions.topic-php .box-header .activity-title:hover { color: #006c7e; }

.dashboard-index .content-suggestions.topic-php .box-footer .button { background-color: #008297; border-color: #008297; }

.dashboard-index .content-suggestions.topic-php .box-footer .button:hover { background-color: #006c7e; border-color: #006c7e; }

.dashboard-index .content-suggestions.topic-php .achievement-steps li a svg.complete-outline-icon { fill: #008297; }

.dashboard-index .content-suggestions.topic-php .achievement-steps li a img { border-color: #008297 !important; }

.dashboard-index .content-suggestions.topic-ios .box-header .activity-title { color: #30826C; }

.dashboard-index .content-suggestions.topic-ios .box-header .activity-title:hover { color: #296f5d; }

.dashboard-index .content-suggestions.topic-ios .box-footer .button { background-color: #30826C; border-color: #30826C; }

.dashboard-index .content-suggestions.topic-ios .box-footer .button:hover { background-color: #296f5d; border-color: #296f5d; }

.dashboard-index .content-suggestions.topic-ios .achievement-steps li a svg.complete-outline-icon { fill: #30826C; }

.dashboard-index .content-suggestions.topic-ios .achievement-steps li a img { border-color: #30826C !important; }

.dashboard-index .content-suggestions.topic-android .box-header .activity-title { color: #30826C; }

.dashboard-index .content-suggestions.topic-android .box-header .activity-title:hover { color: #296f5d; }

.dashboard-index .content-suggestions.topic-android .box-footer .button { background-color: #30826C; border-color: #30826C; }

.dashboard-index .content-suggestions.topic-android .box-footer .button:hover { background-color: #296f5d; border-color: #296f5d; }

.dashboard-index .content-suggestions.topic-android .achievement-steps li a svg.complete-outline-icon { fill: #30826C; }

.dashboard-index .content-suggestions.topic-android .achievement-steps li a img { border-color: #30826C !important; }

.dashboard-index .content-suggestions.topic-design .box-header .activity-title { color: #4a4290; }

.dashboard-index .content-suggestions.topic-design .box-header .activity-title:hover { color: #413a7f; }

.dashboard-index .content-suggestions.topic-design .box-footer .button { background-color: #4a4290; border-color: #4a4290; }

.dashboard-index .content-suggestions.topic-design .box-footer .button:hover { background-color: #413a7f; border-color: #413a7f; }

.dashboard-index .content-suggestions.topic-design .achievement-steps li a svg.complete-outline-icon { fill: #4a4290; }

.dashboard-index .content-suggestions.topic-design .achievement-steps li a img { border-color: #4a4290 !important; }

.dashboard-index .content-suggestions.topic-development-tools .box-header .activity-title { color: #9b3b5a; }

.dashboard-index .content-suggestions.topic-development-tools .box-header .activity-title:hover { color: #89344f; }

.dashboard-index .content-suggestions.topic-development-tools .box-footer .button { background-color: #9b3b5a; border-color: #9b3b5a; }

.dashboard-index .content-suggestions.topic-development-tools .box-footer .button:hover { background-color: #89344f; border-color: #89344f; }

.dashboard-index .content-suggestions.topic-development-tools .achievement-steps li a svg.complete-outline-icon { fill: #9b3b5a; }

.dashboard-index .content-suggestions.topic-development-tools .achievement-steps li a img { border-color: #9b3b5a !important; }

.dashboard-index .content-suggestions.topic-python .box-header .activity-title { color: #008297; }

.dashboard-index .content-suggestions.topic-python .box-header .activity-title:hover { color: #006c7e; }

.dashboard-index .content-suggestions.topic-python .box-footer .button { background-color: #008297; border-color: #008297; }

.dashboard-index .content-suggestions.topic-python .box-footer .button:hover { background-color: #006c7e; border-color: #006c7e; }

.dashboard-index .content-suggestions.topic-python .achievement-steps li a svg.complete-outline-icon { fill: #008297; }

.dashboard-index .content-suggestions.topic-python .achievement-steps li a img { border-color: #008297 !important; }

.dashboard-index .content-suggestions.topic-digital-literacy .box-header .activity-title { color: #9b3b5a; }

.dashboard-index .content-suggestions.topic-digital-literacy .box-header .activity-title:hover { color: #89344f; }

.dashboard-index .content-suggestions.topic-digital-literacy .box-footer .button { background-color: #9b3b5a; border-color: #9b3b5a; }

.dashboard-index .content-suggestions.topic-digital-literacy .box-footer .button:hover { background-color: #89344f; border-color: #89344f; }

.dashboard-index .content-suggestions.topic-digital-literacy .achievement-steps li a svg.complete-outline-icon { fill: #9b3b5a; }

.dashboard-index .content-suggestions.topic-digital-literacy .achievement-steps li a img { border-color: #9b3b5a !important; }

.dashboard-index .content-suggestions.topic-csharp .box-header .activity-title { color: #008297; }

.dashboard-index .content-suggestions.topic-csharp .box-header .activity-title:hover { color: #006c7e; }

.dashboard-index .content-suggestions.topic-csharp .box-footer .button { background-color: #008297; border-color: #008297; }

.dashboard-index .content-suggestions.topic-csharp .box-footer .button:hover { background-color: #006c7e; border-color: #006c7e; }

.dashboard-index .content-suggestions.topic-csharp .achievement-steps li a svg.complete-outline-icon { fill: #008297; }

.dashboard-index .content-suggestions.topic-csharp .achievement-steps li a img { border-color: #008297 !important; }

.dashboard-index .content-suggestions.topic-databases .box-header .activity-title { color: #9F4B84; }

.dashboard-index .content-suggestions.topic-databases .box-header .activity-title:hover { color: #8e4376; }

.dashboard-index .content-suggestions.topic-databases .box-footer .button { background-color: #9F4B84; border-color: #9F4B84; }

.dashboard-index .content-suggestions.topic-databases .box-footer .button:hover { background-color: #8e4376; border-color: #8e4376; }

.dashboard-index .content-suggestions.topic-databases .achievement-steps li a svg.complete-outline-icon { fill: #9F4B84; }

.dashboard-index .content-suggestions.topic-databases .achievement-steps li a img { border-color: #9F4B84 !important; }

.dashboard-index .content-suggestions.topic-go .box-header .activity-title { color: #733a88; }

.dashboard-index .content-suggestions.topic-go .box-header .activity-title:hover { color: #643276; }

.dashboard-index .content-suggestions.topic-go .box-footer .button { background-color: #733a88; border-color: #733a88; }

.dashboard-index .content-suggestions.topic-go .box-footer .button:hover { background-color: #643276; border-color: #643276; }

.dashboard-index .content-suggestions.topic-go .achievement-steps li a svg.complete-outline-icon { fill: #733a88; }

.dashboard-index .content-suggestions.topic-go .achievement-steps li a img { border-color: #733a88 !important; }

.dashboard-index .content-suggestions.topic-apis .box-header .activity-title { color: #008297; }

.dashboard-index .content-suggestions.topic-apis .box-header .activity-title:hover { color: #006c7e; }

.dashboard-index .content-suggestions.topic-apis .box-footer .button { background-color: #008297; border-color: #008297; }

.dashboard-index .content-suggestions.topic-apis .box-footer .button:hover { background-color: #006c7e; border-color: #006c7e; }

.dashboard-index .content-suggestions.topic-apis .achievement-steps li a svg.complete-outline-icon { fill: #008297; }

.dashboard-index .content-suggestions.topic-apis .achievement-steps li a img { border-color: #008297 !important; }

.dashboard-index .content-suggestions.topic-data-analysis .box-header .activity-title { color: #9F4B84; }

.dashboard-index .content-suggestions.topic-data-analysis .box-header .activity-title:hover { color: #8e4376; }

.dashboard-index .content-suggestions.topic-data-analysis .box-footer .button { background-color: #9F4B84; border-color: #9F4B84; }

.dashboard-index .content-suggestions.topic-data-analysis .box-footer .button:hover { background-color: #8e4376; border-color: #8e4376; }

.dashboard-index .content-suggestions.topic-data-analysis .achievement-steps li a svg.complete-outline-icon { fill: #9F4B84; }

.dashboard-index .content-suggestions.topic-data-analysis .achievement-steps li a img { border-color: #9F4B84 !important; }

.dashboard-index .content-suggestions.topic-security .box-header .activity-title { color: #409BE9; }

.dashboard-index .content-suggestions.topic-security .box-header .activity-title:hover { color: #298fe6; }

.dashboard-index .content-suggestions.topic-security .box-footer .button { background-color: #409BE9; border-color: #409BE9; }

.dashboard-index .content-suggestions.topic-security .box-footer .button:hover { background-color: #298fe6; border-color: #298fe6; }

.dashboard-index .content-suggestions.topic-security .achievement-steps li a svg.complete-outline-icon { fill: #409BE9; }

.dashboard-index .content-suggestions.topic-security .achievement-steps li a img { border-color: #409BE9 !important; }

.dashboard-index .content-suggestions.topic-quality-assurance .box-header .activity-title { color: #9b3b5a; }

.dashboard-index .content-suggestions.topic-quality-assurance .box-header .activity-title:hover { color: #89344f; }

.dashboard-index .content-suggestions.topic-quality-assurance .box-footer .button { background-color: #9b3b5a; border-color: #9b3b5a; }

.dashboard-index .content-suggestions.topic-quality-assurance .box-footer .button:hover { background-color: #89344f; border-color: #89344f; }

.dashboard-index .content-suggestions.topic-quality-assurance .achievement-steps li a svg.complete-outline-icon { fill: #9b3b5a; }

.dashboard-index .content-suggestions.topic-quality-assurance .achievement-steps li a img { border-color: #9b3b5a !important; }

.dashboard-index .content-suggestions.topic-machine-learning .box-header .activity-title { color: #733a88; }

.dashboard-index .content-suggestions.topic-machine-learning .box-header .activity-title:hover { color: #643276; }

.dashboard-index .content-suggestions.topic-machine-learning .box-footer .button { background-color: #733a88; border-color: #733a88; }

.dashboard-index .content-suggestions.topic-machine-learning .box-footer .button:hover { background-color: #643276; border-color: #643276; }

.dashboard-index .content-suggestions.topic-machine-learning .achievement-steps li a svg.complete-outline-icon { fill: #733a88; }

.dashboard-index .content-suggestions.topic-machine-learning .achievement-steps li a img { border-color: #733a88 !important; }

.dashboard-index .content-suggestions.topic-ai .box-header .activity-title { color: #733A88; }

.dashboard-index .content-suggestions.topic-ai .box-header .activity-title:hover { color: #643276; }

.dashboard-index .content-suggestions.topic-ai .box-footer .button { background-color: #733A88; border-color: #733A88; }

.dashboard-index .content-suggestions.topic-ai .box-footer .button:hover { background-color: #643276; border-color: #643276; }

.dashboard-index .content-suggestions.topic-ai .achievement-steps li a svg.complete-outline-icon { fill: #733A88; }

.dashboard-index .content-suggestions.topic-ai .achievement-steps li a img { border-color: #733A88 !important; }

.dashboard-index .content-suggestions.topic-undefined .box-header .activity-title { color: #55616c; }

.dashboard-index .content-suggestions.topic-undefined .box-header .activity-title:hover { color: #4a545e; }

.dashboard-index .content-suggestions.topic-undefined .box-footer .button { background-color: #55616c; border-color: #55616c; }

.dashboard-index .content-suggestions.topic-undefined .box-footer .button:hover { background-color: #4a545e; border-color: #4a545e; }

.dashboard-index .content-suggestions.topic-undefined .achievement-steps li a svg.complete-outline-icon { fill: #55616c; }

.dashboard-index .content-suggestions.topic-undefined .achievement-steps li a img { border-color: #55616c !important; }

.dashboard-index .subuser-expired-td-alert { padding: 15px 15px 15px 55px; }

.dashboard-index .subuser-expired-td-alert a { font-weight: 700; text-decoration: underline; }

.dashboard-index .subuser-expired-td-alert .support-icon, .dashboard-index .subuser-expired-td-alert .warning-icon { opacity: 0.4; position: absolute; left: 15px; top: calc(50% - 13px); height: 25px; width: auto; }

.dashboard-index .in-progress-assessment-alert .support-icon { height: 25px; }

@media screen and (max-width: 679px) { .dashboard-index .content-suggestions .achievement-steps a { padding-left: 65px; }
  .dashboard-index .content-suggestions .achievement-steps a .icon { margin-left: -60px; } }

.dashboard-index .content-block.track { border-radius: 5px; margin: 0 15px 20px 15px; padding: 0; overflow: visible; }

.dashboard-index .content-block.track .content-meta { height: auto; padding-bottom: 30px; border-radius: 5px; }

.dashboard-index .content-block.track h3 { margin-bottom: 30px; }

.dashboard-index .content-block.track .current-project { margin: 40px 0 10px 0; }

.dashboard-index .content-block.track .current-project .current-project-meta { margin-top: -5px; }

.dashboard-index .content-block.track .current-project h4 { color: #101417; font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }

.dashboard-index .content-block.track .current-project strong { display: inline-block; font-size: 14px; margin-bottom: 3px; }

.dashboard-index .content-block.track .current-project p { color: #1a2126; font-size: 14px; line-height: 1.5; margin-bottom: 0; }

.dashboard-index .content-block.track .achievement-steps { margin: 0; padding: 0; }

.dashboard-index .content-block.track .achievement-steps li.toggle-steps { padding: 0; }

.dashboard-index .content-block.track .achievement-steps li.toggle-steps a { padding-left: 30px; }

.dashboard-index .content-block.track .achievement-steps li.toggle-steps a .icon { float: none; margin: 0 5px 0 0; }

.dashboard-index .content-block.track .achievement-steps li.current { background: #fff; }

.dashboard-index .content-block.track .achievement-steps li.current strong, .dashboard-index .content-block.track .achievement-steps li.current p { color: #101417; }

.dashboard-index .content-block.track .achievement-steps li.current:hover strong, .dashboard-index .content-block.track .achievement-steps li.current:hover p { color: #101417; }

.dashboard-index .content-block.track .achievement-steps li.next a:hover { background: none; cursor: default; }

.dashboard-index .content-block.track .achievement-steps li.next strong, .dashboard-index .content-block.track .achievement-steps li.next p { color: #587081; }

.dashboard-index .content-block.track .achievement-steps li.next .icon { opacity: 0.8; }

.dashboard-index .content-block.track .achievement-steps li.next:hover strong, .dashboard-index .content-block.track .achievement-steps li.next:hover p { color: #587081; }

.dashboard-index .content-block.track .achievement-steps li.next:hover .icon { opacity: 0.8; }

.dashboard-index .content-block.track .achievement-steps li a:hover { background: #fff; cursor: pointer; }

.dashboard-index .content-block.track .achievement-steps li a:hover strong { color: #1a2126; }

.dashboard-index .content-block.track .track-footer { background: #fff; padding: 20px 30px; overflow: hidden; clear: both; box-sizing: border-box; border-radius: 0 0 5px 5px; }

.dashboard-index .content-block.track .track-footer .content-actions-container { float: left; margin-right: 20px; }

.dashboard-index .content-block.track .track-footer .content-actions-container li { display: inline-block; list-style: none; margin-right: 8px; }

.dashboard-index .content-block.track .track-footer .hero-points { margin: 9px 0 0 0; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }

@media screen and (max-width: 969px) { .dashboard-index .content-block.track .track-footer .hero-points { clear: both; margin: 10px 10px 0; } }

.dashboard-index .content-block.track .track-footer .hero-points .points-timeline-label { display: block; text-align: center; font-size: 12px; color: #2b363e; position: relative; top: 8px; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; opacity: 0; }

.dashboard-index .content-block.track .track-footer .hero-points:hover .points-timeline-label { opacity: 1; }

.dashboard-index .activity-count { font-size: inherit; font-weight: 700; margin-left: 5px; }

.dashboard-index .secondary-heading h2 { float: none; }

.dashboard-index .secondary-heading .view-all { float: right; top: 0; }

.dashboard-index #no-results { display: block; }
.mini-profile-avatar { margin: 0 auto 10px; }

.mini-profile-heading { background: #f9fafa; margin: -30px -15px 30px; padding: 15px 30px; text-align: center; border-bottom: 1px solid #edeff0; border-radius: 5px 5px 0 0; }

.mini-profile-name { font-size: 18px; font-weight: 700; display: block; clear: both; margin: 0; }

.mini-profile-name-link { color: #101417; }

.mini-profile-type, .mini-profile-degree { font-size: 14px; line-height: 20px; font-weight: 700; color: #2f3b44; margin: 2px 0 0; }

.mini-profile-location { margin: 4px 0 0 !important; font-size: 13px !important; color: #2b363e; }

.modal.mini-profile .modal-close { top: 15px; }

.modal.mini-profile .student-stats { border-bottom: 1px solid #f0f2f4; padding: 0 0 30px; margin: 0 0 30px; }

.modal.mini-profile .student-stats:before, .modal.mini-profile .student-stats:after { content: " "; display: table; }

.modal.mini-profile .student-stats:after { clear: both; }

.modal.mini-profile .student-stats li { list-style-type: none; margin: 0; }

.modal.mini-profile .student-stats li:first-child { border-right: 1px solid #f0f2f4; }

.modal.mini-profile .student-stats li:last-child { padding-left: 30px; }

.modal.mini-profile .student-stats strong { font-weight: 700; color: #384047; font-size: 18px; margin-bottom: 5px; display: block; }

.modal.mini-profile .student-stats p { color: #2b363e; font-size: 14px; margin: 0; }

.modal.mini-profile .points-breakdown { margin: 0 0 30px; }

.modal.mini-profile .points-breakdown:before, .modal.mini-profile .points-breakdown:after { content: " "; display: table; }

.modal.mini-profile .points-breakdown:after { clear: both; }

.modal.mini-profile .points-breakdown li { margin: 0; }

.modal.mini-profile .points-breakdown li.topic-ai strong { color: #733A88; }

.modal.mini-profile .points-breakdown li.topic-back-end strong { color: #008297; }

.modal.mini-profile .points-breakdown li.topic-data strong { color: #9F4B84; }

.modal.mini-profile .points-breakdown li.topic-design strong { color: #4a4290; }

.modal.mini-profile .points-breakdown li.topic-experimental strong { color: #733a88; }

.modal.mini-profile .points-breakdown li.topic-front-end strong { color: #3659a2; }

.modal.mini-profile .points-breakdown li.topic-fundamentals strong { color: #9b3b5a; }

.modal.mini-profile .points-breakdown li.topic-mobile strong { color: #30826C; }

.modal.mini-profile .points-breakdown li.topic-internal strong { color: #55616c; }

.modal.mini-profile .points-breakdown li.topic-foundations strong { color: #004e61; }

.modal.mini-profile .points-breakdown li.topic-undefined strong { color: #55616c; }

.modal.mini-profile .points-breakdown li.topic-college-credit strong { color: #3887c8; }

.modal.mini-profile .points-breakdown li.topic-no-code strong { color: #31AF7F; }

.modal.mini-profile .points-breakdown li.topic-security strong { color: #409BE9; }

.modal.mini-profile .points-breakdown li.topic-game-development strong { color: #856fc4; }

.modal.mini-profile .points-breakdown li.topic-treehouse-resources strong { color: #5fcf80; }

.modal.mini-profile .points-breakdown li.topic-coding-for-kids strong { color: #F36C27; }

.modal.mini-profile .points-breakdown strong { font-size: 16px; font-weight: 700; }

.modal.mini-profile .points-breakdown p { font-size: 13px; color: #2b363e; }
.dashboard-profile #page-title-addition a { display: block; }

.dashboard-profile #page-title-addition a figure .avatar { float: left; }

@media screen and (max-width: 969px) { .dashboard-profile #page-title-addition a figure .avatar { top: -2px; } }

@media screen and (min-width: 970px) { .dashboard-profile #page-title-addition a figure .avatar { top: -3px; } }

.dashboard-profile #page-title-addition a figure figcaption { position: relative; white-space: nowrap; margin-left: 46px; }

@media screen and (max-width: 969px) { .dashboard-profile #page-title-addition a figure figcaption { top: -1px; line-height: 18px; } }

@media screen and (min-width: 970px) { .dashboard-profile #page-title-addition a figure figcaption { top: -3px; line-height: 20px; } }

.dashboard-profile #page-title-addition a figure figcaption h5 { font-size: 16px; font-weight: 700; color: #101417; }

.dashboard-profile #page-title-addition a figure figcaption h6 { font-weight: 400; color: #2b363e; }

@media screen and (max-width: 969px) { .dashboard-profile #page-title-addition a figure figcaption h6 { font-size: 11px; } }

@media screen and (min-width: 970px) { .dashboard-profile #page-title-addition a figure figcaption h6 { font-size: 12px; } }

.dashboard-profile div#profile-info { margin: 0 0 30px; }

@media screen and (max-width: 679px) { .dashboard-profile div#profile-info { text-align: center; } }

@media screen and (min-width: 680px) { .dashboard-profile div#profile-info figure .avatar { float: left; } }

@media screen and (max-width: 679px) { .dashboard-profile div#profile-info figure .avatar { margin: 0 auto 20px; } }

@media screen and (min-width: 680px) { .dashboard-profile div#profile-info figure figcaption { margin-left: 190px; } }

.dashboard-profile div#profile-info figure figcaption h1#name { color: #5a6772; font-size: 24px; line-height: 24px; margin: 0 0 5px; }

.dashboard-profile div#profile-info figure figcaption h2#role, .dashboard-profile div#profile-info figure figcaption h6#location, .dashboard-profile div#profile-info figure figcaption h6#member-since, .dashboard-profile div#profile-info figure figcaption h6#open-to-work { color: #2b363e; font-size: 16px; font-weight: 400; line-height: 24px; word-break: break-all; }

.dashboard-profile div#profile-info figure figcaption h6#open-to-work { font-weight: 500; color: #326e99; }

.dashboard-profile div#profile-info figure figcaption ul#social-links { margin: 15px 0; }

@media screen and (max-width: 679px) { .dashboard-profile div#profile-info figure figcaption ul#social-links { text-align: center; } }

.dashboard-profile div#profile-info figure figcaption ul#social-links li { display: inline-block; }

@media screen and (max-width: 679px) { .dashboard-profile div#profile-info figure figcaption ul#social-links li { margin: 0 3px; } }

@media screen and (min-width: 680px) { .dashboard-profile div#profile-info figure figcaption ul#social-links li { margin-right: 6px; } }

.dashboard-profile div#profile-info figure figcaption ul#social-links li a { display: inline-block; width: 24px; height: 24px; border-radius: 15px; background: #d7dde0; transition: background 0.15s ease; fill: #fff; }

.dashboard-profile div#profile-info figure figcaption ul#social-links li a:hover { background: #5fcf80; fill: #fff; }

.dashboard-profile div#profile-info h6#topics { font-weight: 400; font-style: italic; margin: 15px 0 10px; color: #2b363e; font-size: 16px; word-break: break-all; }

.dashboard-profile div#profile-info p#bio { margin: 15px 0 0; font-size: 16px; line-height: 24px; max-width: 800px; }

.dashboard-profile div#profile-info a.button { margin: 20px 0 0; }

@media screen and (max-width: 679px) { .dashboard-profile div#profile-info a.button { display: block; } }

.dashboard-profile #points-donut { margin-bottom: 35px; }

.dashboard-profile #profile-experience { list-style: none; }

.dashboard-profile #profile-experience > li { margin-bottom: 20px; border-bottom: 1px solid #f0f2f4; }

.dashboard-profile #profile-experience > li:before, .dashboard-profile #profile-experience > li:after { content: " "; display: table; }

.dashboard-profile #profile-experience > li:after { clear: both; }

.dashboard-profile #profile-experience > li:last-child { border: none; }

.dashboard-profile #profile-experience h3 { font-size: 14px; font-weight: 700; color: #2b363e; margin-bottom: 10px; }

.dashboard-profile #profile-experience h4 { font-size: 14px; color: #1a2126; margin-bottom: 20px; }

.dashboard-profile #profile-experience .generic-list li { font-size: 14px; margin-bottom: 20px; }

.dashboard-profile #profile-experience .check-list { margin: -10px 0 10px; }

@media screen and (min-width: 1260px) { .dashboard-profile .col-container .card { width: 50%; } }

.dashboard-profile .th-ca { max-width: 1200px; }

.dashboard-profile .th-ca h2 { font-size: 16px; }

@media screen and (min-width: 970px) { .dashboard-profile .th-ca h2 { font-size: 18px; } }
.marketing-banner-techdegree { background: #387BC9 url(/assets/views/dashboard/banners/banner-techdegree-3706856b5ce6e5d5c3a57b0433b04b25aa8a29eec6fb40e13916f666cd152d6e.jpg) center; background-size: cover; background-blend-mode: soft-light; box-shadow: inset 0 1000px 0 0 rgba(56, 123, 201, 0.8); }

.marketing-banner-manager-billing { background: #fff !important; border: 2px solid #5FCF80; }

.marketing-banner-manager-billing .manager-billing-wrapper { width: 100%; display: grid; grid-template-columns: 80% 20%; gap: 20px; justify-content: space-between; align-items: center; margin-inline: auto; padding-inline: 10px; }

@media screen and (max-width: 886px) { .marketing-banner-manager-billing .manager-billing-wrapper { grid-template-columns: 1fr; }
  .marketing-banner-manager-billing .marketing-banner-heading, .marketing-banner-manager-billing .marketing-banner-paragraph { text-align: center !important; } }

.marketing-banner-manager-billing #toggle-bill-manager-button { opacity: 1; }

.marketing-banner-manager-billing .marketing-banner-heading, .marketing-banner-manager-billing .marketing-banner-paragraph { max-width: none; text-align: left; color: #384047; }

.marketing-banner-manager-billing .manager-billing-form-wrapper { min-height: 200px; background: #fff; border-radius: 4px; position: relative; }

.marketing-banner-manager-billing .manager-billing-success-tarp { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; background: #fff; border-radius: 4px; display: none; justify-content: center; align-items: center; flex-direction: column; }

.marketing-banner-manager-billing .manager-billing-success-tarp p { margin-top: 20px; }

.marketing-banner-manager-billing .manager-billing-form { margin-top: 20px; text-align: left; padding: 20px; }

.marketing-banner-manager-billing .marketing-banner-close .close-icon { fill: #384047; }

.marketing-banner-manager-billing .marketing-banner-close h4 { font-size: 1.4rem; margin-bottom: 20px; }

.marketing-banner-manager-billing .marketing-banner-close .form-item-inline { padding: 0; }

.marketing-banner-manager-billing #bill-manager-button { background: transparent; border: #5FCF80 2px solid; color: #5FCF80; }

.marketing-banner-manager-billing .disabled { opacity: 0.5; }
.dashboard-index .hero { background: #5fcf80; }

.dashboard-index .hero-confetti { opacity: 0.11; z-index: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; fill: #00691f; }

.dashboard-index .hero-title, .dashboard-index .hero-copy { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.04); }

.dashboard-index .hero-button { border-color: #3f8abf; background-color: #3f8abf; }

.dashboard-index .hero-button:hover, .dashboard-index .hero-button:active, .dashboard-index .hero-button:visited, .dashboard-index .hero-button:focus { border-color: #326e99; background-color: #326e99; }

.dashboard-index .seal { width: 180px; height: 180px; display: block; margin: 0 auto 25px; }

.dashboard-index .seal-cap-glow { fill: rgba(11, 117, 36, 0.4); }

.dashboard-index .seal-leaf-cap-outlines { fill: #007824; }

.dashboard-index .seal-leaf-cap-interior { fill: #fff; }

.dashboard-index .seal-text { fill: #007523; }

.dashboard-index .seal-outline { fill: rgba(0, 94, 28, 0.7); }

.dashboard-index .seal-interior { fill: rgba(0, 94, 28, 0.15); }

.no-results { text-align: center; padding: 30px 0; }

.no-results h3 { font-size: 16px; margin-bottom: 10px; color: #101417; }

.no-results p { font-size: 14px; font-weight: 400; color: #2b363e; margin: 0 0 15px; }
.degree-overview-progress h1 { font-size: 18px; margin: 0 0 20px; color: #101417; }

.degree-overview-progress strong { font-size: 14px; display: block; margin-bottom: 8px; color: #2b363e; }

.degree-overview-progress-total, .degree-overview-progress-made { height: 8px; border-radius: 4px; }

.degree-overview-progress-total { background: #edeff0; }

.degree-overview-progress-made { background-color: #55616c; }

.degree-overview-progress-complete { background: #5fcf80; width: 100%; }

.degree-overview-velocity { position: relative; z-index: 1; }

.degree-overview-velocity h3 { font-size: 14px; margin: 0 0 4px; color: #101417; }

.degree-overview-velocity p { font-size: 12px; color: #1a2126; margin: 0 0 30px; }

.degree-overview-velocity-graph { height: 200px; }

.degree-overview-stat { font-size: 24px; display: block; color: #5fcf80; }

.degree-overview-stat-icon { float: left; fill: #8e969d; margin-right: 15px; }

.degree-overview-stat-item { float: left; font-weight: 700; font-size: 13px; line-height: 1.2; color: #2b363e; width: 33%; }

.degree-overview-stat-item:nth-child(-n+3) { border-bottom: 1px solid #f0f2f4; padding-bottom: 30px; }

.degree-overview-stat-item:nth-child(n+4) { padding-top: 30px; }

@media screen and (max-width: 679px), screen and (min-width: 1023px) and (max-width: 1159px) { .degree-overview-stat-item { width: 50%; }
  .degree-overview-stat-item:nth-child(-n+4) { border-bottom: 1px solid #f0f2f4; padding-bottom: 30px; }
  .degree-overview-stat-item:nth-child(n+3) { padding-top: 30px; } }

.degree-overview-mentor-container, .degree-overview-slack-container { position: relative; display: block; }

@media screen and (min-width: 1020px) { .degree-overview-mentor-container, .degree-overview-slack-container { padding-right: 185px; } }

.degree-overview-mentor-container strong, .degree-overview-slack-container strong { color: #ff9f1f; }

.degree-overview-mentor-icon, .degree-overview-slack-icon { float: left; width: 40px; height: auto; margin: 5px 20px 0 0; fill: #2b363e; }

.degree-overview-mentor-link:hover .degree-overview-mentor-icon, .degree-overview-slack-link:hover .degree-overview-mentor-icon, .degree-overview-officehours-link:hover .degree-overview-mentor-icon, .degree-overview-mentor-link:hover .degree-overview-slack-icon, .degree-overview-slack-link:hover .degree-overview-slack-icon, .degree-overview-officehours-link:hover .degree-overview-slack-icon { fill: #161c20; }

.degree-overview-mentor-icon .person-two, .degree-overview-mentor-icon .bubble-two, .degree-overview-slack-icon .person-two, .degree-overview-slack-icon .bubble-two { fill: #edeff0; transition: fill 300ms 0s ease; }

.degree-overview-mentor-link:hover .degree-overview-mentor-icon .person-two, .degree-overview-slack-link:hover .degree-overview-mentor-icon .person-two, .degree-overview-mentor-link:hover .degree-overview-mentor-icon .bubble-two, .degree-overview-slack-link:hover .degree-overview-mentor-icon .bubble-two, .degree-overview-mentor-link:hover .degree-overview-slack-icon .person-two, .degree-overview-slack-link:hover .degree-overview-slack-icon .person-two, .degree-overview-mentor-link:hover .degree-overview-slack-icon .bubble-two, .degree-overview-slack-link:hover .degree-overview-slack-icon .bubble-two { fill: #d1d6d9; }

.degree-overview-slack-link .degree-overview-mentor-icon, .degree-overview-slack-link .degree-overview-slack-icon { margin-top: 1px; }

.degree-overview-mentor-title, .degree-overview-slack-title { font-size: 14px; margin: 0 0 5px 60px; color: #101417; }

.degree-overview-mentor-link:hover .degree-overview-mentor-title, .degree-overview-slack-link:hover .degree-overview-mentor-title, .degree-overview-mentor-link:hover .degree-overview-slack-title, .degree-overview-slack-link:hover .degree-overview-slack-title { color: #050708; }

.degree-overview-mentor-description, .degree-overview-slack-description { margin: 0 0 0 60px; font-size: 12px; color: #2b363e; }

.degree-overview-mentor-link .degree-overview-mentor-description, .degree-overview-mentor-link .degree-overview-slack-description { margin: 0 60px; }

.degree-overview-mentor-chevron, .degree-overview-slack-chevron { fill: #e8ebed; width: 18px; height: auto; margin-top: -6px; position: absolute; top: 50%; right: 0; -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.degree-overview-mentor-link:hover .degree-overview-mentor-chevron, .degree-overview-slack-link:hover .degree-overview-mentor-chevron, .degree-overview-mentor-link:hover .degree-overview-slack-chevron, .degree-overview-slack-link:hover .degree-overview-slack-chevron { fill: #b7c0c7; }

.degree-overview-mentor-button, .degree-overview-slack-button { margin-left: 60px; margin-top: 15px; }

.degree-overview-mentor-action, .degree-overview-slack-action { font-size: 12px; font-weight: 700; z-index: 1; }

@media screen and (min-width: 481px) and (max-width: 767px) { .degree-overview-mentor-action, .degree-overview-slack-action { width: 40%; } }

@media screen and (max-width: 1019px) { .degree-overview-mentor-action, .degree-overview-slack-action { margin-top: 15px; display: block; } }

@media screen and (min-width: 1020px) { .degree-overview-mentor-action, .degree-overview-slack-action { position: absolute; top: 50%; right: 0; margin-top: -17px; } }

.degree-overview-mentor-action-rate, .degree-overview-slack-action-rate { background-color: #5fcf80; color: #fff; }

.degree-overview-mentor-link:not(:hover) .degree-overview-mentor-action-alert, .degree-overview-mentor-link:not(:hover) .degree-overview-slack-action-alert { border-color: #ffd466; background-color: #ffd466; color: #805c00; }

.degree-overview-mentor-alt-link, .degree-overview-slack-alt-link { text-decoration: none; color: #3f8aBf; }

.degree-overview-slack-link { padding-right: 100px; }
.support-center-container { display: flex; flex-direction: row; justify-content: space-between; padding: 0 30px !important; }

.support-center-slack-icon { width: 45px; height: auto; margin: 5px 20px 0 0; fill: #8e969d; }

.support-center-slack-icon .bubble-two { fill: #edeff0; }

.support-center-info { width: 100%; }

.support-center-title { font-size: 14px; margin: 0 0 5px 0; color: #101417; }

.support-center-description { color: #2b363e; }

.support-center-specialists-title { font-size: 14px; margin: 0 0 1em 0; color: #101417; }

.support-center-specialists-member { display: flex; flex-direction: row; padding: 0 0 1.25em; font-size: 12px; color: #101417; }

.support-center-specialists-member-image { border-radius: 4px; }

.support-center-specialists-member-name > p { font-size: 12px; margin: 0 0 3px 1em; color: #101417; }

.support-center-slack-button { margin-top: 2em; width: 150px; }

@supports (display: grid) { .support-center-container { display: -ms-grid; display: grid; display--ms-grid-columns: 60px 1em 1fr; display--ms-grid-columns: 60px 1em 1fr; grid-template-columns: 0 60px 1fr; padding: 0 30px !important; justify-content: initial; }
  .support-center-slack-icon { width: 40px; margin-top: 5px; }
  .support-center-slack-icon .bubble-two { fill: #edeff0; }
  .support-center-specialists-member { display: -ms-grid; display: grid; display--ms-grid-columns: -webkit-max-content 1em 1fr; display--ms-grid-columns: max-content 1em 1fr; display-grid-template-columns: -webkit-max-content 1fr; grid-template-columns: max-content 1fr; grid-gap: 1em; margin: 0.5em 0 1.25em; padding: 0; font-size: 12px; color: #101417; }
  .support-center-link { font-size: 14px; } }
.office-hours-container { display: flex; flex-direction: column; padding: 0 30px !important; }

.office-hours-icon { float: left; width: 40px; height: auto; margin: 5px 20px 0 0; fill: #2b363e; }

.office-hours-officehours:hover .office-hours-icon { fill: #161c20; }

.office-hours-icon .glass { fill: #edeff0; transition: fill 300ms 0s ease; }

.office-hours-mentor-link:hover .office-hours-icon .glass, .office-hours-slack-link:hover .office-hours-icon .glass { fill: #d1d6d9; }

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

.office-hours-title { font-size: 14px; margin: 0 0 5px 0; color: #101417; }

.office-hours-subtitle { font-size: 12px; margin: 0 0 5px 0; color: #2b363e; }

.office-hours-description { margin: 0 0 0 60px; color: #2b363e; }

.office-hours-description a { text-decoration: underline; }

.office-hours-event { padding: 0 5px 0 10px; margin: 20px 0 20px 60px; border-left: 2px solid #3659a2; }

.office-hours-event-time { font-size: 12px; margin: 0; color: #2b363e; }

.office-hours-event-time span.live { font-size: 10px; color: #fff; background-color: #5fcf80; border-radius: 4px; padding: 3px 6px; margin-left: 4px; }

.office-hours-event-teacher { margin: 0 0 5px 0; font-size: 12px; color: #2b363e; }

.office-hours-event-topics { margin: 0 0 5px 0; font-size: 14px; font-weight: 500; color: #101417; }
.degree-mentorship-box { display: none; }

.degree-mentorship-breadcrumb { display: block; font-size: 14px; font-weight: 700; color: #2b363e; transition: color 300ms 0s ease; padding-top: 0 !important; padding-bottom: 0 !important; height: 64px; line-height: 64px; }

.degree-mentorship-breadcrumb:hover { color: #101417; }

.degree-mentorship-breadcrumb-icon { margin: 2px 10px 0 0; fill: #d4d9dd; }

.degree-mentorship-breadcrumb:hover .degree-mentorship-breadcrumb-icon { fill: #b7c0c7; }

.degree-mentorship-heading { font-size: 16px; margin-bottom: 10px; color: #101417; }

.degree-mentorship-paragraph { margin-bottom: 20px; color: #2b363e; }

.degree-mentorship-illustration { float: right; width: 85px; height: auto; margin: 0 0 0 20px; }

.degree-mentorship-illustration-banner { width: 90%; height: auto; margin: 20px 5% 40px 5%; }

.degree-mentorship-list { margin: 0 0 20px; color: #2b363e; }

.degree-mentorship-item { padding: 15px 0 15px 30px; color: #2b363e; position: relative; line-height: 22px; }

.degree-mentorship-item:not(:last-child) { border-bottom: 1px solid #f0f2f4; }

.degree-mentorship-checkmark { fill: #d4d9dd; height: 18px; width: auto; position: absolute; top: 50%; left: 0; margin-top: -9px; }

.degree-mentorship-link { color: #3f8abf; }

.degree-mentorship-link:hover { color: #326e99; }

.degree-mentorship-review .degree-mentor-label { color: #384047; display: block; font-weight: 500; margin: 0 0 0 0; font-size: 14px; text-align: center; }

.degree-mentorship-review .degree-mentor-textarea { margin: 10px 0 25px 0; }

.degree-mentorship-review .star-rating-container { margin: 10px auto 25px auto; }

.degree-mentorship-review .button[disabled] { background-color: #eee; border-color: #eee; opacity: 0.5; }

.degree-mentorship-history-item { margin: 20px 0; padding: 20px 0 40px 0; border-bottom: 1px solid #f0f2f4; position: relative; }

.degree-mentorship-history-item:last-child { border-bottom: none; padding-bottom: 0; }

.degree-mentorship-history-item .deprecated-avatar { width: 35px; height: 35px; border-width: 2px; margin: -17px 0 0 0; float: left; }

.degree-mentorship-history-item .label { background: #ed5a5a; color: white; margin-left: 3px; padding: 4px 5px; border-radius: 3px; font-size: 10px; text-transform: uppercase; }

.degree-mentorship-history .degree-mentor-heading { text-align: left; margin: -5px 0 0 15px; padding: 0; float: left; }

.degree-mentorship-history .degree-mentor-time { position: absolute; right: 0; top: 19px; color: #2b363e; font-size: 11px; }

.degree-error-message { margin: 15px 0; font-size: 14px; color: #fff; display: none; background: #ed5a5a; padding: 10px 15px; line-height: 1.5; border-radius: 5px; }

.degree-mentor { border-bottom: 1px solid #f0f2f4; border-top: 1px solid #f0f2f4; position: relative; padding: 25px 0; margin: 0 0 25px; cursor: pointer; text-align: center; }

.degree-mentor-heading { font-size: 14px; margin: 0 0 5px; padding-top: 5px; display: block; text-align: center; }

.degree-mentor-paragraph { margin: 0; font-size: 12px; color: #2b363e; }

.degree-mentor .deprecated-avatar { margin: 0 auto 10px auto; width: 140px; height: 140px; border-radius: 70px; margin-right: 10px; }

.degree-views.loading { opacity: .5; transition: opacity .2s; }

.degree-views .degree-mentorship-container a.schedule-session { display: block; }

.degree-views .degree-mentorship-container a.schedule-session p.reminder { display: none; }

.degree-views .degree-mentorship-container a.review-session { display: none; }

.degree-views.pending-review .degree-mentorship-container a.schedule-session { display: none; }

.degree-views.pending-review .degree-mentorship-container a.schedule-session p:not(.reminder) { display: none; }

.degree-views.pending-review .degree-mentorship-container a.schedule-session p.reminder { display: block; }

.degree-views.pending-review .degree-mentorship-container a.review-session { display: block; }

.degree-views.pending-review .degree-mentorship-container .chevron-icon { fill: #fff; height: 10px; margin-top: -5px; }

.degree-views.session-reminder .degree-mentorship-container a.schedule-session p:not(.reminder) { display: none; }

.degree-views.session-reminder .degree-mentorship-container a.schedule-session p.reminder { display: block; }

.degree-views.session-reminder .degree-mentorship-container .chevron-icon { fill: rgba(128, 92, 0, 0.3); width: 10px; margin-top: -5px; }
.degree-activity-filters { z-index: 1; }

.degree-activity-container { position: relative; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); border-radius: 0 0 4px 4px; z-index: 0; }

.degree-activity-container:before, .degree-activity-container:after { content: " "; display: table; }

.degree-activity-container:after { clear: both; }

.degree-activity-container .no-results { background: #fff; }

.degree-activity-alert { border-radius: 0 !important; margin: 0 !important; }

.degree-activity-item { position: relative; max-height: 500px; transition: opacity 300ms 0s ease, max-height 300ms 0s ease; }

@media screen and (max-width: 679px) { .degree-activity-item { padding: 0 20px; } }

@media screen and (min-width: 680px) { .degree-activity-item { padding: 0 30px; } }

.degree-activity-item:last-child { border-radius: 0 0 4px 4px; }

.degree-activity-item-dismissed { opacity: 0; max-height: 0; overflow: hidden; }

.degree-activity-content { display: block; position: relative; }

.degree-activity-content:before, .degree-activity-content:after { content: " "; display: table; }

.degree-activity-content:after { clear: both; }

.degree-activity-item:not(:last-child):not(.degree-activity-alert):not(.degree-activity-current) .degree-activity-content { border-bottom: 1px solid #f0f2f4; }

.degree-activity-meta { position: relative; padding: 18px 0; }

.degree-activity-meta:before, .degree-activity-meta:after { content: " "; display: table; }

.degree-activity-meta:after { clear: both; }

@media screen and (max-width: 679px) { .degree-activity-static .degree-activity-meta { padding: 20px 0; } }

@media screen and (min-width: 680px) { .degree-activity-static .degree-activity-meta { padding: 30px 0; } }

.degree-activity-upcoming .degree-activity-meta { border-bottom: 1px solid #f0f2f4; }

.degree-activity-project-failed { background-color: #fff; border-radius: 4px; padding: 15px; margin: 0 -15px 18px; }

.degree-activity-actions { position: absolute; top: 50%; right: 0; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.degree-activity-project-failed .degree-activity-actions { right: 15px; }

.degree-activity-item:not(.degree-activity-current) .degree-activity-details { display: none; }

.degree-activity-with-sub-activities:after { position: absolute; z-index: auto; content: ""; background: #c6ccd2; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; border-radius: 3px 0 0 0; left: 39px; transition: background-color 300ms 0s ease; }

.degree-activity-alert-dismissed .degree-activity-with-sub-activities:after { background-color: #fff; }

.degree-activity-list-all .degree-activity-with-sub-activities:after { display: none; }

.degree-activity-alert { background: #c6ccd2; }

.degree-activity-alert-dismissed .degree-activity-alert { opacity: 0; max-height: 0; overflow: hidden; }

.degree-activity-secondary-button { border-color: rgba(80, 92, 102, 0.25); color: #050708; }

.degree-activity-icon { display: block; float: left; fill: #8e969d; }

.degree-activity-item:not(.degree-activity-static) .degree-activity-icon { position: absolute; top: 50%; margin-top: -10px; }

.degree-activity-alert .degree-activity-icon { fill: #717b86; }

.degree-activity-current .degree-activity-icon { fill: #fff; }

.degree-activity-project-failed .degree-activity-icon { fill: #ed5a5a; margin-left: 3px; }

@media screen and (max-width: 679px) { .degree-activity-type, .degree-activity-title, .degree-activity-description, .degree-activity-status, .degree-activity-button { margin-left: 35px; } }

@media screen and (min-width: 680px) { .degree-activity-type, .degree-activity-title, .degree-activity-description, .degree-activity-status, .degree-activity-button { margin-left: 40px; } }

.degree-activity-type { display: block; margin-top: 6px; font-size: 12px; color: #2b363e; }

.degree-activity-current .degree-activity-type { color: #889ead; }

.degree-activity-completed .degree-activity-type { display: none; }

.degree-activity-title { line-height: 1.4; color: #101417; font-size: 14px; margin: 0 120px 6px 40px; transition: color 300ms 0s ease; }

.degree-activity-static .degree-activity-title { font-size: 15px; }

.degree-activity-link .degree-activity-title { color: #3f8abf; }

.degree-activity-link:hover .degree-activity-title { color: #326e99; }

.degree-activity-alert .degree-activity-title { color: #050708; }

.degree-activity-current .degree-activity-title { color: #fff; }

.degree-activity-project-failed .degree-activity-title { color: #ed5a5a; }

.degree-activity-status { font-size: 12px; color: #2b363e; margin-top: 2px; margin-bottom: 0; }

.degree-activity-description { font-size: 13px; color: #2b363e; }

.degree-activity-project-failed .degree-activity-description { margin-bottom: 0; }

.degree-activity-alert .degree-activity-description { color: #1a2126; }

.degree-activity-static .degree-activity-description { margin-top: 10px; margin-bottom: -5px; }

@media screen and (max-width: 679px) { .degree-activity-static .degree-activity-description { line-height: 1.6; } }

@media screen and (min-width: 680px) { .degree-activity-static .degree-activity-description { font-size: 14px; line-height: 1.8; } }

.degree-activity-description a { font-weight: 700; color: #3f8abf; transition: color 300ms 0s ease; }

.degree-activity-description a:hover { color: #326e99; }

.degree-activity-button { margin-top: 20px; }

.degree-activity-bookmark-actions { right: 30px; }

.degree-activity-bookmark-actions .star-small-icon { width: 12px; height: 12px; }

.degree-activity-action { cursor: pointer; background-color: transparent; display: inline-block; width: 26px; height: 26px; transition: border-color 300ms 0s ease, opacity 300ms 0s ease; outline: none; text-align: center; position: relative; margin-left: 15px; border-radius: 50%; border-width: 2px; border-style: solid; }

.degree-activity-action:not(:hover) { border-color: #e8ebed; }

.degree-activity-meta:not(.degree-activity-project-failed) .degree-activity-current .degree-activity-action { border-color: #fff; }

.degree-activity-current:not(:hover) .degree-activity-action { opacity: .5; }

.degree-activity-completed .degree-activity-action { display: none; }

.degree-activity-action-icon { fill: #8e969d; }

.degree-activity-current .degree-activity-action-icon { fill: #fff; }

.degree-activity-meta:not(.degree-activity-project-failed) .degree-activity-current .degree-activity-action-icon { fill: #fff; }

.degree-activity-action-icon.close-icon { width: 10px; position: absolute; top: 6px; left: 6px; }

.degree-activity-action-icon.chevron-icon { position: absolute; top: 7px; left: 7px; -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.degree-activity-action-icon.info-i-icon { position: absolute; top: 5px; left: 10px; }

.degree-activity-item.loading .degree-activity-action-icon.info-i-icon { opacity: 0; }

.degree-activity-info { position: absolute; top: 50%; right: 30px; margin-top: -13px; }

.degree-activity-info:before, .degree-activity-info:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.degree-activity-info:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.degree-activity-info:after { content: "Learn More"; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.degree-activity-info:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.degree-activity-info:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.degree-activity-info-loading { position: absolute; top: 2px; left: 2px; }

.degree-activity-item:not(.loading) .degree-activity-info-loading { opacity: 0; }

.degree-activity-project-status { display: inline; font-size: 13px; color: #4a5d6c; margin: 0; }

.degree-activity-project-status-icon { position: relative; margin-right: 7px; fill: #4a5d6c; }

.degree-activity-project-passed .degree-activity-project-status-icon { fill: #5fcf80; }

.degree-activity-project-submitted .degree-activity-project-status-icon { top: 1px; }

.degree-activity-project-grade { font-weight: 700; }

.degree-activity-project-in-review .degree-activity-project-grade { color: #ff9f1f; }

.degree-activity-project-passed .degree-activity-project-grade { color: #5fcf80; }

.degree-activity-item:not(.degree-activity-item-dismissed) .degree-activity-project-hide:before, .degree-activity-item:not(.degree-activity-item-dismissed) .degree-activity-project-hide:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.degree-activity-item:not(.degree-activity-item-dismissed) .degree-activity-project-hide:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.degree-activity-item:not(.degree-activity-item-dismissed) .degree-activity-project-hide:after { content: "Hide"; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.degree-activity-item:not(.degree-activity-item-dismissed) .degree-activity-project-hide:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.degree-activity-item:not(.degree-activity-item-dismissed) .degree-activity-project-hide:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.degree-activity-instruction-video { margin: 0 -30px; position: relative; max-height: 377px; }

.degree-activity-instruction-video .video { background: #384047; width: 100%; position: relative; }

.degree-activity-instruction-video .video:before { display: block; content: ""; width: 100%; padding-top: 56.25%; }

.degree-activity-instruction-video .video > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.degree-activity-instruction-play { fill: #fff; z-index: 1; margin: -28px 0 0 -25px; width: 50px; height: auto; position: absolute; top: 50%; left: 50%; }

.degree-activity-instruction img { width: 100%; opacity: .3; }

.degree-activity-stages { display: inline-block; margin: 0; }

.degree-activity-stages li { background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 100px; text-indent: -100px; overflow: hidden; display: block; float: left; height: 10px; margin-left: 7px; width: 10px; }

.degree-activity-stages .current { border-color: #fff; }

.degree-activity-stages .complete { background-color: #fff; border-color: #fff; }

.degree-activity-current-step { display: block; border-top: 1px solid rgba(255, 255, 255, 0.15); position: relative; padding: 70px 0 70px 50px; }

.degree-activity-current-step-icon { fill: #fff; width: 32px; height: 32px; position: absolute; top: 50%; left: 0; margin-top: -17px; }

.degree-activity-current-step strong { color: rgba(255, 255, 255, 0.7); }

.degree-activity-current-step h3 { margin: 0 130px 3px 0; line-height: 1.3; color: #fff; }

.degree-activity-current-step p { color: rgba(255, 255, 255, 0.7); margin: 0; }

.degree-activity-current-step-button { position: absolute; top: 50%; right: 0; margin-top: -20px; }

#welcome-panel[data-key="techdegree-home-1.0"] .seal { width: 120px; height: 120px; margin-bottom: 0; position: absolute; top: 50%; right: 80px; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

@media screen and (max-width: 767px) { #welcome-panel[data-key="techdegree-home-1.0"] .seal { display: none; } }

.degree-completed-activities { overflow: hidden; }

.degree-completed-activities .degree-activity-completed { display: none; }

.degree-completed-activities.active .degree-activity-completed { display: block; }

.degree-completed-activities.active .chevron-icon { -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); top: 26px; }

.degree-completed-activities-toggle { color: #2b363e; cursor: pointer; font-size: 13px; font-weight: 700; padding: 20px 30px; transition: color 200ms ease-in-out; }

.degree-completed-activities-toggle + .degree-activity-item a { border-top: solid 1px #f0f2f4; }

.active .degree-completed-activities-toggle { color: #1a2126; }

.degree-completed-activities-amount { position: relative; top: -1px; left: -1px; border: solid 2px #d4d9dd; border-radius: 20px; color: #d4d9dd; display: inline-block; font-size: 11px; text-align: center; width: 22px; height: 22px; line-height: 18px; margin-right: 16px; transition: color 200ms ease-in-out, border-color 200ms ease-in-out; }

.active .degree-completed-activities-amount { border-color: #1a2126; color: #1a2126; }

.degree-completed-activities .chevron-icon { position: absolute; top: 28px; right: 35px; fill: #1a2126; transition: all 200ms ease-in-out; }

[data-tour-step-selector=".degree-activity-filters"] { margin-top: -50px; }

.degree-items { border-right: 1px solid #e3e3e3; padding-right: 20px; }

.degree-utilities { padding-left: 20px; }

.card-degree { padding: 70px 0 64px; margin-bottom: 30px; }

.card-degree-padding { padding-left: 30px; padding-right: 30px; }

.card-degree .card-title span { font-size: 12px; font-weight: 400; color: #2b363e; margin-left: 10px; }

.card-degree .card-progress { background-color: transparent; }

.card-degree .card-description { margin-bottom: 30px; }

.card-degree .degree-activity-icon { margin-top: 20px; }

.card-degree .degree-completed-activities-toggle { border-top: 2px solid #edeff0; position: relative; }

.card-degree .degree-completed-activities-toggle .chevron-icon { position: absolute; top: 28px; right: 35px; fill: #698599; }

.card-degree.degree-activity-item { padding: 0 30px; min-height: 96px; }

.card-degree-icon svg { fill: #8e969d; vertical-align: middle; }

.card-degree-label { margin: 0 0 0 10px; display: inline-block; vertical-align: middle; }

.card-degree-status { color: #3f8abf; font-size: 12px; font-weight: 500; position: absolute; top: 0; right: 30px; padding-left: 10px; text-align: right; min-width: 80px; }

.card-degree-status-project-in-review { color: #ff9f1f; }

.card-degree-status-project-passed { color: #5fcf80; }

.card-degree-status-project-locked { position: relative; color: #546b7b; }

.card-degree-status-project-locked svg { fill: #546b7b; }

.card-degree .degree-activity-current { padding-right: 30px; padding-left: 30px; }

.card-degree-current { padding-bottom: 0; }

.card-degree-unit-courses { background-color: #f9fafa; border-radius: 0 0 4px 4px; padding: 20px 30px; position: absolute; bottom: 0; width: 100%; color: #1a2126; font-size: 13px; font-weight: 500; transition: color 200ms ease-in-out; }

.card-degree-unit-courses:not(.disabled) { cursor: pointer; }

.card-degree-unit-courses-icon { display: block; float: left; fill: #838c94; margin: 3px 20px 0 0; }

.card-degree-unit-courses .chevron-icon { position: absolute; right: 30px; top: 30px; fill: #838c94; transition: all 200ms ease-in-out; transform: rotate(-90deg); }

.card-degree .degree-future-courses { border-top: 2px solid #edeff0; }

.card-degree-open .card-degree-unit-courses .chevron-icon { transform: rotate(-180deg); }

.card-degree-open .degree-future-courses { display: block; }

.card-degree-activity { padding: 0; min-height: 0; }

.card-degree-activity h3 { padding-bottom: 0; }

.degree-projects-container { background: none; }

.degree-bookmarks { background: #fff; }

.degree-bookmarks .degree-activity-bookmark-actions { top: 37px; right: 30px; }

.degree-exam-activities { background: #fff; }

.solo-instruction { padding-top: 0; padding-left: 30px; padding-right: 30px; }
.degree-peer-reviews { background: #fff; }

.degree-peer-reviews-intro { padding: 30px 0 15px; margin: 0 30px; border-bottom: 1px solid #d4d9dd; }

.degree-peer-reviews-intro-close { display: none; }

@media screen and (max-width: 679px) { .degree-peer-reviews-intro { margin: 0 15px; padding: 20px 0 5px; } }

.degree-peer-reviews-intro a p { color: #1a2126; }

.degree-peer-reviews-header { margin: 0 0 10px; }

.degree-peer-reviews-illustration { float: right; max-width: 200px; margin: -10px 0 20px 20px; }

@media screen and (max-width: 969px) { .degree-peer-reviews-illustration { float: none; max-width: 300px; margin: 0 auto 20px; } }

.degree-peer-reviews-latest-rating { background: #f9fafa; border-radius: 4px; padding: 15px 25px; margin: 20px 0; }

.degree-peer-reviews-latest-rating strong { font-size: 13px; color: #2b363e; }

.degree-peer-reviews-latest-rating h4 { font-size: 15px; margin-top: -5px; }

.degree-peer-reviews-latest-rating .star-rating-container { margin: 12px; width: auto !important; }

.degree-peer-reviews-latest-rating .star-rating-container svg { fill: none; stroke: #889ead; stroke-width: 2px; }

.degree-peer-reviews-latest-rating .star-rating-container svg.active { fill: #FFD365; stroke: #FFD365; }

.degree-peer-reviews .degree-activity-item svg { fill: #d4d9dd; height: 15px; width: auto; }

.degree-peer-review-inactive .degree-activity-meta { opacity: .5; }

.tiny-tag { font-size: 10px; color: #fff; background: #5fcf80; border-radius: 4px; padding: 4px 5px 6px 5px; font-weight: 700; text-transform: uppercase; display: inline-block; margin-right: 10px; position: relative; height: 22px; line-height: 12px; }

.degree-activity-actions .tiny-tag { top: -8px; margin-right: 0; }

.button .tiny-tag { background: transparent; color: #5fcf80; padding: 0 8px 0 0; top: 0; border-right: solid 1px #d4d9dd; margin-right: 5px; border-radius: 0; height: auto; }

.degree-activity-action-ineligible-icon, .degree-activity-action-ineligible-min-2-icon, .degree-activity-action-ineligible-min-3-icon, .degree-activity-action-no-submissions-icon, .degree-activity-action-in-progress-review-icon { fill: #d4d9dd; }

.degree-activity-action-no-submissions-icon:hover:before, .degree-activity-action-no-submissions-icon:hover:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.degree-activity-action-no-submissions-icon:hover:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; right: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(5px, -50%) rotate(45deg); -moz-transform: translate(5px, -50%) rotate(45deg); -webkit-transform: translate(5px, -50%) rotate(45deg); transform: translate(5px, -50%) rotate(45deg); top: 50%; border-radius: 0 3px 0 0; }

.degree-activity-action-no-submissions-icon:hover:after { content: "There are no submissions available at this time."; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); color: #1a2126; top: 50%; right: 100%; }

.degree-activity-action-no-submissions-icon:hover:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-5px, -50%) rotate(45deg); -moz-transform: translate(-5px, -50%) rotate(45deg); -webkit-transform: translate(-5px, -50%) rotate(45deg); transform: translate(-5px, -50%) rotate(45deg); }

.degree-activity-action-no-submissions-icon:hover:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-10px, -50%); -moz-transform: translate(-10px, -50%); -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); }

.degree-activity-action-no-submissions-icon:hover:after { text-align: left; width: 250px; white-space: normal; padding: 15px; }

.degree-activity-action-in-progress-review-icon:hover:before, .degree-activity-action-in-progress-review-icon:hover:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.degree-activity-action-in-progress-review-icon:hover:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; right: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(5px, -50%) rotate(45deg); -moz-transform: translate(5px, -50%) rotate(45deg); -webkit-transform: translate(5px, -50%) rotate(45deg); transform: translate(5px, -50%) rotate(45deg); top: 50%; border-radius: 0 3px 0 0; }

.degree-activity-action-in-progress-review-icon:hover:after { content: "You cannot review this project until you complete the review you have in progress."; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); color: #1a2126; top: 50%; right: 100%; }

.degree-activity-action-in-progress-review-icon:hover:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-5px, -50%) rotate(45deg); -moz-transform: translate(-5px, -50%) rotate(45deg); -webkit-transform: translate(-5px, -50%) rotate(45deg); transform: translate(-5px, -50%) rotate(45deg); }

.degree-activity-action-in-progress-review-icon:hover:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-10px, -50%); -moz-transform: translate(-10px, -50%); -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); }

.degree-activity-action-in-progress-review-icon:hover:after { text-align: left; width: 250px; white-space: normal; padding: 15px; }

.degree-activity-action-ineligible-icon:hover:before, .degree-activity-action-ineligible-icon:hover:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.degree-activity-action-ineligible-icon:hover:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; right: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(5px, -50%) rotate(45deg); -moz-transform: translate(5px, -50%) rotate(45deg); -webkit-transform: translate(5px, -50%) rotate(45deg); transform: translate(5px, -50%) rotate(45deg); top: 50%; border-radius: 0 3px 0 0; }

.degree-activity-action-ineligible-icon:hover:after { content: "You will become eligible to review this project once you successfully complete this project yourself."; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); color: #1a2126; top: 50%; right: 100%; }

.degree-activity-action-ineligible-icon:hover:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-5px, -50%) rotate(45deg); -moz-transform: translate(-5px, -50%) rotate(45deg); -webkit-transform: translate(-5px, -50%) rotate(45deg); transform: translate(-5px, -50%) rotate(45deg); }

.degree-activity-action-ineligible-icon:hover:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-10px, -50%); -moz-transform: translate(-10px, -50%); -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); }

.degree-activity-action-ineligible-icon:hover:after { text-align: left; width: 250px; white-space: normal; padding: 15px; }

.degree-activity-action-ineligible-min-3-icon:hover:before, .degree-activity-action-ineligible-min-3-icon:hover:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.degree-activity-action-ineligible-min-3-icon:hover:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; right: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(5px, -50%) rotate(45deg); -moz-transform: translate(5px, -50%) rotate(45deg); -webkit-transform: translate(5px, -50%) rotate(45deg); transform: translate(5px, -50%) rotate(45deg); top: 50%; border-radius: 0 3px 0 0; }

.degree-activity-action-ineligible-min-3-icon:hover:after { content: "You will become eligible to review this project once you successfully complete the third project yourself."; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); color: #1a2126; top: 50%; right: 100%; }

.degree-activity-action-ineligible-min-3-icon:hover:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-5px, -50%) rotate(45deg); -moz-transform: translate(-5px, -50%) rotate(45deg); -webkit-transform: translate(-5px, -50%) rotate(45deg); transform: translate(-5px, -50%) rotate(45deg); }

.degree-activity-action-ineligible-min-3-icon:hover:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-10px, -50%); -moz-transform: translate(-10px, -50%); -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); }

.degree-activity-action-ineligible-min-3-icon:hover:after { text-align: left; width: 250px; white-space: normal; padding: 15px; }

.degree-activity-action-ineligible-min-2-icon:hover:before, .degree-activity-action-ineligible-min-2-icon:hover:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.degree-activity-action-ineligible-min-2-icon:hover:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; right: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(5px, -50%) rotate(45deg); -moz-transform: translate(5px, -50%) rotate(45deg); -webkit-transform: translate(5px, -50%) rotate(45deg); transform: translate(5px, -50%) rotate(45deg); top: 50%; border-radius: 0 3px 0 0; }

.degree-activity-action-ineligible-min-2-icon:hover:after { content: "You will become eligible to review this project once you successfully complete the second project yourself."; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); color: #1a2126; top: 50%; right: 100%; }

.degree-activity-action-ineligible-min-2-icon:hover:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-5px, -50%) rotate(45deg); -moz-transform: translate(-5px, -50%) rotate(45deg); -webkit-transform: translate(-5px, -50%) rotate(45deg); transform: translate(-5px, -50%) rotate(45deg); }

.degree-activity-action-ineligible-min-2-icon:hover:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-10px, -50%); -moz-transform: translate(-10px, -50%); -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); }

.degree-activity-action-ineligible-min-2-icon:hover:after { text-align: left; width: 250px; white-space: normal; padding: 15px; }
@-webkit-keyframes confetti-falling { 0% { -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); }
  100% { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@-moz-keyframes confetti-falling { 0% { -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); }
  100% { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@keyframes confetti-falling { 0% { -ms-transform: translatey(-100%);
    -moz-transform: translatey(-100%);
    -webkit-transform: translatey(-100%);
    transform: translatey(-100%); }
  100% { -ms-transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0); } }

@-webkit-keyframes badge-in { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -ms-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    -moz-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    -webkit-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg); }
  20% { -ms-transform: scale3d(1.1, 1.1, 1.1);
    -moz-transform: scale3d(1.1, 1.1, 1.1);
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% { -ms-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg); }
  60% { opacity: 1;
    -ms-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    -webkit-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg); }
  80% { -ms-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    -webkit-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { opacity: 1;
    -ms-transform: scale3d(1, 1, 1) perspective(400px);
    -moz-transform: scale3d(1, 1, 1) perspective(400px);
    -webkit-transform: scale3d(1, 1, 1) perspective(400px);
    transform: scale3d(1, 1, 1) perspective(400px); } }

@-moz-keyframes badge-in { from, 20%, 40%, 60%, 80%, to { -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -ms-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    -moz-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    -webkit-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg); }
  20% { -ms-transform: scale3d(1.1, 1.1, 1.1);
    -moz-transform: scale3d(1.1, 1.1, 1.1);
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% { -ms-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg); }
  60% { opacity: 1;
    -ms-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    -webkit-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg); }
  80% { -ms-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    -webkit-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { opacity: 1;
    -ms-transform: scale3d(1, 1, 1) perspective(400px);
    -moz-transform: scale3d(1, 1, 1) perspective(400px);
    -webkit-transform: scale3d(1, 1, 1) perspective(400px);
    transform: scale3d(1, 1, 1) perspective(400px); } }

@keyframes badge-in { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -ms-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    -moz-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    -webkit-transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg);
    transform: scale3d(0.3, 0.3, 0.3) perspective(400px) rotate3d(0, 1, 0, 180deg); }
  20% { -ms-transform: scale3d(1.1, 1.1, 1.1);
    -moz-transform: scale3d(1.1, 1.1, 1.1);
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% { -ms-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: scale3d(0.9, 0.9, 0.9) perspective(400px) rotate3d(0, 1, 0, -20deg); }
  60% { opacity: 1;
    -ms-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    -webkit-transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: scale3d(1.03, 1.03, 1.03) perspective(400px) rotate3d(0, 1, 0, 10deg); }
  80% { -ms-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    -webkit-transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: scale3d(0.97, 0.97, 0.97) perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { opacity: 1;
    -ms-transform: scale3d(1, 1, 1) perspective(400px);
    -moz-transform: scale3d(1, 1, 1) perspective(400px);
    -webkit-transform: scale3d(1, 1, 1) perspective(400px);
    transform: scale3d(1, 1, 1) perspective(400px); } }

.quizzes-show #quiz[data-featurette="exam_quiz"] .breadcrumb { display: inline-block; margin-top: 15px; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap { float: right; position: relative; top: 2px; padding: 10px; border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #fff; }

@media screen and (max-width: 679px) { .quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap { float: none; } }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container { display: inline-flex; align-items: center; font-weight: 700; color: #050708; margin-right: 30px; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container #time-left { margin-right: 5px; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container .time-40-icon { width: 20px; height: 20px; fill: #6E7881; position: fixed; right: 10px; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container.short-time-left { color: #e21919; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container.short-time-left .time-40-icon { fill: #e21919; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container.under-2min #time-left { width: 30px; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container.under-1min #time-left { width: 82px; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container.under-20sec #time-left { width: 78px; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container.under-10sec #time-left { width: 72px; }

.quizzes-show #quiz[data-featurette="exam_quiz"] .time-left-wrap #time-left-container.timeout { margin-right: 0; }

.degree-exam .degree-exam-progress { background-color: #3574a0; }

.degree-exam .degree-hero { position: relative; overflow: hidden; padding-left: 20px; padding-right: 20px; background: #2f668d; }

.degree-exam .degree-hero h1 { margin-bottom: 45px; }

.degree-exam .degree-hero h2 { margin-bottom: 15px; }

@media screen and (max-width: 679px) { .degree-exam .degree-hero .actions .button + .button { margin-top: 10px; } }

.degree-exam-passed { margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

.degree-exam-passed .degree-hero { margin-bottom: 0; border-radius: 4px; }

.degree-exam .grade-passed p, .degree-exam .grade-passed h3, .degree-exam .grade-passed .button { z-index: 5; position: relative; }

.degree-exam .grade-passed .achievement-badge { margin: 15px 0 45px; opacity: 0; line-height: 240px; width: 200px; height: 240px; position: relative; text-align: center; display: inline-block; -webkit-animation: badge-in 2.5s forwards; -moz-animation: badge-in 2.5s forwards; animation: badge-in 2.5s forwards; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; }

.degree-exam .grade-passed .achievement-badge .icon-complete { position: absolute; top: 35px; right: -20px; z-index: 2; }

.degree-exam .grade-passed .achievement-badge svg { width: 200px; }

.degree-exam .grade-passed .confetti-bg { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 1; -webkit-animation: confetti-falling 15s ease-in-out; -moz-animation: confetti-falling 15s ease-in-out; animation: confetti-falling 15s ease-in-out; }

.degree-exam .grade-passed .confetti-bg ellipse, .degree-exam .grade-passed .confetti-bg path, .degree-exam .grade-passed .confetti-bg polygon, .degree-exam .grade-passed .confetti-bg rect { fill: #2976A9; -webkit-animation-name: fanFair; -moz-animation-name: fanFair; animation-name: fanFair; -webkit-animation-duration: 10s; -moz-animation-duration: 10s; animation-duration: 10s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.degree-exam .grade-passed .confetti-bg ellipse { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; animation-delay: 3s; }

.degree-exam .grade-passed .confetti-bg path { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }

.degree-exam .grade-passed .confetti-bg rect { -webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s; animation-delay: 2.5s; }

.degree-exam-info h4 { margin-bottom: 10px; }

.degree-exam-info-instructions { max-width: 660px; margin: auto; }

.degree-exam-info-instructions ul:not(.check-list):not(.checkbox-group) { list-style: disc; margin-left: 24px; }

.degree-exam-info-pledge { margin-top: 30px; margin-bottom: 30px; border-top: 2px solid #e8ebed; }

.degree-exam-info-pledge h4 { margin-top: 30px; }

.degree-exam-info-pledge .check-list { margin-bottom: 15px; }

.degree-exam-info-pledge fieldset { border: 0; }

.degree-exam-info-pledge label { font-weight: 700; }

.icon-with-description { margin: 15px 0 45px; text-align: center; display: inline-block; float: none; width: 31%; }

@media screen and (max-width: 679px) { .icon-with-description { width: 45%; } }

.icon-with-description-icon { margin-bottom: 15px; }

.icon-with-description-description h2 { margin-bottom: 5px; }

.icon-with-description-description strong { font-size: 13px; font-weight: 300; color: #2b363e; }

.icon-with-description svg { width: 40px; height: 40px; }

.icon-with-description:first-child svg { fill: #5fcf80; }

.icon-with-description:nth-child(2) svg { fill: #8363b2; }

.icon-with-description:last-child svg { fill: #ff9f1f; }
@charset "UTF-8";
.degree-project-hero { background: #282d32; }

.degree-project-hero-description { display: inline; margin: 0; }

.degree-project-hero-description-container { margin: 15px auto; max-width: 600px; }

.degree-project-hero-description-container:before, .degree-project-hero-description-container:after { content: " "; display: table; }

.degree-project-hero-description-container:after { clear: both; }

.degree-project-hero-heading { margin-top: 25px; }

.degree-project-hero-info-container { display: inline-block; margin: 0 5px; position: relative; top: 3px; }

.degree-project-hero-info-icon { fill: #fff; }

.degree-project-hero-info-tooltip { width: 360px; margin-bottom: 10px; }

.degree-project-hero-submission-date { color: #fff; }

.degree { color: #1a2126; }

.degree-project-video { margin-bottom: 30px; }

.degree .large { font-size: 16px; margin-bottom: 30px; }

.degree .heading-margin-bottom { margin-top: 30px; margin-bottom: 15px; }

.degree .box.alert { border-radius: 3px; border-top: 5px solid #ffd466; margin-top: 30px; }

.degree .box.alert a:not(.button) { color: #3f8abf; font-weight: 500; }

.degree .box.alert a:not(.button):hover { color: #326e99; }

.degree-status { position: absolute; top: 25px; right: 30px; width: 200px; text-align: right; }

.degree-status-label { display: block; line-height: 14px; color: #fff; }

.degree-status-status { display: block; color: #fff; font-weight: 700; }

.degree-project-number { color: #fff; }

.degree-qa { background: #ffd466; color: #050708 !important; padding: 10px 20px; text-align: center; font-size: 16px; font-weight: 500; margin-bottom: 30px; display: inline-block; border-radius: 4px; }

.degree-qa svg { margin-right: 10px; width: 16px; height: 16px; top: 4px; }

.degree-subavailable { position: absolute; top: 25px; left: 30px; width: 200px; text-align: left; }

.degree-subavailable-label { display: block; line-height: 14px; }

.degree-subavailable-status { display: block; color: #fff; font-weight: 700; }

.degree .disc-list li { margin-top: 15px; list-style: none; padding-left: 32px; position: relative; line-height: 1.5; }

.degree .disc-list li:before { background: #d4d9dd; border-radius: 100%; content: ""; height: 5px; top: 5px; left: 10px; width: 5px; position: absolute; }

.degree .disc-list .highlighted { font-weight: 500; color: #1a2126; }

.degree .expandable { cursor: pointer; border-bottom: 1px solid #ebedef; }

.degree .expandable .requirement-review-description { padding-left: 40px; padding-bottom: 20px; }

.degree .expandable-toggle { margin: 0; padding: 20px 60px 20px 40px; display: block; font-weight: 300; font-size: 13px; width: 100%; color: #2b363e; position: relative; line-height: 1.5; transition: color 0.3s ease; }

.degree .expandable-toggle .chevron-icon { position: absolute; top: 30px; right: 15px; height: 8px; width: 12px; fill: #c6ccd2; }

.degree .expandable-toggle .markdown-zone ul:last-child, .degree .expandable-toggle .markdown-zone ul:last-child li:last-child, .degree .expandable-toggle .markdown-zone p:last-child { margin-bottom: 0; }

.degree .expandable-toggle-open { font-weight: 500; }

.degree .expandable-toggle-open .chevron-icon { -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.degree .expandable-toggle-open, .degree .expandable-toggle:hover { color: #1a2126; }

.degree .expandable-toggle-open .chevron-icon, .degree .expandable-toggle:hover .chevron-icon { fill: #384047; }

.degree .expandable-content { padding: 0 60px 10px 40px; }

.degree .expandable:last-child { border-bottom: none; }

.degree .selected .chevron-icon { -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.degree .grade-below .expandable-toggle:before { top: 8px; content: "–"; position: absolute; left: 13px; font-size: 30px; font-weight: 300; color: #d1d6d9; }

.degree .grade-below .expandable-toggle-open:before { color: #ed5a5a; }

.degree .grade-meets .expandable-toggle:before, .degree .grade-exceeds .expandable-toggle:before { top: 25px; content: ""; background: url("https://static.teamtreehouse.com/assets/icons/icon-global-ab51372fb9b252121eba2b0425561b33.svg") no-repeat -155px -61px; width: 14px; height: 12px; position: absolute; left: 15px; }

.degree .grade-meets .expandable-toggle-open:before, .degree .grade-exceeds .expandable-toggle-open:before { background-position: -155px -49px; }

.degree-progress { border-radius: 4px 4px 0 0; height: 60px; line-height: 60px; margin: -30px -30px 0; padding: 0 30px; background: #397cac; }

@media screen and (max-width: 679px) { .degree-progress { margin: -20px -20px 0; } }

.degree-progress svg { fill: #fff; height: 18px; top: 4px; width: 18px; position: relative; }

.degree-progress .estimate { color: #fff; float: right; font-weight: 500; font-size: 14px; white-space: nowrap; }

.degree .confetti-bg { position: absolute; z-index: 0; top: 0; left: 0; height: 300px; width: 100%; }

.degree svg#confetti-bg { position: absolute; left: 50%; top: 50%; opacity: 0.5; -ms-transform: translate(-50%, -50%) scale(1.5); -moz-transform: translate(-50%, -50%) scale(1.5); -webkit-transform: translate(-50%, -50%) scale(1.5); transform: translate(-50%, -50%) scale(1.5); }

.degree svg#confetti-bg ellipse, .degree svg#confetti-bg path, .degree svg#confetti-bg polygon, .degree svg#confetti-bg rect { fill: #65a1cc; -webkit-animation-name: fanFair; -moz-animation-name: fanFair; animation-name: fanFair; -webkit-animation-duration: 10s; -moz-animation-duration: 10s; animation-duration: 10s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.degree svg#confetti-bg polygon, .degree svg#confetti-bg rect { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; animation-delay: 3s; }

.degree-hero { margin: 0 -30px; padding: 60px 0; text-align: center; position: relative; background: #3677a4; background: linear-gradient(157deg, #265372 0%, #3677a4 100%); }

@media screen and (max-width: 679px) { .degree-hero { margin: 0 -20px 0 -20px; padding: 30px; } }

.degree-hero h1, .degree-hero h3 { color: #fff; }

.degree-hero h1 { font-size: 34px; margin: 0 0 45px; }

@media screen and (max-width: 679px) { .degree-hero h1 { font-size: 22px; margin: 0 0 20px; } }

.degree-hero h2 { margin: 0 auto 15px; }

@media screen and (max-width: 679px) { .degree-hero h2 { font-size: 14px; margin: 0 auto 5px; } }

.degree-hero h3 svg { border: 2px solid #fff; background: #fff; border-radius: 100%; width: 24px; height: 24px; position: relative; margin-right: 4px; top: 4px; }

.degree-hero p { color: rgba(255, 255, 255, 0.9); max-width: 700px; margin: 15px auto; font-size: 16px; }

.degree-hero p a { color: #fff; font-weight: 500; }

.degree-hero p svg { fill: #fff; }

.degree-hero .grade-exceeds h3 svg { fill: #5fcf80; }

.degree-hero .grade-meets h3 svg { fill: #3f8abf; }

.degree-hero .grade-below h3 svg { fill: #ed5a5a; }

.degree-hero .actions { z-index: 2; position: relative; }

.degree .tabs { background: #265372; margin: auto -30px 30px -30px; padding: 23px 0 0 30px; position: sticky; position: -webkit-sticky; top: 70px; z-index: 101; }

@media screen and (max-width: 679px) { .degree .tabs { margin: 0 -20px 30px -20px; top: 50px; position: unset; padding: 0px 30px; } }

.degree .tabs li.current { border-bottom: 4px solid #5FCF80; bottom: -2px; }

@media screen and (max-width: 679px) { .degree .tabs li.current { bottom: 0px; } }

.degree .tabs li.current a { color: #fff; }

.degree .tabs li a { color: rgba(255, 255, 255, 0.8); }

.degree .degree-automated-message { margin: 30px auto 80px auto; width: 240px; }

.degree .degree-automated-message a { color: #fff; font-weight: 700; float: left; }

.degree .degree-automated-message a .info-icon { margin: 4px 5px 0 0; fill: #fff; display: block; width: 15px; height: 15px; float: left; }

.degree .degree-automated-message .tooltip { margin-top: 30px; width: 400px !important; text-align: center; }

.degree .grade .box-shaded { margin: 15px 0 30px; padding: 0; position: relative; }

.degree .grade .box-shaded:before { position: absolute; content: ""; width: 100%; height: 4px; top: 0; left: 0; border-radius: 4px 4px 0 0; }

.degree .grade.grade-below .box-shaded:before { background: #ed5a5a; }

.degree .grade.grade-meets .box-shaded:before { background: #3f8abf; }

.degree .grade.grade-exceeds .box-shaded:before { background: #5fcf80; }

.project h2 { margin-bottom: 20px; }

.project-stage { padding: 20px 0 0 80px; margin-bottom: 50px; }

.project-stage h3 { margin-bottom: 10px; }

.project-stage p { line-height: 1.8; font-size: 14px; margin-bottom: 20px; max-width: 760px; }

.project-stage .radial-icon { float: left; margin-left: -80px; width: 60px; height: 60px; line-height: 60px; display: inline-block; position: relative; }

.project-stage .radial-icon:after { content: ""; border: 5px solid #d4d9dd; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; }

.project-stage .radial-icon .right-arrow-icon, .project-stage .radial-icon .star-small-icon { top: 50%; left: 50%; margin: -9px 0 0 -9px; width: 18px; height: auto; fill: #d4d9dd; position: absolute; }

.project-stage .radial-icon .star-small-icon { margin: -11px 0 0 -11px; width: 22px; -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }

.project-stage .steps-list { list-style: none; counter-reset: numbered-counter; }

.project-stage .steps-list-item:not(.exceeds-note) { counter-increment: numbered-counter; border-top: 1px solid #e8ebed; padding: 0 0 15px 0; }

.project-stage .steps-list-item:not(.exceeds-note):before { content: counter(numbered-counter); color: #1a2126; right: 30px; top: 22px; position: relative; }

.project-stage .steps-list .exceeds-note { background: #f9fafa; padding: 20px; border-radius: 4px; }

.project-stage .steps-list .markdown-zone h1, .project-stage .steps-list .markdown-zone h2, .project-stage .steps-list .markdown-zone h3, .project-stage .steps-list .markdown-zone h4, .project-stage .steps-list .markdown-zone h5, .project-stage .steps-list .markdown-zone h6 { font-size: 14px; }

.project-stage .steps-list .markdown-zone h1, .project-stage .steps-list .markdown-zone h2, .project-stage .steps-list .markdown-zone h3, .project-stage .steps-list .markdown-zone h4, .project-stage .steps-list .markdown-zone h5, .project-stage .steps-list .markdown-zone h6, .project-stage .steps-list .markdown-zone p { line-height: 1.5; margin-bottom: 10px; }

.project-stage .steps-list .markdown-zone ul, .project-stage .steps-list .markdown-zone ol { margin-bottom: 12px; }

.project-stage .steps-list .markdown-zone hr { border-color: #e8ebed; }

.project #syllabus-stages .steps-list-item li > a { display: inline; padding: 0; }

.project #syllabus-stages .toggle-steps { font-size: 14px; font-weight: 500; display: block; margin-bottom: 20px; color: #326e99; }

.project #syllabus-stages .toggle-steps:hover { cursor: pointer; }

.project #syllabus-stages .toggle-steps:hover svg { fill: #6E7881; }

.project #syllabus-stages .toggle-steps .chevron-icon { width: 12px; margin: 0 4px 0 0; fill: #265372; }

.project-downloads-info { display: table; width: 100%; }

.project-downloads img { max-width: 100%; border: 5px solid #fff; margin-bottom: 15px; }

.project-downloads h3 { margin-top: 3px; }

.project-downloads p { font-size: 12px; font-weight: 500; color: #2b363e; margin: 3px 0 0; }

.project-downloads .right { display: table-cell; vertical-align: middle; text-align: right; }

.project-downloads .left { display: table-cell; vertical-align: middle; }

.project-downloads .button:hover { background: #5fcf80; border-color: #5fcf80 !important; }

.project-downloads .button:hover svg { fill: #fff !important; }

.project-related .box-shaded { margin-top: 15px; padding: 20px; }

.project-related-item { border-bottom: 1px solid #d4d9dd; display: block; padding: 20px 0; }

.project-related-item:first-child { padding-top: 5px; }

.project-related-item:last-child { padding-bottom: 5px; border-bottom: none; }

.project-related-item h4 { color: #326e99; }

.project-related-item:hover h4 { color: #303853; text-decoration: underline; }

.project-related .type { color: #1a2126; font-size: 12px; font-weight: 500; margin-bottom: 5px; display: block; }

.project-related h4 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: color 0.3s ease; }

.project-help h3 + p { margin-top: 15px; }

.project-requirements p.large { margin-bottom: 30px; }

.project-requirements svg { width: 22px; height: 22px; fill: #C7CED5; margin: -4px 5px 0 0; vertical-align: middle; }

.project-requirements table { width: 100%; }

.project-requirements table .markdown-zone ul { margin: 0 0 0 16px; padding: 0; list-style-position: outside; }

.project-requirements table .markdown-zone li:last-child { margin-bottom: 0; }

.project-requirements tr { border-bottom: 1px solid #e7eaeb; }

.project-requirements tr:last-child { border: none; }

.project-requirements td, .project-requirements th { width: 25%; }

.project-requirements thead { text-align: left; }

.project-requirements thead th { z-index: 1; position: sticky; position: -webkit-sticky; top: 137px; background: #fff; box-shadow: 0px 2px 0px 0px #d4d9dd; padding: 20px 0; }

.project-requirements td { font-size: 14px; padding: 10px 8px; position: relative; }

.project-requirements td:first-child, .project-requirements th:first-child { font-weight: 500; padding: 15px 8px; }

.project-requirements .grade-below h3 svg { fill: #ed5a5a; }

.project-requirements .grade-meets h3 svg { fill: #3f8abf; }

.project-requirements .grade-exceeds h3 svg { fill: #5fcf80; }

@media screen and (max-width: 969px) { .project-requirements table, .project-requirements thead, .project-requirements tbody, .project-requirements th, .project-requirements td, .project-requirements tr { display: block; }
  .project-requirements td, .project-requirements th { width: 100%; }
  .project-requirements thead tr { position: absolute; top: -9999px; left: -9999px; }
  .project-requirements td { position: relative; padding: 30px 0 10px; }
  .project-requirements td:first-child { display: block; padding: 15px 0 0 0; font-weight: 500; line-height: 1.5; color: #101417; }
  .project-requirements td:last-child { padding-bottom: 20px; }
  .project-requirements td:before { display: none; }
  .project-requirements td:after { position: absolute; top: 10px; left: 0; white-space: nowrap; font-size: 14px; font-weight: 500; }
  .project-requirements td:nth-of-type(2):after { content: "Needs Work"; color: #ed5a5a; }
  .project-requirements td:nth-of-type(3):after { content: "Meets Expectations"; color: #3f8abf; }
  .project-requirements td:nth-of-type(4):after { content: "Exceeds Expectations"; color: #35A961; } }

.project-grade-comments h3 { margin-bottom: 15px; }

#new_student_project_submission fieldset .grid-25 label { margin: 10px 15px 10px 0; }

.treehouse-layout .project #syllabus-stages .steps-list h4 { margin-bottom: 0; }

.cr-rating { border: solid 2px #e8ebed; border-radius: 5px; padding: 20px; margin-bottom: 30px; width: 100%; position: relative; }

.cr-rating-thanks { color: #5fcf80; font-size: 14px; font-weight: 700; line-height: 1.5; }

.cr-rating-low-message { color: #2b363e; font-size: 14px; font-weight: 400; line-height: 1.5; margin-top: 14px; padding-right: 210px; }

.cr-rating-question { font-size: 14px; font-weight: 700; line-height: 1.5; }

.submitted .cr-rating-question { display: none; }

.cr-rating-textarea { margin-top: 22px; margin-bottom: 20px; }

.cr-rating .star-rating-container { width: 155px; }

@media screen and (max-width: 969px) { .cr-rating .star-rating-container { margin: 15px 0 0 0; } }

@media screen and (min-width: 970px) { .cr-rating .star-rating-container { position: absolute; top: 18px; right: 20px; } }

.cr-rating .star-rating-icon { padding: 0 5px; }

@media screen and (max-width: 969px) { .cr-rating .star-rating-icon:last-of-type { padding-left: 0; } }

@media screen and (min-width: 970px) { .cr-rating .star-rating-icon:first-of-type { padding-right: 0; } }

.cr-rating .star-large-icon { fill: #fff; margin: 0; }
.project-review .loading-icon { margin-top: -3px; margin-bottom: -3px; margin-right: 1px; }

.stage-progress-container { background-color: #29447c; }

.stage-progress-container .right { float: right; }

.stage-progress-container .project-review-begin-review { margin: 15px 30px 0 0; }

.stage-progress-heading { color: #fff; font-size: 16px; font-weight: 700; margin: 20px 0 20px 0; float: left; }

.stage-progress-subheading { color: rgba(255, 255, 255, 0.75); margin: 20px 10px 0 30px; float: left; }

.stage-progress-copy { color: rgba(255, 255, 255, 0.75); max-width: 600px; margin: 0 auto 30px auto; }

.project-review-steps { background-color: #3659a2; border-radius: 5px 5px 0 0; }

.stage-progress-step-progress { fill: none; stroke-width: 2px; }

.stage-progress-tooltip { text-align: center; }

.stage-progress-tooltip-heading { line-height: 18px; display: block; font-size: 13px; }

.stage-progress-tooltip-grade { font-weight: 700; line-height: 20px; }

.stage-progress-tooltip-grade.requirements-info-grade-below { color: #ed5a5a; }

.stage-progress-tooltip-grade.requirements-info-grade-meets { color: #3f8abf; }

.stage-progress-tooltip-grade.requirements-info-grade-exceeds { color: #5fcf80; }

.tooltip-bottom.stage-progress-tooltip { top: 90%; }

.review-progress-step-icon { opacity: 0.3; }

@media screen and (max-width: 766px) { .review-progress-step-icon { width: 22px; height: 22px; } }

@media screen and (min-width: 767px) { .review-progress-step-icon { width: 22px; height: 22px; } }

.review-progress-step-icon:hover, .review-progress-step-icon:focus { opacity: 1; }

.review-progress-step-icon .review-progress-step-icon-complete.review-progress-step-icon-current, .review-progress-step-icon-current { opacity: 1; }

.project-review-details { margin: 20px 0px; }

.project-review-details-heading { margin: 0 0 10px 0; }

.project-review-details-begin { margin: 20px 0 0 0; }

.project-review-heading { border-bottom: 2px solid #f0f2f4; margin: 0 10px 20px 10px; padding-bottom: 15px; }

.project-review-requirements { margin: 0; }

.project-review-previous { background: #f9fafa; border-radius: 4px; padding: 15px; margin: 40px 0 !important; }

.project-review-previous p { margin: 0; }

.project-review-previous a { margin-top: 2px; }

.past-feedback-heading { margin-bottom: 10px; }

.past-feedback-item { position: relative; background: #f9fafa; border-radius: 4px; padding: 15px 20px; margin-bottom: 20px !important; }

.past-feedback-item .right-chevron-small-icon { fill: #1a2126; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.past-feedback-item-name { margin-top: 3px; font-weight: 500; margin-left: 5px; font-size: 15px; text-rendering: optimizeLegibility; color: #1a2126; }

.past-feedback-item-name:hover { color: #050708; }

.past-feedback-item-comment { margin: 10px 0 0 0; }

.past-feedback-item-comment ul { list-style: disc; margin-left: 24px; margin-top: 15px; }

.past-feedback-item-comment li { color: #1a2126; padding-left: 8px; margin-bottom: 10px; line-height: 1.5; }

.past-feedback-item-grade { position: absolute; right: 20px; top: 12px; width: 190px; font-weight: 500; text-rendering: optimizeLegibility; }

.past-feedback-item-grade .caution-circle-icon, .past-feedback-item-grade .checkmark-fill-icon { width: 20px; position: relative; top: 4px; margin-right: 5px; }

.past-feedback-item .requirements-info-grade-below .caution-circle-icon { fill: #ed5a5a; }

.past-feedback-item .requirements-info-grade-meets .checkmark-fill-icon { fill: #3f8abf; }

.past-feedback-item .requirements-info-grade-exceeds .checkmark-fill-icon { fill: #5fcf80; }

.past-feedback-item.close { height: 55px; }

.past-feedback-item.close .past-feedback-item-comment { display: none; }

.past-feedback-item.close .right-chevron-small-icon { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }

.requirements-passing-note { background-color: #f9fafa; border-radius: 5px; text-align: center; padding: 40px; margin: 20px 0 30px 0; font-size: 16px; }

.code-reviews-controller .requirements .caution-circle-icon, .code-reviews-controller .requirements .checkmark-fill-icon, .project-requirement-reviews-controller .requirements .caution-circle-icon, .project-requirement-reviews-controller .requirements .checkmark-fill-icon { width: 22px; position: relative; top: 3px; margin-right: 5px; }

.code-reviews-controller .requirements-grade-below .caution-circle-icon, .project-requirement-reviews-controller .requirements-grade-below .caution-circle-icon { fill: #ed5a5a; }

.code-reviews-controller .requirements-grade-meets .checkmark-fill-icon, .project-requirement-reviews-controller .requirements-grade-meets .checkmark-fill-icon { fill: #3f8abf; }

.code-reviews-controller .requirements-grade-exceeds .checkmark-fill-icon, .project-requirement-reviews-controller .requirements-grade-exceeds .checkmark-fill-icon { fill: #5fcf80; }

.code-reviews-controller .requirements-grade-below, .code-reviews-controller .requirements-grade-meets, .project-requirement-reviews-controller .requirements-grade-below, .project-requirement-reviews-controller .requirements-grade-meets { margin-bottom: 20px; }

.code-reviews-controller .requirements-title, .project-requirement-reviews-controller .requirements-title { font-size: 16px; }

.code-reviews-controller .requirements ul, .project-requirement-reviews-controller .requirements ul { list-style: disc; margin-left: 24px; margin-top: 15px; }

.code-reviews-controller .requirements li, .project-requirement-reviews-controller .requirements li { color: #1a2126; padding-left: 8px; margin-bottom: 10px; line-height: 1.5; }

.code-reviews-controller .project-submission-comments, .project-requirement-reviews-controller .project-submission-comments { background: #f9fafa; border-radius: 4px; padding: 15px 20px 5px 20px; margin-bottom: 20px; position: relative; }

.code-reviews-controller .project-submission-comments ul, .project-requirement-reviews-controller .project-submission-comments ul { list-style: disc; margin-left: 24px; margin-top: 15px; }

.code-reviews-controller .project-submission-comments li, .project-requirement-reviews-controller .project-submission-comments li { color: #1a2126; padding-left: 8px; margin-bottom: 10px; line-height: 1.5; }

.code-reviews-controller .project-review-comments-heading, .project-requirement-reviews-controller .project-review-comments-heading { margin: 15px 0 10px 0; }

.code-reviews-controller .project-review-comments-heading, .code-reviews-controller .project-review-downloads-heading, .project-requirement-reviews-controller .project-review-comments-heading, .project-requirement-reviews-controller .project-review-downloads-heading { font-size: 15px; }

@media screen and (max-width: 766px) { .code-reviews-controller .project-review-comments-heading, .code-reviews-controller .project-review-downloads-heading, .project-requirement-reviews-controller .project-review-comments-heading, .project-requirement-reviews-controller .project-review-downloads-heading { margin-top: 40px; } }

@media screen and (min-width: 767px) { .code-reviews-controller .project-review-comments-heading, .code-reviews-controller .project-review-downloads-heading, .project-requirement-reviews-controller .project-review-comments-heading, .project-requirement-reviews-controller .project-review-downloads-heading { margin-top: 0px; } }

.code-reviews-controller .project-review-details-heading-inner, .project-requirement-reviews-controller .project-review-details-heading-inner { margin-top: 40px; }

.code-reviews-controller .project-review-downloads, .project-requirement-reviews-controller .project-review-downloads { background: #f9fafa; border-radius: 4px; padding: 15px 20px; margin-bottom: 20px !important; }

.code-reviews-controller .project-review-downloads img, .project-requirement-reviews-controller .project-review-downloads img { max-width: 100%; border: 5px solid #fff; margin-bottom: 15px; }

.code-reviews-controller .project-review-downloads h3, .project-requirement-reviews-controller .project-review-downloads h3 { margin-top: 3px; }

.code-reviews-controller .project-review-downloads p, .project-requirement-reviews-controller .project-review-downloads p { font-size: 12px; font-weight: 500; color: #2b363e; margin: 3px 0 0; }

.code-reviews-controller .project-review-downloads .right, .project-requirement-reviews-controller .project-review-downloads .right { float: right; }

.code-reviews-controller .project-review-downloads .left, .project-requirement-reviews-controller .project-review-downloads .left { float: left; }

.code-reviews-controller .project-review-downloads .button, .project-requirement-reviews-controller .project-review-downloads .button { margin: 5px 0 0 5px; }

.code-reviews-controller .project-review-downloads svg, .project-requirement-reviews-controller .project-review-downloads svg { height: 12px; width: 12px; margin: 1px 0 0 2px; }

.code-reviews-controller .project-review-downloads .button:hover, .project-requirement-reviews-controller .project-review-downloads .button:hover { background-color: #5fcf80; border-color: #5fcf80; }

.code-reviews-controller .project-review-downloads .button:hover svg, .project-requirement-reviews-controller .project-review-downloads .button:hover svg { fill: #fff; }

.code-reviews-controller .project-review-downloads-heading, .project-requirement-reviews-controller .project-review-downloads-heading { margin-bottom: 10px; }

.code-reviews-controller .project-review-downloads-github svg, .project-requirement-reviews-controller .project-review-downloads-github svg { height: 16px; width: 16px; margin: -2px 0 0 1px; }

.code-reviews-controller .project-review-reject, .project-requirement-reviews-controller .project-review-reject { margin: 50px 15px 0 15px; padding: 20px 5px 0px 5px; background-color: #f9fafa; border-radius: 5px; }

.code-reviews-controller .project-review-reject-button, .project-requirement-reviews-controller .project-review-reject-button { display: block; margin-top: 10px; }

@media screen and (max-width: 766px) { .code-reviews-controller .project-review-reject-button, .project-requirement-reviews-controller .project-review-reject-button { margin-bottom: 25px; } }

@media screen and (min-width: 767px) { .code-reviews-controller .project-review-reject-button, .project-requirement-reviews-controller .project-review-reject-button { margin-bottom: 25px; } }

.code-reviews-controller .requirements-form-container, .project-requirement-reviews-controller .requirements-form-container { padding-right: 25px; }

@media screen and (max-width: 766px) { .code-reviews-controller .requirements-form-container, .project-requirement-reviews-controller .requirements-form-container { margin-top: 40px; } }

@media screen and (min-width: 767px) { .requirement-review-action .code-reviews-controller .requirements-form-container, .requirement-review-action .project-requirement-reviews-controller .requirements-form-container { padding-left: 100px; } }

.code-reviews-controller .requirements-form-container .button-primary, .project-requirement-reviews-controller .requirements-form-container .button-primary { width: 180px; }

.code-reviews-controller .requirements-form-container .button .right-arrow-icon, .project-requirement-reviews-controller .requirements-form-container .button .right-arrow-icon { margin: 5px 3px 3px 3px; }

.code-reviews-controller .requirements-form-container .button .left-arrow-icon, .project-requirement-reviews-controller .requirements-form-container .button .left-arrow-icon { margin: 5px 3px 3px 3px; }

.code-reviews-controller .requirements-form-title, .project-requirement-reviews-controller .requirements-form-title { margin-bottom: 10px; }

.code-reviews-controller .requirements-form-list, .project-requirement-reviews-controller .requirements-form-list { margin-bottom: 20px; }

.code-reviews-controller .requirements-form-list .checkbox, .project-requirement-reviews-controller .requirements-form-list .checkbox { border: none; }

.code-reviews-controller .requirements-form-list .checkbox label, .project-requirement-reviews-controller .requirements-form-list .checkbox label { padding-top: 12px; padding-bottom: 12px; }

.code-reviews-controller .requirements-form-feedback, .project-requirement-reviews-controller .requirements-form-feedback { margin-bottom: 25px; }

.code-reviews-controller .requirements-form-feedback textarea, .project-requirement-reviews-controller .requirements-form-feedback textarea { margin-bottom: 15px; }

.code-reviews-controller .requirements-form-feedback input, .project-requirement-reviews-controller .requirements-form-feedback input { width: 85px; }

.code-reviews-controller .requirements-form-feedback label, .project-requirement-reviews-controller .requirements-form-feedback label { font-weight: 700; margin-bottom: 10px; display: block; }

.code-reviews-controller #content .grid-container.requirement-notes, .project-requirement-reviews-controller #content .grid-container.requirement-notes { margin: 60px -30px 0 -30px; }

.code-reviews-controller .requirement-notes, .project-requirement-reviews-controller .requirement-notes { margin-top: 30px; padding: 30px 15px 0 15px; border-top: solid 1px #f0f2f4; }

.code-reviews-controller .requirement-notes-title, .project-requirement-reviews-controller .requirement-notes-title { margin-bottom: 15px; }

.code-reviews-controller .requirement-notes-content, .project-requirement-reviews-controller .requirement-notes-content { margin-bottom: 0; }

.code-reviews-controller .requirement-notes ul, .project-requirement-reviews-controller .requirement-notes ul { list-style: disc; margin-left: 24px; margin-top: 15px; }

.code-reviews-controller .requirement-notes li, .project-requirement-reviews-controller .requirement-notes li { color: #1a2126; padding-left: 8px; margin-bottom: 10px; line-height: 1.5; }

.project-review-recap, .requirements-recap { margin: 0 15px; }

.project-review-recap-content-edit, .requirements-recap-content-edit { opacity: 0; color: #3f8abf; font-size: 12px; -webkit-transition: opacity .3s; }

.project-review-recap ul, .requirements-recap ul { list-style: disc; margin-left: 24px; margin-top: 15px; }

.project-review-recap li, .requirements-recap li { color: #1a2126; margin-bottom: 10px; line-height: 1.5; }

.project-review-recap-item-list, .requirements-recap-item-list { margin: 0 0 30px 0 !important; padding: 0; }

.project-review-recap-item, .requirements-recap-item { list-style: none; margin-bottom: 30px !important; padding: 0 240px 10px 0; border-bottom: solid 1px #edeff0; position: relative; }

.project-review-recap-item:hover .requirements-recap-content-edit, .requirements-recap-item:hover .requirements-recap-content-edit { opacity: 1; }

.project-review-recap-item:last-child, .requirements-recap-item:last-child { border-bottom: none; }

.project-review-recap-item a, .requirements-recap-item a { color: #1a2126; }

.project-review-recap-content-heading, .requirements-recap-content-heading { font-size: 15px; }

.project-review-recap-grade, .project-review-recap .requirements-info-grade, .requirements-recap-grade, .requirements-recap .requirements-info-grade { position: absolute; width: 200px; top: 0; right: 0; }

.project-review-recap-grade .caution-circle-icon, .project-review-recap-grade .checkmark-fill-icon, .project-review-recap .requirements-info-grade .caution-circle-icon, .project-review-recap .requirements-info-grade .checkmark-fill-icon, .requirements-recap-grade .caution-circle-icon, .requirements-recap-grade .checkmark-fill-icon, .requirements-recap .requirements-info-grade .caution-circle-icon, .requirements-recap .requirements-info-grade .checkmark-fill-icon { width: 18px; position: relative; top: 4px; margin-right: 5px; }

.project-review-recap-grade-below .caution-circle-icon, .project-review-recap .requirements-info-grade-below .caution-circle-icon, .requirements-recap-grade-below .caution-circle-icon, .requirements-recap .requirements-info-grade-below .caution-circle-icon { fill: #ed5a5a; }

.project-review-recap-grade-meets .checkmark-fill-icon, .project-review-recap .requirements-info-grade-meets .checkmark-fill-icon, .requirements-recap-grade-meets .checkmark-fill-icon, .requirements-recap .requirements-info-grade-meets .checkmark-fill-icon { fill: #3f8abf; }

.project-review-recap-grade-exceeds .checkmark-fill-icon, .project-review-recap .requirements-info-grade-exceeds .checkmark-fill-icon, .requirements-recap-grade-exceeds .checkmark-fill-icon, .requirements-recap .requirements-info-grade-exceeds .checkmark-fill-icon { fill: #5fcf80; }

.project-review-recap-grade-below, .project-review-recap-grade-meets, .project-review-recap .requirements-info-grade-below, .project-review-recap .requirements-info-grade-meets, .requirements-recap-grade-below, .requirements-recap-grade-meets, .requirements-recap .requirements-info-grade-below, .requirements-recap .requirements-info-grade-meets { margin-bottom: 20px; }

.project-review-recap-grade-below .requirements-recap-grade-grade, .project-review-recap .requirements-info-grade-below .requirements-recap-grade-grade, .requirements-recap-grade-below .requirements-recap-grade-grade, .requirements-recap .requirements-info-grade-below .requirements-recap-grade-grade { color: #ed5a5a; }

.project-review-recap-grade-meets .requirements-recap-grade-grade, .project-review-recap .requirements-info-grade-meets .requirements-recap-grade-grade, .requirements-recap-grade-meets .requirements-recap-grade-grade, .requirements-recap .requirements-info-grade-meets .requirements-recap-grade-grade { color: #3f8abf; }

.project-review-recap-grade-exceeds .requirements-recap-grade-grade, .project-review-recap .requirements-info-grade-exceeds .requirements-recap-grade-grade, .requirements-recap-grade-exceeds .requirements-recap-grade-grade, .requirements-recap .requirements-info-grade-exceeds .requirements-recap-grade-grade { color: #5fcf80; }

.project-review-recap-grade-label, .requirements-recap-grade-label { font-size: 13px; display: block; margin-bottom: -3px; color: #2b363e; }

.project-review-recap-grade-grade, .requirements-recap-grade-grade { font-weight: 700; }

.requirements-form-container-recap { margin: 0 5px; }

.project-review-recap .past-feedback { margin: 20px 15px 60px 15px; }

.checkbox.grade-needs-work .input-checkbox-radio:checked ~ span:before { border-color: #ed5a5a !important; }

.checkbox.grade-needs-work .input-checkbox-radio:checked ~ span { color: #ed5a5a; }

.checkbox.grade-needs-work .input-checkbox-radio:checked ~ svg { fill: #ed5a5a !important; }

.checkbox.grade-meets-expectations .input-checkbox-radio:checked ~ span:before { border-color: #3f8abf !important; }

.checkbox.grade-meets-expectations .input-checkbox-radio:checked ~ span { color: #3f8abf; }

.checkbox.grade-meets-expectations .input-checkbox-radio:checked ~ svg { fill: #3f8abf !important; }
.project-review-hero { padding: 60px 0; text-align: center; }

.project-review-hero-subheading { margin-bottom: 5px; }

.project-review-hero-heading { color: #fff; line-height: 1.3; margin-bottom: 40px; }

.project-review-hero-copy { color: rgba(255, 255, 255, 0.75); margin: 15px auto 40px auto; max-width: 600px; }
.instruction--content--topper { background: #55616c; border-radius: 4px 4px 0 0; height: 60px; line-height: 60px; padding: 0 30px; position: relative; }

.instruction--content--topper > svg { fill: #fff; height: 18px; top: 4px; width: 18px; position: relative; }

.instruction--content--topper .button { position: absolute; right: 20px; top: 10px; }

.instruction--content--topper .button svg { width: auto; height: 10px; }

.instruction--content--video { background: #2d3339; }

.instruction--content--video div.mejs-container:not(.mejs-treehouse-is-paused) .mejs-overlay { border: 0; }

.instruction--content--video div.mejs-container video { border-radius: 0 !important; }

.instruction--content--description { background: #fff; max-width: 720px; margin: 15px auto 20px; padding-left: 10px; padding-right: 10px; }

.instruction--content--description > p { font-size: 16px; line-height: 1.6; margin-bottom: 30px; }

.instruction--content--title { text-align: center; margin-bottom: 30px; line-height: 30px; }

.instruction--content--title h1 { font-size: 24px; margin: 0 0 8px; }

.instruction--content--title > strong { display: block; font-size: 18px; color: #2b363e; margin: 0 0 10px; }

.instruction--content--title p { color: #2b363e; }

.instruction--content--title a { font-weight: 700; color: #55616c; }

.instruction--content--title a:hover { color: #3f474f; }

.instruction--content--text { max-width: 720px; margin: 50px auto 20px; padding-left: 10px; padding-right: 10px; }

@media screen and (max-width: 679px) { .instruction--content--text { padding-left: 0; padding-right: 0; } }

.instruction--content--text .markdown-zone h1::before, .instruction--content--text .markdown-zone h2::before, .instruction--content--text .markdown-zone h3::before, .instruction--content--text .markdown-zone h4::before, .instruction--content--text .markdown-zone h5::before, .instruction--content--text .markdown-zone h6::before { content: ""; display: block; position: relative; height: 50px; margin-top: -52px; visibility: hidden; }

@media screen and (min-width: 680px) { .instruction--content--text .markdown-zone h1::before, .instruction--content--text .markdown-zone h2::before, .instruction--content--text .markdown-zone h3::before, .instruction--content--text .markdown-zone h4::before, .instruction--content--text .markdown-zone h5::before, .instruction--content--text .markdown-zone h6::before { height: 72px; margin-top: -72px; } }

.instruction--content--text .markdown-zone h1 { font-size: 24px; }

.instruction--content--text .markdown-zone h2 { font-size: 20px; }

.instruction--content--text .markdown-zone h3 { font-size: 18px; }

.instruction--content--text .markdown-zone h4 { font-size: 16px; }

.instruction--content--text .markdown-zone p { margin-bottom: 25px; }

.instruction--content--text .markdown-zone p, .instruction--content--text .markdown-zone pre, .instruction--content--text .markdown-zone ul li, .instruction--content--text .markdown-zone ol li { font-size: 16px; }

.instruction--container { margin: 0 auto; background: #fff; padding: 10px; width: 100%; }

.instruction--bookmark--container .bookmarkable { padding: 10px 10px 0 0 !important; }
.styleguide-index h2 { clear: both; padding-left: 15px; margin-bottom: 25px; margin-top: 29px; font-size: 24px; }

.styleguide-index .grid-33:nth-child(3n+1) { clear: both; }

.styleguide-index .section-title { margin-bottom: 20px; }

.styleguide-index h3 a { color: #050708; }

.styleguide-index .styleguide-item-container { display: grid; grid-auto-rows: 1fr; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; padding: 0 15px; }

.styleguide-index .styleguide-item-container .styleguide-item .box:hover h3 a { color: #3f8abf; }

.styleguide-documentation h3 { margin-bottom: 12px; }

.styleguide-documentation p { margin-bottom: 0px; }

.styleguide-documentation .button { margin-top: 12px; }
.styleguide-animation .animation-wrap { flex-basis: 32%; margin-bottom: 15px; }

.styleguide-animation .animation-wrap-container { display: flex; flex-wrap: wrap; flex-flow: row wrap; justify-content: space-between; }

.styleguide-animation .animation-wrap-container::after { content: ""; display: flex; width: 32%; }

@media screen and (max-width: 679px) { .styleguide-animation .animation-wrap-container { display: block; } }

.styleguide-animation .animation-wrap:hover .box div { animation-play-state: running; }

.styleguide-animation .animation-wrap .box { margin-bottom: 0; }

.styleguide-animation .animation-wrap .box div { width: 20px; height: 20px; margin: 30px auto; background-color: #5fcf80; animation-play-state: paused; }

.styleguide-animation .animation-wrap p { margin-bottom: 0px; text-align: center; }

.styleguide-animation .animation-wrap p:first-of-type { font-weight: 700; }
.styleguide-avatar { margin: 0 auto; }

.styleguide-avatar-list { margin: 0 -15px 30px; }

.styleguide-avatar-list:before, .styleguide-avatar-list:after { content: " "; display: table; }

.styleguide-avatar-list:after { clear: both; }

.styleguide-avatar-item { text-align: center; font-size: 12px; color: #2b363e; line-height: 18px; }

@media screen and (min-width: 679px) { .styleguide-avatar-item { float: left; } }

@media screen and (min-width: 679px) and (max-width: 849px) { .styleguide-avatar-item { width: 33%; }
  .styleguide-avatar-item:nth-child(3n+1) { clear: both; } }

@media screen and (min-width: 850px) and (max-width: 1349px) { .styleguide-avatar-item { width: 25%; }
  .styleguide-avatar-item:nth-child(4n+1) { clear: both; } }

@media screen and (min-width: 1350px) { .styleguide-avatar-item { width: 20%; }
  .styleguide-avatar-item:nth-child(5n+1) { clear: both; } }

.styleguide-avatar-box { margin: 15px; padding: 15px; min-height: 200px; }

.styleguide-avatar-divider { margin: 15px -15px; }

.styleguide-avatar-description { color: #2b363e; font-size: 14px; }

.styleguide-avatar-type { color: #2b363e; font-size: 13px; display: block; margin: 15px 0 0; }
.styleguide-badge-list { margin: 30px 0px; display: flex; flex-wrap: wrap; }

.styleguide-badge-list:before, .styleguide-badge-list:after { content: " "; display: table; }

.styleguide-badge-list:after { clear: both; }

.styleguide-badge-list:after { content: ""; flex: auto; }

.styleguide-badge-item { width: 21%; margin-right: 5.3%; text-align: center; margin-bottom: 20px; font-size: 12px; line-height: 18px; font-weight: 700; }

.styleguide-badge-item:nth-child(4n) { margin-right: 0; }

.styleguide-badge-img { display: block; margin: 0 auto 15px; width: 100%; }

.styleguide-badge .tabs ul { border-top: 2px solid rgba(0, 0, 0, 0.08); padding-top: 15px; margin-top: 20px; }

.styleguide-badge .tabs ul li { margin-bottom: 15px; }

.styleguide-badge .tabs ul li a { padding-bottom: 6px; }

.styleguide-badge .tabs h2 { display: none; }
.styleguide-buttons .component-example { margin-bottom: 30px; }

.styleguide-buttons .component-example h5 { line-height: 24px; }

.styleguide-buttons .component-example button, .styleguide-buttons .component-example .button, .styleguide-buttons .component-example input { margin-bottom: 10px; }

.styleguide-buttons .component-example.inverse { background: #384047; border-radius: 4px !important; border: 14px solid #384047; color: red; }

.styleguide-buttons .component-example.inverse button, .styleguide-buttons .component-example.inverse .button, .styleguide-buttons .component-example.inverse input { margin-bottom: 0; }

.styleguide-buttons .button-example-topic-javascript { background-color: #3659a2; display: inline-block; padding: 10px 10px 0 10px; border-radius: 4px; }
@media screen and (min-width: 680px) { .styleguide-cards .card-list .card { width: 50% !important; } }

@media screen and (max-width: 679px) { .styleguide-cards .card-list .card { max-width: 350px; } }
.styleguide-playground .pine-link-back { margin-bottom: 30px; display: block; }

.styleguide-playground .playground-header { position: relative; background: white; margin-top: 30px; z-index: 40; }

.styleguide-playground .playground-header h2 { display: inline-block; padding-top: 30px; padding-bottom: 10px; font-size: 18px; }

.styleguide-playground .playground-header .button { position: absolute; margin-top: 20px; right: 0px; }

.styleguide-playground .playground-header.grid-container .button { right: 16px; }

.styleguide-playground-og .markdown-zone .highlight { background: #384047; }

.styleguide-playground-og .highlight code, .styleguide-playground-og .highlight pre { color: #ff7d4f; }

.styleguide-playground-og .highlight .hll { background-color: #222; }

.styleguide-playground-og .highlight .c { color: #5fcf80; }

.styleguide-playground-og .highlight .err { color: #ff7d4f; background-color: #2d3339; }

.styleguide-playground-og .highlight .g { color: #5fcf80; }

.styleguide-playground-og .highlight .k { color: #ff7d4f; }

.styleguide-playground-og .highlight .l { color: #8d9aa5; }

.styleguide-playground-og .highlight .n { color: #dcdccc; }

.styleguide-playground-og .highlight .o { color: #2b363e; }

.styleguide-playground-og .highlight .x { color: #8d9aa5; }

.styleguide-playground-og .highlight .p { color: #2b363e; }

.styleguide-playground-og .highlight .cm, .styleguide-playground-og .highlight .cp, .styleguide-playground-og .highlight .c1 { color: #5fcf80; }

.styleguide-playground-og .highlight .cs { color: #cd0000; font-weight: 700; }

.styleguide-playground-og .highlight .gd { color: #cd0000; }

.styleguide-playground-og .highlight .ge { color: #8d9aa5; font-style: italic; }

.styleguide-playground-og .highlight .gr { color: red; }

.styleguide-playground-og .highlight .gh { color: #dcdccc; font-weight: 700; }

.styleguide-playground-og .highlight .gi { color: #00cd00; }

.styleguide-playground-og .highlight .go { color: gray; }

.styleguide-playground-og .highlight .gp { color: #dcdccc; font-weight: 700; }

.styleguide-playground-og .highlight .gs { color: #8d9aa5; font-weight: 700; }

.styleguide-playground-og .highlight .gu { color: purple; font-weight: 700; }

.styleguide-playground-og .highlight .gt { color: #0040D0; }

.styleguide-playground-og .highlight .kc { color: #dca3a3; }

.styleguide-playground-og .highlight .kd { color: #ffff86; }

.styleguide-playground-og .highlight .kn { color: #dfaf8f; font-weight: 700; }

.styleguide-playground-og .highlight .kp { color: #cdcf99; }

.styleguide-playground-og .highlight .kr { color: #ff7d4f; }

.styleguide-playground-og .highlight .kt { color: #00cd00; }

.styleguide-playground-og .highlight .ld { color: #db5599; }

.styleguide-playground-og .highlight .m { color: #3ec6e5; }

.styleguide-playground-og .highlight .s { color: #db5599; }

.styleguide-playground-og .highlight .na { color: #5fcf80; }

.styleguide-playground-og .highlight .nb, .styleguide-playground-og .highlight .nc { color: #ff7d4f; }

.styleguide-playground-og .highlight .no, .styleguide-playground-og .highlight .nd { color: #8d9aa5; }

.styleguide-playground-og .highlight .ni { color: #c28182; }

.styleguide-playground-og .highlight .ne { color: #c3bf9f; font-weight: 700; }

.styleguide-playground-og .highlight .nf { color: #efef8f; }

.styleguide-playground-og .highlight .nl { color: #8d9aa5; }

.styleguide-playground-og .highlight .nn { color: #8fbede; }

.styleguide-playground-og .highlight .nx, .styleguide-playground-og .highlight .py { color: #8d9aa5; }

.styleguide-playground-og .highlight .nt { color: #5fcf80; }

.styleguide-playground-og .highlight .nv { color: #2b363e; }

.styleguide-playground-og .highlight .ow { color: #2b363e; }

.styleguide-playground-og .highlight .w { color: #8d9aa5; }

.styleguide-playground-og .highlight .mf, .styleguide-playground-og .highlight .mh, .styleguide-playground-og .highlight .mi, .styleguide-playground-og .highlight .mo { color: #3ec6e5; }

.styleguide-playground-og .highlight .sb, .styleguide-playground-og .highlight .sc, .styleguide-playground-og .highlight .sd, .styleguide-playground-og .highlight .s2, .styleguide-playground-og .highlight .se, .styleguide-playground-og .highlight .sh, .styleguide-playground-og .highlight .si, .styleguide-playground-og .highlight .sx, .styleguide-playground-og .highlight .sr, .styleguide-playground-og .highlight .s1, .styleguide-playground-og .highlight .ss { color: #db5599; }

.styleguide-playground-og .highlight .bp, .styleguide-playground-og .highlight .vc { color: #efef8f; }

.styleguide-playground-og .highlight .vg { color: #dcdccc; }

.styleguide-playground-og .highlight .vi { color: #ffffc7; }

.styleguide-playground-og .highlight .il { color: #3ec6e5; }

.styleguide-playground-og #cc-editor { /*
Solarized theme for code-mirror
http://ethanschoonover.com/solarized
*/ /*
Solarized color palette
http://ethanschoonover.com/solarized/img/solarized-palette.png
*/ /* Color scheme for code-mirror */ /* Editor styling */ /* Little shadow on the view-port of the buffer view */ /* Remove gutter border */ /* Gutter colors and line number styling based of color scheme (dark / light) */ /* Dark */ /* Light */ /* Common */ /* Cursor */ /* Fat cursor */ /* Active line */ }

.styleguide-playground-og #cc-editor .solarized.base03 { color: #002b36; }

.styleguide-playground-og #cc-editor .solarized.base02 { color: #073642; }

.styleguide-playground-og #cc-editor .solarized.base01 { color: #586e75; }

.styleguide-playground-og #cc-editor .solarized.base00 { color: #657b83; }

.styleguide-playground-og #cc-editor .solarized.base0 { color: #839496; }

.styleguide-playground-og #cc-editor .solarized.base1 { color: #93a1a1; }

.styleguide-playground-og #cc-editor .solarized.base2 { color: #eee8d5; }

.styleguide-playground-og #cc-editor .solarized.base3 { color: #fdf6e3; }

.styleguide-playground-og #cc-editor .solarized.solar-yellow { color: #b58900; }

.styleguide-playground-og #cc-editor .solarized.solar-orange { color: #cb4b16; }

.styleguide-playground-og #cc-editor .solarized.solar-red { color: #dc322f; }

.styleguide-playground-og #cc-editor .solarized.solar-magenta { color: #d33682; }

.styleguide-playground-og #cc-editor .solarized.solar-violet { color: #6c71c4; }

.styleguide-playground-og #cc-editor .solarized.solar-blue { color: #268bd2; }

.styleguide-playground-og #cc-editor .solarized.solar-cyan { color: #2aa198; }

.styleguide-playground-og #cc-editor .solarized.solar-green { color: #859900; }

.styleguide-playground-og #cc-editor .cm-s-solarized { line-height: 1.45em; color-profile: sRGB; rendering-intent: auto; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark { color: #839496; background-color: #002b36; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light { background-color: #fdf6e3; color: #657b83; }

.styleguide-playground-og #cc-editor .cm-s-solarized .CodeMirror-widget { text-shadow: none; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-header { color: #586e75; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-quote { color: #93a1a1; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-keyword { color: #cb4b16; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-atom { color: #d33682; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-number { color: #d33682; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-def { color: #2aa198; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-variable { color: #839496; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-variable-2 { color: #b58900; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-variable-3, .styleguide-playground-og #cc-editor .cm-s-solarized .cm-type { color: #6c71c4; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-property { color: #2aa198; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-operator { color: #6c71c4; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-comment { color: #586e75; font-style: italic; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-string { color: #859900; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-string-2 { color: #b58900; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-meta { color: #859900; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-qualifier { color: #b58900; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-builtin { color: #d33682; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-bracket { color: #cb4b16; }

.styleguide-playground-og #cc-editor .cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }

.styleguide-playground-og #cc-editor .cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-tag { color: #93a1a1; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-attribute { color: #2aa198; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-hr { color: transparent; border-top: 1px solid #586e75; display: block; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-special { color: #6c71c4; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-em { color: #999; text-decoration: underline; text-decoration-style: dotted; }

.styleguide-playground-og #cc-editor .cm-s-solarized .cm-error, .styleguide-playground-og #cc-editor .cm-s-solarized .cm-invalidchar { color: #586e75; border-bottom: 1px dotted #dc322f; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .styleguide-playground-og #cc-editor .cm-s-dark .CodeMirror-line > span::-moz-selection, .styleguide-playground-og #cc-editor .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light .CodeMirror-line::selection, .styleguide-playground-og #cc-editor .cm-s-light .CodeMirror-line > span::selection, .styleguide-playground-og #cc-editor .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .styleguide-playground-og #cc-editor .cm-s-light .CodeMirror-line > span::-moz-selection, .styleguide-playground-og #cc-editor .cm-s-light .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; }

.styleguide-playground-og #cc-editor .cm-s-solarized.CodeMirror { -moz-box-shadow: inset 7px 0 12px -6px #000; -webkit-box-shadow: inset 7px 0 12px -6px #000; box-shadow: inset 7px 0 12px -6px #000; }

.styleguide-playground-og #cc-editor .cm-s-solarized .CodeMirror-gutters { border-right: 0; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-gutters { background-color: #073642; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { color: #586e75; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light .CodeMirror-gutters { background-color: #eee8d5; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light .CodeMirror-linenumber { color: #839496; }

.styleguide-playground-og #cc-editor .cm-s-solarized .CodeMirror-linenumber { padding: 0 5px; }

.styleguide-playground-og #cc-editor .cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }

.styleguide-playground-og #cc-editor .cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text { color: #586e75; }

.styleguide-playground-og #cc-editor .cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.06); }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-light .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0.06); }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark { background: #384047; text-shadow: none; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { text-shadow: none; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark pre { color: #fff; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark pre::selection { background: #2d3339; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-gutters { background: #384047; border-right: none; height: 100%; padding: 0 10px 0 0; box-shadow: none; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { color: #101417; padding-left: 15px; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .cm-tab:before { content: ""; }

.styleguide-playground-og #cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { background: #3c454d; border-radius: 3px; }

.styleguide-playground-og #cc-editor .cm-s-solarized.CodeMirror { left: 0; right: 0; top: 0; bottom: 0; height: auto; box-shadow: none; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-comment { color: #558c52; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-atom { color: #2b9ace; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-builtin { color: #2b9ace; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-def { color: #00c9af; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-number { color: #b0cfaa; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-operator { color: #c9c9c9; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-keyword { color: #2b9ace; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-string { color: #d98d77; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-variable { color: #c9c9c9; }

.styleguide-playground-og #cc-editor .cm-s-visualstudio-dark .cm-variable-3 { color: #2b9ace; }
.styleguide-colors .styleguide-color-list { list-style: none; margin-top: 20px; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; }

@media screen and (max-width: 969px) { .styleguide-colors .styleguide-color-list { grid-template-columns: 1fr 1fr; } }

.styleguide-colors .styleguide-color-list-full { grid-template-columns: 1fr; }

.styleguide-colors .styleguide-color-list-ck { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-gap: 0px; }

.styleguide-colors .styleguide-color-list-item { margin-bottom: 20px; }

.styleguide-colors .styleguide-color-list-item-text { margin-left: -8px; }

.styleguide-colors .styleguide-color-list-item-ck { border: none; margin-bottom: 0; }

.styleguide-colors .styleguide-color-list-item-icon .styleguide-color { border: 1px solid #d4d9dd; }

.styleguide-colors .styleguide-color-list-item-icon .styleguide-color svg { position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -16px; }

.styleguide-colors .styleguide-color-list-item-icon:nth-of-type(1) .styleguide-color svg { fill: #8e969d; }

.styleguide-colors .styleguide-color-list-item-icon:nth-of-type(2) .styleguide-color svg { fill: #6E7881; }

.styleguide-colors .topic-list ul { list-style: disc; padding-left: 15px; margin-bottom: 30px; }

.styleguide-colors .topic-list li { color: #1a2126; list-style: none; }

.styleguide-colors .topic-list li::before { content: "\2022"; font-size: 30px; padding-right: 15px; position: relative; top: 5px; }

.styleguide-colors .back-end-color { color: #008297; }

.styleguide-colors .data-color { color: #9F4B84; }

.styleguide-colors .design-color { color: #4a4290; }

.styleguide-colors .experimental-color { color: #733a88; }

.styleguide-colors .front-end-color { color: #3659a2; }

.styleguide-colors .fundamentals-color { color: #9b3b5a; }

.styleguide-colors .mobile-color { color: #30826C; }

.styleguide-colors .internal-color { color: #55616c; }

.styleguide-colors .back-end li::before { color: #008297; }

.styleguide-colors .data li::before { color: #9F4B84; }

.styleguide-colors .design li::before { color: #4a4290; }

.styleguide-colors .experimental li::before { color: #733a88; }

.styleguide-colors .front-end li::before { color: #3659a2; }

.styleguide-colors .fundamentals li::before { color: #9b3b5a; }

.styleguide-colors .mobile li::before { color: #30826C; }

.styleguide-colors .internal li::before { color: #55616c; }

.styleguide-colors .styleguide-color { position: relative; display: block; width: 100%; height: 72px; border-radius: 4px 4px 0 0; /** Each of these sass functions: 1. Sets the relevant item (whether text or a div) to the respective color. 2. Figures out the hex code and sets it to display after that item's variable name. -- This ensures that if we change these variable values, the styleguide will update itself. If we ADD variables, we need to add them to the respective sass map, found in the variable file, and the styleguide_controller.rb array. */ }

.styleguide-colors .styleguide-color-content { padding: 10px; border: 1px solid #d4d9dd; border-top: none; border-radius: 0 0 4px 4px; }

.styleguide-colors .styleguide-color-content-text { border: 0; }

.styleguide-colors .styleguide-color-bg { background-color: #edeff0; padding: 10px; border: 0; }

.styleguide-colors .styleguide-color-ck { border-radius: 0; height: 70px; width: 100%; display: block; position: relative; }

.styleguide-colors .styleguide-color-border { width: 100%; height: 1px; margin: 20px auto 10px auto; }

.styleguide-colors .styleguide-color-name::after { display: block; }

.styleguide-colors .styleguide-color-var-text-dark { color: #050708 !important; }

.styleguide-colors .styleguide-color-var-text-dark h3 { margin-bottom: 0px; color: #050708 !important; }

.styleguide-colors .styleguide-color-var-text-dark .styleguide-color-name::after { display: block; content: "#050708"; }

.styleguide-colors .styleguide-color-var-text-medium { color: #101417 !important; }

.styleguide-colors .styleguide-color-var-text-medium h3 { margin-bottom: 0px; color: #101417 !important; }

.styleguide-colors .styleguide-color-var-text-medium .styleguide-color-name::after { display: block; content: "#101417"; }

.styleguide-colors .styleguide-color-var-text-color { color: #1a2126 !important; }

.styleguide-colors .styleguide-color-var-text-color h3 { margin-bottom: 0px; color: #1a2126 !important; }

.styleguide-colors .styleguide-color-var-text-color .styleguide-color-name::after { display: block; content: "#1a2126"; }

.styleguide-colors .styleguide-color-var-text-light { color: #2b363e !important; }

.styleguide-colors .styleguide-color-var-text-light h3 { margin-bottom: 0px; color: #2b363e !important; }

.styleguide-colors .styleguide-color-var-text-light .styleguide-color-name::after { display: block; content: "#2b363e"; }

.styleguide-colors .styleguide-color-var-text-disabled { color: #587081 !important; }

.styleguide-colors .styleguide-color-var-text-disabled h3 { margin-bottom: 0px; color: #587081 !important; }

.styleguide-colors .styleguide-color-var-text-disabled .styleguide-color-name::after { display: block; content: "#587081"; }

.styleguide-colors .styleguide-color-var-border-color-dark .styleguide-color-border { background-color: #b7c0c7 !important; }

.styleguide-colors .styleguide-color-var-border-color-dark .styleguide-color-name::after { display: block; content: "#b7c0c7"; }

.styleguide-colors .styleguide-color-var-border-color-medium .styleguide-color-border { background-color: #d4d9dd !important; }

.styleguide-colors .styleguide-color-var-border-color-medium .styleguide-color-name::after { display: block; content: "#d4d9dd"; }

.styleguide-colors .styleguide-color-var-border-color-normal .styleguide-color-border { background-color: #e8ebed !important; }

.styleguide-colors .styleguide-color-var-border-color-normal .styleguide-color-name::after { display: block; content: "#e8ebed"; }

.styleguide-colors .styleguide-color-var-border-color-light .styleguide-color-border { background-color: #f0f2f4 !important; }

.styleguide-colors .styleguide-color-var-border-color-light .styleguide-color-name::after { display: block; content: "#f0f2f4"; }

.styleguide-colors .styleguide-color-var-border-color-light-on-grey .styleguide-color-border { background-color: #e8ebed !important; }

.styleguide-colors .styleguide-color-var-border-color-light-on-grey .styleguide-color-name::after { display: block; content: "#e8ebed"; }

.styleguide-colors .styleguide-color-var-icon-color svg { fill: #8e969d !important; }

.styleguide-colors .styleguide-color-var-icon-color .styleguide-color-name::after { content: "#8e969d"; }

.styleguide-colors .styleguide-color-var-icon-active-color svg { fill: #6E7881 !important; }

.styleguide-colors .styleguide-color-var-icon-active-color .styleguide-color-name::after { content: "#6E7881"; }

.styleguide-colors .styleguide-color-var-dark-gray .styleguide-color { background-color: #55616c !important; }

.styleguide-colors .styleguide-color-var-dark-gray .styleguide-color-name::after { display: block; content: "#55616c"; }

.styleguide-colors .styleguide-color-var-dark-highlight .styleguide-color { background-color: #3f4850 !important; }

.styleguide-colors .styleguide-color-var-dark-highlight .styleguide-color-name::after { display: block; content: "#3f4850"; }

.styleguide-colors .styleguide-color-var-deep-blue .styleguide-color { background-color: #3e474f !important; }

.styleguide-colors .styleguide-color-var-deep-blue .styleguide-color-name::after { display: block; content: "#3e474f"; }

.styleguide-colors .styleguide-color-var-dark .styleguide-color { background-color: #384047 !important; }

.styleguide-colors .styleguide-color-var-dark .styleguide-color-name::after { display: block; content: "#384047"; }

.styleguide-colors .styleguide-color-var-darker .styleguide-color { background-color: #31383e !important; }

.styleguide-colors .styleguide-color-var-darker .styleguide-color-name::after { display: block; content: "#31383e"; }

.styleguide-colors .styleguide-color-var-dark-shade .styleguide-color { background-color: #2d3339 !important; }

.styleguide-colors .styleguide-color-var-dark-shade .styleguide-color-name::after { display: block; content: "#2d3339"; }

.styleguide-colors .styleguide-color-var-bg .styleguide-color { background-color: #edeff0 !important; }

.styleguide-colors .styleguide-color-var-bg .styleguide-color-name::after { display: block; content: "#edeff0"; }

.styleguide-colors .styleguide-color-var-bg-shade .styleguide-color { background-color: #f9fafa !important; }

.styleguide-colors .styleguide-color-var-bg-shade .styleguide-color-name::after { display: block; content: "#f9fafa"; }

.styleguide-colors .styleguide-color-var-subtle-bg .styleguide-color { background-color: #f6f9fa !important; }

.styleguide-colors .styleguide-color-var-subtle-bg .styleguide-color-name::after { display: block; content: "#f6f9fa"; }

.styleguide-colors .styleguide-color-var-shaded .styleguide-color { background-color: #f9fafa !important; }

.styleguide-colors .styleguide-color-var-shaded .styleguide-color-name::after { display: block; content: "#f9fafa"; }

.styleguide-colors .styleguide-color-var-dark-and-transparent .styleguide-color { background-color: rgba(56, 64, 71, 0.98) !important; }

.styleguide-colors .styleguide-color-var-dark-and-transparent .styleguide-color-name::after { display: block; content: "rgba(56, 64, 71, 0.98)"; }

.styleguide-colors .styleguide-color-var-green .styleguide-color { background-color: #5fcf80 !important; }

.styleguide-colors .styleguide-color-var-green .styleguide-color-name::after { display: block; content: "#5fcf80"; }

.styleguide-colors .styleguide-color-var-yellow .styleguide-color { background-color: #ffd466 !important; }

.styleguide-colors .styleguide-color-var-yellow .styleguide-color-name::after { display: block; content: "#ffd466"; }

.styleguide-colors .styleguide-color-var-red .styleguide-color { background-color: #ed5a5a !important; }

.styleguide-colors .styleguide-color-var-red .styleguide-color-name::after { display: block; content: "#ed5a5a"; }

.styleguide-colors .styleguide-color-var-blue .styleguide-color { background-color: #3f8abf !important; }

.styleguide-colors .styleguide-color-var-blue .styleguide-color-name::after { display: block; content: "#3f8abf"; }

.styleguide-colors .styleguide-color-var-purple .styleguide-color { background-color: #8363b2 !important; }

.styleguide-colors .styleguide-color-var-purple .styleguide-color-name::after { display: block; content: "#8363b2"; }

.styleguide-colors .styleguide-color-var-deep-blue .styleguide-color { background-color: #3e474f !important; }

.styleguide-colors .styleguide-color-var-deep-blue .styleguide-color-name::after { display: block; content: "#3e474f"; }

.styleguide-colors .styleguide-color-var-deeper-blue .styleguide-color { background-color: #333a41 !important; }

.styleguide-colors .styleguide-color-var-deeper-blue .styleguide-color-name::after { display: block; content: "#333a41"; }

.styleguide-colors .styleguide-color-var-deepest-blue .styleguide-color { background-color: black !important; }

.styleguide-colors .styleguide-color-var-deepest-blue .styleguide-color-name::after { display: block; content: "black"; }

.styleguide-colors .styleguide-color-var-dark-yellow .styleguide-color { background-color: #573D00 !important; }

.styleguide-colors .styleguide-color-var-dark-yellow .styleguide-color-name::after { display: block; content: "#573D00"; }

.styleguide-colors .styleguide-color-var-orange .styleguide-color { background-color: #ff9f1f !important; }

.styleguide-colors .styleguide-color-var-orange .styleguide-color-name::after { display: block; content: "#ff9f1f"; }

.styleguide-colors .styleguide-color-var-dark-red .styleguide-color { background-color: #e21919 !important; }

.styleguide-colors .styleguide-color-var-dark-red .styleguide-color-name::after { display: block; content: "#e21919"; }

.styleguide-colors .styleguide-color-var-light-pink .styleguide-color { background-color: #ff8eb4 !important; }

.styleguide-colors .styleguide-color-var-light-pink .styleguide-color-name::after { display: block; content: "#ff8eb4"; }

.styleguide-colors .styleguide-color-var-pink .styleguide-color { background-color: #ff5b89 !important; }

.styleguide-colors .styleguide-color-var-pink .styleguide-color-name::after { display: block; content: "#ff5b89"; }

.styleguide-colors .styleguide-color-var-light-purple .styleguide-color { background-color: #a083c8 !important; }

.styleguide-colors .styleguide-color-var-light-purple .styleguide-color-name::after { display: block; content: "#a083c8"; }

.styleguide-colors .styleguide-color-var-gray .styleguide-color { background-color: #c6ccd2 !important; }

.styleguide-colors .styleguide-color-var-gray .styleguide-color-name::after { display: block; content: "#c6ccd2"; }

.styleguide-colors .styleguide-color-var-disabled-gray .styleguide-color { background-color: #e6e8eb !important; }

.styleguide-colors .styleguide-color-var-disabled-gray .styleguide-color-name::after { display: block; content: "#e6e8eb"; }

.styleguide-colors .styleguide-color-var-light-green .styleguide-color { background-color: #f0fbf3 !important; }

.styleguide-colors .styleguide-color-var-light-green .styleguide-color-name::after { display: block; content: "#f0fbf3"; }

.styleguide-colors .styleguide-color-var-green .styleguide-color { background-color: #5fcf80 !important; }

.styleguide-colors .styleguide-color-var-green .styleguide-color-name::after { display: block; content: "#5fcf80"; }

.styleguide-colors .styleguide-color-var-dark-green .styleguide-color { background-color: #35A961 !important; }

.styleguide-colors .styleguide-color-var-dark-green .styleguide-color-name::after { display: block; content: "#35A961"; }

.styleguide-colors .styleguide-color-var-blue .styleguide-color { background-color: #3f8abf !important; }

.styleguide-colors .styleguide-color-var-blue .styleguide-color-name::after { display: block; content: "#3f8abf"; }

.styleguide-colors .styleguide-color-var-dark-blue .styleguide-color { background-color: #326e99 !important; }

.styleguide-colors .styleguide-color-var-dark-blue .styleguide-color-name::after { display: block; content: "#326e99"; }

.styleguide-colors .styleguide-color-var-brand-dark-blue .styleguide-color { background-color: #303853 !important; }

.styleguide-colors .styleguide-color-var-brand-dark-blue .styleguide-color-name::after { display: block; content: "#303853"; }

.styleguide-colors .styleguide-color-var-pro-blue .styleguide-color { background-color: #42B4D6 !important; }

.styleguide-colors .styleguide-color-var-pro-blue .styleguide-color-name::after { display: block; content: "#42B4D6"; }

.styleguide-colors .styleguide-color-var-pro-gray .styleguide-color { background-color: #575f66 !important; }

.styleguide-colors .styleguide-color-var-pro-gray .styleguide-color-name::after { display: block; content: "#575f66"; }

.styleguide-colors .styleguide-color-var-td-color .styleguide-color { background-color: #387BC9 !important; }

.styleguide-colors .styleguide-color-var-td-color .styleguide-color-name::after { display: block; content: "#387BC9"; }

.styleguide-colors .styleguide-color-var-purple .styleguide-color { background-color: #8363b2 !important; }

.styleguide-colors .styleguide-color-var-purple .styleguide-color-name::after { display: block; content: "#8363b2"; }

.styleguide-colors .styleguide-color-var-back-end .styleguide-color { background-color: #008297 !important; }

.styleguide-colors .styleguide-color-var-back-end .styleguide-color-name::after { display: block; content: "#008297"; }

.styleguide-colors .styleguide-color-var-data .styleguide-color { background-color: #9F4B84 !important; }

.styleguide-colors .styleguide-color-var-data .styleguide-color-name::after { display: block; content: "#9F4B84"; }

.styleguide-colors .styleguide-color-var-design .styleguide-color { background-color: #4a4290 !important; }

.styleguide-colors .styleguide-color-var-design .styleguide-color-name::after { display: block; content: "#4a4290"; }

.styleguide-colors .styleguide-color-var-experimental .styleguide-color { background-color: #733a88 !important; }

.styleguide-colors .styleguide-color-var-experimental .styleguide-color-name::after { display: block; content: "#733a88"; }

.styleguide-colors .styleguide-color-var-front-end .styleguide-color { background-color: #3659a2 !important; }

.styleguide-colors .styleguide-color-var-front-end .styleguide-color-name::after { display: block; content: "#3659a2"; }

.styleguide-colors .styleguide-color-var-fundamentals .styleguide-color { background-color: #9b3b5a !important; }

.styleguide-colors .styleguide-color-var-fundamentals .styleguide-color-name::after { display: block; content: "#9b3b5a"; }

.styleguide-colors .styleguide-color-var-mobile .styleguide-color { background-color: #30826C !important; }

.styleguide-colors .styleguide-color-var-mobile .styleguide-color-name::after { display: block; content: "#30826C"; }

.styleguide-colors .styleguide-color-var-internal .styleguide-color { background-color: #55616c !important; }

.styleguide-colors .styleguide-color-var-internal .styleguide-color-name::after { display: block; content: "#55616c"; }

.styleguide-colors .styleguide-color-var-undefined .styleguide-color { background-color: #55616c !important; }

.styleguide-colors .styleguide-color-var-undefined .styleguide-color-name::after { display: block; content: "#55616c"; }

.styleguide-colors .styleguide-color-var-ck-black-bright .styleguide-color-ck { background-color: #62707B !important; }

.styleguide-colors .styleguide-color-var-ck-black-bright .styleguide-color-name-ck::after { display: block; content: "#62707B"; }

.styleguide-colors .styleguide-color-var-ck-black-light .styleguide-color-ck { background-color: #465058 !important; }

.styleguide-colors .styleguide-color-var-ck-black-light .styleguide-color-name-ck::after { display: block; content: "#465058"; }

.styleguide-colors .styleguide-color-var-ck-black .styleguide-color-ck { background-color: #2C3238 !important; }

.styleguide-colors .styleguide-color-var-ck-black .styleguide-color-name-ck::after { display: block; content: "#2C3238"; }

.styleguide-colors .styleguide-color-var-ck-black-dim .styleguide-color-ck { background-color: #1F2327 !important; }

.styleguide-colors .styleguide-color-var-ck-black-dim .styleguide-color-name-ck::after { display: block; content: "#1F2327"; }

.styleguide-colors .styleguide-color-var-ck-black-dark .styleguide-color-ck { background-color: #0F1113 !important; }

.styleguide-colors .styleguide-color-var-ck-black-dark .styleguide-color-name-ck::after { display: block; content: "#0F1113"; }

.styleguide-colors .styleguide-color-var-ck-gray-bright .styleguide-color-ck { background-color: #D5DDE4 !important; }

.styleguide-colors .styleguide-color-var-ck-gray-bright .styleguide-color-name-ck::after { display: block; content: "#D5DDE4"; }

.styleguide-colors .styleguide-color-var-ck-gray-light .styleguide-color-ck { background-color: #C7CED5 !important; }

.styleguide-colors .styleguide-color-var-ck-gray-light .styleguide-color-name-ck::after { display: block; content: "#C7CED5"; }

.styleguide-colors .styleguide-color-var-ck-gray .styleguide-color-ck { background-color: #B1B9C1 !important; }

.styleguide-colors .styleguide-color-var-ck-gray .styleguide-color-name-ck::after { display: block; content: "#B1B9C1"; }

.styleguide-colors .styleguide-color-var-ck-gray-dim .styleguide-color-ck { background-color: #949A9F !important; }

.styleguide-colors .styleguide-color-var-ck-gray-dim .styleguide-color-name-ck::after { display: block; content: "#949A9F"; }

.styleguide-colors .styleguide-color-var-ck-gray-dark .styleguide-color-ck { background-color: #777B7E !important; }

.styleguide-colors .styleguide-color-var-ck-gray-dark .styleguide-color-name-ck::after { display: block; content: "#777B7E"; }

.styleguide-colors .styleguide-color-var-ck-peach-bright .styleguide-color-ck { background-color: #FBEDDF !important; }

.styleguide-colors .styleguide-color-var-ck-peach-bright .styleguide-color-name-ck::after { display: block; content: "#FBEDDF"; }

.styleguide-colors .styleguide-color-var-ck-peach-light .styleguide-color-ck { background-color: #FBDFC4 !important; }

.styleguide-colors .styleguide-color-var-ck-peach-light .styleguide-color-name-ck::after { display: block; content: "#FBDFC4"; }

.styleguide-colors .styleguide-color-var-ck-peach .styleguide-color-ck { background-color: #FFD5A7 !important; }

.styleguide-colors .styleguide-color-var-ck-peach .styleguide-color-name-ck::after { display: block; content: "#FFD5A7"; }

.styleguide-colors .styleguide-color-var-ck-peach-dim .styleguide-color-ck { background-color: #DCB893 !important; }

.styleguide-colors .styleguide-color-var-ck-peach-dim .styleguide-color-name-ck::after { display: block; content: "#DCB893"; }

.styleguide-colors .styleguide-color-var-ck-peach-dark .styleguide-color-ck { background-color: #BB9B7F !important; }

.styleguide-colors .styleguide-color-var-ck-peach-dark .styleguide-color-name-ck::after { display: block; content: "#BB9B7F"; }

.styleguide-colors .styleguide-color-var-ck-brown-bright .styleguide-color-ck { background-color: #A48D78 !important; }

.styleguide-colors .styleguide-color-var-ck-brown-bright .styleguide-color-name-ck::after { display: block; content: "#A48D78"; }

.styleguide-colors .styleguide-color-var-ck-brown-light .styleguide-color-ck { background-color: #836950 !important; }

.styleguide-colors .styleguide-color-var-ck-brown-light .styleguide-color-name-ck::after { display: block; content: "#836950"; }

.styleguide-colors .styleguide-color-var-ck-brown .styleguide-color-ck { background-color: #6F5941 !important; }

.styleguide-colors .styleguide-color-var-ck-brown .styleguide-color-name-ck::after { display: block; content: "#6F5941"; }

.styleguide-colors .styleguide-color-var-ck-brown-dim .styleguide-color-ck { background-color: #534231 !important; }

.styleguide-colors .styleguide-color-var-ck-brown-dim .styleguide-color-name-ck::after { display: block; content: "#534231"; }

.styleguide-colors .styleguide-color-var-ck-brown-dark .styleguide-color-ck { background-color: #3C3025 !important; }

.styleguide-colors .styleguide-color-var-ck-brown-dark .styleguide-color-name-ck::after { display: block; content: "#3C3025"; }

.styleguide-colors .styleguide-color-var-ck-red-bright .styleguide-color-ck { background-color: #F8A6A6 !important; }

.styleguide-colors .styleguide-color-var-ck-red-bright .styleguide-color-name-ck::after { display: block; content: "#F8A6A6"; }

.styleguide-colors .styleguide-color-var-ck-red-light .styleguide-color-ck { background-color: #EC8989 !important; }

.styleguide-colors .styleguide-color-var-ck-red-light .styleguide-color-name-ck::after { display: block; content: "#EC8989"; }

.styleguide-colors .styleguide-color-var-ck-red .styleguide-color-ck { background-color: #EC5959 !important; }

.styleguide-colors .styleguide-color-var-ck-red .styleguide-color-name-ck::after { display: block; content: "#EC5959"; }

.styleguide-colors .styleguide-color-var-ck-red-dim .styleguide-color-ck { background-color: #CD5151 !important; }

.styleguide-colors .styleguide-color-var-ck-red-dim .styleguide-color-name-ck::after { display: block; content: "#CD5151"; }

.styleguide-colors .styleguide-color-var-ck-red-dark .styleguide-color-ck { background-color: #B14646 !important; }

.styleguide-colors .styleguide-color-var-ck-red-dark .styleguide-color-name-ck::after { display: block; content: "#B14646"; }

.styleguide-colors .styleguide-color-var-ck-orange-bright .styleguide-color-ck { background-color: #F6C58E !important; }

.styleguide-colors .styleguide-color-var-ck-orange-bright .styleguide-color-name-ck::after { display: block; content: "#F6C58E"; }

.styleguide-colors .styleguide-color-var-ck-orange-light .styleguide-color-ck { background-color: #FFB770 !important; }

.styleguide-colors .styleguide-color-var-ck-orange-light .styleguide-color-name-ck::after { display: block; content: "#FFB770"; }

.styleguide-colors .styleguide-color-var-ck-orange .styleguide-color-ck { background-color: #FF9E1E !important; }

.styleguide-colors .styleguide-color-var-ck-orange .styleguide-color-name-ck::after { display: block; content: "#FF9E1E"; }

.styleguide-colors .styleguide-color-var-ck-orange-dim .styleguide-color-ck { background-color: #CB791E !important; }

.styleguide-colors .styleguide-color-var-ck-orange-dim .styleguide-color-name-ck::after { display: block; content: "#CB791E"; }

.styleguide-colors .styleguide-color-var-ck-orange-dark .styleguide-color-ck { background-color: #A96119 !important; }

.styleguide-colors .styleguide-color-var-ck-orange-dark .styleguide-color-name-ck::after { display: block; content: "#A96119"; }

.styleguide-colors .styleguide-color-var-ck-yellow-bright .styleguide-color-ck { background-color: #FFE6B2 !important; }

.styleguide-colors .styleguide-color-var-ck-yellow-bright .styleguide-color-name-ck::after { display: block; content: "#FFE6B2"; }

.styleguide-colors .styleguide-color-var-ck-yellow-light .styleguide-color-ck { background-color: #FFDB8E !important; }

.styleguide-colors .styleguide-color-var-ck-yellow-light .styleguide-color-name-ck::after { display: block; content: "#FFDB8E"; }

.styleguide-colors .styleguide-color-var-ck-yellow .styleguide-color-ck { background-color: #FFD365 !important; }

.styleguide-colors .styleguide-color-var-ck-yellow .styleguide-color-name-ck::after { display: block; content: "#FFD365"; }

.styleguide-colors .styleguide-color-var-ck-yellow-dim .styleguide-color-ck { background-color: #E4BA5B !important; }

.styleguide-colors .styleguide-color-var-ck-yellow-dim .styleguide-color-name-ck::after { display: block; content: "#E4BA5B"; }

.styleguide-colors .styleguide-color-var-ck-yellow-dark .styleguide-color-ck { background-color: #C5A14E !important; }

.styleguide-colors .styleguide-color-var-ck-yellow-dark .styleguide-color-name-ck::after { display: block; content: "#C5A14E"; }

.styleguide-colors .styleguide-color-var-ck-green-bright .styleguide-color-ck { background-color: #90E7A2 !important; }

.styleguide-colors .styleguide-color-var-ck-green-bright .styleguide-color-name-ck::after { display: block; content: "#90E7A2"; }

.styleguide-colors .styleguide-color-var-ck-green-light .styleguide-color-ck { background-color: #70DA8B !important; }

.styleguide-colors .styleguide-color-var-ck-green-light .styleguide-color-name-ck::after { display: block; content: "#70DA8B"; }

.styleguide-colors .styleguide-color-var-ck-green .styleguide-color-ck { background-color: #5ECE7F !important; }

.styleguide-colors .styleguide-color-var-ck-green .styleguide-color-name-ck::after { display: block; content: "#5ECE7F"; }

.styleguide-colors .styleguide-color-var-ck-green-dim .styleguide-color-ck { background-color: #53B16B !important; }

.styleguide-colors .styleguide-color-var-ck-green-dim .styleguide-color-name-ck::after { display: block; content: "#53B16B"; }

.styleguide-colors .styleguide-color-var-ck-green-dark .styleguide-color-ck { background-color: #4DA463 !important; }

.styleguide-colors .styleguide-color-var-ck-green-dark .styleguide-color-name-ck::after { display: block; content: "#4DA463"; }

.styleguide-colors .styleguide-color-var-ck-blue-bright .styleguide-color-ck { background-color: #7CCEEE !important; }

.styleguide-colors .styleguide-color-var-ck-blue-bright .styleguide-color-name-ck::after { display: block; content: "#7CCEEE"; }

.styleguide-colors .styleguide-color-var-ck-blue-light .styleguide-color-ck { background-color: #5FB6E1 !important; }

.styleguide-colors .styleguide-color-var-ck-blue-light .styleguide-color-name-ck::after { display: block; content: "#5FB6E1"; }

.styleguide-colors .styleguide-color-var-ck-blue .styleguide-color-ck { background-color: #3E89BE !important; }

.styleguide-colors .styleguide-color-var-ck-blue .styleguide-color-name-ck::after { display: block; content: "#3E89BE"; }

.styleguide-colors .styleguide-color-var-ck-blue-dim .styleguide-color-ck { background-color: #326F95 !important; }

.styleguide-colors .styleguide-color-var-ck-blue-dim .styleguide-color-name-ck::after { display: block; content: "#326F95"; }

.styleguide-colors .styleguide-color-var-ck-blue-dark .styleguide-color-ck { background-color: #2A5E7E !important; }

.styleguide-colors .styleguide-color-var-ck-blue-dark .styleguide-color-name-ck::after { display: block; content: "#2A5E7E"; }

.styleguide-colors .styleguide-color-var-ck-purple-bright .styleguide-color-ck { background-color: #CCC0E9 !important; }

.styleguide-colors .styleguide-color-var-ck-purple-bright .styleguide-color-name-ck::after { display: block; content: "#CCC0E9"; }

.styleguide-colors .styleguide-color-var-ck-purple-light .styleguide-color-ck { background-color: #B5A1DA !important; }

.styleguide-colors .styleguide-color-var-ck-purple-light .styleguide-color-name-ck::after { display: block; content: "#B5A1DA"; }

.styleguide-colors .styleguide-color-var-ck-purple .styleguide-color-ck { background-color: #9F82C7 !important; }

.styleguide-colors .styleguide-color-var-ck-purple .styleguide-color-name-ck::after { display: block; content: "#9F82C7"; }

.styleguide-colors .styleguide-color-var-ck-purple-dim .styleguide-color-ck { background-color: #8672A7 !important; }

.styleguide-colors .styleguide-color-var-ck-purple-dim .styleguide-color-name-ck::after { display: block; content: "#8672A7"; }

.styleguide-colors .styleguide-color-var-ck-purple-dark .styleguide-color-ck { background-color: #7B679A !important; }

.styleguide-colors .styleguide-color-var-ck-purple-dark .styleguide-color-name-ck::after { display: block; content: "#7B679A"; }

.topic-ai .styleguide-colors .styleguide-color { background-color: #733A88; }

.styleguide-colors .styleguide-color.topic-ai { background-color: #733A88; }

.topic-back-end .styleguide-colors .styleguide-color { background-color: #008297; }

.styleguide-colors .styleguide-color.topic-back-end { background-color: #008297; }

.topic-data .styleguide-colors .styleguide-color { background-color: #9F4B84; }

.styleguide-colors .styleguide-color.topic-data { background-color: #9F4B84; }

.topic-design .styleguide-colors .styleguide-color { background-color: #4a4290; }

.styleguide-colors .styleguide-color.topic-design { background-color: #4a4290; }

.topic-experimental .styleguide-colors .styleguide-color { background-color: #733a88; }

.styleguide-colors .styleguide-color.topic-experimental { background-color: #733a88; }

.topic-front-end .styleguide-colors .styleguide-color { background-color: #3659a2; }

.styleguide-colors .styleguide-color.topic-front-end { background-color: #3659a2; }

.topic-fundamentals .styleguide-colors .styleguide-color { background-color: #9b3b5a; }

.styleguide-colors .styleguide-color.topic-fundamentals { background-color: #9b3b5a; }

.topic-mobile .styleguide-colors .styleguide-color { background-color: #30826C; }

.styleguide-colors .styleguide-color.topic-mobile { background-color: #30826C; }

.topic-internal .styleguide-colors .styleguide-color { background-color: #55616c; }

.styleguide-colors .styleguide-color.topic-internal { background-color: #55616c; }

.topic-foundations .styleguide-colors .styleguide-color { background-color: #004e61; }

.styleguide-colors .styleguide-color.topic-foundations { background-color: #004e61; }

.topic-undefined .styleguide-colors .styleguide-color { background-color: #55616c; }

.styleguide-colors .styleguide-color.topic-undefined { background-color: #55616c; }

.topic-college-credit .styleguide-colors .styleguide-color { background-color: #3887c8; }

.styleguide-colors .styleguide-color.topic-college-credit { background-color: #3887c8; }

.topic-no-code .styleguide-colors .styleguide-color { background-color: #31AF7F; }

.styleguide-colors .styleguide-color.topic-no-code { background-color: #31AF7F; }

.topic-security .styleguide-colors .styleguide-color { background-color: #409BE9; }

.styleguide-colors .styleguide-color.topic-security { background-color: #409BE9; }

.topic-game-development .styleguide-colors .styleguide-color { background-color: #856fc4; }

.styleguide-colors .styleguide-color.topic-game-development { background-color: #856fc4; }

.topic-treehouse-resources .styleguide-colors .styleguide-color { background-color: #5fcf80; }

.styleguide-colors .styleguide-color.topic-treehouse-resources { background-color: #5fcf80; }

.topic-coding-for-kids .styleguide-colors .styleguide-color { background-color: #F36C27; }

.styleguide-colors .styleguide-color.topic-coding-for-kids { background-color: #F36C27; }

.styleguide-colors .styleguide-color .tooltip { font-weight: 700; font-size: 12px; width: 130px; margin-left: -65px; text-align: center; opacity: 0; -ms-transform: translateY(10px); -moz-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); }

.styleguide-colors .styleguide-color .tooltip em { display: block; margin-top: 8px; font-weight: 400; font-style: italic; }

.styleguide-colors .styleguide-color:hover .tooltip, .styleguide-colors .styleguide-color:active .tooltip { transition: all 200ms; -ms-transform: translateY(0); -moz-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

.styleguide-colors .component-example.inverse { padding: 30px; display: grid; grid-template-columns: minmax(37px, 48px) 1fr; align-items: center; }

.styleguide-colors .component-example.inverse a { color: #5e788a; font-weight: 700; margin: 0; }

.styleguide-colors .component-example.inverse a:hover, .styleguide-colors .component-example.inverse a:active { color: #fff; }

.styleguide-colors .component-example.inverse a:hover .component-example-icon, .styleguide-colors .component-example.inverse a:active .component-example-icon { fill: #fff; }

.styleguide-colors .component-example.inverse .component-example-icon { width: 30px; fill: #415360; }
.styleguide-datavisualization .chart, .styleguide-datavisualization .radial-progress { margin-bottom: 40px; }

.styleguide-datavisualization .graph-contain { max-width: 400px; }

.styleguide-datavisualization .graph-dark { background: #384047; }

.styleguide-datavisualization .graph-prevent-duplicate svg:nth-of-type(2) { display: none; }

.styleguide-datavisualization .foreground { stroke-dasharray: 289.067, 289.067 !important; stroke-dashoffset: 193.675 !important; }
.styleguide-illustrations h3, .styleguide-illustrations h4 { margin-top: 30px; }

.styleguide-illustrations .component-illustration-guidelines ul { list-style: disc; }

.styleguide-illustrations .component-illustration-example { text-align: center; }

.styleguide-illustrations .component-illustration-example img, .styleguide-illustrations .component-illustration-example svg { max-width: 270px; }

.styleguide-illustrations .component-illustration-example-dark { text-align: center; background-color: #3e474f; border-radius: 4px; padding: 50px; }
.styleguide-icons h5 { margin: 0 0 15px; }

.styleguide-icons em { font-weight: 700; }

.styleguide-icons ol a { color: #3f8abf; }

.styleguide-icons ol a:hover { color: #326e99; }

.styleguide-icons table { margin-bottom: 60px; }

.styleguide-icons .grid-40 { text-align: right; }

.styleguide-icons-toc li:last-of-type { padding-bottom: 15px; }

.styleguide-icons-list { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; text-align: center; }

.styleguide-icons-list .styleguide-icon { box-sizing: border-box; position: relative; padding: 20px 20px 6px 20px; }

.styleguide-icons-list .styleguide-icon svg { fill: #101417; width: 22px; max-width: 40px; max-height: 40px; }

.styleguide-icons-list .styleguide-icon .tooltip { font-size: 12px; text-align: center; opacity: 0; }

.styleguide-icons-list .styleguide-icon:hover { background-color: #edeff0; }

.styleguide-icons-list .styleguide-icon:hover .tooltip { transition: all 200ms; opacity: 1; }

.styleguide-icons .component-icon-example svg { max-width: 50px; }

.styleguide-icons .treehouse-icon .icon-treehouse { fill: #3f4850; }

.styleguide-icons .treehouse-icon .icon-logo { fill: #5fcf80; }

.styleguide-icons .styleguide-icon-color { fill: #5fcf80; }
.styleguide-markdown .grid-container:first-of-type { margin-top: 0; }

.styleguide-markdown.styleguide ol { margin-left: 0; }

.styleguide-markdown .title { display: block; margin-bottom: 70px; margin-top: 20px; max-width: 40%; }

.styleguide-markdown .title h1 { margin-bottom: 10px; line-height: 1.5em; }

.styleguide-markdown .markdown-examples { position: relative; }

.styleguide-markdown .grid-container { position: relative; }

.styleguide-markdown .markdown-header { padding-left: 30px; opacity: 0.5; }

@media screen and (max-width: 767px) { .styleguide-markdown .markdown-header { display: none; } }

.styleguide-markdown .instruction--content--text { max-width: none; margin: none; padding-left: 0; padding-right: 0; margin-top: -40px; }

.styleguide-markdown .box { position: absolute; z-index: -1; margin-left: 40%; margin-top: -30px; width: 60%; min-height: 100%; }

@media screen and (max-width: 767px) { .styleguide-markdown .box { display: none; } }

.styleguide-markdown .grid-container { margin: 30px 0; }

.styleguide-markdown .markdown-zone { padding-left: 30px; padding-right: 30px; }

.styleguide-markdown .markdown-code { padding: 0 30px 0 0; }
.styleguide-modals .card-list .card { width: 50% !important; }
.styleguide-navigation .inner-section-header { margin-top: 60px !important; }

.styleguide-navigation .control-container.attached { margin: 0; }

.styleguide-navigation #track-index-header { min-height: 26px; }

@media screen and (min-width: 680px) { .styleguide-navigation #track-index-header .control-container { float: right; height: 40px; padding: 0px; margin-top: 8px; line-height: 35px; background-color: transparent; box-shadow: none; border: 2px solid #d4d9dd; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } }
.styleguide:not(.control-container), .styleguide-content:not(.control-container) { display: flex; }

.styleguide .page, .styleguide-content .page { display: flex; flex-grow: 1; height: 2000px; word-break: break-word; }

.styleguide h1.section-title, .styleguide-content h1.section-title { margin-bottom: 24px; font-size: 32px; }

.styleguide h2.section-header, .styleguide-content h2.section-header { margin-top: 40px; margin-bottom: 20px; }

.styleguide h2.section-header.box-header, .styleguide-content h2.section-header.box-header { margin-top: 0px; }

.styleguide h3, .styleguide-content h3 { margin-bottom: 10px; }

.styleguide i, .styleguide em, .styleguide-content i, .styleguide-content em { font-style: italic; }

.styleguide ul.disc, .styleguide-content ul.disc { list-style: disc; }

.styleguide ol.indented, .styleguide ul.indented, .styleguide-content ol.indented, .styleguide-content ul.indented { margin-left: 30px; margin-bottom: 15px; }

.styleguide ol.more-spacing li, .styleguide ul.more-spacing li, .styleguide-content ol.more-spacing li, .styleguide-content ul.more-spacing li { padding-bottom: 20px; }

.styleguide ol.more-spacing li:last-of-type, .styleguide ul.more-spacing li:last-of-type, .styleguide-content ol.more-spacing li:last-of-type, .styleguide-content ul.more-spacing li:last-of-type { padding: 0; }

.styleguide .inner-section-container, .styleguide-content .inner-section-container { border-bottom: 1px solid #f0f2f4; padding-bottom: 40px; margin-bottom: 40px; }

.styleguide .inner-section-container:last-of-type, .styleguide-content .inner-section-container:last-of-type { border-bottom: none; padding: 0; }

.styleguide .inner-section-header, .styleguide-content .inner-section-header { margin-top: 10px; margin-bottom: 20px; }

.styleguide .inner-section-header-secondary, .styleguide-content .inner-section-header-secondary { font-size: 16px; font-weight: 700; margin-top: 15px; }

.styleguide p.section-description, .styleguide-content p.section-description { border-bottom: 1px solid #e8ebed; padding-bottom: 30px; margin-bottom: 40px; }

.styleguide-sidebar, .styleguide-content-sidebar { position: fixed; width: 210px; }

.styleguide-sidebar-wrap, .styleguide-content-sidebar-wrap { width: 210px; }

@media screen and (max-width: 850px) { .styleguide-sidebar-wrap, .styleguide-content-sidebar-wrap { display: none; } }

.styleguide-sidebar .box, .styleguide-content-sidebar .box { -webkit-animation: none; -moz-animation: none; animation: none; }

.styleguide-sidebar h1, .styleguide-content-sidebar h1 { margin-bottom: 8px; margin-left: -2px; font-size: 24px; }

.styleguide-sidebar h1 a, .styleguide-content-sidebar h1 a { color: #050708; }

.styleguide-sidebar-header, .styleguide-content-sidebar-header { font-weight: 500; margin-top: 15px; color: #050708; }

.styleguide-sidebar-item a, .styleguide-content-sidebar-item a { line-height: 2; color: #050708; }

.styleguide-sidebar-item a:hover, .styleguide-content-sidebar-item a:hover { margin-left: -8px; padding: 4px 8px; border-radius: 10px; background-color: #edeff0; }

.styleguide-sidebar-item.current a, .styleguide-content-sidebar-item.current a { cursor: default; padding-left: 10px; position: relative; background-color: #edeff0; margin-left: -8px; padding: 4px 8px; border-radius: 10px; }

.styleguide-sidebar-item.current a:hover, .styleguide-content-sidebar-item.current a:hover { color: #050708; }

.styleguide-sidebar-external svg, .styleguide-content-sidebar-external svg { fill: #2b363e; opacity: 0; margin-left: 3px; }

.styleguide-sidebar-external:hover svg, .styleguide-content-sidebar-external:hover svg { fill: #3f8abf; opacity: 1; transition: margin-left 0.2s, opacity 0.2; }

.styleguide-sidebar-list, .styleguide-content-sidebar-list { list-style: none; }

@media screen and (min-width: 851px) { .styleguide .grid-parent, .styleguide-content .grid-parent { margin-left: 30px; flex-basis: 80%; } }

.styleguide .grid-container:first-of-type, .styleguide-content .grid-container:first-of-type { margin: 0; }

.styleguide-cta, .styleguide-content-cta { background: #f9fafa; box-shadow: none; text-align: center; padding-top: 40px; padding-bottom: 40px; }

.styleguide-cta h2, .styleguide-content-cta h2 { font-size: 24px; margin-bottom: 16px; }

.styleguide code, .styleguide-content code { color: #8363b2; padding: .2em .3em; font-size: 90%; background-color: #f6f9fa; border: 1px solid #e8ebed; border-radius: 4px; }

.styleguide .component-example, .styleguide-content .component-example { position: relative; margin: 26px 0; }

.styleguide .component-example.inverse, .styleguide-content .component-example.inverse { border-radius: 4px; background-color: #384047; }

.styleguide .component-example-greybg, .styleguide-content .component-example-greybg { background: #edeff0; padding: 20px; }

.styleguide .component-markup, .styleguide-content .component-markup { background-color: #f6f9fa; border: solid 1px #e8ebed; border-radius: 4px; color: #050708; font-family: monospace; font-size: 14px; line-height: 1.4; padding: 20px; position: relative; margin-bottom: 20px; overflow-wrap: break-word; }

.styleguide .styleguide-section-card a p, .styleguide .styleguide-section-description, .styleguide-content .styleguide-section-card a p, .styleguide-content .styleguide-section-description { color: #1a2126 !important; }

.styleguide .styleguide-section-card, .styleguide-content .styleguide-section-card { transition: 0.2s; }

.styleguide .styleguide-section-card:hover, .styleguide-content .styleguide-section-card:hover { transform: translateY(-3px); }

.styleguide .styleguide-index-grid, .styleguide-content .styleguide-index-grid { display: contents; }

.styleguide.styleguide-index .styleguide-section, .styleguide-content.styleguide-index .styleguide-section { margin-top: -20px; }
.styleguide-tables dl { margin-top: 30px !important; }
.styleguide-tooltips:before, .styleguide-tooltips:after { content: " "; display: table; }

.styleguide-tooltips:after { clear: both; }

.styleguide-tooltips .button { margin: 10px 0; }

.styleguide-tooltips .grid-75 .grid-25 { padding: 0 5px; }

.styleguide-tooltips-pseudo-examples button.top:before, .styleguide-tooltips-pseudo-examples button.top:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples button.top:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.styleguide-tooltips-pseudo-examples button.top:after { content: "Slide to the top."; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #1a2126; left: 50%; bottom: 100%; }

.styleguide-tooltips-pseudo-examples button.top:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples button.top:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.styleguide-tooltips-pseudo-examples button.right:before, .styleguide-tooltips-pseudo-examples button.right:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples button.right:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; left: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: -1px 1px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-5px, -50%) rotate(45deg); -moz-transform: translate(-5px, -50%) rotate(45deg); -webkit-transform: translate(-5px, -50%) rotate(45deg); transform: translate(-5px, -50%) rotate(45deg); top: 50%; border-radius: 0 0 0 3px; }

.styleguide-tooltips-pseudo-examples button.right:after { content: "Slide to the right."; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); color: #1a2126; top: 50%; left: 100%; }

.styleguide-tooltips-pseudo-examples button.right:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(5px, -50%) rotate(45deg); -moz-transform: translate(5px, -50%) rotate(45deg); -webkit-transform: translate(5px, -50%) rotate(45deg); transform: translate(5px, -50%) rotate(45deg); }

.styleguide-tooltips-pseudo-examples button.right:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(10px, -50%); -moz-transform: translate(10px, -50%); -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%); }

.styleguide-tooltips-pseudo-examples button.bottom:before, .styleguide-tooltips-pseudo-examples button.bottom:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples button.bottom:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05); -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples button.bottom:after { content: "Slide to the bottom."; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #1a2126; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples button.bottom:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples button.bottom:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples button.left:before, .styleguide-tooltips-pseudo-examples button.left:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples button.left:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; right: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 1px -1px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(5px, -50%) rotate(45deg); -moz-transform: translate(5px, -50%) rotate(45deg); -webkit-transform: translate(5px, -50%) rotate(45deg); transform: translate(5px, -50%) rotate(45deg); top: 50%; border-radius: 0 3px 0 0; }

.styleguide-tooltips-pseudo-examples button.left:after { content: "Slide to the left."; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(0px, -50%); -moz-transform: translate(0px, -50%); -webkit-transform: translate(0px, -50%); transform: translate(0px, -50%); color: #1a2126; top: 50%; right: 100%; }

.styleguide-tooltips-pseudo-examples button.left:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-5px, -50%) rotate(45deg); -moz-transform: translate(-5px, -50%) rotate(45deg); -webkit-transform: translate(-5px, -50%) rotate(45deg); transform: translate(-5px, -50%) rotate(45deg); }

.styleguide-tooltips-pseudo-examples button.left:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-10px, -50%); -moz-transform: translate(-10px, -50%); -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before, .styleguide-tooltips-pseudo-examples-with-styles button.top:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before { position: absolute; z-index: 1001; content: ""; background: #3f8abf; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #3f8abf; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before, .styleguide-tooltips-pseudo-examples-with-styles button.top:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before { position: absolute; z-index: 1001; content: ""; background: #5fcf80; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #5fcf80; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before, .styleguide-tooltips-pseudo-examples-with-styles button.right:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before { position: absolute; z-index: 1001; content: ""; background: #ed5a5a; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #ed5a5a; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before, .styleguide-tooltips-pseudo-examples-with-styles button.left:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before { position: absolute; z-index: 1001; content: ""; background: #ffd466; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #ffd466; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #384047; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before, .styleguide-tooltips-pseudo-examples-with-styles button.right:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before { position: absolute; z-index: 1001; content: ""; background: #3f8abf; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #3f8abf; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before, .styleguide-tooltips-pseudo-examples-with-styles button.top:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before { position: absolute; z-index: 1001; content: ""; background: #5fcf80; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #5fcf80; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before, .styleguide-tooltips-pseudo-examples-with-styles button.right:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before { position: absolute; z-index: 1001; content: ""; background: #ed5a5a; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #ed5a5a; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before, .styleguide-tooltips-pseudo-examples-with-styles button.left:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before { position: absolute; z-index: 1001; content: ""; background: #ffd466; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #ffd466; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #384047; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.bottom:before, .styleguide-tooltips-pseudo-examples-with-styles button.bottom:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.bottom:before { position: absolute; z-index: 1001; content: ""; background: #3f8abf; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.bottom:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #3f8abf; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.bottom:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.bottom:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before, .styleguide-tooltips-pseudo-examples-with-styles button.top:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before { position: absolute; z-index: 1001; content: ""; background: #5fcf80; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #5fcf80; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before, .styleguide-tooltips-pseudo-examples-with-styles button.right:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before { position: absolute; z-index: 1001; content: ""; background: #ed5a5a; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #ed5a5a; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before, .styleguide-tooltips-pseudo-examples-with-styles button.left:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before { position: absolute; z-index: 1001; content: ""; background: #ffd466; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #ffd466; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #384047; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before, .styleguide-tooltips-pseudo-examples-with-styles button.left:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before { position: absolute; z-index: 1001; content: ""; background: #3f8abf; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #3f8abf; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before, .styleguide-tooltips-pseudo-examples-with-styles button.top:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:before { position: absolute; z-index: 1001; content: ""; background: #5fcf80; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #5fcf80; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.top:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before, .styleguide-tooltips-pseudo-examples-with-styles button.right:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:before { position: absolute; z-index: 1001; content: ""; background: #ed5a5a; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #ed5a5a; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.right:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before, .styleguide-tooltips-pseudo-examples-with-styles button.left:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:before { position: absolute; z-index: 1001; content: ""; background: #ffd466; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:after { content: "Wow, so neat!"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #ffd466; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #384047; left: 50%; top: 100%; }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.styleguide-tooltips-pseudo-examples-with-styles button.left:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.styleguide-tooltips-custom ul li { line-height: 24px; }

.styleguide-tooltips-topic-color-button:before, .styleguide-tooltips-topic-color-button:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.styleguide-tooltips-topic-color-button:before { position: absolute; z-index: 1001; content: ""; background: #fff; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.styleguide-tooltips-topic-color-button:after { content: "This is my favorite topic."; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #fff; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #1a2126; border-color: #fff; border-style: solid; border-width: 4px 0 0; left: 50%; bottom: 100%; }

.topic-ai .styleguide-tooltips-topic-color-button:after { border-color: #733A88; }

.topic-back-end .styleguide-tooltips-topic-color-button:after { border-color: #008297; }

.topic-data .styleguide-tooltips-topic-color-button:after { border-color: #9F4B84; }

.topic-design .styleguide-tooltips-topic-color-button:after { border-color: #4a4290; }

.topic-experimental .styleguide-tooltips-topic-color-button:after { border-color: #733a88; }

.topic-front-end .styleguide-tooltips-topic-color-button:after { border-color: #3659a2; }

.topic-fundamentals .styleguide-tooltips-topic-color-button:after { border-color: #9b3b5a; }

.topic-mobile .styleguide-tooltips-topic-color-button:after { border-color: #30826C; }

.topic-internal .styleguide-tooltips-topic-color-button:after { border-color: #55616c; }

.topic-foundations .styleguide-tooltips-topic-color-button:after { border-color: #004e61; }

.topic-undefined .styleguide-tooltips-topic-color-button:after { border-color: #55616c; }

.topic-college-credit .styleguide-tooltips-topic-color-button:after { border-color: #3887c8; }

.topic-no-code .styleguide-tooltips-topic-color-button:after { border-color: #31AF7F; }

.topic-security .styleguide-tooltips-topic-color-button:after { border-color: #409BE9; }

.topic-game-development .styleguide-tooltips-topic-color-button:after { border-color: #856fc4; }

.topic-treehouse-resources .styleguide-tooltips-topic-color-button:after { border-color: #5fcf80; }

.topic-coding-for-kids .styleguide-tooltips-topic-color-button:after { border-color: #F36C27; }

.styleguide-tooltips-topic-color-button:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.styleguide-tooltips-topic-color-button:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.styleguide-tooltips-forum-tooltip { height: 150px; padding-left: 10px; }

.styleguide-tooltips .tooltip-topic-example { position: relative; }
.styleguide-type .example-overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; display: inline-block; overflow: hidden; width: 200px; margin-bottom: 0px; }
.leaderboards-index .leaderboard-percentile-points { text-align: center; color: #2b363e; }

@media screen and (min-width: 970px) { .leaderboards-index .leaderboard-percentile-points { width: 40%; float: left; padding: 0 5% 0 1%; } }

.leaderboards-index .leaderboard-percentile-points p { font-size: 14px; line-height: 1.4; margin-top: 20px; margin-bottom: 0; }

.leaderboards-index .leaderboard-percentile-points p em { font-weight: 700; color: #1a2126; }

.leaderboards-index .leaderboard-percentile-points .percentile-total { width: 150px; height: 150px; background: #55616c; border-radius: 150px; display: block; margin: 0 auto; }

.leaderboards-index .leaderboard-percentile-points .percentile-total strong { display: block; font-size: 55px; position: relative; top: 62px; left: 1px; color: #FFF; }

.leaderboards-index .leaderboard-percentile-points .percentile-total strong span { font-weight: 700; font-size: 19px; position: relative; top: -10px; left: 3px; }

.leaderboards-index .leaderboard-percentile-topics { width: 60%; padding-left: 4%; text-align: center; border-left: 1px solid #e8ebed; float: left; }

@media screen and (max-width: 969px) { .leaderboards-index .leaderboard-percentile-topics { width: 100%; float: none; padding: 30px 0 0 0; border-left: none; float: none; border-top: 1px solid #e8ebed; margin-top: 30px; } }

.leaderboards-index .leaderboard-percentile-topics h4 { font-weight: 700; color: #384047; font-size: 14px; margin-bottom: 6px; display: block; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic { width: 33.3333%; float: left; margin-top: 20px; position: relative; }

.topic-ai.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-ai.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #733A88; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-ai strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-ai .percentile-topic-name { color: #733A88; }

.topic-back-end.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-back-end.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #008297; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-back-end strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-back-end .percentile-topic-name { color: #008297; }

.topic-data.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-data.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #9F4B84; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-data strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-data .percentile-topic-name { color: #9F4B84; }

.topic-design.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-design.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #4a4290; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-design strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-design .percentile-topic-name { color: #4a4290; }

.topic-experimental.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-experimental.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #733a88; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-experimental strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-experimental .percentile-topic-name { color: #733a88; }

.topic-front-end.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-front-end.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #3659a2; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-front-end strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-front-end .percentile-topic-name { color: #3659a2; }

.topic-fundamentals.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-fundamentals.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #9b3b5a; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-fundamentals strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-fundamentals .percentile-topic-name { color: #9b3b5a; }

.topic-mobile.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-mobile.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #30826C; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-mobile strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-mobile .percentile-topic-name { color: #30826C; }

.topic-internal.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-internal.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #55616c; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-internal strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-internal .percentile-topic-name { color: #55616c; }

.topic-foundations.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-foundations.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #004e61; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-foundations strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-foundations .percentile-topic-name { color: #004e61; }

.topic-undefined.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-undefined.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #55616c; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-undefined strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-undefined .percentile-topic-name { color: #55616c; }

.topic-college-credit.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-college-credit.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #3887c8; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-college-credit strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-college-credit .percentile-topic-name { color: #3887c8; }

.topic-no-code.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-no-code.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #31AF7F; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-no-code strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-no-code .percentile-topic-name { color: #31AF7F; }

.topic-security.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-security.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #409BE9; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-security strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-security .percentile-topic-name { color: #409BE9; }

.topic-game-development.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-game-development.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #856fc4; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-game-development strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-game-development .percentile-topic-name { color: #856fc4; }

.topic-treehouse-resources.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-treehouse-resources.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #5fcf80; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-treehouse-resources strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-treehouse-resources .percentile-topic-name { color: #5fcf80; }

.topic-coding-for-kids.leaderboards-index .leaderboard-percentile-topics .percentile-topic strong, .topic-coding-for-kids.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-topic-name { color: #F36C27; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-coding-for-kids strong, .leaderboards-index .leaderboard-percentile-topics .percentile-topic.topic-coding-for-kids .percentile-topic-name { color: #F36C27; }

@media screen and (max-width: 679px) { .leaderboards-index .leaderboard-percentile-topics .percentile-topic { width: 100%; margin-bottom: 15px; } }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic .tooltip { display: none; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic .tooltip p { line-height: 1.4; font-size: 14px; color: #2b363e; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic .tooltip p em { font-weight: 700; color: #fff; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic:hover .tooltip { display: block; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-total { margin: 0 auto; width: 110px; height: 110px; border: 6px solid #d4d9dd; border-radius: 50%; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-total strong { display: block; font-size: 28px; position: relative; top: 36px; left: 1px; }

.leaderboards-index .leaderboard-percentile-topics .percentile-topic .percentile-total strong span { font-weight: 700; font-size: 15px; position: relative; top: -4px; left: 1px; }

.leaderboards-index .leaderboard-percentile-topics .topic-name { font-size: 14px; margin: 21px 5px 1px 0; color: #2b363e; line-height: 1.3; display: inline-block; }

.leaderboards-index .leaderboard-percentile-topics .topic-name:hover { color: #101417; }

.leaderboards-index .leaderboard-percentile-topics .topic-bullet { font-weight: 700; font-size: 18px; float: left; margin: -5px 5px -5px 0px; }

.leaderboards-index .sorting-container { position: relative; }

@media screen and (max-width: 679px) { .leaderboards-index .sorting-container { margin-bottom: 5px; }
  .leaderboards-index .sorting-container.leaderboard-points { margin-bottom: 70px; } }

.leaderboards-index .sorting-container .leaderboard-filter { position: absolute; }

.leaderboards-index .sorting-container .leaderboard-filter.filter-by-topic { right: 0px; top: 14px; }

@media screen and (max-width: 679px) { .leaderboards-index .sorting-container .leaderboard-filter.filter-by-topic { width: auto; bottom: -50px; left: 0; right: 0; top: auto; }
  .leaderboards-index .sorting-container .leaderboard-filter.filter-by-topic .form-element, .leaderboards-index .sorting-container .leaderboard-filter.filter-by-topic .form-item { width: auto !important; } }

@media screen and (max-width: 679px) { .leaderboard-list { margin-right: -20px; margin-left: -20px; } }

.leaderboard-list table { background: #f9fafa; border-top: 1px solid #e8ebed; margin-right: -30px; margin-left: -30px; display: block; font-size: 14px; border-collapse: collapse; }

@media screen and (max-width: 679px) { .leaderboard-list table { margin-right: 0px; margin-left: 0px; } }

.leaderboard-item { border-bottom: 1px solid #e8ebed; }

.leaderboard-item.truncated { background: #f3f5f6; }

.leaderboard-truncate { text-align: center; line-height: 30px; font-size: 18px; color: #4a5d6c; }

.leaderboard-cell { padding: 10px 5px; vertical-align: middle; }

.leaderboard-cell:first-child { padding-left: 30px; }

.leaderboard-cell:last-child { padding-right: 30px; }

.leaderboard-rank { color: #2b363e; }

.leaderboard-user { font-size: 13px; font-weight: 700; color: #1a2126; }

.leaderboard-user:hover { color: #050708; }

.leaderboard-user-container { width: 100%; }

.leaderboard-total { color: #384047; font-weight: 700; text-align: right; font-size: 15px; }

.leaderboard-motivation { padding: 30px 30px 0; margin: 0; text-align: center; color: #2b363e; font-size: 14px; }

.leaderboard-motivation-avatar { vertical-align: middle; margin-right: 5px; }

.leaderboard-motivation a { font-weight: 700; color: #1a2126; display: inline-block; }

.leaderboard-motivation a:hover { color: #101417; }

.leaderboard-motivation strong { font-weight: 700; }

.leaderboard-widget .box-content { padding-top: 0; padding-bottom: 0; }
html.person-sessions-controller p.forgot-password { float: right; font-size: 14px; margin: 11px 0 0 0; color: #2b363e; }

html.person-sessions-controller p.forgot-password a { color: #2b363e; }

html.person-sessions-controller p.forgot-password a:hover { color: #1a2126; }
.oauth-action { display: inline-block; margin-bottom: 20px; }

.oauth-overview { margin: 30px 0; }

.oauth-app { padding: 10px 0; border-bottom: solid 1px #E9E9E9; }

.oauth-app p { margin: 0; }

.oauth-app h3 { margin: 0; }

.oauth-app .revoke { float: right; }
#library-topic-filters { margin-bottom: 30px; }

.section-heading { padding: 30px 0 0; margin: 0 0 20px; border-top: 1px solid #d4d9dd; }

.section-heading:first-child, .section-heading.first { border-top: none; padding-top: 0; }

.section-heading h2 { font-size: 18px; margin-bottom: 5px; }

.section-heading p { margin: 0; }

.section-heading a { color: #3f8abf; font-weight: 700; }

.section-heading .button { float: right; margin: 0 0 0 10px; }

.custom-filter-wrapper { display: none; }

.search-container { width: 40%; }

@media screen and (min-width: 970px) { .custom-search { display: grid; grid-template-columns: auto max-content minmax(200px, max-content); grid-template-rows: 1fr; grid-template-areas: ". . ."; background: #edeff0; box-shadow: none !important; max-height: 62px !important; padding: 18px 0px !important; }
  .custom-search .custom-control-page-items { text-align: center; margin-top: -19px; background: #fff; padding: 19px 0px; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); margin-left: 10px; z-index: 5; display: flex; justify-content: center; }
  .custom-search .custom-search-container { background: #fff; border-radius: 4px; z-index: 5; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); right: minmax(200px, 50%) !important; }
  .custom-search .custom-filter-wrapper { display: block; text-align: right; font-size: 14px; font-weight: 500; color: #6a787c; padding: 0px 0px; }
  .custom-search .filter-container { z-index: 5; }
  .narrower { grid-template-columns: 50% auto minmax(222px, max-content); } }

.rating-and-student-count { margin-top: -15px; margin-bottom: 5px; font-size: 16px; }

.rating-and-student-count .star-rating-container { display: inline-block; margin-inline: 0; max-width: 105px; width: 100% !important; fill: #8e969d; }

.rating-and-student-count .star-rating-container .star-small-icon.active { fill: gold; }

.rating-and-student-count small { font-size: 12px; color: #303853; }
.upcoming-action #syllabus-jumpoff { height: 300px; }

.upcoming-action #syllabus-jumpoff .markdown-zone span.icon { color: auto; }

.upcoming-action #workshop-title { bottom: 40% !important; }

.upcoming-action #workshop-hero { height: 300px; margin: -30px; }

@media screen and (max-width: 679px) { .upcoming-action #workshop-hero { margin: -20px !important; } }
.workshops-controller.show-action #workshop-banner, .workshops-controller.upcoming-action #workshop-banner { background-color: #3f474f; padding: 20px 30px 20px 65px; text-align: left; position: relative; clear: both; }

.workshops-controller.show-action #workshop-banner svg, .workshops-controller.upcoming-action #workshop-banner svg { fill: #fff; float: left; width: 18px; height: 18px; margin: 2px 0 0 -34px; }

.workshops-controller.show-action #workshop-banner p, .workshops-controller.upcoming-action #workshop-banner p { color: #ffffff; margin: 0; }

.workshops-controller.show-action #workshop-banner a, .workshops-controller.upcoming-action #workshop-banner a { color: #fff; font-weight: 700; }

.workshops-controller.show-action #workshop-progress, .workshops-controller.upcoming-action #workshop-progress { position: relative; z-index: 3; width: 100%; border-radius: 4px 4px 0 0; padding: 0 30px; height: 60px; line-height: 60px; }

.workshops-controller.show-action #workshop-progress svg, .workshops-controller.upcoming-action #workshop-progress svg { fill: #fff; height: 18px; width: 18px; margin-right: 15px; position: relative; top: 4px; }

.workshops-controller.show-action #workshop-hero, .workshops-controller.upcoming-action #workshop-hero { padding: 0; display: block; text-align: center; background-size: cover; background-position: center center; overflow: hidden; z-index: 0; min-height: 400px; }

.workshops-controller.show-action #workshop-hero:before, .workshops-controller.upcoming-action #workshop-hero:before { display: block; background-color: #3f474f; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .95; }

.topic-ai.workshops-controller.show-action #workshop-hero:before, .topic-ai.workshops-controller.upcoming-action #workshop-hero:before { background-color: #5b2e6b; }

.topic-back-end.workshops-controller.show-action #workshop-hero:before, .topic-back-end.workshops-controller.upcoming-action #workshop-hero:before { background-color: #005f6e; }

.topic-data.workshops-controller.show-action #workshop-hero:before, .topic-data.workshops-controller.upcoming-action #workshop-hero:before { background-color: #833e6d; }

.topic-design.workshops-controller.show-action #workshop-hero:before, .topic-design.workshops-controller.upcoming-action #workshop-hero:before { background-color: #3c3574; }

.topic-experimental.workshops-controller.show-action #workshop-hero:before, .topic-experimental.workshops-controller.upcoming-action #workshop-hero:before { background-color: #5b2e6b; }

.topic-front-end.workshops-controller.show-action #workshop-hero:before, .topic-front-end.workshops-controller.upcoming-action #workshop-hero:before { background-color: #2c4883; }

.topic-fundamentals.workshops-controller.show-action #workshop-hero:before, .topic-fundamentals.workshops-controller.upcoming-action #workshop-hero:before { background-color: #7d3049; }

.topic-mobile.workshops-controller.show-action #workshop-hero:before, .topic-mobile.workshops-controller.upcoming-action #workshop-hero:before { background-color: #256453; }

.topic-internal.workshops-controller.show-action #workshop-hero:before, .topic-internal.workshops-controller.upcoming-action #workshop-hero:before { background-color: #434c55; }

.topic-foundations.workshops-controller.show-action #workshop-hero:before, .topic-foundations.workshops-controller.upcoming-action #workshop-hero:before { background-color: #002d38; }

.topic-undefined.workshops-controller.show-action #workshop-hero:before, .topic-undefined.workshops-controller.upcoming-action #workshop-hero:before { background-color: #434c55; }

.topic-college-credit.workshops-controller.show-action #workshop-hero:before, .topic-college-credit.workshops-controller.upcoming-action #workshop-hero:before { background-color: #2f72a9; }

.topic-no-code.workshops-controller.show-action #workshop-hero:before, .topic-no-code.workshops-controller.upcoming-action #workshop-hero:before { background-color: #288f68; }

.topic-security.workshops-controller.show-action #workshop-hero:before, .topic-security.workshops-controller.upcoming-action #workshop-hero:before { background-color: #1b88e5; }

.topic-game-development.workshops-controller.show-action #workshop-hero:before, .topic-game-development.workshops-controller.upcoming-action #workshop-hero:before { background-color: #6c52b8; }

.topic-treehouse-resources.workshops-controller.show-action #workshop-hero:before, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-hero:before { background-color: #40c667; }

.topic-coding-for-kids.workshops-controller.show-action #workshop-hero:before, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-hero:before { background-color: #e5560d; }

.workshops-controller.show-action #workshop-hero img, .workshops-controller.upcoming-action #workshop-hero img { display: block; margin: 0 auto; opacity: .09; max-width: 100%; max-height: 550px; visibility: hidden; }

.workshops-controller.show-action #workshop-title, .workshops-controller.upcoming-action #workshop-title { top: 50%; left: 0; right: 0; position: absolute; z-index: 1; padding: 0 15px; text-align: center; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.workshops-controller.show-action #workshop-title h1, .workshops-controller.upcoming-action #workshop-title h1 { color: #fff; }

@media screen and (min-width: 970px) { .workshops-controller.show-action #workshop-title h1, .workshops-controller.upcoming-action #workshop-title h1 { font-size: 34px; line-height: 46px; margin: 0 0 14px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .workshops-controller.show-action #workshop-title h1, .workshops-controller.upcoming-action #workshop-title h1 { font-size: 28px; line-height: 40px; margin: 0 0 14px; } }

@media screen and (max-width: 679px) { .workshops-controller.show-action #workshop-title h1, .workshops-controller.upcoming-action #workshop-title h1 { font-size: 22px; line-height: 34px; margin: 0 0 10px; } }

.workshops-controller.show-action #workshop-title h2, .workshops-controller.upcoming-action #workshop-title h2 { max-width: 600px; margin: 0 auto 20px; color: #8794a0; }

@media screen and (min-width: 970px) { .workshops-controller.show-action #workshop-title h2, .workshops-controller.upcoming-action #workshop-title h2 { font-size: 18px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .workshops-controller.show-action #workshop-title h2, .workshops-controller.upcoming-action #workshop-title h2 { font-size: 16px; } }

@media screen and (max-width: 679px) { .workshops-controller.show-action #workshop-title h2, .workshops-controller.upcoming-action #workshop-title h2 { font-size: 14px; } }

.workshops-controller.show-action #workshop-title .button, .workshops-controller.upcoming-action #workshop-title .button { margin-bottom: 10px; }

.workshops-controller.show-action #workshop-title .primary, .workshops-controller.upcoming-action #workshop-title .primary { text-shadow: none; color: #55616c; }

.workshops-controller.show-action #workshop-title .primary svg, .workshops-controller.upcoming-action #workshop-title .primary svg { fill: #55616c; }

.workshops-controller.show-action #workshop-title .primary:hover, .workshops-controller.show-action #workshop-title .primary:active, .workshops-controller.upcoming-action #workshop-title .primary:hover, .workshops-controller.upcoming-action #workshop-title .primary:active { background: #fff; border-color: #fff; }

.workshops-controller.show-action #workshop-banner, .workshops-controller.upcoming-action #workshop-banner { background-color: #3f474f; padding: 20px 30px 20px 65px; text-align: left; position: relative; }

.workshops-controller.show-action #workshop-banner:before, .workshops-controller.show-action #workshop-banner:after, .workshops-controller.upcoming-action #workshop-banner:before, .workshops-controller.upcoming-action #workshop-banner:after { content: " "; display: table; }

.workshops-controller.show-action #workshop-banner:after, .workshops-controller.upcoming-action #workshop-banner:after { clear: both; }

.workshops-controller.show-action #workshop-banner svg, .workshops-controller.upcoming-action #workshop-banner svg { fill: #fff; float: left; width: 18px; height: 18px; margin: 2px 0 0 -34px; }

.workshops-controller.show-action #workshop-banner p, .workshops-controller.upcoming-action #workshop-banner p { color: #ffffff; margin: 0; }

.workshops-controller.show-action #workshop-banner a, .workshops-controller.upcoming-action #workshop-banner a { color: #fff; font-weight: 700; }

.workshops-controller.show-action #workshop-actions, .workshops-controller.upcoming-action #workshop-actions { border-bottom: 2px solid #f0f2f4; padding: 0 0 20px; margin: -5px 0 30px; }

.workshops-controller.show-action #workshop-actions:before, .workshops-controller.show-action #workshop-actions:after, .workshops-controller.upcoming-action #workshop-actions:before, .workshops-controller.upcoming-action #workshop-actions:after { content: " "; display: table; }

.workshops-controller.show-action #workshop-actions:after, .workshops-controller.upcoming-action #workshop-actions:after { clear: both; }

.workshops-controller.show-action #workshop-actions li, .workshops-controller.upcoming-action #workshop-actions li { margin-bottom: 0; }

.workshops-controller.show-action #workshop-skill-level, .workshops-controller.upcoming-action #workshop-skill-level { margin-right: 0; }

.workshops-controller.show-action #workshop-bookmark, .workshops-controller.upcoming-action #workshop-bookmark { position: relative; float: right; margin: 0; margin-left: 10px; }

.workshops-controller.show-action #workshop-bookmark:before, .workshops-controller.show-action #workshop-bookmark:after, .workshops-controller.upcoming-action #workshop-bookmark:before, .workshops-controller.upcoming-action #workshop-bookmark:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.workshops-controller.show-action #workshop-bookmark:before, .workshops-controller.upcoming-action #workshop-bookmark:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.workshops-controller.show-action #workshop-bookmark:after, .workshops-controller.upcoming-action #workshop-bookmark:after { content: "Bookmark"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.workshops-controller.show-action #workshop-bookmark:hover:before, .workshops-controller.upcoming-action #workshop-bookmark:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.workshops-controller.show-action #workshop-bookmark:hover:after, .workshops-controller.upcoming-action #workshop-bookmark:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.workshops-controller.show-action #workshop-bookmark a, .workshops-controller.upcoming-action #workshop-bookmark a { width: 36px; padding: 0; }

.workshops-controller.show-action #workshop-bookmark svg, .workshops-controller.upcoming-action #workshop-bookmark svg { fill: #2b363e; top: 0; position: relative; }

.ff.workshops-controller.show-action #workshop-bookmark svg, .ff.workshops-controller.upcoming-action #workshop-bookmark svg { top: 2px; }

.topic-ai.workshops-controller.show-action #workshop-bookmark:hover a, .topic-ai.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-ai.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-ai.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #733A88; }

.topic-back-end.workshops-controller.show-action #workshop-bookmark:hover a, .topic-back-end.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-back-end.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-back-end.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #008297; }

.topic-data.workshops-controller.show-action #workshop-bookmark:hover a, .topic-data.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-data.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-data.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #9F4B84; }

.topic-design.workshops-controller.show-action #workshop-bookmark:hover a, .topic-design.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-design.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-design.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #4a4290; }

.topic-experimental.workshops-controller.show-action #workshop-bookmark:hover a, .topic-experimental.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-experimental.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-experimental.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #733a88; }

.topic-front-end.workshops-controller.show-action #workshop-bookmark:hover a, .topic-front-end.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-front-end.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-front-end.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #3659a2; }

.topic-fundamentals.workshops-controller.show-action #workshop-bookmark:hover a, .topic-fundamentals.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-fundamentals.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-fundamentals.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #9b3b5a; }

.topic-mobile.workshops-controller.show-action #workshop-bookmark:hover a, .topic-mobile.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-mobile.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-mobile.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #30826C; }

.topic-internal.workshops-controller.show-action #workshop-bookmark:hover a, .topic-internal.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-internal.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-internal.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #55616c; }

.topic-foundations.workshops-controller.show-action #workshop-bookmark:hover a, .topic-foundations.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-foundations.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-foundations.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #004e61; }

.topic-undefined.workshops-controller.show-action #workshop-bookmark:hover a, .topic-undefined.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-undefined.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-undefined.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #55616c; }

.topic-college-credit.workshops-controller.show-action #workshop-bookmark:hover a, .topic-college-credit.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-college-credit.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-college-credit.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #3887c8; }

.topic-no-code.workshops-controller.show-action #workshop-bookmark:hover a, .topic-no-code.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-no-code.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-no-code.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #31AF7F; }

.topic-security.workshops-controller.show-action #workshop-bookmark:hover a, .topic-security.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-security.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-security.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #409BE9; }

.topic-game-development.workshops-controller.show-action #workshop-bookmark:hover a, .topic-game-development.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-game-development.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-game-development.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #856fc4; }

.topic-treehouse-resources.workshops-controller.show-action #workshop-bookmark:hover a, .topic-treehouse-resources.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #5fcf80; }

.topic-coding-for-kids.workshops-controller.show-action #workshop-bookmark:hover a, .topic-coding-for-kids.workshops-controller.show-action #workshop-bookmark.bookmarked a, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-bookmark:hover a, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-bookmark.bookmarked a { border-color: #F36C27; }

.topic-ai.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-ai.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-ai.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-ai.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #733A88; }

.topic-back-end.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-back-end.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-back-end.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-back-end.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #008297; }

.topic-data.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-data.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-data.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-data.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #9F4B84; }

.topic-design.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-design.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-design.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-design.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #4a4290; }

.topic-experimental.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-experimental.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-experimental.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-experimental.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #733a88; }

.topic-front-end.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-front-end.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-front-end.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-front-end.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #3659a2; }

.topic-fundamentals.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-fundamentals.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-fundamentals.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-fundamentals.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #9b3b5a; }

.topic-mobile.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-mobile.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-mobile.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-mobile.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #30826C; }

.topic-internal.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-internal.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-internal.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-internal.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #55616c; }

.topic-foundations.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-foundations.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-foundations.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-foundations.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #004e61; }

.topic-undefined.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-undefined.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-undefined.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-undefined.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #55616c; }

.topic-college-credit.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-college-credit.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-college-credit.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-college-credit.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #3887c8; }

.topic-no-code.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-no-code.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-no-code.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-no-code.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #31AF7F; }

.topic-security.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-security.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-security.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-security.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #409BE9; }

.topic-game-development.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-game-development.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-game-development.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-game-development.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #856fc4; }

.topic-treehouse-resources.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-treehouse-resources.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #5fcf80; }

.topic-coding-for-kids.workshops-controller.show-action #workshop-bookmark:hover svg, .topic-coding-for-kids.workshops-controller.show-action #workshop-bookmark.bookmarked svg, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-bookmark:hover svg, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-bookmark.bookmarked svg { fill: #F36C27; }

.workshops-controller.show-action #workshop-bookmark.bookmarked:before, .workshops-controller.show-action #workshop-bookmark.bookmarked:after, .workshops-controller.upcoming-action #workshop-bookmark.bookmarked:before, .workshops-controller.upcoming-action #workshop-bookmark.bookmarked:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.workshops-controller.show-action #workshop-bookmark.bookmarked:before, .workshops-controller.upcoming-action #workshop-bookmark.bookmarked:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.workshops-controller.show-action #workshop-bookmark.bookmarked:after, .workshops-controller.upcoming-action #workshop-bookmark.bookmarked:after { content: "Remove Bookmark"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.workshops-controller.show-action #workshop-bookmark.bookmarked:hover:before, .workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.workshops-controller.show-action #workshop-bookmark.bookmarked:hover:after, .workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.topic-ai.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-ai.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #4c265a; }

.topic-back-end.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-back-end.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #004955; }

.topic-data.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-data.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #72365f; }

.topic-design.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-design.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #332d63; }

.topic-experimental.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-experimental.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #4c265a; }

.topic-front-end.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-front-end.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #253e70; }

.topic-fundamentals.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-fundamentals.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #6b293e; }

.topic-mobile.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-mobile.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #1e5244; }

.topic-internal.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-internal.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #384047; }

.topic-foundations.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-foundations.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #00191f; }

.topic-undefined.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-undefined.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #384047; }

.topic-college-credit.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-college-credit.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #296495; }

.topic-no-code.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-no-code.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #227b59; }

.topic-security.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-security.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #187acf; }

.topic-game-development.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-game-development.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #6046ab; }

.topic-treehouse-resources.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #36b55c; }

.topic-coding-for-kids.workshops-controller.show-action #workshop-bookmark.bookmarked:hover a, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover a { border-color: #cc4d0b; }

.topic-ai.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-ai.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #4c265a; }

.topic-back-end.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-back-end.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #004955; }

.topic-data.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-data.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #72365f; }

.topic-design.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-design.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #332d63; }

.topic-experimental.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-experimental.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #4c265a; }

.topic-front-end.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-front-end.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #253e70; }

.topic-fundamentals.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-fundamentals.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #6b293e; }

.topic-mobile.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-mobile.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #1e5244; }

.topic-internal.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-internal.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #384047; }

.topic-foundations.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-foundations.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #00191f; }

.topic-undefined.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-undefined.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #384047; }

.topic-college-credit.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-college-credit.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #296495; }

.topic-no-code.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-no-code.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #227b59; }

.topic-security.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-security.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #187acf; }

.topic-game-development.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-game-development.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #6046ab; }

.topic-treehouse-resources.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #36b55c; }

.topic-coding-for-kids.workshops-controller.show-action #workshop-bookmark.bookmarked:hover svg, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-bookmark.bookmarked:hover svg { fill: #cc4d0b; }

.workshops-controller.show-action #workshop-description h4, .workshops-controller.upcoming-action #workshop-description h4 { margin: 25px 0 15px; }

.workshops-controller.show-action #workshop-description p, .workshops-controller.upcoming-action #workshop-description p { font-size: 16px; margin: 0; display: inline; }

.workshops-controller.show-action #workshop-description a, .workshops-controller.upcoming-action #workshop-description a { color: #3f8abf; font-weight: 700; }

.workshops-controller.show-action #workshop-meta h3, .workshops-controller.upcoming-action #workshop-meta h3 { color: #384047; margin: 0 0 20px; }

.workshops-controller.show-action #workshop-meta p, .workshops-controller.upcoming-action #workshop-meta p { line-height: 1.8; max-width: 760px; }

.workshops-controller.show-action #workshop-meta ul, .workshops-controller.show-action #workshop-meta ol, .workshops-controller.upcoming-action #workshop-meta ul, .workshops-controller.upcoming-action #workshop-meta ol { margin-bottom: 15px; }

.workshops-controller.show-action #workshop-authors .instructor-avatar, .workshops-controller.upcoming-action #workshop-authors .instructor-avatar { width: 60px; height: 60px; display: block; float: right; margin: 0 0 15px 15px; background-color: #d4d9dd; background-position: center; background-size: auto 60px; border-radius: 60px; }

.workshops-controller.show-action #workshop-authors .instructor-avatar img, .workshops-controller.upcoming-action #workshop-authors .instructor-avatar img { display: none; }

.workshops-controller.show-action #workshop-authors h4, .workshops-controller.upcoming-action #workshop-authors h4 { font-size: 15px; margin: 0 0 5px; transition: color 0.3s ease; }

.topic-ai.workshops-controller.show-action #workshop-authors h4, .topic-ai.workshops-controller.upcoming-action #workshop-authors h4 { color: #733A88; }

.topic-back-end.workshops-controller.show-action #workshop-authors h4, .topic-back-end.workshops-controller.upcoming-action #workshop-authors h4 { color: #008297; }

.topic-data.workshops-controller.show-action #workshop-authors h4, .topic-data.workshops-controller.upcoming-action #workshop-authors h4 { color: #9F4B84; }

.topic-design.workshops-controller.show-action #workshop-authors h4, .topic-design.workshops-controller.upcoming-action #workshop-authors h4 { color: #4a4290; }

.topic-experimental.workshops-controller.show-action #workshop-authors h4, .topic-experimental.workshops-controller.upcoming-action #workshop-authors h4 { color: #733a88; }

.topic-front-end.workshops-controller.show-action #workshop-authors h4, .topic-front-end.workshops-controller.upcoming-action #workshop-authors h4 { color: #3659a2; }

.topic-fundamentals.workshops-controller.show-action #workshop-authors h4, .topic-fundamentals.workshops-controller.upcoming-action #workshop-authors h4 { color: #9b3b5a; }

.topic-mobile.workshops-controller.show-action #workshop-authors h4, .topic-mobile.workshops-controller.upcoming-action #workshop-authors h4 { color: #30826C; }

.topic-internal.workshops-controller.show-action #workshop-authors h4, .topic-internal.workshops-controller.upcoming-action #workshop-authors h4 { color: #55616c; }

.topic-foundations.workshops-controller.show-action #workshop-authors h4, .topic-foundations.workshops-controller.upcoming-action #workshop-authors h4 { color: #004e61; }

.topic-undefined.workshops-controller.show-action #workshop-authors h4, .topic-undefined.workshops-controller.upcoming-action #workshop-authors h4 { color: #55616c; }

.topic-college-credit.workshops-controller.show-action #workshop-authors h4, .topic-college-credit.workshops-controller.upcoming-action #workshop-authors h4 { color: #3887c8; }

.topic-no-code.workshops-controller.show-action #workshop-authors h4, .topic-no-code.workshops-controller.upcoming-action #workshop-authors h4 { color: #31AF7F; }

.topic-security.workshops-controller.show-action #workshop-authors h4, .topic-security.workshops-controller.upcoming-action #workshop-authors h4 { color: #409BE9; }

.topic-game-development.workshops-controller.show-action #workshop-authors h4, .topic-game-development.workshops-controller.upcoming-action #workshop-authors h4 { color: #856fc4; }

.topic-treehouse-resources.workshops-controller.show-action #workshop-authors h4, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-authors h4 { color: #5fcf80; }

.topic-coding-for-kids.workshops-controller.show-action #workshop-authors h4, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-authors h4 { color: #F36C27; }

.topic-ai.workshops-controller.show-action #workshop-authors a:hover h4, .topic-ai.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #552b64; }

.topic-back-end.workshops-controller.show-action #workshop-authors a:hover h4, .topic-back-end.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #005664; }

.topic-data.workshops-controller.show-action #workshop-authors a:hover h4, .topic-data.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #7c3b67; }

.topic-design.workshops-controller.show-action #workshop-authors a:hover h4, .topic-design.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #38326d; }

.topic-experimental.workshops-controller.show-action #workshop-authors a:hover h4, .topic-experimental.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #552b64; }

.topic-front-end.workshops-controller.show-action #workshop-authors a:hover h4, .topic-front-end.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #29447c; }

.topic-fundamentals.workshops-controller.show-action #workshop-authors a:hover h4, .topic-fundamentals.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #762d45; }

.topic-mobile.workshops-controller.show-action #workshop-authors a:hover h4, .topic-mobile.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #225d4d; }

.topic-internal.workshops-controller.show-action #workshop-authors a:hover h4, .topic-internal.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #3f474f; }

.topic-foundations.workshops-controller.show-action #workshop-authors a:hover h4, .topic-foundations.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #00252e; }

.topic-undefined.workshops-controller.show-action #workshop-authors a:hover h4, .topic-undefined.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #3f474f; }

.topic-college-credit.workshops-controller.show-action #workshop-authors a:hover h4, .topic-college-credit.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #2c6ca1; }

.topic-no-code.workshops-controller.show-action #workshop-authors a:hover h4, .topic-no-code.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #268762; }

.topic-security.workshops-controller.show-action #workshop-authors a:hover h4, .topic-security.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #1983dd; }

.topic-game-development.workshops-controller.show-action #workshop-authors a:hover h4, .topic-game-development.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #664bb5; }

.topic-treehouse-resources.workshops-controller.show-action #workshop-authors a:hover h4, .topic-treehouse-resources.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #3ac162; }

.topic-coding-for-kids.workshops-controller.show-action #workshop-authors a:hover h4, .topic-coding-for-kids.workshops-controller.upcoming-action #workshop-authors a:hover h4 { color: #db520c; }

.workshops-controller.show-action #workshop-authors p, .workshops-controller.upcoming-action #workshop-authors p { color: #2b363e; margin-right: 100px; overflow: hidden; position: relative; }

.webkit.workshops-controller.show-action #workshop-authors p, .webkit.workshops-controller.upcoming-action #workshop-authors p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }

:not(.webkit).workshops-controller.show-action #workshop-authors p, :not(.webkit).workshops-controller.upcoming-action #workshop-authors p { max-height: 72px; }

:not(.webkit).workshops-controller.show-action #workshop-authors p:after, :not(.webkit).workshops-controller.upcoming-action #workshop-authors p:after { position: absolute; bottom: 0; right: 0; height: 16px; width: 80px; content: ""; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff 40%, #fff); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 40%, #fff); }

.workshops-controller.show-action #workshop-steps .steps-trigger, .workshops-controller.upcoming-action #workshop-steps .steps-trigger { font-size: 14px; font-weight: 700; display: block; margin-bottom: 20px; }

.workshops-controller.show-action #workshop-steps .selected .chevron-icon, .workshops-controller.upcoming-action #workshop-steps .selected .chevron-icon { margin-top: -1px; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.workshops-controller.show-action #workshop-steps .chevron-icon, .workshops-controller.upcoming-action #workshop-steps .chevron-icon { width: 12px; margin: 0 4px 0 0; transition: none; }

.workshops-controller.show-action #workshop-steps .steps-list > li, .workshops-controller.upcoming-action #workshop-steps .steps-list > li { border-top: 1px solid #e8ebed; }

.workshops-controller.show-action #workshop-steps .steps-list a, .workshops-controller.upcoming-action #workshop-steps .steps-list a { display: block; padding: 15px 0 15px 40px; transition: all .2s; }

.workshops-controller.show-action #workshop-steps .steps-list a:hover h4, .workshops-controller.upcoming-action #workshop-steps .steps-list a:hover h4 { color: #384047; }

.workshops-controller.show-action #workshop-steps .steps-list a > p, .workshops-controller.upcoming-action #workshop-steps .steps-list a > p { color: #2b363e; margin: 0; line-height: 1; }

.workshops-controller.show-action #workshop-steps .steps-list h4, .workshops-controller.upcoming-action #workshop-steps .steps-list h4 { font-size: 14px; color: #101417; margin: 0 0 8px; }

.workshops-controller.show-action #workshop-steps .steps-list svg, .workshops-controller.upcoming-action #workshop-steps .steps-list svg { float: left; margin: 4px 0 0 -40px; width: 22px; height: 22px; }

.workshops-controller.show-action #workshop-steps .steps-list .extra-credit, .workshops-controller.upcoming-action #workshop-steps .steps-list .extra-credit { padding: 15px 0 15px 40px; }

.workshops-controller.show-action #workshop-steps .steps-list .extra-credit li, .workshops-controller.upcoming-action #workshop-steps .steps-list .extra-credit li { font-size: 12px; }

.workshops-controller.show-action #workshop-steps .steps-list .extra-credit svg, .workshops-controller.upcoming-action #workshop-steps .steps-list .extra-credit svg { width: 25px; height: auto; -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }

.workshops-controller.show-action #workshop-steps .steps-list .extra-credit p, .workshops-controller.upcoming-action #workshop-steps .steps-list .extra-credit p { line-height: 1.6; }

.workshops-controller.show-action #workshop-steps .steps-list .extra-credit .markdown-zone > p a, .workshops-controller.upcoming-action #workshop-steps .steps-list .extra-credit .markdown-zone > p a { display: inline-block; padding: 0; }

.workshops-controller.show-action #workshop-steps .steps-list .completed h4, .workshops-controller.upcoming-action #workshop-steps .steps-list .completed h4 { color: #2b363e; }

.workshops-controller.show-action #workshop-steps .steps-list svg.has-topic-fill-on-parent-hover, .workshops-controller.upcoming-action #workshop-steps .steps-list svg.has-topic-fill-on-parent-hover { fill: #d4d9dd; }

.workshops-controller.show-action #workshop-videos, .workshops-controller.upcoming-action #workshop-videos { margin: 30px -15px 0; }

.workshops-controller.show-action #workshop-videos:before, .workshops-controller.show-action #workshop-videos:after, .workshops-controller.upcoming-action #workshop-videos:before, .workshops-controller.upcoming-action #workshop-videos:after { content: " "; display: table; }

.workshops-controller.show-action #workshop-videos:after, .workshops-controller.upcoming-action #workshop-videos:after { clear: both; }

.workshops-controller.show-action .workshop-video, .workshops-controller.upcoming-action .workshop-video { float: left; padding: 0 15px 30px; width: 100%; height: 360px; margin-bottom: 10px; }

@media screen and (min-width: 1300px) { .workshops-controller.show-action .workshop-video, .workshops-controller.upcoming-action .workshop-video { width: 33.3%; }
  .workshops-controller.show-action .workshop-video:nth-child(3n+1), .workshops-controller.upcoming-action .workshop-video:nth-child(3n+1) { clear: left; } }

@media screen and (min-width: 740px) and (max-width: 1299px) { .workshops-controller.show-action .workshop-video, .workshops-controller.upcoming-action .workshop-video { width: 50%; } }

@media screen and (min-width: 670px) and (max-width: 830px) { .workshops-controller.show-action .workshop-video, .workshops-controller.upcoming-action .workshop-video { height: 410px; } }

.workshops-controller.show-action .workshop-video svg, .workshops-controller.upcoming-action .workshop-video svg { position: absolute; left: 50%; top: 50%; fill: #fff; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.workshops-controller.show-action .workshop-video svg.play-icon, .workshops-controller.show-action .workshop-video svg.instruction-22-icon, .workshops-controller.upcoming-action .workshop-video svg.play-icon, .workshops-controller.upcoming-action .workshop-video svg.instruction-22-icon { width: 40px; height: 42px; }

.workshops-controller.show-action .workshop-video svg.step-complete-fill-22-icon, .workshops-controller.upcoming-action .workshop-video svg.step-complete-fill-22-icon { width: 44px; height: 44px; }

.workshops-controller.show-action .workshop-video:hover svg, .workshops-controller.upcoming-action .workshop-video:hover svg { -ms-transform: translate(-50%, -50%) scale(1.1); -moz-transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); }

.workshops-controller.show-action .workshop-video:not(:hover):not(.suggested) svg, .workshops-controller.upcoming-action .workshop-video:not(:hover):not(.suggested) svg { opacity: 0.4; }

.workshops-controller.show-action .workshop-video.suggested .workshop-video-thumb-overlay, .workshops-controller.show-action .workshop-video:hover .workshop-video-thumb-overlay, .workshops-controller.upcoming-action .workshop-video.suggested .workshop-video-thumb-overlay, .workshops-controller.upcoming-action .workshop-video:hover .workshop-video-thumb-overlay { background-color: rgba(0, 0, 0, 0.2); }

.workshops-controller.show-action .workshop-video-thumb, .workshops-controller.upcoming-action .workshop-video-thumb { position: relative; }

.workshops-controller.show-action .workshop-video-thumb-overlay, .workshops-controller.upcoming-action .workshop-video-thumb-overlay { background-color: rgba(225, 232, 234, 0.92); position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; transition: background-color 0.3s ease; }

.workshops-controller.show-action .workshop-video-thumb img, .workshops-controller.upcoming-action .workshop-video-thumb img { display: block; width: 100%; border-radius: 4px; margin: 0 0 20px; min-height: 190px; }

.workshops-controller.show-action .workshop-video-thumb-fallback, .workshops-controller.upcoming-action .workshop-video-thumb-fallback { display: block; width: 100%; background-color: #2d3339; border-radius: 4px; margin: 0 0 20px; padding-top: 56.25%; }

.workshops-controller.show-action .workshop-video figcaption, .workshops-controller.upcoming-action .workshop-video figcaption { transition: opacity 0.3s ease; }

.workshops-controller.show-action .workshop-video:not(:hover):not(.suggested) figcaption, .workshops-controller.upcoming-action .workshop-video:not(:hover):not(.suggested) figcaption { opacity: .7; }

.workshops-controller.show-action .workshop-video h3, .workshops-controller.upcoming-action .workshop-video h3 { font-size: 16px; line-height: 1.4; color: #1a2126; transition: color 0.3s ease; }

.topic-ai.workshops-controller.show-action .workshop-video:hover h3, .topic-ai.workshops-controller.show-action .workshop-video.suggested h3, .topic-ai.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-ai.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #733A88; }

.topic-back-end.workshops-controller.show-action .workshop-video:hover h3, .topic-back-end.workshops-controller.show-action .workshop-video.suggested h3, .topic-back-end.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-back-end.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #008297; }

.topic-data.workshops-controller.show-action .workshop-video:hover h3, .topic-data.workshops-controller.show-action .workshop-video.suggested h3, .topic-data.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-data.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #9F4B84; }

.topic-design.workshops-controller.show-action .workshop-video:hover h3, .topic-design.workshops-controller.show-action .workshop-video.suggested h3, .topic-design.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-design.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #4a4290; }

.topic-experimental.workshops-controller.show-action .workshop-video:hover h3, .topic-experimental.workshops-controller.show-action .workshop-video.suggested h3, .topic-experimental.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-experimental.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #733a88; }

.topic-front-end.workshops-controller.show-action .workshop-video:hover h3, .topic-front-end.workshops-controller.show-action .workshop-video.suggested h3, .topic-front-end.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-front-end.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #3659a2; }

.topic-fundamentals.workshops-controller.show-action .workshop-video:hover h3, .topic-fundamentals.workshops-controller.show-action .workshop-video.suggested h3, .topic-fundamentals.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-fundamentals.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #9b3b5a; }

.topic-mobile.workshops-controller.show-action .workshop-video:hover h3, .topic-mobile.workshops-controller.show-action .workshop-video.suggested h3, .topic-mobile.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-mobile.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #30826C; }

.topic-internal.workshops-controller.show-action .workshop-video:hover h3, .topic-internal.workshops-controller.show-action .workshop-video.suggested h3, .topic-internal.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-internal.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #55616c; }

.topic-foundations.workshops-controller.show-action .workshop-video:hover h3, .topic-foundations.workshops-controller.show-action .workshop-video.suggested h3, .topic-foundations.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-foundations.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #004e61; }

.topic-undefined.workshops-controller.show-action .workshop-video:hover h3, .topic-undefined.workshops-controller.show-action .workshop-video.suggested h3, .topic-undefined.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-undefined.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #55616c; }

.topic-college-credit.workshops-controller.show-action .workshop-video:hover h3, .topic-college-credit.workshops-controller.show-action .workshop-video.suggested h3, .topic-college-credit.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-college-credit.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #3887c8; }

.topic-no-code.workshops-controller.show-action .workshop-video:hover h3, .topic-no-code.workshops-controller.show-action .workshop-video.suggested h3, .topic-no-code.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-no-code.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #31AF7F; }

.topic-security.workshops-controller.show-action .workshop-video:hover h3, .topic-security.workshops-controller.show-action .workshop-video.suggested h3, .topic-security.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-security.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #409BE9; }

.topic-game-development.workshops-controller.show-action .workshop-video:hover h3, .topic-game-development.workshops-controller.show-action .workshop-video.suggested h3, .topic-game-development.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-game-development.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #856fc4; }

.topic-treehouse-resources.workshops-controller.show-action .workshop-video:hover h3, .topic-treehouse-resources.workshops-controller.show-action .workshop-video.suggested h3, .topic-treehouse-resources.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-treehouse-resources.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #5fcf80; }

.topic-coding-for-kids.workshops-controller.show-action .workshop-video:hover h3, .topic-coding-for-kids.workshops-controller.show-action .workshop-video.suggested h3, .topic-coding-for-kids.workshops-controller.upcoming-action .workshop-video:hover h3, .topic-coding-for-kids.workshops-controller.upcoming-action .workshop-video.suggested h3 { color: #F36C27; }

.workshops-controller.show-action .workshop-video p, .workshops-controller.upcoming-action .workshop-video p { font-weight: 700; font-size: 13px; color: #2b363e; margin: 4px 0 0; }
.videos-show-overlay-message { font-size: 18px; line-height: 1.4 !important; color: #2b363e; }

.videos-show .video-alert { position: absolute; top: 30px; left: 30px; right: 30px; z-index: 1; }

.videos-show .video-is-preview { position: absolute; top: 25px; left: 25px; border-radius: 5px 5px 5px 5px; background-color: #384047; font-weight: 700; font-size: 14px; padding: 12px 28px; color: #2b363e; opacity: .8; z-index: 200; }

.videos-show #video-container { position: relative; z-index: 0; }

.has-stage-progress.videos-show #video-container .mejs-container:not(.max-width-reached) video { border-radius: 0; }

.videos-show #video-container img { max-width: 100%; }

.videos-show.step-completed #video-container, .videos-show.step-overlay-loading #video-container { display: none; }

.videos-show .video-overlay { position: absolute; background: #384047; top: 0; bottom: 0; left: 0; right: 0; z-index: 200; overflow: hidden; text-align: center; border-radius: 5px 5px 0 0; display: none; }

.videos-show .video-overlay.active { display: block; }

.videos-show .video-overlay-message { position: absolute; left: 30px; right: 30px; top: 50%; -ms-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); vertical-align: middle; }

.videos-show .video-overlay-message p { font-size: 1.1rem; color: #fff; line-height: 22px; display: block; margin: 0 0 20px; }

.videos-show .video-overlay-message p strong { font-weight: 700; }

.videos-show .video-overlay-message p:last-child { margin: 0; }

@media screen and (min-width: 680px) { .videos-show .video-overlay-message span#next-step-label:after { content: ":"; } }

@media screen and (max-width: 679px) { .videos-show .video-overlay-message span#next-step-type { display: none; } }

.videos-show .video-overlay-message button { margin-bottom: 10px; }

.videos-show .video-overlay-message .button { margin-bottom: 20px; margin-right: 0; }

.videos-show .video-overlay-message .button + .button { margin-left: 20px; }

.videos-show .video-overlay-message .button .icon { margin-top: -5px; }

@media screen and (min-width: 680px) { .videos-show .video-overlay-message .label { opacity: .7; } }

.videos-show #video-meta { margin: 0 0 50px; }

.videos-show #video-meta .secondary-heading { padding-right: 80px; }

.videos-show #video-meta .secondary-heading:before, .videos-show #video-meta .secondary-heading:after { content: " "; display: table; }

.videos-show #video-meta .secondary-heading:after { clear: both; }

.videos-show #video-meta h1 { font-size: 24px; line-height: 30px; margin: 0; float: left; }

.videos-show #video-meta span { display: block; }

.videos-show #video-meta span#video-authors { clear: left; font-size: 14px; padding: 7px 0 5px; }

.videos-show #video-meta span#video-authors a { color: #3f8abf; }

.videos-show #video-meta span#video-authors a:hover { color: #326e99; }

.videos-show #video-meta span#video-duration { font-weight: 700; float: right; font-weight: 400; font-size: 24px; margin: 0 -80px 0 0; color: #2b363e; line-height: 1.3; }

@media screen and (max-width: 679px) { .videos-show #video-meta span#video-duration { font-size: 21px; margin-top: 2px; } }

.videos-show #video-meta p { font-size: 14px; line-height: 1.6; margin-bottom: 0; }

@media screen and (max-width: 679px) { .videos-show #video-meta p { font-size: 14px; } }

.videos-show #video-meta a { font-weight: 700; color: #101417; }

.videos-show #video-meta a:hover { color: #384047; }

.videos-show #notes .markdown-zone { max-width: 800px; }

.videos-show .content-discussion .form-item { margin-bottom: 0; }

.videos-show .content-discussion .text { padding-left: 42px; }

.videos-show .content-discussion label { left: 45px; }

.videos-show .content-discussion button { position: absolute; top: 0; bottom: 0; right: 0; padding: 0 10px; border: none; background: none; }

.videos-show .content-discussion .contained p { line-height: 1.5; }

.videos-show .content-discussion .contained > .icon { float: right; margin: 10px 0 10px 10px; }

.videos-show .content-discussion h2 { font-size: 15px; }

.videos-show .content-discussion h2 strong { display: none; }

.videos-show .content-discussion h2:after { content: "Need Help?"; }

.videos-show .content-discussion p { color: #2b363e; line-height: 1.6; }

.videos-show .content-discussion .contained.secondary { margin-bottom: 0; padding: 0; }

.videos-show .content-discussion .contained .icon { display: none; }

.videos-show .content-discussion .contained a#ask-question { display: block; }

.videos-show #questions .content-discussion, .videos-show #downloads .content-discussion { display: block; float: none; background: #f9fafa; padding: 30px 20px 30px 20px; border-radius: 5px; text-align: center; }

.videos-show #questions .content-discussion:before, .videos-show #questions .content-discussion:after, .videos-show #downloads .content-discussion:before, .videos-show #downloads .content-discussion:after { content: " "; display: table; }

.videos-show #questions .content-discussion:after, .videos-show #downloads .content-discussion:after { clear: both; }

@media screen and (min-width: 680px) { .videos-show #questions .content-discussion, .videos-show #downloads .content-discussion { width: auto; } }

@media screen and (max-width: 679px) { .videos-show #questions .content-discussion, .videos-show #downloads .content-discussion { width: 100%; } }

.videos-show #questions .content-discussion p, .videos-show #downloads .content-discussion p { text-align: center; font-size: 15px; padding: 0 0 10px 0; color: #2b363e; }

.videos-show #questions .content-discussion .secondary-heading, .videos-show #downloads .content-discussion .secondary-heading { display: none; }

.videos-show #questions .content-discussion .contained, .videos-show #downloads .content-discussion .contained { background: transparent; margin-bottom: 0; box-shadow: none; }

.videos-show #questions .content-discussion a#ask-question, .videos-show #downloads .content-discussion a#ask-question { margin: 0 auto; }

.videos-show #questions.no-questions .discussion-list { display: none; display: none; }

.videos-show .office-hours { margin-top: 40px; display: flex; flex-direction: column; }

.videos-show .office-hours-header { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; }

.videos-show .office-hours-title { font-size: 14px; color: #101417; }

.videos-show .office-hours-subtitle { font-size: 12px; color: #2b363e; }

.videos-show .office-hours-description { font-size: 14px; color: #2b363e; margin: 0; }

.videos-show .office-hours-description a { text-decoration: underline; }

.videos-show .office-hours-event { padding: 0 5px 0 10px; margin: 20px 0 20px 0; border-left: 2px solid #3659a2; }

.videos-show .office-hours-event-time { font-size: 12px; margin: 0; color: #2b363e; }

.videos-show .office-hours-event-time span.live { font-size: 10px; color: #fff; background-color: #5fcf80; padding: 3px 6px; border-radius: 4px; }

.videos-show .office-hours-event-teacher { margin: 0; font-size: 12px; color: #2b363e; }

.videos-show .office-hours-event-topics { margin: 0; font-size: 14px; font-weight: 500; color: #101417; }

.videos-show #transcript p { font-size: 14px; line-height: 1.5; }

.videos-show #transcript a { font-weight: 400; }

.videos-show #transcript .block { display: block; color: #101417; padding-right: 80px; }

.videos-show #transcript .block:not(:last-child) { border-bottom: 1px solid #edeff0; margin-bottom: 15px; padding-bottom: 15px; }

.videos-show #transcript .time { font-weight: 700; font-size: 14px; color: #2b363e; line-height: 1.5; float: right; margin-right: -80px; }

.videos-show #downloads { margin-top: 30px; }

.videos-show #downloads .no-downloads-message { width: auto; display: block; float: none; background: #f9fafa; padding: 30px 20px 30px 20px; border-radius: 5px; text-align: center; }

.videos-show #downloads .no-downloads-message:before, .videos-show #downloads .no-downloads-message:after { content: " "; display: table; }

.videos-show #downloads .no-downloads-message:after { clear: both; }

.videos-show #downloads .no-downloads-message p { text-align: center; font-size: 15px; padding: 0 0 10px 0; color: #2b363e; }

.videos-show #downloads .no-downloads-message .button { width: auto; margin: 0 auto; }

.videos-show #workspaces { min-height: 165px; }

.videos-show #workspaces .workspace-list { margin-top: -10px; }

.videos-show #workspaces .workspace-item { margin: 0; padding: 15px 0; }

.videos-show #workspaces .workspace-item-object { padding: 0 38px; }

.videos-show #workspaces .workspace-item .workspaces-small-icon { position: absolute; width: 24px; height: 24px; top: 25px; left: 0; fill: #c6ccd2; }

.videos-show #workspaces .workspace-item--notcreated { padding: 30px 0; }

.videos-show #workspaces .workspace-item--notcreated p { margin: 0 38px; }

.videos-show #workspaces .workspace-item--notcreated a { color: #101417; font-weight: 700; }

.videos-show #workspaces .workspace-item--notcreated .info-icon { fill: #c6ccd2; width: 24px; height: auto; position: absolute; top: 50%; left: 0; -ms-transform: translatey(-12px); -moz-transform: translatey(-12px); -webkit-transform: translatey(-12px); transform: translatey(-12px); }

.videos-show #workspaces .workspace-item:last-child { border-bottom: 0px; }

.videos-show #workspaces .workspace-item--not-current { display: none; }

.workspace-list-expanded .videos-show #workspaces .workspace-item--not-current { display: block; }

.videos-show #workspaces .workspace-item:not(:hover) .workspace-item-launch a { opacity: 0; }

.videos-show #workspaces .workspace-item-launch { margin: 2px 0; }

.videos-show #workspaces .workspace-item-launch a { transition: opacity .3s ease; }

.videos-show #workspaces .workspace-item.empty { border: none; }

.videos-show #workspaces .workspace-item.empty #no-results p { font-size: 14px; font-weight: 400; }

.videos-show #workspaces .workspace-item.empty #no-results.empty-message { display: block; }

.videos-show .deletion-cover { display: none; opacity: 1 !important; }

.videos-show .deletion-cover .content { opacity: 1 !important; }

.videos-show .deletion-cover p { padding-left: 20px; }

.videos-show .deletion-cover .loading-spinner { display: inline-block; top: 5px; left: -10px; }

@media screen and (max-width: 680px) { .videos-show .deletion-cover .loading-spinner { display: block !important; } }

.videos-show .item-cover { background: #fff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .9; transition: opacity .15s ease-out; z-index: 100; }

.videos-show .item-cover:hover { opacity: 1; }

.videos-show .item-cover:hover .content { opacity: 1; }

.videos-show .item-cover .content { opacity: 0; transition: opacity .15s ease-out; -ms-transform: translatey(-15px); -moz-transform: translatey(-15px); -webkit-transform: translatey(-15px); transform: translatey(-15px); top: 50%; position: absolute; left: 10px; }

.workspace-table .videos-show .item-cover .content { left: 20px; }

.videos-show .item-cover .content p { color: #101417; margin: 0; }

.videos-show .item-cover .content .icon { margin-right: 10px; }

#questions, #transcript, #downloads { min-height: 155px; }

.recommendations-list { margin: 30px auto 0; text-align: center; max-width: 1310px; }

.recommendations-list li { width: 45%; padding: 0 15px; display: inline-block; }

@media screen and (max-width: 969px) { .recommendations-list li { width: 100%; padding-bottom: 30px; } }
@media screen and (max-width: 680px) { #track-index-header .control-container:not(.control-container-attached) { margin-bottom: 30px; }
  #track-index-header .control-container .dropdown-parent .dropdown-parent-label { padding: 10px 0 20px 0; }
  #track-index-header .control-container .dropdown-parent .dropdown-parent-label:after { top: 10px; } }

@media screen and (min-width: 680px) { #track-index-header { min-height: 96px; }
  #track-index-header .section-heading { width: 65% !important; float: left; margin-top: 4px; padding-bottom: 10px; }
  #track-index-header .control-container { float: right; height: 40px; padding: 0px; margin-top: 8px; line-height: 35px; background-color: transparent; box-shadow: none; border: 2px solid #d4d9dd; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; transition: border-color 0.2s ease; }
  #track-index-header .control-container:hover { border-color: #b7c0c7; }
  #track-index-header .control-container .control-page-items { margin-left: 0px; }
  #track-index-header .control-container .filter-container { margin: 0 -5px 0 0; padding: 0 10px 0 4px; }
  #track-index-header .control-container .dropdown-parent .dropdown-parent-label { margin-top: 8px; padding: 0 2px 0 10px; color: #1a2126; }
  #track-index-header .control-container .dropdown-parent .dropdown-parent-label:after { background-position: 0 0 !important; opacity: 0.5; margin-left: 4px; }
  #track-index-header .control-container .dropdown-parent .dropdown-parent-label:hover:after { opacity: 1; }
  #track-index-header .control-container .dropdown-parent-label .topic-color { margin-top: 18px; } }

#track-card:before { height: 10px; left: 20px; right: 20px; }

#track-card .confirmation-container.active { margin-bottom: -30px; }

#track-card .confirmation { margin-top: 10px; }

#track-card .confirmation:before { right: 88px; }

#track-card .confirmation .confirmation-actions { right: 30px; }

#track-card .markdown-zone strong { display: inline; font-size: 14px; color: #050708; font-weight: bold; }

@media screen and (max-width: 679px) { #track-card { margin-top: 30px; } }

#track-progress { position: relative; z-index: 3; border-radius: 4px 4px 0 0; padding: 0 30px; margin: -30px -30px 30px; height: 60px; line-height: 60px; }

@media screen and (max-width: 680px) { #track-progress { margin: -20px -20px 30px; } }

#track-progress svg { fill: #fff; height: 18px; width: 18px; margin-right: 15px; position: relative; top: 4px; }

#track-progress ul { display: inline-block; margin-bottom: 0; }

.upcoming #track-progress ul, .completed #track-progress ul, .conference #track-progress ul { display: none; }

#track-progress ul li { background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 100px; text-indent: -100px; overflow: hidden; display: block; float: left; height: 10px; margin-right: 10px; width: 10px; }

#track-progress ul li.current { border-color: #fff; }

#track-progress ul li.complete { background-color: #fff; border-color: #fff; }

#track-progress .estimate { color: #fff; font-size: 14px; font-weight: 700; position: absolute; top: 0px; right: 30px; padding-left: 15px; }

.upcoming #track-progress .estimate { display: none; }

#track-meta { margin-bottom: 30px; }

#track-meta strong { font-size: 16px; color: #2b363e; margin-bottom: 8px; display: block; }

#track-meta h1 { font-size: 27px; margin-bottom: 20px; }

#track-meta h2 { font-size: 24px; margin-bottom: 20px; display: block; }

#track-actions { position: relative; height: 36px; }

@media screen and (max-width: 679px) { #track-actions { height: 88px; }
  #track-actions .card-action-trailer { clear: left; }
  #track-actions .card-action.secondary { float: left; margin: 10px 10px 0 0; } }

#track-actions .track-card-status { line-height: 36px; }

#track-actions .track-card-status svg { float: left; margin: 10px 10px 0 0; }

#track-actions .track-card-status .complete-title { font-size: 14px; font-weight: 700; }

#track-actions .card-tags { left: 0; bottom: 0; }

#track-actions .card-actions { right: 0; left: 0; bottom: 0; }

#track-steps > ul { margin: 0 -15px; padding-top: 57px; box-sizing: border-box; position: relative; }

#track-steps > ul:after { content: ""; position: absolute; display: block; top: 0; left: 50%; margin-left: -5px; width: 10px; height: 47px; background: #d4d9dd; border-radius: 5px; }

#track-steps > ul > li { padding: 0 15px; margin: 0 auto; width: 100%; box-sizing: border-box; }

@media screen and (max-width: 970px) { #track-steps > ul > li { width: 100% !important; } }

#track-steps .card { clear: left; padding-bottom: 70px; z-index: 2; float: none !important; }

#track-steps .card:after { content: ""; position: absolute; display: block; bottom: 10px; left: 50%; margin-left: -5px; width: 10px; height: 47px; background: #d4d9dd; border-radius: 5px; }

@media screen and (min-width: 1350px) { #container:not(.with-sidebar) #content #track-steps .card, #track-steps .card #container:not(.with-sidebar) #content #track-steps > ul > li:last-child { width: 50%; margin: 0 auto; } }

#track-steps .card .card-tags, #track-steps .card .card-actions { bottom: 100px; }

#track-steps .card .bookmark-tarp { bottom: 70px; }

#track-steps .card .description { max-height: 300px; }

html.webkit #track-steps .card .description { -webkit-line-clamp: 10; }

#track-steps .card .confirmation-tarp { bottom: 70px; }

#track-steps .card-box { padding-bottom: 96px; position: relative; }

#track-steps .track-completion { background: #55616c; border-radius: 4px; padding: 50px 15px; text-align: center; box-sizing: border-box; }

#track-steps .track-completion h3 { color: #fff; font-size: 18px; }

#track-steps .track-completion svg { margin-bottom: 15px; width: 150px; }

#track-steps .track-completion.track-complete { background-color: #5fcf80; background-image: url("/assets/icons/icon-track-completion-card-9709633e0a78b73436004489b5f44aecba91cfb33329115ecd47847cd743046b.svg"); background-size: 100%; }

#track-steps .track-completion.track-complete p { color: #d5f2dd; font-size: 18px; font-weight: 700; line-height: 1; }

#track-steps .track-completion.track-complete p .track-title { color: #fff; display: block; font-size: 24px; margin-bottom: 8px; }

#track-steps .track-completion.track-complete .icon-track-complete { margin: 5px 0 15px 0; }

#track-steps .track-dialog { background-color: #55616c; color: #edeff0; padding: 30px; text-align: center; width: auto; }

#track-steps .track-dialog:after { content: none; }

#track-steps .track-dialog #track-update-icon, #track-steps .track-dialog #track-update-description { margin-bottom: 15px; }

#track-steps .track-dialog #track-update-title { color: #fff; line-height: 20px; width: 90%; margin: 0 auto; margin-bottom: 15px; }

#track-steps #track-update { transition: background 300ms 0s ease; }

#track-steps #track-update-changes, #track-steps #track-update-actions-never, #track-steps #track-update-actions-notify-me { display: none; }

#track-steps #track-update-actions-resume { display: none; }

#track-steps #track-update.updated-track { background: #5fcf80; }

#track-steps #track-update.updated-track #track-update-icon { display: none; }

#track-steps #track-update.updated-track #track-update-description { color: #fff; opacity: 0.85; }

#track-steps #track-update.updated-track #track-update-actions-primary, #track-steps #track-update.updated-track #track-update-actions-secondary { display: none; }

#track-steps #track-update.updated-track #track-update-actions-resume { display: block; }

#track-steps #track-update.showing-confirmation #track-update-actions-preview, #track-steps #track-update.showing-confirmation #track-update-actions-update, #track-steps #track-update.showing-confirmation #track-update-actions-decline { display: none; }

#track-steps #track-update.showing-confirmation #track-update-actions-notify-me, #track-steps #track-update.showing-confirmation #track-update-actions-never { display: block; }

#track-steps #track-update.failed-update { -webkit-animation: shake 325ms ease-in-out; -moz-animation: shake 325ms ease-in-out; animation: shake 325ms ease-in-out; }

@media screen and (max-width: 1100px) { #track-steps #track-update .grid-50:nth-of-type(1) { padding-right: 5px; }
  #track-steps #track-update .grid-50:nth-of-type(1) { padding-left: 5px; } }

@media screen and (max-width: 900px) { #track-steps #track-update .grid-50 { width: 100%; }
  #track-steps #track-update .grid-50:nth-of-type(1), #track-steps #track-update .grid-50:nth-of-type(2) { padding: 0 15px; }
  #track-steps #track-update .grid-50:nth-of-type(2) { margin-top: 10px; } }

.tracks-controller.show-action .modal.track-changelog-modal h2 { font-size: 20px; color: #384047; margin-bottom: 0; max-width: 92%; }

.tracks-controller.show-action .modal.track-changelog-modal ul { list-style-type: none; list-style-position: outside; margin-left: 22px; }

.tracks-controller.show-action .modal.track-changelog-modal ul li { color: #101417; font-size: 34px; line-height: 0.5; margin-bottom: 12px; padding-left: 3px; }

.tracks-controller.show-action .modal.track-changelog-modal ul li.added { list-style-image: url("/assets/icons/icon-added-5a9853a20e0aa304471ec31e7136afe02bcf4185210eb63af5b5181b6399e7b5.svg"); }

.tracks-controller.show-action .modal.track-changelog-modal ul li.removed { list-style-image: url("/assets/icons/icon-removed-1030dc384f7ba952686113d5a704404ec98fdcbf02322cbf7998b8e7588eaf2d.svg"); }

.tracks-controller.show-action .modal.track-changelog-modal ul li.misc { list-style-image: url("/assets/icons/icon-misc-d27ccb3cf69312a3e1e2207da709ab3b922eeeaafd20ef0833ebf9bbe5b38464.svg"); }

.tracks-controller.show-action .modal.track-changelog-modal ul li span, .tracks-controller.show-action .modal.track-changelog-modal ul li p { font-size: 16px; position: relative; top: -3px; }

.tracks-controller.show-action .modal.track-changelog-modal ul li span strong, .tracks-controller.show-action .modal.track-changelog-modal ul li p strong { font-weight: 700; }

@media screen and (max-width: 679px) { .tracks-controller.show-action .modal.unlocked .button { margin-top: 5px; }
  .tracks-controller.show-action .modal .modal-header { margin-left: -5px; margin-right: -5px; margin-bottom: 20px; }
  .tracks-controller.show-action .modal .modal-header .button.modal-close { top: 10px; }
  .tracks-controller.show-action .modal .modal-footer .icon { display: none; }
  .tracks-controller.show-action .modal h1 .icon { display: none; } }

.tracks-index .view-all { float: right; top: 0; margin: 0; }

@media screen and (min-width: 1300px) { .tracks-index .view-all.view-all-3 { display: none; } }

@media screen and (max-width: 1299px) { .tracks-index .view-all.view-all-2 { display: none; } }

.tracks-index .view-all.view-all-1 { display: none; }

.tracks-index .card-list { margin-bottom: 15px; }

.tracks-index .card-list.collapsed .card:nth-child(n+4) { display: none; }

@media screen and (min-width: 700px) and (max-width: 1299px) { .tracks-index .card-list.collapsed .card:nth-child(n+3) { display: none; } }

@media screen and (max-width: 679px) { .tracks-index .card-list.collapsed .card:nth-child(n+2) { display: none; } }

@media screen and (max-width: 969px) { .tracks-index .card-list.collapsed .card:nth-child(n+3) { display: none; } }

#track-update.track-dialog { margin: 0 auto 30px auto !important; }

.tracks-show .estimate { position: absolute; right: 30px; top: 30px; }

.tracks-show #track-steps > ul { padding-top: 0; }

.tracks-show .tracks-flex-left #track-steps .card .rating-and-student-count { margin-top: 0; }

.tracks-show .track-join-card { float: none; width: 100%; padding: 30px; min-height: 200px; float: none; }

.tracks-show .track-join-card h2 { margin: 0 0 15px 0; font-size: 25px; line-height: 30px; }

.tracks-show .track-retiring { float: none; width: 100%; background-color: black; padding: 20px 30px 20px 65px; text-align: left; position: relative; }

.tracks-show .track-retiring:before, .tracks-show .track-retiring:after { content: " "; display: table; }

.tracks-show .track-retiring:after { clear: both; }

.tracks-show .track-retiring svg { fill: #fff; float: left; width: 18px; height: 18px; margin: 2px 0 0 -34px; }

.tracks-show .track-retiring p { color: #ffffff; margin: 0; }

.tracks-show .track-retiring a { color: #fff; font-weight: 700; }

.tracks-show #track-update { margin-top: 0px; }

@media screen and (max-width: 679px) { .tracks-show #track-update .track-update-actions-update { margin-bottom: 15px; } }

.tracks-show .assessment-survey-card, .tracks-show .assessment-survey-card-small { float: none; width: 100%; padding: 30px; background-color: #3e474f; color: #fff; text-align: center; min-height: 210px; }

.tracks-show .assessment-survey-card h2, .tracks-show .assessment-survey-card-small h2 { color: #fff; font-size: 18px; margin: 0 0 10px 0; }

.tracks-show .assessment-survey-card p, .tracks-show .assessment-survey-card-small p { padding: 0 0 10px 0; }

.tracks-show .assessment-survey-card a, .tracks-show .assessment-survey-card-small a { color: #fff !important; }

.tracks-show .assessment-survey-card-small { text-align: left; min-height: 100px; margin-bottom: 70px; padding-bottom: 10px !important; }

.tracks-show .assessment-survey-card-small:after { bottom: -60px !important; }

.tracks-show .assessment-survey-card-small h2 { font-size: 16px; }

.tracks-show .assessment-survey-card-small h2, .tracks-show .assessment-survey-card-small p { margin: 0; padding: 0; }

.tracks-show .assessment-survey-card-small a { width: 100%; }

@media screen and (max-width: 679px) { .tracks-show .assessment-survey-card-small a { width: initial; margin-top: 20px; } }

.tracks-show .control-container .subnav { border-radius: 6px; border-top: none; }

.tracks-show .track-industry { margin-top: 30px; }

.tracks-show .track-industry li { position: relative; margin-bottom: 20px; }

.tracks-show .track-industry li:last-child { margin: 0; }

.tracks-show .track-industry .industry-icon { position: absolute; height: 38px; width: auto; fill: #8e969d; top: calc(50% - 21px); }

.tracks-show .track-industry .salary-icon { left: 5px; }

.tracks-show .track-industry p { padding-left: 55px; font-size: 16px; }

.tracks-show .track-industry p strong { display: inline !important; font-size: 16px !important; color: #050708 !important; }

.tracks-show .assignment-card-stats { margin: 30px -30px 10px -30px; border-bottom: 1px solid #f0f2f4; }

.tracks-show .track-org-tab { position: relative; border-bottom: 1px solid #f0f2f4; margin: 0px -30px 0px -30px; padding: 0px 20px 10px 30px; }

.tracks-show .track-org-tab .nav { padding: 10px 0; }

.tracks-show .track-org-tab .nav li { margin-right: 15px; }

.tracks-show .track-org-tab .nav li.current { background-color: #4b5658; color: #fff !important; padding: 3px 12px; border-radius: 100px; font-size: 14px; border: none; }

.tracks-show .track-org-tab .nav li.current a { color: #fff; }

.tracks-show .track-org-tab .nav li a { padding: 0; font-size: 14px; }

.tracks-show .track-org-tabtime { position: absolute; right: 30px; top: 11px; color: #587081; }

.tracks-show .track-org-list { margin-top: 0; }

.tracks-show .track-org-list .empty-state { text-align: center !important; display: block; margin: 20px 0; }

.tracks-show .track-org-list .assignment-action-new { display: block; width: 100%; margin-top: 20px; }

.tracks-show .track-org-list h3 { font-size: 14px; margin: 0 -30px; padding: 20px 30px 20px 30px; color: #050708; border-bottom: 1px solid #f0f2f4; background-color: #fdfdfd; }

.tracks-show .track-org-list h3 span { float: right; font-weight: 300; color: #2b363e; }

.tracks-show .track-org-list li { border-bottom: 1px solid #f0f2f4; margin: 0 -30px; position: relative; }

.tracks-show .track-org-list li:last-child { border: none; margin: 0 -30px; }

.tracks-show .track-org-list li:hover { background-color: #fbfafb; }

.tracks-show .track-org-list li .tab-row, .tracks-show .track-org-list li.tab-row { padding: 20px 30px 20px 30px; display: block; }

.tracks-show .track-org-list li .track-assignment-name { font-size: 16px; }

.tracks-show .track-org-list li .track-assignment-pill { font-size: 10px; background-color: #eaeaea; padding: 3px 8px; border-radius: 10px; color: #2b363e; margin-right: 5px; }

.tracks-show .track-org-list li .track-assignment-created, .tracks-show .track-org-list li .track-assignment-team { font-size: 13px; color: #2b363e; }

.tracks-show .track-org-list li .track-assignment-created.no-team, .tracks-show .track-org-list li .track-assignment-team.no-team { font-style: italic; }

.tracks-show .track-org-list li .track-assignment-stat { float: right; font-size: 18px; font-weight: 500; margin-top: -10px; color: #050708; }

.tracks-show .track-org-list li .track-assignment-stat.positive { color: #5fcf80; }

.tracks-show .track-org-list li .track-assignment-stat.negative { color: #ed5a5a; }

.tracks-show .track-org-list li .assignment-action { position: absolute; top: 25px; right: 30px; background-color: transparent; border: 2px solid #ebedef; padding: 0; text-align: center; line-height: 36px; width: 36px; height: 36px; border-radius: 50%; transition: all 300ms 0s ease; }

.tracks-show .track-org-list li .assignment-action:hover svg, .tracks-show .track-org-list li .assignment-action:hover { border-color: #5fcf80; fill: #5fcf80; cursor: pointer; }

.tracks-show .track-org-list li .assignment-action svg { position: relative; top: 1px; width: 16px; height: 16px; fill: #d4d9dd; }

.tracks-show .track-org-list li .assignment-action svg.reload-icon-update { fill: #5fcf80; }

.tracks-show .track-org-list li .assignment-action-report { right: 80px; }

.tracks-show .track-org-list li .assignment-action-report svg { top: 3px; }

.tracks-show .track-org-list li .assignment-action-unlock { right: 130px; }

.tracks-show .track-org-list li .assignment-action-unlock svg { top: 3px; }

.tracks-show .track-org-list li .assignment-action-unchecked { display: inline-block; }

.tracks-show .track-org-list li .assignment-action-checked { display: none; border-color: #5fcf80; }

.tracks-show .track-org-list li .assignment-action-checked svg { top: 3px; fill: #5fcf80; }

.tracks-show .track-org-list li .disabled .assignment-action { display: none; }

.tracks-show .track-org-list li .selected .assignment-action-unchecked { display: none; }

.tracks-show .track-org-list li .selected .assignment-action-checked { display: inline-block; }

.tracks-show .track-overview-progress-total, .tracks-show .track-overview-progress-made { height: 8px; border-radius: 4px; }

.tracks-show .track-overview-progress-total { background: #edeff0; }

.tracks-show .track-overview-progress-made { background-color: #55616c; }

.tracks-show .track-overview-progress-complete { background: #5fcf80; width: 100%; }

.tracks-show .assignment-unlock-modal h3, .tracks-show .assignment-unlock-modal .icon-alert-gray { margin-bottom: 15px; }

.track-overview-progress-info { margin-top: 30px; border-top: 1px solid #f0f2f4; padding-top: 15px; margin-bottom: -15px; font-size: 14px !important; font-size-display: inline !important; }

.track-overview-progress-info strong { color: #1a2126 !important; }

.track-overview-progress-info a { display: block; font-weight: 700; }

@media screen and (min-width: 980px) { .track-overview-progress-info a { float: right; } }

.assignmentreport__assignment-filter { margin: 0 -30px !important; width: calc(100% + 60px); background: #fdfdfd; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid #f0f2f4; }

.assignmentreport__assignment-filter .control-page-items { margin-right: 30px; }

.assignmentreport__assignment-filter .dropdown-parent .dropdown-parent-label { display: block; padding: 20px 0 !important; }

.assignmentreport__assignment-filter li:last-child { margin: 0 !important; }

.assignmentreport__assignment-filter .dropdown-child { top: 50px !important; }

.tracks-flex { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2em; }

.tracks-flex-left, .tracks-flex-right { width: 48%; }

@media screen and (max-width: 680px) { .tracks-flex-left { width: 100%; } }

.tracks-flex-right { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; padding-right: 10px; scrollbar-width: thin; scrollbar-color: #777778 transparent; }

.tracks-flex-right::-webkit-scrollbar { width: 8px; }

.tracks-flex-right::-webkit-scrollbar-track { background: transparent; }

.tracks-flex-right::-webkit-scrollbar-thumb { background-color: #777778; border-radius: 10px; }

@media screen and (max-width: 680px) { .tracks-flex-right { display: none; } }

.tracks-view-all-tracks { font-size: 16px; color: #1a2126; margin-bottom: 15px; }

.tracks-back-arrow { transform: rotate(180deg); vertical-align: sub; height: 18px; width: 18px; filter: brightness(0) saturate(100%) invert(44%) sepia(9%) saturate(155%) hue-rotate(163deg) brightness(95%) contrast(84%); }

.tracks-card-flexbox { display: flex; align-items: center; justify-content: space-between; }

.tracks-list-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5em 0.5em 0.5em 0; margin: 0.5em 0.5em 0.5em 0; border-bottom: 1px solid #cfd3d4; }

.tracks-list-item a { color: #384047; }

.tracks-list-item .circular-border { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; padding: 0; }

.tracks-list-item svg { margin-right: 0; width: 12px; height: 11px; }

.tracks-list-item:last-child { border-bottom: none; }

.tracks-list-item a { margin-right: auto; }

.tracks-list-item span { margin-right: 16px; }
.syllabi-show #syllabus-progress, .syllabi-upcoming #syllabus-progress { background-color: #55616c; display: flex; justify-content: space-between; align-items: center; flex-direction: row; justify-items: center; z-index: 3; width: 100%; border-radius: 4px 4px 0 0; padding: 0 30px; height: 60px; line-height: 60px; }

.syllabi-show #syllabus-progress svg, .syllabi-upcoming #syllabus-progress svg { fill: #fff; height: 18px; width: 18px; margin-right: 15px; }

.syllabi-show #syllabus-progress ul, .syllabi-upcoming #syllabus-progress ul { display: inline-block; margin-bottom: 0; }

.upcoming .syllabi-show #syllabus-progress ul, .completed .syllabi-show #syllabus-progress ul, .conference .syllabi-show #syllabus-progress ul, .upcoming .syllabi-upcoming #syllabus-progress ul, .completed .syllabi-upcoming #syllabus-progress ul, .conference .syllabi-upcoming #syllabus-progress ul { display: none; }

.syllabi-show #syllabus-progress li, .syllabi-upcoming #syllabus-progress li { background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 100px; text-indent: -100px; overflow: hidden; display: block; float: left; height: 10px; margin-right: 10px; width: 10px; }

.syllabi-show #syllabus-progress .current, .syllabi-upcoming #syllabus-progress .current { border-color: #fff; }

.syllabi-show #syllabus-progress .complete, .syllabi-upcoming #syllabus-progress .complete { background-color: #fff; border-color: #fff; }

.syllabi-show #syllabus-progress .estimate, .syllabi-upcoming #syllabus-progress .estimate { color: #fff; float: right; font-size: 14px; font-weight: 700; }

.upcoming .syllabi-show #syllabus-progress .estimate, .upcoming .syllabi-upcoming #syllabus-progress .estimate { display: none; }

.syllabi-show #syllabus-hero, .syllabi-upcoming #syllabus-hero { position: relative; }

.syllabi-show #syllabus-jumpoff, .syllabi-upcoming #syllabus-jumpoff { padding: 0; display: block; text-align: center; background-color: #55616c; background-size: cover; background-position: center center; overflow: hidden; position: relative; min-height: 300px; z-index: 0; }

.syllabi-show #syllabus-jumpoff:before, .syllabi-upcoming #syllabus-jumpoff:before { display: block; background-color: #3f474f; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .95; }

.syllabi-show #syllabus-jumpoff img, .syllabi-upcoming #syllabus-jumpoff img { display: block; margin: 0 auto; opacity: .09; max-width: 100%; max-height: 550px; visibility: hidden; }

.syllabi-show #syllabus-banner, .syllabi-upcoming #syllabus-banner { background-color: #3f474f; padding: 20px 30px 20px 65px; text-align: left; position: relative; }

.syllabi-show #syllabus-banner:before, .syllabi-show #syllabus-banner:after, .syllabi-upcoming #syllabus-banner:before, .syllabi-upcoming #syllabus-banner:after { content: " "; display: table; }

.syllabi-show #syllabus-banner:after, .syllabi-upcoming #syllabus-banner:after { clear: both; }

.syllabi-show #syllabus-banner svg, .syllabi-upcoming #syllabus-banner svg { fill: #fff; float: left; width: 18px; height: 18px; margin: 2px 0 0 -34px; }

.syllabi-show #syllabus-banner p, .syllabi-upcoming #syllabus-banner p { color: #ffffff; margin: 0; }

.syllabi-show #syllabus-banner a, .syllabi-upcoming #syllabus-banner a { color: #fff; font-weight: 700; }

.syllabi-show #syllabus-welcome, .syllabi-upcoming #syllabus-welcome { top: 10%; left: 0; right: 0; position: absolute; z-index: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); }

.syllabi-show #syllabus-welcome h4, .syllabi-upcoming #syllabus-welcome h4 { color: #fff; }

.syllabi-show #syllabus-title, .syllabi-upcoming #syllabus-title { top: 50%; left: 0; right: 0; position: absolute; z-index: 1; padding: 0 15px; text-align: center; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.syllabi-show #syllabus-title h1, .syllabi-upcoming #syllabus-title h1 { color: #fff; }

@media screen and (min-width: 970px) { .syllabi-show #syllabus-title h1, .syllabi-upcoming #syllabus-title h1 { font-size: 34px; lin-height: 46px; margin: 0 0 14px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .syllabi-show #syllabus-title h1, .syllabi-upcoming #syllabus-title h1 { font-size: 28px; line-height: 40px; margin: 0 0 14px; } }

@media screen and (max-width: 679px) { .syllabi-show #syllabus-title h1, .syllabi-upcoming #syllabus-title h1 { font-size: 22px; line-height: 34px; margin: 0 0 8px; } }

.syllabi-show #syllabus-title h2, .syllabi-upcoming #syllabus-title h2 { max-width: 600px; margin: 0 auto 20px; color: #8794a0; }

@media screen and (min-width: 970px) { .syllabi-show #syllabus-title h2, .syllabi-upcoming #syllabus-title h2 { font-size: 18px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .syllabi-show #syllabus-title h2, .syllabi-upcoming #syllabus-title h2 { font-size: 16px; } }

@media screen and (max-width: 679px) { .syllabi-show #syllabus-title h2, .syllabi-upcoming #syllabus-title h2 { font-size: 14px; } }

.syllabi-show #syllabus-title .button, .syllabi-upcoming #syllabus-title .button { margin-bottom: 10px; }

.syllabi-show #syllabus-title .primary, .syllabi-upcoming #syllabus-title .primary { text-shadow: none; color: #55616c; }

.syllabi-show #syllabus-title .primary svg, .syllabi-upcoming #syllabus-title .primary svg { fill: #55616c; }

.syllabi-show #syllabus-title .primary:hover, .syllabi-show #syllabus-title .primary:active, .syllabi-upcoming #syllabus-title .primary:hover, .syllabi-upcoming #syllabus-title .primary:active { background: #fff; border-color: #fff; }

.syllabi-show #syllabus-actions, .syllabi-upcoming #syllabus-actions { border-bottom: 2px solid #f0f2f4; padding: 0 0 20px; margin: -5px 0 30px; }

.syllabi-show #syllabus-actions:before, .syllabi-show #syllabus-actions:after, .syllabi-upcoming #syllabus-actions:before, .syllabi-upcoming #syllabus-actions:after { content: " "; display: table; }

.syllabi-show #syllabus-actions:after, .syllabi-upcoming #syllabus-actions:after { clear: both; }

.syllabi-show #syllabus-actions li, .syllabi-upcoming #syllabus-actions li { margin-bottom: 0; }

.syllabi-show #syllabus-meta, .syllabi-upcoming #syllabus-meta { margin: 0; }

.syllabi-show #syllabus-meta h3, .syllabi-upcoming #syllabus-meta h3 { color: #384047; margin: 0 0 20px; }

.syllabi-show #syllabus-meta p, .syllabi-upcoming #syllabus-meta p { line-height: 1.8; font-size: 14px; margin-bottom: 20px; max-width: 760px; }

.syllabi-show #syllabus-prereqs, .syllabi-upcoming #syllabus-prereqs { margin-bottom: 60px; max-width: 760px; }

.syllabi-show #syllabus-prereqs .queue-content-list, .syllabi-upcoming #syllabus-prereqs .queue-content-list { background-color: #f9fafa; border-radius: 4px; padding: 5px 30px; }

.syllabi-show #syllabus-prereqs .queue-content-list > li:first-child, .syllabi-upcoming #syllabus-prereqs .queue-content-list > li:first-child { border: none; }

.syllabi-show #syllabus-prereqs .queue-content-list > li:last-child, .syllabi-upcoming #syllabus-prereqs .queue-content-list > li:last-child { margin: 0; }

.syllabi-show #syllabus-prereqs strong, .syllabi-upcoming #syllabus-prereqs strong { color: #2b363e; font-size: 12px; }

.syllabi-show #syllabus-prereqs h3, .syllabi-upcoming #syllabus-prereqs h3 { font-size: 14px; color: #384047; line-height: 1.5; margin-bottom: 20px; }

.syllabi-show #syllabus-prereqs .queue-content-meta, .syllabi-upcoming #syllabus-prereqs .queue-content-meta { padding-left: 50px; }

.syllabi-show #syllabus-prereqs .queue-content-title h3, .syllabi-upcoming #syllabus-prereqs .queue-content-title h3 { margin: 0; }

.syllabi-show #syllabus-prereqs .queue-content-title .content-type-icon, .syllabi-upcoming #syllabus-prereqs .queue-content-title .content-type-icon { margin-left: -50px; }

.syllabi-show #syllabus-description, .syllabi-show #syllabus-authors, .syllabi-show #syllabus-learn, .syllabi-show #syllabus-download, .syllabi-upcoming #syllabus-description, .syllabi-upcoming #syllabus-authors, .syllabi-upcoming #syllabus-learn, .syllabi-upcoming #syllabus-download { margin: 0 0 30px; max-width: 760px; }

.syllabi-show #syllabus-description h4, .syllabi-show #syllabus-authors h4, .syllabi-show #syllabus-learn h4, .syllabi-show #syllabus-download h4, .syllabi-upcoming #syllabus-description h4, .syllabi-upcoming #syllabus-authors h4, .syllabi-upcoming #syllabus-learn h4, .syllabi-upcoming #syllabus-download h4 { font-size: 16px; margin-bottom: 15px; }

.syllabi-show #syllabus-description h4, .syllabi-upcoming #syllabus-description h4 { margin: 25px 0 15px; }

.syllabi-show #syllabus-description p, .syllabi-upcoming #syllabus-description p { font-size: 16px; margin: 0; display: inline; }

.syllabi-show #syllabus-description a, .syllabi-upcoming #syllabus-description a { color: #3f8abf; font-weight: 700; }

.syllabi-show #syllabus-authors li, .syllabi-upcoming #syllabus-authors li { list-style-type: none; border-bottom: 1px solid #f0f2f4; padding: 0 0 30px 0; margin-bottom: 30px; }

.syllabi-show #syllabus-authors li:before, .syllabi-show #syllabus-authors li:after, .syllabi-upcoming #syllabus-authors li:before, .syllabi-upcoming #syllabus-authors li:after { content: " "; display: table; }

.syllabi-show #syllabus-authors li:after, .syllabi-upcoming #syllabus-authors li:after { clear: both; }

.syllabi-show #syllabus-authors li:last-child, .syllabi-upcoming #syllabus-authors li:last-child { border: none; }

.syllabi-show #syllabus-authors .instructor-avatar, .syllabi-upcoming #syllabus-authors .instructor-avatar { width: 60px; height: 60px; display: block; float: right; margin: 0 0 15px 15px; background-color: #d4d9dd; background-position: center; background-size: auto 60px; border-radius: 60px; }

.syllabi-show #syllabus-authors .instructor-avatar img, .syllabi-upcoming #syllabus-authors .instructor-avatar img { display: none; }

.syllabi-show #syllabus-authors h4, .syllabi-upcoming #syllabus-authors h4 { font-size: 14px; font-weight: 700; color: #384047; margin-bottom: 5px; }

.syllabi-show #syllabus-authors p, .syllabi-upcoming #syllabus-authors p { font-size: 14px; color: #1a2126; margin: 0; }

.syllabi-show #syllabus-download .note, .syllabi-upcoming #syllabus-download .note { font-size: 12px; color: #2b363e; }

.syllabi-show #syllabus-download .note a, .syllabi-upcoming #syllabus-download .note a { font-weight: 700; color: #55616c; }

.syllabi-show #syllabus-download .button, .syllabi-upcoming #syllabus-download .button { color: #55616c; }

.syllabi-show #syllabus-stages, .syllabi-upcoming #syllabus-stages { max-width: 760px; }

.syllabi-show #syllabus-stages .loading, .syllabi-upcoming #syllabus-stages .loading { padding: 60px 0; margin: 0; text-align: center; }

.syllabi-show #syllabus-stages .stage-meta, .syllabi-upcoming #syllabus-stages .stage-meta { padding: 20px 0 0 80px; margin-bottom: 50px; }

.syllabi-show #syllabus-stages .stage-meta .tags, .syllabi-upcoming #syllabus-stages .stage-meta .tags { margin-bottom: 9px; }

.syllabi-show #syllabus-stages .stage-badge, .syllabi-upcoming #syllabus-stages .stage-badge { float: left; margin-left: -80px; width: 60px; }

.syllabi-show #syllabus-stages .radial-progress, .syllabi-upcoming #syllabus-stages .radial-progress { float: left; margin-left: -80px; width: 60px; height: 60px; cursor: pointer; line-height: 60px; }

.syllabi-show #syllabus-stages .radial-progress:after, .syllabi-upcoming #syllabus-stages .radial-progress:after { border-width: 0; }

.syllabi-show #syllabus-stages .radial-progress .progress, .syllabi-upcoming #syllabus-stages .radial-progress .progress { font-size: 14px; color: #2b363e; top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.syllabi-show #syllabus-stages .radial-progress .progress:after, .syllabi-upcoming #syllabus-stages .radial-progress .progress:after { border-width: 4px; }

.topic-ai.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-ai.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-ai.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-ai.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #733A88; }

.topic-back-end.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-back-end.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-back-end.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-back-end.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #008297; }

.topic-data.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-data.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-data.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-data.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #9F4B84; }

.topic-design.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-design.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-design.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-design.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #4a4290; }

.topic-experimental.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-experimental.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-experimental.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-experimental.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #733a88; }

.topic-front-end.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-front-end.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-front-end.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-front-end.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #3659a2; }

.topic-fundamentals.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-fundamentals.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-fundamentals.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-fundamentals.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #9b3b5a; }

.topic-mobile.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-mobile.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-mobile.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-mobile.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #30826C; }

.topic-internal.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-internal.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-internal.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-internal.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #55616c; }

.topic-foundations.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-foundations.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-foundations.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-foundations.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #004e61; }

.topic-undefined.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-undefined.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-undefined.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-undefined.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #55616c; }

.topic-college-credit.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-college-credit.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-college-credit.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-college-credit.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #3887c8; }

.topic-no-code.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-no-code.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-no-code.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-no-code.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #31AF7F; }

.topic-security.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-security.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-security.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-security.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #409BE9; }

.topic-game-development.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-game-development.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-game-development.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-game-development.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #856fc4; }

.topic-treehouse-resources.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-treehouse-resources.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-treehouse-resources.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-treehouse-resources.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #5fcf80; }

.topic-coding-for-kids.syllabi-show #syllabus-stages .radial-progress .foreground, .topic-coding-for-kids.syllabi-show #syllabus-stages .radial-progress.completed .background, .topic-coding-for-kids.syllabi-upcoming #syllabus-stages .radial-progress .foreground, .topic-coding-for-kids.syllabi-upcoming #syllabus-stages .radial-progress.completed .background { stroke: #F36C27; }

.syllabi-show #syllabus-stages .radial-progress .check-icon, .syllabi-show #syllabus-stages .radial-progress .right-arrow-icon, .syllabi-upcoming #syllabus-stages .radial-progress .check-icon, .syllabi-upcoming #syllabus-stages .radial-progress .right-arrow-icon { top: 50%; left: 50%; margin: -9px 0 0 -9px; width: 18px; height: auto; }

.syllabi-show #syllabus-stages .radial-progress .check-icon, .syllabi-upcoming #syllabus-stages .radial-progress .check-icon { margin-top: -7px; }

.syllabi-show #syllabus-stages h2, .syllabi-upcoming #syllabus-stages h2 { font-size: 18px; margin-bottom: 10px; }

.syllabi-show #syllabus-stages > p, .syllabi-upcoming #syllabus-stages > p { margin-bottom: 30px; }

.syllabi-show #syllabus-stages .steps-trigger, .syllabi-upcoming #syllabus-stages .steps-trigger { font-size: 14px; font-weight: 700; display: block; margin-bottom: 20px; }

.syllabi-show #syllabus-stages .selected .chevron-icon, .syllabi-upcoming #syllabus-stages .selected .chevron-icon { margin-top: -1px; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.syllabi-show #syllabus-stages .chevron-icon, .syllabi-upcoming #syllabus-stages .chevron-icon { width: 12px; margin: 0 4px 0 0; transition: none; }

.syllabi-show #syllabus-stages .steps-list > li, .syllabi-upcoming #syllabus-stages .steps-list > li { border-top: 1px solid #e8ebed; }

.syllabi-show #syllabus-stages .steps-list a, .syllabi-upcoming #syllabus-stages .steps-list a { display: block; padding: 15px 0 15px 40px; transition: all .2s; }

.syllabi-show #syllabus-stages .steps-list a:hover h4, .syllabi-upcoming #syllabus-stages .steps-list a:hover h4 { color: #384047; }

.syllabi-show #syllabus-stages .steps-list a > p, .syllabi-upcoming #syllabus-stages .steps-list a > p { color: #2b363e; margin: 0; line-height: 1; }

.syllabi-show #syllabus-stages .steps-list h4, .syllabi-upcoming #syllabus-stages .steps-list h4 { font-size: 14px; color: #101417; margin: 0 0 8px; }

.syllabi-show #syllabus-stages .steps-list svg, .syllabi-upcoming #syllabus-stages .steps-list svg { float: left; margin: 4px 0 0 -40px; width: 22px; height: 22px; }

.syllabi-show #syllabus-stages .steps-list .extra-credit, .syllabi-upcoming #syllabus-stages .steps-list .extra-credit { padding: 15px 0 15px 40px; }

.syllabi-show #syllabus-stages .steps-list .extra-credit li, .syllabi-upcoming #syllabus-stages .steps-list .extra-credit li { font-size: 12px; }

.syllabi-show #syllabus-stages .steps-list .extra-credit svg, .syllabi-upcoming #syllabus-stages .steps-list .extra-credit svg { width: 25px; height: auto; -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }

.syllabi-show #syllabus-stages .steps-list .extra-credit p, .syllabi-upcoming #syllabus-stages .steps-list .extra-credit p { line-height: 1.6; }

.syllabi-show #syllabus-stages .steps-list .extra-credit .markdown-zone > p a, .syllabi-upcoming #syllabus-stages .steps-list .extra-credit .markdown-zone > p a { display: inline-block; padding: 0; }

.syllabi-show #syllabus-stages .steps-list .completed h4, .syllabi-upcoming #syllabus-stages .steps-list .completed h4 { color: #2b363e; }

.syllabi-show svg.has-topic-fill-on-parent-hover, .syllabi-upcoming svg.has-topic-fill-on-parent-hover { fill: #8e969d; }

.queue-content-list { margin-bottom: 15px; }

.search-loading .queue-content-list { opacity: .5; }

.queue-content-list > li { display: block; border-top: 1px solid #f0f2f4; }

.queue-content-list > li:first-child { border-top: 1px solid #d4d9dd; }

.queue-content-list > li:last-child { margin-bottom: 5px; }

.queue-content-list > li.truncated { display: none; }

.queue-content-list > li .tooltip { display: none; }

.queue-content-list > li:hover .tooltip { display: block; width: 400px; }

.queue-content { position: relative; transition: opacity .2s; }

.queue-content .queue-content-meta { display: block; color: #384047; line-height: 68px; height: 70px; padding: 0 70px 0 50px; position: relative; }

.topic-ai.queue-content .queue-content-meta:hover .content-type-icon { fill: #733A88; }

.topic-back-end.queue-content .queue-content-meta:hover .content-type-icon { fill: #008297; }

.topic-data.queue-content .queue-content-meta:hover .content-type-icon { fill: #9F4B84; }

.topic-design.queue-content .queue-content-meta:hover .content-type-icon { fill: #4a4290; }

.topic-experimental.queue-content .queue-content-meta:hover .content-type-icon { fill: #733a88; }

.topic-front-end.queue-content .queue-content-meta:hover .content-type-icon { fill: #3659a2; }

.topic-fundamentals.queue-content .queue-content-meta:hover .content-type-icon { fill: #9b3b5a; }

.topic-mobile.queue-content .queue-content-meta:hover .content-type-icon { fill: #30826C; }

.topic-internal.queue-content .queue-content-meta:hover .content-type-icon { fill: #55616c; }

.topic-foundations.queue-content .queue-content-meta:hover .content-type-icon { fill: #004e61; }

.topic-undefined.queue-content .queue-content-meta:hover .content-type-icon { fill: #55616c; }

.topic-college-credit.queue-content .queue-content-meta:hover .content-type-icon { fill: #3887c8; }

.topic-no-code.queue-content .queue-content-meta:hover .content-type-icon { fill: #31AF7F; }

.topic-security.queue-content .queue-content-meta:hover .content-type-icon { fill: #409BE9; }

.topic-game-development.queue-content .queue-content-meta:hover .content-type-icon { fill: #856fc4; }

.topic-treehouse-resources.queue-content .queue-content-meta:hover .content-type-icon { fill: #5fcf80; }

.topic-coding-for-kids.queue-content .queue-content-meta:hover .content-type-icon { fill: #F36C27; }

.queue-content .queue-content-meta:hover .right-arrow-icon { margin-left: 0; opacity: 1; }

.queue-content .queue-content-meta:hover > span { opacity: 1; }

.queued .queue-content .queue-content-meta { opacity: .5; }

.queue-content .status { position: absolute; right: 0; top: 27px; font-size: 12px; font-weight: 700; color: #2b363e; }

.topic-ai.queue-content .status svg { fill: #733A88; }

.topic-back-end.queue-content .status svg { fill: #008297; }

.topic-data.queue-content .status svg { fill: #9F4B84; }

.topic-design.queue-content .status svg { fill: #4a4290; }

.topic-experimental.queue-content .status svg { fill: #733a88; }

.topic-front-end.queue-content .status svg { fill: #3659a2; }

.topic-fundamentals.queue-content .status svg { fill: #9b3b5a; }

.topic-mobile.queue-content .status svg { fill: #30826C; }

.topic-internal.queue-content .status svg { fill: #55616c; }

.topic-foundations.queue-content .status svg { fill: #004e61; }

.topic-undefined.queue-content .status svg { fill: #55616c; }

.topic-college-credit.queue-content .status svg { fill: #3887c8; }

.topic-no-code.queue-content .status svg { fill: #31AF7F; }

.topic-security.queue-content .status svg { fill: #409BE9; }

.topic-game-development.queue-content .status svg { fill: #856fc4; }

.topic-treehouse-resources.queue-content .status svg { fill: #5fcf80; }

.topic-coding-for-kids.queue-content .status svg { fill: #F36C27; }

.queue-content .queue-content-title { display: inline-block; vertical-align: middle; line-height: 1.5; width: 100%; }

.queue-content .queue-content-title:hover p span { width: auto; display: inline; opacity: 1; }

.queue-content .queue-content-title .content-step-icon, .queue-content .queue-content-title .content-type-icon, .queue-content .queue-content-title .loading-icon { fill: #8e969d; top: 50%; width: 18px; height: auto; position: absolute; margin: -9px 0 0 -40px; }

.topic-ai.queue-content .queue-content-title .complete-outline-icon { fill: #733A88; }

.topic-back-end.queue-content .queue-content-title .complete-outline-icon { fill: #008297; }

.topic-data.queue-content .queue-content-title .complete-outline-icon { fill: #9F4B84; }

.topic-design.queue-content .queue-content-title .complete-outline-icon { fill: #4a4290; }

.topic-experimental.queue-content .queue-content-title .complete-outline-icon { fill: #733a88; }

.topic-front-end.queue-content .queue-content-title .complete-outline-icon { fill: #3659a2; }

.topic-fundamentals.queue-content .queue-content-title .complete-outline-icon { fill: #9b3b5a; }

.topic-mobile.queue-content .queue-content-title .complete-outline-icon { fill: #30826C; }

.topic-internal.queue-content .queue-content-title .complete-outline-icon { fill: #55616c; }

.topic-foundations.queue-content .queue-content-title .complete-outline-icon { fill: #004e61; }

.topic-undefined.queue-content .queue-content-title .complete-outline-icon { fill: #55616c; }

.topic-college-credit.queue-content .queue-content-title .complete-outline-icon { fill: #3887c8; }

.topic-no-code.queue-content .queue-content-title .complete-outline-icon { fill: #31AF7F; }

.topic-security.queue-content .queue-content-title .complete-outline-icon { fill: #409BE9; }

.topic-game-development.queue-content .queue-content-title .complete-outline-icon { fill: #856fc4; }

.topic-treehouse-resources.queue-content .queue-content-title .complete-outline-icon { fill: #5fcf80; }

.topic-coding-for-kids.queue-content .queue-content-title .complete-outline-icon { fill: #F36C27; }

.queue-content .queue-content-title h3 { font-size: 14px; font-weight: 700; }

.queue-content .queue-content-title p { font-size: 12px; color: #2b363e; }

.queue-content .queue-content-title p span { width: 0; display: inline-block; vertical-align: bottom; opacity: 0; transition: opacity .4s; }

.queue-content .queue-content-title p strong { font-weight: 700; }

.topic-ai.queue-content .queue-content-title p strong { color: #733A88; }

.topic-back-end.queue-content .queue-content-title p strong { color: #008297; }

.topic-data.queue-content .queue-content-title p strong { color: #9F4B84; }

.topic-design.queue-content .queue-content-title p strong { color: #4a4290; }

.topic-experimental.queue-content .queue-content-title p strong { color: #733a88; }

.topic-front-end.queue-content .queue-content-title p strong { color: #3659a2; }

.topic-fundamentals.queue-content .queue-content-title p strong { color: #9b3b5a; }

.topic-mobile.queue-content .queue-content-title p strong { color: #30826C; }

.topic-internal.queue-content .queue-content-title p strong { color: #55616c; }

.topic-foundations.queue-content .queue-content-title p strong { color: #004e61; }

.topic-undefined.queue-content .queue-content-title p strong { color: #55616c; }

.topic-college-credit.queue-content .queue-content-title p strong { color: #3887c8; }

.topic-no-code.queue-content .queue-content-title p strong { color: #31AF7F; }

.topic-security.queue-content .queue-content-title p strong { color: #409BE9; }

.topic-game-development.queue-content .queue-content-title p strong { color: #856fc4; }

.topic-treehouse-resources.queue-content .queue-content-title p strong { color: #5fcf80; }

.topic-coding-for-kids.queue-content .queue-content-title p strong { color: #F36C27; }

.queue-content .queue-content-title h3, .queue-content .queue-content-title p, .queue-content .queue-content-title span { margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.queue-content .queue-content-title .right-arrow-icon { fill: #d4d9dd; margin-right: 5px; margin-left: -13px; width: 8px; height: 8px; opacity: 0; transition: margin-left .2s, opacity .2s; }

.queue-content-actions { position: absolute; right: 0; top: 0; bottom: 0; line-height: 70px; }

.queue-content-actions > li { display: inline-block; margin-left: 5px; }

.queue-content-actions li.bookmarkable .bookmark { display: block; }

.queue-content-actions li.bookmarkable .bookmark:before, .queue-content-actions li.bookmarkable .bookmark:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.queue-content-actions li.bookmarkable .bookmark:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.queue-content-actions li.bookmarkable .bookmark:after { content: "Bookmark"; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.queue-content-actions li.bookmarkable .bookmark:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.queue-content-actions li.bookmarkable .bookmark:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.queue-content-actions li.bookmarkable .unbookmark { display: none; }

.queue-content-actions li.bookmarkable.bookmarked .bookmark { display: none; }

.queue-content-actions li.bookmarkable.bookmarked .unbookmark { display: block; }

.queue-content-actions li.bookmarkable.bookmarked .unbookmark:before, .queue-content-actions li.bookmarkable.bookmarked .unbookmark:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.queue-content-actions li.bookmarkable.bookmarked .unbookmark:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.queue-content-actions li.bookmarkable.bookmarked .unbookmark:after { content: "Remove Bookmark"; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.queue-content-actions li.bookmarkable.bookmarked .unbookmark:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.queue-content-actions li.bookmarkable.bookmarked .unbookmark:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.queue-content-actions li.previewable .preview { line-height: 19px; }

.queue-content-actions li.previewable .preview:before, .queue-content-actions li.previewable .preview:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.queue-content-actions li.previewable .preview:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.queue-content-actions li.previewable .preview:after { content: "Learn more"; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.queue-content-actions li.previewable .preview:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.queue-content-actions li.previewable .preview:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.queue-content-actions li > a, .queue-content-actions li > span { width: 26px; height: 26px; border: 2px solid #d4d9dd; border-radius: 26px; box-sizing: border-box; vertical-align: middle; line-height: 20px; text-align: center; position: relative; display: inline-block; fill: #8e969d; transition: border-color .2s, fill .2s; }

.topic-ai.queue-content-actions li > a:hover, .topic-ai.queue-content-actions li > a.unbookmark, .topic-ai.queue-content-actions li > span:hover, .topic-ai.queue-content-actions li > span.unbookmark { border-color: #733A88; }

.topic-back-end.queue-content-actions li > a:hover, .topic-back-end.queue-content-actions li > a.unbookmark, .topic-back-end.queue-content-actions li > span:hover, .topic-back-end.queue-content-actions li > span.unbookmark { border-color: #008297; }

.topic-data.queue-content-actions li > a:hover, .topic-data.queue-content-actions li > a.unbookmark, .topic-data.queue-content-actions li > span:hover, .topic-data.queue-content-actions li > span.unbookmark { border-color: #9F4B84; }

.topic-design.queue-content-actions li > a:hover, .topic-design.queue-content-actions li > a.unbookmark, .topic-design.queue-content-actions li > span:hover, .topic-design.queue-content-actions li > span.unbookmark { border-color: #4a4290; }

.topic-experimental.queue-content-actions li > a:hover, .topic-experimental.queue-content-actions li > a.unbookmark, .topic-experimental.queue-content-actions li > span:hover, .topic-experimental.queue-content-actions li > span.unbookmark { border-color: #733a88; }

.topic-front-end.queue-content-actions li > a:hover, .topic-front-end.queue-content-actions li > a.unbookmark, .topic-front-end.queue-content-actions li > span:hover, .topic-front-end.queue-content-actions li > span.unbookmark { border-color: #3659a2; }

.topic-fundamentals.queue-content-actions li > a:hover, .topic-fundamentals.queue-content-actions li > a.unbookmark, .topic-fundamentals.queue-content-actions li > span:hover, .topic-fundamentals.queue-content-actions li > span.unbookmark { border-color: #9b3b5a; }

.topic-mobile.queue-content-actions li > a:hover, .topic-mobile.queue-content-actions li > a.unbookmark, .topic-mobile.queue-content-actions li > span:hover, .topic-mobile.queue-content-actions li > span.unbookmark { border-color: #30826C; }

.topic-internal.queue-content-actions li > a:hover, .topic-internal.queue-content-actions li > a.unbookmark, .topic-internal.queue-content-actions li > span:hover, .topic-internal.queue-content-actions li > span.unbookmark { border-color: #55616c; }

.topic-foundations.queue-content-actions li > a:hover, .topic-foundations.queue-content-actions li > a.unbookmark, .topic-foundations.queue-content-actions li > span:hover, .topic-foundations.queue-content-actions li > span.unbookmark { border-color: #004e61; }

.topic-undefined.queue-content-actions li > a:hover, .topic-undefined.queue-content-actions li > a.unbookmark, .topic-undefined.queue-content-actions li > span:hover, .topic-undefined.queue-content-actions li > span.unbookmark { border-color: #55616c; }

.topic-college-credit.queue-content-actions li > a:hover, .topic-college-credit.queue-content-actions li > a.unbookmark, .topic-college-credit.queue-content-actions li > span:hover, .topic-college-credit.queue-content-actions li > span.unbookmark { border-color: #3887c8; }

.topic-no-code.queue-content-actions li > a:hover, .topic-no-code.queue-content-actions li > a.unbookmark, .topic-no-code.queue-content-actions li > span:hover, .topic-no-code.queue-content-actions li > span.unbookmark { border-color: #31AF7F; }

.topic-security.queue-content-actions li > a:hover, .topic-security.queue-content-actions li > a.unbookmark, .topic-security.queue-content-actions li > span:hover, .topic-security.queue-content-actions li > span.unbookmark { border-color: #409BE9; }

.topic-game-development.queue-content-actions li > a:hover, .topic-game-development.queue-content-actions li > a.unbookmark, .topic-game-development.queue-content-actions li > span:hover, .topic-game-development.queue-content-actions li > span.unbookmark { border-color: #856fc4; }

.topic-treehouse-resources.queue-content-actions li > a:hover, .topic-treehouse-resources.queue-content-actions li > a.unbookmark, .topic-treehouse-resources.queue-content-actions li > span:hover, .topic-treehouse-resources.queue-content-actions li > span.unbookmark { border-color: #5fcf80; }

.topic-coding-for-kids.queue-content-actions li > a:hover, .topic-coding-for-kids.queue-content-actions li > a.unbookmark, .topic-coding-for-kids.queue-content-actions li > span:hover, .topic-coding-for-kids.queue-content-actions li > span.unbookmark { border-color: #F36C27; }

.topic-ai.queue-content-actions li > a:hover svg, .topic-ai.queue-content-actions li > a.unbookmark svg, .topic-ai.queue-content-actions li > span:hover svg, .topic-ai.queue-content-actions li > span.unbookmark svg { fill: #733A88; }

.topic-back-end.queue-content-actions li > a:hover svg, .topic-back-end.queue-content-actions li > a.unbookmark svg, .topic-back-end.queue-content-actions li > span:hover svg, .topic-back-end.queue-content-actions li > span.unbookmark svg { fill: #008297; }

.topic-data.queue-content-actions li > a:hover svg, .topic-data.queue-content-actions li > a.unbookmark svg, .topic-data.queue-content-actions li > span:hover svg, .topic-data.queue-content-actions li > span.unbookmark svg { fill: #9F4B84; }

.topic-design.queue-content-actions li > a:hover svg, .topic-design.queue-content-actions li > a.unbookmark svg, .topic-design.queue-content-actions li > span:hover svg, .topic-design.queue-content-actions li > span.unbookmark svg { fill: #4a4290; }

.topic-experimental.queue-content-actions li > a:hover svg, .topic-experimental.queue-content-actions li > a.unbookmark svg, .topic-experimental.queue-content-actions li > span:hover svg, .topic-experimental.queue-content-actions li > span.unbookmark svg { fill: #733a88; }

.topic-front-end.queue-content-actions li > a:hover svg, .topic-front-end.queue-content-actions li > a.unbookmark svg, .topic-front-end.queue-content-actions li > span:hover svg, .topic-front-end.queue-content-actions li > span.unbookmark svg { fill: #3659a2; }

.topic-fundamentals.queue-content-actions li > a:hover svg, .topic-fundamentals.queue-content-actions li > a.unbookmark svg, .topic-fundamentals.queue-content-actions li > span:hover svg, .topic-fundamentals.queue-content-actions li > span.unbookmark svg { fill: #9b3b5a; }

.topic-mobile.queue-content-actions li > a:hover svg, .topic-mobile.queue-content-actions li > a.unbookmark svg, .topic-mobile.queue-content-actions li > span:hover svg, .topic-mobile.queue-content-actions li > span.unbookmark svg { fill: #30826C; }

.topic-internal.queue-content-actions li > a:hover svg, .topic-internal.queue-content-actions li > a.unbookmark svg, .topic-internal.queue-content-actions li > span:hover svg, .topic-internal.queue-content-actions li > span.unbookmark svg { fill: #55616c; }

.topic-foundations.queue-content-actions li > a:hover svg, .topic-foundations.queue-content-actions li > a.unbookmark svg, .topic-foundations.queue-content-actions li > span:hover svg, .topic-foundations.queue-content-actions li > span.unbookmark svg { fill: #004e61; }

.topic-undefined.queue-content-actions li > a:hover svg, .topic-undefined.queue-content-actions li > a.unbookmark svg, .topic-undefined.queue-content-actions li > span:hover svg, .topic-undefined.queue-content-actions li > span.unbookmark svg { fill: #55616c; }

.topic-college-credit.queue-content-actions li > a:hover svg, .topic-college-credit.queue-content-actions li > a.unbookmark svg, .topic-college-credit.queue-content-actions li > span:hover svg, .topic-college-credit.queue-content-actions li > span.unbookmark svg { fill: #3887c8; }

.topic-no-code.queue-content-actions li > a:hover svg, .topic-no-code.queue-content-actions li > a.unbookmark svg, .topic-no-code.queue-content-actions li > span:hover svg, .topic-no-code.queue-content-actions li > span.unbookmark svg { fill: #31AF7F; }

.topic-security.queue-content-actions li > a:hover svg, .topic-security.queue-content-actions li > a.unbookmark svg, .topic-security.queue-content-actions li > span:hover svg, .topic-security.queue-content-actions li > span.unbookmark svg { fill: #409BE9; }

.topic-game-development.queue-content-actions li > a:hover svg, .topic-game-development.queue-content-actions li > a.unbookmark svg, .topic-game-development.queue-content-actions li > span:hover svg, .topic-game-development.queue-content-actions li > span.unbookmark svg { fill: #856fc4; }

.topic-treehouse-resources.queue-content-actions li > a:hover svg, .topic-treehouse-resources.queue-content-actions li > a.unbookmark svg, .topic-treehouse-resources.queue-content-actions li > span:hover svg, .topic-treehouse-resources.queue-content-actions li > span.unbookmark svg { fill: #5fcf80; }

.topic-coding-for-kids.queue-content-actions li > a:hover svg, .topic-coding-for-kids.queue-content-actions li > a.unbookmark svg, .topic-coding-for-kids.queue-content-actions li > span:hover svg, .topic-coding-for-kids.queue-content-actions li > span.unbookmark svg { fill: #F36C27; }

.queue-content-actions li .loading { display: none; }

.queue-content-actions li.loading > a { display: none !important; }

.queue-content-actions li.loading .loading { display: inline-block; }

.queue-content-actions.selected > a svg { fill: #384047; }

.queue-content-actions > a { display: block; line-height: 1; height: 100%; }

.queue-content-actions > a:hover svg { fill: #384047; }

.queue-content-actions > a svg { width: 18px; height: 18px; fill: #d4d9dd; margin-top: 33px; }

.queue-content-actions svg { vertical-align: middle; width: 14px; height: 14px; top: -1px; position: relative; }

.syllabus-assessment-anchor { position: absolute; margin: -4.15em; }

.syllabus-assessment-results { background: #f9fafa; width: 100%; padding: 10px 20px; border-radius: 4px; margin-bottom: 30px; }

.syllabus-assessment-results p { font-size: 14px !important; }

@media screen and (max-width: 679px) { .syllabus-assessment-results p { display: block !important; } }

.syllabus-assessment-results .syllabus-assessment-results-indicator { float: right; color: #5fcf80; position: relative; font-weight: 700; }

@media screen and (max-width: 679px) { .syllabus-assessment-results .syllabus-assessment-results-indicator { float: none; } }

.syllabus-assessment-results .syllabus-assessment-results-failed { color: #1a2126; }
.content-assessment-modal { width: 100%; margin: 0 auto; max-width: 690px; }

.content-assessment-modal .card-box { padding-bottom: 30px; }

.content-assessment-modal .card-progress { padding-left: 0; }

.content-assessment-modal .card-progress svg#assessment_rocket { width: 70%; max-width: 420px; }

.content-assessment-modal .card-meta { margin-bottom: 25px; }

.content-assessment-modal .card-meta .card-type::after { content: "Beta"; background: #edeff0; padding: 2px 8px 3px; font-size: 10px; margin-left: 8px; border-radius: 4px; }

.content-assessment-modal .card-description svg { margin-right: 10px; vertical-align: middle; height: 24px; width: 24px; fill: #1a2126; }

.content-assessment-modal .actions { margin-top: 30px; }

@media screen and (max-width: 969px) { .content-assessment-modal .actions a { width: 100%; }
  .content-assessment-modal .actions a:first-child { margin-bottom: 10px; } }
.techdegree-upgrade-card { text-align: center; }

.techdegree-upgrade-card h2 { margin-bottom: 10px; line-height: 1.2; }

.techdegree-upgrade-card p { font-size: 15px; line-height: 1.4; }

.techdegree-upgrade-card p a { font-weight: 500; }

.techdegree-upgrade-card p a svg { padding-top: 3px; }

.techdegree-upgrade-card hr { margin: 15px 0; }

.techdegree-upgrade-card h3 { text-align: left; margin-bottom: 10px; font-size: 16px; }

.techdegree-upgrade-card-seal { display: inline-block; width: 130px; height: 130px; margin: -15px auto 0  auto; }

.techdegree-upgrade-card-messaging { display: inline-block; margin: 5px 0 0 15px; width: 82%; text-align: left; }

.techdegree-upgrade-card-progress-bar-background { width: 100%; border-radius: 10px; height: 10px; background-color: #edeff0; }

.techdegree-upgrade-card-progress-bar-progress { border-radius: 10px; background-color: #55616c; height: 10px; }

.techdegree-upgrade-card .button { margin-top: 10px; }
.mixed-box #question-feedback-form-header { padding-top: 25px; padding-bottom: 25px !important; }

.mixed-box #question-feedback-form-header h2 { font-size: 18px; line-height: 20px; }

.mixed-box #question-feedback-form-header p { margin-bottom: 0; }

.mixed-box #question-feedback-form-header .modal-close { right: 30px; top: 20px; }

.mixed-box #question-feedback-form-header .alert-banner:not(.fixed) { margin-bottom: 0px !important; margin-top: 20px; }

.mixed-box #question-feedback-form { padding-top: 0px !important; border-radius: 0 0 4px 4px; }

.mixed-box #question-feedback-form p { margin-bottom: 0; }

.mixed-box #question-feedback-form .form-element { height: 100px !important; margin-top: 0px; margin-bottom: 30px; background: transparent !important; }

.mixed-box #question-feedback-form textarea { min-height: 100px; }

.mixed-box #question-feedback-form li { margin: 0 0 5px 2px !important; }

.mixed-box #question-feedback-form .question-feedback-form-describe { margin-top: 20px; margin-bottom: 12px; }

.mixed-box #question-feedback-form .alert-text { color: #ed5a5a; }

.mixed-box #question-feedback-success-content { margin-bottom: 60px; margin-top: 30px; }

.mixed-box #question-feedback-success-content p { font-size: 16px !important; line-height: 2em; }

.mixed-box #question-feedback-success-content svg { width: 140px; margin-bottom: 20px; }
.step-completed #quiz-question, .step-overlay-loading #quiz-question { display: none; }

.has-stage-progress #quiz-question { border-radius: 0; }

#quiz-question img { max-width: 100%; margin: 0 auto 28px auto; display: block; }

#quiz-question .mejs-container { margin-bottom: 28px; }

#quiz-question h1.question-count { display: block; font-weight: 400; margin-bottom: 10px; color: #2b363e; }

@media screen and (min-width: 680px) { #quiz-question h1.question-count { font-size: 14px; } }

@media screen and (max-width: 679px) { #quiz-question h1.question-count { font-size: 13px; } }

#quiz-question .quiz-question-text { margin: 0 0 -5px; }

@media screen and (min-width: 680px) { #quiz-question .quiz-question-text { font-size: 18px; } }

@media screen and (max-width: 679px) { #quiz-question .quiz-question-text { font-size: 14px; } }

#quiz-question .quiz-question-text p { font-size: inherit; color: #384047; font-weight: 700; margin: 0; }

#quiz-question .quiz-question-text p a { transition: color 0.3s ease; }

.topic-ai #quiz-question .quiz-question-text p a { color: #733A88; }

.topic-back-end #quiz-question .quiz-question-text p a { color: #008297; }

.topic-data #quiz-question .quiz-question-text p a { color: #9F4B84; }

.topic-design #quiz-question .quiz-question-text p a { color: #4a4290; }

.topic-experimental #quiz-question .quiz-question-text p a { color: #733a88; }

.topic-front-end #quiz-question .quiz-question-text p a { color: #3659a2; }

.topic-fundamentals #quiz-question .quiz-question-text p a { color: #9b3b5a; }

.topic-mobile #quiz-question .quiz-question-text p a { color: #30826C; }

.topic-internal #quiz-question .quiz-question-text p a { color: #55616c; }

.topic-foundations #quiz-question .quiz-question-text p a { color: #004e61; }

.topic-undefined #quiz-question .quiz-question-text p a { color: #55616c; }

.topic-college-credit #quiz-question .quiz-question-text p a { color: #3887c8; }

.topic-no-code #quiz-question .quiz-question-text p a { color: #31AF7F; }

.topic-security #quiz-question .quiz-question-text p a { color: #409BE9; }

.topic-game-development #quiz-question .quiz-question-text p a { color: #856fc4; }

.topic-treehouse-resources #quiz-question .quiz-question-text p a { color: #5fcf80; }

.topic-coding-for-kids #quiz-question .quiz-question-text p a { color: #F36C27; }

.topic-ai #quiz-question .quiz-question-text p a:hover { color: #552b64; }

.topic-back-end #quiz-question .quiz-question-text p a:hover { color: #005664; }

.topic-data #quiz-question .quiz-question-text p a:hover { color: #7c3b67; }

.topic-design #quiz-question .quiz-question-text p a:hover { color: #38326d; }

.topic-experimental #quiz-question .quiz-question-text p a:hover { color: #552b64; }

.topic-front-end #quiz-question .quiz-question-text p a:hover { color: #29447c; }

.topic-fundamentals #quiz-question .quiz-question-text p a:hover { color: #762d45; }

.topic-mobile #quiz-question .quiz-question-text p a:hover { color: #225d4d; }

.topic-internal #quiz-question .quiz-question-text p a:hover { color: #3f474f; }

.topic-foundations #quiz-question .quiz-question-text p a:hover { color: #00252e; }

.topic-undefined #quiz-question .quiz-question-text p a:hover { color: #3f474f; }

.topic-college-credit #quiz-question .quiz-question-text p a:hover { color: #2c6ca1; }

.topic-no-code #quiz-question .quiz-question-text p a:hover { color: #268762; }

.topic-security #quiz-question .quiz-question-text p a:hover { color: #1983dd; }

.topic-game-development #quiz-question .quiz-question-text p a:hover { color: #664bb5; }

.topic-treehouse-resources #quiz-question .quiz-question-text p a:hover { color: #3ac162; }

.topic-coding-for-kids #quiz-question .quiz-question-text p a:hover { color: #db520c; }

#quiz-question .quiz-question-text p code { font-size: 22px; }

@media screen and (max-width: 679px) { #quiz-question .quiz-question-text p code { font-size: 15px; } }

#quiz-question .quiz-question-text p i { font-size: 12.5px; font-weight: 400; color: #2b363e; display: block; }

#quiz-question .quiz-question-text code, #quiz-question .quiz-question-text pre { font-size: 14px; font-weight: 400; font-family: courier, sans-serif; overflow: auto; }

#quiz-question .quiz-question-text code code, #quiz-question .quiz-question-text pre code { font-size: 14px; }

#quiz-question .quiz-question-text pre { margin: 15px 0; }

#quiz-question .highlight { margin: 20px auto 0 auto; font-size: 14px; font-family: "monoco", courier, monospace; color: #eee; background: #384047; padding: 15px; border-radius: 5px; }

#quiz-question .highlight pre { color: #eee; margin: 0; }

#quiz-feedback { overflow: hidden; }

.step-completed #quiz-feedback, .step-overlay-loading #quiz-feedback { display: none; }

#quiz-feedback .alert { background: #f3f5f6; }

#quiz-feedback .box-action-buttons .secondary.disabled { color: #2b363e; }

#quiz-feedback .box-action-text.markdown-zone p { display: inline; }

#quiz-feedback .box-actions .box-action-buttons .disabled { display: none; }

#quiz-exam-control { overflow: hidden; background: #f3f5f6; }

#quiz-exam-control button { float: right; }

#quiz-answers { padding: 0; overflow: hidden; }

.step-completed #quiz-answers, .step-overlay-loading #quiz-answers { display: none; }

#quiz-answers .disabled { border: none; }

#quiz-answers .multiple-choice-multiple-answers { margin: 0; padding: 0; }

#quiz-answers .multiple-choice-multiple-answers .checkbox { margin: 0; }

#quiz-answers .multiple-choice-multiple-answers .checkbox label { padding: 22px 30px 22px 105px; height: 90px; display: table; width: 100%; }

@media screen and (max-width: 679px) { #quiz-answers .multiple-choice-multiple-answers .checkbox label { padding-left: 80px; } }

#quiz-answers .multiple-choice-multiple-answers .checkbox .span { display: table-cell; vertical-align: middle; width: 100%; }

#quiz-answers .multiple-choice-multiple-answers .checkbox .span:before { border: 2px solid #ebedef; }

#quiz-answers .multiple-choice-multiple-answers .checkbox ::before { margin-left: 30px; width: 50px; height: 50px; padding: 15px; }

@media screen and (max-width: 679px) { #quiz-answers .multiple-choice-multiple-answers .checkbox ::before { margin-left: 20px; width: 40px; height: 40px; } }

#quiz-answers .multiple-choice-multiple-answers .checkbox svg { width: 50px; height: 50px; padding: 15px; margin-left: 24px; background: #fff; fill: #4e5a64; opacity: 0; }

@media screen and (max-width: 679px) { #quiz-answers .multiple-choice-multiple-answers .checkbox svg { margin-left: 16px; margin-top: 2px; padding: 8px; width: 40px; height: 40px; } }

#quiz-answers .multiple-choice-multiple-answers .checkbox.checked label { background-color: white; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.checked label .span { color: black; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.checked.inactive .abc, #quiz-answers .multiple-choice-multiple-answers .checkbox.checked.inactive:not(.success):not(.error) .abc { font-size: 0; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.checked.inactive svg, #quiz-answers .multiple-choice-multiple-answers .checkbox.checked.inactive:not(.success):not(.error) svg { opacity: 1; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.checked:not(.inactive) label .span:before { border: 2px solid #4e5a64; }

#quiz-answers .multiple-choice-multiple-answers .checkbox .input-checkbox:checked + .svg, #quiz-answers .multiple-choice-multiple-answers .checkbox .input-checkbox.checked + .svg { background: #fff; border-color: #d4d9dd; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); cursor: pointer; }

#quiz-answers .multiple-choice-multiple-answers .checkbox .input-checkbox:checked + .svg .span:before, #quiz-answers .multiple-choice-multiple-answers .checkbox .input-checkbox.checked + .svg .span:before { border: 2px solid #4e5a64; }

#quiz-answers .multiple-choice-multiple-answers .checkbox .input-checkbox:checked + .svg svg, #quiz-answers .multiple-choice-multiple-answers .checkbox .input-checkbox.checked + .svg svg { opacity: 1; }

#quiz-answers .multiple-choice-multiple-answers .checkbox:hover { background: #fff; border-color: #d4d9dd; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); cursor: pointer; }

#quiz-answers .multiple-choice-multiple-answers .checkbox:hover .span:before { border: 2px solid #4e5a64; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.inactive:not(.checked) { opacity: 1; cursor: pointer; background: transparent; border-color: #ebedef; box-shadow: none; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.inactive:not(.checked) strong { color: #2b363e; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.inactive:not(.checked) .abc { border-color: #f0f2f4; opacity: .5; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.inactive:not(.checked) .answer { color: #1a2126; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.inactive:not(.checked) svg { opacity: 1; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.inactive:not(.success):not(.error) .span:before { border: 2px solid #ebedef; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.inactive:not(.success):not(.error) svg { opacity: 0; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.success .span:before { border: 2px solid #35A961; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.success svg { fill: #35A961; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.error .span:before { border: 2px solid #e21919; }

#quiz-answers .multiple-choice-multiple-answers .checkbox.error svg { fill: #e21919; }

#quiz-answers .multiple-choice-multiple-answers .checkbox .correct { color: #35A961; }

#quiz-answers .multiple-choice-multiple-answers .checkbox .error { color: #e21919; }

#quiz-answers .multiple-choice li, #quiz-answers .multiple-choice-multiple-answers li, #quiz-answers .true-false li { list-style-type: none; }

#quiz-answers .multiple-choice li:not(:last-child) a, #quiz-answers .multiple-choice-multiple-answers li:not(:last-child) a, #quiz-answers .true-false li:not(:last-child) a { border-bottom: 1px solid #ebedef; }

#quiz-answers .multiple-choice li a, #quiz-answers .multiple-choice-multiple-answers li a, #quiz-answers .true-false li a { display: table; position: relative; width: 100%; transition: background 0.3s ease; }

#quiz-answers .multiple-choice li a:before, #quiz-answers .multiple-choice li a:after, #quiz-answers .multiple-choice-multiple-answers li a:before, #quiz-answers .multiple-choice-multiple-answers li a:after, #quiz-answers .true-false li a:before, #quiz-answers .true-false li a:after { content: " "; display: table; }

#quiz-answers .multiple-choice li a:after, #quiz-answers .multiple-choice-multiple-answers li a:after, #quiz-answers .true-false li a:after { clear: both; }

@media screen and (min-width: 680px) { #quiz-answers .multiple-choice li a, #quiz-answers .multiple-choice-multiple-answers li a, #quiz-answers .true-false li a { padding: 20px 30px; height: 90px; } }

@media screen and (max-width: 679px) { #quiz-answers .multiple-choice li a, #quiz-answers .multiple-choice-multiple-answers li a, #quiz-answers .true-false li a { padding: 15px 20px; height: 80px; } }

#quiz-answers .multiple-choice li a p, #quiz-answers .multiple-choice li a p > code, #quiz-answers .multiple-choice-multiple-answers li a p, #quiz-answers .multiple-choice-multiple-answers li a p > code, #quiz-answers .true-false li a p, #quiz-answers .true-false li a p > code { transition: color 0.3s ease; color: #1a2126; }

#quiz-answers .multiple-choice li a:hover, #quiz-answers .multiple-choice li a:hover.selected, #quiz-answers .multiple-choice li .selected, #quiz-answers .multiple-choice-multiple-answers li a:hover, #quiz-answers .multiple-choice-multiple-answers li a:hover.selected, #quiz-answers .multiple-choice-multiple-answers li .selected, #quiz-answers .true-false li a:hover, #quiz-answers .true-false li a:hover.selected, #quiz-answers .true-false li .selected { background: #fff; border-color: #d4d9dd; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); }

#quiz-answers .multiple-choice li a:hover p, #quiz-answers .multiple-choice li a:hover p > code, #quiz-answers .multiple-choice li a:hover.selected p, #quiz-answers .multiple-choice li a:hover.selected p > code, #quiz-answers .multiple-choice li .selected p, #quiz-answers .multiple-choice li .selected p > code, #quiz-answers .multiple-choice-multiple-answers li a:hover p, #quiz-answers .multiple-choice-multiple-answers li a:hover p > code, #quiz-answers .multiple-choice-multiple-answers li a:hover.selected p, #quiz-answers .multiple-choice-multiple-answers li a:hover.selected p > code, #quiz-answers .multiple-choice-multiple-answers li .selected p, #quiz-answers .multiple-choice-multiple-answers li .selected p > code, #quiz-answers .true-false li a:hover p, #quiz-answers .true-false li a:hover p > code, #quiz-answers .true-false li a:hover.selected p, #quiz-answers .true-false li a:hover.selected p > code, #quiz-answers .true-false li .selected p, #quiz-answers .true-false li .selected p > code { color: #4e5a64; }

#quiz-answers .multiple-choice li a:hover .abc, #quiz-answers .multiple-choice li a:hover.selected .abc, #quiz-answers .multiple-choice li .selected .abc, #quiz-answers .multiple-choice-multiple-answers li a:hover .abc, #quiz-answers .multiple-choice-multiple-answers li a:hover.selected .abc, #quiz-answers .multiple-choice-multiple-answers li .selected .abc, #quiz-answers .true-false li a:hover .abc, #quiz-answers .true-false li a:hover.selected .abc, #quiz-answers .true-false li .selected .abc { border-color: #d4d9dd; color: #4e5a64; }

#quiz-answers .multiple-choice li a:hover .answer, #quiz-answers .multiple-choice li a:hover.selected .answer, #quiz-answers .multiple-choice li .selected .answer, #quiz-answers .multiple-choice-multiple-answers li a:hover .answer, #quiz-answers .multiple-choice-multiple-answers li a:hover.selected .answer, #quiz-answers .multiple-choice-multiple-answers li .selected .answer, #quiz-answers .true-false li a:hover .answer, #quiz-answers .true-false li a:hover.selected .answer, #quiz-answers .true-false li .selected .answer { color: #4e5a64; }

#quiz-answers .multiple-choice li a:hover .abc, #quiz-answers .multiple-choice li a:hover.selected .abc, #quiz-answers .multiple-choice li .selected .abc, #quiz-answers .multiple-choice-multiple-answers li a:hover .abc, #quiz-answers .multiple-choice-multiple-answers li a:hover.selected .abc, #quiz-answers .multiple-choice-multiple-answers li .selected .abc, #quiz-answers .true-false li a:hover .abc, #quiz-answers .true-false li a:hover.selected .abc, #quiz-answers .true-false li .selected .abc { border-color: #4e5a64; color: #4e5a64; }

#quiz-answers .multiple-choice li .error .abc, #quiz-answers .multiple-choice li a:hover.error .abc, #quiz-answers .multiple-choice-multiple-answers li .error .abc, #quiz-answers .multiple-choice-multiple-answers li a:hover.error .abc, #quiz-answers .true-false li .error .abc, #quiz-answers .true-false li a:hover.error .abc { color: #e21919; border-color: #e21919; }

#quiz-answers .multiple-choice li .success .abc, #quiz-answers .multiple-choice li a:hover.success .abc, #quiz-answers .multiple-choice-multiple-answers li .success .abc, #quiz-answers .multiple-choice-multiple-answers li a:hover.success .abc, #quiz-answers .true-false li .success .abc, #quiz-answers .true-false li a:hover.success .abc { color: #35A961; border-color: #35A961; }

#quiz-answers .multiple-choice li .selected, #quiz-answers .multiple-choice-multiple-answers li .selected, #quiz-answers .true-false li .selected { opacity: 1; }

#quiz-answers .multiple-choice li a:hover.inactive:not(.selected), #quiz-answers .multiple-choice-multiple-answers li a:hover.inactive:not(.selected), #quiz-answers .true-false li a:hover.inactive:not(.selected) { cursor: pointer; background: transparent; border-color: #ebedef; box-shadow: none; }

#quiz-answers .multiple-choice li a:hover.inactive:not(.selected) strong, #quiz-answers .multiple-choice-multiple-answers li a:hover.inactive:not(.selected) strong, #quiz-answers .true-false li a:hover.inactive:not(.selected) strong { color: #2b363e; }

#quiz-answers .multiple-choice li a:hover.inactive:not(.selected) .abc, #quiz-answers .multiple-choice-multiple-answers li a:hover.inactive:not(.selected) .abc, #quiz-answers .true-false li a:hover.inactive:not(.selected) .abc { border-color: #f0f2f4; }

#quiz-answers .multiple-choice li a:hover.inactive:not(.selected) .answer, #quiz-answers .multiple-choice-multiple-answers li a:hover.inactive:not(.selected) .answer, #quiz-answers .true-false li a:hover.inactive:not(.selected) .answer { color: #1a2126; }

#quiz-answers .multiple-choice li strong.abc, #quiz-answers .multiple-choice-multiple-answers li strong.abc, #quiz-answers .true-false li strong.abc { font-size: 24px; font-weight: 700; color: #2b363e; float: left; border-radius: 5px; }

#quiz-answers .multiple-choice li .abc, #quiz-answers .multiple-choice-multiple-answers li .abc, #quiz-answers .true-false li .abc { position: absolute; top: 50%; text-align: center; transition: color 0.3s ease, border-color 0.3s ease; }

@media screen and (min-width: 970px) { #quiz-answers .multiple-choice li .abc, #quiz-answers .multiple-choice-multiple-answers li .abc, #quiz-answers .true-false li .abc { border: 2px solid #f0f2f4; } }

@media screen and (max-width: 969px) { #quiz-answers .multiple-choice li .abc, #quiz-answers .multiple-choice-multiple-answers li .abc, #quiz-answers .true-false li .abc { border: 2px solid #e8ebed; } }

@media screen and (min-width: 680px) { #quiz-answers .multiple-choice li .abc, #quiz-answers .multiple-choice-multiple-answers li .abc, #quiz-answers .true-false li .abc { width: 50px; height: 50px; line-height: 46px; margin-top: -25px; left: 30px; } }

@media screen and (max-width: 679px) { #quiz-answers .multiple-choice li .abc, #quiz-answers .multiple-choice-multiple-answers li .abc, #quiz-answers .true-false li .abc { font-size: 18px; width: 40px; height: 40px; line-height: 36px; margin-top: -20px; left: 20px; } }

#quiz-answers .multiple-choice li .answer, #quiz-answers .multiple-choice-multiple-answers li .answer, #quiz-answers .true-false li .answer { display: table-cell; color: #1a2126; line-height: 1.6; vertical-align: middle; width: 100%; }

@media screen and (min-width: 680px) { #quiz-answers .multiple-choice li .answer, #quiz-answers .multiple-choice-multiple-answers li .answer, #quiz-answers .true-false li .answer { font-size: 14px; } }

@media screen and (max-width: 679px) { #quiz-answers .multiple-choice li .answer, #quiz-answers .multiple-choice-multiple-answers li .answer, #quiz-answers .true-false li .answer { font-size: 13px; } }

#quiz-answers .multiple-choice li .answer.markdown-zone p, #quiz-answers .multiple-choice-multiple-answers li .answer.markdown-zone p, #quiz-answers .true-false li .answer.markdown-zone p { font-size: 14px; }

#quiz-answers .multiple-choice li .answer.markdown-zone pre, #quiz-answers .multiple-choice-multiple-answers li .answer.markdown-zone pre, #quiz-answers .true-false li .answer.markdown-zone pre { margin-bottom: 0; }

#quiz-answers .multiple-choice li .answer.markdown-zone ul, #quiz-answers .multiple-choice-multiple-answers li .answer.markdown-zone ul, #quiz-answers .true-false li .answer.markdown-zone ul { padding: 0; margin-bottom: 5px; }

#quiz-answers .multiple-choice li .answer.markdown-zone ul li, #quiz-answers .multiple-choice-multiple-answers li .answer.markdown-zone ul li, #quiz-answers .true-false li .answer.markdown-zone ul li { list-style-type: disc; margin-bottom: 0px; }

#quiz-answers .multiple-choice li .answer.markdown-zone .highlight, #quiz-answers .multiple-choice-multiple-answers li .answer.markdown-zone .highlight, #quiz-answers .true-false li .answer.markdown-zone .highlight { margin-bottom: 0; }

@media screen and (min-width: 680px) { #quiz-answers .multiple-choice li a { padding-left: 105px; } }

@media screen and (max-width: 679px) { #quiz-answers .multiple-choice li a { padding-left: 80px; } }

#quiz-answers .multiple-choice li pre { white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; white-space: -pre-wrap; white-space: pre-wrap; }

#quiz-answers .true-false strong { font-size: 24px; font-weight: 700; color: #2b363e; line-height: 50px; }

@media screen and (max-width: 679px) { #quiz-answers .true-false strong { margin-left: 0; } }

#quiz-answers .true-false a:hover strong { color: #101417; }

#quiz-answers .fill-in-blank.inactive { opacity: 1; }

#quiz-answers .fill-in-blank.inactive .button { opacity: 0.5; }

#quiz-answers .fill-in-blank a { transition: color 0.3s ease; font-weight: 700; }

.topic-ai #quiz-answers .fill-in-blank a { color: #733A88; }

.topic-back-end #quiz-answers .fill-in-blank a { color: #008297; }

.topic-data #quiz-answers .fill-in-blank a { color: #9F4B84; }

.topic-design #quiz-answers .fill-in-blank a { color: #4a4290; }

.topic-experimental #quiz-answers .fill-in-blank a { color: #733a88; }

.topic-front-end #quiz-answers .fill-in-blank a { color: #3659a2; }

.topic-fundamentals #quiz-answers .fill-in-blank a { color: #9b3b5a; }

.topic-mobile #quiz-answers .fill-in-blank a { color: #30826C; }

.topic-internal #quiz-answers .fill-in-blank a { color: #55616c; }

.topic-foundations #quiz-answers .fill-in-blank a { color: #004e61; }

.topic-undefined #quiz-answers .fill-in-blank a { color: #55616c; }

.topic-college-credit #quiz-answers .fill-in-blank a { color: #3887c8; }

.topic-no-code #quiz-answers .fill-in-blank a { color: #31AF7F; }

.topic-security #quiz-answers .fill-in-blank a { color: #409BE9; }

.topic-game-development #quiz-answers .fill-in-blank a { color: #856fc4; }

.topic-treehouse-resources #quiz-answers .fill-in-blank a { color: #5fcf80; }

.topic-coding-for-kids #quiz-answers .fill-in-blank a { color: #F36C27; }

.topic-ai #quiz-answers .fill-in-blank a:hover { color: #4f285d; }

.topic-back-end #quiz-answers .fill-in-blank a:hover { color: #004d5a; }

.topic-data #quiz-answers .fill-in-blank a:hover { color: #753761; }

.topic-design #quiz-answers .fill-in-blank a:hover { color: #342f66; }

.topic-experimental #quiz-answers .fill-in-blank a:hover { color: #4f285d; }

.topic-front-end #quiz-answers .fill-in-blank a:hover { color: #274074; }

.topic-fundamentals #quiz-answers .fill-in-blank a:hover { color: #6f2a40; }

.topic-mobile #quiz-answers .fill-in-blank a:hover { color: #1f5547; }

.topic-internal #quiz-answers .fill-in-blank a:hover { color: #3a424a; }

.topic-foundations #quiz-answers .fill-in-blank a:hover { color: #001d24; }

.topic-undefined #quiz-answers .fill-in-blank a:hover { color: #3a424a; }

.topic-college-credit #quiz-answers .fill-in-blank a:hover { color: #2a6799; }

.topic-no-code #quiz-answers .fill-in-blank a:hover { color: #247f5c; }

.topic-security #quiz-answers .fill-in-blank a:hover { color: #187dd3; }

.topic-game-development #quiz-answers .fill-in-blank a:hover { color: #6247ae; }

.topic-treehouse-resources #quiz-answers .fill-in-blank a:hover { color: #38b95e; }

.topic-coding-for-kids #quiz-answers .fill-in-blank a:hover { color: #d14e0c; }

#quiz-answers .fill-in-blank li { padding: 20px 30px; }

#quiz-answers .fill-in-blank p { color: #161c20; font-size: 14px; line-height: 2; margin-bottom: 15px; }

#quiz-answers .fill-in-blank .text { background: none; margin-bottom: 0; border: none; border-bottom: 2px solid #d4d9dd; min-width: 80px; white-space: nowrap; display: inline-block; text-align: left; padding: 0 5px 0 0; width: auto; font-size: 14px; text-indent: 5px; color: #101417; transition: background-color 0.3s ease, border-color 0.3s ease; }

#quiz-answers .fill-in-blank .text:empty::before { content: "\200b"; }

#quiz-answers .fill-in-blank .text:focus { outline: 0; background-color: #eee; }

.topic-ai #quiz-answers .fill-in-blank .text:focus { border-color: #733A88; }

.topic-back-end #quiz-answers .fill-in-blank .text:focus { border-color: #008297; }

.topic-data #quiz-answers .fill-in-blank .text:focus { border-color: #9F4B84; }

.topic-design #quiz-answers .fill-in-blank .text:focus { border-color: #4a4290; }

.topic-experimental #quiz-answers .fill-in-blank .text:focus { border-color: #733a88; }

.topic-front-end #quiz-answers .fill-in-blank .text:focus { border-color: #3659a2; }

.topic-fundamentals #quiz-answers .fill-in-blank .text:focus { border-color: #9b3b5a; }

.topic-mobile #quiz-answers .fill-in-blank .text:focus { border-color: #30826C; }

.topic-internal #quiz-answers .fill-in-blank .text:focus { border-color: #55616c; }

.topic-foundations #quiz-answers .fill-in-blank .text:focus { border-color: #004e61; }

.topic-undefined #quiz-answers .fill-in-blank .text:focus { border-color: #55616c; }

.topic-college-credit #quiz-answers .fill-in-blank .text:focus { border-color: #3887c8; }

.topic-no-code #quiz-answers .fill-in-blank .text:focus { border-color: #31AF7F; }

.topic-security #quiz-answers .fill-in-blank .text:focus { border-color: #409BE9; }

.topic-game-development #quiz-answers .fill-in-blank .text:focus { border-color: #856fc4; }

.topic-treehouse-resources #quiz-answers .fill-in-blank .text:focus { border-color: #5fcf80; }

.topic-coding-for-kids #quiz-answers .fill-in-blank .text:focus { border-color: #F36C27; }

#quiz-answers .fill-in-blank .text br { display: none; }

#quiz-answers .fill-in-blank .text * { display: inline; white-space: nowrap; }

#quiz-answers .fill-in-blank .text.fitb-incorrect, #quiz-answers .fill-in-blank .text.fitb-correct { color: #050708; }

#quiz-answers .fill-in-blank .text.fitb-incorrect svg, #quiz-answers .fill-in-blank .text.fitb-correct svg { display: inline-block; margin-left: 4px; margin-right: 6px; height: 10px; }

#quiz-answers .fill-in-blank .text.fitb-incorrect { background: #fce4e4; border-bottom-color: #ed5a5a; }

#quiz-answers .fill-in-blank .text.fitb-incorrect svg { fill: #cb1616; }

#quiz-answers .fill-in-blank .text.fitb-correct { background: #d5f2dd; border-bottom-color: #5fcf80; }

#quiz-answers .fill-in-blank .text.fitb-correct svg { fill: #2e9a4e; width: 13px; }

#quiz-answers .fill-in-blank .highlight pre .text.fitb-incorrect { background: #fce4e4; color: #101417; }

#quiz-answers .fill-in-blank .highlight pre .text.fitb-correct { background: #ade7be; color: #101417; }

#quiz-answers .fill-in-blank .button { line-height: 14px; margin-top: 20px; padding: 12px 15px; display: inline-block; }

#quiz-answers .fill-in-blank .highlight { font-size: 14px; font-family: "monoco", courier, monospace; color: #eee; background: #384047; padding: 15px 0; border-radius: 5px; }

#quiz-answers .fill-in-blank .highlight pre { color: #ddd; }

#quiz-answers .fill-in-blank .markdown-zone ul { padding: 0; margin-bottom: 15px; }

#quiz-answers .fill-in-blank .markdown-zone ul li { padding: 0 15px; margin-bottom: 0px; }

#quiz-answers .fill-in-blank .markdown-zone .highlight { margin-bottom: 10px; }

#quiz-answers .fill-in-blank pre { line-height: 2; display: block; overflow: auto; }

#quiz-answers .fill-in-blank pre::-webkit-scrollbar { -webkit-appearance: none; height: 0; }

#quiz-answers .fill-in-blank pre span[id^="line-"] { display: block; padding: 0 15px; }

#quiz-answers .fill-in-blank pre span[id^="line-"]:focus-within { background-color: #3f4850; }

#quiz-answers .fill-in-blank pre span[id^="line-"]:nth-child(2):nth-last-child(1):focus-within { background-color: #384047; }

#quiz-answers .fill-in-blank pre .text { color: #ddd; border-bottom: 2px solid #b7c0c7; min-width: 20px; text-align: center; }

#quiz-answers .fill-in-blank pre .text:empty { background-color: #434d55; }

#quiz-answers .fill-in-blank pre .text:focus { background-color: #4a555e; color: white; }

#quiz-report-question { margin-top: 10px; text-align: right; }

#quiz-report-question a { color: #2b363e; }

#quiz-report-question:hover a { color: #010102; }
#cc-container { position: relative; }

#cc-container .hidden, #cc-container .inactive, #cc-container #page-title-addition .hidden, #cc-container #page-title-addition .inactive { display: none; }

#cc-instructions { border-radius: 0; transition: padding 0.3s ease, margin 0.3s ease; }

.step-completed #cc-instructions, .step-overlay-loading #cc-instructions { display: none; }

#cc-instructions h1#task-count { font-weight: 700; margin-bottom: 10px; font-size: 14px; color: #2b363e; }

#cc-instructions div#task { line-height: 1.5; margin: 0 0 -8px; transition: margin 0.3s ease; }

@media screen and (min-width: 680px) { #cc-instructions div#task { font-size: 20px; } }

@media screen and (max-width: 679px) { #cc-instructions div#task { font-size: 16px; } }

#cc-instructions div#task p { font-weight: 700; margin: 0; color: #384047; font-size: inherit; }

#cc-instructions div#task ul, #cc-instructions div#task ol { color: #384047; font-weight: 700; padding-left: 20px; margin: 10px; }

#cc-instructions div#task ul li, #cc-instructions div#task ol li { margin: 0; font-size: 18px; line-height: 1.5; }

#cc-instructions p#task-notes { margin: 16px 0 -6px; color: #2b363e; }

@media screen and (max-width: 679px) { #cc-feedback.alert.info .box-action-text { display: none; } }

#cc-feedback.alert.info .box-action-text svg.info-icon { position: relative; top: 2px; width: 34px; height: 34px; fill: #d4d9dd; float: left; margin-right: 10px; }

@media screen and (max-width: 1020px) { #cc-feedback.alert.info .box-action-text svg.info-icon { display: none; } }

#cc-feedback.alert.info .box-action-text strong { color: #050708; }

.step-completed #cc-feedback, .step-overlay-loading #cc-feedback { display: none; }

@media screen and (min-width: 680px) { #cc-feedback .box-action-buttons { text-align: right; } }

#cc-editor { font-size: 14px; position: relative; /*
Solarized theme for code-mirror
http://ethanschoonover.com/solarized
*/ /*
Solarized color palette
http://ethanschoonover.com/solarized/img/solarized-palette.png
*/ /* Color scheme for code-mirror */ /* Editor styling */ /* Little shadow on the view-port of the buffer view */ /* Remove gutter border */ /* Gutter colors and line number styling based of color scheme (dark / light) */ /* Dark */ /* Light */ /* Common */ /* Cursor */ /* Fat cursor */ /* Active line */ }

#cc-editor.multi-line-editor { background: #384047; padding: 0; }

.step-completed #cc-editor, .step-overlay-loading #cc-editor { display: none; }

#cc-editor .editor-files { background: #3e474f; padding-left: 15px; padding-top: 15px; }

#cc-editor .editor-files:before, #cc-editor .editor-files:after { content: " "; display: table; }

#cc-editor .editor-files:after { clear: both; }

#cc-editor .editor-files li { list-style-type: none; float: left; }

#cc-editor .editor-files a { font-weight: 700; font-size: 14px; padding: 20px 15px; display: block; position: relative; color: #5e788a; border-top: 3px solid #3e474f; }

#cc-editor .editor-files a:hover { color: white; }

#cc-editor .editor-files a.selected { background-color: #2d3339; color: #fff; border-top: 3px solid rgba(255, 255, 255, 0.2); border-radius: 10px 10px 0px 0px; }

#cc-editor .editor-files a.selected .icon { opacity: .5; }

#cc-editor .editor-files a.selected:before { content: ""; position: absolute; top: 36px; left: -10px; height: 27px; width: 10px; border-bottom-right-radius: 10px; box-shadow: 0 20px 0 0 #2d3339; }

#cc-editor .editor-files a.selected:after { content: ""; position: absolute; top: 36px; right: -10px; height: 27px; width: 10px; border-bottom-left-radius: 10px; box-shadow: 0 20px 0 0 #2d3339; }

#cc-editor .editor-files a .icon { margin: -5px 5px 0 0; opacity: .4; }

#cc-editor .editor, #cc-editor .preview { background: #2d3339; min-height: 650px; font-size: 14px; position: relative; display: none; }

#cc-editor .editor.selected, #cc-editor .preview.selected { display: block; }

#cc-editor .editor iframe, #cc-editor .preview iframe { background: #fff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; }

#cc-editor .editor .CodeMirror, #cc-editor .preview .CodeMirror { position: relative; }

#cc-editor .editor .CodeMirror .CodeMirror-scroll, #cc-editor .preview .CodeMirror .CodeMirror-scroll { padding-top: 5px; min-height: 650px; margin-bottom: 0; }

#cc-editor iframe.command-results { width: 100%; padding: 10px; background: #384047; border-radius: 5px; margin: 0 0 0; }

#cc-editor .solarized.base03 { color: #002b36; }

#cc-editor .solarized.base02 { color: #073642; }

#cc-editor .solarized.base01 { color: #586e75; }

#cc-editor .solarized.base00 { color: #657b83; }

#cc-editor .solarized.base0 { color: #839496; }

#cc-editor .solarized.base1 { color: #93a1a1; }

#cc-editor .solarized.base2 { color: #eee8d5; }

#cc-editor .solarized.base3 { color: #fdf6e3; }

#cc-editor .solarized.solar-yellow { color: #b58900; }

#cc-editor .solarized.solar-orange { color: #cb4b16; }

#cc-editor .solarized.solar-red { color: #dc322f; }

#cc-editor .solarized.solar-magenta { color: #d33682; }

#cc-editor .solarized.solar-violet { color: #6c71c4; }

#cc-editor .solarized.solar-blue { color: #268bd2; }

#cc-editor .solarized.solar-cyan { color: #2aa198; }

#cc-editor .solarized.solar-green { color: #859900; }

#cc-editor .cm-s-solarized { line-height: 1.45em; color-profile: sRGB; rendering-intent: auto; }

#cc-editor .cm-s-solarized.cm-s-dark { color: #839496; background-color: #002b36; }

#cc-editor .cm-s-solarized.cm-s-light { background-color: #fdf6e3; color: #657b83; }

#cc-editor .cm-s-solarized .CodeMirror-widget { text-shadow: none; }

#cc-editor .cm-s-solarized .cm-header { color: #586e75; }

#cc-editor .cm-s-solarized .cm-quote { color: #93a1a1; }

#cc-editor .cm-s-solarized .cm-keyword { color: #cb4b16; }

#cc-editor .cm-s-solarized .cm-atom { color: #d33682; }

#cc-editor .cm-s-solarized .cm-number { color: #d33682; }

#cc-editor .cm-s-solarized .cm-def { color: #2aa198; }

#cc-editor .cm-s-solarized .cm-variable { color: #839496; }

#cc-editor .cm-s-solarized .cm-variable-2 { color: #b58900; }

#cc-editor .cm-s-solarized .cm-variable-3, #cc-editor .cm-s-solarized .cm-type { color: #6c71c4; }

#cc-editor .cm-s-solarized .cm-property { color: #2aa198; }

#cc-editor .cm-s-solarized .cm-operator { color: #6c71c4; }

#cc-editor .cm-s-solarized .cm-comment { color: #586e75; font-style: italic; }

#cc-editor .cm-s-solarized .cm-string { color: #859900; }

#cc-editor .cm-s-solarized .cm-string-2 { color: #b58900; }

#cc-editor .cm-s-solarized .cm-meta { color: #859900; }

#cc-editor .cm-s-solarized .cm-qualifier { color: #b58900; }

#cc-editor .cm-s-solarized .cm-builtin { color: #d33682; }

#cc-editor .cm-s-solarized .cm-bracket { color: #cb4b16; }

#cc-editor .cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }

#cc-editor .cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }

#cc-editor .cm-s-solarized .cm-tag { color: #93a1a1; }

#cc-editor .cm-s-solarized .cm-attribute { color: #2aa198; }

#cc-editor .cm-s-solarized .cm-hr { color: transparent; border-top: 1px solid #586e75; display: block; }

#cc-editor .cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }

#cc-editor .cm-s-solarized .cm-special { color: #6c71c4; }

#cc-editor .cm-s-solarized .cm-em { color: #999; text-decoration: underline; text-decoration-style: dotted; }

#cc-editor .cm-s-solarized .cm-error, #cc-editor .cm-s-solarized .cm-invalidchar { color: #586e75; border-bottom: 1px dotted #dc322f; }

#cc-editor .cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; }

#cc-editor .cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, #cc-editor .cm-s-dark .CodeMirror-line > span::-moz-selection, #cc-editor .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); }

#cc-editor .cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; }

#cc-editor .cm-s-solarized.cm-s-light .CodeMirror-line::selection, #cc-editor .cm-s-light .CodeMirror-line > span::selection, #cc-editor .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; }

#cc-editor .cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, #cc-editor .cm-s-light .CodeMirror-line > span::-moz-selection, #cc-editor .cm-s-light .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; }

#cc-editor .cm-s-solarized.CodeMirror { -moz-box-shadow: inset 7px 0 12px -6px #000; -webkit-box-shadow: inset 7px 0 12px -6px #000; box-shadow: inset 7px 0 12px -6px #000; }

#cc-editor .cm-s-solarized .CodeMirror-gutters { border-right: 0; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-gutters { background-color: #073642; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { color: #586e75; }

#cc-editor .cm-s-solarized.cm-s-light .CodeMirror-gutters { background-color: #eee8d5; }

#cc-editor .cm-s-solarized.cm-s-light .CodeMirror-linenumber { color: #839496; }

#cc-editor .cm-s-solarized .CodeMirror-linenumber { padding: 0 5px; }

#cc-editor .cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }

#cc-editor .cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }

#cc-editor .cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text { color: #586e75; }

#cc-editor .cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }

#cc-editor .cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }

#cc-editor .cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }

#cc-editor .cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; }

#cc-editor .cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.06); }

#cc-editor .cm-s-solarized.cm-s-light .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0.06); }

#cc-editor .cm-s-solarized.CodeMirror { left: 0; right: 0; top: 0; bottom: 0; height: auto; box-shadow: none; }

#cc-editor .cm-s-solarized.cm-s-dark { background: #2d3339; text-shadow: none; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { text-shadow: none; }

#cc-editor .cm-s-solarized.cm-s-dark pre { color: #f8f8f8; }

#cc-editor .cm-s-solarized.cm-s-dark pre::selection { background: #384047; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-gutters { background: #2d3339; border-right: none; height: 100%; padding: 0 10px 0 0; box-shadow: none; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { color: #b6c1d2; padding-left: 15px; }

#cc-editor .cm-s-solarized.cm-s-dark .cm-tab:before { content: ""; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-scroll { overflow-x: hidden !important; }

#cc-editor .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background { background: #3b424a; border-radius: 3px; }

#cc-editor .cm-s-solarized .CodeMirror-linenumber { color: #b6c1d2; }

#cc-editor .cm-s-solarized .cm-comment { color: #b6c1d2; }

#cc-editor .cm-s-solarized .cm-tag { color: #abdeff; }

#cc-editor .cm-s-solarized .cm-meta, #cc-editor .cm-s-solarized .cm-string { color: #e2b977; }

#cc-editor .cm-s-solarized .cm-variable { color: #e991bc; }

#cc-editor .cm-s-solarized .cm-qualifier { color: #4bc6ff; }

#cc-editor .cm-s-solarized .cm-builtin, #cc-editor .cm-s-solarized .cm-atom { color: #ffe868; }

#cc-editor .cm-s-solarized .cm-attribute { color: #32d2c5; }

#cc-editor .cm-s-solarized .cm-keyword { color: #4bc6ff; }

#cc-editor .cm-s-solarized .cm-property { color: #e991bc; }

#cc-editor .cm-s-solarized .cm-variable-3 { color: #b6bcef; }

#cc-editor .cm-s-solarized .cm-def { color: #32d2c5; }

#cc-editor .cm-s-solarized .cm-variable-2 { color: #ff9781; }

#cc-editor .cm-s-solarized .cm-number { color: #a1e8af; }

#cc-editor .cm-s-solarized .cm-operator { color: #f8f8f8; }

#cc-editor .cm-s-solarized .cm-type { color: #b498dd; }

#cc-editor .cm-s-solarized.cm-s-swift .cm-keyword { color: #4bc6ff; font-weight: 700; }

#cc-editor .cm-s-solarized.cm-s-swift .cm-builtin, #cc-editor .cm-s-solarized.cm-s-swift .cm-atom { color: #4bc6ff; }

#cc-editor .cm-s-solarized.cm-s-swift .cm-def { color: #e2b977; }

#cc-editor .cm-s-solarized.cm-s-swift .cm-variable { color: #f8f8f8; }

#cc-editor .cm-s-solarized.cm-s-swift .cm-property { color: #f8f8f8; }

#cc-editor .cm-s-solarized.cm-s-swift .cm-comment { color: #a1e8af; }

#cc-editor .cm-s-solarized.cm-s-swift .cm-string { color: #abdeff; }

#cc-editor .cm-s-solarized.cm-s-swift .cm-variable-2 { color: #b498dd; }

#cc-editor .cm-s-visualstudio-dark .cm-comment { color: #a1e8af; }

#cc-editor .cm-s-visualstudio-dark .cm-atom { color: #4bc6ff; }

#cc-editor .cm-s-visualstudio-dark .cm-builtin { color: #4bc6ff; }

#cc-editor .cm-s-visualstudio-dark .cm-def { color: #32d2c5; }

#cc-editor .cm-s-visualstudio-dark .cm-number { color: #abffa3; }

#cc-editor .cm-s-visualstudio-dark .cm-operator { color: #e8e8e8; }

#cc-editor .cm-s-visualstudio-dark .cm-keyword { color: #4bc6ff; }

#cc-editor .cm-s-visualstudio-dark .cm-string { color: #ff9781; }

#cc-editor .cm-s-visualstudio-dark .cm-variable { color: #e8e8e8; }

#cc-editor .cm-s-visualstudio-dark .cm-variable-3 { color: #4bc6ff; }

#cc-footer { padding-top: 0; padding-bottom: 30px; }

.step-completed #cc-footer, .step-overlay-loading #cc-footer { display: none; }

.terminal, .terminal .CodeMirror { font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; min-height: 40px; color: #fff; background: #384047; border-radius: 4px; font-size: 14px; line-height: 20px; }

.terminal-loading { padding: 20px 30px; }

.terminal .CodeMirror { height: auto; padding: 20px 15px; }

.multi-line-editor .terminal .CodeMirror, .terminal .multi-line-editor .CodeMirror .CodeMirror { min-height: 180px; }

.terminal .CodeMirror-lines { padding: 0; }

.terminal .CodeMirror-cursor { border-right: 1px solid #fff; }

.terminal .CodeMirror-scroll { overflow-x: hidden !important; }

.terminal .CodeMirror-hscrollbar { -ms-overflow-x: visible; -ms-overflow-y: visible; }

.cc-rewrite .svg { display: inline-block; width: 24px; margin-right: 5px; }

.cc-rewrite .svg.help-bullet { width: 0px; margin-right: 0px; }

.cc-rewrite .svg.help-close { margin-right: 0px; }

.cc-rewrite .hint-title { text-align: center; }

.cc-rewrite .hint-text-title { margin-bottom: 10px; }

.cc-rewrite .hint-title-image-standin { text-align: center; width: 100%; height: 150px; }

.cc-rewrite .hint-text-box-container-limit { max-height: 800px; overflow-y: scroll; }

.cc-rewrite .hint-text-box { width: 100%; transition: all 1s ease-in; padding: 15px 12.5%; border: 2px solid #e8ebed; border-radius: 5px; text-align: left; margin-top: 15px; }

.cc-rewrite .hint-text-box.show { display: inline-block; }

.cc-rewrite .hint-text-box.hide { display: none; }

.cc-rewrite .hint-text { font-size: 18px; text-align: left; }

.cc-rewrite #tarp.hide { display: none; }

.cc-rewrite #tarp.show { opacity: 1; }

.cc-rewrite #new_forum_post_form.hide { display: none; }

.cc-rewrite #new_forum_post_form.show { display: block; }

.cc-rewrite #new_forum_post_form .form-footer { display: flex; justify-content: flex-end; }

.cc-rewrite #new_forum_post_form .form-footer .button { margin-right: 0; }

.cc-rewrite #new_forum_post_form .form-footer .button-box { display: flex; width: 100%; }

.cc-rewrite #new_forum_post_form .form-footer .button-box .button:last-child { margin-left: auto; }

.cc-rewrite #new_forum_post_form .form-item label.hide { opacity: 0; display: none; }

.cc-rewrite #new_forum_post_form .form-item label.shaded { opacity: .5; display: block; }

.cc-rewrite #new_forum_post_form .form-item label.show { opacity: 1.0; display: block; }

.cc-rewrite #new_forum_post_form .current-wizard-step.show { display: block; }

.cc-rewrite .workshop-video-thumb img { width: 100%; border-radius: 5px; }

.cc-rewrite span.avatar-span { position: absolute; z-index: 2; }

.cc-rewrite .workshop-video-thumb-overlay { position: absolute; top: 34%; left: 43%; }

.cc-rewrite .workshop-video-thumb-overlay span { height: 100%; text-align: center; margin: auto auto; display: block; width: 100%; }

.cc-rewrite .workshop-video-thumb-overlay .play-icon { width: 100px; height: 100px; }

.cc-rewrite .box-actions { min-height: 100px; }

.cc-rewrite .cc-split-files { overflow: scroll; }

.cc-rewrite .cc-split { display: flex; padding: 0px; }

.cc-rewrite .cc-split .cc-results, .cc-rewrite .cc-split .cc-workspace { flex-basis: 50%; }

.cc-rewrite .cc-split .cc-preview-view { z-index: 498; }

.cc-rewrite .cc-split .shaded-preview { background: #3e474f !important; opacity: 1; height: calc(100% - 82px); }

.cc-rewrite .cc-split .preview-info-text { z-index: 500; position: absolute; top: 10%; left: 20%; width: 60%; text-align: center; }

.cc-rewrite .cc-split .preview-info-text p { color: #fff; }

.cc-rewrite .cc-split .preview-info-text button { margin-top: 14px; border-color: #5fcf80; background-color: #5fcf80; }

.cc-rewrite .cc-split .preview-info-text button:hover { border-color: #5fcf80; background-color: #5fcf80; }

.cc-rewrite .cc-split .cc-editor-menu { padding-left: 0 !important; }

.cc-rewrite .cc-split .cc-editor-menu .split-preview-tabs { height: 67px; }

.cc-rewrite .cc-split .cc-editor-menu .split-preview-tabs ul { display: flex; justify-content: space-between; }

.cc-rewrite .cc-split .cc-editor-menu .split-preview-tabs a.selected { min-width: 86px; min-height: 64px; padding-right: 29px; padding-left: 29px; }

.cc-rewrite .cc-split .cc-editor-menu .split-preview-tabs .refresh-button { padding: 12px; }

.cc-rewrite .cc-split .cc-editor-menu .split-preview-tabs .refresh-button button { border-color: #5fcf80; background-color: #5fcf80; }
#local-code-challenge #task-type { font-weight: 700; margin-bottom: 10px; font-size: 14px; color: #2b363e; }

#local-code-challenge #task { font-size: 20px; line-height: 1.5; margin: 0 0 -8px; }

#local-code-challenge #task-time { font-weight: 500; margin-bottom: 10px; font-size: 14px; color: #2b363e; float: right; }

#local-code-challenge #task p { color: #384047; font-size: inherit; }

#local-code-challenge .box-actions { margin: 0; background: #f9fafa; }

@media screen and (min-width: 680px) { #local-code-challenge .box-actions { border-top: 1px solid rgba(0, 0, 0, 0.05); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } }

@media screen and (max-width: 679px) { #local-code-challenge .box-actions { display: none; } }

#local-code-challenge .box-action-primary { float: left; }

#local-code-challenge .box-action-secondary { float: right; }

#local-code-challenge .box-action-text { margin: 0; height: 40px; color: #2b363e; font-size: 14px; line-height: 24px; padding-right: 10px; }

#local-code-challenge .box-action-text a { color: #3f8abf; }

#local-code-challenge .box-action-text a:hover { color: #326e99; }

#local-code-challenge .text-center { text-align: center; }

#local-code-challenge .box-content { min-height: 300px; }

#local-code-challenge .box-content h3 { margin-top: 30px; }

#local-code-challenge .box-content h3 + .markdown-zone { margin-top: 10px; }

#local-code-challenge .box-content .markdown-zone ul:last-child { margin-bottom: 0; }

#local-code-challenge .box-footer { padding: 5px 30px; }

#local-code-challenge #le-clouds { position: absolute; top: 50px; left: auto; width: 90%; height: auto; }

#local-code-challenge .pinata-container { box-sizing: border-box; height: 300px; position: relative; display: block; overflow-y: hidden; top: -30px; width: 100%; }

#local-code-challenge .pinata-container svg#pinata { overflow-x: visible; position: absolute; left: 50%; top: -15px; width: 150px; height: 284px; margin-left: -75px; }

#local-code-challenge a.test-with-content { cursor: pointer; }

#local-code-challenge .uploader, #local-code-challenge .upload input { opacity: 0; width: 0; height: 0; position: absolute; left: -999999px; }

#local-code-challenge .upload button { margin-bottom: 18px; }

.step-completed #local-code-challenge > .box-header, .step-overlay-loading #local-code-challenge > .box-header, .step-completed #local-code-challenge > .box-actions, .step-overlay-loading #local-code-challenge > .box-actions, .step-completed #local-code-challenge > .box-content, .step-overlay-loading #local-code-challenge > .box-content { display: none; }
.account-progress { padding: 15px; }

@media screen and (max-width: 679px) { .account-progress { padding: 15px 5px; } }

.account-progress .completion { display: inline-block; padding: 0px 5px; margin-left: 5px; font-weight: 700; line-height: 1.4; background-color: #55616c; color: #fff; border-radius: 5px; }

.account-progress .secondary-heading { padding: 5px 0 20px 0; }

.account-progress .progress-list { background: #f9fafa; margin: 0 -30px; border-top: 1px solid #e8ebed; border-bottom: 1px solid #e8ebed; }

@media screen and (max-width: 679px) { .account-progress .progress-list { margin: 0 -20px; } }

.account-progress .progress-list .empty-placeholder { height: 190px; line-height: 1.5; }

.account-progress .progress-list .empty-placeholder strong { margin: 160px 0 30px 0; display: block; color: #4a5d6c; font-size: 18px; }

.account-progress .progress-list table { width: 100%; line-height: 1.4em; text-align: left; }

.account-progress .progress-list table tr { position: relative; padding: 0 10px; border-top: 1px solid #e8ebed; color: #1a2126; }

.account-progress .progress-list table tr:first-child { border: none; }

.account-progress .progress-list table tr.selected { background: #fff; color: #050708; }

.account-progress .progress-list table tr.selected td.progress-title svg { fill: #050708; }

.account-progress .progress-list table tr > th:first-child, .account-progress .progress-list table tr > td:first-child { padding-left: 30px; }

.account-progress .progress-list table tr > th:last-child, .account-progress .progress-list table tr > td:last-child { padding-right: 30px; }

.account-progress .progress-list table tr td, .account-progress .progress-list table tr th { height: 72px; vertical-align: middle; padding: 0 10px; }

.account-progress .progress-list table tr th { font-weight: 700; color: #2b363e; height: 45px; border-bottom: 1px solid #e8ebed; }

.account-progress .progress-list table tr th.progress-select-all { width: 18px; padding-right: 0; }

.account-progress .progress-list table tr th.tablesorter-header .chevron-icon { display: none; fill: #6E7881; }

.account-progress .progress-list table tr th.tablesorter-headerAsc .chevron-icon { display: inline-block; transform: rotate(180deg); }

.account-progress .progress-list table tr th.tablesorter-headerDesc .chevron-icon { display: inline-block; }

.account-progress .progress-list table tr th.tablesorter-header:not(.sorter-false) { cursor: pointer; outline: 0; }

.account-progress .progress-list table tr td.progress-title { font-weight: 700; }

.account-progress .progress-list table tr td.progress-title a { color: inherit; }

.account-progress .progress-list table tr td.progress-title svg { fill: #1a2126; vertical-align: -4px; margin-right: 5px; }

.account-progress .progress-list table tr .checkbox label { padding: 18px 0 18px 18px; }

.account-progress .options { margin-top: 20px; margin-bottom: 23px; }

.account-progress .options .checkbox { display: block; }

.account-progress .options .checkbox label { padding: 0; }

.account-progress .options .checkbox span { margin-left: 43px; }

.account-progress .options .checkbox.dangerous label span svg { fill: #1a2126; width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; }

.account-progress .options .checkbox.dangerous .input-checkbox-radio:checked ~ svg.checkmark-icon { fill: #ed5a5a; }

.account-progress .options .checkbox.dangerous .input-checkbox-radio:checked ~ span { color: #ed5a5a; }

.account-progress .options .checkbox.dangerous .input-checkbox-radio:checked ~ span:before { border-color: #ed5a5a; }

.account-progress .options .checkbox.dangerous .input-checkbox-radio:checked ~ span svg { fill: #ed5a5a; }

.account-progress .options, .account-progress .box-footer { padding: 0 30px; margin-left: -30px; margin-right: -30px; }

@media screen and (max-width: 679px) { .account-progress .options, .account-progress .box-footer { margin-left: -20px; margin-right: -20px; } }
body { transition: padding 600ms 0s ease; }

.nav-marketing, .nav-reactivation { background: #fff; box-shadow: 0 0 1px rgba(0, 65, 94, 0.2); z-index: 102; transition: height 600ms 0s ease; position: fixed; top: 0; right: 0; left: 0; }

@media screen and (max-width: 679px) { .nav-marketing, .nav-reactivation { height: 50px; } }

@media screen and (min-width: 680px) { .nav-marketing, .nav-reactivation { height: 70px; } }

@media screen and (max-width: 969px) { .hamburger-button-clicked .nav-marketing, .hamburger-button-clicked .nav-reactivation { bottom: 0; height: 100%; overflow-y: auto; } }

.nav-container { padding-top: 0; padding-bottom: 0; }

.nav-list { list-style: none; position: relative; width: 100%; margin: 0 auto; text-align: right; text-align: right; }

@media screen and (max-width: 969px) { .nav-list { text-align: left; } }

.nav-list:before, .nav-list:after { content: " "; display: table; }

.nav-list:after { clear: both; }

@media screen and (max-width: 679px) { .hamburger-button-clicked .nav-list { padding-top: 50px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .hamburger-button-clicked .nav-list { padding-top: 70px; } }

.nav-list:before, .nav-list:after { content: " "; display: table; }

.nav-list:after { clear: both; }

.nav-item { font-weight: 700; font-size: 14px; display: inline-block; }

@media screen and (max-width: 679px) { .nav-item { line-height: 50px; } }

@media screen and (min-width: 680px) { .nav-item { line-height: 70px; } }

@media screen and (min-width: 970px) { .nav-item { margin: 0 30px 0 0; } }

.nav-item-secondary { transition: opacity 200ms 0s ease; }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-secondary { opacity: 1; } }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-secondary { right: 30px; } }

@media screen and (max-width: 969px) { .nav-item-tablet { display: none; min-width: 200px; margin: 0 auto; clear: both; line-height: 40px; font-size: 18px; } }

@media screen and (max-width: 679px) { .nav-item-mobile { display: none; min-width: 200px; margin: 0 auto; clear: both; line-height: 40px; font-size: 18px; } }

@media screen and (max-width: 969px) and (max-width: 679px) { .nav-item-cta { margin-top: 12px; } }

@media screen and (max-width: 969px) and (min-width: 680px) and (max-width: 969px) { .nav-item-cta { margin-top: 16px; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { position: absolute; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { top: 0; } }

@media screen and (max-width: 969px) and (max-width: 969px) { .nav-item-cta { right: 0; } }

.nav-item-logo { transition: top 600ms 0s ease; }

@media screen and (min-width: 970px) { .nav-item-logo { position: absolute; left: 0; position: absolute; top: 17px; } }

@media screen and (max-width: 969px) { .nav-item-logo { width: 30px; height: 32px; position: absolute; top: 17px; } }

@media screen and (max-width: 680px) { .nav-item-logo { position: absolute; top: 9px; } }

.nav-item-logo-container { margin: 0; position: relative; width: 100%; height: 100%; line-height: 1.3; }

.nav-item-logo-icon { display: block; fill: #5fcf80; }

.nav-item:hover .nav-item-logo-icon { fill: #3ac162; }

.nav-item-free-trial { margin-right: 60px; }

@media screen and (max-width: 969px) { .nav-item-sign-in { position: absolute; } }

@media screen and (max-width: 969px) { .nav-item-sign-in { top: 0; } }

@media screen and (max-width: 969px) { .nav-item-sign-in { right: 97px; } }

@media screen and (min-width: 680px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in { right: 136px; } }

.nav-item-sign-in-secondary { transition: opacity 200ms 0s ease; }

@media screen and (min-width: 680px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-secondary { opacity: 1; } }

@media screen and (min-width: 970px) { .scrolled-past-hero.scrolling-down .nav-item-sign-in-secondary { right: 30px; } }

@media screen and (max-width: 679px) { .visitor .nav-item-sign-in { top: 60px; } }

.logged-in .nav-item-sign-in { right: 50px !important; margin-right: 0 !important; opacity: 1 !important; display: inline-block !important; }

.nav-link { color: #2b363e; font-weight: 700; transition: color 300ms 0s ease; }

@media screen and (max-width: 969px) { .nav-link { display: block; } }

@media screen and (min-width: 970px) { .nav-link { display: inline-block; } }

.nav-link:hover, .nav-link:focus { color: #101417; }

.current .nav-link { color: #101417; }

.nav-link-cta { color: #5fcf80; transition: color 200ms 0s ease, padding 200ms 0s ease, border 200ms 0s ease, background-color 200ms 0s ease; border: 2px solid transparent; border-radius: 4px; }

@media screen and (max-width: 679px) { .nav-link-cta { line-height: 30px; } }

@media screen and (min-width: 680px) { .nav-link-cta { line-height: 34px; } }

.nav-link-cta:hover { color: #34ad58; }

.scrolled-past-hero.scrolling-down .nav-link-cta { border-color: #5fcf80; }

@media screen and (max-width: 679px) { .scrolled-past-hero.scrolling-down .nav-link-cta { padding: 0 12px; } }

@media screen and (min-width: 680px) { .scrolled-past-hero.scrolling-down .nav-link-cta { padding: 0 18px; } }

.scrolled-past-hero.scrolling-down .nav-link-cta:hover { background-color: #5fcf80; color: #fff; }

.nav-link-learn::after { content: ''; position: relative; display: inline-block; margin-left: 4px; top: -1px; width: 12px; height: 7px; background-size: auto; background-repeat: no-repeat; background-position: center; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2010%22%3E%0D%0A%09%3Cpath%20fill%3D%22%237b8b8e%22%20d%3D%22M9.5%2C9.5c-0.4%2C0-0.7-0.1-1-0.4L2%2C3.1C1.4%2C2.5%2C1.3%2C1.6%2C1.9%2C1C2.5%2C0.4%2C3.4%2C0.3%2C4%2C0.9L9.5%2C6L15%2C0.9%0D%0A%09%09c0.6-0.6%2C1.6-0.5%2C2.1%2C0.1c0.6%2C0.6%2C0.5%2C1.6-0.1%2C2.1l-6.5%2C6C10.2%2C9.4%2C9.9%2C9.5%2C9.5%2C9.5z%22%2F%3E%0D%0A%3C%2Fsvg%3E"); }

.nav .nav-dropdown { position: relative; }

.nav .nav-dropdown.active .nav-toggle { border-bottom: 4px solid #53b16b; }

.nav .nav-dropdown-menu { display: none; position: absolute; top: 75px; left: 0; z-index: 999; background: #fff; border: 2px solid #cccccc; }

.nav .nav-dropdown.active .nav-dropdown-menu { display: flex; flex-direction: column; text-align: left; white-space: nowrap; }

.nav .nav-dropdown-menu a { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 40px; padding-inline: 24px; }

.nav .nav-dropdown-menu a:hover { background: #F0F0F0; }

.nav .nav-toggle { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 30px; border: none; font-weight: 500; color: #1a2126; background: #fff; }

.nav .nav-toggle:hover { cursor: pointer; }

.discount-banner { width: 100%; background-color: #3f4850; color: white; text-align: center; padding: 10px; position: absolute; top: 50px; }

@media screen and (min-width: 970px) { .discount-banner { top: 70px; } }

.discount-banner svg { fill: white; vertical-align: sub; height: 15px; }

.margin-top-35 { margin-top: 35px; }

@media screen and (max-width: 679px) { .margin-top-35 { margin-top: 70px; } }

.account-reactivation form .button { margin-top: 23px; height: 44px; }

.account-reactivation form .required { color: #ed5a5a; font-weight: 500; font-size: 16px; }

.account-reactivation .btn-left { float: left !important; }

.account-reactivation .btn-right { float: right !important; }

.account-reactivation .btn-left, .account-reactivation .btn-right { width: 30%; }

@media screen and (max-width: 679px) { .account-reactivation .btn-left, .account-reactivation .btn-right { width: 100%; margin: 0 0 15px 0; } }

.account-reactivation .reactivation-tabs h1 { display: inline; }

.account-reactivation .reactivation-tabs li.disabled { color: #2b363e; }

.account-reactivation .reactivation-tabs li.disabled a { color: #2b363e; }

.account-reactivation .reactivation-tabs li.disabled a:hover { cursor: not-allowed; color: #2b363e; }

.account-reactivation .tabbable-nav { padding: 0px 0px; }

@media screen and (max-width: 679px) { .account-reactivation .tabbable-nav { display: none; } }

@media screen and (min-width: 680px) { .account-reactivation .tabbable-nav { display: block; } }

.account-reactivation .tabbable-nav li { display: inline-block; margin-right: 10px !important; margin-left: 10px !important; }

.account-reactivation .tabbable-nav li.current a { color: #2d3339; }

.account-reactivation .tabbable-nav li.nav-align-right { float: right; margin-right: 0px; }

.account-reactivation .tabbable-nav a { color: #2b363e; display: block; font-size: 15px; font-weight: 700; }

.account-reactivation .tabbable-nav a:hover { color: #384047; }

.account-reactivation .tabbable-nav a.current, .account-reactivation .tabbable-nav a.selected { color: #2d3339; }

.account-reactivation .bold { font-weight: 500; }

.account-reactivation .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.account-reactivation .margin-bottom-20px { margin-bottom: 20px; }

.account-reactivation .discount-callout { display: inline-block; }

.account-reactivation #errorModal { display: none; z-index: 1010; }

.account-reactivation #errorModal .secondary-heading h1 { color: #e21919; }

.account-reactivation .modal-overlay { z-index: 1000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; }

.account-reactivation-auth .grid-container { margin: auto; }

.account-reactivation-auth h3 { margin-bottom: 10px; }

.account-reactivation .signin-form-container .grid-40 { padding-left: 0; }

@media screen and (max-width: 679px) { .account-reactivation .signin-form-container .grid-40 { padding: 0; } }

.account-reactivation .verification-form-container .grid-40 { padding-right: 0; }

@media screen and (max-width: 679px) { .account-reactivation .verification-form-container .grid-40 { padding: 0; } }

.account-reactivation #tab-auth-content .box-content { border-radius: 4px 4px 0 0; }

.account-reactivation #tab-auth-content .auth-data-item:not(:last-of-type) { padding: 0 0 17px 0; margin-bottom: 30px; border-bottom: 1px solid #e8ebed; }

.account-reactivation #tab-auth-content .grid-100, .account-reactivation #tab-auth-content .grid-60, .account-reactivation #tab-auth-content .grid-20 { padding: 0; }

.account-reactivation-change-password .grid-container { margin: auto; }

.account-reactivation-change-password h3 { padding-bottom: 30px; }

.account-reactivation #tab-plan-content .plan-basic .button, .account-reactivation #tab-plan-content .plan-pro .button, .account-reactivation #tab-billing-content .plan-basic .button, .account-reactivation #tab-billing-content .plan-pro .button { border-color: #d4d9dd; background-color: white; }

.account-reactivation #tab-plan-content .plan-basic .button:hover, .account-reactivation #tab-plan-content .plan-pro .button:hover, .account-reactivation #tab-billing-content .plan-basic .button:hover, .account-reactivation #tab-billing-content .plan-pro .button:hover { border-color: #a9b3bf; }

.account-reactivation #tab-plan-content .plan-basic .button.disabled:hover, .account-reactivation #tab-plan-content .plan-pro .button.disabled:hover, .account-reactivation #tab-billing-content .plan-basic .button.disabled:hover, .account-reactivation #tab-billing-content .plan-pro .button.disabled:hover { border-color: #d4d9dd; }

.account-reactivation #tab-plan-content .strikethrough, .account-reactivation #tab-billing-content .strikethrough { text-decoration: line-through; color: #ed5a5a; font-weight: 500; }

.account-reactivation #tab-plan-content .text-small, .account-reactivation #tab-billing-content .text-small { font-size: small; }

.account-reactivation #tab-plan-content .text-italic, .account-reactivation #tab-billing-content .text-italic { font-style: italic; }

.account-reactivation #tab-plan-content .shaded, .account-reactivation #tab-billing-content .shaded { background-color: #f9fafa; }

.account-reactivation #tab-plan-content .continue-plan .grid-66, .account-reactivation #tab-plan-content .continue-plan .grid-33, .account-reactivation #tab-billing-content .continue-plan .grid-66, .account-reactivation #tab-billing-content .continue-plan .grid-33 { padding: 0; }

.account-reactivation #tab-plan-content .continue-plan .text-align-left, .account-reactivation #tab-billing-content .continue-plan .text-align-left { text-align: left; }

.account-reactivation #tab-plan-content .continue-plan .data-item, .account-reactivation #tab-billing-content .continue-plan .data-item { padding: 0 !important; margin-bottom: 0 !important; text-align: center; }

@media screen and (max-width: 767px) { .account-reactivation #tab-plan-content .continue-plan .data-item, .account-reactivation #tab-billing-content .continue-plan .data-item { display: flex; flex-direction: column; } }

.account-reactivation #tab-plan-content .continue-plan .data-item dt, .account-reactivation #tab-plan-content .continue-plan .data-item dd, .account-reactivation #tab-billing-content .continue-plan .data-item dt, .account-reactivation #tab-billing-content .continue-plan .data-item dd { margin-bottom: 0 !important; padding: 12px !important; }

@media screen and (max-width: 767px) { .account-reactivation #tab-plan-content .continue-plan .data-item dt, .account-reactivation #tab-plan-content .continue-plan .data-item dd, .account-reactivation #tab-billing-content .continue-plan .data-item dt, .account-reactivation #tab-billing-content .continue-plan .data-item dd { height: 100%; font-size: 14px; } }

@media screen and (max-width: 767px) { .account-reactivation #tab-plan-content .continue-plan dl, .account-reactivation #tab-billing-content .continue-plan dl { display: flex; } }

.account-reactivation #tab-plan-content .continue-plan dt, .account-reactivation #tab-plan-content .continue-plan dd, .account-reactivation #tab-billing-content .continue-plan dt, .account-reactivation #tab-billing-content .continue-plan dd { font-size: 16px; }

@media screen and (max-width: 679px) { .account-reactivation #tab-plan-content .continue-plan h3, .account-reactivation #tab-billing-content .continue-plan h3 { margin-bottom: 15px; } }

.account-reactivation #tab-plan-content .techdegree-currency-notice, .account-reactivation #tab-billing-content .techdegree-currency-notice { font-size: x-small; padding: 5px; text-align: center; }

.account-reactivation #tab-plan-content .info-payment-details, .account-reactivation #tab-billing-content .info-payment-details { color: #7b8b8e; padding-left: 25px; }

.account-reactivation #tab-billing-content .button { line-height: 39px; }

.account-reactivation .continue-plan .grid-100, .account-reactivation .continue-plan .grid-40, .account-reactivation .continue-plan .grid-60 { padding: 0 !important; }

.account-reactivation .continue-plan dt { font-weight: 400; }

.account-reactivation .continue-plan .secondary-heading { display: flex; }

.account-reactivation .choose-new-plan-header { display: inline; margin-right: 10px; }

@media screen and (max-width: 679px) { .account-reactivation .choose-new-plan-header { display: block; margin-bottom: 10px; } }

.account-reactivation .star-small-icon { position: relative; top: 2px; fill: #6E7881; }

.account-reactivation-billing .box-content { border-radius: 4px 4px 0 0; }

.account-reactivation-billing h2 { display: inline; margin-right: 10px; }

@media screen and (max-width: 679px) { .account-reactivation-billing h2 { display: block; margin-bottom: 10px; } }

.account-reactivation #tab-review-content #submitBtnLoader { display: none; }

.account-reactivation #tab-review-content .loading:focus { background-color: transparent; }

.account-reactivation #tab-review-content .loading #submitBtnLoader { display: block; }

.account-reactivation #tab-review-content .loading #submitBtnTxt { display: none; }

.account-reactivation .reactivate-billing-cycle-form { margin-top: 20px; }

.account-reactivation .reactivate-billing-cycle-form .billing-option { display: flex; background-color: rgba(255, 255, 255, 0.1); border: none; cursor: pointer; float: left; margin: 0 10px 20px 0; outline: none; padding: 12px 15px; border-radius: 30px; }

@media screen and (max-width: 620px) { .account-reactivation .reactivate-billing-cycle-form .billing-option { width: 100%; margin: 0 0 10px; } }

.account-reactivation .reactivate-billing-cycle-form .billing-option:hover { background-color: rgba(255, 255, 255, 0.15); }

.account-reactivation .reactivate-billing-cycle-form .billing-option input[type=radio] { top: -2px; cursor: pointer; margin-right: 8px; }

.account-reactivation .reactivate-billing-cycle-form .billing-option label { color: #384047; left: 0; cursor: pointer; font-size: 16px; font-weight: 700; margin-bottom: 0; position: relative; vertical-align: middle; }

.account-reactivation .reactivate-billing-cycle-form .billing-option label .price { color: #fff; }

.account-reactivation .reactivate-billing-cycle-form .billing-option label .badge { background-color: rgba(255, 255, 255, 0.15); color: #fff; display: inline-block; font-size: 10px; margin: -3px 0 0 5px; padding: 4px 8px 5px; position: relative; text-transform: uppercase; vertical-align: middle; border-radius: 20px; }

@media screen and (max-width: 377px) { .account-reactivation .reactivate-billing-cycle-form .billing-option label .badge { margin-top: 10px; } }

.account-reactivation .reactivate-billing-cycle-form .billing-option.selected { background: #5fcf80; border-radius: 5px; }

.account-reactivation .reactivate-billing-cycle-form .billing-option.selected label { color: #fff; }

.account-reactivation .reactivate-billing-cycle-form .billing-option.selected label .price { color: #fff; }

.account-reactivation .reactivate-billing-cycle-form .billing-option.selected label .badge { background-color: #2e9a4e; color: #fff; }

.account-reactivation .reactivate-billing-cycle-form .billing-option label { top: 3px !important; }

.account-reactivation .reactivate-billing-cycle-form .billing-option label .price { color: #a6b0b7; }

.account-reactivation .reactivate-billing-cycle-form .billing-option label .badge { color: white; background-color: #373f46; }

.account-reactivation #new_payment_method { margin-top: 30px; }

.account-reactivation #new_payment_method .form-item-short .error-message { width: 100px; }

.account-reactivation .tabbable-billing label:hover { cursor: pointer; }
.referrals-action .referrals-link, .dashboard-controller.index-action .referrals-link { position: relative; }

.referrals-action .referrals-link:after, .dashboard-controller.index-action .referrals-link:after { content: "New"; text-transform: uppercase; background-color: #ed5a5a; color: #FFF; font-weight: 700; padding: 4px 5px; border-radius: 3px; font-size: 10px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 10px; }

.referrals-action .secondary-module, .dashboard-controller.index-action .secondary-module { margin-bottom: 0; }

.referral-header { color: #5a6772; margin-bottom: 25px; }

#referral_faq dt { margin-bottom: 5px; color: #3f8aBf; }

#referral_faq dd { margin-bottom: 20px; }

#referral_faq dd:last-child { padding-bottom: 0px; margin-bottom: 0px; }

#referral_faq .modal-close { top: 30px; right: 30px; }
.info-payment-details svg { margin-right: 5px; vertical-align: middle; width: 34px; height: 24px; }

.plan-container { display: flex; align-items: center; justify-content: center; }

@media screen and (max-width: 679px) { .plan-container { flex-direction: column; } }

.plan-card { min-height: 200px; position: relative; border: 2px solid #fff; }

.plan-card .grid-33 { position: relative; text-align: center; }

.plan-card h3 { margin-bottom: 12px; }

.plan-perks { margin-top: 4px; }

@media screen and (max-width: 679px) { .plan-perks { padding-bottom: 20px; } }

.plan-current { font-weight: 500; }

.plan-price { text-align: center; margin-bottom: 14px; }

.plan-price p { margin: 0; font-weight: 700; font-size: 16px; color: #546b7b; }

.plan-price-start { position: absolute; top: -35px; left: 0; right: 0; text-align: center; }

.plan-price h4 { font-size: 38px; margin: 0 0 5px; }

.plan-price span { font-weight: 700; font-size: 12px; display: block; }

.plan-price .plan-permonth, .plan-price .plan-perperiod { font-size: 16px; display: inline; }

.plan-group-pricing { position: absolute; bottom: 90px; left: 0; right: 0; text-align: center; display: block; color: #546b7b; }

.plan-cta { bottom: 30px; left: 30px; right: 30px; text-align: center; }

.plan-cta .button { text-overflow: ellipsis; overflow: hidden; padding: 0 10px; height: 60px; line-height: 58px; }

@media (max-width: 1200px) { .plan-cta .button { font-size: 13px; } }

@media screen and (max-width: 679px) { .plan-cta .button { font-size: 16px; } }

.plan-cta .secondary { color: #2b363e; }

.plan-basic { top: 0; }

.plan-basic .button { background: #5fcf80; border-color: #5fcf80; }

.plan-basic .button:hover { background: #3ac162; border-color: #3ac162; }

.plan-basic .plan-price h4 { color: #1a2126; }

.plan-basic .plan-price p, .plan-basic .plan-price span { color: #1a2126; }

.plan-basic .plan-perks.plus-list li:before { height: 12px; background: url("/assets/icons/icon-global-863d50621b14046616519056916ec67ac8a680fcb1c994a27ec6c1a92e9569d5.svg") no-repeat -155px -61px !important; float: left; margin: 5px 0 0 -24px; }

.plan-pro .button { background: #3f8abf; border-color: #3f8abf; }

.plan-pro .button:hover { background: #326e99; border-color: #326e99; }

.plan-pro .plan-price h4 { color: #3f8abf; }

.plan-pro .plan-price p, .plan-pro .plan-price span { color: #1a2126; }

.plan-techdegree .button.primary, .plan-techdegree-selection .button.primary { background: #8363b2; border-color: #8363b2; }

.plan-techdegree .button.primary:hover, .plan-techdegree-selection .button.primary:hover { background: #6a4b97; border-color: #6a4b97; }

.plan-techdegree .disabled.primary, .plan-techdegree-selection .disabled.primary { background: transparent; border-color: #c7b8dc; color: #c7b8dc; }

.plan-techdegree .disabled.primary:hover, .plan-techdegree-selection .disabled.primary:hover { background: transparent; border-color: #c7b8dc; color: #c7b8dc; }

.plan-techdegree .plan-price h4, .plan-techdegree-selection .plan-price h4 { color: #8363b2; }

.plan-techdegree .plan-price p, .plan-techdegree .plan-price span, .plan-techdegree-selection .plan-price p, .plan-techdegree-selection .plan-price span { color: #1a2126; }

.plan-selected { border-color: #5fcf80; box-shadow: none; border: 3px #5fcf80 solid; background-color: #fff; }

.plan-selected:before { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 60px 60px 0; border-color: transparent #5fcf80 transparent transparent; }

.plan-selected:after { width: 36px; height: 36px; border-radius: 5px; position: absolute; top: 0; right: 0; overflow: hidden; background-image: url("/assets/icons/icon-check-white-0546430152633df7299dc61047ca1d540b5a0cd8f09b288708a143f2a968b3dd.svg"); background-repeat: no-repeat; background-position: center; }

.plan-selected.plan-pro { border-color: #3f8abf; }

.plan-selected.plan-pro:before { border-color: transparent #3f8abf transparent transparent; }

.plan-selected.plan-techdegree { border-color: #8363b2; }

.plan-selected.plan-techdegree:before { border-color: transparent #8363b2 transparent transparent; }

.plan-selected.plan-techdegree .plan-selected-degree { font-weight: 700; }

.plan-techdegree-selection:after { content: ""; display: block; background: #fff; border-radius: 4px; width: 30px; height: 30px; position: absolute; right: 16.66%; top: -7px; margin-right: -30px; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.plan-techdegree-selection-info { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-left: 5px; width: 24px; height: 24px; }

.plan-techdegree-selection-info:before, .plan-techdegree-selection-info:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.plan-techdegree-selection-info:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.plan-techdegree-selection-info:after { content: "Learn more about Techdegrees"; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.plan-techdegree-selection-info:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.plan-techdegree-selection-info:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.plan-techdegree-selection-info-icon { fill: #8e969d; }

a:hover .plan-techdegree-selection-info-icon { fill: #737d85; }

.plan-techdegree-selection-list { margin: 10px -15px 0px; }

.plan-techdegree-selection-list:before, .plan-techdegree-selection-list:after { content: " "; display: table; }

.plan-techdegree-selection-list:after { clear: both; }

.plan-techdegree-selection-list li { height: 124px; }

@media (max-width: 1200px) { .plan-techdegree-selection-list li { width: 100%; } }

.plan-techdegree-selection-list label { display: block; border-radius: 4px; padding-right: 80px; margin-bottom: 30px; }

.plan-techdegree-selection-list h4 { font-size: 16px; color: #101417; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 30px 0 5px 60px; }

.plan-techdegree-selection-list h4:before { content: ""; width: 16px; height: 16px; border: 2px solid #d4d9dd; background-color: #fff; border-radius: 20px; float: left; margin: 6px 0 0 -40px; }

.plan-techdegree-selection-list span { margin: -10px 0 20px 60px; display: block; padding-bottom: 25px; color: #2b363e; height: 40px; }

.plan-techdegree-selection-list strong { float: right; font-size: 16px; color: #2b363e; margin-right: -60px; padding: 40px 0; }

.plan-techdegree-selection-list input:checked ~ label strong, .plan-techdegree-selection-list input:checked ~ label span { color: rgba(255, 255, 255, 0.7); }

.plan-techdegree-selection-list input:checked ~ label h4 { color: #fff; }

.plan-techdegree-selection-list input:checked ~ label h4:before { border-color: #fff; border-width: 4px; background: #d4d9dd; }

.plan-techdegree-selection-list input:checked ~ label svg { fill: rgba(255, 255, 255, 0.7); }

.plan-techdegree-selection-list input:checked ~ label a:hover svg { fill: #fff; }

.plan-techdegree-selection-list input:not(:checked) ~ label { background-color: #f9fafa !important; }

.plan-techdegree-selection-list input:not(:checked) ~ label:hover { background: #f3f5f6 !important; cursor: pointer; }

.plan-techdegree-selection .plan-referrals-info h5 { margin-bottom: 5px; }

.plan-techdegree-info-anchor { position: relative; top: 3px; left: 4px; }

.plan-techdegree-info-anchor:before, .plan-techdegree-info-anchor:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.plan-techdegree-info-anchor:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); left: 50%; border-radius: 3px 0 0 0; }

.plan-techdegree-info-anchor:after { content: "Learn more"; font: 400 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; top: 100%; }

.plan-techdegree-info-anchor:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); }

.plan-techdegree-info-anchor:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }

.plan-techdegree-info-anchor svg { fill: #8e969d; }

.plan-techdegree-info-anchor:hover svg, .plan-techdegree-info-anchor:focus svg { fill: #737d85; }

.techdegree-topic-selection { margin-top: 20px; }

.techdegree-topic-selection .button.disabled.button-select { color: #7b8b8e; }

.pause-cancel-cta { display: flex; gap: 30px; margin-top: 20px; }

@media screen and (max-width: 679px) { .pause-cancel-cta { flex-wrap: wrap; padding: 0 30px; } }

.pause-cancel-cta div { flex-basis: 50%; display: flex; flex-direction: column; }

@media screen and (max-width: 679px) { .pause-cancel-cta div { flex-basis: 100%; } }

@media screen and (min-width: 680px) { .pause-cancel-cta #pause-enrollment-cta { padding-right: 30px; } }

@media screen and (max-width: 679px) { .pause-cancel-cta #cancel-enrollment-cta { margin-top: 15px; } }

.pause-cancel-cta #pause-enrollment-cta h3, .pause-cancel-cta #cancel-enrollment-cta h3 { margin-bottom: 12px; }

.pause-cancel-cta #pause-enrollment-cta p, .pause-cancel-cta #cancel-enrollment-cta p { line-height: 1.6; margin-bottom: 22px; }

.pause-cancel-cta #pause-enrollment-cta p a, .pause-cancel-cta #cancel-enrollment-cta p a { font-weight: 700; color: #3f8abf; }

.pause-cancel-cta #pause-enrollment-cta .button, .pause-cancel-cta #cancel-enrollment-cta .button { margin-top: auto; margin-bottom: 20px; }

#scholarship div { display: flex; margin-top: 10px; gap: 60px; }

#scholarship a:first-child { width: 93%; }

.business-callout { position: relative; padding-left: 60px; margin-top: 30px; margin-bottom: 30px; }

.business-callout .organizations_outline-icon { width: 44px; fill: #a9b3bb; position: absolute; top: 3px; left: 0; }

.business-callout .right-arrow-icon { fill: #3f8abf; position: relative; top: 1px; left: 3px; }

.business-callout-heading { margin-bottom: 10px; }

.business-callout-text { margin-bottom: 12px; }

.business-callout-anchor { font-weight: 700; }

.business-callout-anchor:hover .right-arrow-icon, .business-callout-anchor:active .right-arrow-icon, .business-callout-anchor:focus .right-arrow-icon { fill: #326e99; }

.accounts-unsubscribe-confirmation .m-t-30 { margin-top: 30px; }

.accounts-unsubscribe-confirmation .m-b-15 { margin-bottom: 15px; }

.org-sub-detail { font-size: 18px; }

.org-sub-moreseats { background-color: #f9fafa; padding: 10px; border-radius: 5px; display: block; font-size: 13px; color: #7b8b8e; line-height: 1.5; }
#filter-breadcrumb { display: none; background-color: #fff; border-top: 1px solid #e8ebed; padding: 22px 30px; }

#filter-breadcrumb-tags li { color: #384047; display: inline-block; font-weight: 700; line-height: 1.6; margin-right: 10px; }

#filter-breadcrumb-tags li a { display: inline-block; }

#filter-breadcrumb-tags li a:not(.has-topic-color) { color: #2b363e; }

#filter-breadcrumb-tags li a:hover:not(.has-topic-color) { color: #101417; }

#filter-breadcrumb-tags li:not(:last-child):not(:nth-last-child(2)):not(:first-child):after { color: #5e788a; content: ">"; margin-left: 10px; }

#filter-breadcrumb-tags li.clear-results { position: absolute; right: 20px; }

#filter-breadcrumb-tags li.clear-results:hover svg { fill: #1a2126; }

#filter-breadcrumb-tags li.clear-results svg { fill: #4a5d6c; }
.content-tag { background: #e8ebed; padding: 14px 10px 13px 15px; margin-bottom: 20px; border: 2px solid #e8ebed; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1 !important; }

.content-tag:before, .content-tag:after { content: " "; display: table; }

.content-tag:after { clear: both; }

.content-tag > .icon { margin-top: -2px !important; margin-right: 8px; }

.content-tag .button-close { float: right; margin: -5px 0; }
#community-disclaimer svg { fill: #d4d9dd; position: absolute; top: 50%; margin-top: -12px; }

#community-disclaimer p { font-size: 13px; margin: 0; color: #2b363e; }

@media screen and (min-width: 680px) { #community-disclaimer p { margin-left: 54px; } }

@media screen and (max-width: 679px) { #community-disclaimer p { margin-left: 44px; } }

#community-disclaimer a { font-weight: 700; color: #1a2126; transition: color 0.3s ease; }

#community-disclaimer a:hover { color: black; }
.discussion-list { margin: 1px 0 0; }

.discussion-item { padding: 25px 0; border-bottom: 1px solid #f0f2f4; position: relative; }

.discussion-item:before, .discussion-item:after { content: " "; display: table; }

.discussion-item:after { clear: both; }

.discussion-item-suggested { background: #f9fafa; }

@media screen and (min-width: 680px) { .discussion-item-sticky { margin: 0 -30px -1px -30px; padding-left: 30px; padding-right: 30px; } }

@media screen and (max-width: 679px) { .discussion-item-sticky { margin-right: -20px; margin-left: -20px; padding-left: 20px; padding-right: 20px; } }

.discussion-avatar { float: left; }

@media screen and (min-width: 680px) { .discussion-meta { margin: 0 80px 0 78px; } }

@media screen and (max-width: 679px) { .discussion-meta { margin: 0 70px 0 68px; } }

.discussion-tags { position: relative; overflow: hidden; white-space: nowrap; margin: 15px 0 0; }

.discussion-tags:after { content: ""; position: absolute; height: 100%; width: 20px; top: 0; right: 0; background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }

.discussion-item-suggested .discussion-tags:after { background-image: -webkit-linear-gradient(left, rgba(249, 250, 250, 0), #f9fafa); background-image: linear-gradient(to right, rgba(249, 250, 250, 0), #f9fafa); }

.discussion-tag { margin-bottom: 0 !important; }

.discussion-tag.topic-html .has-topic-color { border-color: #3659a2 !important; color: #3659a2 !important; }

.discussion-tag.topic-css .has-topic-color { border-color: #3659a2 !important; color: #3659a2 !important; }

.discussion-tag.topic-javascript .has-topic-color { border-color: #3659a2 !important; color: #3659a2 !important; }

.discussion-tag.topic-java .has-topic-color { border-color: #008297 !important; color: #008297 !important; }

.discussion-tag.topic-ruby .has-topic-color { border-color: #008297 !important; color: #008297 !important; }

.discussion-tag.topic-business .has-topic-color { border-color: #9b3b5a !important; color: #9b3b5a !important; }

.discussion-tag.topic-php .has-topic-color { border-color: #008297 !important; color: #008297 !important; }

.discussion-tag.topic-ios .has-topic-color { border-color: #30826C !important; color: #30826C !important; }

.discussion-tag.topic-android .has-topic-color { border-color: #30826C !important; color: #30826C !important; }

.discussion-tag.topic-design .has-topic-color { border-color: #4a4290 !important; color: #4a4290 !important; }

.discussion-tag.topic-development-tools .has-topic-color { border-color: #9b3b5a !important; color: #9b3b5a !important; }

.discussion-tag.topic-python .has-topic-color { border-color: #008297 !important; color: #008297 !important; }

.discussion-tag.topic-digital-literacy .has-topic-color { border-color: #9b3b5a !important; color: #9b3b5a !important; }

.discussion-tag.topic-csharp .has-topic-color { border-color: #008297 !important; color: #008297 !important; }

.discussion-tag.topic-databases .has-topic-color { border-color: #9F4B84 !important; color: #9F4B84 !important; }

.discussion-tag.topic-go .has-topic-color { border-color: #733a88 !important; color: #733a88 !important; }

.discussion-tag.topic-apis .has-topic-color { border-color: #008297 !important; color: #008297 !important; }

.discussion-tag.topic-data-analysis .has-topic-color { border-color: #9F4B84 !important; color: #9F4B84 !important; }

.discussion-tag.topic-security .has-topic-color { border-color: #409BE9 !important; color: #409BE9 !important; }

.discussion-tag.topic-quality-assurance .has-topic-color { border-color: #9b3b5a !important; color: #9b3b5a !important; }

.discussion-tag.topic-machine-learning .has-topic-color { border-color: #733a88 !important; color: #733a88 !important; }

.discussion-tag.topic-ai .has-topic-color { border-color: #733A88 !important; color: #733A88 !important; }

.discussion-tag.topic-undefined .has-topic-color { border-color: #55616c !important; color: #55616c !important; }

.discussion-title { font-weight: 700; font-size: 16px; padding: 4px 0; line-height: 1.4; word-wrap: break-word; }

.discussion-title a { color: #384047; }

.discussion-title a:hover { color: #2d3339; text-decoration: underline; }

.discussion-byline { font-size: 13px; color: #2b363e; margin: 0; line-height: 1.4; }

@media screen and (min-width: 680px) { .discussion-question .discussion-byline { margin-top: 1px; } }

@media screen and (max-width: 679px) { .discussion-question .discussion-byline { padding-top: 6px; } }

@media screen and (min-width: 680px) { .discussion-answer .discussion-byline { margin: 3px 0 9px; } }

@media screen and (max-width: 679px) { .discussion-answer .discussion-byline { padding-top: 7px; } }

@media screen and (min-width: 680px) { .discussion-comment .discussion-byline { margin-top: 7px; } }

@media screen and (min-width: 680px) { .discussion-answer .discussion-byline-time, .discussion-comment .discussion-byline-time { margin-left: 4px; } }

@media screen and (max-width: 679px) { .discussion-answer .discussion-byline-time, .discussion-comment .discussion-byline-time, .discussion-question .discussion-byline-time { display: block; } }

.discussion-byline a { font-size: inherit; font-weight: 700; color: #2b363e; }

.discussion-answer .discussion-byline a, .discussion-comment .discussion-byline a { color: #1a2126; }

.discussion-byline a:hover { color: #050708; }

.discussion-author { font-weight: 700; }

.discussion-answer-checkmark { fill: #5fcf80; width: 18px; height: 100%; }

.discussion-answer-info { margin: 0; text-align: center; line-height: 1.4; font-size: 12px; color: #2b363e; position: absolute; top: 25px; right: 0; }

.discussion-best-answer .discussion-answer-info { color: #86db9f; }

.discussion-answer-count { font-size: 22px; font-weight: 700; color: #101417; display: block; }

.discussion-best-answer .discussion-answer-count { color: #5fcf80; }

.discussion-dismiss { background: none; border: none; paddin: 0; margin: 0; outline: none; cursor: pointer; position: absolute; top: 25px; right: 30px; }

.discussion-dismiss-icon { fill: #8e969d; }

.discussion-dismiss:hover .discussion-dismiss-icon { fill: #5b636a; }
.post-preview-toggle { width: 30px; height: 31px; float: right; background: url("/assets/icons/icon-preview-c5e68f1e3340a89b188d78438d9a32ba8f8f56318698957d9ce0425acc09e4fb.svg") no-repeat 5px 8px; background-color: #f3f5f6; background-size: 60px 16px; border-radius: 4px; margin: -54px 9px 0 0; text-indent: -9999px; position: relative; display: none; }

.post-preview-toggle .tooltip { display: none; margin-bottom: 5px; }

@media screen and (max-width: 767px) { .post-preview-toggle .tooltip { display: none !important; } }

.post-preview-toggle .tooltip strong { text-indent: 0; }

.post-preview-toggle:hover .tooltip { display: block; }

.post-preview-toggle.selected { background: url("/assets/icons/icon-preview-c5e68f1e3340a89b188d78438d9a32ba8f8f56318698957d9ce0425acc09e4fb.svg") no-repeat -37px 8px; background-color: #f3f5f6; background-size: 60px 16px; }
.discussions-counter { background: #8d9aa5; color: #fff; padding: 2px 6px; line-height: 8px; border-radius: 3px; font-size: 10px; font-style: normal; position: relative; top: -1px; margin-left: 6px; transition: opacity 0.3s ease; }
.discussion-answer { position: relative; border-top: 2px solid #f0f2f4; padding: 25px 0; }

@media screen and (min-width: 680px) { .discussion-answer { padding-left: 70px; } }

@media screen and (max-width: 679px) { .discussion-answer .discussion-tools { float: right; } }

.discussion-answer:before, .discussion-answer:after { content: " "; display: table; }

.discussion-answer:after { clear: both; }

.discussion-answer:last-child { border: none; }

.discussion-answer .markdown-zone { padding-right: 60px; word-break: break-word; }

@media screen and (max-width: 679px) { .discussion-answer .markdown-zone { padding-right: 0; } }

.discussion-answer .markdown-zone ul, .discussion-answer .markdown-zone ol { list-style: inside; font-size: 14px; margin-bottom: 20px; }

.discussion-answer .markdown-zone h1, .discussion-answer .markdown-zone h2 { font-size: 18px; font-weight: 700; }

.discussion-answer .markdown-zone h3 { font-size: 17px; font-weight: 700; }

.discussion-answer .markdown-zone h4, .discussion-answer .markdown-zone h5 { font-size: 16px; font-weight: 700; }

.discussion-answer .markdown-zone p:last-child { margin-bottom: 0; }

.discussion-answer-comments { clear: both; }

@media screen and (max-width: 679px) { .discussion-answer-text { width: 100%; display: block; margin-top: 20px; } }

.discussion-answer-text p { line-height: 1.5; }

.discussion-answer-text p:not(:last-child) { margin-bottom: 15px; }

.discussion-answer-text a { color: #3f8abf; font-weight: 700; }

.discussion-answer-text blockquote { border-left: 4px solid #d4d9dd; display: block; margin-left: 0; padding-left: 20px; }

.discussion-answer-text blockquote p { color: #1a2126; padding-top: 2px; }

@media screen and (min-width: 680px) { .discussion-answer-avatar { position: absolute; top: 25px; left: 0; }
  .discussion-answer-best .discussion-answer-avatar { left: 30px; } }

@media screen and (max-width: 679px) { .discussion-answer-avatar { float: left; margin-right: 20px; }
  .discussion-answer-post .discussion-answer-avatar { display: none; } }

.discussion-answer-best { border: 2px solid #c1ecce; border-width: 2px 0; background: #f0fbf3; position: relative; z-index: 1; }

.discussion-answer-best:before, .discussion-answer-best:after { content: " "; display: table; }

.discussion-answer-best:after { clear: both; }

@media screen and (min-width: 680px) { .discussion-answer-best { margin: -27px -30px -27px -100px; padding: 25px 30px 25px 100px; } }

@media screen and (max-width: 679px) { .discussion-answer-best { margin: -27px -20px -27px -20px; padding: 25px 20px; } }

.discussion-answer-best .discussion-tools { background: #FFF; opacity: 1; }

.discussion-answer-best .vote-best-answer:after { background-position: -155px -49px; }

.discussion-answer-best .vote-best-answer a { color: #5fcf80; }

.discussion-answer-best .discussion-commenting { border-color: #d5f2dd; }

.discussion-answer-voting { margin-bottom: 0; white-space: nowrap; position: absolute; top: 28px; right: 0; z-index: 20; background: #fff; padding-left: 20px; }

@media screen and (max-width: 679px) { .discussion-answer-voting { z-index: 1; } }

@media screen and (min-width: 680px) { .discussion-answer-best .discussion-answer-voting { right: 30px; } }

@media screen and (max-width: 679px) { .discussion-answer-best .discussion-answer-voting { right: 20px; } }

.discussion-answer-best .discussion-answer-voting .vote-up a { background: #FFF; }

.discussion-answer-best .discussion-answer-voting .vote-up a:hover { background: #55616c; }

.discussion-answer-best .discussion-answer-voting .vote-up a.voted { background: #55616c; }

.discussion-answer-voting li { font-weight: 700; list-style-type: none; vertical-align: top; }

.discussion-answer-voting a { color: #1a2126; }

.discussion-answer-voting .vote-count { display: block; text-align: center; width: 100%; font-size: 12px; padding: 0; }

.discussion-answer-voting .vote-count-zero { color: #2b363e; }

.discussion-answer-voting .vote-up { width: 28px; }

.discussion-answer-voting .vote-up a { display: block; padding: 4px 0 5px 0; background: #edeff0; border-radius: 4px; text-align: center; }

.discussion-answer-voting .vote-up a:hover { background: #55616c; }

.discussion-answer-voting .vote-up a:hover .vote-count { color: #FFF; }

.discussion-answer-voting .vote-up a:hover svg { fill: #FFF; opacity: 1; }

.discussion-answer-voting .vote-up a svg { opacity: 0.5; margin-bottom: -2px; transition: 0; }

.discussion-answer-voting .vote-up .voted { background: #55616c; }

.discussion-answer-voting .vote-up .voted strong { color: #FFF; }

.discussion-answer-voting .vote-up .voted svg { fill: #FFF; opacity: 1; }

.discussion-answer-voting .vote-down { padding: 4px 0; text-align: center; }

.discussion-answer-voting .vote-down .voted svg { fill: #ed5a5a; opacity: 1; }

.discussion-answer-voting .vote-down svg { opacity: 0.5; }

.discussion-answer-voting .vote-down svg:hover { opacity: 1; fill: #ed5a5a; }

.discussion-answer-post { position: relative; border-top: 2px solid #f0f2f4; padding: 30px 0 0 70px; }

@media screen and (max-width: 679px) { .discussion-answer-post { padding-top: 15px; padding-left: 0; } }

.discussion-answer-post .form-footer .button-secondary { display: none; }

.discussion-answer-post .form-footer .button-secondary .discussion-mobile-buttons { display: inline-block; }

.discussion-answer-post .posting-name { margin-bottom: 10px; }

.discussion-answer-post .markdown-zone a { color: #326e99; }
.discussion-suggestion-container { max-width: 870px; margin: 30px 0; padding: 30px 0 0; border-top: 2px solid #f0f2f4; }

.discussion-suggestion-container:before, .discussion-suggestion-container:after { content: " "; display: table; }

.discussion-suggestion-container:after { clear: both; }

@media screen and (min-width: 680px) { .discussion-suggestion-container { margin-left: 70px; } }

.discussion-suggestion-description { color: #2b363e; }

.discussion-suggestion-list { list-style: none; padding-top: 15px; }

.discussion-suggestion-list:before, .discussion-suggestion-list:after { content: " "; display: table; }

.discussion-suggestion-list:after { clear: both; }

.discussion-suggestion-item { padding: 3px 0 15px; margin-bottom: 15px; }

.discussion-suggestion-item:not(:last-child) { border-bottom: 1px solid #f0f2f4; }

.discussion-suggestion-avatar { float: left; margin-right: 15px; }

.discussion-suggestion-button { float: right; margin: 2px 0 0 10px; }

.discussion-suggestion-button.button-posted { background: #fff; color: #2b363e !important; text-shadow: none; padding: 11px 14px 13px; border: 2px solid #f0f2f4 !important; box-shadow: none; transition: background .2s; }

.discussion-suggestion-heading { font-size: 14px; padding: 1px 0 4px; font-weight: 700; }

.discussion-suggestion-byline { margin: 0; font-size: 13px; font-weight: 700; color: #2b363e; }

.discussion-suggestion-byline-bullet { padding: 0 5px; color: #546b7b; }
#asked-to-answer-banner { background: #f9fafa; border-bottom: 1px solid #f0f2f4; color: #2b363e; font-size: 13px; line-height: 1.6; position: relative; }

@media screen and (min-width: 680px) { #asked-to-answer-banner { padding: 20px 60px 20px 30px; margin: -30px -30px 30px; } }

@media screen and (max-width: 679px) { #asked-to-answer-banner { padding: 15px 40px 15px 20px; margin: -20px -20px 30px; } }

#asked-to-answer-banner .time { white-space: nowrap; }

#asked-to-answer-banner a { color: #1a2126; font-weight: 700; }

#asked-to-answer-banner a:hover { color: #101417; text-decoration: underline; }

#asked-to-answer-banner a.member-points { display: none; }

#asked-to-answer-banner a.dismiss-post { position: absolute; top: 50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

@media screen and (min-width: 680px) { #asked-to-answer-banner a.dismiss-post { right: 30px; } }

@media screen and (max-width: 679px) { #asked-to-answer-banner a.dismiss-post { right: 20px; } }

#asked-to-answer-banner a.dismiss-post:hover svg { fill: #101417; }

#asked-to-answer-banner a.dismiss-post svg { fill: #2b363e; }
#forum-post-meta { padding-top: 0; padding-bottom: 0; border-top-width: 4px; border-top-style: solid; }

@media screen and (min-width: 680px) { #forum-post-meta { height: 70px; } }

@media screen and (max-width: 679px) { #forum-post-meta { height: 60px; } }

#forum-post-actions { float: right; position: relative; margin-top: 11px; }

#forum-post-actions li { display: inline; float: right; }

#forum-post-actions li .button { margin: 0; }

@media screen and (max-width: 679px) { #forum-post-actions li .button { height: 30px; padding: 0 10px; font-size: 13px; line-height: 28px; }
  .ff #forum-post-actions li .button { line-height: 26px; } }

@media screen and (max-width: 969px) { .has-step #forum-post-follow-cta span { display: none; } }

#forum-post-step-cta { margin-left: 10px; }

@media screen and (max-width: 679px) { #forum-post-step-cta svg { display: none; } }

#forum-post-breadcrumb { display: flex; margin: 0; color: #c5cbcc; overflow: hidden; position: relative; height: 90%; }

@media screen and (min-width: 680px) { #forum-post-breadcrumb { line-height: 62px; } }

@media screen and (max-width: 679px) { #forum-post-breadcrumb { line-height: 52px; } }

@media screen and (max-width: 969px) { #forum-post-breadcrumb { font-size: 13px; } }

#forum-post-breadcrumb:after { position: absolute; top: 0; bottom: 0; right: 0; width: 40px; content: ""; background-image: -webkit-linear-gradient(left, rgba(249, 250, 250, 0), #f9fafa 40%, #f9fafa); background-image: linear-gradient(to right, rgba(249, 250, 250, 0), #f9fafa 40%, #f9fafa); }

#forum-post-breadcrumb a { font-weight: 700; transition: color 0.3s ease; white-space: nowrap; }

#forum-post-breadcrumb a:not(.has-topic-color) { color: #1a2126; }

#forum-post-breadcrumb a:hover:not(.has-topic-color) { color: #3f474f; }

#forum-post-breadcrumb a:not(:last-child):after { margin: 0 0.75em; content: ">"; color: #c5cbcc; font-weight: 400; }
.discussion-comment-avatar { position: absolute; top: 20px; }

@media screen and (min-width: 680px) { .discussion-comment-avatar { left: -50px; } }

@media screen and (max-width: 679px) { .discussion-comment-avatar { float: right; right: 0; top: 15px; } }

#forum-post-question-container, #forum-post-answers-container { max-width: 940px; }

#forum-post-answers-container { margin: 30px 0; }

@media screen and (max-width: 679px) { #forum-post-answers-container .discussion-comment { padding-left: 42px; } }

#forum-post-answer { max-width: 940px; }

.discussion-comments-container:not(.empty) { margin-top: -5px; margin-bottom: 15px; }

@media screen and (min-width: 680px) { .discussion-comments-container { margin-left: 70px; } }

.discussion-comments { position: relative; margin: 0 0 -1px 0; padding: 16px 0 40px; border-bottom: 1px solid #f0f2f4; }

@media screen and (max-width: 679px) { .discussion-comments { padding-left: 0; } }

.discussion-comments:before, .discussion-comments:after { content: " "; display: table; }

.discussion-comments:after { clear: both; }

.discussion-comments .posting-name { margin-bottom: 10px; }

.discussion-comment { border: none; position: relative; padding: 20px 0; }

.discussion-comment:before, .discussion-comment:after { content: " "; display: table; }

.discussion-comment:after { clear: both; }

.discussion-comment p { color: #2b363e; }

.discussion-comment .time { display: inline-block; color: #2b363e; }

.discussion-comment .bullet { padding: 0 5px; display: inline-block; color: #2b363e; }

.discussion-comment .byline { margin: -1px 0 0 0; }

.discussion-comment .discussion-tools { margin-top: 15px; }

.comment { clear: both; border-top: 1px solid #f3f5f6; }

@media screen and (max-width: 679px) { .comment { padding-left: 20px; } }

.comment:last-child { border-bottom: none; }

.discussion-tools { float: left; margin: 0; background-color: #edeff0; border-radius: 3px; width: 28px; height: 14px; position: relative; }

.discussion-tools:hover .popover-toggle { opacity: 1; cursor: pointer; }

.discussion-tools .popover-toggle { position: relative; float: right; width: 28px; height: 14px; padding: 5px; }

.discussion-tools .popover-toggle svg { fill: #2b363e; }

.discussion-tools .popover-toggle:not(:hover) svg { opacity: 0.65; }

.discussion-tools .popover-toggle .popover { display: none; }

.discussion-commenting { width: 100%; position: relative; padding: 15px 0; margin: 15px 0 0; z-index: 2; border-top: 1px solid #f3f5f6; }

.discussion-commenting:before, .discussion-commenting:after { content: " "; display: table; }

.discussion-commenting:after { clear: both; }

.discussion-commenting a { color: #2b363e; font-weight: 700; font-size: 13px; float: left; margin-right: 20px; }

.discussion-commenting a:hover { color: #1a2126; }

.discussion-commenting a .icon-reply { margin: -3px 0 -1px 2px; }

.discussion-commenting a .button { background: #3f8abf; padding: 8px 11px 7px 11px; font-size: 13px; font-weight: 700; margin: 0; color: #b2bac2; display: inline-block; vertical-align: middle; border-radius: 4px; border-bottom-width: 2px; }

@media screen and (max-width: 679px) { .discussion-question-container .discussion-commenting { margin-left: 0; }
  .discussion-question-container .discussion-tools { bottom: 0; float: right; }
  .discussion-question-container .comment .discussion-tools { float: left; }
  .discussion-question-container .discussion-comment { margin-left: 0; padding-left: 42px; } }

.user-tagging { padding: 5px; background: rgba(45, 51, 57, 0.95); display: none; position: absolute; top: 102%; left: 0; right: 0; border-radius: 5px; width: 260px; z-index: 1; }

.user-tagging:before { content: ""; position: absolute; bottom: 100%; left: 15px; width: 22px; height: 8px; background: url("/assets/icons/icon-global-863d50621b14046616519056916ec67ac8a680fcb1c994a27ec6c1a92e9569d5.svg") no-repeat -120px -8px; }

.user-tagging.offscreen:before { right: 15px; left: unset; }

.user-tagging ul { margin: 0; }

.user-tagging li { font-size: 14px; list-style-type: none; }

.user-tagging li:hover a, .user-tagging li.active a { background: #4e5a64; }

.user-tagging li:hover strong, .user-tagging li.active strong { color: #fff; }

.user-tagging a { display: flex; align-items: center; min-height: 35px; padding: 5px; border-radius: 3px; }

.user-tagging strong { font-weight: 700; display: block; color: #698599; font-size: 14px; padding-top: 2px; }

.user-tagging p { font-size: 12px; color: #6f8a9d; margin: 0; margin-bottom: 5px !important; }

.user-tagging-content-block { display: inline-block; margin-left: 15px; width: 75%; }

.discussion-comment-text p { font-size: 13px; line-height: 1.5; margin-bottom: 15px; }

@media screen and (max-width: 679px) { .discussion-comment-text p { padding-right: 0; } }

.discussion-comment-text p:last-child { margin-bottom: 0; }

.discussion-comment-text a { color: #3f8abf; font-weight: 700; }

.discussion-comment-text blockquote p { color: #2b363e; padding-top: 2px; }

.discussion-comment-text blockquote p:last-child { margin-bottom: 15px; }

.discussion-comment-text .markdown-zone { word-break: break-word; margin-top: 10px; margin-right: 60px; }

@media screen and (max-width: 679px) { .discussion-comment-text .markdown-zone { margin-right: 0; } }

.discussion-comment-text .markdown-zone .highlight { margin-bottom: 12px; }

.discussion-comment-text .byline a { color: #2b363e; white-space: nowrap; margin-right: 8px; }

.discussion-comment-text .byline .time { display: inline-block !important; color: #2b363e !important; white-space: nowrap; }
.discussion-answer-post .form-item p, .discussion-comments .form-item p, .discussion-comment .form-item p, .discussion-question .form-item p, .discussion-edit .form-item p { font-size: 13px; margin-bottom: 25px; }

.discussion-answer-post .form-footer label, .discussion-comments .form-footer label, .discussion-comment .form-footer label, .discussion-question .form-footer label, .discussion-edit .form-footer label { font-size: 13px; }

.discussion-answer-post .mentions-input-box textarea, .discussion-comments .mentions-input-box textarea, .discussion-comment .mentions-input-box textarea, .discussion-question .mentions-input-box textarea, .discussion-edit .mentions-input-box textarea { line-height: 1.5 !important; }

.discussion-edit { padding-bottom: 20px; }

.discussion-edit:before, .discussion-edit:after { content: " "; display: table; }

.discussion-edit:after { clear: both; }

.discussion-edit .form-item { margin-top: 2px; }

.discussion-answer .discussion-edit .form-item { margin-top: 5px; }

.start-discussion-callout:before, .start-discussion-callout:after { content: " "; display: table; }

.start-discussion-callout:after { clear: both; }

.start-discussion-callout .button { margin-bottom: 5px; }

.start-discussion-callout p { font-size: 14px; line-height: 1.4; color: #a9b3bb; }

.start-discussion-callout a { font-weight: 700; color: #1a2126; }

.markdown-cheatsheet h3 { font-size: 16px; font-weight: 700; color: #101417; }

.markdown-cheatsheet p { font-size: 13px !important; color: #1a2126 !important; line-height: 1.5; margin-bottom: 15px; }

.markdown-cheatsheet p a { font-weight: 700; color: #101417; }

.markdown-cheatsheet p a:hover { color: #384047; }

.markdown-cheatsheet pre { font-size: 13px; color: #1a2126 !important; line-height: 1.5; }

.markdown-cheatsheet h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; color: #101417; }

.tagsinput { background: #e8ebed; margin: 0; color: #8d9aa5; padding: 0 4px; border: 2px solid #e8ebed; border-radius: 5px; }

.tagsinput:before, .tagsinput:after { content: " "; display: table; }

.tagsinput:after { clear: both; }

.tagsinput.active { background: #fff; border-color: #d4d9dd; }

.tagsinput .tag { float: left; margin: 4px 5px 0px 0; background: #f0f2f4; padding: 9px 10px; font-size: 12.5px; font-weight: 700; color: #1a2126; border-radius: 3px; }

.tagsinput .tag .icon-close { margin-top: -1px; background-position: -155px -36px; }

.tagsinput div { display: inline-block; }

.tagsinput input { width: 100%; }
#forum-post-answers-container { max-width: 940px; margin: 35px 0 40px; }

@media screen and (max-width: 679px) { #forum-post-answers-container .discussion-comment { padding-left: 42px; } }

@media screen and (min-width: 680px) { #forum-post-comments-container { margin-left: 70px; } }

@media screen and (max-width: 679px) { #forum-post-comments-container { margin-left: 55px; } }

#forum-post-question-container { max-width: 940px; }

.discussion-question { padding-left: 70px; position: relative; }

.discussion-question:before, .discussion-question:after { content: " "; display: table; }

.discussion-question:after { clear: both; }

@media screen and (max-width: 679px) { .discussion-question { padding-left: 0; } }

.discussion-question .discussion-commenting { margin-bottom: -1px; }

.discussion-question .discussion-list { overflow: hidden; }

.discussion-question h1 { font-weight: 700; font-size: 26px; color: #384047; line-height: 1.4; margin-bottom: 24px; display: block; word-break: break-word; }

@media screen and (max-width: 679px) { .discussion-question h1 { font-size: 21px; margin-top: 24px; width: 100%; display: block; padding-right: 0; } }

.discussion-question .markdown-zone { word-break: break-word; }

.discussion-question .markdown-zone h1 { font-size: 2em; margin-bottom: 15px; margin-right: 60px; }

.discussion-question .tags { margin: 28px 0 12px 0; clear: both; }

.discussion-question .tags .icon { margin: -6px 3px -3px -3px; }

.discussion-question .new-discussion { padding-bottom: 20px; }

@media screen and (max-width: 679px) { .discussion-question .question { padding-right: 0; } }

@media screen and (min-width: 680px) { .discussion-question-avatar { position: absolute; top: 0; left: 0; } }

@media screen and (max-width: 679px) { .discussion-question-avatar { float: left; margin-right: 20px; } }

.discussion-question-byline { margin: 1px 0 0; }

.discussion-question .code-attachment-filename { background: #3e474f; border-radius: 4px 4px 0 0; color: white; font-weight: 700; height: 36px; line-height: 38px; padding-left: 15px; pointer-events: none; position: relative; margin-bottom: -4px; z-index: 12; }

.discussion-question .code-attachment-filename .icon { opacity: 0.5; margin-right: 4px; margin-top: -4px; }

.discussion-mobile-buttons { display: block; padding: 20px 0 0 0; }

.discussion-mobile-buttons .button { margin-bottom: 10px; }

.discussion-mobile-buttons .secondary-heading { display: none; }

.discussion-mobile-buttons .discussion-answer-post { margin-top: 10px; padding-top: 20px; display: none; }

.vote-best-answer { float: left; position: relative; width: 103px; margin-right: 20px; }

.vote-best-answer:after { background: url("/assets/icons/icon-global-863d50621b14046616519056916ec67ac8a680fcb1c994a27ec6c1a92e9569d5.svg") no-repeat -155px -61px; content: ""; width: 14px; height: 12px; position: absolute; top: 0; right: 0; margin: 1px 0 0 0; }
.degree-support-box { width: auto; margin: 0; height: 100%; }

.degree-support-box .support-center-heading { text-align: center; font-size: 16px !important; }

.degree-support-box .support-center-description { text-align: center; font-weight: 400; padding: 2.5px 0 !important; }

.degree-support-box .button-join-slack, .degree-support-box .topic-experimental { margin-inline: auto; display: block; width: 31%; }

.degree-support-box .community-link { margin-top: 15px; text-align: center; text-decoration: underline; }
.onboarding-welcome { text-align: center; padding: 50px 0; }

.onboarding-welcome h1 { margin-bottom: 40px; font-size: 40px; }

.onboarding-welcome h2 { margin-bottom: 40px; font-size: 20px; color: #2b363e; line-height: 24px; font-weight: 400; }

.onboarding-welcome .right-arrow-icon { margin: 2px 0 0 5px; }

.onboarding-questions { text-align: center; padding: 50px 0 0 0; }

.onboarding-questions .logo-icon { margin: 20px 0; fill: #5fcf80; width: 40px; height: 44px; }

.onboarding-questions h1 { font-size: 26px; line-height: 32px; }

.onboarding-questions span { display: block; margin: 20px 0 40px 0; font-size: 16px; font-weight: 400; }

.onboarding-answers-list { list-style: none; }

.onboarding-answers-item { padding: 20px 10px 0 120px; margin-bottom: 20px; background-color: #fff; border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 2px 0 rgba(0, 0, 0, 0.1); min-height: 90px; position: relative; transition: all .2s ease-in-out; -webkit-font-smoothing: antialiased; }

.onboarding-answers-item a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; color: #101417; }

.onboarding-answers-item:hover { transform: scale(1.1); webkit-transform: translateZ(0); -webkit-font-smoothing: antialiased; cursor: hand; }

.onboarding-answers-item span { font-size: 20px; font-weight: 500; color: #101417; display: block; margin-top: 12px; }

.onboarding-answers-item p { margin-bottom: 30px; color: #2b363e; }

.onboarding-answers-item .onboarding-answers-illustration { position: absolute; top: calc(50% - 25px); left: 30px; width: 70px; text-align: center; }

.onboarding-answers-item .onboarding-answers-illustration svg { height: 50px; }

.onboarding-answers:hover li { opacity: 0.5; }

.onboarding-answers:hover ul:hover li { opacity: 0.5; }

.onboarding-answers:hover ul:hover li:hover { opacity: 1; }
.survey-marketing { margin-bottom: 70px; }

.survey-marketing.empty-layout { background: #edeff0; }

.survey-marketing.empty-layout body { background: transparent; }

.survey-marketing-intro { color: #1a2126; font-size: 16px; margin: 30px 0; }

.survey-marketing-hero { background: #9b3b5a; padding: 20px 10px; margin: -20px -20px 30px; border-radius: 4px 4px 0 0; -webkit-font-smoothing: antialiased; }

@media screen and (min-width: 680px) { .survey-marketing-hero { margin: -30px -30px 30px; } }

.survey-marketing-recommendation .survey-marketing-hero { padding: 60px 0; }

.survey-marketing-hero-heading { color: #fff; margin: 0; }

.marketing-layout .survey-marketing-hero-heading { font-size: 18px; }

.empty-layout .survey-marketing-hero-heading { font-size: 20px; }

.survey-marketing-recommendation .survey-marketing-hero-heading { font-size: 28px; }

.survey-marketing-hero-heading + .survey-marketing-hero-copy { margin: 15px auto 0; }

.survey-marketing-recommendation .survey-marketing-hero-heading + .survey-marketing-hero-copy { font-size: 16px; max-width: 600px; color: rgba(255, 255, 255, 0.8); }

.survey-marketing-hero { background: #9b3b5a; color: #fff; }

.survey-marketing-lighttext { color: #2b363e; font-size: 13px; opacity: 0.75; }

.survey-marketing-answer { list-style: none; }

@media screen and (max-width: 768px) { .survey-marketing-answer { margin-top: 30px; }
  .survey-marketing-answer:first-child { margin-top: 0; } }

@media screen and (min-width: 768px) { .marketing-layout .survey-marketing-answer:nth-child(n+3) { margin-top: 15px; }
  .marketing-layout .survey-marketing-answer:nth-child(2n+1) { padding-left: 10px; padding-right: 7px; }
  .marketing-layout .survey-marketing-answer:nth-child(2n+2) { padding-right: 10px; padding-left: 7px; }
  .empty-layout .survey-marketing-answer.grid-25:nth-child(n+5) { margin-top: 30px; }
  .empty-layout .survey-marketing-answer.grid-33:nth-child(n+4) { margin-top: 30px; } }

@media screen and (min-width: 960px) { .marketing-layout .survey-marketing-answer:nth-child(2n+1) { padding-left: 0; }
  .marketing-layout .survey-marketing-answer:nth-child(2n+2) { padding-right: 0; } }

.marketing-layout .survey-marketing-button { width: 100%; }

.marketing-layout .survey-marketing-button .right-arrow-icon { transition: all 300ms 0s ease; }

.marketing-layout .survey-marketing-button:hover .right-arrow-icon, .marketing-layout .survey-marketing-button:focus .right-arrow-icon { margin-left: 10px; }

.marketing-layout .survey-marketing-button.disabled:hover:not(.has-topic-color), .marketing-layout .survey-marketing-button.disabled:focus:not(.has-topic-color) { border-color: #c6ccd2; cursor: default; color: #1a2126; }

.marketing-layout .survey-marketing-button.disabled:hover:not(.has-topic-color) .right-arrow-icon, .marketing-layout .survey-marketing-button.disabled:focus:not(.has-topic-color) .right-arrow-icon { margin-left: 0; fill: #1a2126; }

.survey-marketing-box { display: block; border-radius: 4px; border: 2px solid #9ec4df; text-align: center; height: 125px; transition: all 300ms 0s ease; }

.survey-marketing-box:hover, .survey-marketing-box:focus { border: 2px solid #c5dcec; background: #c5dcec; cursor: pointer; }

.survey-marketing-box:hover .survey-marketing-copy, .survey-marketing-box:focus .survey-marketing-copy { color: #355f7d; }

.survey-marketing-copy { display: block; font-size: 14px; line-height: 1.3; margin: 0; padding: 15px; color: #5d94ba; position: relative; top: 50%; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: all 300ms 0s ease; }

.survey-marketing-copy strong { display: block; margin-bottom: 5px; }

.marketing-layout .survey-marketing-hr { margin: 15px 0; }

.survey-marketing .input-checkbox { display: none; }

.survey-marketing .input-checkbox:checked + .survey-marketing-box { background: #ffd465; border-color: #ffd465; }

.survey-marketing .input-checkbox:checked + .survey-marketing-box .survey-marketing-copy { color: #384047; }

.survey-marketing-recommendation-copy svg { padding: 30px; }

.survey-marketing-actions .grid-33 { float: right; }

.survey-marketing-actions .button.secondary { border: none; padding-left: 0; margin-top: 5px; opacity: 0.7; transition: all 300ms 0s ease; }

.survey-marketing-actions .button.secondary svg { transition: all 300ms 0s ease; }

.survey-marketing-actions .button.secondary:hover, .survey-marketing-actions .button.secondary:focus { opacity: 1; }

.survey-marketing-actions .button.secondary:hover svg, .survey-marketing-actions .button.secondary:focus svg { margin-right: 10px; }

.survey-marketing-actions .button.primary svg { transition: margin 300ms 0s ease; margin-left: 5px; }

.survey-marketing-actions .button.primary:hover svg, .survey-marketing-actions .button.primary:focus svg { margin-left: 10px; }

.survey-marketing-actions .button.primary.disabled { background-color: transparent; }

.survey-marketing-actions .button.primary.disabled:hover svg, .survey-marketing-actions .button.primary.disabled:focus svg { margin-left: 5px; }

@media screen and (max-width: 679px) { .survey-marketing-actions .grid-33 { width: 100%; }
  .survey-marketing-actions .button { width: 100%; margin-bottom: 15px; } }

.survey-marketing .plan-panel { padding: 0; box-shadow: none; }

.survey-marketing .plan-panel-header { margin: 35px 0 15px; }

.survey-marketing .plan-panel-features li { color: #1a2126; }

.survey-marketing .degrees-controller .plan-panel-subtle { margin-top: 15px; padding-left: 0; }

.survey-marketing .degrees-controller .plan-panel-subtle h4 { margin-bottom: 15px; }

.survey-marketing .degrees-controller .plan-panel-subtle h4, .survey-marketing .degrees-controller .plan-panel-subtle ul, .survey-marketing .degrees-controller .plan-panel-subtle a { color: #2b363e; }
.student-survey body { padding: 0; }

.student-survey .survey-container h1 { display: none; }

.student-survey .survey-form { padding: 0; width: 790px; margin: 0 auto; }

@media screen and (max-width: 969px) { .student-survey .survey-form { width: 98%; } }

@media screen and (max-width: 679px) { .student-survey .survey-form { width: 100%; } }
.stats-block { padding: 20px 0 0; border-top: 1px solid #edeff0; }
.maint-wrapper { background: #edeff0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }

.maint-wrapper .grid-container { max-width: 100%; position: absolute; width: 100%; height: 50%; top: 30%; }

.maint-wrapper .grid-container .icon { opacity: 1 !important; }

.maint-wrapper .grid-container p { line-height: 22px; }
.assignment-heading { position: relative; }

.assignment-heading h3 { margin-bottom: 20px; }

.assignment-tools { position: absolute; right: 0; top: -20px; }

.assignment-cards { margin: 0 -15px; }

.assignment-card-active { float: left; width: 50%; }

.assignment-card-active .card-box { padding: 20px 40px; }

.assignment-card-date { font-size: 12px; font-weight: 500; }

@media screen and (max-width: 969px) { .assignment-card-tools { display: block; position: relative; margin-left: -15px; margin-top: 15px; }
  .assignment-card-tools a { margin-bottom: 10px; } }

@media screen and (min-width: 969px) { .assignment-card-tools { position: absolute; right: 30px; top: 25px; } }

.assignment-card-tools svg { height: 15px; fill: #2b363e; width: auto; }

.assignment-card-tools a { float: left; margin-left: 10px; }

.assignment-card-tools a:before, .assignment-card-tools a:after { content: " "; display: table; }

.assignment-card-tools a:after { clear: both; }

.assignment-card-tools a:hover svg { fill: #050708; }

.assignment-card-meta { margin-top: 20px; }

.assignment-card-heading { font-size: 23px; margin-bottom: 8px; }

.assignment-card-heading a { color: #050708; }

.assignment-card-heading a:hover { color: #242e35; }

.assignment-card-members, .assignment-card-status { color: #394853; font-weight: 500; }

.assignment-card-avatars { margin: 0 10px 0 0; }

.assignment-card-avatars:before, .assignment-card-avatars:after { content: " "; display: table; }

.assignment-card-avatars:after { clear: both; }

.assignment-card-avatar { height: 18px; width: 18px; border-radius: 10px; float: left; margin-right: -5px; }

.assignment-card-memberstitle { float: left; margin: -2px 0 0 10px; display: inline-block; }

.assignment-card-status { margin-top: 0px; }

.assignment-card-stats { border-top: 1px solid #f0f2f4; background-color: #f8f9f9; margin: 50px -40px -20px -40px; padding: 20px 0px; border-radius: 0 0 4px 4px; }

.assignment-card-statsreport { border-top: 1px solid #f0f2f4; display: block; padding: 20px; margin: 25px 0 0 20px; color: #242e35; font-weight: 500; font-size: 14px; }

.assignment-card-statsreport:hover { color: #050708; }

.assignment-card-statsreport svg { width: 20px; height: auto; margin: 0 5px 0 0; float: left; }

.assignment-card-statsreport svg:before, .assignment-card-statsreport svg:after { content: " "; display: table; }

.assignment-card-statsreport svg:after { clear: both; }

.assignment-card-statsreport span { margin-top: -4px; display: block; float: left; }

.assignment-card-statsreport span:before, .assignment-card-statsreport span:after { content: " "; display: table; }

.assignment-card-statsreport span:after { clear: both; }

.assignment-card-archive { position: absolute; text-align: center; background: rgba(237, 90, 90, 0.98); z-index: 1; margin: -20px 0 0 -40px; padding: 100px 50px; background-size: cover; height: 100%; width: 100%; border-radius: 5px 5px 4px 4px; }

.assignment-card-archive h3, .assignment-card-archive p { color: #fff; }

.assignment-card-archive h3 { margin-bottom: 10px; }

.assignment-card-archive a { font-weight: 700; font-size: 16px; }

.assignment-card-archivecancel { color: #fff; margin-top: 10px; opacity: .5; display: block; }

.assignment-card-archivecancel:hover { color: #fff; opacity: 1; }

.assignment-no-assignments { position: relative; }

.assignment-no-assignmentscontent { text-align: center; position: absolute; top: 60px; width: 40%; margin: 0 30%; z-index: 2; background-color: #fff; padding: 40px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); border-radius: 5px 5px 4px 4px; }

.assignment-no-assignmentscontent p { font-size: 16px; }

.assignment-cards-FPO { opacity: .1; }

.assignment-cards-FPO .card-box { border: 2px solid #2b363e; }

.assignmentreport-globaldetails { height: 100%; width: 100%; display: flex; align-items: center; }

.assignmentreport-globaldetails-name { margin-top: 0px; line-height: 35px; }

.assignmentreport-globaldetails-stats:before, .assignmentreport-globaldetails-stats:after { content: " "; display: table; }

.assignmentreport-globaldetails-stats:after { clear: both; }

.assignmentreport-globaldetails-statsitem { padding: 5px 0px 5px 40px; border-right: solid 1px #f0f2f4; }

.assignmentreport-globaldetails-statsitem:last-child { border: 0; margin: 5px 0; padding: 0 0 0 40px; }

.assignmentreport-globaldetails-statsheading { display: block; margin-bottom: 5px; font-weight: 400; }

.assignmentreport-globaldetails-statsnumber { display: block; font-size: 35px; color: #050708; font-weight: 600; }
.assignment-new-modal h3 { margin-bottom: 20px; }

.assignment-new-modal label { margin-top: 10px; display: block; }

.assignment-new-modal hr { margin: 20px 0; }

.assignment-new-modal .button { margin: 15px 15px 0 0; }

.assignment-new-modal input { min-width: 200px; }

.assignment-assign-label { margin: 0 0 10px 0; display: block; }

.track-assignment-no-assignment { margin: 20px 10px; background-color: #f8f9f9; border: 1px solid #f0f2f4; padding: 40px 10px; text-align: center; border-radius: 4px; }

.assignment-step-modal .track-assignment-search { position: relative; }

.assignment-step-modal .track-assignment-search-input { font-size: 16px; padding-left: 40px; }

.assignment-step-modal .track-assignment-search .search-icon { position: absolute; left: 15px; top: 15px; fill: #1a2126; }

.assignment-step-modal-footer { display: flex; align-items: center; flex-grow: 1; flex: 0 0 100%; }

.assignment-step-modal h3 { margin-bottom: 20px; }

.assignment-step-modal label { margin-top: 10px; display: block; }

.assignment-step-modal hr { margin: 20px 0; }

.assignment-step-modal input { min-width: 200px; }

.assignment-step-modal ul { margin-top: 20px; height: 300px; overflow: scroll; overflow-x: auto; padding: 0px 15px 15px 0; }

.assignment-step-modal ul > .loading { display: none; }

.assignment-step-modal ul.loading > .loading { display: block; text-align: center; margin: 1em 0; }

.assignment-step-modal ul.loading > li { display: none; }

.assignment-step-modal .checkbox-group { height: auto; margin: 0 20px 0 auto !important; padding-bottom: 0; overflow: inherit; }

.assignment-step-modal .checkbox-group li { height: 40px; display: inline-block; margin: 0; }

.assignment-step-modal .checkbox-group li .help-outline-24-icon { position: relative; top: 2px; }

.assignment-step-modal .checkbox-group label { padding-top: 0; padding-bottom: 0; }

@media screen and (max-width: 679px) { .assignment-step-modal .checkbox-group label { padding-right: 0; } }

@media screen and (max-width: 679px) { .assignment-step-modal .checkbox-group .checkbox-info { display: none; } }

.assignment-step-modal .next { float: right; }

.assignment-step-modal .button.disabled { opacity: .4; }

.assignment-step-modal .button.disabled:hover, .assignment-step-modal .button.disabled:active { background-color: transparent !important; }

.assignment-step-modal ::-webkit-scrollbar { width: 9px; }

.assignment-step-modal ::-webkit-scrollbar-track { -webkit-border-radius: 5px; border-radius: 5px; background: #edeff0; }

.assignment-step-modal ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.2); }

.assignment-step-modal ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); }

.assignment-step-modal li { border-bottom: 1px solid #f0f2f4; margin-bottom: 20px; padding-bottom: 20px; position: relative; }

.assignment-step-modal li .track-assignment-name { font-size: 16px; }

.assignment-step-modal li .track-assignment-created, .assignment-step-modal li .track-assignment-team { font-size: 13px; color: #2b363e; }

.assignment-step-modal .track-assignment-new { display: block; width: 100%; margin-top: 40px; }

.assignment-step-modal li:last-child { border: none; padding: 0; }

.assignment-step-modal .assignment-action { position: absolute; top: 2px; right: 0; background-color: transparent; border: 2px solid #8e969d; padding: 0; text-align: center; line-height: 36px; width: 36px; height: 36px; border-radius: 50%; transition: all 300ms 0s ease; }

.assignment-step-modal .assignment-action:hover svg, .assignment-step-modal .assignment-action:hover { border-color: #35A961; fill: #35A961; cursor: pointer; }

.assignment-step-modal .assignment-action svg { position: relative; top: 1px; width: 16px; height: 16px; fill: #8e969d; }

.assignment-step-modal .assignment-action-unchecked { display: inline-block; }

.assignment-step-modal .assignment-action-checked { display: none; border-color: #35A961; }

.assignment-step-modal .assignment-action-checked:hover svg, .assignment-step-modal .assignment-action-checked:hover { border-color: #29824b; fill: #29824b; cursor: pointer; }

.assignment-step-modal .assignment-action-checked svg { top: 3px; fill: #35A961; }

.assignment-step-modal .disabled .assignment-action { display: none; }

.assignment-step-modal .selected .assignment-action-unchecked { display: none; }

.assignment-step-modal .selected .assignment-action-checked { display: inline-block; }

.assignment-step-modal .field-description { margin-top: -10px; font-style: italic; font-size: 12px; }
.assignment-show-details { margin-bottom: 50px; }

@media screen and (max-width: 969px) { .assignment-show-details { margin-bottom: 20px; } }

.assignment-show .assignment-card-meta { margin-top: 0; }

.assignment-show .member-list { background: #f9fafa; margin: 0 -30px 10px -30px; border-top: 1px solid #e8ebed; border-bottom: 1px solid #e8ebed; }

@media screen and (max-width: 679px) { .assignment-show .member-list { margin: 0 -20px 10px -20px; } }

.assignment-show .member-list table { width: 100%; line-height: 1.4em; text-align: left; font-size: 12px; }

.assignment-show .member-list table:first-child { border: none; }

.assignment-show .member-list table th { font-weight: 500; color: #7b8b8e; height: 45px; vertical-align: middle; padding: 0 10px; }

.assignment-show .member-list table tr { position: relative; padding: 0 10px; border-top: 1px solid #e8ebed; }

.assignment-show .member-list table td { height: 72px; vertical-align: middle; padding: 0 10px; color: #384047; }

.assignment-show .member-list table td a { color: #050708; }

.assignment-show .member-list table td a:hover { color: #1a2126; }

.assignment-show .member-list table tr > th:first-child, .assignment-show .member-list table tr > td:first-child { padding-left: 30px; }
.organization-assignments-report-dashboard #assignmentreport .secondary-heading h2, .organization-assignments-report-dashboard #assignment .secondary-heading h2, .organization-assignments-report-details #assignmentreport .secondary-heading h2, .organization-assignments-report-details #assignment .secondary-heading h2, .organization-assignments-index #assignmentreport .secondary-heading h2, .organization-assignments-index #assignment .secondary-heading h2, .assignment-show #assignmentreport .secondary-heading h2, .assignment-show #assignment .secondary-heading h2 { color: #050708; }

.organization-assignments-report-dashboard #assignmentreport .secondary-heading .time, .organization-assignments-report-dashboard #assignmentreport .secondary-heading .cta, .organization-assignments-report-dashboard #assignment .secondary-heading .time, .organization-assignments-report-dashboard #assignment .secondary-heading .cta, .organization-assignments-report-details #assignmentreport .secondary-heading .time, .organization-assignments-report-details #assignmentreport .secondary-heading .cta, .organization-assignments-report-details #assignment .secondary-heading .time, .organization-assignments-report-details #assignment .secondary-heading .cta, .organization-assignments-index #assignmentreport .secondary-heading .time, .organization-assignments-index #assignmentreport .secondary-heading .cta, .organization-assignments-index #assignment .secondary-heading .time, .organization-assignments-index #assignment .secondary-heading .cta, .assignment-show #assignmentreport .secondary-heading .time, .assignment-show #assignmentreport .secondary-heading .cta, .assignment-show #assignment .secondary-heading .time, .assignment-show #assignment .secondary-heading .cta { float: right; font-weight: 500; color: #101417; margin-top: 5px; margin-right: 0px; }

.organization-assignments-report-dashboard #assignmentreport .secondary-heading .time svg, .organization-assignments-report-dashboard #assignmentreport .secondary-heading .cta svg, .organization-assignments-report-dashboard #assignment .secondary-heading .time svg, .organization-assignments-report-dashboard #assignment .secondary-heading .cta svg, .organization-assignments-report-details #assignmentreport .secondary-heading .time svg, .organization-assignments-report-details #assignmentreport .secondary-heading .cta svg, .organization-assignments-report-details #assignment .secondary-heading .time svg, .organization-assignments-report-details #assignment .secondary-heading .cta svg, .organization-assignments-index #assignmentreport .secondary-heading .time svg, .organization-assignments-index #assignmentreport .secondary-heading .cta svg, .organization-assignments-index #assignment .secondary-heading .time svg, .organization-assignments-index #assignment .secondary-heading .cta svg, .assignment-show #assignmentreport .secondary-heading .time svg, .assignment-show #assignmentreport .secondary-heading .cta svg, .assignment-show #assignment .secondary-heading .time svg, .assignment-show #assignment .secondary-heading .cta svg { margin-left: 5px; fill: #101417; }

.organization-assignments-report-dashboard #assignmentreport .secondary-heading .time:hover, .organization-assignments-report-dashboard #assignmentreport .secondary-heading .time:hover svg, .organization-assignments-report-dashboard #assignmentreport .secondary-heading .cta:hover, .organization-assignments-report-dashboard #assignmentreport .secondary-heading .cta:hover svg, .organization-assignments-report-dashboard #assignment .secondary-heading .time:hover, .organization-assignments-report-dashboard #assignment .secondary-heading .time:hover svg, .organization-assignments-report-dashboard #assignment .secondary-heading .cta:hover, .organization-assignments-report-dashboard #assignment .secondary-heading .cta:hover svg, .organization-assignments-report-details #assignmentreport .secondary-heading .time:hover, .organization-assignments-report-details #assignmentreport .secondary-heading .time:hover svg, .organization-assignments-report-details #assignmentreport .secondary-heading .cta:hover, .organization-assignments-report-details #assignmentreport .secondary-heading .cta:hover svg, .organization-assignments-report-details #assignment .secondary-heading .time:hover, .organization-assignments-report-details #assignment .secondary-heading .time:hover svg, .organization-assignments-report-details #assignment .secondary-heading .cta:hover, .organization-assignments-report-details #assignment .secondary-heading .cta:hover svg, .organization-assignments-index #assignmentreport .secondary-heading .time:hover, .organization-assignments-index #assignmentreport .secondary-heading .time:hover svg, .organization-assignments-index #assignmentreport .secondary-heading .cta:hover, .organization-assignments-index #assignmentreport .secondary-heading .cta:hover svg, .organization-assignments-index #assignment .secondary-heading .time:hover, .organization-assignments-index #assignment .secondary-heading .time:hover svg, .organization-assignments-index #assignment .secondary-heading .cta:hover, .organization-assignments-index #assignment .secondary-heading .cta:hover svg, .assignment-show #assignmentreport .secondary-heading .time:hover, .assignment-show #assignmentreport .secondary-heading .time:hover svg, .assignment-show #assignmentreport .secondary-heading .cta:hover, .assignment-show #assignmentreport .secondary-heading .cta:hover svg, .assignment-show #assignment .secondary-heading .time:hover, .assignment-show #assignment .secondary-heading .time:hover svg, .assignment-show #assignment .secondary-heading .cta:hover, .assignment-show #assignment .secondary-heading .cta:hover svg { color: #2b363e; fill: #2b363e; }

.organization-assignments-report-dashboard #assignmentreport .secondary-heading .time, .organization-assignments-report-dashboard #assignment .secondary-heading .time, .organization-assignments-report-details #assignmentreport .secondary-heading .time, .organization-assignments-report-details #assignment .secondary-heading .time, .organization-assignments-index #assignmentreport .secondary-heading .time, .organization-assignments-index #assignment .secondary-heading .time, .assignment-show #assignmentreport .secondary-heading .time, .assignment-show #assignment .secondary-heading .time { color: #2b363e; margin-top: 30px; }

.organization-assignments-report-dashboard #assignmentreport .control-container .dropdown-parent .dropdown-child, .organization-assignments-report-dashboard #assignment .control-container .dropdown-parent .dropdown-child, .organization-assignments-report-details #assignmentreport .control-container .dropdown-parent .dropdown-child, .organization-assignments-report-details #assignment .control-container .dropdown-parent .dropdown-child, .organization-assignments-index #assignmentreport .control-container .dropdown-parent .dropdown-child, .organization-assignments-index #assignment .control-container .dropdown-parent .dropdown-child, .assignment-show #assignmentreport .control-container .dropdown-parent .dropdown-child, .assignment-show #assignment .control-container .dropdown-parent .dropdown-child { max-width: 550px; }

.organization-assignments-report-dashboard .assignmentreport-breadcrumb, .organization-assignments-report-dashboard .assignment-breadcrumb, .organization-assignments-report-details .assignmentreport-breadcrumb, .organization-assignments-report-details .assignment-breadcrumb, .organization-assignments-index .assignmentreport-breadcrumb, .organization-assignments-index .assignment-breadcrumb, .assignment-show .assignmentreport-breadcrumb, .assignment-show .assignment-breadcrumb { margin-bottom: 25px; font-weight: 500; color: #050708; }

.organization-assignments-report-dashboard .assignmentreport-breadcrumb a, .organization-assignments-report-dashboard .assignment-breadcrumb a, .organization-assignments-report-details .assignmentreport-breadcrumb a, .organization-assignments-report-details .assignment-breadcrumb a, .organization-assignments-index .assignmentreport-breadcrumb a, .organization-assignments-index .assignment-breadcrumb a, .assignment-show .assignmentreport-breadcrumb a, .assignment-show .assignment-breadcrumb a { color: #161c20 !important; }

.organization-assignments-report-dashboard .assignmentreport-breadcrumb span, .organization-assignments-report-dashboard .assignment-breadcrumb span, .organization-assignments-report-details .assignmentreport-breadcrumb span, .organization-assignments-report-details .assignment-breadcrumb span, .organization-assignments-index .assignmentreport-breadcrumb span, .organization-assignments-index .assignment-breadcrumb span, .assignment-show .assignmentreport-breadcrumb span, .assignment-show .assignment-breadcrumb span { font-weight: 400; color: #3f505d; margin: 0 10px; }

.organization-assignments-report-dashboard .assignmentreport-hero, .organization-assignments-report-details .assignmentreport-hero, .organization-assignments-index .assignmentreport-hero, .assignment-show .assignmentreport-hero { margin-bottom: 0; border-radius: 4px 4px 0 0; }

.organization-assignments-report-dashboard .assignmentreport-assignment-dropdown, .organization-assignments-report-details .assignmentreport-assignment-dropdown, .organization-assignments-index .assignmentreport-assignment-dropdown, .assignment-show .assignmentreport-assignment-dropdown { position: absolute; right: 20px; bottom: 20px; }

.organization-assignments-report-dashboard .assignmentreport-assignment-dropdown .loading-container, .organization-assignments-report-details .assignmentreport-assignment-dropdown .loading-container, .organization-assignments-index .assignmentreport-assignment-dropdown .loading-container, .assignment-show .assignmentreport-assignment-dropdown .loading-container { visibility: hidden; display: inline-block; position: relative; top: 3px; }

.organization-assignments-report-dashboard .assignmentreport-assignment-dropdown .loading-container.loading, .organization-assignments-report-details .assignmentreport-assignment-dropdown .loading-container.loading, .organization-assignments-index .assignmentreport-assignment-dropdown .loading-container.loading, .assignment-show .assignmentreport-assignment-dropdown .loading-container.loading { visibility: inherit; }

.organization-assignments-report-dashboard .assignmentreport-chart, .organization-assignments-report-details .assignmentreport-chart, .organization-assignments-index .assignmentreport-chart, .assignment-show .assignmentreport-chart { background: #f9fafa; margin: 0 -30px 0px -30px; border-top: 1px solid #f0f2f4; height: 400px; text-align: center; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .ct-grid, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .ct-grid, .organization-assignments-index .assignmentreport-chart .ct-chart-line .ct-grid, .assignment-show .assignmentreport-chart .ct-chart-line .ct-grid { stroke-width: 0; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .axis, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .axis, .organization-assignments-index .assignmentreport-chart .ct-chart-line .axis, .assignment-show .assignmentreport-chart .ct-chart-line .axis { stroke: rgba(0, 0, 0, 0.1); stroke-width: 2px; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .velocity-target-min, .organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .velocity-target-max, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .velocity-target-min, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .velocity-target-max, .organization-assignments-index .assignmentreport-chart .ct-chart-line .velocity-target-min, .organization-assignments-index .assignmentreport-chart .ct-chart-line .velocity-target-max, .assignment-show .assignmentreport-chart .ct-chart-line .velocity-target-min, .assignment-show .assignmentreport-chart .ct-chart-line .velocity-target-max { stroke-dasharray: initial; stroke-width: 1px; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .velocity-target-min, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .velocity-target-min, .organization-assignments-index .assignmentreport-chart .ct-chart-line .velocity-target-min, .assignment-show .assignmentreport-chart .ct-chart-line .velocity-target-min { stroke: #f59f9f; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .velocity-target-max, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .velocity-target-max, .organization-assignments-index .assignmentreport-chart .ct-chart-line .velocity-target-max, .assignment-show .assignmentreport-chart .ct-chart-line .velocity-target-max { stroke: #9ae1af; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-1, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-1, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-1, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-1 { stroke: #5ECE7F; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-2, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-2, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-2, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-2 { stroke: #3E89BE; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-3, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-3, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-3, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-3 { stroke: #EC5959; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-4, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-4, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-4, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-4 { stroke: #FFD365; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-5, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-5, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-5, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-5 { stroke: #9F82C7; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-6, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-6, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-6, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-6 { stroke: #FF9E1E; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-7, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-7, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-7, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-7 { stroke: #6F5941; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-8, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-8, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-8, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-8 { stroke: #FFD5A7; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-9, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-9, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-9, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-9 { stroke: #B1B9C1; }

.organization-assignments-report-dashboard .assignmentreport-chart .ct-chart-line .assignment-10, .organization-assignments-report-details .assignmentreport-chart .ct-chart-line .assignment-10, .organization-assignments-index .assignmentreport-chart .ct-chart-line .assignment-10, .assignment-show .assignmentreport-chart .ct-chart-line .assignment-10 { stroke: #2C3238; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails, .organization-assignments-report-details .assignmentreport-globaldetails, .organization-assignments-index .assignmentreport-globaldetails, .assignment-show .assignmentreport-globaldetails { height: 100%; width: 100%; display: flex; align-items: center; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-name, .organization-assignments-report-details .assignmentreport-globaldetails-name, .organization-assignments-index .assignmentreport-globaldetails-name, .assignment-show .assignmentreport-globaldetails-name { margin-top: 0px; line-height: 35px; margin-left: -20px; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-name a, .organization-assignments-report-details .assignmentreport-globaldetails-name a, .organization-assignments-index .assignmentreport-globaldetails-name a, .assignment-show .assignmentreport-globaldetails-name a { color: #050708; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-name a:hover, .organization-assignments-report-details .assignmentreport-globaldetails-name a:hover, .organization-assignments-index .assignmentreport-globaldetails-name a:hover, .assignment-show .assignmentreport-globaldetails-name a:hover { color: #1a2126; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-stats:before, .organization-assignments-report-dashboard .assignmentreport-globaldetails-stats:after, .organization-assignments-report-details .assignmentreport-globaldetails-stats:before, .organization-assignments-report-details .assignmentreport-globaldetails-stats:after, .organization-assignments-index .assignmentreport-globaldetails-stats:before, .organization-assignments-index .assignmentreport-globaldetails-stats:after, .assignment-show .assignmentreport-globaldetails-stats:before, .assignment-show .assignmentreport-globaldetails-stats:after { content: " "; display: table; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-stats:after, .organization-assignments-report-details .assignmentreport-globaldetails-stats:after, .organization-assignments-index .assignmentreport-globaldetails-stats:after, .assignment-show .assignmentreport-globaldetails-stats:after { clear: both; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-statsitem, .organization-assignments-report-details .assignmentreport-globaldetails-statsitem, .organization-assignments-index .assignmentreport-globaldetails-statsitem, .assignment-show .assignmentreport-globaldetails-statsitem { padding: 5px 0px 5px 40px; border-right: solid 1px #f0f2f4; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-statsitem:last-child, .organization-assignments-report-details .assignmentreport-globaldetails-statsitem:last-child, .organization-assignments-index .assignmentreport-globaldetails-statsitem:last-child, .assignment-show .assignmentreport-globaldetails-statsitem:last-child { border: 0; margin: 5px 0; padding: 0 0 0 40px; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-statsheading, .organization-assignments-report-details .assignmentreport-globaldetails-statsheading, .organization-assignments-index .assignmentreport-globaldetails-statsheading, .assignment-show .assignmentreport-globaldetails-statsheading { display: block; margin-bottom: 5px; font-weight: 400; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-statsnumber, .organization-assignments-report-details .assignmentreport-globaldetails-statsnumber, .organization-assignments-index .assignmentreport-globaldetails-statsnumber, .assignment-show .assignmentreport-globaldetails-statsnumber { display: block; font-size: 35px; color: #050708; font-weight: 600; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-nodata, .organization-assignments-report-details .assignmentreport-globaldetails-nodata, .organization-assignments-index .assignmentreport-globaldetails-nodata, .assignment-show .assignmentreport-globaldetails-nodata { font-size: 13px; font-weight: 400; margin-top: 2px; display: block; color: #2b363e; }

.organization-assignments-report-dashboard .assignmentreport-globaldetails-nodata strong, .organization-assignments-report-details .assignmentreport-globaldetails-nodata strong, .organization-assignments-index .assignmentreport-globaldetails-nodata strong, .assignment-show .assignmentreport-globaldetails-nodata strong { font-size: 21px; color: #050708; }

.organization-assignments-report-dashboard .assignmentreport-filters, .organization-assignments-report-details .assignmentreport-filters, .organization-assignments-index .assignmentreport-filters, .assignment-show .assignmentreport-filters { margin-bottom: 10px; }

.organization-assignments-report-dashboard .assignmentreport-filters-item, .organization-assignments-report-details .assignmentreport-filters-item, .organization-assignments-index .assignmentreport-filters-item, .assignment-show .assignmentreport-filters-item { border-right: 1px solid #f0f2f4; position: relative; }

.organization-assignments-report-dashboard .assignmentreport-filters-item:last-child, .organization-assignments-report-details .assignmentreport-filters-item:last-child, .organization-assignments-index .assignmentreport-filters-item:last-child, .assignment-show .assignmentreport-filters-item:last-child { border: 0; }

.organization-assignments-report-dashboard .assignmentreport-filters-item span, .organization-assignments-report-details .assignmentreport-filters-item span, .organization-assignments-index .assignmentreport-filters-item span, .assignment-show .assignmentreport-filters-item span { display: block; text-align: center; }

.organization-assignments-report-dashboard .assignmentreport-filters-itemheading, .organization-assignments-report-details .assignmentreport-filters-itemheading, .organization-assignments-index .assignmentreport-filters-itemheading, .assignment-show .assignmentreport-filters-itemheading { margin-bottom: 15px; font-weight: 500; color: #050708; }

.organization-assignments-report-dashboard .assignmentreport-filters-itemnumber, .organization-assignments-report-details .assignmentreport-filters-itemnumber, .organization-assignments-index .assignmentreport-filters-itemnumber, .assignment-show .assignmentreport-filters-itemnumber { font-size: 45px; color: #050708; font-weight: 500; }

.organization-assignments-report-dashboard .assignmentreport-filters-viewreport, .organization-assignments-report-details .assignmentreport-filters-viewreport, .organization-assignments-index .assignmentreport-filters-viewreport, .assignment-show .assignmentreport-filters-viewreport { text-align: center; display: block; margin-top: 20px; }

.organization-assignments-report-dashboard .assignmentreport-filters-viewreport:hover, .organization-assignments-report-details .assignmentreport-filters-viewreport:hover, .organization-assignments-index .assignmentreport-filters-viewreport:hover, .assignment-show .assignmentreport-filters-viewreport:hover { color: #222; }

.organization-assignments-report-dashboard .assignmentreport-filters-help, .organization-assignments-report-details .assignmentreport-filters-help, .organization-assignments-index .assignmentreport-filters-help, .assignment-show .assignmentreport-filters-help { position: relative; }

.organization-assignments-report-dashboard .assignmentreport-filters-helptooltip, .organization-assignments-report-details .assignmentreport-filters-helptooltip, .organization-assignments-index .assignmentreport-filters-helptooltip, .assignment-show .assignmentreport-filters-helptooltip { position: absolute; background: #384047; text-align: center; padding: 15px 20px; width: 280px; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -webkit-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -ms-transform: translate(-50%, 0px); -o-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 50px; }

.organization-assignments-report-dashboard .assignmentreport-filters-helptooltip:after, .organization-assignments-report-details .assignmentreport-filters-helptooltip:after, .organization-assignments-index .assignmentreport-filters-helptooltip:after, .assignment-show .assignmentreport-filters-helptooltip:after { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -o-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.organization-assignments-report-dashboard .assignmentreport-filters-itemtogglewrapper, .organization-assignments-report-details .assignmentreport-filters-itemtogglewrapper, .organization-assignments-index .assignmentreport-filters-itemtogglewrapper, .assignment-show .assignmentreport-filters-itemtogglewrapper { /* background OFF */ /* button OFF */ /* background ON */ /* button ON */ }

.organization-assignments-report-dashboard .assignmentreport-filters-itemtogglewrapper input, .organization-assignments-report-details .assignmentreport-filters-itemtogglewrapper input, .organization-assignments-index .assignmentreport-filters-itemtogglewrapper input, .assignment-show .assignmentreport-filters-itemtogglewrapper input { margin: 20px auto; display: block; position: relative; background-color: #edeff0; box-shadow: inset 0 0 0px 1px #edeff0; border-width: 2px; border-style: solid; border-color: #edeff0; box-sizing: border-box; text-indent: -5000px; height: 26px; width: 51px; border-radius: 15.5px; -webkit-appearance: none; }

.organization-assignments-report-dashboard .assignmentreport-filters-itemtogglewrapper input:checked, .organization-assignments-report-details .assignmentreport-filters-itemtogglewrapper input:checked, .organization-assignments-index .assignmentreport-filters-itemtogglewrapper input:checked, .assignment-show .assignmentreport-filters-itemtogglewrapper input:checked { border-width: 2px; border-color: #5fcf80; -webkit-transition: 0.25s cubic-bezier(0.77, 0, 0.175, 1); }

.organization-assignments-report-dashboard .assignmentreport-filters-itemtogglewrapper input:before, .organization-assignments-report-details .assignmentreport-filters-itemtogglewrapper input:before, .organization-assignments-index .assignmentreport-filters-itemtogglewrapper input:before, .assignment-show .assignmentreport-filters-itemtogglewrapper input:before { content: ""; position: absolute; display: block; height: 22px; width: 22px; border-radius: 15.5px; top: 0px; left: 0px; background: rgba(19, 191, 17, 0); box-sizing: border-box; -webkit-transition: 0.25s cubic-bezier(0.77, 0, 0.175, 1); }

.organization-assignments-report-dashboard .assignmentreport-filters-itemtogglewrapper input:after, .organization-assignments-report-details .assignmentreport-filters-itemtogglewrapper input:after, .organization-assignments-index .assignmentreport-filters-itemtogglewrapper input:after, .assignment-show .assignmentreport-filters-itemtogglewrapper input:after { content: ""; position: absolute; display: block; height: 22px; width: 22px; top: 0px; left: 0px; border-radius: 15.5px; background: White; box-shadow: 0 0px 1px rgba(0, 0, 0, 0.4), 0 4px 2px rgba(0, 0, 0, 0.1); -webkit-transition: 0.2s cubic-bezier(0.77, 0, 0.175, 1); }

.organization-assignments-report-dashboard .assignmentreport-filters-itemtogglewrapper input:checked:before, .organization-assignments-report-details .assignmentreport-filters-itemtogglewrapper input:checked:before, .organization-assignments-index .assignmentreport-filters-itemtogglewrapper input:checked:before, .assignment-show .assignmentreport-filters-itemtogglewrapper input:checked:before { width: 46px; box-shadow: 2px 0px 1px #4cd964, 0 2px 1px #4cd964; background: #5fcf80; }

.organization-assignments-report-dashboard .assignmentreport-filters-itemtogglewrapper input:checked:after, .organization-assignments-report-details .assignmentreport-filters-itemtogglewrapper input:checked:after, .organization-assignments-index .assignmentreport-filters-itemtogglewrapper input:checked:after, .assignment-show .assignmentreport-filters-itemtogglewrapper input:checked:after { left: 25px; }

.organization-assignments-report-dashboard .assignmentreport-filters .control-container, .organization-assignments-report-details .assignmentreport-filters .control-container, .organization-assignments-index .assignmentreport-filters .control-container, .assignment-show .assignmentreport-filters .control-container { margin: 0; box-shadow: none; border-radius: none; }

.organization-assignments-report-dashboard .assignmentreport-filters .control-container .dropdown-parent .dropdown-parent-label, .organization-assignments-report-details .assignmentreport-filters .control-container .dropdown-parent .dropdown-parent-label, .organization-assignments-index .assignmentreport-filters .control-container .dropdown-parent .dropdown-parent-label, .assignment-show .assignmentreport-filters .control-container .dropdown-parent .dropdown-parent-label { color: #050708 !important; padding: 0 !important; }

.organization-assignments-report-dashboard .assignmentreport-filters-dropdown, .organization-assignments-report-details .assignmentreport-filters-dropdown, .organization-assignments-index .assignmentreport-filters-dropdown, .assignment-show .assignmentreport-filters-dropdown { position: absolute !important; right: 0; top: 100px; }

.organization-assignments-report-dashboard .assignmentreport-tooltips, .organization-assignments-report-details .assignmentreport-tooltips, .organization-assignments-index .assignmentreport-tooltips, .assignment-show .assignmentreport-tooltips { display: none; }

.organization-assignments-report-dashboard .assignmentreport-no-data, .organization-assignments-report-details .assignmentreport-no-data, .organization-assignments-index .assignmentreport-no-data, .assignment-show .assignmentreport-no-data { text-align: center; width: 70%; margin: 100px auto; left: 15%; right: 15%; background-color: #fff; padding: 40px; }

.organization-assignments-report-dashboard .assignmentreport-no-data p, .organization-assignments-report-details .assignmentreport-no-data p, .organization-assignments-index .assignmentreport-no-data p, .assignment-show .assignmentreport-no-data p { margin-top: 10px; }

.organization-assignments-report-dashboard #assignmentreport .chartist-tooltip, .organization-assignments-report-details #assignmentreport .chartist-tooltip, .organization-assignments-index #assignmentreport .chartist-tooltip, .assignment-show #assignmentreport .chartist-tooltip { background: #fff; width: 500px; text-align: left; padding: 15px 20px; border-radius: 4px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.08); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; color: #1a2126; font-size: 14px; z-index: 10; }

.organization-assignments-report-dashboard #assignmentreport .chartist-tooltip:after, .organization-assignments-report-details #assignmentreport .chartist-tooltip:after, .organization-assignments-index #assignmentreport .chartist-tooltip:after, .assignment-show #assignmentreport .chartist-tooltip:after { position: absolute; z-index: 11; content: ""; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.08); background: #fff; width: 10px; height: 10px; top: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -o-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.organization-assignments-report-dashboard #assignmentreport .chartist-tooltip.tooltip-show, .organization-assignments-report-details #assignmentreport .chartist-tooltip.tooltip-show, .organization-assignments-index #assignmentreport .chartist-tooltip.tooltip-show, .assignment-show #assignmentreport .chartist-tooltip.tooltip-show { opacity: 1; pointer-events: auto; }

.organization-assignments-report-dashboard #assignmentreport .assignmentreport-tooltip-name, .organization-assignments-report-details #assignmentreport .assignmentreport-tooltip-name, .organization-assignments-index #assignmentreport .assignmentreport-tooltip-name, .assignment-show #assignmentreport .assignmentreport-tooltip-name { font-weight: 700; font-size: 17px; color: #101417; margin-top: 3px; display: block; }

.organization-assignments-report-dashboard #assignmentreport .assignmentreport-tooltip-complete, .organization-assignments-report-dashboard #assignmentreport .assignmentreport-tooltip-remaining, .organization-assignments-report-details #assignmentreport .assignmentreport-tooltip-complete, .organization-assignments-report-details #assignmentreport .assignmentreport-tooltip-remaining, .organization-assignments-index #assignmentreport .assignmentreport-tooltip-complete, .organization-assignments-index #assignmentreport .assignmentreport-tooltip-remaining, .assignment-show #assignmentreport .assignmentreport-tooltip-complete, .assignment-show #assignmentreport .assignmentreport-tooltip-remaining { margin-top: -3px; display: block; }

.organization-assignments-report-dashboard #assignmentreport .assignmentreport-tooltip-user a, .organization-assignments-report-details #assignmentreport .assignmentreport-tooltip-user a, .organization-assignments-index #assignmentreport .assignmentreport-tooltip-user a, .assignment-show #assignmentreport .assignmentreport-tooltip-user a { font-weight: 700; }

.organization-assignments-report-dashboard #assignmentreport .assignmentreport-tooltip-userprogress svg, .organization-assignments-report-details #assignmentreport .assignmentreport-tooltip-userprogress svg, .organization-assignments-index #assignmentreport .assignmentreport-tooltip-userprogress svg, .assignment-show #assignmentreport .assignmentreport-tooltip-userprogress svg { float: left; height: 95px; width: auto; margin: 3px 10px 0 0; }

.organization-assignments-report-dashboard #assignmentreport .assignmentreport-tooltip-userprogress h4, .organization-assignments-report-details #assignmentreport .assignmentreport-tooltip-userprogress h4, .organization-assignments-index #assignmentreport .assignmentreport-tooltip-userprogress h4, .assignment-show #assignmentreport .assignmentreport-tooltip-userprogress h4 { font-size: 15px; color: #101417; }

.organization-assignments-report-dashboard #assignmentreport .assignmentreport-tooltip-userprogress span, .organization-assignments-report-details #assignmentreport .assignmentreport-tooltip-userprogress span, .organization-assignments-index #assignmentreport .assignmentreport-tooltip-userprogress span, .assignment-show #assignmentreport .assignmentreport-tooltip-userprogress span { font-size: 13px; color: #2b363e; margin-top: -5px; display: block; }

.organization-assignments-report-dashboard #assignmentreport .assignmentreport-tooltip-nextactivity, .organization-assignments-report-details #assignmentreport .assignmentreport-tooltip-nextactivity, .organization-assignments-index #assignmentreport .assignmentreport-tooltip-nextactivity, .assignment-show #assignmentreport .assignmentreport-tooltip-nextactivity { margin-top: 16px; }

.assignmentreport-keymetric { text-align: center; padding: 40px 50px; border-right: 1px solid #f0f2f4; position: relative; height: 550px; }

.assignmentreport-keymetric-membername a { color: #1a2126; }

.assignmentreport-keymetric-membername a:hover { color: #050708; text-decoration: underline; }

.assignmentreport-keymetric .card-action { float: none; }

.assignmentreport-keymetric .secondary-heading, .assignmentreport-coursemetric .secondary-heading { text-align: left; }

.assignmentreport-keymetric-accountability, .assignmentreport-coursemetric-accountability { border: none; }

.assignmentreport-keymetric-title, .assignmentreport-coursemetric-title { font-size: 16px; margin-bottom: 15px; }

.assignmentreport-keymetric-stat, .assignmentreport-coursemetric-stat { font-size: 45px; color: #050708; display: block; margin-bottom: 15px; position: relative; }

.assignmentreport-keymetric-change, .assignmentreport-coursemetric-change { font-size: 18px; position: absolute; bottom: 0; margin-left: 5px; }

.assignmentreport-keymetric-change.positive, .assignmentreport-coursemetric-change.positive { color: #5fcf80; }

.assignmentreport-keymetric-change.negative, .assignmentreport-coursemetric-change.negative { color: #ed5a5a; }

.assignmentreport-keymetric-subtitle, .assignmentreport-coursemetric-subtitle { font-size: 14px; font-weight: 400; color: #2b363e; }

.assignmentreport-keymetric-members, .assignmentreport-keymetric-courses, .assignmentreport-coursemetric-members, .assignmentreport-coursemetric-courses { padding: 40px 0 0 0; }

.assignmentreport-keymetric-member, .assignmentreport-keymetric-course, .assignmentreport-coursemetric-member, .assignmentreport-coursemetric-course { text-align: left; position: relative; margin-bottom: 35px; }

.assignmentreport-keymetric-memberavatar, .assignmentreport-keymetric-courseavatar, .assignmentreport-coursemetric-memberavatar, .assignmentreport-coursemetric-courseavatar { height: 25px; width: 25px; border-radius: 100%; float: left; margin-top: -2px; margin-right: 10px; }

.assignmentreport-keymetric-membername, .assignmentreport-keymetric-coursename, .assignmentreport-coursemetric-membername, .assignmentreport-coursemetric-coursename { font-size: 17px; }

.assignmentreport-keymetric-memberstat, .assignmentreport-keymetric-coursestat, .assignmentreport-coursemetric-memberstat, .assignmentreport-coursemetric-coursestat { position: absolute; right: 0; top: 0; font-weight: 500; font-size: 15px; }

.assignmentreport-keymetric-memberstat svg, .assignmentreport-keymetric-coursestat svg, .assignmentreport-coursemetric-memberstat svg, .assignmentreport-coursemetric-coursestat svg { height: 15px; width: auto; margin: 3px 5px 0 0; display: block; float: left; fill: #b7c0c7; }

.assignmentreport-keymetric-memberstat li, .assignmentreport-keymetric-coursestat li, .assignmentreport-coursemetric-memberstat li, .assignmentreport-coursemetric-coursestat li { float: left; margin-left: 20px; }

.assignmentreport-keymetric-memberdot, .assignmentreport-keymetric-coursedot, .assignmentreport-coursemetric-memberdot, .assignmentreport-coursemetric-coursedot { background-color: #3f8abf; height: 15px; width: 15px; border-radius: 100%; float: left; margin-top: 5px; margin-right: 10px; }

.assignmentreport-keymetric-viewreport, .assignmentreport-coursemetric-viewreport { position: absolute; bottom: 20px; width: 270px; left: calc(50% - 135px); }

.assignmentreport-coursemetric .contained { padding: 30px; }

.assignmentreport-coursemetric-courses { padding: 10px 0; }

.assignmentreport-coursemetric-course { border-bottom: 1px solid #f0f2f4; padding-bottom: 30px; }

.assignmentreport-coursemetric-coursestat { bottom: 30px; }

.assignmentreport-coursemetric-course:last-child { border: none; padding: 0 !important; margin: 0 !important; }

.assignmentreport-coursemetric .coursecard-org-stats { position: static; }

.assignmentreport-coursemetric-coursesaturation button { left: 30px; }

.assignmentreport-coursesaturation-coursestats svg { height: 25px; width: auto; }

.heading-report-link { font-size: 13px; float: right; color: #050708; padding: 4px 0; border-radius: 4px; }

.heading-report-link:hover { color: #1a2126; }
@charset "UTF-8";
.assignmentreport-reporttable { padding: 0 15px; }

.assignmentreport-reporttable .assignment-download-CVS { font-weight: 500; border-right: #e8ebed 1px solid; padding-right: 5px; }

#assignmentreport .empty-state { text-align: center; margin: 20px; border: 2px solid #f0f2f4; border-radius: 5px; padding: 50px; }

#assignmentreport .risk-indicator { display: inline-block; vertical-align: middle; overflow: hidden; text-indent: -100em; width: 1em; height: 1em; border-radius: 50%; }

#assignmentreport .risk-indicator.low { background-color: #5fcf80; }

#assignmentreport .risk-indicator.medium { background-color: #ffd466; }

#assignmentreport .risk-indicator.high { background-color: #ed5a5a; }

#assignmentreport .member-list { border-radius: 4px 4px 0 0; background: #fff !important; }

#assignmentreport .member-list .control-container { height: 77px; background: #f9fafa !important; border-radius: 4px 4px 0 0; }

#assignmentreport .member-list .control-container .assignmentreport-assignment-dropdown { bottom: 25px; }

#assignmentreport .member-list .control-container .search-form { margin-top: 5px; }

#assignmentreport .member-list .control-container .search-input { position: relative; }

#assignmentreport .member-list .control-container .search-input .close-icon { position: absolute; right: 15px; top: 16px; fill: #587081; }

#assignmentreport .member-list .control-container .search-input .close-icon:hover { fill: #101417; cursor: pointer; }

#assignmentreport .member-list th { outline: none; cursor: pointer; border-bottom: 1px solid #e8ebed; background: #f9fafa; }

#assignmentreport .member-list .tablesorter-headerUnSorted div { margin-right: 11px; }

#assignmentreport .member-list .tablesorter-headerAsc div { color: #050708; }

#assignmentreport .member-list .tablesorter-headerDesc div { color: #050708; }

#assignmentreport .member-list .tablesorter-headerDesc div:after { content: " ▾"; }

#assignmentreport .member-list .tablesorter-headerAsc div:after { content: "▾  "; display: inline-block; margin-left: 3px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

#assignmentreport .member-list tr th.cell-skinny, #assignmentreport .member-list tr td.cell-skinny { width: 50px; }

#assignmentreport .member-list tr td.cell-strong { font-weight: 500; }

#assignmentreport .member-list tr td { font-weight: 400; color: #101417; line-height: 16px; font-size: 13px; }

#assignmentreport .member-list tr td a { color: #050708; }

#assignmentreport .member-list tr td a:hover { color: #1a2126; }

#assignmentreport .member-list tr span { display: block; font-weight: 400; color: #2b363e; font-size: 11px; }

.assignment-report__mail-pref h3 { padding-right: 16px; }

.assignment-report__mail-pref form { margin-top: 30px; }

.assignment-report__mail-pref ul li { margin-left: 0; margin-top: 10px; }

.assignment-report__mail-pref ul li p { margin-bottom: 10px; }

.assignment-report__mail-pref .grid-50 { margin-top: 15px; }

.assignment-report__mail-pref .hidden { font-size: 12px; }

.mail-pref__container { display: flex !important; align-items: start; gap: 50px; margin-block: 30px; }

.mail-pref__container .mail-pref__dept { display: flex; flex-direction: column; }

.mail-pref__container .mail-pref__dept select { border: none; background: #e8ebed; }

.mail-pref__container .mail-pref__dept option { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; color: #1a2126; }
.card-assignments { background-color: #edeff0; border-radius: 15px; padding: 5px 15px; position: absolute; bottom: 30px; left: 45px; right: 45px; z-index: 1; margin-bottom: 60px; color: #050708; }

.card-assignments-data { float: right; font-size: 13px; color: #1a2126; }
.new-track-content { min-height: 550px; }

#new_track_modal_id p { margin-top: 10px; }

#new_track_modal_id h5 { margin-bottom: 10px; }

#new_track_modal_id .next { float: right; }

#new_track_modal_id .new-track-note { font-size: 14px; margin-top: -10px; }

#new_track_modal_id .button.disabled:hover { background-color: transparent; }

#new_track_modal_id hr { margin: 20px 0; }

#new_track_modal_id .input-text { margin-bottom: 5px; }

.new-track-progress { background-color: #f4f4f4; padding: 15px; border-radius: 6px; margin-bottom: 20px; text-align: center; }

.new-track-skills, .new-track-tracks { margin-top: 20px; height: 435px; overflow: scroll; overflow-x: auto; padding: 0px 15px 15px 0; }

.new-track-skill, .new-track-track { border-radius: 8px; margin: 0 0 20px 0 !important; padding: 20px 25px; position: relative; background-color: #f8f8f8; transition: background-color 200ms, color 200ms; }

.new-track-skill:hover, .new-track-skill.selected, .new-track-track:hover, .new-track-track.selected { color: #fff; cursor: pointer; }

.topic-ai.new-track-skill:hover, .topic-ai.new-track-skill.selected, .topic-ai.new-track-track:hover, .topic-ai.new-track-track.selected { background-color: #733A88; }

.topic-ai .new-track-skill:hover, .topic-ai .new-track-skill.selected, .topic-ai .new-track-track:hover, .topic-ai .new-track-track.selected { background-color: #733A88; }

.topic-back-end.new-track-skill:hover, .topic-back-end.new-track-skill.selected, .topic-back-end.new-track-track:hover, .topic-back-end.new-track-track.selected { background-color: #008297; }

.topic-back-end .new-track-skill:hover, .topic-back-end .new-track-skill.selected, .topic-back-end .new-track-track:hover, .topic-back-end .new-track-track.selected { background-color: #008297; }

.topic-data.new-track-skill:hover, .topic-data.new-track-skill.selected, .topic-data.new-track-track:hover, .topic-data.new-track-track.selected { background-color: #9F4B84; }

.topic-data .new-track-skill:hover, .topic-data .new-track-skill.selected, .topic-data .new-track-track:hover, .topic-data .new-track-track.selected { background-color: #9F4B84; }

.topic-design.new-track-skill:hover, .topic-design.new-track-skill.selected, .topic-design.new-track-track:hover, .topic-design.new-track-track.selected { background-color: #4a4290; }

.topic-design .new-track-skill:hover, .topic-design .new-track-skill.selected, .topic-design .new-track-track:hover, .topic-design .new-track-track.selected { background-color: #4a4290; }

.topic-experimental.new-track-skill:hover, .topic-experimental.new-track-skill.selected, .topic-experimental.new-track-track:hover, .topic-experimental.new-track-track.selected { background-color: #733a88; }

.topic-experimental .new-track-skill:hover, .topic-experimental .new-track-skill.selected, .topic-experimental .new-track-track:hover, .topic-experimental .new-track-track.selected { background-color: #733a88; }

.topic-front-end.new-track-skill:hover, .topic-front-end.new-track-skill.selected, .topic-front-end.new-track-track:hover, .topic-front-end.new-track-track.selected { background-color: #3659a2; }

.topic-front-end .new-track-skill:hover, .topic-front-end .new-track-skill.selected, .topic-front-end .new-track-track:hover, .topic-front-end .new-track-track.selected { background-color: #3659a2; }

.topic-fundamentals.new-track-skill:hover, .topic-fundamentals.new-track-skill.selected, .topic-fundamentals.new-track-track:hover, .topic-fundamentals.new-track-track.selected { background-color: #9b3b5a; }

.topic-fundamentals .new-track-skill:hover, .topic-fundamentals .new-track-skill.selected, .topic-fundamentals .new-track-track:hover, .topic-fundamentals .new-track-track.selected { background-color: #9b3b5a; }

.topic-mobile.new-track-skill:hover, .topic-mobile.new-track-skill.selected, .topic-mobile.new-track-track:hover, .topic-mobile.new-track-track.selected { background-color: #30826C; }

.topic-mobile .new-track-skill:hover, .topic-mobile .new-track-skill.selected, .topic-mobile .new-track-track:hover, .topic-mobile .new-track-track.selected { background-color: #30826C; }

.topic-internal.new-track-skill:hover, .topic-internal.new-track-skill.selected, .topic-internal.new-track-track:hover, .topic-internal.new-track-track.selected { background-color: #55616c; }

.topic-internal .new-track-skill:hover, .topic-internal .new-track-skill.selected, .topic-internal .new-track-track:hover, .topic-internal .new-track-track.selected { background-color: #55616c; }

.topic-foundations.new-track-skill:hover, .topic-foundations.new-track-skill.selected, .topic-foundations.new-track-track:hover, .topic-foundations.new-track-track.selected { background-color: #004e61; }

.topic-foundations .new-track-skill:hover, .topic-foundations .new-track-skill.selected, .topic-foundations .new-track-track:hover, .topic-foundations .new-track-track.selected { background-color: #004e61; }

.topic-undefined.new-track-skill:hover, .topic-undefined.new-track-skill.selected, .topic-undefined.new-track-track:hover, .topic-undefined.new-track-track.selected { background-color: #55616c; }

.topic-undefined .new-track-skill:hover, .topic-undefined .new-track-skill.selected, .topic-undefined .new-track-track:hover, .topic-undefined .new-track-track.selected { background-color: #55616c; }

.topic-college-credit.new-track-skill:hover, .topic-college-credit.new-track-skill.selected, .topic-college-credit.new-track-track:hover, .topic-college-credit.new-track-track.selected { background-color: #3887c8; }

.topic-college-credit .new-track-skill:hover, .topic-college-credit .new-track-skill.selected, .topic-college-credit .new-track-track:hover, .topic-college-credit .new-track-track.selected { background-color: #3887c8; }

.topic-no-code.new-track-skill:hover, .topic-no-code.new-track-skill.selected, .topic-no-code.new-track-track:hover, .topic-no-code.new-track-track.selected { background-color: #31AF7F; }

.topic-no-code .new-track-skill:hover, .topic-no-code .new-track-skill.selected, .topic-no-code .new-track-track:hover, .topic-no-code .new-track-track.selected { background-color: #31AF7F; }

.topic-security.new-track-skill:hover, .topic-security.new-track-skill.selected, .topic-security.new-track-track:hover, .topic-security.new-track-track.selected { background-color: #409BE9; }

.topic-security .new-track-skill:hover, .topic-security .new-track-skill.selected, .topic-security .new-track-track:hover, .topic-security .new-track-track.selected { background-color: #409BE9; }

.topic-game-development.new-track-skill:hover, .topic-game-development.new-track-skill.selected, .topic-game-development.new-track-track:hover, .topic-game-development.new-track-track.selected { background-color: #856fc4; }

.topic-game-development .new-track-skill:hover, .topic-game-development .new-track-skill.selected, .topic-game-development .new-track-track:hover, .topic-game-development .new-track-track.selected { background-color: #856fc4; }

.topic-treehouse-resources.new-track-skill:hover, .topic-treehouse-resources.new-track-skill.selected, .topic-treehouse-resources.new-track-track:hover, .topic-treehouse-resources.new-track-track.selected { background-color: #5fcf80; }

.topic-treehouse-resources .new-track-skill:hover, .topic-treehouse-resources .new-track-skill.selected, .topic-treehouse-resources .new-track-track:hover, .topic-treehouse-resources .new-track-track.selected { background-color: #5fcf80; }

.topic-coding-for-kids.new-track-skill:hover, .topic-coding-for-kids.new-track-skill.selected, .topic-coding-for-kids.new-track-track:hover, .topic-coding-for-kids.new-track-track.selected { background-color: #F36C27; }

.topic-coding-for-kids .new-track-skill:hover, .topic-coding-for-kids .new-track-skill.selected, .topic-coding-for-kids .new-track-track:hover, .topic-coding-for-kids .new-track-track.selected { background-color: #F36C27; }

.new-track-skill:hover .new-track-skilltitle, .new-track-skill.selected .new-track-skilltitle, .new-track-skill:hover .new-track-tracktitle, .new-track-skill.selected .new-track-tracktitle, .new-track-track:hover .new-track-skilltitle, .new-track-track.selected .new-track-skilltitle, .new-track-track:hover .new-track-tracktitle, .new-track-track.selected .new-track-tracktitle { color: #fff; }

.new-track-skill:hover svg, .new-track-skill:hover, .new-track-skill.selected svg, .new-track-skill.selected, .new-track-track:hover svg, .new-track-track:hover, .new-track-track.selected svg, .new-track-track.selected { border-color: #fff; fill: #fff; cursor: pointer; }

.new-track-skilltitle, .new-track-tracktitle { display: inline; color: #050708; transition: color 200ms; margin-right: 3px; }

.new-track-skillexample, .new-track-trackexample { font-size: 13px; margin-right: 50px; display: block; }

.new-track-skill-selected, .new-track-track-selected { color: #fff; position: relative; }

.topic-ai.new-track-skill-selected, .topic-ai.new-track-track-selected { background-color: #733A88; }

.topic-ai .new-track-skill-selected, .topic-ai .new-track-track-selected { background-color: #733A88; }

.topic-back-end.new-track-skill-selected, .topic-back-end.new-track-track-selected { background-color: #008297; }

.topic-back-end .new-track-skill-selected, .topic-back-end .new-track-track-selected { background-color: #008297; }

.topic-data.new-track-skill-selected, .topic-data.new-track-track-selected { background-color: #9F4B84; }

.topic-data .new-track-skill-selected, .topic-data .new-track-track-selected { background-color: #9F4B84; }

.topic-design.new-track-skill-selected, .topic-design.new-track-track-selected { background-color: #4a4290; }

.topic-design .new-track-skill-selected, .topic-design .new-track-track-selected { background-color: #4a4290; }

.topic-experimental.new-track-skill-selected, .topic-experimental.new-track-track-selected { background-color: #733a88; }

.topic-experimental .new-track-skill-selected, .topic-experimental .new-track-track-selected { background-color: #733a88; }

.topic-front-end.new-track-skill-selected, .topic-front-end.new-track-track-selected { background-color: #3659a2; }

.topic-front-end .new-track-skill-selected, .topic-front-end .new-track-track-selected { background-color: #3659a2; }

.topic-fundamentals.new-track-skill-selected, .topic-fundamentals.new-track-track-selected { background-color: #9b3b5a; }

.topic-fundamentals .new-track-skill-selected, .topic-fundamentals .new-track-track-selected { background-color: #9b3b5a; }

.topic-mobile.new-track-skill-selected, .topic-mobile.new-track-track-selected { background-color: #30826C; }

.topic-mobile .new-track-skill-selected, .topic-mobile .new-track-track-selected { background-color: #30826C; }

.topic-internal.new-track-skill-selected, .topic-internal.new-track-track-selected { background-color: #55616c; }

.topic-internal .new-track-skill-selected, .topic-internal .new-track-track-selected { background-color: #55616c; }

.topic-foundations.new-track-skill-selected, .topic-foundations.new-track-track-selected { background-color: #004e61; }

.topic-foundations .new-track-skill-selected, .topic-foundations .new-track-track-selected { background-color: #004e61; }

.topic-undefined.new-track-skill-selected, .topic-undefined.new-track-track-selected { background-color: #55616c; }

.topic-undefined .new-track-skill-selected, .topic-undefined .new-track-track-selected { background-color: #55616c; }

.topic-college-credit.new-track-skill-selected, .topic-college-credit.new-track-track-selected { background-color: #3887c8; }

.topic-college-credit .new-track-skill-selected, .topic-college-credit .new-track-track-selected { background-color: #3887c8; }

.topic-no-code.new-track-skill-selected, .topic-no-code.new-track-track-selected { background-color: #31AF7F; }

.topic-no-code .new-track-skill-selected, .topic-no-code .new-track-track-selected { background-color: #31AF7F; }

.topic-security.new-track-skill-selected, .topic-security.new-track-track-selected { background-color: #409BE9; }

.topic-security .new-track-skill-selected, .topic-security .new-track-track-selected { background-color: #409BE9; }

.topic-game-development.new-track-skill-selected, .topic-game-development.new-track-track-selected { background-color: #856fc4; }

.topic-game-development .new-track-skill-selected, .topic-game-development .new-track-track-selected { background-color: #856fc4; }

.topic-treehouse-resources.new-track-skill-selected, .topic-treehouse-resources.new-track-track-selected { background-color: #5fcf80; }

.topic-treehouse-resources .new-track-skill-selected, .topic-treehouse-resources .new-track-track-selected { background-color: #5fcf80; }

.topic-coding-for-kids.new-track-skill-selected, .topic-coding-for-kids.new-track-track-selected { background-color: #F36C27; }

.topic-coding-for-kids .new-track-skill-selected, .topic-coding-for-kids .new-track-track-selected { background-color: #F36C27; }

.new-track-skill-selected:hover .new-track-skill-selected-drag, .new-track-track-selected:hover .new-track-skill-selected-drag { opacity: 1; }

.new-track-skill-selected .new-track-skilltitle, .new-track-track-selected .new-track-skilltitle { color: #fff; padding-left: 30px; }

.new-track-skill-selected .new-track-skillexample, .new-track-track-selected .new-track-skillexample { padding-left: 30px; }

.new-track-skill-selected .new-track-skilldificulty, .new-track-track-selected .new-track-skilldificulty { float: right; width: 190px; margin: -44px -20px; }

.new-track-skill-selected .new-track-skilldificulty .dropdown-parent:hover > .dropdown-parent-label, .new-track-track-selected .new-track-skilldificulty .dropdown-parent:hover > .dropdown-parent-label { color: #fff; opacity: 1; }

.new-track-skill-selected .new-track-skilldificulty .dropdown-parent:hover .dropdown-child-item:hover, .new-track-track-selected .new-track-skilldificulty .dropdown-parent:hover .dropdown-child-item:hover { opacity: 1; color: #5fcf80; }

.new-track-skill-selected .new-track-skilldificulty .dropdown-parent:hover > a:after, .new-track-track-selected .new-track-skilldificulty .dropdown-parent:hover > a:after { background-position: 12px 0; }

.new-track-skill-selected .new-track-skilldificulty .dropdown-parent-label, .new-track-track-selected .new-track-skilldificulty .dropdown-parent-label { color: #fff; opacity: .7; border-radius: 4px; background-color: transparent; border: solid 2px #fff; padding: 5px 10px; width: 150px; display: block; text-align: center; }

.new-track-skill-selected .new-track-skilldificulty .dropdown-parent-label:after, .new-track-track-selected .new-track-skilldificulty .dropdown-parent-label:after { margin: 0; content: none; }

.new-track-skill-selected .new-track-skilldificulty .dropdown-parent-label:hover, .new-track-track-selected .new-track-skilldificulty .dropdown-parent-label:hover { color: #fff; opacity: 1; }

.new-track-skill-selected-drag, .new-track-track-selected-drag { position: absolute; top: 31px; left: 20px; height: 14px; width: auto; fill: #fff; opacity: .5; transition: opacity 200ms; }

.new-track-skill-selected .dropdown-parent, .new-track-track-selected .dropdown-parent { position: absolute; right: 20px; top: 12px; }

.new-track .new-track-content-order .new-track-skills { height: 415px; }

.new-track .new-track-content-order .new-track-skills .new-track-skillexample { width: 65%; }

.new-track-action { position: absolute; top: 21px; right: 20px; background-color: transparent; border: 2px solid #8e969d; padding: 0; text-align: center; line-height: 36px; width: 36px; height: 36px; border-radius: 50%; transition: all 300ms 0s ease; }

.new-track-action:hover svg, .new-track-action:hover { border-color: #fff; fill: #fff; cursor: pointer; }

.new-track-action svg { position: relative; top: 1px; width: 16px; height: 16px; fill: #8e969d; }

.new-track-action-unchecked { display: inline-block; }

.new-track-action-checked { display: none; border-color: #fff; }

.new-track-action-checked svg { top: 3px; fill: #fff; }

.new-track .selected .new-track-action-unchecked { display: none; }

.new-track .selected .new-track-action-checked { display: inline-block; }

.new-track .new-track-selectedskills .new-track-skill { display: none; }

.new-track .new-track-selectedskills .new-track-skill.selected { display: block; }

.new-track ::-webkit-scrollbar { width: 9px; }

.new-track ::-webkit-scrollbar-track { -webkit-border-radius: 5px; border-radius: 5px; background: #edeff0; }

.new-track ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.2); }

.new-track ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); }

.new-track-type { width: calc(50% - 15px); float: left; text-align: center; color: #1a2126; border-radius: 4px; border: solid 3px #e8ebed; padding: 30px; margin-bottom: 30px; -webkit-transition: border 500ms ease-out; -moz-transition: border 500ms ease-out; -o-transition: border 500ms ease-out; transition: border 500ms ease-out; }

.new-track-type.type-customtrack { margin-right: 30px; }

.new-track-type h4 { font-size: 16px; color: #050708; }

.new-track-type p { min-height: 120px; font-weight: 400; }

.new-track-type svg { width: 70%; }

.new-track-type:hover { color: #1a2126; }

.assignment-assessment-info { font-size: 13px !important; background: rgba(63, 138, 191, 0.15); border-radius: 5px; padding: 12px 25px 12px 25px; margin-top: 0px !important; }

span.assignment-assessment-label { display: inline; color: #3f8abf; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.new-track-track:hover span.assignment-assessment-label { color: rgba(255, 255, 255, 0.7); }
.track-progress-modal .members-search { position: relative; }

.track-progress-modal .members-search-input { font-size: 16px; padding-left: 40px; }

.track-progress-modal .members-search .search-icon { position: absolute; left: 15px; top: 15px; fill: #1a2126; }

.track-progress-modal h3 { margin: 0 20px 20px 0; }

.track-progress-modal label { margin-top: 10px; display: block; }

.track-progress-modal hr { margin: 20px 0; }

.track-progress-modal input { min-width: 200px; }

.track-progress-modal ul { margin-top: 20px; height: 300px; overflow: scroll; overflow-x: auto; padding: 0px 15px 15px 0; }

.track-progress-modal .next { float: right; }

.track-progress-modal .button.disabled { opacity: .4; }

.track-progress-modal .button.disabled:hover, .track-progress-modal .button.disabled:active { background-color: transparent !important; }

.track-progress-modal ::-webkit-scrollbar { width: 9px; }

.track-progress-modal ::-webkit-scrollbar-track { -webkit-border-radius: 5px; border-radius: 5px; background: #edeff0; }

.track-progress-modal ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.2); }

.track-progress-modal ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); }

.track-progress-modal li { border-bottom: 1px solid #f0f2f4; margin-bottom: 20px; padding-bottom: 20px; position: relative; font-size: 16px; }

.track-progress-modal li a { color: inherit; }

.track-progress-modal li:last-child { border: none; padding: 0; }
#custom-tracks .custom-tracks-list .card-box { min-height: 331px; }

@media screen and (max-width: 679px) { #custom-tracks .custom-tracks-list .card-box { min-height: 370px; } }

#custom-tracks .custom-tracks-list .report-icon { top: 5px; left: 7px; }

#custom-tracks .custom-tracks-list .plus-icon { top: 2px; left: 7px; }

#custom-tracks .custom-tracks-list .reload-icon { top: 3px; left: 7px; }

#custom-tracks .custom-tracks-list .reload-icon-update { top: 3px; left: 7px; fill: #5fcf80; }

#custom-tracks .custom-tracks-list .card-action.secondary a:hover { color: #666; }

#custom-tracks .custom-tracks-list .card-action-info.disabled { opacity: 0.5; }

#custom-tracks .custom-tracks-empty { clear: both; position: relative; }

#custom-tracks .custom-tracks-empty .fpo-card { opacity: .4; }

#custom-tracks .custom-tracks-emptymessage { position: absolute; top: 70px; left: 25%; z-index: 11; width: 50%; }

#custom-tracks .custom-tracks-emptymessageheading { margin-bottom: 10px; }

.custom-card .card-progress { margin: 0 15px; z-index: 1; }
#access_controls { padding: 0 15px; }

#access_controls textarea { background-color: #fff; resize: none; }

#access_controls input[type="submit"] { margin: 10px 0; }
#organization_dashboard .alert-banner a, #leader_dashboard .alert-banner a { font-weight: 700; text-decoration: underline; }

#organization_dashboard .g-hide, #leader_dashboard .g-hide { display: none; }

#organization_dashboard .member-activity-header, #leader_dashboard .member-activity-header { width: 100%; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

#organization_dashboard .member-activity-header h2, #leader_dashboard .member-activity-header h2 { margin-bottom: 20px; }

#organization_dashboard .member-activity-header .info, #leader_dashboard .member-activity-header .info { text-align: right; }

#organization_dashboard .dashboard-tooltip, #leader_dashboard .dashboard-tooltip { background: #2d3339; border-radius: 5px; position: absolute; z-index: 500; padding: 10px 12px; opacity: .95; opacity: 0; transition: opacity 250ms ease-in-out; }

#organization_dashboard .dashboard-tooltip.active, #leader_dashboard .dashboard-tooltip.active { opacity: 1; }

#organization_dashboard .dashboard-tooltip .value, #leader_dashboard .dashboard-tooltip .value { font-size: 15px; font-weight: 700; color: white; margin-bottom: 6px; }

#organization_dashboard .dashboard-tooltip .date, #leader_dashboard .dashboard-tooltip .date { font-size: 12px; }

#organization_dashboard .contained .line, #leader_dashboard .contained .line { border-top: 1px solid #f0f2f4; margin: 15px 0 0 0; }

#organization_dashboard .contained .info, #leader_dashboard .contained .info { float: right; margin: 10px 0 0 0; font-size: 13px; color: #2b363e; width: 100%; }

@media screen and (max-width: 679px) { #organization_dashboard .contained .info, #leader_dashboard .contained .info { float: none; } }

#organization_dashboard .tracks, #leader_dashboard .tracks { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset; }

#organization_dashboard .tracks .progress, #leader_dashboard .tracks .progress { font-size: 13px; color: #b2bac2; }

#organization_dashboard .tracks .progress-container, #leader_dashboard .tracks .progress-container { margin-top: 15px; }

#organization_dashboard #member-table h2, #leader_dashboard #member-table h2 { float: left; color: #2d3339; }

#organization_dashboard #member-table .add-member-individual, #leader_dashboard #member-table .add-member-individual { display: block; }

#organization_dashboard #member-table .add-member-individual:before, #organization_dashboard #member-table .add-member-individual:after, #leader_dashboard #member-table .add-member-individual:before, #leader_dashboard #member-table .add-member-individual:after { content: " "; display: table; }

#organization_dashboard #member-table .add-member-individual:after, #leader_dashboard #member-table .add-member-individual:after { clear: both; }

#organization_dashboard #member-table .seat-capacity, #leader_dashboard #member-table .seat-capacity { padding: 15px 0 30px 0; overflow: hidden; }

#organization_dashboard #member-table .seat-capacity-item, #leader_dashboard #member-table .seat-capacity-item { border-left: solid 1px #e8ebed; float: left; padding: 0 30px; font-size: 28px; color: #384047; }

#organization_dashboard #member-table .seat-capacity-item span, #leader_dashboard #member-table .seat-capacity-item span { display: block; color: #2b363e; font-size: 14px; margin-top: 5px; }

#organization_dashboard #member-table .seat-capacity-item:first-child, #leader_dashboard #member-table .seat-capacity-item:first-child { border-left: none; padding-left: 0; }

#organization_dashboard #member-table .seat-capacity-item:last-child, #leader_dashboard #member-table .seat-capacity-item:last-child { padding-right: 0; }

@media screen and (max-width: 500px) { #organization_dashboard #member-table .seat-capacity-item:nth-child(3), #leader_dashboard #member-table .seat-capacity-item:nth-child(3) { padding-left: 0; padding-top: 20px; border-left: 0; clear: left; } }

@media screen and (max-width: 712px) { #organization_dashboard #member-table .seat-capacity-item:last-child, #leader_dashboard #member-table .seat-capacity-item:last-child { border-left: none; padding-left: 0; clear: left; } }

#organization_dashboard #member-table .add-member, #organization_dashboard #member-table .add-seats, #leader_dashboard #member-table .add-member, #leader_dashboard #member-table .add-seats { margin: 3px 0 3px 0; }

@media screen and (max-width: 712px) { #organization_dashboard #member-table .add-member, #organization_dashboard #member-table .add-seats, #leader_dashboard #member-table .add-member, #leader_dashboard #member-table .add-seats { display: block; margin-top: 20px; } }

#organization_dashboard #member-table .add-member.secondary .add-icon, #organization_dashboard #member-table .add-seats.secondary .add-icon, #leader_dashboard #member-table .add-member.secondary .add-icon, #leader_dashboard #member-table .add-seats.secondary .add-icon { -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#organization_dashboard #member-table .department-input .form-element, #leader_dashboard #member-table .department-input .form-element { width: 100% !important; }

#organization_dashboard #member-table .uploaded .track-input, #leader_dashboard #member-table .uploaded .track-input { border-left: 0; }

#organization_dashboard #member-table .track-input, #leader_dashboard #member-table .track-input { position: relative; }

#organization_dashboard #member-table .track-input-assignment, #leader_dashboard #member-table .track-input-assignment { padding-left: 0; }

@media screen and (max-width: 969px) { #organization_dashboard #member-table .track-input-assignment, #leader_dashboard #member-table .track-input-assignment { padding: 0; } }

#organization_dashboard #member-table .track-input-autojoin, #leader_dashboard #member-table .track-input-autojoin { padding-right: 0; }

@media screen and (max-width: 969px) { #organization_dashboard #member-table .track-input-autojoin, #leader_dashboard #member-table .track-input-autojoin { padding: 10px 0 0 0; } }

#organization_dashboard #member-table .track-input-autojoin-checkbox, #leader_dashboard #member-table .track-input-autojoin-checkbox { top: 10px; left: 0px; position: relative; }

#organization_dashboard #member-table .track-input .form-element, #leader_dashboard #member-table .track-input .form-element { width: 100% !important; }

@media screen and (max-width: 679px) { #organization_dashboard #member-table .invitation-buttons, #leader_dashboard #member-table .invitation-buttons { padding: 0; } }

#organization_dashboard #member-table .invitation-buttons, #leader_dashboard #member-table .invitation-buttons { padding-right: 0; margin-bottom: 15px; }

#organization_dashboard #member-table .invitation-buttons button, #leader_dashboard #member-table .invitation-buttons button { width: 100%; height: 44px; }

#organization_dashboard #member-table .add-member-upload, #leader_dashboard #member-table .add-member-upload { display: block; position: relative; height: 45px; width: calc(100% + 30px); margin-right: -15px; margin-left: -15px; }

#organization_dashboard #member-table .add-member-upload .contained-note, #leader_dashboard #member-table .add-member-upload .contained-note { background: #fff8e6; color: #b38000; border: 2px solid #ffeab3; border-radius: 4px; font-size: 13px; position: relative; float: left; display: block; padding: 20px; width: 100%; margin-top: -20px; }

#organization_dashboard #member-table .add-member-upload .contained-note ul, #leader_dashboard #member-table .add-member-upload .contained-note ul { list-style-type: disc; margin-left: 16px; }

#organization_dashboard #member-table .add-member-upload .contained-note li, #leader_dashboard #member-table .add-member-upload .contained-note li { line-height: 1.5; padding-bottom: 15px; }

#organization_dashboard #member-table .add-member-upload .contained-note li:last-of-type, #leader_dashboard #member-table .add-member-upload .contained-note li:last-of-type { padding-bottom: 0px; }

#organization_dashboard #member-table .add-member-upload .contained-note table, #leader_dashboard #member-table .add-member-upload .contained-note table { margin-top: 5px; }

@media screen and (max-width: 679px) { #organization_dashboard #member-table .add-member-upload .contained-note table, #leader_dashboard #member-table .add-member-upload .contained-note table { margin-bottom: 0; } }

#organization_dashboard #member-table .add-member-upload .contained-note td, #leader_dashboard #member-table .add-member-upload .contained-note td { border: 1px solid rgba(179, 128, 0, 0.25); padding: 5px 10px; display: inline-block; }

#organization_dashboard #member-table .add-member-upload .contained-note .info-icon, #leader_dashboard #member-table .add-member-upload .contained-note .info-icon { fill: #b38000; position: relative; top: 5px; margin-right: 5px; width: 20px; height: 20px; }

#organization_dashboard #member-table .add-member-upload .button.secondary, #leader_dashboard #member-table .add-member-upload .button.secondary { top: -43px; left: 0; position: relative; height: 43px; line-height: 41px; border-top-right-radius: 0; border-bottom-right-radius: 0; }

#organization_dashboard #member-table .add-member-upload .button.secondary:hover, #leader_dashboard #member-table .add-member-upload .button.secondary:hover { cursor: hand; }

#organization_dashboard #member-table .add-member-upload #csv-file-upload, #leader_dashboard #member-table .add-member-upload #csv-file-upload { top: 0; left: 0; position: relative; width: 115px; height: 43px; margin: 0; }

#organization_dashboard #member-table .add-member-upload .filename, #leader_dashboard #member-table .add-member-upload .filename { padding-left: 15px; border: 2px solid #d4d9dd; border-radius: 5px; border-top-left-radius: 0; border-bottom-left-radius: 0; height: 43px; display: block; background: #fff; margin-top: -42px; margin-left: 115px; }

#organization_dashboard #member-table .add-member-upload .upload-file, #leader_dashboard #member-table .add-member-upload .upload-file { float: right; margin: -58px -2px 0 0; border-top-left-radius: 0; border-bottom-left-radius: 0; height: 43px; }

#organization_dashboard #member-table .member-upload-success-message, #leader_dashboard #member-table .member-upload-success-message { margin: 0 -30px; }

#organization_dashboard #member-table .member-upload-success-message .alert, #leader_dashboard #member-table .member-upload-success-message .alert { margin-bottom: 0; border-radius: 0; padding-left: 30px; }

#organization_dashboard #member-table .member-upload-success-message .alert button, #leader_dashboard #member-table .member-upload-success-message .alert button { right: 20px; }

#organization_dashboard .member-list, #leader_dashboard .member-list { background: #f9fafa; margin: 0 -30px; border-top: 1px solid #e8ebed; border-bottom: 1px solid #e8ebed; }

#organization_dashboard .member-list .alert.success, #organization_dashboard .member-list .alert.error, #leader_dashboard .member-list .alert.success, #leader_dashboard .member-list .alert.error { border-radius: 0; margin-bottom: 0; }

#organization_dashboard .member-list .control-container, #leader_dashboard .member-list .control-container { margin: 0; background: none; box-shadow: none; border-bottom: 1px solid #e8ebed; }

#organization_dashboard .member-list .control-container .search, #leader_dashboard .member-list .control-container .search { background: none; border-top: none; }

@media screen and (min-width: 970px) { #organization_dashboard .member-list .control-container .search .search-form, #leader_dashboard .member-list .control-container .search .search-form { width: 35%; } }

@media screen and (min-width: 680px) and (max-width: 969px) { #organization_dashboard .member-list .control-container .search .search-form, #leader_dashboard .member-list .control-container .search .search-form { width: 16%; }
  #organization_dashboard .member-list .control-container .search .search-form input::-webkit-input-placeholder, #leader_dashboard .member-list .control-container .search .search-form input::-webkit-input-placeholder { color: #fff; } }

#organization_dashboard .member-list .alert-banner, #leader_dashboard .member-list .alert-banner { margin-bottom: 0; border-radius: 0; }

#organization_dashboard .member-list .group-result, #leader_dashboard .member-list .group-result { color: #5a6772; font-size: 12px; font-weight: 700; line-height: 20px; list-style: none; padding: 5px 10px 0 10px; }

#organization_dashboard .member-list .empty-placeholder, #leader_dashboard .member-list .empty-placeholder { height: 190px; line-height: 1.5; }

#organization_dashboard .member-list .empty-placeholder strong, #leader_dashboard .member-list .empty-placeholder strong { margin: 160px 0 30px 0; display: block; color: #1a2126; font-size: 18px; }

#organization_dashboard .member-list table, #leader_dashboard .member-list table { width: 100%; line-height: 1.4em; text-align: left; font-size: 12px; }

#organization_dashboard .member-list table tr, #leader_dashboard .member-list table tr { position: relative; padding: 0 10px; border-top: 1px solid #e8ebed; }

#organization_dashboard .member-list table tr:first-child, #leader_dashboard .member-list table tr:first-child { border: none; }

#organization_dashboard .member-list table tr > th:first-child, #organization_dashboard .member-list table tr > td:first-child, #leader_dashboard .member-list table tr > th:first-child, #leader_dashboard .member-list table tr > td:first-child { padding-left: 30px; }

#organization_dashboard .member-list table tr.member-status-disabled td, #organization_dashboard .member-list table tr.member-status-disabled .member-details-name a, #leader_dashboard .member-list table tr.member-status-disabled td, #leader_dashboard .member-list table tr.member-status-disabled .member-details-name a { color: #2b363e; }

#organization_dashboard .member-list table tr.member-status-disabled .member-details-avatar, #organization_dashboard .member-list table tr.member-status-disabled .member-status, #leader_dashboard .member-list table tr.member-status-disabled .member-details-avatar, #leader_dashboard .member-list table tr.member-status-disabled .member-status { opacity: .5; }

#organization_dashboard .member-list table tr .role-tag, #leader_dashboard .member-list table tr .role-tag { font-size: 10px; color: #3f8abf; }

#organization_dashboard .member-list table tr .member-details-name a, #leader_dashboard .member-list table tr .member-details-name a { word-break: break-all; }

#organization_dashboard .member-list table tr .member-details-email, #leader_dashboard .member-list table tr .member-details-email { overflow: hidden; text-overflow: ellipsis; }

#organization_dashboard .member-list table tr td, #organization_dashboard .member-list table tr th, #leader_dashboard .member-list table tr td, #leader_dashboard .member-list table tr th { height: 72px; vertical-align: middle; padding: 0 10px; color: #384047; }

#organization_dashboard .member-list table tr td.member-points, #organization_dashboard .member-list table tr td.member-badges, #organization_dashboard .member-list table tr td.member-quizzes, #organization_dashboard .member-list table tr td.member-courses, #organization_dashboard .member-list table tr td.member-challenges, #organization_dashboard .member-list table tr td.member-videos, #organization_dashboard .member-list table tr td.member-login, #organization_dashboard .member-list table tr td.member-invited, #organization_dashboard .member-list table tr th.member-points, #organization_dashboard .member-list table tr th.member-badges, #organization_dashboard .member-list table tr th.member-quizzes, #organization_dashboard .member-list table tr th.member-courses, #organization_dashboard .member-list table tr th.member-challenges, #organization_dashboard .member-list table tr th.member-videos, #organization_dashboard .member-list table tr th.member-login, #organization_dashboard .member-list table tr th.member-invited, #leader_dashboard .member-list table tr td.member-points, #leader_dashboard .member-list table tr td.member-badges, #leader_dashboard .member-list table tr td.member-quizzes, #leader_dashboard .member-list table tr td.member-courses, #leader_dashboard .member-list table tr td.member-challenges, #leader_dashboard .member-list table tr td.member-videos, #leader_dashboard .member-list table tr td.member-login, #leader_dashboard .member-list table tr td.member-invited, #leader_dashboard .member-list table tr th.member-points, #leader_dashboard .member-list table tr th.member-badges, #leader_dashboard .member-list table tr th.member-quizzes, #leader_dashboard .member-list table tr th.member-courses, #leader_dashboard .member-list table tr th.member-challenges, #leader_dashboard .member-list table tr th.member-videos, #leader_dashboard .member-list table tr th.member-login, #leader_dashboard .member-list table tr th.member-invited { text-align: center; max-width: 64px; }

#organization_dashboard .member-list table tr th, #leader_dashboard .member-list table tr th { font-weight: 700; color: #2b363e; height: 45px; }

#organization_dashboard .member-list table tr th.member-status, #leader_dashboard .member-list table tr th.member-status { float: right; padding: 15px 98px 0 15px; }

#organization_dashboard .member-list table tr .member-department span, #leader_dashboard .member-list table tr .member-department span { padding: 10px 15px 8px 10px; font-size: 12px; font-weight: 400; color: #384047; text-align: left; }

#organization_dashboard .member-list table tr .member-department .form-element, #leader_dashboard .member-list table tr .member-department .form-element { background: transparent; border: none; width: 120px; margin-left: -10px; }

#organization_dashboard .member-list table tr .member-department .form-element:after, #leader_dashboard .member-list table tr .member-department .form-element:after { background: transparent url("/assets/icons/icon-select-dark-a98b0498454d17c7f1e46b9644fb175e14aaa28d9013d51e961c14cb5f578362.svg") no-repeat center; width: 14px; height: 8px; right: 8px; top: 12px; bottom: 3px; }

#organization_dashboard .member-list table tr .member-department .hover, #leader_dashboard .member-list table tr .member-department .hover { background-color: #edeff0; cursor: pointer; }

#organization_dashboard .member-list table tr .member-status, #leader_dashboard .member-list table tr .member-status { float: right; }

#organization_dashboard .member-list table tr .member-status .form-element, #leader_dashboard .member-list table tr .member-status .form-element { background-color: transparent; border: 2px solid #d4d9dd; color: #70808e; padding: 0 16px 0 10px; height: 36px; line-height: 26px; font-size: 12px; width: 105px !important; margin: 20px 20px 0 0; }

#organization_dashboard .member-list table tr .member-status .form-element:after, #leader_dashboard .member-list table tr .member-status .form-element:after { background: transparent url("/assets/icons/icon-select-dark-a98b0498454d17c7f1e46b9644fb175e14aaa28d9013d51e961c14cb5f578362.svg") no-repeat center; width: 14px; height: 8px; right: 8px; top: 12px; bottom: 3px; }

#organization_dashboard .member-list table tr .member-status .form-element span, #leader_dashboard .member-list table tr .member-status .form-element span { padding: 3px 0px 3px 0px; color: #70808e; line-height: 26px; font-size: 12px; }

#organization_dashboard .member-list table tr .member-row-remove, #leader_dashboard .member-list table tr .member-row-remove { width: 100px; }

@media screen and (max-width: 679px) { #organization_dashboard .member-list table tr .member-details, #leader_dashboard .member-list table tr .member-details { width: 340px; } }

#organization_dashboard .member-list table tr .member-details-avatar, #leader_dashboard .member-list table tr .member-details-avatar { float: left; margin-right: 10px; }

#organization_dashboard .member-list table tr .member-details-name, #organization_dashboard .member-list table tr .member-details-email, #leader_dashboard .member-list table tr .member-details-name, #leader_dashboard .member-list table tr .member-details-email { margin-left: 40px; }

#organization_dashboard .member-list table tr .member-details-name, #leader_dashboard .member-list table tr .member-details-name { margin-bottom: 4px; }

#organization_dashboard .member-list table tr .member-details-name a, #leader_dashboard .member-list table tr .member-details-name a { color: #384047; font-size: 13px; font-weight: 700; }

#organization_dashboard .member-list table tr .member-details-name a:hover, #leader_dashboard .member-list table tr .member-details-name a:hover { text-decoration: underline; color: #2d3339; }

#organization_dashboard .member-list table tr .member-details-email, #leader_dashboard .member-list table tr .member-details-email { color: #2b363e; }

#organization_dashboard .member-list table tr .member-track-progress, #leader_dashboard .member-list table tr .member-track-progress { padding-top: 4px; color: #2b363e; }

#organization_dashboard .member-list table tr .member-techdegree-name span, #leader_dashboard .member-list table tr .member-techdegree-name span { display: block; padding-top: 4px; color: #2b363e; }

#organization_dashboard .member-list table tr .member-action-confirmation, #organization_dashboard .member-list table tr .member-action-error, #leader_dashboard .member-list table tr .member-action-confirmation, #leader_dashboard .member-list table tr .member-action-error { position: relative; }

#organization_dashboard .member-list table tr .confirmation-bar, #leader_dashboard .member-list table tr .confirmation-bar { position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%; height: 72px; background: #575f66; }

@media screen and (max-width: 679px) { #organization_dashboard .member-list table tr .confirmation-bar, #leader_dashboard .member-list table tr .confirmation-bar { width: -webkit-calc( 100% + 40px); margin: 0 -20px 0 0; } }

#organization_dashboard .member-list table tr .confirmation-bar-content, #leader_dashboard .member-list table tr .confirmation-bar-content { float: left; width: 65%; padding: 10px 0 10px 30px; }

@media screen and (max-width: 969px) { #organization_dashboard .member-list table tr .confirmation-bar-content, #leader_dashboard .member-list table tr .confirmation-bar-content { padding: 10px 20px 8px 30px; width: 50%; } }

@media screen and (max-width: 679px) { #organization_dashboard .member-list table tr .confirmation-bar-content, #leader_dashboard .member-list table tr .confirmation-bar-content { padding: 10px 20px 8px 30px; width: 30%; } }

#organization_dashboard .member-list table tr .confirmation-bar-content .avatar, #leader_dashboard .member-list table tr .confirmation-bar-content .avatar { display: block; float: left; margin: 0 15px 0 0; }

@media screen and (max-width: 969px) { #organization_dashboard .member-list table tr .confirmation-bar-content .avatar, #leader_dashboard .member-list table tr .confirmation-bar-content .avatar { margin-bottom: 60px; } }

#organization_dashboard .member-list table tr .confirmation-bar-content h5, #leader_dashboard .member-list table tr .confirmation-bar-content h5 { margin-top: 10px; font-size: 13px; color: white; }

@media screen and (max-width: 679px) { #organization_dashboard .member-list table tr .confirmation-bar-content h5, #leader_dashboard .member-list table tr .confirmation-bar-content h5 { margin-top: 18px; } }

#organization_dashboard .member-list table tr .confirmation-bar-content p, #leader_dashboard .member-list table tr .confirmation-bar-content p { color: rgba(255, 255, 255, 0.75); font-size: 12px; }

#organization_dashboard .member-list table tr .confirmation-bar-content p a, #leader_dashboard .member-list table tr .confirmation-bar-content p a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; transition: color 150ms ease-in-out; }

#organization_dashboard .member-list table tr .confirmation-bar-content p a:hover, #leader_dashboard .member-list table tr .confirmation-bar-content p a:hover { color: white; }

#organization_dashboard .member-list table tr .confirmation-bar .close-alert, #leader_dashboard .member-list table tr .confirmation-bar .close-alert { float: right; color: #fff; border: none; margin: 27px 25px 0 0; background: transparent; }

#organization_dashboard .member-list table tr .confirmation-bar .close-alert svg, #leader_dashboard .member-list table tr .confirmation-bar .close-alert svg { fill: #fff; height: 13px; width: 13px; opacity: 0.6; cursor: pointer; transition: opacity 0.3s ease; }

#organization_dashboard .member-list table tr .confirmation-bar .close-alert svg:hover, #leader_dashboard .member-list table tr .confirmation-bar .close-alert svg:hover { opacity: 1; }

#organization_dashboard .member-list table tr .confirmation-bar .close-alert:focus, #organization_dashboard .member-list table tr .confirmation-bar .close-alert:active, #leader_dashboard .member-list table tr .confirmation-bar .close-alert:focus, #leader_dashboard .member-list table tr .confirmation-bar .close-alert:active { outline: none; }

#organization_dashboard .member-list table tr .confirmation-bar-buttons, #leader_dashboard .member-list table tr .confirmation-bar-buttons { float: right; padding: 19px 30px 0 0; }

@media screen and (max-width: 969px) { #organization_dashboard .member-list table tr .confirmation-bar-buttons, #leader_dashboard .member-list table tr .confirmation-bar-buttons { padding-top: 16px; } }

#organization_dashboard .member-list table tr .confirmation-bar-buttons .primary, #leader_dashboard .member-list table tr .confirmation-bar-buttons .primary { opacity: 0.88; transition: opacity 0.3s ease; }

#organization_dashboard .member-list table tr .confirmation-bar-buttons .primary:hover, #leader_dashboard .member-list table tr .confirmation-bar-buttons .primary:hover { opacity: 1; }

#organization_dashboard .member-list table tr .confirmation-bar-buttons .secondary, #leader_dashboard .member-list table tr .confirmation-bar-buttons .secondary { opacity: 0.88; transition: opacity 0.3s ease; }

#organization_dashboard .member-list table tr .confirmation-bar-buttons .secondary:hover, #leader_dashboard .member-list table tr .confirmation-bar-buttons .secondary:hover { opacity: 1; }

#organization_dashboard .member-list table tr .confirmation-bar.success, #leader_dashboard .member-list table tr .confirmation-bar.success { background: #5fcf80; }

#organization_dashboard .member-list table tr .confirmation-bar.success .primary, #leader_dashboard .member-list table tr .confirmation-bar.success .primary { color: #5fcf80; }

#organization_dashboard .member-list table tr .confirmation-bar.error, #leader_dashboard .member-list table tr .confirmation-bar.error { background: #ed5a5a; }

#organization_dashboard .member-list table tr .confirmation-bar.error .primary, #leader_dashboard .member-list table tr .confirmation-bar.error .primary { color: #ed5a5a; }

#organization_dashboard .member-list .member-action-error .confirmation-bar-content, #leader_dashboard .member-list .member-action-error .confirmation-bar-content { width: 85%; }

#organization_dashboard .member-list .member-action-error .confirmation-bar-content .error-text, #leader_dashboard .member-list .member-action-error .confirmation-bar-content .error-text { margin-top: 18px; font-size: 13px; }

#organization_dashboard .member-list .member-action-error .confirmation-bar-content .error-text strong, #leader_dashboard .member-list .member-action-error .confirmation-bar-content .error-text strong { color: #fff; }

#organization_dashboard .member-list.leaderboard td.member-department, #organization_dashboard .member-list.leaderboard td.member-points, #organization_dashboard .member-list.leaderboard td.member-badges, #organization_dashboard .member-list.leaderboard td.member-quizzes, #organization_dashboard .member-list.leaderboard td.member-challenges, #organization_dashboard .member-list.leaderboard td.member-videos, #organization_dashboard .member-list.leaderboard td.member-courses, #organization_dashboard .member-list.leaderboard td.member-rank, #leader_dashboard .member-list.leaderboard td.member-department, #leader_dashboard .member-list.leaderboard td.member-points, #leader_dashboard .member-list.leaderboard td.member-badges, #leader_dashboard .member-list.leaderboard td.member-quizzes, #leader_dashboard .member-list.leaderboard td.member-challenges, #leader_dashboard .member-list.leaderboard td.member-videos, #leader_dashboard .member-list.leaderboard td.member-courses, #leader_dashboard .member-list.leaderboard td.member-rank { font-size: 1.5em; font-weight: 300; }

#organization_dashboard .member-list.leaderboard .member-rank, #leader_dashboard .member-list.leaderboard .member-rank { width: 20px; text-align: center; }

#organization_dashboard .member-list.leaderboard .current-user td, #organization_dashboard .member-list.leaderboard .current-user .member-details-name, #leader_dashboard .member-list.leaderboard .current-user td, #leader_dashboard .member-list.leaderboard .current-user .member-details-name { color: #5fcf80; }

#organization_dashboard .member-list.leaderboard .current-user .member-details-avatar, #leader_dashboard .member-list.leaderboard .current-user .member-details-avatar { border-color: #5fcf80; }

#organization_dashboard .member-list.leaderboard .member-details-name, #leader_dashboard .member-list.leaderboard .member-details-name { margin-top: 10px; }

#organization_dashboard .org-member-overview .column-title, #leader_dashboard .org-member-overview .column-title { display: flex; justify-content: space-between; }

#organization_dashboard .org-member-overview .column-title-total, #leader_dashboard .org-member-overview .column-title-total { font-weight: 700; font-size: 18px; }

#organization_dashboard .org-member-overview .topic-points-radar-chart-blank, #leader_dashboard .org-member-overview .topic-points-radar-chart-blank { position: relative; }

#organization_dashboard .org-member-overview .topic-points-radar-chart-blank img, #leader_dashboard .org-member-overview .topic-points-radar-chart-blank img { width: 100%; opacity: .3; }

#organization_dashboard .org-member-overview .topic-points-radar-chart-blank-message, #leader_dashboard .org-member-overview .topic-points-radar-chart-blank-message { position: absolute; top: 50%; transform: translateY(-50%); background-color: #f6f9fa; border-radius: 4px; border: 2px solid #edeff0; padding: 15px; text-align: center; }

#organization_dashboard .org-member-overview .topic-points-radar-chart-blank-message p, #leader_dashboard .org-member-overview .topic-points-radar-chart-blank-message p { margin-bottom: 0; line-height: 1.3; }

#organization_dashboard .org-member-overview .badges-recent .badges, #leader_dashboard .org-member-overview .badges-recent .badges { margin-bottom: 0; }

#organization_dashboard .org-member-overview .badges-recent h2, #leader_dashboard .org-member-overview .badges-recent h2 { display: inline-block; }

#organization_dashboard .org-member-overview .badges-recent .badge:not(:only-of-type), #leader_dashboard .org-member-overview .badges-recent .badge:not(:only-of-type) { display: flex; padding-bottom: 30px; margin-bottom: 30px; border-bottom: #f0f2f4 1px solid; }

#organization_dashboard .org-member-overview .badges-recent .badge:only-of-type, #leader_dashboard .org-member-overview .badges-recent .badge:only-of-type { display: flex; }

#organization_dashboard .org-member-overview .badges-recent .badge-img, #leader_dashboard .org-member-overview .badges-recent .badge-img { flex-basis: 30%; }

#organization_dashboard .org-member-overview .badges-recent .badge-img img, #leader_dashboard .org-member-overview .badges-recent .badge-img img { width: 60px; }

#organization_dashboard .org-member-overview .badges-recent .badge-info, #leader_dashboard .org-member-overview .badges-recent .badge-info { flex-basis: 70%; align-self: center; }

#organization_dashboard .org-member-overview .badges-recent .badge .title, #leader_dashboard .org-member-overview .badges-recent .badge .title { font-weight: 700; color: #101417; margin: 0; }

#organization_dashboard .org-member-overview .badges-recent .badge .activity, #leader_dashboard .org-member-overview .badges-recent .badge .activity { color: #1a2126; margin: 0; }

#organization_dashboard .org-member-overview .badges-recent .badge .date, #leader_dashboard .org-member-overview .badges-recent .badge .date { margin: 0; font-size: 12px; }

#organization_dashboard .badges, #leader_dashboard .badges { margin-bottom: -30px; }

#organization_dashboard .badges .badges, #leader_dashboard .badges .badges { margin: 0 -10px 0 -10px; }

#organization_dashboard .badges .badges .grid-33, #leader_dashboard .badges .badges .grid-33 { margin: 0 0 35px; }

#organization_dashboard .badges .badges .case, #leader_dashboard .badges .badges .case { background: #f3f4f5; padding-top: 38px; height: 190px; border-radius: 5px; margin-bottom: 12px; }

#organization_dashboard .badges .badges .case .badge, #leader_dashboard .badges .badges .case .badge { margin: 0 auto; width: 92px; height: 129px; }

#organization_dashboard .badges .badges .case .badge img, #leader_dashboard .badges .badges .case .badge img { width: 100%; }

#organization_dashboard .badges .badges .info, #leader_dashboard .badges .badges .info { text-align: center; width: 100%; }

#organization_dashboard .badges .badges .info .title, #leader_dashboard .badges .badges .info .title { font-size: 14px; color: #101417; font-weight: 700; margin: 0; }

#organization_dashboard .badges .badges .info .activity, #leader_dashboard .badges .badges .info .activity { margin: 0; }

#organization_dashboard .badges .badges .info .date, #leader_dashboard .badges .badges .info .date { font-size: 13px; color: #1a2126; margin: 0; }

#organization_dashboard .activity .form-item, #leader_dashboard .activity .form-item { float: right; margin: -8px 0 0 0; }

@media screen and (max-width: 679px) { #organization_dashboard .activity .form-item, #leader_dashboard .activity .form-item { float: none; } }

#organization_dashboard .activity .section, #leader_dashboard .activity .section { margin-top: 40px; float: left; width: 100%; }

#organization_dashboard .activity .section:first-of-type, #leader_dashboard .activity .section:first-of-type { margin-top: 0; }

#organization_dashboard .activity .section table, #leader_dashboard .activity .section table { margin-bottom: 0; }

#organization_dashboard .activity .section .progress, #leader_dashboard .activity .section .progress { font-size: 13px; margin: 3px 0 30px 0; }

#organization_dashboard .activity .show-all, #leader_dashboard .activity .show-all { padding: 20px 30px; border-top: 1px solid #EBECEC; border-bottom: 1px solid #EBECEC; background: #f9fafa; width: -webkit-calc( 100% + 60px); font-size: 14px; float: left; margin: 0 -30px; font-weight: 700; }

#organization_dashboard .activity .show-all .show-text, #leader_dashboard .activity .show-all .show-text { display: block; }

#organization_dashboard .activity .show-all .hide-text, #leader_dashboard .activity .show-all .hide-text { display: none; }

#organization_dashboard .activity .show-all.target-expanded .show-text, #leader_dashboard .activity .show-all.target-expanded .show-text { display: none; }

#organization_dashboard .activity .show-all.target-expanded .hide-text, #leader_dashboard .activity .show-all.target-expanded .hide-text { display: block; }

#organization_dashboard .activity .show-all.target-expanded:hover .icon-chevron-up, #leader_dashboard .activity .show-all.target-expanded:hover .icon-chevron-up { background-position: 0 0; }

#organization_dashboard .activity .show-all:hover .icon-chevron-down, #leader_dashboard .activity .show-all:hover .icon-chevron-down { background-position: 0 -8px; }

#organization_dashboard .activity .show-all .icon, #leader_dashboard .activity .show-all .icon { margin-top: -2px; margin-right: 10px; }

@media screen and (max-width: 679px) { #organization_dashboard .contained .info, #leader_dashboard .contained .info { margin-bottom: 20px; }
  #organization_dashboard .contained .line, #leader_dashboard .contained .line { margin: 0 -20px; }
  #organization_dashboard .stats, #leader_dashboard .stats { padding-top: 0; }
  #organization_dashboard .stats .stat, #leader_dashboard .stats .stat { padding-top: 15px; }
  #organization_dashboard .graph, #leader_dashboard .graph { display: none; margin: 30px -20px -20px -20px; padding: 20px; }
  #organization_dashboard .tracks, #leader_dashboard .tracks { margin: 30px -20px -20px -20px; padding: 0px 20px 0 20px; }
  #organization_dashboard .tracks .track, #leader_dashboard .tracks .track { padding: 20px 0; }
  #organization_dashboard table tr > th:first-child, #organization_dashboard table tr > td:first-child, #leader_dashboard table tr > th:first-child, #leader_dashboard table tr > td:first-child { padding-left: 20px !important; }
  #organization_dashboard table .badges, #organization_dashboard table .quizzes, #organization_dashboard table .points, #organization_dashboard table .date, #organization_dashboard table .attempts, #organization_dashboard table .login, #organization_dashboard table .questions, #leader_dashboard table .badges, #leader_dashboard table .quizzes, #leader_dashboard table .points, #leader_dashboard table .date, #leader_dashboard table .attempts, #leader_dashboard table .login, #leader_dashboard table .questions { display: none; }
  #organization_dashboard .activity .show-all, #leader_dashboard .activity .show-all { padding: 20px 20px; margin: 0 -20px; } }

#organization_dashboard .hidden, #leader_dashboard .hidden { display: none; }

.add-member-upload-note-modal li:first-of-type { border-top: 1px solid #f0f2f4; }

.add-member-upload-note-modal li { padding: 5px 0; border-bottom: 1px solid #f0f2f4; }

.add-member-upload-note-modal h2 { margin-bottom: 5px; line-height: 34px; font-size: 16px; }

.add-member-upload-note-modal h2:not(:first-of-type) { margin-top: 20px; }

@media screen and (max-width: 650px) { #content-report-dates .form-element { float: none; margin-bottom: 10px; } }

@media screen and (min-width: 651px) { #content-report-dates .form-element { float: left; margin-right: 20px; margin-bottom: 20px; width: 20% !important; } }

.activity-action .org-report-type .form-element, .member-activity-action .org-report-type .form-element, .member-detail-action .org-report-type .form-element { width: 95% !important; }

.activity-action .org-report-dept .form-element, .member-activity-action .org-report-dept .form-element, .member-detail-action .org-report-dept .form-element { width: 87% !important; }

.activity-action .stats, .member-activity-action .stats, .member-detail-action .stats { margin-top: -30px; text-align: left; font-size: 15px; }

.activity-action .stats .stat, .member-activity-action .stats .stat, .member-detail-action .stats .stat { width: 100%; padding: 5px; border: 1px solid #fff; }

.activity-action .stats .stat:before, .activity-action .stats .stat:after, .member-activity-action .stats .stat:before, .member-activity-action .stats .stat:after, .member-detail-action .stats .stat:before, .member-detail-action .stats .stat:after { content: " "; display: table; }

.activity-action .stats .stat:after, .member-activity-action .stats .stat:after, .member-detail-action .stats .stat:after { clear: both; }

.activity-action .stats .stat:hover, .member-activity-action .stats .stat:hover, .member-detail-action .stats .stat:hover { cursor: pointer; background-color: #f9fafa; border-radius: 5px; border: 1px solid #e8ebed; }

.activity-action .stats .stat .icon, .member-activity-action .stats .stat .icon, .member-detail-action .stats .stat .icon { float: left; width: 42px; height: 42px; padding-top: 9px; margin-right: 10px; text-align: center; border-radius: 50%; border: 2px solid; }

.activity-action .stats .stat .icon svg, .member-activity-action .stats .stat .icon svg, .member-detail-action .stats .stat .icon svg { width: 20px; height: 20px; }

.activity-action .stats .stat.badges .icon, .member-activity-action .stats .stat.badges .icon, .member-detail-action .stats .stat.badges .icon { border-color: #3f8abf; }

.activity-action .stats .stat.badges .icon svg, .member-activity-action .stats .stat.badges .icon svg, .member-detail-action .stats .stat.badges .icon svg { fill: #3f8abf; }

.activity-action .stats .stat.code-challenges .icon, .member-activity-action .stats .stat.code-challenges .icon, .member-detail-action .stats .stat.code-challenges .icon { border-color: #ff9f1f; }

.activity-action .stats .stat.code-challenges .icon svg, .member-activity-action .stats .stat.code-challenges .icon svg, .member-detail-action .stats .stat.code-challenges .icon svg { width: 22px; margin-left: 2px; fill: #ff9f1f; }

.activity-action .stats .stat.quizzes .icon, .member-activity-action .stats .stat.quizzes .icon, .member-detail-action .stats .stat.quizzes .icon { border-color: #a083c8; }

.activity-action .stats .stat.quizzes .icon svg, .member-activity-action .stats .stat.quizzes .icon svg, .member-detail-action .stats .stat.quizzes .icon svg { width: 22px; margin-left: 2px; fill: #a083c8; }

.activity-action .stats .stat.courses .icon, .member-activity-action .stats .stat.courses .icon, .member-detail-action .stats .stat.courses .icon { border-color: #30826C; }

.activity-action .stats .stat.courses .icon svg, .member-activity-action .stats .stat.courses .icon svg, .member-detail-action .stats .stat.courses .icon svg { fill: #30826C; }

.activity-action .stats .stat.points .icon, .member-activity-action .stats .stat.points .icon, .member-detail-action .stats .stat.points .icon { border-color: #5fcf80; }

.activity-action .stats .stat.points .icon svg, .member-activity-action .stats .stat.points .icon svg, .member-detail-action .stats .stat.points .icon svg { fill: #5fcf80; }

.activity-action .stats .stat .total, .member-activity-action .stats .stat .total, .member-detail-action .stats .stat .total { font-size: 18px; color: #384047; padding-bottom: 2px; margin-left: 50px; }

.activity-action .stats .stat .label, .member-activity-action .stats .stat .label, .member-detail-action .stats .stat .label { line-height: 15px; font-size: 12px; word-wrap: nowrap; }

.activity-action .stats .stat.tops, .member-activity-action .stats .stat.tops, .member-detail-action .stats .stat.tops { width: 100%; font-weight: 500; cursor: auto; background-color: transparent; border-radius: 0; border: none; }

.activity-action .stats .stat.tops dl, .member-activity-action .stats .stat.tops dl, .member-detail-action .stats .stat.tops dl { margin: 0; }

.activity-action .stats .stat.tops dl dt, .member-activity-action .stats .stat.tops dl dt, .member-detail-action .stats .stat.tops dl dt { float: left; width: 100px; margin: 0 10px 4px 0; text-align: right; font-size: 12px; font-weight: 400; color: #2b363e; }

.activity-action .stats .stat.tops dl dd, .member-activity-action .stats .stat.tops dl dd, .member-detail-action .stats .stat.tops dl dd { margin-bottom: 4px; font-size: 12px; }

.topic-ai .activity-action .stats .stat.tops dl dd, .topic-ai .member-activity-action .stats .stat.tops dl dd, .topic-ai .member-detail-action .stats .stat.tops dl dd { color: #733A88; }

.activity-action .stats .stat.tops dl dd.topic-ai, .member-activity-action .stats .stat.tops dl dd.topic-ai, .member-detail-action .stats .stat.tops dl dd.topic-ai { color: #733A88; }

.topic-back-end .activity-action .stats .stat.tops dl dd, .topic-back-end .member-activity-action .stats .stat.tops dl dd, .topic-back-end .member-detail-action .stats .stat.tops dl dd { color: #008297; }

.activity-action .stats .stat.tops dl dd.topic-back-end, .member-activity-action .stats .stat.tops dl dd.topic-back-end, .member-detail-action .stats .stat.tops dl dd.topic-back-end { color: #008297; }

.topic-data .activity-action .stats .stat.tops dl dd, .topic-data .member-activity-action .stats .stat.tops dl dd, .topic-data .member-detail-action .stats .stat.tops dl dd { color: #9F4B84; }

.activity-action .stats .stat.tops dl dd.topic-data, .member-activity-action .stats .stat.tops dl dd.topic-data, .member-detail-action .stats .stat.tops dl dd.topic-data { color: #9F4B84; }

.topic-design .activity-action .stats .stat.tops dl dd, .topic-design .member-activity-action .stats .stat.tops dl dd, .topic-design .member-detail-action .stats .stat.tops dl dd { color: #4a4290; }

.activity-action .stats .stat.tops dl dd.topic-design, .member-activity-action .stats .stat.tops dl dd.topic-design, .member-detail-action .stats .stat.tops dl dd.topic-design { color: #4a4290; }

.topic-experimental .activity-action .stats .stat.tops dl dd, .topic-experimental .member-activity-action .stats .stat.tops dl dd, .topic-experimental .member-detail-action .stats .stat.tops dl dd { color: #733a88; }

.activity-action .stats .stat.tops dl dd.topic-experimental, .member-activity-action .stats .stat.tops dl dd.topic-experimental, .member-detail-action .stats .stat.tops dl dd.topic-experimental { color: #733a88; }

.topic-front-end .activity-action .stats .stat.tops dl dd, .topic-front-end .member-activity-action .stats .stat.tops dl dd, .topic-front-end .member-detail-action .stats .stat.tops dl dd { color: #3659a2; }

.activity-action .stats .stat.tops dl dd.topic-front-end, .member-activity-action .stats .stat.tops dl dd.topic-front-end, .member-detail-action .stats .stat.tops dl dd.topic-front-end { color: #3659a2; }

.topic-fundamentals .activity-action .stats .stat.tops dl dd, .topic-fundamentals .member-activity-action .stats .stat.tops dl dd, .topic-fundamentals .member-detail-action .stats .stat.tops dl dd { color: #9b3b5a; }

.activity-action .stats .stat.tops dl dd.topic-fundamentals, .member-activity-action .stats .stat.tops dl dd.topic-fundamentals, .member-detail-action .stats .stat.tops dl dd.topic-fundamentals { color: #9b3b5a; }

.topic-mobile .activity-action .stats .stat.tops dl dd, .topic-mobile .member-activity-action .stats .stat.tops dl dd, .topic-mobile .member-detail-action .stats .stat.tops dl dd { color: #30826C; }

.activity-action .stats .stat.tops dl dd.topic-mobile, .member-activity-action .stats .stat.tops dl dd.topic-mobile, .member-detail-action .stats .stat.tops dl dd.topic-mobile { color: #30826C; }

.topic-internal .activity-action .stats .stat.tops dl dd, .topic-internal .member-activity-action .stats .stat.tops dl dd, .topic-internal .member-detail-action .stats .stat.tops dl dd { color: #55616c; }

.activity-action .stats .stat.tops dl dd.topic-internal, .member-activity-action .stats .stat.tops dl dd.topic-internal, .member-detail-action .stats .stat.tops dl dd.topic-internal { color: #55616c; }

.topic-foundations .activity-action .stats .stat.tops dl dd, .topic-foundations .member-activity-action .stats .stat.tops dl dd, .topic-foundations .member-detail-action .stats .stat.tops dl dd { color: #004e61; }

.activity-action .stats .stat.tops dl dd.topic-foundations, .member-activity-action .stats .stat.tops dl dd.topic-foundations, .member-detail-action .stats .stat.tops dl dd.topic-foundations { color: #004e61; }

.topic-undefined .activity-action .stats .stat.tops dl dd, .topic-undefined .member-activity-action .stats .stat.tops dl dd, .topic-undefined .member-detail-action .stats .stat.tops dl dd { color: #55616c; }

.activity-action .stats .stat.tops dl dd.topic-undefined, .member-activity-action .stats .stat.tops dl dd.topic-undefined, .member-detail-action .stats .stat.tops dl dd.topic-undefined { color: #55616c; }

.topic-college-credit .activity-action .stats .stat.tops dl dd, .topic-college-credit .member-activity-action .stats .stat.tops dl dd, .topic-college-credit .member-detail-action .stats .stat.tops dl dd { color: #3887c8; }

.activity-action .stats .stat.tops dl dd.topic-college-credit, .member-activity-action .stats .stat.tops dl dd.topic-college-credit, .member-detail-action .stats .stat.tops dl dd.topic-college-credit { color: #3887c8; }

.topic-no-code .activity-action .stats .stat.tops dl dd, .topic-no-code .member-activity-action .stats .stat.tops dl dd, .topic-no-code .member-detail-action .stats .stat.tops dl dd { color: #31AF7F; }

.activity-action .stats .stat.tops dl dd.topic-no-code, .member-activity-action .stats .stat.tops dl dd.topic-no-code, .member-detail-action .stats .stat.tops dl dd.topic-no-code { color: #31AF7F; }

.topic-security .activity-action .stats .stat.tops dl dd, .topic-security .member-activity-action .stats .stat.tops dl dd, .topic-security .member-detail-action .stats .stat.tops dl dd { color: #409BE9; }

.activity-action .stats .stat.tops dl dd.topic-security, .member-activity-action .stats .stat.tops dl dd.topic-security, .member-detail-action .stats .stat.tops dl dd.topic-security { color: #409BE9; }

.topic-game-development .activity-action .stats .stat.tops dl dd, .topic-game-development .member-activity-action .stats .stat.tops dl dd, .topic-game-development .member-detail-action .stats .stat.tops dl dd { color: #856fc4; }

.activity-action .stats .stat.tops dl dd.topic-game-development, .member-activity-action .stats .stat.tops dl dd.topic-game-development, .member-detail-action .stats .stat.tops dl dd.topic-game-development { color: #856fc4; }

.topic-treehouse-resources .activity-action .stats .stat.tops dl dd, .topic-treehouse-resources .member-activity-action .stats .stat.tops dl dd, .topic-treehouse-resources .member-detail-action .stats .stat.tops dl dd { color: #5fcf80; }

.activity-action .stats .stat.tops dl dd.topic-treehouse-resources, .member-activity-action .stats .stat.tops dl dd.topic-treehouse-resources, .member-detail-action .stats .stat.tops dl dd.topic-treehouse-resources { color: #5fcf80; }

.topic-coding-for-kids .activity-action .stats .stat.tops dl dd, .topic-coding-for-kids .member-activity-action .stats .stat.tops dl dd, .topic-coding-for-kids .member-detail-action .stats .stat.tops dl dd { color: #F36C27; }

.activity-action .stats .stat.tops dl dd.topic-coding-for-kids, .member-activity-action .stats .stat.tops dl dd.topic-coding-for-kids, .member-detail-action .stats .stat.tops dl dd.topic-coding-for-kids { color: #F36C27; }

@media screen and (max-width: 1023px) { .activity-action .stats .stat.tops dl, .member-activity-action .stats .stat.tops dl, .member-detail-action .stats .stat.tops dl { margin: 20px 0 0 0; padding: 25px 0 25px 0; border-top: 1px solid #f0f2f4; }
  .activity-action .stats .stat.tops dl dt, .member-activity-action .stats .stat.tops dl dt, .member-detail-action .stats .stat.tops dl dt { width: 25%; margin: 0; font-size: 13px; text-align: left; }
  .activity-action .stats .stat.tops dl dd, .member-activity-action .stats .stat.tops dl dd, .member-detail-action .stats .stat.tops dl dd { float: left; width: 75%; text-indent: 15px; font-size: 13px; } }

@media screen and (max-width: 680px) { .activity-action .stats .stat.tops dl dt, .activity-action .stats .stat.tops dl dd, .member-activity-action .stats .stat.tops dl dt, .member-activity-action .stats .stat.tops dl dd, .member-detail-action .stats .stat.tops dl dt, .member-detail-action .stats .stat.tops dl dd { width: 50%; margin-bottom: 10px; } }

.activity-action .graph, .member-activity-action .graph, .member-detail-action .graph { padding-top: 15px; padding-bottom: 30px; }

.activity-action .graph h3, .member-activity-action .graph h3, .member-detail-action .graph h3 { color: #384047; font-size: 18px; font-weight: 700; padding-bottom: 8px; }

.activity-action .graph .label, .member-activity-action .graph .label, .member-detail-action .graph .label { color: #2b363e; font-size: 12px; float: right; margin: -22px 0 0 0; }

.activity-action .graph .canvas, .member-activity-action .graph .canvas, .member-detail-action .graph .canvas { margin: 20px 0 18px; height: 110px; position: relative; }

.activity-action .graph .canvas .x-axis, .member-activity-action .graph .canvas .x-axis, .member-detail-action .graph .canvas .x-axis { position: absolute; width: 100%; height: 110px; top: 0; }

.activity-action .graph .canvas .x-axis .line, .member-activity-action .graph .canvas .x-axis .line, .member-detail-action .graph .canvas .x-axis .line { border-top: 1px dashed #e8ebed; }

.activity-action .graph .canvas .bars, .member-activity-action .graph .canvas .bars, .member-detail-action .graph .canvas .bars { height: 100%; border-bottom: 1px solid #e8ebed; }

.activity-action .graph .canvas .bars .bar, .member-activity-action .graph .canvas .bars .bar, .member-detail-action .graph .canvas .bars .bar { position: relative; height: 100%; width: 3.333%; float: left; }

.activity-action .graph .canvas .bars .bar .date, .member-activity-action .graph .canvas .bars .bar .date, .member-detail-action .graph .canvas .bars .bar .date { position: absolute; text-align: center; font-size: 12px; width: 66px; height: 25px; bottom: -42px; left: 50%; margin-left: -33px; display: none; color: #2b363e; }

.activity-action .graph .canvas .bars .bar:nth-child(7n+5) .date, .member-activity-action .graph .canvas .bars .bar:nth-child(7n+5) .date, .member-detail-action .graph .canvas .bars .bar:nth-child(7n+5) .date { display: block; }

.activity-action .graph .canvas .bars .bar .fill, .member-activity-action .graph .canvas .bars .bar .fill, .member-detail-action .graph .canvas .bars .bar .fill { position: absolute; bottom: 0px; width: 50%; height: 50%; min-height: 4px; margin: 0 0 0 25%; background: #5fcf80; border-radius: 4px 4px 0 0; transition: background 250ms ease-in-out; }

.activity-action .graph .canvas .bars .bar[data-students="0 Members"] .fill, .member-activity-action .graph .canvas .bars .bar[data-students="0 Members"] .fill, .member-detail-action .graph .canvas .bars .bar[data-students="0 Members"] .fill { background: #e8ebed; }

.activity-action .graph .canvas .bars .bar[data-students="0 Members"]:hover .fill, .member-activity-action .graph .canvas .bars .bar[data-students="0 Members"]:hover .fill, .member-detail-action .graph .canvas .bars .bar[data-students="0 Members"]:hover .fill { background: #cbd1d6; }

.activity-action .graph .canvas .bars .bar:hover .fill, .member-activity-action .graph .canvas .bars .bar:hover .fill, .member-detail-action .graph .canvas .bars .bar:hover .fill { background: #35A961; }

.activity-action .graph .chart .ct-series, .member-activity-action .graph .chart .ct-series, .member-detail-action .graph .chart .ct-series { opacity: 0; animation: fade-in 500ms ease forwards; }

.activity-action .graph .chart .ct-chart-active-members .ct-line, .activity-action .graph .chart .ct-chart-active-members .ct-point, .activity-action .graph .chart .ct-chart-points .ct-line, .activity-action .graph .chart .ct-chart-points .ct-point, .member-activity-action .graph .chart .ct-chart-active-members .ct-line, .member-activity-action .graph .chart .ct-chart-active-members .ct-point, .member-activity-action .graph .chart .ct-chart-points .ct-line, .member-activity-action .graph .chart .ct-chart-points .ct-point, .member-detail-action .graph .chart .ct-chart-active-members .ct-line, .member-detail-action .graph .chart .ct-chart-active-members .ct-point, .member-detail-action .graph .chart .ct-chart-points .ct-line, .member-detail-action .graph .chart .ct-chart-points .ct-point { stroke: #5fcf80; }

.activity-action .graph .chart .ct-chart-badges .ct-line, .activity-action .graph .chart .ct-chart-badges .ct-point, .member-activity-action .graph .chart .ct-chart-badges .ct-line, .member-activity-action .graph .chart .ct-chart-badges .ct-point, .member-detail-action .graph .chart .ct-chart-badges .ct-line, .member-detail-action .graph .chart .ct-chart-badges .ct-point { stroke: #3f8abf; }

.activity-action .graph .chart .ct-chart-challenges .ct-line, .activity-action .graph .chart .ct-chart-challenges .ct-point, .member-activity-action .graph .chart .ct-chart-challenges .ct-line, .member-activity-action .graph .chart .ct-chart-challenges .ct-point, .member-detail-action .graph .chart .ct-chart-challenges .ct-line, .member-detail-action .graph .chart .ct-chart-challenges .ct-point { stroke: #ff9f1f; }

.activity-action .graph .chart .ct-chart-quizzes .ct-line, .activity-action .graph .chart .ct-chart-quizzes .ct-point, .member-activity-action .graph .chart .ct-chart-quizzes .ct-line, .member-activity-action .graph .chart .ct-chart-quizzes .ct-point, .member-detail-action .graph .chart .ct-chart-quizzes .ct-line, .member-detail-action .graph .chart .ct-chart-quizzes .ct-point { stroke: #a083c8; }

.control-container .admin-item_reports { float: right; margin: -9px 0 0 0 !important; }

.control-container .admin-item_reports a { font-size: 12px; color: #5e6c77; }

#organization_reports fieldset label { line-height: 1; }

#organization_reports .form-item:before, #organization_reports .form-item:after { content: " "; display: table; }

#organization_reports .form-item:after { clear: both; }

#organization_reports .form-element { width: calc(33% - 17px) !important; }

#organization_reports .wide-input .form-element { width: calc(100% - 5px) !important; }

#organization_reports #uniform-from_month, #organization_reports #uniform-to_month { float: left; margin-right: 20px; }

#organization_reports #uniform-from_day, #organization_reports #uniform-to_day { float: left; margin-right: 20px; }

#organization_reports #uniform-from_year, #organization_reports #uniform-to_year { float: left; }

#organization_reports .form-footer input { width: 100%; }

#organization_reports .form-footer p { font-size: 12px; margin: -8px 0 0 15px !important; }

#organization_reports .info-tooltip { position: absolute; top: 80px; left: 70px; width: 20px; height: 20px; background: #fff url("/assets/icons/icon-info-d0a2ed25db142ba45c8e5c260a1413a08fda744ab0d105d338c17e66f37e5dc7.svg") no-repeat 0 0; background-size: 25px 25px; }

#organization_reports .tooltip { width: 300px; }

#organization_reports .tooltip.tooltip-bottom { top: auto !important; left: auto !important; margin-top: 30px; margin-left: 6px !important; }

#organization_reports .tooltip dt { font-weight: 700; }

#organization_reports .tooltip dd { margin-bottom: 15px; }

#leader_dashboard .leaderboard-details { margin: 0px 0 25px 0px; }

#leader_dashboard .no-activity { text-align: center; font-size: 16px; padding: 50px 0 40px 0; }

#leader_dashboard .department-name { margin-top: 7px !important; }

#leader_dashboard .department-name:hover { text-decoration: none !important; }

#leader_dashboard th a { font-weight: 500; color: #2b363e; }

#leader_dashboard th.current a { color: #101417; }

#new-member-form, #add-seats-form { margin-top: 0; position: relative; padding: 0 30px 30px 30px; margin-bottom: -1px; margin-left: -30px; margin-right: -30px; }

#new-member-form input.default.placeholder-processed, #add-seats-form input.default.placeholder-processed { width: 200px !important; }

#new-member-form label, #add-seats-form label { font-weight: 700; font-size: 14px; margin-bottom: 10px; display: block; position: static; }

#new-member-form .form-item label, #add-seats-form .form-item label { color: #1a2126; cursor: pointer; }

#new-member-form .intro, #add-seats-form .intro { margin-bottom: 20px; }

#new-member-form .alert, #add-seats-form .alert { margin-bottom: 20px; }

#new-member-form .add-seats-message, #add-seats-form .add-seats-message { font-size: 12px; margin-bottom: 30px; }

#new-member-form .manage-members-message, #new-member-form .add-seats-message, #add-seats-form .manage-members-message, #add-seats-form .add-seats-message { float: left; position: relative; top: 10px; }

#new-member-form .manage-members-message a, #new-member-form .add-seats-message a, #add-seats-form .manage-members-message a, #add-seats-form .add-seats-message a { font-weight: 700; color: #3f8abf; }

#new-member-form:not(.csv-upload-active) .csv-upload, #add-seats-form:not(.csv-upload-active) .csv-upload { display: none; }

#new-member-form.csv-upload-active .invitation, #add-seats-form.csv-upload-active .invitation { display: none; }

#new-member-form.csv-upload-active .csv-upload, #add-seats-form.csv-upload-active .csv-upload { display: block; }

#new-member-form .member-upload-list, #add-seats-form .member-upload-list { display: block; position: relative; float: left; width: calc(100% + 30px); margin-right: -15px; margin-left: -15px; }

@media screen and (max-width: 969px) { #new-member-form .member-upload-list:last-child, #add-seats-form .member-upload-list:last-child { padding: 0 0 40px 0; }
  #new-member-form .member-upload-list:not(:last-child), #add-seats-form .member-upload-list:not(:last-child) { padding: 0 0 60px 0; } }

#new-member-form .member-upload-list .grid-100, #new-member-form .member-upload-list .grid-95, #add-seats-form .member-upload-list .grid-100, #add-seats-form .member-upload-list .grid-95 { padding: 0; }

@media screen and (min-width: 969px) { #new-member-form .member-upload-list .grid-100, #new-member-form .member-upload-list .grid-95, #add-seats-form .member-upload-list .grid-100, #add-seats-form .member-upload-list .grid-95 { padding: 0 7px; } }

#new-member-form .member-upload-list:last-of-type, #add-seats-form .member-upload-list:last-of-type { margin-bottom: 20px; }

#new-member-form .member-upload-list .user-info-container, #add-seats-form .member-upload-list .user-info-container { padding: 0; }

#new-member-form .member-upload-list .remove-row, #add-seats-form .member-upload-list .remove-row { width: 32px; height: 32px; margin-left: -10px; border: 2px solid #f0f2f4; border-radius: 32px; box-sizing: border-box; vertical-align: middle; line-height: 30px; text-align: center; position: relative; right: -5px; top: 7px; display: inline-block; fill: #d4d9dd; transition: border-color .3s; }

#new-member-form .member-upload-list .remove-row:hover, #add-seats-form .member-upload-list .remove-row:hover { border-color: #ed5a5a; fill: #ed5a5a; cursor: pointer; }

#new-member-form .member-upload-list .remove-row svg, #add-seats-form .member-upload-list .remove-row svg { width: 10px; height: auto; }

@media screen and (max-width: 969px) { #new-member-form .member-upload-list .remove-row, #add-seats-form .member-upload-list .remove-row { top: 10px !important; } }

#new-member-form .member-upload-list .column-header, #add-seats-form .member-upload-list .column-header { display: none; }

@media screen and (max-width: 969px) { #new-member-form .member-upload-list .column-header, #add-seats-form .member-upload-list .column-header { display: block; } }

#new-member-form .member-upload-list:first-child .column-header, #add-seats-form .member-upload-list:first-child .column-header { display: block; }

#new-member-form .member-upload-list:first-child .remove-row, #add-seats-form .member-upload-list:first-child .remove-row { top: 34px; }

#new-member-form .member-upload-list .field_with_errors .chosen-container, #add-seats-form .member-upload-list .field_with_errors .chosen-container { margin-bottom: 0; }

#new-member-form .member-upload-list .field_with_errors .error-message, #add-seats-form .member-upload-list .field_with_errors .error-message { margin-bottom: 15px; }

#new-member-form .send-invitations, #add-seats-form .send-invitations { padding: 0; }

#new-member-form .send-invitations-actions, #add-seats-form .send-invitations-actions { margin-bottom: 20px; }

@media screen and (max-width: 679px) { #new-member-form .send-invitations .button, #add-seats-form .send-invitations .button { width: 100%; margin-bottom: 10px; } }

#new-member-form .form-footer, #add-seats-form .form-footer { margin-top: 20px; }

#new-member-form .alert-banner button, #add-seats-form .alert-banner button { width: auto; }

#new-member-form #new-member-cancel, #add-seats-form #new-member-cancel { margin-left: 15px; width: -webkit-calc( 100% - 15px); }

@media screen and (max-width: 969px) { #new-member-form #new-member-cancel, #add-seats-form #new-member-cancel { margin: 0; width: 100%; } }

#new-member-form #uniform-new-member-department, #add-seats-form #uniform-new-member-department { width: auto !important; margin: 0 7.5px 0 15px; }

#new-member-form #uniform-new-member-department span, #add-seats-form #uniform-new-member-department span { width: auto !important; }

#new-member-form #uniform-new-member-department select, #add-seats-form #uniform-new-member-department select { width: 100% !important; }

@media screen and (max-width: 1023px) { #new-member-form #uniform-new-member-department, #add-seats-form #uniform-new-member-department { margin: 0 0 15px 0; } }

#new-member-form .alert .close-icon, #add-seats-form .alert .close-icon { float: right; }

.activity table { text-align: left; width: -webkit-calc( 100% + 60px); font-size: 14px; line-height: 18px; margin: 15px -30px -30px -30px; border-top: 2px solid #e8ebed; background: #f9fafa; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }

.activity table tr { padding: 10px; border-top: 1px solid #e8ebed; }

.activity table tr > th:first-child, .activity table tr > td:first-child { padding-left: 30px; font-weight: 500; }

.activity table td, .activity table th { vertical-align: middle; border-right: 1px solid #e8ebed; }

.activity table th { background: #f9fafa; font-weight: 500; font-size: 12px; color: #8d9aa5; padding: 20px 15px 17px 15px; }

.activity table td:last-child, .activity table th:last-child { border-right: none; }

.activity table td { padding: 16px 15px 13px 15px; }

.activity table td.status.passed { color: #4DA463; }

.organizations-member-detail .link-back { color: #1a2126; font-weight: 700; display: inline-block; margin-bottom: 1.5rem; }

.organizations-member-detail .link-back svg { fill: #587081; }

.organizations-member-detail .link-back:hover, .organizations-member-detail .link-back:active, .organizations-member-detail .link-back:focus { color: #050708; cursor: hand; }

.organizations-member-detail .link-back:hover svg, .organizations-member-detail .link-back:active svg, .organizations-member-detail .link-back:focus svg { fill: #050708; }

.organizations-member-detail h3 { margin-bottom: 1.5rem; }

.organizations-member-detail .activity-status svg { width: 15px; height: 15px; position: relative; margin-right: 0.5rem; fill: #5fcf80; }

.organizations-member-detail .member-curriculum .unit { padding-top: 1.5rem; margin-top: 1.5rem; border-top: solid 1px #e8ebed; }

.organizations-member-detail .member-curriculum .unit ul { list-style: disc; margin-left: 60px; margin-bottom: 1.5rem; }

@media screen and (max-width: 969px) { .organizations-member-detail .member-projects { margin-top: 3rem; } }

.organizations-member-detail .member-projects .project:not(:first-of-type) { padding-top: 1.5rem; margin-top: 1.5rem; border-top: solid 1px #e8ebed; }

.organizations-member-detail .member-projects .project-review { margin-top: 0.5rem; margin-left: 28px; }

.organizations-member-detail .member-projects .project-review h4 { font-size: 1rem; font-weight: 400; }

.organizations-member-detail .member-projects .project-grade-label { margin-bottom: 0.5rem; margin-top: 0.5rem; display: inline-block; font-weight: 700; }

.organizations-member-detail .member-projects .project-grade-score { margin: 0.5rem auto 0.5rem 10px; display: inline-block; }

.organizations-member-detail .member-projects .status, .organizations-member-detail .talentpath-projects .status { height: 10px; width: 10px; border-radius: 50%; display: inline-block; position: relative; margin-right: 10px; }

.organizations-member-detail .member-projects .bg-green, .organizations-member-detail .talentpath-projects .bg-green { background-color: #35A961; }

.organizations-member-detail .member-projects .bg-red, .organizations-member-detail .talentpath-projects .bg-red { background-color: #ed5a5a; }

.organizations-member-detail .member-projects .bg-yellow, .organizations-member-detail .talentpath-projects .bg-yellow { background-color: #ffd466; }

.organizations-member-detail .talentpath-projects-title { margin-bottom: 0.5rem; text-transform: uppercase; }

.organizations-member-detail .talentpath-projects-section { margin-top: 3rem; font-weight: 500; font-size: 1.125rem; }

.organizations-member-detail .talentpath-projects-section-details { margin-bottom: 0rem; font-size: 0.875rem; }

.organizations-member-detail .talentpath-projects-comment { margin-top: 1.5rem; padding: 1.5rem; background-color: #f9fafa; border-radius: 4px; }

.organizations-member-detail .talentpath-projects-comment.markdown-zone p:last-of-type { margin: 0; }

.organizations-member-detail .talentpath-projects-comment-title { color: #050708; }

.organizations-member-detail .talentpath-projects-comment-text { margin-bottom: 0; }

.organizations-member-detail .talentpath-projects-comment-text p:last-of-type { margin: 0; }

.organizations-member-detail .talentpath-projects .project-rubric { margin-left: 2rem; margin-right: 2rem; padding-top: 3rem; margin-top: 3rem; border-top: solid 1px #f0f2f4; }

.organizations-member-detail .talentpath-projects .project-rubric ul { list-style: disc; margin-left: 1rem; margin-bottom: 0; }

.organizations-member-detail .talentpath-projects .project-rubric-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; }

.organizations-member-detail .talentpath-projects .project-rubric-grade { background-color: #f9fafa; padding: 10px; border-radius: 4px; margin: 0; }

.organizations-member-detail .talentpath-projects .project-rubric-item { align-self: center; margin-bottom: 0rem; font-size: 1rem; font-weight: 700; flex-basis: 60%; }

@media screen and (max-width: 679px) { .organizations-member-detail .talentpath-projects .project-rubric-item { flex-basis: 100%; margin-bottom: 10px; } }

.organizations-member-detail .talentpath-projects .project-rubric .toggle-steps { color: #1a2126; height: 54px; line-height: 54px; border: 2px solid #f0f2f4; margin-right: 0; margin-top: 1.5rem; margin-bottom: 1.5rem; display: block; font-weight: 700; }

.organizations-member-detail .talentpath-projects .project-rubric .toggle-steps-view { display: flex; }

.organizations-member-detail .talentpath-projects .project-rubric .toggle-steps-hide { display: none; }

.organizations-member-detail .talentpath-projects .project-rubric .toggle-steps .chevron-icon { width: 20px; height: 12px; align-self: center; margin-left: auto; fill: #8e969d; }

.organizations-member-detail .talentpath-projects .project-rubric .selected .toggle-steps-view { display: none; }

.organizations-member-detail .talentpath-projects .project-rubric .selected .toggle-steps-hide { display: flex; }

.organizations-member-detail .talentpath-projects .project-rubric .selected .toggle-steps-hide .chevron-icon { transform: rotate(-180deg); }

.organizations-member-detail .talentpath-projects .project-rubric table { width: 100%; border: 1px solid #f0f2f4; border-radius: 4px; margin: .5rem 0 1.5rem 0; }

.organizations-member-detail .talentpath-projects .project-rubric table td { padding: 1rem; }

.organizations-member-detail .talentpath-projects .project-rubric .steps-list-subtitle { margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.875rem; }

.departments-controller .form-footer { margin: 0 0 5px 0; }

.departments-controller .selected-admin { line-height: 14px; margin-bottom: 15px; }

.departments-controller .selected-admin:hover { cursor: default; }

.departments-controller .chosen-container .chosen-results .disabled-result { color: #ccc; }

.departments-controller .department-card-link { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 4px; }

.departments-controller .department-card { position: relative; text-align: center; min-height: 220px; }

.departments-controller .department-card h4 { font-size: 19px; height: 70px; max-width: 75%; margin: 0 auto; }

.departments-controller .department-card h4 span { font-size: 14px; color: #2b363e; font-weight: 400; display: block; margin-top: 6px; }

.departments-controller .department-card-tools { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 55px; }

.departments-controller .department-card-tools svg { fill: #050708; opacity: 0.6; }

.departments-controller .department-card-tools svg:hover { opacity: 1; }

.departments-controller .department-card:hover .department-card-tools { display: block; }

.departments-controller .department-card .avatar { position: relative; top: 45px; left: 0; margin-left: 3px; margin-right: 3px; }

.departments-controller .department-card .avatar.tag { top: 53px; }

.departments-controller .department-card .avatar-placeholder { top: 28px; }

.departments-controller .department-card .avatar-placeholder .avatar-container { background: #FFF; border-color: #e8ebed; background: #e8ebed; }

.departments-controller .department-card .avatar-placeholder span { font-size: 14px; font-weight: 700; margin-top: 8px; margin-left: -2px; display: block; color: #2b363e; }

.departments-controller .department-card .delete-department, .departments-controller .department-card .edit-department { position: absolute; top: 20px; right: 20px; }

.departments-controller .department-card .edit-department { right: 47px; margin-top: -1px; }

.departments-controller .department-card .edit-department svg { width: 14px; }

.departments-controller .department-card .delete-department svg { width: 14px; }

.departments-controller .department-card .avatar-label { background: #3f8abf; color: #FFF; }

.departments-controller .add-department-card { position: relative; text-align: center; min-height: 220px; box-shadow: none; background: #f9fafa; transition: background 200ms ease-in-out; }

.departments-controller .add-department-card svg { width: 20px; margin: 88px 0 10px 0; fill: #2b363e; }

.departments-controller .add-department-card h4 { color: #2b363e; }

.departments-controller .add-department-card:hover { background: #dde0e4; }

.departments-controller .add-department-card .add-department-link { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 4px; }

.departments-controller .department-members .secondary-heading h2, .departments-controller .department-techdegrees .secondary-heading h2 { color: #384047; font-size: 21px; display: block; }

.departments-controller .department-members .secondary-heading span, .departments-controller .department-techdegrees .secondary-heading span { display: block; font-size: 15px; line-height: 1.6em; margin-bottom: 10px; }

.departments-controller .department-members .secondary-heading .button, .departments-controller .department-techdegrees .secondary-heading .button { position: absolute; top: 3px; right: 0; }

@media screen and (max-width: 969px) { .departments-controller .department-members .secondary-heading .button, .departments-controller .department-techdegrees .secondary-heading .button { right: 0; } }

.pagination-container__memberlist { text-align: left; margin-top: 25px; }

.pagination-container__memberlist a { margin-left: 10px; }

.pagination-container__memberlist a .load-ico { width: 30px; height: 30px; border-radius: 18px; border: 2px solid #D5DDE4; float: left; margin: 0 15px 0 0; }

.pagination-container__memberlist a .load-ico svg { margin: 12px 0 0 9px; fill: #c6ccd2; }

.pagination-container__memberlist a .load-content { float: left; width: 300px; margin: 3px 0 0 0; }

.pagination-container__memberlist a .load-content span { display: block; float: left; width: 300px; color: #3f8abf; font-size: 14px; font-weight: 700; }

.pagination-container__memberlist a .load-content span.info { font-size: 12px; font-weight: 400; color: #C7CED5; margin-top: 2px; }

.pagination-container__memberlist a:hover span { color: #326F95; }

.org-date-picker { width: 520px !important; max-width: 520px !important; }

@media screen and (max-width: 679px) { .org-date-picker { width: calc(100% + 20px) !important; width: calc(100% + 20px) !important; }
  .org-date-picker.sorting-container li { border-bottom: 0; }
  .org-date-picker.sorting-container label { margin-bottom: 10px !important; } }

.org-date-picker label { position: initial !important; margin-left: 0 !important; }

.org-date-picker .form-item:before, .org-date-picker .form-item:after { content: " "; display: table; }

.org-date-picker .form-item:after { clear: both; }

.org-date-picker .form-item .form-element { float: left; margin-right: 10px; }

.org-date-picker .form-item .form-element:nth-child(1) { width: calc(40% - 10px) !important; }

.org-date-picker .form-item .form-element:nth-child(2) { width: calc(29% - 10px) !important; }

.org-date-picker .form-item .form-element:nth-child(3) { width: calc(30% - 10px) !important; margin-right: 0; }

.org-date-picker .form-item .form-element.field_with_errors { border: 2px solid #ed5a5a !important; border-radius: 5px !important; }

.org-date-picker p span { margin: 5px 0 15px 0; border-bottom: 1px solid #f0f2f4; font-size: 14px; color: #2b363e; display: block; line-height: 45px; }

.org-date-picker .alert-banner { margin-bottom: 20px !important; border-radius: 4px !important; }

#select-bulk .button { float: left; margin-left: 10px; }

#select-bulk .form-element { float: left; background-color: transparent; border: 2px solid #d4d9dd; width: 180px !important; }

#select-bulk .form-element:after { background: transparent url("/assets/icons/icon-select-dark-a98b0498454d17c7f1e46b9644fb175e14aaa28d9013d51e961c14cb5f578362.svg") no-repeat center; width: 14px; height: 8px; right: 8px; top: 12px; bottom: 3px; }

#select-bulk .form-element span { padding: 10px 15px 9px 10px; font-size: 12px; font-weight: 700; color: #70808e; }

.member-bulk-action-checkbox label, .member-select-all label { padding: 30px 15px 30px 0; }

.organization-goal { overflow: hidden; margin: -15px 0 5px; padding-top: 15px; box-sizing: border-box; }

.organization-goal-title { display: inline-block; margin-bottom: 0; }

.organization-goal .new_organization_goal, .organization-goal .edit_organization_goal { position: relative; }

.organization-goal .new_organization_goal .button, .organization-goal .edit_organization_goal .button { height: 44px; line-height: 40px; }

@media screen and (max-width: 530px) { .organization-goal .new_organization_goal .button, .organization-goal .edit_organization_goal .button { margin-bottom: 20px; } }

@media screen and (min-width: 531px) { .organization-goal .new_organization_goal .button, .organization-goal .edit_organization_goal .button { position: absolute; top: 0; right: 0; } }

.organization-goal .form-item { padding-right: 120px; }

@media screen and (min-width: 531px) and (max-width: 699px) { .organization-goal .form-item { margin-bottom: 30px; } }

@media screen and (max-width: 700px) { .organization-goal .form-item { margin-top: 15px; } }

@media screen and (min-width: 701px) { .organization-goal .form-item { padding-left: 180px; margin-top: -30px; } }

.viewing-org-goal .organization-goal-input { background-color: #fff; border-color: #fff; padding-left: 0; padding-top: 8px; }

.viewing-org-goal .organization-goal-input::-webkit-input-placeholder { color: #1a2126; }

.viewing-org-goal .organization-goal-input:-moz-placeholder { color: #1a2126; }

.viewing-org-goal .organization-goal-input::-moz-placeholder { color: #1a2126; }

.viewing-org-goal .organization-goal-input:-ms-input-placeholder { color: #1a2126; }

.viewing-org-goal .organization-goal-input .placeholder { color: #1a2126; }

.org-techdegree-cards .techdegree-card-cta { height: 273px; padding-top: 90px; background-color: #f9fafa; box-shadow: none; }

.org-techdegree-cards .techdegree-card-cta p { color: #1a2126; }

.org-techdegree-cards .techdegree-card { position: relative; text-align: center; }

.org-techdegree-cards .techdegree-card h3 { line-height: 1.3; height: 80px; }

.org-techdegree-cards .techdegree-card h3 span { font-weight: 400; display: block; color: #2b363e; font-size: 18px; }

.org-techdegree-cards .techdegree-card .split-tag { background: #FFF; border: 2px solid rgba(48, 73, 97, 0.1); border-radius: 50px; display: inline-block; color: #2b363e; font-size: 13px; font-weight: 700; margin-bottom: 7px; }

.org-techdegree-cards .techdegree-card .split-tag .primary { padding: 3px 17px 3px 17px; float: left; white-space: nowrap; position: relative; }

.org-techdegree-cards .techdegree-card .split-tag .secondary { padding: 7px 0 8px 11px; margin-left: 5px; position: relative; border-left: 2px solid rgba(48, 73, 97, 0.1); }

.org-techdegree-cards .techdegree-card .split-tag em { font-weight: 700; }

.org-techdegree-cards .techdegree-card .box-footer { text-align: center; padding-top: 20px; padding-bottom: 20px; height: 84px; }

.org-techdegree-cards .techdegree-card.techdegree-unavailable h3 { margin-bottom: 48px; }

.org-techdegree-cards .techdegree-card.techdegree-unavailable .box-footer.secondary p { text-align: center; color: #2b363e; font-size: 14px; }

.org-techdegree-cards .techdegree-card.techdegree-unavailable .box-footer.secondary p a { font-weight: 700; color: #3f8abf; }

.org-techdegree-cards .techdegree-card.topic-html .box-footer .button { border-color: #3659a2; color: #3659a2; }

.org-techdegree-cards .techdegree-card.topic-html .box-footer.secondary p a { color: #3659a2; }

.org-techdegree-cards .techdegree-card.topic-javascript .box-footer .button { border-color: #3659a2; color: #3659a2; }

.org-techdegree-cards .techdegree-card.topic-javascript .box-footer.secondary p a { color: #3659a2; }

.org-techdegree-cards .techdegree-card.topic-java .box-footer .button { border-color: #008297; color: #008297; }

.org-techdegree-cards .techdegree-card.topic-java .box-footer.secondary p a { color: #008297; }

.org-techdegree-cards .techdegree-card.topic-python .box-footer .button { border-color: #008297; color: #008297; }

.org-techdegree-cards .techdegree-card.topic-python .box-footer.secondary p a { color: #008297; }

.org-techdegree-cards .techdegree-card.topic-ios .box-footer .button { border-color: #30826C; color: #30826C; }

.org-techdegree-cards .techdegree-card.topic-ios .box-footer.secondary p a { color: #30826C; }

.org-techdegree-cards .techdegree-card.topic-android .box-footer .button { border-color: #30826C; color: #30826C; }

.org-techdegree-cards .techdegree-card.topic-android .box-footer.secondary p a { color: #30826C; }

.org-techdegree-cards .techdegree-card.topic-apis .box-footer .button { border-color: #008297; color: #008297; }

.org-techdegree-cards .techdegree-card.topic-apis .box-footer.secondary p a { color: #008297; }

.org-techdegree-cards .techdegree-card.topic-go .box-footer .button { border-color: #733a88; color: #733a88; }

.org-techdegree-cards .techdegree-card.topic-go .box-footer.secondary p a { color: #733a88; }

.org-techdegree-cards .techdegree-card.topic-data-analysis .box-footer .button { border-color: #9F4B84; color: #9F4B84; }

.org-techdegree-cards .techdegree-card.topic-data-analysis .box-footer.secondary p a { color: #9F4B84; }

.org-techdegree-cards .techdegree-card.topic-security .box-footer .button { border-color: #409BE9; color: #409BE9; }

.org-techdegree-cards .techdegree-card.topic-security .box-footer.secondary p a { color: #409BE9; }

.org-techdegree-cards .techdegree-card.topic-quality-assurance .box-footer .button { border-color: #9b3b5a; color: #9b3b5a; }

.org-techdegree-cards .techdegree-card.topic-quality-assurance .box-footer.secondary p a { color: #9b3b5a; }

.org-techdegree-cards .techdegree-card.topic-machine-learning .box-footer .button { border-color: #733a88; color: #733a88; }

.org-techdegree-cards .techdegree-card.topic-machine-learning .box-footer.secondary p a { color: #733a88; }

.org-techdegree-cards .techdegree-card.topic-learning-resources .box-footer .button { border-color: #9b3b5a; color: #9b3b5a; }

.org-techdegree-cards .techdegree-card.topic-learning-resources .box-footer.secondary p a { color: #9b3b5a; }

.org-techdegree .techdegree-members .secondary-heading h2 { margin: 11px 0 0 90px; color: #384047; font-size: 21px; display: block; width: 50%; }

.org-techdegree .techdegree-members .secondary-heading span { display: block; margin-left: 90px; font-size: 15px; line-height: 1.6em; }

.org-techdegree .techdegree-members .secondary-heading .seal { width: 70px; height: 70px; float: left; margin-bottom: 14px; }

.org-techdegree .techdegree-members .secondary-heading .techdegree-cta { position: absolute; top: 8px; right: 0; width: 35%; text-align: right; }

.org-techdegree .techdegree-members #toggle-expired { font-weight: 700; color: #2b363e; font-size: 14px; display: block; padding: 10px 0 0 0; }

.org-techdegree .techdegree-members #toggle-expired svg { fill: #2b363e; margin-right: 4px; width: 12px; transition: none; }

.org-techdegree .techdegree-members #toggle-expired.selected svg { transform: rotate(180deg); }

.org-techdegree .techdegree-members #expired-table { margin-top: 20px; }

.org-techdegree.topic-html .seal-cap-glow { fill: rgba(54, 89, 162, 0.4); }

.org-techdegree.topic-html .seal-leaf-cap-outlines { fill: #3659a2; }

.org-techdegree.topic-html .seal-leaf-cap-interior { fill: #fff; }

.org-techdegree.topic-html .seal-text { fill: #3659a2; }

.org-techdegree.topic-html .seal-outline { fill: rgba(54, 89, 162, 0.7); }

.org-techdegree.topic-html .seal-interior { fill: rgba(54, 89, 162, 0.15); }

.org-techdegree.topic-css .seal-cap-glow { fill: rgba(54, 89, 162, 0.4); }

.org-techdegree.topic-css .seal-leaf-cap-outlines { fill: #3659a2; }

.org-techdegree.topic-css .seal-leaf-cap-interior { fill: #fff; }

.org-techdegree.topic-css .seal-text { fill: #3659a2; }

.org-techdegree.topic-css .seal-outline { fill: rgba(54, 89, 162, 0.7); }

.org-techdegree.topic-css .seal-interior { fill: rgba(54, 89, 162, 0.15); }

.org-techdegree.topic-javascript .seal-cap-glow { fill: rgba(54, 89, 162, 0.4); }

.org-techdegree.topic-javascript .seal-leaf-cap-outlines { fill: #3659a2; }

.org-techdegree.topic-javascript .seal-leaf-cap-interior { fill: #fff; }

.org-techdegree.topic-javascript .seal-text { fill: #3659a2; }

.org-techdegree.topic-javascript .seal-outline { fill: rgba(54, 89, 162, 0.7); }

.org-techdegree.topic-javascript .seal-interior { fill: rgba(54, 89, 162, 0.15); }

.org-techdegree.topic-java .seal-cap-glow { fill: rgba(0, 130, 151, 0.4); }

.org-techdegree.topic-java .seal-leaf-cap-outlines { fill: #008297; }

.org-techdegree.topic-java .seal-leaf-cap-interior { fill: #fff; }

.org-techdegree.topic-java .seal-text { fill: #008297; }

.org-techdegree.topic-java .seal-outline { fill: rgba(0, 130, 151, 0.7); }

.org-techdegree.topic-java .seal-interior { fill: rgba(0, 130, 151, 0.15); }

.org-techdegree.topic-python .seal-cap-glow { fill: rgba(0, 130, 151, 0.4); }

.org-techdegree.topic-python .seal-leaf-cap-outlines { fill: #008297; }

.org-techdegree.topic-python .seal-leaf-cap-interior { fill: #fff; }

.org-techdegree.topic-python .seal-text { fill: #008297; }

.org-techdegree.topic-python .seal-outline { fill: rgba(0, 130, 151, 0.7); }

.org-techdegree.topic-python .seal-interior { fill: rgba(0, 130, 151, 0.15); }

.org-techdegree.topic-ios .seal-cap-glow { fill: rgba(48, 130, 108, 0.4); }

.org-techdegree.topic-ios .seal-leaf-cap-outlines { fill: #30826C; }

.org-techdegree.topic-ios .seal-leaf-cap-interior { fill: #fff; }

.org-techdegree.topic-ios .seal-text { fill: #30826C; }

.org-techdegree.topic-ios .seal-outline { fill: rgba(48, 130, 108, 0.7); }

.org-techdegree.topic-ios .seal-interior { fill: rgba(48, 130, 108, 0.15); }

.org-techdegree.topic-android .seal-cap-glow { fill: rgba(48, 130, 108, 0.4); }

.org-techdegree.topic-android .seal-leaf-cap-outlines { fill: #30826C; }

.org-techdegree.topic-android .seal-leaf-cap-interior { fill: #fff; }

.org-techdegree.topic-android .seal-text { fill: #30826C; }

.org-techdegree.topic-android .seal-outline { fill: rgba(48, 130, 108, 0.7); }

.org-techdegree.topic-android .seal-interior { fill: rgba(48, 130, 108, 0.15); }

.org-techdegree .techdegree-member-list, .org-techdegree .unassigned-techdegree-list, .org-techdegree .allocated-techdegree-list { background: #f9fafa; margin: 0 -30px 10px -30px; border-top: 1px solid #e8ebed; border-bottom: 1px solid #e8ebed; }

.org-techdegree .techdegree-member-list.empty-placeholder, .org-techdegree .unassigned-techdegree-list.empty-placeholder, .org-techdegree .allocated-techdegree-list.empty-placeholder { font-size: 18px; color: #1a2126; font-weight: 700; }

.org-techdegree .techdegree-member-list table, .org-techdegree .unassigned-techdegree-list table, .org-techdegree .allocated-techdegree-list table { width: 100%; line-height: 1.4em; text-align: left; font-size: 12px; }

.org-techdegree .techdegree-member-list table tr, .org-techdegree .unassigned-techdegree-list table tr, .org-techdegree .allocated-techdegree-list table tr { position: relative; padding: 0 10px; border-top: 1px solid #e8ebed; }

.org-techdegree .techdegree-member-list table tr:first-child, .org-techdegree .unassigned-techdegree-list table tr:first-child, .org-techdegree .allocated-techdegree-list table tr:first-child { border: none; }

.org-techdegree .techdegree-member-list table tr > th:first-child, .org-techdegree .techdegree-member-list table tr > td:first-child, .org-techdegree .unassigned-techdegree-list table tr > th:first-child, .org-techdegree .unassigned-techdegree-list table tr > td:first-child, .org-techdegree .allocated-techdegree-list table tr > th:first-child, .org-techdegree .allocated-techdegree-list table tr > td:first-child { padding-left: 30px; }

.org-techdegree .techdegree-member-list table tr .seal, .org-techdegree .unassigned-techdegree-list table tr .seal, .org-techdegree .allocated-techdegree-list table tr .seal { width: 36px; height: 36px; float: left; margin-bottom: 14px; margin-right: 10px; }

.org-techdegree .techdegree-member-list table tr .unassigned-techdegree-name, .org-techdegree .unassigned-techdegree-list table tr .unassigned-techdegree-name, .org-techdegree .allocated-techdegree-list table tr .unassigned-techdegree-name { width: 364px; padding-top: 15px; }

.org-techdegree .techdegree-member-list table tr .member-details-email, .org-techdegree .unassigned-techdegree-list table tr .member-details-email, .org-techdegree .allocated-techdegree-list table tr .member-details-email { overflow: hidden; text-overflow: ellipsis; }

.org-techdegree .techdegree-member-list table tr .member-assignment-status .member-details-name, .org-techdegree .techdegree-member-list table tr .member-assignment-status .member-details-email, .org-techdegree .unassigned-techdegree-list table tr .member-assignment-status .member-details-name, .org-techdegree .unassigned-techdegree-list table tr .member-assignment-status .member-details-email, .org-techdegree .allocated-techdegree-list table tr .member-assignment-status .member-details-name, .org-techdegree .allocated-techdegree-list table tr .member-assignment-status .member-details-email { margin-left: 0; }

.org-techdegree .techdegree-member-list table tr .department-allocation-action, .org-techdegree .unassigned-techdegree-list table tr .department-allocation-action, .org-techdegree .allocated-techdegree-list table tr .department-allocation-action { text-align: right; padding-right: 30px; }

.org-techdegree .techdegree-member-list table tr td, .org-techdegree .techdegree-member-list table tr th, .org-techdegree .unassigned-techdegree-list table tr td, .org-techdegree .unassigned-techdegree-list table tr th, .org-techdegree .allocated-techdegree-list table tr td, .org-techdegree .allocated-techdegree-list table tr th { height: 72px; vertical-align: middle; padding: 0 10px; color: #384047; }

.org-techdegree .techdegree-member-list table tr td.member-details, .org-techdegree .techdegree-member-list table tr th.member-details, .org-techdegree .unassigned-techdegree-list table tr td.member-details, .org-techdegree .unassigned-techdegree-list table tr th.member-details, .org-techdegree .allocated-techdegree-list table tr td.member-details, .org-techdegree .allocated-techdegree-list table tr th.member-details { width: 364px; }

.org-techdegree .techdegree-member-list table tr td.member-techdegree-progress, .org-techdegree .techdegree-member-list table tr th.member-techdegree-progress, .org-techdegree .unassigned-techdegree-list table tr td.member-techdegree-progress, .org-techdegree .unassigned-techdegree-list table tr th.member-techdegree-progress, .org-techdegree .allocated-techdegree-list table tr td.member-techdegree-progress, .org-techdegree .allocated-techdegree-list table tr th.member-techdegree-progress { text-align: center; padding-left: 30px; padding-right: 30px; }

.org-techdegree .techdegree-member-list table tr td.member-techdegree-progress .degree-overview-progress-total, .org-techdegree .techdegree-member-list table tr th.member-techdegree-progress .degree-overview-progress-total, .org-techdegree .unassigned-techdegree-list table tr td.member-techdegree-progress .degree-overview-progress-total, .org-techdegree .unassigned-techdegree-list table tr th.member-techdegree-progress .degree-overview-progress-total, .org-techdegree .allocated-techdegree-list table tr td.member-techdegree-progress .degree-overview-progress-total, .org-techdegree .allocated-techdegree-list table tr th.member-techdegree-progress .degree-overview-progress-total { background: #dfe3e4; }

.org-techdegree .techdegree-member-list table tr td.member-techdegree-progress .degree-overview-progress-made, .org-techdegree .techdegree-member-list table tr th.member-techdegree-progress .degree-overview-progress-made, .org-techdegree .unassigned-techdegree-list table tr td.member-techdegree-progress .degree-overview-progress-made, .org-techdegree .unassigned-techdegree-list table tr th.member-techdegree-progress .degree-overview-progress-made, .org-techdegree .allocated-techdegree-list table tr td.member-techdegree-progress .degree-overview-progress-made, .org-techdegree .allocated-techdegree-list table tr th.member-techdegree-progress .degree-overview-progress-made { background-color: #5fcf80; }

.org-techdegree .techdegree-member-list table tr td.no-active-degree, .org-techdegree .techdegree-member-list table tr th.no-active-degree, .org-techdegree .unassigned-techdegree-list table tr td.no-active-degree, .org-techdegree .unassigned-techdegree-list table tr th.no-active-degree, .org-techdegree .allocated-techdegree-list table tr td.no-active-degree, .org-techdegree .allocated-techdegree-list table tr th.no-active-degree { text-align: center; }

.org-techdegree .techdegree-member-list table tr td.no-active-degree svg, .org-techdegree .techdegree-member-list table tr th.no-active-degree svg, .org-techdegree .unassigned-techdegree-list table tr td.no-active-degree svg, .org-techdegree .unassigned-techdegree-list table tr th.no-active-degree svg, .org-techdegree .allocated-techdegree-list table tr td.no-active-degree svg, .org-techdegree .allocated-techdegree-list table tr th.no-active-degree svg { fill: #cc9300; }

.org-techdegree .techdegree-member-list table tr td.no-active-degree p, .org-techdegree .techdegree-member-list table tr th.no-active-degree p, .org-techdegree .unassigned-techdegree-list table tr td.no-active-degree p, .org-techdegree .unassigned-techdegree-list table tr th.no-active-degree p, .org-techdegree .allocated-techdegree-list table tr td.no-active-degree p, .org-techdegree .allocated-techdegree-list table tr th.no-active-degree p { font-size: 12px; }

.org-techdegree .techdegree-member-list table tr td.member-techdegree-activity, .org-techdegree .techdegree-member-list table tr td.techdegree-expiration-date, .org-techdegree .techdegree-member-list table tr th.member-techdegree-activity, .org-techdegree .techdegree-member-list table tr th.techdegree-expiration-date, .org-techdegree .unassigned-techdegree-list table tr td.member-techdegree-activity, .org-techdegree .unassigned-techdegree-list table tr td.techdegree-expiration-date, .org-techdegree .unassigned-techdegree-list table tr th.member-techdegree-activity, .org-techdegree .unassigned-techdegree-list table tr th.techdegree-expiration-date, .org-techdegree .allocated-techdegree-list table tr td.member-techdegree-activity, .org-techdegree .allocated-techdegree-list table tr td.techdegree-expiration-date, .org-techdegree .allocated-techdegree-list table tr th.member-techdegree-activity, .org-techdegree .allocated-techdegree-list table tr th.techdegree-expiration-date { text-align: center; max-width: 60px; }

.org-techdegree .techdegree-member-list table tr td.member-techdegree-activity.unassigned-techdegree-expiration, .org-techdegree .techdegree-member-list table tr td.techdegree-expiration-date.unassigned-techdegree-expiration, .org-techdegree .techdegree-member-list table tr th.member-techdegree-activity.unassigned-techdegree-expiration, .org-techdegree .techdegree-member-list table tr th.techdegree-expiration-date.unassigned-techdegree-expiration, .org-techdegree .unassigned-techdegree-list table tr td.member-techdegree-activity.unassigned-techdegree-expiration, .org-techdegree .unassigned-techdegree-list table tr td.techdegree-expiration-date.unassigned-techdegree-expiration, .org-techdegree .unassigned-techdegree-list table tr th.member-techdegree-activity.unassigned-techdegree-expiration, .org-techdegree .unassigned-techdegree-list table tr th.techdegree-expiration-date.unassigned-techdegree-expiration, .org-techdegree .allocated-techdegree-list table tr td.member-techdegree-activity.unassigned-techdegree-expiration, .org-techdegree .allocated-techdegree-list table tr td.techdegree-expiration-date.unassigned-techdegree-expiration, .org-techdegree .allocated-techdegree-list table tr th.member-techdegree-activity.unassigned-techdegree-expiration, .org-techdegree .allocated-techdegree-list table tr th.techdegree-expiration-date.unassigned-techdegree-expiration { max-width: 300px; min-width: 300px; }

.org-techdegree .techdegree-member-list table tr th, .org-techdegree .unassigned-techdegree-list table tr th, .org-techdegree .allocated-techdegree-list table tr th { font-weight: 700; color: #2b363e; height: 45px; }

.org-techdegree .techdegree-member-list table tr .member-details-avatar, .org-techdegree .unassigned-techdegree-list table tr .member-details-avatar, .org-techdegree .allocated-techdegree-list table tr .member-details-avatar { float: left; margin-right: 10px; }

.org-techdegree .techdegree-member-list table tr .member-details-name, .org-techdegree .techdegree-member-list table tr .member-details-email, .org-techdegree .unassigned-techdegree-list table tr .member-details-name, .org-techdegree .unassigned-techdegree-list table tr .member-details-email, .org-techdegree .allocated-techdegree-list table tr .member-details-name, .org-techdegree .allocated-techdegree-list table tr .member-details-email { margin-left: 40px; }

.org-techdegree .techdegree-member-list table tr .member-details-name, .org-techdegree .unassigned-techdegree-list table tr .member-details-name, .org-techdegree .allocated-techdegree-list table tr .member-details-name { margin-bottom: 4px; }

.org-techdegree .techdegree-member-list table tr .member-details-name a, .org-techdegree .unassigned-techdegree-list table tr .member-details-name a, .org-techdegree .allocated-techdegree-list table tr .member-details-name a { color: #384047; font-size: 13px; font-weight: 700; }

.org-techdegree .techdegree-member-list table tr .member-details-name a:hover, .org-techdegree .unassigned-techdegree-list table tr .member-details-name a:hover, .org-techdegree .allocated-techdegree-list table tr .member-details-name a:hover { text-decoration: underline; color: #2d3339; }

.org-techdegree .techdegree-member-list table tr .member-details-name strong, .org-techdegree .unassigned-techdegree-list table tr .member-details-name strong, .org-techdegree .allocated-techdegree-list table tr .member-details-name strong { color: #384047; font-size: 13px; font-weight: 700; }

.org-techdegree .techdegree-member-list table tr .member-details-email, .org-techdegree .unassigned-techdegree-list table tr .member-details-email, .org-techdegree .allocated-techdegree-list table tr .member-details-email { color: #2b363e; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date { position: relative; text-align: center; width: 180px; padding-left: 30px; padding-right: 30px; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-flag, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-flag, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-flag { line-height: 0; text-align: center; position: absolute; top: 0; left: 0; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-flag svg, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-flag svg, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-flag svg { fill: #55616c; width: 30px; height: 30px; position: relative; top: 0; left: 0; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-tooltip-link, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-tooltip-link, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-tooltip-link { width: 30px; height: 30px; position: absolute; top: 20px; left: 10px; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-tooltip-link h6, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-tooltip-link h6, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-tooltip-link h6 { margin-bottom: 10px; color: #FFF; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-tooltip-link strong, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-tooltip-link strong, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-tooltip-link strong { color: #FFF; font-weight: 700; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-tooltip-link.warning svg, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-tooltip-link.warning svg, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-tooltip-link.warning svg { fill: #ffd466; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-tooltip-link.warning h6, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-tooltip-link.warning h6, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-tooltip-link.warning h6 { color: #ffd466; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-tooltip-link.error svg, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-tooltip-link.error svg, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-tooltip-link.error svg { fill: #ed5a5a; }

.org-techdegree .techdegree-member-list .techdegree-expiration-date .expiration-tooltip-link.error h6, .org-techdegree .unassigned-techdegree-list .techdegree-expiration-date .expiration-tooltip-link.error h6, .org-techdegree .allocated-techdegree-list .techdegree-expiration-date .expiration-tooltip-link.error h6 { color: #ed5a5a; }

.org-techdegree .unassigned-techdegrees .secondary-heading h2 { color: #384047; margin-bottom: 10px; }

.org-techdegree .unassigned-techdegrees .secondary-heading span { display: block; font-size: 13px; margin: -7px 0 10px 0; line-height: 1.6em; }

.org-techdegree .unassigned-techdegrees table tr .seal { width: 36px; height: 36px; float: left; margin-bottom: 14px; margin-right: 10px; }

.org-techdegree .unassigned-techdegrees table tr .unassigned-techdegree-name { width: 364px; padding-top: 15px; }

.org-techdegree .unassigned-techdegrees table tr .unassigned-techdegree-expiration { padding-left: 50px; text-align: left !important; padding-right: 30px; }

.org-techdegree .unassigned-techdegrees table tr .unassigned-techdegree-department { width: 130px; padding-right: 50px; text-align: center; padding-top: 15px; position: relative; }

.org-techdegree .unassigned-techdegrees table tr .unassigned-techdegree-department .department-tooltip { position: absolute; top: 21px; right: 25px; }

.org-techdegree .unassigned-techdegrees table tr .unassigned-techdegree-department .department-tooltip .tooltip { text-align: center; width: 280px; }

.org-techdegree .unassigned-techdegrees table tr .unassigned-techdegree-department .department-tooltip .tooltip-top { bottom: 140%; }

.org-techdegree .unassigned-techdegrees table tr .unassigned-techdegree-department .department-tooltip svg { width: 18px; height: 18px; fill: #3f505d; }

.org-techdegree .unassigned-techdegrees table tr .member-techdegree-assignment { width: 500px; }

.org-techdegree .unassigned-techdegrees table tr .member-techdegree-assignment form { padding: 15px 20px 0 0; }

.org-techdegree .unassigned-techdegrees table tr .member-techdegree-assignment .form-item { margin-bottom: 0; width: calc(100% - 90px); float: left; }

.org-techdegree .unassigned-techdegrees table tr .member-techdegree-assignment .button { width: 80px; float: left; margin: 0 0 0 10px; height: 44px; }

.org-techdegree .unassigned-techdegrees table tr .department-techdegree-assignment { width: 240px; }

.org-techdegree .unassigned-techdegrees table tr .department-techdegree-assignment .form-element { margin-bottom: 0; width: calc(100% - 90px); float: left; }

.org-techdegree .unassigned-techdegrees table tr .department-techdegree-assignment .button { float: left; margin: 0 0 0 10px; height: 44px; }

.org-techdegree .techdegree-action-confirmation { position: relative; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar { position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%; height: 72px; background: #575f66; }

@media screen and (max-width: 679px) { .org-techdegree .techdegree-action-confirmation .confirmation-bar { width: -webkit-calc( 100% + 40px); margin: 0 -20px 0 0; } }

.org-techdegree .techdegree-action-confirmation .confirmation-bar .seal { width: 36px; height: 36px; margin: 9px 10px 0 19px; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar .seal-cap-glow { fill: #FFF; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar .seal-leaf-cap-outlines { fill: #FFF; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar .seal-leaf-cap-interior { fill: #5fcf80; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar .seal-text { fill: #FFF; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar .seal-outline { fill: #FFF; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar .seal-interior { fill: #5fcf80; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-content { float: left; width: 65%; padding: 10px 0 10px 11px; }

@media screen and (max-width: 969px) { .org-techdegree .techdegree-action-confirmation .confirmation-bar-content { padding: 10px 20px 8px 30px; width: 50%; } }

@media screen and (max-width: 679px) { .org-techdegree .techdegree-action-confirmation .confirmation-bar-content { padding: 10px 20px 8px 30px; width: 30%; } }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-content .avatar { display: block; float: left; margin: 0 15px 0 20px; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-content h5 { margin-top: 9px; margin-bottom: 2px; font-size: 13px; color: white; }

@media screen and (max-width: 679px) { .org-techdegree .techdegree-action-confirmation .confirmation-bar-content h5 { margin-top: 18px; } }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-content p { color: rgba(255, 255, 255, 0.9); font-size: 12px; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-content p a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; transition: color 150ms ease-in-out; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-content p a:hover { color: white; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-buttons { float: right; padding: 19px 30px 0 0; }

@media screen and (max-width: 969px) { .org-techdegree .techdegree-action-confirmation .confirmation-bar-buttons { padding-top: 16px; } }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-buttons .primary { opacity: 0.88; transition: opacity 0.3s ease; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-buttons .primary:hover { opacity: 1; background: #FFF; border-color: #FFF; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-buttons .secondary { opacity: 0.88; transition: opacity 0.3s ease; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar-buttons .secondary:hover { opacity: 1; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar.success { border-left: #5fcf80 solid 10px; }

.org-techdegree .techdegree-action-confirmation .confirmation-bar.error { border-left: #5fcf80 solid 10px; }

.expiration-tooltip { opacity: 0; visibility: hidden; text-align: center; font-size: 13px; color: #2b363e; line-height: 20px; width: auto; padding: 15px 25px; min-width: 240px; transition-delay: 750ms; }

.expiration-tooltip-link:hover .expiration-tooltip { opacity: 1; visibility: visible; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.control-container-inline:not(.control-container-attached) { box-shadow: none; border-radius: 0; margin: 0 -30px; }

@media screen and (max-width: 679px) { .control-container-inline:not(.control-container-attached) { margin: 0 -20px; } }

.control-container-inline:not(.control-container-attached) .subnav { padding: 0 40px; }

@media screen and (max-width: 679px) { .control-container-inline:not(.control-container-attached) .subnav li { margin: 0; } }
.topic-heading { padding: 0 0 15px; }

.topic-heading:before, .topic-heading:after { content: " "; display: table; }

.topic-heading:after { clear: both; }

.topic-heading h1 { font-size: 24px; color: #384047; font-weight: 700; line-height: 1.2; margin-bottom: 5px; }

.topic-heading p { font-size: 14px; color: #1a2126; line-height: 1.5; margin-bottom: 15px; }

.topic-heading a { color: #101417; font-weight: 700; }

@media screen and (max-width: 969px) { .topic-heading { padding: 15px 0 0 0px; } }

#library-pjax { margin: 0; }

.inline-cta { text-align: center; margin: 20px auto 50px; }

.inline-cta h2 { font-size: 26px; margin-bottom: 15px; }

.inline-cta h4 { margin-bottom: 25px; font-weight: 400; color: #101417; }

#upcoming-releases { margin-top: 30px; }

#upcoming-releases:before, #upcoming-releases:after { content: " "; display: table; }

#upcoming-releases:after { clear: both; }

#upcoming-releases .secondary-heading { margin: 0 0 30px; }

@media screen and (max-width: 679px) { .points-timeline a.in-progress { background-size: 260px 100%; }
  .points-timeline .points-total { padding-right: 0 !important; }
  .points-timeline .points-total .icon-points { display: none; } }

.points-timeline { display: table; }

.points-timeline strong { font-weight: 700; font-size: 24px; color: #384047; }

.points-timeline .points-earned { display: table-cell; padding-right: 15px; }

.points-timeline .points-earned strong { color: #2b363e; }

.points-timeline .points-total { padding: 0 35px 0 15px; display: table-cell; }

.points-timeline .points-total .icon-points { float: right; margin: -2px -35px 0 0px; }

.points-detail-container { display: table-cell; width: 100%; vertical-align: top; padding-top: 2px; }

.points-detail-container table { width: 100%; margin-bottom: -1px; position: relative; z-index: 1; }

.points-detail-container td { height: 15px; border-collapse: collapse; margin: 0; padding: 3px 1px; vertical-align: middle; position: relative; }

.points-detail-container td:first-child a { border-radius: 15px 0 0 15px; }

.points-detail-container td:last-child a { border-radius: 0 15px 15px 0; }

.points-detail-container td:first-child:nth-last-child(1) a { border-radius: 15px; }

.points-detail-container a { background: #edeff0; cursor: default; font-weight: 700; line-height: 8px; position: relative; overflow: hidden; height: 15px; display: block; text-align: right; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05) inset; }

.points-detail-container a .tooltip { bottom: 15px; left: 50%; margin-left: -115px; opacity: 0; }

.points-detail-container a:hover { color: #fff; overflow: visible; text-shadow: none; background: #d1d6d9; }

.points-detail-container a:hover .tooltip { bottom: 20px; opacity: 1; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; }

.points-detail-container a.progress-complete { background: #5fcf80; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05) inset; }

.points-detail-container a.progress-complete:hover { background: #3ac162; }

.points-detail-container a.progress-complete-unordered { background: #b7c0c7; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05) inset; }

.points-detail-container a.progress-complete-unordered:hover { background: #8c9aa6; }

.points-detail-container a.in-progress { background-color: #83d99c; background-image: url("/assets/icons/icon-in-progress-ef16d2897b2fa49cda3952c4c0c08700a8462b6b07ab411424e0280a980beba2.svg"); background-position: center center; background-size: 960px 30px; }

.points-detail-container a.in-progress:hover { background-color: #77d693; }

.points-detail-container .progress-container { height: 15px; top: 1px; }

@media screen and (max-width: 679px) { .points-detail-container a:hover .tooltip { opacity: 0; } }

.trailer-backdrop { background: #2d3339; position: relative; z-index: 2; display: none; }

.trailer-container { margin: 0 auto; }

.completed-achievements { background: #f9fafa; padding: 15px 30px; color: #2b363e; margin-bottom: 15px; display: block; text-align: center; font-size: 14px; font-weight: 700; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; border-radius: 5px; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); }

.completed-achievements:hover { background: #fff; color: #101417; }

.completed-achievements .icon { float: right; margin-top: 4px; }

.achievement-steps { background: #f9fafa; margin: 30px -30px -30px; padding: 0 0 10px; border-top: 1px solid #e8ebed; border-radius: 0 0 5px 5px; }

.achievement-steps li { list-style-type: none; }

.achievement-steps li > a { display: block; padding: 20px 30px 20px 110px; border-bottom: 1px solid #edeff0; overflow: hidden; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; }

.achievement-steps li > a:before, .achievement-steps li > a:after { content: " "; display: table; }

.achievement-steps li > a:after { clear: both; }

.achievement-steps li > a strong { font-weight: 700; color: #1a2126; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 1.2; }

.achievement-steps li > a p { float: right; font-size: 14px; margin-left: 10px; margin-bottom: 0; line-height: 1.2; color: #2b363e; }

.achievement-steps li > a em { float: right; margin-right: -70px; font-size: 14px; font-weight: 700; color: #d4d9dd; }

.achievement-steps li > a .button { float: right; margin: -13px -165px -13px 10px; transition: margin 0.1s; }

.achievement-steps li > a .marker { background: #d4d9dd; color: #fff; font-weight: 700; font-size: 12px; float: left; padding: 5px; margin: -3px 0 -3px -80px; border-radius: 3px; }

.achievement-steps li > a .icon { float: left; margin: -7px 0 -7px -65px; }

.achievement-steps li > a .icon-complete { position: relative; z-index: 2; transition: .3s; }

.achievement-steps li > a .user-avatar { float: left; margin: -7px 35px -7px 0px; width: 28px; height: 28px; background-position: center; background-size: auto 28px; border-radius: 28px; }

.achievement-steps li > a .user-avatar img { display: none; }

.achievement-steps li > a:hover { background: #fff; }

.achievement-steps li > a:hover strong { color: #70808e; }

.achievement-steps li > a:hover .icon-complete { opacity: 0; }

.achievement-steps li > a:hover .button { margin-right: -15px; }

.achievement-steps li > a.completed strong { color: #2b363e; }

.achievement-steps li > a.in-progress { background: #fff; border-color: #d4d9dd; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); }

.achievement-steps li > a.in-progress strong { color: #101417; }

.achievement-steps li .tag { float: right; margin: -8px 0 -8px 10px; background-color: #55616c; border-color: #55616c; color: #fff; line-height: 28px; }

@media screen and (min-width: 680px) { .achievement-steps li .tag:after { content: " Episode"; } }

.achievement-steps .toggle-steps { display: block; font-size: 14px; padding: 15px 30px 10px; color: #1a2126; border: none; margin-bottom: 0; }

.achievement-steps .toggle-steps .icon { margin: -2px 5px 0 0; }

.achievement-steps .toggle-steps:hover { color: #1a2126; }

.achievement-steps .toggle-steps:hover .icon { background-position: 0 0; }

.achievement-steps .toggle-steps.selected .icon { background-position: -12px -8px; }

.achievement-steps .toggle-steps.selected:hover .icon { background-position: 0px -8px; }

.achievement-steps .toggle-upcoming { display: block; font-size: 14px; padding: 15px 30px 10px; color: #1a2126; font-weight: 700; }

.achievement-steps .toggle-upcoming .icon { margin: -4px 3px 0 -1px; }

.extra-credit .markdown-zone { font-size: 14px; }

.extra-credit .markdown-zone ol { padding: 0; }

.extra-credit .markdown-zone ol li { list-style-type: decimal; }

.extra-credit .markdown-zone ol li p { font-size: 14px; }

.extra-credit .markdown-zone ol li a { border: none; padding: 0; display: inline; }

.extra-credit .markdown-zone ol li a::after { display: inline; }

.extra-credit .markdown-zone ol li a::before { content: normal; }

.extra-credit .markdown-zone ul li { list-style-type: disc; }

.extra-credit .markdown-zone ul li p { font-size: 14px; }

.extra-credit .markdown-zone ul li a { border: none; padding: 0; display: inline; }

.extra-credit .markdown-zone ul li a::after { display: inline; }

.extra-credit .markdown-zone ul li a::before { content: normal; }

.extra-credit .markdown-zone p { font-size: 14px; }

.extra-credit .markdown-zone h4, .extra-credit .markdown-zone p { margin-bottom: 10px; }

@media screen and (max-width: 679px) { .achievement-steps { margin: 20px -20px -20px; }
  .achievement-steps li a { padding: 15px 20px 15px 90px; }
  .achievement-steps li a .icon { margin-left: -60px; }
  .achievement-steps li a strong, .achievement-steps li a p, .achievement-steps li a em { font-size: 14px; } }

.achievement-breakdown { float: right; display: none; }

.achievement-breakdown li { float: left; }

.achievement-meta, .upcoming-meta, .current-project { padding-left: 80px; display: block; }

.achievement-meta > img, .upcoming-meta > img, .current-project > img { float: left; width: 60px; margin: -5px 0 0 -80px; }

.achievement-meta strong, .upcoming-meta strong, .current-project strong { font-size: 14px; font-weight: 700; color: #2b363e; margin-bottom: 10px; display: block; }

.achievement-meta h3, .upcoming-meta h3, .current-project h3 { font-weight: 700; margin: 0 0 15px 0; color: #384047; font-size: 18px; }

.achievement-meta p, .upcoming-meta p, .current-project p { color: #1a2126; line-height: 1.5; font-size: 14px; }

.achievement-meta .achievement-hero, .achievement-meta .current-syllabus-hero, .upcoming-meta .achievement-hero, .upcoming-meta .current-syllabus-hero, .current-project .achievement-hero, .current-project .current-syllabus-hero { float: left; background: #3659a2; width: 60px; min-height: 0; line-height: 60px; text-align: center; margin-left: -80px; position: relative; border-radius: 5px; }

.achievement-meta .achievement-hero img, .achievement-meta .current-syllabus-hero img, .upcoming-meta .achievement-hero img, .upcoming-meta .current-syllabus-hero img, .current-project .achievement-hero img, .current-project .current-syllabus-hero img { vertical-align: middle; width: 45px; }

.achievement-meta .new-content, .upcoming-meta .new-content, .current-project .new-content { float: right; margin: -10px 0 0 10px; }

.tags .bookmarkable { float: right; padding: 0; margin: 0 0 0 10px; }

.tags .bookmarkable a, .tags .bookmarkable span { padding: 0; width: 36px; height: 36px; line-height: 38px; }

.tags .bookmarkable a:hover, .tags .bookmarkable span:hover { border-color: #6E7881; }

.topic-ai.tags .bookmarkable a:hover, .topic-ai.tags .bookmarkable span:hover { border-color: #733A88; }

.topic-ai .tags .bookmarkable a:hover, .topic-ai .tags .bookmarkable span:hover { border-color: #733A88; }

.topic-back-end.tags .bookmarkable a:hover, .topic-back-end.tags .bookmarkable span:hover { border-color: #008297; }

.topic-back-end .tags .bookmarkable a:hover, .topic-back-end .tags .bookmarkable span:hover { border-color: #008297; }

.topic-data.tags .bookmarkable a:hover, .topic-data.tags .bookmarkable span:hover { border-color: #9F4B84; }

.topic-data .tags .bookmarkable a:hover, .topic-data .tags .bookmarkable span:hover { border-color: #9F4B84; }

.topic-design.tags .bookmarkable a:hover, .topic-design.tags .bookmarkable span:hover { border-color: #4a4290; }

.topic-design .tags .bookmarkable a:hover, .topic-design .tags .bookmarkable span:hover { border-color: #4a4290; }

.topic-experimental.tags .bookmarkable a:hover, .topic-experimental.tags .bookmarkable span:hover { border-color: #733a88; }

.topic-experimental .tags .bookmarkable a:hover, .topic-experimental .tags .bookmarkable span:hover { border-color: #733a88; }

.topic-front-end.tags .bookmarkable a:hover, .topic-front-end.tags .bookmarkable span:hover { border-color: #3659a2; }

.topic-front-end .tags .bookmarkable a:hover, .topic-front-end .tags .bookmarkable span:hover { border-color: #3659a2; }

.topic-fundamentals.tags .bookmarkable a:hover, .topic-fundamentals.tags .bookmarkable span:hover { border-color: #9b3b5a; }

.topic-fundamentals .tags .bookmarkable a:hover, .topic-fundamentals .tags .bookmarkable span:hover { border-color: #9b3b5a; }

.topic-mobile.tags .bookmarkable a:hover, .topic-mobile.tags .bookmarkable span:hover { border-color: #30826C; }

.topic-mobile .tags .bookmarkable a:hover, .topic-mobile .tags .bookmarkable span:hover { border-color: #30826C; }

.topic-internal.tags .bookmarkable a:hover, .topic-internal.tags .bookmarkable span:hover { border-color: #55616c; }

.topic-internal .tags .bookmarkable a:hover, .topic-internal .tags .bookmarkable span:hover { border-color: #55616c; }

.topic-foundations.tags .bookmarkable a:hover, .topic-foundations.tags .bookmarkable span:hover { border-color: #004e61; }

.topic-foundations .tags .bookmarkable a:hover, .topic-foundations .tags .bookmarkable span:hover { border-color: #004e61; }

.topic-undefined.tags .bookmarkable a:hover, .topic-undefined.tags .bookmarkable span:hover { border-color: #55616c; }

.topic-undefined .tags .bookmarkable a:hover, .topic-undefined .tags .bookmarkable span:hover { border-color: #55616c; }

.topic-college-credit.tags .bookmarkable a:hover, .topic-college-credit.tags .bookmarkable span:hover { border-color: #3887c8; }

.topic-college-credit .tags .bookmarkable a:hover, .topic-college-credit .tags .bookmarkable span:hover { border-color: #3887c8; }

.topic-no-code.tags .bookmarkable a:hover, .topic-no-code.tags .bookmarkable span:hover { border-color: #31AF7F; }

.topic-no-code .tags .bookmarkable a:hover, .topic-no-code .tags .bookmarkable span:hover { border-color: #31AF7F; }

.topic-security.tags .bookmarkable a:hover, .topic-security.tags .bookmarkable span:hover { border-color: #409BE9; }

.topic-security .tags .bookmarkable a:hover, .topic-security .tags .bookmarkable span:hover { border-color: #409BE9; }

.topic-game-development.tags .bookmarkable a:hover, .topic-game-development.tags .bookmarkable span:hover { border-color: #856fc4; }

.topic-game-development .tags .bookmarkable a:hover, .topic-game-development .tags .bookmarkable span:hover { border-color: #856fc4; }

.topic-treehouse-resources.tags .bookmarkable a:hover, .topic-treehouse-resources.tags .bookmarkable span:hover { border-color: #5fcf80; }

.topic-treehouse-resources .tags .bookmarkable a:hover, .topic-treehouse-resources .tags .bookmarkable span:hover { border-color: #5fcf80; }

.topic-coding-for-kids.tags .bookmarkable a:hover, .topic-coding-for-kids.tags .bookmarkable span:hover { border-color: #F36C27; }

.topic-coding-for-kids .tags .bookmarkable a:hover, .topic-coding-for-kids .tags .bookmarkable span:hover { border-color: #F36C27; }

.tags .bookmarkable a:hover svg, .tags .bookmarkable span:hover svg { fill: #8e969d; }

.topic-ai.tags .bookmarkable a:hover svg, .topic-ai.tags .bookmarkable span:hover svg { fill: #733A88; }

.topic-ai .tags .bookmarkable a:hover svg, .topic-ai .tags .bookmarkable span:hover svg { fill: #733A88; }

.topic-back-end.tags .bookmarkable a:hover svg, .topic-back-end.tags .bookmarkable span:hover svg { fill: #008297; }

.topic-back-end .tags .bookmarkable a:hover svg, .topic-back-end .tags .bookmarkable span:hover svg { fill: #008297; }

.topic-data.tags .bookmarkable a:hover svg, .topic-data.tags .bookmarkable span:hover svg { fill: #9F4B84; }

.topic-data .tags .bookmarkable a:hover svg, .topic-data .tags .bookmarkable span:hover svg { fill: #9F4B84; }

.topic-design.tags .bookmarkable a:hover svg, .topic-design.tags .bookmarkable span:hover svg { fill: #4a4290; }

.topic-design .tags .bookmarkable a:hover svg, .topic-design .tags .bookmarkable span:hover svg { fill: #4a4290; }

.topic-experimental.tags .bookmarkable a:hover svg, .topic-experimental.tags .bookmarkable span:hover svg { fill: #733a88; }

.topic-experimental .tags .bookmarkable a:hover svg, .topic-experimental .tags .bookmarkable span:hover svg { fill: #733a88; }

.topic-front-end.tags .bookmarkable a:hover svg, .topic-front-end.tags .bookmarkable span:hover svg { fill: #3659a2; }

.topic-front-end .tags .bookmarkable a:hover svg, .topic-front-end .tags .bookmarkable span:hover svg { fill: #3659a2; }

.topic-fundamentals.tags .bookmarkable a:hover svg, .topic-fundamentals.tags .bookmarkable span:hover svg { fill: #9b3b5a; }

.topic-fundamentals .tags .bookmarkable a:hover svg, .topic-fundamentals .tags .bookmarkable span:hover svg { fill: #9b3b5a; }

.topic-mobile.tags .bookmarkable a:hover svg, .topic-mobile.tags .bookmarkable span:hover svg { fill: #30826C; }

.topic-mobile .tags .bookmarkable a:hover svg, .topic-mobile .tags .bookmarkable span:hover svg { fill: #30826C; }

.topic-internal.tags .bookmarkable a:hover svg, .topic-internal.tags .bookmarkable span:hover svg { fill: #55616c; }

.topic-internal .tags .bookmarkable a:hover svg, .topic-internal .tags .bookmarkable span:hover svg { fill: #55616c; }

.topic-foundations.tags .bookmarkable a:hover svg, .topic-foundations.tags .bookmarkable span:hover svg { fill: #004e61; }

.topic-foundations .tags .bookmarkable a:hover svg, .topic-foundations .tags .bookmarkable span:hover svg { fill: #004e61; }

.topic-undefined.tags .bookmarkable a:hover svg, .topic-undefined.tags .bookmarkable span:hover svg { fill: #55616c; }

.topic-undefined .tags .bookmarkable a:hover svg, .topic-undefined .tags .bookmarkable span:hover svg { fill: #55616c; }

.topic-college-credit.tags .bookmarkable a:hover svg, .topic-college-credit.tags .bookmarkable span:hover svg { fill: #3887c8; }

.topic-college-credit .tags .bookmarkable a:hover svg, .topic-college-credit .tags .bookmarkable span:hover svg { fill: #3887c8; }

.topic-no-code.tags .bookmarkable a:hover svg, .topic-no-code.tags .bookmarkable span:hover svg { fill: #31AF7F; }

.topic-no-code .tags .bookmarkable a:hover svg, .topic-no-code .tags .bookmarkable span:hover svg { fill: #31AF7F; }

.topic-security.tags .bookmarkable a:hover svg, .topic-security.tags .bookmarkable span:hover svg { fill: #409BE9; }

.topic-security .tags .bookmarkable a:hover svg, .topic-security .tags .bookmarkable span:hover svg { fill: #409BE9; }

.topic-game-development.tags .bookmarkable a:hover svg, .topic-game-development.tags .bookmarkable span:hover svg { fill: #856fc4; }

.topic-game-development .tags .bookmarkable a:hover svg, .topic-game-development .tags .bookmarkable span:hover svg { fill: #856fc4; }

.topic-treehouse-resources.tags .bookmarkable a:hover svg, .topic-treehouse-resources.tags .bookmarkable span:hover svg { fill: #5fcf80; }

.topic-treehouse-resources .tags .bookmarkable a:hover svg, .topic-treehouse-resources .tags .bookmarkable span:hover svg { fill: #5fcf80; }

.topic-coding-for-kids.tags .bookmarkable a:hover svg, .topic-coding-for-kids.tags .bookmarkable span:hover svg { fill: #F36C27; }

.topic-coding-for-kids .tags .bookmarkable a:hover svg, .topic-coding-for-kids .tags .bookmarkable span:hover svg { fill: #F36C27; }

.tags .bookmarkable a svg, .tags .bookmarkable span svg { fill: #8e969d; }

.tags .bookmarkable .bookmark { display: inline-block; }

.tags .bookmarkable .bookmark:before, .tags .bookmarkable .bookmark:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.tags .bookmarkable .bookmark:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.tags .bookmarkable .bookmark:after { content: "Bookmark"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.tags .bookmarkable .bookmark:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.tags .bookmarkable .bookmark:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.tags .bookmarkable .unbookmark, .tags .bookmarkable .loading { display: none; }

.tags .bookmarkable.bookmarked .bookmark { display: none; }

.tags .bookmarkable.bookmarked .unbookmark { display: inline-block; border-color: #8e969d; }

.topic-ai.tags .bookmarkable.bookmarked .unbookmark { border-color: #733A88; }

.topic-ai .tags .bookmarkable.bookmarked .unbookmark { border-color: #733A88; }

.topic-back-end.tags .bookmarkable.bookmarked .unbookmark { border-color: #008297; }

.topic-back-end .tags .bookmarkable.bookmarked .unbookmark { border-color: #008297; }

.topic-data.tags .bookmarkable.bookmarked .unbookmark { border-color: #9F4B84; }

.topic-data .tags .bookmarkable.bookmarked .unbookmark { border-color: #9F4B84; }

.topic-design.tags .bookmarkable.bookmarked .unbookmark { border-color: #4a4290; }

.topic-design .tags .bookmarkable.bookmarked .unbookmark { border-color: #4a4290; }

.topic-experimental.tags .bookmarkable.bookmarked .unbookmark { border-color: #733a88; }

.topic-experimental .tags .bookmarkable.bookmarked .unbookmark { border-color: #733a88; }

.topic-front-end.tags .bookmarkable.bookmarked .unbookmark { border-color: #3659a2; }

.topic-front-end .tags .bookmarkable.bookmarked .unbookmark { border-color: #3659a2; }

.topic-fundamentals.tags .bookmarkable.bookmarked .unbookmark { border-color: #9b3b5a; }

.topic-fundamentals .tags .bookmarkable.bookmarked .unbookmark { border-color: #9b3b5a; }

.topic-mobile.tags .bookmarkable.bookmarked .unbookmark { border-color: #30826C; }

.topic-mobile .tags .bookmarkable.bookmarked .unbookmark { border-color: #30826C; }

.topic-internal.tags .bookmarkable.bookmarked .unbookmark { border-color: #55616c; }

.topic-internal .tags .bookmarkable.bookmarked .unbookmark { border-color: #55616c; }

.topic-foundations.tags .bookmarkable.bookmarked .unbookmark { border-color: #004e61; }

.topic-foundations .tags .bookmarkable.bookmarked .unbookmark { border-color: #004e61; }

.topic-undefined.tags .bookmarkable.bookmarked .unbookmark { border-color: #55616c; }

.topic-undefined .tags .bookmarkable.bookmarked .unbookmark { border-color: #55616c; }

.topic-college-credit.tags .bookmarkable.bookmarked .unbookmark { border-color: #3887c8; }

.topic-college-credit .tags .bookmarkable.bookmarked .unbookmark { border-color: #3887c8; }

.topic-no-code.tags .bookmarkable.bookmarked .unbookmark { border-color: #31AF7F; }

.topic-no-code .tags .bookmarkable.bookmarked .unbookmark { border-color: #31AF7F; }

.topic-security.tags .bookmarkable.bookmarked .unbookmark { border-color: #409BE9; }

.topic-security .tags .bookmarkable.bookmarked .unbookmark { border-color: #409BE9; }

.topic-game-development.tags .bookmarkable.bookmarked .unbookmark { border-color: #856fc4; }

.topic-game-development .tags .bookmarkable.bookmarked .unbookmark { border-color: #856fc4; }

.topic-treehouse-resources.tags .bookmarkable.bookmarked .unbookmark { border-color: #5fcf80; }

.topic-treehouse-resources .tags .bookmarkable.bookmarked .unbookmark { border-color: #5fcf80; }

.topic-coding-for-kids.tags .bookmarkable.bookmarked .unbookmark { border-color: #F36C27; }

.topic-coding-for-kids .tags .bookmarkable.bookmarked .unbookmark { border-color: #F36C27; }

.tags .bookmarkable.bookmarked .unbookmark:before, .tags .bookmarkable.bookmarked .unbookmark:after { visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }

.tags .bookmarkable.bookmarked .unbookmark:before { position: absolute; z-index: 1001; content: ""; background: #384047; width: 10px; height: 10px; bottom: 100%; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -ms-transform: translate(-50%, 5px) rotate(45deg); -moz-transform: translate(-50%, 5px) rotate(45deg); -webkit-transform: translate(-50%, 5px) rotate(45deg); transform: translate(-50%, 5px) rotate(45deg); left: 50%; border-radius: 0 0 3px 0; }

.tags .bookmarkable.bookmarked .unbookmark:after { content: "Remove Bookmark"; font: 700 14px/22px "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; position: absolute; background: #384047; text-align: center; padding: 10px 20px; width: auto; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); color: #fff; left: 50%; bottom: 100%; }

.tags .bookmarkable.bookmarked .unbookmark:hover:before { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -5px) rotate(45deg); -moz-transform: translate(-50%, -5px) rotate(45deg); -webkit-transform: translate(-50%, -5px) rotate(45deg); transform: translate(-50%, -5px) rotate(45deg); }

.tags .bookmarkable.bookmarked .unbookmark:hover:after { visibility: visible; opacity: 1; -ms-transform: translate(-50%, -10px); -moz-transform: translate(-50%, -10px); -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); }

.tags .bookmarkable.bookmarked .unbookmark svg { position: relative; fill: #8e969d; }

.topic-ai.tags .bookmarkable.bookmarked .unbookmark svg { fill: #733A88; }

.topic-ai .tags .bookmarkable.bookmarked .unbookmark svg { fill: #733A88; }

.topic-back-end.tags .bookmarkable.bookmarked .unbookmark svg { fill: #008297; }

.topic-back-end .tags .bookmarkable.bookmarked .unbookmark svg { fill: #008297; }

.topic-data.tags .bookmarkable.bookmarked .unbookmark svg { fill: #9F4B84; }

.topic-data .tags .bookmarkable.bookmarked .unbookmark svg { fill: #9F4B84; }

.topic-design.tags .bookmarkable.bookmarked .unbookmark svg { fill: #4a4290; }

.topic-design .tags .bookmarkable.bookmarked .unbookmark svg { fill: #4a4290; }

.topic-experimental.tags .bookmarkable.bookmarked .unbookmark svg { fill: #733a88; }

.topic-experimental .tags .bookmarkable.bookmarked .unbookmark svg { fill: #733a88; }

.topic-front-end.tags .bookmarkable.bookmarked .unbookmark svg { fill: #3659a2; }

.topic-front-end .tags .bookmarkable.bookmarked .unbookmark svg { fill: #3659a2; }

.topic-fundamentals.tags .bookmarkable.bookmarked .unbookmark svg { fill: #9b3b5a; }

.topic-fundamentals .tags .bookmarkable.bookmarked .unbookmark svg { fill: #9b3b5a; }

.topic-mobile.tags .bookmarkable.bookmarked .unbookmark svg { fill: #30826C; }

.topic-mobile .tags .bookmarkable.bookmarked .unbookmark svg { fill: #30826C; }

.topic-internal.tags .bookmarkable.bookmarked .unbookmark svg { fill: #55616c; }

.topic-internal .tags .bookmarkable.bookmarked .unbookmark svg { fill: #55616c; }

.topic-foundations.tags .bookmarkable.bookmarked .unbookmark svg { fill: #004e61; }

.topic-foundations .tags .bookmarkable.bookmarked .unbookmark svg { fill: #004e61; }

.topic-undefined.tags .bookmarkable.bookmarked .unbookmark svg { fill: #55616c; }

.topic-undefined .tags .bookmarkable.bookmarked .unbookmark svg { fill: #55616c; }

.topic-college-credit.tags .bookmarkable.bookmarked .unbookmark svg { fill: #3887c8; }

.topic-college-credit .tags .bookmarkable.bookmarked .unbookmark svg { fill: #3887c8; }

.topic-no-code.tags .bookmarkable.bookmarked .unbookmark svg { fill: #31AF7F; }

.topic-no-code .tags .bookmarkable.bookmarked .unbookmark svg { fill: #31AF7F; }

.topic-security.tags .bookmarkable.bookmarked .unbookmark svg { fill: #409BE9; }

.topic-security .tags .bookmarkable.bookmarked .unbookmark svg { fill: #409BE9; }

.topic-game-development.tags .bookmarkable.bookmarked .unbookmark svg { fill: #856fc4; }

.topic-game-development .tags .bookmarkable.bookmarked .unbookmark svg { fill: #856fc4; }

.topic-treehouse-resources.tags .bookmarkable.bookmarked .unbookmark svg { fill: #5fcf80; }

.topic-treehouse-resources .tags .bookmarkable.bookmarked .unbookmark svg { fill: #5fcf80; }

.topic-coding-for-kids.tags .bookmarkable.bookmarked .unbookmark svg { fill: #F36C27; }

.topic-coding-for-kids .tags .bookmarkable.bookmarked .unbookmark svg { fill: #F36C27; }

.tags .bookmarkable.loading .bookmark, .tags .bookmarkable.loading .unbookmark { display: none; }

.tags .bookmarkable.loading .loading { display: inline-block; }

.tags .bookmarkable.loading .loading svg { position: relative; top: 2px; }

.bonus-meta { padding-top: 55px; }

.bonus-meta strong { font-size: 14px; color: #2b363e; margin-bottom: 8px; display: block; }

.bonus-meta h3 { font-size: 18px; line-height: 24px; margin-bottom: 10px; }

.bonus-meta p { margin-bottom: 30px; }

.bonus-meta .bonus-content-footer:before, .bonus-meta .bonus-content-footer:after { content: " "; display: table; }

.bonus-meta .bonus-content-footer:after { clear: both; }

.bonus-meta .primary { float: left; }

.bonus-meta .tags .bookmarkable { float: right; }

@media screen and (max-width: 969px) { .bonus-meta .tags .bookmarkable { float: left; margin: 0 10px 0 0; } }

.bonus-meta .pro-content > a, .bonus-meta .techdegree-content > a { background-color: #55616c; border-color: #55616c; color: #fff; }

.upcoming-meta { cursor: default; min-height: 54px; }

@media screen and (max-width: 679px) { .achievement-meta { padding-left: 80px; }
  .achievement-meta > img { width: 50px; margin-left: -70px; }
  .achievement-meta h3 { font-size: 16px; }
  .achievement-meta p { font-size: 14px; } }

.module-instructor li { list-style-type: none; border-bottom: 1px solid #d4d9dd; margin-bottom: 15px; }

.module-instructor li:before, .module-instructor li:after { content: " "; display: table; }

.module-instructor li:after { clear: both; }

.module-instructor li:last-child { border: none; }

.module-instructor .instructor-avatar { width: 60px; height: 60px; display: block; float: right; margin: 0 0 15px 15px; background-color: #d4d9dd; background-position: center; background-size: auto 60px; border-radius: 60px; }

.module-instructor .instructor-avatar img { display: none; }

.module-instructor h4 { font-size: 14px; font-weight: 700; color: #384047; margin-bottom: 5px; }

.module-instructor p { font-size: 14px; color: #1a2126; }

.module-downloads li { list-style-type: none; }

.module-downloads li:before, .module-downloads li:after { content: " "; display: table; }

.module-downloads li:after { clear: both; }

.module-downloads li:not(:last-child) { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #edeff0; }

.module-downloads li .icon { float: left; margin: 0 10px 0 0; }

.module-downloads li strong { color: #1a2126; font-size: 14px; line-height: 1.4; font-weight: 700; display: block; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.module-downloads li p { font-size: 14px; color: #1a2126; margin: 0; }

.module-downloads li a:hover strong { color: #384047; }

.module-demo ul { margin-bottom: 15px; }

.module-demo ul:before, .module-demo ul:after { content: " "; display: table; }

.module-demo ul:after { clear: both; }

.module-demo li { list-style-type: none; }

.module-demo li a { background: #e2e5e8; display: block; overflow: hidden; border: 4px solid #d4d9dd; border-radius: 5px; }

.module-demo li a:hover { border-color: #c6ccd2; }

.module-demo li a:active { margin: 1px 0 -1px; }

.module-demo img { width: 100%; }

.module-release p { font-size: 14px; }

.module-release p strong { font-weight: 700; }

@-webkit-keyframes floating { 0% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0) rotate(2deg);
    -moz-transform: translate(0, 0) rotate(2deg);
    -webkit-transform: translate(0, 0) rotate(2deg);
    transform: translate(0, 0) rotate(2deg); }
  25% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 10px) rotate(0deg);
    -moz-transform: translate(0, 10px) rotate(0deg);
    -webkit-transform: translate(0, 10px) rotate(0deg);
    transform: translate(0, 10px) rotate(0deg); }
  50% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0px) rotate(-2deg);
    -moz-transform: translate(0, 0px) rotate(-2deg);
    -webkit-transform: translate(0, 0px) rotate(-2deg);
    transform: translate(0, 0px) rotate(-2deg); }
  75% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 10px) rotate(0deg);
    -moz-transform: translate(0, 10px) rotate(0deg);
    -webkit-transform: translate(0, 10px) rotate(0deg);
    transform: translate(0, 10px) rotate(0deg); }
  100% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0) rotate(2deg);
    -moz-transform: translate(0, 0) rotate(2deg);
    -webkit-transform: translate(0, 0) rotate(2deg);
    transform: translate(0, 0) rotate(2deg); } }

@-moz-keyframes floating { 0% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0) rotate(2deg);
    -moz-transform: translate(0, 0) rotate(2deg);
    -webkit-transform: translate(0, 0) rotate(2deg);
    transform: translate(0, 0) rotate(2deg); }
  25% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 10px) rotate(0deg);
    -moz-transform: translate(0, 10px) rotate(0deg);
    -webkit-transform: translate(0, 10px) rotate(0deg);
    transform: translate(0, 10px) rotate(0deg); }
  50% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0px) rotate(-2deg);
    -moz-transform: translate(0, 0px) rotate(-2deg);
    -webkit-transform: translate(0, 0px) rotate(-2deg);
    transform: translate(0, 0px) rotate(-2deg); }
  75% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 10px) rotate(0deg);
    -moz-transform: translate(0, 10px) rotate(0deg);
    -webkit-transform: translate(0, 10px) rotate(0deg);
    transform: translate(0, 10px) rotate(0deg); }
  100% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0) rotate(2deg);
    -moz-transform: translate(0, 0) rotate(2deg);
    -webkit-transform: translate(0, 0) rotate(2deg);
    transform: translate(0, 0) rotate(2deg); } }

@keyframes floating { 0% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0) rotate(2deg);
    -moz-transform: translate(0, 0) rotate(2deg);
    -webkit-transform: translate(0, 0) rotate(2deg);
    transform: translate(0, 0) rotate(2deg); }
  25% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 10px) rotate(0deg);
    -moz-transform: translate(0, 10px) rotate(0deg);
    -webkit-transform: translate(0, 10px) rotate(0deg);
    transform: translate(0, 10px) rotate(0deg); }
  50% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0px) rotate(-2deg);
    -moz-transform: translate(0, 0px) rotate(-2deg);
    -webkit-transform: translate(0, 0px) rotate(-2deg);
    transform: translate(0, 0px) rotate(-2deg); }
  75% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 10px) rotate(0deg);
    -moz-transform: translate(0, 10px) rotate(0deg);
    -webkit-transform: translate(0, 10px) rotate(0deg);
    transform: translate(0, 10px) rotate(0deg); }
  100% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0) rotate(2deg);
    -moz-transform: translate(0, 0) rotate(2deg);
    -webkit-transform: translate(0, 0) rotate(2deg);
    transform: translate(0, 0) rotate(2deg); } }

@-webkit-keyframes cloudsFade { 0% { opacity: 0; }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }

@-moz-keyframes cloudsFade { 0% { opacity: 0; }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes cloudsFade { 0% { opacity: 0; }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }

@-webkit-keyframes clouds { 0% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% { -webkit-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(-250px, 0);
    -moz-transform: translate(-250px, 0);
    -webkit-transform: translate(-250px, 0);
    transform: translate(-250px, 0); } }

@-moz-keyframes clouds { 0% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% { -moz-transform-origin: 50% 50% 0 0;
    -ms-transform: translate(-250px, 0);
    -moz-transform: translate(-250px, 0);
    -webkit-transform: translate(-250px, 0);
    transform: translate(-250px, 0); } }

@keyframes clouds { 0% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% { -webkit-transform-origin: 50% 50% 0 0;
    -moz-transform-origin: 50% 50% 0 0;
    -ms-transform-origin: 50% 50% 0 0;
    -o-transform-origin: 50% 50% 0 0;
    transform-origin: 50% 50% 0 0;
    -ms-transform: translate(-250px, 0);
    -moz-transform: translate(-250px, 0);
    -webkit-transform: translate(-250px, 0);
    transform: translate(-250px, 0); } }

.prereqs h3 { font-weight: 700; margin: 0 0 10px; color: #384047; font-size: 18px; line-height: 1.3; }

.prereqs .course { border-radius: 4px; color: #fff; display: block; float: left; font-size: 14px; font-weight: 700; height: 42px; line-height: 42px; margin-top: 20px; position: relative; width: 100%; }

.prereqs .course a { color: white; display: block; padding: 0 15px; text-overflow: ellipsis; }

.prereqs .course a.add-to-home { border-radius: 0 4px 4px 0; background-color: rgba(0, 0, 0, 0.2); height: 42px; padding: 0 12px; position: absolute; right: 0; top: 0; }

.prereqs .course a.add-to-home:hover { background-color: rgba(0, 0, 0, 0.3); }

.prereqs .course a.add-to-home .icon { width: 16px; }

.prereqs .course a.add-to-home .tooltip { bottom: 53px; display: none; margin-left: -61px; text-align: center; width: 90px; }

.prereqs .course a.add-to-home .tooltip-hidden { display: none; }

.prereqs .course a.add-to-home:hover .tooltip { display: block; }

.prereqs .course a.add-to-home:hover .tooltip-hidden { display: none; }

.prereqs .course.html { background-color: #3659a2; }

.prereqs .course.css { background-color: #3659a2; }

@media screen and (max-width: 679px) { .prereqs .course a.add-to-home:hover .tooltip { display: none; } }
.caption-search .search-input { padding: 10px 0; }

.caption-search-results .activity-result { clear: both; }

.caption-search-results .activity-result .box-header { display: block; padding: 17px 30px; color: #fff; }

.caption-search-results .activity-result .box-header h2 { display: inline-block; font-size: inherit; color: inherit; }

.caption-search-results .video-result { clear: both; }

.caption-search-results .video-result:not(:last-child) { border-bottom: 1px solid #edeff0; padding-bottom: 20px; margin-bottom: 20px; }

.caption-search-results .video-result h3 { margin-bottom: 10px; font-size: 16px; line-height: 1.4; }

.caption-search-results .video-result h3 a { color: #1a2126; }

.caption-search-results .video-result figure { width: 33.33%; float: left; }

.caption-search-results .video-result-thumb { position: relative; }

.caption-search-results .video-result-thumb-overlay { background-color: rgba(225, 232, 234, 0.2); position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; transition: background-color 0.3s ease; }

.caption-search-results .video-result-thumb-overlay:hover { background-color: rgba(0, 0, 0, 0.2); }

.caption-search-results .video-result-thumb svg { position: absolute; left: 50%; top: 50%; fill: #fff; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.caption-search-results .video-result-thumb svg.play-icon { width: 40px; height: 42px; }

.caption-search-results .video-result-thumb:hover svg { -ms-transform: translate(-50%, -50%) scale(1.1); -moz-transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); }

.caption-search-results .video-result-thumb:not(:hover) svg { opacity: 0.4; }

.caption-search-results .video-result-thumb img { display: block; width: 100%; border-radius: 4px; min-height: 190px; }

.caption-search-results .video-result-highlights { width: 66.66%; float: left; padding-left: 20px; max-height: 214px; overflow: auto; }

.caption-search-results .video-result-highlights li { line-height: 1.5; margin: 0; list-style-type: none; padding-right: 80px; }

.caption-search-results .video-result-highlights li:not(:last-child) { margin-bottom: 6px; }

.caption-search-results .video-result-highlights a { display: block; color: inherit; }

.caption-search-results .video-result-highlights .timestamp { font-weight: 700; color: #2b363e; float: right; margin-right: -80px; }

.caption-search-results .video-result-highlights em { display: inline-block; padding: 0 3px; background-color: rgba(255, 212, 102, 0.5); }
html.accounts-controller .data { margin-bottom: 0; }

html.accounts-controller .data th.padded { padding: 15px 5px 15px 0; }

html.accounts-controller .data .plan-cell { padding: 15px 5px; vertical-align: middle; }

html.accounts-controller .data .price-row .plan-cell { padding-bottom: 0; }

html.accounts-controller .data .plan-cell { text-align: center; }

html.accounts-controller .data .plan-cell strong { font-size: 24px; font-weight: 700; display: block; }

html.accounts-controller .data .plan-cell p { font-size: 12px; margin: 0; }

html.accounts-controller .pause-cancel-matrix p .link-primary, html.accounts-controller .pause-downgrade-matrix p .link-primary { font-weight: 700; color: #3f8abf; }

html.accounts-controller .pause-cancel-matrix table, html.accounts-controller .pause-downgrade-matrix table { margin: 35px 0; }

html.accounts-controller .pause-cancel-matrix tr:last-child, html.accounts-controller .pause-downgrade-matrix tr:last-child { border-bottom: 1px solid #dfe3e4; }

html.accounts-controller .pause-cancel-matrix .plan-cell, html.accounts-controller .pause-downgrade-matrix .plan-cell { padding-top: 0; padding-bottom: 10px; }

@media screen and (max-width: 679px) { html.accounts-controller .pause-cancel-matrix .button, html.accounts-controller .pause-downgrade-matrix .button { width: 100%; margin-bottom: 15px; }
  html.accounts-controller .pause-cancel-matrix .button.button-secondary, html.accounts-controller .pause-downgrade-matrix .button.button-secondary { margin-bottom: 0; } }

html.accounts-controller .pause-downgrade-matrix tr:last-child { border-bottom: none; }

html.accounts-controller .pause-downgrade-matrix .plan-cell { padding-top: 0; padding-bottom: 0; }

html.accounts-controller .pause-downgrade-stats { margin: 20px 0 40px 0; }

html.accounts-controller .pause-downgrade-stats span { display: block; text-align: center; font-size: 14px; }

html.accounts-controller .pause-downgrade-stats-stat { font-size: 67px !important; line-height: 70px; font-weight: 700; color: #050708; margin-top: 10px; }

html.accounts-controller .pause-downgrade-stats-type { font-weight: 700; color: #050708; }

html.accounts-controller .pause-downgrade-stats-tip { margin-top: 13px; }

html.accounts-controller .pause-downgrade-stats-hours, html.accounts-controller .pause-downgrade-stats-projects { border-right: 1px solid #edeff0; }

html.accounts-controller .profile-name-suggestions-example, html.accounts-controller .profile-url-name { background-color: #f6f9fa; border-bottom: 2px solid #e8ebed; padding: 4px; }

html.accounts-controller .profile-name-suggestions, html.accounts-controller .edit-profile-url, html.accounts-controller .github-account { word-break: break-all; }

html.accounts-controller .account-info-list { padding-left: 15px; }

html.accounts-controller .account-info-list li { margin-bottom: 15px; }

html.accounts-controller .account-info-list li:last-of-type { margin-bottom: 0; }

html.accounts-controller .alert-banner:not(.icons-only).info a:not(.button) { color: #387bab; font-weight: 500; }

html.accounts-controller .alert-banner a:not(.button):hover { color: #2a5d81 !important; }

html.accounts-controller .box-content.secondary { border-radius: 0 0 4px 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset; }

html.accounts-controller .billing-address-fields input { margin-bottom: 5px; }

html.accounts-controller .referral-network { padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #edeff0; display: block; overflow: hidden; }

html.accounts-controller .referral-network a { margin: 0 10px 10px 0; }

html.accounts-controller .referral-image { border-bottom: none; }

html.accounts-controller .referral-image .image { margin: 0 20px 15px 0; float: left; }

html.accounts-controller .referral-image .image img { max-width: 100%; max-width: 200px; max-height: auto; }

html.accounts-controller .referral-image .embed-code { overflow: hidden; }

@media screen and (max-width: 679px) { html.accounts-controller .referral-image .embed-code { clear: left; } }

html.accounts-controller .machine { margin-bottom: 20px; }

html.accounts-controller .machine img { max-height: auto; max-width: 100%; }

html.accounts-controller .referral-stat { margin-top: 15px; }

html.accounts-controller .percent { text-align: center; }

html.accounts-controller .percent .value { color: #384047; display: inline-block; font-size: 50px; font-weight: 700; margin: 0 15px 0 0; }

html.accounts-controller .referral-price { text-align: center; }

html.accounts-controller .referral-price .price { background: #f0f2f4; padding: 8px 10px; font-size: 20px; font-weight: 700; margin: 5px 0 0; color: #384047; display: inline-block; border-radius: 3px; }

html.accounts-controller .referral-box { padding-left: 0px; padding-right: 0px; }

html.accounts-controller .referral-box .referral-top-section { padding-left: 15px; padding-right: 15px; }

html.accounts-controller .referral-box .referral-max-note { margin-top: -10px; margin-bottom: 40px; }

html.accounts-controller .referral-box .referral-empty { padding-bottom: 30px; }

html.accounts-controller .referral-box .referral-list { border-top: 1px solid #edeff0; table-layout: fixed; }

html.accounts-controller .referral-box .referral-list tr { border-bottom: 1px solid #edeff0 !important; }

html.accounts-controller .referral-box .referral-list .referral-over-max { background: #f9fafa; color: #2b363e; }

html.accounts-controller .referral-box .referral-list td { vertical-align: middle !important; }

html.accounts-controller .referral-box .referral-list .referral-avatar-container { width: 80px; padding-left: 30px !important; }

html.accounts-controller .referral-box .referral-list .referral-avatar { position: relative; box-sizing: border-box; width: 42px; height: 42px; border: 3px solid white; border-radius: 100%; box-shadow: 0 0 0 3px #e8ebed; display: block; background-position: center; background-size: cover; }

html.accounts-controller .referral-box .referral-list .referral-name { margin-left: 20px; font-size: 16px; font-weight: 700; }

html.accounts-controller .referral-box .referral-list .referral-time { text-align: right !important; margin-left: auto; padding-right: 30px !important; }

html.organization-billing-controller .payment-type div p { margin-top: 13px; }

html.organization-billing-controller .payment-type div p a { color: #3f8abf; }

html.organization-billing-controller .edit-payment .button { display: inline-block; margin: -5px 0 -5px 5px; }
.th-tour { display: block; list-style: none; margin: 0; padding: 0; }

.tour-tarp { display: none !important; }

.tour-step { display: none; position: absolute; background: #fff; padding: 30px; z-index: 500; border-radius: 5px; width: 250px; border: 1px solid #d4d9dd; box-shadow: rgba(56, 64, 71, 0.2) 0 2px 8px 0; }

.tour-step:before, .tour-step:after { width: 0; height: 0; content: ""; position: absolute; }

.tour-step:before { border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #d4d9dd; z-index: 499; bottom: 0; margin-bottom: -12px; }

.tour-step:after { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; margin-top: -11px; z-index: 500; }

.tour-step.tour-top:after { -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); bottom: -10px; top: auto; left: 50%; margin-left: -10px; }

.tour-step.tour-top:before { -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-left: -12px; left: 50%; }

.tour-step.tour-bottom:after { top: 1px; left: 50%; margin-left: -10px; }

.tour-step.tour-bottom:before { top: -12px; left: 50%; margin-left: -12px; }

.tour-step.tour-right:after { -ms-transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); left: -14px; right: auto; top: 50%; margin-top: -5px; }

.tour-step.tour-right:before { -ms-transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); left: -18px; right: auto; top: 50%; margin-top: -6px; }

.tour-step.tour-left:after { -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); right: -14px; left: auto; top: 50%; margin-top: -5px; }

.tour-step.tour-left:before { -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); right: -18px; left: auto; top: 50%; margin-top: -6px; }

.tour-step h3 { color: #050708; font-size: 18px; font-weight: 700; margin-bottom: 16px; line-height: 1.5; }

.tour-step p { font-size: 14px; color: #1a2126; line-height: 1.5; margin-bottom: 24px; }

.active-tour-siblings { z-index: 5002 !important; position: relative; }

.active-tour-step { -webkit-transition: background 0.3s 0.3s ease; -moz-transition: background 0.3s 0.3s ease; transition: background 0.3s 0.3s ease; }

.active-tour-step.header-nav-link { color: #fff; background: #31383e; padding: 0 10px; margin: 0 -10px; }

.tour-control-bar { box-sizing: border-box; background: #2d3339; height: 50px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 5002; transition: top 200ms 100ms; }

.tour-control-bar.closed { top: -50px; }

.tour-control-bar > div { width: 100%; overflow: hidden; }

.tour-control-bar h3 { color: #fff; font-size: 18px; float: left; display: inline-block; line-height: 50px; font-weight: 700; padding-left: 20px; }

.tour-control-bar .tour-actions { list-style: none; float: right; }

@media only screen and (max-width: 1540px) { .tour-control-bar .tour-actions { float: none; position: absolute; right: 0; } }

.tour-control-bar .tour-actions li { float: left; display: inline-block; line-height: 50px; font-size: 12px; }

.tour-control-bar .tour-actions li.step-indicator span { padding-right: 15px; padding-left: 15px; padding: 2px; display: block; line-height: 48px; color: #b3b3b3; font-weight: 700; font-size: 16px; }

.tour-control-bar .tour-actions li a { display: block; line-height: 50px; height: 50px; }

.tour-control-bar .tour-actions li a.tour-prev, .tour-control-bar .tour-actions li a.tour-next, .tour-control-bar .tour-actions li a.tour-close { text-indent: -9999px; position: relative; transition: opacity 150ms; }

.tour-control-bar .tour-actions li a.tour-prev .icon, .tour-control-bar .tour-actions li a.tour-next .icon, .tour-control-bar .tour-actions li a.tour-close .icon { position: absolute; width: 12px; height: 12px; fill: #fff; }

.tour-control-bar .tour-actions li a.tour-prev, .tour-control-bar .tour-actions li a.tour-next { width: 12px; height: 50px; }

.tour-control-bar .tour-actions li a.tour-prev .icon, .tour-control-bar .tour-actions li a.tour-next .icon { top: 20px; transition: opacity 150ms; opacity: .7; }

.tour-control-bar .tour-actions li a.tour-prev:hover svg, .tour-control-bar .tour-actions li a.tour-next:hover svg { opacity: 1; }

.tour-control-bar .tour-actions li a.tour-prev.inactive-step, .tour-control-bar .tour-actions li a.tour-next.inactive-step { cursor: default; }

.tour-control-bar .tour-actions li a.tour-prev.inactive-step:active, .tour-control-bar .tour-actions li a.tour-next.inactive-step:active { background: #384047; }

.tour-control-bar .tour-actions li a.tour-prev.inactive-step:hover .icon, .tour-control-bar .tour-actions li a.tour-next.inactive-step:hover .icon { opacity: .7; }

.tour-control-bar .tour-actions li a.tour-prev { padding: 0 20px; }

.tour-control-bar .tour-actions li a.tour-prev .icon { left: 14px; }

.tour-control-bar .tour-actions li a.tour-next { padding: 0 20px; }

.tour-control-bar .tour-actions li a.tour-next .icon { right: 14px; }

.tour-control-bar .tour-actions li a.tour-close { border-left: 1px solid #3f4850; width: 12px; padding: 0 25px; opacity: .7; margin-left: 10px; }

@media screen and (max-width: 679px) { .tour-control-bar .tour-actions li a.tour-close { display: none; } }

.tour-control-bar .tour-actions li a.tour-close .icon { top: 20px; left: 18px; }

.tour-control-bar .tour-actions li a.tour-close:hover { opacity: .95; }

.tour-control-bar .tour-actions li a.tour-close:active { opacity: 1; }

.highlight.fixed-sidebar { z-index: 5001 !important; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); background: transparent; }

.welcome-stacked { margin-bottom: 30px; }
#jobs .module.featured { margin-bottom: 15px; }

#jobs .contained .secondary-heading h2 { color: #384047; font-size: 16px; }

#jobs .contained .secondary-heading h3 { color: #101417; font-size: 14px; }

#jobs .steps li { color: #a7a9ab; display: block; font-size: 16px; font-weight: 700; list-style: none; margin: 0 0 15px 0; -webkit-font-smoothing: antialiased; }

#jobs .steps li.selected { color: #5fcf80; }

#jobs .clearer { clear: both; }

#jobs .job-new { background-color: #f1556a; border-radius: 3px; color: white; display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 6px; text-transform: uppercase; -webkit-font-smoothing: antialiased; }

#jobs .job-featured { background-color: #569ed5; border-radius: 3px; color: white; display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 7px; text-transform: uppercase; -webkit-font-smoothing: antialiased; }

#jobs .link-share .share-buttons { display: none; margin-top: 10px; }

#jobs .link-share:hover .share-buttons { display: block; }

#jobs .link-share:hover .share-buttons span, #jobs .link-share:hover .share-buttons a { background-color: transparent; border: none; padding: 0; }

#jobs .share-options { background: #f9fafa; border-radius: 5px; font-weight: 700; color: #2b363e; padding: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; }

#jobs .share-options:hover { background: #fff; color: #101417; }

#jobs .content-block .content-meta { height: 170px; position: static; }

#jobs .content-block .content-meta > a { display: block; height: 100%; }

#jobs .content-block .location { color: #b7c0c7; display: block; font-size: 14px; font-weight: 700; line-height: 13px; }

#jobs .block { margin-bottom: 40px; }

#jobs .block:before, #jobs .block:after { content: " "; display: table; }

#jobs .block:after { clear: both; }

#jobs .block .note { font-size: 14px; line-height: 1.6; margin: -10px 0 20px 0; }

#jobs .uploader .action { display: none; }

#jobs .uploader .filename { display: none; }

#jobs .uploader input { height: 160px; width: 100%; cursor: pointer; }

#jobs .featured-price { color: #4fb368; font-size: 16px; font-weight: 700; }

#jobs .logo-container { margin-top: 20px; position: relative; }

#jobs .logo-container .company-logo { background-position: center center; background-repeat: no-repeat; border: 2px dashed #ddd; height: 100px; line-height: 100px; overflow: hidden; padding: 10px; text-align: center; border-radius: 5px; }

#jobs .logo-container .company-logo strong { font-weight: 700; color: #2b363e; font-size: 14px; }

#jobs .logo-container .company-logo img { max-width: 100px; max-height: 65px; display: inline-block; }

#jobs .logo-container .note { margin: 10px 0 0 0; }

#jobs .logo-container .note strong { font-weight: 700; }

#jobs .logo-container .form-item { position: absolute; width: 100%; top: 0; }

#jobs .radio-replacement-wrapper { cursor: pointer; padding: 15px; position: relative; border-radius: 3px; }

#jobs .radio-replacement-wrapper:hover { background-color: #f5f9fc; }

#jobs .radio-replacement-wrapper:hover label { color: #66747d; }

#jobs .radio-replacement-wrapper:hover .price { color: #c6c9cc; }

#jobs .radio-replacement-wrapper:hover p { color: #8e9fac; }

#jobs .radio-replacement-wrapper:hover span.radio-replacement { background-position: -44px 0px; }

#jobs .radio-replacement-wrapper.selected { background-color: #edfaf0; }

#jobs .radio-replacement-wrapper.selected label, #jobs .radio-replacement-wrapper.selected div.price { color: #5fcf80; }

#jobs .radio-replacement-wrapper.selected p { color: #90c09d; }

#jobs .radio-replacement-wrapper.selected span.radio-replacement { background-position: -22px 0px; }

#jobs .radio-replacement-wrapper .price { color: #d9dbdc; font-size: 18px; font-weight: 700; position: absolute; right: 20px; top: 16px; -webkit-font-smoothing: antialiased; }

#jobs .radio-replacement-wrapper .input-radio { display: none; }

#jobs .radio-replacement-wrapper label { color: #81888c; cursor: pointer; display: block; font-size: 16px; font-weight: 700; position: relative; margin-top: 3px; -webkit-font-smoothing: antialiased; }

#jobs .radio-replacement-wrapper p { color: #aaa; font-size: 14px; font-style: italic; margin: 0; padding: 0; }

#jobs .radio-replacement-wrapper span.radio-replacement { background-image: url(/assets/icons/icon-job-radio-8215bca19f952bb4f9fa6cafb2146c1045d13578d12cd4b75faf2641ca2d6a09.png); background-size: 66px 22px; background-repeat: no-repeat; cursor: pointer; display: block; float: left; height: 40px; margin-right: 15px; width: 22px; }

#jobs #contact-method-selector-wrapper { margin: 0; }

#jobs #contact-method-selector-wrapper #contact-method-selector, #jobs #contact-method-selector-wrapper .form-element { display: block; float: left; margin-right: 10px; }

#jobs #contact-method-selector-wrapper .form-item { overflow: hidden; }

#jobs #details-basic { margin-bottom: 15px; }

#jobs #details-basic .drop-down-container { margin-left: 0; margin-right: 30px; }

#jobs #details-basic #input-wrapper { position: relative; }

#jobs #details-basic #input-wrapper .form-item { margin-bottom: 10px; }

#jobs #details-basic #input-wrapper .error-message { display: none; }

#jobs #details-basic #input-wrapper img { max-height: 65px; position: absolute; right: 0; top: 5px; border-radius: 3px; }

#jobs #details-basic label { color: #384047; display: block; font-size: 16px; font-weight: 700; margin: 15px 0 10px 0; }

#jobs #details-basic input#job_city, #jobs #details-basic input#job_state, #jobs #details-basic select#job_city, #jobs #details-basic select#job_state { font-size: 16px; width: 140px; }

#jobs #details-basic #job_title { color: #384047; font-size: 28px; font-weight: 700; margin-bottom: 0; bottom: auto; left: 0; top: 0; -webkit-font-smoothing: antialiased; }

#jobs #details-basic .form-element { background-color: white; color: #a9a9a9; font-weight: 400; margin: 0; padding: 0; }

#jobs #details-basic .form-element span { font-size: 16px; }

#jobs #details-specifics textarea { background-color: white; border: 2px dashed #e4e4e4; border-radius: 5px; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; height: 10em; line-height: 1.5; overflow: hidden; padding: 12px; }

#jobs #details-specifics textarea:focus { border-color: #6baddd; outline: none; }

#jobs #details-specifics textarea h2 { margin-bottom: 15px; }

#jobs #details-header { margin-bottom: 15px; }

#jobs #details-header img.company-logo { float: left; right: 30px; position: absolute; max-height: 117px; max-width: 300px; border-radius: 3px; z-index: 5; }

#jobs #details-header div.job-date { color: #2b363e; font-size: 14px; margin-bottom: 5px; }

#jobs #details-header div.job-headline { position: relative; -webkit-font-smoothing: antialiased; }

#jobs #details-header h1 { color: #384047; font-size: 28px; line-height: 1.4; margin: 0 0 5px 0; width: 60%; }

#jobs #details-header h1 strong { color: #2b363e; }

#jobs #details-header h1 strong span { color: #2b363e; font-weight: 400; }

#jobs #details-header p { font-size: 16px; margin: 0 0 20px 0; }

#jobs #details-header .job-location, #jobs #details-header .job-type, #jobs #details-header .job-category { font-weight: 700; }

#jobs #details-header div.job-meta { border-top: 1px solid #ececec; font-size: 16px; margin: 30px 0 0 0; padding: 25px 0; border-radius: 0 0 5px 5px; -webkit-font-smoothing: antialiased; }

#jobs #details-header div.job-meta a { font-weight: 700; margin-right: 30px; }

#jobs #details-header div.job-meta a.apply { color: #5fcf80; float: right; font-size: 16px; margin-right: 0; }

#jobs #job-details .block { margin-bottom: 30px; }

#jobs #job-details em { font-style: italic; }

#jobs #job-details strong { font-weight: 700; }

#jobs #job-details p, #jobs #job-details ul, #jobs #job-details ol { color: #1a2126; font-size: 14px; line-height: 1.6; margin-bottom: 15px; }

#jobs #job-details ul { padding-left: 15px; padding-top: 5px; }

#jobs #job-details ul li { list-style: disc; margin-left: 15px; margin-bottom: 15px; }

#jobs #job-details .secondary-heading { padding-bottom: 15px; }

#jobs .global-message-container.preview .global-message { padding: 10px 40px 10px 40px; }

#jobs .global-message-container.preview p { padding: 15px 20px 0 15px; }

#jobs .global-message-container.preview .steps { left: 0; right: auto; top: 12px; }

#jobs .global-message-container.preview .steps li { color: #96cbf3; margin-left: 0; margin-right: 40px; }

#jobs .global-message-container.preview .steps li.selected { color: #fff; }

#jobs .global-message-container.preview .button-green { background-color: #67cf7c; margin-left: 10px; }

#jobs .global-message-container.preview .button-green:hover { background: #5bcb72; }

#jobs .global-message-container.preview .button-green:active { background: #54c96b; }

#jobs .global-message-container.preview .button-small { padding: 13px 15px !important; float: right; }

#jobs .contained.form-footer { box-sizing: border-box; }

#jobs .global-message-container.job-actions .global-message { padding: 10px 40px 10px 40px; }

#jobs .global-message-container.job-actions .button-green { background-color: #67cf7c; margin-left: 10px; }

#jobs .global-message-container.job-actions .button-green:hover { background: #5bcb72; }

#jobs .global-message-container.job-actions .button-green:active { background: #54c96b; }

#jobs .global-message-container.job-actions .button-small { padding: 13px 20px !important; }

#jobs .global-message-container.job-actions .back { color: #c1e4fe; display: inline-block; font-size: 16px; font-weight: 700; margin-top: 10px; -webkit-font-smoothing: antialiased; }

.chzn-container-single .chzn-search { margin-bottom: 5px !important; padding: 5px !important; }

@media screen and (max-width: 969px) { #details-header h1 { width: 100% !important; }
  #details-header img.company-logo { display: none !important; } }

@media screen and (max-width: 679px) { #details-header h1 { font-size: 23px !important; }
  .content-block .content-meta { height: auto; min-height: 140px; } }
#contact #help-form .message, #contact #help-form .honey-pot-field, #contact #help-form .error-message { display: none; }
#workspaces .active-maintenance .new-workspace { display: none; }

#workspaces .active-maintenance .workspace-table .workspace-capacity { margin-left: 0; padding-left: 0; }

#workspaces .active-maintenance .workspace-table .workspace-capacity:before { border-left: 0px; }

.workspaces__header.box-header { padding: 15px; }

.workspaces__header.box-header .grid-100, .workspaces__header.box-header .workspaces-bulk { display: flex; align-items: center; width: 100%; }

.workspaces__header.box-header .grid-100.hidden, .workspaces__header.box-header .workspaces-bulk.hidden { display: none; }

.workspace-capacity { width: calc(100% - 140px); display: flex; align-items: center; }

.workspace-capacity p { margin: 0 15px 0 0; }

.workspace-capacity .progress-container { width: calc(100% - 100px); }

.workspace-capacity.hidden { display: none; }

.workspaces-bulk-selected { font-size: 16px; }

.workspaces-bulk-buttons { margin-left: auto; }

.workspaces-bulk-checkmark { width: 47px; }

.workspaces-list__container.box-content { padding: 0 15px; }

.new-workspace { font-size: 16px; font-weight: 700; order: 3; height: 34px; padding: 4px 0; margin-left: auto; }

.new-workspace span.icon { margin: -2px 0 0 5px; }

.new-workspace svg { position: relative; top: 2px; left: 5px; fill: #326e99; }

.new-workspace:hover svg { fill: #303853; }

.workspace-table.limited_access .workspace-capacity { margin-left: -25px; }

.workspace-table.limited_access .new-workspace { display: none; }

.workspace-table .pagination { float: left; }

.workspace-table .pagination a, .workspace-table .pagination span { display: inline-block; font-size: 15px; }

.workspace-table .pagination .pagination-nav { color: #1a2126; font-weight: 700; padding: 10px; margin: -10px 10px -10px -10px; }

.workspace-table .pagination .pagination-nav:hover { color: #101417; }

.workspace-table .pagination .pagination-nav.disabled { color: #1a2126; opacity: .5; }

.workspace-table .pagination .pagination-nav.disabled:hover { color: #1a2126 !important; }

.workspace-table .pagination .page-number { color: #2b363e; }

@media screen and (min-width: 680px) { .workspace-table .pagination .page-number { margin-left: 20px; } }

@media screen and (max-width: 679px) { .workspace-table .pagination .page-number { display: none; margin: 0 5px; } }

.workspace-table .current-version { font-size: 13px; float: right; }

.workspace-table .current-version a { color: #2b363e; }

.workspace-table .modal { position: fixed; }

.workspace-item { display: flex; align-items: center; margin: 0 -15px; padding: 20px 15px 20px 15px; border-bottom: 1px solid #f0f2f4; position: relative; }

.workspace-item.selected-workspace { transition: background 0.2s; background: #f9fafa; }

.workspace-item-checkbox { margin-left: 15px; width: 45px; }

.workspace-item-name-container { flex-grow: 1; text-overflow: ellipsis; padding-right: 20px; max-width: calc(100% - 120px - 50px); }

@media screen and (min-width: 969px) { .workspace-item-name-container { max-width: calc(100% - 160px - 20% - 50px); } }

.workspace-item-type { width: 20%; }

@media screen and (max-width: 969px) { .workspace-item-type { width: 10%; } }

.workspace-item-type p { margin-bottom: 0; }

.workspace-item-name { font-size: 16px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; display: inline-block; overflow: hidden; display: block; transition: color .3s ease; }

.workspace-item--not-current .workspace-item-name { color: #c6ccd2; }

.workspace-item--created .workspace-item-name { color: #2b363e; }

.workspace-item--current .workspace-item-name { color: #384047; }

.workspace-item-meta { font-size: 14px; color: #2b363e; margin: 0; text-overflow: ellipsis; white-space: nowrap; display: inline-block; overflow: hidden; display: block; }

.workspace-item--current .workspace-item-meta { color: #2b363e; }

.workspace-item--not-current .workspace-item-meta { color: #c6ccd2; }

.workspace-item-single { margin-top: 4px; }

.workspace-item-single .workspace-item-meta { font-size: 12px; }

.workspace-item .workspace-actions { width: 110px; margin-left: auto; }

@media screen and (min-width: 680px) { .workspace-item .workspace-actions { width: 150px; } }

.workspace-item .workspace-actions-wrapper { display: inline-block; }

.workspace-item .workspace-fork, .workspace-item .workspace-settings, .workspace-item .workspace-delete { display: inline-block; position: relative; transition: opacity .15s ease-out; padding: 12px 8px 12px; }

.workspace-item .workspace-fork svg, .workspace-item .workspace-settings svg, .workspace-item .workspace-delete svg { display: inline-block; vertical-align: middle; width: 16px; height: 18px; fill: #8e969d; }

.workspace-item .workspace-fork:hover svg, .workspace-item .workspace-settings:hover svg, .workspace-item .workspace-delete:hover svg { fill: #6E7881; }

@media screen and (min-width: 969px) { .workspace-item .workspace-fork, .workspace-item .workspace-settings, .workspace-item .workspace-delete { padding: 12px 15px 12px; } }

.workspace-item.empty { border: none; }

.workspace-item.empty #no-results { width: 100%; }

.workspace-item.empty #no-results.empty-message { display: block; }

.deletion-cover { display: none; opacity: 1 !important; }

.deletion-cover .content { opacity: 1 !important; }

.deletion-cover p { padding-left: 20px; line-height: 0; }

.deletion-cover .loading-spinner { display: inline-block; top: 5px; left: -10px; width: 15px; height: 15px; }

.deletion-cover .loading-spinner span { width: 15px; height: 15px; }

@media screen and (max-width: 680px) { .deletion-cover .loading-spinner { display: block !important; } }

.item-cover { background: #fff; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: .9; transition: opacity .15s ease-out; z-index: 100; }

.item-cover:hover { opacity: 1; }

.item-cover:hover .content { opacity: 1; }

.item-cover .content { opacity: 0; transition: opacity .15s ease-out; -ms-transform: translatey(-15px); -moz-transform: translatey(-15px); -webkit-transform: translatey(-15px); transform: translatey(-15px); top: 50%; position: absolute; left: 10px; }

.workspace-table .item-cover .content { left: 20px; }

.item-cover .content p { color: #101417; margin: 0; }

.item-cover .content .icon { margin-right: 10px; }

#launch-workspace-wizard .downtime { color: #8d9aa5; }

#launch-workspace-wizard .downtime p { display: block; }

#launch-workspace-wizard .downtime p strong { display: block; font-weight: 700; }

#launch-workspace-wizard .secondary-anchor { color: #1a2126; float: right; font-size: 14px; line-height: 1.5; display: inline-block; margin-top: 20px; font-weight: 700; }

#launch-workspace-wizard .secondary-anchor .icon-chevron-left { margin-right: 2px; position: relative; top: -1px; }

#launch-workspace-wizard .secondary-anchor:hover { color: #101417; }

#launch-workspace-wizard .secondary-anchor:hover .icon-chevron-left { background: url("/assets/icons/icon-global-863d50621b14046616519056916ec67ac8a680fcb1c994a27ec6c1a92e9569d5.svg") no-repeat -111px -53px; }

#launch-workspace-wizard .step-new, #launch-workspace-wizard .step-existing { display: block; height: 200px; text-align: center; font-size: 16px; font-weight: 700; color: #1a2126; padding-top: 60px; box-sizing: border-box; border-radius: 5px; box-shadow: inset 0 0 0 3px #c6ccd2; opacity: .4; }

#launch-workspace-wizard .step-new span, #launch-workspace-wizard .step-existing span { margin: 0 auto 20px; display: block; }

#launch-workspace-wizard .step-new:hover, #launch-workspace-wizard .step-existing:hover { opacity: 1; }

#launch-workspace-wizard .step-existing .icon-workspace { width: 40px; height: 34px; background-size: 100% auto; }

#launch-workspace-wizard .existing-workspace-list { height: 300px; margin: 2px 2px; box-shadow: 0 0 0 2px #f0f2f4; border-radius: 5px; }

#launch-workspace-wizard .existing-workspace-list ul { height: 300px; width: 100%; padding: 0 15px 15px 0; overflow: scroll; }

#launch-workspace-wizard .existing-workspace-list ul li { width: 100%; padding-right: 15px; }

#launch-workspace-wizard .existing-workspace-list ul h3 { font-size: 15px; color: #1a2126; }

#launch-workspace-wizard .existing-workspace-list ul p { margin-bottom: 0; }

#launch-workspace-wizard .existing-workspace-list ul a { display: block; padding: 15px; margin-right: -15px; border-bottom: 1px solid #f0f2f4; transition: background .15s ease; }

#launch-workspace-wizard .existing-workspace-list ul a:hover { background: #f9fafa; }

#launch-workspace-wizard .existing-workspace-list ul .selected a { background: #8d9aa5 !important; transition: background .15s ease; }

#launch-workspace-wizard .existing-workspace-list ul .selected h3, #launch-workspace-wizard .existing-workspace-list ul .selected p { color: #fff !important; transition: color .15s ease; }

#launch-workspace-wizard .default-wrapper { margin: 2px; box-shadow: 0 0 0 2px #f0f2f4; border-radius: 5px; padding: 15px; }

#launch-workspace-wizard .default-wrapper h3 { font-size: 15px; color: #1a2126; }

#launch-workspace-wizard .default-wrapper p { margin-bottom: 0; }

#launch-workspace-wizard .existing-workspace .form-item { margin: 0 15px 15px; }

#launch-workspace-wizard div.form-element, #new_workspace div.form-element { width: auto !important; }

#launch-workspace-wizard div.form-element span, #new_workspace div.form-element span { width: auto !important; overflow: hidden; }

.global-nav .icon-workspaces { position: relative; }

.workspace-tour-step-placeholder { display: none; }

.tour-active .workspace-tour-step-placeholder { display: block; }

#workspaces .active-tour-step.workspace-example { border-bottom: none; }

#workspaces .active-tour-step.workspace-capacity:before { display: none; }

.changelog-article { border-bottom: 1px solid #f0f2f4; margin-bottom: 40px; padding-bottom: 25px; }

.changelog-article:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.changelog-article-header, .changelog-article-entry { max-width: 720px; }

.changelog-article-header { margin-bottom: 25px; }

.changelog-article-title { margin-bottom: 5px; }

.changelog-article-timestamp { color: #2b363e; }

.changelog-article-entry h4 { font-size: 16px; margin-bottom: 15px; color: #1a2126; }

.changelog-article-entry p { margin-bottom: 25px; }

.changelog-article-entry p:last-child { margin-bottom: 15px; }

.changelog-article-entry ul, .changelog-article-entry ol { margin-bottom: 25px; margin-left: 20px; list-style: initial; }

.changelog-article-entry ul:last-child, .changelog-article-entry ol:last-child { margin-bottom: 15px; }

.changelog-article-entry li { margin-bottom: 10px; }

.changelog-article-entry li:last-child { margin-bottom: none; }

.workspace-trial .secondary-heading { padding-bottom: 0; }

.workspace-trial .secondary-heading h1 { font-size: 24px; margin: 30px 0 5px; }

.workspace-trial .secondary-heading p { margin: 0 0 15px 0; font-size: 15px; }

.workspace-trial .editor-item { margin: 0; padding: 12px; border-top: 1px solid #e8ebed; line-height: 20px; }

.workspace-trial .editor-item-anchor { color: #1a2126; display: block; font-weight: 500; }

.workspace-trial .editor-item-anchor:hover { color: #050708; }

.workspace-trial .editor-item-anchor:hover .editor-item-icon { fill: #050708; }

.workspace-trial .editor-item-icon { float: right; width: 20px; height: 20px; margin: 0 0 0 15px; fill: #2b363e; }

.no-workspaces-message { width: auto; margin-top: 9px; display: block; float: none; background: #f9fafa; padding: 30px 20px 30px 20px; border-radius: 5px; text-align: center; }

.no-workspaces-message:before, .no-workspaces-message:after { content: " "; display: table; }

.no-workspaces-message:after { clear: both; }

.no-workspaces-message p { text-align: center; font-size: 15px; padding: 0 0 10px 0; color: #2b363e; }

.no-workspaces-message .button { width: auto; margin: 0 auto; }
.about-survey h3 { margin-bottom: 30px; font-size: 18px; }

.about-survey .form-element, .about-survey .form-item, .about-survey select, .about-survey span { width: 400px; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; }

.about-survey .radio { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; margin-bottom: 25px; }

.about-survey .form-element { width: 395px !important; }

.about-survey fieldset { padding: 0 0 15px; margin-bottom: 28px; }
/* Overriding OneTrust styling */
/* Notification Center and Banner */
#optanon #optanon-popup-top .optanon-close, .optanon-alert-box-wrapper .optanon-alert-box-corner-close a { background-image: url(/assets/icons/icon-close-light-cf6c635db756f5906aede485630a6b208afd1da03a32cbd5265981a2b6b7cfcb.svg); background-size: 14px 14px; width: 14px; height: 14px; right: 10px; }

#optanon-popup-top a:hover, .optanon-alert-box-corner-close a:hover { background-image: url(/assets/icons/icon-close-base-2d4215591945eb81eb5cb5c819ce3259d18b1f32fccc8ddadd2a44703c3d5458.svg) !important; }

/* Banner */
.optanon-alert-box-wrapper { box-shadow: 0px -2px 5px 0px rgba(45, 51, 57, 0.05); }

.optanon-alert-box-wrapper * { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

.optanon-alert-box-wrapper .optanon-alert-box-corner-close { display: none; }

.optanon-alert-box-wrapper .optanon-button-more .optanon-alert-box-button-middle a:before { top: -2px; }

.optanon-alert-box-wrapper .optanon-alert-box-button { margin-right: 20px; }

.optanon-alert-box-wrapper .optanon-alert-box-button-middle { border-radius: 4px; }

.optanon-alert-box-wrapper .optanon-button-more .optanon-alert-box-button-middle a { color: #40484a !important; font-weight: 500; border: none !important; padding-bottom: none !important; }

.optanon-alert-box-wrapper .optanon-button-more .optanon-alert-box-button-middle a:before { color: #40484a !important; }

/* Notification Center */
#optanon { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

#optanon *, #optanon div, #optanon span, #optanon ul, #optanon li, #optanon a, #optanon p { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

#optanon.modern #optanon-popup-top, #optanon.modern #optanon-popup-body-left-shading { border-top-left-radius: 4px; }

#optanon fieldset input:checked + label { background-color: #5fcf80 !important; }

#optanon .menu-item-on, #optanon .menu-item-off { background: none !important; }

#optanon #optanon-popup-wrapper { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #40484a !important; font-weight: 500; }

#optanon #optanon-popup-wrapper .optanon-status-on { color: #303853 !important; }

#optanon #optanon-popup-wrapper .optanon-white-button-middle { border-radius: 4px; }

#optanon #optanon-popup-wrapper .optanon-white-button-middle a { font-size: 14px; }

#optanon #optanon-popup-body h3 { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #40484a !important; font-weight: 500; width: 74% !important; font-size: 16px !important; }

#optanon #optanon-popup-body h2 { color: #40484a; font-weight: 500; margin-top: 2px; font-size: 20px !important; }

#optanon #optanon-popup-bottom { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }

#optanon #optanon-popup-bottom-logo:before { color: #1a2126 !important; }

#optanon #optanon-popup-bottom-logo:after { color: #1a2126 !important; border-bottom: 0px !important; }

#optanon #optanon-menu li p a { color: #1a2126 !important; font-weight: 500 !important; }

#optanon #optanon-popup-top { border-top-right-radius: 4px; }

#optanon #optanon-popup-top .optanon-close { top: 10px; }

#optanon #optanon-menu li p { margin: 0px 0px 0px 20px; }

#optanon #optanon-menu a:hover { color: #40484a !important; }

#optanon #optanon-menu .menu-item-selected a { color: #40484a !important; }

#optanon #optanon-popup-more-info-bar p { font-weight: 500 !important; }

/* Cookie Policy Page */
/* Cookie Policy Page: Cookie Settings Link */
.optanon-clear { clear: both; }

.optanon-show-settings-middle { border: 2px solid #e8ebed !important; border-radius: 4px !important; padding: 12px 15px 5px 15px !important; }

.optanon-show-settings-middle:hover { border-color: #bdc6cb !important; }

.optanon-show-settings-right { display: none; }

.optanon-show-settings-left { display: none; }

/* Cookie Policy Page: Cookie Table */
#optanon-cookie-policy .optanon-show-settings-popup-wrapper { clear: both; }

#optanon-cookie-policy .optanon-cookie-policy-group:not(:first-of-type) { padding-top: 40px; }

#optanon-cookie-policy .optanon-cookie-policy-group-cookies-list li { overflow-wrap: break-word; }

#optanon-cookie-policy .optanon-cookie-policy-group-name { font-weight: 500; color: #40484a; }

#optanon-cookie-policy .optanon-cookie-policy-right { width: 50%; overflow-wrap: break-word; }

#optanon-cookie-policy .optanon-cookie-policy-left { overflow-wrap: break-word; }

#optanon-cookie-policy .optanon-cookie-policy-subgroup-table-header { font-weight: 500; padding-top: 15px; color: #1a2126; }

#optanon-cookie-policy .optanon-cookie-policy-subgroup-cookies-list { margin-top: 15px; list-style: none !important; padding-left: 0px; }

#optanon-cookie-policy .optanon-cookie-policy-subgroup-name { margin-top: 15px; margin-bottom: 5px; }

#optanon-cookie-policy .optanon-cookie-policy-subgroup-description { font-size: 13px; font-style: italic; }
@media screen and (min-width: 970px) { div#error-404 { padding: 40px 0; min-height: 250px; } }

@media screen and (max-width: 969px) { div#error-404 { padding: 40px; text-align: center; } }

div#error-404 h1 { font-size: 36px; font-weight: 700; color: #384047; }

@media screen and (min-width: 970px) { div#error-404 h1 { margin-bottom: 5px; } }

@media screen and (max-width: 969px) { div#error-404 h1 { margin-bottom: 20px; } }

div#error-404 p { font-size: 18px; line-height: 28px; margin-bottom: 5px; color: #1a2126; }

div#error-404 p a { font-weight: 700; color: #101417; }

@media screen and (min-width: 970px) { div#error-404 span.icon-mtf-error { float: left; margin-right: 20px; } }

@media screen and (max-width: 969px) { div#error-404 span.icon-mtf-error { margin: 0 0 30px; } }

div#static-error { padding: 40px; text-align: center; }

div#static-error span.icon-mtf-error { margin: 0 0 30px; }

div#static-error h1 { font-size: 36px; font-weight: 700; color: #384047; margin-bottom: 20px; }

div#static-error p { font-size: 18px; line-height: 28px; margin-bottom: 5px; color: #1a2126; }

div#static-error p a { font-weight: 700; color: #101417; }
@charset "UTF-8";
.degrees-index-form.form-inverse .error-message { padding: 12px 18px; background: #ed5a5a; border-radius: 0 0 4px 4px; color: white !important; }

.degrees-index-form-item { margin: 0; }

.degrees-index-form-col { margin: 0 10px; }

.degrees-index-form-input { font-size: 16px; height: 50px; border-radius: 4px !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); border: none !important; margin: 0 0 10px !important; background: #fff; transition: opacity 300ms 0s ease; }

.degrees-index-form-input:not(:focus) { opacity: 0.9; }

.field_with_errors .degrees-index-form-input { box-shadow: 0 0 0 2px #ed5a5a; opacity: 1; }

.degrees-index-form-input-group { margin: 0 -5px; }

.degrees-index-form-input-group:before, .degrees-index-form-input-group:after { content: " "; display: table; }

.degrees-index-form-input-group:after { clear: both; }

.degrees-index-form-input-col { padding: 0 5px; float: left; width: 50%; }

.degrees-index-form-button { background: #387BC9; border-color: #387BC9; width: 100%; }

.degrees-index-form .error-message { margin: -14px -2px 10px; padding-top: 10px; border-radius: 0 0 4px 4px; }

@media screen and (min-width: 900px) { .degrees-index-mission .degrees-index-heading-container { text-align: left; width: 47.5%; float: left; margin-right: 2.5%; } }

.degrees-index-degrees .degrees-index-heading-container, .degrees-index-features .degrees-index-heading-container, .degrees-index-teachers .degrees-index-heading-container, .degrees-index-enroll .degrees-index-heading-container, .degrees-index-faqs .degrees-index-heading-container { max-width: 760px; margin: 0 auto 60px; text-align: center; }

.degrees-index-hero-content .degrees-index-heading, .degrees-index-enroll .degrees-index-heading { color: #fff; }

.degrees-index-hero-content .degrees-index-heading { font-size: 40px; line-height: 50px; margin: 0; }

.form-showing .degrees-index-hero-content .degrees-index-heading { line-height: 48px; }

@media screen and (min-width: 680px) { .degrees-index-hero-content .degrees-index-heading { max-width: 500px; } }

.degrees-index-mission .degrees-index-heading, .degrees-index-degrees .degrees-index-heading, .degrees-index-features .degrees-index-heading, .degrees-index-teachers .degrees-index-heading, .degrees-index-enroll .degrees-index-heading, .degrees-index-faqs .degrees-index-heading { margin-top: 0; font-size: 30px; margin-bottom: 20px; line-height: 1.3; }

.degrees-index-features-content .degrees-index-sub-heading, .degrees-index-features-network .degrees-index-sub-heading, .degrees-index-faqs .degrees-index-sub-heading { font-size: 26px; margin-bottom: 20px; margin-top: 0; }

.degrees-index-hero-content .degrees-index-description, .degrees-index-enroll .degrees-index-description { color: rgba(255, 255, 255, 0.9); }

.degrees-index-hero-content .degrees-index-description { font-size: 20px; line-height: 30px; margin-top: 20px; }

.form-showing .degrees-index-hero-content .degrees-index-description { margin-top: 10px; }

@media screen and (min-width: 680px) { .degrees-index-hero-content .degrees-index-description { max-width: 400px; } }

.degrees-index-features .degrees-index-description, .degrees-index-degrees .degrees-index-description, .degrees-index-enroll .degrees-index-description { font-size: 18px; line-height: 34px; }

.degrees-index-mission .degrees-index-description, .degrees-index-features-network-content .degrees-index-description, .degrees-index-features-projects .degrees-index-description, .degrees-index-features-code .degrees-index-description, .degrees-index-features-curriculum .degrees-index-description, .degrees-index-teachers .degrees-index-description, .degrees-index-faqs .degrees-index-description { font-size: 16px; line-height: 30px; }

.degrees-index-mission .degrees-index-description, .degrees-index-degrees .degrees-index-description, .degrees-index-features .degrees-index-description, .degrees-index-teachers .degrees-index-description { color: #2b363e; }

.degrees-index-cta-button { background: #387BC9; border-color: #387BC9; color: #fff; font-size: 16px; line-height: 42px; height: 46px; padding: 0 30px; margin: 15px 0; z-index: 5; }

.degrees-index-hero-content .degrees-index-cta-button { height: 50px; line-height: 46px; }

.degrees-index-cta-link { font-weight: 500; font-size: 16px; }

.degrees-index-cta-link-arrow { fill: #3f8abf; vertical-align: middle; margin-top: -1px; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease; }

.degrees-index-cta-link:hover svg { margin-left: 5px; fill: #326e99; }

.degrees-index-hero { position: relative; background: #384047 url(/assets/views/degrees/index/degrees-hero-7d4053a3513bf0e2ccf0fcb4dd0b41f2362f25027b3e8f571661c8be7268ec8c.jpg) no-repeat !important; position: relative !important; height: auto; margin: 0 !important; padding: 0 !important; border-bottom: none !important; }

@media screen and (max-width: 679px) { .degrees-index-hero { background-size: cover !important; } }

@media screen and (min-width: 680px) { .degrees-index-hero { background-size: cover !important; } }

@media screen and (max-width: 679px) { .degrees-index-hero { background-position: 80% 30% !important; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .degrees-index-hero { background-position: 55% top !important; } }

@media screen and (min-width: 970px) { .degrees-index-hero { background-position: center 30% !important; } }

.degrees-index-hero:before { content: ""; opacity: 0.5; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: -webkit-linear-gradient(left, #0B1523, #0b1523 40%, rgba(11, 21, 35, 0)); background-image: linear-gradient(to right, #0B1523, #0b1523 40%, rgba(11, 21, 35, 0)); z-index: 0; }

.degrees-index-hero:after { content: ""; z-index: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: -webkit-linear-gradient(rgba(12, 23, 36, 0), rgba(12, 23, 36, 0) 60%, #0C1724); background-image: linear-gradient(rgba(12, 23, 36, 0), rgba(12, 23, 36, 0) 60%, #0C1724); }

.degrees-index-hero-content { position: relative; z-index: 3; }

@media screen and (max-width: 679px) { .degrees-index-hero-content { max-width: 440px; } }

@media screen and (min-width: 680px) { .degrees-index-hero-content { max-width: 390px; } }

@media screen and (min-width: 680px) { .degrees-index-hero-content { text-align: left; } }

@media screen and (max-width: 679px) { .degrees-index-hero-content { margin: 0 auto; } }

@media screen and (max-width: 679px) { .degrees-index-hero-content-container { margin: 40px auto; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .degrees-index-hero-content-container { margin: 60px auto; } }

@media screen and (min-width: 970px) { .degrees-index-hero-content-container { margin: 100px auto; } }

.form-showing .degrees-index-hero-content-container { margin: 0 auto; }

.degrees-index-hero-quote { position: relative; z-index: 5; }

.degrees-index-hero-quote:before, .degrees-index-hero-quote:after { content: " "; display: table; }

.degrees-index-hero-quote:after { clear: both; }

.degrees-index-hero-quote-hr { border-color: rgba(255, 255, 255, 0.1); margin: 30px 0; }

.degrees-index-hero-quote-content { background: transparent; border: none; color: #fff; font-size: 20px; position: relative; padding: 0; }

@media screen and (max-width: 679px) { .degrees-index-hero-quote-content { margin-bottom: 30px; } }

@media screen and (min-width: 680px) { .degrees-index-hero-quote-content { margin-left: 245px; font-size: 16px; top: 35px; } }

.degrees-index-hero-quote-content:before { content: "“"; opacity: 0.1; font-size: 144px; margin-left: -36px; position: absolute; top: -60px; left: 50%; }

.degrees-index-hero-quote-cite { font-size: 16px; }

@media screen and (min-width: 680px) { .degrees-index-hero-quote-cite { font-size: 14px; } }

.degrees-index-hero-quote-img { max-width: 100%; border-radius: 4px; }

@media screen and (max-width: 679px) { .degrees-index-hero-quote-img { width: 230px; max-width: initial; } }

.degrees-index-hero-quote-img-container { text-align: center; max-width: 215px; margin: 0 auto; }

@media screen and (max-width: 679px) { .degrees-index-hero-quote-img-container { border-radius: 100%; width: 100px; height: 100px; overflow: hidden; } }

@media screen and (min-width: 680px) { .degrees-index-hero-quote-img-container { width: 215px; float: left; } }

.degrees-index-mission { background: #fff; }

@media screen and (max-width: 900px) { .degrees-index-mission { text-align: center; } }

.degrees-index-mission .container { padding-top: 80px; padding-bottom: 80px; }

@media screen and (min-width: 900px) { .degrees-index-mission-image { float: right; width: 47.5%; margin-left: 2.5%; } }

.degrees-index-mission-image img { max-width: 100%; border-radius: 4px; margin-bottom: -30px; }

@media screen and (max-width: 900px) { .degrees-index-mission-image img { max-width: 70%; margin: 0 auto 30px; } }

@media screen and (max-width: mobile-max) { .degrees-index-mission-image img { max-width: 80%; } }

.degrees-index-degrees { background: #edeff0; text-align: center; }

.degrees-index-degrees .container { padding-top: 80px; padding-bottom: 80px; }

.degrees-index-degrees-grid-item { text-align: center; background: #fff; border-radius: 4px; margin-bottom: 30px; padding: 30px 20px; position: relative; }

@media screen and (min-width: 680px) and (max-width: 969px) { .degrees-index-degrees-grid-item { height: 260px; width: 48.5%; float: left; margin: 15px 1.5%; }
  .degrees-index-degrees-grid-item:nth-child(odd) { margin-left: 0; }
  .degrees-index-degrees-grid-item:nth-child(even) { margin-right: 0; } }

@media screen and (min-width: 970px) { .degrees-index-degrees-grid-item { height: 375px; width: 33%; float: none; margin: 15px 1.5%; } }

@media screen and (min-width: 970px) { .degrees-index-degrees-grid-item { height: 275px; } }

.degrees-index-degrees-grid-item-title { margin-top: 0; }

.degrees-index-degrees-grid-item-description { margin-top: 15px; font-size: 14px; }

.degrees-index-degrees-grid-item-button { border-radius: 4px; color: #fff; font-weight: 500; padding: 10px 15px; font-size: 14px; line-height: 24px; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; transition: background-color 0.3s ease; }

@media screen and (min-width: 680px) { .degrees-index-degrees-grid-item-button { position: absolute; right: 30px; bottom: 30px; left: 30px; } }

.degrees-index-degrees-grid-item-button:hover { background-color: #387BC9; color: #fff; }

.degrees-index-degrees-grid-item-textlink { font-weight: 500; white-space: nowrap; display: block; padding-top: 10px; }

.degrees-index-degrees-grid-item-textlink svg { vertical-align: middle; fill: #2b363e; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; }

.degrees-index-degrees-grid-item-link { color: #2b363e; }

.degrees-index-degrees-grid-item-link:hover { color: #1a2126; }

.degrees-index-degrees-grid-item-link:hover .degrees-index-degrees-grid-item-textlink svg { margin-left: 5px; fill: #1a2126; }

.degrees-index-features { background: #fff; }

.degrees-index-features .container { padding-top: 80px; padding-bottom: 80px; }

.degrees-index-features-image { margin-bottom: 30px; }

.degrees-index-features-image img { border-radius: 4px; max-width: 100%; }

@media screen and (max-width: 900px) { .degrees-index-features-image img { max-width: 70%; margin: 0 auto; } }

@media screen and (max-width: 679px) { .degrees-index-features-image img { max-width: 80%; } }

.degrees-index-features-curriculum, .degrees-index-features-projects, .degrees-index-features-code, .degrees-index-features-network-content { margin: 80px 0; }

.degrees-index-features-curriculum:before, .degrees-index-features-curriculum:after, .degrees-index-features-projects:before, .degrees-index-features-projects:after, .degrees-index-features-code:before, .degrees-index-features-code:after, .degrees-index-features-network-content:before, .degrees-index-features-network-content:after { content: " "; display: table; }

.degrees-index-features-curriculum:after, .degrees-index-features-projects:after, .degrees-index-features-code:after, .degrees-index-features-network-content:after { clear: both; }

@media screen and (max-width: 900px) { .degrees-index-features-curriculum, .degrees-index-features-projects, .degrees-index-features-code, .degrees-index-features-network-content { text-align: center; } }

@media screen and (min-width: 900px) { .degrees-index-features-content, .degrees-index-features-image { width: 47.5%; }
  .degrees-index-features-projects .degrees-index-features-content, .degrees-index-features-projects .degrees-index-features-image { float: right; }
  .degrees-index-features-code .degrees-index-features-content, .degrees-index-features-curriculum .degrees-index-features-content, .degrees-index-features-code .degrees-index-features-image, .degrees-index-features-curriculum .degrees-index-features-image { float: left; } }

@media screen and (min-width: 900px) { .degrees-index-features-code .degrees-index-features-image, .degrees-index-features-curriculum .degrees-index-features-image { margin-right: 5%; }
  .degrees-index-features-projects .degrees-index-features-image { margin-left: 5%; } }

.degrees-index-features-network { text-align: center; }

.degrees-index-features-network-github { height: 50px; }

.degrees-index-features-network-github img { height: 30px; }

.degrees-index-features-network-slack { height: 50px; }

.degrees-index-features-network-slack img { height: 40px; }

.degrees-index-features-network-content { margin: 60px 0 0; }

@media screen and (max-width: 679px) { .degrees-index-features-network-content { margin-top: -30px; } }

@media screen and (max-width: 679px) { .degrees-index-features-network-content-item:last-child { margin-bottom: 30px; } }

.degrees-index-features-network-illustration { margin: 0 auto 30px; width: 120px; height: 120px; }

.degrees-index-smallquote { background: transparent; border: none; text-align: left; padding: 0 0 0 70px; margin: 30px 0 0 0; font-size: 14px; font-style: italic; font-weight: 300; color: #2b363e; position: relative; }

@media screen and (max-width: 900px) { .degrees-index-smallquote { text-align: center; padding: 0; } }

.degrees-index-smallquote img { display: block; margin: 0 auto 15px; width: 50px; height: 50px; }

@media screen and (min-width: 900px) { .degrees-index-smallquote img { position: absolute; left: 0; } }

.degrees-index-smallquote cite { font-size: 14px; }

.degrees-index-teachers { background: #edeff0; overflow: hidden; }

.degrees-index-teachers .container { padding-top: 80px; padding-bottom: 80px; }

@media screen and (min-width: 680px) { .degrees-index-teachers .profiles { width: 415%; } }

@media screen and (min-width: 680px) { .degrees-index-teachers .profile { width: 11.5%; margin: 0 1% 30px 0; } }

@media screen and (max-width: 679px) { .degrees-index-teachers .profile > a figure figcaption { margin-right: 55px; }
  .degrees-index-teachers .profile > a figure figcaption .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .degrees-index-teachers .profile > a figure img { width: 50px; height: 50px; } }

.degrees-index-enroll { background: #387BC9; }

.degrees-index-enroll .container { padding-top: 80px; padding-bottom: 80px; }

.degrees-index-enroll-box { background: rgba(255, 255, 255, 0.15); margin: 30px auto 0; border-radius: 4px; max-width: 800px; }

@media screen and (min-width: 970px) { .degrees-index-enroll-box { padding: 30px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .degrees-index-enroll-box { padding: 20px; } }

@media screen and (max-width: 679px) { .degrees-index-enroll-box { padding: 15px; } }

.degrees-index-enroll-list { list-style: none; margin: -15px 0 30px; }

.degrees-index-enroll-list:before, .degrees-index-enroll-list:after { content: " "; display: table; }

.degrees-index-enroll-list:after { clear: both; }

.degrees-index-enroll-item { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 17px 0; line-height: 18px; font-size: 14px; }

@media screen and (max-width: 679px) { .degrees-index-enroll-item { padding: 17px 0 17px 32px; } }

@media screen and (min-width: 680px) { .degrees-index-enroll-item { width: 48.5%; margin: 0 1.5%; float: left; }
  .degrees-index-enroll-item:nth-child(odd) { margin-left: 0; }
  .degrees-index-enroll-item:nth-child(even) { margin-right: 0; } }

.degrees-index-enroll-icon { fill: #fff; margin-right: 10px; vertical-align: middle; position: relative; top: -1px; }

@media screen and (max-width: 679px) { .degrees-index-enroll-icon { margin-left: -32px; } }

.degrees-index-enroll-degrees-list { margin: 0; }

.degrees-index-enroll-degrees-list:before, .degrees-index-enroll-degrees-list:after { content: " "; display: table; }

.degrees-index-enroll-degrees-list:after { clear: both; }

.degrees-index-enroll-degrees-item { list-style: none; margin-bottom: 15px; }

@media screen and (min-width: 680px) { .degrees-index-enroll-degrees-item { width: 48.5%; margin: 0 1.5% 15px; float: left; }
  .degrees-index-enroll-degrees-item:nth-child(n+5) { margin-bottom: 0; }
  .degrees-index-enroll-degrees-item:nth-child(odd) { margin-left: 0; }
  .degrees-index-enroll-degrees-item:nth-child(even) { margin-right: 0; } }

@media screen and (max-width: 679px) { .degrees-index-enroll-degrees-item:last-child { margin-bottom: 0; } }

.degrees-index-enroll-degrees-button { width: 100%; padding: 0 15px; height: 50px; line-height: 46px; }

@media screen and (max-width: 679px) { .degrees-index-enroll-degrees-button { height: auto; } }

.degrees-index-enroll-degrees-button .topic-title { float: left; margin: 0; color: #387BC9; font-size: 14px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

.degrees-index-enroll-degrees-button .topic-pricing { float: right; font-size: 14px; color: rgba(56, 123, 201, 0.5); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

@media screen and (max-width: 679px) { .degrees-index-enroll-degrees-button .topic-pricing { margin-top: -20px; } }

@media screen and (max-width: 679px) { .degrees-index-enroll-degrees-button .topic-title, .degrees-index-enroll-degrees-button .topic-pricing { display: block; float: none; } }

.degrees-index-enroll-degrees-button:hover, .degrees-index-enroll-degrees-button:focus { border-color: #fff; }

.degrees-index-enroll-degrees-button:hover .topic-html, .degrees-index-enroll-degrees-button:focus .topic-html { color: #3659a2; }

.degrees-index-enroll-degrees-button:hover .topic-html + .topic-pricing, .degrees-index-enroll-degrees-button:focus .topic-html + .topic-pricing { color: rgba(54, 89, 162, 0.5); }

.degrees-index-enroll-degrees-button:hover .topic-javascript, .degrees-index-enroll-degrees-button:focus .topic-javascript { color: #3659a2; }

.degrees-index-enroll-degrees-button:hover .topic-javascript + .topic-pricing, .degrees-index-enroll-degrees-button:focus .topic-javascript + .topic-pricing { color: rgba(54, 89, 162, 0.5); }

.degrees-index-enroll-degrees-button:hover .topic-ios, .degrees-index-enroll-degrees-button:focus .topic-ios { color: #30826C; }

.degrees-index-enroll-degrees-button:hover .topic-ios + .topic-pricing, .degrees-index-enroll-degrees-button:focus .topic-ios + .topic-pricing { color: rgba(48, 130, 108, 0.5); }

.degrees-index-enroll-degrees-button:hover .topic-android, .degrees-index-enroll-degrees-button:focus .topic-android { color: #30826C; }

.degrees-index-enroll-degrees-button:hover .topic-android + .topic-pricing, .degrees-index-enroll-degrees-button:focus .topic-android + .topic-pricing { color: rgba(48, 130, 108, 0.5); }

.degrees-index-enroll-degrees-button:hover .topic-java, .degrees-index-enroll-degrees-button:focus .topic-java { color: #008297; }

.degrees-index-enroll-degrees-button:hover .topic-java + .topic-pricing, .degrees-index-enroll-degrees-button:focus .topic-java + .topic-pricing { color: rgba(0, 130, 151, 0.5); }

.degrees-index-enroll-degrees-button:hover .topic-python, .degrees-index-enroll-degrees-button:focus .topic-python { color: #008297; }

.degrees-index-enroll-degrees-button:hover .topic-python + .topic-pricing, .degrees-index-enroll-degrees-button:focus .topic-python + .topic-pricing { color: rgba(0, 130, 151, 0.5); }

.degrees-index-enroll .plan-cta { position: relative; bottom: auto; left: auto; right: auto; }

.degrees-index-enroll .plan-cta .button { font-size: 16px; }

.degrees-index-faqs { background: #edeff0; }

.degrees-index-faqs .container { padding-top: 60px; padding-bottom: 60px; }

.degrees-index-faqs hr { margin: 0 auto 60px; }

.degrees-index-faqs h5 { margin-top: 0; }

.degrees-index-faqs ul:last-child, .degrees-index-faqs p:last-child { margin-bottom: 0; }

.degrees-index-faqs-container:before, .degrees-index-faqs-container:after { content: " "; display: table; }

.degrees-index-faqs-container:after { clear: both; }

@media screen and (min-width: 680px) { .degrees-index-faqs-half { width: 48.5%; margin: 0 1.5% 30px; float: left; }
  .degrees-index-faqs-half:first-child { margin-left: 0; }
  .degrees-index-faqs-half:last-child { margin-right: 0; } }

.degrees-index-faqs-button { display: block; font-weight: 500; padding: 15px; text-align: center; }

@media screen and (min-width: 680px) { .degrees-index-faqs-button { float: left; width: 31.3%; margin: 0 1.5% 15px; }
  .degrees-index-faqs-button:nth-child(3n+1) { margin-left: 0; }
  .degrees-index-faqs-button:nth-child(3n) { margin-right: 0; } }

#techdegree-intro-video-modal .box { padding: 0; }

#techdegree-intro-video-modal video { border-radius: 4px 4px 0 0; }

.degrees-price-selection { background-color: #387BC9; text-align: left; }

.degrees-price-selection-heading { margin-bottom: 60px; margin-top: 30px; color: #fff; }

.degrees-price-selection .container .row { margin: 0 auto; }

.degrees-price-selection .container, .degrees-price-selection .row.td-pricing { max-width: 1200px; }

.degrees-price-selection .row.td-pricing h2 { margin-bottom: 30px; }

.degrees-price-selection .degrees-index-enroll-degrees h3 { color: #fff; margin-bottom: 30px; }
.degrees-show-section { padding: 15px 0; }

.degrees-show-heading-container { text-align: center; max-width: 760px; margin: 0 auto 30px; }

.degrees-show-heading { margin: 0; line-height: 1.2; }

@media screen and (min-width: 680px) { .degrees-show-heading { font-size: 26px; } }

@media screen and (max-width: 679px) { .degrees-show-heading { font-size: 20px; } }

.degrees-show-projects .degrees-show-heading, .degrees-show-stats .degrees-show-heading, .degrees-show-ctas .degrees-show-heading { color: #fff; }

.degrees-show-sub-heading { margin: 7px 0 0; font-size: 16px; }

.degrees-show-ctas .degrees-show-sub-heading { color: #fff; opacity: 0.88; }

.degrees-show-description { line-height: 1.7; color: #2b363e; }

@media screen and (min-width: 680px) { .degrees-show-description { font-size: 16px; margin: 15px 0 0; } }

@media screen and (max-width: 679px) { .degrees-show-description { font-size: 14px; margin: 10px 0 0; } }

.degrees-show-projects .degrees-show-description, .degrees-show-stats .degrees-show-description, .degrees-show-ctas .degrees-show-description { color: #fff; opacity: 0.88; }

.degrees-show-skills .degrees-show-description, .degrees-show-teachers .degrees-show-description { color: #1a2126; }

.degrees-show-hero { padding: 40px 0; margin: 0; background-image: none !important; }

.degrees-show-hero-title { color: #fff; font-size: 26px; line-height: 36px; margin: 0 0 15px; }

.degrees-show-hero-subtitle { font-size: 16px; line-height: 16px; color: #fff; opacity: .8; margin: 0 0 10px; }

.degrees-show-hero-copy { color: #fff; font-size: 16px; line-height: 26px; margin: 0 auto 30px; max-width: 760px; }

.degrees-show-hero-copy-salary { white-space: nowrap; }

.degrees-show-hero-copy span { opacity: .75; }

@media screen and (max-width: 679px) { .degrees-show-hero-button { display: block; width: auto; margin: 10px 0 0 !important; } }

.degrees-show-testimonials { background: #fff; }

.degrees-show-testimonials .quote { text-align: left; margin: 0 0 30px; }

.degrees-show-testimonials .quote cite { border-top: 2px solid #fff; padding: 15px 30px 0; font-size: 14px; color: #2b363e; margin: 0 -30px -15px; }

.degrees-show-testimonials .quote cite:before { content: ""; }

.degrees-show-testimonials .quote cite strong { display: block; color: #101417; }

.degrees-show-testimonials-image { border-radius: 50%; width: 44px; height: 44px; float: right; }

.degrees-show-projects { background: #384047; }

.degrees-show-projects-button { display: block; margin: 0 auto; }

.degrees-show-projects-button:before { content: "View "; }

.degrees-show-projects-show .degrees-show-projects-button:before { content: "Hide "; }

.degrees-show-projects-list { margin: 30px -15px 0; display: none; }

.degrees-show-projects-show .degrees-show-projects-list { display: block; }

@media screen and (min-width: 750px) { .degrees-show-projects-card { width: 50%; } }

.degrees-show-projects-card.card-description-show { width: 100%; transition: width 300ms 0s ease; }

.degrees-show-projects-card-box { cursor: pointer; transition: box-shadow 300ms 0s ease; }

.degrees-show-projects-card:not(.card-description-show):hover .degrees-show-projects-card-box { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }

.degrees-show-projects-card-description { line-height: 22px; }

.card-description-show .degrees-show-projects-card-description { -webkit-line-clamp: 1000 !important; max-height: 10000px !important; }

.degrees-show-projects-card-description p { font-size: inherit; line-height: inherit; margin: 0 0 15px; }

.degrees-show-projects-card-actions { display: block !important; left: 30px !important; }

.card-description-show .degrees-show-projects-card-actions { display: none !important; }

.degrees-show-projects-browser { max-width: 520px; margin: 0 auto 30px; }

.degrees-show-projects-show .degrees-show-projects-browser { display: none; }

.degrees-show-projects-browser-header { background: #535f69; height: 34px; border-radius: 4px 4px 0 0; padding: 10px 6px 6px; position: relative; }

.degrees-show-projects-browser-border { height: 4px; border-radius: 4px 4px 0 0; position: absolute; top: 0; right: 0; left: 0; }

.degrees-show-projects-browser-button { width: 12px; height: 12px; border-radius: 50%; float: left; border: 2px solid #384047; background: #70808e; margin-left: 5px; position: relative; top: 2px; }

.degrees-show-projects-browser-content { background: #edeff0; padding: 15px; }

.degrees-show-projects-browser-content:before, .degrees-show-projects-browser-content:after { content: " "; display: table; }

.degrees-show-projects-browser-content:after { clear: both; }

.degrees-show-projects-browser-content-title { height: 10px; border-radius: 10px; width: 50%; margin: 0 auto 15px; background: #637d90; }

.degrees-show-projects-browser-avatar { display: block; margin: 0 auto 10px; }

.degrees-show-projects-browser-project { background: #fff; padding: 3%; float: left; width: 47%; border-radius: 2px; margin: 1.5%; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07); }

.degrees-show-projects-browser-project-title { height: 6px; border-radius: 6px; width: 55%; }

.degrees-show-projects-browser-project-description-1, .degrees-show-projects-browser-project-description-2, .degrees-show-projects-browser-project-description-3 { background: #6c879b; height: 4px; border-radius: 4px; margin: 4px 0 0; }

.degrees-show-projects-browser-project-description-1 { width: 97%; }

.degrees-show-projects-browser-project-description-2 { width: 60%; }

.degrees-show-projects-browser-project-description-3 { width: 38%; }

.degrees-show-projects-browser-footer { background: #535f69; border-radius: 0 0 4px 4px; height: 22px; position: relative; }

.degrees-show-projects-browser-footer-icon { fill: #9ba6b0; position: absolute; right: 6px; bottom: 6px; }

.degrees-show-skills { background: #f6f9fa; }

.degrees-show-skills-avatar { border-radius: 50%; display: block; margin: 0 auto; opacity: 0; width: 78px; height: 78px; -ms-transform: translatey(-100px); -moz-transform: translatey(-100px); -webkit-transform: translatey(-100px); transform: translatey(-100px); }

.animate-donuts .degrees-show-skills-avatar { opacity: 1; transition: opacity 300ms 0s ease, transform 500ms 0s cubic-bezier(0.5, 1.5, 0.5, 1); -ms-transform: translatey(0); -moz-transform: translatey(0); -webkit-transform: translatey(0); transform: translatey(0); }

.degrees-show-skills-chart { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.degrees-show-skills-chart-container { position: relative; margin: 0 auto 30px; display: block; width: 158px; height: 158px; padding: 40px; }

.degrees-show-skills-chart-container:after { content: " "; background: rgba(0, 0, 0, 0.04); height: 10px; position: absolute; right: 10%; bottom: -30px; left: 10%; border-radius: 50%; opacity: 0; }

.animate-donuts .degrees-show-skills-chart-container:after { opacity: 1; transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 500ms; }

.degrees-show-skills-chart .ct-chart-donut { display: block; stroke-linecap: round; }

.degrees-show-skills-chart .ct-slice-donut { opacity: 0; }

.animate-donuts .degrees-show-skills-chart .ct-slice-donut { stroke-dashoffset: 0 !important; transition: stroke-dashoffset 2s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 1s; opacity: 1; }

.degrees-show-stats-list { margin: 0 auto; max-width: 700px; padding: 10px 0 40px; }

.degrees-show-stats-list:before, .degrees-show-stats-list:after { content: " "; display: table; }

.degrees-show-stats-list:after { clear: both; }

.degrees-show-stats-count { font-size: 24px; display: block; color: #fff; }

.degrees-show-stats-icon { float: left; fill: #fff; margin-right: 15px; }

.degrees-show-stats-item { color: rgba(255, 255, 255, 0.75); float: left; font-weight: 700; font-size: 13px; line-height: 1.2; list-style: none; text-align: left; width: 16.6666666667%; padding: 0 15px; width: 33%; }

@media screen and (min-width: 680px) { .degrees-show-stats-item { padding: 0 40px; } }

@media screen and (min-width: 970px) { .degrees-show-stats-item { padding: 0 50px; } }

.degrees-show-stats-item:nth-child(-n+3) { border-bottom: 2px solid rgba(255, 255, 255, 0.15); padding-bottom: 20px; }

.degrees-show-stats-item:nth-child(n+4) { padding-top: 20px; }

@media screen and (max-width: 679px) { .degrees-show-stats-item { width: 50%; }
  .degrees-show-stats-item:nth-child(-n+4) { border-bottom: 2px solid rgba(255, 255, 255, 0.15); padding-bottom: 20px; }
  .degrees-show-stats-item:nth-child(n+3) { padding-top: 20px; } }

.degrees-show-stats-button { display: block; margin: 0 auto; }

.degrees-show-stats-button:before { content: "View "; }

.degrees-show-stats-show .degrees-show-stats-button:before { content: "Hide "; }

.degrees-show-stats-activities { position: relative; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; margin: 30px 0 0; display: none; }

.degrees-show-stats-activities:before, .degrees-show-stats-activities:after { content: " "; display: table; }

.degrees-show-stats-activities:after { clear: both; }

.degrees-show-stats-activities:before, .degrees-show-stats-activities:after { content: " "; display: table; }

.degrees-show-stats-activities:after { clear: both; }

@media screen and (min-width: 680px) { .degrees-show-stats-activities { padding: 15px; } }

.degrees-show-stats-show .degrees-show-stats-activities { display: block; }

.degrees-show-stats-activities .degree-activity-item { padding: 0 15px; line-height: 10px; list-style: none; }

.degrees-show-stats-activities .degree-activity-item:nth-child(odd) { clear: left; }

@media screen and (min-width: 680px) { .degrees-show-stats-activities .degree-activity-item { float: left; width: 50%; }
  .degrees-show-stats-activities .degree-activity-item:nth-last-child(2) .degree-activity-content { border: none !important; } }

@media screen and (max-width: 679px) { .degrees-show-stats-activities .degree-activity-content { padding: 0 15px; } }

.degrees-show-stats-activities .degree-activity-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0; margin-bottom: 0; margin-right: 0; }

.degrees-show-stats-activities .degree-activity-actions { display: none; }

.degrees-show-teachers { background: #edeff0; }

.degrees-show-ctas-box { background: rgba(255, 255, 255, 0.15); margin: 30px auto 0; border-radius: 4px; max-width: 550px; }

.degrees-show-ctas-box:before, .degrees-show-ctas-box:after { content: " "; display: table; }

.degrees-show-ctas-box:after { clear: both; }

@media screen and (min-width: 970px) { .degrees-show-ctas-box { padding: 30px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .degrees-show-ctas-box { padding: 20px; } }

@media screen and (max-width: 679px) { .degrees-show-ctas-box { padding: 15px; } }

.degrees-show-ctas-box > div { display: inline-block; }

.degrees-show-ctas-list { list-style: none; margin: -15px 0 30px; }

.degrees-show-ctas-item { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 17px 0; line-height: 18px; font-size: 14px; }

.degrees-show-ctas-icon { fill: #fff; margin-right: 10px; vertical-align: middle; position: relative; top: -1px; }

.degrees-show-ctas-full-label { color: #fff; margin: 0 0 30px; }

.logged-in .degrees-show-ctas-form { float: left; }

.degrees-show-ctas-input { background: #fff; width: 100%; margin-bottom: 20px; }

@media screen and (min-width: 680px) { .degrees-show-ctas-button.primary { display: block; margin: 0 auto; } }

.degrees-show-ctas-button.primary:hover, .degrees-show-ctas-button.primary:focus { background: #fff; border-color: #fff; }

@media screen and (min-width: 680px) { .degrees-show-ctas-button { width: 235px; } }

@media screen and (max-width: 679px) { .degrees-show-ctas-button { display: block; width: auto; } }

.degrees-show-ctas-link { color: #fff; display: block; text-align: center; font-weight: 700; margin-top: 40px; font-size: 14px; }

.degrees-show-ctas-link:hover { color: #fff; }

.degrees-show-ctas-link-arrow { fill: #fff; vertical-align: middle; transition: margin-left 300ms 0s ease; margin-left: 2px; }

a:hover .degrees-show-ctas-link-arrow { margin-left: 7px; }

.degrees-show-ctas-contactus { color: #fff; margin-top: 15px; text-align: center; margin-bottom: 0; }

.degrees-show-ctas-contactus-link { color: #fff; font-weight: 700; font-size: 14px; }

.degrees-show-ctas-contactus-link:hover { color: #fff; }
.degrees-pricing header { margin: 0; background: #387BC9; }

@media screen and (max-width: 767px) { .degrees-pricing header { padding-top: 130px; padding-bottom: 20px; } }

@media screen and (min-width: 768px) { .degrees-pricing header { padding: 130px 0 0 0; } }

.degrees-pricing header h1 { position: relative; color: white; margin-bottom: 40px; z-index: 2; }

.degrees-pricing .degrees-index-enroll-degrees { margin-bottom: 60px; }

.degrees-controller .row.td-pricing { max-width: 1200px; padding-bottom: 30px; }

.degrees-controller .plan-panel { margin-bottom: 30px; }

.degrees-controller .plan-panel-header h2 { margin-top: 0; margin-bottom: 30px; }

@media screen and (max-width: 940px) { .degrees-controller .plan-panel-header h2 { font-size: 30px; } }

.degrees-controller .plan-panel-features li { font-size: 14px; }

.degrees-controller .plan-panel-features .check-circle-icon, .degrees-controller .plan-panel-features .cross-circle-icon { top: -2px; }

.degrees-controller .plan-panel-subtle { position: relative; z-index: 2; text-align: left; margin-bottom: 50px !important; }

@media screen and (max-width: 767px) { .degrees-controller .plan-panel-subtle { text-align: center; } }

@media screen and (min-width: 768px) { .degrees-controller .plan-panel-subtle { padding-left: 30px; } }

.degrees-controller .plan-panel-subtle ul { list-style: none; font-size: 14px; margin: 0 0 20px 0; padding: 0; }

.degrees-controller .plan-panel-subtle ul li { line-height: 1.8; }

.degrees-controller .plan-panel-subtle a { font-size: 14px; font-weight: 700; }

@media screen and (max-width: 768px) { .degrees-controller .plan-panel-subtle a { display: block; margin-bottom: 40px; } }

.degrees-controller .plan-panel-subtle ul, .degrees-controller .plan-panel-subtle a, .degrees-controller .plan-panel-subtle h4 { color: #fff; }

.degrees-controller .plan-panel-prominant .plan-panel-features { overflow: hidden; padding-top: 2px; margin-bottom: 20px; }

.degrees-controller .plan-panel-prominant .plan-panel-features li { width: 50%; float: left; }

.degrees-controller .degrees-selection-back { text-align: center; margin-bottom: 50px; }

.degrees-controller .degrees-selection-back svg { width: 10px; height: 10px; top: -1; margin-right: 3px; }

.degrees-controller footer::before { display: none; }
.action-container { margin-bottom: 15px; position: relative; z-index: 1; }
.pages-support-hero { text-align: left; overflow: visible; }

.application-layout .pages-support-hero { background: #f9fafa; margin-top: 70px; }

.marketing-layout .pages-support-hero .container { padding-top: 0; padding-bottom: 0; }

.pages-support-hero-title { margin: 0 0 40px; }

.pages-support-hero-cta { margin: 20px 0 40px; }

.pages-support-faq { border-radius: 4px; }

@media screen and (min-width: 970px) { .pages-support-faq { padding: 30px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .pages-support-faq { padding: 20px; } }

@media screen and (max-width: 679px) { .pages-support-faq { padding: 15px; } }

@media screen and (min-width: 970px) { .pages-support-faq { margin-bottom: 30px; } }

@media screen and (min-width: 680px) and (max-width: 969px) { .pages-support-faq { margin-bottom: 20px; } }

@media screen and (max-width: 679px) { .pages-support-faq { margin-bottom: 15px; } }

.marketing-layout .pages-support-faq { border: solid 2px #e9f0f3; }

.application-layout .pages-support-faq { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06); background: #fff; }

.pages-support-faq-heading { margin: 70px 0 20px; }

.pages-support-faq-section-heading { margin: 0 0 35px; }

@media screen and (min-width: 680px) { .pages-support-faq-section-heading { font-size: 26px; } }

@media screen and (max-width: 679px) { .pages-support-faq-section-heading { font-size: 22px; } }

.pages-support-faq-title { margin: 0 0 10px; line-height: 1.5; }

@media screen and (min-width: 680px) { .pages-support-faq-title { font-size: 16px; } }

@media screen and (max-width: 679px) { .pages-support-faq-title { font-size: 14px; } }

.hero .pages-support-faq-title { font-size: 18px; }

.pages-support-faq-description { margin-bottom: 0; line-height: 1.5; }

@media screen and (min-width: 680px) { .pages-support-faq-description { font-size: 16px; } }

@media screen and (max-width: 679px) { .pages-support-faq-description { font-size: 14px; } }

.hero .pages-support-faq-description { color: #050708; }
.member-assignment__info .grid-container, .member-assignment__info .grid-60 { display: flex; align-items: center; }

.member-assignment__info h2 { margin-top: 4px; }

.member-assignment__info p { font-size: 12px; margin-top: 4px; margin-bottom: 0px; }

.member-assignment .box-header { padding-bottom: 0; }

.member-assignment h3 { margin-bottom: 15px; }

.member-assignment__avatar { float: left; margin-right: 12px; height: 48px; }

.member-assignment__avatar .avatar-mask { fill: #fff; }

.member-assignment__status { font-size: 16px; margin-top: 2px; }

.member-assignment__progress.box-content { padding-top: 0; padding-bottom: 15px; height: 60px; }

.member-assess-link { background: rgba(198, 204, 210, 0.5); border-radius: 12px; color: #101417; display: inline-block; font-size: 14px; font-weight: 700; line-height: 14px; padding: 4px 8px; position: relative; margin-right: 20px; }

.member-assess-link:hover, .member-assess-link.current-activity { background: rgba(198, 204, 210, 0.8); color: #050708; }

.member-assess-link.current-activity::after { content: url(/assets/views/assessments/arrow-b814a057b749a4c8105668941049bb6ac9a4f7713357e3862eca229ba607a224.svg); width: 28px; height: 11px; position: absolute; z-index: 10; bottom: -24px; left: 36px; }

.member-assess-link.assessment--exists, .member-assess-link.assessment--opted-out { background: #5fcf80; color: white; }

.member-assess-link::before { content: " "; height: 2px; width: 12px; border-radius: 20px; background: #c6ccd2; position: absolute; top: calc(50% - 2px); right: -16px; cursor: default; }

.member-assess-link.assessment--exists { background: #5fcf80; color: white; transition: background 0.2s; }

.member-assess-link.assessment--exists.current-activity, .member-assess-link.assessment--exists:hover { background: #34ad58; }

.member-assign__courselink-container { width: calc(100% - 50px); overflow-x: hidden; overflow-y: hidden; height: 80px; margin-left: -6px; }

.member-assign__container-scroll { width: 6000px; display: flex; align-items: center; padding-left: 6px; }

.member-assign__container-scroll.draggable:hover { cursor: ew-resize; }

.member-assign__courselinks { display: inline-block; margin-top: 7px; }

.member-assign__courselinks .member-assess__course { margin-left: 16px; position: relative; display: inline-block; }

.member-assign__courselinks .member-assess__course svg { width: 22px; fill: #5fcf80; }

.member-assign__courselinks .member-assess__course:hover svg { fill: #34ad58; }

.member-assign__courselinks .member-assess__course:hover .member-assign__progress-circle { background: rgba(198, 204, 210, 0.8); }

.member-assign__courselinks .member-assess__course:hover .member-assign__progress-circle::before { width: 30px; content: " "; height: 30px; border: 2px solid #c7ccd2; border-radius: 100%; position: absolute; left: -4px; top: -4px; }

.member-assign__courselinks .member-assess__course::before { content: " "; height: 2px; width: 12px; border-radius: 20px; background: #c6ccd2; position: absolute; top: calc(50% - 5px); left: -16px; cursor: default; }

.member-assign__courselinks .member-assess__course:first-of-type { margin-left: 0; }

.member-assign__courselinks .member-assess__course:first-of-type::before { display: none; }

.member-assign__progress-circle { background: rgba(198, 204, 210, 0.5); border-radius: 11px; display: inline-block; height: 22px; width: 22px; transition: background 0.2s; }

.member-assess__course.current-activity .member-assign__progress-circle { background: rgba(198, 204, 210, 0.8); }

.member-assess__course.current-activity .member-assign__progress-circle::before { width: 30px; content: " "; height: 30px; border: 2px solid #c7ccd2; border-radius: 100%; position: absolute; left: -4px; top: -4px; }

.member-assess__course.current-activity svg { fill: #4bc970; }

.member-assess__course.current-activity::after { content: url(/assets/views/assessments/arrow-b814a057b749a4c8105668941049bb6ac9a4f7713357e3862eca229ba607a224.svg); width: 28px; height: 11px; position: absolute; z-index: 10; bottom: -12px; left: -3px; }

.member-assign__toggle { background: white; position: absolute; right: 0; top: 5px; height: 40px; padding-right: 22px; padding-left: 10px; transition: fill 0.1s; }

.member-assign__toggle a { padding: 5px 2px 5px 2px; }

.member-assign__toggle svg.left-chevron-icon, .member-assign__toggle svg.right-chevron-icon { display: inline-block; margin-top: 5px; height: 18px; fill: rgba(198, 204, 210, 0.3); }

.member-assign__toggle a svg.left-chevron-icon, .member-assign__toggle a svg.right-chevron-icon { fill: #c6ccd2; }

.member-assign__toggle a svg.left-chevron-icon:hover, .member-assign__toggle a svg.right-chevron-icon:hover { fill: #8d9aa5; }

.member-assignment__header { font-size: 18px !important; }

.member-assignment__section { font-size: 14px !important; color: #2b363e !important; font-weight: 400 !important; margin-bottom: 0 !important; }

.member-assignment__los { margin-top: 4px; }

.member-assignment__los a { margin-top: 12px; }

.member-assignment__los li { text-indent: -18px; margin-left: 18px; margin-bottom: 6px; line-height: 1.4em; }

.member-assignment__los .button { margin-left: 18px; }

@media screen and (min-width: 969px) { .member-assignment__los--columns { columns: 2; -webkit-columns: 2; -moz-columns: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } }

.member-assignment__los--all { max-width: 700px; }

.member-assignment__los--all h2 { margin-bottom: 20px; margin-top: 5px; }

.lo-status-icon { width: 13px; margin-right: 7px; }

.lo-status-icon svg { fill: #5fcf80; margin-right: -2px; }

.lo-status-icon svg.close-icon { width: 9px; height: 9px; fill: #ed5a5a; }

.lo-key { background: #edeff0; border-radius: 4px; padding: 10px; margin-bottom: 20px; }

a.los-view-all { color: #3f8abf !important; font-weight: 400; }

.lo-summary { font-weight: 700; margin-top: -10px; }

.mixed-box .box-footer.secondary.member-assignment__details { padding-top: 30px; padding-bottom: 30px; margin-top: -18px; }

.mixed-box .box-footer.secondary.member-assignment__details p { font-size: 15px; color: #101417; margin-bottom: 10px; font-weight: 700; margin-bottom: 20px; }

.mixed-box .box-footer.secondary.member-assignment__details .member-assignment__note { color: #2b363e; font-weight: 400 !important; font-size: 13px; }

.member-assignment__progress-bar { background: #e8ebed; border-radius: 6px; margin: 10px 0; height: 5px; width: 100%; }

.member-assignment__progress-bar--current { background: #55616c; }

.member-assignment__assess-activity { background: white; padding: 20px 20px 0 20px; border-radius: 4px; border-bottom: 2px solid #e8ebed; margin-bottom: 14px; margin-top: 6px; border-left: 6px solid #5fcf80; }

.member-assignment__assess-activity .member-assignment__header { margin-left: 26px; position: relative; }

.member-assignment__assess-activity .member-assignment__header::before { content: " "; width: 15px; height: 15px; position: absolute; left: -26px; background-image: url(/assets/icons/icon-check-green-faec10638882505831ed86d06ebab0f0c3d492a3003bfb6bb82104b5ccaca823.svg); background-repeat: no-repeat; background-size: contain; top: 8px; }

.member-assignment__assess-activity.assess-failed { border-left-color: #ed5a5a; }

.member-assignment__assess-activity.assess-failed .member-assignment__header::before { background-image: url(/assets/icons/icon-close-red-ff14cb3ffead8620306f60b0020de96d1e902e6ba0ad539f96d33a5f76cdab7d.svg); width: 12px; height: 12px; left: -25px; }

.member-assignment__assess-note { background: #edeff0; width: calc(100% + 40px); font-size: 14px !important; font-weight: 400 !important; margin: -20px -20px -8px -20px; padding: 10px 20px 8px 20px; border-radius: 4px 4px 0 0; }

.member-assignment__empty { display: flex; align-items: center; justify-content: center; min-height: 200px; font-weight: 700; }

.member-assignment .member-assignment__progress { transition: padding-bottom 0.2s, border-radius 0.2s; }

.member-assignment .member-assess__course.current-activity::after { transition: opacity 0.2s; }

.member-assignment .member-assign__expand { position: absolute; right: 20px; top: 12px; }

.member-assignment .member-assign__expand span { font-size: 12px; font-weight: 600; margin-right: 4px; color: #2b363e; }

.member-assignment .member-assign__expand svg { transform: rotate(180deg); transition: transform 0.2s; fill: #2b363e; width: 10px; }

.member-assignment .member-assign__expand:hover span { color: #1a2126; }

.member-assignment .member-assign__expand:hover svg { fill: #1a2126; }

.member-assignment:not(.expanded) .member-assign__toggle { display: none; }

.member-assignment:not(.expanded) .member-assign__expand svg { transform: rotate(0deg); }

.member-assignment:not(.expanded) .member-assignment__progress { border-radius: 0 0 4px 4px; padding-bottom: 20px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); }

.member-assignment:not(.expanded) .member-assignment__details { display: none; }

.member-assignment:not(.expanded) .member-assess__course.current-activity .member-assign__progress-circle { background: rgba(198, 204, 210, 0.5); }

.member-assignment:not(.expanded) .member-assess__course.current-activity .member-assign__progress-circle::before { display: none; }

.member-assignment:not(.expanded) .member-assess__course.current-activity svg { fill: #5fcf80; }

.member-assignment:not(.expanded) .member-assess__course.current-activity::after { opacity: 0; }
.assessment-cta-unjoined { padding-top: 20px; padding-bottom: 20px; min-height: 86px; display: flex; align-items: center; }

.assessment-cta-unjoined img { position: absolute; width: 40px; margin-top: -6px; -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }

.assessment-cta-unjoined p { margin-left: 64px; margin-bottom: 0; font-size: 14px; }
.assessment-callout { color: #fff; vertical-align: middle; }

.assessment-callout .button { float: right; margin-top: 10px; margin-right: 10px; }

@media screen and (max-width: 679px) { .assessment-callout .button { margin-bottom: 5px; margin-top: 5px; } }

@media screen and (max-width: 380px) { .assessment-callout .button { display: none; } }

.assessment-home-info { position: absolute; height: 24px; top: 50%; left: 30px; fill: white; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

@media screen and (max-width: 679px) { .assessment-home-info { left: 20px; } }

.assessment-home-info span { position: relative; }

.stage-progress-sections { height: 60px; width: calc(100% - 295px); position: absolute; left: 55px; }

@media screen and (max-width: 680px) { .stage-progress-sections { height: 46px; } }

@media screen and (max-width: 680px) { .stage-progress-sections { display: none; } }

.section-progress { height: 100%; float: left; top: 50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); position: relative; text-align: left; }

.section-progress-bar { width: calc(100% - 42px); display: inline-block; position: absolute; top: 50%; margin-left: 10px; }

.section-progress-filled, .section-progress-empty { display: inline-block; height: 0; position: absolute; left: 0; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); border-bottom: 2px solid white; border-radius: 3px; }

.section-progress-filled { transition: width 0.3s ease; }

.section-progress-empty { width: 100%; opacity: 0.2; }

.section-progress-icon { display: block; position: absolute; top: 50%; right: 0; }

.section-progress-icon svg { transform: translateY(-50%); height: 22px; width: 22px; fill: white; }

.section-progress-icon.circle svg { fill: white; opacity: 0.4; }
.assessment-results { border-radius: 5px; background: #384047; display: block; text-align: center; position: relative; }

.assessment-results svg#confetti-bg { z-index: 0; opacity: 0.2; height: 400px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.assessment-results svg#confetti-bg ellipse, .assessment-results svg#confetti-bg path, .assessment-results svg#confetti-bg polygon, .assessment-results svg#confetti-bg rect { -webkit-animation: fanFair 10s ease-in-out 0s infinite; -moz-animation: fanFair 10s ease-in-out 0s infinite; animation: fanFair 10s ease-in-out 0s infinite; }

.assessment-results svg#confetti-bg polygon, .assessment-results svg#confetti-bg rect { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; animation-delay: 3s; }

.assessment-results .assessment-callout.stage-progress-container .stage-progress-list.has-topic-background-color { background-color: #384047 !important; }

.assessment-results .assessment-callout.stage-progress-container .stage-progress-list.has-topic-background-color .assessment-home-info { opacity: 0.6; }

.assessment-results .assessment-callout.stage-progress-container .stage-progress-list.has-topic-background-color:after { background: rgba(0, 0, 0, 0.13); border-radius: 4px; content: "Beta" !important; font-size: 14px; font-weight: 700; padding: 4px 12px; position: absolute; right: 20px; top: 50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

.assessment-results-header { margin: 40px 0; padding: 0px 30px; }

@media screen and (max-width: 679px) { .assessment-results-header { margin-top: 25px; margin-bottom: 40px; } }

.assessment-results-header h2 { color: white; line-height: 1.4em; margin: 0 auto; max-width: 800px; }

.assessment-results-header h3 { color: #c6ccd2; font-size: 16px; font-weight: 400; margin: 0 auto; margin-bottom: 20px; margin-top: 8px; max-width: 90%; }

.assessment-results__topic-summary { color: #f8f8f8; font-size: 16px; margin-bottom: 12px; text-align: center; padding-top: 30px; }

.assessment-course-result { margin-bottom: 24px; }

.assessment-course-result__header { align-items: center; background: white; border-radius: 4px; display: flex; width: 100%; transition: background 0.2s; }

.assessment-course-result__header:hover { cursor: pointer; background: #f9fafa; }

.assessment-course-result__header:hover .assessment-course-result__review { background: #ffc633; }

.assessment-course-result__header:hover .assessment-course-result__chevron { fill: #3f454a; }

.assessment-course-result__icon { background: #edeff0; border-radius: 4px 0 0 4px; display: flex; height: 100px; flex: 0 0 80px; transition: background 0.2s; }

.topic-ai .assessment-course-result__icon { background: #733A88; }

.topic-back-end .assessment-course-result__icon { background: #008297; }

.topic-data .assessment-course-result__icon { background: #9F4B84; }

.topic-design .assessment-course-result__icon { background: #4a4290; }

.topic-experimental .assessment-course-result__icon { background: #733a88; }

.topic-front-end .assessment-course-result__icon { background: #3659a2; }

.topic-fundamentals .assessment-course-result__icon { background: #9b3b5a; }

.topic-mobile .assessment-course-result__icon { background: #30826C; }

.topic-internal .assessment-course-result__icon { background: #55616c; }

.topic-foundations .assessment-course-result__icon { background: #004e61; }

.topic-undefined .assessment-course-result__icon { background: #55616c; }

.topic-college-credit .assessment-course-result__icon { background: #3887c8; }

.topic-no-code .assessment-course-result__icon { background: #31AF7F; }

.topic-security .assessment-course-result__icon { background: #409BE9; }

.topic-game-development .assessment-course-result__icon { background: #856fc4; }

.topic-treehouse-resources .assessment-course-result__icon { background: #5fcf80; }

.topic-coding-for-kids .assessment-course-result__icon { background: #F36C27; }

.assessment-course-result__icon svg { align-items: center; justify-content: center; fill: white; margin: auto; height: 32px; width: 32px; }

@media screen and (max-width: 679px) { .assessment-course-result__icon { flex: 0 0 44px; height: 80px; }
  .assessment-course-result__icon svg { width: 22px; } }

.assessment-course-result.assessment-course-fail .assessment-course-result__icon { background: #edeff0 !important; }

.assessment-course-result__info { margin-left: 20px; margin-right: auto; }

.assessment-course-result__info h2 { margin-bottom: 3px; }

.assessment-course-result__info p { margin-bottom: 0px; }

@media screen and (max-width: 679px) { .assessment-course-result__info { margin-left: 15px; }
  .assessment-course-result__info h2 { font-size: 16px; line-height: 1.2em; } }

.assessment-course-result__review { background: #ffd466; border-radius: 4px; color: #384047; font-weight: 700; line-height: 1em; padding: 6px 10px; transition: background 0.2s; }

@media screen and (max-width: 679px) { .assessment-course-result__review { font-size: 14px; } }

.assessment-course-result__percentage { font-size: 14px; font-weight: 700; background: #edeff0; border-radius: 4px; padding: 2px 10px 2px 10px; }

.assessment-course-result__percentage svg { margin-right: 0px; height: 12px; fill: #5fcf80; }

@media screen and (max-width: 679px) { .assessment-course-result__percentage { display: none; } }

.assessment-course-result__percentage .status-dot { width: 8px; height: 8px; border-radius: 100%; background: #ffd466; display: inline-block; margin-right: 2px; }

.assessment-course-result__chevron { align: right; margin-right: 30px; margin-left: 20px; fill: #6E7881; }

@media screen and (max-width: 679px) { .assessment-course-result__chevron { margin-right: 15px; margin-left: 10px; } }

.assessment-course-result.expanded .assessment-course-result__header { border-radius: 4px 4px 0 0; }

.assessment-course-result.expanded .assessment-course-result__icon { border-radius: 4px 0 0 0; }

.assessment-course-result.expanded .assessment-course-result__chevron { -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.assessment-course-result__content { background: #edeff0; border-radius: 0 0 4px 4px; border-top: 1px solid #e8ebed; padding: 20px 20px 10px 85px; }

.assessment-course-result__content.grid-container { margin: 0; }

@media screen and (max-width: 679px) { .assessment-course-result__content { padding: 10px 0; }
  .assessment-course-result__content h3 { font-size: 14px; } }

.assessment-course-result__description { padding-bottom: 20px; }

.assessment-results__topics-header { font-size: 16px; color: white; font-weight: 700; margin-top: 50px; }

.assessment-results__footer { background: #323a40 !important; border-radius: 0 0 5px 5px; padding: 10px 20px; text-align: right; width: 100%; }

.assessment-results__footer a { color: #1a2126; display: inline-block; font-weight: 700; }

@media screen and (max-width: 679px) { .assessment-results__footer a.button { display: block; margin-bottom: 10px; margin-right: 0px; } }

.assessment-results-course__container { margin: 0px 20px 20px 20px; position: relative; text-align: left; z-index: 10; }

.assessment-course-result__questions svg g path { fill: #c6ccd2; }

.assessment-results-course__question .box-header { border-bottom: 1px solid #edeff0; color: #2b363e; padding: 12px 30px; }

.assessment-results-course__question .box-content { padding: 0; }

.assessment-results-course__question .box-content .quiz-question-text { padding: 12px 30px 0px 30px; }

.assessment-results-course__question .box-content .quiz-question-text p:last-of-type { margin-bottom: 6px; }

.assessment-results-course__question .box-content .quiz-correct-answer { border-left: 4px solid #5fcf80; padding: 12px 30px 12px 26px; }

.assessment-results-course__question .highlight { font-size: 14px; font-family: "monoco", courier, monospace, "Helvetica Neue", Helvetica, Arial, sans-serif; background: #31383e; padding: 12px 15px; border-radius: 5px; margin-bottom: 10px; overflow-x: scroll; }

.assessment-results-course__question .highlight pre { color: #edeff0; }

.assessment-results-course__question .text-fill-in-blank.with-answer { border-bottom: 2px solid #55616c; border-bottom-color: #55616c; padding: 0px 2px 2px 2px; margin-right: 4px; }

.assessment-results-course__question .quiz-correct-answer .text-fill-in-blank.with-answer { border-bottom-color: #5fcf80; }

.assessment-results-course__question .box-footer { border-top: 1px solid #edeff0; padding: 12px 30px 12px 26px; border-left: 4px solid #ed5a5a; }

.assessment-results-course__question .mixed-box .box-footer .quiz-your-answer p { margin-bottom: 10px; }

.assessment-results-course__question .quiz-skipped-question p { font-style: italic; }
.assessments-loading-container { width: 100%; border-radius: 4px; height: 160px; background-color: white; padding: 0px; margin-bottom: 0px; }

.assessments-loading-container .assessments-loading-color { width: 100%; height: 60px; border-radius: 4px 4px 0px 0px; background-color: #55616c; }

.topic-ai .assessments-loading-container .assessments-loading-color { background-color: #733A88; }

.topic-back-end .assessments-loading-container .assessments-loading-color { background-color: #008297; }

.topic-data .assessments-loading-container .assessments-loading-color { background-color: #9F4B84; }

.topic-design .assessments-loading-container .assessments-loading-color { background-color: #4a4290; }

.topic-experimental .assessments-loading-container .assessments-loading-color { background-color: #733a88; }

.topic-front-end .assessments-loading-container .assessments-loading-color { background-color: #3659a2; }

.topic-fundamentals .assessments-loading-container .assessments-loading-color { background-color: #9b3b5a; }

.topic-mobile .assessments-loading-container .assessments-loading-color { background-color: #30826C; }

.topic-internal .assessments-loading-container .assessments-loading-color { background-color: #55616c; }

.topic-foundations .assessments-loading-container .assessments-loading-color { background-color: #004e61; }

.topic-undefined .assessments-loading-container .assessments-loading-color { background-color: #55616c; }

.topic-college-credit .assessments-loading-container .assessments-loading-color { background-color: #3887c8; }

.topic-no-code .assessments-loading-container .assessments-loading-color { background-color: #31AF7F; }

.topic-security .assessments-loading-container .assessments-loading-color { background-color: #409BE9; }

.topic-game-development .assessments-loading-container .assessments-loading-color { background-color: #856fc4; }

.topic-treehouse-resources .assessments-loading-container .assessments-loading-color { background-color: #5fcf80; }

.topic-coding-for-kids .assessments-loading-container .assessments-loading-color { background-color: #F36C27; }

#assessment div.assessment-course-title { margin-bottom: 10px; color: #2b363e; }

@media screen and (max-width: 680px) { #assessment div.assessment-course-title { font-size: 13px; } }

.assessment-checkpoint { padding-bottom: 20px !important; }

.assessment-checkpoint-mark { position: absolute; left: 30px; top: 30px; }

.assessment-checkpoint-mark svg { width: 70px; height: 70px; padding: 0px; fill: #5fcf80; }

@media screen and (max-width: 680px) { .assessment-checkpoint-mark { top: 60px; left: 20px; }
  .assessment-checkpoint-mark svg { width: 40px; height: 40px; } }

.assessment-checkpoint-body { margin-left: 100px; }

@media screen and (max-width: 680px) { .assessment-checkpoint-body { margin-left: 0px; }
  .assessment-checkpoint-body p { margin-left: 55px; } }

.assessment-checkpoint-body h1 { margin-bottom: 10px; line-height: 1.3em; font-size: 24px; margin-top: 2px; }

.assessment-checkpoint-body h1 em { font-weight: 600; }

@media screen and (max-width: 680px) { .assessment-checkpoint-body h1 { font-size: 20px; margin-left: 55px; } }

@media screen and (max-width: 679px) { #assessment .assessment-button-skip { width: 100%; display: block; } }

.track-assessment-modal-icon { -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); width: 60px; margin-top: -16px; margin-bottom: 16px; margin-right: -5px; }

#track-update.assessment-track-cta { position: relative; display: inline-block; display: block; }

#track-update.assessment-track-cta:after { color: white; font-weight: 700; position: absolute; content: "Beta"; background: #5fcf80; border-radius: 4px; font-size: 14px; top: 16px; right: 16px; padding: 6px 8px 7px 8px; line-height: 1em; }

.assessment-course-tooltip { position: absolute; text-align: center; padding: 10px 20px; background-color: white; width: 220px; z-index: 1000; border-radius: 4px; visibility: hidden; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 0 rgba(0, 0, 0, 0.08); -ms-transform: translate(-50%, 0px); -moz-transform: translate(-50%, 0px); -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); left: 50%; top: 100%; display: block; font-weight: 500; font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; z-index: 5000; color: #1a2126; }

.assessment-course-bubble:first-of-type .assessment-course-tooltip { left: 70px; }

.assessment-course-bubble:hover .assessment-course-tooltip { visibility: visible; opacity: 1 !important; z-index: 9999; -ms-transform: translate(-50%, 10px); -moz-transform: translate(-50%, 10px); -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); }
.assessment-track-start .assessment-callout.stage-progress-container .stage-progress-list.has-topic-background-color { background-color: #384047 !important; }

.assessment-track-start .assessment-callout.stage-progress-container .stage-progress-list.has-topic-background-color .assessment-home-info, .assessment-track-start .assessment-callout.stage-progress-container .stage-progress-list.has-topic-background-color .section-progress { opacity: 0.6; }

.box-header--assessment { background: #384047 !important; color: white; height: 60px; padding: 0; position: relative; }

.box-header--assessment:after { background: rgba(0, 0, 0, 0.13); border-radius: 4px; content: "Beta" !important; font-size: 14px; font-weight: 700; padding: 4px 12px; position: absolute; right: 20px; top: 50%; -ms-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); }

.box-header--assessment .assessment-home-info { opacity: 0.6; }

.box-content--assessment { background: #384047 !important; border-radius: 0 0 4px 4px; color: white; text-align: center; min-height: 500px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding-bottom: 60px !important; padding-top: 60px !important; }

.box-content--assessment.box-content--assessment--fauxheader { padding-top: 0 !important; }

.box-content--assessment h1, .box-content--assessment h2, .box-content--assessment p { color: #f8f8f8 !important; font-size: 28px; line-height: 1.3em; max-width: 740px; margin: 0 auto; margin-bottom: 30px; }

@media screen and (max-width: 679px) { .box-content--assessment h1, .box-content--assessment h2, .box-content--assessment p { font-size: 18px; } }

.box-content--assessment h2:nth-of-type(2) { margin-top: -20px; }

.box-content--assessment svg { max-width: 260px; max-height: 260px; }

.box-content--assessment svg .st0 { opacity: 0.6 !important; }

.box-content--assessment svg .topic-highlight { fill: #3f8abf; }

.topic-ai .box-content--assessment svg .topic-highlight { fill: #733A88; }

.box-content--assessment svg .topic-highlight.topic-ai { fill: #733A88; }

.topic-back-end .box-content--assessment svg .topic-highlight { fill: #008297; }

.box-content--assessment svg .topic-highlight.topic-back-end { fill: #008297; }

.topic-data .box-content--assessment svg .topic-highlight { fill: #9F4B84; }

.box-content--assessment svg .topic-highlight.topic-data { fill: #9F4B84; }

.topic-design .box-content--assessment svg .topic-highlight { fill: #4a4290; }

.box-content--assessment svg .topic-highlight.topic-design { fill: #4a4290; }

.topic-experimental .box-content--assessment svg .topic-highlight { fill: #733a88; }

.box-content--assessment svg .topic-highlight.topic-experimental { fill: #733a88; }

.topic-front-end .box-content--assessment svg .topic-highlight { fill: #3659a2; }

.box-content--assessment svg .topic-highlight.topic-front-end { fill: #3659a2; }

.topic-fundamentals .box-content--assessment svg .topic-highlight { fill: #9b3b5a; }

.box-content--assessment svg .topic-highlight.topic-fundamentals { fill: #9b3b5a; }

.topic-mobile .box-content--assessment svg .topic-highlight { fill: #30826C; }

.box-content--assessment svg .topic-highlight.topic-mobile { fill: #30826C; }

.topic-internal .box-content--assessment svg .topic-highlight { fill: #55616c; }

.box-content--assessment svg .topic-highlight.topic-internal { fill: #55616c; }

.topic-foundations .box-content--assessment svg .topic-highlight { fill: #004e61; }

.box-content--assessment svg .topic-highlight.topic-foundations { fill: #004e61; }

.topic-undefined .box-content--assessment svg .topic-highlight { fill: #55616c; }

.box-content--assessment svg .topic-highlight.topic-undefined { fill: #55616c; }

.topic-college-credit .box-content--assessment svg .topic-highlight { fill: #3887c8; }

.box-content--assessment svg .topic-highlight.topic-college-credit { fill: #3887c8; }

.topic-no-code .box-content--assessment svg .topic-highlight { fill: #31AF7F; }

.box-content--assessment svg .topic-highlight.topic-no-code { fill: #31AF7F; }

.topic-security .box-content--assessment svg .topic-highlight { fill: #409BE9; }

.box-content--assessment svg .topic-highlight.topic-security { fill: #409BE9; }

.topic-game-development .box-content--assessment svg .topic-highlight { fill: #856fc4; }

.box-content--assessment svg .topic-highlight.topic-game-development { fill: #856fc4; }

.topic-treehouse-resources .box-content--assessment svg .topic-highlight { fill: #5fcf80; }

.box-content--assessment svg .topic-highlight.topic-treehouse-resources { fill: #5fcf80; }

.topic-coding-for-kids .box-content--assessment svg .topic-highlight { fill: #F36C27; }

.box-content--assessment svg .topic-highlight.topic-coding-for-kids { fill: #F36C27; }

.assessment__note { font-weight: 400; font-size: 18px !important; margin-bottom: 12px !important; }

.assessment-track-start__text h1 { font-weight: 300; margin-bottom: 0; max-width: none; }

.assessment-selected-topic__header { font-weight: 700; }

p.assessment-selected-topic__note { margin-top: 10px; margin-bottom: 30px; font-size: 18px; }

p.assessment__topic-choice { max-width: 840px; line-height: 1.4em; }

.box-footer--assessment { background: #323a40 !important; margin-top: -4px; }

@media screen and (max-width: 679px) { .box-footer--assessment a { display: block; } }
.assessment-topics-container { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }

.assessment-topic-card { background: #55616c; border-radius: 4px 4px 0 0; height: 164px; position: relative; width: 210px; transition: background 0.2s; z-index: 1; margin: 0 12px 60px 12px; }

.assessment-topic-card:before, .assessment-topic-card:after { content: " "; display: table; }

.assessment-topic-card:after { clear: both; }

.assessment-topic-card h3 { color: white; left: 0; right: 0; top: 104px; position: absolute; }

.assessment-topic-card p { font-size: 13px; color: white; opacity: 0.4; position: absolute; left: 0; right: 0; top: 132px; }

.assessment-topic-card svg { fill: rgba(0, 0, 0, 0.3); margin-top: 30px; }

@media screen and (max-width: 679px) { .assessment-topic-card { width: 100%; } }

.assessment-topic-card--complete, .assessment-topic-card--opted-out, .assessment-topic-card--failed { background: #3e474f; }

.assessment-topic-card--complete:hover, .assessment-topic-card--opted-out:hover, .assessment-topic-card--failed:hover { background: #3e474f; }

.assessment-topic-card--complete h3, .assessment-topic-card--opted-out h3, .assessment-topic-card--failed h3 { color: #587081; }

.assessment-topic-card--complete svg, .assessment-topic-card--opted-out svg, .assessment-topic-card--failed svg { fill: rgba(198, 204, 210, 0.3); }

.assessment-topic-card--complete svg.step-complete-fill-22-icon, .assessment-topic-card--opted-out svg.step-complete-fill-22-icon, .assessment-topic-card--failed svg.step-complete-fill-22-icon { width: 50px; height: 50px; }

.assessment-topic-card--complete { height: 203px; border-radius: 4px; margin-bottom: 30px; }

.assessment-track-info .assessment-topic-card { border-radius: 4px; }

.assessment-track-info .assessment-topic-card--complete { height: 164px; }

.assessment-topic-card--topic { width: 100%; height: 100%; display: block; }

.assessment-topic-complete__secondary, .assessment-topic-new__secondary { display: block; background: #323a40; border-radius: 0 0 6px 6px; width: 100%; padding: 8px 5px; color: rgba(255, 255, 255, 0.6); z-index: 0; transition: 0.5s background, 0.5s color; }

.assessment-topic-complete__secondary:hover, .assessment-topic-new__secondary:hover { color: rgba(255, 255, 255, 0.9); background: #2d3339; }

.assessment-topic-complete__secondary { background: #353c43; }

.assessment-topic-card:hover .assessment-topic-complete__secondary, .assessment-topic-card:hover .assessment-topic-new__secondary { display: block; transform: translateX(0px); }

.assessment-topics-container .topic-card__icon { max-width: 100px; margin-top: 10px; }

@supports (mix-blend-mode: multiply) { .assessment-topics-container .topic-card__icon { mix-blend-mode: multiply; opacity: 0.5; } }
#ubora_enrollment_form .square.modal-close.button { border: 0; top: 8px; right: 8px; }

#ubora_enrollment_form .square.modal-close.button svg { width: 16px; height: 16px; }

#ubora_enrollment_form .tabs { margin: 20px 15px; }

#ubora_enrollment_form .checkbox { border-bottom: 0; }

#ubora_enrollment_form dl.actions { display: flex; flex-wrap: wrap; margin-bottom: 1rem; }

#ubora_enrollment_form dl.actions dt, #ubora_enrollment_form dl.actions dd { padding-bottom: 1rem; }

#ubora_enrollment_form dl.actions dt:not(.last), #ubora_enrollment_form dl.actions dd:not(.last) { border-bottom: 2px solid #c6ccd2; }

#ubora_enrollment_form dl.actions dt { width: 33%; }

#ubora_enrollment_form dl.actions dt h4 { font-size: 16px; }

#ubora_enrollment_form dl.actions dd { width: 67%; }

#ubora_enrollment_form .field_with_errors p.error-message { display: block; }
html.ubora .degree-overview-progress button.enrollment { float: right; margin: -12px 0 0 0; }

html.ubora .office-hours-container .unavailable-message, html.ubora .support-center-container .unavailable-message { clear: both; padding: 1rem; background-color: #edeff0; font-size: 12px; font-style: italic; }

html.ubora .journey-box { padding-right: 50px; margin-bottom: 0; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }

html.ubora .journey-box .journey .checkmark { position: relative; float: left; top: 15px; left: 10px; }

@media screen and (max-width: 679px) { html.ubora .journey-box .journey .checkmark { display: none; } }

@media screen and (max-width: 969px) { html.ubora .journey-box .journey .checkmark { display: none; } }

html.ubora .journey-box .journey .graybox { float: right; width: 83%; text-align: left !important; display: inline-block; background-color: #E5E5E5; padding: 1.5rem; border-radius: 4px; position: relative; }

@media screen and (max-width: 679px) { html.ubora .journey-box .journey .graybox { width: 100%; margin: 0; } }

@media screen and (max-width: 969px) { html.ubora .journey-box .journey .graybox { width: 100%; margin: 0; } }

html.ubora .journey-box .journey .graybox h3, html.ubora .journey-box .journey .graybox h5 { line-height: 24px; }

html.ubora .journey-box .journey .graybox h3 { font-weight: 700; color: #A8438C; }

html.ubora .journey-box .journey .graybox .pill { display: inline-flex; background-color: #30826C; border: none; color: #fff; margin: 0.5rem 0; padding: .05rem 1rem; text-decoration: none; border-radius: 500px; }

html.ubora .journey-box .journey .graybox .pill h4 { color: white; font-weight: 700; margin: 4px 0; }

html.ubora .journey-box .journey .graybox .pill p { font-weight: 400; color: white; margin: 4px 0; margin-left: 24px; }

@media screen and (max-width: 679px) { html.ubora .journey-box .journey .graybox .pill p { margin-left: 16px; } }

html.ubora .journey-box .journey .arrow-left:after { content: " "; position: absolute; top: 60px; left: 101px; border-top: 15px solid transparent; border-right: 15px solid #E5E5E5; border-left: none; border-bottom: 15px solid transparent; border-radius: 4px; }

@media screen and (max-width: 679px) { html.ubora .journey-box .journey .arrow-left:after { display: none; } }

@media screen and (max-width: 969px) { html.ubora .journey-box .journey .arrow-left:after { display: none; } }

html.ubora .journey-box .journey .whitebox { text-align: left !important; display: inline-block; margin: 0; padding: 1.5rem; padding-bottom: 0; margin-left: 60px; }

@media screen and (max-width: 679px) { html.ubora .journey-box .journey .whitebox { margin-left: 0; } }

@media screen and (max-width: 969px) { html.ubora .journey-box .journey .whitebox { margin-left: 0; } }

html.ubora .journey-button { position: relative; background-color: #30826C; width: 100%; padding: 0.75rem 0; margin-bottom: 30px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; text-align: center; }

html.ubora .journey-button-text a { margin: 2rem 0; top: 50%; color: white; line-height: 24px !important; font-size: 16px !important; }
html.ubora .control-container .subnav .selected { background-color: #A8438C; color: #fff; }

html.ubora .box-header-ubora { background: #212121 url(/assets/views/ubora/ubora-pattern-0f27b326d4efdeaf05cfff16b31bb3464d95974f9d0d6af1aaa46a8333d390a8.svg); background-size: 160px; padding: 0; }

html.ubora .box-header-ubora .degreeTitle { background-color: #A8438C; padding: 0.5rem 0; margin: 0.5rem 0 0 0; width: 70%; clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); }

html.ubora .box-header-ubora .degreeTitle h3 { padding-left: 30px; color: #fff; }

html.ubora .box-header-ubora h5 { padding-left: 30px; color: #fff; }

html.ubora .box-header-ubora-img { padding: 30px; }

html.ubora .box-header-ubora-img img { max-width: 18rem; }

html.ubora .box-header-ubora + .box-header { border-radius: 0; }

html.ubora .degree-overview-progress { position: relative; background: #fff; }

@media screen and (max-width: 679px) { html.ubora .degree-overview-progress { padding: 20px; } }

@media screen and (min-width: 680px) { html.ubora .degree-overview-progress { padding: 30px; } }

html.ubora .degree-overview-progress:before, html.ubora .degree-overview-progress:after { content: " "; display: table; }

html.ubora .degree-overview-progress:after { clear: both; }
.link-submissions-banner { max-width: 1200px; width: 100%; margin-inline: auto; background: #FFFFFF; box-shadow: 0px 2px 0px #DFE1E2; border-top: 5px solid #133EA2; border-radius: 4px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; }

.link-submissions-banner .body { width: 100%; padding-inline: 30px; }

.link-submissions-banner .body h1 { margin-top: 34px; margin-bottom: 10px; font-size: 30px; line-height: 36px; color: #30383E; text-align: center; }

@media screen and (min-width: 500px) { .link-submissions-banner .body h1 { text-align: left; } }

.link-submissions-banner .body p { font-size: 14px; font-weight: 400; color: #667477; }

.link-submissions-banner .body .submission-link { margin-bottom: 20px; background: #5FCF80; border-radius: 4px; border: none; max-width: 166px; width: 100%; max-height: 45px; margin-inline: auto; display: block; }

@media screen and (min-width: 500px) { .link-submissions-banner .body .submission-link { display: inline-block; margin-inline: 0px; } }

.link-submissions-banner .footer { padding-inline: 30px; background: #F8F9F9; width: 100%; min-height: 51px; display: flex; align-items: center; padding-block: 20px; }

@media screen and (min-width: 500px) { .link-submissions-banner .footer { padding-block: 0px; } }

.link-submissions-banner .footer p { display: flex; align-items: center; margin-bottom: 0px; }

.link-submissions-banner .footer p .info-24-icon { fill: #667477; }

.link-submissions-banner .footer p span, .link-submissions-banner .footer p a { font-size: 13px; color: #667477; }

.link-submissions-banner .footer p span { margin-left: 15px; }

.link-submissions { width: 100%; margin-inline: auto; min-height: 50vh; margin-top: 50px; }

.link-submissions .no-results { font-size: 20px; }

.link-submissions .submissions-wrapper { margin-inline: auto; width: 100%; display: grid; grid-template-columns: 1fr; grid-auto-flow: dense; column-gap: 60px; row-gap: 30px; }

.link-submissions .submissions-wrapper > * { min-width: 0px; }

@media screen and (min-width: 634px) { .link-submissions .submissions-wrapper { grid-template-columns: repeat(2, 1fr); } }

@media screen and (min-width: 1100px) { .link-submissions .submissions-wrapper { grid-template-columns: repeat(3, 1fr); } }

.link-submissions .submissions-wrapper .submission-card { max-width: 350px; padding: 15px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; margin-inline: auto; background: #FFFFFF; border-radius: 3px; border-top: 5px solid; transition: transform 0.3s ease-in-out; }

.link-submissions .submissions-wrapper .submission-card .link-wrapper { display: flex; flex-direction: column; justify-content: space-between; align-items: start; }

.link-submissions .submissions-wrapper .submission-card .card-header { width: 100%; display: flex; justify-content: space-between; align-items: center; }

.link-submissions .submissions-wrapper .submission-card .card-header span { display: inline-block; }

.link-submissions .submissions-wrapper .submission-card .card-header .topic { padding: 0px 10px; border: 1px solid; border-radius: 20px; font-size: 12px; font-weight: 500; }

.link-submissions .submissions-wrapper .submission-card .card-header .time { font-weight: 500; font-size: 12px; color: #667477; display: flex; justify-content: space-between; align-items: center; }

.link-submissions .submissions-wrapper .submission-card .card-header .time span { margin-left: 10px; display: inline-block; color: #667477; }

.link-submissions .submissions-wrapper .submission-card .card-body { width: 100%; font-weight: 500; font-size: 20px; line-height: 24px; color: #30383E; padding-block: 20px; word-break: break-word; }

.link-submissions .submissions-wrapper .submission-card .card-body span { display: block; }

.link-submissions .submissions-wrapper .submission-card .card-body .title { font-size: 20px; font-weight: 500; }

.link-submissions .submissions-wrapper .submission-card .card-body .description { font-size: 11px; font-weight: 400; margin-top: 10px; line-height: 1.5; }

.link-submissions .submissions-wrapper .submission-card .card-footer { width: 100%; display: flex; justify-content: space-between; align-items: center; }

.link-submissions .submissions-wrapper .submission-card .card-footer .type { font-weight: 500; line-height: 17px; text-align: center; color: #30383E; background: #F6D064; border-radius: 20px; padding: 3px 7px; text-transform: capitalize; white-space: nowrap; font-size: 12px; margin-inline: 5px; }

.link-submissions .submissions-wrapper .submission-card .card-footer .user { font-weight: 500; font-size: 12px; line-height: 15px; color: #667477; display: flex; justify-content: space-between; align-items: center; }

.link-submissions .submissions-wrapper .submission-card .card-footer .user span { white-space: nowrap; }

.link-submissions .submissions-wrapper .submission-card .card-footer .user .profile-name { font-size: 12px; background: #F6F9FA; border-radius: 20px; padding: 5px 10px; color: #30383E; text-transform: capitalize; }

.link-submissions .submissions-wrapper .submission-card .card-footer .user .profile-name a { color: #30383E; }

.link-submissions .submissions-wrapper .submission-card .card-footer .user .added-by { margin-right: 8px; }

.link-submissions .submissions-wrapper .submission-card:hover { transform: scale(1.1); }

.link-submissions .pagination { width: 100%; margin-top: 45px; }

.link-submissions .pagination .pagination { width: 100%; display: flex; justify-content: space-between; }

.link-submissions .pagination .pagination a, .link-submissions .pagination .pagination em { display: none; }

.link-submissions .pagination .pagination .list-item a { display: block; color: #FFFFFF; }

.link-submissions .pagination .pagination .list-item { font-size: 16px; line-height: 19px; text-align: center; padding: 10px 40px; background: #5FCF80; border-radius: 4px; }

.link-submissions .pagination .pagination .disabled { background: #9A9A9A !important; pointer-events: none; }

.submissions-table { width: 100%; margin-inline: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.submissions-table .section-title { font-weight: 500; font-size: 30px; line-height: 36px; color: #30383E; margin-bottom: 36px; align-self: start; }

.submissions-table table { width: 100%; }

.submissions-table table td, .submissions-table table thead tr th { padding: 10px; }

.submissions-table table td, .submissions-table table th { border: 0.5px solid rgba(217, 217, 217, 0.5); font-size: 12px; }

.submissions-table table td .button, .submissions-table table th .button { padding: 0px 40px; font-weight: 500; font-size: 16px; text-align: center; color: #FFFFFF !important; border-radius: 4px; border: none; margin-inline: auto; display: block; width: 100%; padding-inline: 0px; line-height: 40px; cursor: auto; max-width: 160px; }

.submissions-table table td .primary, .submissions-table table td .primary:hover, .submissions-table table th .primary, .submissions-table table th .primary:hover { background: #5FCF80 !important; }

.submissions-table table td .caution, .submissions-table table td .caution:hover, .submissions-table table th .caution, .submissions-table table th .caution:hover { background: #ECC148 !important; }

.submissions-table table td .note-student, .submissions-table table th .note-student { width: 100%; max-width: 160px; margin-inline: auto; margin-top: 30px; background: #F9FAFA; border-radius: 4px; padding: 10px; font-size: 10px; }

.link-submissions-form { max-width: 1190px; width: 100%; margin-inline: auto; min-height: 645px; background: #FFFFFF; box-shadow: 0px 2px 0px #DFE1E2; border-radius: 4px; border-top: 7px solid #133EA2; background-image: url(/assets/views/library/link_submissions/link_submissions_background_header-0d9dc8b5eb13771623ec5b9eb4e502a6b434e0a3b89dcd78ffaa24b89e2d99d1.webp); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; }

.link-submissions-form .link-submissions-form-wrapper { max-width: 720px; width: 100%; margin-inline: auto; min-height: 20vh; padding: 30px; }

.link-submissions-form .link-submissions-form-wrapper h1 { font-weight: 500; font-size: 30px; line-height: 36px; text-align: center; color: #30383E; }

.link-submissions-form .link-submissions-form-wrapper p, .link-submissions-form .link-submissions-form-wrapper .error-item { font-weight: 500; font-size: 14px; line-height: 145.2%; text-align: center; color: #667477; margin-top: 15px; }

.link-submissions-form .link-submissions-form-wrapper .error-item { color: #ffffff; list-style: disc; margin-left: 20px; margin-block: 5px; text-align: left; }

.link-submissions-form .link-submissions-form-wrapper .submission-form { min-height: 300px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-group { margin-inline: auto; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; column-gap: 30px; }

@media screen and (min-width: 550px) { .link-submissions-form .link-submissions-form-wrapper .submission-form .form-group { flex-direction: row; } }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-group .form-item { width: 100%; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .button-group { justify-content: space-around; column-gap: 22px; margin-top: 50px; row-gap: 20px; }

@media screen and (min-width: 550px) { .link-submissions-form .link-submissions-form-wrapper .submission-form .button-group { max-width: 300px; } }

.link-submissions-form .link-submissions-form-wrapper .submission-form .button-group .submit-btn, .link-submissions-form .link-submissions-form-wrapper .submission-form .button-group .cancel-btn { width: 100%; display: block; vertical-align: middle; min-width: 166px; font-weight: 500; font-size: 16px; line-height: 19px; text-align: center; border-radius: 4px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .button-group .submit-btn { border: none; background: #5FCF80; color: #FFFFFF; margin-inline: 0px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .button-group .cancel-btn { border: 2px solid #667477; border-radius: 4px; color: #667477; padding-block: 9px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item { margin-top: 20px; min-height: 80px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .form-text-input, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .form-text-area { min-height: 62px; border: 1px solid #B6B6B6; background-color: #fff; border-radius: 4px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .error-message { border-radius: 4px; display: block; text-align: left; white-space: normal; margin-top: 10px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item input[name="link_submission[title]"] { padding-right: 70px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item label { top: 22px; color: #000000; cursor: pointer; pointer-events: none; font-weight: 500; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item label .form-label-required { color: #ED1C24; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .char-count { position: absolute; top: 12px; white-space: nowrap; right: 20px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .hint-text { text-align: left; font-weight: 400; font-size: 14px; line-height: 145.2%; color: #667477; margin-top: 10px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container::after { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; cursor: pointer !important; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-drop { padding-block: 10px; margin-top: 10px; background: #FFFFFF; box-shadow: 0px 0px 5px #C0C0C0; border-radius: 3px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results .active-result:hover, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results .highlighted { background-color: #f1f1f1; color: #4B5658; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results .active-result { max-width: 270px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-search { font-weight: 500 !important; font-size: 14px; color: #9CA1A1; margin-inline: 10px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results::after, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-search::after { right: unset; left: 10px; top: 1px; background-image: url("/assets/icons/link-sub-search-3e2eb297365026d286d0d2e020be15fe2a79ee9b8ab96af9eae34489c7712c98.svg"); background-repeat: no-repeat; background-size: 13px; background-position: center; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results .chosen-search-input, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-search .chosen-search-input { margin-bottom: 10px; background: #FFFFFF; border: 0.5px solid #636A71; border-radius: 3px; color: #9CA1A1; font-weight: 500; font-size: 14px; padding-left: 30px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results .chosen-search-input::after, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-search .chosen-search-input::after { display: none !important; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results::-webkit-scrollbar, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-search::-webkit-scrollbar { width: 3px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results::-webkit-scrollbar-track, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-search::-webkit-scrollbar-track { background: #EDEFF0; border-radius: 25px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-results::-webkit-scrollbar-thumb, .link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-search::-webkit-scrollbar-thumb { background: #5FCF80; border-radius: 27px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .chosen-single { min-height: 62px; border: 1px solid #B6B6B6; background-color: #fff; border-radius: 4px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container a.chosen-single span { line-height: 60px; color: #000000; font-weight: 500; margin-left: 15px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container:after { background: url("/assets/icons/icon-select-dark-a98b0498454d17c7f1e46b9644fb175e14aaa28d9013d51e961c14cb5f578362.svg") no-repeat center; background-size: 15px; pointer-events: none; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .round-disc { width: 7px; height: 7px; display: inline-block; border-radius: 50%; margin-inline: 10px; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .checkmark-faint { color: #CED4D8; }

.link-submissions-form .link-submissions-form-wrapper .submission-form .form-item .chosen-container .checkmark-green { color: #5FCF80; }
@font-face { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-style: normal; font-display: swap; }

.th-ca-dashboard { margin-top: 17px; padding: 11px 0px 0px; background-color: #fff; border-radius: 8px; box-shadow: 0px 2px 0px #d5d7d8; }

@media (min-width: 1100px) { .th-ca-dashboard { margin-top: 33px; padding: 11px 25px; } }

.th-ca-dashboard header { display: flex; justify-content: space-between; align-items: center; padding: 0px 11px; flex-wrap: wrap; }

@media (min-width: 1100px) { .th-ca-dashboard header { flex-wrap: nowrap; justify-content: flex-start; margin-bottom: 13px; padding: 0px 0px 11px 0px; border-bottom: 2px solid #edeff0; } }

.th-ca-dashboard header h2 { font-size: 16px; line-height: 19px; font-weight: 600; color: rgba(62, 71, 79, 0.85); flex-basis: 90%; }

@media (min-width: 1100px) { .th-ca-dashboard header h2 { flex-basis: initial; margin-right: 65px; font-size: 20px; line-height: 24px; } }

.th-ca-dashboard header > a { display: flex; font-size: 10px; line-height: 12px; color: rgba(62, 71, 79, 0.76); flex-basis: 10%; justify-content: flex-end; }

@media (min-width: 1100px) { .th-ca-dashboard header > a { flex-basis: initial; order: 3; margin-left: auto; font-size: 18px; line-height: 27px; } }

.th-ca-dashboard header > a img { width: 13px; height: 10px; margin-right: 5px; }

@media (min-width: 1100px) { .th-ca-dashboard header > a img { width: 29px; height: 22px; margin-right: 15px; } }

.th-ca-dashboard-tabs { margin-bottom: 10px; overflow: auto; padding: 0 5px; scrollbar-width: none; -ms-overflow-style: none; }

.th-ca-dashboard-tabs::-webkit-scrollbar { display: none; }

.th-ca-dashboard-tabs ul { display: flex; align-items: center; margin-top: 10px; transform: translateX(-5px); }

.th-ca-dashboard-tabs ul li { font-size: 12px; line-height: 14px; font-weight: 400; color: #bcc1c3; padding: 7px 20px; border-radius: 14px; }

@media (min-width: 500px) { .th-ca-dashboard-tabs ul li { padding: 7px 24px; } }

.th-ca-dashboard-tabs ul li:hover { cursor: pointer; }

.th-ca-dashboard-tabs ul li span { display: flex; align-items: center; font-weight: 500; }

@media (min-width: 1100px) { .th-ca-dashboard-tabs ul li { font-size: 18px; line-height: 22px; padding: 5px 20px; border-radius: 22px; } }

.th-ca-dashboard-tabs ul li a { display: flex; align-items: center; }

.th-ca-dashboard-tabs ul li .sm-chevron-down { margin-left: 6px; margin-top: 2px; width: 12px; height: 7px; fill: #bcc1c3; }

@media (min-width: 1100px) { .th-ca-dashboard-tabs ul li .sm-chevron-down { margin-left: 15px; width: 14px; height: 8px; } }

.th-ca-dashboard-tabs ul li.active { background-color: #676e74; color: #fff; }

.th-ca-dashboard-tabs ul li.active .sm-chevron-down { fill: #fff; transform: rotate(180deg); }

.th-ca-dashboard-cards { max-height: 140px; overflow-y: scroll; transition: max-height 0.3s ease-in-out; }

.th-ca-dashboard-cards-card { display: flex; align-items: center; justify-content: space-between; padding: 7px 20px 11px; }

.th-ca-dashboard-cards-card > p { font-size: 10px; margin-bottom: 0; margin-top: 7px; }

@media (min-width: 1100px) { .th-ca-dashboard-cards-card > p { font-size: 12px; } }

.th-ca-dashboard-cards-card:nth-child(odd) { background-color: #eff1f4; }

@media (min-width: 1100px) { .th-ca-dashboard-cards-card:nth-child(odd) { background-color: #fff; } }

.th-ca-dashboard-cards-card-text { font-weight: 500; color: #3e474f; flex-basis: 95%; }

@media (min-width: 1100px) { .th-ca-dashboard-cards-card-text { display: flex; align-items: center; } }

.th-ca-dashboard-cards-card-text-level { font-weight: 500; font-size: 8px; line-height: 10px; color: #4b5658; margin-bottom: 5px; padding: 5px; min-width: 85px; }

@media (min-width: 830px) { .th-ca-dashboard-cards-card-text-level { font-size: 10px; line-height: 12px; } }

@media (min-width: 1100px) { .th-ca-dashboard-cards-card-text-level { margin-bottom: 0px; } }

.th-ca-dashboard-cards-card-text-level span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

@media (min-width: 830px) { .th-ca-dashboard-cards-card-text-level span { width: 7px; height: 7px; } }

.th-ca-dashboard-cards-card-text-title { font-weight: 500; font-size: 10px; line-height: 11px; }

@media (min-width: 830px) { .th-ca-dashboard-cards-card-text-title { font-size: 12px; line-height: 14px; } }

@media (min-width: 1100px) { .th-ca-dashboard-cards-card-text-title { max-width: 150px; min-width: 150px; margin-bottom: 0px; font-size: 14px; line-height: 25px; border-right: 1px solid #edeff0; border-left: 1px solid #edeff0; padding: 0px 10px; margin-right: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } }

.th-ca-dashboard-cards-card-text-description { margin-bottom: 0 !important; font-size: 8px; line-height: 9px; }

.th-ca-dashboard-cards-card-text-description p { font-weight: 400; }

@media (min-width: 830px) { .th-ca-dashboard-cards-card-text-description { font-size: 10px; line-height: 12px; } }

@media (min-width: 1100px) { .th-ca-dashboard-cards-card-text-description { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } }

.th-ca-dashboard-cards-card-icon { color: #a6a6a6; width: 14px; height: 14px; margin-left: 10px; }

.th-ca-dashboard-cards.expanded { max-height: 400px; transition: max-height 0.3s ease-in-out; }

.th-ca-dashboard-expand { display: flex; justify-content: center; align-items: center; height: 18px; }

.th-ca-dashboard-expand .lg-chevron-up { color: #a6aaae; transform: rotate(-90deg); width: 11px; height: 11px; }

@media (min-width: 1100px) { .th-ca-dashboard-expand .lg-chevron-up { transform: scale(1.5) rotate(-90deg); } }

.th-ca-dashboard-expand .lg-chevron-up:hover { cursor: pointer; }

.th-ca-dashboard-expand.expanded .lg-chevron-up { transform: scale(1.5) rotate(90deg); }

.th-ca-welcome { color: #fff; background: #2a85c0 url(/assets/views/code_adventures/gradient-bea2908b5fc3bd12042f56b541a734813439292be8515a9178b227bc3462ed2e.webp) center/cover no-repeat; width: 100%; padding: 15px 18px; text-align: center; border-radius: 8px; }

@media (min-width: 830px) { .th-ca-welcome { padding: 23px; } }

.th-ca-welcome h1 { color: #fff; font-weight: 600; font-size: 16px; line-height: 19px; padding: 0 35px 10px 35px; }

@media (min-width: 830px) { .th-ca-welcome h1 { font-size: 24px; line-height: 28px; } }

@media (min-width: 1100px) { .th-ca-welcome h1 { font-size: 32px; line-height: 38px; } }

.th-ca-welcome h1 span { color: #f6d064; font-weight: 600; }

.th-ca-welcome p { font-weight: 500; font-size: 12px; line-height: 14px; }

@media (min-width: 830px) { .th-ca-welcome p { font-size: 14px; line-height: 16px; } }

@media (min-width: 1100px) { .th-ca-welcome p { font-size: 16px; line-height: 19px; } }

.th-ca-overview { padding: 15px 0 0 0; margin: 0 auto; }

@media (min-width: 830px) { .th-ca-overview { max-width: 700px; } }

@media (min-width: 1100px) { .th-ca-overview { max-width: 100%; } }

.th-ca-overview-card { padding: 18px; background-color: #fff; border-radius: 8px; text-align: center; border-bottom: 2px solid #d5d7d8; }

@media (min-width: 1100px) { .th-ca-overview-card { position: relative; padding: 40px 63px 0; text-align: left; border-bottom: none; border-radius: 8px 8px 0px 0px; margin-bottom: 0; } }

.th-ca-overview-card-breadcrumbs { font-weight: 500; font-size: 12px; line-height: 12px; line-height: 16px; margin-bottom: 40px; color: #3e474f; display: flex; gap: 14px; }

.th-ca-overview-card-breadcrumbs span { opacity: 0.4; }

@media (min-width: 1100px) { .th-ca-overview-card-breadcrumbs { font-size: 16px; } }

.th-ca-overview-card-breadcrumbs strong { font-weight: 400; }

.th-ca-overview-card h1 { max-width: 684px; font-weight: 600; font-size: 16px; line-height: 19px; margin: 12px 0 8px 0; color: rgba(62, 71, 79, 0.85); }

@media (min-width: 830px) { .th-ca-overview-card h1 { font-size: 20px; line-height: 24px; } }

@media (min-width: 1100px) { .th-ca-overview-card h1 { font-size: 31px; line-height: 37px; margin: 28px 0 18px 0; color: #3e474f; } }

.th-ca-overview-card-image { height: 125px; width: 100%; display: flex; align-items: center; justify-content: space-around; gap: 0; background-color: #EAECEE; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: 8px; margin-bottom: 19px; border-radius: 5px; }

.th-ca-overview-card-image img { height: 100%; width: 100%; }

@media (min-width: 830px) { .th-ca-overview-card-image { height: 250px; } }

@media (min-width: 1100px) { .th-ca-overview-card-image { height: 422px; margin-bottom: 0; border-radius: 19px 19px 0 0; background: url(/assets/views/code_adventures/placeholder-desktop-90903c73c18f6ed7308fc477f242f04cc1d22dd30fdbbac144aa428b6a319634.webp) no-repeat center center/cover; } }

.th-ca-overview-card-thumbnail { display: flex; width: 40%; height: 90%; background-color: #fff; border-radius: 8px; padding-block: 6px; margin-left: 10px; }

@media (min-width: 1100px) { .th-ca-overview-card-thumbnail { margin-left: 30px; padding-block: 20px; } }

.th-ca-overview-card-thumbnail-image { height: 100%; width: 100%; margin-inline: auto; border-radius: 2px; }

.th-ca-overview-card-thumbnail-info { height: 90%; width: 70%; display: flex; position: relative; flex-direction: column; justify-content: center; gap: 10px; }

.th-ca-overview-card-thumbnail-info h1, .th-ca-overview-card-thumbnail-info h2, .th-ca-overview-card-thumbnail-info h3, .th-ca-overview-card-thumbnail-info h4, .th-ca-overview-card-thumbnail-info h5, .th-ca-overview-card-thumbnail-info h6, .th-ca-overview-card-thumbnail-info p, .th-ca-overview-card-thumbnail-info span { color: #fff; }

.th-ca-overview-card-thumbnail-info p, .th-ca-overview-card-thumbnail-info span { font-size: 10px; line-height: 12px; margin-top: 10px; }

@media (min-width: 1100px) { .th-ca-overview-card-thumbnail-info { width: 50%; margin-inline: 30px; justify-content: center; text-align: center; }
  .th-ca-overview-card-thumbnail-info p, .th-ca-overview-card-thumbnail-info span { font-size: 16px; } }

.th-ca-overview-card-thumbnail-info-text h3 { color: #fff; font-size: 14px; line-height: 16px; font-weight: 600; }

@media (min-width: 1100px) { .th-ca-overview-card-thumbnail-info-text h3 { font-size: 24px; line-height: 28px; margin-bottom: 20px; } }

.th-ca-overview-card-thumbnail-info-text p { display: none; line-height: 1.5; color: #fff; font-weight: 500; }

@media (min-width: 1100px) { .th-ca-overview-card-thumbnail-info-text p { display: block; } }

.th-ca-overview-card-thumbnail-info-icons { display: flex; position: absolute; bottom: 0; right: 0; align-items: end; justify-content: center; gap: 10px; padding-right: 10px; }

@media (min-width: 1100px) { .th-ca-overview-card-thumbnail-info-icons { justify-content: end; } }

.th-ca-overview-card-thumbnail-info-icons img { width: 20px; height: 20px; fill: #fff; }

.th-ca-overview-card-desktop-nav { display: none; }

@media (min-width: 1100px) { .th-ca-overview-card-desktop-nav { display: block; padding: 15px; background-color: #f6f6f6; border-radius: 0px 0px 19px 19px; } }

.th-ca-overview-card-desktop-nav ul { display: flex; }

.th-ca-overview-card-desktop-nav ul li { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 14px; line-height: 17px; color: rgba(62, 71, 79, 0.54); }

.th-ca-overview-card-desktop-nav ul li:hover { cursor: pointer; }

.th-ca-overview-card-desktop-nav ul li.active { color: #3e474f; }

.th-ca-overview-card-desktop-nav ul li + li { margin-left: 28px; }

.th-ca-overview-card-desktop-nav ul li.th-ca-starter-files { margin-left: auto; color: rgba(62, 71, 79, 0.8); }

.th-ca-overview-card-desktop-nav ul li.th-ca-starter-files a { display: flex; }

.th-ca-overview-card-desktop-nav ul li.th-ca-starter-files span { display: flex; align-items: center; }

.th-ca-overview-card-desktop-nav ul li.th-ca-starter-files:hover .arrow-svg { animation: moveUpDown 0.5s infinite alternate; }

@keyframes moveUpDown { 0% { transform: translateY(0); }
  100% { transform: translateY(-3px); } }

.th-ca-overview-card-desktop-nav ul li.th-ca-starter-files .download-icon { display: flex; flex-direction: column; justify-content: end; max-height: 15px; }

.th-ca-overview-card-desktop-nav ul li.th-ca-starter-files .download-icon img:nth-child(1) { align-self: center; margin-right: 0.2px; margin-bottom: -1px; }

.th-ca-overview-card-desktop-nav ul li.th-ca-starter-files .download-icon img:nth-child(2) { align-self: center; }

.th-ca-overview-card-desktop-nav ul li .th-ca-download { display: inline-block; width: 13px; height: 14px; margin-right: 12px; }

.th-ca-overview-card-desktop-nav ul li .custom-tooltip { display: none; position: absolute; background-color: #5FCF80; color: #fff; padding: 10px; border-radius: 5px; right: 94px; bottom: 44px; height: 50px; width: 121px; font-size: 11px; line-height: 13px; text-align: center; align-items: center; }

.th-ca-overview-card-desktop-nav ul li .custom-tooltip:before { content: ''; position: absolute; top: 99%; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: #5FCF80 transparent transparent transparent; }

.th-ca-overview-card-desktop-nav ul li.th-ca-abandon-adventure { position: relative; }

.th-ca-overview-card-desktop-nav ul li.th-ca-abandon-adventure .th-ca-vertical-ellipsis { display: inline-block; width: 4px; height: 16px; margin-inline: 10px; }

.th-ca-overview-card-desktop-nav ul li.th-ca-abandon-adventure:hover { cursor: pointer; }

.th-ca-overview-card-desktop-nav ul li.th-ca-abandon-adventure button { display: none; }

.th-ca-overview-card-desktop-nav ul li.th-ca-abandon-adventure button:hover { background-color: #f6f6f6; color: #8B0000; }

@media (min-width: 1100px) { .th-ca-overview-card-desktop-nav ul li.th-ca-abandon-adventure button { align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 187px; height: 43px; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 15px; line-height: 18px; color: #d43f3f; background-color: #fff; border: none; cursor: pointer; outline: none; box-shadow: 0px 0px 5px #c0c0c0; border-radius: 3px; transform: translate(-95.5%, 20px); } }

.th-ca-overview-card-btns { display: flex; max-width: 90%; margin: 0 auto; justify-content: center; }

@media (min-width: 830px) { .th-ca-overview-card-btns { max-width: 50%; } }

@media (min-width: 1100px) { .th-ca-overview-card-btns { max-width: initial; width: 293px; position: absolute; top: 95px; right: 62px; justify-content: end; } }

@media (min-width: 1100px) { .th-ca-overview-card-btns [class*=-btn-] { font-size: 18px; line-height: 22px; } }

.th-ca-overview-card-btns [class*=-btn-] svg { transform: scale(1.5); }

@media (min-width: 1100px) { .th-ca-overview-card-btns .th-ca-btn-primary, .th-ca-overview-card-btns .th-ca-btn-secondary { border-radius: 7px 0px 0px 7px; } }

.th-ca-overview-card .completed-badge { display: block; height: 100px; width: auto; margin: auto; }

@media (min-width: 830px) { .th-ca-overview-card .completed-badge { height: 200px; } }

@media (min-width: 1100px) { .th-ca-overview-card .completed-badge { height: 340px; } }

.th-ca-overview-text { color: #3e474f; font-weight: 500; font-size: 10px; line-height: 11px; padding: 20px 0; border-bottom: 1px solid #a1a7a8; }

@media (min-width: 830px) { .th-ca-overview-text { font-size: 16px; line-height: 17px; padding: 24px 0; } }

@media (min-width: 1100px) { .th-ca-overview-text { background-color: #fff; padding: 40px 77px 68px 77px; border-bottom: 2px solid #d5d7d8; border-radius: 0px 0px 8px 8px; display: none; } }

@media (min-width: 1100px) { .th-ca-overview-text.active { display: block; } }

.th-ca-overview-text header h2 { font-weight: 500; font-size: 14px; line-height: 17px; margin: 24px 0 15px 0; }

@media (min-width: 1100px) { .th-ca-overview-text header h2 { font-size: 16px; line-height: 21px; margin: 0 0 30px 0; } }

.th-ca-overview-text header p { font-size: 10px; line-height: 14px; font-weight: 400; margin-bottom: 0; }

@media (min-width: 1100px) { .th-ca-overview-text header p { font-size: 16px; line-height: 21px; } }

.th-ca-overview-text header p span { background-color: transparent; }

.th-ca-overview-text a { color: #5fcf80; font-weight: 400; }

@media (min-width: 1100px) { .th-ca-overview-text a { display: none; } }

.th-ca-overview-text-description { overflow: hidden; position: relative; }

.th-ca-overview-text-description ol { max-height: 225px; margin-top: 15px; }

.th-ca-overview-text-description ol h1, .th-ca-overview-text-description ol h2, .th-ca-overview-text-description ol h3, .th-ca-overview-text-description ol h4, .th-ca-overview-text-description ol h5 { font-size: 14px; line-height: 16px; }

.th-ca-overview-text-description ol span, .th-ca-overview-text-description ol p { font-size: 10px; line-height: 12px; }

@media (min-width: 1100px) { .th-ca-overview-text-description ol { max-height: 370px; }
  .th-ca-overview-text-description ol h1, .th-ca-overview-text-description ol h2, .th-ca-overview-text-description ol h3, .th-ca-overview-text-description ol h4, .th-ca-overview-text-description ol h5 { font-size: initial; }
  .th-ca-overview-text-description ol span, .th-ca-overview-text-description ol p { font-size: 16px; line-height: 18px; } }

@media (min-width: 1100px) { .th-ca-overview-text-description { display: block; overflow: initial; -webkit-line-clamp: initial; word-wrap: break-word; margin-top: 30px; } }

@media (min-width: 501px) { .th-ca-overview-text-description .read-more-button { display: none; } }

@media (max-width: 500px) { .th-ca-overview-text-description .description-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; white-space: normal; overflow: hidden; text-overflow: ellipsis; }
  .th-ca-overview-text-description .description-text h1, .th-ca-overview-text-description .description-text h2, .th-ca-overview-text-description .description-text h3, .th-ca-overview-text-description .description-text h4, .th-ca-overview-text-description .description-text h5 { font-size: 14px; line-height: 16px; }
  .th-ca-overview-text-description .description-text span, .th-ca-overview-text-description .description-text p { font-size: 10px; line-height: 12px; }
  .th-ca-overview-text-description .read-more-button { display: inline; color: #5fcf80; font-size: 10px; font-weight: 600; padding: 0; }
  .th-ca-overview-text-description .read-more-button:hover { color: #35A961; cursor: pointer; } }

.th-ca-overview-text-description .expanded { -webkit-line-clamp: unset; }

.th-ca-overview-text-description .expanded .description-text { white-space: normal; overflow: visible; }

.th-ca-overview-text-description .expanded .read-more-button { display: inline; }

.th-ca-overview-text-description p { font-weight: 400; font-size: 10px; line-height: 12px; margin-bottom: 0; }

@media (min-width: 830px) { .th-ca-overview-text-description p { max-width: 100%; } }

@media (min-width: 1100px) { .th-ca-overview-text-description p { font-size: 16px; line-height: 17px; }
  .th-ca-overview-text-description p + p { margin-top: 17px; } }

.th-ca-overview-succeed { padding: 24px 0; border-bottom: 1px solid #a1a7a8; }

@media (min-width: 1100px) { .th-ca-overview-succeed { background-color: #fff; padding: 40px 77px 68px 77px; border-bottom: 2px solid #d5d7d8; border-radius: 0px 0px 8px 8px; display: none; } }

@media (min-width: 1100px) { .th-ca-overview-succeed.active { display: block; } }

.th-ca-overview-succeed h2 { font-weight: 500; font-size: 14px; line-height: 17px; color: #3e474f; }

.th-ca-overview-succeed ol { color: #3e474f; padding-right: 29px; max-height: 225px; overflow-y: scroll; font-size: 10px; }

@media (min-width: 1100px) { .th-ca-overview-succeed ol { max-height: 370px; } }

.th-ca-overview-succeed ol p { font-size: 10px; }

@media (min-width: 1100px) { .th-ca-overview-succeed ol p { font-size: 16px; } }

.th-ca-overview-succeed ol li { list-style: none; display: flex; font-weight: 400; font-size: 10px; line-height: 11px; margin-bottom: 10px; }

@media (min-width: 830px) { .th-ca-overview-succeed ol li { font-size: 14px; line-height: 15px; } }

@media (min-width: 1100px) { .th-ca-overview-succeed ol li { font-size: 16px; line-height: 17px; margin-bottom: 20px; } }

.th-ca-overview-succeed ol li p { padding-top: 6px; margin: 0; }

@media (min-width: 830px) { .th-ca-overview-succeed ol li p { padding-top: 7px; } }

@media (min-width: 1100px) { .th-ca-overview-succeed ol li p { padding-top: 12px; } }

.th-ca-overview-succeed ol li span { display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 16px; height: 30px; min-width: 30px; line-height: 12px; margin-right: 12px; border-radius: 50%; background-color: #636A70; color: #fff; }

@media (min-width: 1100px) { .th-ca-overview-succeed ol li span { flex-basis: 30px; min-width: 47px; height: 47px; } }

.th-ca-overview-resources { padding: 24px 0; border-bottom: 1px solid #a1a7a8; }

@media (min-width: 1100px) { .th-ca-overview-resources { background-color: #fff; padding: 40px 77px 68px 77px; border-bottom: 2px solid #d5d7d8; border-radius: 0px 0px 8px 8px; display: none; } }

@media (min-width: 1100px) { .th-ca-overview-resources.active { display: block; } }

.th-ca-overview-resources h2 { font-weight: 500; font-size: 14px; line-height: 17px; color: #3e474f; margin-bottom: 15px; }

@media (min-width: 1100px) { .th-ca-overview-resources h2 { margin-bottom: 38px; } }

.th-ca-overview-resources-cards { max-height: 203px; overflow-y: scroll; padding-right: 16px; }

@media (min-width: 1100px) { .th-ca-overview-resources-cards { max-height: 390px; padding-right: 36px; } }

.th-ca-overview-resources-cards.active { display: block; }

.th-ca-overview-resources-cards.hidden { display: none; }

.th-ca-overview-resources-cards-card { display: flex; align-items: center; background-color: #fff; border-radius: 8px; padding: 13px 9px; margin-block: 20px; border-bottom: 2px solid #d5d7d8; transition: background-color 0.2s linear; }

.th-ca-overview-resources-cards-card:hover { background-color: #596168; }

.th-ca-overview-resources-cards-card:hover .th-ca-overview-resources-cards-card-text > * { color: #f8f9fa; }

@media (min-width: 1100px) { .th-ca-overview-resources-cards-card { flex-direction: row-reverse; justify-content: space-around; padding: 15px 30px; background-color: #f8f9fa; border-bottom: 1px solid #d5d7d8; } }

.th-ca-overview-resources-cards-card-image { flex-basis: 111px; height: 63px; margin-right: 10px; border-radius: 6px; }

@media (min-width: 1100px) { .th-ca-overview-resources-cards-card-image { flex-basis: 207px; height: 120px; margin-right: 0; border: 3px solid #fff; } }

.th-ca-overview-resources-cards-card-text { flex-grow: 1; color: #3e474f; }

.th-ca-overview-resources-cards-card-text h3 { font-weight: 500; font-size: 13px; line-height: 5px; margin-bottom: 15px; }

@media (min-width: 1100px) { .th-ca-overview-resources-cards-card-text h3 { font-size: 16px; line-height: 19px; margin: 0; } }

.th-ca-overview-resources-cards-card-text a, .th-ca-overview-resources-cards-card-text p { font-weight: 500; font-size: 10px; margin-bottom: 0; }

.th-ca-overview-resources-cards-card-text p { font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 7px; max-width: 293px; word-wrap: break-word; line-height: 1.15; }

@media (min-width: 830px) { .th-ca-overview-resources-cards-card-text p { -webkit-line-clamp: unset; max-width: 335px; } }

@media (min-width: 1100px) { .th-ca-overview-resources-cards-card-text p { margin-top: 18px; font-size: 14px; line-height: 1.25; } }

.th-ca-overview-resources-cards-card-text .resource-link { margin-top: 0; }

.th-ca-overview-resources-cards-card + div { margin-top: 17px; }

.th-ca-btn-favorite { min-height: 30px; margin-left: 1px; padding: 0 14px; background: url(/assets/views/code_adventures/heart-4e837af0b4fc63c4abb4a8e9c4f9f662f532290c7f2e197465aa371708a2863a.svg); background-repeat: no-repeat; background-position: 50%; background-size: 14px; }

.th-ca-btn-favorite:hover { cursor: pointer; }

@media (min-width: 1100px) { .th-ca-btn-favorite { padding: 0 15px; margin-left: 2px; border-radius: 0px 7px 7px 0px; } }

.favorite { background: url(/assets/views/code_adventures/heart-filled-7ad13adf96185bc093cb2041e01b8ede5eb9a867d12a5b7e4e9d34e145f1867c.svg); background-repeat: no-repeat; background-position: 50%; background-size: 16px; }

.th-ca-adventures { margin-top: 34px; }

.th-ca-adventures-main-nav { padding-bottom: 10px; border-bottom: 1px solid #a1a7a8; }

.th-ca-adventures-main-nav ul { display: flex; align-items: center; }

@media (min-width: 1100px) { .th-ca-adventures-main-nav ul { flex-wrap: wrap; } }

.th-ca-adventures-main-nav ul li { font-size: 12px; line-height: 14px; font-weight: 400; color: #676e74; padding: 7px 12px; border-radius: 14px; }

@media (min-width: 1100px) { .th-ca-adventures-main-nav ul li { font-weight: 400; font-size: 18px; line-height: 22px; border-radius: 20px; padding: 3px 14px; } }

.th-ca-adventures-main-nav ul li + li { margin-left: 5px; }

.th-ca-adventures-main-nav ul li span { cursor: pointer; font-weight: 500; }

.th-ca-adventures-main-nav ul li.active { background-color: #676e74; color: #fff; }

.th-ca-adventures-main-nav ul .th-ca-hamburger { position: relative; padding-right: 0; margin-left: 5px; }

@media (min-width: 1100px) { .th-ca-adventures-main-nav ul .th-ca-hamburger { flex-basis: 100%; } }

.th-ca-adventures-main-nav ul .th-ca-hamburger svg { width: 17px; height: 14px; }

@media (min-width: 1100px) { .th-ca-adventures-main-nav ul .th-ca-hamburger svg { display: none; } }

.th-ca-adventures-main-nav-sorted { position: absolute; right: 0; top: 28px; width: 69px; height: 73px; border-radius: 4px; padding: 8px; display: none; background-color: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); accent-color: #4b5658; }

.th-ca-adventures-main-nav-sorted .active { display: block; }

@media (min-width: 1100px) { .th-ca-adventures-main-nav-sorted { left: -5px; top: 37px; display: flex; width: initial; height: initial; padding: initial; align-items: center; background-color: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); max-width: fit-content; } }

.th-ca-adventures-main-nav-sorted p { font-weight: 500; font-size: 10px; line-height: 12px; margin-bottom: 0; color: #4b5658; }

@media (min-width: 1100px) { .th-ca-adventures-main-nav-sorted p { font-size: 15px; line-height: 16px; margin-right: 10px; } }

.th-ca-adventures-main-nav-sorted label { display: flex; align-items: center; font-weight: 400; font-size: 10px; line-height: 11px; margin-top: 11px; }

.th-ca-adventures-main-nav-sorted label:hover { cursor: pointer; }

@media (min-width: 1100px) { .th-ca-adventures-main-nav-sorted label { margin-top: 0; margin-left: 10px; font-size: 15px; line-height: 16px; } }

.th-ca-adventures-main-nav-sorted.active { display: block; }

.th-ca-adventures .th-ca-new-adventures { margin-top: 17px; margin-bottom: 16px; padding-bottom: 32px; border-bottom: 1px solid #a1a7a8; }

.th-ca-adventures .th-ca-new-adventures > header { text-align: center; }

@media (min-width: 1100px) { .th-ca-adventures .th-ca-new-adventures > header { text-align: left; margin-bottom: 40px; } }

.th-ca-adventures .th-ca-new-adventures > header h2 { font-weight: 500; font-size: 13px; line-height: 16px; color: #5fcf80; margin-bottom: 14px; }

@media (min-width: 1100px) { .th-ca-adventures .th-ca-new-adventures > header h2 { font-size: 18px; line-height: 22px; margin-bottom: 8px; } }

.th-ca-adventures .th-ca-new-adventures > header p { font-weight: 500; font-size: 10px; line-height: 11px; max-width: 200px; margin-inline: auto; }

@media (min-width: 500px) { .th-ca-adventures .th-ca-new-adventures > header p { max-width: initial; } }

@media (min-width: 1100px) { .th-ca-adventures .th-ca-new-adventures > header p { font-size: 15px; line-height: 16px; } }

.th-ca-adventures-filters > header { font-weight: 400; font-size: 12px; line-height: 14px; color: #4b5658; }

.th-ca-adventures-filters > header::-webkit-scrollbar { display: none; }

@media (min-width: 830px) { .th-ca-adventures-filters > header { margin-block: 24px 10px; } }

@media (min-width: 1100px) { .th-ca-adventures-filters > header { font-size: 15px; line-height: 18px; } }

.th-ca-adventures-filters > header h2 { font-weight: 500; font-size: 12px; line-height: 14px; display: none; }

@media (min-width: 500px) { .th-ca-adventures-filters > header h2 { display: inline-block; } }

@media (min-width: 830px) { .th-ca-adventures-filters > header h2 { margin-bottom: 0; margin-right: 10px; } }

@media (min-width: 1100px) { .th-ca-adventures-filters > header h2 { font-size: 15px; line-height: 18px; } }

.th-ca-adventures-filters form { display: flex; align-items: center; gap: 10px; }

.th-ca-adventures-filters .sm-chevron-down { margin-left: 6px; margin-top: 2px; width: 12px; height: 7px; fill: #4b5658; }

.th-ca-adventures-filters .th-ca-filter-container { list-style: none; padding: 4px 10px; }

.th-ca-adventures-filters .th-ca-filter-container a { text-decoration: none; color: #4b5658; }

.th-ca-adventures-filters .th-ca-filter-label { display: flex; align-items: center; font-weight: 500; }

.th-ca-adventures-filters .th-ca-filter-label:hover { cursor: pointer; }

.th-ca-adventures-filters .th-ca-filter-option:hover { cursor: pointer; }

.th-ca-adventures-filters .th-ca-search { margin-left: auto; margin-right: 8px; }

.th-ca-adventures-filters .th-ca-filter-dropdown { width: 135px; display: none; position: absolute; height: 180px; padding: 8px; margin-top: 10px; background-color: #fff; box-shadow: 0px 0px 5px #c0c0c0; border-radius: 3px; color: #4b5658; overflow-y: scroll; z-index: 999; }

@media (min-width: 500px) { .th-ca-adventures-filters .th-ca-filter-dropdown { width: 159px; } }

.th-ca-adventures-filters .th-ca-filter-dropdown li:hover { background-color: #eaecee; }

.th-ca-adventures-filters .th-ca-filter-dropdown li:first-of-type:hover { background-color: transparent; }

@media (min-width: 1100px) { .th-ca-adventures-filters .th-ca-filter-dropdown { width: 187px; } }

.th-ca-adventures-filters .th-ca-filter-dropdown::-webkit-scrollbar-track { margin-block: 38px; background: #5fcf80; }

.th-ca-adventures-filters .th-ca-filter-dropdown input[type="search"] { width: 100%; height: 27px; padding-left: 25px; color: #4b5658; border: 1px solid #636a71; border-radius: 3px; background: url(/assets/views/code_adventures/magnify-3e2eb297365026d286d0d2e020be15fe2a79ee9b8ab96af9eae34489c7712c98.svg) no-repeat 6px center/10px 10px; }

.th-ca-adventures-filters .th-ca-filter-dropdown input[type="search"]::placeholder { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 12px; line-height: 14px; color: #9ca1a1; }

@media (min-width: 1100px) { .th-ca-adventures-filters .th-ca-filter-dropdown input[type="search"]::placeholder { font-size: 14px; line-height: 17px; } }

.th-ca-adventures-filters .th-ca-filter-dropdown label { display: flex; padding: 10px 0; align-items: center; font-weight: 400; font-size: 12px; color: #4B5658; line-height: 13px; }

@media (min-width: 1100px) { .th-ca-adventures-filters .th-ca-filter-dropdown label { padding-left: 6px; font-size: 14px; } }

.th-ca-adventures-filters .th-ca-filter-dropdown label a { text-decoration: none; color: #4b5658; }

.th-ca-adventures-filters .filtered-list { display: none; align-items: center; justify-content: start; }

.th-ca-adventures-filters .filtered-list .th-ca-filter-option-container { display: flex; }

.th-ca-adventures-filters .filtered-list .th-ca-filter-option-container label { display: flex; align-items: center; padding-inline: 6px 2px; height: 19px; margin-right: 8px; background: #fff; border-radius: 5px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); font-size: 12px; padding: 10px; }

.th-ca-adventures-filters .filtered-list .th-ca-filter-label-name { display: none; }

@media (min-width: 500px) { .th-ca-adventures-filters .filtered-list .th-ca-filter-label-name { display: inline-block; } }

.th-ca-adventures-filters .filtered-list .th-ca-filter-label-remove { color: #D43F3F; padding-inline: 4px; }

.th-ca-adventures-filters .filtered-list .th-ca-filter-label-remove:hover { cursor: pointer; }

.th-ca-adventures-filters .filtered-list .th-ca-filter-clear { font-size: 12px; line-height: 13px; text-decoration: underline; }

.th-ca-adventures-filters .filtered-list .th-ca-filter-clear:hover { cursor: pointer; }

.th-ca-adventures-filters .th-ca-filter-container.active { background-color: #676e74; border-radius: 20px; }

.th-ca-adventures-filters .th-ca-filter-container.active .th-ca-filter-label { color: #fff; }

.th-ca-adventures-filters .th-ca-filter-container.active .sm-chevron-down { fill: #fff; transform: rotate(180deg); }

.th-ca-adventures-filters .th-ca-filter-container.active .th-ca-filter-dropdown { display: block; }

.th-ca-adventures-filters .th-ca-filter-search { margin-left: auto; }

.th-ca-adventures-filters #search-input { display: none; }

@media (min-width: 1100px) { .th-ca-adventures-filters #search-input { display: block; background-color: #fff; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; background: url(/assets/views/code_adventures/magnify-3e2eb297365026d286d0d2e020be15fe2a79ee9b8ab96af9eae34489c7712c98.svg) no-repeat 6px center/10px 10px; background-position: 155px; background-color: white; padding: 10px; border-radius: 5px; text-indent: 6px; }
  @-moz-document url-prefix() { .th-ca-adventures-filters #search-input { background-position: 165px; } } }

.th-ca-adventures-compact-cards { position: relative; margin-top: 15px; padding: 0 13px; }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards { min-height: 368px; padding: 0; } }

.th-ca-adventures-compact-cards .slick-prev, .th-ca-adventures-compact-cards .slick-next { width: 6px; height: 11px; z-index: 1; position: absolute; top: 50%; background: none; }

.th-ca-adventures-compact-cards .slick-prev:hover, .th-ca-adventures-compact-cards .slick-next:hover { cursor: pointer; }

.th-ca-adventures-compact-cards .slick-prev { left: 0; }

.th-ca-adventures-compact-cards .slick-prev::before { margin-left: -50px; content: url(/assets/views/code_adventures/slickPrev-afa140605ba51f141c5d94b8a0ebabbc897e6de8b22ef4f042ad4fe0e99dab2f.svg); filter: brightness(0.35) invert(0) sepia(1) saturate(0); }

.th-ca-adventures-compact-cards .slick-next { right: 0; }

.th-ca-adventures-compact-cards .slick-next::before { margin-left: 22px; content: url(/assets/views/code_adventures/slickNext-dded73dfb5cbb6035c91857c407022a6218338f81fb7d06ec5fe018451e58c83.svg); filter: brightness(0.35) invert(0) sepia(1) saturate(0); }

.th-ca-adventures-compact-cards .slick-arrow { content: none; }

.th-ca-adventures-compact-cards .slick-dots { display: flex; justify-content: center; }

.th-ca-adventures-compact-cards .slick-dots li button { background: #bcc1c3; color: transparent; width: 0px; height: 12px; margin: 0 3px; border-radius: 50%; }

@-moz-document url-prefix() { .th-ca-adventures-compact-cards .slick-dots li button { height: 8px; } }

.th-ca-adventures-compact-cards .slick-dots li button:hover { cursor: pointer; }

.th-ca-adventures-compact-cards .slick-dots li.slick-active button { background: #676e74; color: transparent; }

.th-ca-adventures-compact-cards-card { height: 334px; width: auto; padding: 13px; background-color: #fff; border-radius: 4px; border-bottom: 2px solid #d5d7d8; margin-right: 10px; display: flex !important; flex-direction: column; justify-content: space-between; gap: 10px; }

@media (min-width: 830px) { .th-ca-adventures-compact-cards-card { min-width: 359px; } }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards-card { margin: 0; padding: 15px; height: 353px; margin-bottom: 10px; } }

.th-ca-adventures-compact-cards-card .adventure-wrapper > header h3 { font-weight: 500; font-size: 16px; line-height: 19px; color: #4b5658; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-bottom: 6px; }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards-card .adventure-wrapper > header h3 { font-size: 18px; line-height: 22px; } }

.th-ca-adventures-compact-cards-card-level { font-weight: 500; font-size: 10px; line-height: 12px; margin-bottom: 6px; background-color: transparent; }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards-card-level { font-size: 12px; line-height: 17px; display: flex; align-items: center; } }

.th-ca-adventures-compact-cards-card-level span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards-card-level span { width: 7px; height: 7px; margin-right: 8px; } }

.th-ca-adventures-compact-cards-card-author { font-size: 10px; line-height: 11px; color: rgba(75, 86, 88, 0.52); margin-bottom: 5px; }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards-card-author { font-size: 14px; line-height: 15px; margin-bottom: 10px; } }

.th-ca-adventures-compact-cards-card-image { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 4px; overflow: hidden; background-color: #EAECEE; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 10px; }

.th-ca-adventures-compact-cards-card-image .completed-badge { height: 86px; }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards-card-image .completed-badge { height: initial; width: initial; } }

.th-ca-adventures-compact-cards-card-thumbnail { display: flex; width: 100px; height: 100px; padding: 8px; border-radius: 4px; background-color: #fff; }

.th-ca-adventures-compact-cards-card-thumbnail:hover { cursor: pointer; }

.th-ca-adventures-compact-cards-card-thumbnail-image { width: 100%; height: 100%; border-radius: 2px; margin-inline: auto; display: block; }

.th-ca-adventures-compact-cards-card-thumbnail-info { width: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-inline: 10px; }

.th-ca-adventures-compact-cards-card-thumbnail-info h5 { font-size: 14px; line-height: 16px; text-align: center; color: #fff; }

.th-ca-adventures-compact-cards-card-thumbnail-info-icons { display: flex; align-items: end; gap: 10px; }

.th-ca-adventures-compact-cards-card-thumbnail-info-icons img { width: 20px; height: 20px; fill: #fff; }

.th-ca-adventures-compact-cards-card-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; font-size: 10px; font-weight: 300; line-height: 11px; margin-top: 12px; margin-bottom: 0; color: #4b5658; }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards-card-summary { font-size: 14px; line-height: 15px; } }

.th-ca-adventures-compact-cards-card-topics { display: flex; font-weight: 400; font-size: 9px; line-height: 11px; color: #a5b1b8; }

.th-ca-adventures-compact-cards-card-topics li + li { margin-left: 5px; }

.th-ca-adventures-compact-cards-card-topics li { font-weight: 500; padding: 4px 9px; background-color: #edeff0; border-radius: 3px; }

@media (min-width: 1100px) { .th-ca-adventures-compact-cards-card-topics li { padding: 5px 15px; } }

.th-ca-adventures-compact-cards-card-btns { display: flex; }

.th-ca-submission-container h1 { font-size: 31px; font-weight: 600; text-align: center; }

.th-ca-submission-container p { font-weight: 500; }

.th-ca-submission-container .th-ca-btn-primary, .th-ca-submission-container .th-ca-btn-secondary { width: 198px; font-size: 18px; }

.th-ca-submission-container .th-ca-btn-primary:hover, .th-ca-submission-container .th-ca-btn-secondary:hover { background-color: #34b273; }

.th-ca-submission-container .th-ca-btn-primary:nth-child(1), .th-ca-submission-container .th-ca-btn-secondary:nth-child(1) { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; height: 40px; line-height: 36px; padding: 0 15px; border-radius: 4px; margin-right: 30px; }

.th-ca-submission-container .th-ca-btn-primary:nth-child(2), .th-ca-submission-container .th-ca-btn-secondary:nth-child(2) { color: #fff !important; border: none !important; }

.th-ca-submission-container .contained { margin-top: 100px; padding: 100px 250px; }

.th-ca-submission-container form { display: flex; flex-direction: column; align-items: center; gap: 30px; }

.th-ca-submission-container .control-group { width: 100%; }

.th-ca-submission-container .controls input { background-color: #fff !important; height: 60px !important; border: 1px solid #B6B6B6; }

.th-ca-submission-container .controls textarea { background-color: #fff !important; border: 1px solid #B6B6B6; }

.th-ca-leaderboards { background-color: #edeeef; color: #676e74; border-bottom: 1px solid #a1a7a8; margin-bottom: 17px; padding-bottom: 17px; }

@media (min-width: 1100px) { .th-ca-leaderboards { padding-bottom: 34px; } }

.th-ca-leaderboards h2 { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 14px; line-height: 17px; color: #3e474f; margin-bottom: 24px; }

@media (min-width: 1100px) { .th-ca-leaderboards h2 { font-size: 16px; line-height: 19px; margin: 24px 0; } }

.th-ca-leaderboards p { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 10px; line-height: 11px; }

@media (min-width: 830px) { .th-ca-leaderboards p { font-size: 12px; line-height: 14px; } }

.th-ca-leaderboards p a { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 10px; line-height: 12px; color: #5fcf80; }

@media (min-width: 830px) { .th-ca-leaderboards p a { font-size: 12px; line-height: 14px; } }

.th-ca-leaderboards ul { margin-top: 34px; max-height: 210px; overflow-y: scroll; }

.th-ca-leaderboards ul li { display: flex; align-items: center; height: 42px; background: #f6f6f6; border-radius: 9px; padding: 0 26px 0 13px; margin-right: 20px; }

.th-ca-leaderboards ul li a { display: flex; align-items: center; width: 100%; }

.th-ca-leaderboards ul li a img { display: block; width: 28px; height: 28px; margin-right: 20px; border-radius: 50%; border: 1px solid #eaecee; }

.th-ca-leaderboards ul li:nth-child(even) { background: #fff; }

.th-ca-leaderboards-text { display: flex; align-items: center; width: 100%; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 10px; line-height: 11px; color: #3e474f; }

.th-ca-leaderboards-text-name { flex-basis: 33.33%; }

@media (min-width: 830px) { .th-ca-leaderboards-text-name { flex-basis: 25%; } }

@media (min-width: 1100px) { .th-ca-leaderboards-text-name { flex-basis: 15%; } }

.th-ca-leaderboards-text-rank strong { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 12px; line-height: 14px; }

.th-ca-leaderboards-text-svg { display: block; margin-left: auto; justify-self: flex-end; width: 14px; height: 14px; color: #a6a6a6; transform: scale(0.85); }

.th-ca-overview .th-ca-leaderboards { padding: 24px 0; border-bottom: none; color: #3e474f; }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards { background-color: #fff; padding: 0 77px 68px 77px; border-bottom: 2px solid #d5d7d8; border-radius: 0px 0px 8px 8px; } }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards h2 { margin: 0 0 20px 0; font-size: 14px; } }

@media (min-width: 830px) { .th-ca-overview .th-ca-leaderboards p { font-size: 14px; line-height: 17px; } }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards p { font-size: 16px; } }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards ul { max-height: 260px; } }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards ul li { height: 52px; margin-right: 45px; padding: 10px 19px 10px 16px; } }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards ul li img { width: 33px; height: 33px; } }

.th-ca-overview .th-ca-leaderboards-text { justify-content: space-between; }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards-text-rank strong { font-size: 16px; font-weight: 400; } }

.th-ca-overview .th-ca-leaderboards-text-repo { display: none; }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards-text-repo { display: inline-block; flex-basis: 39ch; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: auto; } }

@media (min-width: 1100px) { .th-ca-overview .th-ca-leaderboards-text-svg { margin-left: 78px; justify-self: flex-end; transform: scale(1.1); } }

.th-ca { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 10px 23px 65px 23px; background-color: #edeef0; margin: 0 auto; max-width: 1100px; }

.th-ca input, .th-ca select, .th-ca textarea, .th-ca button { border: none; box-shadow: none; outline: none; }

.th-ca a { text-decoration: none; color: inherit; }

.th-ca ul, .th-ca ol { list-style: none; }

@media (min-width: 1100px) { .th-ca { padding: 33px 0 99px 0; } }

.th-ca-beginner-text { color: #5FCF80; }

.th-ca-beginner-bg { background-color: #5FCF80; }

.th-ca-beginner-gradient { background-image: linear-gradient(#5da17c, #7ece89); }

.th-ca-intermediate-text { color: #61b7f5; }

.th-ca-intermediate-bg { background-color: #61b7f5; }

.th-ca-intermediate-gradient { background-image: linear-gradient(#3785cd, #78b7f1); }

.th-ca-advanced-text { color: #e46986; }

.th-ca-advanced-bg { background-color: #e46986; }

.th-ca-advanced-gradient { background-image: linear-gradient(#c65f78, #d67189); }

.th-ca-svg-symbols { display: none; }

.th-ca [class*="-btn-"] { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 12px; color: #fff; border-radius: 4px; padding: 7px 14px; text-align: center; }

@media (min-width: 1100px) { .th-ca [class*="-btn-"] { font-size: 16px; padding: 10px 20px; } }

.th-ca-btn-primary { flex-grow: 1; }

.th-ca-btn-primary.beginner { background-color: #5FCF80; color: #fff; }

.th-ca-btn-primary.beginner:hover { cursor: pointer; background-color: #34b273; }

.th-ca-btn-primary.intermediate { background-color: #61b7f5; color: #fff; }

.th-ca-btn-primary.intermediate:hover { cursor: pointer; background-color: #4799eb; }

.th-ca-btn-primary.advanced { background-color: #e46986; color: #fff; }

.th-ca-btn-primary.advanced:hover { cursor: pointer; background-color: #d65c83; }

.th-ca-btn-secondary { background-color: transparent; flex-grow: 1; }

@media (min-width: 1100px) { .th-ca-btn-secondary { padding: initial; } }

.th-ca-btn-secondary:hover { background-color: #fff !important; cursor: pointer; }

.th-ca-btn-secondary.beginner { color: #5FCF80; border: 2px solid #5FCF80; }

.th-ca-btn-secondary.beginner:hover { color: #34b273; border: 2px solid #34b273; }

.th-ca-btn-secondary.intermediate { color: #61b7f5; border: 2px solid #61b7f5; }

.th-ca-btn-secondary.intermediate:hover { color: #4799eb; border: 2px solid #4799eb; }

.th-ca-btn-secondary.advanced { color: #e46986; border: 2px solid #e46986; }

.th-ca-btn-secondary.advanced:hover { color: #d65c83; border: 2px solid #d65c83; }

.th-ca-btn-favorite { display: flex; align-items: center; justify-content: center; padding: 0 12px; margin-left: 8px; }

.th-ca-btn-favorite.beginner { background-color: #5FCF80; color: #fff; }

.th-ca-btn-favorite.beginner:hover { cursor: pointer; background-color: #34b273; }

.th-ca-btn-favorite.intermediate { background-color: #61b7f5; color: #fff; }

.th-ca-btn-favorite.intermediate:hover { cursor: pointer; background-color: #4799eb; }

.th-ca-btn-favorite.advanced { background-color: #e46986; color: #fff; }

.th-ca-btn-favorite.advanced:hover { cursor: pointer; background-color: #d65c83; }

.th-ca-btn-favorite svg { width: 10px; height: 13px; }

.th-ca input[type="radio"] { appearance: none; -webkit-appearance: none; margin-right: 5px; width: 9px; height: 9px; border: 1px solid #4b5658; border-radius: 50%; }

@media (min-width: 1100px) { .th-ca input[type="radio"] { margin-right: 8px; transform: translateY(-1px); } }

.th-ca input[type="radio"]:hover { cursor: pointer; }

.th-ca input[type="radio"]:checked::before { content: ''; display: block; width: 5px; height: 5px; background-color: #4b5658; border-radius: 50%; margin: 1px; }

.th-ca-custom-scroll { scrollbar-color: #636A70 #edeff0; scrollbar-width: thin; }

.th-ca-custom-scroll::-webkit-scrollbar { width: 3px; }

@media (min-width: 1100px) { .th-ca-custom-scroll::-webkit-scrollbar { width: 8px; } }

.th-ca-custom-scroll::-webkit-scrollbar-track { background-color: #edeff0; margin-block: 10px; border-radius: 25px; }

.th-ca-custom-scroll::-webkit-scrollbar-thumb { background-color: #636A70; border-radius: 25px; }

@media (min-width: 830px) { .slick-slide { margin-left: 6px; margin-right: 6px; } }

@media (min-width: 1100px) { .slick-slide { margin-left: initial; margin-right: 19.5px; } }

@media (min-width: 1100px) { .th-ca-adventures-filters .th-ca-adventures-compact-cards-card + .th-ca-adventures-compact-cards-card { margin-left: 12px !important; margin-top: 12px !important; } }

.th-ca-how-it-works video { width: 100%; }

.th-ca-new-adventures, .th-ca-how-it-works { display: none; }

.th-ca-new-adventures.active, .th-ca-how-it-works.active { display: block; }

.th-ca-how-it-works { display: none; background-color: #edeeef; color: #676e74; border-bottom: 1px solid #a1a7a8; margin-bottom: 17px; padding: 10px 0; }

.th-ca-how-it-works h2 { font-weight: 400; font-size: 14px; line-height: 16px; margin-bottom: 24px; color: #3e474f; }

@media (min-width: 1100px) { .th-ca-how-it-works h2 { font-size: 16px; line-height: 18px; margin: 24px 0; } }

.th-ca-how-it-works li { display: flex; align-items: baseline; margin-bottom: 10px; }

@media (min-width: 1100px) { .th-ca-how-it-works li { margin-bottom: 15px; } }

.th-ca-how-it-works li span { display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 10px; line-height: 12px; flex-basis: 20px; min-width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; background-color: #666a6f; color: #fff; }

@media (min-width: 830px) { .th-ca-how-it-works li span { font-size: 12px; line-height: 14px; flex-basis: 30px; min-width: 30px; height: 30px; margin-right: 15px; } }

@media (min-width: 1100px) { .th-ca-how-it-works li span { font-size: 14px; line-height: 16px; flex-basis: 35px; min-width: 35px; height: 35px; margin-right: 20px; } }

.th-ca-how-it-works h3 { margin: 3px 0; font-weight: 400; font-size: 10px; line-height: 12px; }

@media (min-width: 830px) { .th-ca-how-it-works h3 { font-size: 12px; line-height: 14px; } }

@media (min-width: 1100px) { .th-ca-how-it-works h3 { font-size: 14px; line-height: 16px; } }

.th-ca-how-it-works p { font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 8px; line-height: 11px; }

@media (min-width: 830px) { .th-ca-how-it-works p { font-size: 10px; line-height: 14px; } }

@media (min-width: 1100px) { .th-ca-how-it-works p { font-size: 12px; line-height: 14px; } }

.th-ca-trial { margin-top: 17px; color: #fff; border-radius: 5px; background: #2a85c0 url(/assets/views/code_adventures/gradient-bea2908b5fc3bd12042f56b541a734813439292be8515a9178b227bc3462ed2e.webp) no-repeat; padding: 15px; text-align: center; }

@media (min-width: 830px) { .th-ca-trial { text-align: left; padding: 20px; display: flex; justify-content: space-between; padding: 40px; } }

@media (min-width: 1100px) { .th-ca-trial { padding: 56px; } }

@media (min-width: 1100px) { .th-ca-trial { margin-top: 33px; } }

.th-ca-trial-text { display: flex; flex-direction: column; flex-basis: 55%; }

@media (min-width: 1100px) { .th-ca-trial-text { flex-basis: 58%; } }

.th-ca-trial-text h1 { font-weight: 400; font-size: 8px; line-height: 12px; text-transform: uppercase; color: #fff; font-weight: 500; }

@media (min-width: 830px) { .th-ca-trial-text h1 { font-size: 10px; line-height: 16px; } }

@media (min-width: 1100px) { .th-ca-trial-text h1 { font-size: 16px; line-height: 19px; } }

.th-ca-trial-text h2 { font-weight: 500; font-size: 16px; line-height: 16px; margin: 5px 0 7px 0; color: #fff; }

@media (min-width: 830px) { .th-ca-trial-text h2 { font-size: 20px; line-height: 20px; } }

@media (min-width: 1100px) { .th-ca-trial-text h2 { font-size: 32px; line-height: 38px; margin: 10px 0 15px 0; } }

.th-ca-trial-text p { font-weight: 500; font-size: 10px; line-height: 12px; max-width: 475px; margin: 0 auto; }

@media (min-width: 830px) { .th-ca-trial-text p { font-size: 11px; line-height: 16px; max-width: initial; margin: initial; } }

@media (min-width: 1100px) { .th-ca-trial-text p { font-size: 16px; line-height: 19px; } }

.th-ca-trial-text p span { color: #f6d064; }

.th-ca-trial-text button { margin-top: 14px; padding: 7px 40px; border-radius: 5px; background-color: #f6d064; }

@media (min-width: 830px) { .th-ca-trial-text button { padding: 10px 20px; } }

@media (min-width: 1100px) { .th-ca-trial-text button { width: 212px; height: 45px; margin-top: 38px; } }

.th-ca-trial-text button a { text-decoration: none; font-family: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 12px; color: #30383e; }

@media (min-width: 830px) { .th-ca-trial-text button a { font-size: 14px; } }

@media (min-width: 1100px) { .th-ca-trial-text button a { font-size: 18px; line-height: 22px; } }

.th-ca-trial-text span { font-size: 10px; font-weight: 500; }

@media (min-width: 830px) { .th-ca-trial-text span { font-size: 11px; line-height: 16px; } }

@media (min-width: 1100px) { .th-ca-trial-text span { font-size: 16px; line-height: 19px; } }

.th-ca-trial-text a { font-size: 10px; text-decoration: underline; margin-top: 5px; margin-left: 0; }

@media (min-width: 830px) { .th-ca-trial-text a { font-size: 12px; line-height: 16px; } }

@media (min-width: 1100px) { .th-ca-trial-text a { margin-left: 6px; } }

.th-ca-trial-tablet, .th-ca-trial-desktop { display: none; }

@media (min-width: 830px) { .th-ca-trial-tablet { display: inline-block; max-width: 300px; flex-basis: 40%; } }

@media (min-width: 1100px) { .th-ca-trial-tablet { display: none; } }

@media (min-width: 1100px) { .th-ca-trial-desktop { display: inline-block; max-width: 338px; flex-basis: 40%; } }

.submissions-table { width: 100%; margin-inline: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.submissions-table .section-title { font-weight: 500; font-size: 30px; line-height: 36px; color: #30383E; margin-bottom: 36px; align-self: start; }

.submissions-table table { width: 100%; }

.submissions-table table td, .submissions-table table thead tr th { padding: 10px; }

.submissions-table table td, .submissions-table table th { border: 0.5px solid rgba(217, 217, 217, 0.5); font-size: 12px; }

.submissions-table table td .button, .submissions-table table th .button { padding: 0px 40px; font-weight: 500; font-size: 16px; text-align: center; color: #FFFFFF !important; border-radius: 4px; border: none; margin-inline: auto; display: block; width: 100%; padding-inline: 0px; line-height: 40px; cursor: auto; max-width: 160px; }

.submissions-table table td .primary, .submissions-table table td .primary:hover, .submissions-table table th .primary, .submissions-table table th .primary:hover { background: #5FCF80 !important; }

.submissions-table table td .caution, .submissions-table table td .caution:hover, .submissions-table table th .caution, .submissions-table table th .caution:hover { background: #ECC148 !important; }

.submissions-table table td .note-student, .submissions-table table th .note-student { width: 100%; max-width: 160px; margin-inline: auto; margin-top: 30px; background: #F9FAFA; border-radius: 4px; padding: 10px; font-size: 10px; }