/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/frontend/resources/less/Troubadour/components/Nanopopup.less ***!
  \********************************************************************************************************************************************************************************************************************/
.troubadour-popup .close-button {
  color: var(--troubadour-main);
}
.troubadour-popup .title {
  font-family: FatFrank, sans-serif;
  color: var(--troubadour-main);
}
.troubadour-popup .main-text {
  text-align: center;
  opacity: 1;
  font-family: Sofia Pro, sans-serif;
  font-size: 24px;
  line-height: 28px;
}
.troubadour-popup .inputs-group {
  margin: 15px 0;
  width: 49%;
  display: inline-block;
}
.troubadour-popup .button-group .cancel-button {
  border: none;
}
.troubadour-popup .button-group .cancel-button:hover .button-text {
  color: var(--troubadour-main) !important;
}
.troubadour-popup .button-group .action-button:hover .button-text {
  color: var(--button-action) !important;
}
.troubadour-popup.newsletter-popup {
  padding: 0 !important;
  height: 725px !important;
  min-width: 35vw !important;
}
.troubadour-popup.newsletter-popup iframe {
  height: 99%;
}
@media screen and (max-width: 1368px) {
  .troubadour-popup.newsletter-popup {
    min-width: 50vw !important;
  }
}
@media screen and (max-width: 768px) {
  .troubadour-popup .inputs-group {
    width: 100%;
    display: block;
  }
  .troubadour-popup .button-group button {
    margin: 15px 0;
  }
  .troubadour-popup.newsletter-popup {
    width: 90%;
    max-width: 90% !important;
    min-width: 85% !important;
    left: 5% !important;
  }
}
@media screen and (max-width: 480px) {
  .troubadour-popup.newsletter-popup {
    width: 90%;
    max-width: 90% !important;
    min-width: 85vw !important;
    left: 5% !important;
  }
}

/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/frontend/resources/less/Troubadour/Catalog/ChallengeTemplateOverlay.less ***!
  \********************************************************************************************************************************************************************************************************************************/
