/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/ChallengeModePage/ChallengeModePage.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
.challenge-mode {
  position: relative;
  min-height: 100vh;
  background-size: contain;
}

.challenge-mode__progress-bar-container {
  width: 650px;
  margin-top: 16px;
}

.challenge-mode__countdown-container {
  height: 50%;
}

.challenge-mode .practice-problem .sofaheld-theme-gap {
  color: #333;
}

.challenge-mode__input-controller-container {
  margin-top: auto;
  margin-bottom: 64px;
}

.challenge-mode--multiple-choice-images .challenge-mode__input-controller-container {
  margin-top: 0;
}

.challenge-mode .practice-topic-map__header div:first-child {
  flex-grow: initial;
  margin-right: auto;
}

@media only screen and (min-width: 960px) {
  .challenge-mode {
    background-size: auto;
  }
}

@media only screen and (max-width: 639px) {
  .challenge-mode__progress-bar-container {
    margin: 0 8px 0;
  }
  .challenge-mode .practice-topic-map__header div:first-child {
    margin-right: 0;
  }
  .challenge-mode .practice-topic-map__header-title,
  .challenge-mode .practice-topic-map .ribbon-container {
    display: block;
  }
  .challenge-mode .ribbon-container {
    margin-right: 0;
  }
  .challenge-mode .ribbon-container__ribbon {
    width: 100%;
  }
  .challenge-mode .practice-problem-instruction {
    padding: 0 16px;
  }
}

.practice-set-app--middle-school .challenge-mode {
  background: none;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/ScreenHeader/ScreenHeader.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-topic-map__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -20px;
  padding: 8px 8px 0;
  background-color: #fff;
}

@media only screen and (max-width: 639px) {
  .practice-topic-map__header {
    margin-bottom: 0;
  }
}

