/*!
 * OverlayScrollbars
 * https://github.com/KingSora/OverlayScrollbars
 *
 * Version: 1.10.0
 *
 * Copyright KingSora | Rene Haas.
 * https://github.com/KingSora
 *
 * Released under the MIT license.
 * Date: 11.10.2019
 */
html.os-html,html.os-html>.os-host{display:block;overflow:hidden;box-sizing:border-box;height:100%!important;width:100%!important;min-width:100%!important;min-height:100%!important;margin:0!important;position:absolute!important}html.os-html>.os-host>.os-padding{position:absolute}body.os-dragging,body.os-dragging *{cursor:default}.os-host,.os-host-textarea{position:relative;overflow:visible!important;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;-ms-grid-row-align:flex-start;align-items:flex-start}.os-host-flexbox{overflow:hidden!important;display:-webkit-box;display:-ms-flexbox;display:flex}.os-host-flexbox>.os-size-auto-observer{height:inherit!important}.os-host-flexbox>.os-content-glue{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0}.os-host-flexbox>.os-size-auto-observer,.os-host-flexbox>.os-content-glue{min-height:0;min-width:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:auto;flex-basis:auto}#os-dummy-scrollbar-size{position:fixed;opacity:0;-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';visibility:hidden;overflow:scroll;height:500px;width:500px}#os-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}#os-dummy-scrollbar-size,.os-viewport{-ms-overflow-style:scrollbar!important}.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size,.os-viewport-native-scrollbars-invisible.os-viewport{scrollbar-width:none!important}.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar,.os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar,.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner,.os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner{display:none!important;width:0!important;height:0!important;visibility:hidden!important;background:0 0!important}.os-content-glue{box-sizing:inherit;max-height:100%;max-width:100%;width:100%;pointer-events:none}.os-padding{box-sizing:inherit;direction:inherit;position:absolute;overflow:visible;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:1}.os-host-overflow>.os-padding{overflow:hidden}.os-viewport{direction:inherit!important;box-sizing:inherit!important;resize:none!important;outline:0!important;position:absolute;overflow:hidden;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.os-content-arrange{position:absolute;z-index:-1;min-height:1px;min-width:1px;pointer-events:none}.os-content{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:100%;height:100%;width:100%;visibility:visible}.os-content:before,.os-content:after{content:'';display:table;width:0;height:0;line-height:0;font-size:0}.os-content>.os-textarea{box-sizing:border-box!important;direction:inherit!important;background:0 0!important;outline:0 transparent!important;overflow:hidden!important;position:absolute!important;display:block!important;top:0!important;left:0!important;margin:0!important;border-radius:0!important;float:none!important;-webkit-filter:none!important;filter:none!important;border:0!important;resize:none!important;-webkit-transform:none!important;transform:none!important;max-width:none!important;max-height:none!important;box-shadow:none!important;-webkit-perspective:none!important;perspective:none!important;opacity:1!important;z-index:1!important;clip:auto!important;vertical-align:baseline!important;padding:0}.os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea{right:0!important}.os-content>.os-textarea-cover{z-index:-1;pointer-events:none}.os-content>.os-textarea[wrap=off]{white-space:pre!important;margin:0!important}.os-text-inherit{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;font-variant:inherit;text-transform:inherit;text-decoration:inherit;text-indent:inherit;text-align:inherit;text-shadow:inherit;text-overflow:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit;unicode-bidi:inherit;direction:inherit;color:inherit;cursor:text}.os-resize-observer,.os-resize-observer-host{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.os-resize-observer-host{padding:inherit;border:inherit;border-color:transparent;border-style:solid;box-sizing:border-box}.os-resize-observer-host:after{content:''}.os-resize-observer-host>.os-resize-observer,.os-resize-observer-host:after{height:200%;width:200%;padding:inherit;border:inherit;margin:0;display:block;box-sizing:content-box}.os-resize-observer.observed,object.os-resize-observer{box-sizing:border-box!important}.os-size-auto-observer{box-sizing:inherit!important;height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:0;flex-basis:0}.os-size-auto-observer>.os-resize-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}.os-resize-observer-item{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:-1;opacity:0;direction:ltr!important;-webkit-box-flex:0!important;-ms-flex:none!important;flex:none!important}.os-resize-observer-item-final{position:absolute;left:0;top:0;-webkit-transition:none!important;transition:none!important;-webkit-box-flex:0!important;-ms-flex:none!important;flex:none!important}.os-resize-observer{-webkit-animation-duration:.001s;animation-duration:.001s;-webkit-animation-name:hs-resize-observer-dummy-animation;animation-name:hs-resize-observer-dummy-animation}.os-host-transition>.os-scrollbar,.os-host-transition>.os-scrollbar-corner{-webkit-transition:opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s;transition:opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s}html.os-html>.os-host>.os-scrollbar{position:absolute;z-index:999999}.os-scrollbar,.os-scrollbar-corner{position:absolute;opacity:1;-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';z-index:1}.os-scrollbar-corner{bottom:0;right:0}.os-scrollbar{pointer-events:none}.os-scrollbar-track{pointer-events:auto;position:relative;height:100%;width:100%;padding:0!important;border:0!important}.os-scrollbar-handle{pointer-events:auto;position:absolute;width:100%;height:100%}.os-scrollbar-handle-off,.os-scrollbar-track-off{pointer-events:none}.os-scrollbar.os-scrollbar-unusable,.os-scrollbar.os-scrollbar-unusable *{pointer-events:none!important}.os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-host-rtl>.os-scrollbar-horizontal{right:0}.os-host-rtl>.os-scrollbar-vertical{right:auto;left:0}.os-host-rtl>.os-scrollbar-corner{right:auto;left:0}.os-scrollbar-auto-hidden,.os-padding+.os-scrollbar-corner,.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner,.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal,.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner,.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical,.os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner,.os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner,.os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner{opacity:0;visibility:hidden;pointer-events:none}.os-scrollbar-corner-resize-both{cursor:nwse-resize}.os-host-rtl>.os-scrollbar-corner-resize-both{cursor:nesw-resize}.os-scrollbar-corner-resize-horizontal{cursor:ew-resize}.os-scrollbar-corner-resize-vertical{cursor:ns-resize}.os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize{cursor:default}.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical{top:0;bottom:0}.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal,.os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal{right:0;left:0}.os-scrollbar:hover,.os-scrollbar-corner.os-scrollbar-corner-resize{opacity:1!important;visibility:visible!important}.os-scrollbar-corner.os-scrollbar-corner-resize{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB3aWR0aD0iMTAiICAgaGVpZ2h0PSIxMCIgICB2ZXJzaW9uPSIxLjEiPiAgPGcgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTEwNDIuMzYyMikiICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjQ5NDExNzY1O2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDcuNDI0MjE4NywxMDQyLjM2MjIgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjYgLTEuMzEwMTU2MiwxLjMxMDIgMCwwLjI5OSAwLjEwNDM0MTksMC41NzEgMC4yNzI5NDkyLDAuNzkxNSAwLjIwOTEwMjQsMC4xNDEzIDAuNDY1NjIwNiwwLjIxODQgMC43MzY5NjI5LDAuMjE4NCAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NiAxLjMxMDE1NjMsLTEuMzEwMiAwLC0wLjI3MTMgLTAuMDc3MDkzLC0wLjUyNzggLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0MSwtMC4xNjg2IC0wLjQ5MjU0NDMsLTAuMjcyOSAtMC43OTE1NTI4LC0wLjI3MjkgeiBtIDAsMy4wODQzIGMgLTAuNzIzNTc5MiwwIC0xLjMxMDE1NjIsMC41ODY2IC0xLjMxMDE1NjIsMS4zMTAyIDAsMC4yOTkgMC4xMDQzNDE5LDAuNTcxIDAuMjcyOTQ5MiwwLjc5MTUgMC4yMDkxMDI0LDAuMTQxMyAwLjQ2NTYyMDYsMC4yMTg0IDAuNzM2OTYyOSwwLjIxODQgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjYgMS4zMTAxNTYzLC0xLjMxMDIgMCwtMC4yNzEzIC0wLjA3NzA5MywtMC41Mjc4IC0wLjIxODM1OTQsLTAuNzM2OSAtMC4yMjA0OTQxLC0wLjE2ODYgLTAuNDkyNTQ0MywtMC4yNzMgLTAuNzkxNTUyOCwtMC4yNzMgeiBtIC0zLjA4NDMyNjEsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NiAtMS4zMTAxNTYzLDEuMzEwMiAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MSAwLjI3Mjk0OTIsMC43OTE1IDAuMjA5MTAyNCwwLjE0MTMgMC40NjU2MjA3LDAuMjE4NCAwLjczNjk2MjksMC4yMTg0IDAuNzIzNTc5MywwIDEuMzEwMTU2MywtMC41ODY2IDEuMzEwMTU2MywtMS4zMTAyIDAsLTAuMjcxMyAtMC4wNzcwOTMsLTAuNTI3OCAtMC4yMTgzNTk0LC0wLjczNjkgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzMgLTAuNzkxNTUyNywtMC4yNzMgeiBtIC0zLjAyOTczNjQsMy4wMjk4IEMgMC41ODY1NzY5MywxMDQ4LjQ3NjMgMCwxMDQ5LjA2MjggMCwxMDQ5Ljc4NjQgYyAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyMiwwLjc5MTYgMC4yMDkxMDIyOSwwLjE0MTIgMC40NjU2MjA2NSwwLjIxODMgMC43MzY5NjI4OCwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHogbSAzLjAyOTczNjQsMCBjIC0wLjcyMzU3OTMsMCAtMS4zMTAxNTYzLDAuNTg2NSAtMS4zMTAxNTYzLDEuMzEwMSAwLDAuMjk5IDAuMTA0MzQxOSwwLjU3MTEgMC4yNzI5NDkyLDAuNzkxNiAwLjIwOTEwMjQsMC4xNDEyIDAuNDY1NjIwNywwLjIxODMgMC43MzY5NjI5LDAuMjE4MyAwLjcyMzU3OTMsMCAxLjMxMDE1NjMsLTAuNTg2NSAxLjMxMDE1NjMsLTEuMzEwMSAwLC0wLjI3MTQgLTAuMDc3MDkzLC0wLjUyNzkgLTAuMjE4MzU5NCwtMC43MzcgLTAuMjIwNDk0LC0wLjE2ODYgLTAuNDkyNTQ0MiwtMC4yNzI5IC0wLjc5MTU1MjcsLTAuMjcyOSB6IG0gMy4wODQzMjYxLDAgYyAtMC43MjM1NzkyLDAgLTEuMzEwMTU2MiwwLjU4NjUgLTEuMzEwMTU2MiwxLjMxMDEgMCwwLjI5OSAwLjEwNDM0MTksMC41NzExIDAuMjcyOTQ5MiwwLjc5MTYgMC4yMDkxMDI0LDAuMTQxMiAwLjQ2NTYyMDYsMC4yMTgzIDAuNzM2OTYyOSwwLjIxODMgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjUgMS4zMTAxNTYzLC0xLjMxMDEgMCwtMC4yNzE0IC0wLjA3NzA5MywtMC41Mjc5IC0wLjIxODM1OTQsLTAuNzM3IC0wLjIyMDQ5NDEsLTAuMTY4NiAtMC40OTI1NDQzLC0wLjI3MjkgLTAuNzkxNTUyOCwtMC4yNzI5IHoiLz4gIDwvZz4gIDxnICAgICBzdHlsZT0iZGlzcGxheTppbmxpbmUiPiAgICA8cGF0aCAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTpub25lIiAgICAgICBkPSJtIDguMjE1NzcxNSwwLjI3Mjk0OTIyIGMgMC4xNDEyNjY3LDAuMjA5MTAyMjkgMC4yMTgzNTk0LDAuNDY1NjIwNjUgMC4yMTgzNTk0LDAuNzM2OTYyODggMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDc2IC0wLjIwNTUxNzYsLTAuNzk3Nzk2NTkgLTAuNTE4NjAzNSwtMS4wMzcyMDY5OCB6IG0gMCwzLjA4NDMyNjE4IGMgMC4xNDEyNjY3LDAuMjA5MTAyMyAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MiAtMS4zMTAxNTYzLDEuMzEwMTU2MiAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTkzIDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAtMy4wODQzMjYyLDAgYyAwLjE0MTI2NjcsMC4yMDkxMDIzIDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYyIC0xLjMxMDE1NjMsMS4zMTAxNTYyIC0wLjI3MTM0MjIsMCAtMC41Mjc4NjA1LC0wLjA3NzA5MyAtMC43MzY5NjI5LC0wLjIxODM1OTMgMC4yMzk0MTA0LDAuMzEzMDg1OSAwLjYxMjYzNjMsMC41MTg2MDM1IDEuMDM3MjA3MSwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYyLC0wLjU4NjU3NyAxLjMxMDE1NjIsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NSwtMC43OTc3OTY3IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogTSAyLjEwMTcwOSw2LjM4NzAxMTcgYyAwLjE0MTI2NjcsMC4yMDkxMDI0IDAuMjE4MzU5NCwwLjQ2NTYyMDYgMC4yMTgzNTk0LDAuNzM2OTYyOSAwLDAuNzIzNTc5MyAtMC41ODY1NzcsMS4zMTAxNTYzIC0xLjMxMDE1NjMsMS4zMTAxNTYzIC0wLjI3MTM0MjIzLDAgLTAuNTI3ODYwNTksLTAuMDc3MDkzIC0wLjczNjk2Mjg4LC0wLjIxODM1OTQgMC4yMzk0MTAzOSwwLjMxMzA4NTkgMC42MTI2MzYyMiwwLjUxODYwMzUgMS4wMzcyMDY5OCwwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHogbSAzLjAyOTczNjMsMCBjIDAuMTQxMjY2NywwLjIwOTEwMjQgMC4yMTgzNTk0LDAuNDY1NjIwNiAwLjIxODM1OTQsMC43MzY5NjI5IDAsMC43MjM1NzkzIC0wLjU4NjU3NywxLjMxMDE1NjMgLTEuMzEwMTU2MywxLjMxMDE1NjMgLTAuMjcxMzQyMiwwIC0wLjUyNzg2MDUsLTAuMDc3MDkzIC0wLjczNjk2MjksLTAuMjE4MzU5NCAwLjIzOTQxMDQsMC4zMTMwODU5IDAuNjEyNjM2MywwLjUxODYwMzUgMS4wMzcyMDcxLDAuNTE4NjAzNSAwLjcyMzU3OTMsMCAxLjMxMDE1NjIsLTAuNTg2NTc3IDEuMzEwMTU2MiwtMS4zMTAxNTYzIDAsLTAuNDI0NTcwOCAtMC4yMDU1MTc1LC0wLjc5Nzc5NjYgLTAuNTE4NjAzNSwtMS4wMzcyMDcgeiBtIDMuMDg0MzI2MiwwIGMgMC4xNDEyNjY3LDAuMjA5MTAyNCAwLjIxODM1OTQsMC40NjU2MjA2IDAuMjE4MzU5NCwwLjczNjk2MjkgMCwwLjcyMzU3OTMgLTAuNTg2NTc3LDEuMzEwMTU2MyAtMS4zMTAxNTYzLDEuMzEwMTU2MyAtMC4yNzEzNDIzLDAgLTAuNTI3ODYwNSwtMC4wNzcwOTMgLTAuNzM2OTYyOSwtMC4yMTgzNTk0IDAuMjM5NDEwNCwwLjMxMzA4NTkgMC42MTI2MzYyLDAuNTE4NjAzNSAxLjAzNzIwNywwLjUxODYwMzUgMC43MjM1NzkzLDAgMS4zMTAxNTYzLC0wLjU4NjU3NyAxLjMxMDE1NjMsLTEuMzEwMTU2MyAwLC0wLjQyNDU3MDggLTAuMjA1NTE3NiwtMC43OTc3OTY2IC0wLjUxODYwMzUsLTEuMDM3MjA3IHoiIC8+ICA8L2c+PC9zdmc+);background-repeat:no-repeat;background-position:100% 100%;pointer-events:auto!important}.os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.os-host-overflow{overflow:hidden!important}@-webkit-keyframes hs-resize-observer-dummy-animation{0%{z-index:0}to{z-index:-1}}@keyframes hs-resize-observer-dummy-animation{0%{z-index:0}to{z-index:-1}}.os-theme-none>.os-scrollbar-horizontal,.os-theme-none>.os-scrollbar-vertical,.os-theme-none>.os-scrollbar-corner{display:none!important}.os-theme-none>.os-scrollbar-corner-resize{display:block!important;min-width:10px;min-height:10px}.os-theme-dark>.os-scrollbar-horizontal,.os-theme-light>.os-scrollbar-horizontal{right:10px;height:10px}.os-theme-dark>.os-scrollbar-vertical,.os-theme-light>.os-scrollbar-vertical{bottom:10px;width:10px}.os-theme-dark.os-host-rtl>.os-scrollbar-horizontal,.os-theme-light.os-host-rtl>.os-scrollbar-horizontal{left:10px;right:0}.os-theme-dark>.os-scrollbar-corner,.os-theme-light>.os-scrollbar-corner{height:10px;width:10px}.os-theme-dark>.os-scrollbar-corner,.os-theme-light>.os-scrollbar-corner{background-color:transparent}.os-theme-dark>.os-scrollbar,.os-theme-light>.os-scrollbar{padding:2px;box-sizing:border-box;background:0 0}.os-theme-dark>.os-scrollbar.os-scrollbar-unusable,.os-theme-light>.os-scrollbar.os-scrollbar-unusable{background:0 0}.os-theme-dark>.os-scrollbar>.os-scrollbar-track,.os-theme-light>.os-scrollbar>.os-scrollbar-track{background:0 0}.os-theme-dark>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light>.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle{min-width:30px}.os-theme-dark>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light>.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle{min-height:30px}.os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{-webkit-transition:background-color .3s;transition:background-color .3s}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,.os-theme-dark>.os-scrollbar>.os-scrollbar-track,.os-theme-light>.os-scrollbar>.os-scrollbar-track{border-radius:10px}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(0,0,0,.4)}.os-theme-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(255,255,255,.4)}.os-theme-dark>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(0,0,0,.55)}.os-theme-light>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle{background:rgba(255,255,255,.55)}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{background:rgba(0,0,0,.7)}.os-theme-light>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{background:rgba(255,255,255,.7)}.os-theme-dark>.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-dark>.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light>.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-light>.os-scrollbar-vertical .os-scrollbar-handle:before{content:'';position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-light.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before{display:none}.os-theme-dark>.os-scrollbar-horizontal .os-scrollbar-handle:before,.os-theme-light>.os-scrollbar-horizontal .os-scrollbar-handle:before{top:-6px;bottom:-2px}.os-theme-dark>.os-scrollbar-vertical .os-scrollbar-handle:before,.os-theme-light>.os-scrollbar-vertical .os-scrollbar-handle:before{left:-6px;right:-2px}.os-host-rtl.os-theme-dark>.os-scrollbar-vertical .os-scrollbar-handle:before,.os-host-rtl.os-theme-light>.os-scrollbar-vertical .os-scrollbar-handle:before{right:-6px;left:-2px}
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}

.ember-tooltip-base {
  display: none;
  height: 0;
  width: 0;
  position: absolute;
}

.ember-tooltip,
.ember-popover {
  margin-bottom: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  position: absolute;
  z-index: 2;

  font-size: 14px;
  font-family: inherit;
  border-radius: 3px;
}

.ember-tooltip {
  max-width: 200px;
  padding: 6px 10px;
  color: #fff;
  background: #3a3c47;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
  white-space: normal; /* IE doesnt support initial so fall back to normal */
  white-space: initial;
}

.ember-popover {
  color: #000;
  background-color: #fff;
  padding: 10px 20px;
  border: 1px solid #ccc;
}

.ember-popover[aria-hidden="false"] {
  pointer-events: auto;
  cursor: initial;
  -webkit-touch-callout: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

.ember-tooltip-arrow,
.ember-popover-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border: 5px solid transparent;
}

.ember-tooltip, .ember-popover {
  opacity: 0;
  -webkit-transition: opacity ease-out, margin ease-out;
  transition: opacity ease-out, margin ease-out;
  transition-duration: 200ms;
}

.ember-tooltip.ember-tooltip-effect-none,
.ember-popover.ember-tooltip-effect-none,
.ember-tooltip.ember-tooltip-show,
.ember-popover.ember-tooltip-show {
  opacity: 1;
}

.ember-tooltip[x-placement^="top"] .ember-tooltip-arrow,
.ember-popover[x-placement^="top"] .ember-popover-arrow {
  border-bottom-width: 0;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.ember-tooltip[x-placement^="top"] .ember-tooltip-arrow {
  border-top-color: #3a3c47;
}

.ember-popover[x-placement^="top"] .ember-popover-arrow {
  border-top-color: #ccc;
}

.ember-tooltip[x-placement^="right"] .ember-tooltip-arrow,
.ember-popover[x-placement^="right"] .ember-popover-arrow {
  border-left-width: 0;
  left: -5px;
  top: calc(50% - 5px);
  margin-right: 0;
  margin-left: 0;
}

.ember-tooltip[x-placement^="right"] .ember-tooltip-arrow {
  border-right-color: #3a3c47;
}

.ember-popover[x-placement^="right"] .ember-popover-arrow {
  border-right-color: #ccc;
}

.ember-tooltip[x-placement^="bottom"] .ember-tooltip-arrow,
.ember-popover[x-placement^="bottom"] .ember-popover-arrow {
  border-top-width: 0;
  top: -5px;
  left: calc(50% - 5px);
  margin-bottom: 0;
  margin-top: 0;
}

.ember-tooltip[x-placement^="bottom"] .ember-tooltip-arrow {
  border-bottom-color: #3a3c47;
}

.ember-popover[x-placement^="bottom"] .ember-popover-arrow {
  border-bottom-color: #ccc;
}

.ember-tooltip[x-placement^="left"] .ember-tooltip-arrow,
.ember-popover[x-placement^="left"] .ember-popover-arrow {
  border-right-width: 0;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.ember-tooltip[x-placement^="left"] .ember-tooltip-arrow {
  border-left-color: #3a3c47;
}

.ember-popover[x-placement^="left"] .ember-popover-arrow {
  border-left-color: #ccc;
}

/* arimo-regular - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/arimo/arimo-v29-all-regular.woff2') format('woff2');
}
/* lexend-deca-regular - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-regular.woff2') format('woff2');
}
/* lexend-deca-500 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 500;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-500.woff2') format('woff2');
}
/* lexend-deca-600 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-600.woff2') format('woff2');
}
/* mulish-regular - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}
/* mulish-italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
}
/* mulish-600 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-600.woff2') format('woff2');
}
/* mulish-600italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-600italic.woff2') format('woff2');
}
/* mulish-700 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}
/* mulish-700italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
}
/* mulish-800 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-800.woff2') format('woff2');
}
/* mulish-800italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-800italic.woff2') format('woff2');
}
/* open-sans-regular - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-regular.woff2') format('woff2');
}
/* open-sans-italic - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-italic.woff2') format('woff2');
}
/* open-sans-600 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-600.woff2') format('woff2');
}
/* open-sans-700 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-700.woff2') format('woff2');
}
/* open-sans-700italic - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-700italic.woff2') format('woff2');
}
/* open-sans-800 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-800.woff2') format('woff2');
}
@font-face {
  font-family: 'ds-digi';
  src: url('../gynzy-styleguide/assets/fonts/ds-digi/ds-digi.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
.font-arial-bold {
  font-family: 'Arial';
  font-style: normal;
  font-weight: bold;
}
.font-open-sans {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
}
.font-open-sans-italic {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
}
.font-open-sans-semibold {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
}
.font-open-sans-bold {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
}
.font-open-sans-bold-italic {
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
  font-weight: 700;
}
/* Group Colors */
/* ParnasSys */
/* Folders */
.logout-indicator {
  font-size: 5rem;
}
.teacher-register-login.flex.column.between {
  width: 53.33333333rem;
  height: 25rem;
  text-align: left;
  align-items: flex-start;
}
.teacher-register-login.flex.column.between .max-width {
  width: 100%;
}
.teacher-register-login.flex.column.between h2 {
  font-size: 2.8rem;
  font-family: var(--font-family-header);
}
.teacher-register-login.flex.column.between h2,
.teacher-register-login.flex.column.between p {
  text-align: left;
}
.teacher-register-login.flex.column.between button {
  width: 100%;
}
.teacher-register-login.flex.column.between a {
  text-decoration: underline;
  cursor: pointer;
  color: #555;
}
.teacher-register-login.flex.column.between a:hover {
  color: black;
}
.teacher-register-login.flex.column.between p {
  margin: 0;
  line-height: 2.8rem;
  font-size: 1.7rem;
}
.teacher-register-login.flex.column.between hr {
  width: 100%;
  margin: 0;
  height: 0.1rem;
  border-style: solid;
  border-color: #e9eaef;
  border-image: initial;
  border-width: 1px 0 0;
}

.scale-to-fit-mixin {
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

/* arimo-regular - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/arimo/arimo-v29-all-regular.woff2') format('woff2');
}
/* lexend-deca-regular - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-regular.woff2') format('woff2');
}
/* lexend-deca-500 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 500;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-500.woff2') format('woff2');
}
/* lexend-deca-600 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-600.woff2') format('woff2');
}
/* mulish-regular - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}
/* mulish-italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
}
/* mulish-600 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-600.woff2') format('woff2');
}
/* mulish-600italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-600italic.woff2') format('woff2');
}
/* mulish-700 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}
/* mulish-700italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
}
/* mulish-800 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-800.woff2') format('woff2');
}
/* mulish-800italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-800italic.woff2') format('woff2');
}
/* open-sans-regular - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-regular.woff2') format('woff2');
}
/* open-sans-italic - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-italic.woff2') format('woff2');
}
/* open-sans-600 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-600.woff2') format('woff2');
}
/* open-sans-700 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-700.woff2') format('woff2');
}
/* open-sans-700italic - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-700italic.woff2') format('woff2');
}
/* open-sans-800 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-800.woff2') format('woff2');
}
@font-face {
  font-family: 'ds-digi';
  src: url('../gynzy-styleguide/assets/fonts/ds-digi/ds-digi.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
.font-arial-bold {
  font-family: 'Arial';
  font-style: normal;
  font-weight: bold;
}
.font-open-sans {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
}
.font-open-sans-italic {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
}
.font-open-sans-semibold {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
}
.font-open-sans-bold {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
}
.font-open-sans-bold-italic {
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
  font-weight: 700;
}
/* Group Colors */
/* ParnasSys */
/* Folders */
.school-search {
  position: relative;
  width: 100%;
  display: flex;
  flex-grow: 1;
}
.school-search .school-search__results-info,
.school-search .school-search__results-address {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.school-search .school-search__results-name,
.school-search .school-search__results-city {
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  font-size: 1.66666667rem;
  line-height: 2.5rem;
  color: #2a3541;
}
.school-search .school-search__results-brin,
.school-search .school-search__results-addressline {
  color: #556474;
  font-size: 1.25rem;
  line-height: 2.08333333rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.school-search .school-search__no-schools {
  display: flex;
  padding: 2.08333333rem;
  height: 7.5rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.school-search .school-search__no-schools p {
  color: #2a3541;
  margin: 0;
  font-size: 1.66666667rem;
}
.school-search .school-search__no-schools a {
  text-decoration: underline;
  color: #38a4de;
  font-size: 1.66666667rem;
}
.school-search .search-by-city-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 1.5625rem;
}
.school-search .search-by-city-wrapper .dropdown-container {
  width: 50%;
  padding-right: 0.5rem;
}
.school-search .search-by-city-wrapper .search-by-container {
  width: 100%;
  padding-left: 0.5rem;
}
.search-by-container {
  width: 100%;
}
.search-by-name {
  position: relative;
  width: 100%;
}
.search-by-name .search-by-name__results,
.search-by-name .search-by-name__no-results {
  position: absolute;
  border-radius: 0.83333333rem;
  box-shadow: 0 1px 2px 0 rgba(42, 53, 65, 0.3), 0 2px 6px 2px rgba(42, 53, 65, 0.15);
  top: 4.2rem;
  margin-top: 2px;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 1;
  overflow: hidden auto;
}
.search-by-name .search-by-name__results .search-by-name__results-item,
.search-by-name .search-by-name__no-results .search-by-name__results-item {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 4.16666667rem;
  padding: 1.25rem 1.66666667rem;
  align-items: start;
  background-color: #ffffff;
}
.search-by-name .search-by-name__results .search-by-name__results-item:nth-child(even),
.search-by-name .search-by-name__no-results .search-by-name__results-item:nth-child(even) {
  background-color: #f5f5f8;
}
.search-by-name .search-by-name__results .search-by-name__results-item:hover,
.search-by-name .search-by-name__no-results .search-by-name__results-item:hover {
  background-color: #e9eaef;
}
.search-by-name .search-by-name__results .search-by-name__results-item:first-child,
.search-by-name .search-by-name__no-results .search-by-name__results-item:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.search-by-name .search-by-name__results .search-by-name__results-item:last-child,
.search-by-name .search-by-name__no-results .search-by-name__results-item:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.school-flow-modal .modal-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.83333333rem;
  margin-bottom: 1.66666667rem;
}
.school-flow-modal .modal__dialog-content {
  max-width: 95%;
}
.school-flow-modal .modal-header {
  font-family: var(--font-family-header);
  font-weight: 500;
  font-size: 3.33333333rem;
  line-height: 5rem;
  letter-spacing: 0.02083333rem;
  color: #2a3541;
}
.school-flow-modal p.modal-text {
  color: #556474;
  line-height: 2.5rem;
  margin-bottom: 1.66666667rem !important;
}
.school-flow-modal label.modal-label {
  color: #556474;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 2.08333333rem;
  margin-bottom: 0.41666667rem;
}
.school-flow-modal .modal__dialog-yield {
  padding: unset !important;
}
.find-school-modal {
  width: 75rem;
  height: 68.33333333rem;
  display: flex;
  flex-direction: column;
  padding: 3.33333333rem;
}
.find-school-modal .school-search {
  flex-grow: 0;
}
.find-school-modal .bottom-actionbar {
  margin-top: auto;
}
.find-school-modal .use-location-button {
  display: flex;
  align-items: center;
  gap: 0.41666667rem;
  align-self: flex-end;
  margin-top: 0.83333333rem;
  padding: 0;
  border: none;
  background: none;
  color: #1f5e7f;
  font-size: 1.66666667rem;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
}
.find-school-modal .use-location-button:hover {
  text-decoration: underline;
}
.find-school-modal .use-location-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.find-school-modal .use-location-button .svg-icon {
  width: 2.08333333rem;
  height: 2.08333333rem;
}
.find-school-modal .nearby-schools-loading {
  margin-top: 1.66666667rem;
  color: var(--color-text-secondary);
  font-size: 1.45833333rem;
}
.find-school-modal .alert-box {
  margin-top: 1.66666667rem;
}
.find-school-modal .nearby-schools-section {
  margin-top: 1.66666667rem;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.find-school-modal .nearby-schools-section .modal-label {
  margin-bottom: 0.83333333rem;
}
.find-school-modal .nearby-schools-section .nearby-schools-list {
  overflow-y: auto;
  flex: 1;
}
.find-school-modal .nearby-schools-section .nearby-schools-list .nearby-school-item {
  margin-bottom: 0.83333333rem;
}
.find-school-modal .nearby-schools-section .nearby-schools-list .nearby-school-item:last-child {
  margin-bottom: 0;
}
.find-school-modal .nearby-schools-section .nearby-schools-list .nearby-school-item .school-label {
  margin: unset !important;
  width: unset !important;
}
.find-school-modal .nearby-schools-section .nearby-schools-empty {
  color: var(--color-text-secondary);
  font-size: 1.45833333rem;
}
.confirm-selected-school-modal,
.create-school-modal {
  width: 95vw;
  max-width: 126.66666667rem;
  height: 68.33333333rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.confirm-selected-school-modal .left-side-container,
.create-school-modal .left-side-container {
  padding: 3.33333333rem;
  width: 50%;
  display: flex;
  flex-direction: column;
}
.confirm-selected-school-modal .left-side-container .modal-actions,
.create-school-modal .left-side-container .modal-actions {
  margin-top: 1.66666667rem;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.confirm-selected-school-modal .modal-form,
.create-school-modal .modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.66666667rem;
}
.confirm-selected-school-modal .modal-form .address-error,
.create-school-modal .modal-form .address-error {
  color: #d32f2f;
  font-size: 1.25rem;
  margin-top: 0.41666667rem;
}
.confirm-selected-school-modal .school-label,
.create-school-modal .school-label {
  margin: unset !important;
  width: unset !important;
}
.confirm-selected-school-modal .right-side-container,
.create-school-modal .right-side-container {
  width: 50%;
  display: flex;
  flex-direction: column;
}
.confirm-selected-school-modal .right-side-container .ember-google-map,
.create-school-modal .right-side-container .ember-google-map {
  width: 100%;
  height: 100%;
}
.select-education-type-modal {
  width: 75rem;
  display: flex;
  flex-direction: column;
  padding: 3.33333333rem;
}
.select-education-type-modal .education-type-options {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.select-education-type-modal .modal-actions {
  margin-top: 3.33333333rem;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.pac-container {
  z-index: 99999999999999999999 !important;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.pac-container .pac-item {
  padding: 8px 12px;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
}
.pac-container .pac-item:hover {
  background-color: #f5f5f5;
}
.pac-container .pac-item.pac-item-selected {
  background-color: #e8f4fd;
}
.pac-container .pac-item .pac-icon {
  margin-right: 8px;
}
.pac-container .pac-item .pac-item-query {
  font-weight: 600;
}
.school-link-intro-modal {
  width: 75rem;
  display: flex;
  flex-direction: column;
  padding: 3.33333333rem;
}
.school-link-intro-modal__feature-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--size-gap-02-rem, 0.83333333rem);
  align-self: stretch;
  text-align: left;
}
.school-link-intro-modal__feature {
  display: flex;
  justify-content: start;
  align-items: flex-start;
  gap: var(--size-gap-02-rem, 0.83333333rem);
  align-self: stretch;
}
.school-link-intro-modal__checkmark {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--size-gap-02-rem, 0.83333333rem);
  align-self: stretch;
}
.school-link-intro-modal__feature-text {
  color: #556474;
  line-height: 2.5rem;
  flex: 1 0 0;
}
.school-link-intro-modal__actions {
  display: flex;
  padding-top: 2.5rem;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--size-gap-03-rem, 1.25rem);
  align-self: stretch;
}
.school-link-intro-modal .school-link-intro-modal__checkmark .svg__icon {
  width: 2.5rem;
  height: 2.5rem;
}
.schools-at-address-modal .loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.33333333rem;
  min-height: 20.83333333rem;
}
.schools-at-address-modal .loading-container .loading-text {
  margin-top: 1.66666667rem;
  color: var(--color-text-secondary);
  font-size: 1.66666667rem;
}
.schools-at-address-modal .modal-content {
  padding: 1.66666667rem;
  max-width: 62.5rem;
  width: 100%;
}
.schools-at-address-modal .modal-text {
  margin-bottom: 1.66666667rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.schools-at-address-modal .schools-list-container {
  margin-bottom: 2.5rem;
}
.schools-at-address-modal .schools-list-container .modal-label {
  display: block;
  margin-bottom: 1.66666667rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.schools-at-address-modal .schools-list-container .schools-list {
  max-height: 41.66666667rem;
  overflow-y: auto;
  border: 0.10416667rem solid var(--color-border-light);
  border-radius: 0.83333333rem;
  padding: 0.83333333rem;
}
.schools-at-address-modal .schools-list-container .schools-list .school-item {
  cursor: pointer;
  border-radius: 0.83333333rem;
  transition: background-color 0.2s ease;
  margin-bottom: 0.83333333rem;
}
.schools-at-address-modal .schools-list-container .schools-list .school-item:last-child {
  margin-bottom: 0;
}
.schools-at-address-modal .schools-list-container .schools-list .school-item:hover {
  background-color: var(--color-background-hover);
}
.schools-at-address-modal .schools-list-container .schools-list .school-item:active {
  background-color: var(--color-background-active);
}
.schools-at-address-modal .schools-list-container .schools-list .school-item .school-label {
  pointer-events: none;
}
.schools-at-address-modal .modal-actions {
  display: flex;
  gap: 1.66666667rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .schools-at-address-modal .modal-actions {
    flex-direction: column;
  }
  .schools-at-address-modal .modal-actions .button-regular {
    width: 100%;
  }
}
.create-school-modal {
  display: flex;
  flex-direction: row;
  height: 80vh;
}
.create-school-modal .left-side-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
}
.create-school-modal .right-side-container {
  flex-shrink: 0;
}
.create-school-modal .modal-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 2.5rem;
}
.create-school-modal .modal-actions {
  flex-shrink: 0;
  margin-top: 1.66666667rem;
}
.create-school-modal .modal-form__manual-address {
  display: flex;
  flex-direction: column;
  gap: 1.66666667rem;
}
.create-school-modal .schools-at-address-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.create-school-modal .schools-at-address-section .modal-text {
  margin-bottom: 1.66666667rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  flex-shrink: 0;
}
.create-school-modal .schools-at-address-section .schools-list {
  flex: 1;
  min-height: 12.5rem;
  overflow-y: auto;
  margin-bottom: 3.33333333rem;
}
.create-school-modal .schools-at-address-section .schools-list:not([data-school-count='0']):not([data-school-count='1']).can-scroll-up {
  border-top: 0.10416667rem solid #d1d3de;
}
.create-school-modal .schools-at-address-section .schools-list:not([data-school-count='0']):not([data-school-count='1']):not([data-school-count='2']).can-scroll-down {
  border-bottom: 0.10416667rem solid #d1d3de;
}
.create-school-modal .schools-at-address-section .schools-list .school-item {
  margin-bottom: 0.83333333rem;
}
.create-school-modal .schools-at-address-section .schools-list .school-item:last-child {
  margin-bottom: 0;
}
.create-school-modal .schools-at-address-section .schools-list .separator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  align-self: stretch;
  margin-top: 1.66666667rem;
}
.create-school-modal .schools-at-address-section .schools-list .separator .separationText {
  color: var(--text-paragraph, #556474);
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'Open Sans';
  font-size: 1.66666667rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.5rem;
  letter-spacing: var(--text-letter-spacing-default, 0);
}
.create-school-modal .schools-at-address-section .schools-list .separator .separationLine {
  flex: 1;
  height: 0.10416667rem;
  background-color: #d1d3de;
}
.create-school-modal .schools-at-address-section .schools-list .create-new-school-item {
  margin-top: 1.66666667rem;
  text-align: center;
}
.create-school-modal .schools-at-address-section .schools-list .create-new-school-item button {
  width: 100%;
}
.create-school-modal .schools-at-address-section .schools-loading-skeleton {
  border: 0.10416667rem solid var(--color-border-light);
  border-radius: 0.83333333rem;
}
.create-school-modal .schools-at-address-section .schools-loading-skeleton .skeleton-item {
  height: 6.66666667rem;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 0.83333333rem;
  margin-bottom: 0.83333333rem;
}
.create-school-modal .schools-at-address-section .schools-loading-skeleton .skeleton-item:last-child {
  margin-bottom: 0;
}
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.school-tooltip {
  font-size: 1.25rem;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transform: translateY(-3.33333333rem) translateX(-50%);
  flex-direction: column;
}
.school-tooltip .marker-icon {
  width: 3.33333333rem;
  position: relative;
}
.school-tooltip .marker-icon .svg__icon {
  width: 100%;
  height: 100%;
}
.school-tooltip .marker-icon.selected {
  animation: bounce 2s infinite;
}
.school-tooltip .school-name {
  width: fit-content;
  line-height: 1.5;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  hyphens: auto;
  word-break: break-word;
  background-color: white;
  padding: 0.83333333rem;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 0.41666667rem;
  border: 1px solid #d1d3de;
}

.styleguide {
  height: auto;
}
/* arimo-regular - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/arimo/arimo-v29-all-regular.woff2') format('woff2');
}
/* lexend-deca-regular - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-regular.woff2') format('woff2');
}
/* lexend-deca-500 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 500;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-500.woff2') format('woff2');
}
/* lexend-deca-600 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Lexend Deca';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/lexend-deca/lexend-deca-v21-all-600.woff2') format('woff2');
}
/* mulish-regular - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
}
/* mulish-italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
}
/* mulish-600 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-600.woff2') format('woff2');
}
/* mulish-600italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-600italic.woff2') format('woff2');
}
/* mulish-700 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
}
/* mulish-700italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
}
/* mulish-800 - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-800.woff2') format('woff2');
}
/* mulish-800italic - cyrillic_cyrillic-ext_latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/mulish/mulish-v18-cyrillic_cyrillic-ext_latin_latin-ext_vietnamese-800italic.woff2') format('woff2');
}
/* open-sans-regular - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-regular.woff2') format('woff2');
}
/* open-sans-italic - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-italic.woff2') format('woff2');
}
/* open-sans-600 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-600.woff2') format('woff2');
}
/* open-sans-700 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-700.woff2') format('woff2');
}
/* open-sans-700italic - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-700italic.woff2') format('woff2');
}
/* open-sans-800 - cyrillic_cyrillic-ext_greek_greek-ext_hebrew_latin_latin-ext_math_symbols_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../gynzy-styleguide/assets/fonts/open-sans/open-sans-v40-all-800.woff2') format('woff2');
}
@font-face {
  font-family: 'ds-digi';
  src: url('../gynzy-styleguide/assets/fonts/ds-digi/ds-digi.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
.font-arial-bold {
  font-family: 'Arial';
  font-style: normal;
  font-weight: bold;
}
.font-open-sans {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
}
.font-open-sans-italic {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
}
.font-open-sans-semibold {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
}
.font-open-sans-bold {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
}
.font-open-sans-bold-italic {
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
  font-weight: 700;
}
/* Group Colors */
/* ParnasSys */
/* Folders */
/* stylelint-disable custom-property-empty-line-before */
:root {
  /* Please note these css-variables are also defined in external-board-tools.
	If you make adjustments here, do not forget to implement them in
	external-board-tools/packages/base-tool/demo/demo.css. */
  /** Fonts **/
  --font-family-header: 'Lexend Deca', 'Open Sans', sans-serif;
  --font-family-base: 'Open Sans', sans-serif;
  --font-family-digi: 'ds-digi';
  --font-family-school: 'Mulish', sans-serif;
  /** Colors **/
  --color-black: #000;
  --color-white: #fff;
  --color-dusty-gray: #999;
  --color-alabaster: #f6f6f6;
  /* Call To Action Button */
  --color-tree-poppy: #fd8b1d;
  --color-tree-poppy-light: #fda045;
  --color-tree-poppy-dark: #e57102;
  /* Primary */
  --color-mariner: #277cd9;
  --color-mariner-light: #4e92ff;
  --color-mariner-dark: #2465ab;
  --color-mariner-extra-light: #eaf2fb;
  /* Positive */
  --color-positive: #1eaa10;
  --color-positive-light: #25cf14;
  --color-positive-dark: #167b0c;
  --color-positive-darkest: #12650a;
  --color-positive-extra-light: #dbfbd7;
  /* Negative */
  --color-negative: #ed1c24;
  --color-negative-light: #f04248;
  --color-negative-dark: #c61017;
  --color-negative-darkest: #970c11;
  --color-negative-extra-light: #fef1f1;
  /* Grayscale */
  --color-midnight: #2a3541;
  --color-riverbed: #3f4c5a;
  --color-shuttle-gray: #556474;
  --color-slate-gray: #6b7c8e;
  --color-regent-gray: #8c99a8;
  --color-heather: #aeb7c2;
  --color-ghost: #d1d3de;
  --color-solitude: #e9eaef;
  --color-aqua-haze: #f5f5f8;
  /** Color filters **/
  /* These can be used to overlay a black (vector) image. Its an alternative
	approach to adding the SVG DOM in the HTML DOM and using the CSS 'fill:' to
	color the image. */
  /* Colors can be generated on: https://codepen.io/sosuke/pen/Pjoqqp */
  --color-filter-black: invert(0%) sepia(96%) saturate(7474%) hue-rotate(176deg) brightness(82%) contrast(100%);
  --color-filter-white: invert(100%) sepia(0%) saturate(1%) hue-rotate(8deg) brightness(101%) contrast(101%);
  --color-filter-dusty-gray: invert(69%) sepia(0%) saturate(496%) hue-rotate(132deg) brightness(91%) contrast(76%);
  --color-filter-alabaster: invert(100%) sepia(92%) saturate(58%) hue-rotate(254deg) brightness(112%) contrast(93%);
  /* Call To Action Button */
  --color-filter-tree-poppy: invert(62%) sepia(93%) saturate(2263%) hue-rotate(347deg) brightness(103%) contrast(98%);
  --color-filter-tree-poppy-light: invert(69%) sepia(11%) saturate(2776%) hue-rotate(341deg) brightness(102%) contrast(98%);
  --color-filter-tree-poppy-dark: invert(49%) sepia(83%) saturate(2978%) hue-rotate(7deg) brightness(97%) contrast(98%);
  /* Primary */
  --color-filter-mariner: invert(43%) sepia(13%) saturate(2844%) hue-rotate(171deg) brightness(100%) contrast(103%);
  --color-filter-mariner-light: invert(44%) sepia(100%) saturate(528%) hue-rotate(187deg) brightness(102%) contrast(101%);
  --color-filter-mariner-dark: invert(31%) sepia(55%) saturate(1146%) hue-rotate(179deg) brightness(96%) contrast(90%);
  --color-filter-mariner-extra-light: invert(100%) sepia(83%) saturate(743%) hue-rotate(176deg) brightness(101%) contrast(97%);
  /* Positive */
  --color-filter-positive: invert(54%) sepia(100%) saturate(3701%) hue-rotate(83deg) brightness(100%) contrast(87%);
  --color-filter-positive-light: invert(67%) sepia(77%) saturate(5419%) hue-rotate(83deg) brightness(121%) contrast(84%);
  --color-filter-positive-dark: invert(32%) sepia(60%) saturate(1643%) hue-rotate(83deg) brightness(88%) contrast(91%);
  --color-filter-positive-extra-light: invert(93%) sepia(16%) saturate(397%) hue-rotate(57deg) brightness(103%) contrast(97%);
  /* Negative */
  --color-filter-negative: invert(10%) sepia(100%) saturate(5526%) hue-rotate(354deg) brightness(114%) contrast(86%);
  --color-filter-negative-light: invert(64%) sepia(67%) saturate(5773%) hue-rotate(327deg) brightness(88%) contrast(115%);
  --color-filter-negative-dark: invert(11%) sepia(87%) saturate(5011%) hue-rotate(352deg) brightness(101%) contrast(98%);
  --color-filter-negative-extra-light: invert(95%) sepia(65%) saturate(178%) hue-rotate(290deg) brightness(93%) contrast(117%);
  /* Grayscale */
  --color-filter-midnight: invert(9%) sepia(7%) saturate(4046%) hue-rotate(171deg) brightness(100%) contrast(74%);
  --color-filter-riverbed: invert(29%) sepia(18%) saturate(573%) hue-rotate(170deg) brightness(90%) contrast(92%);
  --color-filter-shuttle-gray: invert(40%) sepia(22%) saturate(428%) hue-rotate(170deg) brightness(88%) contrast(87%);
  --color-filter-slate-gray: invert(53%) sepia(15%) saturate(500%) hue-rotate(170deg) brightness(88%) contrast(90%);
  --color-filter-regent-gray: invert(62%) sepia(21%) saturate(238%) hue-rotate(172deg) brightness(93%) contrast(89%);
  --color-filter-heather: invert(92%) sepia(4%) saturate(1019%) hue-rotate(182deg) brightness(81%) contrast(83%);
  --color-filter-ghost: invert(96%) sepia(4%) saturate(1698%) hue-rotate(187deg) brightness(89%) contrast(94%);
  --color-filter-solitude: invert(98%) sepia(8%) saturate(853%) hue-rotate(179deg) brightness(100%) contrast(88%);
  --color-filter-aqua-haze: invert(100%) sepia(25%) saturate(651%) hue-rotate(180deg) brightness(100%) contrast(95%);
  /* Differentiation colors */
  /* Valencia / Crimson */
  --color-crimson-lightest: #fee7e7;
  --color-crimson-lighter: #fdc9c9;
  --color-crimson-light: #f58a8a;
  --color-crimson-soft: #ee6868;
  --color-crimson: #e64545;
  --color-crimson-dark: #dc2828;
  --color-crimson-darker: #b82323;
  --color-crimson-darkest: #6e1c1c;
  --color-valencia-lighter: var(--color-crimson-lightest);
  --color-valencia-light: var(--color-crimson-lighter);
  --color-valencia-soft: var(--color-crimson-soft);
  --color-valencia: var(--color-crimson);
  --color-valencia-desaturated: var(--color-crimson-dark);
  --color-valencia-desaturated-dark: var(--color-crimson-darker);
  --color-valencia-dark: var(--color-crimson);
  /* Raw Sienna / Pumpkin */
  --color-pumpkin-lightest: #ffdebd;
  --color-pumpkin-lighter: #ffcf9e;
  --color-pumpkin-light: #ffab57;
  --color-pumpkin-soft: #ff962e;
  --color-pumpkin: #fa830c;
  --color-pumpkin-dark: #d36e09;
  --color-pumpkin-darker: #a8590b;
  --color-pumpkin-darkest: #57300a;
  --color-raw-sienna-lighter: var(--color-pumpkin-lightest);
  --color-raw-sienna-light: var(--color-pumpkin-lighter);
  --color-raw-sienna-soft: var(--color-pumpkin-soft);
  --color-raw-sienna: var(--color-pumpkin);
  --color-raw-sienna-desaturated: var(--color-pumpkin-dark);
  --color-raw-sienna-desaturated-dark: var(--color-pumpkin-darker);
  --color-raw-sienna-dark: var(--color-pumpkin-darkest);
  /* Wattle / Lemon */
  --color-lemon-lightest: #fff4bd;
  --color-lemon-lighter: #ffef9e;
  --color-lemon-light: #ffe357;
  --color-lemon-soft: #ffdc2e;
  --color-lemon: #fad20c;
  --color-lemon-dark: #d3b109;
  --color-lemon-darker: #a88e0b;
  --color-lemon-darkest: #574a0a;
  --color-wattle-lighter: var(--color-lemon-lightest);
  --color-wattle-light: var(--color-lemon-lighter);
  --color-wattle-soft: var(--color-lemon-soft);
  --color-wattle: var(--color-lemon);
  --color-wattle-desaturated: var(--color-lemon-dark);
  --color-wattle-desaturated-dark: var(--color-lemon-darker);
  --color-wattle-dark: var(--color-lemon-darkest);
  /* Conifer / Pear */
  --color-pear-lightest: #f0fad1;
  --color-pear-ligher: #e6f6b6;
  --color-pear-light: #cee97c;
  --color-pear-soft: #bfdf5d;
  --color-pear: #afd441;
  --color-pear-dark: #98bb30;
  --color-pear-darker: #7c962c;
  --color-pear-darkest: #45521e;
  --color-conifer-lighter: var(--color-pear-lightest);
  --color-conifer-light: var(--color-pear-lighter);
  --color-conifer-soft: var(--color-pear-soft);
  --color-conifer: var(--color-pear);
  --color-conifer-desaturated: var(--color-pear-dark);
  --color-conifer-desaturated-dark: var(--color-pear-darker);
  --color-conifer-dark: var(--color-pear-darkest);
  /* Atlantis / Mantis */
  --color-mantis-lightest: #dcfbd5;
  --color-mantis-lighter: #c4f8ba;
  --color-mantis-light: #91eb7f;
  --color-mantis-soft: #75e260;
  --color-mantis: #59d640;
  --color-mantis-dark: #47c12f;
  --color-mantis-darker: #3e9c2b;
  --color-mantis-darkest: #28571e;
  --color-atlantis-lighter: var(--color-mantis-lightest);
  --color-atlantis-light: var(--color-mantis-lighter);
  --color-atlantis-soft: var(--color-mantis-soft);
  --color-atlantis: var(--color-mantis);
  --color-atlantis-desaturated: var(--color-mantis-dark);
  --color-atlantis-desaturated-dark: var(--color-mantis-darker);
  --color-atlantis-dark: var(--color-mantis-darkest);
  /* Shamrock / Emerald */
  --color-emerald-lightest: #caf7e0;
  --color-emerald-lighter: #aff3d1;
  --color-emerald-light: #78e3ad;
  --color-emerald-soft: #5ad899;
  --color-emerald: #3dcc84;
  --color-emerald-dark: #34ad70;
  --color-emerald-darker: #2e8a5b;
  --color-emerald-darkest: #1e4833;
  --color-shamrock-lighter: var(--color-emerald-lightest);
  --color-shamrock-light: var(--color-emerald-lighter);
  --color-shamrock-soft: var(--color-emerald-soft);
  --color-shamrock: var(--color-emerald);
  --color-shamrock-desaturated: var(--color-emerald-dark);
  --color-shamrock-desaturated-dark: var(--color-emerald-darker);
  --color-shamrock-dark: var(--color-emerald-darkest);
  /* Turquoise / Caribbean */
  --color-caribbean-lightest: #d1fafa;
  --color-caribbean-lighter: #b6f6f6;
  --color-caribbean-light: #7ce9e9;
  --color-caribbean-soft: #5ddfdf;
  --color-caribbean: #3fd4d4;
  --color-caribbean-dark: #30bbbb;
  --color-caribbean-darker: #2c9696;
  --color-caribbean-darkest: #1e5252;
  --color-turquoise-lighter: var(--color-caribbean-lightest);
  --color-turquoise-light: var(--color-caribbean-lighter);
  --color-turquoise-soft: var(--color-caribbean-soft);
  --color-turquoise: var(--color-caribbean);
  --color-turquoise-desaturated: var(--color-caribbean-dark);
  --color-turquoise-desaturated-dark: var(--color-caribbean-darker);
  --color-turquoise-dark: var(--color-caribbean-darkest);
  /* Havelock Blue / Sky */
  --color-sky-lightest: #d4eefc;
  --color-sky-lighter: #b7e3fa;
  --color-sky-light: #7ac7f0;
  --color-sky-soft: #59b6e8;
  --color-sky: #38a4de;
  --color-sky-dark: #2690c9;
  --color-sky-darker: #2477a3;
  --color-sky-darkest: #1a455b;
  --color-sky-01: #effaff;
  --color-sky-02: #d4eefc;
  --color-sky-03: #b7e3fa;
  --color-sky-04: #97d4f5;
  --color-sky-05: #7ac7f0;
  --color-sky-06: #59b6e8;
  --color-sky-07: #38a4de;
  --color-sky-08: #2f9ad4;
  --color-sky-09: #2b8fc5;
  --color-sky-10: #28759f;
  --color-sky-11: #1f5e7f;
  --color-sky-12: #1a455b;
  --color-havelock-blue-lighter: var(--color-sky-lightest);
  --color-havelock-blue-light: var(--color-sky-lighter);
  --color-havelock-blue-soft: var(--color-sky-soft);
  --color-havelock-blue: var(--color-sky);
  --color-havelock-blue-desaturated: var(--color-sky-dark);
  --color-havelock-blue-desaturated-dark: var(--color-sky-darker);
  --color-havelock-blue-dark: var(--color-sky-darkest);
  /* Royal Blue / Indigo */
  --color-indigo-lightest: #cad5f7;
  --color-indigo-lighter: #afc0f3;
  --color-indigo-light: #7892e3;
  --color-indigo-soft: #5a79d8;
  --color-indigo: #3d61cc;
  --color-indigo-dark: #3452ad;
  --color-indigo-darker: #2e458a;
  --color-indigo-darkest: #1e2848;
  --color-royal-blue-lighter: var(--color-indigo-lightest);
  --color-royal-blue-light: var(--color-indigo-lighter);
  --color-royal-blue-soft: var(--color-indigo-soft);
  --color-royal-blue: var(--color-indigo);
  --color-royal-blue-desaturated: var(--color-indigo-dark);
  --color-royal-blue-desaturated-dark: var(--color-indigo-darker);
  --color-royal-blue-dark: var(--color-indigo-darkest);
  /* Purple Heart / Lavender */
  --color-lavender-lightest: #e8d5fb;
  --color-lavender-lighter: #d9b9f8;
  --color-lavender-light: #b57eec;
  --color-lavender-soft: #a05fe3;
  --color-lavender: #8c41d9;
  --color-lavender-dark: #772ec2;
  --color-lavender-darker: #632a9d;
  --color-lavender-darkest: #3a1d58;
  --color-purple-heart-lighter: var(--color-lavender-lightest);
  --color-purple-heart-light: var(--color-lavender-lighter);
  --color-purple-heart-soft: var(--color-lavender-soft);
  --color-purple-heart: var(--color-lavender);
  --color-purple-heart-desaturated: var(--color-lavender-dark);
  --color-purple-heart-desaturated-dark: var(--color-lavender-darker);
  --color-purple-heart-dark: var(--color-lavender-darkest);
  /* Orchid / Fuchsia */
  --color-fuchsia-lightest: #fbd5fb;
  --color-fuchsia-lighter: #f8b9f8;
  --color-fuchsia-light: #ec7eec;
  --color-fuchsia-soft: #e35fe3;
  --color-fuchsia: #d941d9;
  --color-fuchsia-dark: #c22ec2;
  --color-fuchsia-darker: #9d2a9d;
  --color-fuchsia-darkest: #581d58;
  --color-orchid-lighter: var(--color-fuchsia-lightest);
  --color-orchid-light: var(--color-fuchsia-lighter);
  --color-orchid-soft: var(--color-fuchsia-soft);
  --color-orchid: var(--color-fuchsia);
  --color-orchid-desaturated: var(--color-fuchsia-dark);
  --color-orchid-desaturated-dark: var(--color-fuchsia-darker);
  --color-orchid-dark: var(--color-fuchsia-darkest);
  /* Cerise / Cranberry */
  --color-cranberry-lightest: #fbd5e8;
  --color-cranberry-lighter: #f8bad9;
  --color-cranberry-light: #eb7fb5;
  --color-cranberry-soft: #e260a0;
  --color-cranberry: #d7428c;
  --color-cranberry-dark: #c12f77;
  --color-cranberry-darker: #9c2b63;
  --color-cranberry-darkest: #571e3a;
  --color-cerise-lighter: var(--color-cranberry-lightest);
  --color-cerise-light: var(--color-cranberry-lighter);
  --color-cerise-soft: var(--color-cranberry-soft);
  --color-cerise: var(--color-cranberry);
  --color-cerise-desaturated: var(--color-cranberry-dark);
  --color-cerise-desaturated-dark: var(--color-cranberry-darker);
  --color-cerise-dark: var(--color-cranberry-darkest);
  --color-parnassys: #ed5c82;
  --color-smartschool: #ff520e;
  --color-esis: #2bb60f;
  --color-dotcom: #d4002c;
  --color-basispoort: #282c59;
  --color-questi: #dddb00;
  /* Differentiation filter colors */
  --color-filter-valencia: invert(29%) sepia(74%) saturate(1241%) hue-rotate(329deg) brightness(104%) contrast(91%);
  --color-filter-raw-sienna: invert(54%) sepia(60%) saturate(454%) hue-rotate(349deg) brightness(99%) contrast(93%);
  --color-filter-wattle: invert(100%) sepia(63%) saturate(2464%) hue-rotate(332deg) brightness(93%) contrast(79%);
  --color-filter-conifer: invert(71%) sepia(90%) saturate(318%) hue-rotate(27deg) brightness(96%) contrast(95%);
  --color-filter-atlantis: invert(66%) sepia(66%) saturate(488%) hue-rotate(62deg) brightness(97%) contrast(91%);
  --color-filter-shamrock: invert(93%) sepia(66%) saturate(814%) hue-rotate(70deg) brightness(88%) contrast(89%);
  --color-filter-turquoise: invert(94%) sepia(80%) saturate(6337%) hue-rotate(139deg) brightness(88%) contrast(91%);
  --color-filter-malibu: invert(76%) sepia(10%) saturate(1926%) hue-rotate(166deg) brightness(102%) contrast(92%);
  --color-filter-havelock-blue: invert(50%) sepia(80%) saturate(436%) hue-rotate(170deg) brightness(88%) contrast(91%);
  --color-filter-royal-blue: invert(22%) sepia(72%) saturate(5125%) hue-rotate(240deg) brightness(88%) contrast(90%);
  --color-filter-purple-heart: invert(32%) sepia(51%) saturate(2560%) hue-rotate(251deg) brightness(86%) contrast(94%);
  --color-filter-orchid: invert(42%) sepia(79%) saturate(1147%) hue-rotate(267deg) brightness(83%) contrast(105%);
  --color-filter-cerise: invert(32%) sepia(81%) saturate(1570%) hue-rotate(303deg) brightness(92%) contrast(82%);
  --color-filter-sky: invert(56%) sepia(89%) saturate(835%) hue-rotate(172deg) brightness(91%) contrast(91%);
  /* Radiuses */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-rounded: 360px;
  --size-fonts-font-size-2xl: 32px;
  --size-gap-00: 2px;
  --size-gap-01: 4px;
  --size-gap-02: 8px;
  --size-gap-03: 12px;
  --size-gap-04: 16px;
  --size-gap-05: 20px;
  --size-gap-06: 24px;
  --size-gap-07: 32px;
  --size-gap-08: 40px;
  --size-gap-09: 48px;
  --size-gap-10: 56px;
  --size-gap-00-rem: 0.20833333rem;
  --size-gap-01-rem: 0.41666667rem;
  --size-gap-02-rem: 0.83333333rem;
  --size-gap-03-rem: 1.25rem;
  --size-gap-04-rem: 1.66666667rem;
  --size-gap-05-rem: 2.08333333rem;
  --size-gap-06-rem: 2.5rem;
  --size-gap-07-rem: 3.33333333rem;
  --size-gap-08-rem: 4.16666667rem;
  --size-gap-09-rem: 5rem;
  --size-gap-10-rem: 5.83333333rem;
}
:root {
  /* Please note these css-variables are also defined in external-board-tools.
	If you make adjustments here, do not forget to implement them in
	external-board-tools/packages/base-tool/demo/demo.css. */
  --box-shadow-default: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.12);
  --box-shadow-heavy: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 0 4px rgba(0, 0, 0, 0.12);
  --elevation-2: 0 1px 2px 0 rgba(42, 53, 65, 0.3), 0 2px 6px 2px rgba(42, 53, 65, 0.15);
  --px-rem-ratio: calc(1 / 9.6) * 1rem;
  --button-transition-duration: 0.15s;
  --button-pointer-events: inherit;
  --epm-animation-backdrop-in-duration: 0s;
  --epm-animation-backdrop-out-duration: 0s;
  --epm-animation-modal-in-duration: 0s;
  --epm-animation-modal-out-duration: 0.001s;
  --epm-animation-backdrop-in-delay: 0s;
  --epm-animation-backdrop-out-delay: 0s;
  --epm-animation-modal-in-delay: 0s;
  --epm-animation-modal-out-delay: 0s;
}
/*
This file contains all the necessary rules for the typography in
Gynzy Kids or the manager. Use this file to define the different
font sizes instead of declaring them all over the place.

To prevent duplicate rules all rules in this class start with
`typo-`.
*/
/*
This rule shouldn't be used and is purely for setting the defaults
in all the other rules
*/
.typo-defaults {
  text-align: left;
  font-size: 1.8rem;
  font-family: 'Open Sans', 'sans-serif';
  font-weight: normal;
  color: #3f4c5a;
  line-height: 1.1em;
  /* Text style overrides */
  /* Color overrides */
}
.typo-defaults.typo-set-bold,
.typo-defaults .typo-set-bold {
  font-weight: bold;
}
.typo-defaults b {
  font-weight: bold;
}
.typo-defaults.typo-alt-color,
.typo-defaults .typo-alt-color {
  color: #06C;
}
.typo-defaults.typo-disabled-color,
.typo-defaults .typo-disabled-color {
  color: #999;
}
.typo-defaults.typo-title-color,
.typo-defaults .typo-title-color {
  color: #3f4c5a;
}
.typo-defaults.typo-text-color,
.typo-defaults .typo-text-color {
  color: #3f4c5a;
}
.typo-defaults.typo-text-small-color,
.typo-defaults .typo-text-small-color {
  color: #6b7c8e;
}
.typo-defaults.typo-text-feedback-red-color,
.typo-defaults .typo-text-feedback-red-color {
  color: #ed1c24;
}
div.typo-text,
div.typo-text-small,
div.typo-title,
div.typo-title-section {
  width: 100%;
}
.typo-title {
  text-align: left;
  font-size: 1.8rem;
  font-family: 'Open Sans', 'sans-serif';
  font-weight: normal;
  line-height: 1.1em;
  /* Text style overrides */
  /* Color overrides */
  color: #3f4c5a;
  font-weight: bold;
  font-size: 2.7rem;
  margin-bottom: 0.675rem;
}
.typo-title.typo-set-bold,
.typo-title .typo-set-bold {
  font-weight: bold;
}
.typo-title b {
  font-weight: bold;
}
.typo-title.typo-alt-color,
.typo-title .typo-alt-color {
  color: #06C;
}
.typo-title.typo-disabled-color,
.typo-title .typo-disabled-color {
  color: #999;
}
.typo-title.typo-title-color,
.typo-title .typo-title-color {
  color: #3f4c5a;
}
.typo-title.typo-text-color,
.typo-title .typo-text-color {
  color: #3f4c5a;
}
.typo-title.typo-text-small-color,
.typo-title .typo-text-small-color {
  color: #6b7c8e;
}
.typo-title.typo-text-feedback-red-color,
.typo-title .typo-text-feedback-red-color {
  color: #ed1c24;
}
.typo-subtitle {
  text-align: left;
  font-size: 1.8rem;
  font-family: 'Open Sans', 'sans-serif';
  font-weight: normal;
  line-height: 1.1em;
  /* Text style overrides */
  /* Color overrides */
  color: #3f4c5a;
  font-size: 2.16rem;
}
.typo-subtitle.typo-set-bold,
.typo-subtitle .typo-set-bold {
  font-weight: bold;
}
.typo-subtitle b {
  font-weight: bold;
}
.typo-subtitle.typo-alt-color,
.typo-subtitle .typo-alt-color {
  color: #06C;
}
.typo-subtitle.typo-disabled-color,
.typo-subtitle .typo-disabled-color {
  color: #999;
}
.typo-subtitle.typo-title-color,
.typo-subtitle .typo-title-color {
  color: #3f4c5a;
}
.typo-subtitle.typo-text-color,
.typo-subtitle .typo-text-color {
  color: #3f4c5a;
}
.typo-subtitle.typo-text-small-color,
.typo-subtitle .typo-text-small-color {
  color: #6b7c8e;
}
.typo-subtitle.typo-text-feedback-red-color,
.typo-subtitle .typo-text-feedback-red-color {
  color: #ed1c24;
}
.typo-title-section {
  text-align: left;
  font-size: 1.8rem;
  font-family: 'Open Sans', 'sans-serif';
  font-weight: normal;
  line-height: 1.1em;
  /* Text style overrides */
  /* Color overrides */
  color: #3f4c5a;
  font-weight: bold;
  margin-bottom: 0.9rem;
}
.typo-title-section.typo-set-bold,
.typo-title-section .typo-set-bold {
  font-weight: bold;
}
.typo-title-section b {
  font-weight: bold;
}
.typo-title-section.typo-alt-color,
.typo-title-section .typo-alt-color {
  color: #06C;
}
.typo-title-section.typo-disabled-color,
.typo-title-section .typo-disabled-color {
  color: #999;
}
.typo-title-section.typo-title-color,
.typo-title-section .typo-title-color {
  color: #3f4c5a;
}
.typo-title-section.typo-text-color,
.typo-title-section .typo-text-color {
  color: #3f4c5a;
}
.typo-title-section.typo-text-small-color,
.typo-title-section .typo-text-small-color {
  color: #6b7c8e;
}
.typo-title-section.typo-text-feedback-red-color,
.typo-title-section .typo-text-feedback-red-color {
  color: #ed1c24;
}
.typo-text {
  text-align: left;
  font-size: 1.8rem;
  font-family: 'Open Sans', 'sans-serif';
  font-weight: normal;
  color: #3f4c5a;
  line-height: 1.1em;
  /* Text style overrides */
  /* Color overrides */
  font-size: 1.71rem;
}
.typo-text.typo-set-bold,
.typo-text .typo-set-bold {
  font-weight: bold;
}
.typo-text b {
  font-weight: bold;
}
.typo-text.typo-alt-color,
.typo-text .typo-alt-color {
  color: #06C;
}
.typo-text.typo-disabled-color,
.typo-text .typo-disabled-color {
  color: #999;
}
.typo-text.typo-title-color,
.typo-text .typo-title-color {
  color: #3f4c5a;
}
.typo-text.typo-text-color,
.typo-text .typo-text-color {
  color: #3f4c5a;
}
.typo-text.typo-text-small-color,
.typo-text .typo-text-small-color {
  color: #6b7c8e;
}
.typo-text.typo-text-feedback-red-color,
.typo-text .typo-text-feedback-red-color {
  color: #ed1c24;
}
.typo-text-small {
  text-align: left;
  font-size: 1.8rem;
  font-family: 'Open Sans', 'sans-serif';
  font-weight: normal;
  color: #3f4c5a;
  line-height: 1.1em;
  /* Text style overrides */
  /* Color overrides */
  color: #6b7c8e;
  font-size: 1.44rem;
}
.typo-text-small.typo-set-bold,
.typo-text-small .typo-set-bold {
  font-weight: bold;
}
.typo-text-small b {
  font-weight: bold;
}
.typo-text-small.typo-alt-color,
.typo-text-small .typo-alt-color {
  color: #06C;
}
.typo-text-small.typo-disabled-color,
.typo-text-small .typo-disabled-color {
  color: #999;
}
.typo-text-small.typo-title-color,
.typo-text-small .typo-title-color {
  color: #3f4c5a;
}
.typo-text-small.typo-text-color,
.typo-text-small .typo-text-color {
  color: #3f4c5a;
}
.typo-text-small.typo-text-small-color,
.typo-text-small .typo-text-small-color {
  color: #6b7c8e;
}
.typo-text-small.typo-text-feedback-red-color,
.typo-text-small .typo-text-feedback-red-color {
  color: #ed1c24;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.flex {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
}
.flex.row-reverse {
  flex-direction: row-reverse;
}
.flex.column {
  flex-direction: column;
}
.flex.end {
  justify-content: flex-end;
}
.flex.start {
  justify-content: flex-start;
}
.flex.flex-center {
  justify-content: center;
}
.flex.between {
  justify-content: space-between;
}
.flex.around {
  justify-content: space-around;
}
.flex.cross-start {
  align-items: flex-start;
}
.flex.cross-end {
  align-items: flex-end;
}
.flex.stretch {
  align-items: stretch;
}
.flex.evenly {
  justify-content: space-evenly;
}
.flex.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.flex.wrap {
  flex-wrap: wrap;
}
.flex.grow {
  flex: 1;
}
.flex .flex-half,
.flex .flex-quarter,
.flex .flex-sixth,
.flex .flex-third,
.flex .flex-two-third {
  box-sizing: border-box;
}
.flex .flex-remaining-space {
  flex-grow: 1;
}
.flex .flex-grow-1 {
  flex: 1 1;
}
.flex .flex-grow-2 {
  flex: 2 1;
}
.flex .flex-grow-3 {
  flex: 3 1;
}
.flex .flex-grow-4 {
  flex: 4 1;
}
.flex .flex-grow-5 {
  flex: 5 1;
}
.flex .flex-grow-6 {
  flex: 6 1;
}
.flex .flex-grow-7 {
  flex: 7 1;
}
.flex .flex-grow-8 {
  flex: 8 1;
}
.full {
  width: 100%;
  height: 100%;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21000;
  height: 100%;
  width: 100%;
}
.max--width {
  width: 100%;
}
.max-height {
  height: 100%;
}
.auto-margin {
  margin: auto;
}
.limit-heigth-86 {
  max-height: 86%;
}
.limit-heigth-84 {
  max-height: 84%;
}
.padding-1 {
  padding: 1rem;
}
.padding-left-1 {
  padding-left: 1rem;
}
.padding-2 {
  padding: 2rem;
}
.padding-left-2 {
  padding-left: 2rem;
}
.padding-3 {
  padding: 3rem;
}
.padding-left-3 {
  padding-left: 3rem;
}
.padding-4 {
  padding: 4rem;
}
.padding-left-4 {
  padding-left: 4rem;
}
.padding-5 {
  padding: 5rem;
}
.padding-left-5 {
  padding-left: 5rem;
}
.margin-1 {
  margin: 1rem;
}
.margin-left-1 {
  margin-left: 1rem;
}
.margin-right-1 {
  margin-right: 1rem;
}
.margin-top-1 {
  margin-top: 1rem;
}
.margin-bottom-1 {
  margin-bottom: 1rem;
}
.margin-2 {
  margin: 2rem;
}
.margin-left-2 {
  margin-left: 2rem;
}
.margin-right-2 {
  margin-right: 2rem;
}
.margin-top-2 {
  margin-top: 2rem;
}
.margin-bottom-2 {
  margin-bottom: 2rem;
}
.margin-3 {
  margin: 3rem;
}
.margin-left-3 {
  margin-left: 3rem;
}
.margin-right-3 {
  margin-right: 3rem;
}
.margin-top-3 {
  margin-top: 3rem;
}
.margin-bottom-3 {
  margin-bottom: 3rem;
}
.margin-4 {
  margin: 4rem;
}
.margin-left-4 {
  margin-left: 4rem;
}
.margin-right-4 {
  margin-right: 4rem;
}
.margin-top-4 {
  margin-top: 4rem;
}
.margin-bottom-4 {
  margin-bottom: 4rem;
}
.margin-5 {
  margin: 5rem;
}
.margin-left-5 {
  margin-left: 5rem;
}
.margin-right-5 {
  margin-right: 5rem;
}
.margin-top-5 {
  margin-top: 5rem;
}
.margin-bottom-5 {
  margin-bottom: 5rem;
}
.center-horizontal {
  margin-left: auto;
  margin-right: auto;
}
.width-10 {
  width: 10%;
}
.width-20 {
  width: 20%;
}
.width-30 {
  width: 30%;
}
.width-40 {
  width: 40%;
}
.width-50 {
  width: 50%;
}
.width-60 {
  width: 60%;
}
.width-70 {
  width: 70%;
}
.width-80 {
  width: 80%;
}
.width-90 {
  width: 90%;
}
.width-100 {
  width: 100%;
}
.actionable-link {
  color: #277cd9;
  text-decoration: underline;
  cursor: pointer;
}
.actionable-link:hover {
  color: #4e92ff;
  text-decoration: underline;
}
.actionable-link:focus,
.actionable-link:active {
  color: #2465ab;
  text-decoration: underline;
}
.spin--element {
  animation: spinElement 1.1s linear infinite;
}
@keyframes spinElement {
  100% {
    transform: rotate(360deg);
  }
}
/* Auto-generated CSS variables file */
/* All CSS variables starting with --border */
/* Auto-generated CSS variables file */
:root {
  /* Border */
  --border-contrast: #fff;
  --border-disabled: #aeb7c2;
  /* Border Default */
  --border-default: #d1d3de;
  --border-default-border: 1px;
  /* Border Differentiation Colors Caribbean */
  --border-differentiation-colors-caribbean-01: #ecfffe;
  --border-differentiation-colors-caribbean-02: #d1fafa;
  --border-differentiation-colors-caribbean-03: #b6f6f6;
  --border-differentiation-colors-caribbean-04: #99efef;
  --border-differentiation-colors-caribbean-05: #7ce9e9;
  --border-differentiation-colors-caribbean-06: #5ddfdf;
  --border-differentiation-colors-caribbean-07: #3fd4d4;
  --border-differentiation-colors-caribbean-08: #37c7c7;
  --border-differentiation-colors-caribbean-09: #35b6b6;
  --border-differentiation-colors-caribbean-10: #2f9292;
  --border-differentiation-colors-caribbean-11: #257474;
  --border-differentiation-colors-caribbean-12: #1e5252;
  /* Border Differentiation Colors Cranberry */
  --border-differentiation-colors-cranberry-01: #ffecf7;
  --border-differentiation-colors-cranberry-02: #fbd5e8;
  --border-differentiation-colors-cranberry-03: #f8bad9;
  --border-differentiation-colors-cranberry-04: #f29dc7;
  --border-differentiation-colors-cranberry-05: #eb7fb5;
  --border-differentiation-colors-cranberry-06: #e260a0;
  --border-differentiation-colors-cranberry-07: #d7428c;
  --border-differentiation-colors-cranberry-08: #cc3881;
  --border-differentiation-colors-cranberry-09: #bc3477;
  --border-differentiation-colors-cranberry-10: #982f63;
  --border-differentiation-colors-cranberry-11: #79244e;
  --border-differentiation-colors-cranberry-12: #571e3a;
  /* Border Differentiation Colors Crimson */
  --border-differentiation-colors-crimson-01: #fdf4f4;
  --border-differentiation-colors-crimson-02: #fee7e7;
  --border-differentiation-colors-crimson-03: #fdc9c9;
  --border-differentiation-colors-crimson-04: #f9a9a9;
  --border-differentiation-colors-crimson-05: #f58a8a;
  --border-differentiation-colors-crimson-06: #ee6868;
  --border-differentiation-colors-crimson-07: #e64545;
  --border-differentiation-colors-crimson-08: #e13636;
  --border-differentiation-colors-crimson-09: #d72d2d;
  --border-differentiation-colors-crimson-10: #b42727;
  --border-differentiation-colors-crimson-11: #921f1f;
  --border-differentiation-colors-crimson-12: #6e1c1c;
  /* Border Differentiation Colors Emerald */
  --border-differentiation-colors-emerald-01: #ecfdf4;
  --border-differentiation-colors-emerald-02: #caf7e0;
  --border-differentiation-colors-emerald-03: #aff3d1;
  --border-differentiation-colors-emerald-04: #94ebbf;
  --border-differentiation-colors-emerald-05: #78e3ad;
  --border-differentiation-colors-emerald-06: #5ad899;
  --border-differentiation-colors-emerald-07: #3dcc84;
  --border-differentiation-colors-emerald-08: #38bc7a;
  --border-differentiation-colors-emerald-09: #38a870;
  --border-differentiation-colors-emerald-10: #32865c;
  --border-differentiation-colors-emerald-11: #266847;
  --border-differentiation-colors-emerald-12: #1e4833;
  /* Border Differentiation Colors Fuchsia */
  --border-differentiation-colors-fuchsia-01: #feecff;
  --border-differentiation-colors-fuchsia-02: #fbd5fb;
  --border-differentiation-colors-fuchsia-03: #f8b9f8;
  --border-differentiation-colors-fuchsia-04: #f29bf2;
  --border-differentiation-colors-fuchsia-05: #ec7eec;
  --border-differentiation-colors-fuchsia-06: #e35fe3;
  --border-differentiation-colors-fuchsia-07: #d941d9;
  --border-differentiation-colors-fuchsia-08: #cd37cd;
  --border-differentiation-colors-fuchsia-09: #bd32bd;
  --border-differentiation-colors-fuchsia-10: #992e99;
  --border-differentiation-colors-fuchsia-11: #7a237a;
  --border-differentiation-colors-fuchsia-12: #581d58;
  /* Border Differentiation Colors Indigo */
  --border-differentiation-colors-indigo-01: #e4eafb;
  --border-differentiation-colors-indigo-02: #cad5f7;
  --border-differentiation-colors-indigo-03: #afc0f3;
  --border-differentiation-colors-indigo-04: #93a9eb;
  --border-differentiation-colors-indigo-05: #7892e3;
  --border-differentiation-colors-indigo-06: #5a79d8;
  --border-differentiation-colors-indigo-07: #3d61cc;
  --border-differentiation-colors-indigo-08: #3859bc;
  --border-differentiation-colors-indigo-09: #3854a8;
  --border-differentiation-colors-indigo-10: #324786;
  --border-differentiation-colors-indigo-11: #263669;
  --border-differentiation-colors-indigo-12: #1e2848;
  /* Border Differentiation Colors Lavender */
  --border-differentiation-colors-lavender-01: #f5ecff;
  --border-differentiation-colors-lavender-02: #e8d5fb;
  --border-differentiation-colors-lavender-03: #d9b9f8;
  --border-differentiation-colors-lavender-04: #c69af2;
  --border-differentiation-colors-lavender-05: #b57eec;
  --border-differentiation-colors-lavender-06: #a05fe3;
  --border-differentiation-colors-lavender-07: #8c41d9;
  --border-differentiation-colors-lavender-08: #8238ce;
  --border-differentiation-colors-lavender-09: #7732bd;
  --border-differentiation-colors-lavender-10: #632e99;
  --border-differentiation-colors-lavender-11: #4e237a;
  --border-differentiation-colors-lavender-12: #3a1d58;
  /* Border Differentiation Colors Lemon */
  --border-differentiation-colors-lemon-01: #fffae5;
  --border-differentiation-colors-lemon-02: #fff4bd;
  --border-differentiation-colors-lemon-03: #ffef9e;
  --border-differentiation-colors-lemon-04: #ffe979;
  --border-differentiation-colors-lemon-05: #ffe357;
  --border-differentiation-colors-lemon-06: #ffdc2e;
  --border-differentiation-colors-lemon-07: #fad20c;
  --border-differentiation-colors-lemon-08: #e6c10a;
  --border-differentiation-colors-lemon-09: #ceae0d;
  --border-differentiation-colors-lemon-10: #a48b0e;
  --border-differentiation-colors-lemon-11: #7e6b0a;
  --border-differentiation-colors-lemon-12: #574a0a;
  /* Border Differentiation Colors Mantis */
  --border-differentiation-colors-mantis-01: #f0ffec;
  --border-differentiation-colors-mantis-02: #dcfbd5;
  --border-differentiation-colors-mantis-03: #c4f8ba;
  --border-differentiation-colors-mantis-04: #aaf19c;
  --border-differentiation-colors-mantis-05: #91eb7f;
  --border-differentiation-colors-mantis-06: #75e260;
  --border-differentiation-colors-mantis-07: #59d640;
  --border-differentiation-colors-mantis-08: #50cb37;
  --border-differentiation-colors-mantis-09: #4abc34;
  --border-differentiation-colors-mantis-10: #40982f;
  --border-differentiation-colors-mantis-11: #2d6621;
  --border-differentiation-colors-mantis-12: #28571e;
  /* Border Differentiation Colors Pear */
  --border-differentiation-colors-pear-01: #f7fce8;
  --border-differentiation-colors-pear-02: #f0fad1;
  --border-differentiation-colors-pear-03: #e6f6b6;
  --border-differentiation-colors-pear-04: #daef99;
  --border-differentiation-colors-pear-05: #cee97c;
  --border-differentiation-colors-pear-06: #bfdf5d;
  --border-differentiation-colors-pear-07: #afd441;
  --border-differentiation-colors-pear-08: #a4c839;
  --border-differentiation-colors-pear-09: #96b635;
  --border-differentiation-colors-pear-10: #7a922f;
  --border-differentiation-colors-pear-11: #607425;
  --border-differentiation-colors-pear-12: #45521e;
  /* Border Differentiation Colors Pumpkin */
  --border-differentiation-colors-pumpkin-01: #fff4eb;
  --border-differentiation-colors-pumpkin-02: #ffdebd;
  --border-differentiation-colors-pumpkin-03: #ffcf9e;
  --border-differentiation-colors-pumpkin-04: #ffbd7a;
  --border-differentiation-colors-pumpkin-05: #ffab57;
  --border-differentiation-colors-pumpkin-06: #ff962e;
  --border-differentiation-colors-pumpkin-07: #fa830c;
  --border-differentiation-colors-pumpkin-08: #e1760a;
  --border-differentiation-colors-pumpkin-09: #ce6e0d;
  --border-differentiation-colors-pumpkin-10: #a4590e;
  --border-differentiation-colors-pumpkin-11: #7f440a;
  --border-differentiation-colors-pumpkin-12: #57300a;
  /* Border Differentiation Colors Sky */
  --border-differentiation-colors-sky-01: #effaff;
  --border-differentiation-colors-sky-02: #d4eefc;
  --border-differentiation-colors-sky-03: #b7e3fa;
  --border-differentiation-colors-sky-04: #97d4f5;
  --border-differentiation-colors-sky-05: #7ac7f0;
  --border-differentiation-colors-sky-06: #59b6e8;
  --border-differentiation-colors-sky-07: #38a4de;
  --border-differentiation-colors-sky-08: #2f9ad4;
  --border-differentiation-colors-sky-09: #2b8fc5;
  --border-differentiation-colors-sky-10: #28759f;
  --border-differentiation-colors-sky-11: #1f5e7f;
  --border-differentiation-colors-sky-12: #1a455b;
  /* Border Greyscale */
  --border-greyscale-01: #fff;
  --border-greyscale-02: #f5f5f8;
  --border-greyscale-03: #e9eaef;
  --border-greyscale-04: #d1d3de;
  --border-greyscale-05: #aeb7c2;
  --border-greyscale-06: #8c99a8;
  --border-greyscale-07: #6b7c8e;
  --border-greyscale-08: #556474;
  --border-greyscale-09: #3f4c5a;
  --border-greyscale-10: #2a3541;
  /* Border Selected */
  --border-selected: #1f5e7f;
  --border-selected-border: 2px;
  /* Border Subject An */
  --border-subject-an-01: #fffae5;
  --border-subject-an-02: #fff4bd;
  --border-subject-an-03: #ffef9e;
  --border-subject-an-04: #ffe979;
  --border-subject-an-05: #ffe357;
  --border-subject-an-06: #ffdc2e;
  --border-subject-an-07: #fad20c;
  --border-subject-an-08: #e6c10a;
  --border-subject-an-09: #ceae0d;
  --border-subject-an-10: #a48b0e;
  --border-subject-an-11: #7e6b0a;
  --border-subject-an-12: #574a0a;
  /* Border Subject Crimson */
  --border-subject-crimson-01: #fdf4f4;
  --border-subject-crimson-02: #fee7e7;
  --border-subject-crimson-03: #fdc9c9;
  --border-subject-crimson-04: #f9a9a9;
  --border-subject-crimson-05: #f58a8a;
  --border-subject-crimson-06: #ee6868;
  --border-subject-crimson-07: #e64545;
  --border-subject-crimson-08: #e13636;
  --border-subject-crimson-09: #d72d2d;
  --border-subject-crimson-10: #b42727;
  --border-subject-crimson-11: #921f1f;
  --border-subject-crimson-12: #6e1c1c;
  /* Border Subject Digital Literacy */
  --border-subject-digital-literacy-01: #feecff;
  --border-subject-digital-literacy-02: #fbd5fb;
  --border-subject-digital-literacy-03: #f8b9f8;
  --border-subject-digital-literacy-04: #f29bf2;
  --border-subject-digital-literacy-05: #ec7eec;
  --border-subject-digital-literacy-06: #e35fe3;
  --border-subject-digital-literacy-07: #d941d9;
  --border-subject-digital-literacy-08: #cd37cd;
  --border-subject-digital-literacy-09: #bd32bd;
  --border-subject-digital-literacy-10: #992e99;
  --border-subject-digital-literacy-11: #7a237a;
  --border-subject-digital-literacy-12: #581d58;
  /* Border Subject Dutch */
  --border-subject-dutch-01: #f0ffec;
  --border-subject-dutch-02: #dcfbd5;
  --border-subject-dutch-03: #c4f8ba;
  --border-subject-dutch-04: #aaf19c;
  --border-subject-dutch-05: #91eb7f;
  --border-subject-dutch-06: #75e260;
  --border-subject-dutch-07: #59d640;
  --border-subject-dutch-08: #50cb37;
  --border-subject-dutch-09: #4abc34;
  --border-subject-dutch-10: #40982f;
  --border-subject-dutch-11: #2d6621;
  --border-subject-dutch-12: #28571e;
  /* Border Subject English */
  --border-subject-english-01: #f5ecff;
  --border-subject-english-02: #e8d5fb;
  --border-subject-english-03: #d9b9f8;
  --border-subject-english-04: #c69af2;
  --border-subject-english-05: #b57eec;
  --border-subject-english-06: #a05fe3;
  --border-subject-english-07: #8c41d9;
  --border-subject-english-08: #8238ce;
  --border-subject-english-09: #7732bd;
  --border-subject-english-10: #632e99;
  --border-subject-english-11: #4e237a;
  --border-subject-english-12: #3a1d58;
  /* Border Subject French */
  --border-subject-french-01: #e4eafb;
  --border-subject-french-02: #cad5f7;
  --border-subject-french-03: #afc0f3;
  --border-subject-french-04: #93a9eb;
  --border-subject-french-05: #7892e3;
  --border-subject-french-06: #5a79d8;
  --border-subject-french-07: #3d61cc;
  --border-subject-french-08: #3859bc;
  --border-subject-french-09: #3854a8;
  --border-subject-french-10: #324786;
  --border-subject-french-11: #263669;
  --border-subject-french-12: #1e2848;
  /* Border Subject Grammar */
  --border-subject-grammar-01: #ffecf7;
  --border-subject-grammar-02: #fbd5e8;
  --border-subject-grammar-03: #f8bad9;
  --border-subject-grammar-04: #f29dc7;
  --border-subject-grammar-05: #eb7fb5;
  --border-subject-grammar-06: #e260a0;
  --border-subject-grammar-07: #d7428c;
  --border-subject-grammar-08: #cc3881;
  --border-subject-grammar-09: #bc3477;
  --border-subject-grammar-10: #982f63;
  --border-subject-grammar-11: #79244e;
  --border-subject-grammar-12: #571e3a;
  /* Border Subject Letters */
  --border-subject-letters-01: #ecfdf4;
  --border-subject-letters-02: #caf7e0;
  --border-subject-letters-03: #aff3d1;
  --border-subject-letters-04: #94ebbf;
  --border-subject-letters-05: #78e3ad;
  --border-subject-letters-06: #5ad899;
  --border-subject-letters-07: #3dcc84;
  --border-subject-letters-08: #38bc7a;
  --border-subject-letters-09: #38a870;
  --border-subject-letters-10: #32865c;
  --border-subject-letters-11: #266847;
  --border-subject-letters-12: #1e4833;
  /* Border Subject Math */
  --border-subject-math-01: #effaff;
  --border-subject-math-02: #d4eefc;
  --border-subject-math-03: #b7e3fa;
  --border-subject-math-04: #97d4f5;
  --border-subject-math-05: #7ac7f0;
  --border-subject-math-06: #59b6e8;
  --border-subject-math-07: #38a4de;
  --border-subject-math-08: #2f9ad4;
  --border-subject-math-09: #2b8fc5;
  --border-subject-math-10: #28759f;
  --border-subject-math-11: #1f5e7f;
  --border-subject-math-12: #1a455b;
  /* Border Subject Numbers */
  --border-subject-numbers-01: #ecfffe;
  --border-subject-numbers-02: #d1fafa;
  --border-subject-numbers-03: #b6f6f6;
  --border-subject-numbers-04: #99efef;
  --border-subject-numbers-05: #7ce9e9;
  --border-subject-numbers-06: #5ddfdf;
  --border-subject-numbers-07: #3fd4d4;
  --border-subject-numbers-08: #37c7c7;
  --border-subject-numbers-09: #35b6b6;
  --border-subject-numbers-10: #2f9292;
  --border-subject-numbers-11: #257474;
  --border-subject-numbers-12: #1e5252;
  /* Border Subject Numbers Letters */
  --border-subject-numbers-letters-01: #ecfdf4;
  --border-subject-numbers-letters-02: #caf7e0;
  --border-subject-numbers-letters-03: #aff3d1;
  --border-subject-numbers-letters-04: #94ebbf;
  --border-subject-numbers-letters-05: #78e3ad;
  --border-subject-numbers-letters-06: #5ad899;
  --border-subject-numbers-letters-07: #3dcc84;
  --border-subject-numbers-letters-08: #38bc7a;
  --border-subject-numbers-letters-09: #38a870;
  --border-subject-numbers-letters-10: #32865c;
  --border-subject-numbers-letters-11: #266847;
  --border-subject-numbers-letters-12: #1e4833;
  /* Border Subject Spelling */
  --border-subject-spelling-01: #f0ffec;
  --border-subject-spelling-02: #dcfbd5;
  --border-subject-spelling-03: #c4f8ba;
  --border-subject-spelling-04: #aaf19c;
  --border-subject-spelling-05: #91eb7f;
  --border-subject-spelling-06: #75e260;
  --border-subject-spelling-07: #59d640;
  --border-subject-spelling-08: #50cb37;
  --border-subject-spelling-09: #4abc34;
  --border-subject-spelling-10: #40982f;
  --border-subject-spelling-11: #2d6621;
  --border-subject-spelling-12: #28571e;
  /* Border Subject Topography */
  --border-subject-topography-01: #f7fce8;
  --border-subject-topography-02: #f0fad1;
  --border-subject-topography-03: #e6f6b6;
  --border-subject-topography-04: #daef99;
  --border-subject-topography-05: #cee97c;
  --border-subject-topography-06: #bfdf5d;
  --border-subject-topography-07: #afd441;
  --border-subject-topography-08: #a4c839;
  --border-subject-topography-09: #96b635;
  --border-subject-topography-10: #7a922f;
  --border-subject-topography-11: #607425;
  --border-subject-topography-12: #45521e;
  /* Border Subject Vocabulary */
  --border-subject-vocabulary-01: #fff4eb;
  --border-subject-vocabulary-02: #ffdebd;
  --border-subject-vocabulary-03: #ffcf9e;
  --border-subject-vocabulary-04: #ffbd7a;
  --border-subject-vocabulary-05: #ffab57;
  --border-subject-vocabulary-06: #ff962e;
  --border-subject-vocabulary-07: #fa830c;
  --border-subject-vocabulary-08: #e1760a;
  --border-subject-vocabulary-09: #ce6e0d;
  --border-subject-vocabulary-10: #a4590e;
  --border-subject-vocabulary-11: #7f440a;
  --border-subject-vocabulary-12: #57300a;
}
/* All CSS variables starting with --color-brand */
/* Auto-generated CSS variables file */
:root {
  /* Color Brand Basispoort Blue */
  --color-brand-basispoort-blue-00-light: #333663;
  --color-brand-basispoort-blue-01-base: #292c59;
  --color-brand-basispoort-blue-02-dark: #1f224f;
  /* Color Brand Esis */
  --color-brand-esis-00-light: #50cb37;
  --color-brand-esis-01-base: #4abc34;
  --color-brand-esis-02-dark: #40982f;
  /* Color Brand Gynzy Blue */
  --color-brand-gynzy-blue-00-lightest: #e9f2fb;
  --color-brand-gynzy-blue-01-lighter: #bed8f4;
  --color-brand-gynzy-blue-02-light: #4e92ff;
  --color-brand-gynzy-blue-03-base: #277cd9;
  --color-brand-gynzy-blue-04-dark: #2465ab;
  /* Color Brand Gynzy Orange */
  --color-brand-gynzy-orange-00-lightest: #fff5eb;
  --color-brand-gynzy-orange-01-lighter: #ffe5cc;
  --color-brand-gynzy-orange-02-light: #fda045;
  --color-brand-gynzy-orange-03-base: #fd8b1d;
  --color-brand-gynzy-orange-04-dark: #e57102;
  /* Color Brand Parnassys Pink */
  --color-brand-parnassys-pink-00-light: #f34c77;
  --color-brand-parnassys-pink-01-base: #e9426d;
  --color-brand-parnassys-pink-02-dark: #df3863;
  /* Color Brand Questi Green */
  --color-brand-questi-green-00-light: #e7e50a;
  --color-brand-questi-green-01-base: #dddb00;
  --color-brand-questi-green-02-dark: #d3d100;
  /* Color Brand Smartschool Red */
  --color-brand-smartschool-red-00-light: #fc1e1e;
  --color-brand-smartschool-red-01-base: #f20900;
  --color-brand-smartschool-red-02-dark: #e80000;
}
/* All CSS variables starting with --color-differentiation */
/* Auto-generated CSS variables file */
:root {
  /* Color Differentiation Caribbean */
  --color-differentiation-caribbean-01: #ecfffe;
  --color-differentiation-caribbean-02: #d1fafa;
  --color-differentiation-caribbean-03: #b6f6f6;
  --color-differentiation-caribbean-04: #99efef;
  --color-differentiation-caribbean-05: #7ce9e9;
  --color-differentiation-caribbean-06: #5ddfdf;
  --color-differentiation-caribbean-07: #3fd4d4;
  --color-differentiation-caribbean-08: #37c7c7;
  --color-differentiation-caribbean-09: #35b6b6;
  --color-differentiation-caribbean-10: #2f9292;
  --color-differentiation-caribbean-11: #257474;
  --color-differentiation-caribbean-12: #1e5252;
  /* Color Differentiation Cranberry */
  --color-differentiation-cranberry-01: #ffecf7;
  --color-differentiation-cranberry-02: #fbd5e8;
  --color-differentiation-cranberry-03: #f8bad9;
  --color-differentiation-cranberry-04: #f29dc7;
  --color-differentiation-cranberry-05: #eb7fb5;
  --color-differentiation-cranberry-06: #e260a0;
  --color-differentiation-cranberry-07: #d7428c;
  --color-differentiation-cranberry-08: #cc3881;
  --color-differentiation-cranberry-09: #bc3477;
  --color-differentiation-cranberry-10: #982f63;
  --color-differentiation-cranberry-11: #79244e;
  --color-differentiation-cranberry-12: #571e3a;
  /* Color Differentiation Crimson */
  --color-differentiation-crimson-01: #fdf4f4;
  --color-differentiation-crimson-02: #fee7e7;
  --color-differentiation-crimson-03: #fdc9c9;
  --color-differentiation-crimson-04: #f9a9a9;
  --color-differentiation-crimson-05: #f58a8a;
  --color-differentiation-crimson-06: #ee6868;
  --color-differentiation-crimson-07: #e64545;
  --color-differentiation-crimson-08: #e13636;
  --color-differentiation-crimson-09: #d72d2d;
  --color-differentiation-crimson-10: #b42727;
  --color-differentiation-crimson-11: #921f1f;
  --color-differentiation-crimson-12: #6e1c1c;
  /* Color Differentiation Emerald */
  --color-differentiation-emerald-01: #ecfdf4;
  --color-differentiation-emerald-02: #caf7e0;
  --color-differentiation-emerald-03: #aff3d1;
  --color-differentiation-emerald-04: #94ebbf;
  --color-differentiation-emerald-05: #78e3ad;
  --color-differentiation-emerald-06: #5ad899;
  --color-differentiation-emerald-07: #3dcc84;
  --color-differentiation-emerald-08: #38bc7a;
  --color-differentiation-emerald-09: #38a870;
  --color-differentiation-emerald-10: #32865c;
  --color-differentiation-emerald-11: #266847;
  --color-differentiation-emerald-12: #1e4833;
  /* Color Differentiation Fuchsia */
  --color-differentiation-fuchsia-01: #feecff;
  --color-differentiation-fuchsia-02: #fbd5fb;
  --color-differentiation-fuchsia-03: #f8b9f8;
  --color-differentiation-fuchsia-04: #f29bf2;
  --color-differentiation-fuchsia-05: #ec7eec;
  --color-differentiation-fuchsia-06: #e35fe3;
  --color-differentiation-fuchsia-07: #d941d9;
  --color-differentiation-fuchsia-08: #cd37cd;
  --color-differentiation-fuchsia-09: #bd32bd;
  --color-differentiation-fuchsia-10: #992e99;
  --color-differentiation-fuchsia-11: #7a237a;
  --color-differentiation-fuchsia-12: #581d58;
  /* Color Differentiation Indigo */
  --color-differentiation-indigo-01: #e4eafb;
  --color-differentiation-indigo-02: #cad5f7;
  --color-differentiation-indigo-03: #afc0f3;
  --color-differentiation-indigo-04: #93a9eb;
  --color-differentiation-indigo-05: #7892e3;
  --color-differentiation-indigo-06: #5a79d8;
  --color-differentiation-indigo-07: #3d61cc;
  --color-differentiation-indigo-08: #3859bc;
  --color-differentiation-indigo-09: #3854a8;
  --color-differentiation-indigo-10: #324786;
  --color-differentiation-indigo-11: #263669;
  --color-differentiation-indigo-12: #1e2848;
  /* Color Differentiation Lavender */
  --color-differentiation-lavender-01: #f5ecff;
  --color-differentiation-lavender-02: #e8d5fb;
  --color-differentiation-lavender-03: #d9b9f8;
  --color-differentiation-lavender-04: #c69af2;
  --color-differentiation-lavender-05: #b57eec;
  --color-differentiation-lavender-06: #a05fe3;
  --color-differentiation-lavender-07: #8c41d9;
  --color-differentiation-lavender-08: #8238ce;
  --color-differentiation-lavender-09: #7732bd;
  --color-differentiation-lavender-10: #632e99;
  --color-differentiation-lavender-11: #4e237a;
  --color-differentiation-lavender-12: #3a1d58;
  /* Color Differentiation Lemon */
  --color-differentiation-lemon-01: #fffae5;
  --color-differentiation-lemon-02: #fff4bd;
  --color-differentiation-lemon-03: #ffef9e;
  --color-differentiation-lemon-04: #ffe979;
  --color-differentiation-lemon-05: #ffe357;
  --color-differentiation-lemon-06: #ffdc2e;
  --color-differentiation-lemon-07: #fad20c;
  --color-differentiation-lemon-08: #e6c10a;
  --color-differentiation-lemon-09: #ceae0d;
  --color-differentiation-lemon-10: #a48b0e;
  --color-differentiation-lemon-11: #7e6b0a;
  --color-differentiation-lemon-12: #574a0a;
  /* Color Differentiation Mantis */
  --color-differentiation-mantis-01: #f0ffec;
  --color-differentiation-mantis-02: #dcfbd5;
  --color-differentiation-mantis-03: #c4f8ba;
  --color-differentiation-mantis-04: #aaf19c;
  --color-differentiation-mantis-05: #91eb7f;
  --color-differentiation-mantis-06: #75e260;
  --color-differentiation-mantis-07: #59d640;
  --color-differentiation-mantis-08: #50cb37;
  --color-differentiation-mantis-09: #4abc34;
  --color-differentiation-mantis-10: #40982f;
  --color-differentiation-mantis-11: #2d6621;
  --color-differentiation-mantis-12: #28571e;
  /* Color Differentiation Pear */
  --color-differentiation-pear-01: #f7fce8;
  --color-differentiation-pear-02: #f0fad1;
  --color-differentiation-pear-03: #e6f6b6;
  --color-differentiation-pear-04: #daef99;
  --color-differentiation-pear-05: #cee97c;
  --color-differentiation-pear-06: #bfdf5d;
  --color-differentiation-pear-07: #afd441;
  --color-differentiation-pear-08: #a4c839;
  --color-differentiation-pear-09: #96b635;
  --color-differentiation-pear-10: #7a922f;
  --color-differentiation-pear-11: #607425;
  --color-differentiation-pear-12: #45521e;
  /* Color Differentiation Pumpkin */
  --color-differentiation-pumpkin-01: #fff4eb;
  --color-differentiation-pumpkin-02: #ffdebd;
  --color-differentiation-pumpkin-03: #ffcf9e;
  --color-differentiation-pumpkin-04: #ffbd7a;
  --color-differentiation-pumpkin-05: #ffab57;
  --color-differentiation-pumpkin-06: #ff962e;
  --color-differentiation-pumpkin-07: #fa830c;
  --color-differentiation-pumpkin-08: #e1760a;
  --color-differentiation-pumpkin-09: #ce6e0d;
  --color-differentiation-pumpkin-10: #a4590e;
  --color-differentiation-pumpkin-11: #7f440a;
  --color-differentiation-pumpkin-12: #57300a;
  /* Color Differentiation Sky */
  --color-differentiation-sky-01: #effaff;
  --color-differentiation-sky-02: #d4eefc;
  --color-differentiation-sky-03: #b7e3fa;
  --color-differentiation-sky-04: #97d4f5;
  --color-differentiation-sky-05: #7ac7f0;
  --color-differentiation-sky-06: #59b6e8;
  --color-differentiation-sky-07: #38a4de;
  --color-differentiation-sky-08: #2f9ad4;
  --color-differentiation-sky-09: #2b8fc5;
  --color-differentiation-sky-10: #28759f;
  --color-differentiation-sky-11: #1f5e7f;
  --color-differentiation-sky-12: #1a455b;
  --color-differentiation-sky-13: #a9c8d9;
}
/* All CSS variables starting with --color-feedback */
/* Auto-generated CSS variables file */
:root {
  /* Color Feedback Negative */
  --color-feedback-negative-00-lightest: #fef1f1;
  --color-feedback-negative-01-lighter: #fcd9db;
  --color-feedback-negative-02-light: #f04248;
  --color-feedback-negative-03-base: #ed1c24;
  --color-feedback-negative-04-dark: #c61017;
  /* Color Feedback Positive */
  --color-feedback-positive-00-lightest: #eefdec;
  --color-feedback-positive-01-lighter: #aef7a7;
  --color-feedback-positive-02-light: #25cf14;
  --color-feedback-positive-03-base: #1eaa10;
  --color-feedback-positive-04-dark: #167b0c;
}
/* All CSS variables starting with --color-greyscale */
/* Auto-generated CSS variables file */
:root {
  /* Color Greyscale */
  --color-greyscale-01-white: #fff;
  --color-greyscale-02-aqua-haze: #f5f5f8;
  --color-greyscale-03-solitude: #e9eaef;
  --color-greyscale-04-ghost: #d1d3de;
  --color-greyscale-05-heather: #aeb7c2;
  --color-greyscale-06-regent-grey: #8c99a8;
  --color-greyscale-07-slate-grey: #6b7c8e;
  --color-greyscale-08-shuttle-grey: #556474;
  --color-greyscale-09-riverbed: #3f4c5a;
  --color-greyscale-10-midnight: #2a3541;
  --color-greyscale-11-black: #000;
}
/* All CSS variables starting with --component */
/* Auto-generated CSS variables file */
:root {
  /* Component Button Cta Cta */
  --component-button-cta-cta-active: #e1760a;
  --component-button-cta-cta-default: #fa830c;
  --component-button-cta-cta-disabled: #ffbd7a;
  --component-button-cta-cta-focused: #ff962e;
  --component-button-cta-cta-hover: #ff962e;
  --component-button-cta-cta-label-default: #fff;
  /* Component Button Filled */
  --component-button-filled-icon: #fff;
  --component-button-filled-label: #fff;
  /* Component Button Filled Bg */
  --component-button-filled-bg-active: #1f5e7f;
  --component-button-filled-bg-default: #28759f;
  --component-button-filled-bg-disabled: #a9c8d9;
  --component-button-filled-bg-focused: #2b8fc5;
  --component-button-filled-bg-hover: #2b8fc5;
  /* Component Button Outlined Bg */
  --component-button-outlined-bg-active: #b7e3fa;
  --component-button-outlined-bg-default: #fff;
  --component-button-outlined-bg-disabled: #fff6;
  --component-button-outlined-bg-focused: #d4eefc;
  --component-button-outlined-bg-hover: #d4eefc;
  /* Component Button Outlined Label */
  --component-button-outlined-label: #1f5e7f;
  --component-button-outlined-label-disabled: #a9c8d9;
  /* Component Button Outlined Stroke */
  --component-button-outlined-stroke: #28759f;
  --component-button-outlined-stroke-disabled: #a9c8d9;
  /* Component Button Text Label */
  --component-button-text-label-default: #1f5e7f;
  --component-button-text-label-disabled: #a9c8d9;
  /* Component Button Text Text */
  --component-button-text-text-active: #b7e3fa;
  --component-button-text-text-disabled: #fff6;
  --component-button-text-text-focused: #d4eefc;
  --component-button-text-text-hover: #d4eefc;
  /* Component Button Tonal Bg */
  --component-button-tonal-bg-active: #b7e3fa;
  --component-button-tonal-bg-default: #d4eefc;
  --component-button-tonal-bg-disabled: #effaff;
  --component-button-tonal-bg-focused: #b7e3fa;
  --component-button-tonal-bg-hover: #b7e3fa;
  /* Component Button Tonal Label */
  --component-button-tonal-label: #1f5e7f;
  --component-button-tonal-label-disabled: #a9c8d9;
  /* Component Button Warning Warning */
  --component-button-warning-warning-active: #b42727;
  --component-button-warning-warning-border: #e64545;
  --component-button-warning-warning-default: #e64545;
  --component-button-warning-warning-disabled: #f9a9a9;
  --component-button-warning-warning-focused: #ee6868;
  --component-button-warning-warning-hover: #ee6868;
  --component-button-warning-warning-label-default: #fff;
  /* Component Dropdown Label */
  --component-dropdown-label-default: #1f5e7f;
  --component-dropdown-label-disabled: #a9c8d9;
  --component-dropdown-label-icon: #1f5e7f;
  /* Component Dropdown Selected */
  --component-dropdown-selected-active: #b7e3fa;
  --component-dropdown-selected-default: #d4eefc;
  --component-dropdown-selected-disabled: #effaff;
  --component-dropdown-selected-focused: #b7e3fa;
  --component-dropdown-selected-hover: #b7e3fa;
  /* Component Dropdown Unselected */
  --component-dropdown-unselected-active: #b7e3fa;
  --component-dropdown-unselected-default: #fff;
  --component-dropdown-unselected-disabled: #fff6;
  --component-dropdown-unselected-focused: #d4eefc;
  --component-dropdown-unselected-hover: #d4eefc;
  /* Component Dropdown Unselected Border */
  --component-dropdown-unselected-border-default: #28759f;
  --component-dropdown-unselected-border-disabled: #a9c8d9;
  /* Component Icon Button Filled Bg */
  --component-icon-button-filled-bg-active: #1f5e7f;
  --component-icon-button-filled-bg-default: #28759f;
  --component-icon-button-filled-bg-disabled: #a9c8d9;
  --component-icon-button-filled-bg-focus: #2b8fc5;
  --component-icon-button-filled-bg-hover: #2b8fc5;
  /* Component Icon Button Outlined Grey Bg */
  --component-icon-button-outlined-grey-bg-active: #e9eaef;
  --component-icon-button-outlined-grey-bg-default: #fff;
  --component-icon-button-outlined-grey-bg-focus: #f5f5f8;
  --component-icon-button-outlined-grey-bg-hover: #f5f5f8;
  /* Component Icon Button Outlined Grey Icon */
  --component-icon-button-outlined-grey-icon-default: #556474;
  --component-icon-button-outlined-grey-icon-disabled: #aeb7c2;
  /* Component Icon Button Outlined Grey Stroke */
  --component-icon-button-outlined-grey-stroke: #d1d3de;
  --component-icon-button-outlined-grey-stroke-disabled: #e9eaef;
  /* Component Icon Button Outlined Sky Bg */
  --component-icon-button-outlined-sky-bg-active: #b7e3fa;
  --component-icon-button-outlined-sky-bg-default: #fff;
  --component-icon-button-outlined-sky-bg-disabled: #fff6;
  --component-icon-button-outlined-sky-bg-focus: #d4eefc;
  --component-icon-button-outlined-sky-bg-hover: #d4eefc;
  /* Component Icon Button Outlined Sky Icon */
  --component-icon-button-outlined-sky-icon-default: #1f5e7f;
  --component-icon-button-outlined-sky-icon-disabled: #a9c8d9;
  /* Component Icon Button Outlined Sky Stroke */
  --component-icon-button-outlined-sky-stroke: #28759f;
  --component-icon-button-outlined-sky-stroke-disabled: #a9c8d9;
  /* Component Icon Button Standard Contrast Bg */
  --component-icon-button-standard-contrast-bg-active: #fff6;
  --component-icon-button-standard-contrast-bg-focus: #fff3;
  --component-icon-button-standard-contrast-bg-hover: #fff3;
  /* Component Icon Button Standard Contrast Icon */
  --component-icon-button-standard-contrast-icon-default: #fff;
  --component-icon-button-standard-contrast-icon-disabled: #fff6;
  /* Component Icon Button Standard Grey Bg */
  --component-icon-button-standard-grey-bg-active: #e9eaef;
  --component-icon-button-standard-grey-bg-focus: #f5f5f8;
  --component-icon-button-standard-grey-bg-hover: #f5f5f8;
  /* Component Icon Button Standard Grey Icon */
  --component-icon-button-standard-grey-icon-default: #556474;
  --component-icon-button-standard-grey-icon-disabled: #aeb7c2;
  /* Component Icon Button Standard Sky Bg */
  --component-icon-button-standard-sky-bg-active: #b7e3fa;
  --component-icon-button-standard-sky-bg-focus: #d4eefc;
  --component-icon-button-standard-sky-bg-hover: #d4eefc;
  /* Component Icon Button Standard Sky Icon */
  --component-icon-button-standard-sky-icon-default: #1f5e7f;
  --component-icon-button-standard-sky-icon-disabled: #a9c8d9;
  /* Component Icon Button Standard Warning Bg */
  --component-icon-button-standard-warning-bg-active: #b42727;
  --component-icon-button-standard-warning-bg-focus: #ee6868;
  --component-icon-button-standard-warning-bg-hover: #ee6868;
  /* Component Icon Button Standard Warning Icon */
  --component-icon-button-standard-warning-icon-active: #fff;
  --component-icon-button-standard-warning-icon-default: #b42727;
  --component-icon-button-standard-warning-icon-disabled: #fdc9c9;
  --component-icon-button-standard-warning-icon-hover: #fff;
  /* Component Icon Button Tonal Bg */
  --component-icon-button-tonal-bg-active: #97d4f5;
  --component-icon-button-tonal-bg-default: #d4eefc;
  --component-icon-button-tonal-bg-disabled: #effaff;
  --component-icon-button-tonal-bg-focus: #b7e3fa;
  --component-icon-button-tonal-bg-hover: #b7e3fa;
  /* Component Icon Button Tonal Icon */
  --component-icon-button-tonal-icon: #1f5e7f;
  --component-icon-button-tonal-icon-disabled: #a9c8d9;
  /* Component Labels Differentiation Colors Caribbean */
  --component-labels-differentiation-colors-caribbean-active: #2f9292;
  --component-labels-differentiation-colors-caribbean-default: #35b6b6;
  --component-labels-differentiation-colors-caribbean-hover: #37c7c7;
  /* Component Labels Differentiation Colors Cranberry */
  --component-labels-differentiation-colors-cranberry-active: #982f63;
  --component-labels-differentiation-colors-cranberry-default: #bc3477;
  --component-labels-differentiation-colors-cranberry-hover: #cc3881;
  /* Component Labels Differentiation Colors Crimson */
  --component-labels-differentiation-colors-crimson-active: #b42727;
  --component-labels-differentiation-colors-crimson-default: #d72d2d;
  --component-labels-differentiation-colors-crimson-hover: #e13636;
  /* Component Labels Differentiation Colors Emerald */
  --component-labels-differentiation-colors-emerald-active: #32865c;
  --component-labels-differentiation-colors-emerald-default: #38a870;
  --component-labels-differentiation-colors-emerald-hover: #38bc7a;
  /* Component Labels Differentiation Colors Fuchsia */
  --component-labels-differentiation-colors-fuchsia-active: #992e99;
  --component-labels-differentiation-colors-fuchsia-default: #bd32bd;
  --component-labels-differentiation-colors-fuchsia-hover: #cd37cd;
  /* Component Labels Differentiation Colors Indigo */
  --component-labels-differentiation-colors-indigo-active: #324786;
  --component-labels-differentiation-colors-indigo-default: #3854a8;
  --component-labels-differentiation-colors-indigo-hover: #3859bc;
  /* Component Labels Differentiation Colors Lavender */
  --component-labels-differentiation-colors-lavender-active: #632e99;
  --component-labels-differentiation-colors-lavender-default: #7732bd;
  --component-labels-differentiation-colors-lavender-hover: #8238ce;
  /* Component Labels Differentiation Colors Lemon */
  --component-labels-differentiation-colors-lemon-active: #a48b0e;
  --component-labels-differentiation-colors-lemon-default: #ceae0d;
  --component-labels-differentiation-colors-lemon-hover: #e6c10a;
  /* Component Labels Differentiation Colors Mantis */
  --component-labels-differentiation-colors-mantis-active: #40982f;
  --component-labels-differentiation-colors-mantis-default: #4abc34;
  --component-labels-differentiation-colors-mantis-hover: #50cb37;
  /* Component Labels Differentiation Colors Pear */
  --component-labels-differentiation-colors-pear-active: #7a922f;
  --component-labels-differentiation-colors-pear-default: #96b635;
  --component-labels-differentiation-colors-pear-hover: #a4c839;
  /* Component Labels Differentiation Colors Pumpkin */
  --component-labels-differentiation-colors-pumpkin-active: #a4590e;
  --component-labels-differentiation-colors-pumpkin-default: #ce6e0d;
  --component-labels-differentiation-colors-pumpkin-hover: #e1760a;
  /* Component Labels Differentiation Colors Sky */
  --component-labels-differentiation-colors-sky-active: #28759f;
  --component-labels-differentiation-colors-sky-default: #2b8fc5;
  --component-labels-differentiation-colors-sky-hover: #2f9ad4;
  /* Component Labels Partner Brand Colors Basispoort */
  --component-labels-partner-brand-colors-basispoort-active: #1f224f;
  --component-labels-partner-brand-colors-basispoort-default: #292c59;
  --component-labels-partner-brand-colors-basispoort-hover: #333663;
  /* Component Labels Partner Brand Colors Esis */
  --component-labels-partner-brand-colors-esis-active: #40982f;
  --component-labels-partner-brand-colors-esis-default: #4abc34;
  --component-labels-partner-brand-colors-esis-hover: #50cb37;
  /* Component Labels Partner Brand Colors Parnassys */
  --component-labels-partner-brand-colors-parnassys-active: #df3863;
  --component-labels-partner-brand-colors-parnassys-default: #e9426d;
  --component-labels-partner-brand-colors-parnassys-hover: #f34c77;
  /* Component Labels Partner Brand Colors Smartschool */
  --component-labels-partner-brand-colors-smartschool-active: #e80000;
  --component-labels-partner-brand-colors-smartschool-default: #f20900;
  --component-labels-partner-brand-colors-smartschool-hover: #fc1e1e;
  /* Component Old Button Cta */
  --component-old-button-cta-active: #e57102;
  --component-old-button-cta-hover: #fda045;
  --component-old-button-cta-primary: #fd8b1d;
  /* Component Old Button Primary */
  --component-old-button-primary: #277cd9;
  --component-old-button-primary-active: #2465ab;
  --component-old-button-primary-disabled: #bed8f4;
  --component-old-button-primary-hover: #4e92ff;
  /* Component Old Button Secondary */
  --component-old-button-secondary: #e9eaef;
  --component-old-button-secondary-active: #d1d3de;
  --component-old-button-secondary-hover: #f5f5f8;
  /* Component Old Button Warning */
  --component-old-button-warning: #e64545;
  --component-old-button-warning-active: #b42727;
  --component-old-button-warning-hover: #ee6868;
  /* Component Reference Level */
  --component-reference-level-math: #28759f;
  --component-reference-level-spelling: #40982f;
}
/* All CSS variables starting with --icon */
/* Auto-generated CSS variables file */
:root {
  /* Icon */
  --icon-action-primary: #1f5e7f;
  --icon-contrast: #fff;
  --icon-default: #556474;
  --icon-negative: #b42727;
  --icon-positive: #40982f;
}
/* All CSS variables starting with --size */
/* Auto-generated CSS variables file */
:root {
  /* Size 8pt Sizes */
  --size-8pt-sizes-00: 2px;
  --size-8pt-sizes-01: 4px;
  --size-8pt-sizes-02: 8px;
  --size-8pt-sizes-03: 12px;
  --size-8pt-sizes-04: 16px;
  --size-8pt-sizes-05: 20px;
  --size-8pt-sizes-06: 24px;
  --size-8pt-sizes-07: 28px;
  --size-8pt-sizes-08: 32px;
  --size-8pt-sizes-09: 40px;
  --size-8pt-sizes-10: 48px;
  --size-8pt-sizes-11: 56px;
  --size-8pt-sizes-12: 64px;
  --size-8pt-sizes-13: 72px;
  --size-8pt-sizes-14: 80px;
  --size-8pt-sizes-15: 88px;
  --size-8pt-sizes-16: 96px;
  --size-8pt-sizes-17: 104px;
  --size-8pt-sizes-18: 112px;
  --size-8pt-sizes-19: 120px;
  --size-8pt-sizes-20: 128px;
  --size-8pt-sizes-21: 136px;
  /* Size Border */
  --size-border-default: 1px;
  --size-border-selected: 2px;
  /* Size Border Width */
  --size-border-width-primary: 1px;
  --size-border-width-selected: 2px;
  /* Size Button Height */
  --size-button-height-xs: 24px;
  --size-button-height-s: 32px;
  --size-button-height-m: 40px;
  --size-button-height-l: 48px;
  /* Size Fonts Font Size */
  --size-fonts-font-size-xs: 8px;
  --size-fonts-font-size-s: 12px;
  --size-fonts-font-size-m: 16px;
  --size-fonts-font-size-l: 20px;
  --size-fonts-font-size-xl: 24px;
  --size-fonts-font-size-2xl: 32px;
  --size-fonts-font-size-3xl: 40px;
  /* Size Fonts Font Size Outlier */
  --size-fonts-font-size-outlier-m: 14px;
  --size-fonts-font-size-outlier-l: 18px;
  /* Size Fonts Letter Spacing */
  --size-fonts-letter-spacing-default: 0px;
  --size-fonts-letter-spacing-s: 0.2px;
  /* Size Fonts Line Height */
  --size-fonts-line-height-xs: 12px;
  --size-fonts-line-height-s: 20px;
  --size-fonts-line-height-m: 24px;
  --size-fonts-line-height-l: 32px;
  --size-fonts-line-height-xl: 40px;
  --size-fonts-line-height-2xl: 48px;
  --size-fonts-line-height-3xl: 64px;
  /* Size Fonts Line Height Outlier */
  --size-fonts-line-height-outlier-m: 20px;
  --size-fonts-line-height-outlier-l: 28px;
  /* Size Gap */
  --size-gap-00: 2px;
  --size-gap-01: 4px;
  --size-gap-02: 8px;
  --size-gap-03: 12px;
  --size-gap-04: 16px;
  --size-gap-05: 20px;
  --size-gap-06: 24px;
  --size-gap-07: 32px;
  --size-gap-08: 40px;
  --size-gap-09: 48px;
  --size-gap-10: 56px;
  /* Size Icon */
  --size-icon-xs: 16px;
  --size-icon-s: 20px;
  --size-icon-m: 24px;
  --size-icon-l: 28px;
  /* Size Radius */
  --size-radius-01: 2px;
  --size-radius-02: 4px;
  --size-radius-03: 8px;
  --size-radius-04: 12px;
  --size-radius-05: 16px;
  --size-radius-06: 24px;
  --size-radius-07: 32px;
  --size-radius-round: 360px;
  /* Size Screens Height */
  --size-screens-height-desktop: 720px;
  --size-screens-height-interactive-whiteboard: 2160px;
  --size-screens-height-large-desktop: 900px;
  --size-screens-height-mobile: 926px;
  --size-screens-height-super-large-desktop: 1080px;
  --size-screens-height-tablet: 768px;
  /* Size Screens Width */
  --size-screens-width-desktop: 1280px;
  --size-screens-width-interactive-whiteboard: 3840px;
  --size-screens-width-large-desktop: 1440px;
  --size-screens-width-mobile: 428px;
  --size-screens-width-super-large-desktop: 1920px;
  --size-screens-width-tablet: 1024px;
}
/* All CSS variables starting with --surface */
/* Auto-generated CSS variables file */
:root {
  /* Surface Brand */
  --surface-brand-blue: #e9f2fb;
  --surface-brand-orange: #fff5eb;
  /* Surface Colored Icon Background */
  --surface-colored-icon-background-caribbean: #d1fafa;
  --surface-colored-icon-background-cranberry: #fbd5e8;
  --surface-colored-icon-background-crimson: #fee7e7;
  --surface-colored-icon-background-emerald: #caf7e0;
  --surface-colored-icon-background-fuchsia: #fbd5fb;
  --surface-colored-icon-background-indigo: #cad5f7;
  --surface-colored-icon-background-lavender: #e8d5fb;
  --surface-colored-icon-background-lemon: #fff4bd;
  --surface-colored-icon-background-mantis: #dcfbd5;
  --surface-colored-icon-background-pear: #f0fad1;
  --surface-colored-icon-background-pumpkin: #ffdebd;
  --surface-colored-icon-background-sky: #d4eefc;
  /* Surface Differentiation Color Caribbean */
  --surface-differentiation-color-caribbean-01: #ecfffe;
  --surface-differentiation-color-caribbean-02: #d1fafa;
  --surface-differentiation-color-caribbean-03: #b6f6f6;
  --surface-differentiation-color-caribbean-04: #99efef;
  --surface-differentiation-color-caribbean-05: #7ce9e9;
  --surface-differentiation-color-caribbean-06: #5ddfdf;
  --surface-differentiation-color-caribbean-07: #3fd4d4;
  --surface-differentiation-color-caribbean-08: #37c7c7;
  --surface-differentiation-color-caribbean-09: #35b6b6;
  --surface-differentiation-color-caribbean-10: #2f9292;
  --surface-differentiation-color-caribbean-11: #257474;
  --surface-differentiation-color-caribbean-12: #1e5252;
  /* Surface Differentiation Color Cranberry */
  --surface-differentiation-color-cranberry-01: #ffecf7;
  --surface-differentiation-color-cranberry-02: #fbd5e8;
  --surface-differentiation-color-cranberry-03: #f8bad9;
  --surface-differentiation-color-cranberry-04: #f29dc7;
  --surface-differentiation-color-cranberry-05: #eb7fb5;
  --surface-differentiation-color-cranberry-06: #e260a0;
  --surface-differentiation-color-cranberry-07: #d7428c;
  --surface-differentiation-color-cranberry-08: #cc3881;
  --surface-differentiation-color-cranberry-09: #bc3477;
  --surface-differentiation-color-cranberry-10: #982f63;
  --surface-differentiation-color-cranberry-11: #79244e;
  --surface-differentiation-color-cranberry-12: #571e3a;
  /* Surface Differentiation Color Crimson */
  --surface-differentiation-color-crimson-01: #fdf4f4;
  --surface-differentiation-color-crimson-02: #fee7e7;
  --surface-differentiation-color-crimson-03: #fdc9c9;
  --surface-differentiation-color-crimson-04: #f9a9a9;
  --surface-differentiation-color-crimson-05: #f58a8a;
  --surface-differentiation-color-crimson-06: #ee6868;
  --surface-differentiation-color-crimson-07: #e64545;
  --surface-differentiation-color-crimson-08: #e13636;
  --surface-differentiation-color-crimson-09: #d72d2d;
  --surface-differentiation-color-crimson-10: #b42727;
  --surface-differentiation-color-crimson-11: #921f1f;
  --surface-differentiation-color-crimson-12: #6e1c1c;
  /* Surface Differentiation Color Emerald */
  --surface-differentiation-color-emerald-01: #ecfdf4;
  --surface-differentiation-color-emerald-02: #caf7e0;
  --surface-differentiation-color-emerald-03: #aff3d1;
  --surface-differentiation-color-emerald-04: #94ebbf;
  --surface-differentiation-color-emerald-05: #78e3ad;
  --surface-differentiation-color-emerald-06: #5ad899;
  --surface-differentiation-color-emerald-07: #3dcc84;
  --surface-differentiation-color-emerald-08: #38bc7a;
  --surface-differentiation-color-emerald-09: #38a870;
  --surface-differentiation-color-emerald-10: #32865c;
  --surface-differentiation-color-emerald-11: #266847;
  --surface-differentiation-color-emerald-12: #1e4833;
  /* Surface Differentiation Color Fuchsia */
  --surface-differentiation-color-fuchsia-01: #feecff;
  --surface-differentiation-color-fuchsia-02: #fbd5fb;
  --surface-differentiation-color-fuchsia-03: #f8b9f8;
  --surface-differentiation-color-fuchsia-04: #f29bf2;
  --surface-differentiation-color-fuchsia-05: #ec7eec;
  --surface-differentiation-color-fuchsia-06: #e35fe3;
  --surface-differentiation-color-fuchsia-07: #d941d9;
  --surface-differentiation-color-fuchsia-08: #cd37cd;
  --surface-differentiation-color-fuchsia-09: #bd32bd;
  --surface-differentiation-color-fuchsia-10: #992e99;
  --surface-differentiation-color-fuchsia-11: #7a237a;
  --surface-differentiation-color-fuchsia-12: #581d58;
  /* Surface Differentiation Color Indigo */
  --surface-differentiation-color-indigo-01: #e4eafb;
  --surface-differentiation-color-indigo-02: #cad5f7;
  --surface-differentiation-color-indigo-03: #afc0f3;
  --surface-differentiation-color-indigo-04: #93a9eb;
  --surface-differentiation-color-indigo-05: #7892e3;
  --surface-differentiation-color-indigo-06: #5a79d8;
  --surface-differentiation-color-indigo-07: #3d61cc;
  --surface-differentiation-color-indigo-08: #3859bc;
  --surface-differentiation-color-indigo-09: #3854a8;
  --surface-differentiation-color-indigo-10: #324786;
  --surface-differentiation-color-indigo-11: #263669;
  --surface-differentiation-color-indigo-12: #1e2848;
  /* Surface Differentiation Color Lavender */
  --surface-differentiation-color-lavender-01: #f5ecff;
  --surface-differentiation-color-lavender-02: #e8d5fb;
  --surface-differentiation-color-lavender-03: #d9b9f8;
  --surface-differentiation-color-lavender-04: #c69af2;
  --surface-differentiation-color-lavender-05: #b57eec;
  --surface-differentiation-color-lavender-06: #a05fe3;
  --surface-differentiation-color-lavender-07: #8c41d9;
  --surface-differentiation-color-lavender-08: #8238ce;
  --surface-differentiation-color-lavender-09: #7732bd;
  --surface-differentiation-color-lavender-10: #632e99;
  --surface-differentiation-color-lavender-11: #4e237a;
  --surface-differentiation-color-lavender-12: #3a1d58;
  /* Surface Differentiation Color Lemon */
  --surface-differentiation-color-lemon-01: #fffae5;
  --surface-differentiation-color-lemon-02: #fff4bd;
  --surface-differentiation-color-lemon-03: #ffef9e;
  --surface-differentiation-color-lemon-04: #ffe979;
  --surface-differentiation-color-lemon-05: #ffe357;
  --surface-differentiation-color-lemon-06: #ffdc2e;
  --surface-differentiation-color-lemon-07: #fad20c;
  --surface-differentiation-color-lemon-08: #e6c10a;
  --surface-differentiation-color-lemon-09: #ceae0d;
  --surface-differentiation-color-lemon-10: #a48b0e;
  --surface-differentiation-color-lemon-11: #7e6b0a;
  --surface-differentiation-color-lemon-12: #574a0a;
  /* Surface Differentiation Color Mantis */
  --surface-differentiation-color-mantis-01: #f0ffec;
  --surface-differentiation-color-mantis-02: #dcfbd5;
  --surface-differentiation-color-mantis-03: #c4f8ba;
  --surface-differentiation-color-mantis-04: #aaf19c;
  --surface-differentiation-color-mantis-05: #91eb7f;
  --surface-differentiation-color-mantis-06: #75e260;
  --surface-differentiation-color-mantis-07: #59d640;
  --surface-differentiation-color-mantis-08: #50cb37;
  --surface-differentiation-color-mantis-09: #4abc34;
  --surface-differentiation-color-mantis-10: #40982f;
  --surface-differentiation-color-mantis-11: #2d6621;
  --surface-differentiation-color-mantis-12: #28571e;
  /* Surface Differentiation Color Pear */
  --surface-differentiation-color-pear-01: #f7fce8;
  --surface-differentiation-color-pear-02: #f0fad1;
  --surface-differentiation-color-pear-03: #e6f6b6;
  --surface-differentiation-color-pear-04: #daef99;
  --surface-differentiation-color-pear-05: #cee97c;
  --surface-differentiation-color-pear-06: #bfdf5d;
  --surface-differentiation-color-pear-07: #afd441;
  --surface-differentiation-color-pear-08: #a4c839;
  --surface-differentiation-color-pear-09: #96b635;
  --surface-differentiation-color-pear-10: #7a922f;
  --surface-differentiation-color-pear-11: #607425;
  --surface-differentiation-color-pear-12: #45521e;
  /* Surface Differentiation Color Pumpkin */
  --surface-differentiation-color-pumpkin-01: #fff4eb;
  --surface-differentiation-color-pumpkin-02: #ffdebd;
  --surface-differentiation-color-pumpkin-03: #ffcf9e;
  --surface-differentiation-color-pumpkin-04: #ffbd7a;
  --surface-differentiation-color-pumpkin-05: #ffab57;
  --surface-differentiation-color-pumpkin-06: #ff962e;
  --surface-differentiation-color-pumpkin-07: #fa830c;
  --surface-differentiation-color-pumpkin-08: #e1760a;
  --surface-differentiation-color-pumpkin-09: #ce6e0d;
  --surface-differentiation-color-pumpkin-10: #a4590e;
  --surface-differentiation-color-pumpkin-11: #7f440a;
  --surface-differentiation-color-pumpkin-12: #57300a;
  /* Surface Differentiation Color Sky */
  --surface-differentiation-color-sky-01: #effaff;
  --surface-differentiation-color-sky-02: #d4eefc;
  --surface-differentiation-color-sky-03: #b7e3fa;
  --surface-differentiation-color-sky-04: #97d4f5;
  --surface-differentiation-color-sky-05: #7ac7f0;
  --surface-differentiation-color-sky-06: #59b6e8;
  --surface-differentiation-color-sky-07: #38a4de;
  --surface-differentiation-color-sky-08: #2f9ad4;
  --surface-differentiation-color-sky-09: #2b8fc5;
  --surface-differentiation-color-sky-10: #28759f;
  --surface-differentiation-color-sky-11: #1f5e7f;
  --surface-differentiation-color-sky-12: #1a455b;
  /* Surface Feedback */
  --surface-feedback-negative: #fef1f1;
  --surface-feedback-positive: #eefdec;
  /* Surface Greyscale */
  --surface-greyscale-01: #fff;
  --surface-greyscale-02: #f5f5f8;
  --surface-greyscale-03: #e9eaef;
  --surface-greyscale-04: #d1d3de;
  --surface-greyscale-05: #aeb7c2;
  --surface-greyscale-06: #8c99a8;
  --surface-greyscale-07: #6b7c8e;
  --surface-greyscale-08: #556474;
  --surface-greyscale-09: #3f4c5a;
  --surface-greyscale-10: #2a3541;
  /* Surface Subject An */
  --surface-subject-an-01: #fffae5;
  --surface-subject-an-02: #fff4bd;
  --surface-subject-an-03: #ffef9e;
  --surface-subject-an-04: #ffe979;
  --surface-subject-an-05: #ffe357;
  --surface-subject-an-06: #ffdc2e;
  --surface-subject-an-07: #fad20c;
  --surface-subject-an-08: #e6c10a;
  --surface-subject-an-09: #ceae0d;
  --surface-subject-an-10: #a48b0e;
  --surface-subject-an-11: #7e6b0a;
  --surface-subject-an-12: #574a0a;
  /* Surface Subject Crimson */
  --surface-subject-crimson-01: #fdf4f4;
  --surface-subject-crimson-02: #fee7e7;
  --surface-subject-crimson-03: #fdc9c9;
  --surface-subject-crimson-04: #f9a9a9;
  --surface-subject-crimson-05: #f58a8a;
  --surface-subject-crimson-06: #ee6868;
  --surface-subject-crimson-07: #e64545;
  --surface-subject-crimson-08: #e13636;
  --surface-subject-crimson-09: #d72d2d;
  --surface-subject-crimson-10: #b42727;
  --surface-subject-crimson-11: #921f1f;
  --surface-subject-crimson-12: #6e1c1c;
  /* Surface Subject Digital Literacy */
  --surface-subject-digital-literacy-01: #feecff;
  --surface-subject-digital-literacy-02: #fbd5fb;
  --surface-subject-digital-literacy-03: #f8b9f8;
  --surface-subject-digital-literacy-04: #f29bf2;
  --surface-subject-digital-literacy-05: #ec7eec;
  --surface-subject-digital-literacy-06: #e35fe3;
  --surface-subject-digital-literacy-07: #d941d9;
  --surface-subject-digital-literacy-08: #cd37cd;
  --surface-subject-digital-literacy-09: #bd32bd;
  --surface-subject-digital-literacy-10: #992e99;
  --surface-subject-digital-literacy-11: #7a237a;
  --surface-subject-digital-literacy-12: #581d58;
  /* Surface Subject Dutch */
  --surface-subject-dutch-01: #f0ffec;
  --surface-subject-dutch-02: #dcfbd5;
  --surface-subject-dutch-03: #c4f8ba;
  --surface-subject-dutch-04: #aaf19c;
  --surface-subject-dutch-05: #91eb7f;
  --surface-subject-dutch-06: #75e260;
  --surface-subject-dutch-07: #59d640;
  --surface-subject-dutch-08: #50cb37;
  --surface-subject-dutch-09: #4abc34;
  --surface-subject-dutch-10: #40982f;
  --surface-subject-dutch-11: #2d6621;
  --surface-subject-dutch-12: #28571e;
  /* Surface Subject English */
  --surface-subject-english-01: #f5ecff;
  --surface-subject-english-02: #e8d5fb;
  --surface-subject-english-03: #d9b9f8;
  --surface-subject-english-04: #c69af2;
  --surface-subject-english-05: #b57eec;
  --surface-subject-english-06: #a05fe3;
  --surface-subject-english-07: #8c41d9;
  --surface-subject-english-08: #8238ce;
  --surface-subject-english-09: #7732bd;
  --surface-subject-english-10: #632e99;
  --surface-subject-english-11: #4e237a;
  --surface-subject-english-12: #3a1d58;
  /* Surface Subject French */
  --surface-subject-french-01: #e4eafb;
  --surface-subject-french-02: #cad5f7;
  --surface-subject-french-03: #afc0f3;
  --surface-subject-french-04: #93a9eb;
  --surface-subject-french-05: #7892e3;
  --surface-subject-french-06: #5a79d8;
  --surface-subject-french-07: #3d61cc;
  --surface-subject-french-08: #3859bc;
  --surface-subject-french-09: #3854a8;
  --surface-subject-french-10: #324786;
  --surface-subject-french-11: #263669;
  --surface-subject-french-12: #1e2848;
  /* Surface Subject Grammar */
  --surface-subject-grammar-01: #ffecf7;
  --surface-subject-grammar-02: #fbd5e8;
  --surface-subject-grammar-03: #f8bad9;
  --surface-subject-grammar-04: #f29dc7;
  --surface-subject-grammar-05: #eb7fb5;
  --surface-subject-grammar-06: #e260a0;
  --surface-subject-grammar-07: #d7428c;
  --surface-subject-grammar-08: #cc3881;
  --surface-subject-grammar-09: #bc3477;
  --surface-subject-grammar-10: #982f63;
  --surface-subject-grammar-11: #79244e;
  --surface-subject-grammar-12: #571e3a;
  /* Surface Subject Letters */
  --surface-subject-letters-01: #ecfdf4;
  --surface-subject-letters-02: #caf7e0;
  --surface-subject-letters-03: #aff3d1;
  --surface-subject-letters-04: #94ebbf;
  --surface-subject-letters-05: #78e3ad;
  --surface-subject-letters-06: #5ad899;
  --surface-subject-letters-07: #3dcc84;
  --surface-subject-letters-08: #38bc7a;
  --surface-subject-letters-09: #38a870;
  --surface-subject-letters-10: #32865c;
  --surface-subject-letters-11: #266847;
  --surface-subject-letters-12: #1e4833;
  /* Surface Subject Math */
  --surface-subject-math-01: #effaff;
  --surface-subject-math-02: #d4eefc;
  --surface-subject-math-03: #b7e3fa;
  --surface-subject-math-04: #97d4f5;
  --surface-subject-math-05: #7ac7f0;
  --surface-subject-math-06: #59b6e8;
  --surface-subject-math-07: #38a4de;
  --surface-subject-math-08: #2f9ad4;
  --surface-subject-math-09: #2b8fc5;
  --surface-subject-math-10: #28759f;
  --surface-subject-math-11: #1f5e7f;
  --surface-subject-math-12: #1a455b;
  /* Surface Subject Numbers */
  --surface-subject-numbers-01: #ecfffe;
  --surface-subject-numbers-02: #d1fafa;
  --surface-subject-numbers-03: #b6f6f6;
  --surface-subject-numbers-04: #99efef;
  --surface-subject-numbers-05: #7ce9e9;
  --surface-subject-numbers-06: #5ddfdf;
  --surface-subject-numbers-07: #3fd4d4;
  --surface-subject-numbers-08: #37c7c7;
  --surface-subject-numbers-09: #35b6b6;
  --surface-subject-numbers-10: #2f9292;
  --surface-subject-numbers-11: #257474;
  --surface-subject-numbers-12: #1e5252;
  /* Surface Subject Numbers Letters */
  --surface-subject-numbers-letters-01: #ecfdf4;
  --surface-subject-numbers-letters-02: #caf7e0;
  --surface-subject-numbers-letters-03: #aff3d1;
  --surface-subject-numbers-letters-04: #94ebbf;
  --surface-subject-numbers-letters-05: #78e3ad;
  --surface-subject-numbers-letters-06: #5ad899;
  --surface-subject-numbers-letters-07: #3dcc84;
  --surface-subject-numbers-letters-08: #38bc7a;
  --surface-subject-numbers-letters-09: #38a870;
  --surface-subject-numbers-letters-10: #32865c;
  --surface-subject-numbers-letters-11: #266847;
  --surface-subject-numbers-letters-12: #1e4833;
  /* Surface Subject Spelling */
  --surface-subject-spelling-01: #f0ffec;
  --surface-subject-spelling-02: #dcfbd5;
  --surface-subject-spelling-03: #c4f8ba;
  --surface-subject-spelling-04: #aaf19c;
  --surface-subject-spelling-05: #91eb7f;
  --surface-subject-spelling-06: #75e260;
  --surface-subject-spelling-07: #59d640;
  --surface-subject-spelling-08: #50cb37;
  --surface-subject-spelling-09: #4abc34;
  --surface-subject-spelling-10: #40982f;
  --surface-subject-spelling-11: #2d6621;
  --surface-subject-spelling-12: #28571e;
  /* Surface Subject Topography */
  --surface-subject-topography-01: #f7fce8;
  --surface-subject-topography-02: #f0fad1;
  --surface-subject-topography-03: #e6f6b6;
  --surface-subject-topography-04: #daef99;
  --surface-subject-topography-05: #cee97c;
  --surface-subject-topography-06: #bfdf5d;
  --surface-subject-topography-07: #afd441;
  --surface-subject-topography-08: #a4c839;
  --surface-subject-topography-09: #96b635;
  --surface-subject-topography-10: #7a922f;
  --surface-subject-topography-11: #607425;
  --surface-subject-topography-12: #45521e;
  /* Surface Subject Vocabulary */
  --surface-subject-vocabulary-01: #fff4eb;
  --surface-subject-vocabulary-02: #ffdebd;
  --surface-subject-vocabulary-03: #ffcf9e;
  --surface-subject-vocabulary-04: #ffbd7a;
  --surface-subject-vocabulary-05: #ffab57;
  --surface-subject-vocabulary-06: #ff962e;
  --surface-subject-vocabulary-07: #fa830c;
  --surface-subject-vocabulary-08: #e1760a;
  --surface-subject-vocabulary-09: #ce6e0d;
  --surface-subject-vocabulary-10: #a4590e;
  --surface-subject-vocabulary-11: #7f440a;
  --surface-subject-vocabulary-12: #57300a;
}
/* All CSS variables starting with --text */
/* Auto-generated CSS variables file */
:root {
  /* Text */
  --text-contrast: #fff;
  --text-disabled-component-text: #8c99a8;
  --text-header: #2a3541;
  --text-paragraph: #556474;
  /* Text Differentiation Colors Caribbean */
  --text-differentiation-colors-caribbean-01: #ecfffe;
  --text-differentiation-colors-caribbean-02: #d1fafa;
  --text-differentiation-colors-caribbean-03: #b6f6f6;
  --text-differentiation-colors-caribbean-04: #99efef;
  --text-differentiation-colors-caribbean-05: #7ce9e9;
  --text-differentiation-colors-caribbean-06: #5ddfdf;
  --text-differentiation-colors-caribbean-07: #3fd4d4;
  --text-differentiation-colors-caribbean-08: #37c7c7;
  --text-differentiation-colors-caribbean-09: #35b6b6;
  --text-differentiation-colors-caribbean-10: #2f9292;
  --text-differentiation-colors-caribbean-11: #257474;
  --text-differentiation-colors-caribbean-12: #1e5252;
  /* Text Differentiation Colors Cranberry */
  --text-differentiation-colors-cranberry-01: #ffecf7;
  --text-differentiation-colors-cranberry-02: #fbd5e8;
  --text-differentiation-colors-cranberry-03: #f8bad9;
  --text-differentiation-colors-cranberry-04: #f29dc7;
  --text-differentiation-colors-cranberry-05: #eb7fb5;
  --text-differentiation-colors-cranberry-06: #e260a0;
  --text-differentiation-colors-cranberry-07: #d7428c;
  --text-differentiation-colors-cranberry-08: #cc3881;
  --text-differentiation-colors-cranberry-09: #bc3477;
  --text-differentiation-colors-cranberry-10: #982f63;
  --text-differentiation-colors-cranberry-11: #79244e;
  --text-differentiation-colors-cranberry-12: #571e3a;
  /* Text Differentiation Colors Crimson */
  --text-differentiation-colors-crimson-01: #fdf4f4;
  --text-differentiation-colors-crimson-02: #fee7e7;
  --text-differentiation-colors-crimson-03: #fdc9c9;
  --text-differentiation-colors-crimson-04: #f9a9a9;
  --text-differentiation-colors-crimson-05: #f58a8a;
  --text-differentiation-colors-crimson-06: #ee6868;
  --text-differentiation-colors-crimson-07: #e64545;
  --text-differentiation-colors-crimson-08: #e13636;
  --text-differentiation-colors-crimson-09: #d72d2d;
  --text-differentiation-colors-crimson-10: #b42727;
  --text-differentiation-colors-crimson-11: #921f1f;
  --text-differentiation-colors-crimson-12: #6e1c1c;
  /* Text Differentiation Colors Emerald */
  --text-differentiation-colors-emerald-01: #ecfdf4;
  --text-differentiation-colors-emerald-02: #caf7e0;
  --text-differentiation-colors-emerald-03: #aff3d1;
  --text-differentiation-colors-emerald-04: #94ebbf;
  --text-differentiation-colors-emerald-05: #78e3ad;
  --text-differentiation-colors-emerald-06: #5ad899;
  --text-differentiation-colors-emerald-07: #3dcc84;
  --text-differentiation-colors-emerald-08: #38bc7a;
  --text-differentiation-colors-emerald-09: #38a870;
  --text-differentiation-colors-emerald-10: #32865c;
  --text-differentiation-colors-emerald-11: #266847;
  --text-differentiation-colors-emerald-12: #1e4833;
  /* Text Differentiation Colors Fuchsia */
  --text-differentiation-colors-fuchsia-01: #feecff;
  --text-differentiation-colors-fuchsia-02: #fbd5fb;
  --text-differentiation-colors-fuchsia-03: #f8b9f8;
  --text-differentiation-colors-fuchsia-04: #f29bf2;
  --text-differentiation-colors-fuchsia-05: #ec7eec;
  --text-differentiation-colors-fuchsia-06: #e35fe3;
  --text-differentiation-colors-fuchsia-07: #d941d9;
  --text-differentiation-colors-fuchsia-08: #cd37cd;
  --text-differentiation-colors-fuchsia-09: #bd32bd;
  --text-differentiation-colors-fuchsia-10: #992e99;
  --text-differentiation-colors-fuchsia-11: #7a237a;
  --text-differentiation-colors-fuchsia-12: #581d58;
  /* Text Differentiation Colors Indigo */
  --text-differentiation-colors-indigo-01: #e4eafb;
  --text-differentiation-colors-indigo-02: #cad5f7;
  --text-differentiation-colors-indigo-03: #afc0f3;
  --text-differentiation-colors-indigo-04: #93a9eb;
  --text-differentiation-colors-indigo-05: #7892e3;
  --text-differentiation-colors-indigo-06: #5a79d8;
  --text-differentiation-colors-indigo-07: #3d61cc;
  --text-differentiation-colors-indigo-08: #3859bc;
  --text-differentiation-colors-indigo-09: #3854a8;
  --text-differentiation-colors-indigo-10: #324786;
  --text-differentiation-colors-indigo-11: #263669;
  --text-differentiation-colors-indigo-12: #1e2848;
  /* Text Differentiation Colors Lavender */
  --text-differentiation-colors-lavender-01: #f5ecff;
  --text-differentiation-colors-lavender-02: #e8d5fb;
  --text-differentiation-colors-lavender-03: #d9b9f8;
  --text-differentiation-colors-lavender-04: #c69af2;
  --text-differentiation-colors-lavender-05: #b57eec;
  --text-differentiation-colors-lavender-06: #a05fe3;
  --text-differentiation-colors-lavender-07: #8c41d9;
  --text-differentiation-colors-lavender-08: #8238ce;
  --text-differentiation-colors-lavender-09: #7732bd;
  --text-differentiation-colors-lavender-10: #632e99;
  --text-differentiation-colors-lavender-11: #4e237a;
  --text-differentiation-colors-lavender-12: #3a1d58;
  /* Text Differentiation Colors Lemon */
  --text-differentiation-colors-lemon-01: #fffae5;
  --text-differentiation-colors-lemon-02: #fff4bd;
  --text-differentiation-colors-lemon-03: #ffef9e;
  --text-differentiation-colors-lemon-04: #ffe979;
  --text-differentiation-colors-lemon-05: #ffe357;
  --text-differentiation-colors-lemon-06: #ffdc2e;
  --text-differentiation-colors-lemon-07: #fad20c;
  --text-differentiation-colors-lemon-08: #e6c10a;
  --text-differentiation-colors-lemon-09: #ceae0d;
  --text-differentiation-colors-lemon-10: #a48b0e;
  --text-differentiation-colors-lemon-11: #7e6b0a;
  --text-differentiation-colors-lemon-12: #574a0a;
  /* Text Differentiation Colors Mantis */
  --text-differentiation-colors-mantis-01: #f0ffec;
  --text-differentiation-colors-mantis-02: #dcfbd5;
  --text-differentiation-colors-mantis-03: #c4f8ba;
  --text-differentiation-colors-mantis-04: #aaf19c;
  --text-differentiation-colors-mantis-05: #91eb7f;
  --text-differentiation-colors-mantis-06: #75e260;
  --text-differentiation-colors-mantis-07: #59d640;
  --text-differentiation-colors-mantis-08: #50cb37;
  --text-differentiation-colors-mantis-09: #4abc34;
  --text-differentiation-colors-mantis-10: #40982f;
  --text-differentiation-colors-mantis-11: #2d6621;
  --text-differentiation-colors-mantis-12: #28571e;
  /* Text Differentiation Colors Pear */
  --text-differentiation-colors-pear-01: #f7fce8;
  --text-differentiation-colors-pear-02: #f0fad1;
  --text-differentiation-colors-pear-03: #e6f6b6;
  --text-differentiation-colors-pear-04: #daef99;
  --text-differentiation-colors-pear-05: #cee97c;
  --text-differentiation-colors-pear-06: #bfdf5d;
  --text-differentiation-colors-pear-07: #afd441;
  --text-differentiation-colors-pear-08: #a4c839;
  --text-differentiation-colors-pear-09: #96b635;
  --text-differentiation-colors-pear-10: #7a922f;
  --text-differentiation-colors-pear-11: #607425;
  --text-differentiation-colors-pear-12: #45521e;
  /* Text Differentiation Colors Pumpkin */
  --text-differentiation-colors-pumpkin-01: #fff4eb;
  --text-differentiation-colors-pumpkin-02: #ffdebd;
  --text-differentiation-colors-pumpkin-03: #ffcf9e;
  --text-differentiation-colors-pumpkin-04: #ffbd7a;
  --text-differentiation-colors-pumpkin-05: #ffab57;
  --text-differentiation-colors-pumpkin-06: #ff962e;
  --text-differentiation-colors-pumpkin-07: #fa830c;
  --text-differentiation-colors-pumpkin-08: #e1760a;
  --text-differentiation-colors-pumpkin-09: #ce6e0d;
  --text-differentiation-colors-pumpkin-10: #a4590e;
  --text-differentiation-colors-pumpkin-11: #7f440a;
  --text-differentiation-colors-pumpkin-12: #57300a;
  /* Text Differentiation Colors Sky */
  --text-differentiation-colors-sky-01: #effaff;
  --text-differentiation-colors-sky-02: #d4eefc;
  --text-differentiation-colors-sky-03: #b7e3fa;
  --text-differentiation-colors-sky-04: #97d4f5;
  --text-differentiation-colors-sky-05: #7ac7f0;
  --text-differentiation-colors-sky-06: #59b6e8;
  --text-differentiation-colors-sky-07: #38a4de;
  --text-differentiation-colors-sky-08: #2f9ad4;
  --text-differentiation-colors-sky-09: #2b8fc5;
  --text-differentiation-colors-sky-10: #28759f;
  --text-differentiation-colors-sky-11: #1f5e7f;
  --text-differentiation-colors-sky-12: #1a455b;
  /* Text Hyperlink */
  --text-hyperlink-active: #2465ab;
  --text-hyperlink-default: #277cd9;
  --text-hyperlink-hover: #4e92ff;
  /* Text Letter Spacing */
  --text-letter-spacing-default: 0px;
  --text-letter-spacing-display: 0.2px;
  /* Text Line Height */
  --text-line-height-xs: 12px;
  --text-line-height-s: 20px;
  --text-line-height-m: 24px;
  --text-line-height-l: 32px;
  --text-line-height-xl: 40px;
  --text-line-height-2xl: 48px;
  --text-line-height-3xl: 64px;
  /* Text Negative */
  --text-negative: #b42727;
  --text-negative-feedback: #ed1c24;
  /* Text Placeholder */
  --text-placeholder-disabled-text: #aeb7c2;
  --text-placeholder-text: #8c99a8;
  /* Text Positive */
  --text-positive: #40982f;
  --text-positive-feedback: #1eaa10;
  /* Text Size */
  --text-size-xs: 8px;
  --text-size-s: 12px;
  --text-size-m: 16px;
  --text-size-l: 20px;
  --text-size-xl: 24px;
  --text-size-2xl: 32px;
  --text-size-3xl: 40px;
  /* Text Subject An */
  --text-subject-an-01: #fffae5;
  --text-subject-an-02: #fff4bd;
  --text-subject-an-03: #ffef9e;
  --text-subject-an-04: #ffe979;
  --text-subject-an-05: #ffe357;
  --text-subject-an-06: #ffdc2e;
  --text-subject-an-07: #fad20c;
  --text-subject-an-08: #e6c10a;
  --text-subject-an-09: #ceae0d;
  --text-subject-an-10: #a48b0e;
  --text-subject-an-11: #7e6b0a;
  --text-subject-an-12: #574a0a;
  /* Text Subject Crimson */
  --text-subject-crimson-01: #fdf4f4;
  --text-subject-crimson-02: #fee7e7;
  --text-subject-crimson-03: #fdc9c9;
  --text-subject-crimson-04: #f9a9a9;
  --text-subject-crimson-05: #f58a8a;
  --text-subject-crimson-06: #ee6868;
  --text-subject-crimson-07: #e64545;
  --text-subject-crimson-08: #e13636;
  --text-subject-crimson-09: #d72d2d;
  --text-subject-crimson-10: #b42727;
  --text-subject-crimson-11: #921f1f;
  --text-subject-crimson-12: #6e1c1c;
  /* Text Subject Digital Literacy */
  --text-subject-digital-literacy-01: #feecff;
  --text-subject-digital-literacy-02: #fbd5fb;
  --text-subject-digital-literacy-03: #f8b9f8;
  --text-subject-digital-literacy-04: #f29bf2;
  --text-subject-digital-literacy-05: #ec7eec;
  --text-subject-digital-literacy-06: #e35fe3;
  --text-subject-digital-literacy-07: #d941d9;
  --text-subject-digital-literacy-08: #cd37cd;
  --text-subject-digital-literacy-09: #bd32bd;
  --text-subject-digital-literacy-10: #992e99;
  --text-subject-digital-literacy-11: #7a237a;
  --text-subject-digital-literacy-12: #581d58;
  /* Text Subject Dutch */
  --text-subject-dutch-01: #f0ffec;
  --text-subject-dutch-02: #dcfbd5;
  --text-subject-dutch-03: #c4f8ba;
  --text-subject-dutch-04: #aaf19c;
  --text-subject-dutch-05: #91eb7f;
  --text-subject-dutch-06: #75e260;
  --text-subject-dutch-07: #59d640;
  --text-subject-dutch-08: #50cb37;
  --text-subject-dutch-09: #4abc34;
  --text-subject-dutch-10: #40982f;
  --text-subject-dutch-11: #2d6621;
  --text-subject-dutch-12: #28571e;
  /* Text Subject English */
  --text-subject-english-01: #f5ecff;
  --text-subject-english-02: #e8d5fb;
  --text-subject-english-03: #d9b9f8;
  --text-subject-english-04: #c69af2;
  --text-subject-english-05: #b57eec;
  --text-subject-english-06: #a05fe3;
  --text-subject-english-07: #8c41d9;
  --text-subject-english-08: #8238ce;
  --text-subject-english-09: #7732bd;
  --text-subject-english-10: #632e99;
  --text-subject-english-11: #4e237a;
  --text-subject-english-12: #3a1d58;
  /* Text Subject French */
  --text-subject-french-01: #e4eafb;
  --text-subject-french-02: #cad5f7;
  --text-subject-french-03: #afc0f3;
  --text-subject-french-04: #93a9eb;
  --text-subject-french-05: #7892e3;
  --text-subject-french-06: #5a79d8;
  --text-subject-french-07: #3d61cc;
  --text-subject-french-08: #3859bc;
  --text-subject-french-09: #3854a8;
  --text-subject-french-10: #324786;
  --text-subject-french-11: #263669;
  --text-subject-french-12: #1e2848;
  /* Text Subject Grammar */
  --text-subject-grammar-01: #ffecf7;
  --text-subject-grammar-02: #fbd5e8;
  --text-subject-grammar-03: #f8bad9;
  --text-subject-grammar-04: #f29dc7;
  --text-subject-grammar-05: #eb7fb5;
  --text-subject-grammar-06: #e260a0;
  --text-subject-grammar-07: #d7428c;
  --text-subject-grammar-08: #cc3881;
  --text-subject-grammar-09: #bc3477;
  --text-subject-grammar-10: #982f63;
  --text-subject-grammar-11: #79244e;
  --text-subject-grammar-12: #571e3a;
  /* Text Subject Letters */
  --text-subject-letters-01: #ecfdf4;
  --text-subject-letters-02: #caf7e0;
  --text-subject-letters-03: #aff3d1;
  --text-subject-letters-04: #94ebbf;
  --text-subject-letters-05: #78e3ad;
  --text-subject-letters-06: #5ad899;
  --text-subject-letters-07: #3dcc84;
  --text-subject-letters-08: #38bc7a;
  --text-subject-letters-09: #38a870;
  --text-subject-letters-10: #32865c;
  --text-subject-letters-11: #266847;
  --text-subject-letters-12: #1e4833;
  /* Text Subject Math */
  --text-subject-math-01: #effaff;
  --text-subject-math-02: #d4eefc;
  --text-subject-math-03: #b7e3fa;
  --text-subject-math-04: #97d4f5;
  --text-subject-math-05: #7ac7f0;
  --text-subject-math-06: #59b6e8;
  --text-subject-math-07: #38a4de;
  --text-subject-math-08: #2f9ad4;
  --text-subject-math-09: #2b8fc5;
  --text-subject-math-10: #28759f;
  --text-subject-math-11: #1f5e7f;
  --text-subject-math-12: #1a455b;
  /* Text Subject Numbers */
  --text-subject-numbers-01: #ecfffe;
  --text-subject-numbers-02: #d1fafa;
  --text-subject-numbers-03: #b6f6f6;
  --text-subject-numbers-04: #99efef;
  --text-subject-numbers-05: #7ce9e9;
  --text-subject-numbers-06: #5ddfdf;
  --text-subject-numbers-07: #3fd4d4;
  --text-subject-numbers-08: #37c7c7;
  --text-subject-numbers-09: #35b6b6;
  --text-subject-numbers-10: #2f9292;
  --text-subject-numbers-11: #257474;
  --text-subject-numbers-12: #1e5252;
  /* Text Subject Numbers Letters */
  --text-subject-numbers-letters-01: #ecfdf4;
  --text-subject-numbers-letters-02: #caf7e0;
  --text-subject-numbers-letters-03: #aff3d1;
  --text-subject-numbers-letters-04: #94ebbf;
  --text-subject-numbers-letters-05: #78e3ad;
  --text-subject-numbers-letters-06: #5ad899;
  --text-subject-numbers-letters-07: #3dcc84;
  --text-subject-numbers-letters-08: #38bc7a;
  --text-subject-numbers-letters-09: #38a870;
  --text-subject-numbers-letters-10: #32865c;
  --text-subject-numbers-letters-11: #266847;
  --text-subject-numbers-letters-12: #1e4833;
  /* Text Subject Spelling */
  --text-subject-spelling-01: #f0ffec;
  --text-subject-spelling-02: #dcfbd5;
  --text-subject-spelling-03: #c4f8ba;
  --text-subject-spelling-04: #aaf19c;
  --text-subject-spelling-05: #91eb7f;
  --text-subject-spelling-06: #75e260;
  --text-subject-spelling-07: #59d640;
  --text-subject-spelling-08: #50cb37;
  --text-subject-spelling-09: #4abc34;
  --text-subject-spelling-10: #40982f;
  --text-subject-spelling-11: #2d6621;
  --text-subject-spelling-12: #28571e;
  /* Text Subject Topography */
  --text-subject-topography-01: #f7fce8;
  --text-subject-topography-02: #f0fad1;
  --text-subject-topography-03: #e6f6b6;
  --text-subject-topography-04: #daef99;
  --text-subject-topography-05: #cee97c;
  --text-subject-topography-06: #bfdf5d;
  --text-subject-topography-07: #afd441;
  --text-subject-topography-08: #a4c839;
  --text-subject-topography-09: #96b635;
  --text-subject-topography-10: #7a922f;
  --text-subject-topography-11: #607425;
  --text-subject-topography-12: #45521e;
  /* Text Subject Vocabulary */
  --text-subject-vocabulary-01: #fff4eb;
  --text-subject-vocabulary-02: #ffdebd;
  --text-subject-vocabulary-03: #ffcf9e;
  --text-subject-vocabulary-04: #ffbd7a;
  --text-subject-vocabulary-05: #ffab57;
  --text-subject-vocabulary-06: #ff962e;
  --text-subject-vocabulary-07: #fa830c;
  --text-subject-vocabulary-08: #e1760a;
  --text-subject-vocabulary-09: #ce6e0d;
  --text-subject-vocabulary-10: #a4590e;
  --text-subject-vocabulary-11: #7f440a;
  --text-subject-vocabulary-12: #57300a;
}
/* Viewport-scaled variants of the size design tokens.
 *
 * Hand-maintained companion to partials/size.less — keep the token list in sync.
 *
 * The --size-* tokens are defined in px, so components built on them render at a
 * fixed size regardless of screen resolution. Apps that set a viewport-based html
 * font-size (e.g. font-size: 0.9vmin) can add the .gz-scaled-sizes class to a
 * container to redefine all size tokens in rem within that subtree, making
 * everything inside scale with the resolution.
 *
 * Borders, letter-spacing and screen-size tokens are intentionally left in px
 * (sub-pixel borders render poorly).
 */
/* Mixin that defines a CSS custom property in rem from a design-px value, so it
 * scales with a viewport-based html font-size. Used by scaled-size-variables.less
 * and available for app-specific sizes that have no design token.
 *
 * LESS does not evaluate expressions inside CSS custom property values, hence the
 * interpolation (~"@{remValue}").
 */
.gz-scaled-sizes {
  /* Size 8pt Sizes */
  --size-8pt-sizes-00: 0.20833333333333334rem;
  --size-8pt-sizes-01: 0.4166666666666667rem;
  --size-8pt-sizes-02: 0.8333333333333334rem;
  --size-8pt-sizes-03: 1.25rem;
  --size-8pt-sizes-04: 1.6666666666666667rem;
  --size-8pt-sizes-05: 2.0833333333333335rem;
  --size-8pt-sizes-06: 2.5rem;
  --size-8pt-sizes-07: 2.916666666666667rem;
  --size-8pt-sizes-08: 3.3333333333333335rem;
  --size-8pt-sizes-09: 4.166666666666667rem;
  --size-8pt-sizes-10: 5rem;
  --size-8pt-sizes-11: 5.833333333333334rem;
  --size-8pt-sizes-12: 6.666666666666667rem;
  --size-8pt-sizes-13: 7.5rem;
  --size-8pt-sizes-14: 8.333333333333334rem;
  --size-8pt-sizes-15: 9.166666666666668rem;
  --size-8pt-sizes-16: 10rem;
  --size-8pt-sizes-17: 10.833333333333334rem;
  --size-8pt-sizes-18: 11.666666666666668rem;
  --size-8pt-sizes-19: 12.5rem;
  --size-8pt-sizes-20: 13.333333333333334rem;
  --size-8pt-sizes-21: 14.166666666666668rem;
  /* Size Button Height */
  --size-button-height-xs: 2.5rem;
  --size-button-height-s: 3.3333333333333335rem;
  --size-button-height-m: 4.166666666666667rem;
  --size-button-height-l: 5rem;
  /* Size Fonts Font Size */
  --size-fonts-font-size-xs: 0.8333333333333334rem;
  --size-fonts-font-size-s: 1.25rem;
  --size-fonts-font-size-m: 1.6666666666666667rem;
  --size-fonts-font-size-l: 2.0833333333333335rem;
  --size-fonts-font-size-xl: 2.5rem;
  --size-fonts-font-size-2xl: 3.3333333333333335rem;
  --size-fonts-font-size-3xl: 4.166666666666667rem;
  /* Size Fonts Font Size Outlier */
  --size-fonts-font-size-outlier-m: 1.4583333333333335rem;
  --size-fonts-font-size-outlier-l: 1.875rem;
  /* Size Fonts Line Height */
  --size-fonts-line-height-xs: 1.25rem;
  --size-fonts-line-height-s: 2.0833333333333335rem;
  --size-fonts-line-height-m: 2.5rem;
  --size-fonts-line-height-l: 3.3333333333333335rem;
  --size-fonts-line-height-xl: 4.166666666666667rem;
  --size-fonts-line-height-2xl: 5rem;
  --size-fonts-line-height-3xl: 6.666666666666667rem;
  /* Size Fonts Line Height Outlier */
  --size-fonts-line-height-outlier-m: 2.0833333333333335rem;
  --size-fonts-line-height-outlier-l: 2.916666666666667rem;
  /* Size Gap */
  --size-gap-00: 0.20833333333333334rem;
  --size-gap-01: 0.4166666666666667rem;
  --size-gap-02: 0.8333333333333334rem;
  --size-gap-03: 1.25rem;
  --size-gap-04: 1.6666666666666667rem;
  --size-gap-05: 2.0833333333333335rem;
  --size-gap-06: 2.5rem;
  --size-gap-07: 3.3333333333333335rem;
  --size-gap-08: 4.166666666666667rem;
  --size-gap-09: 5rem;
  --size-gap-10: 5.833333333333334rem;
  /* Size Icon */
  --size-icon-xs: 1.6666666666666667rem;
  --size-icon-s: 2.0833333333333335rem;
  --size-icon-m: 2.5rem;
  --size-icon-l: 2.916666666666667rem;
  /* Size Radius */
  --size-radius-01: 0.20833333333333334rem;
  --size-radius-02: 0.4166666666666667rem;
  --size-radius-03: 0.8333333333333334rem;
  --size-radius-04: 1.25rem;
  --size-radius-05: 1.6666666666666667rem;
  --size-radius-06: 2.5rem;
  --size-radius-07: 3.3333333333333335rem;
  --size-radius-round: 37.5rem;
}
:root {
  --button-round-board-icon: #277cd9;
  --toolbar-active-bar: #277cd9;
  --toolbar-button-selected-surface: transparent;
  --toolbar-button-hover-surface: rgba(39, 124, 217, 0.15);
  --toolbar-button-active-surface: rgba(39, 124, 217, 0.2);
  --toolbar-add-page-surface: #ffffff;
  --toolbar-add-page-surface-hover: #f5f5f8;
  --toolbar-add-page-surface-active: #e9eaef;
  --toolbar-add-page-border: #d1d3de;
  --toolbar-page-button-surface: #ffffff;
  --toolbar-page-button-surface-hover: #f5f5f8;
  --toolbar-page-button-surface-active: #e9eaef;
  --toolbar-page-button-label-weight: 600;
  --page-menu-add-icon: #38a4de;
  --quick-access-flat-item-surface: #d4eefc;
  --quick-access-flat-item-surface-active: #b7e3fa;
  --options-menu-incorrect-icon: #ed1c24;
}
:root[data-theme='business'] {
  --button-round-board-icon: #556474;
  --toolbar-active-bar: #28759f;
  --toolbar-button-selected-surface: #effaff;
  --toolbar-button-hover-surface: #d4eefc;
  --toolbar-button-active-surface: #b7e3fa;
  --toolbar-page-button-label-weight: 400;
  --page-menu-add-icon: #556474;
  --quick-access-flat-item-surface: #d4eefc;
  --quick-access-flat-item-surface-active: #b7e3fa;
  --options-menu-incorrect-icon: #556474;
}
/**
 * Buttons
 * Import in correct order, first button-base!
 **/
.alert {
  width: 100%;
  border-radius: 4px;
  font-size: 1.2rem;
  color: #ffffff;
  padding: 1.01rem 1.61rem;
}
.alert.audience--board {
  font-size: 12px;
  line-height: 18px;
  padding: 16px;
}
.alert a {
  color: #ffffff;
}
.alert__content {
  flex: 1;
}
.alert--primary {
  background-color: #277cd9;
}
.alert--call_to_action {
  color: #2a3541;
  background-color: #ffdebd;
}
.alert--call_to_action a {
  color: #2a3541;
}
.alert--negative {
  background-color: #ed1c24;
}
.alert--warning {
  background-color: #fff7e5;
}
.alert--hidden {
  display: none;
}
.alert__close {
  margin-top: -0.2rem;
  margin-right: -0.4rem;
  float: right;
}
.audience--board .alert__close {
  margin: 0;
}
.alert__close button .icon__close {
  width: 1rem !important;
  height: 1rem !important;
}
.audience--board .alert__close button .icon__close {
  width: 12px !important;
  height: 12px !important;
}
/**
 * Because the layout for button-regular apply to all buttons in first place,
 * Therefore we defined the colors in button-base folder.
 */
.styleguide.button__regular {
  position: relative;
  text-decoration: none;
  text-indent: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background-clip: padding-box;
  margin: 0;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
}
.styleguide.button__regular.wrap--text {
  white-space: normal;
}
.styleguide.button__regular.icon-position--left-absolute .flat__icon {
  position: absolute;
  left: 0;
  margin-left: 1.75rem;
}
.styleguide.button__regular.icon-position--right-absolute .flex {
  flex-direction: row-reverse;
}
.styleguide.button__regular.icon-position--right-absolute .flat__icon {
  position: absolute;
  right: 0;
  margin-right: 1.75rem;
}
.styleguide.button__regular.icon-position--left .flat__icon {
  margin-right: 1.25rem;
}
.styleguide.button__regular.icon-position--right .flex {
  flex-direction: row-reverse;
}
.styleguide.button__regular.icon-position--right .flat__icon {
  margin-left: 1.25rem;
}
.styleguide.button__regular .loading-spinner {
  position: absolute;
}
.styleguide.button__regular .hide {
  visibility: hidden;
}
.styleguide.button__regular.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__regular.column {
  flex-direction: column;
}
.styleguide.button__regular.end {
  justify-content: flex-end;
}
.styleguide.button__regular.start {
  justify-content: flex-start;
}
.styleguide.button__regular.flex-center {
  justify-content: center;
}
.styleguide.button__regular.between {
  justify-content: space-between;
}
.styleguide.button__regular.around {
  justify-content: space-around;
}
.styleguide.button__regular.cross-start {
  align-items: flex-start;
}
.styleguide.button__regular.cross-end {
  align-items: flex-end;
}
.styleguide.button__regular.stretch {
  align-items: stretch;
}
.styleguide.button__regular.evenly {
  justify-content: space-evenly;
}
.styleguide.button__regular.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__regular.wrap {
  flex-wrap: wrap;
}
.styleguide.button__regular.grow {
  flex: 1;
}
.styleguide.button__regular .flex-half,
.styleguide.button__regular .flex-quarter,
.styleguide.button__regular .flex-sixth,
.styleguide.button__regular .flex-third,
.styleguide.button__regular .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__regular .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__regular .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__regular .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__regular .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__regular .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__regular .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__regular .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__regular .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__regular .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__regular .icon__position {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
}
.styleguide.button__regular .icon__position.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__regular .icon__position.column {
  flex-direction: column;
}
.styleguide.button__regular .icon__position.end {
  justify-content: flex-end;
}
.styleguide.button__regular .icon__position.start {
  justify-content: flex-start;
}
.styleguide.button__regular .icon__position.flex-center {
  justify-content: center;
}
.styleguide.button__regular .icon__position.between {
  justify-content: space-between;
}
.styleguide.button__regular .icon__position.around {
  justify-content: space-around;
}
.styleguide.button__regular .icon__position.cross-start {
  align-items: flex-start;
}
.styleguide.button__regular .icon__position.cross-end {
  align-items: flex-end;
}
.styleguide.button__regular .icon__position.stretch {
  align-items: stretch;
}
.styleguide.button__regular .icon__position.evenly {
  justify-content: space-evenly;
}
.styleguide.button__regular .icon__position.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__regular .icon__position.wrap {
  flex-wrap: wrap;
}
.styleguide.button__regular .icon__position.grow {
  flex: 1;
}
.styleguide.button__regular .icon__position .flex-half,
.styleguide.button__regular .icon__position .flex-quarter,
.styleguide.button__regular .icon__position .flex-sixth,
.styleguide.button__regular .icon__position .flex-third,
.styleguide.button__regular .icon__position .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__regular .icon__position .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__regular .icon__position .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__regular .icon__position .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__regular .icon__position .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__regular .icon__position .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__regular .icon__position .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__regular .icon__position .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__regular .icon__position .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__regular .icon__position .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__regular.audience--teacher.size--small {
  padding: 0.63rem 1.56rem;
  font-size: 1.25rem;
  min-height: 3.13rem;
  border-radius: 0.625rem;
}
.styleguide.button__regular.audience--teacher.size--small .flat__icon,
.styleguide.button__regular.audience--teacher.size--small .svg__icon {
  width: 1.25rem;
  min-height: 1.25rem;
}
.styleguide.button__regular.audience--teacher.size--small.icon-position--left .flat__icon,
.styleguide.button__regular.audience--teacher.size--small.icon-position--left .svg__icon {
  margin-right: 0.73rem;
}
.styleguide.button__regular.audience--teacher.size--small.icon-position--right .flex {
  flex-direction: row-reverse;
}
.styleguide.button__regular.audience--teacher.size--small.icon-position--right .flat__icon,
.styleguide.button__regular.audience--teacher.size--small.icon-position--right .svg__icon {
  margin-left: 0.73rem;
}
.styleguide.button__regular.audience--teacher.size--normal {
  padding: 0.89rem 2.04rem;
  font-size: 1.66666667rem;
  min-height: 4.17rem;
  max-height: 4.17rem;
  border-radius: 0.83333333rem;
}
.styleguide.button__regular.audience--teacher.size--normal .flat__icon,
.styleguide.button__regular.audience--teacher.size--normal .svg__icon {
  width: 1.66666667rem;
  min-height: 1.66666667rem;
}
.styleguide.button__regular.audience--teacher.size--normal.icon-position--left .flat__icon,
.styleguide.button__regular.audience--teacher.size--normal.icon-position--left .svg__icon {
  margin-right: 0.83333333rem;
}
.styleguide.button__regular.audience--teacher.size--normal.icon-position--right .flex {
  flex-direction: row-reverse;
}
.styleguide.button__regular.audience--teacher.size--normal.icon-position--right .flat__icon,
.styleguide.button__regular.audience--teacher.size--normal.icon-position--right .svg__icon {
  margin-left: 0.83333333rem;
}
.styleguide.button__regular.audience--teacher.size--large {
  padding: 1.15rem 2.6rem;
  font-size: 2.19rem;
  min-height: 5.21rem;
  border-radius: 1.04166667rem;
}
.styleguide.button__regular.audience--teacher.size--large .flat__icon,
.styleguide.button__regular.audience--teacher.size--large .svg__icon {
  width: 2.19rem;
  min-height: 2.19rem;
}
.styleguide.button__regular.audience--teacher.size--large.icon-position--left .flat__icon,
.styleguide.button__regular.audience--teacher.size--large.icon-position--left .svg__icon {
  margin-right: 1.25rem;
}
.styleguide.button__regular.audience--teacher.size--large.icon-position--right .flex {
  flex-direction: row-reverse;
}
.styleguide.button__regular.audience--teacher.size--large.icon-position--right .flat__icon,
.styleguide.button__regular.audience--teacher.size--large.icon-position--right .svg__icon {
  margin-left: 1.25rem;
}
.styleguide.button__regular.audience--teacher.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.styleguide.button__regular.audience--teacher.is-loading .flat__icon {
  position: absolute;
  margin-right: 0;
}
.styleguide.button__regular.audience--student.size--small {
  padding: 0 2.6rem;
  font-size: 2.19rem;
  min-height: 5.21rem;
  border-radius: 0.83rem;
}
.styleguide.button__regular.audience--student.size--small .flat__icon {
  width: 2.19rem;
  min-height: 2.19rem;
  margin-right: 1.25rem;
}
.styleguide.button__regular.audience--student.size--normal {
  padding: 0 3.13rem;
  font-size: 2.9rem;
  min-height: 6.25rem;
  border-radius: 1.04rem;
}
.styleguide.button__regular.audience--student.size--normal .flat__icon {
  width: 2.9rem;
  min-height: 2.9rem;
  margin-right: 1.5rem;
}
.styleguide.button__regular.audience--student.size--large {
  padding: 0 3.75rem;
  font-size: 3.83rem;
  min-height: 7.5rem;
  border-radius: 1.25rem;
}
.styleguide.button__regular.audience--student.size--large .flat__icon {
  width: 3.83rem;
  min-height: 3.83rem;
  margin-right: 1.8rem;
}
.styleguide.button__regular.audience--student.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.styleguide.button__regular.audience--student.is-loading .flat__icon {
  position: absolute;
  margin-right: 0;
}
.styleguide.button__regular.audience--board.size--small {
  padding: 0 20px;
  font-size: 12px;
  min-height: 32px;
  border-radius: 4px;
}
.styleguide.button__regular.audience--board.size--small .flat__icon {
  width: 10px;
  height: 10px;
  margin-right: 6px;
}
.styleguide.button__regular.audience--board.size--normal {
  padding: 0 25px;
  font-size: 16px;
  min-height: 40px;
  border-radius: 6px;
}
.styleguide.button__regular.audience--board.size--normal .flat__icon {
  width: 12px;
  height: 12px;
  margin-right: 8px;
}
.styleguide.button__regular.audience--board.size--large {
  padding: 0 30px;
  font-size: 20px;
  min-height: 48px;
  border-radius: 8px;
}
.styleguide.button__regular.audience--board.size--large .flat__icon {
  width: 14px;
  height: 14px;
  margin-right: 10px;
}
.styleguide.button__regular.audience--board.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.styleguide.button__regular.audience--board.is-loading .flat__icon {
  position: absolute;
  margin-right: 0;
}
.styleguide.gynzy.button__regular {
  outline: none;
  border: none;
  --button-regular-color: #ffffff;
  --button-regular-background: #277cd9;
  --button-regular-background-hover: #4e92ff;
  --button-regular-background-active: #2465ab;
  color: var(--button-regular-color);
  background-color: var(--button-regular-background);
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
}
.styleguide.gynzy.button__regular .icon--graphics {
  fill: var(--button-regular-color);
  color: var(--button-regular-color);
}
.styleguide.gynzy.button__regular.hover:enabled,
.styleguide.gynzy.button__regular:hover:enabled {
  background-color: var(--button-regular-background-hover);
}
.styleguide.gynzy.button__regular.active:enabled,
.styleguide.gynzy.button__regular:active:enabled {
  background-color: var(--button-regular-background-active);
  color: rgba(255, 255, 255, 0.7);
}
.styleguide.gynzy.button__regular.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular:active:enabled .icon--graphics {
  fill: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.7);
}
.styleguide.gynzy.button__regular:disabled {
  cursor: default;
  opacity: 0.5;
}
.styleguide.gynzy.button__regular.color--primary_new {
  background-color: #28759f;
  border: none;
  color: #ffffff;
  box-shadow: none;
}
.styleguide.gynzy.button__regular.color--primary_new .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--primary_new.hover:enabled,
.styleguide.gynzy.button__regular.color--primary_new:hover:enabled {
  background-color: #2b8fc5;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--primary_new.active:enabled,
.styleguide.gynzy.button__regular.color--primary_new:active:enabled {
  background-color: #1f5e7f;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--primary_new:disabled {
  cursor: default;
  background-color: #a9c8d9;
}
.styleguide.gynzy.button__regular.color--primary_new:disabled .svg__icon img {
  filter: grayscale(1);
  opacity: 0.5;
}
.styleguide.gynzy.button__regular.color--secondary,
.styleguide.gynzy.button__regular.color--solitude {
  --button-regular-color: #556474;
  --button-regular-background: #e9eaef;
  --button-regular-background-hover: #f5f5f8;
  --button-regular-background-active: #d1d3de;
}
.styleguide.gynzy.button__regular.color--secondary.active:enabled,
.styleguide.gynzy.button__regular.color--solitude.active:enabled,
.styleguide.gynzy.button__regular.color--secondary:active:enabled,
.styleguide.gynzy.button__regular.color--solitude:active:enabled {
  background-color: #d1d3de;
  color: rgba(85, 100, 116, 0.7);
}
.styleguide.gynzy.button__regular.color--secondary.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--solitude.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--secondary:active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--solitude:active:enabled .icon--graphics {
  fill: rgba(85, 100, 116, 0.7);
  color: rgba(85, 100, 116, 0.7);
}
.styleguide.gynzy.button__regular.color--call_to_action {
  --button-regular-background: #fd8b1d;
  --button-regular-background-hover: #fda045;
  --button-regular-background-active: #e57102;
}
.styleguide.gynzy.button__regular.color--mariner {
  --button-regular-background: #277cd9;
  --button-regular-background-hover: #4e92ff;
  --button-regular-background-active: #2465ab;
}
.styleguide.gynzy.button__regular.color--tree-poppy {
  --button-regular-background: #fd8b1d;
  --button-regular-background-hover: #fda045;
  --button-regular-background-active: #e57102;
}
.styleguide.gynzy.button__regular.color--positive {
  --button-regular-background: #1eaa10;
  --button-regular-background-hover: #25cf14;
  --button-regular-background-active: #167b0c;
}
.styleguide.gynzy.button__regular.color--negative {
  --button-regular-background: #ed1c24;
  --button-regular-background-hover: #f04248;
  --button-regular-background-active: #c61017;
}
.styleguide.gynzy.button__regular.color--purple-heart {
  --button-regular-background: #8c41d9;
  --button-regular-background-hover: #a05fe3;
  --button-regular-background-active: #632a9d;
}
.styleguide.gynzy.button__regular.color--orchid {
  --button-regular-background: #d941d9;
  --button-regular-background-hover: #e35fe3;
  --button-regular-background-active: #9d2a9d;
}
.styleguide.gynzy.button__regular.color--wattle {
  --button-regular-background: #fad20c;
  --button-regular-background-hover: #ffdc2e;
  --button-regular-background-active: #a88e0b;
}
.styleguide.gynzy.button__regular.color--light {
  color: #556474;
  border: 1px solid #d1d3de;
  background-color: #ffffff;
  box-shadow: none;
}
.styleguide.gynzy.button__regular.color--light .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__regular.color--light.hover:enabled,
.styleguide.gynzy.button__regular.color--light:hover:enabled {
  background-color: #ffffff;
  color: #277cd9;
}
.styleguide.gynzy.button__regular.color--light.hover:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--light:hover:enabled .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.button__regular.color--light.active:enabled,
.styleguide.gynzy.button__regular.color--light:active:enabled {
  background-color: #f5f5f8;
  color: rgba(39, 124, 217, 0.7);
}
.styleguide.gynzy.button__regular.color--light.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--light:active:enabled .icon--graphics {
  fill: rgba(39, 124, 217, 0.7);
  color: rgba(39, 124, 217, 0.7);
}
.styleguide.gynzy.button__regular.color--light:disabled {
  cursor: default;
  background-color: #f5f5f8;
  color: #aeb7c2;
}
.styleguide.gynzy.button__regular.color--light:disabled .svg__icon img {
  filter: grayscale(1);
  opacity: 0.5;
}
.styleguide.gynzy.button__regular.color--light_overlay {
  color: #ffffff;
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.25);
}
.styleguide.gynzy.button__regular.color--light_overlay .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--light_overlay.hover:enabled,
.styleguide.gynzy.button__regular.color--light_overlay:hover:enabled {
  background-color: rgba(255, 255, 255, 0.35);
}
.styleguide.gynzy.button__regular.color--light_overlay.active:enabled,
.styleguide.gynzy.button__regular.color--light_overlay:active:enabled {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.05);
}
.styleguide.gynzy.button__regular.color--light_overlay.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--light_overlay:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--tonal {
  color: #1f5e7f;
  border: none;
  background-color: #d4eefc;
  box-shadow: none;
  transition: none;
}
.styleguide.gynzy.button__regular.color--tonal .icon--graphics {
  fill: #1f5e7f;
  color: #1f5e7f;
}
.styleguide.gynzy.button__regular.color--tonal.hover:enabled,
.styleguide.gynzy.button__regular.color--tonal:hover:enabled {
  background-color: #b7e3fa;
  box-shadow: 0 1px 2px 0 rgba(26, 69, 91, 0.3), 0 2px 6px 2px rgba(26, 69, 91, 0.15);
}
.styleguide.gynzy.button__regular.color--tonal.active:enabled,
.styleguide.gynzy.button__regular.color--tonal:active:enabled {
  background-color: #97d4f5;
  color: #1f5e7f;
  box-shadow: none;
  outline: none;
}
.styleguide.gynzy.button__regular.color--tonal.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--tonal:active:enabled .icon--graphics {
  fill: #1f5e7f;
  color: #1f5e7f;
}
.styleguide.gynzy.button__regular.color--tonal:focus-visible:enabled {
  background-color: #b7e3fa;
  box-shadow: 0 1px 2px 0 rgba(26, 69, 91, 0.3), 0 2px 6px 2px rgba(26, 69, 91, 0.15);
  outline: 2px solid #1f5e7f;
  outline-offset: -2px;
}
.styleguide.gynzy.button__regular.color--tonal:disabled {
  background-color: #effaff;
  color: #a9c8d9;
  opacity: 1;
  cursor: default;
}
.styleguide.gynzy.button__regular.color--tonal:disabled .icon--graphics {
  fill: #a9c8d9;
  color: #a9c8d9;
}
.styleguide.gynzy.button__regular.color--tonal_light {
  color: #1f5e7f;
  border: none;
  background-color: #ffffff;
  box-shadow: none;
  transition: all 0.2s ease-in-out;
}
.styleguide.gynzy.button__regular.color--tonal_light .icon--graphics {
  fill: #d4eefc;
  color: #d4eefc;
}
.styleguide.gynzy.button__regular.color--tonal_light.hover:enabled,
.styleguide.gynzy.button__regular.color--tonal_light:hover:enabled {
  background-color: #b7e3fa;
}
.styleguide.gynzy.button__regular.color--tonal_light.active:enabled,
.styleguide.gynzy.button__regular.color--tonal_light:active:enabled {
  background-color: #b7e3fa;
  color: #1f5e7f;
}
.styleguide.gynzy.button__regular.color--tonal_light.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--tonal_light:active:enabled .icon--graphics {
  fill: #b7e3fa;
  color: #b7e3fa;
}
.styleguide.gynzy.button__regular.color--purple {
  background: #dbd7eb;
  color: #556474;
  box-shadow: inset 0 0 0 3px #8c41d9;
  opacity: 1;
}
.styleguide.gynzy.button__regular.color--purple .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--purple.hover:enabled,
.styleguide.gynzy.button__regular.color--purple:hover:enabled {
  background-color: #8c41d9;
}
.styleguide.gynzy.button__regular.color--purple.active:enabled,
.styleguide.gynzy.button__regular.color--purple:active:enabled {
  color: #ffffff;
  border: 0 solid rgba(255, 255, 255, 0.7);
  background-color: #8c41d9;
}
.styleguide.gynzy.button__regular.color--purple.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--purple:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--outlined {
  color: #28759f;
  border: 0.10416667rem solid #28759f;
  background-color: unset;
  box-shadow: none;
  transition: all 0.2s ease-in-out;
}
.styleguide.gynzy.button__regular.color--outlined .icon--graphics {
  fill: #28759f;
  color: #28759f;
}
.styleguide.gynzy.button__regular.color--outlined.hover:enabled,
.styleguide.gynzy.button__regular.color--outlined:hover:enabled {
  background-color: #d4eefc;
}
.styleguide.gynzy.button__regular.color--outlined.active:enabled,
.styleguide.gynzy.button__regular.color--outlined:active:enabled {
  color: #28759f;
}
.styleguide.gynzy.button__regular.color--outlined.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--outlined:active:enabled .icon--graphics {
  fill: #1f5e7f;
  color: #1f5e7f;
}
.styleguide.gynzy.button__regular.color--red,
.styleguide.gynzy.button__regular.isSelected.color--red {
  background: #ed1c24;
  color: #ffffff;
  box-shadow: inset 0 0 0 0;
  opacity: 1;
}
.styleguide.gynzy.button__regular.color--red:disabled,
.styleguide.gynzy.button__regular.isSelected.color--red:disabled {
  opacity: 0.5;
}
.styleguide.gynzy.button__regular.color--red.audience--teacher,
.styleguide.gynzy.button__regular.isSelected.color--red.audience--teacher {
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
}
.styleguide.gynzy.button__regular.color--red.audience--teacher.hover:enabled,
.styleguide.gynzy.button__regular.isSelected.color--red.audience--teacher.hover:enabled,
.styleguide.gynzy.button__regular.color--red.audience--teacher:hover:enabled,
.styleguide.gynzy.button__regular.isSelected.color--red.audience--teacher:hover:enabled {
  background: #f04248;
}
.styleguide.gynzy.button__regular.color--red .icon--graphics,
.styleguide.gynzy.button__regular.isSelected.color--red .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--red.hover:enabled,
.styleguide.gynzy.button__regular.isSelected.color--red.hover:enabled,
.styleguide.gynzy.button__regular.color--red:hover:enabled,
.styleguide.gynzy.button__regular.isSelected.color--red:hover:enabled {
  background-color: red;
}
.styleguide.gynzy.button__regular.color--red.active:enabled,
.styleguide.gynzy.button__regular.isSelected.color--red.active:enabled,
.styleguide.gynzy.button__regular.color--red:active:enabled,
.styleguide.gynzy.button__regular.isSelected.color--red:active:enabled {
  border: 0 solid rgba(255, 255, 255, 0.7);
  background-color: red;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.color--red.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.isSelected.color--red.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.color--red:active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.isSelected.color--red:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.isSelected {
  color: #277cd9;
  border-color: #277cd9;
  box-shadow: inset 0 0 0 0.3rem #277cd9;
  background-color: rgba(39, 124, 217, 0.3);
}
.styleguide.gynzy.button__regular.isSelected.audience--teacher {
  box-shadow: inset 0 0 0 0.2rem #277cd9;
}
.styleguide.gynzy.button__regular.isSelected.audience--board {
  box-shadow: inset 0 0 0 3px #277cd9;
}
.styleguide.gynzy.button__regular.isSelected .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
  position: absolute;
}
.styleguide.gynzy.button__regular.isSelected.hover:enabled,
.styleguide.gynzy.button__regular.isSelected:hover:enabled {
  background-color: rgba(39, 124, 217, 0.2);
}
.styleguide.gynzy.button__regular.isSelected.active:enabled,
.styleguide.gynzy.button__regular.isSelected:active:enabled {
  background-color: rgba(39, 124, 217, 0.3);
  color: #277cd9;
}
.styleguide.gynzy.button__regular.isSelected.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.isSelected:active:enabled .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.button__regular.isSelected.color--green {
  background: green;
  color: #ffffff;
  box-shadow: inset 0 0 0 0;
  opacity: 1;
}
.styleguide.gynzy.button__regular.isSelected.color--green .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.isSelected.color--green.hover:enabled,
.styleguide.gynzy.button__regular.isSelected.color--green:hover:enabled {
  background-color: green;
}
.styleguide.gynzy.button__regular.isSelected.color--green.active:enabled,
.styleguide.gynzy.button__regular.isSelected.color--green:active:enabled {
  border: 0 solid rgba(255, 255, 255, 0.7);
  background-color: green;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.isSelected.color--green.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.isSelected.color--green:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.isSelected.color--red {
  background: #ed1c24;
  color: #ffffff;
  box-shadow: inset 0 0 0 0;
  opacity: 1;
}
.styleguide.gynzy.button__regular.isSelected.color--red .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.isSelected.color--red.hover:enabled,
.styleguide.gynzy.button__regular.isSelected.color--red:hover:enabled {
  background-color: red;
}
.styleguide.gynzy.button__regular.isSelected.color--red.active:enabled,
.styleguide.gynzy.button__regular.isSelected.color--red:active:enabled {
  border: 0 solid rgba(255, 255, 255, 0.7);
  background-color: red;
  color: #ffffff;
}
.styleguide.gynzy.button__regular.isSelected.color--red.active:enabled .icon--graphics,
.styleguide.gynzy.button__regular.isSelected.color--red:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
/**
 * The layout for button-square is almost identical to button-regular.
 * Only different is the width of the buttons.
 */
.styleguide.button__square {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  outline: none;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background-clip: padding-box;
  margin: 0;
  padding: 0;
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
}
.styleguide.button__square .hide {
  display: none;
}
.styleguide.button__square.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.styleguide.button__square.audience--board.size--small {
  min-width: 32px;
  width: 32px;
  max-width: 32px;
  min-height: 32px;
  height: 32px;
  max-height: 32px;
  border-radius: 4px;
  font-size: 12px;
}
.styleguide.button__square.audience--board.size--small .flat__icon {
  margin: 0 auto;
  width: 12px;
  height: 12px;
}
.styleguide.button__square.audience--board.size--small .svg__icon {
  margin: 0 auto;
  width: 18px;
  height: 18px;
}
.styleguide.button__square.audience--board.size--normal {
  min-width: 40px;
  width: 40px;
  max-width: 40px;
  min-height: 40px;
  height: 40px;
  max-height: 40px;
  border-radius: 6px;
  font-size: 16px;
}
.styleguide.button__square.audience--board.size--normal .flat__icon {
  margin: 0 auto;
  width: 16px;
  height: 16px;
}
.styleguide.button__square.audience--board.size--normal .svg__icon {
  margin: 0 auto;
  width: 24px;
  height: 24px;
}
.styleguide.button__square.audience--board.size--large {
  min-width: 48px;
  width: 48px;
  max-width: 48px;
  min-height: 48px;
  height: 48px;
  max-height: 48px;
  border-radius: 8px;
  font-size: 20px;
}
.styleguide.button__square.audience--board.size--large .flat__icon {
  margin: 0 auto;
  width: 20px;
  height: 20px;
}
.styleguide.button__square.audience--board.size--large .svg__icon {
  margin: 0 auto;
  width: 30px;
  height: 30px;
}
.styleguide.button__square.audience--student.size--small {
  min-width: 5.21rem;
  width: 5.21rem;
  max-width: 5.21rem;
  min-height: 5.21rem;
  height: 5.21rem;
  max-height: 5.21rem;
  font-size: 2.19rem;
  border-radius: 0.83rem;
}
.styleguide.button__square.audience--student.size--small .flat__icon {
  margin: 0 auto;
  width: 2.19rem;
  height: 2.19rem;
}
.styleguide.button__square.audience--student.size--small .svg__icon {
  margin: 0 auto;
  width: 1.875rem;
  height: 1.875rem;
}
.styleguide.button__square.audience--student.size--normal {
  min-width: 6.25rem;
  width: 6.25rem;
  max-width: 6.25rem;
  min-height: 6.25rem;
  height: 6.25rem;
  max-height: 6.25rem;
  font-size: 2.9rem;
  border-radius: 1.04rem;
}
.styleguide.button__square.audience--student.size--normal .flat__icon {
  margin: 0 auto;
  width: 2.9rem;
  height: 2.9rem;
}
.styleguide.button__square.audience--student.size--normal .svg__icon {
  margin: 0 auto;
  width: 2.5rem;
  height: 2.5rem;
}
.styleguide.button__square.audience--student.size--large {
  min-width: 7.5rem;
  width: 7.5rem;
  max-width: 7.5rem;
  min-height: 7.5rem;
  height: 7.5rem;
  max-height: 7.5rem;
  font-size: 3.83rem;
  border-radius: 1.25rem;
}
.styleguide.button__square.audience--student.size--large .flat__icon {
  margin: 0 auto;
  width: 3.83rem;
  height: 3.83rem;
}
.styleguide.button__square.audience--student.size--large .svg__icon {
  margin: 0 auto;
  width: 3.125rem;
  height: 3.125rem;
}
.styleguide.button__square.audience--teacher.size--small {
  min-width: 3.13rem;
  width: 3.13rem;
  max-width: 3.13rem;
  min-height: 3.13rem;
  height: 3.13rem;
  max-height: 3.13rem;
  font-size: 1.25rem;
  border-radius: 0.625rem;
}
.styleguide.button__square.audience--teacher.size--small .flat__icon {
  margin: 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}
.styleguide.button__square.audience--teacher.size--small .svg__icon {
  margin: 0 auto;
  width: 1.875rem;
  height: 1.875rem;
}
.styleguide.button__square.audience--teacher.size--normal {
  min-width: 4.17rem;
  width: 4.17rem;
  max-width: 4.17rem;
  min-height: 4.17rem;
  height: 4.17rem;
  max-height: 4.17rem;
  font-size: 1.66666667rem;
  border-radius: 0.83333333rem;
}
.styleguide.button__square.audience--teacher.size--normal .flat__icon {
  margin: 0 auto;
  width: 1.66666667rem;
  height: 1.66666667rem;
}
.styleguide.button__square.audience--teacher.size--normal .svg__icon {
  margin: 0 auto;
  width: 2.5rem;
  height: 2.5rem;
}
.styleguide.button__square.audience--teacher.size--large {
  min-width: 5.21rem;
  width: 5.21rem;
  max-width: 5.21rem;
  min-height: 5.21rem;
  height: 5.21rem;
  max-height: 5.21rem;
  font-size: 2.19rem;
  border-radius: 1.04166667rem;
}
.styleguide.button__square.audience--teacher.size--large .flat__icon {
  margin: 0 auto;
  width: 2.19rem;
  height: 2.19rem;
}
.styleguide.button__square.audience--teacher.size--large .svg__icon {
  margin: 0 auto;
  width: 3.125rem;
  height: 3.125rem;
}
/**
 * Because the gynzy-colors for 'button-regular' apply to all gynzy-buttons,
 * Therefore we defined the colors in button-base folder.
 */
.styleguide.gynzy.button__square {
  --button-regular-color: #ffffff;
  --button-regular-background: #277cd9;
  --button-regular-background-hover: #4e92ff;
  --button-regular-background-active: #2465ab;
  color: var(--button-regular-color);
  background-color: var(--button-regular-background);
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
}
.styleguide.gynzy.button__square .icon--graphics {
  fill: var(--button-regular-color);
  color: var(--button-regular-color);
}
.styleguide.gynzy.button__square.hover:enabled,
.styleguide.gynzy.button__square:hover:enabled {
  background-color: var(--button-regular-background-hover);
}
.styleguide.gynzy.button__square.active:enabled,
.styleguide.gynzy.button__square:active:enabled {
  background-color: var(--button-regular-background-active);
  color: rgba(255, 255, 255, 0.7);
}
.styleguide.gynzy.button__square.active:enabled .icon--graphics,
.styleguide.gynzy.button__square:active:enabled .icon--graphics {
  fill: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.7);
}
.styleguide.gynzy.button__square.color--secondary,
.styleguide.gynzy.button__square.color--solitude {
  --button-regular-color: #556474;
  --button-regular-background: #e9eaef;
  --button-regular-background-hover: #f5f5f8;
  --button-regular-background-active: #d1d3de;
}
.styleguide.gynzy.button__square.color--secondary.active:enabled,
.styleguide.gynzy.button__square.color--solitude.active:enabled,
.styleguide.gynzy.button__square.color--secondary:active:enabled,
.styleguide.gynzy.button__square.color--solitude:active:enabled {
  background-color: #d1d3de;
  color: rgba(85, 100, 116, 0.7);
}
.styleguide.gynzy.button__square.color--secondary.active:enabled .icon--graphics,
.styleguide.gynzy.button__square.color--solitude.active:enabled .icon--graphics,
.styleguide.gynzy.button__square.color--secondary:active:enabled .icon--graphics,
.styleguide.gynzy.button__square.color--solitude:active:enabled .icon--graphics {
  fill: rgba(85, 100, 116, 0.7);
  color: rgba(85, 100, 116, 0.7);
}
.styleguide.gynzy.button__square.color--call_to_action {
  --button-regular-background: #fd8b1d;
  --button-regular-background-hover: #fda045;
  --button-regular-background-active: #e57102;
}
.styleguide.gynzy.button__square.color--mariner {
  --button-regular-background: #277cd9;
  --button-regular-background-hover: #4e92ff;
  --button-regular-background-active: #2465ab;
}
.styleguide.gynzy.button__square.color--tree-poppy {
  --button-regular-background: #fd8b1d;
  --button-regular-background-hover: #fda045;
  --button-regular-background-active: #e57102;
}
.styleguide.gynzy.button__square.color--positive {
  --button-regular-background: #1eaa10;
  --button-regular-background-hover: #25cf14;
  --button-regular-background-active: #167b0c;
}
.styleguide.gynzy.button__square.color--negative {
  --button-regular-background: #ed1c24;
  --button-regular-background-hover: #f04248;
  --button-regular-background-active: #c61017;
}
.styleguide.gynzy.button__square.color--purple-heart {
  --button-regular-background: #8c41d9;
  --button-regular-background-hover: #a05fe3;
  --button-regular-background-active: #632a9d;
}
.styleguide.gynzy.button__square.color--orchid {
  --button-regular-background: #d941d9;
  --button-regular-background-hover: #e35fe3;
  --button-regular-background-active: #9d2a9d;
}
.styleguide.gynzy.button__square.color--wattle {
  --button-regular-background: #fad20c;
  --button-regular-background-hover: #ffdc2e;
  --button-regular-background-active: #a88e0b;
}
.styleguide.gynzy.button__square.color--light {
  color: #556474;
  border: 1px solid #d1d3de;
  background-color: #ffffff;
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0);
}
.styleguide.gynzy.button__square.color--light:disabled {
  opacity: 1;
}
.styleguide.gynzy.button__square.color--light .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__square.color--light:not(:disabled):hover,
.styleguide.gynzy.button__square.color--light.hover:enabled {
  background-color: #f5f5f8;
  color: #556474;
}
.styleguide.gynzy.button__square.color--light:not(:disabled):hover .icon--graphics,
.styleguide.gynzy.button__square.color--light.hover:enabled .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__square.color--light:not(:disabled):active,
.styleguide.gynzy.button__square.color--light.active:enabled {
  background-color: #e9eaef;
  color: #556474;
}
.styleguide.gynzy.button__square.color--light:not(:disabled):active .icon--graphics,
.styleguide.gynzy.button__square.color--light.active:enabled .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__square.color--light_overlay {
  color: #ffffff;
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0);
}
.styleguide.gynzy.button__square.color--light_overlay .icon--graphics {
  fill: #fff;
  color: #fff;
}
.styleguide.gynzy.button__square.color--light_overlay.hover:enabled,
.styleguide.gynzy.button__square.color--light_overlay:hover:enabled {
  background-color: rgba(255, 255, 255, 0.35);
}
.styleguide.gynzy.button__square.color--light_overlay.active:enabled,
.styleguide.gynzy.button__square.color--light_overlay:active:enabled {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.05);
}
.styleguide.gynzy.button__square.color--light_overlay.active:enabled .icon--graphics,
.styleguide.gynzy.button__square.color--light_overlay:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__square.color--light_toolbar {
  color: #556474;
  border: 1px solid #d1d3de;
  background-color: #ffffff;
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0);
}
.styleguide.gynzy.button__square.color--light_toolbar .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__square.color--light_toolbar.hover:enabled,
.styleguide.gynzy.button__square.color--light_toolbar:hover:enabled {
  background-color: #ffffff;
  color: #277cd9;
}
.styleguide.gynzy.button__square.color--light_toolbar.hover:enabled .icon--graphics,
.styleguide.gynzy.button__square.color--light_toolbar:hover:enabled .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.button__square.color--light_toolbar.active:enabled,
.styleguide.gynzy.button__square.color--light_toolbar:active:enabled {
  background-color: #f5f5f8;
  color: rgba(39, 124, 217, 0.7);
}
.styleguide.gynzy.button__square.color--light_toolbar.active:enabled .icon--graphics,
.styleguide.gynzy.button__square.color--light_toolbar:active:enabled .icon--graphics {
  fill: rgba(39, 124, 217, 0.7);
  color: rgba(39, 124, 217, 0.7);
}
.styleguide.gynzy.button__square.color--light_toolbar:disabled {
  background-color: rgba(255, 255, 255, 0.05);
}
.styleguide.gynzy.button__square.color--light_toolbar:disabled .icon--graphics {
  fill: #aeb7c2;
  color: #aeb7c2;
}
.styleguide.gynzy.button__square.color--parnassys {
  color: #fff;
  background-color: #c9496a;
}
.styleguide.gynzy.button__square.color--parnassys .icon--graphics {
  fill: #fff;
  color: #fff;
}
.styleguide.gynzy.button__square.color--parnassys.hover:enabled,
.styleguide.gynzy.button__square.color--parnassys:hover:enabled {
  background-color: #dd5d7e;
}
.styleguide.gynzy.button__square.color--parnassys.active:enabled,
.styleguide.gynzy.button__square.color--parnassys:active:enabled {
  background-color: #b03051;
}
.styleguide.gynzy.button__square.color--parnassys.active:enabled .icon--graphics,
.styleguide.gynzy.button__square.color--parnassys:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__square.isSelected {
  color: #277cd9;
  border-color: #277cd9;
  box-shadow: inset 0 0 0 0.3rem #277cd9;
  background-color: rgba(39, 124, 217, 0.3);
}
.styleguide.gynzy.button__square.isSelected.audience--teacher {
  box-shadow: inset 0 0 0 0.2rem #277cd9;
}
.styleguide.gynzy.button__square.isSelected .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
  position: absolute;
}
.styleguide.gynzy.button__square.isSelected.hover:enabled,
.styleguide.gynzy.button__square.isSelected:hover:enabled {
  background-color: rgba(39, 124, 217, 0.2);
}
.styleguide.gynzy.button__square.isSelected.active:enabled,
.styleguide.gynzy.button__square.isSelected:active:enabled {
  background-color: rgba(39, 124, 217, 0.3);
  color: #277cd9;
}
.styleguide.gynzy.button__square.isSelected.active:enabled .icon--graphics,
.styleguide.gynzy.button__square.isSelected:active:enabled .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.button__square:disabled {
  cursor: default;
  opacity: 0.5;
}
/**
 * The layout for button-square is almost identical to button-regular.
 * Only different is the width of the buttons.
 */
.styleguide.button__icon {
  overflow: hidden;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  text-decoration: none;
  text-indent: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background-clip: padding-box;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
}
.styleguide.button__icon.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__icon.column {
  flex-direction: column;
}
.styleguide.button__icon.end {
  justify-content: flex-end;
}
.styleguide.button__icon.start {
  justify-content: flex-start;
}
.styleguide.button__icon.flex-center {
  justify-content: center;
}
.styleguide.button__icon.between {
  justify-content: space-between;
}
.styleguide.button__icon.around {
  justify-content: space-around;
}
.styleguide.button__icon.cross-start {
  align-items: flex-start;
}
.styleguide.button__icon.cross-end {
  align-items: flex-end;
}
.styleguide.button__icon.stretch {
  align-items: stretch;
}
.styleguide.button__icon.evenly {
  justify-content: space-evenly;
}
.styleguide.button__icon.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__icon.wrap {
  flex-wrap: wrap;
}
.styleguide.button__icon.grow {
  flex: 1;
}
.styleguide.button__icon .flex-half,
.styleguide.button__icon .flex-quarter,
.styleguide.button__icon .flex-sixth,
.styleguide.button__icon .flex-third,
.styleguide.button__icon .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__icon .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__icon .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__icon .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__icon .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__icon .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__icon .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__icon .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__icon .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__icon .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__icon.type--self-contained .flat__icon {
  width: inherit;
  height: inherit;
}
.styleguide.button__icon.audience--teacher.type--self-contained.size--small {
  width: 1.56rem;
  height: 1.56rem;
  min-width: 1.56rem;
  max-width: 1.56rem;
}
.styleguide.button__icon.audience--teacher.type--self-contained.size--normal {
  width: 2.09rem;
  height: 2.09rem;
  min-width: 2.09rem;
  max-width: 2.09rem;
}
.styleguide.button__icon.audience--teacher.type--self-contained.size--large {
  width: 2.92rem;
  height: 2.92rem;
  min-width: 2.92rem;
  max-width: 2.92rem;
}
.styleguide.button__icon.audience--teacher.type--circle-button {
  overflow: unset;
}
.styleguide.button__icon.audience--teacher.type--circle-button.size--small {
  width: 4.16666667rem;
  height: 4.16666667rem;
  padding: 1.04166667rem;
}
.styleguide.button__icon.audience--student.size--small {
  width: 2.08333333rem;
  height: 2.08333333rem;
}
.styleguide.button__icon.audience--student.size--normal {
  width: 3.91rem;
  height: 3.91rem;
}
.styleguide.button__icon.audience--student.size--large {
  width: 5.46rem;
  height: 5.46rem;
}
.styleguide.button__icon.audience--board.size--small {
  width: 20px;
  height: 20px;
}
.styleguide.button__icon.audience--board.size--normal {
  width: 30px;
  height: 30px;
}
.styleguide.button__icon.audience--board.size--large {
  width: 40px;
  height: 40px;
}
.styleguide.button__icon.type--circle-button {
  border-radius: 50%;
  padding: 1.04166667rem;
  background: transparent;
  outline: none;
  transition-property: background;
  transition-duration: 0.15s;
  overflow: auto;
}
.styleguide.button__icon.type--circle-button .svg__icon {
  width: inherit;
  height: inherit;
}
.styleguide.button__icon.type--circle-button .flat__icon {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.15s;
}
@media (pointer: coarse) {
  .styleguide.button__icon.type--circle-button:focus {
    outline: 2px solid #bed8f4;
    background: rgba(255, 255, 255, 0.5);
  }
  .styleguide.button__icon.type--circle-button:focus .flat__icon {
    opacity: 1;
  }
}
.styleguide.button__icon.type--circle-button:hover {
  background: linear-gradient(rgba(245, 245, 248, 0.7), rgba(245, 245, 248, 0.7)), linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
}
.styleguide.button__icon.type--circle-button:active {
  background: linear-gradient(rgba(233, 234, 239, 0.5), rgba(233, 234, 239, 0.5)), linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
}
.styleguide.button__icon.type--circle-button:active .flat__icon {
  opacity: 0.7;
}
.styleguide.gynzy.button__icon {
  background-color: transparent;
}
.styleguide.gynzy.button__icon.color--white .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__icon.color--white.type--self-contained:hover:enabled .icon--graphics {
  fill: #d1d3de;
  color: #d1d3de;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--black .icon--graphics {
  fill: #3f4c5a;
  color: #3f4c5a;
}
.styleguide.gynzy.button__icon.color--black.type--self-contained:hover:enabled .icon--graphics {
  fill: #6b7c8e;
  color: #6b7c8e;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--blue .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.button__icon.color--blue.type--self-contained:hover:enabled .icon--graphics {
  fill: #4e92ff;
  color: #4e92ff;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--blue.type--self-contained:active:enabled .icon--graphics {
  fill: #2465ab;
  color: #2465ab;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--heather .icon--graphics {
  fill: #aeb7c2;
  color: #aeb7c2;
}
.styleguide.gynzy.button__icon.color--heather.type--self-contained:hover:enabled .icon--graphics {
  fill: #d1d3de;
  color: #d1d3de;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--shuttle-gray .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__icon.color--shuttle-gray.type--self-contained:hover .icon--graphics {
  fill: #6b7c8e;
  color: #6b7c8e;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--shuttle-gray.type--self-contained:active .icon--graphics {
  fill: #3f4c5a;
  color: #3f4c5a;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--regent-gray .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.styleguide.gynzy.button__icon.color--regent-gray.type--self-contained:hover .icon--graphics {
  fill: #aeb7c2;
  color: #aeb7c2;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--regent-gray.type--self-contained:active .icon--graphics {
  fill: #6b7c8e;
  color: #6b7c8e;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--negative .icon--graphics {
  fill: #ed1c24;
  color: #ed1c24;
}
.styleguide.gynzy.button__icon.color--negative.type--self-contained:hover:enabled .icon--graphics {
  fill: #f04248;
  color: #f04248;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--negative.type--self-contained:active:enabled .icon--graphics {
  fill: #c61017;
  color: #c61017;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--positive .icon--graphics {
  fill: #1eaa10;
  color: #1eaa10;
}
.styleguide.gynzy.button__icon.color--positive.type--self-contained:hover:enabled .icon--graphics {
  fill: #25cf14;
  color: #25cf14;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--positive.type--self-contained:active:enabled .icon--graphics {
  fill: #167b0c;
  color: #167b0c;
  transition: 0.15s;
}
.styleguide.gynzy.button__icon.color--tonal .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__icon.color--tonal.type--self-contained:hover:enabled {
  background-color: #ffffff;
}
.styleguide.gynzy.button__icon.color--tonal.type--self-contained:active:enabled {
  background-color: #d4eefc;
}
.styleguide.gynzy.button__icon.color--havelock-blue .icon--graphics {
  fill: #38a4de;
  color: #38a4de;
}
.styleguide.gynzy.button__icon.color--sky-darker .icon--graphics {
  fill: #2477a3;
  color: #2477a3;
}
.styleguide.gynzy.button__icon.color--sky .icon--graphics {
  fill: #38a4de;
  color: #38a4de;
}
.styleguide.gynzy.button__icon.color--indigo .icon--graphics {
  fill: #3d61cc;
  color: #3d61cc;
}
.styleguide.gynzy.button__icon.color--lemon .icon--graphics {
  fill: #fad20c;
  color: #fad20c;
}
.styleguide.gynzy.button__icon.color--caribbean .icon--graphics {
  fill: #3fd4d4;
  color: #3fd4d4;
}
.styleguide.gynzy.button__icon.color--emerald .icon--graphics {
  fill: #3dcc84;
  color: #3dcc84;
}
.styleguide.gynzy.button__icon.color--lavender .icon--graphics {
  fill: #8c41d9;
  color: #8c41d9;
}
.styleguide.gynzy.button__icon.color--pear .icon--graphics {
  fill: #afd441;
  color: #afd441;
}
.styleguide.gynzy.button__icon:disabled {
  cursor: default;
  opacity: 0.5;
}
/**
 * The layout for button-toggle is almost identical to button-regular.
 */
.styleguide.button__toggle {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  width: 100%;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
  /**
	 * Default sizes for all buttons.
	 * Divided in 'teacher' and 'student' buttons.
	 * Sizes are: SMALL, NORMAL and LARGE
	 */
  margin: 0;
}
.styleguide.button__toggle.audience--student.size--small {
  padding: 0 2.6rem;
  font-size: 2.19rem;
  height: 5.21rem;
  border-radius: 0.83rem;
}
.styleguide.button__toggle.audience--student.size--normal {
  padding: 0 3.13rem;
  font-size: 2.9rem;
  height: 6.25rem;
  border-radius: 1.04rem;
}
.styleguide.button__toggle.audience--student.size--large {
  padding: 0 3.75rem;
  font-size: 3.83rem;
  height: 7.5rem;
  border-radius: 1.25rem;
}
.styleguide.button__toggle.audience--teacher.size--small {
  padding: 0 1.56rem;
  font-size: 1.25rem;
  height: 3.13rem;
  border-radius: 0.625rem;
}
.styleguide.button__toggle.audience--teacher.size--normal {
  padding: 0 2.04rem;
  font-size: 1.66666667rem;
  height: 4.17rem;
  border-radius: 0.83333333rem;
}
.styleguide.button__toggle.audience--teacher.size--large {
  padding: 0 2.6rem;
  font-size: 2.19rem;
  height: 5.21rem;
  border-radius: 1.04166667rem;
}
.styleguide.button__toggle.audience--board.size--small {
  padding: 0 14.976px;
  font-size: 12px;
  height: 32px;
  border-radius: 4px;
}
.styleguide.button__toggle.audience--board.size--normal {
  padding: 0 19.584px;
  font-size: 16px;
  height: 40px;
  border-radius: 6px;
}
.styleguide.button__toggle.audience--board.size--large {
  padding: 0 24.96px;
  font-size: 20px;
  height: 48px;
  border-radius: 8px;
}
.styleguide.button__toggle.audience--student:not(:first-child):not(:last-child),
.styleguide.button__toggle.audience--teacher:not(:first-child):not(:last-child),
.styleguide.button__toggle.audience--board:not(:first-child):not(:last-child) {
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.styleguide.button__toggle.audience--student:first-child,
.styleguide.button__toggle.audience--teacher:first-child,
.styleguide.button__toggle.audience--board:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.button__toggle.audience--student:last-child,
.styleguide.button__toggle.audience--teacher:last-child,
.styleguide.button__toggle.audience--board:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/**
 * The gynzy-colors for button-toggle is almost identical to other buttons.
 * See button-regular for those colors.
 */
.styleguide.gynzy.button__toggle {
  outline: none;
}
.styleguide.gynzy.button__toggle.color--primary {
  color: #277cd9;
  background: #ffffff;
  border: 1px solid #277cd9;
}
.styleguide.gynzy.button__toggle.color--primary:hover:enabled {
  background: #eaf2fb;
}
.styleguide.gynzy.button__toggle.color--primary:active:enabled {
  color: #ffffff;
  background: #277cd9;
}
.styleguide.gynzy.button__toggle.color--secondary {
  color: #556474;
  background: #ffffff;
  border: 1px solid #d1d3de;
}
.styleguide.gynzy.button__toggle.color--secondary:hover:enabled {
  background: #f5f5f8;
}
.styleguide.gynzy.button__toggle.color--secondary:active:enabled {
  background: #d1d3de;
}
.styleguide.gynzy.button__toggle.color--light_overlay {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #ffffff;
}
.styleguide.gynzy.button__toggle.color--light_overlay:hover:enabled {
  background-color: rgba(255, 255, 255, 0.2);
}
.styleguide.gynzy.button__toggle.color--light_overlay:active:enabled {
  color: #556474;
  background: #ffffff;
}
.styleguide.gynzy.button__toggle.button--selected.color--primary,
.styleguide.gynzy.button__toggle.button--selected:hover:enabled.color--primary {
  color: #ffffff;
  background: #277cd9;
}
.styleguide.gynzy.button__toggle.button--selected.color--primary:active:enabled,
.styleguide.gynzy.button__toggle.button--selected:hover:enabled.color--primary:active:enabled {
  background: #2465ab;
  border-color: #2465ab;
}
.styleguide.gynzy.button__toggle.button--selected.color--secondary,
.styleguide.gynzy.button__toggle.button--selected:hover:enabled.color--secondary {
  color: #556474;
  background: #d1d3de;
}
.styleguide.gynzy.button__toggle.button--selected.color--secondary:active:enabled,
.styleguide.gynzy.button__toggle.button--selected:hover:enabled.color--secondary:active:enabled {
  background: #aeb7c2;
  border-color: #aeb7c2;
}
.styleguide.gynzy.button__toggle.button--selected.color--light_overlay,
.styleguide.gynzy.button__toggle.button--selected:hover:enabled.color--light_overlay {
  color: #556474;
  background-color: #ffffff;
}
.styleguide.gynzy.button__toggle.button--selected.color--light_overlay:active:enabled,
.styleguide.gynzy.button__toggle.button--selected:hover:enabled.color--light_overlay:active:enabled {
  background: #f6f6f6;
  border-color: #f6f6f6;
}
.styleguide.gynzy.button__toggle:disabled {
  cursor: default;
  opacity: 0.5;
}
.styleguide.button__round {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 600;
  overflow: hidden;
  text-decoration: none;
  text-indent: 0;
  outline: none;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background-clip: content-box;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  color: white;
  border-radius: 50%;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
  position: relative;
}
.styleguide.button__round.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__round.column {
  flex-direction: column;
}
.styleguide.button__round.end {
  justify-content: flex-end;
}
.styleguide.button__round.start {
  justify-content: flex-start;
}
.styleguide.button__round.flex-center {
  justify-content: center;
}
.styleguide.button__round.between {
  justify-content: space-between;
}
.styleguide.button__round.around {
  justify-content: space-around;
}
.styleguide.button__round.cross-start {
  align-items: flex-start;
}
.styleguide.button__round.cross-end {
  align-items: flex-end;
}
.styleguide.button__round.stretch {
  align-items: stretch;
}
.styleguide.button__round.evenly {
  justify-content: space-evenly;
}
.styleguide.button__round.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__round.wrap {
  flex-wrap: wrap;
}
.styleguide.button__round.grow {
  flex: 1;
}
.styleguide.button__round .flex-half,
.styleguide.button__round .flex-quarter,
.styleguide.button__round .flex-sixth,
.styleguide.button__round .flex-third,
.styleguide.button__round .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__round .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__round .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__round .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__round .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__round .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__round .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__round .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__round .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__round .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__round.audience--teacher {
  border: 1px solid;
}
.styleguide.button__round.audience--teacher.size--small {
  width: 2.08333333rem;
  height: 2.08333333rem;
}
.styleguide.button__round.audience--teacher.size--small .flat__icon {
  width: 1.04166667rem;
  height: 1.04166667rem;
}
.styleguide.button__round.audience--teacher.size--normal {
  width: 3.125rem;
  height: 3.125rem;
}
.styleguide.button__round.audience--teacher.size--normal .flat__icon {
  width: 1.5625rem;
  height: 1.5625rem;
}
.styleguide.button__round.audience--teacher.size--large {
  width: 5rem;
  height: 5rem;
}
.styleguide.button__round.audience--teacher.size--large .flat__icon {
  width: 2.08333333rem;
  height: 2.08333333rem;
}
.styleguide.button__round.audience--teacher.size-full-icon {
  width: 4.16666667rem;
  height: 4.16666667rem;
}
.styleguide.button__round.audience--teacher.size-full-icon .flat__icon {
  width: 4.16666667rem;
  height: 4.16666667rem;
}
.styleguide.button__round.audience--board {
  border: 1px solid;
}
.styleguide.button__round.audience--board.size--small {
  width: 20px;
  height: 20px;
}
.styleguide.button__round.audience--board.size--small .flat__icon {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
}
.styleguide.button__round.audience--board.size--normal {
  width: 30px;
  height: 30px;
}
.styleguide.button__round.audience--board.size--normal .flat__icon {
  top: 9px;
  left: 9px;
  width: 12px;
  height: 12px;
}
.styleguide.button__round.audience--board.size--large {
  width: 40px;
  height: 40px;
}
.styleguide.button__round.audience--board.size--large .flat__icon {
  top: 12px;
  left: 12px;
  width: 16px;
  height: 16px;
}
.styleguide.gynzy.button__round .flat__icon {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  /* .flex .flex-center doesn't do the trick in iOS */
}
.styleguide.gynzy.button__round .flat__icon.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.gynzy.button__round .flat__icon.column {
  flex-direction: column;
}
.styleguide.gynzy.button__round .flat__icon.end {
  justify-content: flex-end;
}
.styleguide.gynzy.button__round .flat__icon.start {
  justify-content: flex-start;
}
.styleguide.gynzy.button__round .flat__icon.flex-center {
  justify-content: center;
}
.styleguide.gynzy.button__round .flat__icon.between {
  justify-content: space-between;
}
.styleguide.gynzy.button__round .flat__icon.around {
  justify-content: space-around;
}
.styleguide.gynzy.button__round .flat__icon.cross-start {
  align-items: flex-start;
}
.styleguide.gynzy.button__round .flat__icon.cross-end {
  align-items: flex-end;
}
.styleguide.gynzy.button__round .flat__icon.stretch {
  align-items: stretch;
}
.styleguide.gynzy.button__round .flat__icon.evenly {
  justify-content: space-evenly;
}
.styleguide.gynzy.button__round .flat__icon.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.gynzy.button__round .flat__icon.wrap {
  flex-wrap: wrap;
}
.styleguide.gynzy.button__round .flat__icon.grow {
  flex: 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-half,
.styleguide.gynzy.button__round .flat__icon .flex-quarter,
.styleguide.gynzy.button__round .flat__icon .flex-sixth,
.styleguide.gynzy.button__round .flat__icon .flex-third,
.styleguide.gynzy.button__round .flat__icon .flex-two-third {
  box-sizing: border-box;
}
.styleguide.gynzy.button__round .flat__icon .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-grow-1 {
  flex: 1 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-grow-2 {
  flex: 2 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-grow-3 {
  flex: 3 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-grow-4 {
  flex: 4 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-grow-5 {
  flex: 5 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-grow-6 {
  flex: 6 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-grow-7 {
  flex: 7 1;
}
.styleguide.gynzy.button__round .flat__icon .flex-grow-8 {
  flex: 8 1;
}
@media all and (-ms-high-contrast: none) {
  .styleguide.gynzy.button__round .flat__icon {
    /*  Hack because margin: 0 auto aligns icon right in ie11 */
    margin: 0;
  }
}
.styleguide.gynzy.button__round.audience--teacher.color--primary {
  background-color: #277cd9;
  border-color: transparent;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary.hover:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--primary:hover:enabled {
  background-color: #4e92ff;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary.active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--primary:active:enabled {
  background-color: #2465ab;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary.active:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--teacher.color--primary:active:enabled .icon--graphics {
  fill: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.7);
}
.styleguide.gynzy.button__round.audience--teacher.color--secondary {
  color: #556474;
  background-color: #e9eaef;
  border-color: #aeb7c2;
}
.styleguide.gynzy.button__round.audience--teacher.color--secondary .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__round.audience--teacher.color--secondary.hover:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--secondary:hover:enabled {
  background-color: #f5f5f8;
}
.styleguide.gynzy.button__round.audience--teacher.color--secondary.active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--secondary:active:enabled {
  background-color: #d1d3de;
  color: rgba(85, 100, 116, 0.7);
}
.styleguide.gynzy.button__round.audience--teacher.color--secondary.active:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--teacher.color--secondary:active:enabled .icon--graphics {
  fill: rgba(85, 100, 116, 0.7);
  color: rgba(85, 100, 116, 0.7);
}
.styleguide.gynzy.button__round.audience--teacher.color--negative {
  background-color: #ed1c24;
  border-color: transparent;
}
.styleguide.gynzy.button__round.audience--teacher.color--negative .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__round.audience--teacher.color--negative.hover:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--negative:hover:enabled {
  background-color: #f04248;
}
.styleguide.gynzy.button__round.audience--teacher.color--negative.active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--negative:active:enabled {
  background-color: #c61017;
}
.styleguide.gynzy.button__round.audience--teacher.color--negative.active:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--teacher.color--negative:active:enabled .icon--graphics {
  fill: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.7);
}
.styleguide.gynzy.button__round.audience--teacher.color--light {
  background: #ffffff;
  border: 1px solid #aeb7c2;
}
.styleguide.gynzy.button__round.audience--teacher.color--light .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.button__round.audience--teacher.color--light.hover:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--light:hover:enabled {
  background-color: #f6f6f6;
}
.styleguide.gynzy.button__round.audience--teacher.color--light.active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--light:active:enabled {
  background-color: #f6f6f6;
  border-color: #aeb7c2;
}
.styleguide.gynzy.button__round.audience--teacher.color--light.active:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--teacher.color--light:active:enabled .icon--graphics {
  fill: #6b7c8e;
  color: #6b7c8e;
}
.styleguide.gynzy.button__round.audience--teacher.color--none {
  background: transparent;
  border: none;
}
.styleguide.gynzy.button__round.audience--teacher.color--none.hover:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--none:hover:enabled {
  background-color: transparent;
}
.styleguide.gynzy.button__round.audience--teacher.color--none.hover:enabled.active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--none:hover:enabled.active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--none.hover:enabled:active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--none:hover:enabled:active:enabled {
  background-color: transparent;
}
.styleguide.gynzy.button__round.audience--teacher.color--none.hover:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--teacher.color--none:hover:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__round.audience--teacher.color--pumpkin {
  background-color: #fa830c;
}
.styleguide.gynzy.button__round.audience--teacher.color--pumpkin.hover:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--pumpkin:hover:enabled {
  background-color: #ff962e;
}
.styleguide.gynzy.button__round.audience--teacher.color--pumpkin.active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--pumpkin:active:enabled {
  background-color: #e1760a;
}
.styleguide.gynzy.button__round.audience--teacher.color--pumpkin .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary_new {
  background-color: #28759f;
  border: none;
  box-shadow: none;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary_new .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary_new.hover:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--primary_new:hover:enabled {
  background-color: #2b8fc5;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary_new.active:enabled,
.styleguide.gynzy.button__round.audience--teacher.color--primary_new:active:enabled {
  background-color: #1f5e7f;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary_new:disabled {
  cursor: default;
  background-color: #a9c8d9;
}
.styleguide.gynzy.button__round.audience--teacher.color--primary_new:disabled .svg__icon img {
  filter: grayscale(1);
  opacity: 0.5;
}
.styleguide.gynzy.button__round.audience--board {
  --button-regular-color: #ffffff;
  --button-regular-background: #277cd9;
  --button-regular-background-hover: #4e92ff;
  --button-regular-background-active: #2465ab;
  --button-regular-icon-active: rgba(255, 255, 255, 0.7);
  background-color: var(--button-regular-background);
}
.styleguide.gynzy.button__round.audience--board .icon--graphics {
  fill: var(--button-regular-color);
  color: var(--button-regular-color);
}
.styleguide.gynzy.button__round.audience--board.hover:enabled,
.styleguide.gynzy.button__round.audience--board:hover:enabled {
  background-color: var(--button-regular-background-hover);
}
.styleguide.gynzy.button__round.audience--board.active:enabled,
.styleguide.gynzy.button__round.audience--board:active:enabled {
  background-color: var(--button-regular-background-active);
}
.styleguide.gynzy.button__round.audience--board.active:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--board:active:enabled .icon--graphics {
  fill: var(--button-regular-icon-active);
  color: var(--button-regular-icon-active);
}
.styleguide.gynzy.button__round.audience--board.color--primary {
  background-color: #f5f5f8;
  border-color: #aeb7c2;
}
.styleguide.gynzy.button__round.audience--board.color--primary .icon--graphics {
  fill: var(--button-round-board-icon);
  color: var(--button-round-board-icon);
}
.styleguide.gynzy.button__round.audience--board.color--primary.hover:enabled,
.styleguide.gynzy.button__round.audience--board.color--primary:hover:enabled {
  background-color: #ffffff;
}
.styleguide.gynzy.button__round.audience--board.color--primary.active:enabled,
.styleguide.gynzy.button__round.audience--board.color--primary:active:enabled {
  background-color: #277cd9;
  border-color: #277cd9;
}
.styleguide.gynzy.button__round.audience--board.color--primary.active:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--board.color--primary:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__round.audience--board.color--primary.stay-active,
.styleguide.gynzy.button__round.audience--board.color--primary.stay-active:hover {
  background-color: #277cd9;
  border-color: #277cd9;
}
.styleguide.gynzy.button__round.audience--board.color--primary.stay-active .icon--graphics,
.styleguide.gynzy.button__round.audience--board.color--primary.stay-active:hover .icon--graphics {
  fill: rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.7);
}
.styleguide.gynzy.button__round.audience--board.color--secondary {
  background-color: #277cd9;
  border-color: transparent;
}
.styleguide.gynzy.button__round.audience--board.color--secondary .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__round.audience--board.color--secondary.hover:enabled,
.styleguide.gynzy.button__round.audience--board.color--secondary:hover:enabled {
  background-color: #4e92ff;
}
.styleguide.gynzy.button__round.audience--board.color--secondary.active:enabled,
.styleguide.gynzy.button__round.audience--board.color--secondary:active:enabled {
  background-color: #2465ab;
}
.styleguide.gynzy.button__round.audience--board.color--secondary.active:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--board.color--secondary:active:enabled .icon--graphics {
  fill: var(--button-regular-icon-active);
  color: var(--button-regular-icon-active);
}
.styleguide.gynzy.button__round.audience--board.color--negative {
  background-color: #f5f5f8;
  border-color: #aeb7c2;
}
.styleguide.gynzy.button__round.audience--board.color--negative .icon--graphics {
  fill: #ed1c24;
  color: #ed1c24;
}
.styleguide.gynzy.button__round.audience--board.color--negative.hover:enabled,
.styleguide.gynzy.button__round.audience--board.color--negative:hover:enabled {
  background-color: #ffffff;
}
.styleguide.gynzy.button__round.audience--board.color--negative.active:enabled,
.styleguide.gynzy.button__round.audience--board.color--negative:active:enabled {
  background-color: #ed1c24;
  border-color: #ed1c24;
}
.styleguide.gynzy.button__round.audience--board.color--negative.active:enabled .icon--graphics,
.styleguide.gynzy.button__round.audience--board.color--negative:active:enabled .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__round.audience--board.color--call_to_action {
  --button-regular-background: #fd8b1d;
  --button-regular-background-hover: #fda045;
  --button-regular-background-active: #e57102;
}
.styleguide.gynzy.button__round.audience--board.color--mariner {
  --button-regular-background: #277cd9;
  --button-regular-background-hover: #4e92ff;
  --button-regular-background-active: #2465ab;
}
.styleguide.gynzy.button__round.audience--board.color--tree-poppy {
  --button-regular-background: #fd8b1d;
  --button-regular-background-hover: #fda045;
  --button-regular-background-active: #e57102;
}
.styleguide.gynzy.button__round.audience--board.color--positive {
  --button-regular-background: #1eaa10;
  --button-regular-background-hover: #25cf14;
  --button-regular-background-active: #167b0c;
}
.styleguide.gynzy.button__round.audience--board.color--purple-heart {
  --button-regular-background: #8c41d9;
  --button-regular-background-hover: #a05fe3;
  --button-regular-background-active: #632a9d;
}
.styleguide.gynzy.button__round.audience--board.color--orchid {
  --button-regular-background: #d941d9;
  --button-regular-background-hover: #e35fe3;
  --button-regular-background-active: #9d2a9d;
}
.styleguide.gynzy.button__round.audience--board.color--wattle {
  --button-regular-background: #fad20c;
  --button-regular-background-hover: #ffdc2e;
  --button-regular-background-active: #a88e0b;
}
.styleguide.gynzy.button__round.audience--board.color--solitude {
  --button-regular-color: #556474;
  --button-regular-background: #e9eaef;
  --button-regular-background-hover: #f5f5f8;
  --button-regular-background-active: #d1d3de;
  --button-regular-icon-active: rgba(85, 100, 116, 0.7);
}
.styleguide.gynzy.button__round.audience--board.color--light {
  --button-regular-background: #ffffff;
  --button-regular-color: #556474;
  --button-regular-background-hover: #f6f6f6;
  --button-regular-background-active: #f6f6f6;
  --button-regular-icon-active: #6b7c8e;
  border: 1px solid #aeb7c2;
}
.styleguide.gynzy.button__round.audience--board.color--primary_new {
  --button-regular-background: #28759f;
  --button-regular-color: #ffffff;
  --button-regular-background-hover: #2b8fc5;
  --button-regular-background-active: #1f5e7f;
  --button-regular-icon-active: #ffffff;
}
.styleguide.gynzy.button__round:disabled {
  cursor: default;
  opacity: 0.5;
}
.styleguide.button__speech {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  text-indent: 0;
  outline: none;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: none;
  background-clip: content-box;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  touch-action: manipulation;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
}
.styleguide.button__speech.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__speech.column {
  flex-direction: column;
}
.styleguide.button__speech.end {
  justify-content: flex-end;
}
.styleguide.button__speech.start {
  justify-content: flex-start;
}
.styleguide.button__speech.flex-center {
  justify-content: center;
}
.styleguide.button__speech.between {
  justify-content: space-between;
}
.styleguide.button__speech.around {
  justify-content: space-around;
}
.styleguide.button__speech.cross-start {
  align-items: flex-start;
}
.styleguide.button__speech.cross-end {
  align-items: flex-end;
}
.styleguide.button__speech.stretch {
  align-items: stretch;
}
.styleguide.button__speech.evenly {
  justify-content: space-evenly;
}
.styleguide.button__speech.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__speech.wrap {
  flex-wrap: wrap;
}
.styleguide.button__speech.grow {
  flex: 1;
}
.styleguide.button__speech .flex-half,
.styleguide.button__speech .flex-quarter,
.styleguide.button__speech .flex-sixth,
.styleguide.button__speech .flex-third,
.styleguide.button__speech .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__speech .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__speech .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__speech .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__speech .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__speech .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__speech .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__speech .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__speech .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__speech .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__speech * {
  touch-action: manipulation;
}
.styleguide.button__speech.display--round:not(.size--small) {
  border-radius: 50%;
}
.styleguide.button__speech.loading .speech__icon {
  animation: rotating 2s linear infinite;
}
@keyframes playingAnim {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
.styleguide.button__speech.playing .speech__icon {
  animation: playingAnim 0.5s linear infinite;
  animation-direction: alternate;
}
.styleguide.button__speech .speech__icon {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
}
.styleguide.button__speech .speech__icon.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__speech .speech__icon.column {
  flex-direction: column;
}
.styleguide.button__speech .speech__icon.end {
  justify-content: flex-end;
}
.styleguide.button__speech .speech__icon.start {
  justify-content: flex-start;
}
.styleguide.button__speech .speech__icon.flex-center {
  justify-content: center;
}
.styleguide.button__speech .speech__icon.between {
  justify-content: space-between;
}
.styleguide.button__speech .speech__icon.around {
  justify-content: space-around;
}
.styleguide.button__speech .speech__icon.cross-start {
  align-items: flex-start;
}
.styleguide.button__speech .speech__icon.cross-end {
  align-items: flex-end;
}
.styleguide.button__speech .speech__icon.stretch {
  align-items: stretch;
}
.styleguide.button__speech .speech__icon.evenly {
  justify-content: space-evenly;
}
.styleguide.button__speech .speech__icon.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__speech .speech__icon.wrap {
  flex-wrap: wrap;
}
.styleguide.button__speech .speech__icon.grow {
  flex: 1;
}
.styleguide.button__speech .speech__icon .flex-half,
.styleguide.button__speech .speech__icon .flex-quarter,
.styleguide.button__speech .speech__icon .flex-sixth,
.styleguide.button__speech .speech__icon .flex-third,
.styleguide.button__speech .speech__icon .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__speech .speech__icon .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__speech .speech__icon .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__speech .speech__icon .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__speech .speech__icon .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__speech .speech__icon .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__speech .speech__icon .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__speech .speech__icon .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__speech .speech__icon .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__speech .speech__icon .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__speech.audience--teacher.size--small,
.styleguide.button__speech.audience--student.size--small {
  width: 1.77rem;
  height: 1.77rem;
}
.styleguide.button__speech.audience--teacher.size--small.display--square,
.styleguide.button__speech.audience--student.size--small.display--square {
  border: 1px solid #d1d3de;
  border-radius: 0.52rem;
}
.styleguide.button__speech.audience--teacher.size--small .speech__icon,
.styleguide.button__speech.audience--student.size--small .speech__icon {
  width: 1.77rem;
  height: 1.77rem;
}
.styleguide.button__speech.audience--teacher.size--normal,
.styleguide.button__speech.audience--student.size--normal {
  width: 5rem;
  height: 5rem;
}
.styleguide.button__speech.audience--teacher.size--normal.display--square,
.styleguide.button__speech.audience--student.size--normal.display--square {
  border: 1px solid #d1d3de;
  border-radius: 0.52rem;
}
.styleguide.button__speech.audience--teacher.size--normal .speech__icon,
.styleguide.button__speech.audience--student.size--normal .speech__icon {
  width: 3rem;
  height: 3rem;
}
.styleguide.button__speech.audience--teacher.size--large,
.styleguide.button__speech.audience--student.size--large {
  width: 6.5rem;
  height: 6.5rem;
}
.styleguide.button__speech.audience--teacher.size--large.display--square,
.styleguide.button__speech.audience--student.size--large.display--square {
  border: 1px solid #d1d3de;
  border-radius: 0.52rem;
}
.styleguide.button__speech.audience--teacher.size--large .speech__icon,
.styleguide.button__speech.audience--student.size--large .speech__icon {
  width: 3.9rem;
  height: 3.9rem;
}
.styleguide.button__speech.audience--teacher.size--extra_large.display--round,
.styleguide.button__speech.audience--student.size--extra_large.display--round {
  width: 10rem;
  height: 10rem;
}
.styleguide.button__speech.audience--teacher.size--extra_large.display--round .speech__icon,
.styleguide.button__speech.audience--student.size--extra_large.display--round .speech__icon {
  width: 6rem;
  height: 6rem;
}
.styleguide.button__speech.audience--board.size--small.display--round {
  width: 17px;
  height: 17px;
}
.styleguide.button__speech.audience--board.size--small.display--square {
  border: 1px solid #d1d3de;
  border-radius: 4px;
  width: 30px;
  height: 30px;
}
.styleguide.button__speech.audience--board.size--small .speech__icon {
  width: 17px;
  height: 17px;
}
.styleguide.button__speech.audience--board.size--normal.display--round {
  width: 35px;
  height: 35px;
}
.styleguide.button__speech.audience--board.size--normal.display--square {
  border: 1px solid #d1d3de;
  border-radius: 4px;
  width: 40px;
  height: 40px;
}
.styleguide.button__speech.audience--board.size--normal .speech__icon {
  top: 9px;
  left: 9px;
  width: 17px;
  height: 17px;
}
.styleguide.button__speech.audience--board.size--large.display--round {
  width: 50px;
  height: 50px;
}
.styleguide.button__speech.audience--board.size--large.display--square {
  border: 1px solid #d1d3de;
  border-radius: 5px;
  width: 50px;
  height: 50px;
}
.styleguide.button__speech.audience--board.size--large .speech__icon {
  top: 17px;
  left: 17px;
  width: 26px;
  height: 26px;
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 2s linear infinite;
}
.styleguide.gynzy.button__speech.display--round:not(.size--small).styleguide.gynzy.button__speech.display--round:not(.color--white).styleguide.gynzy.button__speech.display--round:not(.audience--student) {
  background-color: #e9eaef;
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
}
.styleguide.gynzy.button__speech .speech__icon {
  background-repeat: no-repeat;
  background-size: contain;
}
.styleguide.gynzy.button__speech.color--white:not(.loading) .speech__icon.speed--normal {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-on__white.svg');
}
.styleguide.gynzy.button__speech.color--white:not(.loading) .speech__icon.speed--slow {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-slow__white.svg');
}
.styleguide.gynzy.button__speech.color--white.loading .speech__icon {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/loading-spinner__white.svg');
}
.styleguide.gynzy.button__speech.color--blue:not(.loading) .speech__icon.speed--normal {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-on__blue.svg');
}
.styleguide.gynzy.button__speech.color--blue:not(.loading) .speech__icon.speed--slow {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-slow__blue.svg');
}
.styleguide.gynzy.button__speech.color--blue.loading .speech__icon {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/loading-spinner__blue.svg');
}
.styleguide.gynzy.button__speech.color--red:not(.loading) .speech__icon.speed--normal {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-on__red.svg');
}
.styleguide.gynzy.button__speech.color--red:not(.loading) .speech__icon.speed--slow {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-slow__red.svg');
}
.styleguide.gynzy.button__speech.color--red.loading .speech__icon {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/loading-spinner__red.svg');
}
.styleguide.gynzy.button__speech.color--yellow:not(.loading) .speech__icon.speed--normal {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-on__yellow.svg');
}
.styleguide.gynzy.button__speech.color--yellow:not(.loading) .speech__icon.speed--slow {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-slow__yellow.svg');
}
.styleguide.gynzy.button__speech.color--yellow.loading .speech__icon {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/loading-spinner__yellow.svg');
}
.styleguide.gynzy.button__speech.color--green:not(.loading) .speech__icon.speed--normal {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-on__green.svg');
}
.styleguide.gynzy.button__speech.color--green:not(.loading) .speech__icon.speed--slow {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-slow__green.svg');
}
.styleguide.gynzy.button__speech.color--green.loading .speech__icon {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/loading-spinner__green.svg');
}
.styleguide.gynzy.button__speech.color--orange:not(.loading) .speech__icon.speed--normal {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-on__orange.svg');
}
.styleguide.gynzy.button__speech.color--orange:not(.loading) .speech__icon.speed--slow {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-slow__orange.svg');
}
.styleguide.gynzy.button__speech.color--orange.loading .speech__icon {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/loading-spinner__orange.svg');
}
.styleguide.gynzy.button__speech.color--gray:not(.loading) .speech__icon.speed--normal {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-on__gray.svg');
}
.styleguide.gynzy.button__speech.color--gray:not(.loading) .speech__icon.speed--slow {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/sound-slow__gray.svg');
}
.styleguide.gynzy.button__speech.color--gray.loading .speech__icon {
  background-image: url('../gynzy-styleguide/assets/svg/button-speech/loading-spinner__gray.svg');
}
.styleguide.gynzy.button__speech.hover:not(.color--white):not(.size--small) {
  background-color: #f2f3f6;
}
.styleguide.gynzy.button__speech.active:not(.color--white):not(.size--small) {
  background-color: #f2f3f6;
  box-shadow: none;
}
.styleguide.gynzy.button__speech:disabled {
  cursor: default;
  opacity: 0.5;
}
.styleguide.button__student-label {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  text-indent: 0;
  outline: none;
  border: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-sizing: content-box;
  background: none;
  border-radius: 0.2rem;
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
  color: white;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.2rem;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
}
.styleguide.button__student-label.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__student-label.column {
  flex-direction: column;
}
.styleguide.button__student-label.end {
  justify-content: flex-end;
}
.styleguide.button__student-label.start {
  justify-content: flex-start;
}
.styleguide.button__student-label.flex-center {
  justify-content: center;
}
.styleguide.button__student-label.between {
  justify-content: space-between;
}
.styleguide.button__student-label.around {
  justify-content: space-around;
}
.styleguide.button__student-label.cross-start {
  align-items: flex-start;
}
.styleguide.button__student-label.cross-end {
  align-items: flex-end;
}
.styleguide.button__student-label.stretch {
  align-items: stretch;
}
.styleguide.button__student-label.evenly {
  justify-content: space-evenly;
}
.styleguide.button__student-label.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__student-label.wrap {
  flex-wrap: wrap;
}
.styleguide.button__student-label.grow {
  flex: 1;
}
.styleguide.button__student-label .flex-half,
.styleguide.button__student-label .flex-quarter,
.styleguide.button__student-label .flex-sixth,
.styleguide.button__student-label .flex-third,
.styleguide.button__student-label .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__student-label .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__student-label .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__student-label .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__student-label .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__student-label .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__student-label .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__student-label .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__student-label .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__student-label .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__student-label:disabled {
  cursor: default;
}
.styleguide.button__student-label .flat__icon {
  margin-left: 0.5rem;
  height: 0.6rem;
  width: 0.6rem;
}
.styleguide.button__student-label .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
/**
 * Because the gynzy-colors for 'button-regular' apply to all gynzy-buttons,
 * Therefore we defined the colors in button-base folder.
 */
.styleguide.gynzy.button__student-label {
  background-color: #8c99a8;
}
.styleguide.gynzy.button__student-label.color--midnight {
  background-color: #2a3541;
}
.styleguide.gynzy.button__student-label.color--valencia {
  background-color: #dc2828;
}
.styleguide.gynzy.button__student-label.color--raw-sienna {
  background-color: #d36e09;
}
.styleguide.gynzy.button__student-label.color--wattle {
  background-color: #d3b109;
}
.styleguide.gynzy.button__student-label.color--conifer {
  background-color: #98bb30;
}
.styleguide.gynzy.button__student-label.color--atlantis {
  background-color: #47c12f;
}
.styleguide.gynzy.button__student-label.color--shamrock {
  background-color: #34ad70;
}
.styleguide.gynzy.button__student-label.color--turquoise {
  background-color: #30bbbb;
}
.styleguide.gynzy.button__student-label.color--havelock-blue {
  background-color: #2690c9;
}
.styleguide.gynzy.button__student-label.color--royal-blue {
  background-color: #3452ad;
}
.styleguide.gynzy.button__student-label.color--purple-heart {
  background-color: #772ec2;
}
.styleguide.gynzy.button__student-label.color--orchid {
  background-color: #c22ec2;
}
.styleguide.gynzy.button__student-label.color--cerise {
  background-color: #c12f77;
}
.styleguide.gynzy.button__student-label.color--parnassys {
  background-color: #ed5c82;
}
.styleguide.gynzy.button__student-label.color--smartschool {
  background-color: #ff520e;
}
.styleguide.gynzy.button__student-label.color--basispoort {
  background-color: #282c59;
}
.styleguide.gynzy.button__student-label.color--esis {
  background-color: #2bb60f;
}
.styleguide.gynzy.button__student-label.color--questi {
  background-color: #dddb00;
}
/**
 * Because the layout for button-regular apply to all buttons in first place,
 * Therefore we defined the colors in button-base folder.
 */
.styleguide.button__multi-level {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
}
.styleguide.button__multi-level.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__multi-level.column {
  flex-direction: column;
}
.styleguide.button__multi-level.end {
  justify-content: flex-end;
}
.styleguide.button__multi-level.start {
  justify-content: flex-start;
}
.styleguide.button__multi-level.flex-center {
  justify-content: center;
}
.styleguide.button__multi-level.between {
  justify-content: space-between;
}
.styleguide.button__multi-level.around {
  justify-content: space-around;
}
.styleguide.button__multi-level.cross-start {
  align-items: flex-start;
}
.styleguide.button__multi-level.cross-end {
  align-items: flex-end;
}
.styleguide.button__multi-level.stretch {
  align-items: stretch;
}
.styleguide.button__multi-level.evenly {
  justify-content: space-evenly;
}
.styleguide.button__multi-level.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__multi-level.wrap {
  flex-wrap: wrap;
}
.styleguide.button__multi-level.grow {
  flex: 1;
}
.styleguide.button__multi-level .flex-half,
.styleguide.button__multi-level .flex-quarter,
.styleguide.button__multi-level .flex-sixth,
.styleguide.button__multi-level .flex-third,
.styleguide.button__multi-level .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__multi-level .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__multi-level .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__multi-level .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__multi-level .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__multi-level .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__multi-level .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__multi-level .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__multi-level .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__multi-level .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__multi-level p {
  text-overflow: ellipsis;
  overflow: hidden;
  margin: unset;
  line-height: initial;
}
.styleguide.button__multi-level.wrap--text {
  white-space: normal;
}
.styleguide.button__multi-level.wrap--text p {
  overflow: visible;
  text-overflow: initial;
}
.styleguide.button__multi-level.is--active {
  font-weight: 600;
}
.styleguide.button__multi-level.is--active.has--children .flat__icon {
  margin-left: initial;
}
.styleguide.button__multi-level.is--disabled {
  opacity: 0.5;
  cursor: default;
}
.styleguide.button__multi-level.is--disabled p,
.styleguide.button__multi-level.is--disabled svg {
  opacity: 0.5;
}
.styleguide.button__multi-level.has--ancestors .flat__icon {
  margin-right: 1rem;
}
.styleguide.button__multi-level:not(.has--ancestors).has--children .flat__icon {
  margin-left: auto;
}
.styleguide.button__multi-level.audience--teacher.size--small {
  padding: 0.78rem 1.56rem;
}
.styleguide.button__multi-level.audience--teacher.size--small .flat__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.styleguide.button__multi-level.audience--teacher.size--small .svg__icon {
  width: 1.56rem;
  height: 1.56rem;
  margin-right: 0.6rem;
}
.styleguide.button__multi-level.audience--teacher.size--small .image_icon {
  width: 1.56rem;
  height: 1.56rem;
  margin-right: 0.6rem;
}
.styleguide.button__multi-level.audience--teacher.size--small p {
  font-size: 1.25rem;
}
.styleguide.button__multi-level.audience--teacher.size--normal {
  padding: 1.02rem 2.04rem;
}
.styleguide.button__multi-level.audience--teacher.size--normal .flat__icon {
  width: 1.66666667rem;
  height: 1.66666667rem;
}
.styleguide.button__multi-level.audience--teacher.size--normal .svg__icon {
  width: 2.09rem;
  height: 2.09rem;
  margin-right: 0.8rem;
}
.styleguide.button__multi-level.audience--teacher.size--normal p {
  font-size: 1.66666667rem;
}
.styleguide.button__multi-level.audience--teacher.size--large {
  padding: 1.3rem 2.6rem;
}
.styleguide.button__multi-level.audience--teacher.size--large .flat__icon {
  width: 2.19rem;
  height: 2.19rem;
}
.styleguide.button__multi-level.audience--teacher.size--large .svg__icon {
  width: 2.92rem;
  height: 2.92rem;
  margin-right: 1rem;
}
.styleguide.button__multi-level.audience--teacher.size--large p {
  font-size: 2.19rem;
}
.styleguide.button__multi-level.audience--student.size--small {
  padding: 0 2.6rem;
}
.styleguide.button__multi-level.audience--student.size--small .flat__icon {
  width: 2.19rem;
  height: 2.19rem;
}
.styleguide.button__multi-level.audience--student.size--small .svg__icon {
  width: 2.92rem;
  height: 2.92rem;
  margin-right: 1rem;
}
.styleguide.button__multi-level.audience--student.size--small p {
  font-size: 2.19rem;
}
.styleguide.button__multi-level.audience--student.size--normal {
  padding: 0 3.13rem;
}
.styleguide.button__multi-level.audience--student.size--normal .flat__icon {
  width: 2.9rem;
  height: 2.9rem;
}
.styleguide.button__multi-level.audience--student.size--normal .svg__icon {
  width: 3.91rem;
  height: 3.91rem;
  margin-right: 1.2rem;
}
.styleguide.button__multi-level.audience--student.size--normal p {
  font-size: 2.9rem;
}
.styleguide.button__multi-level.audience--student.size--large {
  padding: 0 3.75rem;
}
.styleguide.button__multi-level.audience--student.size--large .flat__icon {
  width: 3.83rem;
  height: 3.83rem;
}
.styleguide.button__multi-level.audience--student.size--large .svg__icon {
  width: 5.46rem;
  height: 5.46rem;
  margin-right: 1.4rem;
}
.styleguide.button__multi-level.audience--student.size--large p {
  font-size: 3.83rem;
}
.styleguide.gynzy.button__multi-level {
  outline: none;
  border: none;
  border-bottom: 1px solid #e9eaef;
}
.styleguide.gynzy.button__multi-level.color--primary {
  color: #556474;
  background-color: #ffffff;
}
.styleguide.gynzy.button__multi-level.color--primary .flat__icon .icon--graphics {
  fill: #aeb7c2;
  color: #aeb7c2;
}
.styleguide.gynzy.button__multi-level.color--primary.active:enabled:not(.is--active),
.styleguide.gynzy.button__multi-level.color--primary:active:enabled:not(.is--active) {
  background-color: rgba(234, 242, 251, 0.5);
}
.styleguide.gynzy.button__multi-level.color--primary.active:enabled:not(.is--active) .flat__icon .icon--graphics,
.styleguide.gynzy.button__multi-level.color--primary:active:enabled:not(.is--active) .flat__icon .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.button__multi-level.color--light {
  color: #556474;
  background-color: #ffffff;
}
.styleguide.gynzy.button__multi-level.color--light .flat__icon .icon--graphics {
  fill: #e9eaef;
  color: #e9eaef;
}
.styleguide.gynzy.button__multi-level.color--light.is--active {
  background-color: #f6f6f6;
}
.styleguide.gynzy.button__multi-level.color--light.is--active .flat__icon .icon--graphics {
  fill: #6b7c8e;
  color: #6b7c8e;
}
.styleguide.gynzy.button__multi-level.color--light.hover:enabled,
.styleguide.gynzy.button__multi-level.color--light:hover:enabled {
  background: rgba(246, 246, 246, 0.5);
}
.styleguide.gynzy.button__multi-level.color--light.active:enabled,
.styleguide.gynzy.button__multi-level.color--light:active:enabled {
  background-color: #f6f6f6;
}
.styleguide.gynzy.button__multi-level.is--active {
  background-color: #f6f6f6;
}
.styleguide.gynzy.button__multi-level.is--disabled {
  background-color: #ffffff;
}
.styleguide.button__group-label {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  overflow: hidden;
  text-decoration: none;
  text-indent: 0;
  outline: none;
  border: none;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
  color: white;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
}
.styleguide.button__group-label.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__group-label.column {
  flex-direction: column;
}
.styleguide.button__group-label.end {
  justify-content: flex-end;
}
.styleguide.button__group-label.start {
  justify-content: flex-start;
}
.styleguide.button__group-label.flex-center {
  justify-content: center;
}
.styleguide.button__group-label.between {
  justify-content: space-between;
}
.styleguide.button__group-label.around {
  justify-content: space-around;
}
.styleguide.button__group-label.cross-start {
  align-items: flex-start;
}
.styleguide.button__group-label.cross-end {
  align-items: flex-end;
}
.styleguide.button__group-label.stretch {
  align-items: stretch;
}
.styleguide.button__group-label.evenly {
  justify-content: space-evenly;
}
.styleguide.button__group-label.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__group-label.wrap {
  flex-wrap: wrap;
}
.styleguide.button__group-label.grow {
  flex: 1;
}
.styleguide.button__group-label .flex-half,
.styleguide.button__group-label .flex-quarter,
.styleguide.button__group-label .flex-sixth,
.styleguide.button__group-label .flex-third,
.styleguide.button__group-label .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__group-label .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__group-label .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__group-label .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__group-label .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__group-label .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__group-label .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__group-label .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__group-label .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__group-label .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__group-label.size--normal {
  height: 2.08333333rem;
  border-radius: 1.04166667rem;
  padding: 0 0.83333333rem;
}
.styleguide.button__group-label.size--normal .group-icon {
  height: auto;
  width: 1.25rem;
  margin-right: 0.52083333rem;
}
.styleguide.button__group-label.size--large {
  height: 3.125rem;
  border-radius: 1.5625rem;
  padding: 0 0.83333333rem;
}
.styleguide.button__group-label.size--large .group-icon {
  height: auto;
  width: 1.66666667rem;
  margin-right: 0.52083333rem;
}
.styleguide.button__group-label p {
  max-width: 14.58333333rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.97916667rem;
}
.styleguide.button__group-label.collection {
  color: #277cd9;
  background-color: white;
  border: 1px solid #277cd9;
}
.styleguide.button__group-label.collection .group-icon {
  display: none;
}
.styleguide.button__group-label .flat__icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.52083333rem;
}
.styleguide.button__group-label .flat__icon.disabled {
  opacity: 0.5;
}
.styleguide.button__group-label .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.button__group-label.clickable:not(:disabled) {
  cursor: pointer;
}
.styleguide.button__group-label.clickable:not(:disabled) .flat__icon {
  cursor: pointer;
}
.styleguide.gynzy.button__group-label.color--crimson {
  background-color: #dc2828;
}
.styleguide.gynzy.button__group-label.color--pumpkin {
  background-color: #d36e09;
}
.styleguide.gynzy.button__group-label.color--lemon {
  background-color: #d3b109;
}
.styleguide.gynzy.button__group-label.color--pear {
  background-color: #98bb30;
}
.styleguide.gynzy.button__group-label.color--mantis {
  background-color: #47c12f;
}
.styleguide.gynzy.button__group-label.color--emerald {
  background-color: #34ad70;
}
.styleguide.gynzy.button__group-label.color--caribbean {
  background-color: #30bbbb;
}
.styleguide.gynzy.button__group-label.color--sky {
  background-color: #2690c9;
}
.styleguide.gynzy.button__group-label.color--indigo {
  background-color: #3452ad;
}
.styleguide.gynzy.button__group-label.color--lavender {
  background-color: #772ec2;
}
.styleguide.gynzy.button__group-label.color--fuchsia {
  background-color: #c22ec2;
}
.styleguide.gynzy.button__group-label.color--cranberry {
  background-color: #c12f77;
}
.styleguide.gynzy.button__group-label.color--parnassys {
  background-color: #ed5c82;
}
.styleguide.gynzy.button__group-label.color--smartschool {
  background-color: #ff520e;
}
.styleguide.gynzy.button__group-label.color--basispoort {
  background-color: #282c59;
}
.styleguide.gynzy.button__group-label.color--esis {
  background-color: #2bb60f;
}
.styleguide.gynzy.button__group-label.color--questi {
  background-color: #dddb00;
}
.styleguide.gynzy.button__group-label.color--primary {
  background-color: #2690c9;
}
.styleguide.gynzy.button__group-label .group-icon.group-icon--white {
  filter: var(--color-filter-white);
}
/**
 * The layout for button-square is almost identical to button-regular.
 * Only different is the width of the buttons.
 */
.styleguide.button__icon__label {
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  user-select: none;
  white-space: nowrap;
  background-clip: padding-box;
  cursor: pointer;
  transition-property: background-color, box-shadow, color, opacity;
  transition-duration: 0.15s;
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
}
.styleguide.button__icon__label.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.button__icon__label.column {
  flex-direction: column;
}
.styleguide.button__icon__label.end {
  justify-content: flex-end;
}
.styleguide.button__icon__label.start {
  justify-content: flex-start;
}
.styleguide.button__icon__label.flex-center {
  justify-content: center;
}
.styleguide.button__icon__label.between {
  justify-content: space-between;
}
.styleguide.button__icon__label.around {
  justify-content: space-around;
}
.styleguide.button__icon__label.cross-start {
  align-items: flex-start;
}
.styleguide.button__icon__label.cross-end {
  align-items: flex-end;
}
.styleguide.button__icon__label.stretch {
  align-items: stretch;
}
.styleguide.button__icon__label.evenly {
  justify-content: space-evenly;
}
.styleguide.button__icon__label.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.button__icon__label.wrap {
  flex-wrap: wrap;
}
.styleguide.button__icon__label.grow {
  flex: 1;
}
.styleguide.button__icon__label .flex-half,
.styleguide.button__icon__label .flex-quarter,
.styleguide.button__icon__label .flex-sixth,
.styleguide.button__icon__label .flex-third,
.styleguide.button__icon__label .flex-two-third {
  box-sizing: border-box;
}
.styleguide.button__icon__label .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.button__icon__label .flex-grow-1 {
  flex: 1 1;
}
.styleguide.button__icon__label .flex-grow-2 {
  flex: 2 1;
}
.styleguide.button__icon__label .flex-grow-3 {
  flex: 3 1;
}
.styleguide.button__icon__label .flex-grow-4 {
  flex: 4 1;
}
.styleguide.button__icon__label .flex-grow-5 {
  flex: 5 1;
}
.styleguide.button__icon__label .flex-grow-6 {
  flex: 6 1;
}
.styleguide.button__icon__label .flex-grow-7 {
  flex: 7 1;
}
.styleguide.button__icon__label .flex-grow-8 {
  flex: 8 1;
}
.styleguide.button__icon__label.max--width {
  width: 100%;
}
.styleguide.button__icon__label.orientation--column {
  flex-direction: column;
}
.styleguide.button__icon__label.orientation--column p {
  margin: 0.6rem 0 0;
}
.styleguide.button__icon__label a {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  margin: 0 0 0 0.6rem;
}
.styleguide.button__icon__label.audience--teacher.size--small a {
  font-size: 1.25rem;
}
.styleguide.button__icon__label.audience--teacher.size--small .svg__icon {
  width: 1.56rem;
  height: 1.56rem;
}
.styleguide.button__icon__label.audience--teacher.size--small.orientation--column .svg__icon {
  width: 2.09rem;
  height: 2.09rem;
}
.styleguide.button__icon__label.audience--teacher.size--normal a {
  font-size: 1.66666667rem;
}
.styleguide.button__icon__label.audience--teacher.size--normal .svg__icon {
  width: 2.09rem;
  height: 2.09rem;
}
.styleguide.button__icon__label.audience--teacher.size--normal.orientation--column .svg__icon {
  width: 2.92rem;
  height: 2.92rem;
}
.styleguide.button__icon__label.audience--teacher.size--large a {
  font-size: 2.19rem;
}
.styleguide.button__icon__label.audience--teacher.size--large .svg__icon {
  width: 2.92rem;
  height: 2.92rem;
}
.styleguide.button__icon__label.audience--teacher.size--large.orientation--column .svg__icon {
  width: 3.91rem;
  height: 3.91rem;
}
.styleguide.button__icon__label.audience--student.size--small a {
  font-size: 2.19rem;
}
.styleguide.button__icon__label.audience--student.size--small .svg__icon {
  width: 2.92rem;
  height: 2.92rem;
}
.styleguide.button__icon__label.audience--student.size--small.orientation--column .svg__icon {
  width: 3.91rem;
  height: 3.91rem;
}
.styleguide.button__icon__label.audience--student.size--normal a {
  font-size: 2.9rem;
}
.styleguide.button__icon__label.audience--student.size--normal .svg__icon {
  width: 3.91rem;
  height: 3.91rem;
}
.styleguide.button__icon__label.audience--student.size--normal.orientation--column .svg__icon {
  width: 5.46rem;
  height: 5.46rem;
}
.styleguide.button__icon__label.audience--student.size--large a {
  font-size: 3.83rem;
}
.styleguide.button__icon__label.audience--student.size--large .svg__icon {
  width: 5.46rem;
  height: 5.46rem;
}
.styleguide.button__icon__label.audience--student.size--large.orientation--column .svg__icon {
  width: 7.01rem;
  height: 7.01rem;
}
.styleguide.gynzy.button__icon__label {
  background-color: transparent;
}
.styleguide.gynzy.button__icon__label.color--white .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.button__icon__label.color--white:hover:enabled .icon--graphics {
  fill: #d1d3de;
  color: #d1d3de;
}
.styleguide.gynzy.button__icon__label.color--black .icon--graphics {
  fill: #3f4c5a;
  color: #3f4c5a;
}
.styleguide.gynzy.button__icon__label.color--black:hover:enabled .icon--graphics {
  fill: #6b7c8e;
  color: #6b7c8e;
}
.styleguide.gynzy.button__icon__label.color--blue .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.button__icon__label.color--blue:hover:enabled .icon--graphics {
  fill: #4e92ff;
  color: #4e92ff;
}
.styleguide.gynzy.button__icon__label:disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(1);
}
.styleguide.gynzy.button__icon__label:hover:enabled .flat__icon .icon--container svg path {
  fill: #4e92ff;
}
.button-color {
  cursor: pointer;
}
.button-color.disabled {
  opacity: 0.5;
  filter: grayscale(1);
  cursor: default;
}
.button-color.extra-large {
  width: 3.54166667rem;
  height: 3.54166667rem;
  margin: 0.3125rem;
}
.button-color.large {
  width: 3.125rem;
  height: 3.125rem;
  margin: 0.625rem;
}
.button-color.normal {
  width: 2.70833333rem;
  height: 2.70833333rem;
  margin: 0.83333333rem;
}
.button-color.small {
  width: 2.29166667rem;
  height: 2.29166667rem;
  margin: 1.04166667rem;
}
.button-color .hover {
  display: none;
}
.button-color:hover .hover {
  display: block;
}
a.text-button {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 0.83333333rem;
  cursor: pointer;
  color: #1f5e7f;
  font-size: 1.66666667rem;
  font-weight: 600;
  line-height: 2.5rem;
  user-select: none;
  padding: 0.83333333rem 1.25rem;
  border-radius: 0.83333333rem;
}
a.text-button .flat__icon {
  flex-shrink: 0;
  width: 1.66666667rem;
  height: 1.66666667rem;
}
a.text-button .flat__icon .icon--graphics {
  fill: #1f5e7f;
  color: #1f5e7f;
}
a.text-button:hover {
  background-color: #d4eefc;
  color: #1f5e7f;
}
a.text-button:active {
  background-color: #b7e3fa;
  color: #1f5e7f;
}
.segmented-button {
  display: flex;
  width: 100%;
  cursor: pointer;
  padding-right: 0.10416667rem;
}
.segmented-button__segment {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  gap: 0.41666667rem;
  height: 3.33333333rem;
  padding: 0 0.83333333rem;
  margin-right: -0.10416667rem;
  border: 0.10416667rem solid #1f5e7f;
  background-color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.875rem;
  color: #1f5e7f;
  overflow: clip;
  box-sizing: border-box;
}
.segmented-button__segment--first {
  border-top-left-radius: 26.66666667rem;
  border-bottom-left-radius: 26.66666667rem;
}
.segmented-button__segment--last {
  border-top-right-radius: 26.66666667rem;
  border-bottom-right-radius: 26.66666667rem;
}
@media (hover: hover) and (pointer: fine) {
  .segmented-button__segment:hover:not(.segmented-button__segment--selected) {
    background-color: #e9f5fd;
  }
}
.segmented-button__segment:active:not(.segmented-button__segment--selected) {
  background-color: #d4eefc;
}
.segmented-button__segment--selected {
  background-color: #d4eefc;
  border-width: 0.20833333rem;
  font-weight: 600;
}
.segmented-button__segment .svg__icon {
  width: 1.66666667rem;
  height: 1.66666667rem;
}
.segmented-button__label {
  white-space: nowrap;
}
.styleguide.scroll-indicator {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5rem;
  background-color: #ffffff;
  cursor: pointer;
  transition: 0.25s;
}
.styleguide.scroll-indicator .styleguide.flat__icon {
  width: 1.66666667rem;
  height: 1.66666667rem;
}
.styleguide.scroll-indicator .styleguide.flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.scroll-indicator:hover .styleguide.flat__icon .icon--graphics {
  fill: #6b7c8e;
  color: #6b7c8e;
}
.styleguide.scroll-indicator:active .styleguide.flat__icon .icon--graphics {
  fill: #3f4c5a;
  color: #3f4c5a;
}
.styleguide.scroll-indicator.up {
  top: 0;
  border-top-left-radius: 0.83333333rem;
  border-top-right-radius: 0.83333333rem;
}
.styleguide.scroll-indicator.up::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: calc(100% - 48 * 0.10416667rem);
  border-bottom: 1px solid #aeb7c2;
}
.styleguide.scroll-indicator.down {
  bottom: 0;
  border-bottom-left-radius: 0.83333333rem;
  border-bottom-right-radius: 0.83333333rem;
}
.styleguide.scroll-indicator.down::before {
  content: '';
  position: absolute;
  top: 0;
  width: calc(100% - 48 * 0.10416667rem);
  border-top: 1px solid #aeb7c2;
}
.styleguide.scroll-indicator.hidden {
  visibility: hidden;
  opacity: 0;
}
/**
 * External file
 **/
.external-file {
  display: flex;
  padding: 1rem 1.5rem;
  align-items: center;
  margin: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.15s;
  background-color: var(--color-aqua-haze);
}
.external-file .file-icon {
  margin-right: 1rem;
}
.external-file .file-icon .flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.external-file.has-link {
  cursor: pointer;
}
.external-file .file-link {
  color: #556474;
}
.external-file .file-link a {
  font-size: 1.66666667rem;
  line-height: 1.66666667rem;
  font-weight: 600;
  color: var(--color-mariner);
  text-decoration: none;
}
.external-file .file-name {
  font-size: 1.66666667rem;
  font-weight: 600;
}
.external-file:hover .file-link a {
  color: var(--color-mariner-light);
  text-decoration: underline;
}
.external-file:active .file-link a {
  color: var(--color-mariner-dark);
}
/**
 * Document file
 **/
.document-file {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 0.83333333rem;
  margin-top: 0.83333333rem;
  border-radius: 0.41666667rem;
  cursor: pointer;
}
.document-file:hover {
  background-color: #f5f5f8;
}
.document-file:active {
  background-color: #e9eaef;
}
.document-file:last-of-type {
  margin-bottom: 0;
}
.document-file .document-icon .flat__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1.25rem;
}
.document-file .document-icon .flat__icon .icon--container svg {
  position: relative;
}
.document-file .document-link a {
  font-size: 1.66666667rem;
  line-height: 150%;
  font-weight: 600;
  color: #556474;
}
.document-file.document--pdf .flat__icon .icon--graphics {
  fill: #e64545;
  color: #e64545;
}
.document-file.document--word .flat__icon .icon--graphics {
  fill: #38a4de;
  color: #38a4de;
}
.document-file.document--spreadsheet .flat__icon .icon--graphics {
  fill: #59d640;
  color: #59d640;
}
.document-file.document--website .flat__icon .icon--graphics {
  fill: #8c41d9;
  color: #8c41d9;
}
/**
 * Callout
 **/
.styleguide.callout.ember-popover {
  background: white;
  border-color: #d1d3de;
  color: #556474;
  z-index: 100;
}
.styleguide.callout.ember-popover > .ember-popover-arrow {
  background-image: url('../gynzy-styleguide/assets/svg/callout-arrow.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0;
  margin: 0;
}
.styleguide.callout.ember-popover[x-placement^='left'] > .ember-popover-arrow {
  transform: rotate(-90deg);
}
.styleguide.callout.ember-popover[x-placement^='right'] > .ember-popover-arrow {
  transform: rotate(90deg);
}
.styleguide.callout.ember-popover[x-placement^='bottom'] > .ember-popover-arrow {
  transform: rotate(180deg);
}
.styleguide.callout.audience--teacher.ember-popover {
  border-radius: 0.625rem;
  padding: 1.66666667rem;
  font-size: 1.25rem;
}
.styleguide.callout.audience--teacher.ember-popover > .ember-popover-arrow {
  width: 2.29166667rem;
  height: 1.35416667rem;
}
.styleguide.callout.audience--teacher.ember-popover[x-placement^='left'] > .ember-popover-arrow {
  right: -1.66666667rem;
}
.styleguide.callout.audience--teacher.ember-popover[x-placement^='right'] > .ember-popover-arrow {
  left: -1.66666667rem;
}
.styleguide.callout.audience--teacher.ember-popover[x-placement^='top'] > .ember-popover-arrow {
  bottom: -1.25rem;
}
.styleguide.callout.audience--teacher.ember-popover[x-placement^='bottom'] > .ember-popover-arrow {
  top: -1.25rem;
}
.styleguide.callout.audience--teacher.no--padding.ember-popover {
  padding: 0;
}
.styleguide.callout.callout--share.ember-popover {
  border: 0;
  border-radius: 2.08333333rem;
  box-shadow: var(--elevation-2);
  padding: 0.83333333rem;
}
.styleguide.callout.callout--share.ember-popover > .ember-popover-arrow {
  display: none;
}
.styleguide.callout.audience--teacher.no-animated-margin.ember-popover {
  transition: opacity ease-out;
  transition-duration: 200ms;
}
/**
 * Icons
 **/
.styleguide.flat__icon {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
}
.styleguide.flat__icon.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.flat__icon.column {
  flex-direction: column;
}
.styleguide.flat__icon.end {
  justify-content: flex-end;
}
.styleguide.flat__icon.start {
  justify-content: flex-start;
}
.styleguide.flat__icon.flex-center {
  justify-content: center;
}
.styleguide.flat__icon.between {
  justify-content: space-between;
}
.styleguide.flat__icon.around {
  justify-content: space-around;
}
.styleguide.flat__icon.cross-start {
  align-items: flex-start;
}
.styleguide.flat__icon.cross-end {
  align-items: flex-end;
}
.styleguide.flat__icon.stretch {
  align-items: stretch;
}
.styleguide.flat__icon.evenly {
  justify-content: space-evenly;
}
.styleguide.flat__icon.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.flat__icon.wrap {
  flex-wrap: wrap;
}
.styleguide.flat__icon.grow {
  flex: 1;
}
.styleguide.flat__icon .flex-half,
.styleguide.flat__icon .flex-quarter,
.styleguide.flat__icon .flex-sixth,
.styleguide.flat__icon .flex-third,
.styleguide.flat__icon .flex-two-third {
  box-sizing: border-box;
}
.styleguide.flat__icon .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.flat__icon .flex-grow-1 {
  flex: 1 1;
}
.styleguide.flat__icon .flex-grow-2 {
  flex: 2 1;
}
.styleguide.flat__icon .flex-grow-3 {
  flex: 3 1;
}
.styleguide.flat__icon .flex-grow-4 {
  flex: 4 1;
}
.styleguide.flat__icon .flex-grow-5 {
  flex: 5 1;
}
.styleguide.flat__icon .flex-grow-6 {
  flex: 6 1;
}
.styleguide.flat__icon .flex-grow-7 {
  flex: 7 1;
}
.styleguide.flat__icon .flex-grow-8 {
  flex: 8 1;
}
.styleguide.flat__icon .icon--container {
  position: relative;
  width: inherit;
  height: inherit;
}
.styleguide.flat__icon .icon--container svg {
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
}
.styleguide.flat__icon .icon--graphics {
  fill: #000;
  color: #000;
}
.styleguide.flat__icon.icon--clickable {
  cursor: pointer;
}
.styleguide.flat__icon.hide--icon {
  display: none;
}
.styleguide.svg__icon {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
}
.styleguide.svg__icon.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.svg__icon.column {
  flex-direction: column;
}
.styleguide.svg__icon.end {
  justify-content: flex-end;
}
.styleguide.svg__icon.start {
  justify-content: flex-start;
}
.styleguide.svg__icon.flex-center {
  justify-content: center;
}
.styleguide.svg__icon.between {
  justify-content: space-between;
}
.styleguide.svg__icon.around {
  justify-content: space-around;
}
.styleguide.svg__icon.cross-start {
  align-items: flex-start;
}
.styleguide.svg__icon.cross-end {
  align-items: flex-end;
}
.styleguide.svg__icon.stretch {
  align-items: stretch;
}
.styleguide.svg__icon.evenly {
  justify-content: space-evenly;
}
.styleguide.svg__icon.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.svg__icon.wrap {
  flex-wrap: wrap;
}
.styleguide.svg__icon.grow {
  flex: 1;
}
.styleguide.svg__icon .flex-half,
.styleguide.svg__icon .flex-quarter,
.styleguide.svg__icon .flex-sixth,
.styleguide.svg__icon .flex-third,
.styleguide.svg__icon .flex-two-third {
  box-sizing: border-box;
}
.styleguide.svg__icon .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.svg__icon .flex-grow-1 {
  flex: 1 1;
}
.styleguide.svg__icon .flex-grow-2 {
  flex: 2 1;
}
.styleguide.svg__icon .flex-grow-3 {
  flex: 3 1;
}
.styleguide.svg__icon .flex-grow-4 {
  flex: 4 1;
}
.styleguide.svg__icon .flex-grow-5 {
  flex: 5 1;
}
.styleguide.svg__icon .flex-grow-6 {
  flex: 6 1;
}
.styleguide.svg__icon .flex-grow-7 {
  flex: 7 1;
}
.styleguide.svg__icon .flex-grow-8 {
  flex: 8 1;
}
.styleguide.svg__icon img {
  width: inherit;
  height: inherit;
}
.styleguide.svg__icon.hide--icon {
  display: none;
}
/**
 * Input-fields
 * Import in correct order, first input-regular!
 **/
.styleguide.gynzy.input__field__default {
  border-color: #d1d3de;
  color: #2a3541;
  /* WebKit, Blink, Edge */
  /* Mozilla Firefox 19+ */
  /* Internet Explorer 10-11 */
  /* Microsoft Edge */
}
.styleguide.gynzy.input__field__default::placeholder {
  color: #8c99a8;
}
.styleguide.gynzy.input__field__default::placeholder::-moz-placeholder {
  color: #8c99a8;
  opacity: 1;
}
.styleguide.gynzy.input__field__default::placeholder:-ms-input-placeholder {
  color: #8c99a8;
}
.styleguide.gynzy.input__field__default::placeholder::-ms-input-placeholder {
  color: #8c99a8;
}
.styleguide.gynzy.input__field__default:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 9999px white;
}
.styleguide.gynzy.input__field__default:disabled {
  opacity: 0.5;
  cursor: default;
}
.styleguide.gynzy.input__field__default:focus {
  border: 1px solid #277cd9;
}
.styleguide.gynzy.input__field__default.state--correct {
  color: #1eaa10;
  border: 1px solid #1eaa10;
}
.styleguide.gynzy.input__field__default.state--wrong {
  color: #ed1c24;
  border: 1px solid #ed1c24;
}
.styleguide.gynzy.input__field__default.readonly {
  background: #f5f5f8;
}
.styleguide.input__field__default {
  width: 100%;
  margin: 0;
  outline: none;
  box-sizing: border-box;
  border: 1px solid;
  -webkit-appearance: none;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  box-shadow: none;
  background-image: none;
}
.styleguide.input__field__default.audience--student,
.styleguide.input__field__default.audience--teacher {
  width: 100%;
  margin: 0;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  font-style: normal;
  font-weight: 400;
  box-shadow: none;
  background-image: none;
  font-family: 'Open Sans', sans-serif;
}
.styleguide.input__field__default.audience--student.size--small,
.styleguide.input__field__default.audience--teacher.size--small {
  height: 3.13rem;
  font-size: 1.25rem;
  border-radius: 0.42rem;
  padding: 0 0.94rem;
}
.styleguide.input__field__default.audience--student.size--small.state--correct.validation--icons,
.styleguide.input__field__default.audience--teacher.size--small.state--correct.validation--icons,
.styleguide.input__field__default.audience--student.size--small.state--wrong.validation--icons,
.styleguide.input__field__default.audience--teacher.size--small.state--wrong.validation--icons {
  padding-right: 3.13rem;
  background-position: 97.81% center;
  background-size: 1.25rem 1.25rem;
}
.styleguide.input__field__default.audience--student.size--normal,
.styleguide.input__field__default.audience--teacher.size--normal {
  height: 4.17rem;
  font-size: 1.66rem;
  border-radius: 0.52rem;
  padding: 0 1.25rem;
}
.styleguide.input__field__default.audience--student.size--normal.state--correct.validation--icons,
.styleguide.input__field__default.audience--teacher.size--normal.state--correct.validation--icons,
.styleguide.input__field__default.audience--student.size--normal.state--wrong.validation--icons,
.styleguide.input__field__default.audience--teacher.size--normal.state--wrong.validation--icons {
  padding-right: 4.17rem;
  background-position: 97.08% center;
  background-size: 1.67rem 1.67rem;
}
.styleguide.input__field__default.audience--student.size--large,
.styleguide.input__field__default.audience--teacher.size--large {
  height: 5.21rem;
  font-size: 2.19rem;
  border-radius: 0.62rem;
  padding: 0 1.56rem;
}
.styleguide.input__field__default.audience--student.size--large.state--correct.validation--icons,
.styleguide.input__field__default.audience--teacher.size--large.state--correct.validation--icons,
.styleguide.input__field__default.audience--student.size--large.state--wrong.validation--icons,
.styleguide.input__field__default.audience--teacher.size--large.state--wrong.validation--icons {
  padding-right: 5.2rem;
  background-position: 96.36% center;
  background-size: 2.08rem 2.08rem;
}
.styleguide.input__field__default.audience--board.size--small {
  height: 30px;
  font-size: 12px;
  border-radius: 4px;
  padding: 0 9px;
}
.styleguide.input__field__default.audience--board.size--small.state--correct.validation--icons,
.styleguide.input__field__default.audience--board.size--small.state--wrong.validation--icons {
  padding-right: 30px;
  background-position: 79% center;
  background-size: 12px 12px;
}
.styleguide.input__field__default.audience--board.size--normal {
  height: 40px;
  font-size: 16px;
  border-radius: 5px;
  padding: 0 12px;
}
.styleguide.input__field__default.audience--board.size--normal.state--correct.validation--icons,
.styleguide.input__field__default.audience--board.size--normal.state--wrong.validation--icons {
  padding-right: 40px;
  background-position: 72% center;
  background-size: 16px 16px;
}
.styleguide.input__field__default.audience--board.size--large {
  height: 6.66666667rem;
  font-size: 3.33333333rem;
  border-radius: 0.625rem;
  padding: 0 1.66666667rem;
}
.styleguide.input__field__default.audience--board.size--large.state--correct.validation--icons,
.styleguide.input__field__default.audience--board.size--large.state--wrong.validation--icons {
  padding-right: 51px;
  background-position: 64% center;
  background-size: 21px 21px;
}
.styleguide.input__field__default::-ms-clear {
  display: none;
}
.styleguide.input__field__default::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.styleguide.input__field__default.state--correct.validation--icons {
  background: url('../gynzy-styleguide/assets/svg/input-field/valid.svg') no-repeat;
}
.styleguide.input__field__default.state--wrong.validation--icons {
  background: url('../gynzy-styleguide/assets/svg/input-field/invalid.svg') no-repeat;
}
.styleguide.input__field__label-container {
  text-align: left;
}
.styleguide.input__field__label-container.audience--student.size--small .input-field__label,
.styleguide.input__field__label-container.audience--teacher.size--small .input-field__label {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 2.4rem;
}
.styleguide.input__field__label-container.audience--student.size--normal .input-field__label,
.styleguide.input__field__label-container.audience--teacher.size--normal .input-field__label {
  font-size: 1.66rem;
  line-height: 3rem;
}
.styleguide.input__field__label-container.audience--student.size--large .input-field__label,
.styleguide.input__field__label-container.audience--teacher.size--large .input-field__label {
  font-size: 2.19rem;
  line-height: 3.8rem;
}
.styleguide.input__field__label-container.audience--board.size--small {
  font-size: 12px;
}
.styleguide.input__field__label-container.audience--board.size--normal {
  font-size: 16px;
}
.styleguide.input__field__label-container .input-field__label {
  color: #556474;
}
.styleguide.input__field__label-container .input-field__error-message {
  text-align: right;
  float: right;
  font-size: 1.25rem;
  line-height: 12px;
  margin-top: 4px;
  color: red;
  word-break: break-word;
}
/**
* Inputs
**/
.styleguide.input__checkbox {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
}
.styleguide.input__checkbox.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.input__checkbox.column {
  flex-direction: column;
}
.styleguide.input__checkbox.end {
  justify-content: flex-end;
}
.styleguide.input__checkbox.start {
  justify-content: flex-start;
}
.styleguide.input__checkbox.flex-center {
  justify-content: center;
}
.styleguide.input__checkbox.between {
  justify-content: space-between;
}
.styleguide.input__checkbox.around {
  justify-content: space-around;
}
.styleguide.input__checkbox.cross-start {
  align-items: flex-start;
}
.styleguide.input__checkbox.cross-end {
  align-items: flex-end;
}
.styleguide.input__checkbox.stretch {
  align-items: stretch;
}
.styleguide.input__checkbox.evenly {
  justify-content: space-evenly;
}
.styleguide.input__checkbox.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.input__checkbox.wrap {
  flex-wrap: wrap;
}
.styleguide.input__checkbox.grow {
  flex: 1;
}
.styleguide.input__checkbox .flex-half,
.styleguide.input__checkbox .flex-quarter,
.styleguide.input__checkbox .flex-sixth,
.styleguide.input__checkbox .flex-third,
.styleguide.input__checkbox .flex-two-third {
  box-sizing: border-box;
}
.styleguide.input__checkbox .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.input__checkbox .flex-grow-1 {
  flex: 1 1;
}
.styleguide.input__checkbox .flex-grow-2 {
  flex: 2 1;
}
.styleguide.input__checkbox .flex-grow-3 {
  flex: 3 1;
}
.styleguide.input__checkbox .flex-grow-4 {
  flex: 4 1;
}
.styleguide.input__checkbox .flex-grow-5 {
  flex: 5 1;
}
.styleguide.input__checkbox .flex-grow-6 {
  flex: 6 1;
}
.styleguide.input__checkbox .flex-grow-7 {
  flex: 7 1;
}
.styleguide.input__checkbox .flex-grow-8 {
  flex: 8 1;
}
.styleguide.input__checkbox .svg--container {
  cursor: pointer;
  border: 1px solid;
}
.styleguide.input__checkbox .input--label {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
  text-indent: 0;
  user-select: none;
}
.styleguide.input__checkbox .input--label.hidden {
  display: none;
}
.styleguide.input__checkbox.input--disabled {
  opacity: 0.5;
}
.styleguide.input__checkbox.input--disabled .input--label,
.styleguide.input__checkbox.input--disabled .svg--container {
  cursor: auto;
}
.styleguide.input__checkbox.size--small .svg--container {
  width: 1.56rem;
  min-width: 1.56rem;
  height: 1.56rem;
  line-height: 1.56rem;
  border-radius: 0.31rem;
}
.styleguide.input__checkbox.size--small .input--label {
  padding-left: 0.73rem;
  font-size: 1.25rem;
  line-height: 1.56rem;
}
.styleguide.input__checkbox.size--normal .svg--container {
  width: 2.08rem;
  min-width: 2.08rem;
  height: 2.08rem;
  line-height: 2.08rem;
  border-radius: 0.42rem;
}
.styleguide.input__checkbox.size--normal .input--label {
  padding-left: 1.25rem;
  font-size: 1.45833333rem;
  line-height: 2.08rem;
}
.styleguide.input__checkbox.size--large .svg--container {
  width: 2.6rem;
  min-width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
  border-radius: 0.52rem;
}
.styleguide.input__checkbox.size--large .input--label {
  padding-left: 1.56rem;
  font-size: 1.88rem;
  line-height: 2.5rem;
}
.styleguide.gynzy.input__checkbox .svg--container {
  border-color: #aeb7c2;
}
.styleguide.gynzy.input__checkbox .svg--container #checkbox_outside {
  fill: #ffffff;
}
.styleguide.gynzy.input__checkbox .svg--container #checkbox_inside {
  fill: #f6f6f6;
}
.styleguide.gynzy.input__checkbox .svg--container #checkmark,
.styleguide.gynzy.input__checkbox .svg--container #indeterminate {
  opacity: 0;
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.input__checkbox .input--label {
  color: #556474;
}
.styleguide.gynzy.input__checkbox:not(.input--selected):not(.input--indeterminate):not(.input--disabled).hover #checkbox_inside,
.styleguide.gynzy.input__checkbox:not(.input--selected):not(.input--indeterminate):not(.input--disabled):hover #checkbox_inside {
  fill: #dfecfa;
}
.styleguide.gynzy.input__checkbox.input--selected .svg--container,
.styleguide.gynzy.input__checkbox.input--indeterminate .svg--container {
  background-color: #28759f;
  border-color: #28759f;
}
.styleguide.gynzy.input__checkbox.input--selected .svg--container #checkbox_inside,
.styleguide.gynzy.input__checkbox.input--indeterminate .svg--container #checkbox_inside,
.styleguide.gynzy.input__checkbox.input--selected .svg--container #checkbox_outside,
.styleguide.gynzy.input__checkbox.input--indeterminate .svg--container #checkbox_outside {
  fill: #28759f;
}
.styleguide.gynzy.input__checkbox.input--selected #checkmark {
  opacity: 1;
}
.styleguide.gynzy.input__checkbox.input--indeterminate #indeterminate {
  opacity: 1;
}
.styleguide.input__radio {
  display: flex;
  text-align: left;
}
.styleguide.input__radio .svg--container {
  cursor: pointer;
  border: 1px solid;
  border-radius: 50%;
}
.styleguide.input__radio .input--label {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
  text-indent: 0;
  user-select: none;
}
.styleguide.input__radio .input--label.hidden {
  display: none;
}
.styleguide.input__radio.input--disabled {
  opacity: 0.5;
}
.styleguide.input__radio.input--disabled .input--label,
.styleguide.input__radio.input--disabled .svg--container {
  cursor: auto;
}
.styleguide.input__radio.size--small .svg--container {
  width: 1.56rem;
  min-width: 1.56rem;
  height: 1.56rem;
  line-height: 1.56rem;
}
.styleguide.input__radio.size--small .input--label {
  padding-left: 0.73rem;
  font-size: 1.15rem;
  line-height: 1.56rem;
}
.styleguide.input__radio.size--normal .svg--container {
  width: 2.08rem;
  min-width: 2.08rem;
  height: 2.08rem;
  line-height: 2.08rem;
}
.styleguide.input__radio.size--normal .input--label {
  padding-left: 1.25rem;
  font-size: 1.56rem;
  line-height: 2.08rem;
}
.styleguide.input__radio.size--large .svg--container {
  width: 2.6rem;
  min-width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
}
.styleguide.input__radio.size--large .input--label {
  padding-left: 1.56rem;
  font-size: 1.88rem;
  line-height: 2.5rem;
}
.styleguide.gynzy.input__radio .svg--container {
  border-color: #aeb7c2;
}
.styleguide.gynzy.input__radio .svg--container #radiobtn_outside {
  fill: #ffffff;
}
.styleguide.gynzy.input__radio .svg--container .radio-btn #radiobtn_inside {
  fill: #f6f6f6;
}
.styleguide.gynzy.input__radio .svg--container .checkmark-btn #radiobtn_inside {
  fill: #ffffff;
}
.styleguide.gynzy.input__radio .svg--container #checkmark {
  opacity: 0;
  fill: #ffffff;
}
.styleguide.gynzy.input__radio .input--label {
  color: #556474;
}
.styleguide.gynzy.input__radio:not(.input--selected):not(.input--disabled).hover .radio-btn #radiobtn_inside,
.styleguide.gynzy.input__radio:not(.input--selected):not(.input--disabled):hover .radio-btn #radiobtn_inside {
  fill: #dfecfa;
}
.styleguide.gynzy.input__radio.input--selected .svg--container {
  background-color: #28759f;
  border-color: #28759f;
}
.styleguide.gynzy.input__radio.input--selected .svg--container #radiobtn_inside {
  fill: #28759f;
}
.atom-input-slider {
  --grip-svg: url('../gynzy-styleguide/assets/svg/input-slider/grip.svg');
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.atom-input-slider.vertical {
  flex-direction: column;
}
.atom-input-slider.vertical .slider__container .slider {
  transform: rotate(-90deg);
}
.atom-input-slider.vertical--reverse {
  flex-direction: column;
}
.atom-input-slider.vertical--reverse .slider__container .slider {
  transform: rotate(90deg);
}
.atom-input-slider.vertical .slider__container,
.atom-input-slider.vertical--reverse .slider__container {
  height: 120px;
  width: 6px;
  margin: 10px 0;
}
.atom-input-slider.audience--student.vertical .slider__container,
.atom-input-slider.audience--student.vertical--reverse .slider__container,
.atom-input-slider.audience--teacher.vertical .slider__container,
.atom-input-slider.audience--teacher.vertical--reverse .slider__container {
  height: 18rem;
  width: 1rem;
  margin: 0.5rem 0;
}
.atom-input-slider.is--small .slider__container {
  height: 40px;
}
.atom-input-slider.is--small .slider__container .slider {
  width: 50px;
}
.atom-input-slider.is--auto--width .slider__container {
  flex-grow: 1;
}
.atom-input-slider.is--auto--width .slider__container .slider {
  margin: 0;
  width: calc(100% - 20px);
}
.atom-input-slider.audience--student.is--auto--width .slider__container .slider,
.atom-input-slider.audience--teacher.is--auto--width .slider__container .slider {
  width: calc(100% - 1rem);
}
.atom-input-slider .slider__container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.atom-input-slider .slider__container .slider {
  -webkit-appearance: none;
  height: 6px;
  width: 120px;
  border-radius: 3px;
  background-color: #eee;
  margin: 0 10px;
  outline: none;
}
.atom-input-slider .slider__container .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  background: #277cd9;
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--grip-svg);
}
.atom-input-slider .slider__container .slider::-webkit-slider-thumb:hover {
  background: #4e92ff;
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--grip-svg);
}
.atom-input-slider .slider__container .slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  background: #277cd9;
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--grip-svg);
}
.atom-input-slider .slider__container .slider::-moz-range-thumb:hover {
  background: #4e92ff;
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--grip-svg);
}
.atom-input-slider .slider__container input[type='range']::-moz-focus-outer {
  border: 0;
}
.atom-input-slider.audience--student .slider__container .slider,
.atom-input-slider.audience--teacher .slider__container .slider {
  height: 1rem;
  width: 18rem;
  border-radius: 0.5rem;
}
.atom-input-slider.audience--student .slider__container .slider::-webkit-slider-thumb,
.atom-input-slider.audience--teacher .slider__container .slider::-webkit-slider-thumb {
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  background-size: 1.2rem;
}
.atom-input-slider.audience--student .slider__container .slider::-webkit-slider-thumb:hover,
.atom-input-slider.audience--teacher .slider__container .slider::-webkit-slider-thumb:hover {
  background-size: 1.2rem;
}
.atom-input-slider.audience--student .slider__container .slider::-moz-range-thumb,
.atom-input-slider.audience--teacher .slider__container .slider::-moz-range-thumb {
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  background-size: 1.2rem;
}
.atom-input-slider.audience--student .slider__container .slider::-moz-range-thumb:hover,
.atom-input-slider.audience--teacher .slider__container .slider::-moz-range-thumb:hover {
  background-size: 1.2rem;
}
.audience--board {
  --ratio: 1px;
}
.audience--teacher {
  --ratio: var(--px-rem-ratio);
}
.atom-input-range-slider,
.atom-input-range-slider * {
  box-sizing: border-box !important;
}
.atom-input-range-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 32 * var(--ratio));
  height: calc(32 * var(--ratio));
  margin: 0 calc(16 * var(--ratio));
  cursor: pointer;
}
.atom-input-range-slider .slider-bar-outer {
  position: absolute;
  width: 100%;
  height: calc(2 * var(--ratio));
  border-radius: calc(1 * var(--ratio));
  background-color: var(--color-heather);
}
.atom-input-range-slider .slider-bar-inner {
  position: absolute;
  height: calc(4 * var(--ratio));
  border-radius: calc(2 * var(--ratio));
  background-color: var(--color-mariner);
  transition: 0.1s;
}
.atom-input-range-slider .slider-steps-container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: calc(100% + calc(28 * var(--ratio)));
  margin-left: calc(-14 * var(--ratio));
}
.atom-input-range-slider .slider-step {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(28 * var(--ratio));
  height: calc(28 * var(--ratio));
  padding: calc(8 * var(--ratio));
  border-radius: calc(14 * var(--ratio));
}
.atom-input-range-slider .slider-step::after {
  content: '';
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border: calc(2 * var(--ratio)) solid var(--color-heather);
  border-radius: 50%;
  background-color: var(--color-white);
  transition: 0.15s;
}
.atom-input-range-slider .slider-step.active::after {
  border-color: var(--color-mariner);
  background-color: var(--color-mariner);
}
.atom-input-range-slider .slider-handle {
  position: absolute;
  width: calc(32 * var(--ratio));
  height: calc(32 * var(--ratio));
  margin-left: calc(-16 * var(--ratio));
  border-radius: calc(16 * var(--ratio));
  background-color: var(--color-mariner);
  background-image: url('../gynzy-styleguide/assets/svg/input-slider/drag-horizontal.svg');
  background-position: center;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  transition: background-color 0.15s, left 0.1s ease-out;
  cursor: inherit;
}
.atom-input-range-slider .slider-handle:hover {
  background-color: var(--color-mariner-light);
}
.atom-input-range-slider .slider-handle:active {
  background-color: var(--color-mariner-dark);
}
.atom-input-range-slider.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}
.atom-input-range-slider.smaller {
  width: 80%;
  height: 24px;
  margin: 0 8px;
}
.atom-input-range-slider.smaller .slider-bar-outer {
  height: 2px;
  border-radius: 0.5px;
}
.atom-input-range-slider.smaller .slider-bar-inner {
  height: 2px;
  border-radius: 1px;
}
.atom-input-range-slider.smaller .slider-steps-container {
  width: calc(100% + 20px);
  margin-left: -10px;
}
.atom-input-range-slider.smaller .slider-step {
  width: 20px;
  height: 20px;
  padding: 6px;
  border-radius: 10px;
}
.atom-input-range-slider.smaller .slider-handle {
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 12px;
}
.atom-input-color {
  width: 4.16666667rem;
  height: 4.16666667rem;
}
.atom-input-color input {
  width: 4.16666667rem;
  height: 4.16666667rem;
}
.styleguide.gynzy.input__textarea {
  border-color: #d1d3de;
  color: #2a3541;
  /* WebKit, Blink, Edge */
  /* Mozilla Firefox 19+ */
  /* Internet Explorer 10-11 */
  /* Microsoft Edge */
}
.styleguide.gynzy.input__textarea::placeholder {
  color: #8c99a8;
}
.styleguide.gynzy.input__textarea::placeholder::-moz-placeholder {
  color: #8c99a8;
  opacity: 1;
}
.styleguide.gynzy.input__textarea::placeholder:-ms-input-placeholder {
  color: #8c99a8;
}
.styleguide.gynzy.input__textarea::placeholder::-ms-input-placeholder {
  color: #8c99a8;
}
.styleguide.gynzy.input__textarea:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 9999px white;
}
.styleguide.gynzy.input__textarea:disabled {
  opacity: 0.5;
  cursor: default;
}
.styleguide.gynzy.input__textarea:focus {
  border: 1px solid #277cd9;
}
.styleguide.gynzy.input__textarea.state--correct {
  color: #1eaa10;
  border: 1px solid #1eaa10;
}
.styleguide.gynzy.input__textarea.state--wrong {
  color: #ed1c24;
  border: 1px solid #ed1c24;
}
.styleguide.gynzy.input__textarea.readonly {
  background: #f5f5f8;
}
.styleguide.input__textarea {
  width: 100%;
  margin: 0;
  outline: none;
  box-sizing: border-box;
  border: 1px solid;
  -webkit-appearance: none;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  box-shadow: none;
  background-image: none;
  resize: none;
}
.styleguide.input__textarea.audience--student,
.styleguide.input__textarea.audience--teacher {
  width: 100%;
  margin: 0;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  font-style: normal;
  font-weight: 400;
  box-shadow: none;
  background-image: none;
  font-family: 'Open Sans', sans-serif;
}
.styleguide.input__textarea.audience--student.size--small,
.styleguide.input__textarea.audience--teacher.size--small {
  font-size: 1.15rem;
  border-radius: 0.42rem;
  padding: 0.5rem 0.94rem;
}
.styleguide.input__textarea.audience--student.size--normal,
.styleguide.input__textarea.audience--teacher.size--normal {
  font-size: 1.56rem;
  border-radius: 0.52rem;
  padding: 0.8rem 1.25rem;
}
.styleguide.input__textarea.audience--student.size--large,
.styleguide.input__textarea.audience--teacher.size--large {
  font-size: 2.1rem;
  border-radius: 0.62rem;
  padding: 1.1rem 1.56rem;
}
.styleguide.input__textarea.audience--board.size--small {
  font-size: 12px;
  border-radius: 4px;
  padding: 5px 9px;
}
.styleguide.input__textarea.audience--board.size--normal {
  font-size: 16px;
  border-radius: 5px;
  padding: 8px 12px;
}
.styleguide.input__textarea.audience--board.size--large {
  font-size: 20px;
  border-radius: 6px;
  padding: 11px 15px;
}
.styleguide.input__textarea::-ms-clear {
  display: none;
}
.styleguide.input__textarea::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.styleguide.input__textarea.state--correct.validation--icons {
  background: url('../gynzy-styleguide/assets/svg/input-field/valid.svg') no-repeat;
}
.styleguide.input__textarea.state--wrong.validation--icons {
  background: url('../gynzy-styleguide/assets/svg/input-field/invalid.svg') no-repeat;
  background-position-x: 98%;
  background-position-y: 5%;
  background-size: 1.66666667rem;
}
/**
 * Progress
 * Import in correct order, first progress-percentage!
 **/
.styleguide.progress__amount {
  position: relative;
  width: 100%;
  border-radius: 4rem;
  overflow: hidden;
}
.styleguide.progress__amount .block-container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  height: 1.2rem;
}
.styleguide.progress__amount .block-container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.progress__amount .block-container.column {
  flex-direction: column;
}
.styleguide.progress__amount .block-container.end {
  justify-content: flex-end;
}
.styleguide.progress__amount .block-container.start {
  justify-content: flex-start;
}
.styleguide.progress__amount .block-container.flex-center {
  justify-content: center;
}
.styleguide.progress__amount .block-container.between {
  justify-content: space-between;
}
.styleguide.progress__amount .block-container.around {
  justify-content: space-around;
}
.styleguide.progress__amount .block-container.cross-start {
  align-items: flex-start;
}
.styleguide.progress__amount .block-container.cross-end {
  align-items: flex-end;
}
.styleguide.progress__amount .block-container.stretch {
  align-items: stretch;
}
.styleguide.progress__amount .block-container.evenly {
  justify-content: space-evenly;
}
.styleguide.progress__amount .block-container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.progress__amount .block-container.wrap {
  flex-wrap: wrap;
}
.styleguide.progress__amount .block-container.grow {
  flex: 1;
}
.styleguide.progress__amount .block-container .flex-half,
.styleguide.progress__amount .block-container .flex-quarter,
.styleguide.progress__amount .block-container .flex-sixth,
.styleguide.progress__amount .block-container .flex-third,
.styleguide.progress__amount .block-container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.progress__amount .block-container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.progress__amount .block-container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.progress__amount .block-container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.progress__amount .block-container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.progress__amount .block-container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.progress__amount .block-container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.progress__amount .block-container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.progress__amount .block-container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.progress__amount .block-container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.progress__amount .block-container .progress--block {
  height: 1.3rem;
  box-sizing: border-box;
  border-left: 1px solid;
  border-right: 1px solid;
}
.styleguide.progress__amount .block-container .progress--block:first-child {
  border-left: 1px solid;
}
.styleguide.progress__amount .block-container .progress--block:last-child {
  border-right: 1px solid;
}
.styleguide.progress__amount .block-container .progress--block.hide--border {
  border-left: 1px solid;
  border-right: 1px solid;
}
.styleguide.progress__amount .animation--overlay {
  position: absolute;
  top: 0;
  height: 1.3rem;
  width: 100%;
  transform-origin: 100%;
  transition: transform 1s;
  border: none;
}
.styleguide.gynzy.progress__amount {
  border: solid 2px #000;
  background-color: #000;
}
.styleguide.gynzy.progress__amount .block-container .progress--block {
  background-color: #000000;
  border-left-color: #000000;
  border-right-color: #000000;
}
.styleguide.gynzy.progress__amount .block-container .progress--block:first-child {
  border-left-color: transparent;
}
.styleguide.gynzy.progress__amount .block-container .progress--block:last-child {
  border-right-color: #000000;
}
.styleguide.gynzy.progress__amount .block-container .progress--block.hide--border {
  border-left-color: transparent;
  border-right-color: transparent;
}
.styleguide.gynzy.progress__amount .block-container .progress--block.block--white {
  background-color: #ffffff;
}
.styleguide.gynzy.progress__amount .block-container .progress--block.block--green {
  background-color: #1eaa10;
}
.styleguide.gynzy.progress__amount .block-container .progress--block.block--red {
  background-color: #ed1c24;
}
.styleguide.gynzy.progress__amount .block-container .progress--block.block--blue {
  background-color: #277cd9;
}
.styleguide.gynzy.progress__amount .block-container .progress--block.block--gray {
  background-color: #999999;
}
.styleguide.gynzy.progress__amount .animation--overlay {
  background-color: #000000;
  border: none;
}
.progress__iteration.audience--teacher {
  width: 100%;
  height: 3.125rem;
  border-radius: 4rem;
  box-sizing: content-box;
  display: flex;
  overflow: hidden;
  padding: 0 0.413rem;
  flex-direction: column;
  justify-content: center;
}
.progress__iteration.audience--teacher .progress--bar__container {
  border-radius: 4rem;
  overflow: hidden;
}
.progress__iteration.audience--teacher .progress--bar__container .progress--bar {
  height: 2.3rem;
  border-radius: 4rem;
  animation-name: fill-progress-bar;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.progress__iteration.audience--teacher .progress--bar__container .progress--bar.pause--animation {
  animation-play-state: paused;
}
.progress__iteration.audience--teacher .progress--bar__container .progress--bar.stop--animation {
  width: 0;
  animation-name: none;
}
.progress__iteration.audience--teacher .progress--bar__container .progress--bar.fill--bar {
  width: 100%;
  animation-name: none;
}
@keyframes fill-progress-bar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.progress__iteration.audience--board {
  width: 100%;
  height: 30px;
  border-radius: 38.4px;
  box-sizing: content-box;
  display: flex;
  overflow: hidden;
  padding: 0 3.9648px;
  flex-direction: column;
  justify-content: center;
}
.progress__iteration.audience--board .progress--bar__container {
  border-radius: 38.4px;
  overflow: hidden;
}
.progress__iteration.audience--board .progress--bar__container .progress--bar {
  height: 22.08px;
  border-radius: 38.4px;
  animation-name: fill-progress-bar;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.progress__iteration.audience--board .progress--bar__container .progress--bar.pause--animation {
  animation-play-state: paused;
}
.progress__iteration.audience--board .progress--bar__container .progress--bar.stop--animation {
  width: 0;
  animation-name: none;
}
.progress__iteration.audience--board .progress--bar__container .progress--bar.fill--bar {
  width: 100%;
  animation-name: none;
}
@keyframes fill-progress-bar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.progress__iteration {
  background: #d1d3de;
}
.progress__iteration .progress--bar.color--black {
  background: #000000;
}
.progress__iteration .progress--bar.color--blue {
  background: #277cd9;
}
.styleguide.progress__percentage {
  width: 100%;
  height: 1.25rem;
  border-radius: 4rem;
  box-sizing: content-box;
  display: inline-block;
  overflow: hidden;
}
.styleguide.progress__percentage .progress--fill {
  height: 1.25rem;
  border-radius: 4rem;
  -webkit-transition: width 1s;
  transition: width 1s;
}
.styleguide.gynzy.progress__percentage {
  background: #d1d3de;
}
.styleguide.gynzy.progress__percentage .progress--fill {
  background: #38a4de;
}
/**
 * Displays
 **/
.styleguide.display__timer {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  background-clip: padding-box;
  border-width: 1px;
  overflow: hidden;
}
.styleguide.display__timer.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.display__timer.column {
  flex-direction: column;
}
.styleguide.display__timer.end {
  justify-content: flex-end;
}
.styleguide.display__timer.start {
  justify-content: flex-start;
}
.styleguide.display__timer.flex-center {
  justify-content: center;
}
.styleguide.display__timer.between {
  justify-content: space-between;
}
.styleguide.display__timer.around {
  justify-content: space-around;
}
.styleguide.display__timer.cross-start {
  align-items: flex-start;
}
.styleguide.display__timer.cross-end {
  align-items: flex-end;
}
.styleguide.display__timer.stretch {
  align-items: stretch;
}
.styleguide.display__timer.evenly {
  justify-content: space-evenly;
}
.styleguide.display__timer.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.display__timer.wrap {
  flex-wrap: wrap;
}
.styleguide.display__timer.grow {
  flex: 1;
}
.styleguide.display__timer .flex-half,
.styleguide.display__timer .flex-quarter,
.styleguide.display__timer .flex-sixth,
.styleguide.display__timer .flex-third,
.styleguide.display__timer .flex-two-third {
  box-sizing: border-box;
}
.styleguide.display__timer .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.display__timer .flex-grow-1 {
  flex: 1 1;
}
.styleguide.display__timer .flex-grow-2 {
  flex: 2 1;
}
.styleguide.display__timer .flex-grow-3 {
  flex: 3 1;
}
.styleguide.display__timer .flex-grow-4 {
  flex: 4 1;
}
.styleguide.display__timer .flex-grow-5 {
  flex: 5 1;
}
.styleguide.display__timer .flex-grow-6 {
  flex: 6 1;
}
.styleguide.display__timer .flex-grow-7 {
  flex: 7 1;
}
.styleguide.display__timer .flex-grow-8 {
  flex: 8 1;
}
.styleguide.display__timer.audience--student {
  width: 7.29rem;
  height: 8.65rem;
  line-height: 4.2rem;
  font-size: 4.15rem;
  border-radius: 0.83rem;
}
.styleguide.display__timer.audience--teacher {
  width: 4.38rem;
  height: 5.21rem;
  line-height: 2.6rem;
  font-size: 2.5rem;
  border-radius: 0.625rem;
}
.styleguide.display__timer.audience--board {
  width: 42px;
  height: 50px;
  line-height: 25px;
  font-size: 24px;
  border-radius: 5px;
}
.styleguide.gynzy.display__timer {
  font-family: 'Arial';
  font-style: normal;
  color: #556474;
  background-color: #fff;
  border-color: #d1d3de;
  border-style: solid;
  font-weight: bold;
  text-decoration: none;
  text-indent: 0;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.styleguide.gynzy.display__timer.disabled {
  color: #aeb7c2;
}
/**
 * Responsive Image
 **/
.styleguide.gynzy.responsive-image {
  position: relative;
  color: #000;
  width: 100%;
  max-width: 100%;
}
.styleguide.gynzy.responsive-image.hidden {
  visibility: hidden;
}
.styleguide.gynzy.responsive-image.unavailable-offline {
  box-sizing: border-box;
}
.styleguide.gynzy.responsive-image .__absolute-center {
  position: absolute;
  inset: 0;
}
.styleguide.gynzy.responsive-image .clipped-container {
  width: inherit;
  height: inherit;
}
.styleguide.gynzy.responsive-image .unavailable-container {
  width: 100%;
  height: 100%;
  display: flex;
  background: #ffffff;
}
.styleguide.gynzy.responsive-image .unavailable-container .unavailable-offline-message {
  height: auto;
  display: flex;
  align-items: center;
  font-weight: 400;
  padding: 12px 16px;
  box-sizing: border-box;
  color: #556474;
  gap: 8px;
}
.styleguide.gynzy.responsive-image .unavailable-container.center {
  justify-content: center;
  align-items: center;
  background: #e9eaef;
  border-radius: 24px;
}
.styleguide.gynzy.responsive-image .unavailable-container.center .unavailable-offline-message {
  font-size: 16px;
  justify-content: center;
  width: 100%;
  overflow-wrap: break-word;
}
.styleguide.gynzy.responsive-image .unavailable-container.center .unavailable-offline-message .message-text {
  max-width: 80%;
}
.styleguide.gynzy.responsive-image .unavailable-container.center.skinny .unavailable-offline-message {
  flex-direction: column;
  padding: 6px 8px;
  font-size: 10px;
}
.styleguide.gynzy.responsive-image .unavailable-container.center.skinny .unavailable-offline-message .message-text {
  max-width: 90%;
  text-align: center;
}
.styleguide.gynzy.responsive-image .unavailable-container.corner {
  justify-content: flex-start;
  align-items: flex-start;
  background: #ffffff;
  margin: 20px 0 0 28px;
}
.styleguide.gynzy.responsive-image .unavailable-container.corner .unavailable-offline-message {
  font-size: 14px;
  justify-content: flex-start;
  width: fit-content;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.styleguide.gynzy.responsive-image img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
.styleguide.gynzy.responsive-image img.responsive-image__isLoading {
  display: none;
}
.styleguide.gynzy.responsive-image img.white-background {
  background-color: #fff;
}
.styleguide.gynzy.responsive-image img.clipped {
  width: inherit;
  height: inherit;
  object-fit: cover;
}
.styleguide.gynzy.responsive-image .responsive-image__error-container {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  color: #06c;
  font-size: 2.2rem;
  cursor: pointer;
}
.styleguide.gynzy.responsive-image .responsive-image__error-container.error-container__hidden {
  visibility: hidden;
}
.styleguide.gynzy.responsive-image .responsive-image__error-container .reload-text div {
  white-space: nowrap;
}
.styleguide.gynzy.responsive-image .responsive-image__error-container .gynzy-awesome {
  font-size: 2.6rem;
}
.styleguide.gynzy.responsive-image .responsive-image__error-container .ga-reload {
  padding: 0 1rem;
}
.styleguide.gynzy.responsive-image .responsive-image__error-container .ga-broken-img {
  position: absolute;
  color: #bbb;
  top: 1rem;
  right: 1rem;
}
.styleguide.gynzy.responsive-image .responsive-image__full-screen-preview-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 3rem;
  z-index: 21001;
}
.styleguide.gynzy.responsive-image .responsive-image__full-screen-preview-container .responsive-image__full-screen-preview-container-bg {
  position: absolute;
  inset: 0;
  background-color: #fff;
  opacity: 0.95;
}
/**
 * Show/Hide Container
 **/
.title-white .show-hide-container__title {
  color: #ffffff;
}
.title-white .show-hide-container__icon .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.title-white .show-hide-container__icon .svg__icon img {
  filter: brightness(0) invert(1);
}
.title-white .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container {
  position: relative;
  width: 100%;
  text-align: left;
}
.styleguide.gynzy.show-hide-container .show-hide-container__icon {
  margin-right: 0.625rem;
}
.styleguide.gynzy.show-hide-container.color--gray {
  border: 1px solid #d1d3de;
  border-radius: 0.41666rem;
}
.styleguide.gynzy.show-hide-container.color--gray .show-hide-container__title-container {
  background-color: #f5f5f8;
  height: 5.20833rem;
  margin: 0;
  padding: 0;
  border-radius: 0.41666rem;
  border-bottom: none;
}
.styleguide.gynzy.show-hide-container.color--gray .show-hide-container__title-container .show-hide-container__icon {
  padding-left: 2.08333rem;
}
.styleguide.gynzy.show-hide-container.color--gray .show-hide-container__title-container .show-hide-container__icon .flat__icon .icon--graphics {
  fill: #3f4c5a;
  color: #3f4c5a;
}
.styleguide.gynzy.show-hide-container.color--gray .show-hide-container__title-container .show-hide-container__title {
  padding-left: 0.5rem;
  font-size: 2.1875rem;
  text-transform: none;
  color: #2a3541;
}
.styleguide.gynzy.show-hide-container.color--gray .show-hide-container__title-container .show-hide-container__controls > * {
  margin-right: 2.08333rem;
}
.styleguide.gynzy.show-hide-container.color--gray .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon {
  width: 1.46rem;
  height: 1.46rem;
}
.styleguide.gynzy.show-hide-container.color--gray .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.show-hide-container.color--gray.show-hide-container--open .show-hide-container__title-container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.gynzy.show-hide-container.color--gray .show-hide-container__content-container .show-hide-container__content {
  border-top: 1px solid #d1d3de;
  padding: 2.08333rem;
}
.styleguide.gynzy.show-hide-container.color--white .show-hide-container__title-container {
  background-color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated-dark .show-hide-container__title-container {
  background-color: #2477a3;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated-dark .show-hide-container__title-container .show-hide-container__title {
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated-dark .show-hide-container__title-container .show-hide-container__icon .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated-dark .show-hide-container__title-container .show-hide-container__icon .svg__icon img {
  filter: brightness(0) invert(1);
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated-dark .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated .show-hide-container__title-container {
  background-color: #2690c9;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated .show-hide-container__title-container .show-hide-container__title {
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated .show-hide-container__title-container .show-hide-container__icon .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated .show-hide-container__title-container .show-hide-container__icon .svg__icon img {
  filter: brightness(0) invert(1);
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-desaturated .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-soft .show-hide-container__title-container {
  background-color: #59b6e8;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-soft .show-hide-container__title-container .show-hide-container__title {
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-soft .show-hide-container__title-container .show-hide-container__icon .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-soft .show-hide-container__title-container .show-hide-container__icon .svg__icon img {
  filter: brightness(0) invert(1);
}
.styleguide.gynzy.show-hide-container.color--havelock-blue-soft .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--raw-sienna .show-hide-container__title-container {
  background-color: #fa830c;
}
.styleguide.gynzy.show-hide-container.color--raw-sienna .show-hide-container__title-container .show-hide-container__title {
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--raw-sienna .show-hide-container__title-container .show-hide-container__icon .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--raw-sienna .show-hide-container__title-container .show-hide-container__icon .svg__icon img {
  filter: brightness(0) invert(1);
}
.styleguide.gynzy.show-hide-container.color--raw-sienna .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--slate-gray .show-hide-container__title-container {
  background-color: #6b7c8e;
}
.styleguide.gynzy.show-hide-container.color--slate-gray .show-hide-container__title-container .show-hide-container__title {
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--slate-gray .show-hide-container__title-container .show-hide-container__icon .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container.color--slate-gray .show-hide-container__title-container .show-hide-container__icon .svg__icon img {
  filter: brightness(0) invert(1);
}
.styleguide.gynzy.show-hide-container.color--slate-gray .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.styleguide.gynzy.show-hide-container .show-hide-container__title-container {
  width: 100%;
  padding: 0.8rem 0;
  margin-top: 1rem;
  position: relative;
  cursor: pointer;
}
.styleguide.gynzy.show-hide-container .show-hide-container__title-container.no-controls {
  cursor: auto;
}
.styleguide.gynzy.show-hide-container .show-hide-container__title-container .show-hide-container__title {
  font-size: 1.7rem;
  font-weight: bold;
  color: #3f4c5a;
  text-transform: capitalize;
}
.styleguide.gynzy.show-hide-container .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon {
  width: 1.46rem;
  height: 1.46rem;
}
.styleguide.gynzy.show-hide-container .show-hide-container__title-container .show-hide-container__controls .show-hide-container__controls__toggle .flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.styleguide.gynzy.show-hide-container.show-hide-container__title-container--bottom-border .show-hide-container__title-container {
  border-bottom: 1px solid #e9eaef;
}
.styleguide.gynzy.show-hide-container .show-hide-container__content-container {
  position: relative;
  overflow: hidden;
  color: #556474;
}
.styleguide.gynzy.show-hide-container .show-hide-container__content-container .show-hide-container__content {
  margin-top: -100%;
  opacity: 0;
  padding: 1rem 0;
  font-size: 1.5rem;
}
.styleguide.gynzy.show-hide-container .show-hide-container__content-container .show-hide-container__content.no-padding {
  padding: 0;
}
.styleguide.gynzy.show-hide-container .show-hide-container__content-container .show-hide-container__content span {
  max-width: 848px;
}
.styleguide.gynzy.show-hide-container.show-hide-container--open .show-hide-container__content-container {
  overflow: visible;
  transition: max-height 0.2s;
  max-height: 9999999px;
}
.styleguide.gynzy.show-hide-container.show-hide-container--open .show-hide-container__content {
  margin-top: 0;
  opacity: 1;
  transition: opacity 0.2s ease-in-out 0.2s, margin 0.2s;
}
.styleguide.gynzy.show-hide-container.show-hide-container--open .show-hide-container__title-container .show-hide-container__controls__toggle .flat__icon {
  animation-name: show-hide-container-flipUp;
  animation-duration: 400ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.styleguide.gynzy.show-hide-container.show-hide-container--closed .show-hide-container__content-container {
  max-height: 0;
  transition: max-height 0.2s linear 0.2s;
}
.styleguide.gynzy.show-hide-container.show-hide-container--closed .show-hide-container__content {
  margin-top: -100%;
  opacity: 0;
  transition: margin 0.2s linear 0.2s, opacity 0.2s;
}
.styleguide.gynzy.show-hide-container.show-hide-container--closed .show-hide-container__title-container .show-hide-container__controls__toggle .flat__icon {
  animation-name: show-hide-container-flipDown;
  animation-duration: 400ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes show-hide-container-flipDown {
  from {
    transform: rotate3d(0);
  }
  to {
    transform: rotate3d(1, 0, 0, 0.5turn);
  }
}
@keyframes show-hide-container-flipUp {
  from {
    transform: rotate3d(1, 0, 0, 0.5turn);
  }
  to {
    transform: rotate3d(0);
  }
}
/**
 * Draggables
 **/
.styleguide__draggable-dropzone {
  width: 100%;
  height: 100%;
}
.styleguide__draggable-dropzone .draggable-dropzone {
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.styleguide__draggable-dropzone .draggable-dropzone.draggable-over * {
  pointer-events: none;
}
.styleguide__draggable-dropzone .draggable-dropzone.pointer-events {
  pointer-events: auto;
}
.styleguide__draggable-item .draggable-item {
  width: 100%;
  height: 100%;
  pointer-events: auto;
  overflow: hidden;
  cursor: move;
  touch-action: none;
}
.styleguide__draggable-item .draggable-item.draggable-item__drag-disabled {
  touch-action: auto;
}
.styleguide__draggable-item .draggable-item.is-dragging {
  opacity: 0.6;
}
.styleguide__draggable-item .draggable-item.draggable-item__hidden {
  opacity: 0;
}
.styleguide__draggable-item .draggable-item:not([draggable='false']) * {
  cursor: move;
}
.styleguide__draggable-item .draggable-item [draggable='false'] {
  cursor: default;
}
.draggable-ghost {
  z-index: 50000;
  opacity: 0.5;
  position: fixed;
  pointer-events: none;
  width: auto;
  height: auto;
  overflow: unset;
}
/**
* plyr components
*/
.atom-plyr-audio .plyr {
  opacity: 1;
  transition: 0.3s;
}
.atom-plyr-audio .plyr .plyr__controls {
  border-radius: 30px;
  height: 30px;
  padding: 0 40px 0 15px;
  background-color: #fff;
  color: #2a3541;
}
.atom-plyr-audio .plyr .plyr__controls .plyr__tab-focus {
  background: transparent;
  color: #2a3541;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.atom-plyr-audio .plyr .plyr__controls .plyr__control:hover {
  color: #2a3541;
  background: transparent;
}
.atom-plyr-audio .plyr .plyr__controls .plyr__tooltip--visible {
  display: none;
}
.atom-plyr-audio.player--opacity .plyr {
  transition: 0.3s;
  opacity: 0.6;
}
.atom-plyr-audio.player--opacity .plyr:hover {
  opacity: 1;
}
.atom-plyr-audio .plyr--full-ui input[type='range'] {
  color: #38a4de;
}
.styleguide.plyr__video {
  height: 100%;
  width: 100%;
  overflow: auto;
}
@supports (-ms-ime-align: auto) {
  .styleguide.plyr__video .plyr__progress {
    width: 50%;
  }
}
.styleguide.plyr__video.audience--board {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.styleguide.plyr__video.audience--board .plyr--video {
  width: 100%;
  position: inherit;
}
.styleguide.plyr__video.audience--board .plyr--video .plyr__video-wrapper {
  background: none;
}
.styleguide.plyr__video.audience--board .plyr--video:not(:fullscreen) .plyr__video-wrapper {
  position: inherit;
}
.styleguide.plyr__video.audience--board .plyr--video .plyr__video-embed__container {
  z-index: -1;
}
.styleguide.plyr__video.audience--board .plyr--video.plyr--youtube .plyr__controls .plyr__control:hover,
.styleguide.plyr__video.audience--board .plyr--video.plyr--youtube .plyr__controls .plyr__control:focus {
  background: red;
}
.styleguide.plyr__video.audience--board .plyr--video.plyr--youtube .plyr__controls input[type='range'] {
  color: red;
}
.styleguide.plyr__video.audience--board .plyr--video.plyr--youtube:hover button.plyr__control--overlaid {
  background: red;
}
.styleguide.plyr__video.audience--board .plyr--video.plyr--youtube button.plyr__control--overlaid {
  background: #424242;
  border-radius: 50% / 10%;
  color: #fff;
  font-size: 1.4rem;
  /* change this to change size */
  width: 4em;
  height: 3em;
  padding: 0;
  text-align: center;
  text-indent: 0.1em;
  transition: all 150ms ease-out;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.styleguide.plyr__video.audience--board .plyr--video.plyr--youtube button.plyr__control--overlaid svg {
  display: none;
}
.styleguide.plyr__video.audience--board .plyr--video.plyr--youtube button.plyr__control--overlaid::before {
  background: inherit;
  border-radius: 5% / 50%;
  inset: 9% -5%;
  content: '';
  position: absolute;
}
.styleguide.plyr__video.audience--board .plyr--video.plyr--youtube button.plyr__control--overlaid::after {
  border-style: solid;
  border-width: 1em 0 1em 1.732em;
  border-color: transparent transparent transparent #fff;
  content: ' ';
  font-size: 0.75em;
  height: 0;
  margin: -1em 0 0 -0.75em;
  top: 50%;
  position: absolute;
  width: 0;
}
.styleguide.plyr__video.audience--teacher._isFullScreen .plyr {
  width: 100%;
  height: 100%;
}
.styleguide.plyr__video.audience--teacher .plyr {
  height: 36rem;
  width: 64rem;
}
.styleguide.plyr__video.audience--teacher .plyr .plyr__video-wrapper {
  height: 100%;
  padding-bottom: 0;
}
.styleguide.plyr__video.audience--teacher .plyr .plyr__video-wrapper video {
  object-fit: contain;
  height: 100%;
}
.styleguide.plyr__video.audience--teacher .plyr.plyr--video button {
  padding: 1rem;
}
.styleguide.plyr__video.audience--teacher [class='plyr__play-large'] svg {
  height: 5rem;
  width: 5rem;
  left: 0.5rem;
}
/**
* tool-tip component
*/
.styleguide__tooltip {
  background: #2a3541;
  color: white;
  text-shadow: none;
  z-index: 5;
  padding: 1rem;
  max-width: 40rem;
}
.styleguide__tooltip.tooltip--over-modal {
  z-index: 22020;
}
.styleguide__tooltip .tooltip__title {
  font-weight: bold;
  font-size: 1.4rem;
}
.styleguide__tooltip .tooltip-inner {
  font-weight: normal;
  font-size: 1.25rem;
}
.styleguide__tooltip hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0.5rem 0;
}
.styleguide__tooltip.ember-tooltip[x-placement^='bottom'] .ember-tooltip-arrow {
  border-bottom-color: #2a3541;
}
.styleguide__tooltip.ember-tooltip[x-placement^='top'] > .ember-tooltip-arrow {
  border-top-color: #2a3541;
}
.styleguide__tooltip.ember-tooltip[x-placement^='left'] > .ember-tooltip-arrow {
  border-left-color: #2a3541;
}
.styleguide__tooltip.ember-tooltip[x-placement^='right'] > .ember-tooltip-arrow {
  border-right-color: #2a3541;
}
.styleguide__tooltip.top,
.styleguide__tooltip.bottom {
  text-align: center;
}
.styleguide__tooltip.left,
.styleguide__tooltip.right {
  text-align: left;
}
.styleguide__tooltip span {
  user-select: none;
}
/**
* loader-component component
*/
.styleguide.loader__component {
  width: 4rem;
  height: 4rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.styleguide.loader__component.color--black {
  background-image: url('../gynzy-styleguide/assets/loader/loading_indicator_black-fc6475f4963922b7aa5f95e26bbcdb0d.gif');
}
.styleguide.loader__component.color--white {
  background-image: url('../gynzy-styleguide/assets/loader/loading_indicator_white-4c51dcb0a6b1c4d2ac7a1ef21f18e093.gif');
}
.styleguide.loader__component.audience--board {
  width: 40px;
  height: 40px;
}
/**
* notifier-modeless component
*/
.styleguide.notifier__modeless {
  display: inline-block;
  padding: 1.75rem;
  background: #ffffff;
  box-shadow: 0 1.25rem 2rem 0 rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  z-index: 9999;
  position: fixed;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
}
.styleguide.notifier__modeless p {
  max-width: 25rem;
  display: flex;
  align-items: center;
  font-size: 1.66666667rem;
  color: #556474;
  overflow: hidden;
}
.styleguide.notifier__modeless .content {
  display: flex;
  justify-content: center;
}
.styleguide.notifier__modeless.slideFadeIn {
  animation: 0.5s ease-in appear;
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translate(-50%, -15%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
}
/**
* tool-tip component
*/
.styleguide.snack-bar {
  background: #ffffff;
  height: auto;
  min-height: 4.16666667rem;
  border: 1px solid #d1d3de;
  color: #2a3541;
  box-shadow: 0 0 2px 0 rgba(42, 53, 65, 0.08), 0 2px 4px 0 rgba(42, 53, 65, 0.16);
  border-radius: 2.08333333rem;
  padding: 1.25rem 2.08333333rem;
  display: flex;
  align-items: center;
  gap: 0.83333333rem;
  pointer-events: none;
  transition: 0.5s;
  opacity: 0;
  font-size: 1.66666667rem;
  font-family: 'Open Sans', sans-serif;
}
.styleguide.snack-bar.closable {
  pointer-events: all;
}
.styleguide.snack-bar.show {
  transform: translateY(-10px);
  opacity: 1;
}
.styleguide.snack-bar .snackbar-icon .styleguide.flat__icon .icon--container {
  width: 1.45833333rem;
}
.styleguide.snack-bar .snackbar-icon .styleguide.flat__icon.icon__checkmark .icon--graphics {
  fill: #1eaa10;
  color: #1eaa10;
}
.styleguide.snack-bar .snackbar-icon .styleguide.flat__icon.icon__incorrect .icon--graphics {
  fill: #ed1c24;
  color: #ed1c24;
}
.styleguide.snack-bar .snackbar-icon .styleguide.flat__icon.icon__warning .icon--graphics {
  fill: #fad20c;
  color: #fad20c;
}
.styleguide.snack-bar.fadeOut {
  animation: 0.5s ease-in hidePopup;
}
@keyframes hidePopup {
  from {
    opacity: 1;
    transform: translateY(-10px);
  }
  to {
    opacity: 0;
    transform: translateY(0);
  }
}
.styleguide.snack-bar p {
  margin: 0;
  padding-right: 0.41666667rem;
  line-height: 1.4;
}
.styleguide.snack-bar strong,
.styleguide.snack-bar b,
.styleguide.snack-bar .bold {
  font-weight: 600;
}
/**
* overlay-scrollbars component
*/
.styleguide.overlay__scrollbars {
  width: 100%;
  height: 100%;
}
.styleguide.overlay__scrollbars .os-scrollbar .os-scrollbar-track {
  border-radius: 1.04166667rem;
  background: #e9eaef;
}
.styleguide.overlay__scrollbars .os-scrollbar .os-scrollbar-handle {
  border-radius: 1.04166667rem;
  background: #d1d3de;
}
.styleguide.overlay__scrollbars .os-scrollbar .os-scrollbar-handle:hover {
  cursor: pointer;
  background-color: #dadce4;
}
.styleguide.overlay__scrollbars .os-scrollbar .os-scrollbar-handle.active {
  background-color: #c8cad8;
}
.styleguide.overlay__scrollbars .os-scrollbar-horizontal {
  height: 1.66666667rem;
}
.styleguide.overlay__scrollbars .os-scrollbar-vertical {
  width: 1.66666667rem;
}
/**
 * session-pin component
 **/
.pin-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23.33333333rem;
  height: 5.41666667rem;
  background-color: #fff;
  border: 1px solid #aeb7c2;
  border-radius: 0.41666667rem;
}
.pin-container .pin-code {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2a3541;
  text-align: center;
  letter-spacing: 0.41666667rem;
}
/**
 * microgoal-alphabet component
 **/
div.microgoal-alphabet {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  margin-right: 0.83333333rem;
  align-items: center;
}
div.microgoal-alphabet span {
  font-style: 'Open Sans' sans-serif;
}
div.microgoal-alphabet.small {
  height: 1.66666667rem;
  width: 1.66666667rem;
}
div.microgoal-alphabet.small span {
  line-height: 1.66666667rem;
  font-size: 1.04166667rem;
}
div.microgoal-alphabet.medium {
  height: 3.33333333rem;
  width: 3.33333333rem;
}
div.microgoal-alphabet.medium span {
  line-height: 2.91666667rem;
  font-size: 1.875rem;
}
div.microgoal-alphabet.large {
  height: 4.16666667rem;
  width: 4.16666667rem;
}
div.microgoal-alphabet.large span {
  line-height: 3.64583333rem;
  font-size: 2.39583333rem;
}
div.microgoal-alphabet.zill_math,
div.microgoal-alphabet.ovsg_math,
div.microgoal-alphabet.go_math,
div.microgoal-alphabet.go-ijsberg_math,
div.microgoal-alphabet.rekenen {
  background: #59b6e8;
  color: #1a455b;
}
div.microgoal-alphabet.spelling,
div.microgoal-alphabet.nederlands {
  background: #75e260;
  color: #28571e;
}
div.microgoal-alphabet.mammoth {
  background: #e06cd6;
  color: #461a21;
}
div.microgoal-alphabet.woordenschat {
  background: #ff962e;
  color: #57300a;
}
div.microgoal-alphabet.grammatica {
  background: #e260a0;
  color: #571e3a;
}
div.microgoal-alphabet.wereldorientatie {
  background: #5ddfdf;
  color: #1e5252;
}
div.microgoal-alphabet.digitale_geletterdheid {
  background: #e35fe3;
  color: #581d58;
}
div.microgoal-alphabet.engels {
  background-color: #d9b9f8;
  color: #3a1d58;
}
div.microgoal-alphabet.topografie {
  background-color: #e6f6b6;
  color: #45521e;
}
div.microgoal-alphabet.cijfers_en_letters {
  background: #5ad899;
  color: #1e4833;
}
div.microgoal-alphabet.zill_numbers,
div.microgoal-alphabet.ovsg_numbers,
div.microgoal-alphabet.go_numbers,
div.microgoal-alphabet.go-ijsberg_numbers,
div.microgoal-alphabet.cijfers {
  background: #3fd4d4;
  color: #1e5252;
}
div.microgoal-alphabet.zill_letters,
div.microgoal-alphabet.ovsg_letters,
div.microgoal-alphabet.go_letters,
div.microgoal-alphabet.letters {
  background: #3dcc84;
  color: #1e4833;
}
div.microgoal-alphabet.taalontdekkers {
  background: #ffdc2e;
  color: #574a0a;
}
div.microgoal-alphabet.frans {
  background: #5a79d8;
  color: #1e2848;
}
div.microgoal-alphabet.disabled {
  background: #e9eaef;
  color: #6b7c8e;
  opacity: 1 !important;
}
/**
 * group-icon-label component
 **/
.group-icon-label {
  display: flex;
  align-items: center;
  margin: 0.41666667rem 0;
  text-align: left;
}
.group-icon-label .group-icon-label__icon .user-portrait__container {
  border: 0.20833333rem solid #fff;
  box-sizing: border-box;
  width: 3.54166667rem;
  height: 3.54166667rem;
}
.group-icon-label .group-icon-label__icon .user-portrait__container .user-portrait__avatar {
  height: 1.66666667rem;
  width: 1.66666667rem;
  border-radius: 0;
  filter: var(--color-filter-white);
}
.group-icon-label .group-icon-label__label {
  margin-left: 0.83333333rem;
  color: #556474;
  font-size: 1.66666667rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 150%;
}
.molecule-breadcrumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
}
.molecule-breadcrumbs .breadcrumb-folder-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0.625rem 0 0;
  flex-shrink: 0;
}
.molecule-breadcrumbs .folder--divider {
  display: flex;
  align-items: center;
  margin: 0 0.625rem;
  flex-shrink: 0;
}
.molecule-breadcrumbs .folder--divider .flat__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.molecule-breadcrumbs .folder--divider .flat__icon .icon--graphics {
  fill: #aeb7c2;
  color: #aeb7c2;
}
.molecule-breadcrumbs button.button__icon__label {
  padding: 0.625rem;
  flex: 0 1 auto;
  display: flex !important;
  align-items: center;
  overflow: hidden;
  max-width: 100%;
}
.molecule-breadcrumbs button.button__icon__label .svg__icon {
  margin-right: 0.625rem;
  flex-shrink: 0;
}
.molecule-breadcrumbs button.button__icon__label.active a {
  font-weight: 600;
  color: #3f4c5a;
  cursor: default;
}
.molecule-breadcrumbs button.button__icon__label a {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  min-width: 0;
  flex: 1;
}
.molecule-breadcrumbs .styleguide__draggable-dropzone {
  width: unset;
  height: unset;
  min-width: 0;
  flex: 0 1 content;
  overflow: hidden;
}
.molecule-breadcrumbs .styleguide__draggable-dropzone .draggable-dropzone.draggable-over .button__icon__label {
  border-radius: 0.41666667rem;
  background-color: #effaff;
  box-shadow: inset 0 0 0 1px #38a4de;
}
/**
 * no colors to define yet, cause colors are defined in counter-base
 */
/* stylelint-disable-next-line */
.styleguide.toggle__buttons {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  width: 100%;
}
.styleguide.toggle__buttons.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.toggle__buttons.column {
  flex-direction: column;
}
.styleguide.toggle__buttons.end {
  justify-content: flex-end;
}
.styleguide.toggle__buttons.start {
  justify-content: flex-start;
}
.styleguide.toggle__buttons.flex-center {
  justify-content: center;
}
.styleguide.toggle__buttons.between {
  justify-content: space-between;
}
.styleguide.toggle__buttons.around {
  justify-content: space-around;
}
.styleguide.toggle__buttons.cross-start {
  align-items: flex-start;
}
.styleguide.toggle__buttons.cross-end {
  align-items: flex-end;
}
.styleguide.toggle__buttons.stretch {
  align-items: stretch;
}
.styleguide.toggle__buttons.evenly {
  justify-content: space-evenly;
}
.styleguide.toggle__buttons.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.toggle__buttons.wrap {
  flex-wrap: wrap;
}
.styleguide.toggle__buttons.grow {
  flex: 1;
}
.styleguide.toggle__buttons .flex-half,
.styleguide.toggle__buttons .flex-quarter,
.styleguide.toggle__buttons .flex-sixth,
.styleguide.toggle__buttons .flex-third,
.styleguide.toggle__buttons .flex-two-third {
  box-sizing: border-box;
}
.styleguide.toggle__buttons .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.toggle__buttons .flex-grow-1 {
  flex: 1 1;
}
.styleguide.toggle__buttons .flex-grow-2 {
  flex: 2 1;
}
.styleguide.toggle__buttons .flex-grow-3 {
  flex: 3 1;
}
.styleguide.toggle__buttons .flex-grow-4 {
  flex: 4 1;
}
.styleguide.toggle__buttons .flex-grow-5 {
  flex: 5 1;
}
.styleguide.toggle__buttons .flex-grow-6 {
  flex: 6 1;
}
.styleguide.toggle__buttons .flex-grow-7 {
  flex: 7 1;
}
.styleguide.toggle__buttons .flex-grow-8 {
  flex: 8 1;
}
.molecule-state-switcher {
  transition: opacity 0.25s;
  opacity: 1;
  --state-switcher-height: calc(22 * 0.10416667rem);
  --state-switcher-width: calc(42 * 0.10416667rem);
  --state-switcher-icon: calc(12 * 0.10416667rem);
}
.molecule-state-switcher.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.molecule-state-switcher.size--small {
  --state-switcher-height: calc(18 * 0.10416667rem);
  --state-switcher-width: calc(34 * 0.10416667rem);
  --state-switcher-icon: calc(10 * 0.10416667rem);
}
.molecule-state-switcher .state-switcher__wrapper {
  position: relative;
  cursor: pointer !important;
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__bar {
  height: var(--state-switcher-height);
  width: var(--state-switcher-width);
  border-radius: var(--state-switcher-height);
  box-sizing: content-box;
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__bar.state-on {
  transition: background-color 0.25s, border 0.25s;
  background-color: #28759f;
  border: 1px solid #28759f;
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__bar.state-off {
  transition: background-color 0.25s, border 0.25s;
  background-color: #aeb7c2;
  border: 1px solid #aeb7c2;
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__bar.state-disabled {
  opacity: 0.5;
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--state-switcher-height);
  height: var(--state-switcher-height);
  border-radius: var(--state-switcher-height);
  background-color: #e9eaef;
  transition: transform 0.25s;
  pointer-events: none;
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__button .flat__icon {
  width: var(--state-switcher-icon);
  height: var(--state-switcher-icon);
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__button .flat__icon .icon--graphics {
  fill: #3f4c5a;
  color: #3f4c5a;
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__button.state-on {
  transform: translateX(calc(var(--state-switcher-width) - var(--state-switcher-height)));
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__button.state-off {
  transform: translateX(0);
}
.molecule-state-switcher .state-switcher__wrapper .state-switcher__button:hover {
  background-color: white;
}
.molecule-toggle-dropdown-builder {
  width: 100%;
}
.molecule-toggle-dropdown-builder a {
  color: #277cd9;
  font-weight: normal;
  text-decoration: underline;
}
.molecule-toggle-dropdown-builder a:hover {
  color: #4e92ff;
}
.molecule-toggle-dropdown-builder a:active {
  color: #2465ab;
}
.toggle-button-group {
  display: flex;
}
.toggle-button-group .toggle-button {
  margin-right: -1px;
  cursor: pointer;
}
.toggle-button {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 11.45833333rem;
  align-items: center;
  padding: 0.83333333rem 2.5rem;
  font-weight: 600;
  border: 1px solid #28759f;
  background-color: white;
  color: #28759f;
  transition: 0.2s;
  gap: 0.83333333rem;
  font-family: 'Open Sans', sans-serif;
}
.toggle-button.active {
  background-color: #d4eefc;
  transition: 0.2s;
}
.toggle-button.active .check-mark {
  display: block;
}
.toggle-button .check-mark {
  display: none;
}
.toggle-button .check-mark .styleguide.flat__icon .icon--graphics {
  fill: #28759f;
  color: #28759f;
}
.toggle-button:first-child {
  border-top-left-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
}
.toggle-button:last-child {
  border-top-right-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
}
.toggle-button:only-child {
  border-radius: 2.5rem;
}
.toggle-button.size--small {
  font-size: 1.25rem;
}
/* stylelint-disable-next-line */
.styleguide.digit__timer.orientation--horizontal {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  flex-direction: row-reverse;
}
.styleguide.digit__timer.orientation--horizontal.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.digit__timer.orientation--horizontal.column {
  flex-direction: column;
}
.styleguide.digit__timer.orientation--horizontal.end {
  justify-content: flex-end;
}
.styleguide.digit__timer.orientation--horizontal.start {
  justify-content: flex-start;
}
.styleguide.digit__timer.orientation--horizontal.flex-center {
  justify-content: center;
}
.styleguide.digit__timer.orientation--horizontal.between {
  justify-content: space-between;
}
.styleguide.digit__timer.orientation--horizontal.around {
  justify-content: space-around;
}
.styleguide.digit__timer.orientation--horizontal.cross-start {
  align-items: flex-start;
}
.styleguide.digit__timer.orientation--horizontal.cross-end {
  align-items: flex-end;
}
.styleguide.digit__timer.orientation--horizontal.stretch {
  align-items: stretch;
}
.styleguide.digit__timer.orientation--horizontal.evenly {
  justify-content: space-evenly;
}
.styleguide.digit__timer.orientation--horizontal.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.digit__timer.orientation--horizontal.wrap {
  flex-wrap: wrap;
}
.styleguide.digit__timer.orientation--horizontal.grow {
  flex: 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-half,
.styleguide.digit__timer.orientation--horizontal .flex-quarter,
.styleguide.digit__timer.orientation--horizontal .flex-sixth,
.styleguide.digit__timer.orientation--horizontal .flex-third,
.styleguide.digit__timer.orientation--horizontal .flex-two-third {
  box-sizing: border-box;
}
.styleguide.digit__timer.orientation--horizontal .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-grow-1 {
  flex: 1 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-grow-2 {
  flex: 2 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-grow-3 {
  flex: 3 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-grow-4 {
  flex: 4 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-grow-5 {
  flex: 5 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-grow-6 {
  flex: 6 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-grow-7 {
  flex: 7 1;
}
.styleguide.digit__timer.orientation--horizontal .flex-grow-8 {
  flex: 8 1;
}
.styleguide.digit__timer.orientation--horizontal .button__square:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-right: none;
}
.styleguide.digit__timer.orientation--horizontal .button__square:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-left: none;
}
.styleguide.digit__timer.orientation--vertical {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  flex-direction: column;
}
.styleguide.digit__timer.orientation--vertical.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.digit__timer.orientation--vertical.column {
  flex-direction: column;
}
.styleguide.digit__timer.orientation--vertical.end {
  justify-content: flex-end;
}
.styleguide.digit__timer.orientation--vertical.start {
  justify-content: flex-start;
}
.styleguide.digit__timer.orientation--vertical.flex-center {
  justify-content: center;
}
.styleguide.digit__timer.orientation--vertical.between {
  justify-content: space-between;
}
.styleguide.digit__timer.orientation--vertical.around {
  justify-content: space-around;
}
.styleguide.digit__timer.orientation--vertical.cross-start {
  align-items: flex-start;
}
.styleguide.digit__timer.orientation--vertical.cross-end {
  align-items: flex-end;
}
.styleguide.digit__timer.orientation--vertical.stretch {
  align-items: stretch;
}
.styleguide.digit__timer.orientation--vertical.evenly {
  justify-content: space-evenly;
}
.styleguide.digit__timer.orientation--vertical.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.digit__timer.orientation--vertical.wrap {
  flex-wrap: wrap;
}
.styleguide.digit__timer.orientation--vertical.grow {
  flex: 1;
}
.styleguide.digit__timer.orientation--vertical .flex-half,
.styleguide.digit__timer.orientation--vertical .flex-quarter,
.styleguide.digit__timer.orientation--vertical .flex-sixth,
.styleguide.digit__timer.orientation--vertical .flex-third,
.styleguide.digit__timer.orientation--vertical .flex-two-third {
  box-sizing: border-box;
}
.styleguide.digit__timer.orientation--vertical .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.digit__timer.orientation--vertical .flex-grow-1 {
  flex: 1 1;
}
.styleguide.digit__timer.orientation--vertical .flex-grow-2 {
  flex: 2 1;
}
.styleguide.digit__timer.orientation--vertical .flex-grow-3 {
  flex: 3 1;
}
.styleguide.digit__timer.orientation--vertical .flex-grow-4 {
  flex: 4 1;
}
.styleguide.digit__timer.orientation--vertical .flex-grow-5 {
  flex: 5 1;
}
.styleguide.digit__timer.orientation--vertical .flex-grow-6 {
  flex: 6 1;
}
.styleguide.digit__timer.orientation--vertical .flex-grow-7 {
  flex: 7 1;
}
.styleguide.digit__timer.orientation--vertical .flex-grow-8 {
  flex: 8 1;
}
.styleguide.digit__timer.orientation--vertical .button__square:first-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  box-shadow: none;
}
.styleguide.digit__timer.orientation--vertical .button__square:last-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}
.styleguide.digit__timer__multiple {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
}
.styleguide.digit__timer__multiple.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.digit__timer__multiple.column {
  flex-direction: column;
}
.styleguide.digit__timer__multiple.end {
  justify-content: flex-end;
}
.styleguide.digit__timer__multiple.start {
  justify-content: flex-start;
}
.styleguide.digit__timer__multiple.flex-center {
  justify-content: center;
}
.styleguide.digit__timer__multiple.between {
  justify-content: space-between;
}
.styleguide.digit__timer__multiple.around {
  justify-content: space-around;
}
.styleguide.digit__timer__multiple.cross-start {
  align-items: flex-start;
}
.styleguide.digit__timer__multiple.cross-end {
  align-items: flex-end;
}
.styleguide.digit__timer__multiple.stretch {
  align-items: stretch;
}
.styleguide.digit__timer__multiple.evenly {
  justify-content: space-evenly;
}
.styleguide.digit__timer__multiple.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.digit__timer__multiple.wrap {
  flex-wrap: wrap;
}
.styleguide.digit__timer__multiple.grow {
  flex: 1;
}
.styleguide.digit__timer__multiple .flex-half,
.styleguide.digit__timer__multiple .flex-quarter,
.styleguide.digit__timer__multiple .flex-sixth,
.styleguide.digit__timer__multiple .flex-third,
.styleguide.digit__timer__multiple .flex-two-third {
  box-sizing: border-box;
}
.styleguide.digit__timer__multiple .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.digit__timer__multiple .flex-grow-1 {
  flex: 1 1;
}
.styleguide.digit__timer__multiple .flex-grow-2 {
  flex: 2 1;
}
.styleguide.digit__timer__multiple .flex-grow-3 {
  flex: 3 1;
}
.styleguide.digit__timer__multiple .flex-grow-4 {
  flex: 4 1;
}
.styleguide.digit__timer__multiple .flex-grow-5 {
  flex: 5 1;
}
.styleguide.digit__timer__multiple .flex-grow-6 {
  flex: 6 1;
}
.styleguide.digit__timer__multiple .flex-grow-7 {
  flex: 7 1;
}
.styleguide.digit__timer__multiple .flex-grow-8 {
  flex: 8 1;
}
.styleguide.digit__timer__multiple .digit__timer:not(:last-child) .display__timer {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.digit__timer__multiple .digit__timer:not(:first-child) .display__timer {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.styleguide.gynzy.digit__timer__multiple .digit__timer:not(:last-child) .display__timer {
  border-right-color: #e9eaef;
}
.molecule-user-portrait.color--crimson .user-portrait__container {
  background-color: #dc2828;
}
.molecule-user-portrait.color--pumpkin .user-portrait__container {
  background-color: #d36e09;
}
.molecule-user-portrait.color--lemon .user-portrait__container {
  background-color: #d3b109;
}
.molecule-user-portrait.color--pear .user-portrait__container {
  background-color: #98bb30;
}
.molecule-user-portrait.color--mantis .user-portrait__container {
  background-color: #47c12f;
}
.molecule-user-portrait.color--emerald .user-portrait__container {
  background-color: #34ad70;
}
.molecule-user-portrait.color--caribbean .user-portrait__container {
  background-color: #30bbbb;
}
.molecule-user-portrait.color--sky .user-portrait__container {
  background-color: #2690c9;
}
.molecule-user-portrait.color--indigo .user-portrait__container {
  background-color: #3452ad;
}
.molecule-user-portrait.color--lavender .user-portrait__container {
  background-color: #772ec2;
}
.molecule-user-portrait.color--fuchsia .user-portrait__container {
  background-color: #c22ec2;
}
.molecule-user-portrait.color--cranberry .user-portrait__container {
  background-color: #c12f77;
}
.molecule-user-portrait.color--parnassys .user-portrait__container {
  background-color: #ed5c82;
}
.molecule-user-portrait.color--smartschool .user-portrait__container {
  background-color: #ff520e;
}
.molecule-user-portrait.color--basispoort .user-portrait__container {
  background-color: #282c59;
}
.molecule-user-portrait.color--esis .user-portrait__container {
  background-color: #2bb60f;
}
.molecule-user-portrait.color--questi .user-portrait__container {
  background-color: #dddb00;
}
.user-portrait__container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.user-portrait__container.user-portrait--layout-circle {
  border-radius: 50%;
}
.user-portrait__container.user-portrait--layout-rectangle-portrait,
.user-portrait__container.user-portrait--layout-rectangle-landscape {
  border-radius: 4px;
}
.user-portrait__container .user-portrait__initials {
  font-size: 1.66666667rem;
  color: white;
  margin: 0;
}
.user-portrait__container .user-portrait__avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  object-fit: cover;
}
.user-portrait__container .user-portrait__overlay {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  box-sizing: border-box;
}
.user-portrait__container[data-portrait-color='indigo'] {
  background-color: #3452ad;
}
.user-portrait__container[data-portrait-color='crimson'] {
  background-color: #dc2828;
}
.user-portrait__container[data-portrait-color='pumpkin'] {
  background-color: #d36e09;
}
.user-portrait__container[data-portrait-color='lemon'] {
  background-color: #d3b109;
}
.user-portrait__container[data-portrait-color='pear'] {
  background-color: #98bb30;
}
.user-portrait__container[data-portrait-color='mantis'] {
  background-color: #47c12f;
}
.user-portrait__container[data-portrait-color='emerald'] {
  background-color: #34ad70;
}
.user-portrait__container[data-portrait-color='caribbean'] {
  background-color: #30bbbb;
}
.user-portrait__container[data-portrait-color='sky'] {
  background-color: #2690c9;
}
.user-portrait__container[data-portrait-color='lavender'] {
  background-color: #772ec2;
}
.user-portrait__container[data-portrait-color='fuchsia'] {
  background-color: #c22ec2;
}
.user-portrait__container[data-portrait-color='cranberry'] {
  background-color: #c12f77;
}
.user-portrait__container[data-portrait-color='ghost'] {
  background-color: #d1d3de;
}
.snackbar-outlet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.15s ease;
}
.snackbar-outlet.up .snack-bar {
  margin-top: 1rem;
}
.snackbar-outlet.down {
  flex-direction: column-reverse;
}
.snackbar-outlet.down .snack-bar {
  margin-bottom: 1rem;
}
.snackbar-outlet.left {
  align-items: flex-start;
}
.snackbar-outlet.center {
  align-items: center;
}
.snackbar-outlet.right {
  align-items: flex-end;
}
.styleguide.callout.ember-popover.global-group-selection-popover {
  display: flex;
  position: relative;
  width: 35rem;
  padding: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.styleguide.callout.ember-popover.global-group-selection-popover .global-group-selection-popover__inner {
  width: 100%;
}
.styleguide.callout.ember-popover.global-group-selection-popover .global-group-selection-popover__inner .inner--content h3 {
  font-weight: 600;
  color: #556474;
  font-size: 1.66666667rem;
  padding: 1.25rem 2.29166667rem;
  margin: 0;
}
.styleguide.callout.ember-popover.global-group-selection-popover .global-group-selection-popover__inner .global-group-selection__wrapper {
  max-height: 75vh;
  overflow-y: auto;
  padding: 2.5rem 2.29166667rem;
  border-top: 1px solid #aeb7c2;
}
.styleguide.callout.ember-popover.global-group-selection-popover .global-group-selection-popover__inner .global-group-selection__wrapper p {
  color: #556474;
  font-size: 1.66666667rem;
  line-height: 2.5rem;
}
.styleguide.callout.ember-popover.global-group-selection-popover .global-group-selection-popover__inner .global-group-selection__wrapper .group-icon-label__label {
  width: 20.83333333rem;
}
.styleguide.callout.ember-popover.global-group-selection-popover .global-group-selection-popover__inner .global-group-selection__footer {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 2.08333333rem;
  border-top: 1px solid #aeb7c2;
  line-height: 2.5rem;
  font-size: 1.66666667rem;
  color: #277cd9;
  border-radius: 0 0 0.52083333rem 0.52083333rem;
}
.styleguide.callout.ember-popover.global-group-selection-popover .global-group-selection-popover__inner .global-group-selection__footer:hover {
  color: #4e92ff;
}
.styleguide.callout.ember-popover.global-group-selection-popover .global-group-selection-popover__inner .global-group-selection__footer:active {
  color: #2465ab;
}
.global-group-selection__target-class {
  position: absolute;
  z-index: -1;
  height: 3.75rem;
  width: 3.75rem;
  top: -1.04166667rem;
  right: 0;
}
.global-group-selection__target-class.is-board {
  top: 0;
}
.molecule-global-group-selection {
  cursor: pointer;
  width: 18.75rem;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.molecule-global-group-selection.is-board-direction {
  justify-content: flex-start;
  width: auto;
}
.molecule-global-group-selection .user-portrait__group-selection .user-portrait__container {
  border: 0.20833333rem solid #fff;
  box-sizing: border-box;
  width: 3.75rem;
  height: 3.75rem;
}
.molecule-global-group-selection .user-portrait__group-selection .user-portrait__container .user-portrait__avatar {
  height: 1.66666667rem;
  width: 1.66666667rem;
  border-radius: 0;
  filter: var(--color-filter-white);
}
.molecule-global-group-selection .icon-background {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.75rem;
  width: 3.75rem;
  background-color: #b7e3fa;
  border-radius: 50%;
  border: 2px solid #b7e3fa;
  box-sizing: border-box;
}
.molecule-global-group-selection .icon-background.selected {
  border: 2px solid #277cd9;
}
.molecule-global-group-selection .icon-background.selected .button__icon .flat__icon .icon--container .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.molecule-global-group-selection .icon-background.selected:hover {
  border: 2px solid #277cd9;
}
.molecule-global-group-selection .icon-background.selected:hover .button__icon .flat__icon .icon--container .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.molecule-global-group-selection .icon-background:hover {
  border: 2px solid #4e92ff;
  transition: 0.15s;
}
.molecule-global-group-selection .icon-background:hover .flat__icon .icon--container .icon--graphics {
  transition: 0.15s;
  fill: #4e92ff;
  color: #4e92ff;
}
.molecule-global-group-selection .group-button.is--board {
  position: relative;
}
.molecule-global-group-selection .group-button.is--board .styleguide.gynzy.button__icon.color--black .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.molecule-global-group-selection .group-button.is--board .label {
  position: absolute;
  white-space: nowrap;
  color: #277cd9;
  font-weight: 600;
  cursor: pointer;
  top: 0.2rem;
  left: 3rem;
}
.molecule-global-group-selection .placeholder {
  display: flex;
  align-items: center;
}
.molecule-global-group-selection .placeholder .placeholder-label {
  margin-left: 1.04166667rem;
  font-size: 1.45833333rem;
  font-weight: 600;
  color: #277cd9;
}
.molecule-group-toggle .group-toggle__container {
  display: flex;
  justify-content: space-between;
}
.molecule-group-toggle .group-toggle__container .group-toggle__user-portrait {
  display: flex;
  align-items: center;
  margin: 0.41666667rem 0;
}
.molecule-group-toggle .group-toggle__container .group-toggle__user-portrait .group-toggle__name {
  margin-left: 0.83333333rem;
  color: #556474;
  font-size: 1.66666667rem;
}
.molecule-group-toggle .group-toggle__container .group-toggle__user-portrait .user-portrait__container {
  border: 0.20833333rem solid #fff;
  box-sizing: border-box;
  width: 3.54166667rem;
  height: 3.54166667rem;
}
.molecule-group-toggle .group-toggle__container .group-toggle__user-portrait .user-portrait__container .user-portrait__avatar {
  height: 1.66666667rem;
  width: 1.66666667rem;
  border-radius: 0;
  filter: var(--color-filter-white);
}
.molecule-group-toggle .group-toggle__container .state-switcher__container {
  align-self: center;
}
.molecule-limited-each .limited-each__container {
  display: flex;
}
.molecule-limited-each .limited-each__container .items-left {
  display: flex;
  align-self: center;
  font-weight: 600;
  font-size: 1.45833333rem;
  margin-left: 0.3125rem;
  color: #556474;
}
.styleguide__tooltip.ember-tooltip.limited-each-tooltip .tooltip-items {
  max-width: 41.66666667rem;
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.25rem;
}
.text-placeholder {
  display: block;
  width: 100%;
  height: 1.5625rem;
  border-radius: 0.41666667rem;
  background: #f5f5f8;
}
.text-placeholder.w20 {
  width: 20%;
}
.text-placeholder.w35 {
  width: 35%;
}
.text-placeholder.w50 {
  width: 50%;
}
.molecule-skeleton-component.loading {
  position: relative;
  overflow: hidden;
}
.molecule-skeleton-component.loading::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: loading 2s infinite;
  top: 0;
}
@keyframes loading {
  100% {
    transform: translateX(100%);
  }
}
.molecule-skeleton-component.category {
  padding: 0.78rem 1.56rem;
  border-bottom: 1px solid #e9eaef;
}
.molecule-skeleton-component.skeleton-checkbox .flex-wrapper {
  display: flex;
  align-items: center;
  margin-top: 1.04166667rem;
}
.molecule-skeleton-component.skeleton-checkbox .checkbox {
  width: 1.5625rem;
  height: 1.5625rem;
  border-radius: 0.41666667rem;
  margin-right: 0.52083333rem;
  background: #f5f5f8;
}
.molecule-skeleton-component.skeleton-square {
  display: flex;
  flex-direction: column;
  border-radius: 0.83333333rem;
  background: #ffffff;
  aspect-ratio: 1;
}
@supports not (aspect-ratio: 1) {
  .molecule-skeleton-component.skeleton-square {
    height: 100%;
  }
}
.molecule-skeleton-component.skeleton-square .square {
  width: 100%;
  height: 100%;
  background: #e9eaef;
}
.molecule-skeleton-component.skeleton-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 26.5625rem;
  border-radius: 0.83333333rem;
  background: #ffffff;
}
.molecule-skeleton-component.skeleton-content .image {
  width: 100%;
  height: 13.4375rem;
  background: #e9eaef;
}
.molecule-skeleton-component.skeleton-content .text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 13.125rem;
  padding: 2.08333333rem;
  box-sizing: border-box;
}
.molecule-skeleton-component.skeleton-content .text-wrapper .text-placeholder:not(:first-child) {
  margin-top: 1.04166667rem;
}
.molecule-skeleton-component.skeleton-filter {
  padding: 1.45833333rem 0;
}
.molecule-skeleton-component.skeleton-filter.loading::after {
  background: linear-gradient(90deg, transparent, rgba(233, 234, 239, 0.5), transparent);
}
.molecule-skeleton-component.skeleton-filter .text-placeholder {
  background: #d1d3de;
}
.molecule-skeleton-component.skeleton-folder {
  display: flex;
  flex-direction: column;
  width: 19.79166667rem;
  height: 18.75rem;
  padding: 1.04166667rem;
  box-sizing: content-box;
}
.molecule-skeleton-component.skeleton-folder .folder {
  width: 100%;
  height: 13.33333333rem;
  border-radius: 0.41666667rem;
  background: #e9eaef;
}
.molecule-skeleton-component.skeleton-folder .text-wrapper {
  width: 100%;
  height: 2.5rem;
  margin-left: 0;
}
.molecule-skeleton-component.skeleton-folder .text-placeholder {
  margin-top: 0.83333333rem;
}
.molecule-skeleton-component.skeleton-folder .text-placeholder:first-of-type {
  background: #d1d3de;
}
.molecule-skeleton-component.skeleton-featured {
  display: flex;
  justify-content: center;
  width: 39.79166667rem;
  height: 14.375rem;
  box-sizing: border-box;
  border-radius: 8px;
  background: #ffffff;
}
.molecule-skeleton-component.skeleton-featured .fc-image,
.molecule-skeleton-component.skeleton-featured .fc-content {
  width: 50%;
}
.molecule-skeleton-component.skeleton-featured .fc-image {
  background: #e9eaef;
  border-radius: 8px 0 0 8px;
}
.molecule-skeleton-component.skeleton-featured .fc-text {
  width: 100%;
  box-sizing: border-box;
  padding: 1.66666667rem;
}
.molecule-skeleton-component.skeleton-featured .fc-text .fc-header {
  line-height: 2.5rem;
  background: #e9eaef;
  width: 100%;
}
.molecule-skeleton-component.skeleton-featured .fc-text .fc-desc {
  line-height: 1.875rem;
  background: #e9eaef;
  width: 100%;
}
.molecule-skeleton-component.skeleton-featured .text-placeholder {
  margin-top: 1.04166667rem;
}
.molecule-skeleton-component.skeleton-featured .text-placeholder:first-of-type {
  background: #e9eaef;
}
.molecule-skeleton-component.skeleton-score-progress-bar {
  display: flex;
  width: 100%;
}
.molecule-skeleton-component.skeleton-score-progress-bar .score-progress-bar {
  position: relative;
  width: 100%;
}
.molecule-skeleton-component.skeleton-score-progress-bar .score-progress-bar .progress-bar {
  height: 1.25rem;
  background-color: #d1d3de;
  width: 100%;
  position: relative;
  border-radius: 0.625rem;
}
.molecule-skeleton-component.skeleton-score-indicator {
  display: flex;
}
.molecule-skeleton-component.skeleton-score-indicator .score-indicator {
  width: 3.33333333rem;
  height: 2.5rem;
  border-radius: 0.41666667rem;
  line-height: 2.5rem;
  background-color: #d1d3de;
}
.molecule-skeleton-component.skeleton-goal-indicator {
  display: flex;
}
.molecule-skeleton-component.skeleton-goal-indicator .goal-indicator {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #d1d3de;
}
.molecule-tag-list-component {
  display: inline-block;
  width: 100%;
}
.molecule-tag-list-component label {
  text-align: left;
  color: #3f4c5a;
  font-size: 1.5625rem;
  font-weight: 600;
  letter-spacing: 0;
}
.molecule-tag-list-component ::-ms-clear {
  display: none;
}
.molecule-tag-list-component .tag__error-message__container {
  height: 1.77083333rem;
  margin-top: 0.52083333rem;
}
.molecule-tag-list-component .tag__error-message__container .tag__error-message {
  text-align: right;
  font-size: 1.25rem;
  line-height: 1.25rem;
  color: #ed1c24;
}
.molecule-tag-list-component .tags__container {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 2px;
  min-height: 2.91666667rem;
  padding: 0.625rem;
  margin-top: 0.41666667rem;
  box-shadow: 0 0 0 1px #d1d3de;
}
.molecule-tag-list-component .tags__container:focus-within {
  box-shadow: 0 0 0 1px #277cd9;
}
.molecule-tag-list-component .tags__container.invalid {
  box-shadow: 0 0 0 1px #ed1c24;
}
.molecule-tag-list-component .tags__container .error-icon {
  position: absolute;
  bottom: 11px;
  right: 11px;
}
.molecule-tag-list-component .tags__container .error-icon .icon--graphics {
  fill: #ed1c24;
  color: #ed1c24;
}
.molecule-tag-list-component .tags__container .add__tags {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.molecule-tag-list-component .tags__container .add__tags .tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 1.45833333rem;
  line-height: 1.45833333rem;
  background-color: #277cd9;
  border-radius: 1.04166667rem;
  padding: 3px;
  margin: 2px 5px;
}
.molecule-tag-list-component .tags__container .add__tags .tag .icon__container .flat__icon {
  height: 0.72916667rem;
  width: 0.72916667rem;
  margin-right: 0.625rem;
}
.molecule-tag-list-component .tags__container .add__tags .tag .icon__container .flat__icon .icon--graphics {
  fill: #fff;
  color: #fff;
}
.molecule-tag-list-component .tags__container .add__tags .tag.invalid {
  color: #ed1c24;
  background-color: #ed1c24;
}
.molecule-tag-list-component .tags__container .add__tags .tag span {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  font-size: 1.04166667rem;
  padding: 0 0.72916667rem;
}
.molecule-tag-list-component .tags__container .add__tags input {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  flex-grow: 1;
  font-size: 1.66666667rem;
  box-sizing: border-box;
  border: none;
  outline: none;
  box-shadow: none;
  height: 2.60416667rem;
  padding: 0.625rem 0;
  margin-left: 0.52083333rem;
}
.user-label {
  display: flex;
  width: fit-content;
  height: 4.16666667rem;
  margin: 0.26041667rem;
  padding: 0rem 0.83333333rem;
  border-radius: 0.41666667rem;
  align-items: center;
  background-color: #e9eaef;
}
.user-label .user-label__name {
  margin: 0 1.04166667rem;
}
.user-label .user-portrait__container {
  width: 2.5rem;
  height: 2.5rem;
}
.user-label .user-portrait__initials {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.875rem;
  text-align: center;
}
.user-label .button__icon {
  width: 1.14583333rem;
  height: 1.14583333rem;
}
.user-label.is-loader .user-label__name {
  width: 9rem;
  height: 1.5rem;
  background: linear-gradient(90deg, #f5f5f8 0%, #e9eaef 50%, #f5f5f8 100%);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.groups-students-label {
  display: flex;
  align-items: center;
}
.groups-students-label .user-portrait__container {
  border: 0.10416667rem solid #fff;
  width: 2.5rem;
  height: 2.5rem;
}
.groups-students-label .user-portrait__initials {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.875rem;
  text-align: center;
}
.molecule-loading-indicator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.molecule-loading-indicator .loading-indicator__spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.83333333rem 0;
}
.molecule-loading-indicator .loading-indicator__spinner .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.molecule-loading-indicator p {
  text-align: center;
  line-height: 2.5rem;
  font-size: 1.66666667rem;
}
.molecule-loading-indicator .loading-indicator__heading {
  text-align: center;
  font-weight: 600;
}
.lesson-suggestion.text {
  display: block;
  line-height: 150%;
  margin-bottom: 0.83333333rem;
}
.lesson-suggestion.text img.icon--markdown {
  width: 2.08333333rem;
  height: 2.08333333rem;
  margin-right: 0.83333333rem;
  margin-top: -0.52083333rem;
  vertical-align: middle;
}
.lesson-suggestion.content-item {
  display: inline-block;
}
.lesson-suggestion.content-item:hover .item-wrapper .image-wrapper {
  border: 1px solid #4e92ff;
  box-shadow: 0 0 0 1px #4e92ff;
}
.lesson-suggestion.content-item:hover .item-wrapper span {
  color: #4e92ff;
}
.lesson-suggestion.content-item:active .item-wrapper .image-wrapper {
  border: 1px solid #2465ab;
  box-shadow: 0 0 0 1px #2465ab;
}
.lesson-suggestion.content-item:active .item-wrapper span {
  color: #2465ab;
}
.lesson-suggestion.content-item .item-wrapper {
  max-width: 17.70833333rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0.83333333rem 1.66666667rem 0.83333333rem 0;
  cursor: pointer;
  position: relative;
  text-align: center;
}
.lesson-suggestion.content-item .item-wrapper .image-wrapper {
  width: 17.70833333rem;
  height: 12.91666667rem;
  margin-bottom: 0.83333333rem;
  border: 1px solid #aeb7c2;
  border-radius: 0.41666667rem;
  padding: 0.10416667rem;
  background: #ffffff;
}
.lesson-suggestion.content-item .item-wrapper .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-suggestion.content-item .item-wrapper span {
  font-size: 1.66666667rem;
  font-weight: 600;
  color: #277cd9;
}
.lesson-suggestion.content-item .item-wrapper .type {
  position: absolute;
  left: 0;
  margin: 0.83333333rem;
  padding: 0.20833333rem 0.9375rem;
  border: 1px solid;
  border-radius: 0.41666667rem;
  font-weight: 600;
  color: #3f4c5a;
  border-color: #aeb7c2;
  background-color: #e9eaef;
}
.lesson-suggestion.content-item .item-wrapper .type.type--tool {
  color: #45521e;
  border-color: #98bb30;
  background-color: #e6f6b6;
}
.lesson-suggestion.content-item .item-wrapper .type.type--instruction_lesson {
  color: #3a1d58;
  border-color: #a05fe3;
  background-color: #d9b9f8;
}
.lesson-suggestion.content-item .item-wrapper .type.type--presentation {
  color: #571e3a;
  border-color: #e260a0;
  background-color: #f8bad9;
}
.lesson-suggestion.content-item .item-wrapper .type.type--activity {
  color: #1a455b;
  border-color: #59b6e8;
  background-color: #b7e3fa;
}
.lesson-suggestion.content-item .item-wrapper .type.type--template {
  color: #574a0a;
  border-color: #d3b109;
  background-color: #ffef9e;
}
.lesson-suggestion.content-item .item-wrapper .type.type--practice_serie {
  color: #1e2848;
  border-color: #5a79d8;
  background-color: #afc0f3;
}
.lesson-suggestion.content-item .item-wrapper .type.type--interactive_question {
  color: #1e4833;
  border-color: #34ad70;
  background-color: #aff3d1;
}
.lesson-suggestion.loading {
  width: 17.70833333rem;
  height: 12.91666667rem;
  margin: 0.83333333rem 1.66666667rem 0.83333333rem 0;
}
.lesson-suggestion.loading .flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.alert-box {
  display: flex;
  text-align: left;
  border-radius: 0.41666667rem;
  padding: 1.25rem;
  width: 100%;
}
.alert-box .alert-box__icon-container {
  margin: 0.41666667rem 0.83333333rem 0 0;
  display: flex;
  justify-content: flex-start;
}
.alert-box .alert-box__message {
  color: #556474;
  font-size: 1.66666667rem;
  line-height: 150%;
  margin: 0;
}
.alert-box.state--info {
  background-color: #d4eefc;
}
.alert-box.state--info .alert-box__message {
  color: #1a455b;
}
.alert-box.state--info .flat__icon .icon--graphics {
  fill: #1a455b;
  color: #1a455b;
}
.alert-box.state--error {
  background-color: #fee7e7;
}
.alert-box.state--error .flat__icon .icon--graphics {
  fill: #e64545;
  color: #e64545;
}
.alert-box.state--warning {
  background-color: #fff4bd;
}
.alert-box.state--warning .alert-box__message {
  color: #574a0a;
}
.alert-box.state--warning .flat__icon .icon--graphics {
  fill: #574a0a;
  color: #574a0a;
}
.alert-box.state--success {
  background-color: #dcfbd5;
}
.alert-box.state--success .alert-box__message {
  color: #28571e;
}
.alert-box.state--success .flat__icon .icon--graphics {
  fill: #28571e;
  color: #28571e;
}
.dropdown-chip-container {
  position: relative;
}
.dropdown-chip-container .chip-label-section {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 4.16666667rem;
  max-width: 100%;
  gap: var(--size-gap-02-rem, 0.83333333rem);
  padding: 0 var(--size-gap-03-rem, 1.25rem) 0 var(--size-gap-04-rem, 1.66666667rem);
  border: 1px solid var(--component-dropdown-unselected-border-default);
  border-radius: 0.83333333rem;
  background-color: #ffffff;
  overflow: clip;
  transition: 0.2s;
  cursor: pointer;
}
.dropdown-chip-container .chip-label-section .chip-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--component-dropdown-label-default);
  font-size: 1.66666667rem;
  line-height: 2.5rem;
  text-align: left;
}
.dropdown-chip-container .chip-label-section .flat__icon .icon--graphics {
  fill: var(--component-dropdown-label-default);
  color: var(--component-dropdown-label-default);
}
.dropdown-chip-container .chip-label-section:hover {
  background-color: #effaff;
}
.dropdown-chip-container .chip-label-section:focus-visible:enabled {
  outline: 2px solid var(--component-button-outlined-stroke);
  outline-offset: -2px;
}
.dropdown-chip-container .chip-label-section.selected {
  border-color: transparent;
  background-color: var(--component-button-tonal-bg-default);
}
.dropdown-chip-container .chip-label-section.selected .chip-label {
  color: var(--component-button-tonal-label);
}
.dropdown-chip-container .chip-label-section.selected .flat__icon .icon--graphics {
  fill: var(--component-button-tonal-label);
  color: var(--component-button-tonal-label);
}
.dropdown-chip-container .chip-label-section.open {
  border-color: var(--component-button-outlined-stroke);
  background-color: var(--component-button-outlined-bg-active);
}
.dropdown-chip-container .chip-label-section.open .chip-label {
  color: var(--component-button-outlined-label);
}
.dropdown-chip-container .chip-label-section.open .flat__icon .icon--graphics {
  fill: var(--component-button-outlined-label);
  color: var(--component-button-outlined-label);
}
.dropdown-chip-container .chip-options-container {
  position: absolute;
  top: calc(4.16666667rem + 8 * 0.10416667rem);
  background-color: #ffffff;
  padding: 0.83333333rem 0;
  border-radius: 0.83333333rem;
  box-shadow: 0 0.20833333rem 0.625rem 0.20833333rem rgba(0, 0, 0, 0.15), 0 0.10416667rem 0.20833333rem 0 rgba(0, 0, 0, 0.3);
  z-index: 10;
  width: 20.83333333rem;
  max-height: 50vh;
  overflow-y: auto;
}
.dropdown-chip-container .chip-options-container .option:hover {
  background-color: #e9eaef;
  cursor: pointer;
}
.dropdown-chip-container .chip-options-container .option .option-checkbox {
  display: inline-block;
  accent-color: var(--color-differentiation-sky-10);
  width: 1.45833333rem;
  height: 1.45833333rem;
  margin-right: 0.83333333rem;
  margin-left: 1.25rem;
}
.dropdown-chip-container .chip-options-container .option .option-checkbox:hover {
  cursor: pointer;
}
.dropdown-chip-container .chip-options-container .option label {
  font-size: 1.45833333rem;
  color: #556474;
  margin-bottom: 0;
  width: 100%;
  text-align: left;
  padding: 0.83333333rem 1.25rem 0.83333333rem 0;
}
.dropdown-chip-container .chip-options-container .option label:hover {
  cursor: pointer;
}
.action-selection-chip {
  display: inline-flex;
  align-items: center;
  padding: 1.25rem 1.66666667rem;
  background-color: #f5f5f8;
  border-radius: 3.75rem;
}
.action-selection-chip .button-icon--close {
  margin-right: 2.5rem;
}
.action-selection-chip .chip-text {
  font-size: 1.66666667rem;
  font-weight: 600;
  line-height: 150%;
  color: #556474;
}
.action-selection-chip .chip-actions {
  display: flex;
  margin-left: 3.33333333rem;
}
.action-selection-chip .chip-actions > *:not(:last-child) {
  margin-right: 2.5rem;
}
.action-selection-chip .chip-actions .styleguide.svg__icon,
.action-selection-chip .chip-actions .styleguide.flat__icon {
  height: 2.5rem;
  width: 2.5rem;
}
.action-selection-chip .chip-actions .styleguide.button-icon {
  height: 2.5rem;
  width: 2.5rem;
}
/**
 * Table cells
 */
.cell__regular {
  vertical-align: middle;
  position: relative;
  padding: 0.5rem;
  text-align: left;
  overflow: hidden;
}
.cell__regular.align-top {
  vertical-align: top;
}
.cell__regular::after {
  content: ' ';
  position: absolute;
  width: 1px;
  right: 0;
  top: 10px;
  bottom: 10px;
  z-index: 5;
}
@media all and (-ms-high-contrast: none) {
  .cell__regular {
    border-right-width: 1px;
    border-right-style: solid;
  }
  .cell__regular::after {
    content: none;
  }
}
.cell__regular:first-of-type {
  padding-left: 3.12rem;
}
.cell__regular:last-of-type {
  padding-right: 3.12rem;
  border-right-width: 0;
}
.cell__regular:last-of-type::after {
  content: none;
}
.cell__regular::after {
  background: rgba(0, 0, 0, 0.15);
}
@media all and (-ms-high-contrast: none) {
  .cell__regular {
    border-right-color: rgba(0, 0, 0, 0.15);
  }
}
.table__header__regular {
  vertical-align: middle;
  position: relative;
  padding: 0.6rem;
  text-align: left;
  font-size: 1.45rem;
  line-height: 1.98rem;
  font-family: 'Open Sans', sans-serif;
  color: #2a3541;
  font-weight: 600;
}
.table__header__regular::after {
  content: ' ';
  position: absolute;
  width: 1px;
  right: 0;
  top: 10px;
  bottom: 10px;
}
.table__header__regular:first-of-type {
  padding-left: 3.12rem;
}
.table__header__regular:last-of-type {
  padding-right: 3.12rem;
}
.table__header__regular:last-of-type::after {
  content: none;
}
.table__header__regular.header-cell-size-small {
  width: 10%;
}
.table__header__regular.header-cell-size-normal {
  width: 25%;
}
.table__header__regular.header-cell-size-large {
  width: 50%;
}
.styleguide.table__header__sort .table__header__sort__container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: flex-start;
}
.styleguide.table__header__sort .table__header__sort__container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.table__header__sort .table__header__sort__container.column {
  flex-direction: column;
}
.styleguide.table__header__sort .table__header__sort__container.end {
  justify-content: flex-end;
}
.styleguide.table__header__sort .table__header__sort__container.start {
  justify-content: flex-start;
}
.styleguide.table__header__sort .table__header__sort__container.flex-center {
  justify-content: center;
}
.styleguide.table__header__sort .table__header__sort__container.between {
  justify-content: space-between;
}
.styleguide.table__header__sort .table__header__sort__container.around {
  justify-content: space-around;
}
.styleguide.table__header__sort .table__header__sort__container.cross-start {
  align-items: flex-start;
}
.styleguide.table__header__sort .table__header__sort__container.cross-end {
  align-items: flex-end;
}
.styleguide.table__header__sort .table__header__sort__container.stretch {
  align-items: stretch;
}
.styleguide.table__header__sort .table__header__sort__container.evenly {
  justify-content: space-evenly;
}
.styleguide.table__header__sort .table__header__sort__container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.table__header__sort .table__header__sort__container.wrap {
  flex-wrap: wrap;
}
.styleguide.table__header__sort .table__header__sort__container.grow {
  flex: 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-half,
.styleguide.table__header__sort .table__header__sort__container .flex-quarter,
.styleguide.table__header__sort .table__header__sort__container .flex-sixth,
.styleguide.table__header__sort .table__header__sort__container .flex-third,
.styleguide.table__header__sort .table__header__sort__container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.table__header__sort .table__header__sort__container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.table__header__sort .table__header__sort__container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.table__header__sort .table__header__sort__toggle {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 0.3rem;
  cursor: pointer;
}
.styleguide.table__header__sort .table__header__sort__toggle.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.table__header__sort .table__header__sort__toggle.column {
  flex-direction: column;
}
.styleguide.table__header__sort .table__header__sort__toggle.end {
  justify-content: flex-end;
}
.styleguide.table__header__sort .table__header__sort__toggle.start {
  justify-content: flex-start;
}
.styleguide.table__header__sort .table__header__sort__toggle.flex-center {
  justify-content: center;
}
.styleguide.table__header__sort .table__header__sort__toggle.between {
  justify-content: space-between;
}
.styleguide.table__header__sort .table__header__sort__toggle.around {
  justify-content: space-around;
}
.styleguide.table__header__sort .table__header__sort__toggle.cross-start {
  align-items: flex-start;
}
.styleguide.table__header__sort .table__header__sort__toggle.cross-end {
  align-items: flex-end;
}
.styleguide.table__header__sort .table__header__sort__toggle.stretch {
  align-items: stretch;
}
.styleguide.table__header__sort .table__header__sort__toggle.evenly {
  justify-content: space-evenly;
}
.styleguide.table__header__sort .table__header__sort__toggle.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.table__header__sort .table__header__sort__toggle.wrap {
  flex-wrap: wrap;
}
.styleguide.table__header__sort .table__header__sort__toggle.grow {
  flex: 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-half,
.styleguide.table__header__sort .table__header__sort__toggle .flex-quarter,
.styleguide.table__header__sort .table__header__sort__toggle .flex-sixth,
.styleguide.table__header__sort .table__header__sort__toggle .flex-third,
.styleguide.table__header__sort .table__header__sort__toggle .flex-two-third {
  box-sizing: border-box;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-grow-1 {
  flex: 1 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-grow-2 {
  flex: 2 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-grow-3 {
  flex: 3 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-grow-4 {
  flex: 4 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-grow-5 {
  flex: 5 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-grow-6 {
  flex: 6 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-grow-7 {
  flex: 7 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flex-grow-8 {
  flex: 8 1;
}
.styleguide.table__header__sort .table__header__sort__toggle .flat__icon {
  width: 1.4rem;
  height: 1.4rem;
}
.styleguide.table__header__sort .table-header__sort__title {
  cursor: pointer;
}
.styleguide.table__header__sort .typo-title-section {
  margin-bottom: 0;
}
.styleguide.table__header__sort .table__header__sort__toggle .flat__icon {
  width: 1.4rem;
  height: 1.4rem;
}
.styleguide.table__header__sort .table__header__sort__toggle .flat__icon .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.table__header__scroll {
  padding: 0 3.12rem;
  overflow: hidden;
}
.table__header__scroll .table__header__scroll__container {
  position: relative;
}
.table__header__scroll .table__header__scroll__container .cell__scroll__yield__container {
  display: inline-block;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.table__header__scroll .table__header__scroll__container .cell__scroll__yield__container .cell__scroll__yield {
  transition: margin 0.5s ease;
  z-index: 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column,
.table__header__scroll .table__header__scroll__container .scroll__right__column {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  width: 3rem;
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 2;
  background: #fff;
  transition: opacity 0.5s ease;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.row-reverse,
.table__header__scroll .table__header__scroll__container .scroll__right__column.row-reverse {
  flex-direction: row-reverse;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.column,
.table__header__scroll .table__header__scroll__container .scroll__right__column.column {
  flex-direction: column;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.end,
.table__header__scroll .table__header__scroll__container .scroll__right__column.end {
  justify-content: flex-end;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.start,
.table__header__scroll .table__header__scroll__container .scroll__right__column.start {
  justify-content: flex-start;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.flex-center,
.table__header__scroll .table__header__scroll__container .scroll__right__column.flex-center {
  justify-content: center;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.between,
.table__header__scroll .table__header__scroll__container .scroll__right__column.between {
  justify-content: space-between;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.around,
.table__header__scroll .table__header__scroll__container .scroll__right__column.around {
  justify-content: space-around;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.cross-start,
.table__header__scroll .table__header__scroll__container .scroll__right__column.cross-start {
  align-items: flex-start;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.cross-end,
.table__header__scroll .table__header__scroll__container .scroll__right__column.cross-end {
  align-items: flex-end;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.stretch,
.table__header__scroll .table__header__scroll__container .scroll__right__column.stretch {
  align-items: stretch;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.evenly,
.table__header__scroll .table__header__scroll__container .scroll__right__column.evenly {
  justify-content: space-evenly;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.overlay-dark,
.table__header__scroll .table__header__scroll__container .scroll__right__column.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.wrap,
.table__header__scroll .table__header__scroll__container .scroll__right__column.wrap {
  flex-wrap: wrap;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.grow,
.table__header__scroll .table__header__scroll__container .scroll__right__column.grow {
  flex: 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-half,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-half,
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-quarter,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-quarter,
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-sixth,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-sixth,
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-third,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-third,
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-two-third,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-two-third {
  box-sizing: border-box;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-remaining-space,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-remaining-space {
  flex-grow: 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-grow-1,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-grow-1 {
  flex: 1 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-grow-2,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-grow-2 {
  flex: 2 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-grow-3,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-grow-3 {
  flex: 3 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-grow-4,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-grow-4 {
  flex: 4 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-grow-5,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-grow-5 {
  flex: 5 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-grow-6,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-grow-6 {
  flex: 6 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-grow-7,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-grow-7 {
  flex: 7 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flex-grow-8,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flex-grow-8 {
  flex: 8 1;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flat__icon,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flat__icon {
  width: 1.6rem;
  height: 1.6rem;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column .flat__icon .icon--graphics,
.table__header__scroll .table__header__scroll__container .scroll__right__column .flat__icon .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.scrolling-header::before,
.table__header__scroll .table__header__scroll__container .scroll__right__column.scrolling-header::before {
  content: ' ';
  position: absolute;
  height: 100%;
  width: 5rem;
  top: 0;
  pointer-events: none;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.data-column-disabled,
.table__header__scroll .table__header__scroll__container .scroll__right__column.data-column-disabled {
  opacity: 0.5;
  cursor: default;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.data-column-disabled.scrolling-header::before,
.table__header__scroll .table__header__scroll__container .scroll__right__column.data-column-disabled.scrolling-header::before {
  background-image: none !important;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column {
  left: -3.12rem;
}
.table__header__scroll .table__header__scroll__container .scroll__left__column.scrolling-header::before {
  right: -5rem;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.1), #fff);
}
.table__header__scroll .table__header__scroll__container .scroll__right__column {
  right: -3.12rem;
}
.table__header__scroll .table__header__scroll__container .scroll__right__column.scrolling-header::before {
  left: -5rem;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1), #fff);
}
.table__header__scroll .scroll__left__column,
.table__header__scroll .scroll__right__column {
  color: #277cd9;
}
.table__header__scroll .scroll__left__column {
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}
.table__header__scroll .scroll__right__column {
  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}
.table__header__text {
  text-overflow: ellipsis;
}
.cell__scroll {
  overflow: hidden;
  padding-left: 3.12rem;
  padding-right: 3.12rem;
}
.cell__scroll .cell__scroll__container {
  position: relative;
}
.cell__scroll .cell__scroll__container .cell__scroll__yield__container {
  display: flex;
}
.cell__scroll .cell__scroll__container .cell__scroll__yield__container.scroll_left_to_right {
  flex-direction: row;
}
.cell__scroll .cell__scroll__container .cell__scroll__yield__container.scroll_right_to_left {
  flex-direction: row-reverse;
}
.cell__scroll .cell__scroll__container .cell__scroll__yield__container .cell__scroll__yield {
  transition: margin 0.5s ease;
  z-index: 1;
  display: inline-block;
}
.cell__scroll .cell__scroll__container .cell__scroll__yield__container::before,
.cell__scroll .cell__scroll__container .cell__scroll__yield__container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3.12rem;
  z-index: 2;
}
.cell__scroll .cell__scroll__container .cell__scroll__yield__container::before {
  left: -3.12rem;
}
.cell__scroll .cell__scroll__container .cell__scroll__yield__container::after {
  right: -3.12rem;
}
.cell__text {
  text-overflow: ellipsis;
}
/**
 * Dropdown
 */
.styleguide.dropdown__basic__button {
  position: relative;
  border: 1px solid;
  box-sizing: border-box;
  user-select: none;
  -webkit-touch-callout: none;
  text-align: left;
  font-weight: 600;
  padding: 0;
  margin: 0;
  width: 100%;
  letter-spacing: 0.05rem;
}
.styleguide.dropdown__basic__button.ember-view {
  height: auto;
}
.styleguide.dropdown__basic__button .dropdown--container {
  align-items: stretch;
  overflow: hidden;
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button .dropdown--container .fixed--padding--left,
.styleguide.dropdown__basic__button .dropdown--container .container--icon,
.styleguide.dropdown__basic__button .dropdown--container .container--text,
.styleguide.dropdown__basic__button .dropdown--container .container--point--down {
  position: relative;
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button .dropdown--container .container--text {
  position: relative;
  overflow: hidden;
}
.styleguide.dropdown__basic__button .dropdown--container .container--text .text {
  white-space: nowrap;
  text-align: left;
}
.styleguide.dropdown__basic__button .dropdown--container .container--text .fade--out {
  position: absolute;
  box-sizing: border-box;
  border: none;
  top: 1px;
  right: 0;
  bottom: 1px;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down {
  display: inherit;
  border-left: 1px solid;
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-half,
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-quarter,
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-sixth,
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-third,
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button .dropdown--container .container--point--down .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.menu--item .container--text,
.styleguide.dropdown__basic__button.show--text .container--text {
  font-weight: 400;
}
.styleguide.dropdown__basic__button.menu--item .container--text .text,
.styleguide.dropdown__basic__button.show--text .container--text .text {
  white-space: normal;
}
.styleguide.dropdown__basic__button.menu--item .container--text .fade--out,
.styleguide.dropdown__basic__button.show--text .container--text .fade--out {
  display: none;
}
.styleguide.dropdown__basic__button.menu--item.selected .container--text,
.styleguide.dropdown__basic__button.show--text.selected .container--text {
  font-weight: 600;
}
.styleguide.dropdown__basic__button.menu--item .container--point--down,
.styleguide.dropdown__basic__button.show--text .container--point--down {
  display: none;
}
.styleguide.dropdown__basic__button.icon--hidden .container--icon {
  display: none;
}
.styleguide.dropdown__basic__button.menu--item {
  border-radius: 0;
}
.styleguide.dropdown__basic__button.menu--item .dropdown--container {
  border-radius: 0;
}
.styleguide.dropdown__basic__button.size--small {
  font-size: 1.25rem;
  line-height: 1.25rem;
}
.styleguide.dropdown__basic__button.size--small:not(.menu--item) {
  border-radius: 0.625rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container {
  border-radius: 0.625rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .fixed--padding--left,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--text,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down {
  min-height: 3.13rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .fixed--padding--left {
  width: 1.56rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon {
  width: calc(1.25rem + 0.83rem);
  padding-top: calc((3.13rem - 1.25rem)/2);
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon {
  min-width: 1.25rem;
  width: 1.25rem;
  max-width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  max-height: 1.25rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 1.25rem;
  width: 1.25rem;
  max-width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  max-height: 1.25rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--text .text {
  margin: calc((3.13rem - 1.25rem)/2) 0;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--text .fade--out {
  width: 3.13rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down {
  min-width: 3.13rem;
  width: 3.13rem;
  max-width: 3.13rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon {
  min-width: 1.25rem;
  width: 1.25rem;
  max-width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  max-height: 1.25rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 1.25rem;
  width: 1.25rem;
  max-width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  max-height: 1.25rem;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.size--small.menu--item .container--text,
.styleguide.dropdown__basic__button.size--small.show--text .container--text {
  padding-right: 0.83rem;
}
.styleguide.dropdown__basic__button.size--small.flatten--top--border,
.styleguide.dropdown__basic__button.size--small.flatten--top--border .dropdown--container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.styleguide.dropdown__basic__button.size--small.flatten--bottom--border,
.styleguide.dropdown__basic__button.size--small.flatten--bottom--border .dropdown--container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.dropdown__basic__button.size--normal {
  font-size: 1.66666667rem;
  line-height: 1.66666667rem;
}
.styleguide.dropdown__basic__button.size--normal:not(.menu--item) {
  border-radius: 0.83333333rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container {
  border-radius: 0.83333333rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .fixed--padding--left,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--text,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down {
  min-height: 4.17rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .fixed--padding--left {
  width: 2.08rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon {
  width: calc(1.6666666666666667rem + 0.94rem);
  padding-top: calc((4.17rem - 1.6666666666666667rem)/2);
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon {
  min-width: 1.66666667rem;
  width: 1.66666667rem;
  max-width: 1.66666667rem;
  min-height: 1.66666667rem;
  height: 1.66666667rem;
  max-height: 1.66666667rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 1.66666667rem;
  width: 1.66666667rem;
  max-width: 1.66666667rem;
  min-height: 1.66666667rem;
  height: 1.66666667rem;
  max-height: 1.66666667rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--text .text {
  margin: calc((4.17rem - 1.6666666666666667rem)/2) 0;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--text .fade--out {
  width: 4.17rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down {
  min-width: 4.17rem;
  width: 4.17rem;
  max-width: 4.17rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon {
  min-width: 1.66666667rem;
  width: 1.66666667rem;
  max-width: 1.66666667rem;
  min-height: 1.66666667rem;
  height: 1.66666667rem;
  max-height: 1.66666667rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 1.66666667rem;
  width: 1.66666667rem;
  max-width: 1.66666667rem;
  min-height: 1.66666667rem;
  height: 1.66666667rem;
  max-height: 1.66666667rem;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.size--normal.menu--item .container--text,
.styleguide.dropdown__basic__button.size--normal.show--text .container--text {
  padding-right: 0.94rem;
}
.styleguide.dropdown__basic__button.size--normal.flatten--top--border,
.styleguide.dropdown__basic__button.size--normal.flatten--top--border .dropdown--container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.styleguide.dropdown__basic__button.size--normal.flatten--bottom--border,
.styleguide.dropdown__basic__button.size--normal.flatten--bottom--border .dropdown--container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.dropdown__basic__button.size--large {
  font-size: 2.19rem;
  line-height: 2.19rem;
}
.styleguide.dropdown__basic__button.size--large:not(.menu--item) {
  border-radius: 1.04166667rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container {
  border-radius: 1.04166667rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .fixed--padding--left,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--text,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down {
  min-height: 5.21rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .fixed--padding--left {
  width: 2.6rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon {
  width: calc(2.19rem + 1.25rem);
  padding-top: calc((5.21rem - 2.19rem)/2);
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon {
  min-width: 2.19rem;
  width: 2.19rem;
  max-width: 2.19rem;
  min-height: 2.19rem;
  height: 2.19rem;
  max-height: 2.19rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 2.19rem;
  width: 2.19rem;
  max-width: 2.19rem;
  min-height: 2.19rem;
  height: 2.19rem;
  max-height: 2.19rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--text .text {
  margin: calc((5.21rem - 2.19rem)/2) 0;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--text .fade--out {
  width: 5.21rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down {
  min-width: 5.21rem;
  width: 5.21rem;
  max-width: 5.21rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon {
  min-width: 2.19rem;
  width: 2.19rem;
  max-width: 2.19rem;
  min-height: 2.19rem;
  height: 2.19rem;
  max-height: 2.19rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 2.19rem;
  width: 2.19rem;
  max-width: 2.19rem;
  min-height: 2.19rem;
  height: 2.19rem;
  max-height: 2.19rem;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.size--large.menu--item .container--text,
.styleguide.dropdown__basic__button.size--large.show--text .container--text {
  padding-right: 1.25rem;
}
.styleguide.dropdown__basic__button.size--large.flatten--top--border,
.styleguide.dropdown__basic__button.size--large.flatten--top--border .dropdown--container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.styleguide.dropdown__basic__button.size--large.flatten--bottom--border,
.styleguide.dropdown__basic__button.size--large.flatten--bottom--border .dropdown--container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.dropdown__basic__button.audience--board.size--small {
  font-size: 12px;
  line-height: 12px;
}
.styleguide.dropdown__basic__button.audience--board.size--small:not(.menu--item) {
  border-radius: 5px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container {
  border-radius: 5px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .fixed--padding--left,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--text,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down {
  min-height: 30px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .fixed--padding--left {
  width: 15px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon {
  width: calc(12px + 8px);
  padding-top: calc((30px - 12px)/2);
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon {
  min-width: 12px;
  width: 12px;
  max-width: 12px;
  min-height: 12px;
  height: 12px;
  max-height: 12px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 12px;
  width: 12px;
  max-width: 12px;
  min-height: 12px;
  height: 12px;
  max-height: 12px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--text .text {
  margin: calc((30px - 12px)/2) 0;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--text .fade--out {
  width: 30px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down {
  min-width: 30px;
  width: 30px;
  max-width: 30px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon {
  min-width: 12px;
  width: 12px;
  max-width: 12px;
  min-height: 12px;
  height: 12px;
  max-height: 12px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 12px;
  width: 12px;
  max-width: 12px;
  min-height: 12px;
  height: 12px;
  max-height: 12px;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.audience--board.size--small.menu--item .container--text,
.styleguide.dropdown__basic__button.audience--board.size--small.show--text .container--text {
  padding-right: 8px;
}
.styleguide.dropdown__basic__button.audience--board.size--small.flatten--top--border,
.styleguide.dropdown__basic__button.audience--board.size--small.flatten--top--border .dropdown--container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.styleguide.dropdown__basic__button.audience--board.size--small.flatten--bottom--border,
.styleguide.dropdown__basic__button.audience--board.size--small.flatten--bottom--border .dropdown--container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.dropdown__basic__button.audience--board.size--normal {
  font-size: 16px;
  line-height: 16px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal:not(.menu--item) {
  border-radius: 6px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container {
  border-radius: 6px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .fixed--padding--left,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--text,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down {
  min-height: 40px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .fixed--padding--left {
  width: 20px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon {
  width: calc(16px + 9px);
  padding-top: calc((40px - 16px)/2);
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon {
  min-width: 16px;
  width: 16px;
  max-width: 16px;
  min-height: 16px;
  height: 16px;
  max-height: 16px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 16px;
  width: 16px;
  max-width: 16px;
  min-height: 16px;
  height: 16px;
  max-height: 16px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--text .text {
  margin: calc((40px - 16px)/2) 0;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--text .fade--out {
  width: 40px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down {
  min-width: 40px;
  width: 40px;
  max-width: 40px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon {
  min-width: 16px;
  width: 16px;
  max-width: 16px;
  min-height: 16px;
  height: 16px;
  max-height: 16px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 16px;
  width: 16px;
  max-width: 16px;
  min-height: 16px;
  height: 16px;
  max-height: 16px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.audience--board.size--normal.menu--item .container--text,
.styleguide.dropdown__basic__button.audience--board.size--normal.show--text .container--text {
  padding-right: 9px;
}
.styleguide.dropdown__basic__button.audience--board.size--normal.flatten--top--border,
.styleguide.dropdown__basic__button.audience--board.size--normal.flatten--top--border .dropdown--container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.styleguide.dropdown__basic__button.audience--board.size--normal.flatten--bottom--border,
.styleguide.dropdown__basic__button.audience--board.size--normal.flatten--bottom--border .dropdown--container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.dropdown__basic__button.audience--board.size--large {
  font-size: 21px;
  line-height: 21px;
}
.styleguide.dropdown__basic__button.audience--board.size--large:not(.menu--item) {
  border-radius: 8px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container {
  border-radius: 8px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .fixed--padding--left,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--text,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down {
  min-height: 50px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .fixed--padding--left {
  width: 25px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon {
  width: calc(21px + 12px);
  padding-top: calc((50px - 21px)/2);
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon {
  min-width: 21px;
  width: 21px;
  max-width: 21px;
  min-height: 21px;
  height: 21px;
  max-height: 21px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 21px;
  width: 21px;
  max-width: 21px;
  min-height: 21px;
  height: 21px;
  max-height: 21px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--icon .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--text .text {
  margin: calc((50px - 21px)/2) 0;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--text .fade--out {
  width: 50px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down {
  min-width: 50px;
  width: 50px;
  max-width: 50px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon {
  min-width: 21px;
  width: 21px;
  max-width: 21px;
  min-height: 21px;
  height: 21px;
  max-height: 21px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  min-width: 21px;
  width: 21px;
  max-width: 21px;
  min-height: 21px;
  height: 21px;
  max-height: 21px;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.column {
  flex-direction: column;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.end {
  justify-content: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.start {
  justify-content: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.flex-center {
  justify-content: center;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.between {
  justify-content: space-between;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.around {
  justify-content: space-around;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.cross-start {
  align-items: flex-start;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.cross-end {
  align-items: flex-end;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.stretch {
  align-items: stretch;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.evenly {
  justify-content: space-evenly;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.wrap {
  flex-wrap: wrap;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container.grow {
  flex: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-half,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-quarter,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-sixth,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-third,
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-two-third {
  box-sizing: border-box;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-1 {
  flex: 1 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-2 {
  flex: 2 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-3 {
  flex: 3 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-4 {
  flex: 4 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-5 {
  flex: 5 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-6 {
  flex: 6 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-7 {
  flex: 7 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large .dropdown--container .container--point--down .flat__icon .icon--container .flex-grow-8 {
  flex: 8 1;
}
.styleguide.dropdown__basic__button.audience--board.size--large.menu--item .container--text,
.styleguide.dropdown__basic__button.audience--board.size--large.show--text .container--text {
  padding-right: 12px;
}
.styleguide.dropdown__basic__button.audience--board.size--large.flatten--top--border,
.styleguide.dropdown__basic__button.audience--board.size--large.flatten--top--border .dropdown--container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.styleguide.dropdown__basic__button.audience--board.size--large.flatten--bottom--border,
.styleguide.dropdown__basic__button.audience--board.size--large.flatten--bottom--border .dropdown--container {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.styleguide.dropdown__basic__button:hover:not(.show--text),
.styleguide.dropdown__basic__button.hover:not(.show--text) {
  cursor: pointer;
}
/**
 * Because the gynzy-collors for 'button-dropdown' apply to all gynzy-buttons,
 * Therefore we defined the collors in button-base folder.
 */
.styleguide.gynzy.dropdown__basic__button.color--secondary {
  color: #556474;
  background-color: #ffffff;
  border-color: #d1d3de;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary .container--point--down {
  border-color: rgba(0, 0, 0, 0);
  border-left-color: #d1d3de;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary .fade--out {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 50%, #ffffff 100%);
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.hover:not(.disabled):not(.show--text),
.styleguide.gynzy.dropdown__basic__button.color--secondary:hover:not(.disabled):not(.show--text) {
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.hover:not(.disabled):not(.show--text) .icon--graphics,
.styleguide.gynzy.dropdown__basic__button.color--secondary:hover:not(.disabled):not(.show--text) .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.active:not(.disabled):not(.show--text),
.styleguide.gynzy.dropdown__basic__button.color--secondary:active:not(.disabled):not(.show--text) {
  color: #277cd9;
  background-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.active:not(.disabled):not(.show--text) .icon--graphics,
.styleguide.gynzy.dropdown__basic__button.color--secondary:active:not(.disabled):not(.show--text) .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.active:not(.disabled):not(.show--text) .fade--out,
.styleguide.gynzy.dropdown__basic__button.color--secondary:active:not(.disabled):not(.show--text) .fade--out {
  background: linear-gradient(to right, rgba(245, 245, 248, 0) 0%, #f5f5f8 50%, #f5f5f8 100%);
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.show--text {
  color: #8c99a8;
  background-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.show--text .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.show--text.flat--top {
  border-top-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.disabled {
  opacity: 0.5;
  cursor: default;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item {
  background-color: #f5f5f8;
  border-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.hover:not(.disabled),
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item:hover:not(.disabled) {
  background-color: #e9eaef;
  border-color: #e9eaef;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.hover:not(.disabled).flat--top,
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item:hover:not(.disabled).flat--top {
  border-top-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.hover:not(.disabled):not(.selected),
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item:hover:not(.disabled):not(.selected) {
  color: #556474;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.hover:not(.disabled):not(.selected) .icon--graphics,
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item:hover:not(.disabled):not(.selected) .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.selected {
  color: #277cd9;
  font-weight: 600;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.selected .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.active:not(.disabled),
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item:active:not(.disabled) {
  color: #277cd9;
  background-color: #e9eaef;
  border-color: #e9eaef;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.active:not(.disabled) .icon--graphics,
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item:active:not(.disabled) .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--secondary.menu--item.disabled {
  opacity: 0.5;
  cursor: default;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray {
  color: #556474;
  background-color: #ffffff;
  border-color: #d1d3de;
  color: #8c99a8;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray .container--point--down {
  border-color: rgba(0, 0, 0, 0);
  border-left-color: #d1d3de;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray .fade--out {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 50%, #ffffff 100%);
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.hover:not(.disabled):not(.show--text),
.styleguide.gynzy.dropdown__basic__button.color--regent-gray:hover:not(.disabled):not(.show--text) {
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.hover:not(.disabled):not(.show--text) .icon--graphics,
.styleguide.gynzy.dropdown__basic__button.color--regent-gray:hover:not(.disabled):not(.show--text) .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.active:not(.disabled):not(.show--text),
.styleguide.gynzy.dropdown__basic__button.color--regent-gray:active:not(.disabled):not(.show--text) {
  color: #277cd9;
  background-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.active:not(.disabled):not(.show--text) .icon--graphics,
.styleguide.gynzy.dropdown__basic__button.color--regent-gray:active:not(.disabled):not(.show--text) .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.active:not(.disabled):not(.show--text) .fade--out,
.styleguide.gynzy.dropdown__basic__button.color--regent-gray:active:not(.disabled):not(.show--text) .fade--out {
  background: linear-gradient(to right, rgba(245, 245, 248, 0) 0%, #f5f5f8 50%, #f5f5f8 100%);
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.show--text {
  color: #8c99a8;
  background-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.show--text .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.show--text.flat--top {
  border-top-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.disabled {
  opacity: 0.5;
  cursor: default;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item {
  background-color: #f5f5f8;
  border-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.hover:not(.disabled),
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item:hover:not(.disabled) {
  background-color: #e9eaef;
  border-color: #e9eaef;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.hover:not(.disabled).flat--top,
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item:hover:not(.disabled).flat--top {
  border-top-color: #f5f5f8;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.hover:not(.disabled):not(.selected),
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item:hover:not(.disabled):not(.selected) {
  color: #556474;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.hover:not(.disabled):not(.selected) .icon--graphics,
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item:hover:not(.disabled):not(.selected) .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.selected {
  color: #277cd9;
  font-weight: 600;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.selected .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.active:not(.disabled),
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item:active:not(.disabled) {
  color: #277cd9;
  background-color: #e9eaef;
  border-color: #e9eaef;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.active:not(.disabled) .icon--graphics,
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item:active:not(.disabled) .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.styleguide.gynzy.dropdown__basic__button.color--regent-gray.menu--item.disabled {
  opacity: 0.5;
  cursor: default;
}
.styleguide.gynzy.dropdown__basic {
  width: 100%;
}
.styleguide.gynzy.dropdown__basic .dropdown__basic-trigger {
  outline: none;
  z-index: 100;
}
.dropdown__basic-content {
  position: relative;
  border: 1px solid;
  overflow: hidden;
  box-sizing: border-box;
}
.dropdown__basic-content .arrow {
  position: absolute;
  z-index: 999;
}
.dropdown__basic-content .arrow .flat__icon {
  width: 1.2rem;
  height: 1.2rem;
}
.dropdown__basic-content .arrow.arrow--above {
  top: 0;
  left: 50%;
  display: none;
}
.dropdown__basic-content .arrow.arrow--below {
  bottom: 0;
  left: 50%;
  display: none;
}
.dropdown__basic-content .dropdown-search .input-field__dropdown-search input.styleguide.input__field__default {
  display: flex;
  flex-direction: row;
  align-self: center;
  border-radius: 0;
  padding-left: 4.8rem;
  border: 0;
  outline: 0.10416667rem solid #d1d3de;
}
.dropdown__basic-content .dropdown-search .input-field__dropdown-search .input-field-icon__icon {
  left: 2.1rem;
}
.dropdown__basic-content .dropdown-search .dropdown__menu {
  overflow-y: auto;
}
.dropdown__basic-content .dropdown-search .dropdown__menu .arrow--above {
  top: 4.16666667rem;
}
.dropdown__basic-content.size--small {
  border-radius: 0.625rem;
}
.dropdown__basic-content.size--normal {
  border-radius: 0.83333333rem;
}
.dropdown__basic-content.size--large {
  border-radius: 1.04166667rem;
}
.dropdown__basic-content.flatten--top--border {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.dropdown__basic-content.flatten--bottom--border {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dropdown__basic-content .menu--items {
  -webkit-overflow-scrolling: auto;
}
.dropdown__basic-content.ember-basic-dropdown-content {
  background-color: #f5f5f8;
  border-color: #d1d3de;
}
.dropdown__basic-content .arrow .flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.molecule-dropdown-menu {
  position: absolute;
  min-width: 21.875rem;
  border: 1px solid #d1d3de;
  background: #ffffff;
  border-radius: 5px;
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.molecule-dropdown-menu .menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5625rem;
}
.molecule-dropdown-menu .menu-header .flat__icon {
  cursor: pointer;
}
.molecule-dropdown-menu .menu-header .flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.molecule-dropdown-menu .menu-header .menu-title {
  text-align: left;
  color: #8c99a8;
  font-size: 1.5625rem;
  line-height: 1.5625rem;
  padding-right: 1.5625rem;
}
.molecule-dropdown-menu .menu-header .menu-title .title {
  white-space: nowrap;
}
.molecule-dropdown-menu-item {
  display: flex;
  padding: 1.45833333rem;
  cursor: pointer;
}
.molecule-dropdown-menu-item .styleguide.flat__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.molecule-dropdown-menu-item .styleguide.flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.molecule-dropdown-menu-item .styleguide.flat__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.molecule-dropdown-menu-item .text {
  color: #556474;
  padding-left: 1.45833333rem;
  font-size: 1.25rem;
  line-height: 1.25rem;
  width: max-content;
}
.molecule-dropdown-menu-item.disabled {
  cursor: default;
  opacity: 0.5;
}
.styleguide.date-picker-wrapper .date-picker {
  text-align: left;
  position: relative;
}
.styleguide.date-picker-wrapper .date-picker label {
  font-size: 1.4rem;
  color: #8c99a8;
  display: block;
  margin-bottom: 1rem;
}
.styleguide.date-picker-wrapper .date-picker input.styleguide.input__field__default.audience--teacher {
  padding-left: 4.5833rem;
}
.styleguide.date-picker-wrapper .date-picker .flat__icon {
  position: absolute;
  bottom: 1.25rem;
  left: 2.0833rem;
  width: 1.5625rem;
  height: 1.6667rem;
  z-index: 10;
}
.styleguide.date-picker-wrapper .date-picker .flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.styleguide.date-picker-wrapper.size--small input.styleguide.input__field__default.audience--teacher {
  padding-left: 3.3333rem;
}
.styleguide.date-picker-wrapper.size--small .flat__icon {
  bottom: 0.9375rem;
  left: 1.5625rem;
  width: 1.1604rem;
  height: 1.25rem;
}
.styleguide.date-picker-wrapper.size--small .date-picker-separator {
  margin: 1rem 1rem 1.1rem;
}
.styleguide.date-picker-wrapper.size--small .date-picker-separator .flat__icon {
  width: 0.7rem;
  height: 0.7rem;
}
.styleguide.date-picker-wrapper.size--small .date-picker-separator .flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.styleguide.date-picker-wrapper.size--normal .date-picker-separator {
  margin: 1rem 1rem 1.5rem;
}
.styleguide.date-picker-wrapper.size--normal .date-picker-separator .flat__icon {
  width: 1.2rem;
  height: 1.2rem;
}
.styleguide.date-picker-wrapper.size--normal .date-picker-separator .flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
/** Flatpickr **/
.flatpickr-calendar {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.35rem;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  animation: none;
  direction: ltr;
  border-radius: 5px;
  position: absolute;
  padding: 2rem;
  width: 37.6rem !important;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  border: 1px solid #d1d3de;
}
.flatpickr-calendar.hasWeeks {
  width: 42.6rem !important;
}
.flatpickr-calendar.arrowTop {
  margin-top: 2rem;
}
.flatpickr-calendar.arrowBottom {
  margin-top: -6rem;
}
.flatpickr-calendar.size--small {
  padding: 1.5rem;
}
.flatpickr-calendar.size--small.hasWeeks {
  width: 31.35rem !important;
}
.flatpickr-calendar.size--small .flatpickr-day,
.flatpickr-calendar.size--small .flatpickr-weekday {
  width: 3.45rem;
  height: 3.45rem;
  flex-basis: 3.45rem;
  line-height: 3.45rem;
  font-size: 1.15rem;
}
.flatpickr-calendar.size--small .flatpickr-day:hover,
.flatpickr-calendar.size--small .flatpickr-weekday:hover {
  width: 3.45rem;
}
.flatpickr-calendar.size--small .flatpickr-weekdays {
  height: 3.45rem;
}
.flatpickr-calendar.size--small .dayContainer,
.flatpickr-calendar.size--small .flatpickr-days {
  width: 24.15rem;
  min-width: 24.15rem;
  max-width: 24.15rem;
}
.flatpickr-calendar.size--small .flatpickr-weekwrapper {
  padding-right: 0.75rem;
}
.flatpickr-calendar.size--small .flatpickr-months .flatpickr-prev-month .flat__icon,
.flatpickr-calendar.size--small .flatpickr-months .flatpickr-next-month .flat__icon {
  width: 1.15rem;
  height: 1.15rem;
}
.flatpickr-calendar.size--small .numInputWrapper input,
.flatpickr-calendar.size--small .flatpickr-current-month span.cur-month,
.flatpickr-calendar.size--small .flatpickr-current-month span.cur-year {
  font-size: 1.37rem;
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n + 1) .flatpickr-day.inRange:nth-child(7n + 7) {
  box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n + 2) .flatpickr-day.inRange:nth-child(7n + 1) {
  box-shadow: -2px 0 0 #eaf2fb, 5px 0 0 #eaf2fb;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost::before,
.flatpickr-calendar.rightMost::after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar::before {
  border-width: 12px;
  margin: 0 -12px;
}
.flatpickr-calendar::after {
  border-width: 11px;
  margin: 0 -11px;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop::before {
  border-bottom-color: #d1d3de;
}
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom::before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom::after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  position: relative;
  clear: both;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  text-align: center;
}
.flatpickr-months .flatpickr-month {
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  user-select: none;
  display: flex;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  width: 4.7rem;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  cursor: pointer;
}
.flatpickr-months .flatpickr-prev-month .flat__icon,
.flatpickr-months .flatpickr-next-month .flat__icon {
  width: 1.354rem;
  height: 1.354rem;
}
.flatpickr-months .flatpickr-prev-month .flat__icon .icon--graphics,
.flatpickr-months .flatpickr-next-month .flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.flatpickr-months .flatpickr-prev-month.disabled,
.flatpickr-months .flatpickr-next-month.disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  margin-left: 0.4rem;
  font-weight: 600;
  font-size: 1.875rem;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper span {
  position: absolute;
  right: -0.3rem;
  width: auto;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}
.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}
.numInputWrapper span::after {
  display: block;
  content: '';
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #556474;
  bottom: 20%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #556474;
  top: 20%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-weight: 300;
  height: 2.5rem;
  display: inline-block;
  text-align: center;
  width: 23.5rem;
}
.flatpickr-current-month span.cur-month {
  display: inline-block;
  font-size: 1.875rem;
  line-height: 2.5rem;
  color: #3f4c5a;
  font-weight: 600;
  padding: 0;
}
.flatpickr-current-month .numInputWrapper {
  width: 5rem;
  line-height: 2.5rem;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: rgba(0, 0, 0, 0.9);
}
.flatpickr-current-month input.cur-year {
  font-size: 1.875rem;
  color: #3f4c5a;
  cursor: text;
  background: none;
  border: 0;
  border-radius: 0;
  outline: none;
}
.flatpickr-current-month input.cur-year::selection {
  background: #fff;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 4.7rem;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  background: transparent;
  line-height: 4.7rem;
  height: 4.7rem;
  width: 4.7rem;
  font-size: 1.354rem;
  text-transform: uppercase;
  font-weight: bold;
  color: #3f4c5a;
  justify-content: center;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 32.9rem !important;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 32.9rem;
  min-width: 32.9rem;
  max-width: 32.9rem;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border-radius: 1rem;
  box-sizing: border-box;
  color: #556474;
  cursor: pointer;
  width: 4.7rem;
  flex-basis: 4.7rem;
  height: 4.7rem;
  line-height: 4.7rem;
  font-size: 1.5625rem;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #eaf2fb;
  border-color: #eaf2fb;
}
.flatpickr-day.today {
  background: #e9eaef;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border: none;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #277cd9;
  color: #fff;
  border-radius: 1rem;
  border: none;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -1.5rem 0 0 #277cd9;
}
.flatpickr-day.startRange.endRange {
  box-shadow: none !important;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 1rem;
}
.flatpickr-day.selected.startRange {
  box-shadow: 1rem 0 0 #eaf2fb, 1rem 0 0 #eaf2fb;
}
.flatpickr-day.inRange + .flatpickr-day.endRange {
  box-shadow: -1rem 0 0 #eaf2fb, -1rem 0 0 #eaf2fb;
}
.flatpickr-day.inRange {
  border-radius: 0;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: #d1d3de;
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  cursor: not-allowed;
  color: #d1d3de;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.flatpickr-weekwrapper {
  padding-right: 1rem;
  display: inline-block;
  float: left;
}
.flatpickr-weekwrapper .flatpickr-day {
  font-size: 1.354rem;
}
.flatpickr-weekwrapper .flatpickr-day:hover {
  background: none;
  cursor: default;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  color: #fff;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 4.7rem;
  font-weight: bold;
  color: #3f4c5a;
}
.flatpickr-innerContainer {
  display: flex;
  box-sizing: border-box;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.multiselect-dropdown {
  position: relative;
  width: 100%;
}
.multiselect-dropdown .multiselect-dropdown__trigger {
  outline: none;
}
.multiselect-dropdown .ember-basic-dropdown-trigger--below::before {
  content: '';
  width: 100%;
  height: 2rem;
  display: block;
  border-left: 1px solid #d1d3de;
  border-right: 1px solid #d1d3de;
  position: absolute;
  bottom: -1px;
  box-sizing: border-box;
}
.multiselect-dropdown__content {
  margin-top: 1px;
}
.multiselect-dropdown__content.ember-basic-dropdown-content {
  position: relative;
  background-color: #f5f5f8;
  border: 1px solid #d1d3de;
  border-top: none;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.multiselect-dropdown__content.above.ember-basic-dropdown-content {
  border-bottom: none;
  border-top: 1px solid #d1d3de;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.multiselect-dropdown__content .multiselect-dropdown__content-wrapper {
  max-height: 40rem;
  overflow-y: scroll;
}
.multiselect-dropdown__content .multiselect-dropdown__selected-items {
  padding: 0.5rem 1rem 1rem;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}
.multiselect-dropdown__content .multiselect-dropdown__selected-items .button__student-label {
  float: left;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  white-space: normal;
  text-align: left;
  background-color: #8c99a8;
}
.multiselect-dropdown__content .multiselect-dropdown__selected-items::after {
  content: '';
  display: table;
  clear: both;
}
.multiselect-dropdown__content .menu-items {
  padding: 1.4rem;
}
.multiselect-dropdown__content .menu-items .input__checkbox {
  margin-bottom: 1rem;
  text-align: left;
}
.multiselect-dropdown__content .menu-items .input__checkbox:last-child {
  margin-bottom: 0;
}
.multiselect-dropdown .multiselect-dropdown__input {
  z-index: 2;
}
.multiselect-dropdown .multiselect-dropdown__input.disabled .container--point--down,
.multiselect-dropdown .multiselect-dropdown__input.disabled .multiselect-dropdown__input-selection {
  opacity: 0.5;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container {
  position: relative;
  width: 100%;
  border: 1px solid #d1d3de;
  border-radius: 0.42rem;
  -webkit-appearance: none;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection {
  margin: 0;
  outline: none;
  box-sizing: border-box;
  border: 1px solid;
  -webkit-appearance: none;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  box-shadow: none;
  background-image: none;
  cursor: pointer;
  border: none;
  width: 100%;
  background-color: #ffffff;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher {
  width: 100%;
  margin: 0;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  font-style: normal;
  font-weight: 400;
  box-shadow: none;
  background-image: none;
  font-family: 'Open Sans', sans-serif;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--small,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--small {
  height: 3.13rem;
  font-size: 1.25rem;
  border-radius: 0.42rem;
  padding: 0 0.94rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--small.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--small.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--small.state--wrong.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--small.state--wrong.validation--icons {
  padding-right: 3.13rem;
  background-position: 97.81% center;
  background-size: 1.25rem 1.25rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--normal,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--normal {
  height: 4.17rem;
  font-size: 1.66rem;
  border-radius: 0.52rem;
  padding: 0 1.25rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--normal.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--normal.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--normal.state--wrong.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--normal.state--wrong.validation--icons {
  padding-right: 4.17rem;
  background-position: 97.08% center;
  background-size: 1.67rem 1.67rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--large,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--large {
  height: 5.21rem;
  font-size: 2.19rem;
  border-radius: 0.62rem;
  padding: 0 1.56rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--large.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--large.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--student.size--large.state--wrong.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--teacher.size--large.state--wrong.validation--icons {
  padding-right: 5.2rem;
  background-position: 96.36% center;
  background-size: 2.08rem 2.08rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--small {
  height: 30px;
  font-size: 12px;
  border-radius: 4px;
  padding: 0 9px;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--small.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--small.state--wrong.validation--icons {
  padding-right: 30px;
  background-position: 79% center;
  background-size: 12px 12px;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--normal {
  height: 40px;
  font-size: 16px;
  border-radius: 5px;
  padding: 0 12px;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--normal.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--normal.state--wrong.validation--icons {
  padding-right: 40px;
  background-position: 72% center;
  background-size: 16px 16px;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--large {
  height: 6.66666667rem;
  font-size: 3.33333333rem;
  border-radius: 0.625rem;
  padding: 0 1.66666667rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--large.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.audience--board.size--large.state--wrong.validation--icons {
  padding-right: 51px;
  background-position: 64% center;
  background-size: 21px 21px;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection::-ms-clear {
  display: none;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.state--correct.validation--icons {
  background: url('../gynzy-styleguide/assets/svg/input-field/valid.svg') no-repeat;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.state--wrong.validation--icons {
  background: url('../gynzy-styleguide/assets/svg/input-field/invalid.svg') no-repeat;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.size--normal.audience--teacher {
  height: 4.17rem;
  font-size: 1.66rem;
  border-radius: 0.52rem;
  padding: 0 1.25rem;
  padding: 0 3rem 0 1.25rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.size--normal.audience--teacher.state--correct.validation--icons,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection.size--normal.audience--teacher.state--wrong.validation--icons {
  padding-right: 4.17rem;
  background-position: 97.08% center;
  background-size: 1.67rem 1.67rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection .multiselect-dropdown__input-selection-container {
  width: calc(100% - 4rem);
  overflow: hidden;
  height: 1.8rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection .multiselect-dropdown__input-selection-container .button__student-label {
  pointer-events: none;
  margin-right: 0.5rem;
  float: left;
  margin-bottom: 1rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .multiselect-dropdown__input-selection .multiselect-dropdown__input-selection-selection-count {
  border-radius: 0.2rem;
  border: 1px solid #277cd9;
  color: #277cd9;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  height: 1.8rem;
  font-weight: bold;
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--clear-input {
  position: absolute;
  right: 1rem;
  top: 0;
  height: 100%;
  cursor: pointer;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down .icon--graphics,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--clear-input .icon--graphics {
  fill: #556474;
  color: #556474;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down .icon__point-down,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--clear-input .icon__point-down,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down .icon__point-up,
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--clear-input .icon__point-up {
  width: 1.2rem;
  height: 1.2rem;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--icon {
  position: absolute;
  left: 1rem;
  top: 0;
  height: 100%;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container .container--icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container input {
  z-index: 10;
  box-shadow: none;
  background: #fff none;
  font-family: 'Open Sans', serif;
  border: none;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container input::-ms-clear {
  display: none;
}
.multiselect-dropdown .multiselect-dropdown__input .multiselect-dropdown__input-container input.styleguide.input__field__default.audience--teacher.size--normal {
  padding: 0 3.5rem;
}
.multiselect-dropdown.size--small .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down .icon__point-down,
.multiselect-dropdown.size--small .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down .icon__point-up {
  width: 0.9rem;
  height: 0.9rem;
}
.multiselect-dropdown.size--small .multiselect-dropdown__input .multiselect-dropdown__input-container .icon__clear-input {
  width: 1.4rem;
  height: 1.4rem;
}
.multiselect-dropdown.size--small .multiselect-dropdown__input .multiselect-dropdown__input-container .container--icon {
  left: 0.7rem;
}
.multiselect-dropdown.size--small .multiselect-dropdown__input .multiselect-dropdown__input-container .container--icon .icon__search {
  width: 1.4rem;
  height: 1.4rem;
}
.multiselect-dropdown.size--small .multiselect-dropdown__input .multiselect-dropdown__input-container input.styleguide.input__field__default.audience--teacher.size--small {
  padding: 0 2.5rem;
}
.multiselect-dropdown.size--large .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down {
  right: 1.5rem;
}
.multiselect-dropdown.size--large .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down .icon__point-down,
.multiselect-dropdown.size--large .multiselect-dropdown__input .multiselect-dropdown__input-container .container--point--down .icon__point-up {
  width: 1.6rem;
  height: 1.6rem;
}
.multiselect-dropdown.size--large .multiselect-dropdown__input .multiselect-dropdown__input-container .icon__clear-input {
  width: 2.2rem;
  height: 2.2rem;
}
.multiselect-dropdown.size--large .multiselect-dropdown__input .multiselect-dropdown__input-container .container--icon {
  left: 1.4rem;
}
.multiselect-dropdown.size--large .multiselect-dropdown__input .multiselect-dropdown__input-container .container--icon .icon__search {
  width: 2.2rem;
  height: 2.2rem;
}
.multiselect-dropdown.size--large .multiselect-dropdown__input .multiselect-dropdown__input-container input.styleguide.input__field__default.audience--teacher.size--large {
  padding: 0 4.5rem;
}
.molecule-input-field-icon {
  position: relative;
}
.molecule-input-field-icon .no-front-icon input.styleguide.input__field__default.audience--teacher.size--normal,
.molecule-input-field-icon .no-front-icon input.styleguide.input__field__default.audience--teacher.size--small {
  padding-left: 1rem;
}
.molecule-input-field-icon input.styleguide.input__field__default.audience--teacher {
  background: #ffffff;
}
.molecule-input-field-icon input.styleguide.input__field__default.audience--teacher.size--normal {
  padding-left: 4rem;
}
.molecule-input-field-icon input.styleguide.input__field__default.audience--teacher.size--normal[type='search'] {
  padding-right: 4rem;
}
.molecule-input-field-icon input.styleguide.input__field__default.audience--teacher.size--small {
  padding-left: 3rem;
}
.molecule-input-field-icon input.styleguide.input__field__default.audience--teacher.size--small[type='search'] {
  padding-right: 3rem;
}
.molecule-input-field-icon .input-field-icon__icon {
  position: absolute;
}
.molecule-input-field-icon .input-field-icon__icon .flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.molecule-input-field-icon .clear-input,
.molecule-input-field-icon .toggle-view {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-radius: 0 0.42rem 0.42rem 0;
  width: 4.58333333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
.molecule-input-field-icon .clear-input .styleguide.gynzy.button__icon.color--black .icon--graphics,
.molecule-input-field-icon .toggle-view .styleguide.gynzy.button__icon.color--black .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
.molecule-input-field-icon .styleguide.gynzy.button__icon.audience--teacher.size--normal {
  width: 1.66666667rem;
  height: 1.66666667rem;
}
.molecule-input-field-icon .styleguide.gynzy.button__icon.audience--teacher.size--small {
  width: 1.25rem;
  height: 1.25rem;
}
.molecule-input-field-icon.audience--teacher.size--normal .input-field-icon__icon {
  left: 1rem;
  top: 1.25rem;
}
.molecule-input-field-icon.audience--teacher.size--normal .input-field-icon__icon .flat__icon {
  width: 1.66666667rem;
  height: 1.66666667rem;
}
.molecule-input-field-icon.audience--teacher.size--small .input-field-icon__icon {
  left: 0.75rem;
  top: 0.9375rem;
}
.molecule-input-field-icon.audience--teacher.size--small .input-field-icon__icon .flat__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.molecule-input-textarea-label {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.molecule-input-textarea-label.input-textarea__error-message {
  height: calc(100% - 30 * 0.10416667rem);
}
.molecule-input-textarea-label .input-textarea__subtitle {
  color: #8c99a8;
  font-size: 1.25rem;
  line-height: 1.51041667rem;
  margin-bottom: 0.41666667rem;
}
.molecule-input-textarea-label .input-textarea__label {
  margin-bottom: 0.83333333rem;
  font-size: 1.45833333rem;
  font-weight: 600;
  color: #556474;
  word-break: break-word;
}
.molecule-input-textarea-label .input-textarea__error-message {
  text-align: right;
  font-size: 1.25rem;
  line-height: 12px;
  margin-top: 4px;
  margin-bottom: -16px;
  color: red;
  word-break: break-word;
}
.dropdown__basic-trigger .styleguide.molecule-input-field-icon.flatten--bottom--border input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dropdown__basic-trigger .styleguide.molecule-input-field-icon.flatten--top--border input {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/**
 * Menus
 */
.styleguide.multi__level-list {
  width: 100%;
}
/**
 * FAQ accordion
 */
.faq-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-bottom: 5rem;
}
.faq-placeholder__title {
  color: var(--text-header, #2a3541);
  font-feature-settings: 'liga' off, 'clig' off;
  /* Teacher/headline/medium */
  font-family: 'Lexend Deca';
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 4.16666667rem;
  /* 166.667% */
  letter-spacing: var(--text-letter-spacing-display, 0.02083333rem);
}
.faq-placeholder__container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
  min-width: 0;
}
.faq-placeholder__content {
  flex: 1;
  display: flex;
  padding: var(--size-gap-06-rem, 2.5rem);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-gap-06-rem, 2.5rem);
  border-radius: var(--size-radius-05, 1.66666667rem);
  background: var(--surface-differentiation-color-sky-01, #effaff);
  min-width: 0;
  width: 100%;
}
.faq-placeholder__item {
  display: flex;
  padding-bottom: 1.66666667rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.83333333rem;
  align-self: stretch;
  border-bottom: 1px solid var(--border-default, #d1d3de);
  overflow: hidden;
}
.faq-placeholder__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.faq-placeholder__question-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.83333333rem;
  align-self: stretch;
  cursor: pointer;
  min-width: 0;
}
.faq-placeholder__question {
  color: var(--text-header, #2a3541);
  font-feature-settings: 'liga' off;
  /* Teacher/title/small */
  font-family: 'Open Sans';
  font-size: 1.66666667rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.5rem;
  /* 150% */
  letter-spacing: var(--text-letter-spacing-default, 0);
  flex: 1 0 0;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.faq-placeholder__toggle-button {
  display: flex;
  width: var(--size-button-height-m, 2.5rem);
  height: var(--size-button-height-m, 2.5rem);
  padding: var(--size-gap-02-rem, 0.83333333rem);
  border-radius: var(--size-radius-06, 2.5rem);
  justify-content: center;
  align-items: center;
}
.faq-placeholder__toggle-button.styleguide.button__icon.audience--teacher.type--self-contained.size--normal {
  width: var(--size-button-height-m, 2.5rem);
  height: var(--size-button-height-m, 2.5rem);
}
.faq-placeholder__toggle-button.styleguide.button__icon.audience--teacher.type--self-contained.size--normal .styleguide.svg__icon img,
.faq-placeholder__toggle-button.styleguide.button__icon.audience--teacher.type--self-contained.size--normal .svg__icon img {
  width: var(--size-button-height-m, 2.5rem);
  height: var(--size-button-height-m, 2.5rem);
  transition: transform 0.2s ease-out;
}
.faq-placeholder__answer {
  position: relative;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}
.faq-placeholder__answer--collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
.faq-placeholder__answer--expanded {
  max-height: 52.08333333rem;
  opacity: 1;
}
.faq-placeholder__answer--expanding {
  animation: faqSlideDown 0.25s ease-out forwards;
}
.faq-placeholder__answer--collapsing {
  animation: faqSlideUp 0.25s ease-out forwards;
}
.faq-placeholder__answer-content {
  position: relative;
  color: #556474;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'Open Sans';
  font-size: 1.66666667rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.5rem;
  letter-spacing: 0;
  padding-top: 0.41666667rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.faq-placeholder__answer-content a {
  color: #06c;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}
.faq-placeholder__answer-content a:hover {
  color: #049;
  text-decoration: underline;
}
.faq-placeholder__answer-content a:visited {
  color: #639;
}
.faq-placeholder__answer-content a:focus {
  outline: 2px solid #06c;
  outline-offset: 2px;
  border-radius: 2px;
}
.faq-placeholder__answer-content a:active {
  color: #036;
}
.faq-placeholder__image {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27.08333333rem;
}
.faq-placeholder__svg {
  width: 100%;
  height: auto;
  max-width: 27.08333333rem;
  object-fit: contain;
}
@media (max-width: 900px) {
  .faq-placeholder__container {
    gap: 0;
  }
}
@media (max-width: 769px) {
  .faq-placeholder__image {
    display: none;
  }
}
@media (max-width: 768px) {
  .faq-placeholder {
    padding: 0 1.66666667rem;
  }
  .faq-placeholder__content {
    padding: 2.08333333rem;
  }
}
@keyframes faqSlideDown {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 10.41666667rem;
  }
}
@keyframes faqSlideUp {
  0% {
    max-height: 10.41666667rem;
  }
  100% {
    max-height: 0;
  }
}
.enlarged-qr-modal .modal__dialog-content {
  width: 60rem;
}
.enlarged-qr-modal .modal__dialog-content .styleguide.button__icon.modal__close-icon-button.size--small {
  top: 0;
  right: 0;
  margin: 1.95833333rem;
}
.enlarged-qr-modal .modal__dialog-content .enlarged-qr-code-container .qr-code-image {
  pointer-events: none;
  display: block;
  opacity: 0.75;
}
.groups-students-selection-modal .modal__component .modal__dialog-content {
  width: 100rem;
  text-align: left;
}
.groups-students-selection-modal .modal__component .modal__dialog-content .modal__component-header {
  font-size: 2.5rem;
  font-weight: bold;
  padding: 3.33333333rem 3.33333333rem 0;
}
.groups-students-selection-modal .modal__component .modal__dialog-content .modal__dialog-yield {
  padding: 3.33333333rem 3.33333333rem 0;
}
.groups-students-selection-modal .modal__component .modal__dialog-content .modal__dialog-buttons {
  padding: 2.5rem 3.33333333rem;
  gap: 1.25rem;
}
.groups-students-selection-modal .modal__component .modal__dialog-content .modal__dialog-buttons .modal__dialog-buttons--button {
  padding: 0;
}
.groups-students-selection-modal .modal__component .modal__dialog-content .input-wrapper {
  padding: 0;
  margin-bottom: 1.66666667rem;
}
.groups-students-selection-modal .label-wrapper {
  padding: 0;
  margin-bottom: 1.66666667rem;
}
.groups-students-selection-modal .group-selection-wrapper {
  display: flex;
  height: 3rem;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}
.groups-students-selection-modal .group-selection-wrapper .group-info {
  cursor: pointer;
  display: flex;
}
.groups-students-selection-modal .group-selection-wrapper .group-info span {
  color: #aeb7c2;
}
.groups-students-selection-modal .group-selection-wrapper .group-select {
  display: flex;
  align-items: center;
}
.groups-students-selection-modal .group-selection-wrapper .group-select .flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.groups-students-selection-modal .group-selection-wrapper .group-select .selected-amount {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #e9eaef;
  border-radius: 50%;
  margin-right: 2.91666667rem;
}
.groups-students-selection-modal .group-selection-wrapper .group-select .selected-amount span {
  font-size: 1.66666667rem;
  color: #556474;
  font-weight: bold;
  letter-spacing: 0;
}
.groups-students-selection-modal .group-student-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 37.5rem;
  padding: 0;
}
.groups-students-selection-modal .group-student-wrapper .label-group,
.groups-students-selection-modal .group-student-wrapper .label-student {
  margin-bottom: 1.25rem;
  font-size: 1.66666667rem;
  color: #556474;
  font-weight: 600;
  text-transform: capitalize;
  flex-grow: 1;
}
.groups-students-selection-modal .group-student-wrapper .label-group {
  width: 25%;
  padding: 0;
}
.groups-students-selection-modal .group-student-wrapper .label-student {
  width: 75%;
  padding: 0 0 0 3.33333333rem;
}
.groups-students-selection-modal .group-student-wrapper .styleguide.button__group-label p {
  max-width: 11.45833333rem;
}
.groups-students-selection-modal .group-student-wrapper .group-wrapper {
  width: 25%;
  border-right: 1px solid #d1d3de;
  flex-grow: 1;
}
.groups-students-selection-modal .group-student-wrapper .group-wrapper .group-container {
  overflow-y: auto;
  max-height: 31.25rem;
  padding-top: 0.83333333rem;
}
.groups-students-selection-modal .group-student-wrapper .student-selection-wrapper {
  width: 75%;
  flex-grow: 1;
}
.groups-students-selection-modal .group-student-wrapper .student-selection-wrapper .students-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 0.83333333rem 4.16666667rem;
  height: 33.75rem;
  overflow-y: auto;
  padding: 0.83333333rem 0 0 3.33333333rem;
}
.groups-students-selection-modal .group-student-wrapper .student-selection-wrapper .students-empty-state {
  grid-column: 1 / -1;
  justify-self: start;
  text-align: left;
  margin: 0;
  padding: 0.83333333rem 0;
  font-size: 1.66666667rem;
  line-height: 1.5;
  color: #556474;
}
.groups-students-selection-modal .group-student-wrapper .student-selection-wrapper .single-student-wrapper {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
}
.groups-students-selection-modal .group-student-wrapper .student-selection-wrapper .single-student-wrapper .input__checkbox {
  min-width: 0;
}
.groups-students-selection-modal .group-student-wrapper .student-selection-wrapper .single-student-wrapper .input__checkbox .svg--container {
  flex-shrink: 0;
}
.groups-students-selection-modal .group-student-wrapper .student-selection-wrapper .single-student-wrapper .input--label {
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.groups-students-selection-modal .input__checkbox {
  padding-right: 1rem;
}
.ember-tooltip.group-students-tooltip .tooltip-student {
  font-size: 1.25rem;
  line-height: 1.66666667rem;
  margin-bottom: 0;
}
.styleguide.share-content-component {
  cursor: default;
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  width: fit-content;
}
.styleguide.share-content-component .section-caption {
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 600;
  color: #556474;
  margin: 0 0 0.83333333rem 0;
}
.styleguide.share-content-component .section-body {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #556474;
  margin: 0 0 1.66666667rem 0;
}
.styleguide.share-content-component .section-body a {
  color: #1f5e7f;
  text-decoration: underline;
}
.styleguide.share-content-component .section-body a:hover {
  color: #28759f;
}
.styleguide.share-content-component .section-body a:active {
  color: #1a455b;
}
.styleguide.share-content-component .share-content-section {
  display: flex;
  flex-direction: column;
}
.styleguide.share-content-component .section-divider {
  width: 100%;
  height: 0.10416667rem;
  background-color: #d1d3de;
  margin: 2.5rem 0;
}
.styleguide.share-content-component .link-share-row {
  display: flex;
  flex-direction: row;
  width: fit-content;
}
.styleguide.share-content-component .selection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.66666667rem;
}
.styleguide.share-content-component .footer-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.5rem;
}
.styleguide.share-content-component .link-share-container {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.83333333rem;
  min-width: 41.66666667rem;
}
.styleguide.share-content-component .link-share-container .share__toggle__wrapper {
  display: flex;
  justify-content: flex-start;
  padding: 0;
}
.styleguide.share-content-component .link-share-container .share__message {
  margin-left: 1.25rem;
}
.styleguide.share-content-component .link-share-container .share__message p {
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: #556474;
  user-select: none;
  margin: 0 0 0.41666667rem 0;
}
.styleguide.share-content-component .link-share-container .share__message p:last-child {
  margin-bottom: 0;
}
.styleguide.share-content-component .link-share-container .share__message .bold {
  font-size: 1.66666667rem;
  line-height: 2.5rem;
  font-weight: 600;
}
.styleguide.share-content-component .link-share-container .copy__button__wrapper {
  display: flex;
}
.styleguide.share-content-component .link-share-container .copy__button__wrapper button {
  margin-left: 1.04166667rem;
}
.styleguide.share-content-component .link-share-container .copy__button__wrapper input {
  direction: ltr;
  cursor: pointer;
}
.styleguide.share-content-component .divider {
  width: 0.10416667rem;
  height: auto;
  align-self: stretch;
  background-color: #d1d3de;
  margin: 0 2.5rem;
}
.styleguide.share-content-component .qr-share-container {
  width: 20.83333333rem;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  align-items: center;
  gap: 0.83333333rem;
}
.styleguide.share-content-component .qr-share-container.placeholder-container {
  justify-content: center;
}
.styleguide.share-content-component .qr-share-container.placeholder-container .placeholder-wrapper {
  flex-wrap: wrap;
  height: 13.33333333rem;
  width: fit-content;
  cursor: default;
  gap: 3.33333333rem;
}
.styleguide.share-content-component .qr-share-container.placeholder-container .placeholder-wrapper .svg-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.styleguide.share-content-component .qr-share-container.placeholder-container .placeholder-wrapper .svg-container .svg__icon {
  width: 5rem;
  height: 5rem;
}
.styleguide.share-content-component .qr-share-container .qr-text {
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 400;
  color: #556474;
}
.styleguide.share-content-component .qr-share-container .qr-code-wrapper {
  width: 13.75rem;
  height: 13.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  opacity: 0.75;
}
.styleguide.share-content-component .qr-share-container .qr-code-wrapper:hover {
  cursor: pointer;
}
.styleguide.share-content-component .qr-share-container .qr-code-wrapper:hover .qr-code-overlay .flat__icon .icon--graphics {
  fill: #4e92ff;
  color: #4e92ff;
}
.styleguide.share-content-component .qr-share-container .qr-code-wrapper:active .qr-code-overlay .flat__icon .icon--graphics {
  fill: #2465ab;
  color: #2465ab;
}
.styleguide.share-content-component .qr-share-container .qr-code-wrapper .qr-code-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  width: 4.375rem;
  height: 4.375rem;
  background-color: #eaf2fb;
  border: 0.52083333rem solid #ffffff;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.styleguide.share-content-component .qr-share-container .qr-code-wrapper .qr-code-overlay .flat__icon {
  width: 1.66666667rem;
  height: 1.66666667rem;
}
.styleguide.share-content-component .qr-share-container .qr-code-wrapper .qr-code-overlay .flat__icon .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.organism-switch-header-yield .switch-header {
  height: 10rem;
}
.organism-switch-header-yield .switch-tabs {
  height: 5rem;
  font-weight: bold;
  font-size: 1.66rem;
}
.organism-switch-header-yield .switch-tabs .tab {
  padding: 0 2rem 1rem;
  border-bottom: 0.4rem solid transparent;
  text-transform: uppercase;
  transition: border-bottom 0.5s ease, color 0.5s ease;
  cursor: pointer;
  color: #3f4c5a;
}
.organism-switch-header-yield .switch-tabs .tab * {
  cursor: pointer;
}
.organism-switch-header-yield .switch-tabs .tab.tab-selected {
  border-bottom: 0.4rem solid #277cd9;
  color: #277cd9;
}
.styleguide.timer__digital {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
}
.styleguide.timer__digital.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.timer__digital.column {
  flex-direction: column;
}
.styleguide.timer__digital.end {
  justify-content: flex-end;
}
.styleguide.timer__digital.start {
  justify-content: flex-start;
}
.styleguide.timer__digital.flex-center {
  justify-content: center;
}
.styleguide.timer__digital.between {
  justify-content: space-between;
}
.styleguide.timer__digital.around {
  justify-content: space-around;
}
.styleguide.timer__digital.cross-start {
  align-items: flex-start;
}
.styleguide.timer__digital.cross-end {
  align-items: flex-end;
}
.styleguide.timer__digital.stretch {
  align-items: stretch;
}
.styleguide.timer__digital.evenly {
  justify-content: space-evenly;
}
.styleguide.timer__digital.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.timer__digital.wrap {
  flex-wrap: wrap;
}
.styleguide.timer__digital.grow {
  flex: 1;
}
.styleguide.timer__digital .flex-half,
.styleguide.timer__digital .flex-quarter,
.styleguide.timer__digital .flex-sixth,
.styleguide.timer__digital .flex-third,
.styleguide.timer__digital .flex-two-third {
  box-sizing: border-box;
}
.styleguide.timer__digital .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.timer__digital .flex-grow-1 {
  flex: 1 1;
}
.styleguide.timer__digital .flex-grow-2 {
  flex: 2 1;
}
.styleguide.timer__digital .flex-grow-3 {
  flex: 3 1;
}
.styleguide.timer__digital .flex-grow-4 {
  flex: 4 1;
}
.styleguide.timer__digital .flex-grow-5 {
  flex: 5 1;
}
.styleguide.timer__digital .flex-grow-6 {
  flex: 6 1;
}
.styleguide.timer__digital .flex-grow-7 {
  flex: 7 1;
}
.styleguide.timer__digital .flex-grow-8 {
  flex: 8 1;
}
.styleguide.timer__digital .colon {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
}
.styleguide.timer__digital .colon.row-reverse {
  flex-direction: row-reverse;
}
.styleguide.timer__digital .colon.column {
  flex-direction: column;
}
.styleguide.timer__digital .colon.end {
  justify-content: flex-end;
}
.styleguide.timer__digital .colon.start {
  justify-content: flex-start;
}
.styleguide.timer__digital .colon.flex-center {
  justify-content: center;
}
.styleguide.timer__digital .colon.between {
  justify-content: space-between;
}
.styleguide.timer__digital .colon.around {
  justify-content: space-around;
}
.styleguide.timer__digital .colon.cross-start {
  align-items: flex-start;
}
.styleguide.timer__digital .colon.cross-end {
  align-items: flex-end;
}
.styleguide.timer__digital .colon.stretch {
  align-items: stretch;
}
.styleguide.timer__digital .colon.evenly {
  justify-content: space-evenly;
}
.styleguide.timer__digital .colon.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.styleguide.timer__digital .colon.wrap {
  flex-wrap: wrap;
}
.styleguide.timer__digital .colon.grow {
  flex: 1;
}
.styleguide.timer__digital .colon .flex-half,
.styleguide.timer__digital .colon .flex-quarter,
.styleguide.timer__digital .colon .flex-sixth,
.styleguide.timer__digital .colon .flex-third,
.styleguide.timer__digital .colon .flex-two-third {
  box-sizing: border-box;
}
.styleguide.timer__digital .colon .flex-remaining-space {
  flex-grow: 1;
}
.styleguide.timer__digital .colon .flex-grow-1 {
  flex: 1 1;
}
.styleguide.timer__digital .colon .flex-grow-2 {
  flex: 2 1;
}
.styleguide.timer__digital .colon .flex-grow-3 {
  flex: 3 1;
}
.styleguide.timer__digital .colon .flex-grow-4 {
  flex: 4 1;
}
.styleguide.timer__digital .colon .flex-grow-5 {
  flex: 5 1;
}
.styleguide.timer__digital .colon .flex-grow-6 {
  flex: 6 1;
}
.styleguide.timer__digital .colon .flex-grow-7 {
  flex: 7 1;
}
.styleguide.timer__digital .colon .flex-grow-8 {
  flex: 8 1;
}
.styleguide.timer__digital.audience--student .colon {
  width: 3.84rem;
  font-size: 4.15rem;
}
.styleguide.timer__digital.audience--teacher .colon {
  width: 2.3rem;
  font-size: 2.5rem;
}
.styleguide.gynzy.timer__digital .colon {
  color: #8c99a8;
  text-decoration: none;
  text-indent: 0;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.styleguide.table__regular tr.validation-class {
  transition: 1s;
}
.styleguide.table__regular tr.validation-class.dirty {
  background-color: #fff7e5;
}
.styleguide.table__regular tr.validation-class.error {
  background-color: #fef1f1;
}
.styleguide.table__regular tr.validation-class.success {
  background-color: #dbfbd7;
}
.styleguide.table__regular tbody tr {
  min-height: 6.25rem;
}
.styleguide.table__regular tbody tr:nth-child(odd) {
  background: #f5f5f8;
}
.styleguide.table__regular tbody tr:nth-child(odd) .cell__scroll__yield__container::before {
  background: linear-gradient(to right, #f5f5f8, rgba(245, 245, 248, 0));
}
.styleguide.table__regular tbody tr:nth-child(odd) .cell__scroll__yield__container::after {
  background: linear-gradient(to left, #f5f5f8, rgba(245, 245, 248, 0));
}
.styleguide.table__regular tbody tr:nth-child(even) {
  background: #ffffff;
}
.styleguide.table__regular tbody tr:nth-child(even) .cell__scroll__yield__container::before {
  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}
.styleguide.table__regular tbody tr:nth-child(even) .cell__scroll__yield__container::after {
  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}
.styleguide.table__regular thead tr {
  background: #ffffff;
}
.styleguide.table__regular {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}
.styleguide.table__regular .typo-title {
  margin-left: 3rem;
  font-size: 2.08333333rem;
  line-height: 3.125rem;
  font-weight: 600;
}
.scroll-button-wrapper {
  width: 6.66666667rem;
  height: 6.66666667rem;
  position: absolute;
  top: 50%;
  margin-top: -3.33333333rem;
  z-index: 6;
  transition: 0.25s;
}
.scroll-button-wrapper.hidden {
  width: 0;
  visibility: hidden;
}
.scroll-button-wrapper.hidden.left {
  left: -6.66666667rem;
}
.scroll-button-wrapper.hidden.right {
  right: -6.66666667rem;
}
.scroll-button-wrapper.left {
  left: -3.33333333rem;
}
.scroll-button-wrapper.left .table-scroll-button {
  justify-content: flex-end;
}
.scroll-button-wrapper.right {
  right: -3.33333333rem;
}
.scroll-button-wrapper.right .table-scroll-button {
  justify-content: flex-start;
}
.scroll-button-wrapper .table-scroll-button {
  position: fixed;
  display: flex;
  align-items: center;
  width: 6.66666667rem;
  height: 6.66666667rem;
  padding: 0 0.625rem;
  background-color: rgba(63, 76, 90, 0.85);
  border: 0.20833333rem solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.15s;
}
.scroll-button-wrapper .table-scroll-button .styleguide.flat__icon {
  width: 2.08333333rem;
  height: 2.08333333rem;
}
.scroll-button-wrapper .table-scroll-button .styleguide.flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.scroll-button-wrapper .table-scroll-button:hover {
  background-color: rgba(85, 100, 116, 0.8);
}
.scroll-button-wrapper .table-scroll-button:active {
  background-color: rgba(42, 53, 65, 0.9);
}
.scroll-button-wrapper .table-scroll-button:active .styleguide.flat__icon {
  opacity: 0.7;
}
table.styleguide.table-grid {
  display: grid;
  border-collapse: collapse;
  font-size: 1.66666667rem;
  color: #556474;
  grid-template-columns: repeat(var(--dynamic-column-count), minmax(var(--column-width, 26.66666667rem), 1fr));
}
table.styleguide.table-grid .sortable-header {
  display: flex;
  align-items: center;
}
table.styleguide.table-grid .sortable-header .header__title {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 150%;
  height: 100%;
}
table.styleguide.table-grid .sortable-header button.sortable-header__sort-button {
  margin-left: 1.25rem;
  cursor: pointer;
  transition: 0.15s;
}
table.styleguide.table-grid .sortable-header button.sortable-header__sort-button.descending {
  transform: rotate(180deg);
}
table.styleguide.table-grid .sortable-header button.sortable-header__sort-button .flat__icon .icon--graphics {
  fill: #aeb7c2;
  color: #aeb7c2;
  height: 1.25rem;
  width: 1.25rem;
}
table.styleguide.table-grid .sortable-header button.sortable-header__sort-button:hover .flat__icon .icon--graphics {
  fill: #d1d3de;
  color: #d1d3de;
}
table.styleguide.table-grid .sortable-header button.sortable-header__sort-button:active .flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
table.styleguide.table-grid .sortable-header button.sortable-header__sort-button.active .flat__icon .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
table.styleguide.table-grid .sortable-header button.sortable-header__sort-button.active:hover .flat__icon .icon--graphics {
  fill: #4e92ff;
  color: #4e92ff;
}
table.styleguide.table-grid .sortable-header button.sortable-header__sort-button.active:active .flat__icon .icon--graphics {
  fill: #2465ab;
  color: #2465ab;
}
table.styleguide.table-grid thead,
table.styleguide.table-grid tbody,
table.styleguide.table-grid tr {
  display: contents;
}
table.styleguide.table-grid thead tr.table-grid__header th {
  height: 4.16666667rem;
  font-weight: 600;
  color: #2a3541;
  background: white;
  padding: 0.83333333rem 1.25rem 0.83333333rem 2.5rem;
}
table.styleguide.table-grid thead tr th,
table.styleguide.table-grid tbody tr td {
  display: flex;
  align-items: center;
  border-right: 1px solid #d1d3de;
}
table.styleguide.table-grid thead tr th:last-child,
table.styleguide.table-grid tbody tr td:last-child {
  border-right: none;
}
table.styleguide.table-grid thead tr:first-child th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  border-top: 1px solid #d1d3de;
}
table.styleguide.table-grid thead tr.table-grid__sub-header th {
  height: 5.83333333rem;
  background: #f5f5f8;
  font-weight: 600;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid #d1d3de;
  border-top: 1px solid #d1d3de;
}
table.styleguide.table-grid thead tr.sub-header--sticky th {
  top: 4.16666667rem;
  position: -webkit-sticky;
  position: sticky;
  z-index: 3;
}
table.styleguide.table-grid thead tr th.column--sticky {
  z-index: 5;
  left: 0;
}
table.styleguide.table-grid tbody tr td.column--sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 4;
}
table.styleguide.table-grid tbody tr td {
  padding: 1.25rem 2.5rem;
  background: white;
}
table.styleguide.table-grid tbody tr:nth-child(even) td {
  background: #f5f5f8;
}
table.styleguide.table-grid tbody tr:last-child td {
  border-bottom: 1px solid #d1d3de;
}
.tabs-selection-component {
  background: white;
  position: relative;
}
.tabs-selection-component .tabs .tabs-selection__tab {
  position: relative;
  padding: 0 1.5625rem;
  height: 6.25rem;
  background: 0 0;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  font-family: var(--font-family-header);
  color: #2a3541;
  font-size: 2.08333333rem;
  font-weight: 500;
  line-height: 160%;
}
.tabs-selection-component .tabs .tabs-selection__tab .svg__icon,
.tabs-selection-component .tabs .tabs-selection__tab img {
  height: 2.70833333rem;
  width: 2.70833333rem;
  margin-right: 1.25rem;
}
.tabs-selection-component .tabs .tabs-selection__tab.selected::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.41666667rem;
  background: #277cd9;
}
.tabs-selection-component .tabs .tabs-selection__tab:only-child {
  cursor: default;
}
.tabs-selection-component .tabs .tabs-selection__tab:only-child::after {
  content: none;
}
.tabs-selection-component .tabs .tabs-selection__tab:not(.selected) {
  color: #8c99a8;
}
.tabs-selection-component .tabs .tabs-selection__tab:not(.selected) .svg__icon {
  filter: grayscale(1);
  opacity: 0.7;
  transition: 0.3s;
}
.tabs-selection-component .tabs .tabs-selection__tab.disabled {
  cursor: default;
}
.tabs-selection-component .tabs .tabs-selection__tab span {
  white-space: nowrap;
}
.tabs-selection-component .yield {
  position: absolute;
  right: 0.83333333rem;
}
.info__bar {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  font-size: 1.5rem;
  color: #556474;
  overflow: hidden;
  transition: height 0.5s;
  text-align: center;
  padding: 1rem 0;
  border-top: 1px solid #277cd9;
  border-bottom: 1px solid #277cd9;
  background-color: #eaf2fb;
}
.info__bar.row-reverse {
  flex-direction: row-reverse;
}
.info__bar.column {
  flex-direction: column;
}
.info__bar.end {
  justify-content: flex-end;
}
.info__bar.start {
  justify-content: flex-start;
}
.info__bar.flex-center {
  justify-content: center;
}
.info__bar.between {
  justify-content: space-between;
}
.info__bar.around {
  justify-content: space-around;
}
.info__bar.cross-start {
  align-items: flex-start;
}
.info__bar.cross-end {
  align-items: flex-end;
}
.info__bar.stretch {
  align-items: stretch;
}
.info__bar.evenly {
  justify-content: space-evenly;
}
.info__bar.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.info__bar.wrap {
  flex-wrap: wrap;
}
.info__bar.grow {
  flex: 1;
}
.info__bar .flex-half,
.info__bar .flex-quarter,
.info__bar .flex-sixth,
.info__bar .flex-third,
.info__bar .flex-two-third {
  box-sizing: border-box;
}
.info__bar .flex-remaining-space {
  flex-grow: 1;
}
.info__bar .flex-grow-1 {
  flex: 1 1;
}
.info__bar .flex-grow-2 {
  flex: 2 1;
}
.info__bar .flex-grow-3 {
  flex: 3 1;
}
.info__bar .flex-grow-4 {
  flex: 4 1;
}
.info__bar .flex-grow-5 {
  flex: 5 1;
}
.info__bar .flex-grow-6 {
  flex: 6 1;
}
.info__bar .flex-grow-7 {
  flex: 7 1;
}
.info__bar .flex-grow-8 {
  flex: 8 1;
}
.info__bar.info-bar-yellow {
  border-top: 1px solid #fad20c;
  border-bottom: 1px solid #fad20c;
  background-color: #fff4bd;
  color: #556474;
}
.info__bar h2 {
  font-size: 2.1rem;
  color: #3a5a79;
}
.modal__component {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 22000;
}
.modal__component.row-reverse {
  flex-direction: row-reverse;
}
.modal__component.column {
  flex-direction: column;
}
.modal__component.end {
  justify-content: flex-end;
}
.modal__component.start {
  justify-content: flex-start;
}
.modal__component.flex-center {
  justify-content: center;
}
.modal__component.between {
  justify-content: space-between;
}
.modal__component.around {
  justify-content: space-around;
}
.modal__component.cross-start {
  align-items: flex-start;
}
.modal__component.cross-end {
  align-items: flex-end;
}
.modal__component.stretch {
  align-items: stretch;
}
.modal__component.evenly {
  justify-content: space-evenly;
}
.modal__component.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.modal__component.wrap {
  flex-wrap: wrap;
}
.modal__component.grow {
  flex: 1;
}
.modal__component .flex-half,
.modal__component .flex-quarter,
.modal__component .flex-sixth,
.modal__component .flex-third,
.modal__component .flex-two-third {
  box-sizing: border-box;
}
.modal__component .flex-remaining-space {
  flex-grow: 1;
}
.modal__component .flex-grow-1 {
  flex: 1 1;
}
.modal__component .flex-grow-2 {
  flex: 2 1;
}
.modal__component .flex-grow-3 {
  flex: 3 1;
}
.modal__component .flex-grow-4 {
  flex: 4 1;
}
.modal__component .flex-grow-5 {
  flex: 5 1;
}
.modal__component .flex-grow-6 {
  flex: 6 1;
}
.modal__component .flex-grow-7 {
  flex: 7 1;
}
.modal__component .flex-grow-8 {
  flex: 8 1;
}
.modal__component .modal__dialog-content {
  background: #ffffff;
  border-radius: 1.25rem;
  box-shadow: 0 0.4rem 0 0 rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}
.modal__component .modal__dialog-content .modal__close-icon-button {
  position: absolute;
  z-index: 22010;
}
.modal__component .modal__dialog-content .modal__close-icon-button.size--small {
  top: 1.04166667rem;
  right: 1.04166667rem;
  width: 1.875rem;
  height: 1.875rem;
}
.modal__component .modal__dialog-content .modal__close-icon-button.size--large {
  top: 2.5rem;
  right: 2.5rem;
  width: 5rem;
  height: 5rem;
}
.modal__component .modal__dialog-content .modal__close-icon-button .svg__icon {
  width: inherit;
  height: inherit;
}
.modal__component .modal__dialog-content .modal__component-header {
  display: flex;
  align-items: center;
  color: #2a3541;
  text-align: left;
  font-size: 2.2rem;
  font-family: var(--font-family-header);
  line-height: 2.2rem;
  padding: 3rem;
  padding-bottom: 0;
  font-weight: bold;
}
.modal__component .modal__dialog-content .modal__component-header::first-letter {
  text-transform: capitalize;
}
.modal__component .modal__dialog-content .modal__component-header .svg__icon img {
  width: 2.5rem;
  height: 2.5rem;
}
.modal__component .modal__dialog-content .modal__component-header.top-border {
  padding-bottom: 3rem;
  border-top: none;
  border-bottom: 0.1rem solid #d1d3de;
}
.modal__component .modal__dialog-content .modal__component-header.centered {
  justify-content: center;
}
.modal__component .modal__dialog-content .modal__component-header.header-has-icon {
  padding-right: 6rem;
}
.modal__component .modal__dialog-content .modal__dialog-buttons--close-icon {
  position: absolute;
  top: 1.66666667rem;
  right: 1.66666667rem;
}
.modal__component .modal__dialog-content .modal__dialog-yield {
  font-size: 1.5rem;
  padding: 3rem;
  color: #556474;
  text-align: left;
}
.modal__component .modal__dialog-content .modal__dialog-yield a {
  color: #1f5e7f;
}
.modal__component .modal__dialog-content .modal__dialog-yield a:hover {
  color: #28759f;
}
.modal__component .modal__dialog-content .modal__dialog-yield a:focus,
.modal__component .modal__dialog-content .modal__dialog-yield a:active {
  color: #28759f;
}
.modal__component .modal__dialog-content .modal__dialog-buttons {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  padding: 3rem 2rem;
  border-top: 0.1rem solid #d1d3de;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.row-reverse {
  flex-direction: row-reverse;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.column {
  flex-direction: column;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.end {
  justify-content: flex-end;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.start {
  justify-content: flex-start;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.flex-center {
  justify-content: center;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.between {
  justify-content: space-between;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.around {
  justify-content: space-around;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.cross-start {
  align-items: flex-start;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.cross-end {
  align-items: flex-end;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.stretch {
  align-items: stretch;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.evenly {
  justify-content: space-evenly;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.modal__component .modal__dialog-content .modal__dialog-buttons.wrap {
  flex-wrap: wrap;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.grow {
  flex: 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-half,
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-quarter,
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-sixth,
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-third,
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-two-third {
  box-sizing: border-box;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-remaining-space {
  flex-grow: 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-grow-1 {
  flex: 1 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-grow-2 {
  flex: 2 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-grow-3 {
  flex: 3 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-grow-4 {
  flex: 4 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-grow-5 {
  flex: 5 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-grow-6 {
  flex: 6 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-grow-7 {
  flex: 7 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .flex-grow-8 {
  flex: 8 1;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.pos-left {
  justify-content: flex-start;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.pos-left .modal__dialog-buttons--button {
  min-width: 16.66666667rem;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.pos-right {
  justify-content: flex-end;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.pos-right .modal__dialog-buttons--button {
  min-width: 16.66666667rem;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.pos-half {
  justify-content: right;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.pos-half .modal__dialog-buttons--button {
  width: 50%;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.pos-full {
  justify-content: center;
}
.modal__component .modal__dialog-content .modal__dialog-buttons.pos-full .modal__dialog-buttons--button {
  width: 100%;
}
.modal__component .modal__dialog-content .modal__dialog-buttons .modal__dialog-buttons--button {
  padding: 0 1rem;
}
.buttons__group.orientation--horizontal {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
}
.buttons__group.orientation--horizontal.row-reverse {
  flex-direction: row-reverse;
}
.buttons__group.orientation--horizontal.column {
  flex-direction: column;
}
.buttons__group.orientation--horizontal.end {
  justify-content: flex-end;
}
.buttons__group.orientation--horizontal.start {
  justify-content: flex-start;
}
.buttons__group.orientation--horizontal.flex-center {
  justify-content: center;
}
.buttons__group.orientation--horizontal.between {
  justify-content: space-between;
}
.buttons__group.orientation--horizontal.around {
  justify-content: space-around;
}
.buttons__group.orientation--horizontal.cross-start {
  align-items: flex-start;
}
.buttons__group.orientation--horizontal.cross-end {
  align-items: flex-end;
}
.buttons__group.orientation--horizontal.stretch {
  align-items: stretch;
}
.buttons__group.orientation--horizontal.evenly {
  justify-content: space-evenly;
}
.buttons__group.orientation--horizontal.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.buttons__group.orientation--horizontal.wrap {
  flex-wrap: wrap;
}
.buttons__group.orientation--horizontal.grow {
  flex: 1;
}
.buttons__group.orientation--horizontal .flex-half,
.buttons__group.orientation--horizontal .flex-quarter,
.buttons__group.orientation--horizontal .flex-sixth,
.buttons__group.orientation--horizontal .flex-third,
.buttons__group.orientation--horizontal .flex-two-third {
  box-sizing: border-box;
}
.buttons__group.orientation--horizontal .flex-remaining-space {
  flex-grow: 1;
}
.buttons__group.orientation--horizontal .flex-grow-1 {
  flex: 1 1;
}
.buttons__group.orientation--horizontal .flex-grow-2 {
  flex: 2 1;
}
.buttons__group.orientation--horizontal .flex-grow-3 {
  flex: 3 1;
}
.buttons__group.orientation--horizontal .flex-grow-4 {
  flex: 4 1;
}
.buttons__group.orientation--horizontal .flex-grow-5 {
  flex: 5 1;
}
.buttons__group.orientation--horizontal .flex-grow-6 {
  flex: 6 1;
}
.buttons__group.orientation--horizontal .flex-grow-7 {
  flex: 7 1;
}
.buttons__group.orientation--horizontal .flex-grow-8 {
  flex: 8 1;
}
.buttons__group.orientation--horizontal > button:first-of-type {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.buttons__group.orientation--horizontal > button:last-of-type {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.buttons__group.orientation--horizontal > button:not(:last-of-type):not(:first-of-type) {
  border-radius: 0 !important;
}
.buttons__group.orientation--horizontal > button:not(:last-of-type) {
  border-right: none !important;
}
.buttons__group.orientation--vertical {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  flex-direction: column;
}
.buttons__group.orientation--vertical.row-reverse {
  flex-direction: row-reverse;
}
.buttons__group.orientation--vertical.column {
  flex-direction: column;
}
.buttons__group.orientation--vertical.end {
  justify-content: flex-end;
}
.buttons__group.orientation--vertical.start {
  justify-content: flex-start;
}
.buttons__group.orientation--vertical.flex-center {
  justify-content: center;
}
.buttons__group.orientation--vertical.between {
  justify-content: space-between;
}
.buttons__group.orientation--vertical.around {
  justify-content: space-around;
}
.buttons__group.orientation--vertical.cross-start {
  align-items: flex-start;
}
.buttons__group.orientation--vertical.cross-end {
  align-items: flex-end;
}
.buttons__group.orientation--vertical.stretch {
  align-items: stretch;
}
.buttons__group.orientation--vertical.evenly {
  justify-content: space-evenly;
}
.buttons__group.orientation--vertical.overlay-dark {
  background-color: rgba(0, 0, 0, 0.7);
}
.buttons__group.orientation--vertical.wrap {
  flex-wrap: wrap;
}
.buttons__group.orientation--vertical.grow {
  flex: 1;
}
.buttons__group.orientation--vertical .flex-half,
.buttons__group.orientation--vertical .flex-quarter,
.buttons__group.orientation--vertical .flex-sixth,
.buttons__group.orientation--vertical .flex-third,
.buttons__group.orientation--vertical .flex-two-third {
  box-sizing: border-box;
}
.buttons__group.orientation--vertical .flex-remaining-space {
  flex-grow: 1;
}
.buttons__group.orientation--vertical .flex-grow-1 {
  flex: 1 1;
}
.buttons__group.orientation--vertical .flex-grow-2 {
  flex: 2 1;
}
.buttons__group.orientation--vertical .flex-grow-3 {
  flex: 3 1;
}
.buttons__group.orientation--vertical .flex-grow-4 {
  flex: 4 1;
}
.buttons__group.orientation--vertical .flex-grow-5 {
  flex: 5 1;
}
.buttons__group.orientation--vertical .flex-grow-6 {
  flex: 6 1;
}
.buttons__group.orientation--vertical .flex-grow-7 {
  flex: 7 1;
}
.buttons__group.orientation--vertical .flex-grow-8 {
  flex: 8 1;
}
.buttons__group.orientation--vertical > button:first-of-type {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.buttons__group.orientation--vertical > button:last-of-type {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.buttons__group.orientation--vertical > button:not(:last-of-type):not(:first-of-type) {
  border-radius: 0 !important;
}
.buttons__group.orientation--vertical > button:not(:last-of-type) {
  border-bottom: none !important;
}
.template-card-modal .card-modal-component__container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21000;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.25);
}
.template-card-modal .card-modal-component__container .lesson-card-lesson-results,
.template-card-modal .card-modal-component__container #assignment-results-component {
  overflow-x: clip;
}
.template-card-modal .card-modal-component__container .lesson-card-lesson-results .table__regular thead,
.template-card-modal .card-modal-component__container #assignment-results-component .table__regular thead {
  position: sticky;
  top: 0;
  z-index: 7;
  background-color: white;
}
.template-card-modal .card-modal-component__container .card-modal-component__close {
  position: absolute;
  right: 0.5rem;
  top: -5rem;
  font-size: 4rem;
  color: #ffffff;
  cursor: pointer;
}
.template-card-modal .card-modal-component__container .card-modal-component__close * {
  cursor: pointer;
}
.template-card-modal .card-modal-component__container .card-modal-component__wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.template-card-modal .card-modal-component__container .card-modal-component__wrapper .modal-flex {
  width: 100%;
  z-index: 21000;
  background-color: white;
  border-radius: 1rem;
  overflow-y: auto;
  line-height: 2rem;
  height: auto;
  max-width: 90%;
  position: relative;
}
.template-card-modal .card-modal-component__container .card-modal-component__wrapper .card-modal.modal-flex {
  width: 90%;
  min-height: calc(100vh - 10rem);
  height: auto;
  margin-top: 10rem;
  border-radius: 1rem 1rem 0 0;
  display: block;
  overflow: visible;
}
.template-card-modal .card-modal-component__container .card-modal-component__wrapper .card-modal.modal-flex .modal-flex {
  min-height: 10rem;
  border-radius: 1rem;
  margin-top: 0;
}
.template-color-picker .color-selection {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.template-color-picker .color-selection .color-section {
  display: flex;
  flex-direction: column;
  gap: 0.83333333rem;
}
.template-color-picker .color-selection .color-section__label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: #2a3541;
  margin: 0;
}
.template-color-picker .color-selection .color-grid {
  display: inline-grid;
  grid-template-columns: repeat(13, 3.75rem);
}
.template-color-picker .color-selection .author-color-container {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  white-space: normal;
  z-index: 1;
  margin-bottom: 1.66666667rem;
}
.template-color-picker .color-selection .regular-colors-container {
  z-index: 1;
}
.template-color-picker .color-selection .markers {
  z-index: 1;
}
.template-color-picker .color-selection .marker-color-wrapper {
  position: relative;
}
.template-color-picker .color-selection .input-type-icons {
  position: absolute;
  display: flex;
  z-index: 2;
  background-color: #fff;
  right: -0.20833333rem;
  top: -0.20833333rem;
  border-radius: 50%;
  box-shadow: 0 0 2px 0 rgba(42, 53, 65, 0.08), 0 2px 4px 0 rgba(42, 53, 65, 0.16);
  padding: 0.3125rem;
}
.template-color-picker .color-selection .input-type-icons .svg__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.template-color-picker .color-selection .input-type-icons.multi {
  border-radius: 37.5rem;
}
.template-color-picker .color-selection .input-type-icons.multi :first-child .svg__icon {
  margin-right: 0.20833333rem;
}
.template-color-picker .color-selection .color-circle {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.41666667rem;
}
.template-color-picker .color-selection .color-circle .color-circle-outer {
  min-width: 2.5rem;
  width: 2.5rem;
  min-height: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  border: 0.20833333rem solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
}
.template-color-picker .color-selection .color-circle .color-circle-outer .color-circle-inner {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 100%;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}
.template-color-picker .color-selection .color-circle .color-circle-outer .color-circle-inner.border {
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}
.template-color-picker .color-selection .color-circle .color-circle-outer .color-circle-inner.transparent {
  border: 1px solid #aeb7c2;
  background: #fff;
  background: linear-gradient(45deg, #fff 0%, #fff 45%, #f00 45%, #f00 55%, #fff 55%, #fff 100%);
}
@media (hover: hover) and (pointer: fine) {
  .template-color-picker .color-selection .color-circle:hover .color-circle-outer {
    box-shadow: 0 0 0 0.20833333rem white, 0 0 0 0.41666667rem #b7e3fa;
  }
  .template-color-picker .color-selection .color-circle.is-selected:hover .color-circle-outer {
    box-shadow: 0 0 0 0.20833333rem white, 0 0 0 0.41666667rem #1f5e7f;
  }
}
.template-color-picker .color-selection .color-circle.is-selected .color-circle-outer {
  box-shadow: 0 0 0 0.20833333rem white, 0 0 0 0.41666667rem #1f5e7f;
}
.template-color-picker .color-selection .color-circle.disabled {
  opacity: 0.5;
  filter: grayscale(1);
  pointer-events: none;
}
.template-color-picker .color-selection .custom-color-selection {
  display: grid;
  grid-template-columns: repeat(13, 3.75rem);
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .hide_selection {
  opacity: 0;
  position: absolute;
  inset: 0;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .hide_selection.disable {
  pointer-events: none;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .hide_selection input,
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .hide_selection .atom-input-color {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color {
  position: absolute;
  top: 0;
  left: 0;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color .edit-icon-overlay {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
  background: white;
  border-radius: 50%;
  width: 1.45833333rem;
  height: 1.45833333rem;
  justify-content: center;
  align-items: center;
  transition: background 0.1s ease;
  box-shadow: 0 0 2px 0 rgba(42, 53, 65, 0.08), 0 1px 3px 0 rgba(42, 53, 65, 0.2);
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color .edit-icon-overlay .flat__icon {
  width: 0.83333333rem;
  height: 0.83333333rem;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color .edit-icon-overlay .flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
@media (hover: hover) and (pointer: fine) {
  .template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color .edit-icon-overlay:hover {
    background: #e9eaef;
  }
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color .delete-icon-overlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: white;
  border-radius: 50%;
  width: 1.45833333rem;
  height: 1.45833333rem;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s ease;
  box-shadow: 0 0 2px 0 rgba(42, 53, 65, 0.08), 0 1px 3px 0 rgba(42, 53, 65, 0.2);
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color .delete-icon-overlay .flat__icon {
  width: 0.83333333rem;
  height: 0.83333333rem;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color .delete-icon-overlay .flat__icon .icon--graphics {
  fill: #921f1f;
  color: #921f1f;
}
@media (hover: hover) and (pointer: fine) {
  .template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color .delete-icon-overlay:hover {
    background: #fbe8e8;
  }
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color.is-selected .edit-icon-overlay,
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .custom-round-color.is-selected .delete-icon-overlay {
  display: flex;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .add_color {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  pointer-events: none;
  background: #e9eaef;
  border-radius: 50%;
  transition: background 0.1s ease;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .add_color .flat__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper .add_color .flat__icon .icon--graphics {
  fill: #8c99a8;
  color: #8c99a8;
}
@media (hover: hover) and (pointer: fine) {
  .template-color-picker .color-selection .custom-color-selection .custom-color-wrapper:first-child:hover .add_color {
    background: #f5f5f8;
  }
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper:first-child:active .add_color {
  background: #d1d3de;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper.max-reached .add_color {
  opacity: 0.4;
  cursor: default;
}
.template-color-picker .color-selection .custom-color-selection .custom-color-wrapper.max-reached .hide_selection {
  pointer-events: none;
}
.template-color-picker .color-selection .transparent-option {
  margin-bottom: 0.83333333rem;
}
.template-color-picker .color-selection .transparent-option .color-circle-outer {
  border: 0.20833333rem solid transparent;
}
.template-color-picker .color-selection .transparent-option.is-selected .color-circle-outer {
  box-shadow: 0 0 0 0.20833333rem white, 0 0 0 0.41666667rem #1f5e7f;
}
@media (hover: hover) and (pointer: fine) {
  .template-color-picker .color-selection .transparent-option:hover .color-circle-outer {
    box-shadow: 0 0 0 0.20833333rem white, 0 0 0 0.41666667rem #b7e3fa;
  }
}
.template-color-picker .color-selection.element-styling {
  gap: 0.83333333rem;
}
.template-color-picker .color-selection.element-styling .color-section {
  gap: 0.41666667rem;
}
.template-color-picker .color-selection.element-styling .color-section__label {
  font-size: 1.04166667rem;
  line-height: 1.66666667rem;
}
.template-color-picker .color-selection.element-styling .color-grid {
  grid-template-columns: repeat(13, 2.91666667rem);
}
.template-color-picker .color-selection.element-styling .color-circle {
  padding: 0.20833333rem;
}
.template-color-picker .color-selection.element-styling .color-circle .color-circle-outer {
  min-width: 2.08333333rem;
  width: 2.08333333rem;
  min-height: 2.08333333rem;
  height: 2.08333333rem;
}
.template-color-picker .color-selection.element-styling .color-circle .color-circle-inner {
  width: 2.08333333rem;
  min-width: 2.08333333rem;
  height: 2.08333333rem;
  min-height: 2.08333333rem;
}
@media (hover: hover) and (pointer: fine) {
  .template-color-picker .color-selection.element-styling .color-circle:hover .color-circle-outer {
    box-shadow: 0 0 0 0.10416667rem white, 0 0 0 0.20833333rem #b7e3fa;
  }
  .template-color-picker .color-selection.element-styling .color-circle.is-selected:hover .color-circle-outer {
    box-shadow: 0 0 0 0.10416667rem white, 0 0 0 0.20833333rem #1f5e7f;
  }
}
.template-color-picker .color-selection.element-styling .color-circle.is-selected .color-circle-outer {
  box-shadow: 0 0 0 0.10416667rem white, 0 0 0 0.20833333rem #1f5e7f;
}
.template-color-picker .color-selection.element-styling .custom-color-selection {
  grid-template-columns: repeat(13, 2.91666667rem);
}
.template-color-picker .color-selection.element-styling .custom-color-selection .custom-color-wrapper {
  width: 2.91666667rem;
  height: 2.91666667rem;
}
.template-color-picker .color-selection.element-styling .custom-color-selection .custom-color-wrapper .add_color {
  top: 0.20833333rem;
  left: 0.20833333rem;
  width: 2.08333333rem;
  height: 2.08333333rem;
}
.template-color-picker .color-selection.element-styling .custom-color-selection .custom-color-wrapper .add_color .flat__icon {
  width: 1.04166667rem;
  height: 1.04166667rem;
}
.template-global-card .global-card-back {
  position: absolute;
  top: -5rem;
  color: #ffffff;
  line-height: 4rem;
  vertical-align: middle;
  font-size: 1.9rem;
  font-weight: 600;
  cursor: pointer;
}
.template-global-card .global-card-back .flat__icon {
  width: 1.7rem;
  height: 1.7rem;
  line-height: 4rem;
  display: inline-block;
  margin-right: 0.5em;
}
.template-global-card .global-card-back .flat__icon .icon--container {
  display: flex;
}
.template-global-card .global-card-back .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.template-global-card .global-card-header {
  height: 10rem;
  width: 100%;
  border-bottom: 1px solid #aeb7c2;
  border-radius: 1rem 1rem 0 0;
  background: #f5f5f8;
}
.template-global-card .global-card-header *:not(input):not(textarea) {
  user-select: text;
}
.template-global-card .global-card-header.large-header {
  height: 15rem;
}
.template-global-card .global-card-header-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2a3541;
  line-height: 1.1em;
}
.template-global-card .global-card-header-subtitle {
  font-size: 1.87rem;
  color: #2a3541;
  margin-top: 0.6rem;
  line-height: 1.1em;
}
.template-global-card .global-card-header-subtitle strong {
  font-weight: 600;
}
.template-global-card .global-card-content {
  background: #fff;
  min-height: calc(100vh - 20rem);
  width: 100%;
}
.template-global-card .global-card-content *:not(input):not(textarea) {
  user-select: text;
}
.template-global-card .global-card-content.border-radius {
  border-radius: 1rem 1rem 0 0;
}
.template-global-card .card-loading-container {
  width: 100%;
  min-height: 30rem;
}
.template-global-card-yield .global-card-back {
  position: absolute;
  top: -5rem;
  color: #ffffff;
  line-height: 4rem;
  vertical-align: middle;
  font-size: 1.9rem;
  font-weight: 600;
  cursor: pointer;
}
.template-global-card-yield .global-card-back .flat__icon {
  width: 1.7rem;
  height: 1.7rem;
  line-height: 4rem;
  display: inline-block;
  margin-right: 0.5em;
}
.template-global-card-yield .global-card-back .flat__icon .icon--container {
  display: flex;
}
.template-global-card-yield .global-card-back .flat__icon .icon--graphics {
  fill: #ffffff;
  color: #ffffff;
}
.template-global-card-yield .global-card-header {
  height: 10rem;
  width: 100%;
  border-bottom: 1px solid #aeb7c2;
  border-radius: 1rem 1rem 0 0;
  background: #f5f5f8;
}
.template-global-card-yield .global-card-header *:not(input):not(textarea) {
  user-select: text;
}
.template-global-card-yield .global-card-header.large-header {
  height: 15rem;
}
.template-global-card-yield .global-card-header-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2a3541;
  line-height: 1.1em;
}
.template-global-card-yield .global-card-header-subtitle {
  font-size: 1.87rem;
  color: #2a3541;
  margin-top: 0.6rem;
  line-height: 1.1em;
}
.template-global-card-yield .global-card-header-subtitle strong {
  font-weight: 600;
}
.template-global-card-yield .global-card-content {
  background: #fff;
  min-height: calc(100vh - 20rem);
  width: 100%;
}
.template-global-card-yield .global-card-content *:not(input):not(textarea) {
  user-select: text;
}
.template-global-card-yield .global-card-content.border-radius {
  border-radius: 1rem 1rem 0 0;
}
.template-global-card-yield .card-loading-container {
  width: 100%;
  min-height: 30rem;
}
.template-library-header {
  max-height: 15rem;
  z-index: 1;
  text-align: center;
  padding: 2.89rem 3.33333333rem;
  border-bottom: 1px solid #d1d3de;
}
.template-library-header .logo-wrapper img.gynzykids-logo {
  height: 4rem;
}
.template-library-header div.flex.flex-center {
  position: relative;
}
.template-library-header .buttons-header-right button {
  margin: 0 0.4rem;
}
.template-library-header .buttons-header-right button:last-child {
  margin: 0;
  margin-left: 0.4rem;
}
.template-library-header .buttons-header-right a {
  padding: 0.89rem 2.04rem;
  font-size: 1.66rem;
  min-height: 2.4rem;
  border-radius: 0.63rem;
  color: #556474;
  background-color: #e9eaef;
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  cursor: pointer;
  line-height: normal;
  box-sizing: content-box;
  margin: 0 0.4rem;
}
.template-library-header .buttons-header-right a:not(.desktop-button-disabled):hover {
  background-color: #f5f5f8;
}
.template-library-header .buttons-header-right a:not(.desktop-button-disabled):active {
  background-color: #d1d3de;
  color: rgba(255, 255, 255, 0.7);
}
.template-library-header .buttons-header-right a.desktop-button-disabled {
  opacity: 0.5;
  cursor: default;
}
.template-library-header .mobile-buttons.flex {
  display: none;
}
.template-library-header .mobile-buttons,
.template-library-header .desktop-buttons {
  position: absolute;
  right: 0;
}
.template-loading-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.template-loading-screen img.logo {
  width: 28rem;
}
.template-loading-screen .loader {
  position: relative;
  width: 21rem;
  border-radius: 0.20833333rem;
  padding: 0.10416667rem;
  background: #d1d3de;
  margin-top: 2.1875rem;
  overflow: hidden;
}
.template-loading-screen .loader .loader-bar {
  position: absolute;
  inset: 0 0 0 -20%;
  border-radius: 0.20833333rem;
  background: #06c;
  animation: borealisBar 1.75s linear infinite;
  width: 20%;
}
@keyframes borealisBar {
  0% {
    left: -20%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: -20%;
  }
}
.template-page-header {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  height: 6.25rem;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #d1d3de;
  box-sizing: border-box;
  padding: 0 0.83333333rem 0 1.66666667rem;
  z-index: 5;
  min-width: 0;
}
.template-page-header.audience-student {
  justify-content: space-between;
}
.template-page-header.audience-student .page-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.template-page-header.middle-header {
  justify-content: space-between;
}
.template-page-header.middle-header .page-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.template-page-header.audience-teacher .page-header__aside {
  margin-left: auto;
}
.template-page-header.audience-teacher .button-left button {
  margin-right: 1.5rem;
}
@media print {
  .template-page-header {
    display: none;
  }
}
.template-page-header .button-left .logout-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 0.83333333rem;
  background-color: white;
}
.template-page-header .button-left .logout-button .styleguide.flat__icon {
  width: 2.08333333rem;
  height: 2.08333333rem;
}
.template-page-header .button-left .logout-button .styleguide.flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.template-page-header .button-left .logout-button span {
  text-decoration: none;
  color: #556474;
  font-size: 1.66666667rem;
  font-family: 'Open Sans', sans-serif;
}
.template-page-header .button-left .logout-button:hover .styleguide.flat__icon .icon--graphics {
  fill: #6b7c8e;
  color: #6b7c8e;
}
.template-page-header .button-left .logout-button:hover span {
  color: #6b7c8e;
}
.template-page-header .button-left .logout-button:active .styleguide.flat__icon .icon--graphics {
  fill: #3f4c5a;
  color: #3f4c5a;
}
.template-page-header .button-left .logout-button:active span {
  color: #3f4c5a;
}
.template-page-header .page-header__title {
  max-width: 70%;
  height: 3.75rem;
  font-family: var(--font-family-header);
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 3.75rem;
  color: #2a3541;
  display: flex;
  text-align: center;
  word-break: break-word;
}
.template-page-header .page-header__title .header-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-page-header .page-header__title .header-title .header-title__text {
  text-overflow: ellipsis;
  overflow: hidden;
}
.template-page-header .page-header__title .header-title .header-title__svg-icon,
.template-page-header .page-header__title .header-title .header-title__icon {
  height: 3.33333333rem;
  width: 3.33333333rem;
  margin-right: 0.83333333rem;
}
.template-page-header .page-header__title .header-title .header-title__svg-icon .styleguide.svg__icon,
.template-page-header .page-header__title .header-title .header-title__icon .styleguide.svg__icon,
.template-page-header .page-header__title .header-title .header-title__svg-icon img,
.template-page-header .page-header__title .header-title .header-title__icon img {
  height: 3.33333333rem;
  width: 3.33333333rem;
}
.template-page-header .page-header__aside {
  display: flex;
  align-items: center;
  height: 100%;
}
.template-page-header .page-header__aside .page-header__group-buttons {
  display: flex;
  align-items: center;
  height: 6.25rem;
}
.template-page-header .page-header__aside .page-header__group-buttons .button-close {
  margin-left: 1.5rem;
}
.template-section-component {
  position: relative;
  border-radius: 1.66666667rem;
  border: 1px solid var(--border-default);
  height: auto;
  margin: 2.5rem 0;
}
.template-section-component h3 {
  font-size: 2.08333333rem;
  color: var(--text-header);
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0;
  line-height: 3.33333333rem;
  margin: 1.66666667rem 2.5rem;
}
.template-section-component .template-section-button {
  position: absolute;
  right: 1.66666667rem;
  top: 1.66666667rem;
}
.template-section-component table {
  border-bottom-left-radius: 1.66666667rem;
  border-bottom-right-radius: 1.66666667rem;
}
.empty-state-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  justify-content: center;
  text-align: center;
}
.empty-state-placeholder .empty-state-placeholder__icon {
  height: 8.33333333rem;
  width: 8.33333333rem;
  margin-bottom: 1.66666667rem;
}
.empty-state-placeholder h3.empty-state-placeholder__title {
  font-size: 2.08333333rem;
  line-height: 3.125rem;
  font-weight: 600;
}
.empty-state-placeholder div.empty-state-placeholder__body {
  margin: 1.25rem 0;
}
.empty-state-placeholder div.empty-state-placeholder__body p {
  font-size: 1.66666667rem;
  line-height: 2.5rem;
  color: #556474;
  margin-bottom: 0;
}
.empty-state-placeholder .button-group {
  margin-top: 2.08333333rem;
  display: flex;
}
.empty-state-placeholder .button-group .button-divider {
  font-size: 1.66666667rem;
  color: #556474;
}
.empty-state-placeholder .button-group .button__regular {
  margin: 0 0.625rem;
}
.empty-state-placeholder .button-group .styleguide__tooltip {
  width: 1.25rem;
}
.unverified-alert-component {
  width: 100%;
  padding: 0 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: left;
}
.board-lessons .unverified-alert-component {
  margin-left: 50%;
  transform: translate(-50%);
  width: 96rem;
  position: absolute;
  z-index: 999;
  user-select: none;
}
.unverified-alert-component .unverified-alert {
  font-size: 1.25rem;
  display: flex;
  justify-content: space-between;
}
.unverified-alert-component .unverified-alert .unverified-alert__content {
  flex: 1;
}
.unverified-alert-component .unverified-alert .flat__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 1.04166667rem;
}
.unverified-alert-component .unverified-alert .flat__icon .icon--graphics {
  fill: #fff;
  color: #fff;
}
.unverified-alert-component .unverified-alert .unverified-alert__link {
  font-weight: 600;
}
.unverified-alert-component .unverified-alert .unverified-alert__link a {
  margin-left: 0.52083333rem;
  text-decoration: underline;
  cursor: pointer;
}
.teacher-profile-page {
  height: 100%;
  overflow: auto;
  line-height: 1.5;
}
.teacher-profile-page .teacher-profile-field-group {
  width: fit-content;
}
.teacher-profile-page .managed-by-speechi {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-top: -1.04166667rem;
  padding-top: 0.41666667rem;
  color: var(--text-paragraph, #556474);
  font-family: 'Open Sans';
  font-size: 1.04166667rem;
}
.teacher-profile-page .managed-by-speechi .styleguide.flat__icon {
  width: 1.04166667rem;
  height: 1.04166667rem;
}
.teacher-profile-page .managed-by-speechi .styleguide.flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.teacher-profile-page .profile-modal .modal__dialog-content {
  width: 52.08333333rem;
  color: var(--text-paragraph, #556474);
  font-feature-settings: 'liga' off, 'clig' off;
  /* paragraph/default */
  font-family: 'Open Sans';
  font-size: 1.66666667rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.teacher-profile-page .legacy-pricing-alert {
  margin-top: 1.66666667rem;
  width: fit-content;
  color: #556474;
  font-size: 1.5625rem;
  line-height: 1.5;
}
.teacher-profile-page .teacher-profile-route .unverified-alert {
  margin-bottom: 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section {
  margin: 2.08333333rem;
  border: 1px solid #d1d3de;
  border-radius: 0.5rem;
  padding: 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .section__title {
  color: #3f4c5a;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  padding-bottom: 1.25rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section + .sub-section__title {
  margin-top: 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .sub-section__title {
  color: #556474;
  font-size: 1.66rem;
  font-weight: 600;
  line-height: 3rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1.04166667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.admin-notifications .flex {
  gap: 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.admin-notifications p {
  padding-top: 1.25rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.password-line {
  align-items: flex-start;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.password-line .input-field__error-message {
  margin-right: 3.125rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.name-line {
  align-items: flex-start;
  width: 42.70833333rem;
  column-gap: 0.83333333rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.name-line > * {
  flex: 1;
  min-width: 0;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.name-line input[type='text'] {
  width: 100%;
  margin-right: 0;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.name-line .input-field__error-message {
  margin-right: 1.04166667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section p {
  color: #556474;
  font-size: 1.66666667rem;
  line-height: 1.5;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section input[type='text'] {
  width: 20.83333333rem;
  margin-right: 1.04166667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .input-field__label {
  font-weight: 600;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .profile_email input {
  width: 42.70833333rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .profile_password,
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .profile_email {
  display: flex;
  flex-direction: column;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .dropdown__basic,
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .profile_password input {
  width: 32.29166667rem;
  margin-right: 3.125rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .teacher-profile-school-search {
  width: 67.70833333rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .teacher-profile-school__close-school-search {
  color: #277cd9;
  font-size: 1.5625rem;
  padding: 1rem 0;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section.new-school-line {
  padding-bottom: 2.5rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .teacher-profile-school-name-wrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .teacher-profile-link-school {
  display: flex;
  align-items: center;
  /* Centers the items vertically if needed */
  gap: 0.5rem;
  /* Optional: Adds some space between the icon and text */
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .teacher-profile-control-buttons {
  display: flex;
  align-items: center;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .teacher-profile-control-buttons > * {
  margin-right: 1rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .teacher-profile-control-buttons .teacher-profile-info {
  display: flex;
  align-items: center;
  gap: 0.41666667rem;
  height: 4.16666667rem;
  padding: 0 1.5rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .error-message {
  padding-top: 1rem;
  color: red;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .button-info {
  margin-bottom: 1rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .subscription-label {
  display: flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: 1.25rem;
  color: white;
  font-size: 1.25rem;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #277cd9;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .subscription-label.trial {
  background-color: #fd8b1d;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .subscription-info-text {
  margin-left: 1.66666667rem;
  color: #556474;
  font-style: italic;
  font-size: 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .subscription-manage-link {
  padding-top: 0.83333333rem;
  font-size: 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .subscription-container {
  justify-content: space-between;
  align-items: center;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .subscription-content {
  flex: 1;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .subscription-action {
  flex-shrink: 0;
  padding-left: 3.33333333rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .button__icon__label {
  display: flex;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .button__icon__label .actionable-link {
  text-decoration: none;
  color: #277cd9;
  font-weight: 600;
  transition: all 0.15s ease;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .button__icon__label .actionable-link:hover {
  color: #4e92ff;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .button__icon__label .flat__icon {
  height: 1.45833333rem;
  width: 1.45833333rem;
  margin: 0 0.52083333rem 0 1.04166667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-sub-section .button__icon__label .flat__icon .icon--graphics {
  fill: #277cd9;
  color: #277cd9;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section {
  display: flex;
  align-items: center;
  width: 70rem;
  padding: 2.5rem;
  border: 1px solid #d1d3de;
  border-radius: 1.66666667rem;
  margin-bottom: 1.45833333rem;
  gap: 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section:last-child {
  margin-bottom: 0;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section .teacher-profile-linked-account-icon {
  justify-content: center;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section .teacher-profile-linked-account-icon .svg__icon {
  width: 6rem;
  height: 6rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section .teacher-profile-linked-account-info .teacher-profile-info {
  margin-top: 0.83333333rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section .teacher-profile-linked-account-info .teacher-profile-linked-account-info-texts {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section .teacher-profile-linked-account-info .teacher-profile-linked-account-info-texts .teacher-profile-linked-account-info-name {
  font-size: 1.66666667rem;
  font-weight: 600;
  line-height: 2.5rem;
  color: #2a3541;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section .teacher-profile-linked-account-info .teacher-profile-linked-account-info-texts .teacher-profile-linked-account-info-description {
  font-size: 1.25rem;
  color: #556474;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-section .teacher-profile-linked-account-buttons {
  margin-left: auto;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .account-actions {
  display: flex;
  flex-direction: column;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .account-actions .account-action-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2.08333333rem;
  border: 1px solid #d1d3de;
  border-radius: 1.25rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .account-actions .account-action-card .account-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .account-actions .account-action-card .account-action-item .account-action-info {
  display: flex;
  flex-direction: column;
  gap: 0.41666667rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .account-actions .account-action-card .account-action-item .account-action-info .account-action-name {
  font-size: 1.66666667rem;
  font-weight: 600;
  line-height: 2.5rem;
  color: #2a3541;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .account-actions .account-action-card .account-action-item .account-action-info .account-action-description {
  font-size: 1.25rem;
  color: #556474;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .account-actions .account-action-card .account-action-divider {
  border-top: 1px solid #d1d3de;
  margin: 2.08333333rem 0;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info {
  background-color: #f5f5f8;
  border-radius: 0.52083333rem;
  margin-right: 2rem;
  padding: 1.5rem;
  font-size: 1.5625rem;
  font-style: normal;
  color: #556474;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info.approved {
  display: flex;
  background-color: #dbfbd7;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info.approved .flat__icon {
  margin: 0 0.5rem;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info.approved .flat__icon .icon--graphics {
  fill: #167b0c;
  color: #167b0c;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info.approved span {
  color: #167b0c;
  font-weight: 600;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info.warn {
  background-color: #fff7e5;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info.warn span {
  font-style: italic;
  font-weight: 600;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info.error {
  background-color: #fef1f1;
  height: auto;
  text-align: left;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-info.error span {
  color: #c61017;
  font-weight: 600;
}
.teacher-profile-page .teacher-profile-route .teacher-profile-section .teacher-profile-linked-account-error {
  display: flex;
  background-color: #fef1f1;
  border-radius: 0.5rem;
  margin: 0 0.5rem;
  margin-top: 0.5rem;
  padding: 1.5rem;
  font-weight: 600;
  font-size: 1.5625rem;
  color: #c61017;
}
.teacher-profile-page .teacher-profile-route.sectioned .teacher-profile-section {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 2.08333333rem 1.66666667rem;
}
.teacher-profile-page .teacher-profile-route.sectioned .teacher-profile-section .section__title {
  display: none;
}
.teacher-profile-error {
  width: 100%;
}
.teacher-profile-error .teacher-profile-error-container {
  width: 43.75rem;
}
.country-item-rtl {
  direction: rtl;
  text-align: right;
}
.modal-dialog-web-only-modal .modal__dialog-content {
  margin: 0 1.66666667rem;
  width: 58.33333333rem;
  animation: fadeIn 0.3s ease-in-out;
}
.modal-dialog-web-only-modal .modal__dialog-content .modal__dialog-yield {
  padding: 3.33333333rem;
}
.modal-dialog-web-only-modal .modal__dialog-content .modal__dialog-yield .image-container {
  width: 31.25rem;
  height: auto;
  align-self: center;
}
.modal-dialog-web-only-modal .modal__dialog-content .modal__dialog-yield .image-container .svg__icon {
  width: 100%;
  height: 100%;
}
.modal-dialog-web-only-modal .modal__dialog-content .modal__dialog-yield h2 {
  font-size: 2.5rem;
  font-weight: 600;
  font-family: var(--font-family-header);
}
.modal-dialog-web-only-modal .modal__dialog-content .modal__dialog-buttons {
  border-top: none;
  padding-top: 0;
}
.modal-dialog-web-only-modal .web-only-container {
  display: flex;
  flex-direction: column;
  gap: 3.33333333rem;
}
.modal-dialog-web-only-modal .web-only-container .dropdown-container {
  width: 26.45833333rem;
  margin-bottom: -1.66666667rem;
}
.school-label {
  display: flex;
  flex-direction: row;
  background-color: #f5f5f8;
  border-radius: 0.52083333rem;
  margin: 0 1.04166667rem 1.04166667rem 0;
  line-height: 2.5rem;
  padding: 1.66666667rem;
  font-size: 1.66666667rem;
  color: #556474;
  white-space: nowrap;
  width: 42.5rem;
  cursor: default;
}
.school-label .school-label__data {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-width: 100%;
  gap: 2.08333333rem;
}
.school-label .school-label__data .school {
  font-size: 1.66666667rem;
  line-height: 2.5rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.school-label .school-label__data .school-info {
  flex-direction: row;
  display: flex;
  gap: 1.25rem;
  max-width: 100%;
  min-width: 100%;
}
.school-label .school-label__data .school-info .school-info-icon {
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.school-label .school-label__data .school-info .school-info-icon .svg__icon {
  height: 4.16666667rem;
  width: 4.16666667rem;
}
.school-label .school-label__data .school-info .school-info-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
}
.school-label .school-label__data .school-info .school-info-actions {
  margin-left: auto;
}
.school-label .school-label__data .school-info .school-info-actions .center-vertically {
  align-content: center;
  height: 100%;
}
.school-label .school-label__data .school-info-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}
.school-label .school-label__data .address,
.school-label .school-label__data .type,
.school-label .school-label__data .external-identifier {
  font-size: 1.25rem;
  line-height: 2.08333333rem;
  color: #556474;
  white-space: nowrap;
  /* Prevents the text from wrapping */
  overflow: hidden;
  /* Hides overflowed text */
  text-overflow: ellipsis;
  /* Adds ellipsis when the text is too long */
  max-width: 100%;
  /* Ensures it doesn’t exceed the container's width */
  display: inline-block;
  /* Necessary for ellipsis to work on inline elements */
}
.school-label .school-label__data .school-info-status {
  font-size: 1.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.school-label .school-label__data .school-info-status .active-label {
  font-size: 1.04166667rem;
  margin-left: 0.83333333rem;
  display: flex;
  height: 2.08333333rem;
  padding: 0.41666667rem 0.83333333rem;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  background-color: #28759f;
  color: white;
}
.school-label .school-label__data .school-info-status > .flat__icon {
  height: 1.66666667rem;
  width: 1.66666667rem;
  margin: 0 0.52083333rem 0 1.04166667rem;
}
.school-label .school-label__data .school-info-status > .flat__icon .icon--graphics {
  fill: #ce6e0d;
  color: #ce6e0d;
}
.school-label .school-label__data .school-info-subscriptions-container {
  display: flex;
  flex-direction: column;
  gap: 0.41666667rem;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container {
  font-size: 1.25rem;
  display: flex;
  flex-direction: row;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container .school-info-subscription-header--hidden {
  color: transparent;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container .school-info-subscription {
  display: flex;
  flex-direction: row;
  gap: 0.41666667rem;
  margin-left: 0.41666667rem;
  align-items: center;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container .school-info-subscription .svg__icon {
  width: 1.66666667rem;
  height: 1.66666667rem;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container .school-info-subscription .icon__info-round {
  width: 1.66666667rem;
  height: 1.66666667rem;
  cursor: pointer;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container .school-info-subscription .icon__info-round .icon--graphics {
  fill: #1f5e7f;
  color: #1f5e7f;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container .school-info-subscription .ember-tooltip {
  pointer-events: initial;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container .school-info-subscription .ember-tooltip a {
  color: #ffffff;
  text-decoration: underline;
  font-size: 1.25rem;
  line-height: 2.08333333rem;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-container .school-info-subscription .ember-tooltip a:hover {
  opacity: 0.8;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-none {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1.66666667rem;
  gap: 0.83333333rem;
  background-color: #d4eefc;
  color: #1a455b;
  font-size: 1.25rem;
  line-height: 2.08333333rem;
  border-radius: 0.83333333rem;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-none .school-info-subscription-none-description {
  white-space: normal;
  word-break: break-word;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-none .school-info-subscription-none-description a {
  text-decoration: underline;
  color: #1a455b;
}
.school-label .school-label__data .school-info-subscriptions-container .school-info-subscription-none .icon--graphics {
  fill: #1a455b;
  color: #1a455b;
}
.school-label .school-label__data .status-message {
  white-space: nowrap;
  /* Prevents the text from wrapping */
  overflow: hidden;
  /* Hides overflowed text */
  text-overflow: ellipsis;
  /* Adds ellipsis when the text is too long */
  max-width: 100%;
  color: #ce6e0d;
}
.school-label__view-administrators-button {
  width: 100%;
}
.school-label__divider {
  height: 1px;
  width: 100%;
  background-color: var(--color-ghost);
}
.school-label__profile-settings {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.school-label__setting-section-title {
  font-weight: 600;
}
.school-label__setting-title {
  font-size: 1.25rem;
}
.school-label__setting-section-title + .school-label__setting-value,
.school-label__setting-title {
  margin-top: 0.83333333rem;
}
.school-label__setting-value {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
.school-label__setting-value > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 1;
}
.school-label .school-label__button--delete {
  overflow: visible;
  cursor: pointer;
}
.school-label .school-label__button--close {
  cursor: pointer;
}
.school-label .school-label__button--close .flat__icon .icon--graphics {
  fill: #556474;
  color: #556474;
}
.school-label.approved {
  border: 0.10416667rem solid;
  background-color: #ffffff;
  border-color: #d1d3de;
}
.school-label.approved .school-label__data .school-info-status > .flat__icon .icon--graphics {
  fill: #167b0c;
  color: #167b0c;
}
.school-label.approved .status-message {
  color: #167b0c;
}
.school-label.active {
  border: 0.20833333rem solid;
  background-color: #effaff;
  border-color: #1f5e7f;
  cursor: default;
}
.school-administrators-modal .modal__dialog-content {
  width: 78.125rem;
}
.school-administrators-modal .modal__component .modal__dialog-content .modal__component-header {
  font-size: 3.33333333rem;
  font-weight: 500;
  line-height: 5rem;
  letter-spacing: 0.02083333rem;
}
.school-administrators-modal__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.school-administrators-modal__content .school-administrators-modal__empty {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  color: #556474;
}
.school-administrators-modal__content .school-administrators-modal__empty p {
  font-size: 1.66666667rem;
  line-height: 2.5rem;
  margin: 0;
}
.school-administrators-modal__content > p.school-administrators-modal__description {
  font-size: 1.66666667rem;
  line-height: 2.5rem;
  color: #556474;
  margin-bottom: 0;
}
.school-administrators-modal__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.5rem;
}
.school-administrators-modal__error {
  font-size: 1.45833333rem;
  line-height: 2.08333333rem;
  color: #556474;
  text-align: center;
  padding: 1.66666667rem;
}
.school-administrators-modal__table {
  border-radius: 0.83333333rem;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.school-administrators-modal__table-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-shrink: 0;
}
.school-administrators-modal__table-header .school-administrators-modal__table-cell {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.875rem;
  color: #556474;
  padding: 1.25rem;
  border-bottom: 0.10416667rem solid #d1d3de;
}
.school-administrators-modal__table-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: auto;
}
.school-administrators-modal__table-row {
  display: contents;
}
.school-administrators-modal__table-cell {
  font-size: 1.66666667rem;
  line-height: 2.5rem;
  color: #556474;
  padding: 1.25rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.grade-selection-component {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.grade-selection-component .grade-wrapper {
  margin-right: 2rem;
  margin-bottom: 1rem;
}
.mode-picker {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.mode-picker .mode-picker__title {
  font-size: 1.66666667rem;
  font-weight: 600;
  line-height: 2.5rem;
  color: #2a3541;
}
.mode-picker .mode-picker__cards {
  display: flex;
  gap: 1.66666667rem;
  max-width: 60.83333333rem;
}
.mode-picker .mode-picker__card {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.83333333rem;
  padding: 2.08333333rem;
  border: 1px solid #d1d3de;
  border-radius: 1.25rem;
  background-color: #ffffff;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
}
.mode-picker .mode-picker__card * {
  touch-action: manipulation;
}
.mode-picker .mode-picker__card.is-selected {
  border-color: #1f5e7f;
  background-color: #effaff;
}
.mode-picker .mode-picker__card .mode-picker__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #d4eefc;
}
.mode-picker .mode-picker__card .mode-picker__icon .svg__icon {
  width: 2.91666667rem;
  height: 2.91666667rem;
}
.mode-picker .mode-picker__card .mode-picker__name {
  font-size: 1.66666667rem;
  font-weight: 600;
  line-height: 2.5rem;
  color: #2a3541;
}
.mode-picker .mode-picker__card .mode-picker__description {
  font-size: 1.25rem;
  line-height: 2.08333333rem;
  color: #556474;
}
.fraction-character {
  font-size: 0.8em;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin: 0 0.3em;
  line-height: 1.1em;
}
.fraction-character .fraction-part {
  display: block;
}
.fraction-character .fraction-divider {
  height: 0.1em;
  border-bottom: 0.1em solid;
}
.icon-group-markdown__container {
  display: flex;
  flex-direction: column;
}
.icon-group-markdown__container .icon-group-markdown {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.icon-group-markdown__container .icon-group-markdown .icon {
  margin-right: 0.52083333rem;
}
.icon-group-markdown__container .icon-group-markdown .icon img {
  height: 1.875rem;
}
.icon-group-markdown__container .icon-group-markdown .text {
  text-align: left;
}
.nowrap {
  white-space: nowrap;
}
span.small-font {
  font-size: 75%;
}
.alternating-color {
  color: #256afd;
}
.alternating-color-2 {
  color: #ff7200;
}
.alternating-color-3 {
  color: #d000c3;
}
.alternating-color-4 {
  color: #afd441;
}
.alternating-color-5 {
  color: #fad20c;
}
.alternating-color-6 {
  color: #e64545;
}
.lesson-screenshot--markdown {
  display: inline-flex;
  width: auto;
}
.lesson-screenshot--markdown img {
  width: 20rem;
}
.primary-dark,
input[type='text'].primary-dark {
  background-color: #256afd;
}
.primary-light,
input[type='text'].primary-light {
  background-color: #a4c5f3;
}
.secondary-dark,
input[type='text'].secondary-dark {
  background-color: #ff7200;
}
.secondary-light,
input[type='text'].secondary-light {
  background-color: #f4bf86;
}
.tertiary-dark,
input[type='text'].tertiary-dark {
  background-color: #d000c3;
}
.tertiary-light,
input[type='text'].tertiary-light {
  background-color: #e1a2e9;
}
.quaternary-dark,
input[type='text'].quaternary-dark {
  background-color: #ecbf0d;
}
.quaternary-light,
input[type='text'].quaternary-light {
  background-color: #c7bd96;
}
.quinary-dark,
input[type='text'].quinary-dark {
  background-color: #00be00;
}
.senary-dark,
input[type='text'].senary-dark {
  background-color: #00a169;
}
.neutral,
input[type='text'].neutral {
  background-color: #fff;
}