.modal-backdrop {
  z-index: 300;
}
.modal-backdrop.show {
  background-color: rgba(24, 24, 46, 0.6);
  opacity: 0.7;
}
.gallery-modal {
  justify-content: center;
  align-items: center;
  z-index: 301;
}
.gallery-modal.show {
  display: flex !important;
}
.gallery-modal .modal-dialog {
  width: 90vw;
  min-width: 350px;
  max-width: 600px;
  display: flex;
  overflow-y: initial !important;
}
.gallery-modal .modal-dialog .modal-content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 22px;
}
.gallery-modal .modal-dialog .modal-content .close {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  opacity: 1;
  background-color: var(--default-bg);
  box-shadow: var(--dropshadow);
  border-radius: 50%;
  z-index: 10000;
  font-size: 21px;
  transform: scale(0.75);
}
.gallery-modal .modal-dialog .modal-content .close i,
.gallery-modal .modal-dialog .modal-content .close svg {
  color: var(--troubadour-main-9);
  font-size: 30px;
}
.gallery-modal .modal-dialog .modal-content .close:hover {
  background-color: var(--troubadour-main-9);
}
.gallery-modal .modal-dialog .modal-content .close:hover i,
.gallery-modal .modal-dialog .modal-content .close:hover svg {
  color: var(--default-bg);
}
.gallery-modal .modal-dialog .modal-content .modal-body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  padding: 0;
  overflow: hidden;
}
.gallery-modal .modal-dialog .modal-content .modal-body i {
  padding: 0 5px;
}
.gallery-modal .modal-dialog .modal-content .modal-body > * {
  box-sizing: border-box;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .carousel-container {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  width: 100%;
  user-select: none;
  margin: 0 0 20px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .carousel-container .carousel {
  border-radius: 22px 22px 0 0;
  display: flex;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .carousel-container .carousel .image-row {
  position: relative;
  width: 100%;
  aspect-ratio: 350 / 100;
  background-color: var(--default-bg);
  border-radius: 22px 22px 0 0;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .carousel-container .carousel .image-row .image-placeholder {
  position: absolute;
  background-color: var(--primary-text-3-dark);
  width: 100%;
  height: 100%;
  border-radius: 22px 22px 0 0;
  display: flex;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .carousel-container .carousel .image-row .image-placeholder svg {
  font-size: 4em;
  color: var(--primary-text-1);
  margin: auto;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .carousel-container .carousel .image-row img {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  border-radius: 22px 22px 0 0;
  aspect-ratio: 350 / 100;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .carousel-container .carousel .image-row img:not(.loaded) {
  opacity: 0;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .carousel-container .template-link {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-block;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container {
  display: flex;
  flex-flow: column wrap;
  margin: 0;
  padding: 0 0 30px;
  flex: 1;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-title {
  margin: 0 0 20px;
  padding: 0 30px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-title .title {
  color: var(--troubadour-main);
  font-family: Eagle, Lato, sans-serif;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 1.04px;
  text-transform: none;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info {
  margin: 0 10px 20px 0;
  padding: 0 20px 0 30px;
  height: 30vh;
  overflow-x: hidden;
  overflow-y: overlay;
  color: var(--default-color-8);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 400;
  line-height: 1.2em;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info::-webkit-scrollbar {
  width: 8px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main);
  border-radius: 5px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info::-webkit-scrollbar-track {
  background-color: var(--babillard-color-17);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info {
    scrollbar-color: var(--troubadour-main) var(--babillard-color-17);
    scrollbar-width: thin;
  }
}
@media screen and (min-height: 800px) {
  .gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info {
    height: 40vh;
  }
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .challenge-subheader {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0 20px;
  gap: 20px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .challenge-subheader .challenge-concepts {
  flex: 2;
  margin: 0;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .challenge-subheader .challenge-concepts .concepts-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: 5px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .challenge-subheader .challenge-concepts .concepts-list .concept-item {
  position: relative;
  cursor: pointer;
  display: inline-block;
  color: var(--item-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 33px;
  background: var(--default-bg);
  margin: 0;
  padding: 0 10px;
  border-radius: 10px;
  border: 2px solid var(--item-color);
  user-select: none;
  white-space: nowrap;
  max-width: 160px;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media screen and (min-width: 800px) {
  .gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .challenge-subheader .challenge-concepts .concepts-list .concept-item {
    max-width: 300px;
  }
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .challenge-subheader .expected-duration {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .challenge-subheader .expected-duration .text-block {
  color: var(--troubadour-main);
  font-size: 20px;
  font-weight: 800;
  line-height: 1em;
  white-space: nowrap;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info h3 {
  font-size: clamp(16px, 2vw, 20px);
  font-style: normal;
  font-weight: 800;
  line-height: 1em;
  text-transform: none;
  margin: 0 0 5px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .content-block {
  margin: 0 0 20px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .content-block .text-block {
  word-break: break-word;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .content-block.ql-editor {
  line-height: unset;
  overflow: unset;
  height: unset;
  padding: unset;
  white-space: unset;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .content-block.ql-editor ul,
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .content-block.ql-editor ol {
  padding-left: unset;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .content-block.note-for-teacher {
  color: var(--troubadour-main);
  background-color: var(--student-challenges-color-3);
  padding: 10px;
  border: 2px dashed var(--teacher-info);
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .content-block.note-for-teacher .text-block {
  word-break: break-all;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-info .content-block.note-for-teacher a {
  color: var(--troubadour-main);
  font-weight: 700;
  text-decoration: underline;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-actions {
  width: 100%;
  padding: 0 30px;
  margin: auto 0 0;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-actions .template-actions {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-actions .login-needed {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-actions .login-needed .login-message {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.gallery-modal .modal-dialog .modal-content .modal-body .template-overlay-container .template-metadata-container .challenge-actions .login-needed .login-message p {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 800px) {
  .gallery-modal .modal-dialog {
    max-width: 750px;
  }
  .gallery-modal .modal-dialog .modal-content .close {
    left: -25px;
    top: -25px;
    transform: scale(1);
  }
}
@media screen and (min-height: 800px) {
  .gallery-modal .modal-dialog {
    max-width: 750px;
  }
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/frontend/resources/less/Troubadour/Pathway/PaidFeatureInfoPopup.less ***!
  \****************************************************************************************************************************************************************************************************************************/
.nanopopup.paid-feature-info-popup {
  background-color: var(--default-bg-2);
  overflow: visible;
}
.nanopopup.paid-feature-info-popup::after {
  content: "";
  position: absolute;
  right: 40px;
  top: -30px;
  aspect-ratio: 78 / 114;
  width: 78px;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-paid-package-ribbon.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
.nanopopup.paid-feature-info-popup .paid-feature-message {
  display: none;
}
.nanopopup.paid-feature-info-popup .paid-feature-message h2 {
  color: var(--troubadour-main);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  line-height: 1em;
  text-transform: none;
  margin: 0 0 30px;
  padding: 0 100px 0 0;
  word-break: break-word;
}
.nanopopup.paid-feature-info-popup .paid-feature-message p {
  color: var(--default-color-4);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1em;
  text-transform: none;
  margin: 0 0 30px;
}
.nanopopup.paid-feature-info-popup[data-feature-name="default-paid-feature"] .paid-feature-message.default-paid-feature {
  display: block;
}
.nanopopup.paid-feature-info-popup[data-feature-name="challenge-from-scratch"] .paid-feature-message.challenge-from-scratch {
  display: block;
}
.nanopopup.paid-feature-info-popup[data-feature-name="challenge-from-catalog"] .paid-feature-message.challenge-from-catalog {
  display: block;
}
.nanopopup.paid-feature-info-popup[data-feature-name="challenge-masking"] .paid-feature-message.challenge-masking {
  display: block;
}
.nanopopup.paid-feature-info-popup[data-feature-name="challenge-correction"] .paid-feature-message.challenge-correction {
  display: block;
}
.nanopopup.paid-feature-info-popup .action-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
@media screen and (min-width: 500px) {
  .nanopopup.paid-feature-info-popup .action-buttons {
    flex-direction: row;
    justify-content: flex-end;
  }
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.paid-feature-info-popup {
    padding: 30px !important;
    width: 90vw !important;
    height: auto !important;
    min-width: 300px !important;
    max-width: 560px !important;
    min-height: auto !important;
    max-height: 450px !important;
  }
}

/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/frontend/resources/less/components/Popups/SwitchToFreemiumPopup.less ***!
  \****************************************************************************************************************************************************************************************************************************/
.nanopopup-backpanel {
  display: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 320;
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-backpanel.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-backpanel.transparent {
  background: transparent;
}
.nanopopup {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup.inactivity-popup {
  z-index: 350;
}
.nanopopup.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup .close-button {
  color: var(--popup-default);
}
.nanopopup .video-row {
  padding: 0 5%;
}
.nanopopup .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup.reading-challenge-edit .input-popup input,
.nanopopup.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup.no-event {
  pointer-events: none;
}
.nanopopup .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup .inline-button {
  background: var(--popup-default);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--popup-default);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--popup-default);
  text-transform: none;
}
.nanopopup .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup .text-justify {
  text-align: justify !important;
}
.nanopopup .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--popup-default);
}
.nanopopup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup a.troubadour-button {
  text-decoration: none;
}
.nanopopup .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup .input-popup label {
  text-align: center;
}
.nanopopup .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--popup-default);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--popup-default);
  font-size: 18px;
  color: var(--popup-default);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--popup-default);
}
.nanopopup .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--popup-default);
  color: var(--popup-default) !important;
  float: left;
  width: 12px;
}
.nanopopup .input-popup input[type="checkbox"]:checked {
  background: var(--popup-default);
}
.nanopopup .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--popup-default) !important;
}
.nanopopup .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--popup-default);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup .button-group .action-button:not(.troubadour-button):hover {
  color: var(--popup-default) !important;
  opacity: 1;
}
.nanopopup .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--popup-default);
  color: var(--popup-default);
}
.nanopopup .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup .button-group .cancel-button:hover {
  color: var(--popup-default) !important;
}
.nanopopup[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup[data-theme="troubadour"] .close-container i,
.nanopopup[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-important {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-important.inactivity-popup {
  z-index: 350;
}
.nanopopup-important.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-important .close-button {
  color: var(--popup-error);
}
.nanopopup-important .video-row {
  padding: 0 5%;
}
.nanopopup-important .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-important .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-important.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-important.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-important.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-important.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-important.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-important.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-important.reading-challenge-edit .input-popup input,
.nanopopup-important.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-important.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-important.no-event {
  pointer-events: none;
}
.nanopopup-important .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-important .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-important .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-important .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-important .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-important .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-important .inline-button {
  background: var(--popup-error);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-important .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--popup-error);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-important .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--popup-error);
  text-transform: none;
}
.nanopopup-important .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-important .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-important .text-justify {
  text-align: justify !important;
}
.nanopopup-important .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-important .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-important a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--popup-error);
}
.nanopopup-important a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-important a.troubadour-button {
  text-decoration: none;
}
.nanopopup-important .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-important .input-popup label {
  text-align: center;
}
.nanopopup-important .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--popup-error);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-important .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-important .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--popup-error);
  font-size: 18px;
  color: var(--popup-error);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-important .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--popup-error);
}
.nanopopup-important .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-important .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--popup-error);
  color: var(--popup-error) !important;
  float: left;
  width: 12px;
}
.nanopopup-important .input-popup input[type="checkbox"]:checked {
  background: var(--popup-error);
}
.nanopopup-important .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-important .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--popup-error) !important;
}
.nanopopup-important .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-important .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-important .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-important .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-important .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-important .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-important .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-important .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-important .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--popup-error);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-important .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button):hover {
  color: var(--popup-error) !important;
  opacity: 1;
}
.nanopopup-important .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--popup-error);
  color: var(--popup-error);
}
.nanopopup-important .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-important .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-important .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-important .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-important .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-important .button-group .cancel-button:hover {
  color: var(--popup-error) !important;
}
.nanopopup-important[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-important[data-theme="troubadour"] .close-container i,
.nanopopup-important[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-important[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-important[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-important[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-important[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-important[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-success {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-success.inactivity-popup {
  z-index: 350;
}
.nanopopup-success.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-success .close-button {
  color: var(--popup-success);
}
.nanopopup-success .video-row {
  padding: 0 5%;
}
.nanopopup-success .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-success .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-success.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-success.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-success.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-success.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-success.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-success.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-success.reading-challenge-edit .input-popup input,
.nanopopup-success.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-success.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-success.no-event {
  pointer-events: none;
}
.nanopopup-success .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-success .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-success .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-success .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-success .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-success .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-success .inline-button {
  background: var(--popup-success);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-success .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--popup-success);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-success .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--popup-success);
  text-transform: none;
}
.nanopopup-success .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-success .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-success .text-justify {
  text-align: justify !important;
}
.nanopopup-success .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-success .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-success a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--popup-success);
}
.nanopopup-success a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-success a.troubadour-button {
  text-decoration: none;
}
.nanopopup-success .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-success .input-popup label {
  text-align: center;
}
.nanopopup-success .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--popup-success);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-success .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-success .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--popup-success);
  font-size: 18px;
  color: var(--popup-success);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-success .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--popup-success);
}
.nanopopup-success .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-success .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--popup-success);
  color: var(--popup-success) !important;
  float: left;
  width: 12px;
}
.nanopopup-success .input-popup input[type="checkbox"]:checked {
  background: var(--popup-success);
}
.nanopopup-success .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-success .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--popup-success) !important;
}
.nanopopup-success .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-success .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-success .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-success .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-success .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-success .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-success .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-success .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-success .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--popup-success);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-success .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button):hover {
  color: var(--popup-success) !important;
  opacity: 1;
}
.nanopopup-success .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--popup-success);
  color: var(--popup-success);
}
.nanopopup-success .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-success .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-success .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-success .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-success .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-success .button-group .cancel-button:hover {
  color: var(--popup-success) !important;
}
.nanopopup-success[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-success[data-theme="troubadour"] .close-container i,
.nanopopup-success[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-success[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-success[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-success[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-success[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-success[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-warning {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-warning.inactivity-popup {
  z-index: 350;
}
.nanopopup-warning.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-warning .close-button {
  color: var(--popup-warning);
}
.nanopopup-warning .video-row {
  padding: 0 5%;
}
.nanopopup-warning .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-warning .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-warning.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-warning.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-warning.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-warning.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-warning.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-warning.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-warning.reading-challenge-edit .input-popup input,
.nanopopup-warning.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-warning.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-warning.no-event {
  pointer-events: none;
}
.nanopopup-warning .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-warning .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-warning .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-warning .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-warning .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-warning .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-warning .inline-button {
  background: var(--popup-warning);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-warning .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--popup-warning);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-warning .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--popup-warning);
  text-transform: none;
}
.nanopopup-warning .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-warning .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-warning .text-justify {
  text-align: justify !important;
}
.nanopopup-warning .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-warning .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-warning a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--popup-warning);
}
.nanopopup-warning a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-warning a.troubadour-button {
  text-decoration: none;
}
.nanopopup-warning .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-warning .input-popup label {
  text-align: center;
}
.nanopopup-warning .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--popup-warning);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-warning .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-warning .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--popup-warning);
  font-size: 18px;
  color: var(--popup-warning);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-warning .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--popup-warning);
}
.nanopopup-warning .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-warning .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--popup-warning);
  color: var(--popup-warning) !important;
  float: left;
  width: 12px;
}
.nanopopup-warning .input-popup input[type="checkbox"]:checked {
  background: var(--popup-warning);
}
.nanopopup-warning .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-warning .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--popup-warning) !important;
}
.nanopopup-warning .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-warning .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-warning .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-warning .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-warning .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-warning .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-warning .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-warning .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-warning .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--popup-warning);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button):hover {
  color: var(--popup-warning) !important;
  opacity: 1;
}
.nanopopup-warning .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--popup-warning);
  color: var(--popup-warning);
}
.nanopopup-warning .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-warning .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-warning .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-warning .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-warning .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-warning .button-group .cancel-button:hover {
  color: var(--popup-warning) !important;
}
.nanopopup-warning[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-warning[data-theme="troubadour"] .close-container i,
.nanopopup-warning[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-warning[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-warning[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-warning[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-warning[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-warning[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-current {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-current.inactivity-popup {
  z-index: 350;
}
.nanopopup-current.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-current .close-button {
  color: var(--button-uc-current);
}
.nanopopup-current .video-row {
  padding: 0 5%;
}
.nanopopup-current .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-current .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-current.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-current.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-current.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-current.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-current.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-current.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-current.reading-challenge-edit .input-popup input,
.nanopopup-current.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-current.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-current.no-event {
  pointer-events: none;
}
.nanopopup-current .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-current .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-current .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-current .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-current .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-current .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-current .inline-button {
  background: var(--button-uc-current);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-current .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--button-uc-current);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-current .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--button-uc-current);
  text-transform: none;
}
.nanopopup-current .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-current .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-current .text-justify {
  text-align: justify !important;
}
.nanopopup-current .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-current .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-current a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--button-uc-current);
}
.nanopopup-current a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-current a.troubadour-button {
  text-decoration: none;
}
.nanopopup-current .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-current .input-popup label {
  text-align: center;
}
.nanopopup-current .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--button-uc-current);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-current .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-current .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--button-uc-current);
  font-size: 18px;
  color: var(--button-uc-current);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-current .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--button-uc-current);
}
.nanopopup-current .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-current .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--button-uc-current);
  color: var(--button-uc-current) !important;
  float: left;
  width: 12px;
}
.nanopopup-current .input-popup input[type="checkbox"]:checked {
  background: var(--button-uc-current);
}
.nanopopup-current .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-current .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--button-uc-current) !important;
}
.nanopopup-current .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-current .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-current .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-current .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-current .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-current .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-current .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-current .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-current .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--button-uc-current);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-current .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button):hover {
  color: var(--button-uc-current) !important;
  opacity: 1;
}
.nanopopup-current .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--button-uc-current);
  color: var(--button-uc-current);
}
.nanopopup-current .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-current .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-current .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-current .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-current .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-current .button-group .cancel-button:hover {
  color: var(--button-uc-current) !important;
}
.nanopopup-current[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-current[data-theme="troubadour"] .close-container i,
.nanopopup-current[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-current[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-current[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-current[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-current[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-current[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-resend {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-resend.inactivity-popup {
  z-index: 350;
}
.nanopopup-resend.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-resend .close-button {
  color: var(--button-uc-resend);
}
.nanopopup-resend .video-row {
  padding: 0 5%;
}
.nanopopup-resend .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-resend .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-resend.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-resend.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-resend.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-resend.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-resend.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-resend.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-resend.reading-challenge-edit .input-popup input,
.nanopopup-resend.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-resend.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-resend.no-event {
  pointer-events: none;
}
.nanopopup-resend .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-resend .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-resend .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-resend .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-resend .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-resend .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-resend .inline-button {
  background: var(--button-uc-resend);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-resend .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--button-uc-resend);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-resend .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--button-uc-resend);
  text-transform: none;
}
.nanopopup-resend .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-resend .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-resend .text-justify {
  text-align: justify !important;
}
.nanopopup-resend .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-resend .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-resend a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--button-uc-resend);
}
.nanopopup-resend a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-resend a.troubadour-button {
  text-decoration: none;
}
.nanopopup-resend .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-resend .input-popup label {
  text-align: center;
}
.nanopopup-resend .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--button-uc-resend);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-resend .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-resend .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--button-uc-resend);
  font-size: 18px;
  color: var(--button-uc-resend);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-resend .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--button-uc-resend);
}
.nanopopup-resend .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-resend .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--button-uc-resend);
  color: var(--button-uc-resend) !important;
  float: left;
  width: 12px;
}
.nanopopup-resend .input-popup input[type="checkbox"]:checked {
  background: var(--button-uc-resend);
}
.nanopopup-resend .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-resend .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--button-uc-resend) !important;
}
.nanopopup-resend .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-resend .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-resend .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-resend .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-resend .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-resend .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-resend .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-resend .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-resend .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--button-uc-resend);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button):hover {
  color: var(--button-uc-resend) !important;
  opacity: 1;
}
.nanopopup-resend .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--button-uc-resend);
  color: var(--button-uc-resend);
}
.nanopopup-resend .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-resend .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-resend .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-resend .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-resend .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-resend .button-group .cancel-button:hover {
  color: var(--button-uc-resend) !important;
}
.nanopopup-resend[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-resend[data-theme="troubadour"] .close-container i,
.nanopopup-resend[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-resend[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-resend[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-resend[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-resend[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-resend[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-done {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-done.inactivity-popup {
  z-index: 350;
}
.nanopopup-done.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-done .close-button {
  color: var(--button-uc-done);
}
.nanopopup-done .video-row {
  padding: 0 5%;
}
.nanopopup-done .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-done .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-done.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-done.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-done.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-done.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-done.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-done.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-done.reading-challenge-edit .input-popup input,
.nanopopup-done.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-done.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-done.no-event {
  pointer-events: none;
}
.nanopopup-done .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-done .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-done .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-done .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-done .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-done .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-done .inline-button {
  background: var(--button-uc-done);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-done .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--button-uc-done);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-done .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--button-uc-done);
  text-transform: none;
}
.nanopopup-done .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-done .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-done .text-justify {
  text-align: justify !important;
}
.nanopopup-done .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-done .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-done a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--button-uc-done);
}
.nanopopup-done a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-done a.troubadour-button {
  text-decoration: none;
}
.nanopopup-done .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-done .input-popup label {
  text-align: center;
}
.nanopopup-done .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--button-uc-done);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-done .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-done .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--button-uc-done);
  font-size: 18px;
  color: var(--button-uc-done);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-done .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--button-uc-done);
}
.nanopopup-done .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-done .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--button-uc-done);
  color: var(--button-uc-done) !important;
  float: left;
  width: 12px;
}
.nanopopup-done .input-popup input[type="checkbox"]:checked {
  background: var(--button-uc-done);
}
.nanopopup-done .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-done .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--button-uc-done) !important;
}
.nanopopup-done .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-done .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-done .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-done .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-done .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-done .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-done .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-done .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-done .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--button-uc-done);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-done .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button):hover {
  color: var(--button-uc-done) !important;
  opacity: 1;
}
.nanopopup-done .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--button-uc-done);
  color: var(--button-uc-done);
}
.nanopopup-done .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-done .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-done .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-done .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-done .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-done .button-group .cancel-button:hover {
  color: var(--button-uc-done) !important;
}
.nanopopup-done[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-done[data-theme="troubadour"] .close-container i,
.nanopopup-done[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-done[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-done[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-done[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-done[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-done[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-large {
  max-width: 1280px !important;
  min-width: 950px !important;
}
.nanopopup-scroll {
  overflow: hidden !important;
}
.nanopopup-scroll .scrollable {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 40vh;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.nanopopup-scroll .scrollable::-webkit-scrollbar {
  width: 4px;
}
.nanopopup-scroll .scrollable::-webkit-scrollbar-thumb {
  background-color: var(--primary-text-1);
  border-radius: 5px;
}
.nanopopup-scroll .scrollable::-webkit-scrollbar-track {
  background-color: var(--default-bg);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .nanopopup-scroll .scrollable {
    scrollbar-color: var(--primary-text-1) var(--default-bg);
    scrollbar-width: thin;
  }
}
@media (max-width: 1280px) {
  .nanopopup {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-important {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-success {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-warning {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-current {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-done {
    max-width: 80%;
    min-width: 80%;
  }
}
@media (max-width: 992px) {
  .nanopopup,
  .nanopopup-large,
  .nanopopup-important,
  .nanopopup-success,
  .nanopopup-warning,
  .nanopopup-current,
  .nanopopup-done {
    max-width: 80% !important;
    min-width: 80% !important;
    padding: 22px 20px 32px 20px !important;
  }
  .nanopopup .button-group,
  .nanopopup-large .button-group,
  .nanopopup-important .button-group,
  .nanopopup-success .button-group,
  .nanopopup-warning .button-group,
  .nanopopup-current .button-group,
  .nanopopup-done .button-group {
    flex-wrap: wrap;
  }
  .nanopopup-done .general-comment-container .general-comment {
    height: 100px !important;
  }
  .nanopopup-done .general-history-container .general-history-panel {
    height: 100px !important;
  }
  #tutorial-popup-skip,
  #tutorial-popup-close {
    display: none;
  }
  #tutorial-popup {
    display: none !important;
  }
  #tutorial-popup + .nanopopup-backpanel {
    display: none;
  }
}
@media (max-width: 767px) {
  .nanopopup-large,
  .nanopopup-important,
  .nanopopup-success,
  .nanopopup-warning,
  .nanopopup {
    max-width: 80% !important;
    min-width: 80% !important;
    max-height: 80vh !important;
    overflow-y: scroll;
  }
}
@media (max-width: 480px) {
  .nanopopup {
    height: 90vh !important;
    max-height: unset !important;
    min-width: 90% !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
  }
  .nanopopup .title {
    margin-top: 35px;
    font-size: 2em;
  }
  .nanopopup .main-text {
    font-size: 1.1em;
  }
  .nanopopup .second-text {
    font-size: 1.1em;
  }
  .nanopopup .button-group {
    flex-direction: column;
  }
  .nanopopup .button-group .action-button,
  .nanopopup .button-group .cancel-button {
    min-width: 60%;
    max-width: 90%;
    margin-top: 5px;
  }
  .nanopopup .close-container {
    right: 15px;
    top: 10px;
  }
  .nanopopup .close-container.display-left {
    right: auto;
    left: 5px;
  }
}
.nanopopup.nanopopup-freemium {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
  padding: 40px 60px !important;
  background-color: var(--default-bg-2);
  min-width: 300px !important;
  max-width: 560px !important;
  overflow: visible;
}
.nanopopup.nanopopup-freemium.inactivity-popup {
  z-index: 350;
}
.nanopopup.nanopopup-freemium.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup.nanopopup-freemium .close-button {
  color: var(--troubadour-main);
}
.nanopopup.nanopopup-freemium .video-row {
  padding: 0 5%;
}
.nanopopup.nanopopup-freemium .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup.nanopopup-freemium .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup.nanopopup-freemium.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup.nanopopup-freemium.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup.nanopopup-freemium.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup.nanopopup-freemium.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup.nanopopup-freemium.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup.nanopopup-freemium.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup.nanopopup-freemium.reading-challenge-edit .input-popup input,
.nanopopup.nanopopup-freemium.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup.nanopopup-freemium.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup.nanopopup-freemium.no-event {
  pointer-events: none;
}
.nanopopup.nanopopup-freemium .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup.nanopopup-freemium .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup.nanopopup-freemium .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup.nanopopup-freemium .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup.nanopopup-freemium .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup.nanopopup-freemium .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup.nanopopup-freemium .inline-button {
  background: var(--troubadour-main);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup.nanopopup-freemium .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--troubadour-main);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup.nanopopup-freemium .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--troubadour-main);
  text-transform: none;
}
.nanopopup.nanopopup-freemium .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup.nanopopup-freemium .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup.nanopopup-freemium .text-justify {
  text-align: justify !important;
}
.nanopopup.nanopopup-freemium .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup.nanopopup-freemium .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup.nanopopup-freemium a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--troubadour-main);
}
.nanopopup.nanopopup-freemium a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup.nanopopup-freemium a.troubadour-button {
  text-decoration: none;
}
.nanopopup.nanopopup-freemium .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup.nanopopup-freemium .input-popup label {
  text-align: center;
}
.nanopopup.nanopopup-freemium .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--troubadour-main);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup.nanopopup-freemium .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup.nanopopup-freemium .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--troubadour-main);
  font-size: 18px;
  color: var(--troubadour-main);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup.nanopopup-freemium .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--troubadour-main);
}
.nanopopup.nanopopup-freemium .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup.nanopopup-freemium .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--troubadour-main);
  color: var(--troubadour-main) !important;
  float: left;
  width: 12px;
}
.nanopopup.nanopopup-freemium .input-popup input[type="checkbox"]:checked {
  background: var(--troubadour-main);
}
.nanopopup.nanopopup-freemium .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup.nanopopup-freemium .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--troubadour-main) !important;
}
.nanopopup.nanopopup-freemium .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup.nanopopup-freemium .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup.nanopopup-freemium .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup.nanopopup-freemium .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup.nanopopup-freemium .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup.nanopopup-freemium .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup.nanopopup-freemium .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup.nanopopup-freemium .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup.nanopopup-freemium .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup.nanopopup-freemium .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--troubadour-main);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup.nanopopup-freemium .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup.nanopopup-freemium .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup.nanopopup-freemium .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup.nanopopup-freemium .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup.nanopopup-freemium .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup.nanopopup-freemium .button-group .action-button:not(.troubadour-button):hover {
  color: var(--troubadour-main) !important;
  opacity: 1;
}
.nanopopup.nanopopup-freemium .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--troubadour-main);
  color: var(--troubadour-main);
}
.nanopopup.nanopopup-freemium .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup.nanopopup-freemium .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup.nanopopup-freemium .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup.nanopopup-freemium .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup.nanopopup-freemium .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup.nanopopup-freemium .button-group .cancel-button:hover {
  color: var(--troubadour-main) !important;
}
.nanopopup.nanopopup-freemium[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup.nanopopup-freemium[data-theme="troubadour"] .close-container i,
.nanopopup.nanopopup-freemium[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup.nanopopup-freemium[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup.nanopopup-freemium[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup.nanopopup-freemium[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup.nanopopup-freemium[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup.nanopopup-freemium[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup.nanopopup-freemium .close-container {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--default-bg);
  left: 15px;
  top: 15px;
  box-shadow: var(--dropshadow);
}
.nanopopup.nanopopup-freemium .close-container i,
.nanopopup.nanopopup-freemium .close-container svg {
  font-size: 20px;
  color: var(--troubadour-main-12);
}
.nanopopup.nanopopup-freemium .close-container:hover {
  background-color: var(--troubadour-main-12);
}
.nanopopup.nanopopup-freemium .close-container:hover i,
.nanopopup.nanopopup-freemium .close-container:hover svg {
  color: var(--default-bg);
}
.nanopopup.nanopopup-freemium::after {
  content: "";
  position: absolute;
  right: 40px;
  top: -30px;
  aspect-ratio: 78 / 114;
  width: 78px;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-paid-package-ribbon.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
.nanopopup.nanopopup-freemium h2 {
  color: var(--troubadour-main);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.1em;
  text-transform: none;
  text-align: left;
  margin: 0 0 30px;
}
.nanopopup.nanopopup-freemium h2.small-title {
  font-size: 23px;
  line-height: 1.2em;
}
.nanopopup.nanopopup-freemium p {
  color: var(--default-color-4);
  font-size: 23px;
  line-height: 1em;
  margin: 0 0 30px;
}
.nanopopup.nanopopup-freemium p strong {
  font-weight: 800;
}
.nanopopup.nanopopup-freemium p:last-child {
  margin-bottom: 0;
}
.nanopopup.nanopopup-freemium p.small-text {
  font-size: 18px;
}
.nanopopup.nanopopup-freemium .scrollable-content {
  padding: 0 10px 0 0;
  height: 50vh;
  max-height: 250px !important;
  overflow-x: hidden;
  overflow-y: auto;
}
.nanopopup.nanopopup-freemium .scrollable-content::-webkit-scrollbar {
  width: 8px;
}
.nanopopup.nanopopup-freemium .scrollable-content::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main);
  border-radius: 5px;
}
.nanopopup.nanopopup-freemium .scrollable-content::-webkit-scrollbar-track {
  background-color: var(--default-bg-2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .nanopopup.nanopopup-freemium .scrollable-content {
    scrollbar-color: var(--troubadour-main) var(--default-bg-2);
    scrollbar-width: thin;
  }
}
.nanopopup.nanopopup-freemium .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 30px 0 0;
  padding: 0;
  gap: 20px;
}
.nanopopup.nanopopup-freemium[data-popup-size="large"] {
  max-width: 800px !important;
}
.nanopopup.nanopopup-freemium[data-popup-size="large"] .button-group {
  justify-content: center;
}

/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/frontend/resources/less/components/Popups/SwitchToPremiumPopup.less ***!
  \***************************************************************************************************************************************************************************************************************************/
.nanopopup-backpanel {
  display: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 320;
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-backpanel.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-backpanel.transparent {
  background: transparent;
}
.nanopopup {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup.inactivity-popup {
  z-index: 350;
}
.nanopopup.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup .close-button {
  color: var(--popup-default);
}
.nanopopup .video-row {
  padding: 0 5%;
}
.nanopopup .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup.reading-challenge-edit .input-popup input,
.nanopopup.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup.no-event {
  pointer-events: none;
}
.nanopopup .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup .inline-button {
  background: var(--popup-default);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--popup-default);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--popup-default);
  text-transform: none;
}
.nanopopup .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup .text-justify {
  text-align: justify !important;
}
.nanopopup .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--popup-default);
}
.nanopopup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup a.troubadour-button {
  text-decoration: none;
}
.nanopopup .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup .input-popup label {
  text-align: center;
}
.nanopopup .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--popup-default);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--popup-default);
  font-size: 18px;
  color: var(--popup-default);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--popup-default);
}
.nanopopup .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--popup-default);
  color: var(--popup-default) !important;
  float: left;
  width: 12px;
}
.nanopopup .input-popup input[type="checkbox"]:checked {
  background: var(--popup-default);
}
.nanopopup .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--popup-default) !important;
}
.nanopopup .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--popup-default);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup .button-group .action-button:not(.troubadour-button):hover {
  color: var(--popup-default) !important;
  opacity: 1;
}
.nanopopup .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--popup-default);
  color: var(--popup-default);
}
.nanopopup .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup .button-group .cancel-button:hover {
  color: var(--popup-default) !important;
}
.nanopopup[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup[data-theme="troubadour"] .close-container i,
.nanopopup[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-important {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-important.inactivity-popup {
  z-index: 350;
}
.nanopopup-important.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-important .close-button {
  color: var(--popup-error);
}
.nanopopup-important .video-row {
  padding: 0 5%;
}
.nanopopup-important .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-important .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-important.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-important.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-important.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-important.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-important.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-important.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-important.reading-challenge-edit .input-popup input,
.nanopopup-important.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-important.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-important.no-event {
  pointer-events: none;
}
.nanopopup-important .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-important .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-important .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-important .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-important .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-important .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-important .inline-button {
  background: var(--popup-error);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-important .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--popup-error);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-important .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--popup-error);
  text-transform: none;
}
.nanopopup-important .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-important .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-important .text-justify {
  text-align: justify !important;
}
.nanopopup-important .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-important .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-important a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--popup-error);
}
.nanopopup-important a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-important a.troubadour-button {
  text-decoration: none;
}
.nanopopup-important .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-important .input-popup label {
  text-align: center;
}
.nanopopup-important .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--popup-error);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-important .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-important .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--popup-error);
  font-size: 18px;
  color: var(--popup-error);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-important .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--popup-error);
}
.nanopopup-important .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-important .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--popup-error);
  color: var(--popup-error) !important;
  float: left;
  width: 12px;
}
.nanopopup-important .input-popup input[type="checkbox"]:checked {
  background: var(--popup-error);
}
.nanopopup-important .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-important .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--popup-error) !important;
}
.nanopopup-important .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-important .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-important .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-important .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-important .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-important .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-important .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-important .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-important .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--popup-error);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-important .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-important .button-group .action-button:not(.troubadour-button):hover {
  color: var(--popup-error) !important;
  opacity: 1;
}
.nanopopup-important .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--popup-error);
  color: var(--popup-error);
}
.nanopopup-important .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-important .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-important .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-important .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-important .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-important .button-group .cancel-button:hover {
  color: var(--popup-error) !important;
}
.nanopopup-important[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-important[data-theme="troubadour"] .close-container i,
.nanopopup-important[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-important[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-important[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-important[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-important[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-important[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-success {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-success.inactivity-popup {
  z-index: 350;
}
.nanopopup-success.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-success .close-button {
  color: var(--popup-success);
}
.nanopopup-success .video-row {
  padding: 0 5%;
}
.nanopopup-success .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-success .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-success.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-success.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-success.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-success.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-success.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-success.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-success.reading-challenge-edit .input-popup input,
.nanopopup-success.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-success.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-success.no-event {
  pointer-events: none;
}
.nanopopup-success .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-success .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-success .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-success .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-success .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-success .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-success .inline-button {
  background: var(--popup-success);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-success .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--popup-success);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-success .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--popup-success);
  text-transform: none;
}
.nanopopup-success .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-success .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-success .text-justify {
  text-align: justify !important;
}
.nanopopup-success .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-success .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-success a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--popup-success);
}
.nanopopup-success a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-success a.troubadour-button {
  text-decoration: none;
}
.nanopopup-success .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-success .input-popup label {
  text-align: center;
}
.nanopopup-success .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--popup-success);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-success .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-success .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--popup-success);
  font-size: 18px;
  color: var(--popup-success);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-success .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--popup-success);
}
.nanopopup-success .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-success .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--popup-success);
  color: var(--popup-success) !important;
  float: left;
  width: 12px;
}
.nanopopup-success .input-popup input[type="checkbox"]:checked {
  background: var(--popup-success);
}
.nanopopup-success .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-success .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--popup-success) !important;
}
.nanopopup-success .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-success .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-success .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-success .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-success .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-success .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-success .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-success .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-success .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--popup-success);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-success .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-success .button-group .action-button:not(.troubadour-button):hover {
  color: var(--popup-success) !important;
  opacity: 1;
}
.nanopopup-success .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--popup-success);
  color: var(--popup-success);
}
.nanopopup-success .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-success .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-success .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-success .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-success .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-success .button-group .cancel-button:hover {
  color: var(--popup-success) !important;
}
.nanopopup-success[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-success[data-theme="troubadour"] .close-container i,
.nanopopup-success[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-success[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-success[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-success[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-success[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-success[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-warning {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-warning.inactivity-popup {
  z-index: 350;
}
.nanopopup-warning.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-warning .close-button {
  color: var(--popup-warning);
}
.nanopopup-warning .video-row {
  padding: 0 5%;
}
.nanopopup-warning .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-warning .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-warning.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-warning.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-warning.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-warning.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-warning.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-warning.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-warning.reading-challenge-edit .input-popup input,
.nanopopup-warning.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-warning.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-warning.no-event {
  pointer-events: none;
}
.nanopopup-warning .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-warning .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-warning .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-warning .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-warning .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-warning .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-warning .inline-button {
  background: var(--popup-warning);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-warning .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--popup-warning);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-warning .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--popup-warning);
  text-transform: none;
}
.nanopopup-warning .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-warning .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-warning .text-justify {
  text-align: justify !important;
}
.nanopopup-warning .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-warning .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-warning a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--popup-warning);
}
.nanopopup-warning a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-warning a.troubadour-button {
  text-decoration: none;
}
.nanopopup-warning .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-warning .input-popup label {
  text-align: center;
}
.nanopopup-warning .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--popup-warning);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-warning .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-warning .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--popup-warning);
  font-size: 18px;
  color: var(--popup-warning);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-warning .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--popup-warning);
}
.nanopopup-warning .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-warning .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--popup-warning);
  color: var(--popup-warning) !important;
  float: left;
  width: 12px;
}
.nanopopup-warning .input-popup input[type="checkbox"]:checked {
  background: var(--popup-warning);
}
.nanopopup-warning .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-warning .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--popup-warning) !important;
}
.nanopopup-warning .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-warning .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-warning .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-warning .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-warning .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-warning .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-warning .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-warning .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-warning .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--popup-warning);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-warning .button-group .action-button:not(.troubadour-button):hover {
  color: var(--popup-warning) !important;
  opacity: 1;
}
.nanopopup-warning .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--popup-warning);
  color: var(--popup-warning);
}
.nanopopup-warning .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-warning .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-warning .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-warning .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-warning .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-warning .button-group .cancel-button:hover {
  color: var(--popup-warning) !important;
}
.nanopopup-warning[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-warning[data-theme="troubadour"] .close-container i,
.nanopopup-warning[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-warning[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-warning[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-warning[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-warning[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-warning[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-current {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-current.inactivity-popup {
  z-index: 350;
}
.nanopopup-current.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-current .close-button {
  color: var(--button-uc-current);
}
.nanopopup-current .video-row {
  padding: 0 5%;
}
.nanopopup-current .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-current .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-current.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-current.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-current.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-current.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-current.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-current.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-current.reading-challenge-edit .input-popup input,
.nanopopup-current.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-current.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-current.no-event {
  pointer-events: none;
}
.nanopopup-current .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-current .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-current .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-current .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-current .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-current .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-current .inline-button {
  background: var(--button-uc-current);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-current .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--button-uc-current);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-current .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--button-uc-current);
  text-transform: none;
}
.nanopopup-current .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-current .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-current .text-justify {
  text-align: justify !important;
}
.nanopopup-current .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-current .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-current a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--button-uc-current);
}
.nanopopup-current a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-current a.troubadour-button {
  text-decoration: none;
}
.nanopopup-current .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-current .input-popup label {
  text-align: center;
}
.nanopopup-current .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--button-uc-current);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-current .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-current .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--button-uc-current);
  font-size: 18px;
  color: var(--button-uc-current);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-current .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--button-uc-current);
}
.nanopopup-current .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-current .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--button-uc-current);
  color: var(--button-uc-current) !important;
  float: left;
  width: 12px;
}
.nanopopup-current .input-popup input[type="checkbox"]:checked {
  background: var(--button-uc-current);
}
.nanopopup-current .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-current .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--button-uc-current) !important;
}
.nanopopup-current .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-current .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-current .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-current .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-current .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-current .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-current .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-current .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-current .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--button-uc-current);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-current .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-current .button-group .action-button:not(.troubadour-button):hover {
  color: var(--button-uc-current) !important;
  opacity: 1;
}
.nanopopup-current .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--button-uc-current);
  color: var(--button-uc-current);
}
.nanopopup-current .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-current .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-current .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-current .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-current .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-current .button-group .cancel-button:hover {
  color: var(--button-uc-current) !important;
}
.nanopopup-current[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-current[data-theme="troubadour"] .close-container i,
.nanopopup-current[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-current[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-current[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-current[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-current[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-current[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-resend {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-resend.inactivity-popup {
  z-index: 350;
}
.nanopopup-resend.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-resend .close-button {
  color: var(--button-uc-resend);
}
.nanopopup-resend .video-row {
  padding: 0 5%;
}
.nanopopup-resend .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-resend .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-resend.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-resend.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-resend.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-resend.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-resend.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-resend.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-resend.reading-challenge-edit .input-popup input,
.nanopopup-resend.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-resend.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-resend.no-event {
  pointer-events: none;
}
.nanopopup-resend .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-resend .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-resend .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-resend .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-resend .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-resend .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-resend .inline-button {
  background: var(--button-uc-resend);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-resend .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--button-uc-resend);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-resend .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--button-uc-resend);
  text-transform: none;
}
.nanopopup-resend .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-resend .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-resend .text-justify {
  text-align: justify !important;
}
.nanopopup-resend .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-resend .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-resend a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--button-uc-resend);
}
.nanopopup-resend a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-resend a.troubadour-button {
  text-decoration: none;
}
.nanopopup-resend .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-resend .input-popup label {
  text-align: center;
}
.nanopopup-resend .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--button-uc-resend);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-resend .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-resend .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--button-uc-resend);
  font-size: 18px;
  color: var(--button-uc-resend);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-resend .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--button-uc-resend);
}
.nanopopup-resend .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-resend .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--button-uc-resend);
  color: var(--button-uc-resend) !important;
  float: left;
  width: 12px;
}
.nanopopup-resend .input-popup input[type="checkbox"]:checked {
  background: var(--button-uc-resend);
}
.nanopopup-resend .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-resend .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--button-uc-resend) !important;
}
.nanopopup-resend .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-resend .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-resend .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-resend .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-resend .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-resend .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-resend .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-resend .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-resend .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--button-uc-resend);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-resend .button-group .action-button:not(.troubadour-button):hover {
  color: var(--button-uc-resend) !important;
  opacity: 1;
}
.nanopopup-resend .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--button-uc-resend);
  color: var(--button-uc-resend);
}
.nanopopup-resend .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-resend .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-resend .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-resend .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-resend .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-resend .button-group .cancel-button:hover {
  color: var(--button-uc-resend) !important;
}
.nanopopup-resend[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-resend[data-theme="troubadour"] .close-container i,
.nanopopup-resend[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-resend[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-resend[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-resend[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-resend[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-resend[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-done {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.nanopopup-done.inactivity-popup {
  z-index: 350;
}
.nanopopup-done.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-done .close-button {
  color: var(--button-uc-done);
}
.nanopopup-done .video-row {
  padding: 0 5%;
}
.nanopopup-done .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-done .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-done.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-done.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-done.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-done.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-done.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-done.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-done.reading-challenge-edit .input-popup input,
.nanopopup-done.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-done.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-done.no-event {
  pointer-events: none;
}
.nanopopup-done .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-done .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-done .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-done .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-done .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-done .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-done .inline-button {
  background: var(--button-uc-done);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-done .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--button-uc-done);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-done .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--button-uc-done);
  text-transform: none;
}
.nanopopup-done .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-done .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-done .text-justify {
  text-align: justify !important;
}
.nanopopup-done .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-done .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-done a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--button-uc-done);
}
.nanopopup-done a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-done a.troubadour-button {
  text-decoration: none;
}
.nanopopup-done .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-done .input-popup label {
  text-align: center;
}
.nanopopup-done .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--button-uc-done);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-done .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-done .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--button-uc-done);
  font-size: 18px;
  color: var(--button-uc-done);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-done .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--button-uc-done);
}
.nanopopup-done .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-done .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--button-uc-done);
  color: var(--button-uc-done) !important;
  float: left;
  width: 12px;
}
.nanopopup-done .input-popup input[type="checkbox"]:checked {
  background: var(--button-uc-done);
}
.nanopopup-done .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-done .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--button-uc-done) !important;
}
.nanopopup-done .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-done .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-done .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-done .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-done .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-done .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-done .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-done .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-done .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--button-uc-done);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-done .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-done .button-group .action-button:not(.troubadour-button):hover {
  color: var(--button-uc-done) !important;
  opacity: 1;
}
.nanopopup-done .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--button-uc-done);
  color: var(--button-uc-done);
}
.nanopopup-done .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-done .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-done .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-done .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-done .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-done .button-group .cancel-button:hover {
  color: var(--button-uc-done) !important;
}
.nanopopup-done[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-done[data-theme="troubadour"] .close-container i,
.nanopopup-done[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-done[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-done[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-done[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-done[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-done[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
.nanopopup-large {
  max-width: 1280px !important;
  min-width: 950px !important;
}
.nanopopup-scroll {
  overflow: hidden !important;
}
.nanopopup-scroll .scrollable {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 40vh;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.nanopopup-scroll .scrollable::-webkit-scrollbar {
  width: 4px;
}
.nanopopup-scroll .scrollable::-webkit-scrollbar-thumb {
  background-color: var(--primary-text-1);
  border-radius: 5px;
}
.nanopopup-scroll .scrollable::-webkit-scrollbar-track {
  background-color: var(--default-bg);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .nanopopup-scroll .scrollable {
    scrollbar-color: var(--primary-text-1) var(--default-bg);
    scrollbar-width: thin;
  }
}
@media (max-width: 1280px) {
  .nanopopup {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-important {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-success {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-warning {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-current {
    max-width: 80%;
    min-width: 80%;
  }
  .nanopopup-done {
    max-width: 80%;
    min-width: 80%;
  }
}
@media (max-width: 992px) {
  .nanopopup,
  .nanopopup-large,
  .nanopopup-important,
  .nanopopup-success,
  .nanopopup-warning,
  .nanopopup-current,
  .nanopopup-done {
    max-width: 80% !important;
    min-width: 80% !important;
    padding: 22px 20px 32px 20px !important;
  }
  .nanopopup .button-group,
  .nanopopup-large .button-group,
  .nanopopup-important .button-group,
  .nanopopup-success .button-group,
  .nanopopup-warning .button-group,
  .nanopopup-current .button-group,
  .nanopopup-done .button-group {
    flex-wrap: wrap;
  }
  .nanopopup-done .general-comment-container .general-comment {
    height: 100px !important;
  }
  .nanopopup-done .general-history-container .general-history-panel {
    height: 100px !important;
  }
  #tutorial-popup-skip,
  #tutorial-popup-close {
    display: none;
  }
  #tutorial-popup {
    display: none !important;
  }
  #tutorial-popup + .nanopopup-backpanel {
    display: none;
  }
}
@media (max-width: 767px) {
  .nanopopup-large,
  .nanopopup-important,
  .nanopopup-success,
  .nanopopup-warning,
  .nanopopup {
    max-width: 80% !important;
    min-width: 80% !important;
    max-height: 80vh !important;
    overflow-y: scroll;
  }
}
@media (max-width: 480px) {
  .nanopopup {
    height: 90vh !important;
    max-height: unset !important;
    min-width: 90% !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
  }
  .nanopopup .title {
    margin-top: 35px;
    font-size: 2em;
  }
  .nanopopup .main-text {
    font-size: 1.1em;
  }
  .nanopopup .second-text {
    font-size: 1.1em;
  }
  .nanopopup .button-group {
    flex-direction: column;
  }
  .nanopopup .button-group .action-button,
  .nanopopup .button-group .cancel-button {
    min-width: 60%;
    max-width: 90%;
    margin-top: 5px;
  }
  .nanopopup .close-container {
    right: 15px;
    top: 10px;
  }
  .nanopopup .close-container.display-left {
    right: auto;
    left: 5px;
  }
}
.nanopopup-premium {
  display: none;
  padding: 40px;
  position: fixed;
  top: 50%;
  left: 50%;
  opacity: 0;
  z-index: 325;
  width: 80%;
  max-width: 1000px;
  min-width: 50vw;
  max-height: calc(100vh - 50px);
  transform: translate(-50%, -50%);
  background-color: var(--default-bg);
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
  padding: 20px 20px !important;
  background-color: var(--default-bg-2);
  min-width: 300px !important;
  max-width: 800px !important;
  overflow: visible;
}
.nanopopup-premium.inactivity-popup {
  z-index: 350;
}
.nanopopup-premium.display {
  display: block;
  position: fixed;
  opacity: 1;
}
.nanopopup-premium .close-button {
  color: var(--troubadour-main);
}
.nanopopup-premium .video-row {
  padding: 0 5%;
}
.nanopopup-premium .video-row .video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
}
.nanopopup-premium .video-row .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 21px;
  border: 5px solid var(--border);
}
.nanopopup-premium.reading-challenge-edit {
  padding: 0 !important;
  width: 70%;
  max-width: 70%;
  max-height: 95%;
}
.nanopopup-premium.reading-challenge-edit .input-popup {
  padding: 0 50px;
  overflow-y: scroll;
  max-height: 40vh;
}
.nanopopup-premium.reading-challenge-edit .input-popup > * {
  margin-bottom: 15px;
}
.nanopopup-premium.reading-challenge-edit .button-group {
  padding: 0 50px 62px 50px !important;
}
.nanopopup-premium.reading-challenge-edit label {
  font-family: Lato, sans-serif;
  color: var(--default-color);
  font-weight: normal;
  font-size: 15px;
  padding: 0 0 9px 0 !important;
  margin: 0 !important;
  font-style: normal;
}
.nanopopup-premium.reading-challenge-edit label .not-editable-text {
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.6;
  font-weight: bolder;
}
.nanopopup-premium.reading-challenge-edit .input-popup input,
.nanopopup-premium.reading-challenge-edit textarea {
  font-size: 13px !important;
  line-height: 1.42857143 !important;
  color: #333 !important;
  text-align: left !important;
  font-style: normal;
}
.nanopopup-premium.reading-challenge-edit .editable-text {
  border: 2px solid var(--primary-text-1) !important;
  font-weight: bolder;
  opacity: 1;
}
.nanopopup-premium.no-event {
  pointer-events: none;
}
.nanopopup-premium .display-image {
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 200px;
  border-radius: 21px 21px 0 0;
}
.nanopopup-premium .close-container {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
.nanopopup-premium .close-container.display-left {
  right: auto;
  left: 15px;
}
.nanopopup-premium .close-container i[data-fa-i2svg] {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 20px;
  margin: 0;
}
.nanopopup-premium .close-container i[data-fa-i2svg]:hover {
  color: var(--default-color);
}
.nanopopup-premium .close-container i[data-fa-i2svg]:active {
  opacity: 0.4;
}
.nanopopup-premium .inline-button {
  background: var(--troubadour-main);
  color: var(--default-color-2) !important;
  padding: 12px !important;
  border-radius: 6px;
  width: 80%;
  display: block;
  margin-top: 15px;
  margin-left: 10%;
  text-align: center;
}
.nanopopup-premium .title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 42px);
  color: var(--troubadour-main);
  text-transform: none;
  padding: 0 40px;
}
.nanopopup-premium .subtitle {
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--troubadour-main);
  text-transform: none;
}
.nanopopup-premium .main-text {
  color: var(--default-color-8);
  text-align: left;
  padding: 5px 20px;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 17px);
}
.nanopopup-premium .main-text a {
  color: var(--primary-text-1);
  opacity: 1 !important;
}
.nanopopup-premium .text-justify {
  text-align: justify !important;
}
.nanopopup-premium .error-section {
  display: flex;
  justify-content: center;
}
.nanopopup-premium .second-text {
  color: var(--default-color);
  text-align: left;
  padding: 2px 20px;
  font-weight: 700;
  font-size: 16px;
}
.nanopopup-premium a {
  font-weight: bolder;
  opacity: 0.9;
  color: var(--troubadour-main);
}
.nanopopup-premium a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-premium a.troubadour-button {
  text-decoration: none;
}
.nanopopup-premium .input-popup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 15px 0;
  flex-direction: column;
}
.nanopopup-premium .input-popup label {
  text-align: center;
}
.nanopopup-premium .input-popup a {
  text-align: left !important;
  padding: 15px 10px 10px 10px;
  color: var(--troubadour-main);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-weight: bolder;
  opacity: 0.9;
}
.nanopopup-premium .input-popup a:hover {
  opacity: 1;
  text-decoration: none;
}
.nanopopup-premium .input-popup input:not([type="checkbox"]) {
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid var(--troubadour-main);
  font-size: 18px;
  color: var(--troubadour-main);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.nanopopup-premium .input-popup input:not([type="checkbox"])::placeholder {
  opacity: 0.5;
  color: var(--troubadour-main);
}
.nanopopup-premium .input-popup input:not([type="checkbox"]):focus::placeholder {
  opacity: 0.2;
}
.nanopopup-premium .input-popup input[type="checkbox"] {
  border-radius: 4px;
  padding: 9px;
  margin: 12px 0;
  border: 2px solid var(--troubadour-main);
  color: var(--troubadour-main) !important;
  float: left;
  width: 12px;
}
.nanopopup-premium .input-popup input[type="checkbox"]:checked {
  background: var(--troubadour-main);
}
.nanopopup-premium .input-popup label {
  padding: 9px;
  margin-left: 15px;
}
.nanopopup-premium .input-popup p {
  margin: 0;
  float: left;
  padding: 12px;
  font-size: 16px;
  color: var(--troubadour-main) !important;
}
.nanopopup-premium .input-popup .clipboard-input {
  margin: 5px 0 10px 0;
  background: var(--default-bg);
  border: 1px solid var(--border);
  padding: 21px;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}
.nanopopup-premium .input-popup .clipboard-input p {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: var(--default-color);
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 10px;
  width: 100%;
  opacity: 0.8;
}
.nanopopup-premium .input-popup .clipboard-input:hover {
  background: var(--default-bg);
}
.nanopopup-premium .input-popup .clipboard-input:active {
  background: var(--default-bg);
}
.nanopopup-premium .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 20px;
}
.nanopopup-premium .button-group .button-absolute {
  position: absolute !important;
}
.nanopopup-premium .button-group .button-error {
  background-color: var(--content-invalid) !important;
}
.nanopopup-premium .button-group .button-success {
  background-color: var(--valid) !important;
}
.nanopopup-premium .button-group .button-disable {
  pointer-events: none !important;
}
.nanopopup-premium .button-group .action-button:not(.troubadour-button) {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: var(--troubadour-main);
  border: 2px solid rgba(0, 0, 0, 0);
  color: var(--default-color-2);
}
.nanopopup-premium .button-group .action-button:not(.troubadour-button) .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-premium .button-group .action-button:not(.troubadour-button):hover {
  opacity: 0.5;
}
.nanopopup-premium .button-group .action-button:not(.troubadour-button):focus {
  outline: none !important;
}
.nanopopup-premium .button-group .action-button:not(.troubadour-button):active {
  opacity: 0.6 !important;
}
.nanopopup-premium .button-group .action-button:not(.troubadour-button).disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-premium .button-group .action-button:not(.troubadour-button):hover {
  color: var(--troubadour-main) !important;
  opacity: 1;
}
.nanopopup-premium .button-group .cancel-button {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  min-width: 300px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.24s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 1;
  background: none;
  border: 2px solid var(--troubadour-main);
  color: var(--troubadour-main);
}
.nanopopup-premium .button-group .cancel-button .inner-icon {
  font-size: 18px;
  opacity: 0;
  position: relative;
}
.nanopopup-premium .button-group .cancel-button:hover {
  opacity: 0.5;
}
.nanopopup-premium .button-group .cancel-button:focus {
  outline: none !important;
}
.nanopopup-premium .button-group .cancel-button:active {
  opacity: 0.6 !important;
}
.nanopopup-premium .button-group .cancel-button.disabled {
  background-color: var(--disabled) !important;
  color: var(--default-color-2) !important;
  pointer-events: none;
}
.nanopopup-premium .button-group .cancel-button:hover {
  color: var(--troubadour-main) !important;
}
.nanopopup-premium[data-theme="troubadour"] {
  background-color: var(--troubadour-main-15);
}
.nanopopup-premium[data-theme="troubadour"] .close-container i,
.nanopopup-premium[data-theme="troubadour"] .close-container svg {
  color: var(--troubadour-main-5);
}
.nanopopup-premium[data-theme="troubadour"] .inline-button {
  background: var(--troubadour-main-5);
}
.nanopopup-premium[data-theme="troubadour"] .title {
  color: var(--troubadour-main);
}
.nanopopup-premium[data-theme="troubadour"] .subtitle {
  color: var(--troubadour-main);
}
.nanopopup-premium[data-theme="troubadour"] .main-text a {
  color: var(--troubadour-main-5);
}
.nanopopup-premium[data-theme="troubadour"] a {
  color: var(--troubadour-main-5);
}
@media screen and (min-width: 800px) and (min-height: 600px) {
  .nanopopup-premium {
    padding: 40px 60px !important;
  }
}
.nanopopup-premium .close-container {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--default-bg);
  left: 15px;
  top: 15px;
  box-shadow: var(--dropshadow);
}
.nanopopup-premium .close-container i,
.nanopopup-premium .close-container svg {
  font-size: 20px;
  color: var(--troubadour-main-12);
}
.nanopopup-premium .close-container:hover {
  background-color: var(--troubadour-main-12);
}
.nanopopup-premium .close-container:hover i,
.nanopopup-premium .close-container:hover svg {
  color: var(--default-bg);
}
.nanopopup-premium .visual {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  width: 10vw;
  min-width: 100px;
  margin: 0 auto 30px;
  background-color: var(--troubadour-main-16);
  border-radius: 50%;
  max-width: 200px;
}
.nanopopup-premium .visual img {
  width: 40%;
}
.nanopopup-premium h2 {
  color: var(--troubadour-main);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.1em;
  text-transform: none;
  text-align: center;
  margin: 0 0 30px;
}
.nanopopup-premium h2.small-title {
  font-size: 23px;
  line-height: 1.2em;
}
.nanopopup-premium ul,
.nanopopup-premium ol {
  list-style-type: decimal;
  padding: 0 0 0 20px;
}
.nanopopup-premium p,
.nanopopup-premium li {
  color: var(--default-color-4);
  font-size: clamp(14px, 3vw, 23px);
  line-height: 1.2em;
}
.nanopopup-premium p {
  margin: 0 0 30px;
}
.nanopopup-premium li {
  margin: 0 0 5px;
}
.nanopopup-premium .scrollable-content {
  padding: 0 10px 0 0;
  height: 50vh;
  max-height: 250px !important;
  overflow-x: hidden;
  overflow-y: auto;
}
.nanopopup-premium .scrollable-content::-webkit-scrollbar {
  width: 8px;
}
.nanopopup-premium .scrollable-content::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main);
  border-radius: 5px;
}
.nanopopup-premium .scrollable-content::-webkit-scrollbar-track {
  background-color: var(--default-bg-2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .nanopopup-premium .scrollable-content {
    scrollbar-color: var(--troubadour-main) var(--default-bg-2);
    scrollbar-width: thin;
  }
}
.nanopopup-premium .button-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 30px 0 0;
  padding: 0;
  gap: 20px;
}
.nanopopup-premium[data-popup-size="large"] {
  max-width: 800px !important;
}
.nanopopup-premium[data-popup-size="large"] .button-group {
  justify-content: center;
}