.practice-topic-map__header button {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.practice-topic-map__header div {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.practice-topic-map__header div .topic-title__text {
  color: #a2d4e6;
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: bolder;
  text-shadow: 0 1px 1px #005f7f;
}

.practice-topic-map__header div .topic-title__text body.locale-us, body.locale-uk .practice-topic-map__header div .topic-title__text {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}

.practice-topic-map__header .practice-topic-map__header-title .ribbon {
  margin-top: 16px;
}

@media only screen and (max-width: 639px) {
  .practice-topic-map__header div .topic-title__text {
    padding: 8px 16px 16px;
    font-size: 1.8rem;
    line-height: 1.4;
    word-break: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}

.practice-set-app--middle-school .practice-topic-map__header {
  max-width: 46rem;
  margin: 0 auto;
}

.practice-set-app--middle-school .practice-topic-map__header .topic-title__text {
  color: #3370c4;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 32px;
  text-shadow: none;
}

@media only screen and (max-width: 639px) {
  .practice-set-app--middle-school .practice-topic-map__header .topic-title__text {
    font-size: 24px;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/Ribbon/Ribbon.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable declaration-no-important */
.ribbon-container {
  padding: 0 8px;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.2));
  width: 100%;
}
.ribbon-container__ribbon {
  display: flex;
  align-items: center;
  justify-content: center !important;
  max-width: 700px;
  height: 50px;
  margin: auto;
  background-color: #fdeb99;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
}
.ribbon-container__text {
  color: #7e6700;
  font-size: 24px;
  font-weight: 700;
  text-transform: none;
}
@media only screen and (max-width: 639px) {
  .ribbon-container__text {
    font-size: 18px;
  }
}
.practice-set-app--middle-school .ribbon-container__text {
  font-size: 18px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/SofaheldThemeButton/SofaheldThemeButton.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
.sofaheld-theme-button {
  min-width: 36px;
  margin: 4px;
  padding: 8px;
  border: 2px solid #faefd3;
  border-radius: 4px;
  outline: none;
  background-color: #faefd3;
  color: #333;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1019607843);
}

.sofaheld-theme-button:hover {
  cursor: pointer;
}

.sofaheld-theme-button--disabled {
  border-color: #ccc;
  background-color: #ccc;
}

.sofaheld-theme-button--disabled:hover {
  cursor: not-allowed;
}

.sofaheld-theme-button--red {
  border-color: #b60000;
  background-color: #fce3e3;
}

.sofaheld-theme-button--grey {
  border-color: #999;
  background-color: #f8f8f8;
}

.sofaheld-theme-button--selected {
  border-color: #f4e199;
  background-color: #f4e199;
}

.sofaheld-theme-button--green {
  border-color: #690;
  background-color: #dea;
}
/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/application/_colors.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************/

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/SpeechBubble/SpeechBubble.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.wrapper {
  position: relative;
  z-index: 1;
}

.wrapper__cover {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  animation: slide 2s ease-in-out;
  animation-fill-mode: forwards;
  background-color: #fff;
}

.triangle {
  position: absolute;
  top: 48%;
  left: 0;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.triangle__dynamic-triangle {
  top: auto;
  bottom: -16px;
  left: auto;
  transition: left 0.3s ease;
}

.triangle__dynamic-triangle--with-shadow {
  filter: drop-shadow(0 4px 4px #ececec);
}

.triangle__dynamic-triangle--bottom-center {
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
}

.triangle__dynamic-triangle--bottom-left {
  left: 20px;
  transform: rotate(-90deg);
}

.triangle__dynamic-triangle--bottom-right {
  right: 20px;
  transform: rotate(-90deg);
}

.triangle__dynamic-triangle--top-center {
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

.triangle__dynamic-triangle--top-left {
  top: -16px;
  left: 20px;
  transform: rotate(90deg);
}

.triangle__dynamic-triangle--top-right {
  top: -16px;
  right: 20px;
  transform: rotate(90deg);
}

.triangle__dynamic-triangle--right-center {
  top: 50%;
  right: -16px;
  left: auto;
  transform: translateY(-50%) rotate(180deg);
}

.triangle__dynamic-triangle--left-center {
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
}

.speech-bubble {
  border-radius: 8px;
  text-align: center;
}

.speech-bubble--small {
  padding: 8px 16px;
  font-size: 16px;
}

.speech-bubble--large {
  padding: 4px 18px;
  font-size: 26px;
  line-height: 1.5;
}

@media only screen and (max-width: 639px) {
  .speech-bubble--large {
    font-size: 18px;
  }
  .speech-bubble--top {
    top: 19px;
  }
}

@keyframes slide {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/HintWithTooltipBubble/HintWithTooltipBubble.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable selector-class-pattern */
.hint-container {
  display: inline-block;
  position: relative;
  margin: 4px;
  padding: 0 6px;
  transition: background-color 0.2s, color 0.2s;
  border-radius: 4px;
  background-color: #e6f3f8;
  color: #333;
  font-weight: 400;
}
.hint-container__btn-hint {
  display: flex;
  position: absolute;
  right: -6px;
  bottom: 26px;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding-top: 6px;
  transition: opacity 0.3s ease;
  border-radius: 12.5px;
  background-color: #00526d;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 25px;
  opacity: 0;
}
.hint-container__btn-hint--active {
  background-color: #00526d;
  color: #fff;
  font-weight: 700;
}
.hint-container__btn-hint:hover {
  box-shadow: 0 4px 4px 0 #ececec;
}
.hint-container__btn-hint:hover .hint-container__btn-hint {
  opacity: 1;
}
.speech-bubble-hint {
  display: flex;
  position: absolute;
  justify-content: center;
  padding-bottom: 40px;
  transition: opacity 0.5s ease-in-out;
  color: #00526d;
  font-size: 18px;
  line-height: 32px;
  text-align: left;
  z-index: 1;
}
.speech-bubble-hint--bottom-center {
  left: 50%;
  transform: translate(-50%, -120%);
}
.speech-bubble-hint--bottom-left {
  top: auto;
  bottom: 24px;
  left: 12px;
}
.speech-bubble-hint--bottom-right {
  top: auto;
  right: 12px;
  bottom: 24px;
}
.speech-bubble-hint--top-center {
  left: 50%;
  transform: translate(-50%, 10%);
}
.speech-bubble-hint--top-left {
  top: 64px;
  left: 12px;
}
.speech-bubble-hint--top-right {
  top: 64px;
  right: 12px;
}
.speech-bubble-hint__content {
  display: flex;
  flex-direction: column;
}
.speech-bubble-hint__title {
  font-weight: 700;
  text-decoration-line: underline;
  text-align: left;
}
.speech-bubble-hint__description {
  padding-right: 8px;
  font-weight: 400;
  text-align: left;
}
.speech-bubble-hint__img {
  align-self: flex-start;
  width: 40px;
  height: 40px;
  margin-right: 16px;
}
.speech-bubble-hint__speech-bubble {
  justify-content: flex-start;
  width: 300px;
  padding: 12px;
  /* stylelint-disable-next-line color-function-notation */
  box-shadow: 3px 4px 4px 0 rgba(94, 94, 94, 0.25);
}
@media only screen and (max-width: 639px) {
  .speech-bubble-hint {
    font-size: 16px;
  }
  .speech-bubble-hint .speech-bubble-hint__content {
    margin-left: 0;
  }
  .speech-bubble-hint .speech-bubble-hint__title {
    line-height: 36px;
  }
  .speech-bubble-hint .speech-bubble-hint__description {
    line-height: 28px;
    padding-right: 0;
  }
  .speech-bubble-hint .speech-bubble-hint__speech-bubble {
    padding: 8px;
    width: 230px;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Input/Input.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
.input {
  width: 100%;
  max-height: 40px;
  padding: 8px 32px 8px 8px;
  transition: border-color 0.25s ease-in-out;
  border: 0;
  border-radius: 8px;
  outline: none;
  background-color: #f8f8f8;
  color: #333;
  font-size: 1.5rem;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 100;
  line-height: 40px;
}

.input:-moz-read-only {
  background-color: #f8f8f8;
}

.input:read-only {
  background-color: #f8f8f8;
}

.input-with-feedback {
  position: relative;
}

.input-with-feedback--is-correct {
  color: #690;
}

.input-with-feedback--is-incorrect {
  color: #e30000;
}

.input-with-feedback__icon {
  position: absolute;
  top: 12px;
  right: 8px;
  height: 16px;
}

.text-area {
  overflow-x: hidden;
  resize: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 70px;
  padding: 8px 32px 8px 8px;
  border: 1px solid #e6e8e5;
  border-radius: 8px;
  outline: none;
  background-color: transparent;
  color: #333;
  font-size: 24px;
  font-family: "Grundschrift", "Open Sans", helvetica, arial, sans-serif !important;
  font-weight: 100;
  line-height: 40px;
  -webkit-user-select: text !important;
     -moz-user-select: text !important;
          user-select: text !important;
}

.text-area--empty {
  color: #999;
}

@media only screen and (max-width: 639px) {
  .text-area {
    border-radius: 16px;
    height: 100px;
    align-items: flex-start;
    padding: 16px;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Button/Button.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.button.white {
  border: 1px solid #e6e8e5;
  background-color: #f8f8f8;
  color: #666;
}

.button.white:hover {
  background-color: #f8f8f8;
}

.button.outlined {
  border: 2px solid #06c;
  background-color: #fff;
  color: #06c;
}

.button.outlined:hover {
  background-color: #06c;
  color: #fff;
}

.icon-button {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.icon-button.large {
  width: 48px;
  height: 48px;
}

.icon-button.small {
  width: 30px;
  height: 30px;
}

.icon-button.tiny {
  width: 25px;
  height: 25px;
}

.button.option-button {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 8px 16px;
  transition: opacity 300ms;
  border-radius: 4px;
  background-color: #fdeb99;
  color: #333;
  font-weight: 800;
  line-height: 24px;
  cursor: pointer;
}

.button.option-button:hover, .button.option-button:focus {
  background-color: #fdeb99;
  color: #333;
  opacity: 0.85;
}

.button.option-button.is-correct {
  background-color: #c2e066;
}

.button.option-button.is-incorrect {
  background-color: #f49999;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/Tasks/TextAreaTask/TextAreaTask.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************/
.text-area-task__check-button-container button {
  min-width: 278px;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/react-simple-keyboard/build/css/index.css ***!
  \************************************************************************************************************************************************************************************************************/
/*!
 * 
 *   react-simple-keyboard v3.6.45
 *   https://github.com/hodgef/react-simple-keyboard
 *
 *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
 *
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
 */
/*!
 * 
 *   simple-keyboard v3.6.36
 *   https://github.com/hodgef/simple-keyboard
 *
 *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
 *
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
 */
.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}
.hg-theme-default .hg-button span{pointer-events:none}
.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}
.hg-theme-default .hg-button{display:inline-block;flex-grow:1}
.hg-theme-default .hg-row{display:flex}
.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}
.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}
.hg-theme-default .hg-row>div:last-child{margin-right:0}
.hg-theme-default .hg-row .hg-button-container{display:flex}
.hg-theme-default .hg-button{-webkit-tap-highlight-color:rgba(0,0,0,0);align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px}
.hg-theme-default .hg-button.hg-standardBtn{width:20px}
.hg-theme-default .hg-button.hg-activeButton{background:#efefef}
.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}
.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}
.hg-theme-default .hg-button.hg-button-numpad0{width:105px}
.hg-theme-default .hg-button.hg-button-com{max-width:85px}
.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}
.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}
.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}
.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;max-width:272px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}
ul.hg-candidate-box-list{display:flex;flex:1 1;list-style:none;margin:0;padding:0}
li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}
li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}
li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}
.hg-candidate-box-prev:before{content:"◄"}
.hg-candidate-box-next:before{content:"►"}
.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}
.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}
.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}
.hg-candidate-box-btn-active{color:#444}
/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Checkbox/Checkbox.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
.form-checkbox {
  position: relative;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.form-checkbox__label {
  padding-left: 2rem;
  font-size: 1rem;
  font-weight: 300;
}
.form-checkbox__label--disabled, .form-checkbox__label--read-only {
  cursor: not-allowed !important;
}
.form-checkbox__input, .form-checkbox__label::before {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.form-checkbox__input--disabled:hover + .form-checkbox__label::before, .form-checkbox__input--disabled:focus + .form-checkbox__label::before, .form-checkbox__input--read-only:hover + .form-checkbox__label::before, .form-checkbox__input--read-only:focus + .form-checkbox__label::before {
  background: url(/packs/static/atoms/Checkbox/checkbox_unselected-9fe01d69396b14911574.svg) center center no-repeat;
  background-size: contain;
  cursor: not-allowed;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/CheckboxWithImage/CheckboxWithImage.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.checkbox-with-image {
  padding: 0;
  border-radius: 8px;
  box-shadow: 2px 4px 15px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.checkbox-with-image__label {
  padding-bottom: 40px;
  padding-left: 0;
}
.checkbox-with-image__input, .checkbox-with-image__label::before {
  top: auto;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}
.checkbox-with-image__image {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/MultipleSelectOptions/MultipleSelectOptions.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
.multiple-select-options {
  gap: 0.5rem;
}
.multiple-select-options .form-checkbox {
  min-height: 2.5rem;
  margin-bottom: 0.5rem;
}
.multiple-select-options .checkbox-with-image {
  width: 100%;
}
.multiple-select-options .checkbox-with-image__image {
  height: 135px;
  -o-object-fit: contain;
     object-fit: contain;
}
.multiple-select-options--checkbox-with-image {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  margin-bottom: 80px;
  gap: 16px;
}
.multiple-select-options--checkbox-with-image .multiple-select-options__option {
  width: 22%;
}
@media only screen and (max-width: 959px) {
  .multiple-select-options--checkbox-with-image .multiple-select-options__option {
    width: 32%;
  }
}
@media only screen and (max-width: 639px) {
  .multiple-select-options--checkbox-with-image .multiple-select-options__option {
    width: 45%;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/MultipleSelectTask/MultipleSelectTask.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
.multiple-selection-task__instruction {
  font-size: 18px;
}
.multiple-selection-task__check-button {
  width: 278px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/InputController/InputController.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
.input-controller {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.input-controller__button--correct {
  border-color: #690;
  background-color: #dea;
}

.input-controller__button--incorrect {
  border-color: #b60000;
  background-color: #fce3e3;
}

.input-controller__button--selected {
  border-color: #f4e199;
  background-color: #f4e199;
}

.input-controller--text-area {
  display: block;
}

.input-controller--qwertz {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.input-controller--multiple-choice-images {
  display: block;
  width: 100%;
}

.input-controller--keyboard {
  display: block;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/Instruction/Instruction.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-instruction__text {
  line-height: 2;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/atoms/TextWithAudioSpeaker/TextWithAudioSpeaker.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
.text-with-audio-speaker__speaker-icon {
  align-self: flex-start;
  margin-top: 5px;
}
.text-with-audio-speaker__text {
  font-size: 18px;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Switch/Switch.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.switch-checkbox input {
  width: 0;
  height: 0;
  visibility: hidden;
}
.switch-checkbox__label {
  position: relative;
  width: 60px;
  height: 32px;
  border-radius: 100px;
  cursor: pointer;
}
.switch-checkbox__label span {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  transition: left 0.2s;
  border-radius: 100px;
}
input:checked + .switch-checkbox__label span {
  left: calc(100% - 40px);
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/AudioPlayer/AudioPlayer.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable color-function-notation */
/* stylelint-disable color-hex-length */
.audio-player {
  display: flex;
  align-items: center;
  max-height: 80px;
  padding: 16px 24px;
  border-radius: 40px;
  background-color: #f8f8f8;
}
.audio-player__thumb {
  position: absolute;
  top: -8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #06c;
  cursor: pointer;
  z-index: 2;
}
.audio-player__children-container {
  width: 100%;
}
.audio-player--without-controls {
  background-color: transparent;
}
.audio-player--error {
  filter: grayscale(1);
}
.audio-player__audio-button {
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 50%;
}
.audio-player__audio-button:hover {
  background-color: transparent;
}
.audio-player__icon {
  width: 48px;
}
.audio-player__duration {
  margin: 0 16px;
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.audio-player__duration:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
.audio-player__duration:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
.audio-player__duration--hidden {
  color: transparent;
}
.audio-player__tooltip {
  position: absolute;
  right: -30px;
  bottom: 40px;
}
.audio-player__tooltip .speech-bubble {
  max-width: 60px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}
.audio-player__tooltip-info {
  position: absolute;
  filter: none;
  transform: translateX(56px);
  z-index: 3;
}
.audio-player__tooltip-info .speech-bubble {
  padding: 16px;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  animation: fade-in 0.3s ease-in-out forwards;
}
.audio-player__progress-bar-range {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 15px;
  border-radius: 9px;
  background-color: #fff;
}
.audio-player__progress-bar-range--fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 9px;
  background-color: #99b7e1;
  z-index: 0;
}
.audio-player__range {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  position: relative;
  width: 100%;
  height: 15px;
  margin: 0;
  padding: 0;
  outline: none;
  background: transparent;
  overflow: visible;
  z-index: 1;
}
.audio-player__range::-webkit-slider-runnable-track {
  width: 100%;
  height: 15px;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.audio-player__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: -8px;
  border-radius: 50%;
  background: #06c;
  cursor: pointer;
  z-index: 2;
}
.audio-player__range::-moz-range-track {
  width: 100%;
  height: 15px;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.audio-player__range::-moz-range-thumb {
  top: -8px;
  border: 0;
  border-radius: 50%;
  background: #06c;
  cursor: pointer;
  z-index: 2;
}
.audio-player__range::-ms-track {
  width: 100%;
  height: 15px;
  border-color: transparent;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.audio-player__range::-ms-fill-lower {
  border-radius: 9px;
  background: transparent;
}
.audio-player__range::-ms-fill-upper {
  border-radius: 9px;
  background: transparent;
}
.audio-player__range.hide-thumb::-webkit-slider-thumb {
  display: none;
}
.audio-player__range.hide-thumb::-moz-range-thumb {
  display: none;
}
.audio-player__range.hide-thumb::-ms-thumb {
  display: none;
}
@media only screen and (max-width: 639px) {
  .audio-player {
    padding: 16px;
    max-height: 72px;
  }
  .audio-player__duration {
    font-size: 14px;
    margin: 0 8px;
  }
  .audio-player__icon {
    width: 40px;
  }
  .audio-player__tooltip-info {
    transform: translateX(48px);
  }
  .audio-player__tooltip-info .speech-bubble {
    max-width: 200px;
    padding: 8px;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/Card/Card.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
.feedback-card {
  padding: 8px;
  font-size: 24px;
  box-shadow: none;
}

.feedback-card--success {
  background-color: #f5fae6;
}

.feedback-card--success p {
  color: #334d00;
}

.feedback-card--warning {
  background-color: #fffae6;
}

@media only screen and (max-width: 639px) {
  .feedback-card {
    padding: 12px 16px;
    font-size: 18px;
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/DictationFeedback/DictationFeedback.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
.dictation-feedback {
  display: flex;
  align-items: center;
}

.dictation-feedback__image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.dictation-feedback__speech-bubble {
  text-align: left;
}

.wrong-feedback {
  padding: 4px;
  border-radius: 8px;
}

.wrong-feedback .spelling-mistake,
.wrong-feedback .punctuation-mistake,
.wrong-feedback .other-mistake {
  padding: 2px 4px;
  border-radius: 8px;
  background-color: #fce3e3;
  color: #e30000;
}

.wrong-feedback .spelling-mistake.is-text-hidden, .wrong-feedback .spelling-mistake.is-text-hidden.is-selected,
.wrong-feedback .punctuation-mistake.is-text-hidden,
.wrong-feedback .punctuation-mistake.is-text-hidden.is-selected,
.wrong-feedback .other-mistake.is-text-hidden,
.wrong-feedback .other-mistake.is-text-hidden.is-selected {
  color: transparent;
}

.wrong-feedback .spelling-mistake:hover,
.wrong-feedback .punctuation-mistake:hover,
.wrong-feedback .other-mistake:hover {
  cursor: pointer;
}

.wrong-feedback .spelling-mistake.is-selected {
  background-color: #f49999;
  color: #720000;
}

.wrong-feedback .punctuation-mistake.is-selected {
  background-color: #f4bd99;
  color: #722e00;
}

.wrong-feedback .other-mistake.is-selected {
  background-color: #c999e1;
  color: #3d005b;
}

.feedback-speech-bubble {
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.feedback-speech-bubble__title {
  font-weight: bold;
  text-align: left;
  text-decoration: underline;
}

.feedback-speech-bubble__content {
  flex: min-content 1;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/ReadingComprehensionInstructions/ReadingComprehensionInstructions.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.reading-comprehension-instructions {
  margin-bottom: 50px;
  white-space: pre-line;
}

@media print, screen and (min-width: 40em) {
  .reading-comprehension-instructions {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

.reading-comprehension-instructions__speaker-icon {
  margin: 8px;
}

.reading-comprehension-instructions .text-with-audio-speaker__text {
  font-size: 20px;
}

.reading-comprehension-instructions__text {
  font-size: 24px;
  line-height: 44px;
  text-align: left;
}

@media only screen and (max-width: 639px) {
  .reading-comprehension-instructions {
    margin: 0 12px 24px;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Overlay/Overlay.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/Modal/Modal.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
.modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay .card {
  overflow: visible;
}

.modal-overlay__close-icon {
  cursor: pointer;
  fill: #999;
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/animate.css/animate.css ***!
  \******************************************************************************************************************************************************************************************/
@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 3);
  animation-duration: calc(1s * 3);
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}/* Attention seekers  */@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}@keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}@-webkit-keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}/* Back entrances */@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}/* Back exits */@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}/* Bouncing entrances  */@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}/* Bouncing exits  */@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}/* Fading entrances  */@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}/* Fading exits */@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}/* Flippers */@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}/* Lightspeed */@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}/* Rotating entrances */@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}/* Rotating exits */@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}@keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}/* Specials */@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}/* Zooming entrances */@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}/* Zooming exits */@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}/* Sliding entrances */@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}/* Sliding exits */@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/ShapedModal/ShapedModal.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.shaped-modal {
  max-width: 480px;
}
.shaped-modal__header {
  position: absolute;
  top: -75px;
  right: 0;
  left: 0;
  width: 152px;
  height: 152px;
  margin: 0 auto;
  padding-top: 12px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  z-index: -1;
}
.shaped-modal__content {
  padding: 0 16px 16px;
}
@media only screen and (max-width: 639px) {
  .shaped-modal {
    max-width: none;
    margin: 0 16px;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/TranscriptModal/TranscriptModal.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.transcript-modal {
  max-width: 742px;
  max-height: 587px;
}

.transcript-modal .shaped-modal__header {
  display: flex;
  top: -64px;
  align-items: center;
  justify-content: center;
  width: 127px;
  height: 127px;
  padding-left: 10px;
  border: 1px solid #99cfe1;
  background-color: #DAFAFA;
}

.transcript-modal .shaped-modal__header img {
  width: 104px;
}

.transcript-modal__form {
  text-align: center;
}

.transcript-modal__content {
  margin-top: 20px;
  padding: 40px 90px 80px;
  font-size: 24px;
  font-weight: 400;
  line-height: 40px;
  overflow-y: scroll;
  scrollbar-color: #e6e8e5;
  text-align: start;
  white-space: pre-line;
}

.transcript-modal__content::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100px;
  border-radius: 16px;
  background: linear-gradient(to top, #fff 40%, rgba(255, 255, 255, 0.5019607843), rgba(255, 255, 255, 0));
  content: "";
  pointer-events: none;
}

.transcript-modal__footer {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: 0;
}

.transcript-modal__close-button {
  position: relative;
  top: 64px;
  width: 170px;
  background-color: #e6e8e5;
  color: #3c3c3c;
}

.transcript-modal__close-button:hover {
  background-color: #ccc;
  color: #3c3c3c;
}

.transcript-modal__ribbon {
  position: absolute;
  top: 0;
  left: 32px;
}

@media only screen and (max-width: 639px) {
  .transcript-modal {
    max-height: 450px;
  }
  .transcript-modal .shaped-modal__header {
    top: -40px;
    width: 80px;
    height: 80px;
    padding-top: 6px;
    padding-left: 6px;
  }
  .transcript-modal .shaped-modal__header img {
    width: 70px;
  }
  .transcript-modal__ribbon {
    width: 42px;
    left: 8px;
  }
  .transcript-modal__content {
    margin: 0;
    padding: 8px 16px 40px 8px;
    font-size: 16px;
    line-height: 32px;
  }
  .transcript-modal__content::after {
    height: 64px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/ListeningComprehensionInstructions/ListeningComprehensionInstructions.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.listening-comprehension-instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.listening-comprehension-instructions__image {
  height: 130px;
  margin: 32px 0;
}
.listening-comprehension-instructions__speaker-icon {
  margin: 8px;
}
.listening-comprehension-instructions .text-with-audio-speaker {
  justify-content: center;
}
.listening-comprehension-instructions .text-with-audio-speaker__text {
  font-size: 20px;
}
.listening-comprehension-instructions__text {
  font-size: 24px;
  line-height: 44px;
  text-align: left;
}
.listening-comprehension-instructions__instructions-outer-container {
  width: 100%;
}
.listening-comprehension-instructions__instructions-outer-container--sticky {
  display: flex;
  position: fixed;
  top: 60px;
  left: 0;
  justify-content: center;
  width: 100%;
  background-color: transparent;
  z-index: 999;
}
.listening-comprehension-instructions__instructions-inner-container--sticky {
  width: 100%;
  max-width: 60rem;
  padding: 16px 32px;
  background-color: #fff;
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1019607843);
}
.listening-comprehension-instructions__height {
  height: 150px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/PracticeProblemInstruction/PracticeProblemInstruction.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-problem-instruction {
  display: flex;
  justify-content: center;
  margin-bottom: 42px;
  font-size: 20px;
  text-align: center;
}
.practice-problem-instruction__dictation-feedback-container {
  margin: 64px 0;
  text-align: left;
}
.practice-problem-instruction .practice-player-or-reader-icon {
  position: relative;
  top: -4px;
  margin-bottom: 16px;
}
.practice-problem-info {
  width: 75%;
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 2;
  text-align: center;
}
@media only screen and (max-width: 639px) {
  .practice-problem-info {
    width: 100%;
    margin-bottom: 16px;
    line-height: 1.5;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/molecules/PracticeProblemHeader/PracticeProblemHeader.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-problem-header {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.practice-problem-header__circle {
  width: 120px;
  height: 120px;
  border: 4px solid #eecba3;
  border-radius: 50%;
}
.practice-problem-header__line {
  position: relative;
  flex: 1 1;
  width: 100%;
  height: 4px;
  background-color: #eecba3;
}
.practice-problem-header__line::before {
  position: absolute;
  top: 2px;
  width: 12px;
  height: 12px;
  background-color: #eecba3;
  content: "";
}
.practice-problem-header__line:first-child::before {
  right: 0;
  transform: translate(50%, -50%) rotate(45deg);
}
.practice-problem-header__line:last-child::before {
  left: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/SofaheldThemeGap/SofaheldThemeGap.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.sofaheld-theme-gap {
  display: inline-block;
  min-width: 18px;
  height: 30px;
  padding: 2px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  background-color: #fff;
  text-align: center;
  vertical-align: middle;
}

.sofaheld-theme-gap:not(.sofaheld-theme-gap--disabled) {
  cursor: pointer;
}

.sofaheld-theme-gap:focus, .sofaheld-theme-gap:hover, .sofaheld-theme-gap:focus-visible, .sofaheld-theme-gap:active {
  outline: none;
}

.sofaheld-theme-gap--focused {
  border: 1px dashed #06c;
  background-color: #e6f3f8;
}

.sofaheld-theme-gap--disabled {
  border-color: #999;
  background-color: #f8f8f8;
  opacity: 1;
}

.sofaheld-theme-gap--disabled:focus, .sofaheld-theme-gap--disabled:hover {
  border-color: #999;
  background-color: #f8f8f8;
}

.sofaheld-theme-gap--green {
  color: #690;
}

.sofaheld-theme-gap--red {
  color: #e30000;
}

.sofaheld-theme-gap--black {
  color: #3c3c3c;
  cursor: not-allowed;
}

.sofaheld-theme-gap--green, .sofaheld-theme-gap--black, .sofaheld-theme-gap--red {
  border: 0;
  background-color: #f8f8f8;
}

.sofaheld-theme-gap--green:focus, .sofaheld-theme-gap--green:hover, .sofaheld-theme-gap--black:focus, .sofaheld-theme-gap--black:hover, .sofaheld-theme-gap--red:focus, .sofaheld-theme-gap--red:hover {
  border: 0;
  background-color: #f8f8f8;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/GapTasks/TextGaps.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
.text-gaps {
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
}
.text-gaps .sofaheld-theme-gap {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  height: 40px;
  vertical-align: middle;
}
.text-gaps__text {
  display: inline;
  word-break: break-word;
  margin: 0 4px;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/GapTasks/TableGaps.sass ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************/
.table-gaps {
  width: auto;
  margin: 0 auto 48px;
  background-color: #f8f8f8;
  font-size: 17px;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  table-layout: auto;
}
.table-gaps tbody {
  background-color: #f8f8f8;
}
.table-gaps tbody tr:nth-child(2n) {
  border-bottom: inherit;
  background-color: inherit;
}
.table-gaps tbody td {
  padding: 0;
}
.table-gaps .sofaheld-theme-gap {
  width: -moz-max-content;
  width: max-content;
  line-height: 28px;
}
.table-gaps__row {
  border-bottom: 1px solid #ebebeb;
}
.table-gaps__row:last-of-type {
  border-right: 0;
}
.table-gaps__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding-top: 4px;
  border-right: 1px solid #ebebeb;
}
.table-gaps__cell:last-of-type {
  border-bottom: 0;
}
@media only screen and (max-width: 639px) {
  .table-gaps {
    margin-bottom: 32px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/Tasks/MultipleChoiceButtonsTask/MultipleChoiceButtonsTask.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.multiple-choice-task__instruction {
  font-size: 18px;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/SofaheldThemeInput/SofaheldThemeInput.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
.sofaheld-theme-input-wrapper .sofaheld-theme-input {
  width: 18px;
  height: 40px;
  max-height: 40px;
  padding: 2px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #3c3c3c;
  text-align: center;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input:focus, .sofaheld-theme-input-wrapper .sofaheld-theme-input:hover {
  border: 1px dashed #06c;
  background-color: #e6f3f8;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input__span {
  display: inline-block;
  position: absolute;
  left: -999999px;
  min-width: 18px;
  padding: 4px;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input--disabled {
  border-color: #999;
  background-color: #f8f8f8;
  opacity: 1;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input--disabled:focus, .sofaheld-theme-input-wrapper .sofaheld-theme-input--disabled:hover {
  border-color: #999;
  background-color: #f8f8f8;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input--green {
  color: #690;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input--red {
  color: #e30000;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input--black {
  color: #3c3c3c;
  cursor: not-allowed;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input--green, .sofaheld-theme-input-wrapper .sofaheld-theme-input--black, .sofaheld-theme-input-wrapper .sofaheld-theme-input--red {
  border: 0;
  background-color: #f8f8f8;
}

.sofaheld-theme-input-wrapper .sofaheld-theme-input--green:focus, .sofaheld-theme-input-wrapper .sofaheld-theme-input--green:hover, .sofaheld-theme-input-wrapper .sofaheld-theme-input--black:focus, .sofaheld-theme-input-wrapper .sofaheld-theme-input--black:hover, .sofaheld-theme-input-wrapper .sofaheld-theme-input--red:focus, .sofaheld-theme-input-wrapper .sofaheld-theme-input--red:hover {
  border: 0;
  background-color: #f8f8f8;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/Tasks/TextInputTask/Gaps.sass ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
.gaps {
  display: flex;
  flex-flow: wrap;
  align-items: center;
}
.gaps__text {
  margin: 0 4px;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/molecules/OptionsList/OptionsList.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
.options-list {
  display: flex;
  flex-wrap: wrap;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/Tasks/TextInputTask/TextInputTask.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
.text-input-task__instruction {
  font-size: 18px;
}
.text-input-task__keyboard {
  margin: 16px 0;
}
.text-input-task__keyboard--fixed {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  transform: translateX(-50%);
  z-index: 99;
}
.text-input-task__keyboard .practice-keyboard {
  justify-content: start;
  margin: 0;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/Tasks/MultipleTasks/MultipleTasks.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
.multiple-tasks__check-button {
  width: 280px;
}
.multiple-tasks__check-button:disabled {
  opacity: 1;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/GapTasks/GapTasks.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
.gap-tasks {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.gap-tasks__text-gap {
  position: relative;
  margin: 16px 0;
  width: 100%;
}
.gap-tasks__text-gap:not(:first-of-type)::before {
  position: absolute;
  top: -16px;
  left: 0px;
  right: 0px;
  width: 100%;
  border-top: 1px solid rgb(204, 204, 204);
  content: "";
}
.gap-tasks--multiple-tasks {
  flex-direction: column;
  position: relative;
}
.gap-tasks__text {
  margin: 0 4px;
}
.gap-tasks--aligned-left {
  display: block;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/PracticeProblemContent/PracticeProblemContent.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-problem {
  height: 100%;
  min-height: 100px;
  padding: 0 32px;
  overflow-y: auto;
}
.practice-problem__input-actions-container {
  width: 75%;
  margin-right: auto;
  margin-bottom: 100px;
  margin-left: auto;
}
.practice-problem__input-actions-container--qwertz, .practice-problem__input-actions-container--reading-comprehension {
  margin-bottom: 200px;
}
.practice-problem__input-actions-container--numbers-keyboard {
  width: 80%;
}
.practice-problem--multiple-choice-images {
  display: block;
  margin-top: 32px;
}
.practice-problem--reading-comprehension {
  display: block;
  height: auto;
  height: initial;
  padding-top: 48px;
  overflow-y: visible;
}
@media print, screen and (min-width: 40em) {
  .practice-problem--reading-comprehension .practice-problem-header {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}
.practice-problem--dictation {
  display: block;
  margin-top: 32px;
}
.practice-problem--dictation .practice-problem-instruction {
  display: block;
  margin-bottom: 112px;
}
@media print, screen and (min-width: 40em) {
  .practice-problem--dictation {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}
.practice-problem__instruction {
  text-align: center;
}
@media only screen and (max-width: 639px) {
  .practice-problem .practice-problem-header {
    width: 100%;
  }
  .practice-problem--dictation .practice-problem-instruction {
    margin-bottom: 64px;
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/SharePopup/SharePopup.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.teacher-link-popup {
  display: flex;
  flex-direction: column;
  max-width: 864px;
  padding: 32px;
  border-radius: 8px;
  background-color: #f8f8f8;
  overflow: visible;
}

.teacher-link-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  padding-bottom: 2px;
  border-radius: 50%;
  background-color: #999;
  cursor: pointer;
}

@media only screen and (max-width: 639px) {
  .teacher-link-popup__close {
    top: 8px;
    right: 8px;
  }
}

.teacher-link {
  width: 288px;
  margin: 8px auto 16px;
  padding: 24px 32px;
  background-color: #fcf3e6;
}

.teacher-link__share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #e38800;
}

.teacher-link__row {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  margin: 5px 0;
}

.teacher-link__row button {
  margin-left: 5px;
}

.teacher-link__text {
  width: calc(100% - 80px);
  margin-left: 16px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase;
}

.teacher-link__button-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}

.teacher-link__button.button {
  width: calc(100% - 40px);
  border-color: #f4cf99;
}

.teacher-link__button.button:hover {
  border-color: #eeb866;
}

.teacher-link__input[readonly] {
  flex: 1 1;
  padding: 8px;
  border: 1px solid #f4cf99;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.teacher-link__input:hover, .teacher-link__input:focus {
  border-color: #eeb866;
}

.teacher-link__input:hover + .teacher-link__tooltip-hover {
  opacity: 1;
}

.teacher-link__input:focus + .teacher-link__tooltip-hover {
  opacity: 0;
}

.teacher-link__tooltip {
  right: 0;
  left: 0;
  width: 124px;
  margin: 0 auto;
  transition: opacity 1s;
  text-align: center;
  opacity: 1;
}

.teacher-link__tooltip.fade-out {
  opacity: 0;
}

.teacher-link__tooltip-hover {
  right: 0;
  left: 0;
  width: 224px;
  margin: 0 auto;
  transition: opacity 1s;
  text-align: center;
  opacity: 0;
}

.share-type-selection-container, .share-selection-item {
  display: flex;
  flex-grow: 0;
  justify-content: center;
}

.share-selection-item {
  align-items: center;
  justify-content: flex-start;
  width: 160px;
  height: 192px;
  margin: 24px;
  padding-top: 24px;
  border: 0;
  text-align: center;
  cursor: pointer;
}

.share-selection-item h5 {
  padding-top: 24px;
}

@media only screen and (max-width: 959px) {
  .share-type-selection-popup h1, .teacher-link-container h1 {
    font-size: 1.375rem;
  }
}

@media only screen and (max-width: 639px) {
  .teacher-link-popup {
    width: 100vw;
    height: 100vh;
  }
  .share-selection-item {
    margin: 8px;
  }
  .teacher-link-popup {
    padding: 32px 16px;
    overflow-y: auto;
  }
}

.teacher-link-container {
  text-align: center;
}

.teacher-link-back-button {
  display: block;
}

.teacher-link-back-button .icon--arrow-thin {
  margin-right: 2px;
  margin-bottom: 2px;
}

i.icon--info.icon--small {
  display: inline !important;
  margin-left: 8px;
}

i.icon--info.icon--small::before {
  margin-top: 3px;
}

@media only screen and (min-width: 640px) {
  .litepicker {
    top: 278px !important;
    left: 30px !important;
  }
}

.litepicker .container__days > div {
  padding: 10px 0;
}

.litepicker .container__days .day-item {
  margin-bottom: 10px;
}

.litepicker .container__days .day-item.is-today {
  position: relative;
  color: #333;
}

.litepicker .container__days .day-item.is-today::after {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  right: 0;
  border: 1px solid #666;
  content: "";
}

.litepicker .container__days .day-item.is-start-date.is-today {
  border: 0;
  border-top-left-radius: 50%;
  border-top-right-radius: 0;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 0;
  background-color: #d6eb99;
  color: #fff;
  z-index: 1;
}

.litepicker .container__days .day-item.is-start-date.is-end-date {
  background-color: #fff;
}

.litepicker .container__days .day-item.is-in-range {
  background-color: #d6eb99;
}

.litepicker .container__days .day-item.is-start-date {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: #d6eb99;
  z-index: 1;
}

.litepicker .container__days .day-item.is-end-date {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: #d6eb99;
  z-index: 1;
}

.litepicker .container__days .day-item.is-end-date, .litepicker .container__days .day-item.is-start-date {
  position: relative;
}

.litepicker .container__days .day-item.is-end-date::after, .litepicker .container__days .day-item.is-start-date::after {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #690;
  content: "";
  z-index: -1;
}

.litepicker .container__days .day-item.is-end-date:not(.is-start-date.is-today)::after {
  left: 4px;
}

.litepicker .container__footer button.button-apply, .litepicker .container__footer button.button-cancel {
  padding: 8px 16px;
  font-size: 14px;
}

.litepicker .preview-date-range {
  display: none;
}

.videos-assign-content-popup {
  padding: 24px 16px;
  overflow-y: visible;
}

.videos-assign-content-popup__headline {
  display: block;
  margin-bottom: 5px;
  font-size: 32px;
  text-align: left !important;
}

.videos-assign-content-popup__subheadline {
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 12px;
}

.videos-assign-content-popup__subheadline-content {
  margin: 0 6px 0 0;
  font-weight: bold;
}

.videos-assign-content-popup__preview-button {
  margin-left: auto;
}

.videos-assign-content-popup__cancel-button.button {
  margin-right: 22px;
}

.videos-assign-content-popup__teacher-premium-box {
  position: relative;
  max-width: 297px;
  padding: 24px;
  border-radius: 8px;
  background-color: #fdeb99;
}

.videos-assign-content-popup__teacher-premium-box .teacher-premium-label {
  position: absolute;
  top: -12px;
  left: 90px;
  margin: 0;
}

.videos-assign-content-popup__teacher-premium-box-list {
  margin-left: 24px;
  list-style-type: disc;
}

.videos-assign-content-popup__teacher-premium-box-list .h6 {
  font-weight: bold;
}

.videos-assign-content-popup__input {
  width: 288px;
  margin-bottom: 16px;
}

.videos-assign-content-popup__close-button {
  margin-right: 16px;
}

@media only screen and (min-width: 640px) {
  .videos-assign-content-popup {
    padding: 2rem;
  }
  .videos-assign-content-popup__input {
    width: 334px;
    margin-right: 40px;
    cursor: pointer !important;
  }
  .videos-assign-content-popup__label {
    margin-right: 16px;
  }
}

.videos-assign-content-popup__no-groups-headline {
  padding-right: 64px;
  padding-left: 64px;
}

.videos-assign-content-popup__no-groups-headline::before {
  display: block;
  height: 192px;
  margin: 48px auto 32px;
  background: url("/assets/learning_groups/no_students_teachers.png") no-repeat center;
  background-size: contain;
  content: "";
}

.videos-assign-content-popup__benefits-list {
  margin: 0 64px 32px;
}

.videos-assign-content-popup__benefits-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.videos-assign-content-popup__benefits-icon {
  margin-top: 2px;
  margin-right: 16px;
  border-radius: 50%;
  background-color: #fff;
  color: #9c0;
}

.videos-assign-content-popup__create-button {
  display: block;
  width: 256px;
  margin: 0 auto !important;
}

.videos-assign-content-popup__disabled-learning-group {
  display: inline-block;
}

.videos-assign-content-popup .form-error-text {
  margin-bottom: 8px;
}

.videos-assign-content-popup .icon.icon--info.icon--small {
  display: inline-block !important;
}

@media only screen and (max-width: 959px) {
  .videos-assign-content-popup__no-groups-headline {
    padding: 0;
  }
}

@media only screen and (max-width: 639px) {
  .videos-assign-content-popup {
    overflow: auto;
  }
  .videos-assign-content-popup__no-groups-headline::before {
    height: 0;
    padding-top: 34%;
  }
  .videos-assign-content-popup__benefits-list {
    margin-right: 0;
    margin-left: 0;
  }
  .videos-assign-content-popup__teacher-premium-box {
    max-width: 100%;
  }
  .videos-assign-content-popup__teacher-premium-box .teacher-premium-label {
    left: 112px;
  }
}

.videos-assign-content-popup-list {
  align-items: center;
  min-width: 640px;
  padding: 16px;
  border: 1px solid #e6e8e5;
  border-radius: 4px;
}

.videos-assign-content-popup-list__item {
  font-weight: bold;
}

.videos-assign-content-popup-list__item img {
  width: 45px;
}

@media only screen and (max-width: 639px) {
  .videos-assign-content-popup-list {
    width: 100%;
    min-width: auto;
  }
}

.videos-assign-content-popup-accordion {
  min-width: 640px;
  height: 256px;
  border: 1px solid #e6e8e5;
  border-radius: 4px;
  overflow: auto;
}

.videos-assign-content-popup-accordion__item {
  margin: 16px;
  border-top: 0;
}

.videos-assign-content-popup-accordion__item .icon.complete {
  color: #9c0;
}

.videos-assign-content-popup-accordion__item .icon.incomplete {
  color: #e38800;
}

.videos-assign-content-popup-accordion__item .icon.default {
  color: #e6e8e5;
}

.videos-assign-content-popup-accordion__item .icon--arrow-simple {
  position: static;
  position: initial;
  margin-top: 0;
  margin-left: 8px;
}

.videos-assign-content-popup-accordion__item.is-active .icon--rotate-up {
  display: inline-block;
}

.videos-assign-content-popup-accordion__item.is-active .icon--rotate-down {
  display: none;
}

.videos-assign-content-popup-accordion__item .icon--rotate-up {
  display: none;
}

.videos-assign-content-popup-accordion__item .videos-assign-content-popup-accordion__title {
  padding: 0;
}

.videos-assign-content-popup-accordion__item .videos-assign-content-popup-accordion__title .h5 {
  display: inline;
  color: #666;
}

.videos-assign-content-popup-accordion__item .videos-assign-content-popup-accordion__title::before {
  top: 0;
  left: 100%;
  margin-left: 8px;
}

.videos-assign-content-popup-accordion__content {
  display: none;
  margin-top: 8px;
  margin-left: 32px;
}

.videos-assign-content-popup-accordion .form-checkbox__label::before {
  top: 2px;
}

.videos-assign-content-popup-accordion__state-icon {
  margin-left: 16px;
}

@media only screen and (max-width: 959px) {
  .videos-assign-content-popup-accordion .videos-assign-content-popup-accordion {
    width: auto;
    min-width: auto;
  }
}

@media only screen and (max-width: 639px) {
  .videos-assign-content-popup-accordion {
    width: 100%;
    min-width: auto;
  }
  .videos-assign-content-popup-accordion__label {
    margin-top: 0;
  }
  .videos-assign-content-popup-accordion__bulk-upload-button {
    width: 100%;
    font-size: 14px;
  }
  .videos-assign-content-popup-accordion__text {
    margin: 8px 0;
  }
  .videos-assign-content-popup-accordion__select-school {
    margin-bottom: 16px;
  }
}

.tooltip {
  z-index: 10000000 !important;
}

.videos-assignment-confirmation-popup__image {
  position: absolute;
  top: -64px;
  left: 50%;
  width: 200px;
  transform: translateX(-50%);
}

.videos-assignment-confirmation-popup__headline {
  margin: 32px 0;
  font-size: 32px;
  font-weight: bold;
}

.videos-assignment-confirmation-popup__text {
  margin-bottom: 32px;
}

.videos-assignment-confirmation-popup__close-button.button {
  order: 2;
  margin-left: 24px;
}

.videos-assignment-confirmation-popup__groups-button {
  order: 1;
  margin-top: 12px;
}

.videos-assignment-confirmation-popup__buttons {
  display: flex;
  justify-content: flex-end;
}

@media only screen and (max-width: 639px) {
  .videos-assignment-confirmation-popup__image {
    position: relative;
    top: 0;
    display: block;
    width: 164px;
    margin-top: 68px;
  }
  .videos-assignment-confirmation-popup__headline {
    margin: 16px 0;
    font-size: 22px;
  }
  .videos-assignment-confirmation-popup__text {
    margin-bottom: 24px;
  }
  .videos-assignment-confirmation-popup__buttons {
    flex-direction: column;
    align-items: center;
  }
  .videos-assignment-confirmation-popup__groups-button {
    order: 2;
    margin-top: 0;
    margin-bottom: 8px;
  }
  .videos-assignment-confirmation-popup__close-button.button {
    order: 1;
    margin-bottom: 24px;
    margin-left: 0;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/RatingPopup/RatingPopup.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-rating-popup {
  display: block;
  position: relative;
  max-width: 480px;
  padding: 24px;
  overflow: visible;
}
.practice-rating-popup h2 {
  padding-top: 0;
}
.practice-rating-popup__header {
  position: absolute;
  top: -77px;
  right: 0;
  left: 0;
  width: 152px;
  height: 152px;
  margin: 0 auto;
  padding-top: 7px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  z-index: -1;
}
.practice-rating-popup__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 85px;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 4px;
  background-color: #e6e8e5;
}
.practice-rating-popup__button:hover {
  background: #f8f8f8;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.practice-rating-popup__form {
  text-align: center;
}
.practice-rating-popup__form textarea {
  height: 66px;
  max-height: 66px;
  margin-bottom: 16px;
  border: 0;
  background-color: #e6e8e5;
}
.practice-rating-popup__close {
  position: absolute;
  right: 25px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #999;
  cursor: pointer;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/FeedbackPopup/FeedbackPopup.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-feedback-popup {
  display: block;
  position: relative;
  max-width: 480px;
  padding: 24px;
  overflow: visible;
}
.practice-feedback-popup h2 {
  padding-top: 0;
}
.practice-feedback-popup__header {
  position: absolute;
  top: -77px;
  right: 0;
  left: 0;
  width: 152px;
  height: 152px;
  margin: 0 auto;
  padding-top: 7px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  z-index: -1;
}
.practice-feedback-popup__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 85px;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 4px;
  background-color: #e6e8e5;
}
.practice-feedback-popup__button:hover {
  background: #f8f8f8;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.practice-feedback-popup__form {
  text-align: center;
}
.practice-feedback-popup__form textarea {
  height: 66px;
  max-height: 66px;
  margin-bottom: 16px;
  border: 0;
  background-color: #e6e8e5;
}
.practice-feedback-popup__close {
  position: absolute;
  top: 16px;
  right: 25px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #999;
  cursor: pointer;
}
.practice-feedback-popup__close img {
  margin-bottom: 2px;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/ConfirmationPopup/ConfirmationPopup.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-confirmation-popup {
  display: block;
  position: relative;
  max-width: 480px;
  padding: 24px;
  overflow: visible;
}
.practice-confirmation-popup__is-landscape {
  top: calc(1vh * 20);
  top: calc(var(--multipliedViewPortHeight, 1vh) * 20);
}
.practice-confirmation-popup__header {
  position: absolute;
  top: -69px;
  right: 0;
  left: 0;
  width: 152px;
  height: 152px;
  margin: 0 auto;
  padding-top: 7px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  z-index: -1;
}
.practice-confirmation-popup__header img {
  transform: scale(0.7) translateY(-35px);
}
.practice-confirmation-popup__button {
  min-width: 112px;
  height: 40px;
}
.practice-confirmation-popup .title {
  margin-bottom: 0;
}
.practice-confirmation-popup .subheader {
  margin-bottom: 32px;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/ModalBoxWithImage/ModalBoxWithImage.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-sets-popup {
  display: block;
  position: relative;
  top: 100px;
  width: 90%;
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 8px;
  background-color: #fff;
  overflow-y: visible;
}
.practice-sets-popup__header {
  position: absolute;
  top: -69px;
  right: 0;
  left: 0;
  width: 152px;
  height: 152px;
  margin: 0 auto;
  padding-top: 7px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  z-index: -1;
}
.practice-sets-popup__header img {
  transform: scale(0.7) translateY(-35px);
}
.practice-sets-popup__close {
  display: flex;
  position: absolute;
  top: 8px;
  right: 8px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #999;
  cursor: pointer;
}
.practice-sets-popup__button {
  min-width: 112px;
  height: 40px;
}
.practice-sets-popup .title {
  margin-bottom: 0;
}
.practice-sets-popup .subheader {
  margin-bottom: 32px;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/ChallengeModeSurveyPopup/ChallengeModeSurveyPopup.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
.challenge-mode-survey-popup textarea {
  height: 66px;
  max-height: 66px;
  margin-bottom: 16px;
  border: 0;
  background-color: #e6e8e5;
  resize: none;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/StarWithFilling/StarWithFilling.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.star-with-filling {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
}
.star-with-filling__yellow-star, .star-with-filling__front-star {
  position: absolute;
  top: 0;
  left: 0;
}
.star-with-filling__yellow-star svg, .star-with-filling__front-star svg {
  width: 32px;
  height: 32px;
}
.star-with-filling__yellow-star {
  position: relative;
}
.star-with-filling__front-star {
  transition: max-height 0.4s ease-in-out;
  overflow: hidden;
}
@media only screen and (max-width: 639px) {
  .star-with-filling {
    width: 30px;
    height: 30px;
  }
  .star-with-filling__yellow-star svg, .star-with-filling__front-star svg {
    width: 30px;
    height: 30px;
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/ProgressStars/ProgressStars.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.progress-stars {
  display: flex;
  align-items: center;
  gap: 8px;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/RoundedLabel/RoundedLabel.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.rounded-label {
  padding: 9px 12px;
  border-radius: 18.5px;
  background-color: #e6f3f8;
  color: #00265b;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

@media only screen and (max-width: 639px) {
  .rounded-label {
    padding: 8px 6px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/molecules/LearnPointsLabel/LearnPointsLabel.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
.learn-points-label {
  transition: all 0.35s;
}

.learn-points-label--is-correct {
  background-color: #0088b5;
  color: #fff;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2509803922);
}

.learn-points-label--is-incorrect {
  animation: shrink-pulse 0.5s forwards;
  background-color: #e6e8e5;
  color: #999;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2509803922) inset;
}

@media only screen and (max-width: 639px) {
  .learn-points-label {
    width: 32px;
    height: 32px;
  }
  .learn-points-label--is-correct {
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.2509803922);
  }
  .learn-points-label--is-incorrect {
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1019607843) inset;
  }
}

@keyframes shrink-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9375);
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/PracticeSet/Header/Header.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable selector-class-pattern */
.practice-set-header--hidden .practice-header-container__close-icon {
  display: none;
}
.practice-set-header__children {
  gap: 8px;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Medal/Medal.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
.medal-socket--empty path,
.medal-socket--empty circle {
  fill: #e6e8e5;
}

.medal-socket--bronze path,
.medal-socket--bronze circle {
  fill: #a25826;
}

.medal-socket--silver path,
.medal-socket--silver circle {
  fill: #7a7a7a;
}

.medal-socket--gold path,
.medal-socket--gold circle {
  fill: #a28300;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/StarsMedalContainer/StarsMedalContainer.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
.stars-medal-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  transition: background-color 0.3s;
  border-radius: 4px;
}
.stars-medal-container__stars {
  display: flex;
  gap: 8px;
}
.stars-medal-container--bronze {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #cb6e30;
}
.stars-medal-container--bronze .star-with-filling__front-star path {
  fill: #a25826;
}
.stars-medal-container--silver {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #999;
}
.stars-medal-container--silver .star-with-filling__front-star path {
  fill: #7a7a7a;
}
.stars-medal-container--gold {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #c9a400;
}
.stars-medal-container--gold .star-with-filling__front-star path {
  fill: #a28300;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/ShineEffect/ShineEffect.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.shine-container {
  position: absolute;
  width: 100%;
  max-width: inherit;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.shine-container__effect {
  position: absolute;
  top: -20%;
  left: -20%;
  height: 150%;
  animation: shine 1800ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: 2;
}
@keyframes shine {
  0% {
    left: 0;
  }
  40% {
    left: 120%;
  }
  70% {
    left: 120%;
  }
  100% {
    left: -20%;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/ProgressBar/ProgressBar.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.progress-bar {
  position: relative;
}
.progress-bar h3 {
  margin: 0;
  padding-right: 16px;
  font-weight: bold;
  text-align: left;
}
.progress-bar .progress-animated {
  width: 0;
  animation: progress-animation 1s ease-in-out forwards;
}
.progress-bar .background-progress-meter {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 14px;
  background-color: #66b8d3;
}
.progress-bar .glitter {
  position: absolute;
  z-index: 3;
}
.progress-bar .glitter:nth-child(1) {
  top: 90%;
  left: 5%;
}
.progress-bar .glitter:nth-child(2) {
  top: 80%;
  left: 45%;
}
.progress-bar .glitter:nth-child(3) {
  top: -90%;
  left: 65%;
}
.progress-bar .glitter:nth-child(4) {
  top: -50%;
  left: 90%;
}
@keyframes progress-animation {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/PracticeHeader/PracticeHeader.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-header-container {
  padding: 8px;
  background-color: #f8f8f8;
}

.practice-header-container__close-icon {
  width: 24px;
  height: 24px;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/SofabuddyButton/SofabuddyButton.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.sofabuddy-button.secondary-variant {
  border: 2px solid #4b33c4;
  background-color: #fff;
  color: #4b33c4;
}

.sofabuddy-button.secondary-variant:hover {
  border: 2px solid #7866d3;
  background-color: #e9e6f8;
  color: #7866d3;
}

.sofabuddy-button.tertiary-variant {
  border: 0;
  background-color: #e9e6f8;
  color: #4b33c4;
}

.sofabuddy-button.tertiary-variant:hover {
  background-color: #a599e1;
  color: #4b33c4;
}

.sofabuddy-button.tertiary-variant:active {
  border: 2px solid #4b33c4;
}

.sofabuddy-button img {
  margin-right: 8px;
}

@media only screen and (max-width: 639px) {
  .practice-results-footer .sofabuddy-button {
    max-width: 222px;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/ActionButtons/ActionButtons.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-action-buttons {
  position: fixed;
  right: 0;
  bottom: 32px;
  left: 0;
  width: 284px;
  margin: 0 auto;
}

.practice-action-buttons__understand-mistake {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.practice-action-buttons .button {
  width: 100%;
  height: 40px;
  margin-top: 4px;
}

.practice-action-buttons--is-landscape-phone {
  position: relative;
  margin-top: 32px;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/ModalWithHeader/ModalWithHeader.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.modal-with-header {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow-y: hidden;
  border-radius: 8px;
  background-color: #fff;
  z-index: 9999;
}

.modal-with-header__header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: inherit;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  background-color: #f8f8f8;
}

.modal-with-header__title {
  margin: 8px;
}

.modal-with-header__close {
  display: flex;
  position: absolute;
  right: 16px;
  padding: 2px;
  border-radius: 50%;
  background-color: #999;
}

.modal-with-header__close:hover {
  cursor: pointer;
}

.modal-with-header__close-icon {
  fill: #fff;
}

.modal-with-header__content {
  width: 100%;
  height: 100%;
  border-radius: 0 0 8px;
  scrollbar-color: #ddd #e6f3f8;
  scrollbar-width: thin;
}

@media only screen and (max-width: 639px) {
  .modal-with-header__header {
    width: 100%;
  }
  .modal-with-header__content {
    padding: 24px 16px;
  }
  .modal-with-header__close {
    right: 8px;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/SpeechBubblePointer/SpeechBubblePointer.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
.speech-bubble-pointer {
  width: 0;
  height: 0;
  border-top: 20px solid;
  border-right: 20px solid;
  border-left: 20px solid;
}
.speech-bubble-pointer--bottom {
  transform: rotate(-45deg);
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/HintButton/HintButton.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.practice-hint-button {
  position: absolute;
  right: 24px;
  display: flex;
  justify-content: center;
  justify-self: end;
  cursor: pointer;
  opacity: 0;
  z-index: 5;
}

.practice-hint-button.is-clicked {
  opacity: 1;
}

.practice-hint-button:not(.is-clicked) {
  animation: bounceIn 1s 2s forwards;
}

.practice-hint-button__icon {
  align-self: center;
  width: 20.157px;
  height: 21.064px;
  margin-bottom: 4px;
  margin-left: 16px;
  z-index: 4;
}

.practice-hint-button__textbox {
  display: flex;
  gap: 8px;
  position: absolute;
  justify-self: center;
  align-content: center;
  align-self: center;
  width: 93px;
  height: 40px;
  border-radius: 20px;
  box-shadow: 2px 2px 4px 0 rgba(24, 24, 24, 0.15);
  z-index: 3;
}

.practice-hint-button__textbox__text {
  margin-top: 8px;
  color: #00445b;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.practice-hint-button__radius {
  position: relative;
  justify-self: center;
  align-self: center;
  z-index: 2;
}

@media only screen and (max-width: 639px) {
  .practice-hint-button {
    right: auto;
    right: initial;
    left: 8px;
  }
  .practice-hint-button__icon {
    justify-self: center;
    align-self: center;
    margin-left: 0px;
    margin-bottom: 0px;
    left: auto;
  }
  .practice-hint-button__textbox {
    width: 55px;
    height: 40px;
    gap: 0px;
    justify-content: center;
    align-items: center;
  }
  .practice-hint-button__textbox__text {
    display: none;
  }
  .practice-hint-button__radius {
    width: 71px;
    height: 56px;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/PracticeSet/Hint/HintModal.sass ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
.hint-modal {
  position: absolute;
  right: 41px;
  bottom: 98px;
  width: 420px;
}

@media only screen and (max-width: 639px) {
  .hint-modal {
    bottom: 70px;
    left: 50%;
    width: 94%;
    transform: translateX(-50%);
  }
}

.hint-modal .modal-with-header {
  background-color: #e6f3f8;
}

.hint-modal .modal-with-header__header {
  justify-content: flex-start;
  background-color: #99cfe1;
}

.hint-modal .modal-with-header__title {
  margin: 2px 0 0 12px;
  font-size: 18px;
  font-weight: bold;
}

.hint-modal .modal-with-header__content {
  max-height: 70vh;
  padding: 24px 16px 16px 32px;
  background-color: #e6f3f8;
  color: #00445b;
  overflow-y: auto;
}

.hint-modal .modal-with-header__close {
  background-color: transparent;
}

.hint-modal .modal-with-header__close-icon {
  fill: #005f7f;
}

.hint-modal .practice-voting {
  max-width: 290px;
  margin: 16px auto 0;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/FixYourMistakesModal/FixYourMistakesModal.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
.fix-your-mistakes-modal {
  padding-bottom: 16px;
  text-align: center;
}
.fix-your-mistakes-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 16px;
  padding: 16px 0;
  border-radius: 8px;
  background-color: #e6e8e5;
  font-size: 20px;
}
.fix-your-mistakes-modal__title {
  margin-top: 32px;
}
.fix-your-mistakes-modal__subtitle {
  margin-bottom: 16px;
}
.fix-your-mistakes-modal__text {
  padding: 16px 8px;
}
.fix-your-mistakes-modal .button {
  width: 200px;
  height: 42px;
  margin-bottom: 8px;
  padding: 8px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/RadioSelector/RadioSelector.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.radio-selector {
  position: relative;
  padding: 8px;
  cursor: pointer;
}

.radio-selector__input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.radio-selector__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-selector__selector {
  display: block;
  position: relative;
  flex-basis: 24px;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.radio-selector__selector-inner {
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 12px;
  height: 12px;
  transition: opacity 0.2s ease-in-out;
  border-radius: 50%;
  background-color: #ccc;
  content: "";
  opacity: 0;
}

.radio-selector:hover .radio-selector__selector-inner {
  opacity: 1;
}

.radio-selector--checked .radio-selector__selector-inner {
  border-color: #9c0;
  background-color: #9c0;
  opacity: 1;
}

.radio-selector--outlined {
  border: 1px solid #e6e8e5;
  border-radius: 4px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/ShareModal/ShareInLearningGroup.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
.share-in-learning-group__assignment-type {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  gap: 8px;
}

.share-in-learning-group__radio-selector-content {
  margin-top: 8px;
  font-size: 14px;
}

.share-in-learning-group__radio-selector-content li {
  margin-left: 8px;
  list-style: disc inside;
}

.share-in-learning-group .radio-selector {
  background-color: #fff;
  color: #666;
}

.share-in-learning-group .radio-selector__title {
  padding-right: 24px;
  font-weight: bold;
}

.share-in-learning-group__datepicker {
  position: relative;
}

.share-in-learning-group .litepicker {
  top: auto !important;
  top: initial !important;
  bottom: 60px !important;
  left: 0 !important;
}

.share-in-learning-group__actions-container {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.share-in-learning-group .litepicker .container__footer {
  display: none;
}

@media only screen and (max-width: 639px) {
  .share-in-learning-group__actions-container {
    display: flex;
    position: absolute;
    left: 0;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 88px;
    padding: 24px;
    background-color: #e6e8e5;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
  }
  .share-in-learning-group__actions-container .button {
    width: 111px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/ShareModal/ShareModal.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable selector-class-pattern, order/properties-order */

.share-modal {
  max-width: 864px;
  padding: 24px;
  overflow-y: auto;
  background-color: #f8f8f8;
}

.share-modal--white-background {
  background-color: #fff;
}

.share-modal:has(.share-in-learning-group-form) {
  height: 90vh;
  max-height: 1010 px;
}

.share-modal:has(.share-in-learning-group-form).card {
  overflow-y: scroll !important;
}

.share-modal .modal-overlay__close-button button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
  margin-top: -8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background-color: #999;
  cursor: pointer;
}

.share-modal .modal-overlay__close-button button:hover {
  background-color: #999;
}

.share-modal .modal-overlay__close-button img {
  position: relative;
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.share-modal__cancel-button.button {
  background-color: #fff;
}

.share-modal__header-image {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
}

.share-modal__title {
  margin-bottom: 8px;
  color: #333;
  font-weight: bold;
}

.share-modal__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-modal__option.card {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 64px;
  padding: 16px 24px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: left;
  background: #fff;
  box-shadow: none;
}

.share-modal__option.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.share-modal__option-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  width: 32px;
  height: 32px;
}

.share-modal__option-icon img {
  width: 32px;
  height: 32px;
}

.share-modal__option-icon--link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e38800;
}

.share-modal__option-icon--link img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.share-modal__option-title {
  flex-grow: 1;
  margin: 0;
  color: #606060;
  font-weight: bold;
}

.share-modal__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.share-modal__link-content .share-modal__title {
  margin-bottom: 16px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.share-modal__subtitle {
  color: #666;
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
}

.share-modal__link-section {
  margin: 24px 0;
  padding: 16px;
  border-radius: 8px;
  background-color: #fcf3e6;
}

.share-modal__link-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.share-modal__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e38800;
  flex-shrink: 0;
}

.share-modal__link-icon img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.share-modal__link-text {
  flex: 1 1;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.share-modal__create-button {
  width: 100%;
  margin-top: 16px;
}

.share-modal__link-input-container {
  position: relative;
  margin: 24px 0;
}

.share-modal__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-modal__link-input {
  flex: 1 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.share-modal__link-input:hover {
  background-color: #f8f9fa;
}

.share-modal__link-input:focus {
  outline: none;
  border-color: #007bff;
}

.share-modal__copy-icon {
  padding: 7px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
}

.share-modal__copy-icon:hover {
  background-color: #f8f9fa;
}

.share-modal__tooltip {
  position: absolute;
  display: flex;
  align-items: center;
  height: 48px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

.share-modal__tooltip.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.share-modal__actions-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 24px;
}

@media only screen and (max-width: 639px) {
  .share-modal--full-height {
    height: 100vh;
  }
  .share-modal__header {
    font-size: 32px;
  }
  .share-modal__actions-container--fixed {
    position: absolute;
    height: 88px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #E6E8E5;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.15);
  }
  .share-modal__cancel-button.button {
    margin-right: 24px;
  }
  .share-modal__link-content .share-modal__title {
    font-size: 16px;
  }
  .share-modal__link-content .share-modal__subtitle {
    font-size: 14px;
  }
  .share-modal:has(.share-in-learning-group-form) {
    height: 100vh;
  }
}

@media only screen and (min-width: 640px) {
  .litepicker {
    top: 278px !important;
    left: 30px !important;
  }
}

.litepicker .container__days > div {
  padding: 10px 0;
}

.litepicker .container__days .day-item {
  margin-bottom: 10px;
}

.litepicker .container__days .day-item.is-today {
  position: relative;
  color: #333;
}

.litepicker .container__days .day-item.is-today::after {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  right: 0;
  border: 1px solid #666;
  content: "";
}

.litepicker .container__days .day-item.is-start-date.is-today {
  border: 0;
  border-top-left-radius: 50%;
  border-top-right-radius: 0;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 0;
  background-color: #d6eb99;
  color: #fff;
  z-index: 1;
}

.litepicker .container__days .day-item.is-start-date.is-end-date {
  background-color: #fff;
}

.litepicker .container__days .day-item.is-in-range {
  background-color: #d6eb99;
}

.litepicker .container__days .day-item.is-start-date {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: #d6eb99;
  z-index: 1;
}

.litepicker .container__days .day-item.is-end-date {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: #d6eb99;
  z-index: 1;
}

.litepicker .container__days .day-item.is-end-date, .litepicker .container__days .day-item.is-start-date {
  position: relative;
}

.litepicker .container__days .day-item.is-end-date::after, .litepicker .container__days .day-item.is-start-date::after {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #690;
  content: "";
  z-index: -1;
}

.litepicker .container__days .day-item.is-end-date:not(.is-start-date.is-today)::after {
  left: 4px;
}

.litepicker .container__footer button.button-apply, .litepicker .container__footer button.button-cancel {
  padding: 8px 16px;
  font-size: 14px;
}

.litepicker .preview-date-range {
  display: none;
}

.videos-assign-content-popup {
  padding: 24px 16px;
  overflow-y: visible;
}

.videos-assign-content-popup__headline {
  display: block;
  margin-bottom: 5px;
  font-size: 32px;
  text-align: left !important;
}

.videos-assign-content-popup__subheadline {
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 12px;
}

.videos-assign-content-popup__subheadline-content {
  margin: 0 6px 0 0;
  font-weight: bold;
}

.videos-assign-content-popup__preview-button {
  margin-left: auto;
}

.videos-assign-content-popup__cancel-button.button {
  margin-right: 22px;
}

.videos-assign-content-popup__teacher-premium-box {
  position: relative;
  max-width: 297px;
  padding: 24px;
  border-radius: 8px;
  background-color: #fdeb99;
}

.videos-assign-content-popup__teacher-premium-box .teacher-premium-label {
  position: absolute;
  top: -12px;
  left: 90px;
  margin: 0;
}

.videos-assign-content-popup__teacher-premium-box-list {
  margin-left: 24px;
  list-style-type: disc;
}

.videos-assign-content-popup__teacher-premium-box-list .h6 {
  font-weight: bold;
}

.videos-assign-content-popup__input {
  width: 288px;
  margin-bottom: 16px;
}

.videos-assign-content-popup__close-button {
  margin-right: 16px;
}

@media only screen and (min-width: 640px) {
  .videos-assign-content-popup {
    padding: 2rem;
  }
  .videos-assign-content-popup__input {
    width: 334px;
    margin-right: 40px;
    cursor: pointer !important;
  }
  .videos-assign-content-popup__label {
    margin-right: 16px;
  }
}

.videos-assign-content-popup__no-groups-headline {
  padding-right: 64px;
  padding-left: 64px;
}

.videos-assign-content-popup__no-groups-headline::before {
  display: block;
  height: 192px;
  margin: 48px auto 32px;
  background: url("/assets/learning_groups/no_students_teachers.png") no-repeat center;
  background-size: contain;
  content: "";
}

.videos-assign-content-popup__benefits-list {
  margin: 0 64px 32px;
}

.videos-assign-content-popup__benefits-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.videos-assign-content-popup__benefits-icon {
  margin-top: 2px;
  margin-right: 16px;
  border-radius: 50%;
  background-color: #fff;
  color: #9c0;
}

.videos-assign-content-popup__create-button {
  display: block;
  width: 256px;
  margin: 0 auto !important;
}

.videos-assign-content-popup__disabled-learning-group {
  display: inline-block;
}

.videos-assign-content-popup .form-error-text {
  margin-bottom: 8px;
}

.videos-assign-content-popup .icon.icon--info.icon--small {
  display: inline-block !important;
}

@media only screen and (max-width: 959px) {
  .videos-assign-content-popup__no-groups-headline {
    padding: 0;
  }
}

@media only screen and (max-width: 639px) {
  .videos-assign-content-popup {
    overflow: auto;
  }
  .videos-assign-content-popup__no-groups-headline::before {
    height: 0;
    padding-top: 34%;
  }
  .videos-assign-content-popup__benefits-list {
    margin-right: 0;
    margin-left: 0;
  }
  .videos-assign-content-popup__teacher-premium-box {
    max-width: 100%;
  }
  .videos-assign-content-popup__teacher-premium-box .teacher-premium-label {
    left: 112px;
  }
}

.videos-assign-content-popup-list {
  align-items: center;
  min-width: 640px;
  padding: 16px;
  border: 1px solid #e6e8e5;
  border-radius: 4px;
}

.videos-assign-content-popup-list__item {
  font-weight: bold;
}

.videos-assign-content-popup-list__item img {
  width: 45px;
}

@media only screen and (max-width: 639px) {
  .videos-assign-content-popup-list {
    width: 100%;
    min-width: auto;
  }
}

.videos-assign-content-popup-accordion {
  min-width: 640px;
  height: 256px;
  border: 1px solid #e6e8e5;
  border-radius: 4px;
  overflow: auto;
}

.videos-assign-content-popup-accordion__item {
  margin: 16px;
  border-top: 0;
}

.videos-assign-content-popup-accordion__item .icon.complete {
  color: #9c0;
}

.videos-assign-content-popup-accordion__item .icon.incomplete {
  color: #e38800;
}

.videos-assign-content-popup-accordion__item .icon.default {
  color: #e6e8e5;
}

.videos-assign-content-popup-accordion__item .icon--arrow-simple {
  position: static;
  position: initial;
  margin-top: 0;
  margin-left: 8px;
}

.videos-assign-content-popup-accordion__item.is-active .icon--rotate-up {
  display: inline-block;
}

.videos-assign-content-popup-accordion__item.is-active .icon--rotate-down {
  display: none;
}

.videos-assign-content-popup-accordion__item .icon--rotate-up {
  display: none;
}

.videos-assign-content-popup-accordion__item .videos-assign-content-popup-accordion__title {
  padding: 0;
}

.videos-assign-content-popup-accordion__item .videos-assign-content-popup-accordion__title .h5 {
  display: inline;
  color: #666;
}

.videos-assign-content-popup-accordion__item .videos-assign-content-popup-accordion__title::before {
  top: 0;
  left: 100%;
  margin-left: 8px;
}

.videos-assign-content-popup-accordion__content {
  display: none;
  margin-top: 8px;
  margin-left: 32px;
}

.videos-assign-content-popup-accordion .form-checkbox__label::before {
  top: 2px;
}

.videos-assign-content-popup-accordion__state-icon {
  margin-left: 16px;
}

@media only screen and (max-width: 959px) {
  .videos-assign-content-popup-accordion .videos-assign-content-popup-accordion {
    width: auto;
    min-width: auto;
  }
}

@media only screen and (max-width: 639px) {
  .videos-assign-content-popup-accordion {
    width: 100%;
    min-width: auto;
  }
  .videos-assign-content-popup-accordion__label {
    margin-top: 0;
  }
  .videos-assign-content-popup-accordion__bulk-upload-button {
    width: 100%;
    font-size: 14px;
  }
  .videos-assign-content-popup-accordion__text {
    margin: 8px 0;
  }
  .videos-assign-content-popup-accordion__select-school {
    margin-bottom: 16px;
  }
}

.tooltip {
  z-index: 10000000 !important;
}

.videos-assignment-confirmation-popup__image {
  position: absolute;
  top: -64px;
  left: 50%;
  width: 200px;
  transform: translateX(-50%);
}

.videos-assignment-confirmation-popup__headline {
  margin: 32px 0;
  font-size: 32px;
  font-weight: bold;
}

.videos-assignment-confirmation-popup__text {
  margin-bottom: 32px;
}

.videos-assignment-confirmation-popup__close-button.button {
  order: 2;
  margin-left: 24px;
}

.videos-assignment-confirmation-popup__groups-button {
  order: 1;
  margin-top: 12px;
}

.videos-assignment-confirmation-popup__buttons {
  display: flex;
  justify-content: flex-end;
}

@media only screen and (max-width: 639px) {
  .videos-assignment-confirmation-popup__image {
    position: relative;
    top: 0;
    display: block;
    width: 164px;
    margin-top: 68px;
  }
  .videos-assignment-confirmation-popup__headline {
    margin: 16px 0;
    font-size: 22px;
  }
  .videos-assignment-confirmation-popup__text {
    margin-bottom: 24px;
  }
  .videos-assignment-confirmation-popup__buttons {
    flex-direction: column;
    align-items: center;
  }
  .videos-assignment-confirmation-popup__groups-button {
    order: 2;
    margin-top: 0;
    margin-bottom: 8px;
  }
  .videos-assignment-confirmation-popup__close-button.button {
    order: 1;
    margin-bottom: 24px;
    margin-left: 0;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/PracticeSet/PracticeSet.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-set {
  position: relative;
  min-height: 100vh;
}

.practice-set .practice-set-container__check-button-container {
  display: flex;
  position: relative;
  justify-content: center;
}

.practice-set .practice-set-container__check-button-container button {
  position: absolute;
  top: -120px;
  min-width: 278px;
}

.practice-set .practice-set-container__practice-problem-container {
  position: relative;
}

.practice-set .speech-bubble-pointer {
  position: absolute;
  bottom: 98px;
  right: 60px;
}

@media only screen and (max-width: 639px) {
  .practice-set .speech-bubble-pointer {
    display: none;
  }
}

.practice-instruction {
  text-align: center;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/TeacherLink/TeacherLink.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.teacher-link-landing-page .h1, .teacher-link-end-page .h1 {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 32px;
}
.teacher-link-landing-page .paragraph, .teacher-link-end-page .paragraph {
  font-family: Helvetica, Arial, sans-serif;
}
.teacher-link-landing-page .button, .teacher-link-end-page .button {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.teacher-link-landing-page .button a, .teacher-link-end-page .button a {
  color: #fff;
}
.teacher-link-landing-page .text-small, .teacher-link-end-page .text-small {
  font-family: Helvetica, Arial, sans-serif;
}
.teacher-link-landing-page .teacherlink-sofatutor-logo, .teacher-link-end-page .teacherlink-sofatutor-logo {
  align-self: center;
  max-width: 160px;
  padding: 60px 0 20px;
}
.teacher-link-landing-page .learning-student, .teacher-link-end-page .learning-student {
  max-width: 250px;
  padding: 20px 0;
}
.teacher-link-landing-page .card {
  cursor: pointer;
}
.teacher-link-landing-page .card .h2 {
  font-weight: bold;
}
.teacher-link-end-page .card .h2 {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/Original/ResultPage/ResultPage.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-results {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 46px);
  background-size: contain;
}

.practice-results .stars-medals-circle-performance + .css-1m1iw58-PenguinImage,
.practice-results .stars-medals-circle-performance + .css-13u6c95 {
  top: 50.5%;
}

@media only screen and (min-width: 960px) {
  .practice-results {
    background-size: auto;
  }
}

.practice-results .grid-margin-bottom {
  margin-bottom: 20px;
}

.practice-results .percentage-wrapper {
  position: relative;
  width: 200px;
  margin: auto;
}

.practice-results__message {
  font-weight: bold;
}

.practice-set-app--middle-school .practice-results__headline {
  font-weight: 700;
}

.practice-set-app--middle-school .practice-results__message {
  font-weight: normal;
}

.practice-set-app--middle-school .practice-results .practice-set-stars {
  transform: scale(2);
}

.practice-results-footer {
  width: 460px;
}

.practice-results-footer .button {
  width: 220px;
}

.practice-results-footer .button.hollow {
  border: 2px solid #06c;
  background-color: #fff;
}

.practice-results-footer .badge-button {
  width: 85%;
  transform: translateX(20px);
}

.practice-results-footer .sofaheld-theme-card {
  background-repeat: no-repeat;
}

.practice-results-footer .sofaheld-theme-card__video {
  background-image: url(/packs/static/src/screens/Original/ResultPage/Images/pommes-with-video-player-eb81a1ef2d80629c86bd.svg);
  background-position: right 8px bottom;
  background-size: 100px;
}

.practice-results-footer .sofaheld-theme-card__repeat {
  background-image: url(/packs/static/src/screens/Original/ResultPage/Images/pommes-reading-with-stars-c42709c17c62e4337272.svg);
  background-position: right 16px bottom;
  background-size: 90px;
}

@media only screen and (max-width: 639px) {
  .practice-results-footer {
    width: 300px;
  }
  .practice-results-footer .button {
    width: 270px;
  }
  .practice-results-footer .badge-button {
    width: 85%;
    transform: translateX(20px);
  }
  .practice-results-footer .sofaheld-theme-card__repeat {
    align-items: flex-start;
    background-image: url(/packs/static/src/screens/Original/ResultPage/Images/pommes-reading-with-stars-mobile-a66c6fd16a4b2b237d5b.svg);
    background-repeat: no-repeat;
    background-position: top 8px right 30px;
    background-size: 60px;
  }
  .practice-results-footer .sofaheld-theme-card__video {
    background-image: none;
  }
  .practice-results-footer .sofaheld-theme-card__video .button {
    position: relative;
  }
  .practice-results-footer .sofaheld-theme-card__video .button .sprites-feature-types--videos {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 58%);
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/StarsWithMedalArc/StarsWithMedalArc.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.stars-with-medal-arc .medal-socket--empty path,
.stars-with-medal-arc .medal-socket--empty circle {
  fill: #ccc;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/StarsMedalsCirclePerformance/StarsMedalsCirclePerformance.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
.stars-medals-circle-performance {
  position: relative;
  height: 311px;
}
.stars-medals-circle-performance__content {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Badge/Badge.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
.badge {
  position: relative;
  width: 85px;
  height: 85px;
  border: 5px solid #fff;
  border-radius: 50%;
}

.badge::after {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background-color: #06c;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 2.1;
  text-align: center;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/BadgeButton/BadgeButton.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.badge-button {
  position: relative;
  min-height: 50px;
  padding-left: 40px;
  color: #fff;
  word-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.badge-button:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}

.badge-button:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}

.badge-button .badge {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  box-shadow: -2px 2px 8px #ccc;
}

@media only screen and (max-width: 639px) {
  .badge-button {
    padding-left: 50px;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/SofaheldThemeCard/SofaheldThemeCard.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
.sofaheld-theme-card {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  border-radius: 16px;
  background-color: #e6e8e5;
}

.sofaheld-theme-card__headline {
  padding: 0 16px;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/LearnLevelsPage/LearnPointsProgressBar.sass ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-learn-points-progress-bar .progress {
  position: relative;
  height: 25px;
  padding-left: 16px;
  border-radius: 50px;
  line-height: 28px;
}
.practice-learn-points-progress-bar .progress::after {
  position: absolute;
  left: 0;
  height: 100%;
  transition: width 1s ease-out;
  border-radius: 50px;
  background-color: #b0d43f;
  content: "";
  z-index: 1;
}
.practice-learn-points-progress-bar span {
  font-size: 16px;
  font-weight: bold;
  z-index: 2;
}
.practice-set-app--middle-school .practice-learn-points-progress-bar span {
  font-weight: normal;
  line-height: 1.5;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/ResultActions/ResultActions.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
.result-actions__text {
  font-size: 18px;
  line-height: 28px;
}
.result-actions .button {
  width: 222px;
  min-height: 48px;
  font-size: 18px;
}
.result-actions .button:not(.result-actions__badge-button) {
  margin-bottom: 16px;
}
.result-actions__badge-button {
  margin: 16px 0 32px;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/atoms/IconButton/IconButton.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
.icon-button {
  cursor: pointer;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/ResultChallengeModePage/ResultChallengeModePage.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
.result-challenge-mode-page {
  min-height: 100vh;
}
.result-challenge-mode-page__result-container {
  width: 100%;
  height: 350px;
}
.result-challenge-mode-page__performance-image-container {
  height: inherit;
  margin-right: 32px;
}
.result-challenge-mode-page__separator {
  margin: 0 16px;
}
.result-challenge-mode-page__result {
  display: flex;
  align-items: center;
}
.result-challenge-mode-page__subheadline {
  max-width: 350px;
}
.result-challenge-mode-page__map-button {
  width: 300px;
  margin: 8px auto;
  font-family: inherit;
}
.result-challenge-mode-page__recommendation-header {
  font-weight: 700;
}
.result-challenge-mode-page h2 {
  font-size: 42px;
  line-height: 57px;
}
.result-challenge-mode-page__buttons {
  flex-flow: wrap;
}
.result-challenge-mode-page .practice-topic-map__header div:first-child {
  flex-grow: initial;
  margin-right: auto;
}
@media only screen and (max-width: 639px) {
  .result-challenge-mode-page {
    padding-bottom: 120px;
  }
  .result-challenge-mode-page__result-container {
    height: auto;
    text-align: center;
  }
  .result-challenge-mode-page__result {
    justify-content: center;
  }
  .result-challenge-mode-page__separator {
    font-size: 24px;
  }
  .result-challenge-mode-page h2 {
    margin-bottom: 0;
    font-size: 32px;
  }
  .result-challenge-mode-page__performance-image-container {
    margin: 16px 0;
  }
  .result-challenge-mode-page__performance-image-container img {
    height: 130px;
    margin: 0;
  }
  .result-challenge-mode-page__recommendation-header {
    margin-bottom: 32px;
    font-size: 18px;
  }
  .result-challenge-mode-page .practice-topic-map__header div:first-child {
    margin-right: 0;
  }
  .result-challenge-mode-page .practice-topic-map__header-title,
  .result-challenge-mode-page .practice-topic-map .ribbon-container {
    display: block;
  }
  .result-challenge-mode-page .practice-topic-map .ribbon-container,
  .result-challenge-mode-page .practice-topic-map .ribbon-container__ribbon {
    width: 100%;
  }
  .result-challenge-mode-page .practice-set-icon__headline {
    max-width: 220px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/ResultBannerContainer/ResultBannerContainer.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
.result-banner-container {
  display: flex;
  position: relative;
  align-items: center;
}

.result-banner-container::before, .result-banner-container::after {
  position: absolute;
  width: 14px;
  height: 100%;
  border-radius: 10px;
  background-color: #fdeb99;
  content: "";
}

.result-banner-container::after {
  right: 0;
}

.result-banner-container .inner-card {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  margin: 8px 14px;
  padding: 16px 8px;
  background-color: #fffae6;
  overflow: hidden;
}

@media only screen and (min-width: 640px) {
  .practice-set-app--middle-school .challenge-mode-result {
    padding-bottom: 0;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/PracticeSetIcon/PracticeSetIcon.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-set-icon {
  display: flex;
  position: relative;
  align-items: center;
  cursor: pointer;
}
.practice-set-icon__image-container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: solid 8px #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
}
.practice-set-icon__image-container::after {
  display: block;
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 30px;
  width: 24px;
  height: 24px;
  border: solid 2px #fff;
  border-radius: 50%;
  background-color: inherit;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.practice-set-icon__headline {
  position: relative;
  max-width: 312px;
  min-height: 1.5rem;
  max-height: 56px;
  margin-left: -36px;
  padding: 8px 8px 8px 48px;
  padding: 0.5rem 0.5rem 0.5rem 3rem;
  border: solid 1px #e1e1e1;
  border-radius: 0.5rem;
  background-color: #fff;
  text-align: left;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.practice-set-icon__headline span {
  display: -webkit-box;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.practice-set-icon__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/CoinReceivedPage/CoinReceivedPage.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
.sofa-held-coin__headline {
  padding-top: 64px;
  color: #6b6b6b;
}
.sofa-held-coin__sub-headline {
  font-size: 18px;
  font-weight: bold;
}
.sofa-held-coin .button {
  width: 224px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
@media only screen and (max-width: 959px) {
  .sofa-held-coin__headline {
    font-size: 42px;
  }
}
@media only screen and (max-width: 639px) {
  .sofa-held-coin__headline {
    padding-top: 32px;
    font-size: 32px;
  }
  .sofa-held-coin .button {
    width: 100%;
  }
}
@keyframes dropDownCoin {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
  }
}
.sofa-held-coin .drop-down-coin {
  animation-name: dropDownCoin;
  animation-duration: 0.5s;
  animation-delay: 0s !important;
  animation-delay: initial !important;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/PlayRoom/PlayRoom.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.play-room {
  overflow-x: hidden;
}
.play-room__back-button {
  position: absolute;
  top: 32px;
  left: 16px;
  cursor: pointer;
  z-index: 2;
}
.play-room__headline {
  padding-top: 64px;
  color: #6b6b6b;
}
.play-room__sub-headline {
  font-size: 18px;
  font-weight: bold;
}
.play-room .card-section img {
  margin-bottom: 4px;
  margin-left: 4px;
}
.play-room .card-section p {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
}
.play-room__penguin {
  position: absolute;
  bottom: 10vh;
  left: -10px;
  cursor: pointer;
}
.play-room .cards-list {
  display: flex;
  margin-top: 16px;
  cursor: grab;
  overflow-x: auto;
}
.play-room__card {
  position: relative;
  width: 200px;
  height: 250px;
  margin: 0 8px;
  padding: 16px;
  background-color: #b4e9f9;
}
.play-room__card .button {
  margin-bottom: 8px;
}
.play-room__card p {
  color: #333;
  font-weight: bold;
}
.play-room__card-game-cost {
  margin-bottom: 4px;
}
.play-room__card-coin {
  vertical-align: sub;
}
.play-room__card-level {
  position: relative;
}
.play-room__card-avatar-container {
  position: relative;
  min-height: 140px;
}
.play-room__card-avatar {
  width: 138px;
  height: 138px;
  margin: 0 auto;
  border: 2px solid #9c0;
  border-radius: 50%;
  background-color: #9c0;
}
.play-room__card-game-image {
  height: 120px;
}
@media only screen and (max-width: 959px) {
  .play-room__headline {
    font-size: 42px;
  }
}
@media only screen and (max-width: 639px) {
  .play-room__headline {
    padding-top: 32px;
    font-size: 32px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/FinishTopicPage/FinishTopicPage.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************/
.finish-topic-page {
  position: relative;
  top: 0;
  width: 100%;
  height: calc(1vh * 100);
  height: calc(var(--multipliedViewPortHeight, 1vh) * 100);
  background-color: #fff;
  overflow: auto;
}
.finish-topic-page .h1 {
  font-weight: bold;
}
.finish-topic-page .card-section {
  padding: 8px;
}
.finish-topic-page .icon {
  margin-right: 8px;
  vertical-align: text-bottom;
}
.finish-topic-page .button {
  min-width: 220px;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/LearnLevelsPage/LearnPointsPage.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-learn-points {
  position: relative;
  padding-top: 64px;
  padding-bottom: 64px;
}
.practice-learn-points__back-button {
  position: absolute;
  top: 32px;
  left: 16px;
  cursor: pointer;
  z-index: 2;
}
.practice-learn-points__item {
  margin-bottom: 32px;
}
.practice-learn-points__avatar {
  width: 137px;
  height: 137px;
}
@media only screen and (max-width: 639px) {
  .practice-learn-points__avatar {
    width: 110px;
    height: 110px;
  }
}
.practice-learn-points__line {
  position: absolute;
  top: -52px;
  left: 50%;
  width: 0;
  height: 100%;
  border-left: 2px dashed #999;
  content: "";
  z-index: 0;
}
.practice-learn-points__avatar-wrapper {
  position: relative;
  border: 8px solid #fcd733;
  border-radius: 50%;
  background-color: #99cfe1;
  overflow: hidden;
}
.practice-learn-points__avatar-wrapper img {
  width: 121px;
  height: 121px;
  border: 0;
  background-color: #99cfe1;
  filter: blur(4px);
}
@media only screen and (max-width: 639px) {
  .practice-learn-points__avatar-wrapper {
    border-width: 6px;
  }
  .practice-learn-points__avatar-wrapper img {
    width: 98px;
    height: 98px;
  }
}
@media only screen and (max-width: 639px) {
  .practice-learn-points {
    padding-top: 32px;
  }
  .practice-learn-points h1 {
    font-size: 32px;
  }
  .practice-learn-points__profile-button {
    width: 90%;
    padding-right: 0;
    padding-left: 0;
  }
}
.practice-learn-points__profile-button {
  max-width: 270px;
  margin-left: 16px;
  float: left;
}
.practice-learn-points__level-title {
  margin-left: 18px;
  font-weight: bold;
  text-align: left;
}
@media only screen and (min-width: 640px) {
  .practice-learn-points__level-title {
    font-size: 22px;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/TopicGroups/contentBox.sass ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
.content-box {
  position: relative;
  min-height: 200px;
  padding: 32px 60px;
  border-radius: 8px;
  background-color: #f4cf99;
  text-align: center;
}

.content-box__content-wrapper {
  position: relative;
  max-width: 1000px;
  min-height: 200px;
  margin-bottom: 64px;
  transition: 1000ms ease-in-out;
}

.content-box__vertical-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #ebae7a;
}

.content-box__vertical-line--left {
  left: 32px;
}

.content-box__vertical-line--right {
  right: 32px;
}

.content-box__horizontal-line {
  position: absolute;
  top: calc(50% - 1.5px);
  width: 32px;
  height: 3px;
  background-color: #ebae7a;
}

.content-box__horizontal-line--left {
  left: 0;
}

.content-box__horizontal-line--right {
  right: 0;
}

@media only screen and (max-width: 639px) {
  .content-box {
    padding: 16px;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/TopicGroups/OverviewBox.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.overview-box {
  position: relative;
  max-width: 560px;
  overflow: visible;
}
.overview-box img {
  width: auto;
  max-height: 200px;
}
.overview-box .button {
  margin-top: auto;
}
@media only screen and (max-width: 639px) {
  .overview-box img {
    max-height: 145px;
  }
  .overview-box .h2 {
    font-weight: bold;
  }
  .overview-box__text.flex-container {
    margin-left: 16px;
  }
  .overview-box__text .button {
    width: 150px;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/TopicGroups/TopicGroupsLandingPage.sass ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
.topic-groups-landing-page {
  min-height: 100vh;
  padding-top: 16px;
  background-color: #fdf2c5;
  color: #722e00;
}

.topic-groups-landing-page .h3 {
  margin-bottom: 0;
}

.topic-groups-landing-page .button {
  max-width: 240px;
}

.topic-groups-landing-page__header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  justify-content: flex-end;
  padding: 4px 16px;
  background-color: #ebae7a;
}

.topic-groups-landing-page__header .button {
  transition: opacity 150ms;
}

@media only screen and (max-width: 639px) {
  .topic-groups-landing-page__header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: fixed;
    bottom: 0;
    justify-content: center;
    z-index: 1;
  }
  .topic-groups-landing-page__headline {
    margin: 0 32px 16px;
    font-size: 22px;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/PaginationButton/PaginationButton.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.pagination-button--previous .icon--arrow-simple::before {
  transform: rotate(180deg);
}

.pagination-button.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 190px;
  background-color: #fff;
}

.pagination-button .icon--arrow-simple {
  all: unset;
  margin: 0 8px;
  color: #ccc;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/molecules/SubmitModal/SubmitModal.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
.submit-modal {
  max-width: 480px;
  margin: 0 16px;
  padding: 16px;
}

.submit-modal::before, .submit-modal::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #fff;
  content: "";
  z-index: -1;
}

.submit-modal::after {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -60%);
  background-image: url(/packs/static/src/components/molecules/SubmitModal/niko-reading-a4a7aeef69bfc7e43321.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.submit-modal__title, .submit-modal__description, .submit-modal__buttons {
  display: flex;
  justify-content: center;
}

.submit-modal__title {
  margin-top: 32px;
}

.submit-modal__description {
  margin-bottom: 32px;
  text-align: center;
}

.submit-modal__buttons {
  gap: 16px;
}

.submit-modal__buttons button {
  width: 80px;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/AssessmentTestViewMistakes/AssessmentTestViewmistakes.sass ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-set-assessment-test--view-mistakes .sofaheld-theme-gap--empty {
  border: 1px dashed #e30000;
  background-color: #fce6e6;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/molecules/AssessmentTestTeacherHeader/AssessmentTestTeacherHeader.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable declaration-no-important */
.assessment-test-teacher-header {
  background-color: #fff2c0;
}
.assessment-test-teacher-header__wrapper {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.assessment-test-teacher-header__text-content {
  font-size: 18px;
}
.assessment-test-teacher-header__text-content span {
  display: block;
  margin-bottom: 8px;
  line-height: 32px;
}
.assessment-test-teacher-header__text-content h1 {
  font-size: 42px;
  line-height: 100%;
  text-align: left;
}
.assessment-test-teacher-header__text-content h1 b {
  vertical-align: baseline;
  vertical-align: initial;
}
.assessment-test-teacher-header__image-container {
  flex-shrink: 0;
}
.assessment-test-teacher-header__image-container img {
  width: 164px;
  height: 127px;
}
@media only screen and (max-width: 639px) {
  .assessment-test-teacher-header__text-content {
    font-size: 12px;
  }
  .assessment-test-teacher-header__text-content span {
    margin-bottom: 0;
  }
  .assessment-test-teacher-header__text-content h1 {
    font-size: 18px;
    line-height: 20px;
  }
  .assessment-test-teacher-header__image-container img {
    width: 106px;
    height: 82px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/molecules/AssessmentTestHeaderWithPagination/AssessmentTestHeaderWithPagination.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable declaration-no-important */
.assessment-test-header-with-pagination .assessment-test-header-with-pagination__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.assessment-test-header-with-pagination .assessment-test-header-with-pagination__button-close {
  margin-bottom: 0;
}
.assessment-test-header-with-pagination .assessment-test-header-with-pagination__button-close .icon {
  color: #ccc;
}
.assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control div > p {
  width: 100px;
  margin: 0;
  font-family: "Open Sans", sans-serif !important;
}
.assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control div:nth-child(even) {
  max-width: 100px;
}
.assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control div:nth-child(odd) {
  width: -moz-max-content;
  width: max-content;
  min-width: 165px;
}
.assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control .pagination-button span {
  flex: 1 1;
}
.assessment-test-header-with-pagination .assessment-test-header-with-pagination__practice-problem-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 32px;
  background-color: #fffae6;
  font-size: 18px;
}
.assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__button-close {
  margin-bottom: 0;
}
.assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__button-close .icon {
  color: #ccc;
}
.assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control div > p {
  width: 100px;
  margin: 0;
  font-family: "Open Sans", sans-serif !important;
}
.assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control div:nth-child(even) {
  max-width: 100px;
}
.assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control div:nth-child(odd) {
  width: -moz-max-content;
  width: max-content;
  min-width: 165px;
}
.assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control .pagination-button span {
  flex: 1 1;
}
.assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__practice-problem-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 32px;
  background-color: #fffae6;
  font-size: 18px;
}
@media only screen and (max-width: 639px) {
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__practice-problem-info {
    padding: 8px 16px;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__navigation {
    padding: 8px 16px;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__button-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__button-close .icon {
    font-size: 22px;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control {
    gap: 8px;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control div {
    min-width: 0;
    min-width: initial;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control div > p {
    width: -moz-max-content;
    width: max-content;
    margin: 0;
    font-family: "Open Sans", sans-serif;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control div:nth-child(even),
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control div .pagination-button {
    max-width: none;
    max-width: initial;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control div:nth-child(odd) {
    width: 40px;
    min-width: 0;
    min-width: initial;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control .pagination-button {
    padding: 8px;
  }
  .assessment-test-header-with-pagination .assessment-test-header-with-pagination__pagination-control .pagination-button .icon {
    margin-inline: 0;
    font-size: 22px;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__practice-problem-info {
    padding: 8px 16px;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__navigation {
    padding: 8px 16px;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__button-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 14px;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__button-close .icon {
    font-size: 22px;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control {
    gap: 8px;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control div {
    min-width: 0;
    min-width: initial;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control div > p {
    width: -moz-max-content;
    width: max-content;
    margin: 0;
    font-family: "Open Sans", sans-serif;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control div:nth-child(even),
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control div .pagination-button {
    max-width: none;
    max-width: initial;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control div:nth-child(odd) {
    width: 40px;
    min-width: 0;
    min-width: initial;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control .pagination-button {
    padding: 8px;
  }
  .assessment-test-assignment-creation-header--preview .assessment-test-assignment-creation-header__pagination-control .pagination-button .icon {
    margin-inline: 0;
    font-size: 22px;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/AssessmentTestAssignmentCreationForm/AssessmentTestAssignmentCreationForm.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.assessment-test-assignment-creation-form__label {
  color: #333;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.assessment-test-assignment-creation-form__show-preview {
  margin-left: auto;
}

.assessment-test-assignment-creation-form__field {
  margin-bottom: 24px;
}

.assessment-test-assignment-creation-form__field--test-name {
  max-width: 460px;
}

.assessment-test-assignment-creation-form__field--test-name input::-moz-placeholder {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.assessment-test-assignment-creation-form__field--test-name input::placeholder {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.assessment-test-assignment-creation-form__field--test-name input::-moz-placeholder:focus, .assessment-test-assignment-creation-form__field--test-name input::-moz-placeholder:active {
  background-color: transparent;
}

.assessment-test-assignment-creation-form__field--test-name input::placeholder:focus, .assessment-test-assignment-creation-form__field--test-name input::placeholder:active {
  background-color: transparent;
}

.assessment-test-assignment-creation-form__field--topics {
  min-width: 640px;
  padding: 16px;
  border: 1px solid #e6e8e5;
  border-radius: 4px;
}

.assessment-test-assignment-creation-form__field--topics li {
  width: -moz-max-content;
  width: max-content;
  font-size: 14px;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion {
  height: 188px;
  padding: 16px;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__item {
  margin: 0;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__item > .form-checkbox {
  padding: 0;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__item > .form-checkbox__input, .assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__item > .form-checkbox__label::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__item > .form-checkbox__label {
  padding: 0 0 0 24px;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__title {
  margin-left: 8px;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__content {
  margin-left: 16px;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__content .form-checkbox {
  padding: 0 0.5rem;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__content .form-checkbox__input {
  top: 0;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__content .form-checkbox__label {
  display: flex;
  align-items: center;
  font-weight: 400;
}

.assessment-test-assignment-creation-form .videos-assign-content-popup-accordion__content .form-checkbox__label::before {
  top: 0;
}

.assessment-test-assignment-creation-form__date-picker-container {
  position: relative;
}

.assessment-test-assignment-creation-form__date-picker-container .form-select--inverted-colors {
  margin: 0;
  background: url(/packs/static/images/form/select_arrow_down-f177c24b9baa24ff5dab.svg) right center no-repeat;
}

.assessment-test-assignment-creation-form__date-picker-container .form-select--inverted-colors:hover {
  background: url(/packs/static/images/form/select_arrow_down_hover-cf21eb5a112d6f425354.svg) right center no-repeat;
}

.assessment-test-assignment-creation-form__date-picker-container .litepicker {
  top: -385px !important;
  left: 0 !important;
}

@media only screen and (max-width: 639px) {
  .assessment-test-assignment-creation-form__label {
    font-size: 16px;
  }
  .assessment-test-assignment-creation-form__field {
    min-width: 0;
    min-width: initial;
    margin-bottom: 16px;
  }
  .assessment-test-assignment-creation-form__show-preview {
    margin-top: -8px;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/AssessmentTestAssignmentCreation/AssessmentTestAsignmentCreation.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.assessment-test-assignment-creation {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  background-color: #fff;
}

.assessment-test-assignment-creation__navigation {
  padding: 16px 0;
  background-color: #fffae6;
}

.assessment-test-assignment-creation__navigation .button {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  width: 165px;
  gap: 24px;
  padding: 12px 16px;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  font-size: 18px;
}

.assessment-test-assignment-creation__navigation .button .icon {
  color: #ccc;
}

.assessment-test-assignment-creation__form {
  padding: 32px 0;
}

.assessment-test-assignment-creation__action-buttons {
  padding: 24px 0;
  background-color: #e6e8e5;
}

.assessment-test-assignment-creation__button {
  width: 278px;
  padding: 14px 24px;
  border: 1px solid;
  border-color: #06c;
  font-weight: 700;
  cursor: pointer;
}

.assessment-test-assignment-creation__button--cancel:hover {
  background-color: #f8f8f8 !important;
  color: #06c !important;
}

.assessment-test-assignment-creation__confirmation-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup {
  position: relative;
  width: 530px;
  padding: 24px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  z-index: 1001;
}

.assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__image {
  width: 178px;
  height: 109px;
}

.assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__headline {
  margin-bottom: 8px;
  color: #333;
  font-size: 16px;
}

.assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__text {
  margin-bottom: 24px;
  color: #666;
  font-size: 14px;
}

.assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__groups-button {
  font-size: 14px;
  font-weight: 600;
}

@media only screen and (max-width: 639px) {
  .assessment-test-assignment-creation__navigation {
    padding: 16px 0;
  }
  .assessment-test-assignment-creation__navigation .button {
    width: -moz-fit-content;
    width: fit-content;
    padding: 7px;
  }
  .assessment-test-assignment-creation__navigation .button .icon {
    color: #666;
    font-size: 22px;
  }
  .assessment-test-assignment-creation__form {
    padding: 24px 0 16px;
  }
  .assessment-test-assignment-creation__action-buttons {
    padding: 16px 0;
  }
  .assessment-test-assignment-creation__action-buttons .grid-x {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .assessment-test-assignment-creation__button {
    width: auto;
    width: initial;
    padding: 11px 5px !important;
    font-size: 14px !important;
  }
  .assessment-test-assignment-creation__button--cancel {
    width: 157px;
  }
  .assessment-test-assignment-creation__button--submit {
    width: 179px;
  }
  .assessment-test-assignment-creation__confirmation-overlay {
    padding: 8px;
  }
  .assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__image {
    position: absolute;
    top: -45%;
    left: 0;
    margin-top: 0;
    transform: translate(50%, 50%);
  }
  .assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__headline {
    margin-top: 24px;
  }
  .assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__buttons {
    flex-direction: row-reverse;
    justify-content: center;
    gap: 16px;
  }
  .assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__groups-button, .assessment-test-assignment-creation__confirmation-overlay .videos-assignment-confirmation-popup__close-button {
    margin-bottom: 0;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/Checkbox/Checkbox.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.container {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.container input {
  position: absolute;
  width: 0;
  height: 0;
  cursor: pointer;
  opacity: 0;
}

.checkmark {
  display: block;
  position: relative;
  width: 25px;
  height: 25px;
  border: 2px solid #e6e8e5;
  border-radius: 8px;
  background-color: #fff;
}

.container:hover input ~ .checkmark {
  background-color: #e6e8e5;
}

.container input:checked ~ .checkmark {
  display: block;
  border: 0;
  background-color: #9c0;
}

.checkmark::after {
  display: none;
  position: absolute;
  content: "";
}

.container input:checked ~ .checkmark::after {
  display: block;
}

.container .checkmark::after {
  top: 5px;
  left: 9px;
  width: 7px;
  height: 12px;
  transform: rotate(45deg);
  border: solid #fff;
  border-width: 0 3px 3px 0;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/Accordion/Accordion.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.accordion {
  display: flex;
  justify-content: space-between;
  padding: 4px;
  transition: background-color 0.2s ease-in-out;
  border: 1px solid #9c0;
  border-radius: 8px;
}

.accordion:hover {
  background-color: #f5fae6;
  cursor: pointer;
}

.accordion__arrow {
  transform: rotate(90deg);
  transition: transform 400ms ease-in-out;
  color: #e6e8e5;
  font-size: 16px;
}

.accordion.active {
  background-color: #9c0;
}

.accordion.active .accordion__arrow {
  transform: rotate(270deg);
  color: #527a00;
}

.accordion__main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.accordion__title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: bold;
}

.accordion__image {
  max-width: 140px;
  max-height: 70px;
  border-radius: 8px;
}

.accordion__aside {
  display: flex;
  align-items: center;
  margin-right: 16px;
  gap: 16px;
}

@media only screen and (max-width: 639px) {
  .accordion__image {
    width: 85px;
    height: 40px;
  }
  .accordion__arrow {
    transform: scale(0.7) rotate(90deg);
  }
  .accordion.active .accordion__arrow {
    transform: scale(0.7) rotate(270deg);
  }
  .accordion__aside {
    margin-right: 8px;
  }
}

.accordion__showcase {
  padding: 14px 12px 10px !important;
  border-radius: 11px !important;
  background-color: #d6eb99 !important;
  color: #005b00 !important;
  font-size: 32px !important;
}

@media only screen and (max-width: 639px) {
  .accordion__showcase {
    font-size: 18px !important;
    border-radius: 9px !important;
    padding: 10px 8px 6px !important;
  }
}

.panel {
  display: flex;
  flex-direction: column;
  max-height: 0;
  transition: max-height 200ms ease-in-out;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #fcf8e6;
  overflow: auto;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/HorizontalCard/HorizontalCard.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.horizontal-card {
  display: flex;
  justify-content: space-between;
  transition: background-color 0.2s ease-in-out;
  border: 1px solid #e6e8e5;
  border-radius: 8px;
  background-color: #fff;
}

.horizontal-card:hover {
  background-color: #f8f8f8;
  cursor: pointer;
}

.horizontal-card__main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.horizontal-card__image {
  max-height: 79px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.horizontal-card__title {
  font-size: 16px;
}

.horizontal-card__aside {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 16px;
}

@media only screen and (max-width: 639px) {
  .horizontal-card__image {
    width: 80px;
    height: 60px;
  }
  .horizontal-card__title {
    font-size: 16px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Showcase/Showcase.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
.showcase {
  display: inline;
  padding: 8px;
  border-radius: 4px;
  font-size: 18px;
}

.showcase--bold {
  font-weight: bold;
}

.showcase--green {
  background-color: #f5fae6;
  color: #727200;
}

.showcase--yellow {
  background-color: #fff8da;
  color: #885200;
}

.showcase--red {
  background-color: #fce6e6;
  color: #9f0000;
}

.showcase--gray {
  background-color: #f8f8f8;
  color: #333;
}

.showcase--blue {
  background-color: #e6edf8;
  color: #003d91;
}

.showcase--unknown {
  background-color: #f8f8f8;
  color: #333;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/PreviewModal/PreviewModal.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.preview-modal {
  position: relative;
  max-width: 1092px;
  height: 85%;
  max-height: 95%;
  margin: 1rem 0.5rem;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/AssessmentTestPracticePreview/AssessmentTestPracticePreview.sass ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.assessment-test-practice-preview {
  height: 100%;
  background-size: contain;
  overflow-x: hidden;
}

.assessment-test-practice-preview__practice-problem-container {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
}

.assessment-test-practice-preview__header.practice-header {
  background-color: #ddd;
  color: #333;
}

.assessment-test-practice-preview__header.practice-header svg path {
  fill: #999;
}

.assessment-test-practice-preview__pagination {
  margin: 16px;
}

.assessment-test-practice-preview .practice-problem__input-actions-container {
  position: relative;
  width: 100%;
  margin: 0;
}

.assessment-test-practice-preview .practice-problem__input-actions-container .input-controller--qwertz {
  position: relative;
}

@media only screen and (min-width: 960px) {
  .assessment-test-practice-preview {
    background-size: auto;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/AssessmentTestAssigmentTopicGroupsSelection/AssessmentTestAssigmentTopicGroupsSelection.sass ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.assessment-test-assignment-topic-groups-selection {
  height: -moz-max-content;
  height: max-content;
  min-height: 100%;
  padding-bottom: 82px;
  background-color: #fff;
}

.assessment-test-assignment-topic-groups-selection__subject-level-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.375rem;
  line-height: 2.5rem;
}

.assessment-test-assignment-topic-groups-selection__subject-level-info span {
  font-weight: 400;
}

.assessment-test-assignment-topic-groups-selection__main {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  gap: 1rem;
}

.assessment-test-assignment-topic-groups-selection__accordion {
  border-radius: 0.5rem;
  background-color: #e6e8e5;
}

.assessment-test-assignment-topic-groups-selection__accordion .accordion {
  position: relative;
  box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.2509803922);
}

.assessment-test-assignment-topic-groups-selection__accordion .accordion.active ~ .panel {
  padding: 1rem 0.5rem 0.5rem;
  background-color: #e6e8e5;
  gap: 0.625rem;
}

.assessment-test-assignment-topic-groups-selection__accordion .horizontal-card {
  padding: 1rem 0 1rem 0.5rem;
}

.assessment-test-assignment-topic-groups-selection__accordion .horizontal-card--disabled {
  background-color: #ccc;
}

.assessment-test-assignment-topic-groups-selection__accordion .horizontal-card .checkmark {
  border-color: #9c0;
}

.assessment-test-assignment-topic-groups-selection__accordion .horizontal-card .speech-bubble {
  max-height: 34px;
}

.assessment-test-assignment-topic-groups-selection__preview-topic-button {
  padding: 0.5rem 1rem;
  background-color: #e6e8e5 !important;
  color: #3c3c3c !important;
  font-weight: 400 !important;
}

.assessment-test-assignment-topic-groups-selection__footer {
  padding-inline: 0 !important;
  background-color: #e6e8e5 !important;
}

.assessment-test-assignment-topic-groups-selection__footer .assessment-test__footer-button {
  font-weight: 700;
}

.assessment-test-assignment-topic-groups-selection__footer .assessment-test__footer-button--clear:hover {
  background-color: #f8f8f8;
  color: #06c;
}

.assessment-test-assignment-topic-groups-selection__footer .assessment-test__footer-button.disabbled {
  border-color: transparent;
}

.assessment-test-assignment-topic-groups-selection__footer .assessment-test__footer-text {
  color: #333;
  font-size: 1.375rem;
  line-height: 2.5rem;
}

.assessment-test-assignment-topic-groups-selection .overlay {
  width: 100%;
  padding: 1rem;
}

.assessment-test-assignment-topic-groups-selection__preview-modal {
  max-width: 72rem;
  height: 80%;
  margin-inline: auto;
}

.assessment-test-assignment-topic-groups-selection__preview-modal:hover .icon--arrow-simple {
  color: #ccc;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-header {
  position: relative;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-title-container,
.assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-title {
  font-size: 1.125rem;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-close {
  top: 50% !important;
  transform: translateY(-50%);
}

.assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-close:hover, .assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-close:focus, .assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-close:active {
  background-color: #ccc !important;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview {
  padding: 1.5rem;
  gap: 1rem;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview .practice-problem {
  padding-inline: 1rem;
  order: 2;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview .practice-problem__input-actions-container {
  padding-inline: 1rem;
  order: 3;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview__pagination-container {
  order: 1;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview__pagination {
  margin: 0 1rem;
}

.assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview__pagination .pagination-button span {
  flex: 1 1;
}

@media only screen and (max-width: 959px) {
  .assessment-test-assignment-topic-groups-selection {
    padding-bottom: 130px;
  }
  .assessment-test-assignment-topic-groups-selection__footer .assessment-test__footer-text {
    font-size: 1.125rem;
    line-height: 2rem;
  }
  .assessment-test-assignment-topic-groups-selection .overlay {
    padding-inline: 1rem;
  }
}

@media only screen and (max-width: 639px) {
  .assessment-test-assignment-topic-groups-selection .grid-container {
    padding-inline: 0.5rem;
  }
  .assessment-test-assignment-topic-groups-selection__navigation {
    padding: 0.5rem 0;
  }
  .assessment-test-assignment-topic-groups-selection__subject-level-info {
    font-size: 0.875rem;
  }
  .assessment-test-assignment-topic-groups-selection__main {
    gap: 0.5rem;
  }
  .assessment-test-assignment-topic-groups-selection__accordion .accordion.active ~ .panel {
    padding-top: 0.5rem;
    gap: 0.25rem;
  }
  .assessment-test-assignment-topic-groups-selection__accordion .accordion__image {
    flex-shrink: 0;
  }
  .assessment-test-assignment-topic-groups-selection__accordion .horizontal-card {
    padding: 0.5rem;
  }
  .assessment-test-assignment-topic-groups-selection__accordion .horizontal-card__image {
    width: 0;
    height: 0;
  }
  .assessment-test-assignment-topic-groups-selection__accordion .horizontal-card__main {
    gap: 0;
  }
  .assessment-test-assignment-topic-groups-selection__accordion .horizontal-card__aside {
    gap: 0.5rem;
    margin-right: 0;
  }
  .assessment-test-assignment-topic-groups-selection__accordion .accordion__title,
  .assessment-test-assignment-topic-groups-selection__accordion .horizontal-card__title {
    font-size: 14px;
  }
  .assessment-test-assignment-topic-groups-selection__preview-topic-button {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }
  .assessment-test-assignment-topic-groups-selection__footer .assessment-test__footer-wrapper {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }
  .assessment-test-assignment-topic-groups-selection__footer .assessment-test__footer-text {
    font-size: 1rem;
    line-height: 2rem;
  }
  .assessment-test-assignment-topic-groups-selection__footer .assessment-test__footer-button {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
  .assessment-test-assignment-topic-groups-selection .overlay {
    padding: 0.5rem;
  }
  .assessment-test-assignment-topic-groups-selection__preview-modal {
    width: 100%;
    height: 100%;
  }
  .assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-title-container,
  .assessment-test-assignment-topic-groups-selection__preview-modal .topic-groups-selection-screen__modal-title {
    font-size: 0.875rem;
  }
  .assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview {
    padding: 0.5rem;
  }
  .assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview .practice-problem__input-actions-container {
    margin-bottom: 2rem;
  }
  .assessment-test-assignment-topic-groups-selection__preview-modal .assessment-test-practice-preview__pagination {
    margin: 0;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/atoms/TypographyGrundschrift/TypographyGrundschrift.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
.typography-grundschrift {
  color: #722e00;
}

.typography-grundschrift:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}

.typography-grundschrift:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/molecules/ScreenHeaderAssessmentTest/ScreenHeader.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
.screen-header {
  position: relative;
  padding: 12px 24px;
  border-radius: 8px;
  background-color: #f4cf99;
  color: #722e00;
}

.screen-header h3, .screen-header .h3 {
  margin-bottom: 0;
}

.screen-header::after {
  position: absolute;
  top: -2px;
  right: -90px;
  width: 90px;
  height: 77px;
  background-image: url(/packs/static/src/assets/Images/handle-b67b700033796d30b455.svg);
  background-repeat: no-repeat;
  content: "";
}

.screen-header .subject-cards-list--flat {
  margin: -4px;
}

@media only screen and (max-width: 959px) {
  .screen-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

@media only screen and (max-width: 639px) {
  .screen-header {
    padding: 12px;
  }
  .screen-header .flex-container.subject-cards-list--flat {
    margin: 0;
  }
  .screen-header::after {
    top: -8px;
    right: -73px;
    width: 94px;
    transform: scale(0.55);
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/AmberCard/AmberCard.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.amber-card {
  padding: 4px 8px;
  background-color: #f4e199;
  color: #725b00;
  text-align: center;
}

.amber-card i {
  margin-right: 8px;
  border-radius: 4px;
}

.amber-card i ~ p {
  padding-right: 4px;
}

.amber-card--shaded {
  border-radius: 8px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 639px) {
  .amber-card {
    padding: 4px;
  }
  .amber-card .sprites-subjects-32 {
    width: 24px;
    height: 24px;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/ScreenHeaderWithContentDetails/ScreenHeaderWithContentDetails.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.screen-header-with-content-details__feedback-button {
  cursor: pointer;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/NikoProgressIndicator/NikoProgressIndicator.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable declaration-no-important */
.circle-wrapper {
  display: flex;
  position: relative;
  justify-content: center;
  width: 100%;
  height: 247px;
}
.circle-wrapper__circle-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.circle-wrapper__arc {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.circle-wrapper__results {
  position: absolute;
  bottom: -60px;
  width: 100%;
  z-index: 1;
}
@media only screen and (max-width: 639px) {
  .circle-wrapper__results {
    max-width: calc(100% - 8px);
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/AnimatedNiko/AnimatedNiko.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable unit-no-unknown */
.niko-wrapper {
  position: relative;
  width: 373px;
  height: 306px;
}
.left-eye {
  left: calc(50% - 1.75em);
}
.right-eye {
  left: calc(70% - 2.75em);
}
.left-eye, .right-eye {
  position: absolute;
  top: 64%;
  width: 12px;
  height: 12px;
  transform-origin: center;
  transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
  border-radius: 50%;
  background-color: #3E3E3E;
}
.eye {
  position: absolute;
  top: 60%;
  width: 38.1px;
  height: 38.1px;
  border-radius: 50%;
  background-color: transparent;
  overflow: hidden;
}
.eye__eyelid {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: #d2bc40;
}
.eye--right {
  left: calc(55% - 1px);
  height: 39.1px;
}
.eye--left {
  left: calc(39% - 1px);
}
.arrow {
  position: relative;
  bottom: 60%;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.arrow.look-left {
  transform: rotate(-160deg);
}
.arrow.look-right {
  transform: rotate(0deg);
}
.arrow.look-up {
  transform: rotate(-90deg);
}
.arrow__axis {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #4F4F42;
}
.arrow__axis::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50%;
  height: 1px;
  transform: translateY(-50%);
  background-color: #EEC487;
  content: "";
}
.arrow__body {
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 50px;
  height: 6px;
  background-color: #4F4F42;
}
.arrow__point {
  position: absolute;
  bottom: -10px;
  left: calc(50% + 50px);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #4F4F42;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/CogwheelCard/CogwheelCard.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.cogwheel-card-container {
  position: relative;
  height: 84px;
  padding: 8px;
  border-radius: 8px;
  background-color: #f4cf99;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.cogwheel-card-container__cogwheel {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translateY(-50%);
  z-index: -1;
}
.cogwheel-card-container__cogwheel--left {
  left: -20px;
}
.cogwheel-card-container__cogwheel--right {
  right: -20px;
}
.cogwheel-card-container__texts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.cogwheel-card-container__texts p {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 8px 24px;
  border-radius: 8px;
  background-color: #f6e6a9;
  color: #722e00;
  font-size: 32px;
  font-weight: 700;
  overflow: hidden;
}
.cogwheel-card-container__texts p:nth-of-type(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 8px;
}
@media only screen and (max-width: 959px) {
  .cogwheel-card-container__cogwheel {
    width: 40px;
    height: 40px;
  }
  .cogwheel-card-container__texts p {
    font-size: 24px;
    line-height: 28px;
    padding: 4px 8px;
    white-space: pre-wrap;
  }
  .cogwheel-card-container__texts p:nth-of-type(2) {
    margin-left: 4px;
    line-height: 40px;
    padding: 0 16px;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/ListCard/ListCard.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable value-no-vendor-prefix */
.list-card-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 8px 0;
  border-radius: 8px;
  background-color: #f4e199;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.list-card-container__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  border-radius: 8px;
  background-color: #fff;
  gap: 16px;
}
.list-card-container__thumbnail {
  width: 100%;
  max-width: 150px;
  height: 100%;
  border-radius: 8px 0 0;
}
.list-card-container__title {
  display: -webkit-box;
  margin: 0 auto 0 0;
  color: #333;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 2.375rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-card-container__score {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 60px;
  margin-right: 8px;
  border-radius: 4px;
  color: #333;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.125rem;
}
.list-card-container__children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}
@media only screen and (max-width: 959px) {
  .list-card-container__header {
    gap: 8px;
  }
  .list-card-container__title {
    font-size: 1.3rem;
    line-height: 1.875rem;
  }
}
@media only screen and (max-width: 639px) {
  .list-card-container__header {
    height: 50px;
  }
  .list-card-container__thumbnail {
    max-width: 80px;
  }
  .list-card-container__title {
    padding: 8px;
    font-size: 1rem;
    line-height: 1.125rem;
  }
  .list-card-container__score {
    width: 60px;
    height: 38px;
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/ScoreCard/ScoreCard.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable selector-class-pattern */
.score-card {
  display: flex;
  border-radius: 8px;
  background-color: #fff;
}
.score-card__color-stripe {
  min-width: 50px;
  height: 100%;
  border-radius: 8px 0 0 8px;
}
.score-card__layout-desktop {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 8px 16px;
}
.score-card__layout-mobile {
  display: none;
  padding: 8px;
}
.score-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.score-card__title {
  color: #333;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0 auto 0 0;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.score-card__layout-mobile .score-card__title {
  max-width: calc(100% - 60px);
  font-size: clamp(12px, 4vw, 16px);
  line-height: 1.2;
  -webkit-line-clamp: 2;
}
.score-card__score {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #333;
  font-weight: 700;
  width: 64px;
  height: 32.5px;
  font-size: 18px;
  line-height: 24px;
}
.score-card__layout-mobile .score-card__score:not(.score-card__score) {
  width: 48px;
  height: 32px;
  margin-right: -8px;
  font-size: 14px;
  line-height: 18px;
}
.score-card__actions {
  display: flex;
  gap: 8px;
}
@media only screen and (max-width: 639px) {
  .score-card__color-stripe {
    min-width: 24px;
  }
  .score-card__layout-desktop {
    display: none;
  }
  .score-card__layout-mobile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 8px 16px;
  }
  .score-card__score {
    height: 25px;
    font-size: 14px;
    line-height: 18px;
  }
  .score-card__actions {
    justify-content: flex-end;
    margin-top: 8px;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/ResultAssessmentTest/ResultAssessmentTest.sass ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable annotation-no-unknown */
/* stylelint-disable declaration-no-important */
.assessment-test-results {
  position: relative;
  min-height: calc(100vh - 61px);
  margin-bottom: 80px;
  padding-top: 16px;
  background-color: rgb(253, 242, 197);
}
.assessment-test-results--learning-assessment {
  min-height: 100vh;
}
.assessment-test-results__calculator-container {
  min-height: calc(100vh - 61px - 16px);
}
.assessment-test-results__printer-container {
  position: relative;
  height: 204px;
  padding: 16px;
}
.assessment-test-results__cogwheel-left {
  top: 40px;
  left: -60px;
}
.assessment-test-results__cogwheel-left img {
  animation: 4s linear 0s 1 normal spin;
}
@keyframes $name {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.assessment-test-results__cogwheel-right {
  top: 40px;
  right: -60px;
  transform: rotate(180deg);
}
.assessment-test-results__cogwheel-right img {
  animation: 4s linear 0s 1 normal spin;
}
@keyframes $name {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.assessment-test-results__smoke {
  top: 20px;
}
.assessment-test-results__smoke--1 {
  left: -2px;
  transform: rotate(180deg);
}
.assessment-test-results__smoke--2 {
  right: -2px;
}
.assessment-test-results button {
  cursor: pointer;
}
.assessment-test-results__masonry-grid {
  display: flex;
  width: auto;
}
.assessment-test-results .topic-card {
  margin: 0 8px 8px 0;
}
.assessment-test-results .topic-card button {
  min-width: 150px;
}
.assessment-test-results .topic-card__content {
  margin-right: 12px;
}
.assessment-test-results .topic-card__img {
  min-width: 56px;
  min-height: 56px;
}
.assessment-test-results__printer {
  height: 30px;
}
.assessment-test-results__printer .page {
  position: relative;
  height: 0;
  animation: print 1s 2s forwards;
}
.assessment-test-results__progressbar-container {
  padding: 0 16px;
}
.assessment-test-results h4 {
  margin-bottom: 0;
}
.assessment-test-results__done-button {
  width: 215px;
}
.assessment-test-results .niko-image {
  width: 120px;
}
.assessment-test-results__action-buttons {
  height: 40px !important;
  border-width: 1px !important;
  font-weight: 400 !important;
}
.assessment-test-results__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 0;
  background-color: #fffae6;
}
.assessment-test-results__footer .button {
  width: 278px;
}
@media only screen and (max-width: 959px) {
  .assessment-test-results__footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (max-width: 639px) {
  .assessment-test-results {
    min-height: calc(100vh - 60px);
    padding: 16px 16px 120px;
  }
  .assessment-test-results--learning-assessment {
    min-height: 100vh;
  }
  .assessment-test-results .topic-card button {
    position: relative;
    width: 40px;
    min-width: 0;
    min-width: initial;
    height: 40px;
  }
  .assessment-test-results .topic-card .icon--arrow-simple {
    position: absolute;
    top: 16px;
    left: 8px;
  }
  .assessment-test-results__body {
    height: calc(100vh - 60px - 104px - 32px);
  }
  .assessment-test-results__body--learning-assessment {
    height: calc(58vh - 60px - 104px - 32px);
  }
  .assessment-test-results__printer {
    height: 30px;
  }
  .assessment-test-results__printer .page {
    overflow: scroll;
    z-index: 2;
    animation: print-mobile 1s 2s forwards;
  }
  .assessment-test-results__printer--learning-assessment {
    height: 30px;
  }
  .assessment-test-results__printer--learning-assessment .page {
    overflow: scroll;
    z-index: 2;
    animation: print-mobile-learning-assessment 1s 2s forwards;
  }
  .assessment-test-results__bottom-printer {
    height: 30px;
  }
  .assessment-test-results__bottom-printer .page {
    height: 0;
  }
  .assessment-test-results__printer-container {
    height: 100px;
    padding: 8px 4px;
  }
  .assessment-test-results__printer-container--top {
    height: 136px;
  }
  .assessment-test-results__printer-container .page {
    width: 97%;
  }
  .assessment-test-results .topic-card {
    margin: 0 0 8px;
  }
  .assessment-test-results__progressbar-container {
    margin-bottom: 8px;
  }
  .assessment-test-results .niko-image {
    width: 80px;
  }
  .assessment-test-results__action-buttons {
    margin-bottom: 0;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    height: 25px !important;
    line-height: 0.5rem !important;
  }
  @keyframes print-mobile {
    from {
      height: 0;
      padding: 0;
    }
    100% {
      height: calc(100vh - 60px - 104px - 16px - 178px);
      padding: 16px 8px;
    }
  }
  @keyframes print-mobile-learning-assessment {
    from {
      height: 0;
      padding: 0;
    }
    100% {
      height: calc(58vh - 60px - 104px - 16px - 178px);
      padding: 16px 8px;
    }
  }
}
@keyframes print {
  from {
    min-width: 0;
    padding: 0;
  }
  100% {
    height: auto;
    height: initial;
    min-height: 600px;
    padding: 32px;
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Separator/Separator.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.separator {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  z-index: 1;
}
.separator::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  content: "";
  z-index: -1;
}
.separator__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 18px;
  border: 2px solid #000;
  border-radius: 2px;
  background-color: #fff;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/ExpandableGroup/ExpandableGroup.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************/
.expandable-group {
  margin-bottom: 24px;
}
.expandable-group__header {
  margin-bottom: 16px;
}
.expandable-group__item {
  width: 100%;
}
.expandable-group .separator {
  margin-bottom: 16px;
}
.expandable-group .separator__label {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}
.expandable-group__show-more-button {
  color: #06c;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  cursor: pointer;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/ScoreCircle/ScoreCircle.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.score-circle {
  width: 69.42px;
  height: 69.42px;
}

@media only screen and (max-width: 639px) {
  .score-circle .score-circle {
    width: 51.85px;
    height: 51.85px;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/EditableText/EditableText.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.editable-text {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
}
.editable-text__text {
  width: 100%;
  max-height: 70px;
  margin: 0;
  padding: 6px 0;
  text-overflow: ellipsis;
  cursor: default;
  overflow: hidden;
}
.editable-text__text--editable {
  cursor: pointer;
}
.editable-text__textarea {
  width: 100%;
  padding: 8px;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  resize: none;
}
.editable-text__textarea:focus, .editable-text__textarea:active {
  border: 0;
  outline: none;
}
.editable-text__icon-container {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  cursor: pointer;
}
.editable-text__edit-icon {
  transition: opacity 0.2s ease;
  color: #666;
}
.editable-text__edit-icon--active {
  color: #06c;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/ResultCard/ResultCard.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.result-card {
  display: flex;
  flex: 1 1;
  flex-direction: row;
  margin-bottom: 16px;
  padding: 8px;
  gap: 16px;
}

.result-card__score-container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.result-card__main {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
}

.result-card__main .editable-text__textarea {
  border: 0;
  outline: none;
  overflow: hidden;
}

.result-card__main .editable-text__textarea:focus, .result-card__main .editable-text__textarea:active {
  border: 0;
  outline: none;
}

.result-card__main .editable-text__edit-icon {
  width: 24px;
  height: 24px;
}

.result-card__title {
  align-items: flex-start;
}

.result-card__retake-index {
  color: #885200;
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
}

.result-card__action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media only screen and (max-width: 639px) {
  .result-card {
    margin-bottom: 8px;
  }
  .result-card__score-container .score-circle {
    width: 60px;
    height: 60px;
  }
  .result-card__main .editable-text__text, .result-card__main .editable-text__textarea {
    font-size: 18px;
    line-height: 22px;
  }
  .result-card__action-buttons {
    gap: 8px;
  }
  .result-card__score-text, .result-card__button {
    font-size: 14px;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/ResultsOverviewAssessmentTest/ResultsOverviewAssessmentTest.sass ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.assessment-test-previous-results {
  min-height: calc(100vh - 61px);
  padding-top: 16px;
  padding-bottom: 64px;
  background-color: #fdf2c5;
}

.assessment-test-previous-results__masonry-grid {
  display: flex;
  width: auto;
  max-width: 1280px;
  margin-inline: auto;
  gap: 16px;
}

.assessment-test-previous-results__expandable-group {
  max-width: 475px;
  margin: 24px auto 16px;
  background-color: transparent !important;
}

.assessment-test-previous-results__expandable-group .separator::before {
  background-color: #eeb866;
}

.assessment-test-previous-results__expandable-group .separator__label {
  width: 129px;
  height: 35px;
  padding: 4px 18px 2px;
  border: 2px solid #eeb866;
  background-color: #fde166;
  color: #724400;
}

.assessment-test-previous-results__result-card {
  position: relative;
  max-width: 475px;
  height: 135px;
  border: 0;
  border-radius: 4px;
  background-color: #f4cf99;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1019607843);
}

.assessment-test-previous-results__result-card .result-card {
  margin-bottom: 0;
}

.assessment-test-previous-results__result-card .result-card__main {
  gap: 0;
}

.assessment-test-previous-results__result-card .result-card__main .editable-text {
  position: static;
  align-items: center;
  color: #885200;
}

.assessment-test-previous-results__result-card .result-card__main .editable-text__text {
  padding-bottom: 0;
  vertical-align: middle;
}

.assessment-test-previous-results__result-card .result-card__main .editable-text__icon-container {
  position: absolute;
  top: 8px;
  right: 8px;
}

.assessment-test-previous-results__result-card .result-card__main .editable-text__text,
.assessment-test-previous-results__result-card .result-card__main textarea {
  width: calc(100% - 32px);
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
}

.assessment-test-previous-results__result-card .result-card__main textarea {
  max-height: 70px;
  background-color: #fcf8e6;
  caret-color: #06c;
}

.assessment-test-previous-results__result-card .result-card__score-container {
  position: relative;
  justify-content: space-between;
  gap: 8px;
}

.assessment-test-previous-results__result-card .result-card__score-container::after {
  position: absolute;
  top: -8px;
  width: 2px;
  height: calc(100% + 16px);
  background-color: #eeb866;
  content: "";
  z-index: -1;
}

.assessment-test-previous-results__result-card .result-card__score-container .score-circle {
  width: 82px;
  height: 82px;
  padding: 2px;
  border: 2px solid #eeb866;
  border-radius: 50%;
  background-color: #fdeb99;
}

.assessment-test-previous-results__result-card .result-card__score-text {
  width: 77px;
  padding: 6px 10px 4px;
  border: 1px solid #eeb866;
  border-radius: 4px;
  background-color: #fdeb99;
  color: #885200;
  font-weight: 400;
  text-align: center;
}

.assessment-test-previous-results__result-card .result-card__score-text, .assessment-test-previous-results__result-card .result-card__button {
  font-size: 16px;
  line-height: 14px;
}

.assessment-test-previous-results__result-card .result-card__button {
  height: 40px;
  padding: 12px 24px;
}

.assessment-test-previous-results__show-all-dates {
  max-width: 1115px;
  margin: 16px auto 0;
  padding-top: 16px;
  border-top: 3px solid #f4cf99;
}

.assessment-test-previous-results__show-all-dates button {
  color: #06c;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}

@media only screen and (max-width: 639px) {
  .assessment-test-previous-results {
    padding-bottom: 32px;
  }
  .assessment-test-previous-results__masonry-grid {
    margin-top: 0;
  }
  .assessment-test-previous-results__result-card {
    max-height: 110px;
    margin-inline: 8px;
  }
  .assessment-test-previous-results__result-card .result-card__main .editable-text__text, .assessment-test-previous-results__result-card .result-card__main .editable-text__textarea {
    font-size: 18px;
    line-height: 22px;
  }
  .assessment-test-previous-results__result-card .result-card__main .editable-text__text {
    padding-top: 0;
    word-break: break-word;
  }
  .assessment-test-previous-results__result-card .result-card__main .editable-text__textarea {
    max-height: 55px;
    overflow: auto;
  }
  .assessment-test-previous-results__result-card .result-card__score-container {
    gap: 2px;
  }
  .assessment-test-previous-results__result-card .result-card__score-container .score-circle {
    width: 60px;
    height: 60px;
  }
  .assessment-test-previous-results__result-card .result-card__score-text {
    width: auto;
    width: initial;
    padding: 6px 10px 4px;
  }
  .assessment-test-previous-results__result-card .result-card__score-text, .assessment-test-previous-results__result-card .result-card__button {
    font-size: 14px;
    line-height: 14px;
  }
  .assessment-test-previous-results__result-card .result-card__button {
    width: 98px;
    height: 32px;
    padding: 4px 8px;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/TopicGroupsSelectionScreen/TopicGroupsSelectionScreen.sass ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************/
.topic-groups-selection-screen {
  min-height: 100vh;
  padding-top: 16px;
  padding-bottom: 146px;
  background-color: #fdf2c5;
  /* this is to overrite a general card style over the arrow icon */
}

.topic-groups-selection-screen__title {
  margin: 32px 0;
  color: #722e00;
  text-align: center;
  white-space: pre-line;
}

.topic-groups-selection-screen__main {
  margin: 0 32px;
}

.topic-groups-selection-screen__accordion {
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1152px;
  margin-bottom: 8px;
  border-radius: 8px;
  background-color: #fff;
}

.topic-groups-selection-screen__accordion .horizontal-card {
  margin: 4px 8px;
}

.topic-groups-selection-screen__accordion .horizontal-card:first-child {
  margin: 8px 8px 4px;
}

.topic-groups-selection-screen__accordion .horizontal-card:last-child {
  margin: 4px 8px 8px;
}

.topic-groups-selection-screen__accordion .horizontal-card--disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.topic-groups-selection-screen__accordion .horizontal-card--disabled .checkmark {
  border-color: #f8f8f8;
  background-color: #f8f8f8;
}

.topic-groups-selection-screen__speech-bubble-wrapper {
  position: relative;
}

.topic-groups-selection-screen__speech-bubble {
  position: absolute;
  width: 221px;
  height: 64px;
  transform: translate(-100%, -50%);
}

.topic-groups-selection-screen__speech-bubble__bubble {
  display: inline-flex;
  align-items: flex-start;
  padding: 8px 16px;
}

.topic-groups-selection-screen__speech-bubble__warning-icon {
  display: flex;
  position: relative;
  top: -8px;
}

.topic-groups-selection-screen__preview-topic-button {
  background-color: #e6e8e5;
  color: #333;
  font-size: 14px;
  font-weight: normal;
}

.topic-groups-selection-screen__preview-topic-button:hover {
  background-color: #999;
}

.topic-groups-selection-screen .checkmark {
  border-color: #9c0;
}

.topic-groups-selection-screen .card:hover .icon--arrow-simple {
  color: #ccc;
}

@media only screen and (max-width: 959px) {
  .topic-groups-selection-screen {
    padding-bottom: 194px;
  }
  .topic-groups-selection-screen__main {
    margin: 0 8px;
  }
}

@media only screen and (max-width: 639px) {
  .topic-groups-selection-screen__title {
    font-size: 18px;
    margin: 24px 0;
  }
  .topic-groups-selection-screen__preview-topic-button {
    font-size: 12px;
    padding: 10px 12px;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/SofaheldThemeDropdown/SofaheldThemeDropdown.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
.sofaheld-theme-dropdown {
  height: -moz-fit-content;
  height: fit-content;
  border: 1px solid #e6e8e5;
  border-radius: 4px;
  background-color: #fff;
  font-size: 18px;
  z-index: 3;
}

.sofaheld-theme-dropdown.is-active .sofaheld-theme-dropdown__icon {
  transform: rotate(270deg);
}

.sofaheld-theme-dropdown__button, .sofaheld-theme-dropdown__panel {
  cursor: pointer;
}

.sofaheld-theme-dropdown__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 8px;
}

.sofaheld-theme-dropdown__icon {
  padding: 4px;
  transition: transform 0.4s ease;
}

.sofaheld-theme-dropdown__panel > * {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
}

.sofaheld-theme-dropdown__panel > *:hover {
  color: #06c;
  font-weight: bold;
  cursor: pointer;
}

@media only screen and (max-width: 639px) {
  .sofaheld-theme-dropdown {
    font-size: 16px;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/ContentSubjectLevelNav/ContentSubjectLevelNav.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
.content-subject-level-nav {
  height: 80px;
  padding: 16px;
}

.content-subject-level-nav__navigation-content {
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
}

.content-subject-level-nav__back-button {
  width: 164px;
  height: -moz-fit-content;
  height: fit-content;
}

.content-subject-level-nav__back-button.button.white {
  background-color: #fff;
}

.content-subject-level-nav__subjects-dropdown {
  width: 320px;
}

.content-subject-level-nav__subjects-dropdown button {
  font-weight: bold;
}

.content-subject-level-nav__levels-dropdown {
  width: 160px;
}

.content-subject-level-nav__levels-dropdown button {
  color: #666;
}

@media only screen and (max-width: 959px) {
  .content-subject-level-nav__subjects-dropdown {
    width: 260px;
  }
  .content-subject-level-nav__levels-dropdown {
    width: 140px;
  }
}

@media only screen and (max-width: 639px) {
  .content-subject-level-nav {
    height: 140px;
  }
  .content-subject-level-nav__navigation-content {
    padding: 0;
    flex-flow: wrap;
    gap: 8px;
  }
  .content-subject-level-nav__back-button {
    width: 100%;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
  }
  .content-subject-level-nav__back-button-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .content-subject-level-nav__subjects-dropdown {
    width: 57%;
  }
  .content-subject-level-nav__levels-dropdown {
    width: 40%;
  }
}

.content-subject-level-nav .sprites-subjects-biologie {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/biologie_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #00b500;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-chemie {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/chemie_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #c10070;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-deutsch {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/deutsch_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e97c33;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/deutsch-als-zweitsprache_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #99e199;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-geographie {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/geographie_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e30000;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-geschichte {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/geschichte_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e38800;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/lern-und-arbeitstechniken_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e3e300;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/kreativitaet-und-bewegung_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e9a033;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-mathematik {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/mathematik_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #3370c4;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-musik {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/musik_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e38800;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-physik {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/physik_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #7900b5;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-sachunterricht {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/sachunterricht_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #00b500;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-englisch {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/englisch_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e93333;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-franzoesisch {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/franzoesisch_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e3e300;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-latein {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/latein_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e35b00;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-spanisch {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/spanisch_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #004cb5;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-english-language-arts {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/english-language-arts_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e97c33;
  background-size: contain;
}

.content-subject-level-nav .sprites-subjects-social-studies {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/social-studies_white.svg") center center no-repeat;
  border-radius: 4px;
  background-color: #e30000;
  background-size: contain;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/TeachersHeader/TeachersHeader.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
.teachers-header__header {
  height: 160px;
  background-color: #e6f8e6;
}

.teachers-header__header-content {
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 2rem;
}

.teachers-header__header-title {
  text-align: left;
}

.teachers-header__header-illu {
  height: 160px;
}

.teachers-header__navigation {
  background-color: #c0eabf;
}

@media only screen and (max-width: 959px) {
  .teachers-header__header-illu {
    height: 120px;
  }
}

@media only screen and (max-width: 639px) {
  .teachers-header__header-illu {
    height: 64px;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/PrintOptionsModal/PrintOptionsModal.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
.print-options-modal {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 800px;
  padding: 1.5rem;
  gap: 32px;
  background-color: #f8f8f8;
}

.print-options-modal .form-checkbox {
  padding: 0;
}

.print-options-modal .form-checkbox__input {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
}

.print-options-modal .form-checkbox__label::before {
  top: 0;
  left: 0;
}

.print-options-modal .modal-overlay__close-button {
  margin-bottom: -32px;
}

.print-options-modal .modal-overlay__close-icon {
  fill: #fff;
  padding: 2px;
  border-radius: 50%;
  background-color: #999;
}

.print-options-modal__title {
  margin: 0;
  color: #333;
  font-weight: bold;
  line-height: normal;
}

.print-options-modal__showcase {
  width: -moz-fit-content;
  width: fit-content;
  background-color: #e6e8e5;
}

.print-options-modal__section-title {
  margin-bottom: 16px;
  color: #333;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: normal;
}

.print-options-modal__card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  border-radius: 8px;
  background-color: #fff;
}

.print-options-modal__label {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-bottom: 8px;
  color: #666;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: normal;
}

.print-options-modal__difficulty-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.print-options-modal__difficulty-hint {
  margin-top: 0.5rem;
  margin-bottom: 0;
  transition: opacity 0.2s ease;
  color: #666;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.2;
  opacity: 0;
}

.print-options-modal__difficulty-options:hover .print-options-modal__difficulty-hint {
  opacity: 1;
}

.print-options-modal__actions {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 8px;
}

.print-options-modal__actions .button:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}

.print-options-modal__actions .button:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}

.print-options-modal__button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  gap: 0.5rem;
}

.print-options-modal__button .icon.icon--print {
  color: #fff;
}

@media only screen and (max-width: 639px) {
  .print-options-modal {
    max-width: 95%;
    padding: 1.5rem;
  }
  .print-options-modal__title {
    font-size: 1.5rem;
  }
  .print-options-modal__section-title {
    font-size: 1rem;
  }
  .print-options-modal__actions {
    flex-direction: row;
    gap: 0.5rem;
  }
  .print-options-modal__button {
    width: 100%;
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/PrintablesAccordionList/PrintablesAccordionList.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.printables-accordion-list {
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 140px;
  padding: 1rem 1rem 1.5rem;
  gap: 1rem;
}

.printables-accordion-list .icon--print {
  color: #06c;
}

.printables-accordion-list__topic-group-accordion .accordion {
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(200, 200, 200, 0.5);
  z-index: 2;
}

.printables-accordion-list__topic-group-accordion .accordion__image {
  width: 100px;
  height: 70px;
}

.printables-accordion-list__topic-group-accordion .active + .panel {
  display: flex;
  position: relative;
  top: -8px;
  flex-direction: column;
  padding: 16px 8px 8px;
  background-color: #f8f8f8;
  gap: 8px;
}

.printables-accordion-list__topic-group-accordion > .panel {
  transition: none;
}

.printables-accordion-list__topic-accordion .accordion {
  position: relative;
  border-color: #e6e8e5;
  z-index: 1;
}

.printables-accordion-list__topic-accordion .accordion:hover {
  background-color: #f8f8f8;
}

.printables-accordion-list__topic-accordion .accordion.active {
  background-color: #fff;
}

.printables-accordion-list__topic-accordion .active + .panel {
  background-color: #e6e8e5;
}

.printables-accordion-list__topic-accordion > .panel {
  transition: none;
}

.printables-accordion-list__button-container {
  display: flex;
  justify-content: flex-end;
}

.printables-accordion-list__print-more-worksheets-button {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #06c;
}

.printables-accordion-list__print-more-worksheets-button.button.hollow:hover, .printables-accordion-list__print-more-worksheets-button.button.hollow:focus {
  border-color: #06c;
  color: #06c;
}

.printables-accordion-list__practice-set-card .horizontal-card__main {
  height: 70px;
  padding-left: 16px;
}

.printables-accordion-list__practice-set-card .horizontal-card__aside {
  display: none;
}

.printables-accordion-list__practice-set-card .horizontal-card__aside a.button:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}

.printables-accordion-list__practice-set-card .horizontal-card__aside a.button:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}

.printables-accordion-list__practice-set-card:hover {
  cursor: inherit;
}

.printables-accordion-list__practice-set-card:hover .horizontal-card__aside {
  display: flex;
}

.printables-accordion-list__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background-color: #f8f8f8;
  z-index: 3;
}

.printables-accordion-list__footer-wrapper {
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.printables-accordion-list__footer-button {
  width: 278px;
  max-width: 278px;
}

.printables-accordion-list__footer-button.button.hollow:hover, .printables-accordion-list__footer-button.button.hollow:focus {
  border-color: #06c;
  color: #06c;
}

.printables-accordion-list__footer-text {
  color: #333;
  font-size: 24px;
}

.printables-accordion-list .modal-with-header {
  max-width: 72rem;
  height: 80%;
  margin-inline: auto;
}

.printables-accordion-list .modal-with-header iframe {
  overflow-x: hidden;
  max-width: 72rem;
  border: 0;
}

.printables-accordion-list--print-more-worksheets-active .printables-accordion-list__practice-set-card .horizontal-card__aside {
  display: flex;
}

.printables-accordion-list--print-more-worksheets-active .printables-accordion-list__practice-set-card:hover {
  cursor: pointer;
}

@media only screen and (max-width: 959px) {
  .printables-accordion-list__footer-wrapper {
    gap: 16px;
    flex-flow: row wrap;
    justify-content: center;
  }
  .printables-accordion-list__footer-text {
    font-size: 16px;
    flex-basis: 100%;
    text-align: center;
  }
  .printables-accordion-list__footer-button {
    flex: 1 1;
  }
}

@media only screen and (max-width: 639px) {
  .printables-accordion-list__footer-button {
    max-height: 48px;
  }
  .printables-accordion-list__footer-button.button {
    padding: 14px 8px;
  }
  .printables-accordion-list .modal-with-header {
    height: 98%;
    width: 98%;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/templates/TeachersScreenTemplate/TeachersScreenTemplate.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-sets-app:has(.teachers-screen-template) {
  scrollbar-gutter: auto;
  background-color: #fff;
}

.practice-set-app:has(.teachers-screen-template) {
  max-width: none;
}

.teachers-screen-template {
  min-height: calc(100vh - 60px);
  margin-top: 60px;
}

.teachers-screen-template * {
  font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/PrintablesScreenForTeachers/PrintablesScreenForTeachers.sass ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************/
.printables-screen-for-teachers .teachers-header__header {
  background-color: #e6edf8;
}

.printables-screen-for-teachers .teachers-header__navigation {
  background-color: #99b7e1;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/StarsCompletedOverview/StarsCompletedOverview.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************/
.stars-completed-overview {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stars-completed-overview__container {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 2px;
}
.stars-completed-overview__container__star {
  position: absolute;
}
.stars-completed-overview__star-amount {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  width: 46px;
  height: 45px;
  color: #979797;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.1em;
  line-height: 40px;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/molecules/ScreenHeaderProgressionOverview/ScreenHeaderProgressionOverview.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.screenheader-progression-overview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background-color: #fff;
}

.screenheader-progression-overview__progressbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/ChallengeModeButton/ChallengeModeButton.sass ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable selector-class-pattern */
.challenge-container {
  position: relative;
  width: 80px;
  height: 80px;
}
.challenge-container__label-common-styles {
  position: absolute;
  bottom: 12px;
  width: 215px;
  height: 48px;
  padding: 16px;
  border-radius: 8px;
  background-color: #fffae6;
  color: #724400;
  font-size: 16px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.challenge-container__label-common-styles__inactive {
  background-color: #f8f8f8;
  color: #999;
}
.challenge-container__label-desktop {
  position: absolute;
  right: 45%;
  transform: translateX(18%);
  transition: transform 0.4s, opacity 0.4s ease, visibility 0s 0.4s;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.challenge-container:hover .challenge-container__label-desktop {
  transform: translateX(-16%);
  transition: transform 0.4s, opacity 0.4s ease, visibility 0s;
  opacity: 1;
  visibility: visible;
  z-index: 0;
}
.challenge-container:hover .challenge-container__label-desktop__unstarted {
  right: 40%;
  transform: translateX(-14%);
}
.challenge-container__trophy-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 5px solid #fffae6;
  border-radius: 50%;
  background-color: #fcd733;
  z-index: 1;
}
.challenge-container__trophy-container--inactive {
  border-color: #f8f8f8;
  background-color: #ccc;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/StarsMedalsCircle/StarsMedalsCircle.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
.stars-medals-circle {
  position: relative;
  width: 155px;
  height: 155px;
  pointer-events: none;
}
.stars-medals-circle__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.stars-medals-circle__medals-container {
  display: flex;
  position: absolute;
  top: 84px;
  right: -82px;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 43px;
  padding-left: 8px;
  border-radius: 0 22px 22px 0;
  background-color: #f8f8f8;
  gap: 8px;
}
.stars-medals-circle__medals-container--gold {
  background-color: #e3b500;
}
.stars-medals-circle__medals-container--silver {
  background-color: #999;
}
.stars-medals-circle__medals-container--bronze {
  background-color: #c76727;
}
.stars-medals-circle__stars-progress-arc {
  position: absolute;
  top: 0;
  left: 0;
  width: 155px;
  height: 155px;
  z-index: -9;
}
.stars-medals-circle__stars-progress-arc--1 {
  animation: rotate-1 0.3s ease-in-out 0.3s forwards;
}
.stars-medals-circle__stars-progress-arc--2 {
  animation: rotate-2 0.3s ease-in-out 0.6s forwards;
}
@keyframes rotate-1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(110deg);
  }
  75% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(95deg);
  }
}
@keyframes rotate-2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(200deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(185deg);
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/TopicMapTeacherButtons/TopicMapTeacherButtons.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-topic-map-teacher-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 200px;
  margin: 24px 4px 0;
  padding: 10px 24px;
  border-radius: 8px;
  background-color: #fff;
  z-index: 10;
}
.practice-topic-map-teacher-actions__title {
  margin-bottom: 8px;
  font-family: Open Sans !important;
  font-size: 16px;
  font-weight: 700;
}
.practice-topic-map-teacher-actions .button {
  width: 96px;
  margin-top: 4px;
  margin-bottom: 4px;
  font-family: Open Sans !important;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/organisms/PracticeSetMapIcon/PracticeSetMapIcon.sass ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-set-map-icon {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  height: 147px;
  /* styles for mirror effect */
}

.practice-set-map-icon .stars-medals-circle {
  position: absolute;
  z-index: 2;
}

.practice-set-map-icon .practice-set-icon__headline {
  margin-top: auto;
  margin-bottom: 40px;
}

.practice-set-map-icon__path {
  position: absolute;
  right: 249px;
  bottom: 0;
  left: 249px;
  height: 1px;
  border: medium none currentColor;
  border: initial;
  background: repeating-linear-gradient(to right, #fff 0, #fff 5px, transparent 0, transparent 10px);
}

.practice-set-map-icon__icon {
  left: 28px;
}

.practice-set-map-icon__icon--gold .practice-set-icon__image-container {
  border-color: #fcd733;
}

.practice-set-map-icon__icon--gold .practice-set-icon__headline {
  bottom: 6px;
  outline: 4px solid #fcd733;
  background: #fffae6 url(/packs/static/svgs/shine-d8a1d490d3f61be466e7.svg) no-repeat center;
  background-size: contain;
}

.practice-set-map-icon__icon:hover .practice-set-icon__headline {
  animation: slideText 0.3s ease-out forwards;
}

.practice-set-map-icon__icon:hover .practice-set-icon__image-container {
  animation: reduceBorder 0.3s ease-out forwards;
}

.practice-set-map-icon__icon:hover .practice-set-icon__image-container img {
  animation: scaleUp 0.3s ease-out forwards;
}

.practice-set-map-icon:last-of-type .practice-set-map-icon__path {
  display: none;
}

.practice-set-map-icon::before, .practice-set-map-icon::after {
  position: absolute;
  left: 144px;
  width: 101px;
  height: 45px;
  background: url(/packs/static/src/components/organisms/PracticeSetMapIcon/images/path-white-2d95c2b0a03ad8374577.svg) no-repeat center;
  background-size: contain;
  content: "";
}

.practice-set-map-icon::before {
  top: -4px;
}

.practice-set-map-icon::after {
  bottom: 0;
  transform: scaleY(-1);
}

.practice-set-map-icon.is-old-mode .practice-set-icon {
  left: 0;
}

.practice-set-map-icon.is-old-mode .practice-set-icon__image-container {
  width: 80px;
  height: 80px;
  border: 4px solid #fff;
}

.practice-set-map-icon.is-old-mode .practice-set-icon__image-container img {
  width: 56px;
  height: 56px;
}

.practice-set-map-icon.is-old-mode .practice-set-icon__image-container::after {
  left: 24px;
}

.practice-set-map-icon.is-old-mode .practice-set-icon__headline {
  margin-top: 0;
  margin-bottom: 0;
  z-index: 1;
}

.practice-set-map-icon.is-old-mode::before, .practice-set-map-icon.is-old-mode::after {
  left: 40px;
  background: url(/packs/static/src/components/organisms/PracticeSetMapIcon/images/path-67241c56d4acbe07bc45.svg) no-repeat center;
}

.practice-set-map-icon:nth-of-type(even) {
  transform: scaleX(-1);
}

.practice-set-map-icon:nth-of-type(even) .keep-upright {
  display: inline-block;
  transform: scaleX(-1);
}

.practice-set-map-icon:nth-of-type(even) .practice-set-icon__image-container::after {
  transform: scaleX(-1);
}

.practice-set-map-icon:nth-of-type(even) .practice-set-icon:hover .practice-set-icon__image-container img {
  animation: scaleUpEven 0.3s ease-out forwards;
}

.practice-set-map-icon:first-of-type::before {
  content: none;
}

.practice-set-map-icon:last-of-type::after {
  content: none;
}

.practice-set-map-icon:last-of-type .practice-set__path {
  display: none;
}

.practice-set-map-icon.is-old-mode .practice-set-map-icon__path {
  right: 143px;
  left: 143px;
  border-bottom: 2px dashed #888;
}

@media only screen and (max-width: 639px) {
  .practice-set-map-icon .practice-set-icon__headline {
    max-width: 220px;
  }
  .practice-set-map-icon::before, .practice-set-map-icon::after {
    left: 94px;
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes scaleUpEven {
  0% {
    transform: scale(-1, 1);
  }
  50% {
    transform: scale(-1.2, 1.2);
  }
  100% {
    transform: scale(-1.1, 1.1);
  }
}

@keyframes slideText {
  0% {
    transform: translateX(0);
    font-weight: normal;
  }
  50% {
    transform: translateX(8px);
    font-weight: bold;
  }
  100% {
    transform: translateX(6px);
    font-weight: bold;
  }
}

@keyframes slideTextEven {
  0% {
    transform: translateX(0) scaleX(-1);
    font-weight: normal;
  }
  50% {
    transform: translateX(8px) scaleX(-1);
    font-weight: bold;
  }
  100% {
    transform: translateX(6px) scaleX(-1);
    font-weight: bold;
  }
}

@keyframes reduceBorder {
  0% {
    border: 8px solid #fff;
  }
  50% {
    border: 2px solid #fff;
  }
  100% {
    border: 4px solid #fff;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/components/TopicMap/TopicMap.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.practice-topic-map {
  position: relative;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.practice-topic-map__challenge-buttons {
  position: relative;
  padding-bottom: 32px;
  background-color: #fff;
}

.practice-topic-map__challenge-buttons .button {
  width: 258px;
  height: 50px;
}

.practice-topic-map__header {
  min-height: 90px;
}

.practice-topic-map__help {
  position: absolute;
  right: 100%;
  width: 341px;
  margin-right: 16px;
  padding: 16px;
  z-index: 5;
}

.practice-topic-map__help button {
  cursor: pointer;
}

.practice-topic-map__help h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  text-align: left;
}

.practice-topic-map__help p {
  font-size: 16px;
  line-height: normal;
  text-align: left;
}

.practice-topic-map__help--elementary-school {
  background-color: #e6f3f8;
}

.practice-topic-map__help--elementary-school h3, .practice-topic-map__help--elementary-school p, .practice-topic-map__help--elementary-school i {
  color: #0088b5;
}

.practice-topic-map__help--middle-school {
  background-color: #f8f8f8;
}

.practice-topic-map__help--middle-school h3, .practice-topic-map__help--middle-school p, .practice-topic-map__help--middle-school i {
  color: #666;
}

.practice-topic-map__main {
  position: relative;
  min-height: inherit;
  padding-top: 24px;
  padding-bottom: 175px;
}

.practice-topic-map__challenge-mode-floating-button {
  position: fixed;
  right: calc(50% - 29rem);
  margin-top: 24px;
  z-index: 3;
}

@media only screen and (max-width: 959px) {
  .practice-topic-map__challenge-mode-floating-button {
    right: 1em;
  }
}

@media only screen and (max-width: 639px) {
  .practice-topic-map__challenge-buttons .flex-container:first-of-type {
    margin-top: 16px;
  }
  .practice-topic-map__challenge-buttons .button {
    width: 195px;
    margin: 0 auto;
  }
  .practice-topic-map__help {
    margin-bottom: 16px;
    width: calc(100vw - 32px);
    position: absolute;
    z-index: 5;
    bottom: 100%;
    left: 0;
  }
  .practice-topic-map__challenge-mode-floating-button {
    left: 1em;
    bottom: 2em;
  }
}

.practice-set-app--middle-school .practice-topic-map {
  background-color: #fff;
}

.practice-set-app--middle-school .practice-topic-map__challenge-buttons .button {
  height: auto;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/SaveTestResultsScreen/SaveTestResultsScreen.sass ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable @stylistic/declaration-block-trailing-semicolon */
.assessment-test-save-results {
  min-height: calc(100vh - 61px);
  padding-top: 16px;
  background-color: rgb(253, 242, 197);
}
.assessment-test-save-results__editable-card {
  flex-direction: row;
  width: 100%;
  min-height: 232px;
  padding: 8px 24px 8px 8px;
  background-color: #f4cf99;
}
.assessment-test-save-results__editable-card-image {
  position: relative;
  min-width: 170px;
  height: 100%;
  border-radius: 4px;
  background-color: #f4e199;
  overflow: hidden;
}
.assessment-test-save-results__editable-card-image img {
  position: absolute;
  top: 30%;
  right: 16px;
  width: 100%;
}
.assessment-test-save-results__editable-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0 16px;
}
.assessment-test-save-results__editable-card-content h4 {
  color: #724400;
  font-size: clamp(1.65rem, 2vw + 0.5rem, 1.35rem);
  font-weight: 700;
  line-height: clamp(2.15rem, 2vw + 0.5rem, 1.65rem);
}
.assessment-test-save-results__editable-card-content h4:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
.assessment-test-save-results__editable-card-content h4:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
.assessment-test-save-results__editable-card-content button {
  max-width: 177px;
}
.assessment-test-save-results__input-container {
  height: 84px;
  border-radius: 4px;
  background-color: #fcf8e6;
  position: relative;
  color: #724400;
}
.assessment-test-save-results__input-container:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
.assessment-test-save-results__input-container:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
.assessment-test-save-results__input-container textarea {
  height: 84px;
  border-radius: 4px;
  background-color: #fcf8e6;
  color: #724400;
  font-size: 1.25rem;
  font-weight: 700;
}
.assessment-test-save-results__input-container img {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
}
.assessment-test-save-results__input-container p {
  position: absolute;
  right: 8px;
  bottom: 0;
  color: #f4cf99;
  font-size: 1rem;
  font-weight: 700;
}
.assessment-test-save-results__feedback {
  color: #e30000;
  font-size: 1rem;
  font-weight: 500;
}
@media only screen and (max-width: 959px) {
  .assessment-test-save-results__editable-card {
    padding: 8px;
    align-items: center;
  }
  .assessment-test-save-results__editable-card-image {
    display: none;
  }
  .assessment-test-save-results__editable-card-content {
    padding: 0 8px;
  }
  .assessment-test-save-results__editable-card-content h4 {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
  .assessment-test-save-results__editable-card-content button {
    align-self: center;
  }
  .assessment-test-save-results__input-container {
    height: auto;
  }
  .assessment-test-save-results__input-container textarea {
    height: auto;
    font-size: 1.125rem;
  }
  .assessment-test-save-results__input-container img {
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/ResultAssessmentTestForTeachers/ResultAssessmentTestForTeachers.sass ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable declaration-no-important */
/* stylelint-disable selector-class-pattern */
.assessment-test-results-for-teachers {
  position: relative;
  min-height: calc(100vh - 61px);
  margin-bottom: 80px;
  padding-top: 16px;
}
.assessment-test-results-for-teachers__header {
  width: 100%;
  padding: 16px;
  background-color: #fffae6;
}
.assessment-test-results-for-teachers__back-button {
  display: flex !important;
  align-items: center !important;
  width: 165px !important;
  gap: 24px !important;
  padding: 12px 16px !important;
  border: 1px solid #e1e1e1 !important;
  border-radius: 4px !important;
  font-size: 18px !important;
}
.assessment-test-results-for-teachers__body {
  padding: 16px;
}
.assessment-test-results-for-teachers__list-card {
  border: 1px solid #f8f8f8;
  background-color: #e6e8e5;
}
@media only screen and (max-width: 639px) {
  .assessment-test-results-for-teachers {
    min-height: calc(100vh - 60px);
    padding: 0 16px 120px;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/AssignPracticeSetScreen/AssignPracticeSetScreen.sass ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
.assign-practice-set-screen__main {
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  gap: 1rem;
}

.assign-practice-set-screen__topic-group-accordion .accordion {
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(200, 200, 200, 0.5);
  z-index: 2;
}

.assign-practice-set-screen__topic-group-accordion .accordion__image {
  width: 100px;
  height: 70px;
}

.assign-practice-set-screen__topic-group-accordion .active + .panel {
  display: flex;
  position: relative;
  top: -8px;
  flex-direction: column;
  padding: 16px 8px 8px;
  background-color: #f8f8f8;
  gap: 8px;
}

.assign-practice-set-screen__topic-group-accordion > .panel {
  transition: none;
}

.assign-practice-set-screen__topic-accordion .accordion {
  position: relative;
  border-color: #e6e8e5;
  z-index: 1;
}

.assign-practice-set-screen__topic-accordion .accordion:hover {
  background-color: #f8f8f8;
}

.assign-practice-set-screen__topic-accordion .accordion.active {
  background-color: #fff;
}

.assign-practice-set-screen__topic-accordion .active + .panel {
  background-color: #e6e8e5;
}

.assign-practice-set-screen__topic-accordion > .panel {
  transition: none;
}

.assign-practice-set-screen__practice-set-card .horizontal-card__main {
  height: 70px;
  padding-left: 16px;
}

.assign-practice-set-screen__practice-set-card .horizontal-card__aside {
  display: none;
}

.assign-practice-set-screen__practice-set-card:hover {
  cursor: inherit;
}

.assign-practice-set-screen__practice-set-card:hover .horizontal-card__aside {
  display: flex;
}

.assign-practice-set-screen__preview-button {
  border: 0;
  background-color: #e6e8e5;
  color: #333;
}

.assign-practice-set-screen__preview-button:hover {
  background-color: #999;
  color: #fff;
}

.assign-practice-set-screen .sofaheld-theme-dropdown {
  z-index: 3;
}

.assign-practice-set-screen .sofaheld-theme-dropdown__button {
  text-align: left;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/screens/PrintablesScreen/PrintablesScreen.sass ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************/
.practice-set-app:has(.printables-screen) {
  max-width: none;
}

.practice-sets-app:has(.printables-screen) {
  scrollbar-gutter: auto;
  background-color: #fff;
}

.printables-screen {
  margin-top: 60px;
}

.printables-screen__navigation {
  background-color: #f8f8f8;
}

.printables-screen__header {
  min-height: 133px;
  background-color: #e6edf8;
  background-image: url(/packs/static/practice_topics/banner_header/printables_title-03b1326e63a18a4a3a0e.svg), url(/packs/static/practice_topics/banner_header/printables_bg-65f0346d4a6497acb661.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto, cover;
}

@media only screen and (max-width: 959px) {
  .printables-screen__header {
    background-size: 600px, cover;
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 639px) {
  .printables-screen {
    margin-top: 0;
  }
  .printables-screen__header {
    background-image: url(/packs/static/practice_topics/banner_header/printables_title_phone-d3da06f9d5699dbfbb74.svg), url(/packs/static/practice_topics/banner_header/printables_bg_phone-2dd986c5dc6aa9ca0a23.svg);
    background-size: auto, cover;
    min-height: 120px;
    margin-bottom: 25px;
  }
}
/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/practice-sets/src/App.sass ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
body:has(.modal-overlay) {
  overflow: hidden;
  scrollbar-width: none;
}

body:has(.modal-overlay)::-webkit-scrollbar {
  display: none;
}

.practice-sets-app {
  scrollbar-gutter: stable;
  background-color: #e6e8e5;
  overflow: auto;
}

.practice-sets-app:has(.assign-practice-set-screen) {
  background-color: #fff;
  overflow: visible;
  overflow: initial;
}

.practice-sets-app--middle-school {
  background-color: #fff;
}

.practice-set-app {
  max-width: 60rem;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
}

.practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h1:lang(de), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h2:lang(de), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h3:lang(de), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h4:lang(de), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h5:lang(de), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) p:lang(de), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) div:lang(de), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) button:lang(de), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) .practice-app-markup-inline:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}

.practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h1:lang(en), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h2:lang(en), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h3:lang(en), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h4:lang(en), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) h5:lang(en), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) p:lang(en), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) div:lang(en), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) button:lang(en), .practice-set-app--elementary-school :not(.assessment-test-results-for-teachers) .practice-app-markup-inline:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}

.practice-set-app--middle-school {
  max-width: none;
  background-color: #fff;
}

.practice-set-app--middle-school h1, .practice-set-app--middle-school h2, .practice-set-app--middle-school h3, .practice-set-app--middle-school h4, .practice-set-app--middle-school h5, .practice-set-app--middle-school p, .practice-set-app--middle-school div, .practice-set-app--middle-school button, .practice-set-app--middle-school .practice-app-markup-inline {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.practice-set-app--middle-school .practice-set-container__practice-problem-container {
  max-width: 60rem;
  margin: 0 auto;
}

.practice-set-app--middle-school .practice-set-container__practice-problem-container .text-with-audio-speaker {
  justify-content: center;
}

.practice-set-app--middle-school .multiple-choice-task {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  width: initial;
}

.practice-set-app--middle-school .multiple-selection-task > ul {
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
}

.practice-set-app * {
  backface-visibility: hidden;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
}

.practice-set-app *:not(input) {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.practice-set-app:has(.practice-hint-button) {
  position: relative;
}

.practice-set-app .practice-app-markup-inline {
  display: inline;
}

.practice-set-app .practice-app-error {
  padding: 32px 16px;
  background-color: #fff;
  text-align: center;
}

.practice-set-app .practice-app-error__warning-icon {
  width: 48px;
  height: 48px;
}

.practice-set-app .practice-app-error__warning-text {
  margin-top: 8px;
}

.practice-set-app .practice-repo-button .practice-app-markup-inline {
  white-space: nowrap;
}

.practice-task-text .practice-repo-button .practice-app-markup-inline {
  width: 100%;
}

.markup-color__red {
  color: #e30000;
}

.markup-color__blue {
  color: #0088b5;
}

.markup-color__green {
  color: #00b500;
}

.markup-color__yellow {
  color: #deb501;
}

.markup-color__purple {
  color: #9433c4;
}

.markup-color__magenta {
  color: #da66a9;
}

.markup-color__orange {
  color: #e97c33;
}

.practice-sets-app-modal .teacher-link-popup h1, .practice-sets-app-modal .teacher-link-popup h2, .practice-sets-app-modal .teacher-link-popup h3, .practice-sets-app-modal .teacher-link-popup h4, .practice-sets-app-modal .teacher-link-popup h5, .practice-sets-app-modal .teacher-link-popup p, .practice-sets-app-modal .teacher-link-popup div, .practice-sets-app-modal .teacher-link-popup button {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.assessment-test {
  overflow: auto;
}

.assessment-test * {
  backface-visibility: hidden;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
}

.assessment-test *:not(input) {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.assessment-test .practice-app-markup-inline {
  display: inline;
}

.assessment-test .practice-app-error {
  padding: 32px 16px;
  background-color: #fff;
  text-align: center;
}

.assessment-test .practice-app-error__warning-icon {
  width: 48px;
  height: 48px;
}

.assessment-test .practice-app-error__warning-text {
  margin-top: 8px;
}

.assessment-test .practice-repo-button .practice-app-markup-inline {
  white-space: nowrap;
}

.assessment-test__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background-color: #fffae6;
}

.assessment-test__footer-wrapper {
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.assessment-test__footer-wrapper--centered {
  justify-content: center;
}

.assessment-test__footer-button {
  width: 278px;
  max-width: 278px;
}

.assessment-test__footer-button.disabled {
  background-color: #999 !important;
  opacity: 1 !important;
}

.assessment-test__footer-button.hollow {
  border-width: 2px;
  background-color: #fff;
}

.assessment-test__footer-text {
  color: #722e00;
  font-size: 24px;
}

.assessment-test:has(.assessment-test-results), .assessment-test:has(.assessment-test-previous-results) {
  background-color: #fdf2c5;
}

@media only screen and (max-width: 959px) {
  .assessment-test__footer-wrapper {
    gap: 16px;
    flex-flow: row wrap;
    justify-content: center;
  }
  .assessment-test__footer-text {
    font-size: 16px;
    flex-basis: 100%;
    text-align: center;
  }
  .assessment-test__footer-button {
    flex: 1 1;
  }
}

@media only screen and (max-width: 639px) {
  .assessment-test__footer-button {
    max-height: 48px;
  }
  .assessment-test__footer-button.button {
    padding: 14px 8px;
  }
}

.practice-set-assessment-test {
  height: 100vh;
  background-size: contain;
}

.practice-set-assessment-test__countdown-container {
  height: 50%;
}

.practice-set-assessment-test__buttons-container {
  margin-bottom: 32px;
}

.practice-set-assessment-test .practice-problem {
  width: 100%;
  max-width: 60rem;
  height: 100%;
  margin: 32px auto 0;
  overflow-y: auto;
  padding: 0 32px;
}

.practice-set-assessment-test--no-feedback .sofaheld-theme-gap {
  color: #333;
}

.practice-set-assessment-test--teacher-preview h1:lang(de), .practice-set-assessment-test--teacher-preview h2:lang(de), .practice-set-assessment-test--teacher-preview h3:lang(de), .practice-set-assessment-test--teacher-preview h4:lang(de), .practice-set-assessment-test--teacher-preview h5:lang(de), .practice-set-assessment-test--teacher-preview p:lang(de), .practice-set-assessment-test--teacher-preview div:lang(de), .practice-set-assessment-test--teacher-preview button:lang(de), .practice-set-assessment-test--teacher-preview .practice-app-markup-inline:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}

.practice-set-assessment-test--teacher-preview h1:lang(en), .practice-set-assessment-test--teacher-preview h2:lang(en), .practice-set-assessment-test--teacher-preview h3:lang(en), .practice-set-assessment-test--teacher-preview h4:lang(en), .practice-set-assessment-test--teacher-preview h5:lang(en), .practice-set-assessment-test--teacher-preview p:lang(en), .practice-set-assessment-test--teacher-preview div:lang(en), .practice-set-assessment-test--teacher-preview button:lang(en), .practice-set-assessment-test--teacher-preview .practice-app-markup-inline:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}

.practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header h1, .practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header h2, .practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header h3, .practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header h4, .practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header h5, .practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header p, .practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header div, .practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header button, .practice-set-assessment-test--teacher-preview .assessment-test-sharing-preview-header .practice-app-markup-inline {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.practice-set-assessment-test .practice-app-markup-inline {
  display: inline;
}

.practice-set-assessment-test__pagination-container {
  margin: 16px 16px 0;
}

.practice-set-assessment-test__pagination-container .pagination-button {
  max-height: 40px;
}

.practice-set-assessment-test__pagination-container span {
  flex: 1 1;
}

.practice-set-assessment-test__pagination-container .icon--arrow-simple {
  margin: 0;
}

.practice-set-assessment-test__pagination-container .icon--checkmark {
  all: unset;
  color: #E6E8E5;
  font-size: 32px;
}

.practice-set-assessment-test .practice-action-buttons .button.submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.practice-set-assessment-test .practice-action-buttons .button.submit .icon--checkmark {
  position: absolute;
  right: 16px;
  font-size: 32px;
}

@media only screen and (min-width: 960px) {
  .practice-set-assessment-test {
    background-size: auto;
  }
}

.learning-assessment-sharing {
  height: 100vh;
  margin-top: 61.8px;
  background-color: rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 639px) {
  .learning-assessment-sharing {
    margin-top: 61px;
  }
}

/*# sourceMappingURL=practice-sets-09476b9d.css.map*/