:export{primary:#06c;primaryBright:#09f;secondary:#ccc;warning:#fff3a3;alert:#ffe0e2;white:#fff;lightGray:#faf9f9;mediumGray:#e5e5e5;darkGray:#5b5b5b;gray:#7f7f7f;secondaryGray:#ccc;borderGray:#e5e5e5;black:#333;blackHeader:#424242;transparent:rgba(255,255,255,0);sofatutorKidsPurple:#5619aa;sofatutorKidsLightPurple:#7330cf;green50:#faffeb;green100:#f3fcd7;green200:#ecfcbd;green300:#dff895;green400:#bceb31;green500:#9c0;green600:#88b500;green700:#688903;green800:#516c00;green900:#445b00;emerald50:#eefff7;emerald100:#d7ffeb;emerald200:#b2ffd9;emerald300:#74fab7;emerald400:#31eb8e;emerald500:#16de7a;emerald600:#02b95e;emerald700:#06904b;emerald800:#0b713e;emerald900:#13653c;cyan900:#135765;cyan800:#136778;cyan700:#0d7d93;cyan600:#0098b7;cyan500:#02b9de;cyan400:#19caed;cyan300:#5fdaf2;cyan200:#9febfa;cyan100:#cef7ff;cyan50:#ebfcff;blue900:#002549;blue800:#003365;blue700:#00478d;blue600:#0854a0;blue500:#06c;blue400:#489df1;blue300:#95c6f8;blue200:#bddcfc;blue100:#d9ecff;blue50:#ebf5ff;violet900:#201c4b;violet800:#373082;violet700:#3a30a8;violet600:#4538d2;violet500:#6c5ffa;violet400:#867bfb;violet300:#aaa3fc;violet200:#ccc7fd;violet100:#e3e0fe;violet50:#efeefe;purple900:#3e0269;purple800:#5c188c;purple700:#7119af;purple600:#8719d6;purple500:#b247ff;purple400:#c97eff;purple300:#deb0ff;purple200:#edd3ff;purple100:#f5e7ff;purple50:#fbf5ff;pink900:#8a1158;pink800:#a60e67;pink700:#ca0c7b;pink600:#e71b92;pink500:#f733a5;pink400:#fd69bf;pink300:#ffa2d8;pink200:#fecce9;pink100:#fde6f3;pink50:#fff2fa;red900:#85171e;red800:#a1141d;red700:#c3121e;red600:#e81a28;red500:#fa2c3a;red400:#ff6872;red300:#ff9fa5;red200:#ffc7cb;red100:#ffe0e2;red50:#fff0f1;orange900:#82470c;orange800:#a1570c;orange700:#cc6803;orange600:#f57b00;orange500:#ff840a;orange400:#f93;orange300:#ffb56c;orange200:#ffd2a5;orange100:#ffe9d3;orange50:#fff5ec;yellow900:#706209;yellow800:#a38f0a;yellow700:#ccb102;yellow600:#ebcb00;yellow500:#fd0;yellow400:#ffe95c;yellow300:#ffef85;yellow200:#fff3a3;yellow100:#fff7c1;yellow50:#fffce7;gray900:#333;gray800:#424242;gray700:#5b5b5b;gray600:#7f7f7f;gray500:#a6a6a6;gray400:#ccc;gray300:#e5e5e5;gray200:#efeeee;gray100:#faf9f9;gray50:#fff}.design-system-page:not(.design-system-index-page) .icon-sofatutor{position:absolute;top:46px;right:35px}.design-system-page:not(.design-system-index-page) .icon-sofatutor path:hover{transition:fill .4s ease;fill:#fff}.design-system-page .page-content{position:relative;padding:128px 0 64px}.design-system-page--overlay{position:fixed;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:10000000}.design-system-page .headline-bordered{margin-top:2rem;margin-bottom:2rem;border-bottom:2px solid #9c0;font-weight:bold}.design-system-page .button-examples .cell{padding-top:2rem}.design-system-page .topic-content{color:#7f7f7f}.design-system-page .code-block{display:block;margin:16px 16px 0;padding:8px;font-size:12px;overflow:auto}.design-system-header{position:fixed;left:0;right:0;z-index:10000002}.design-system-header__content{margin-bottom:64px;padding-top:64px;padding-bottom:64px;background-color:#faf9f9}.design-system-header__content>.grid-container{position:relative}.design-system-header .title-bar{padding-top:40px;padding-bottom:40px}.design-system-header .title-bar__menu{display:none;position:relative;top:3px;right:0;left:0;margin-right:24px;cursor:pointer}.design-system-header .title-bar .h2{position:relative;margin-bottom:0}.design-system-header .title-bar .beaver-character{position:absolute;bottom:-7px;right:30px;width:30px;transform:rotate(270deg)}.design-system-navigation{position:absolute;top:128px;display:block;width:224px;height:100%;background-color:#faf9f9;white-space:nowrap;z-index:10000001}.design-system-navigation__menu{position:sticky;top:128px;padding-top:32px}.design-system-navigation .navigation-link{padding-left:12px;color:#5b5b5b}.design-system-navigation .navigation-link:hover{color:#7f7f7f}.design-system-navigation .navigation-link.is-current{position:relative;color:#5b5b5b}.design-system-navigation .navigation-link.is-current:nth-of-type(4){margin-bottom:0}.design-system-navigation .navigation-link.is-current .h4{color:#333;font-weight:bold}.design-system-navigation .navigation-link.is-current .h4~ul{margin-top:16px}.design-system-navigation .navigation-link.is-current .h4::before{position:absolute;top:4px;left:0;display:block;width:4px;height:28px;background:#9c0;content:""}.design-system-navigation .navigation-link.is-current>.navigation-link__text a{color:#5b5b5b;font-weight:bold}.design-system-navigation .navigation-link .navigation-link__text{font-size:14px}.design-system-navigation .navigation-link .navigation-link__text a{color:#5b5b5b}.design-system-navigation .navigation-link .navigation-link__text a.is-active{font-weight:bold}.design-system-navigation .navigation-link .navigation-link__text a:hover{color:#7f7f7f}.design-system-navigation .navigation-link .navigation-link__text--small{padding:4px;font-size:12px}.design-system-navigation .navigation-link .navigation-link__text--small a{color:#5b5b5b}.design-system-navigation .navigation-link .navigation-link__text--small a.is-active{font-weight:bold}.design-system-navigation .navigation-link .navigation-link__text--small a:hover{color:#7f7f7f}.design-system-navigation .navigation-link .submenu-toggle{display:none}.design-system-page-intro{text-align:left}.design-system-page-intro__content{font-family:"Open Sans",Helvetica,Arial,sans-serif;margin-bottom:128px;font-size:18px}.design-system-page-intro h1{text-align:left}.design-system-topic-intro__content{margin-bottom:68px}.design-system-components-page .box-panel--green .box-feature-content__headline{padding:20px}.design-system-typography-page h1{text-align:left}.design-system-motion-page .space-128{margin-bottom:128px}.design-system-motion-page .image-float-right{float:right}.design-system-motion-page .image-float-left{float:left}.design-system-motion-page .motion-container{display:flex;align-items:center;height:332px;background-color:#faf9f9}.design-system-motion-page b{color:#5b5b5b}.design-system-motion-page__demo--slide{transition-delay:0s;transition-property:background-color;transition-duration:.24s}.design-system-motion-page__demo--swing .progress--swing-demo{width:200px}.design-system-motion-page__demo--swing .progress--swing-demo .progress-meter{transition-delay:0s;transition-property:width;transition-duration:.96s;transition-timing-function:cubic-bezier(0.8, 0, 0.3, 1)}.design-system-motion-page__demo--swing.reset-motion .progress--swing-demo .progress-meter{width:80% !important}.design-system-motion-page__demo--springrocker{font-size:48px}.design-system-motion-page__demo--springrocker.reset-motion{animation-name:springrocker-design-system-demo;animation-timing-function:cubic-bezier(0.4, 0.4, 0.4, 1);animation-delay:0s;animation-duration:.72s}@keyframes springrocker-design-system-demo{0%{transform:scale(1)}16.6%{transform:scale(0.9)}33.3%{transform:scale(1.05)}50%{transform:scale(1)}66.6%{transform:scale(1.05)}100%{transform:scale(1)}}@media screen and (max-width: 1639px){.design-system-navigation{display:none;top:-128px;width:168px;min-width:auto;height:103%}.design-system-header .title-bar__menu{display:block}}.design-system-index-page{background-color:#688903}.design-system-index-page .page-content{background-image:linear-gradient(#9c0, #688903)}.design-system-index-page .icon-sofatutor{display:block;margin-top:32px;margin-bottom:160px}.design-system-index-page .grid-x{position:relative}.design-system-index-page h1,.design-system-index-page .subheader{color:#fff}.design-system-index-page h1{margin-bottom:0}.design-system-index-page .subheader{max-width:614px;margin:0 auto 32px}.design-system-index-page .text-small{padding-top:5px}.design-system-index-page .koala-character{position:absolute;bottom:-43px;left:-4px;z-index:1}.design-system-index-page .beaver-character{position:absolute;bottom:-10px;right:-58px}@media only screen and (max-width: 959px){.design-system-index-page.is-responsive .icon-sofatutor{margin-bottom:64px}}@container main-content (max-width: 959px){.design-system-index-page.is-responsive .icon-sofatutor{margin-bottom:64px}}.design-system-card{position:relative;margin-bottom:1rem;overflow:visible}.design-system-card__headline{padding-top:16px;font-weight:bold;z-index:1}.design-system-card__list{padding:15px 0}.design-system-global-page h3{padding-top:2.5rem}.design-system-global-page .card{margin-bottom:2rem}.design-system-global-page .card.has-tip{border-bottom:1px solid #e1e1e1}.design-system-global-page .card--tints-main{display:block;width:128px;margin-bottom:0}.design-system-global-page .card--tints-main .card-divider{height:96px}.design-system-global-page .card--tints-main .card-divider--green{background-color:#06904b}.design-system-global-page .card--tints-main .card-divider--blue{background-color:#02b9de}.design-system-global-page .card--tints-main .card-divider--indigo{background-color:#06c}.design-system-global-page .card--tints-main .card-divider--deep-blue{background-color:#4538d2}.design-system-global-page .card--tints-main .card-divider--purple{background-color:#8719d6}.design-system-global-page .card--tints-main .card-divider--raspberry{background-color:#e71b92}.design-system-global-page .card--tints-main .card-divider--red{background-color:#e81a28}.design-system-global-page .card--tints-main .card-divider--deep-orange{background-color:#f57b00}.design-system-global-page .card--tints-main .card-divider--orange{background-color:#ff840a}.design-system-global-page .card--tints-main .card-divider--amber{background-color:#ebcb00}.design-system-global-page .card--tints-main .card-divider--lime{background-color:#fd0}.design-system-global-page .card--tints-main .card-divider--yellow{background-color:#fd0}.design-system-global-page .card--tints-main .card-section{height:84px}.design-system-global-page .card--tints-shades{display:inline-block;width:96px;margin-bottom:0;border-right:0 solid rgba(0,0,0,0);border-left:0 solid rgba(0,0,0,0);border-radius:0;box-shadow:none}.design-system-global-page .card--tints-shades:first-of-type{border-left:1px solid #e1e1e1;border-top-left-radius:8px;border-bottom-left-radius:8px}.design-system-global-page .card--tints-shades:last-of-type{border-right:1px solid #e1e1e1;border-top-right-radius:8px;border-bottom-right-radius:8px}.design-system-global-page .card--tints-shades .card-section{height:84px}.design-system-global-page .card--tints-shades .card-divider{height:96px}.design-system-global-page .card--tints-shades .card-divider--sofatutor-green-d4{background-color:#445b00}.design-system-global-page .card--tints-shades .card-divider--sofatutor-green-d3{background-color:#516c00}.design-system-global-page .card--tints-shades .card-divider--sofatutor-green-d2{background-color:#688903}.design-system-global-page .card--tints-shades .card-divider--sofatutor-green-d1{background-color:#88b500}.design-system-global-page .card--tints-shades .card-divider--sofatutor-green-l1{background-color:#bceb31}.design-system-global-page .card--tints-shades .card-divider--sofatutor-green-l2{background-color:#dff895}.design-system-global-page .card--tints-shades .card-divider--sofatutor-green-l3{background-color:#ecfcbd}.design-system-global-page .card--tints-shades .card-divider--sofatutor-green-l4{background-color:#faffeb}.design-system-global-page .card--tints-shades .card-divider--sofatutor-dark-green-d4{background-color:#445b00}.design-system-global-page .card--tints-shades .card-divider--sofatutor-dark-green-d3{background-color:#445b00}.design-system-global-page .card--tints-shades .card-divider--sofatutor-dark-green-d2{background-color:#516c00}.design-system-global-page .card--tints-shades .card-divider--sofatutor-dark-green-d1{background-color:#688903}.design-system-global-page .card--tints-shades .card-divider--sofatutor-dark-green-l1{background-color:#9c0}.design-system-global-page .card--tints-shades .card-divider--sofatutor-dark-green-l2{background-color:#bceb31}.design-system-global-page .card--tints-shades .card-divider--sofatutor-dark-green-l3{background-color:#dff895}.design-system-global-page .card--tints-shades .card-divider--sofatutor-dark-green-l4{background-color:#faffeb}.design-system-global-page .card--tints-shades .card-divider--green-d4{background-color:#13653c}.design-system-global-page .card--tints-shades .card-divider--green-d3{background-color:#0b713e}.design-system-global-page .card--tints-shades .card-divider--green-d2{background-color:#0b713e}.design-system-global-page .card--tints-shades .card-divider--green-d1{background-color:#0b713e}.design-system-global-page .card--tints-shades .card-divider--green-l1{background-color:#02b95e}.design-system-global-page .card--tints-shades .card-divider--green-l2{background-color:#31eb8e}.design-system-global-page .card--tints-shades .card-divider--green-l3{background-color:#74fab7}.design-system-global-page .card--tints-shades .card-divider--green-l4{background-color:#d7ffeb}.design-system-global-page .card--tints-shades .card-divider--blue-d4{background-color:#135765}.design-system-global-page .card--tints-shades .card-divider--blue-d3{background-color:#136778}.design-system-global-page .card--tints-shades .card-divider--blue-d2{background-color:#0d7d93}.design-system-global-page .card--tints-shades .card-divider--blue-d1{background-color:#0098b7}.design-system-global-page .card--tints-shades .card-divider--blue-l1{background-color:#19caed}.design-system-global-page .card--tints-shades .card-divider--blue-l2{background-color:#5fdaf2}.design-system-global-page .card--tints-shades .card-divider--blue-l3{background-color:#9febfa}.design-system-global-page .card--tints-shades .card-divider--blue-l4{background-color:#ebfcff}.design-system-global-page .card--tints-shades .card-divider--indigo-d4{background-color:#002549}.design-system-global-page .card--tints-shades .card-divider--indigo-d3{background-color:#003365}.design-system-global-page .card--tints-shades .card-divider--indigo-d2{background-color:#00478d}.design-system-global-page .card--tints-shades .card-divider--indigo-d1{background-color:#0854a0}.design-system-global-page .card--tints-shades .card-divider--indigo-l1{background-color:#489df1}.design-system-global-page .card--tints-shades .card-divider--indigo-l2{background-color:#95c6f8}.design-system-global-page .card--tints-shades .card-divider--indigo-l3{background-color:#bddcfc}.design-system-global-page .card--tints-shades .card-divider--indigo-l4{background-color:#ebf5ff}.design-system-global-page .card--tints-shades .card-divider--deep-blue-d4{background-color:#201c4b}.design-system-global-page .card--tints-shades .card-divider--deep-blue-d3{background-color:#201c4b}.design-system-global-page .card--tints-shades .card-divider--deep-blue-d2{background-color:#373082}.design-system-global-page .card--tints-shades .card-divider--deep-blue-d1{background-color:#3a30a8}.design-system-global-page .card--tints-shades .card-divider--deep-blue-l1{background-color:#6c5ffa}.design-system-global-page .card--tints-shades .card-divider--deep-blue-l2{background-color:#867bfb}.design-system-global-page .card--tints-shades .card-divider--deep-blue-l3{background-color:#aaa3fc}.design-system-global-page .card--tints-shades .card-divider--deep-blue-l4{background-color:#e3e0fe}.design-system-global-page .card--tints-shades .card-divider--purple-d4{background-color:#3e0269}.design-system-global-page .card--tints-shades .card-divider--purple-d3{background-color:#3e0269}.design-system-global-page .card--tints-shades .card-divider--purple-d2{background-color:#5c188c}.design-system-global-page .card--tints-shades .card-divider--purple-d1{background-color:#7119af}.design-system-global-page .card--tints-shades .card-divider--purple-l1{background-color:#b247ff}.design-system-global-page .card--tints-shades .card-divider--purple-l2{background-color:#c97eff}.design-system-global-page .card--tints-shades .card-divider--purple-l3{background-color:#deb0ff}.design-system-global-page .card--tints-shades .card-divider--purple-l4{background-color:#f5e7ff}.design-system-global-page .card--tints-shades .card-divider--raspberry-d4{background-color:#8a1158}.design-system-global-page .card--tints-shades .card-divider--raspberry-d3{background-color:#8a1158}.design-system-global-page .card--tints-shades .card-divider--raspberry-d2{background-color:#a60e67}.design-system-global-page .card--tints-shades .card-divider--raspberry-d1{background-color:#ca0c7b}.design-system-global-page .card--tints-shades .card-divider--raspberry-l1{background-color:#f733a5}.design-system-global-page .card--tints-shades .card-divider--raspberry-l2{background-color:#fd69bf}.design-system-global-page .card--tints-shades .card-divider--raspberry-l3{background-color:#ffa2d8}.design-system-global-page .card--tints-shades .card-divider--raspberry-l4{background-color:#fde6f3}.design-system-global-page .card--tints-shades .card-divider--red-d4{background-color:#85171e}.design-system-global-page .card--tints-shades .card-divider--red-d3{background-color:#85171e}.design-system-global-page .card--tints-shades .card-divider--red-d2{background-color:#a1141d}.design-system-global-page .card--tints-shades .card-divider--red-d1{background-color:#c3121e}.design-system-global-page .card--tints-shades .card-divider--red-l1{background-color:#fa2c3a}.design-system-global-page .card--tints-shades .card-divider--red-l2{background-color:#ff6872}.design-system-global-page .card--tints-shades .card-divider--red-l3{background-color:#ff9fa5}.design-system-global-page .card--tints-shades .card-divider--red-l4{background-color:#fff0f1}.design-system-global-page .card--tints-shades .card-divider--deep-orange-d4{background-color:#82470c}.design-system-global-page .card--tints-shades .card-divider--deep-orange-d3{background-color:#82470c}.design-system-global-page .card--tints-shades .card-divider--deep-orange-d2{background-color:#a1570c}.design-system-global-page .card--tints-shades .card-divider--deep-orange-d1{background-color:#cc6803}.design-system-global-page .card--tints-shades .card-divider--deep-orange-l1{background-color:#ff840a}.design-system-global-page .card--tints-shades .card-divider--deep-orange-l2{background-color:#f93}.design-system-global-page .card--tints-shades .card-divider--deep-orange-l3{background-color:#ffb56c}.design-system-global-page .card--tints-shades .card-divider--deep-orange-l4{background-color:#fff5ec}.design-system-global-page .card--tints-shades .card-divider--orange-d4{background-color:#82470c}.design-system-global-page .card--tints-shades .card-divider--orange-d3{background-color:#a1570c}.design-system-global-page .card--tints-shades .card-divider--orange-d2{background-color:#cc6803}.design-system-global-page .card--tints-shades .card-divider--orange-d1{background-color:#f57b00}.design-system-global-page .card--tints-shades .card-divider--orange-l1{background-color:#f93}.design-system-global-page .card--tints-shades .card-divider--orange-l2{background-color:#ffb56c}.design-system-global-page .card--tints-shades .card-divider--orange-l3{background-color:#ffd2a5}.design-system-global-page .card--tints-shades .card-divider--orange-l4{background-color:#fff5ec}.design-system-global-page .card--tints-shades .card-divider--amber-d4{background-color:#706209}.design-system-global-page .card--tints-shades .card-divider--amber-d3{background-color:#706209}.design-system-global-page .card--tints-shades .card-divider--amber-d2{background-color:#a38f0a}.design-system-global-page .card--tints-shades .card-divider--amber-d1{background-color:#ccb102}.design-system-global-page .card--tints-shades .card-divider--amber-l1{background-color:#ebcb00}.design-system-global-page .card--tints-shades .card-divider--amber-l2{background-color:#fd0}.design-system-global-page .card--tints-shades .card-divider--amber-l3{background-color:#ffef85}.design-system-global-page .card--tints-shades .card-divider--amber-l4{background-color:#fffce7}.design-system-global-page .card--tints-shades .card-divider--lime-d4{background-color:#706209}.design-system-global-page .card--tints-shades .card-divider--lime-d3{background-color:#ccb102}.design-system-global-page .card--tints-shades .card-divider--lime-d2{background-color:#ccb102}.design-system-global-page .card--tints-shades .card-divider--lime-d1{background-color:#ebcb00}.design-system-global-page .card--tints-shades .card-divider--lime-l1{background-color:#ffe95c}.design-system-global-page .card--tints-shades .card-divider--lime-l2{background-color:#ffef85}.design-system-global-page .card--tints-shades .card-divider--lime-l3{background-color:#fff3a3}.design-system-global-page .card--tints-shades .card-divider--lime-l4{background-color:#fffce7}.design-system-global-page .card--tints-shades .card-divider--yellow-d4{background-color:#706209}.design-system-global-page .card--tints-shades .card-divider--yellow-d3{background-color:#ccb102}.design-system-global-page .card--tints-shades .card-divider--yellow-d2{background-color:#ccb102}.design-system-global-page .card--tints-shades .card-divider--yellow-d1{background-color:#ebcb00}.design-system-global-page .card--tints-shades .card-divider--yellow-l1{background-color:#ffe95c}.design-system-global-page .card--tints-shades .card-divider--yellow-l2{background-color:#ffef85}.design-system-global-page .card--tints-shades .card-divider--yellow-l3{background-color:#fff3a3}.design-system-global-page .card--tints-shades .card-divider--yellow-l4{background-color:#fffce7}.design-system-global-page .card-divider,.design-system-global-page .card-section{height:8rem}.design-system-global-page .card-divider--sofatutor-green{background-color:#9c0}.design-system-global-page .card-divider--sofatutor-dark-green{background-color:#688903}.design-system-global-page .card-divider--primary{background-color:#06c}.design-system-global-page .card-divider--primary-bright{background-color:#09f}.design-system-global-page .card-divider--secondary{background-color:#ccc}.design-system-global-page .card-divider--green-200{background-color:#ecfcbd}.design-system-global-page .card-divider--warning{background-color:#fff3a3}.design-system-global-page .card-divider--alert{background-color:#ffe0e2}.design-system-global-page .card-divider--white{background-color:#fff}.design-system-global-page .card-divider--light-gray{background-color:#faf9f9}.design-system-global-page .card-divider--medium-gray{background-color:#e5e5e5}.design-system-global-page .card-divider--dark-gray{background-color:#5b5b5b}.design-system-global-page .card-divider--gray{background-color:#7f7f7f}.design-system-global-page .card-divider--black{background-color:#333}.design-system-global-page .card-divider--hover-20{opacity:.2}.design-system-global-page .card-divider--hover-40{opacity:.4}.tints-and-shades .grid-x.cell.shrink{box-shadow:0 8px 24px -12px rgba(51,51,51,.25)}.tints-and-shades .card{cursor:pointer}.design-system-grid-page .beaver-character{position:absolute;bottom:-215px;right:100px;transform:rotate(-90.5deg)}.design-system-table-grid{width:784px}.design-system-table-grid__header{background-color:#e5e5e5}.design-system-table-grid__header h4{margin-bottom:0}.design-system-table-grid__data-highlight{background-color:#faf9f9}@media only screen and (max-width: 959px){.design-system-table-grid{width:auto}}@container main-content (max-width: 959px){.design-system-table-grid{width:auto}}.design-system-components-page .text-small{display:block}.design-system-components-page .text-small--green{color:#9c0}.design-system-components-page .callout{margin-bottom:8px}.design-system-components-page .callout .info-close{right:20px}.design-system-components-page .page-banner--campaign .page-banner__icon{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/geschenk-042cea08f1ff2661891b267724b2f7a1.svg) center center no-repeat;background-size:contain}.design-system-components-page .page-banner__countdown,.design-system-components-page .page-banner__countdown-title{display:block}.design-system-components-page .progress{margin-bottom:8px}.design-system-components-page .close-button{position:relative}.design-system-components-page .input-hover{border:1px solid #7f7f7f}.design-system-components-page .input-focus,.design-system-components-page .select-focus{background-color:#faf9f9}.design-system-components-page .input-focus{border:1px solid #ccc}.design-system-components-page .select-hover{background-color:#ecfcbd}.design-system-components-page .input-group{margin-bottom:32px}.design-system-components-page .snippet-button{cursor:pointer}.design-system-components-page .snippet-button .icon{position:relative;top:-1px}.design-system-components-page .form-checkbox__input.input-hover+.form-checkbox__label::before{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/form/checkbox_hover-1089006cdaa4fb4413e6818fe44e6033.svg) center center no-repeat;background-size:contain}.design-system-components-page .form-checkbox__input.input-focus+.form-checkbox__label::before{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/form/checkbox_focus-7f9105c06e1a086e7b6bb4e735efd529.svg) center center no-repeat;background-size:contain}.design-system-components-page .form-checkbox__input.input-selected+.form-checkbox__label::before{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/form/checkbox_selected-a368f6a56cd3ea417b1f303ee85eeb3e.svg) center center no-repeat;background-size:contain}.design-system-components-page .form-radio.is-hovered .form-radio__label::before{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/form/radio_hover-43208941cddba73b45644b845105bde8.svg) center center no-repeat;background-size:contain}.design-system-components-page .form-radio.is-focused .form-radio__label::before{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/form/radio_focus-771b9a1023e91b27bee0d053f0a85794.svg) center center no-repeat;background-size:contain}.design-system-components-page .form-radio.is-focused.form-radio--outlined{background-color:#faf9f9}.design-system-components-page .form-radio.is-selected .form-radio__label::before{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/form/radio_selected-a644b305e6372a6398f745a2e9e19917.svg) center center no-repeat;background-size:contain}.design-system-components-page .form-checkbox-slide{display:inline-block;margin-right:16px}.design-system-components-page .slider-on-hover+.form-checkbox-slide__label::before{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/form/checkbox_slide_off_hover-4aa688a9dfc49d517f884c0d8a06547e.svg) center center no-repeat;background-size:contain}.design-system-components-page .slider-on-hover:checked+.form-checkbox-slide__label::before{background:url(https://assets.production.cdn.sofatutor.net/packs/static/images/form/checkbox_slide_on_hover-46ba23be952b4c404ef3cf5da7e848a1.svg) center center no-repeat;background-size:contain}.design-system-form-sections{margin-bottom:64px}.design-system-component:not(:last-of-type){margin-bottom:96px}.seperated-progressbar-text{margin-top:-8px;float:left}.design-system-card-sections .is-hovered .card__image-wrapper::after{display:block}.design-system-card-sections .is-hovered .sprites-content-structure-play{display:block}.design-system-card-sections .card-section--min-height{min-height:200px}.design-system-card-sections .is-phone-version .card{-webkit-tap-highlight-color:rgba(0,0,0,0);flex-direction:row}.design-system-card-sections .is-phone-version .card.on-touch-hover{background:#faf9f9}.design-system-card-sections .is-phone-version .card:hover .card__image-wrapper::after{border-top-right-radius:0}.design-system-card-sections .is-phone-version .card-section{display:inline-block;width:calc(100% - 126px);height:80px;padding:8px;padding-right:40px}.design-system-card-sections .is-phone-version .card__image{display:inline-block;width:126px;height:80px;border-top-right-radius:0;border-bottom-left-radius:8px}.design-system-card-sections .is-phone-version .card__image-wrapper{display:inline-block;border-top-right-radius:0;border-bottom-left-radius:8px}.design-system-card-sections .is-phone-version .icon--arrow-simple{display:inline-block}.design-system-reveal-sections{min-height:500px;margin-bottom:64px;background-color:#333;text-align:center}.design-system-reveal-sections .reveal{display:block}.design-system-reveal-sections .reveal.tiny{top:50px}.design-system-reveal-sections .reveal.tiny .button.primary{margin-top:138px}.design-system-reveal-sections .reveal.tiny svg{position:absolute;left:50%;transform:translateX(-50%)}.design-system-reveal-sections .reveal.small{top:25px}.design-system-reveal-sections .reveal.small .button.primary{width:200px;margin-top:-4px}.design-system-reveal-sections .reveal.large{padding-top:0;overflow:visible}.design-system-reveal-sections .reveal.large .primary{width:200px}.design-system-reveal-sections .reveal.large .h3{margin-top:96px}.design-system-reveal-sections .reveal.large svg{position:absolute;top:-48px;left:50%;transform:translateX(-50%)}.design-system-reveal-sections .reveal.full{height:auto;height:initial;min-height:0;border:2px dotted #e81a28}.design-system-reveal-sections .reveal.full .primary{width:300px;margin:8px auto}.design-system-reveal-sections .reveal-link{display:block}.design-system-reveal-sections .button{width:100%}.design-system-reveal-sections .character-image{display:block;width:240px;height:175px;margin:-90px auto 16px}.design-system-icons-page .icons-list__item{margin-bottom:16px}.design-system-icons-page .icons-list__item .icon{margin-bottom:8px;padding:8px;border-radius:4px}.design-system-icons-page .action-icons .icon{cursor:pointer}.design-system-icons-page .action-icons .icon:hover{background:#ecfcbd;color:#9c0}.design-system-logos-page .space-128{margin-bottom:128px}.design-system-logos-page h3{padding-top:2.5rem}.design-system-logos-page__content{font-family:"Open Sans",Helvetica,Arial,sans-serif;margin-bottom:16px;font-size:18px}.design-system-logos-page__background-black{display:flex;align-items:center;width:448px;height:256px;background-color:#333}.design-system-logos-page__background-green{display:flex;align-items:center;width:448px;height:256px;background-color:#9c0}.design-system-logos-page__background-small-gray{align-items:center;width:448px;height:256px;padding-top:32px;padding-left:32px;background-color:#faf9f9}.design-system-logos-page__background-small-black{align-items:center;width:448px;height:256px;margin-right:45px;padding-top:32px;padding-left:32px;background-color:#333}.design-system-logos-page__background-medium-black{align-items:center;width:448px;height:256px;padding-top:32px;padding-left:32px;background-color:#333}.design-system-logos-page__background-large-gray{display:flex;align-items:center;width:928px;height:512px;background-color:#faf9f9}.design-system-logos-page__background-international{display:flex;align-items:center;width:448px;height:256px;background-color:#333}.design-system-logos-page__logo-crimes{position:relative;max-width:1024px;grid-gap:16px 16px}.design-system-logos-page__logo-crimes .icon--circle-close{position:absolute;top:15px;right:100px;color:#ff6872}.design-system-logos-page__logo-crimes p{max-width:288px}.design-system-logos-page__background-small-black-sofa{display:flex;align-items:center;width:448px;height:256px;margin-right:35px;background-color:#333}.design-system-logos-page__background-small-dark-green-sofa{display:flex;align-items:center;width:448px;height:256px;margin-right:45px;background-color:#688903}.design-system-logos-page .card{width:208px;height:256px;margin-bottom:2rem}.design-system-logos-page .card .card-divider{height:8rem}.design-system-logos-page .card .card-divider--green{background-color:#06904b}.design-system-logos-page .card .card-section{position:relative;height:8rem;padding:16px}.design-system-logos-page .card .card-section .card-section{height:84px}.design-system-logos-page .card .card-section .card-divider{height:96px}.design-system-logos-page .card-divider,.design-system-logos-page .card-section{height:8rem}.design-system-logos-page .card-divider--sofatutor-green{background-color:#9c0}.design-system-logos-page .card-divider--sofatutor-dark-green{background-color:#688903}.design-system-logos-page .card-divider--primary{background-color:#06c}.design-system-logos-page .card-divider--primary-bright{background-color:#09f}.design-system-logos-page .card-divider--secondary{background-color:#ccc}.design-system-logos-page .card-divider--green-200{background-color:#ecfcbd}.design-system-logos-page .card-divider--warning{background-color:#fff3a3}.design-system-logos-page .card-divider--alert{background-color:#ffe0e2}.design-system-logos-page .card-divider--black{background-color:#333}.toast{position:relative}.toast__content{position:relative;width:323px;padding:32px;border-radius:24px;background-image:linear-gradient(230deg, #fff3a3 25%, #ffe95c 100%)}.toast__image{position:absolute;top:-64px;left:50%;transform:translateX(-50%)}.toast__close{position:absolute;top:12px;right:12px}.toast__close:hover{cursor:pointer}.toast__icon{position:absolute;bottom:0;left:0;width:60px;height:60px;border-radius:24px;background-color:#329423}.toast__icon:hover{cursor:pointer}@media only screen and (max-width: 639px){.toast__content{width:222px;padding:32px 16px}.toast__text{font-size:12px}}@container main-content (max-width: 639px){.toast__content{width:222px;padding:32px 16px}.toast__text{font-size:12px}}.tassel{position:relative;display:block;width:auto;width:initial;max-width:417px;margin:16px auto;background-color:#f57b00;text-align:center}.tassel--weekly-price{padding:2px 12px;background-color:#fff3a3;color:#333}.tassel--weekly-price.tassel::before,.tassel--weekly-price.tassel::after{border-top:14px solid #fff3a3;border-bottom:14px solid #fff3a3}.tassel--weekly-price.tassel::before{border-right:12px solid #fff3a3;border-left:12px solid rgba(0,0,0,0)}.tassel--weekly-price.tassel::after{border-right:12px solid rgba(0,0,0,0);border-left:12px solid #fff3a3}.tassel::before,.tassel::after{display:block;width:0;height:0;padding-top:0;transform:translateY(-50%);border-top:20px solid #f57b00;border-bottom:20px solid #f57b00;content:""}.tassel::before{position:absolute;top:50%;left:-20px;border-right:15px solid #f57b00;border-left:15px solid rgba(0,0,0,0)}.tassel::after{position:absolute;top:50%;right:-20px;border-right:15px solid rgba(0,0,0,0);border-left:15px solid #f57b00}.tassel__text{padding:8px 16px;color:#fff;font-size:16px;font-weight:300;line-height:1.5}@media only screen and (max-width: 639px){.tassel{width:90%}.tassel::before,.tassel::after{border-top-width:17px;border-bottom-width:17px}.tassel::before{position:absolute;top:50%;left:-10px;border-right:10px solid #f57b00;border-left:10px solid rgba(0,0,0,0)}.tassel::after{position:absolute;top:50%;right:-10px;border-right:10px solid rgba(0,0,0,0);border-left:10px solid #f57b00}.tassel .tassel__text{font-size:11.4px;line-height:1.6}.tassel .tassel{margin-bottom:16px}}@container main-content (max-width: 639px){.tassel{width:90%}.tassel::before,.tassel::after{border-top-width:17px;border-bottom-width:17px}.tassel::before{position:absolute;top:50%;left:-10px;border-right:10px solid #f57b00;border-left:10px solid rgba(0,0,0,0)}.tassel::after{position:absolute;top:50%;right:-10px;border-right:10px solid rgba(0,0,0,0);border-left:10px solid #f57b00}.tassel .tassel__text{font-size:11.4px;line-height:1.6}.tassel .tassel{margin-bottom:16px}}.features-module{position:relative;padding:64px 0;text-align:center}.features-module h3{font-size:32px}.features-module__image{position:absolute;bottom:0;left:-80px;width:288px;height:262px;margin-right:16px;margin-left:-56px}.features-module__button{width:258px;height:50px;margin-top:24px;padding:12px 15px;font-size:18px}.features-module__list{position:relative;display:flex;justify-content:center;text-align:center}.features-module__item{position:relative;left:0;display:flex;flex-direction:column;justify-content:flex-start;width:150px;height:150px;z-index:1;mix-blend-mode:multiply}.features-module__item:not(:first-of-type){margin-left:-15px}.features-module__item:last-of-type{margin-right:0}.features-module__item::before{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:50%;content:"";z-index:-1}.features-module__item--sofaheld::before{background-color:#ebf5ff}.features-module__item--sofaheld .features-module__quantity{color:#283f91}.features-module__item--vocabulary_trainer::before{background-color:#f5e7ff}.features-module__item--vocabulary_trainer .features-module__quantity{color:#7900b5}.features-module__item--videos::before{background-color:#d7ffeb}.features-module__item--videos .features-module__quantity{color:#009100}.features-module__item--exercises::before{background-color:#fffce7}.features-module__item--exercises .features-module__quantity{color:#e3b500}.features-module__item--worksheet::before{background-color:#fff0f1}.features-module__item--worksheet .features-module__quantity{color:#b60000}.features-module__item--chat::before{background-color:#ebfcff}.features-module__item--chat .features-module__quantity{color:#0098b7}.features-module__quantity{font-family:"Open Sans",Helvetica,Arial,sans-serif;margin-top:20px;font-size:32px;font-weight:600}.features-module__text{font-family:"Open Sans",Helvetica,Arial,sans-serif;margin-top:-4px;color:#333;font-size:16px;font-weight:bold}@media only screen and (max-width: 959px){.features-module{position:relative;padding-top:24px;padding-bottom:24px;text-align:center}.features-module h4{font-size:18px;text-align:center}.features-module__image{position:relative;bottom:-26px;left:0;width:108px;height:98px;margin-right:16px;margin-left:-56px}.features-module__button{width:219px;margin-top:24px;padding:12px 15px;font-size:16px}.features-module__list{display:grid;grid-template-columns:repeat(3, auto);grid-gap:10px}.features-module__item{width:120px;height:120px}.features-module__item:not(:first-of-type){margin-left:auto}.features-module__item:last-of-type{margin-right:auto}.features-module__quantity{margin-top:15px;font-size:28px}.features-module__text{font-size:12px}.features-module__subtext{margin-top:8px}}@container main-content (max-width: 959px){.features-module{position:relative;padding-top:24px;padding-bottom:24px;text-align:center}.features-module h4{font-size:18px;text-align:center}.features-module__image{position:relative;bottom:-26px;left:0;width:108px;height:98px;margin-right:16px;margin-left:-56px}.features-module__button{width:219px;margin-top:24px;padding:12px 15px;font-size:16px}.features-module__list{display:grid;grid-template-columns:repeat(3, auto);grid-gap:10px}.features-module__item{width:120px;height:120px}.features-module__item:not(:first-of-type){margin-left:auto}.features-module__item:last-of-type{margin-right:auto}.features-module__quantity{margin-top:15px;font-size:28px}.features-module__text{font-size:12px}.features-module__subtext{margin-top:8px}}@media only screen and (max-width: 639px){.features-module h3{text-align:center}.features-module__image{position:relative;bottom:-24px;width:108px;height:98px;margin-right:8px;margin-left:-56px}.features-module__button{width:219px;margin-top:8px;padding:11px 15px}.features-module__subtext{margin-top:8px}.features-module__item{width:80px;height:80px}.features-module__quantity{font-size:14px}.features-module__text{font-size:8px}}@container main-content (max-width: 639px){.features-module h3{text-align:center}.features-module__image{position:relative;bottom:-24px;width:108px;height:98px;margin-right:8px;margin-left:-56px}.features-module__button{width:219px;margin-top:8px;padding:11px 15px}.features-module__subtext{margin-top:8px}.features-module__item{width:80px;height:80px}.features-module__quantity{font-size:14px}.features-module__text{font-size:8px}}.features-module-small{position:relative;padding-bottom:32px}.features-module-small__headline{margin-bottom:24px;line-height:1.4;text-align:left}.features-module-small__image{position:absolute;bottom:0;left:-40px;width:141px;height:131px}.features-module-small__button{margin:24px 0 0 24px}.features-module-small__button-text{margin-left:24px;font-size:10px}.features-module-small__list{position:relative;display:flex;justify-content:center;text-align:center}.features-module-small__item{position:relative;left:0;display:flex;flex-direction:column;justify-content:flex-start;width:120px;height:120px;z-index:1;mix-blend-mode:multiply}.features-module-small__item:not(:first-of-type){margin-left:-15px}.features-module-small__item:last-of-type{margin-right:0}.features-module-small__item::before{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:50%;content:"";z-index:-1}.features-module-small__item--sofaheld::before{background-color:#ebf5ff}.features-module-small__item--sofaheld .features-module-small__quantity{color:#283f91}.features-module-small__item--vocabulary_trainer::before{background-color:#f5e7ff}.features-module-small__item--vocabulary_trainer .features-module-small__quantity{color:#af66d3}.features-module-small__item--videos::before{background-color:#d7ffeb}.features-module-small__item--videos .features-module-small__quantity{color:#690}.features-module-small__item--exercises::before{background-color:#fffce7}.features-module-small__item--exercises .features-module-small__quantity{color:#e1b800}.features-module-small__item--worksheet::before{background-color:#fff0f1}.features-module-small__item--worksheet .features-module-small__quantity{color:#ee6f6f}.features-module-small__item--chat::before{background-color:#ebfcff}.features-module-small__item--chat .features-module-small__quantity{color:#02b9de}.features-module-small__quantity{font-family:"Open Sans",Helvetica,Arial,sans-serif;margin-top:20px;font-size:28px;font-weight:300}.features-module-small__text{font-family:"Open Sans",Helvetica,Arial,sans-serif;margin-top:-4px;color:#333;font-size:12px;font-weight:bold}@media only screen and (max-width: 959px){.features-module-small__image{position:absolute;bottom:0;left:60px}.features-module-small__button-text{color:#333;text-align:center}.features-module-small__list{display:flex;grid-template-columns:repeat(3, auto);grid-gap:10px}.features-module-small__item{width:80px;height:80px;margin:16px 8px 0 0}.features-module-small__quantity{margin-top:15px;font-size:14px}.features-module-small__text{font-size:8px}}@container main-content (max-width: 959px){.features-module-small__image{position:absolute;bottom:0;left:60px}.features-module-small__button-text{color:#333;text-align:center}.features-module-small__list{display:flex;grid-template-columns:repeat(3, auto);grid-gap:10px}.features-module-small__item{width:80px;height:80px;margin:16px 8px 0 0}.features-module-small__quantity{margin-top:15px;font-size:14px}.features-module-small__text{font-size:8px}}@media only screen and (max-width: 639px){.features-module-small__headline{text-align:center}.features-module-small__image{position:absolute;bottom:-28px;left:-60px}.features-module-small__button-text{font-size:12px}.features-module-small__list{display:grid}.features-module-small__item{width:80px;height:80px;margin:0}.features-module-small__item:not(:first-of-type){margin-left:0}.features-module-small__quantity{font-size:14px}.features-module-small__text{font-size:8px}}@container main-content (max-width: 639px){.features-module-small__headline{text-align:center}.features-module-small__image{position:absolute;bottom:-28px;left:-60px}.features-module-small__button-text{font-size:12px}.features-module-small__list{display:grid}.features-module-small__item{width:80px;height:80px;margin:0}.features-module-small__item:not(:first-of-type){margin-left:0}.features-module-small__quantity{font-size:14px}.features-module-small__text{font-size:8px}}