/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/frontend/resources/less/Troubadour/Babillard/popups/ShareBabillardPopup.less ***!
  \************************************************************************************************************************************************************************************************************************************/
.nanopopup.share-babillard-popup,
.nanopopup.share-uc-popup {
  background-color: var(--babillard-color-10);
  overflow: hidden;
}
.nanopopup.share-babillard-popup .popup-section,
.nanopopup.share-uc-popup .popup-section {
  flex-direction: column;
}
.nanopopup.share-babillard-popup .close-container,
.nanopopup.share-uc-popup .close-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--babillard-color-9);
  right: 10px;
  top: 10px;
  z-index: 20;
}
.nanopopup.share-babillard-popup .close-container i,
.nanopopup.share-uc-popup .close-container i,
.nanopopup.share-babillard-popup .close-container svg,
.nanopopup.share-uc-popup .close-container svg {
  font-size: 25px;
  color: var(--default-color-2);
}
.nanopopup.share-babillard-popup .close-container:hover,
.nanopopup.share-uc-popup .close-container:hover {
  background-color: var(--default-color-2);
}
.nanopopup.share-babillard-popup .close-container:hover i,
.nanopopup.share-uc-popup .close-container:hover i,
.nanopopup.share-babillard-popup .close-container:hover svg,
.nanopopup.share-uc-popup .close-container:hover svg {
  color: var(--babillard-color-9);
}
@media screen and (max-width: 799px) {
  .nanopopup.share-babillard-popup .close-container,
  .nanopopup.share-uc-popup .close-container {
    transform: scale(75%);
  }
}
.nanopopup.share-babillard-popup .share-babillard-popup-content,
.nanopopup.share-uc-popup .share-babillard-popup-content {
  position: relative;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content h2,
.nanopopup.share-uc-popup .share-babillard-popup-content h2 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
  color: var(--babillard-color-9);
  font-weight: 800;
  text-transform: none;
  margin: 0 30px 1em 0;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content h2 span,
.nanopopup.share-uc-popup .share-babillard-popup-content h2 span {
  display: inline;
  font-size: clamp(26px, 3vw, 40px);
  line-height: inherit;
  color: var(--babillard-color-9);
  font-style: italic;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content h2 span *,
.nanopopup.share-uc-popup .share-babillard-popup-content h2 span * {
  display: inline;
  font-size: clamp(26px, 3vw, 40px);
  line-height: inherit;
  color: var(--babillard-color-9);
  font-style: italic;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content h3,
.nanopopup.share-uc-popup .share-babillard-popup-content h3 {
  font-size: clamp(18px, 3vw, 23px);
  line-height: 27px;
  color: var(--babillard-color-11);
  font-weight: 500;
  text-transform: none;
  margin: 0 0 1em;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content p,
.nanopopup.share-uc-popup .share-babillard-popup-content p {
  color: var(--babillard-color-11);
  font-size: clamp(14px, 3vw, 18px);
  line-height: 22px;
  font-weight: 500;
  margin: 0 0 0.8em;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .challenge-share-link,
.nanopopup.share-uc-popup .share-babillard-popup-content .challenge-share-link {
  padding: 10px;
  background-color: var(--default-color-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .action-buttons,
.nanopopup.share-uc-popup .share-babillard-popup-content .action-buttons {
  margin: 2em 0 20px;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .share-babillard-main,
.nanopopup.share-uc-popup .share-babillard-popup-content .share-babillard-main {
  padding: 0 20px;
}
@media screen and (min-width: 800px) {
  .nanopopup.share-babillard-popup .share-babillard-popup-content .share-babillard-main,
  .nanopopup.share-uc-popup .share-babillard-popup-content .share-babillard-main {
    padding: 0 40px 0 20%;
  }
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .share-babillard-main .note p,
.nanopopup.share-uc-popup .share-babillard-popup-content .share-babillard-main .note p {
  color: var(--troubadour-main-5);
  font-size: clamp(16px, 2vw, 18px);
  font-style: normal;
  line-height: 1.2em;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .share-babillard-main .note p:last-of-type,
.nanopopup.share-uc-popup .share-babillard-popup-content .share-babillard-main .note p:last-of-type {
  font-size: clamp(12px, 2vw, 14px);
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .share-babillard-disclaimer,
.nanopopup.share-uc-popup .share-babillard-popup-content .share-babillard-disclaimer {
  margin: 0 6vw;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .share-babillard-disclaimer hr,
.nanopopup.share-uc-popup .share-babillard-popup-content .share-babillard-disclaimer hr {
  width: 100%;
  height: 1px;
  border: none;
  background-color: var(--babillard-color-12);
  margin: 0 0 1em;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .share-babillard-disclaimer p,
.nanopopup.share-uc-popup .share-babillard-popup-content .share-babillard-disclaimer p {
  font-size: 13px;
  line-height: 15px;
  font-style: italic;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content .footer-actions,
.nanopopup.share-uc-popup .share-babillard-popup-content .footer-actions {
  margin: 0 4vw;
  text-align: right;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content.--not-shared::before,
.nanopopup.share-uc-popup .share-babillard-popup-content.--not-shared::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: unset;
  transform: translateY(-50%);
  width: 14vw;
  min-width: 80px;
  max-width: 191px;
  aspect-ratio: 191 / 410;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-squirrel-happy-side.png");
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 799px) {
  .nanopopup.share-babillard-popup .share-babillard-popup-content.--not-shared::before,
  .nanopopup.share-uc-popup .share-babillard-popup-content.--not-shared::before {
    display: none;
  }
}
.nanopopup.share-babillard-popup .share-babillard-popup-content.--not-shared .action-buttons,
.nanopopup.share-uc-popup .share-babillard-popup-content.--not-shared .action-buttons {
  text-align: center;
}
.nanopopup.share-babillard-popup .share-babillard-popup-content.--shared::after,
.nanopopup.share-uc-popup .share-babillard-popup-content.--shared::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: unset;
  transform: translateY(-50%);
  width: 14vw;
  min-width: 80px;
  max-width: 160px;
  aspect-ratio: 182 / 399;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-squirrel-thumb-side.png");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
@media screen and (max-width: 799px) {
  .nanopopup.share-babillard-popup .share-babillard-popup-content.--shared::after,
  .nanopopup.share-uc-popup .share-babillard-popup-content.--shared::after {
    top: unset;
    bottom: -70px;
    transform: translateY(0);
  }
}
.nanopopup.share-babillard-popup .share-babillard-popup-content.--shared .action-buttons,
.nanopopup.share-uc-popup .share-babillard-popup-content.--shared .action-buttons {
  text-align: left;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.share-babillard-popup,
  .nanopopup.share-uc-popup {
    padding: 30px 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: auto !important;
    min-width: 350px !important;
    max-width: 1010px !important;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/frontend/resources/less/Family/FamilyOnboarding/popups/FamilySubRequiredPopup.less ***!
  \******************************************************************************************************************************************************************************************************************************************/
.nanopopup.family-sub-required-popup {
  background-color: var(--tutorial-color-3);
  overflow: hidden;
}
.nanopopup.family-sub-required-popup[data-feature-name="create-story"] .is-edit-story {
  display: none;
}
.nanopopup.family-sub-required-popup[data-feature-name="create-story"] .is-create-story {
  display: block;
}
.nanopopup.family-sub-required-popup[data-feature-name="edit-story"] .is-edit-story {
  display: block;
}
.nanopopup.family-sub-required-popup[data-feature-name="edit-story"] .is-create-story {
  display: none;
}
.nanopopup.family-sub-required-popup .close-container {
  background-color: var(--tutorial-color-9);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  left: 15px;
  top: 15px;
  transition: all 250ms;
  z-index: 10;
}
.nanopopup.family-sub-required-popup .close-container i,
.nanopopup.family-sub-required-popup .close-container svg {
  font-size: 25px;
  color: var(--default-color-2);
}
.nanopopup.family-sub-required-popup .close-container:hover {
  filter: brightness(1.3);
}
@media screen and (max-width: 599px) {
  .nanopopup.family-sub-required-popup .close-container {
    left: 0;
    top: 0;
    background: none;
    width: 40px;
    height: 40px;
  }
  .nanopopup.family-sub-required-popup .close-container i,
  .nanopopup.family-sub-required-popup .close-container svg {
    font-size: 25px;
    color: var(--tutorial-color-9);
  }
}
.nanopopup.family-sub-required-popup .popup-section {
  display: flex;
  flex-flow: row nowrap;
  font-size: 20px;
  line-height: 1.2em;
  max-width: 640px;
  max-height: 500px;
  aspect-ratio: 640 / 500;
}
.nanopopup.family-sub-required-popup .popup-section .popup-visual {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  flex: 1 1 47%;
  max-height: 500px;
  padding: 5px 0 5px 7px;
  aspect-ratio: 300 / 500;
}
.nanopopup.family-sub-required-popup .popup-section .popup-visual img {
  max-width: 100%;
  aspect-ratio: 300 / 500;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1 1 53%;
  max-height: 500px;
  aspect-ratio: 340 / 500;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-title {
  padding: 3vh 20px 2vh;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-title h2 {
  color: var(--tutorial-color-9);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.3em;
  text-transform: none;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text {
  flex: 1;
  padding: 0 20px;
  margin: 0 10px 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text::-webkit-scrollbar {
  width: 6px;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text::-webkit-scrollbar-thumb {
  background-color: var(--default-color-3);
  border-radius: 5px;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text::-webkit-scrollbar-track {
  background-color: var(--default-color-2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text {
    scrollbar-color: var(--default-color-3) var(--default-color-2);
    scrollbar-width: thin;
  }
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text h3 {
  color: var(--tutorial-color-9);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2em;
  text-transform: none;
  margin: 0 0 20px;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text p {
  color: var(--default-color-2);
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.4em;
  font-weight: 400;
  margin: 0 0 10px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text ul {
  list-style-type: none;
  padding: 0;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text ul li {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  padding: 0 0 0 36px;
  color: var(--tutorial-color-9);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0 0 15px;
  min-height: 26px;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text ul li::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  aspect-ratio: 1 / 1;
  width: 26px;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-check-green-round.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text label {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  color: var(--tutorial-color-9);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0 0 5px;
  gap: 5px;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text input[type="text"] {
  color: var(--tutorial-color-9);
  width: 100%;
  border: 1px solid var(--tutorial-color-9);
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text input[type="text"]:focus-visible {
  outline: none;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .button-group {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: auto 0 0 0;
  padding: 0 0 30px;
  gap: 20px;
}
.nanopopup.family-sub-required-popup .popup-section .popup-info .button-group a:not(.troubadour-button) {
  color: var(--default-color-2);
  text-align: center;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 800;
  line-height: 1.2em;
  text-decoration-line: underline;
}
@media screen and (max-width: 599px) {
  .nanopopup.family-sub-required-popup .popup-section {
    max-height: 90vh;
    aspect-ratio: unset;
  }
  .nanopopup.family-sub-required-popup .popup-section .popup-visual {
    display: none;
  }
  .nanopopup.family-sub-required-popup .popup-section .popup-info {
    flex: 1 1 100%;
    aspect-ratio: unset;
    padding: 0;
  }
  .nanopopup.family-sub-required-popup .popup-section .popup-info .popup-title {
    padding: 40px 40px 30px;
  }
  .nanopopup.family-sub-required-popup .popup-section .popup-info .popup-text {
    padding: 0 20px 30px 40px;
  }
}
.nanopopup.family-sub-required-popup .family-sub-access-code .popup-info .popup-text {
  width: 100%;
  padding-right: 40px;
}
.nanopopup.family-sub-required-popup .family-sub-access-code .code-confirm-button {
  display: flex;
  margin: 0 0 0 auto;
}
.nanopopup.family-sub-required-popup .family-sub-activation .popup-info .popup-title h2 {
  color: var(--troubadour-main-17);
}
.nanopopup.family-sub-required-popup .family-sub-activation .popup-info .button-group {
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.family-sub-required-popup {
    padding: 0 !important;
    width: 90vw !important;
    height: unset !important;
    min-width: 300px !important;
    max-width: 640px !important;
    min-height: 200px !important;
    max-height: 500px !important;
  }
}


/*# sourceMappingURL=TroubadourChallengeTemplate.31c9032a99af9e3457d7.css.map*/