/*!********************************************************************************************************************************************************************************************************************!*\
  !*** 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/components/DeviceLimitation.less ***!
  \****************************************************************************************************************************************************************************************************************/
.full-page-message {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 10000;
  background-color: var(--troubadour-main-14);
  color: var(--default-color-2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}
.full-page-message .text-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
}
.full-page-message .text-container .title-image {
  display: inline-block;
  height: 30vh;
  margin-bottom: 20px;
}
.full-page-message .text-container .title {
  font-family: Sofia Pro, sans-serif;
  font-size: 18px;
  line-height: 18px;
  font-weight: 600;
  text-transform: initial;
  margin-bottom: 15px;
}
.full-page-message .text-container .subtitle {
  font-family: Sofia Pro, sans-serif;
  font-size: 18px;
  line-height: 18px;
  font-weight: 600;
  text-transform: initial;
  margin-bottom: 15px;
}
.full-page-message .text-container .small-text {
  font-family: Sofia Pro, sans-serif;
  font-size: 15px;
  line-height: 15px;
  font-weight: 400;
  text-transform: initial;
}
.full-page-message .text-container .link {
  font-family: Sofia Pro, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--default-color-2);
  text-decoration: none;
  margin-bottom: 5px;
}
.full-page-message .text-container .link img {
  filter: grayscale(1) brightness(26.5);
}
.full-page-message .text-container .action-buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.full-page-message .text-container .custom-logout-button {
  background-color: #fff;
  color: #000;
  font-family: Sofia Pro, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin: 20px 0;
  padding: 12px 25px;
  border-radius: 25px;
}
@media screen and (max-width: 767px) {
  .full-page-message .text-container .title {
    font-size: 20px;
    line-height: 24px;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Game/Construction/components/TextOverGameMenu.less ***!
  \*********************************************************************************************************************************************************************************************************************************************/
@keyframes menuOpenAnimation {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  85% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes menuCloseAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}
.text-over-game-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background: var(--default-bg-2);
  width: 100%;
  height: 100vh;
  z-index: 200;
}
.text-over-game-menu.opened {
  animation: menuOpenAnimation 200ms ease-in-out;
}
.text-over-game-menu.closed {
  animation: menuCloseAnimation 200ms ease-in-out;
}
.text-over-game-menu.no-drag .drag-button {
  display: none !important;
}
.text-over-game-menu.all-texts .dialog-button-container {
  display: none;
}
.text-over-game-menu .close-button {
  align-self: flex-start;
  margin: 20px 30px;
}
.text-over-game-menu .menu-container {
  position: fixed;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 5;
  padding-bottom: 35px;
}
.text-over-game-menu .menu-container.tablet-device {
  padding-bottom: 15px;
  padding-top: 15px;
}
.text-over-game-menu .menu-container .scroll-container {
  width: 100%;
  padding: 10px 50px 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: scroll;
  /* added css prefix for safari */
  overflow: hidden auto;
}
.text-over-game-menu .menu-container .scroll-container::-webkit-scrollbar {
  width: 8px;
}
.text-over-game-menu .menu-container .scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main);
  border-radius: 5px;
}
.text-over-game-menu .menu-container .scroll-container::-webkit-scrollbar-track {
  background-color: var(--input-border);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-over-game-menu .menu-container .scroll-container {
    scrollbar-color: var(--troubadour-main) var(--input-border);
    scrollbar-width: thin;
  }
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry {
  width: calc(100% - 100px);
  max-width: 1200px;
  transition: all 350ms !important;
  min-height: 150px;
  margin: 15px auto;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry .inner-container {
  min-height: 150px;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry .inner-container .revision-panel {
  left: 50%;
  width: 100%;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry .inner-container [contenteditable="false"],
.text-over-game-menu .menu-container .scroll-container .asset-text-entry .inner-container [contenteditable="false"] > * {
  cursor: pointer;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"] {
  height: 100%;
  justify-content: flex-start;
  padding: 15px 20px;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"] .asset-text-entry {
  transition: all 350ms !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"] .asset-text-entry .text-container {
  min-height: 25vh !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] {
  padding-top: 35px;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .asset-text-entry .text-container {
  min-height: 30vh !important;
  max-height: 30vh !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .icon-wrapper {
  height: 75px;
  width: 75px;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] {
  height: 100%;
  justify-content: flex-start;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .asset-text-entry {
  min-height: 50vh !important;
  max-height: 50vh !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .asset-text-entry .text-container {
  min-height: 40vh !important;
  max-height: 40vh !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"] ~ .add-dialogue-button {
  display: none;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry[data-focus="true"] {
  height: initial !important;
  padding: 0 !important;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry[data-focus="true"] .drag-button {
  display: none;
}
.text-over-game-menu .menu-container .add-dialogue-button {
  width: 100%;
  padding: 20px 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.text-over-game-menu .menu-container .add-dialogue-button .inner {
  display: flex;
  padding: 15px;
  border: 2px dashed var(--ui-disabled-2);
  border-radius: 10px;
  background-color: var(--default-bg);
  width: calc(100% - 100px);
  max-width: 1200px;
  height: 134px;
  min-height: 134px;
  margin: 0 auto;
  cursor: pointer;
  box-shadow: var(--dropshadow2);
}
.text-over-game-menu .menu-container .add-dialogue-button:hover {
  filter: brightness(98%);
}
.text-over-game-menu .menu-container .add-dialogue-button:hover .icon-wrapper {
  filter: grayscale(0);
}
.text-over-game-menu .menu-container .add-dialogue-button .icon-wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--default-bg);
  border-radius: 5px;
  border: 2px solid var(--text-entry-icon-border);
  padding: 2px;
  margin-right: 20px;
  filter: grayscale(100%);
}
.text-over-game-menu .menu-container .add-dialogue-button .icon-wrapper .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  position: relative;
}
.text-over-game-menu .menu-container .add-dialogue-button .icon-wrapper .icon-container.flip {
  transform: rotateY(180deg);
}
.text-over-game-menu .menu-container .add-dialogue-button .icon-wrapper .icon-container .icon {
  position: absolute;
}
.text-over-game-menu .menu-container .add-dialogue-button .text {
  background-color: var(--text-entry-bg);
  color: var(--ui-disabled);
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(18px, 3vw, 36px);
  height: 100px;
  padding: 0 20px;
}
.text-over-game-menu[data-selection="all"] .scroll-container {
  padding: 20px 75px 0 75px;
}
.text-over-game-menu[data-selection="all"] .add-dialogue-button {
  display: none;
}
.text-over-game-menu:not(.no-drag) .text-entry .text-entry-button.drag-button {
  display: flex !important;
}
@media screen and (max-width: 768px) {
  .text-over-game-menu .menu-container .back-to-list-button-header {
    display: none;
  }
  .text-over-game-menu .menu-container .scroll-container {
    padding: 25px 20px 0 20px;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"],
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] {
    padding-top: 90px;
    justify-content: flex-start;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .over-game-text-entry,
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .over-game-text-entry {
    min-height: 40vh !important;
    max-height: 40vh !important;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .over-game-text-entry .comment-button.text-entry-button,
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .over-game-text-entry .comment-button.text-entry-button {
    transform: translate3d(87px, -100%, 10px);
    transition: all 1ms linear;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .over-game-text-entry .inner-container .left-section .back-to-list-button,
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .over-game-text-entry .inner-container .left-section .back-to-list-button {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(-10px, -70px, 10px);
    transition: all 1ms linear;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .over-game-text-entry .inner-container .text-container,
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .over-game-text-entry .inner-container .text-container {
    min-height: 30vh !important;
    max-height: 30vh !important;
  }
  .text-over-game-menu .menu-container .scroll-container .asset-text-entry {
    width: 100%;
    padding-left: 40px;
    padding-right: 20px;
  }
  .text-over-game-menu .menu-container .add-dialogue-button {
    margin-top: 25px;
    padding: 0 40px 0 60px;
  }
  .text-over-game-menu .menu-container .add-dialogue-button .inner {
    width: 100%;
  }
}

/*!*****************************************************************************************************************************************************************************************************!*\
  !*** 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/Quill.less ***!
  \*****************************************************************************************************************************************************************************************************/
.ql-toolbar {
  background-color: transparent;
  border: none !important;
  display: flex;
  flex-wrap: wrap;
}
.ql-container {
  background-color: var(--default-bg);
}
.ql-font-student {
  font-family: "Sofia Pro";
  display: inline;
  vertical-align: top;
  word-break: break-word;
}
.ql-font-teacher2 {
  font-family: inherit;
  display: inline;
  vertical-align: top;
  word-break: break-word;
}
.ql-font-teacher {
  font-family: "Amaranth";
  font-weight: bold;
  word-break: break-word;
}
.title-text-entry .ql-font-teacher {
  line-height: 44px !important;
  word-break: break-word;
}
.news-editor {
  color: var(--default-color);
}
.revision-panel {
  cursor: url("https://localhost/img/brush-black.svg") auto;
}
.revision-panel .ql-toolbar.ql-snow {
  border-top-right-radius: 10px;
}
.revision-panel .ql-snow {
  color: var(--default-color);
  padding: 0 8px;
}
.revision-panel .ql-stroke {
  stroke: var(--quill-color);
}
.revision-panel .ql-fill {
  fill: var(--quill-color);
}
.revision-panel .ql-toolbar button,
.revision-panel .ql-toolbar span [role="button"] {
  background-color: var(--quill-button-bg);
  color: var(--quill-color);
  border-radius: 4px;
}
.revision-panel .ql-toolbar .quick-review {
  position: relative;
}
.revision-panel .ql-toolbar .quick-review .cancel-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  color: red;
  display: none;
}
.revision-panel .ql-toolbar .quick-review .brush--black {
  background-image: var(--brush-black);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--blue {
  background-image: var(--brush-blue);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--red {
  background-image: var(--brush-red);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--green {
  background-image: var(--brush-green);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--darkviolet {
  background-image: var(--brush-darkviolet);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--orange {
  background-image: var(--brush-orange);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--lightslategrey {
  background-image: var(--brush-lightslategrey);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review.selected .brush--black {
  background-image: var(--brush-black);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--blue {
  background-image: var(--brush-blue);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--red {
  background-image: var(--brush-red);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--green {
  background-image: var(--brush-green);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--darkviolet {
  background-image: var(--brush--darkviolet);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--orange {
  background-image: var(--brush-orange);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--lightslategrey {
  background-image: var(--brush-lightslategrey);
}
.revision-panel .ql-toolbar .quick-review.selected .cancel-icon {
  display: block;
}
.revision-panel .ql-toolbar .ql-formats {
  margin: 5px auto 5px 0;
  padding: 0 10px;
}
.revision-panel .ql-toolbar .ql-formats:last-of-type {
  border: none;
}
.revision-panel .ql-toolbar .ql-color-label {
  opacity: 1;
  stroke-width: 3;
  stroke-linecap: square;
}
.revision-panel .ql-toolbar .ql-active {
  color: var(--quill-color-active);
  background-color: var(--quill-button-bg-active);
}
.revision-panel .ql-toolbar .ql-active .cancel-icon {
  display: block;
}
.revision-panel .ql-toolbar svg.fa {
  margin: 0;
  float: unset;
}
.revision-panel .ql-separator {
  border-right: 1px solid var(--line-separator);
  margin-right: 10px;
  padding-left: 10px;
}
.revision-panel .ql-container {
  background-color: var(--default-bg);
}
.revision-panel .ql-container .ql-editor {
  padding: 10px 15px;
  border-radius: 8px;
}
.revision-panel .ql-color .ql-picker-options {
  background-color: var(--default-bg);
  border-top: 1px solid var(--border);
  margin-top: 1px;
}
.revision-panel .ql-color .ql-picker-item {
  height: 20px;
  width: 20px;
  margin-right: 5px;
  border-radius: 4px;
  border: none;
  opacity: 0.8;
  box-shadow: 0 1px 5px var(--default-bg);
}
.revision-panel .ql-color .ql-picker-item:hover {
  opacity: 1;
  border: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 5px var(--default-darker-bg);
}
.revision-panel .ql-color[value="black"] {
  color: black !important;
}
.revision-panel .ql-color[value="red"] {
  color: red !important;
}
.revision-panel .ql-color[value="blue"] {
  color: blue !important;
}
.revision-panel .ql-color[value="green"] {
  color: green !important;
}
.revision-panel .ql-color[value="yellow"] {
  color: orange !important;
}
.revision-panel .ql-color[value="lightslategrey"] {
  color: lightslategrey !important;
}
.revision-panel .ql-color[value="darkviolet"] {
  color: darkviolet !important;
}
.ql-quick-review-formats {
  min-width: 175px;
}
.ql-quick-review-formats .tooltip-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  margin-top: 0;
  padding: 0 15px;
  max-height: 24px;
}
.ql-quick-review-formats .tooltip-wrapper i {
  position: initial;
  display: block;
  margin-left: 0;
  margin-top: 0;
  padding: 0;
}
.ql-quick-review-formats .tooltip-wrapper .tooltip {
  left: 50%;
}
.ql-normal-formats {
  min-width: 175px;
}
.quick-review-colors {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.quick-review-colors .color-block {
  height: 20px;
  width: 20px;
  margin-right: 5px;
  border-radius: 4px;
  border: none;
  opacity: 0.8;
  box-shadow: 0 1px 5px var(--default-bg);
}
.quick-review-colors .color-block:hover {
  opacity: 1;
  box-shadow: 0 1px 5px var(--default-darker-bg);
  cursor: pointer;
  border: 2px solid var(--border);
}
.quick-review-info {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-size: 14px;
  padding: 10px 0;
  text-align: center;
  font-weight: 600;
  color: var(--troubadour-main-5);
}
.quick-review-cancel {
  border: none;
  cursor: pointer;
  display: inline-block;
  height: 26px;
  padding: 4px 6px;
  width: 32px;
  border-radius: 4px;
  background-color: var(--quill-button-bg);
  color: var(--quill-color);
  float: none;
}
.quick-review-cancel:hover {
  color: var(--quill-color-active);
  background-color: var(--quill-button-bg-active);
}
.quick-review-cancel .cancel-black {
  background-image: var(--brush-black);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.quick-review-cancel .cancel-red {
  background-image: var(--brush-red);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.quick-review-cancel .cancel-green {
  background-image: var(--brush-green);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.quick-review-cancel .cancel-blue {
  background-image: var(--brush-blue);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.quick-review-cancel .cancel-darkviolet {
  background-image: var(--brush-darkviolet);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}

/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Game/Interfaces/OverGameNarration.less ***!
  \*********************************************************************************************************************************************************************************************************************************/
.over-game-narration-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background-color: var(--troubadour-main-15);
  padding: 0;
  z-index: 201;
}
.over-game-narration-container[data-focus="true"] {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.over-game-narration-container[data-focus="true"] .narration-back-to-scene-button {
  position: absolute;
  left: 30px;
  top: 30px;
}
.over-game-narration-container[data-focus="true"] .narration-text-entry {
  width: calc(100% - 260px);
  max-width: 1200px;
  transform: translateY(80px);
}
@media screen and (max-width: 768px) {
  .over-game-narration-container[data-focus="true"] .narration-text-entry {
    width: calc(100% - 60px);
  }
}

/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Game/Construction/components/DeletionPopup.less ***!
  \******************************************************************************************************************************************************************************************************************************************/
.nanopopup.text-deletion-popup,
.nanopopup.asset-deletion-popup {
  background-color: var(--popup-delete-bg);
  overflow: hidden;
}
.nanopopup.text-deletion-popup .close-container i,
.nanopopup.asset-deletion-popup .close-container i,
.nanopopup.text-deletion-popup .close-container svg,
.nanopopup.asset-deletion-popup .close-container svg {
  color: var(--troubadour-main);
}
.nanopopup.text-deletion-popup .popup-section,
.nanopopup.asset-deletion-popup .popup-section {
  display: flex;
  flex-direction: column;
}
.nanopopup.text-deletion-popup .popup-section h2,
.nanopopup.asset-deletion-popup .popup-section h2 {
  color: var(--troubadour-main);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  line-height: 1em;
  text-transform: none;
  margin: auto auto 30px;
}
.nanopopup.text-deletion-popup .popup-section h3,
.nanopopup.asset-deletion-popup .popup-section h3 {
  color: var(--default-color-4);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  font-style: italic;
  line-height: 1em;
  text-transform: none;
  margin: auto auto 30px;
}
.nanopopup.text-deletion-popup .popup-section .button-group,
.nanopopup.asset-deletion-popup .popup-section .button-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  margin: auto;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.text-deletion-popup {
    padding: 40px !important;
    width: 90vw !important;
    height: auto !important;
    min-width: 300px !important;
    max-width: 500px !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/Troubadour/Tutorial/ReadingModePopup.less ***!
  \*************************************************************************************************************************************************************************************************************************/
.nanopopup.demo-reading-mode-popup {
  background-color: var(--tutorial-color-4);
  overflow: hidden;
}
.nanopopup.demo-reading-mode-popup .popup-content {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
}
.nanopopup.demo-reading-mode-popup .popup-content .popup-text {
  display: flex;
  flex-flow: column wrap;
  flex: 1 0 60%;
  padding: 60px 40px 40px 0;
}
.nanopopup.demo-reading-mode-popup .popup-content .popup-text h2 {
  color: var(--troubadour-main-24);
  font-family: "Sofia Pro";
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.2em;
  text-transform: none;
  text-align: left;
  margin: 0 0 15px;
}
.nanopopup.demo-reading-mode-popup .popup-content .popup-text p {
  color: var(--troubadour-main-24);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.2em;
  margin: 0 0 30px;
}
.nanopopup.demo-reading-mode-popup .popup-content .popup-text .action-buttons {
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  margin: auto 0 0;
}
.nanopopup.demo-reading-mode-popup .popup-content .popup-skippy {
  flex: 1 0 40%;
  overflow: hidden;
}
.nanopopup.demo-reading-mode-popup .popup-content .popup-skippy img {
  display: block;
  max-width: 100%;
  margin: 60px auto 0;
  transform: translateY(8%);
}
@media screen and (max-width: 768px) {
  .nanopopup.demo-reading-mode-popup .popup-content {
    flex-direction: column;
  }
  .nanopopup.demo-reading-mode-popup .popup-content .popup-text {
    flex: 0;
    padding: 30px 30px 0;
  }
  .nanopopup.demo-reading-mode-popup .popup-content .popup-skippy img {
    max-height: 130px;
    margin: 0 0 0 20px;
  }
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.demo-reading-mode-popup {
    padding: 0 !important;
    width: 90vw !important;
    height: 90vh !important;
    min-height: auto !important;
    max-height: 420px !important;
    min-width: 350px !important;
    max-width: 680px !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/Game/Construction/Popups/TutorialWelcomePopup.less ***!
  \*********************************************************************************************************************************************************************************************************************************************/
.nanopopup.tutorial-welcome-popup {
  background-color: var(--tutorial-color-4);
  overflow: hidden;
}
.nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content {
  display: flex;
  flex-direction: row-reverse;
  overflow: hidden;
}
.nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-text {
  flex: 1 0 65%;
  padding: 4.5em 4em 3em 0;
}
.nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-text h2 {
  color: var(--tutorial-color-13);
  font-family: "Sofia Pro";
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.2em;
  text-transform: none;
  margin: 0 0 15px;
}
.nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-text p {
  color: var(--tutorial-color-13);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.2em;
  margin: 0 0 30px;
}
.nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-text .button-group {
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  margin: 0;
}
.nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-skippy {
  position: relative;
  flex: 1 0 35%;
}
.nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-skippy::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  aspect-ratio: 182 / 343;
  width: 100%;
  max-width: 182px;
  min-width: 100px;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-squirrel-pleased-star.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content {
    flex-direction: column;
  }
  .nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-text {
    flex: 1 0 100%;
    padding: 3em;
  }
  .nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-skippy {
    flex: 1 0 100%;
    padding: 3em;
  }
  .nanopopup.tutorial-welcome-popup .tutorial-welcome-popup-content .popup-skippy::before {
    width: 20%;
    left: 20%;
  }
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.tutorial-welcome-popup {
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: unset !important;
    min-width: 350px !important;
    max-width: 680px !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/Game/Construction/ChallengeConstructionPage.less ***!
  \*******************************************************************************************************************************************************************************************************************************************/
.ql-toolbar {
  background-color: transparent;
  border: none !important;
  display: flex;
  flex-wrap: wrap;
}
.ql-container {
  background-color: var(--default-bg);
}
.ql-font-student {
  font-family: "Sofia Pro";
  display: inline;
  vertical-align: top;
  word-break: break-word;
}
.ql-font-teacher2 {
  font-family: inherit;
  display: inline;
  vertical-align: top;
  word-break: break-word;
}
.ql-font-teacher {
  font-family: "Amaranth";
  font-weight: bold;
  word-break: break-word;
}
.title-text-entry .ql-font-teacher {
  line-height: 44px !important;
  word-break: break-word;
}
.news-editor {
  color: var(--default-color);
}
.revision-panel {
  cursor: url("https://localhost/img/brush-black.svg") auto;
}
.revision-panel .ql-toolbar.ql-snow {
  border-top-right-radius: 10px;
}
.revision-panel .ql-snow {
  color: var(--default-color);
  padding: 0 8px;
}
.revision-panel .ql-stroke {
  stroke: var(--quill-color);
}
.revision-panel .ql-fill {
  fill: var(--quill-color);
}
.revision-panel .ql-toolbar button,
.revision-panel .ql-toolbar span [role="button"] {
  background-color: var(--quill-button-bg);
  color: var(--quill-color);
  border-radius: 4px;
}
.revision-panel .ql-toolbar .quick-review {
  position: relative;
}
.revision-panel .ql-toolbar .quick-review .cancel-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  color: red;
  display: none;
}
.revision-panel .ql-toolbar .quick-review .brush--black {
  background-image: var(--brush-black);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--blue {
  background-image: var(--brush-blue);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--red {
  background-image: var(--brush-red);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--green {
  background-image: var(--brush-green);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--darkviolet {
  background-image: var(--brush-darkviolet);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--orange {
  background-image: var(--brush-orange);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review .brush--lightslategrey {
  background-image: var(--brush-lightslategrey);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.revision-panel .ql-toolbar .quick-review.selected .brush--black {
  background-image: var(--brush-black);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--blue {
  background-image: var(--brush-blue);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--red {
  background-image: var(--brush-red);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--green {
  background-image: var(--brush-green);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--darkviolet {
  background-image: var(--brush--darkviolet);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--orange {
  background-image: var(--brush-orange);
}
.revision-panel .ql-toolbar .quick-review.selected .brush--lightslategrey {
  background-image: var(--brush-lightslategrey);
}
.revision-panel .ql-toolbar .quick-review.selected .cancel-icon {
  display: block;
}
.revision-panel .ql-toolbar .ql-formats {
  margin: 5px auto 5px 0;
  padding: 0 10px;
}
.revision-panel .ql-toolbar .ql-formats:last-of-type {
  border: none;
}
.revision-panel .ql-toolbar .ql-color-label {
  opacity: 1;
  stroke-width: 3;
  stroke-linecap: square;
}
.revision-panel .ql-toolbar .ql-active {
  color: var(--quill-color-active);
  background-color: var(--quill-button-bg-active);
}
.revision-panel .ql-toolbar .ql-active .cancel-icon {
  display: block;
}
.revision-panel .ql-toolbar svg.fa {
  margin: 0;
  float: unset;
}
.revision-panel .ql-separator {
  border-right: 1px solid var(--line-separator);
  margin-right: 10px;
  padding-left: 10px;
}
.revision-panel .ql-container {
  background-color: var(--default-bg);
}
.revision-panel .ql-container .ql-editor {
  padding: 10px 15px;
  border-radius: 8px;
}
.revision-panel .ql-color .ql-picker-options {
  background-color: var(--default-bg);
  border-top: 1px solid var(--border);
  margin-top: 1px;
}
.revision-panel .ql-color .ql-picker-item {
  height: 20px;
  width: 20px;
  margin-right: 5px;
  border-radius: 4px;
  border: none;
  opacity: 0.8;
  box-shadow: 0 1px 5px var(--default-bg);
}
.revision-panel .ql-color .ql-picker-item:hover {
  opacity: 1;
  border: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 5px var(--default-darker-bg);
}
.revision-panel .ql-color[value="black"] {
  color: black !important;
}
.revision-panel .ql-color[value="red"] {
  color: red !important;
}
.revision-panel .ql-color[value="blue"] {
  color: blue !important;
}
.revision-panel .ql-color[value="green"] {
  color: green !important;
}
.revision-panel .ql-color[value="yellow"] {
  color: orange !important;
}
.revision-panel .ql-color[value="lightslategrey"] {
  color: lightslategrey !important;
}
.revision-panel .ql-color[value="darkviolet"] {
  color: darkviolet !important;
}
.ql-quick-review-formats {
  min-width: 175px;
}
.ql-quick-review-formats .tooltip-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  margin-top: 0;
  padding: 0 15px;
  max-height: 24px;
}
.ql-quick-review-formats .tooltip-wrapper i {
  position: initial;
  display: block;
  margin-left: 0;
  margin-top: 0;
  padding: 0;
}
.ql-quick-review-formats .tooltip-wrapper .tooltip {
  left: 50%;
}
.ql-normal-formats {
  min-width: 175px;
}
.quick-review-colors {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.quick-review-colors .color-block {
  height: 20px;
  width: 20px;
  margin-right: 5px;
  border-radius: 4px;
  border: none;
  opacity: 0.8;
  box-shadow: 0 1px 5px var(--default-bg);
}
.quick-review-colors .color-block:hover {
  opacity: 1;
  box-shadow: 0 1px 5px var(--default-darker-bg);
  cursor: pointer;
  border: 2px solid var(--border);
}
.quick-review-info {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-size: 14px;
  padding: 10px 0;
  text-align: center;
  font-weight: 600;
  color: var(--troubadour-main-5);
}
.quick-review-cancel {
  border: none;
  cursor: pointer;
  display: inline-block;
  height: 26px;
  padding: 4px 6px;
  width: 32px;
  border-radius: 4px;
  background-color: var(--quill-button-bg);
  color: var(--quill-color);
  float: none;
}
.quick-review-cancel:hover {
  color: var(--quill-color-active);
  background-color: var(--quill-button-bg-active);
}
.quick-review-cancel .cancel-black {
  background-image: var(--brush-black);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.quick-review-cancel .cancel-red {
  background-image: var(--brush-red);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.quick-review-cancel .cancel-green {
  background-image: var(--brush-green);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.quick-review-cancel .cancel-blue {
  background-image: var(--brush-blue);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
.quick-review-cancel .cancel-darkviolet {
  background-image: var(--brush-darkviolet);
  height: 18px;
  width: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
}
@keyframes TEFadeIn {
  0% {
    opacity: 0.05;
    background-color: var(--highlight);
    transform: translate(0, 30px) scale(0.97);
  }
  60% {
    background-color: var(--info-2);
  }
  80% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 1;
    background-color: var(--highlight);
    transform: translate(0, 0) scale(1);
  }
}
@keyframes TESaved {
  0% {
    border-color: var(--text-entry-approved-fg);
  }
  100% {
    border-color: var(--border);
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
/* General text-entry styling */
.text-entry {
  position: relative;
  border: 4px solid transparent;
  border-radius: 0 0 10px 10px;
  /* Status styling */
  /* When text-entry is focused */
}
.text-entry.transparent {
  opacity: 0;
}
.text-entry.fadein {
  background-color: var(--highlight);
  animation: TEFadeIn 250ms forwards ease-in;
  -webkit-animation-name: TEFadeIn;
  -webkit-animation-duration: 250ms;
  animation-name: TEFadeIn;
  animation-duration: 250ms;
}
.text-entry.deleted {
  animation: TEFadeIn 250ms reverse forwards ease-in;
}
.text-entry.greyed-out {
  animation: TEDeselection 250ms forwards ease-in-out;
}
.text-entry.saved {
  border: 4px solid var(--text-entry-approved-fg);
  animation: TESaved 750ms ease-in-out;
  -webkit-animation: TESaved 750ms ease-in-out;
}
.text-entry.locked * {
  pointer-events: none;
}
.text-entry .text-entry-label {
  display: flex;
  margin: 10px 0 0;
  padding: 5px 20px 5px 40px;
  font-family: "Sofia Pro", sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background-color: var(--text-entry-label-bg);
  color: var(--default-color-2);
  border-radius: 10px 10px 0 0;
  min-height: 30px;
}
.text-entry .text-entry-label .word-count-container {
  margin-left: auto;
  padding-right: 10px;
  font-size: 16px;
}
.text-entry .text-entry-label .word-count-container .current-count {
  transition: opacity 250ms;
}
.text-entry .text-entry-label .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: 16px;
  line-height: 16px;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry .text-container {
  overflow: auto;
  z-index: 1;
  border-radius: 0 0 7px 7px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  border: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-thumb);
  border-radius: 5px;
}
.text-entry .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry .text-container {
    scrollbar-color: var(--text-entry-thumb) var(--text-entry-track);
    scrollbar-width: thin;
  }
}
.text-entry .text-container.ql-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.text-entry .text-container:focus {
  outline: 3px solid var(--text-entry-fg);
}
.text-entry .text-container .ql-editor {
  padding: 0 0 10px;
  font-size: 23px;
  line-height: 49px;
  border-radius: 0 0 10px 10px;
  background-color: var(--text-entry-bg);
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-bg), var(--text-entry-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-bg) 41.5px, var(--text-entry-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-bg), var(--text-entry-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-bg) 41.5px, var(--text-entry-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-bg), var(--text-entry-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-bg) 41.5px, var(--text-entry-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  overflow: auto;
}
.text-entry .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-thumb);
  border-radius: 5px;
}
.text-entry .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry .text-container .ql-editor {
    scrollbar-color: var(--text-entry-thumb) var(--text-entry-track);
    scrollbar-width: thin;
  }
}
.text-entry .text-container .ql-editor p {
  padding: 0 20px;
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-bg), var(--text-entry-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-bg) 41.5px, var(--text-entry-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-bg), var(--text-entry-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-bg) 41.5px, var(--text-entry-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-bg), var(--text-entry-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-bg) 41.5px, var(--text-entry-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}
.text-entry .text-container .ql-editor p:last-child {
  padding-bottom: 20px !important;
}
@media screen and (max-width: 768px) {
  .text-entry .text-container .ql-editor {
    font-size: 16px;
    line-height: 34px;
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-bg), var(--text-entry-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-bg) 26.5px, var(--text-entry-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-bg), var(--text-entry-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-bg) 26.5px, var(--text-entry-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-bg), var(--text-entry-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-bg) 26.5px, var(--text-entry-bg) 34px);
  }
  .text-entry .text-container .ql-editor p {
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-bg), var(--text-entry-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-bg) 26.5px, var(--text-entry-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-bg), var(--text-entry-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-bg) 26.5px, var(--text-entry-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-bg), var(--text-entry-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-bg) 26.5px, var(--text-entry-bg) 34px);
  }
}
.text-entry .text-container.ql-container.overflow-condition {
  height: calc(100% - 120px);
}
.text-entry .reorder-buttons {
  top: calc(35% - 15px);
  position: absolute;
  left: -45px;
  font-size: 32px;
  color: var(--troubadour-main);
}
.text-entry .reorder-buttons .reorder-up {
  cursor: pointer;
  margin-bottom: 15px;
}
.text-entry .reorder-buttons .reorder-down {
  cursor: pointer;
  margin-top: 15px;
}
.text-entry .reorder-buttons .disabled {
  opacity: 0.3;
  color: var(--disabled);
  cursor: initial;
}
.text-entry .text-entry-button {
  display: none !important;
  justify-content: center;
  align-items: center;
  padding: 5px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 25px;
  font-weight: bolder;
  font-size: 1em;
  transition: all 250ms;
}
.text-entry .text-entry-button.comment-button {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 45px;
  height: 45px;
  margin: 0;
  padding: 0;
  z-index: 14;
  display: block;
}
.text-entry .text-entry-button.comment-button img {
  height: 100%;
  width: 100%;
}
.text-entry .text-entry-button.collapse-button {
  font-size: 2em;
}
.text-entry .text-entry-button.collapse-button .icon {
  transition: all 150ms;
}
.text-entry .text-entry-button.revision-button {
  background-color: var(--default-bg);
  border: 2px solid var(--button-action);
  color: var(--button-action);
}
.text-entry .text-entry-button.revision-button:hover {
  background-color: var(--button-action);
  color: var(--default-color-2);
}
.text-entry .text-entry-button.scroll-button {
  margin: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.text-entry .status-icon-container {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  transition: all 200ms;
}
.text-entry .status-icon-container .icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.text-entry .status-icon-container .icon img {
  width: 100%;
  height: 100%;
}
.text-entry .sticker-selection-dropdown button.round[data-size="regular"] {
  width: 40px;
  height: 40px;
  opacity: 1;
  transition: all 0.2s ease-in-out;
  background: none !important;
}
.text-entry .sticker-selection-dropdown button.round[data-size="regular"] img {
  width: 40px;
  height: 40px;
}
.text-entry .sticker-selection-dropdown button.round[data-size="regular"]:hover {
  transform: scale(1.25);
}
.text-entry .sticker-selection-dropdown .sticker-selection-dropdown-menu {
  position: absolute;
  top: 0 !important;
  left: unset !important;
  right: 0 !important;
  bottom: unset !important;
  background: none;
  box-shadow: none;
  border: none;
  min-width: auto;
  padding-right: 5px;
}
.text-entry .sticker-selection-dropdown .sticker-selection-dropdown-menu .sticker-selection-dropdown-menu-items {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.text-entry .sticker-selection-dropdown button.show ~ .sticker-selection-dropdown-menu {
  animation: stickers 1s forwards;
}
@keyframes stickers {
  0% {
    opacity: 0;
    transform: translate(100px, 0);
  }
  100% {
    opacity: 1;
    transform: translate(-5px, 0);
  }
}
.text-entry .inner-container {
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.text-entry .inner-container .text-entry-text-panel {
  position: relative;
  height: 100%;
  border-radius: 0 0 10px 10px;
}
.text-entry .inner-container .text-entry-text-panel .text-entry-shield {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: 0 0 7px 7px;
}
.text-entry .inner-container .text-entry-text-panel .text-entry-shield .shield-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--workstate-default-fg);
  opacity: 0.15;
  border-radius: 0 0 7px 7px;
}
.text-entry .inner-container .text-entry-text-panel .text-entry-shield .button-container {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}
.text-entry .inner-container .text-entry-text-panel .text-entry-shield .button-container .troubadour-button {
  margin: auto;
}
.text-entry .inner-container .button-row {
  display: none;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}
.text-entry .inner-container .bottom-button-container {
  position: absolute;
  bottom: -65px;
  left: 0;
  width: 100%;
  min-height: 75px;
  display: none;
  padding: 0 15px;
}
.text-entry .inner-container .bottom-button-container .revision-panel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 30px);
  z-index: 15;
  min-width: 620px;
}
@media all and (max-width: 768px) {
  .text-entry .inner-container .bottom-button-container .revision-panel {
    min-width: unset;
  }
}
@media all and (min-width: 1000px) {
  .text-entry .inner-container .bottom-button-container .revision-panel {
    min-width: 780px;
  }
}
.text-entry.brush-active ::selection {
  background: var(--default-color);
  /* WebKit/Blink Browsers */
}
.text-entry.brush-active ::-moz-selection {
  background: var(--default-color);
  /* Gecko Browsers */
}
.text-entry.brush-active .ql-editor > * {
  cursor: var(--brush-black), default;
}
.text-entry.brush-active[data-brush-color="blue"] ::selection {
  background: var(--brush-color-blue);
  /* WebKit/Blink Browsers */
}
.text-entry.brush-active[data-brush-color="blue"] ::-moz-selection {
  background: var(--brush-color-blue);
  /* Gecko Browsers */
}
.text-entry.brush-active[data-brush-color="blue"] .ql-editor > * {
  cursor: var(--brush-blue), default;
}
.text-entry.brush-active[data-brush-color="red"] ::selection {
  background: var(--brush-color-red);
  /* WebKit/Blink Browsers */
}
.text-entry.brush-active[data-brush-color="red"] ::-moz-selection {
  background: var(--brush-color-red);
  /* Gecko Browsers */
}
.text-entry.brush-active[data-brush-color="red"] .ql-editor > * {
  cursor: var(--brush-red), default;
}
.text-entry.brush-active[data-brush-color="green"] ::selection {
  background: var(--brush-color-green);
  /* WebKit/Blink Browsers */
}
.text-entry.brush-active[data-brush-color="green"] ::-moz-selection {
  background: var(--brush-color-green);
  /* Gecko Browsers */
}
.text-entry.brush-active[data-brush-color="green"] .ql-editor > * {
  cursor: var(--brush-green), default;
}
.text-entry.brush-active[data-brush-color="orange"] ::selection {
  background: var(--brush-color-orange);
  /* WebKit/Blink Browsers */
}
.text-entry.brush-active[data-brush-color="orange"] ::-moz-selection {
  background: var(--brush-color-orange);
  /* Gecko Browsers */
}
.text-entry.brush-active[data-brush-color="orange"] .ql-editor > * {
  cursor: var(--brush-orange), default;
}
.text-entry.brush-active[data-brush-color="lightslategrey"] ::selection {
  background: var(--brush-color-lightslategrey);
  /* WebKit/Blink Browsers */
}
.text-entry.brush-active[data-brush-color="lightslategrey"] ::-moz-selection {
  background: var(--brush-color-lightslategrey);
  /* Gecko Browsers */
}
.text-entry.brush-active[data-brush-color="lightslategrey"] .ql-editor > * {
  cursor: var(--brush-lightslategrey), default;
}
.text-entry.brush-active[data-brush-color="darkviolet"] ::selection {
  background: var(--brush-color-darkviolet);
  /* WebKit/Blink Browsers */
}
.text-entry.brush-active[data-brush-color="darkviolet"] ::-moz-selection {
  background: var(--brush-color-darkviolet);
  /* Gecko Browsers */
}
.text-entry.brush-active[data-brush-color="darkviolet"] .ql-editor > * {
  cursor: var(--brush-darkviolet), default;
}
.text-entry.text-entry--empty-revision .text-entry-label {
  display: flex;
  margin: 10px 0 0;
  padding: 5px 20px 5px 40px;
  font-family: "Sofia Pro", sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background-color: var(--text-entry-empty-label-bg);
  color: var(--default-color-2);
  border-radius: 10px 10px 0 0;
  min-height: 30px;
}
.text-entry.text-entry--empty-revision .text-entry-label .word-count-container {
  margin-left: auto;
  padding-right: 10px;
  font-size: 16px;
}
.text-entry.text-entry--empty-revision .text-entry-label .word-count-container .current-count {
  transition: opacity 250ms;
}
.text-entry.text-entry--empty-revision .text-entry-label .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: 16px;
  line-height: 16px;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry.text-entry--empty-revision .text-container {
  overflow: auto;
  z-index: 1;
  border-radius: 0 0 7px 7px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  border: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry.text-entry--empty-revision .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry.text-entry--empty-revision .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-thumb);
  border-radius: 5px;
}
.text-entry.text-entry--empty-revision .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.text-entry--empty-revision .text-container {
    scrollbar-color: var(--text-entry-thumb) var(--text-entry-track);
    scrollbar-width: thin;
  }
}
.text-entry.text-entry--empty-revision .text-container.ql-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.text-entry.text-entry--empty-revision .text-container:focus {
  outline: 3px solid var(--text-entry-fg);
}
.text-entry.text-entry--empty-revision .text-container .ql-editor {
  padding: 0 0 10px;
  font-size: 23px;
  line-height: 49px;
  border-radius: 0 0 10px 10px;
  background-color: var(--text-entry-empty-bg);
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-empty-bg), var(--text-entry-empty-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-empty-bg) 41.5px, var(--text-entry-empty-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-empty-bg), var(--text-entry-empty-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-empty-bg) 41.5px, var(--text-entry-empty-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-empty-bg), var(--text-entry-empty-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-empty-bg) 41.5px, var(--text-entry-empty-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  overflow: auto;
}
.text-entry.text-entry--empty-revision .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry.text-entry--empty-revision .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-thumb);
  border-radius: 5px;
}
.text-entry.text-entry--empty-revision .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.text-entry--empty-revision .text-container .ql-editor {
    scrollbar-color: var(--text-entry-thumb) var(--text-entry-track);
    scrollbar-width: thin;
  }
}
.text-entry.text-entry--empty-revision .text-container .ql-editor p {
  padding: 0 20px;
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-empty-bg), var(--text-entry-empty-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-empty-bg) 41.5px, var(--text-entry-empty-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-empty-bg), var(--text-entry-empty-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-empty-bg) 41.5px, var(--text-entry-empty-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-empty-bg), var(--text-entry-empty-bg) 38px, var(--text-entry-fg) 38.5px, var(--text-entry-fg) 41px, var(--text-entry-empty-bg) 41.5px, var(--text-entry-empty-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}
.text-entry.text-entry--empty-revision .text-container .ql-editor p:last-child {
  padding-bottom: 20px !important;
}
@media screen and (max-width: 768px) {
  .text-entry.text-entry--empty-revision .text-container .ql-editor {
    font-size: 16px;
    line-height: 34px;
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-empty-bg), var(--text-entry-empty-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-empty-bg) 26.5px, var(--text-entry-empty-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-empty-bg), var(--text-entry-empty-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-empty-bg) 26.5px, var(--text-entry-empty-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-empty-bg), var(--text-entry-empty-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-empty-bg) 26.5px, var(--text-entry-empty-bg) 34px);
  }
  .text-entry.text-entry--empty-revision .text-container .ql-editor p {
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-empty-bg), var(--text-entry-empty-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-empty-bg) 26.5px, var(--text-entry-empty-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-empty-bg), var(--text-entry-empty-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-empty-bg) 26.5px, var(--text-entry-empty-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-empty-bg), var(--text-entry-empty-bg) 23px, var(--text-entry-fg) 23.5px, var(--text-entry-fg) 26px, var(--text-entry-empty-bg) 26.5px, var(--text-entry-empty-bg) 34px);
  }
}
.text-entry.text-entry--empty-revision .text-container.ql-container.overflow-condition {
  height: calc(100% - 120px);
}
.text-entry .text-entry-locked {
  display: block;
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 150px;
  max-height: 150px;
  height: 40%;
  z-index: 10;
}
.text-entry[data-comment]:not([data-comment=""]) .comment-button.text-entry-button {
  display: flex !important;
}
.text-entry[data-status="NEW"] .text-entry-label {
  display: flex;
  margin: 10px 0 0;
  padding: 5px 20px 5px 40px;
  font-family: "Sofia Pro", sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background-color: var(--text-entry-new-label-bg);
  color: var(--default-color-2);
  border-radius: 10px 10px 0 0;
  min-height: 30px;
}
.text-entry[data-status="NEW"] .text-entry-label .word-count-container {
  margin-left: auto;
  padding-right: 10px;
  font-size: 16px;
}
.text-entry[data-status="NEW"] .text-entry-label .word-count-container .current-count {
  transition: opacity 250ms;
}
.text-entry[data-status="NEW"] .text-entry-label .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: 16px;
  line-height: 16px;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry[data-status="NEW"] .text-container {
  overflow: auto;
  z-index: 1;
  border-radius: 0 0 7px 7px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  border: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry[data-status="NEW"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="NEW"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-new-thumb);
  border-radius: 5px;
}
.text-entry[data-status="NEW"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-new-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="NEW"] .text-container {
    scrollbar-color: var(--text-entry-new-thumb) var(--text-entry-new-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="NEW"] .text-container.ql-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.text-entry[data-status="NEW"] .text-container:focus {
  outline: 3px solid var(--text-entry-new-fg);
}
.text-entry[data-status="NEW"] .text-container .ql-editor {
  padding: 0 0 10px;
  font-size: 23px;
  line-height: 49px;
  border-radius: 0 0 10px 10px;
  background-color: var(--text-entry-new-bg);
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-new-bg), var(--text-entry-new-bg) 38px, var(--text-entry-new-fg) 38.5px, var(--text-entry-new-fg) 41px, var(--text-entry-new-bg) 41.5px, var(--text-entry-new-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-new-bg), var(--text-entry-new-bg) 38px, var(--text-entry-new-fg) 38.5px, var(--text-entry-new-fg) 41px, var(--text-entry-new-bg) 41.5px, var(--text-entry-new-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-new-bg), var(--text-entry-new-bg) 38px, var(--text-entry-new-fg) 38.5px, var(--text-entry-new-fg) 41px, var(--text-entry-new-bg) 41.5px, var(--text-entry-new-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  overflow: auto;
}
.text-entry[data-status="NEW"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="NEW"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-new-thumb);
  border-radius: 5px;
}
.text-entry[data-status="NEW"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-new-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="NEW"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-new-thumb) var(--text-entry-new-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="NEW"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-new-bg), var(--text-entry-new-bg) 38px, var(--text-entry-new-fg) 38.5px, var(--text-entry-new-fg) 41px, var(--text-entry-new-bg) 41.5px, var(--text-entry-new-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-new-bg), var(--text-entry-new-bg) 38px, var(--text-entry-new-fg) 38.5px, var(--text-entry-new-fg) 41px, var(--text-entry-new-bg) 41.5px, var(--text-entry-new-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-new-bg), var(--text-entry-new-bg) 38px, var(--text-entry-new-fg) 38.5px, var(--text-entry-new-fg) 41px, var(--text-entry-new-bg) 41.5px, var(--text-entry-new-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}
.text-entry[data-status="NEW"] .text-container .ql-editor p:last-child {
  padding-bottom: 20px !important;
}
@media screen and (max-width: 768px) {
  .text-entry[data-status="NEW"] .text-container .ql-editor {
    font-size: 16px;
    line-height: 34px;
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-new-bg), var(--text-entry-new-bg) 23px, var(--text-entry-new-fg) 23.5px, var(--text-entry-new-fg) 26px, var(--text-entry-new-bg) 26.5px, var(--text-entry-new-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-new-bg), var(--text-entry-new-bg) 23px, var(--text-entry-new-fg) 23.5px, var(--text-entry-new-fg) 26px, var(--text-entry-new-bg) 26.5px, var(--text-entry-new-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-new-bg), var(--text-entry-new-bg) 23px, var(--text-entry-new-fg) 23.5px, var(--text-entry-new-fg) 26px, var(--text-entry-new-bg) 26.5px, var(--text-entry-new-bg) 34px);
  }
  .text-entry[data-status="NEW"] .text-container .ql-editor p {
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-new-bg), var(--text-entry-new-bg) 23px, var(--text-entry-new-fg) 23.5px, var(--text-entry-new-fg) 26px, var(--text-entry-new-bg) 26.5px, var(--text-entry-new-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-new-bg), var(--text-entry-new-bg) 23px, var(--text-entry-new-fg) 23.5px, var(--text-entry-new-fg) 26px, var(--text-entry-new-bg) 26.5px, var(--text-entry-new-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-new-bg), var(--text-entry-new-bg) 23px, var(--text-entry-new-fg) 23.5px, var(--text-entry-new-fg) 26px, var(--text-entry-new-bg) 26.5px, var(--text-entry-new-bg) 34px);
  }
}
.text-entry[data-status="NEW"] .text-container.ql-container.overflow-condition {
  height: calc(100% - 120px);
}
.text-entry[data-status="NEW"] .status-icon-container .icon[data-status="NEW"] {
  display: none !important;
}
.text-entry[data-status="COMPLETED"] .text-entry-label {
  display: flex;
  margin: 10px 0 0;
  padding: 5px 20px 5px 40px;
  font-family: "Sofia Pro", sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background-color: var(--text-entry-completed-label-bg);
  color: var(--default-color-2);
  border-radius: 10px 10px 0 0;
  min-height: 30px;
}
.text-entry[data-status="COMPLETED"] .text-entry-label .word-count-container {
  margin-left: auto;
  padding-right: 10px;
  font-size: 16px;
}
.text-entry[data-status="COMPLETED"] .text-entry-label .word-count-container .current-count {
  transition: opacity 250ms;
}
.text-entry[data-status="COMPLETED"] .text-entry-label .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: 16px;
  line-height: 16px;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry[data-status="COMPLETED"] .text-container {
  overflow: auto;
  z-index: 1;
  border-radius: 0 0 7px 7px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  border: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry[data-status="COMPLETED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="COMPLETED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-completed-thumb);
  border-radius: 5px;
}
.text-entry[data-status="COMPLETED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-completed-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="COMPLETED"] .text-container {
    scrollbar-color: var(--text-entry-completed-thumb) var(--text-entry-completed-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="COMPLETED"] .text-container.ql-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.text-entry[data-status="COMPLETED"] .text-container:focus {
  outline: 3px solid var(--text-entry-completed-fg);
}
.text-entry[data-status="COMPLETED"] .text-container .ql-editor {
  padding: 0 0 10px;
  font-size: 23px;
  line-height: 49px;
  border-radius: 0 0 10px 10px;
  background-color: var(--text-entry-completed-bg);
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-completed-bg), var(--text-entry-completed-bg) 38px, var(--text-entry-completed-fg) 38.5px, var(--text-entry-completed-fg) 41px, var(--text-entry-completed-bg) 41.5px, var(--text-entry-completed-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-completed-bg), var(--text-entry-completed-bg) 38px, var(--text-entry-completed-fg) 38.5px, var(--text-entry-completed-fg) 41px, var(--text-entry-completed-bg) 41.5px, var(--text-entry-completed-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-completed-bg), var(--text-entry-completed-bg) 38px, var(--text-entry-completed-fg) 38.5px, var(--text-entry-completed-fg) 41px, var(--text-entry-completed-bg) 41.5px, var(--text-entry-completed-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  overflow: auto;
}
.text-entry[data-status="COMPLETED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="COMPLETED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-completed-thumb);
  border-radius: 5px;
}
.text-entry[data-status="COMPLETED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-completed-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="COMPLETED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-completed-thumb) var(--text-entry-completed-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="COMPLETED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-completed-bg), var(--text-entry-completed-bg) 38px, var(--text-entry-completed-fg) 38.5px, var(--text-entry-completed-fg) 41px, var(--text-entry-completed-bg) 41.5px, var(--text-entry-completed-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-completed-bg), var(--text-entry-completed-bg) 38px, var(--text-entry-completed-fg) 38.5px, var(--text-entry-completed-fg) 41px, var(--text-entry-completed-bg) 41.5px, var(--text-entry-completed-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-completed-bg), var(--text-entry-completed-bg) 38px, var(--text-entry-completed-fg) 38.5px, var(--text-entry-completed-fg) 41px, var(--text-entry-completed-bg) 41.5px, var(--text-entry-completed-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}
.text-entry[data-status="COMPLETED"] .text-container .ql-editor p:last-child {
  padding-bottom: 20px !important;
}
@media screen and (max-width: 768px) {
  .text-entry[data-status="COMPLETED"] .text-container .ql-editor {
    font-size: 16px;
    line-height: 34px;
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-completed-bg), var(--text-entry-completed-bg) 23px, var(--text-entry-completed-fg) 23.5px, var(--text-entry-completed-fg) 26px, var(--text-entry-completed-bg) 26.5px, var(--text-entry-completed-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-completed-bg), var(--text-entry-completed-bg) 23px, var(--text-entry-completed-fg) 23.5px, var(--text-entry-completed-fg) 26px, var(--text-entry-completed-bg) 26.5px, var(--text-entry-completed-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-completed-bg), var(--text-entry-completed-bg) 23px, var(--text-entry-completed-fg) 23.5px, var(--text-entry-completed-fg) 26px, var(--text-entry-completed-bg) 26.5px, var(--text-entry-completed-bg) 34px);
  }
  .text-entry[data-status="COMPLETED"] .text-container .ql-editor p {
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-completed-bg), var(--text-entry-completed-bg) 23px, var(--text-entry-completed-fg) 23.5px, var(--text-entry-completed-fg) 26px, var(--text-entry-completed-bg) 26.5px, var(--text-entry-completed-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-completed-bg), var(--text-entry-completed-bg) 23px, var(--text-entry-completed-fg) 23.5px, var(--text-entry-completed-fg) 26px, var(--text-entry-completed-bg) 26.5px, var(--text-entry-completed-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-completed-bg), var(--text-entry-completed-bg) 23px, var(--text-entry-completed-fg) 23.5px, var(--text-entry-completed-fg) 26px, var(--text-entry-completed-bg) 26.5px, var(--text-entry-completed-bg) 34px);
  }
}
.text-entry[data-status="COMPLETED"] .text-container.ql-container.overflow-condition {
  height: calc(100% - 120px);
}
.text-entry[data-status="COMPLETED"] .status-icon-container .icon[data-status="COMPLETED"] {
  display: flex;
}
.text-entry[data-status="COMPLETED"] .status-icon-container .icon[data-status="COMPLETED"] img.icon {
  display: block !important;
}
.text-entry[data-status="LOVED"] .text-entry-label {
  display: flex;
  margin: 10px 0 0;
  padding: 5px 20px 5px 40px;
  font-family: "Sofia Pro", sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background-color: var(--text-entry-loved-label-bg);
  color: var(--default-color-2);
  border-radius: 10px 10px 0 0;
  min-height: 30px;
}
.text-entry[data-status="LOVED"] .text-entry-label .word-count-container {
  margin-left: auto;
  padding-right: 10px;
  font-size: 16px;
}
.text-entry[data-status="LOVED"] .text-entry-label .word-count-container .current-count {
  transition: opacity 250ms;
}
.text-entry[data-status="LOVED"] .text-entry-label .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: 16px;
  line-height: 16px;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry[data-status="LOVED"] .text-container {
  overflow: auto;
  z-index: 1;
  border-radius: 0 0 7px 7px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  border: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry[data-status="LOVED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="LOVED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-loved-thumb);
  border-radius: 5px;
}
.text-entry[data-status="LOVED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-loved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="LOVED"] .text-container {
    scrollbar-color: var(--text-entry-loved-thumb) var(--text-entry-loved-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="LOVED"] .text-container.ql-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.text-entry[data-status="LOVED"] .text-container:focus {
  outline: 3px solid var(--text-entry-loved-fg);
}
.text-entry[data-status="LOVED"] .text-container .ql-editor {
  padding: 0 0 10px;
  font-size: 23px;
  line-height: 49px;
  border-radius: 0 0 10px 10px;
  background-color: var(--text-entry-loved-bg);
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-loved-bg), var(--text-entry-loved-bg) 38px, var(--text-entry-loved-fg) 38.5px, var(--text-entry-loved-fg) 41px, var(--text-entry-loved-bg) 41.5px, var(--text-entry-loved-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-loved-bg), var(--text-entry-loved-bg) 38px, var(--text-entry-loved-fg) 38.5px, var(--text-entry-loved-fg) 41px, var(--text-entry-loved-bg) 41.5px, var(--text-entry-loved-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-loved-bg), var(--text-entry-loved-bg) 38px, var(--text-entry-loved-fg) 38.5px, var(--text-entry-loved-fg) 41px, var(--text-entry-loved-bg) 41.5px, var(--text-entry-loved-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  overflow: auto;
}
.text-entry[data-status="LOVED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="LOVED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-loved-thumb);
  border-radius: 5px;
}
.text-entry[data-status="LOVED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-loved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="LOVED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-loved-thumb) var(--text-entry-loved-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="LOVED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-loved-bg), var(--text-entry-loved-bg) 38px, var(--text-entry-loved-fg) 38.5px, var(--text-entry-loved-fg) 41px, var(--text-entry-loved-bg) 41.5px, var(--text-entry-loved-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-loved-bg), var(--text-entry-loved-bg) 38px, var(--text-entry-loved-fg) 38.5px, var(--text-entry-loved-fg) 41px, var(--text-entry-loved-bg) 41.5px, var(--text-entry-loved-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-loved-bg), var(--text-entry-loved-bg) 38px, var(--text-entry-loved-fg) 38.5px, var(--text-entry-loved-fg) 41px, var(--text-entry-loved-bg) 41.5px, var(--text-entry-loved-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}
.text-entry[data-status="LOVED"] .text-container .ql-editor p:last-child {
  padding-bottom: 20px !important;
}
@media screen and (max-width: 768px) {
  .text-entry[data-status="LOVED"] .text-container .ql-editor {
    font-size: 16px;
    line-height: 34px;
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-loved-bg), var(--text-entry-loved-bg) 23px, var(--text-entry-loved-fg) 23.5px, var(--text-entry-loved-fg) 26px, var(--text-entry-loved-bg) 26.5px, var(--text-entry-loved-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-loved-bg), var(--text-entry-loved-bg) 23px, var(--text-entry-loved-fg) 23.5px, var(--text-entry-loved-fg) 26px, var(--text-entry-loved-bg) 26.5px, var(--text-entry-loved-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-loved-bg), var(--text-entry-loved-bg) 23px, var(--text-entry-loved-fg) 23.5px, var(--text-entry-loved-fg) 26px, var(--text-entry-loved-bg) 26.5px, var(--text-entry-loved-bg) 34px);
  }
  .text-entry[data-status="LOVED"] .text-container .ql-editor p {
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-loved-bg), var(--text-entry-loved-bg) 23px, var(--text-entry-loved-fg) 23.5px, var(--text-entry-loved-fg) 26px, var(--text-entry-loved-bg) 26.5px, var(--text-entry-loved-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-loved-bg), var(--text-entry-loved-bg) 23px, var(--text-entry-loved-fg) 23.5px, var(--text-entry-loved-fg) 26px, var(--text-entry-loved-bg) 26.5px, var(--text-entry-loved-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-loved-bg), var(--text-entry-loved-bg) 23px, var(--text-entry-loved-fg) 23.5px, var(--text-entry-loved-fg) 26px, var(--text-entry-loved-bg) 26.5px, var(--text-entry-loved-bg) 34px);
  }
}
.text-entry[data-status="LOVED"] .text-container.ql-container.overflow-condition {
  height: calc(100% - 120px);
}
.text-entry[data-status="LOVED"] .status-icon-container .icon[data-status="LOVED"] {
  display: flex;
}
.text-entry[data-status="LOVED"] .status-icon-container .icon[data-status="LOVED"] img.icon {
  display: block !important;
}
.text-entry[data-status="APPROVED"] .text-entry-label {
  display: flex;
  margin: 10px 0 0;
  padding: 5px 20px 5px 40px;
  font-family: "Sofia Pro", sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background-color: var(--text-entry-approved-label-bg);
  color: var(--default-color-2);
  border-radius: 10px 10px 0 0;
  min-height: 30px;
}
.text-entry[data-status="APPROVED"] .text-entry-label .word-count-container {
  margin-left: auto;
  padding-right: 10px;
  font-size: 16px;
}
.text-entry[data-status="APPROVED"] .text-entry-label .word-count-container .current-count {
  transition: opacity 250ms;
}
.text-entry[data-status="APPROVED"] .text-entry-label .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: 16px;
  line-height: 16px;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry[data-status="APPROVED"] .text-container {
  overflow: auto;
  z-index: 1;
  border-radius: 0 0 7px 7px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  border: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry[data-status="APPROVED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="APPROVED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-approved-thumb);
  border-radius: 5px;
}
.text-entry[data-status="APPROVED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-approved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="APPROVED"] .text-container {
    scrollbar-color: var(--text-entry-approved-thumb) var(--text-entry-approved-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="APPROVED"] .text-container.ql-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.text-entry[data-status="APPROVED"] .text-container:focus {
  outline: 3px solid var(--text-entry-approved-fg);
}
.text-entry[data-status="APPROVED"] .text-container .ql-editor {
  padding: 0 0 10px;
  font-size: 23px;
  line-height: 49px;
  border-radius: 0 0 10px 10px;
  background-color: var(--text-entry-approved-bg);
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-approved-bg), var(--text-entry-approved-bg) 38px, var(--text-entry-approved-fg) 38.5px, var(--text-entry-approved-fg) 41px, var(--text-entry-approved-bg) 41.5px, var(--text-entry-approved-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-approved-bg), var(--text-entry-approved-bg) 38px, var(--text-entry-approved-fg) 38.5px, var(--text-entry-approved-fg) 41px, var(--text-entry-approved-bg) 41.5px, var(--text-entry-approved-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-approved-bg), var(--text-entry-approved-bg) 38px, var(--text-entry-approved-fg) 38.5px, var(--text-entry-approved-fg) 41px, var(--text-entry-approved-bg) 41.5px, var(--text-entry-approved-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  overflow: auto;
}
.text-entry[data-status="APPROVED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="APPROVED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-approved-thumb);
  border-radius: 5px;
}
.text-entry[data-status="APPROVED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-approved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="APPROVED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-approved-thumb) var(--text-entry-approved-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="APPROVED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-approved-bg), var(--text-entry-approved-bg) 38px, var(--text-entry-approved-fg) 38.5px, var(--text-entry-approved-fg) 41px, var(--text-entry-approved-bg) 41.5px, var(--text-entry-approved-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-approved-bg), var(--text-entry-approved-bg) 38px, var(--text-entry-approved-fg) 38.5px, var(--text-entry-approved-fg) 41px, var(--text-entry-approved-bg) 41.5px, var(--text-entry-approved-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-approved-bg), var(--text-entry-approved-bg) 38px, var(--text-entry-approved-fg) 38.5px, var(--text-entry-approved-fg) 41px, var(--text-entry-approved-bg) 41.5px, var(--text-entry-approved-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}
.text-entry[data-status="APPROVED"] .text-container .ql-editor p:last-child {
  padding-bottom: 20px !important;
}
@media screen and (max-width: 768px) {
  .text-entry[data-status="APPROVED"] .text-container .ql-editor {
    font-size: 16px;
    line-height: 34px;
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-approved-bg), var(--text-entry-approved-bg) 23px, var(--text-entry-approved-fg) 23.5px, var(--text-entry-approved-fg) 26px, var(--text-entry-approved-bg) 26.5px, var(--text-entry-approved-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-approved-bg), var(--text-entry-approved-bg) 23px, var(--text-entry-approved-fg) 23.5px, var(--text-entry-approved-fg) 26px, var(--text-entry-approved-bg) 26.5px, var(--text-entry-approved-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-approved-bg), var(--text-entry-approved-bg) 23px, var(--text-entry-approved-fg) 23.5px, var(--text-entry-approved-fg) 26px, var(--text-entry-approved-bg) 26.5px, var(--text-entry-approved-bg) 34px);
  }
  .text-entry[data-status="APPROVED"] .text-container .ql-editor p {
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-approved-bg), var(--text-entry-approved-bg) 23px, var(--text-entry-approved-fg) 23.5px, var(--text-entry-approved-fg) 26px, var(--text-entry-approved-bg) 26.5px, var(--text-entry-approved-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-approved-bg), var(--text-entry-approved-bg) 23px, var(--text-entry-approved-fg) 23.5px, var(--text-entry-approved-fg) 26px, var(--text-entry-approved-bg) 26.5px, var(--text-entry-approved-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-approved-bg), var(--text-entry-approved-bg) 23px, var(--text-entry-approved-fg) 23.5px, var(--text-entry-approved-fg) 26px, var(--text-entry-approved-bg) 26.5px, var(--text-entry-approved-bg) 34px);
  }
}
.text-entry[data-status="APPROVED"] .text-container.ql-container.overflow-condition {
  height: calc(100% - 120px);
}
.text-entry[data-status="APPROVED"] .status-icon-container .icon[data-status="APPROVED"] {
  display: flex;
}
.text-entry[data-status="APPROVED"] .status-icon-container .icon[data-status="APPROVED"] img.icon {
  display: block !important;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-entry-label {
  display: flex;
  margin: 10px 0 0;
  padding: 5px 20px 5px 40px;
  font-family: "Sofia Pro", sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background-color: var(--text-entry-improved-label-bg);
  color: var(--default-color-2);
  border-radius: 10px 10px 0 0;
  min-height: 30px;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-entry-label .word-count-container {
  margin-left: auto;
  padding-right: 10px;
  font-size: 16px;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-entry-label .word-count-container .current-count {
  transition: opacity 250ms;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-entry-label .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: 16px;
  line-height: 16px;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container {
  overflow: auto;
  z-index: 1;
  border-radius: 0 0 7px 7px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  border: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-improved-thumb);
  border-radius: 5px;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-improved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="CAN_BE_IMPROVED"] .text-container {
    scrollbar-color: var(--text-entry-improved-thumb) var(--text-entry-improved-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container.ql-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container:focus {
  outline: 3px solid var(--text-entry-improved-fg);
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor {
  padding: 0 0 10px;
  font-size: 23px;
  line-height: 49px;
  border-radius: 0 0 10px 10px;
  background-color: var(--text-entry-improved-bg);
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-improved-bg), var(--text-entry-improved-bg) 38px, var(--text-entry-improved-fg) 38.5px, var(--text-entry-improved-fg) 41px, var(--text-entry-improved-bg) 41.5px, var(--text-entry-improved-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-improved-bg), var(--text-entry-improved-bg) 38px, var(--text-entry-improved-fg) 38.5px, var(--text-entry-improved-fg) 41px, var(--text-entry-improved-bg) 41.5px, var(--text-entry-improved-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-improved-bg), var(--text-entry-improved-bg) 38px, var(--text-entry-improved-fg) 38.5px, var(--text-entry-improved-fg) 41px, var(--text-entry-improved-bg) 41.5px, var(--text-entry-improved-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  overflow: auto;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-improved-thumb);
  border-radius: 5px;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-improved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-improved-thumb) var(--text-entry-improved-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-improved-bg), var(--text-entry-improved-bg) 38px, var(--text-entry-improved-fg) 38.5px, var(--text-entry-improved-fg) 41px, var(--text-entry-improved-bg) 41.5px, var(--text-entry-improved-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-improved-bg), var(--text-entry-improved-bg) 38px, var(--text-entry-improved-fg) 38.5px, var(--text-entry-improved-fg) 41px, var(--text-entry-improved-bg) 41.5px, var(--text-entry-improved-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-improved-bg), var(--text-entry-improved-bg) 38px, var(--text-entry-improved-fg) 38.5px, var(--text-entry-improved-fg) 41px, var(--text-entry-improved-bg) 41.5px, var(--text-entry-improved-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor p:last-child {
  padding-bottom: 20px !important;
}
@media screen and (max-width: 768px) {
  .text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor {
    font-size: 16px;
    line-height: 34px;
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-improved-bg), var(--text-entry-improved-bg) 23px, var(--text-entry-improved-fg) 23.5px, var(--text-entry-improved-fg) 26px, var(--text-entry-improved-bg) 26.5px, var(--text-entry-improved-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-improved-bg), var(--text-entry-improved-bg) 23px, var(--text-entry-improved-fg) 23.5px, var(--text-entry-improved-fg) 26px, var(--text-entry-improved-bg) 26.5px, var(--text-entry-improved-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-improved-bg), var(--text-entry-improved-bg) 23px, var(--text-entry-improved-fg) 23.5px, var(--text-entry-improved-fg) 26px, var(--text-entry-improved-bg) 26.5px, var(--text-entry-improved-bg) 34px);
  }
  .text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor p {
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-improved-bg), var(--text-entry-improved-bg) 23px, var(--text-entry-improved-fg) 23.5px, var(--text-entry-improved-fg) 26px, var(--text-entry-improved-bg) 26.5px, var(--text-entry-improved-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-improved-bg), var(--text-entry-improved-bg) 23px, var(--text-entry-improved-fg) 23.5px, var(--text-entry-improved-fg) 26px, var(--text-entry-improved-bg) 26.5px, var(--text-entry-improved-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-improved-bg), var(--text-entry-improved-bg) 23px, var(--text-entry-improved-fg) 23.5px, var(--text-entry-improved-fg) 26px, var(--text-entry-improved-bg) 26.5px, var(--text-entry-improved-bg) 34px);
  }
}
.text-entry[data-status="CAN_BE_IMPROVED"] .text-container.ql-container.overflow-condition {
  height: calc(100% - 120px);
}
.text-entry[data-status="CAN_BE_IMPROVED"] .status-icon-container .icon[data-status="CAN_BE_IMPROVED"] {
  display: flex;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-entry-label {
  display: flex;
  margin: 10px 0 0;
  padding: 5px 20px 5px 40px;
  font-family: "Sofia Pro", sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background-color: var(--text-entry-modified-label-bg);
  color: var(--default-color-2);
  border-radius: 10px 10px 0 0;
  min-height: 30px;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-entry-label .word-count-container {
  margin-left: auto;
  padding-right: 10px;
  font-size: 16px;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-entry-label .word-count-container .current-count {
  transition: opacity 250ms;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-entry-label .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: 16px;
  line-height: 16px;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container {
  overflow: auto;
  z-index: 1;
  border-radius: 0 0 7px 7px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  border: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-modified-thumb);
  border-radius: 5px;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-modified-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container {
    scrollbar-color: var(--text-entry-modified-thumb) var(--text-entry-modified-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container.ql-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container:focus {
  outline: 3px solid var(--text-entry-modified-fg);
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor {
  padding: 0 0 10px;
  font-size: 23px;
  line-height: 49px;
  border-radius: 0 0 10px 10px;
  background-color: var(--text-entry-modified-bg);
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-modified-bg), var(--text-entry-modified-bg) 38px, var(--text-entry-modified-fg) 38.5px, var(--text-entry-modified-fg) 41px, var(--text-entry-modified-bg) 41.5px, var(--text-entry-modified-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-modified-bg), var(--text-entry-modified-bg) 38px, var(--text-entry-modified-fg) 38.5px, var(--text-entry-modified-fg) 41px, var(--text-entry-modified-bg) 41.5px, var(--text-entry-modified-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-modified-bg), var(--text-entry-modified-bg) 38px, var(--text-entry-modified-fg) 38.5px, var(--text-entry-modified-fg) 41px, var(--text-entry-modified-bg) 41.5px, var(--text-entry-modified-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  overflow: auto;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-modified-thumb);
  border-radius: 5px;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-modified-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-modified-thumb) var(--text-entry-modified-track);
    scrollbar-width: thin;
  }
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: -moz-repeating-linear-gradient(top, var(--text-entry-modified-bg), var(--text-entry-modified-bg) 38px, var(--text-entry-modified-fg) 38.5px, var(--text-entry-modified-fg) 41px, var(--text-entry-modified-bg) 41.5px, var(--text-entry-modified-bg) 49px);
  background-image: -webkit-repeating-linear-gradient(var(--text-entry-modified-bg), var(--text-entry-modified-bg) 38px, var(--text-entry-modified-fg) 38.5px, var(--text-entry-modified-fg) 41px, var(--text-entry-modified-bg) 41.5px, var(--text-entry-modified-bg) 49px);
  background-image: repeating-linear-gradient(var(--text-entry-modified-bg), var(--text-entry-modified-bg) 38px, var(--text-entry-modified-fg) 38.5px, var(--text-entry-modified-fg) 41px, var(--text-entry-modified-bg) 41.5px, var(--text-entry-modified-bg) 49px);
  background-position-y: 0;
  background-repeat: repeat-y;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor p:last-child {
  padding-bottom: 20px !important;
}
@media screen and (max-width: 768px) {
  .text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor {
    font-size: 16px;
    line-height: 34px;
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-modified-bg), var(--text-entry-modified-bg) 23px, var(--text-entry-modified-fg) 23.5px, var(--text-entry-modified-fg) 26px, var(--text-entry-modified-bg) 26.5px, var(--text-entry-modified-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-modified-bg), var(--text-entry-modified-bg) 23px, var(--text-entry-modified-fg) 23.5px, var(--text-entry-modified-fg) 26px, var(--text-entry-modified-bg) 26.5px, var(--text-entry-modified-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-modified-bg), var(--text-entry-modified-bg) 23px, var(--text-entry-modified-fg) 23.5px, var(--text-entry-modified-fg) 26px, var(--text-entry-modified-bg) 26.5px, var(--text-entry-modified-bg) 34px);
  }
  .text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor p {
    background-image: -moz-repeating-linear-gradient(top, var(--text-entry-modified-bg), var(--text-entry-modified-bg) 23px, var(--text-entry-modified-fg) 23.5px, var(--text-entry-modified-fg) 26px, var(--text-entry-modified-bg) 26.5px, var(--text-entry-modified-bg) 34px);
    background-image: -webkit-repeating-linear-gradient(var(--text-entry-modified-bg), var(--text-entry-modified-bg) 23px, var(--text-entry-modified-fg) 23.5px, var(--text-entry-modified-fg) 26px, var(--text-entry-modified-bg) 26.5px, var(--text-entry-modified-bg) 34px);
    background-image: repeating-linear-gradient(var(--text-entry-modified-bg), var(--text-entry-modified-bg) 23px, var(--text-entry-modified-fg) 23.5px, var(--text-entry-modified-fg) 26px, var(--text-entry-modified-bg) 26.5px, var(--text-entry-modified-bg) 34px);
  }
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container.ql-container.overflow-condition {
  height: calc(100% - 120px);
}
.text-entry[data-status="STATUS_STUDENT_REVISED"] .status-icon-container .icon {
  display: none;
}
.text-entry[data-focus="true"] .text-entry-label .word-count-container .current-count,
.text-entry.open-on-load .text-entry-label .word-count-container .current-count {
  font-style: italic;
  opacity: 0.6;
}
.text-entry[data-focus="true"] .bottom-button-container,
.text-entry.open-on-load .bottom-button-container {
  display: flex;
  bottom: -60px;
}
.text-entry[data-focus="true"] .bottom-button-container.overflow-condition,
.text-entry.open-on-load .bottom-button-container.overflow-condition {
  bottom: 62px !important;
}
.text-entry[data-focus="true"] .bottom-button-container.fixed,
.text-entry.open-on-load .bottom-button-container.fixed {
  position: fixed;
  bottom: 50px !important;
  left: 5%;
  width: 90%;
  z-index: 15;
}
.text-entry[data-focus="true"] .button-row,
.text-entry.open-on-load .button-row {
  display: flex;
}
.text-entry:not([data-comment=""]) .inner-container .comment-button {
  animation: pulsate 1000ms alternate infinite ease-in-out;
}
.text-entry:not([data-comment=""]) .inner-container .comment-button .add-comment {
  display: none;
}
.text-entry:not([data-comment=""]) .inner-container .comment-button .read-comment {
  display: inline;
}
.text-entry .comment-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
@media screen and (max-width: 1368px) {
  .text-entry[data-focus="true"] .bottom-button-container.fixed,
  .text-entry.open-on-load .bottom-button-container.fixed {
    left: 0;
    width: 100%;
    bottom: 40px !important;
  }
  .text-entry[data-focus="true"][data-is-mobile="true"]:not(.asset-text-entry)[data-user-type="ROLE_MANAGER"] .bottom-button-container,
  .text-entry.open-on-load[data-is-mobile="true"]:not(.asset-text-entry)[data-user-type="ROLE_MANAGER"] .bottom-button-container {
    width: 92vw;
    position: absolute !important;
    left: calc(((100% - 100vw) / 2) + 4vw);
    z-index: 15;
  }
  .text-entry[data-focus="true"][data-is-mobile="true"]:not(.asset-text-entry)[data-user-type="ROLE_MANAGER"] .bottom-button-container .revision-panel .status-button .button-text,
  .text-entry.open-on-load[data-is-mobile="true"]:not(.asset-text-entry)[data-user-type="ROLE_MANAGER"] .bottom-button-container .revision-panel .status-button .button-text {
    font-size: 16px;
  }
  .text-entry[data-focus="true"][data-is-mobile="true"]:not(.asset-text-entry)[data-user-type="ROLE_MANAGER"] .bottom-button-container .revision-panel .status-button .icon,
  .text-entry.open-on-load[data-is-mobile="true"]:not(.asset-text-entry)[data-user-type="ROLE_MANAGER"] .bottom-button-container .revision-panel .status-button .icon {
    width: 24px;
    height: 24px;
  }
  .text-entry[data-focus="true"][data-is-mobile="true"]:not(.asset-text-entry)[data-user-type="ROLE_MANAGER"] .bottom-button-container .revision-panel .save-TE-button,
  .text-entry.open-on-load[data-is-mobile="true"]:not(.asset-text-entry)[data-user-type="ROLE_MANAGER"] .bottom-button-container .revision-panel .save-TE-button {
    width: 33px;
    height: 33px;
  }
}
@media screen and (max-width: 1200px) {
  .text-entry[data-focus="true"] .bottom-button-container.fixed,
  .text-entry.open-on-load .bottom-button-container.fixed {
    bottom: 90px !important;
  }
}
@font-face {
  font-family: Eagle;
  src: url(/fonts/5c034216f83ebdcb8f19.woff2) format("woff2"), url(/fonts/e07636dc31bfd973a3d0.woff) format("woff"), url(/fonts/7e80fdbabc4b60f7179b.ttf) format("truetype");
}
@font-face {
  font-family: "Sofia Pro";
  src: url(/fonts/36caceeea96211e34cd3.woff2) format("woff2"), url(/fonts/c882ad7fd7d50a5e1684.woff) format("woff"), url(/fonts/e74cff718ec00eb5a71f.ttf) format("truetype");
}
@font-face {
  font-family: "Sofia Pro";
  src: url(/fonts/fe529ef6451acc93ccba.woff2) format("woff2"), url(/fonts/834973bb11e1b804a0e7.woff) format("woff"), url(/fonts/6c3598419b959daec424.ttf) format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Sofia Pro";
  src: url(/fonts/7d6ad1ec9a090ad4a68a.woff2) format("woff2"), url(/fonts/b52d1f5ba82fab9167ff.woff) format("woff"), url(/fonts/8efb0c8c646e9a3007e9.ttf) format("truetype");
  font-style: italic;
}
h1 {
  font-family: Eagle, Lato, sans-serif;
  font-weight: bold;
  font-size: 3em;
  text-transform: uppercase;
}
h2 {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 600;
  font-size: 2em;
  text-transform: uppercase;
}
h3 {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 600;
  font-size: 1.75em;
}
h4 {
  font-family: Eagle, Lato, sans-serif;
  font-weight: 600;
  font-size: 1.5em;
  letter-spacing: 0.04em;
}
h5 {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 400;
  font-size: 1.2em;
}
h6 {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: 0;
}
p {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 400;
  font-size: 1em;
}
small {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: normal;
  font-size: 0.75em;
  letter-spacing: 0.08em;
}
@keyframes counterAnimation {
  0% {
    background-color: var(--troubadour-main);
    transform: scale(1);
  }
  50% {
    background-color: var(--text-entry-modified-fg);
    transform: scale(1.25);
  }
  0% {
    background-color: var(--troubadour-main);
    transform: scale(1);
  }
}
@keyframes moveEndAnimation {
  0% {
    background-color: var(--text-entry-modified-fg);
  }
  75% {
    background-color: var(--text-entry-modified-fg);
  }
  100% {
    background-color: var(--default-bg);
  }
}
@keyframes moveTopSourceAnimation {
  0% {
    background-color: var(--default-bg);
    transform: scale(1);
    bottom: 0;
  }
  50% {
    background-color: var(--text-entry-modified-fg);
    transform: scale(1.02);
    bottom: 180px;
  }
  100% {
    background-color: var(--text-entry-modified-fg);
    transform: scale(1);
    bottom: 180px;
  }
}
@keyframes moveBottomTargetAnimation {
  0% {
    opacity: 1;
    top: 0;
  }
  50% {
    opacity: 0.3;
    top: 180px;
  }
  100% {
    opacity: 1;
    top: 180px;
  }
}
@keyframes moveTopTargetAnimation {
  0% {
    background-color: var(--default-bg);
    transform: scale(1);
    top: 0;
  }
  50% {
    background-color: var(--text-entry-modified-fg);
    transform: scale(1.05);
    top: 180px;
  }
  100% {
    background-color: var(--text-entry-modified-fg);
    transform: scale(1);
    top: 180px;
  }
}
@keyframes moveBottomSourceAnimation {
  0% {
    opacity: 1;
    bottom: 0;
  }
  50% {
    opacity: 0.3;
    bottom: 180px;
  }
  100% {
    opacity: 1;
    bottom: 180px;
  }
}
.text-entry.asset-text-entry {
  position: relative;
  margin: 10px 0;
  border-radius: 10px;
}
.text-entry.asset-text-entry.greyed-out {
  opacity: 0.7;
}
.text-entry.asset-text-entry.on-move .inner-container {
  animation-duration: 400ms;
}
.text-entry.asset-text-entry.on-move.move-up-source .inner-container {
  animation-name: moveTopSourceAnimation;
}
.text-entry.asset-text-entry.on-move.move-down-target .inner-container {
  animation-name: moveBottomTargetAnimation;
}
.text-entry.asset-text-entry.on-move.move-down-source .inner-container {
  animation-name: moveTopTargetAnimation;
}
.text-entry.asset-text-entry.on-move.move-up-target .inner-container {
  animation-name: moveBottomSourceAnimation;
}
.text-entry.asset-text-entry.on-move .icon-container,
.text-entry.asset-text-entry.on-move .ql-editor,
.text-entry.asset-text-entry.on-move .position-counter-wrapper,
.text-entry.asset-text-entry.on-move .reorder-buttons {
  opacity: 0;
  transition: opacity 250ms ease-out;
}
.text-entry.asset-text-entry.on-move-end .inner-container {
  animation: moveEndAnimation 1500ms forwards;
}
.text-entry.asset-text-entry.on-move-end .position-counter-wrapper {
  animation: counterAnimation 750ms forwards cubic-bezier(0.87, -0.01, 0.26, 1.22);
}
.text-entry.asset-text-entry .position-counter-wrapper {
  position: absolute;
  display: flex;
  top: -10px;
  left: -10px;
  background-color: var(--text-entry-position-counter-bg);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  z-index: 20;
}
.text-entry.asset-text-entry .position-counter-wrapper .position-counter {
  color: var(--default-color-2);
  font-weight: 600;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6em;
  margin: auto;
}
.text-entry.asset-text-entry .comment-button.text-entry-button {
  display: none !important;
  position: absolute;
  left: 116px;
  top: -8px;
  z-index: 14;
}
.text-entry.asset-text-entry .status-icon-container {
  top: -20px;
  right: -20px;
}
.text-entry.asset-text-entry .inner-container {
  position: relative;
  background: var(--default-bg);
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 10px;
  border: 2px solid var(--line-separator);
  box-shadow: var(--dropshadow2);
}
.text-entry.asset-text-entry .inner-container .open-correction-button-container {
  display: none;
  position: absolute;
  right: 40px;
  top: -20px;
  z-index: 10;
}
.text-entry.asset-text-entry .inner-container .open-correction-button-container .troubadour-button {
  display: none;
}
.text-entry.asset-text-entry .inner-container .back-to-list-button {
  display: none;
}
.text-entry.asset-text-entry .inner-container .icon-wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--default-bg);
  border-radius: 5px;
  border: 2px solid var(--text-entry-icon-border);
  padding: 2px;
}
.text-entry.asset-text-entry .inner-container .icon-wrapper .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  position: relative;
}
.text-entry.asset-text-entry .inner-container .icon-wrapper .icon-container.flip {
  transform: rotateY(180deg);
}
.text-entry.asset-text-entry .inner-container .icon-wrapper .icon-container .icon {
  position: absolute;
}
.text-entry.asset-text-entry .inner-container .icon-wrapper .icon-container .placeholder-icon {
  position: unset;
}
.text-entry.asset-text-entry .inner-container .left-section {
  display: flex;
  position: relative;
}
.text-entry.asset-text-entry .inner-container .text-container {
  flex: 1;
  height: 100px;
  margin: 0 20px;
  overflow: hidden;
}
.text-entry.asset-text-entry .inner-container .text-container .ql-editor {
  overflow: hidden;
  background: none;
}
.text-entry.asset-text-entry .inner-container .bottom-button-container {
  bottom: -63px;
}
.text-entry.asset-text-entry .inner-container .button-row {
  flex: 1 0 100%;
  padding-right: 45px;
}
.text-entry.asset-text-entry .inner-container .word-count-container {
  flex: 0 1 100%;
  text-align: right;
  margin-left: auto;
  padding-right: 10px;
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry .inner-container .word-count-container .current-count,
.text-entry.asset-text-entry .inner-container .word-count-container .currently-writing {
  transition: opacity 250ms;
}
.text-entry.asset-text-entry .inner-container .word-count-container .currently-writing:after {
  overflow: hidden;
  display: inline-block;
  -webkit-animation: ellipsis steps(4, end) 1000ms infinite;
  animation: ellipsis steps(4, end) 1000ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6em;
}
@keyframes ellipsis {
  to {
    width: 16px;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 16px;
  }
}
.text-entry.asset-text-entry .text-entry-locked {
  display: block;
  position: absolute;
  top: calc(50%);
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 150px;
  max-height: 150px;
  height: 40%;
  z-index: 10;
}
.text-entry.asset-text-entry[data-comment]:not([data-comment=""]) .comment-button.text-entry-button {
  display: flex !important;
}
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status=""][data-work-state="WAITING_FOR_VALIDATION"] .open-correction-button-container,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="NEW"][data-work-state="WAITING_FOR_VALIDATION"] .open-correction-button-container,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="STATUS_STUDENT_REVISED"][data-work-state="WAITING_FOR_VALIDATION"] .open-correction-button-container {
  display: block;
}
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status=""][data-work-state="WAITING_FOR_VALIDATION"] .open-correction-button-container .student-correction-button,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="NEW"][data-work-state="WAITING_FOR_VALIDATION"] .open-correction-button-container .student-correction-button,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="STATUS_STUDENT_REVISED"][data-work-state="WAITING_FOR_VALIDATION"] .open-correction-button-container .student-correction-button {
  display: flex;
}
.text-entry.asset-text-entry[data-user-type="ROLE_STUDENT"][data-focus="false"][data-status="CAN_BE_IMPROVED"] .open-correction-button-container {
  display: block;
}
.text-entry.asset-text-entry[data-user-type="ROLE_STUDENT"][data-focus="false"][data-status="CAN_BE_IMPROVED"] .open-correction-button-container .student-revision-button {
  display: flex;
}
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="COMPLETED"],
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="LOVED"],
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="APPROVED"],
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="CAN_BE_IMPROVED"],
.text-entry.asset-text-entry[data-user-type="ROLE_STUDENT"][data-focus="false"][data-status="STATUS_STUDENT_REVISED"] {
  min-height: 100px;
}
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="COMPLETED"] .comment-button.text-entry-button,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="LOVED"] .comment-button.text-entry-button,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="APPROVED"] .comment-button.text-entry-button,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="CAN_BE_IMPROVED"] .comment-button.text-entry-button,
.text-entry.asset-text-entry[data-user-type="ROLE_STUDENT"][data-focus="false"][data-status="STATUS_STUDENT_REVISED"] .comment-button.text-entry-button {
  left: 73px;
  top: 0px;
  width: 30px;
  height: 30px;
}
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="COMPLETED"] .inner-container,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="LOVED"] .inner-container,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="APPROVED"] .inner-container,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="CAN_BE_IMPROVED"] .inner-container,
.text-entry.asset-text-entry[data-user-type="ROLE_STUDENT"][data-focus="false"][data-status="STATUS_STUDENT_REVISED"] .inner-container {
  min-height: 100px;
  height: 100px;
  box-shadow: none;
  opacity: 0.7;
}
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="COMPLETED"] .inner-container .icon-wrapper,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="LOVED"] .inner-container .icon-wrapper,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="APPROVED"] .inner-container .icon-wrapper,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="CAN_BE_IMPROVED"] .inner-container .icon-wrapper,
.text-entry.asset-text-entry[data-user-type="ROLE_STUDENT"][data-focus="false"][data-status="STATUS_STUDENT_REVISED"] .inner-container .icon-wrapper {
  height: 50px;
  width: 50px;
}
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="COMPLETED"] .inner-container .text-container,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="LOVED"] .inner-container .text-container,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="APPROVED"] .inner-container .text-container,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="CAN_BE_IMPROVED"] .inner-container .text-container,
.text-entry.asset-text-entry[data-user-type="ROLE_STUDENT"][data-focus="false"][data-status="STATUS_STUDENT_REVISED"] .inner-container .text-container {
  height: 50px;
  padding: 13px 0;
}
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="COMPLETED"] .inner-container .text-container .ql-editor,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="LOVED"] .inner-container .text-container .ql-editor,
.text-entry.asset-text-entry[data-user-type]:not(
      [data-user-type=""]
    )[data-focus="false"][data-status="APPROVED"] .inner-container .text-container .ql-editor,
.text-entry.asset-text-entry[data-user-type="ROLE_MANAGER"][data-focus="false"][data-status="CAN_BE_IMPROVED"] .inner-container .text-container .ql-editor,
.text-entry.asset-text-entry[data-user-type="ROLE_STUDENT"][data-focus="false"][data-status="STATUS_STUDENT_REVISED"] .inner-container .text-container .ql-editor {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry[data-focus="true"],
.text-entry.asset-text-entry.open-on-load {
  margin-top: 30px;
  height: 100%;
  overflow: visible;
  border-radius: 0 0 10px 10px;
}
.text-entry.asset-text-entry[data-focus="true"] .position-counter-wrapper,
.text-entry.asset-text-entry.open-on-load .position-counter-wrapper {
  top: -10px;
  left: -10px;
}
.text-entry.asset-text-entry[data-focus="true"] .comment-button.text-entry-button,
.text-entry.asset-text-entry.open-on-load .comment-button.text-entry-button {
  top: -8px;
}
.text-entry.asset-text-entry[data-focus="true"] .status-icon-container,
.text-entry.asset-text-entry.open-on-load .status-icon-container {
  top: -20px;
  right: -20px;
}
.text-entry.asset-text-entry[data-focus="true"] .inner-container,
.text-entry.asset-text-entry.open-on-load .inner-container {
  align-items: flex-start;
  border-radius: 10px 10px 0 0;
}
.text-entry.asset-text-entry[data-focus="true"] .inner-container .back-to-list-button,
.text-entry.asset-text-entry.open-on-load .inner-container .back-to-list-button {
  margin-top: 10px;
  display: flex;
}
.text-entry.asset-text-entry[data-focus="true"] .text-container,
.text-entry.asset-text-entry.open-on-load .text-container {
  padding: 0;
  min-height: 35vh;
  max-height: 20vh;
}
.text-entry.asset-text-entry[data-focus="true"] .ql-editor,
.text-entry.asset-text-entry.open-on-load .ql-editor {
  overflow-y: auto !important;
}
.text-entry.asset-text-entry[data-focus="true"] .ql-editor p,
.text-entry.asset-text-entry.open-on-load .ql-editor p {
  padding: 10px 30px 0 30px !important;
}
.text-entry.asset-text-entry[data-focus="true"] .collapse-button .icon,
.text-entry.asset-text-entry.open-on-load .collapse-button .icon {
  transform: rotate(-90deg);
}
.text-entry.asset-text-entry[data-focus="true"] .left-section,
.text-entry.asset-text-entry.open-on-load .left-section {
  flex-direction: column;
}
.text-entry.asset-text-entry[data-focus="true"] .left-section .text-entry-button,
.text-entry.asset-text-entry.open-on-load .left-section .text-entry-button {
  margin: 5px 0;
}
.text-entry.asset-text-entry[data-focus="true"] .word-count-container,
.text-entry.asset-text-entry.open-on-load .word-count-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 25px;
}
.text-entry.asset-text-entry[data-focus="true"] .word-count-container .current-count,
.text-entry.asset-text-entry.open-on-load .word-count-container .current-count {
  font-style: italic;
  opacity: 0.6;
}
.text-entry.asset-text-entry .inner-container {
  background-color: var(--default-bg);
}
.text-entry.asset-text-entry[data-focus="false"][data-status="NEW"] .inner-container {
  background-color: var(--text-entry-new-bg2);
}
.text-entry.asset-text-entry[data-focus="false"][data-status="COMPLETED"] .inner-container {
  background-color: var(--text-entry-completed-bg2);
}
.text-entry.asset-text-entry[data-focus="false"][data-status="LOVED"] .inner-container {
  background-color: var(--text-entry-loved-bg2);
}
.text-entry.asset-text-entry[data-focus="false"][data-status="APPROVED"] .inner-container {
  background-color: var(--text-entry-approved-bg2);
}
.text-entry.asset-text-entry[data-focus="false"][data-status="CAN_BE_IMPROVED"] .inner-container {
  background-color: var(--text-entry-improved-bg2);
}
.text-entry.asset-text-entry[data-focus="false"][data-status="STATUS_STUDENT_REVISED"] .inner-container {
  background-color: var(--text-entry-modified-bg2);
}
.text-entry.asset-text-entry .text-container {
  background-color: var(--text-entry-bg3);
  background-image: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry.asset-text-entry .text-container .ql-editor {
  padding: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry.asset-text-entry .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-thumb2);
  border-radius: 5px;
}
.text-entry.asset-text-entry .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-track2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.asset-text-entry .text-container .ql-editor {
    scrollbar-color: var(--text-entry-thumb2) var(--text-entry-track2);
    scrollbar-width: thin;
  }
}
.text-entry.asset-text-entry .text-container .ql-editor p {
  padding: 0 20px;
  background-image: none;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  text-align: left;
}
.text-entry.asset-text-entry[data-status="NEW"] .text-container {
  background-color: var(--text-entry-new-bg3);
  background-image: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry.asset-text-entry[data-status="NEW"] .text-container .ql-editor {
  padding: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry[data-status="NEW"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry.asset-text-entry[data-status="NEW"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-new-thumb2);
  border-radius: 5px;
}
.text-entry.asset-text-entry[data-status="NEW"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-new-track2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.asset-text-entry[data-status="NEW"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-new-thumb2) var(--text-entry-new-track2);
    scrollbar-width: thin;
  }
}
.text-entry.asset-text-entry[data-status="NEW"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: none;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  text-align: left;
}
.text-entry.asset-text-entry[data-status="NEW"] .status-icon-container .icon[data-status="NEW"] {
  display: none !important;
}
.text-entry.asset-text-entry[data-status="COMPLETED"] .text-container {
  background-color: var(--text-entry-completed-bg3);
  background-image: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry.asset-text-entry[data-status="COMPLETED"] .text-container .ql-editor {
  padding: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry[data-status="COMPLETED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry.asset-text-entry[data-status="COMPLETED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-completed-thumb2);
  border-radius: 5px;
}
.text-entry.asset-text-entry[data-status="COMPLETED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-completed-track2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.asset-text-entry[data-status="COMPLETED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-completed-thumb2) var(--text-entry-completed-track2);
    scrollbar-width: thin;
  }
}
.text-entry.asset-text-entry[data-status="COMPLETED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: none;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  text-align: left;
}
.text-entry.asset-text-entry[data-status="COMPLETED"] .status-icon-container .icon[data-status="COMPLETED"] {
  display: flex;
}
.text-entry.asset-text-entry[data-status="COMPLETED"] .status-icon-container .icon[data-status="COMPLETED"] img.icon {
  display: block !important;
}
.text-entry.asset-text-entry[data-status="LOVED"] .text-container {
  background-color: var(--text-entry-loved-bg3);
  background-image: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry.asset-text-entry[data-status="LOVED"] .text-container .ql-editor {
  padding: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry[data-status="LOVED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry.asset-text-entry[data-status="LOVED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-loved-thumb2);
  border-radius: 5px;
}
.text-entry.asset-text-entry[data-status="LOVED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-loved-track2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.asset-text-entry[data-status="LOVED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-loved-thumb2) var(--text-entry-loved-track2);
    scrollbar-width: thin;
  }
}
.text-entry.asset-text-entry[data-status="LOVED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: none;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  text-align: left;
}
.text-entry.asset-text-entry[data-status="LOVED"] .status-icon-container .icon[data-status="LOVED"] {
  display: flex;
}
.text-entry.asset-text-entry[data-status="LOVED"] .status-icon-container .icon[data-status="LOVED"] img.icon {
  display: block !important;
}
.text-entry.asset-text-entry[data-status="APPROVED"] .text-container {
  background-color: var(--text-entry-approved-bg3);
  background-image: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry.asset-text-entry[data-status="APPROVED"] .text-container .ql-editor {
  padding: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry[data-status="APPROVED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry.asset-text-entry[data-status="APPROVED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-approved-thumb2);
  border-radius: 5px;
}
.text-entry.asset-text-entry[data-status="APPROVED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-approved-track2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.asset-text-entry[data-status="APPROVED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-approved-thumb2) var(--text-entry-approved-track2);
    scrollbar-width: thin;
  }
}
.text-entry.asset-text-entry[data-status="APPROVED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: none;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  text-align: left;
}
.text-entry.asset-text-entry[data-status="APPROVED"] .status-icon-container .icon[data-status="APPROVED"] {
  display: flex;
}
.text-entry.asset-text-entry[data-status="APPROVED"] .status-icon-container .icon[data-status="APPROVED"] img.icon {
  display: block !important;
}
.text-entry.asset-text-entry[data-status="CAN_BE_IMPROVED"] .text-container {
  background-color: var(--text-entry-improved-bg3);
  background-image: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry.asset-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor {
  padding: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry.asset-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-improved-thumb2);
  border-radius: 5px;
}
.text-entry.asset-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-improved-track2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.asset-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-improved-thumb2) var(--text-entry-improved-track2);
    scrollbar-width: thin;
  }
}
.text-entry.asset-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: none;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  text-align: left;
}
.text-entry.asset-text-entry[data-status="CAN_BE_IMPROVED"] .status-icon-container .icon[data-status="CAN_BE_IMPROVED"] {
  display: flex;
}
.text-entry.asset-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container {
  background-color: var(--text-entry-modified-bg3);
  background-image: none;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
.text-entry.asset-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor {
  padding: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.6em;
}
.text-entry.asset-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.text-entry.asset-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-modified-thumb2);
  border-radius: 5px;
}
.text-entry.asset-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--text-entry-modified-track2);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.asset-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor {
    scrollbar-color: var(--text-entry-modified-thumb2) var(--text-entry-modified-track2);
    scrollbar-width: thin;
  }
}
.text-entry.asset-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor p {
  padding: 0 20px;
  background-image: none;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  text-align: left;
}
.text-entry.asset-text-entry[data-status="STATUS_STUDENT_REVISED"] .status-icon-container .icon {
  display: none !important;
}
.text-entry.asset-text-entry[data-work-state="WAITING_FOR_VALIDATION"] .position-counter-wrapper {
  top: -10px;
  left: -10px;
}
@media screen and (max-width: 768px) {
  .text-entry.asset-text-entry {
    margin: 30px 0;
  }
  .text-entry.asset-text-entry .comment-button.text-entry-button {
    left: 0 !important;
    top: 0 !important;
    width: 30px !important;
    height: 30px !important;
    transform: translate3d(77px, -100%, 10px);
    transition: all 1ms linear;
  }
  .text-entry.asset-text-entry .inner-container {
    padding: 10px;
  }
  .text-entry.asset-text-entry .inner-container .left-section {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(20px, -44px, 1px);
    transition: all 1ms linear;
  }
  .text-entry.asset-text-entry .inner-container .left-section .icon-wrapper {
    width: 50px !important;
    height: 50px !important;
  }
  .text-entry.asset-text-entry .inner-container .text-container {
    margin: 0 5px !important;
  }
  .text-entry.asset-text-entry .inner-container .text-container .ql-editor p {
    padding: 0 10px !important;
  }
}
.text-entry.narration-text-entry {
  padding: 0;
  width: 100%;
  min-height: 400px;
  height: 400px;
  max-height: 400px;
  margin: 0 auto 72px;
}
.text-entry.narration-text-entry .inner-container {
  position: relative;
  height: 400px;
  min-height: 400px;
  max-height: 400px;
  padding: 0 !important;
}
.text-entry.narration-text-entry .inner-container .text-entry-label {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  font-size: clamp(14px, 2vw, 23px);
  line-height: 1em;
  height: 40px;
  margin: 0;
  padding: 5px 25px;
}
.text-entry.narration-text-entry .inner-container .text-entry-label .word-count-container {
  font-size: clamp(12px, 2vw, 20px);
}
.text-entry.narration-text-entry .text-container {
  height: 360px;
  min-height: 360px;
  max-height: 360px;
  overflow-y: auto;
}
@media screen and (max-width: 768px) {
  .text-entry.narration-text-entry .text-container {
    height: 240px;
    min-height: 240px;
    max-height: 240px;
  }
}
.text-entry.narration-text-entry[data-focus="true"] .bottom-button-container,
.text-entry.narration-text-entry.open-on-load .bottom-button-container {
  top: calc(100% - 4px);
}
.text-entry.narration-text-entry[data-focus="true"] .bottom-button-container .revision-panel,
.text-entry.narration-text-entry.open-on-load .bottom-button-container .revision-panel {
  width: 100%;
}
.text-entry.narration-text-entry[data-focus="false"] .text-container,
.text-entry.narration-text-entry[data-focus="false"] .ql-editor {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .text-entry.narration-text-entry {
    min-height: 280px;
    height: 280px;
    max-height: 280px;
    width: calc(100% - 60px);
    margin: 0 auto 36px;
  }
  .text-entry.narration-text-entry .inner-container {
    height: 280px;
    min-height: 280px;
    max-height: 280px;
  }
  .text-entry.narration-text-entry[data-focus="true"] .bottom-button-container .revision-panel {
    min-width: unset;
  }
}
.popup-text-entry-container {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--workblock-bg);
  z-index: 201;
  top: 0;
  left: 0;
}
.popup-text-entry-container[data-focus="true"] {
  display: block;
}
.popup-text-entry-container .text-entry {
  height: 25vh !important;
  max-height: 25vh;
  transition: height 250ms;
  top: 0;
  position: fixed;
  width: 96%;
  margin: 0 2% auto 2% !important;
}
.popup-text-entry-container .text-entry.title-text-entry[data-user-type="ROLE_STUDENT"],
.popup-text-entry-container .text-entry.narration-text-entry[data-user-type="ROLE_STUDENT"] {
  width: 96%;
  margin: 0 2% auto 2% !important;
}
.popup-text-entry-container .text-entry.title-text-entry[data-user-type="ROLE_STUDENT"] {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
}
.popup-text-entry-container .text-entry.title-text-entry[data-user-type="ROLE_STUDENT"] .inner-container {
  position: relative;
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  padding: 0 !important;
}
.popup-text-entry-container .text-entry.title-text-entry[data-user-type="ROLE_STUDENT"] .text-container {
  height: 110px;
  min-height: 110px;
  max-height: 110px;
}
.popup-text-entry-container .text-entry.narration-text-entry[data-user-type="ROLE_STUDENT"] {
  height: 240px;
  min-height: 240px;
  max-height: 240px;
}
.popup-text-entry-container .text-entry.narration-text-entry[data-user-type="ROLE_STUDENT"] .inner-container {
  position: relative;
  height: 240px;
  min-height: 240px;
  max-height: 240px;
  padding: 0 !important;
}
.popup-text-entry-container .text-entry.narration-text-entry[data-user-type="ROLE_STUDENT"] .text-container {
  height: 200px;
  min-height: 200px;
  max-height: 200px;
}
.text-entry.title-text-entry {
  width: 80%;
  height: 170px;
  min-height: 170px;
  max-height: 170px;
  margin: 0 10% 72px;
  padding: 0;
}
.text-entry.title-text-entry .inner-container {
  position: relative;
  height: 170px;
  min-height: 170px;
  max-height: 170px;
  padding: 0 !important;
}
.text-entry.title-text-entry .inner-container .text-entry-label {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  font-size: clamp(14px, 2vw, 23px);
  line-height: 1em;
  height: 40px;
  margin: 0;
  padding: 5px 25px;
}
.text-entry.title-text-entry .inner-container .text-entry-label .word-count-container {
  font-size: clamp(12px, 2vw, 23px);
}
.text-entry.title-text-entry[data-focus="true"] .bottom-button-container,
.text-entry.title-text-entry.open-on-load .bottom-button-container {
  top: calc(100% - 4px);
}
.text-entry.title-text-entry[data-focus="true"] .bottom-button-container .revision-panel,
.text-entry.title-text-entry.open-on-load .bottom-button-container .revision-panel {
  width: 100%;
}
.text-entry.title-text-entry[data-focus="false"] .text-container,
.text-entry.title-text-entry[data-focus="false"] .ql-editor {
  overflow: hidden;
}
.text-entry.title-text-entry[data-status=""] .text-container {
  height: 130px;
  min-height: 130px;
  max-height: 130px;
  overflow-y: auto;
  background-position-y: 8px !important;
}
.text-entry.title-text-entry[data-status=""] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry.title-text-entry[data-status=""] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-new-thumb);
  border-radius: 5px;
}
.text-entry.title-text-entry[data-status=""] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-new-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.title-text-entry[data-status=""] .text-container {
    scrollbar-color: var(--text-entry-new-thumb) var(--text-entry-new-track);
    scrollbar-width: thin;
  }
}
.text-entry.title-text-entry[data-status=""] .text-container .ql-editor {
  width: 100%;
  padding: 20px;
  background-image: none;
}
.text-entry.title-text-entry[data-status=""] .text-container .ql-editor p {
  padding: 20px;
  font-size: 57px;
  line-height: 1.2em;
  text-align: center;
  background-image: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .text-entry.title-text-entry[data-status=""] .text-container {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
  }
  .text-entry.title-text-entry[data-status=""] .text-container .ql-editor p {
    font-size: 28px;
  }
}
.text-entry.title-text-entry[data-status="NEW"] .text-container {
  height: 130px;
  min-height: 130px;
  max-height: 130px;
  overflow-y: auto;
  background-position-y: 8px !important;
}
.text-entry.title-text-entry[data-status="NEW"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry.title-text-entry[data-status="NEW"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-new-thumb);
  border-radius: 5px;
}
.text-entry.title-text-entry[data-status="NEW"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-new-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.title-text-entry[data-status="NEW"] .text-container {
    scrollbar-color: var(--text-entry-new-thumb) var(--text-entry-new-track);
    scrollbar-width: thin;
  }
}
.text-entry.title-text-entry[data-status="NEW"] .text-container .ql-editor {
  width: 100%;
  padding: 20px;
  background-image: none;
}
.text-entry.title-text-entry[data-status="NEW"] .text-container .ql-editor p {
  padding: 20px;
  font-size: 57px;
  line-height: 1.2em;
  text-align: center;
  background-image: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .text-entry.title-text-entry[data-status="NEW"] .text-container {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
  }
  .text-entry.title-text-entry[data-status="NEW"] .text-container .ql-editor p {
    font-size: 28px;
  }
}
.text-entry.title-text-entry[data-status="COMPLETED"] .text-container {
  height: 130px;
  min-height: 130px;
  max-height: 130px;
  overflow-y: auto;
  background-position-y: 8px !important;
}
.text-entry.title-text-entry[data-status="COMPLETED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry.title-text-entry[data-status="COMPLETED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-completed-thumb);
  border-radius: 5px;
}
.text-entry.title-text-entry[data-status="COMPLETED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-completed-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.title-text-entry[data-status="COMPLETED"] .text-container {
    scrollbar-color: var(--text-entry-completed-thumb) var(--text-entry-completed-track);
    scrollbar-width: thin;
  }
}
.text-entry.title-text-entry[data-status="COMPLETED"] .text-container .ql-editor {
  width: 100%;
  padding: 20px;
  background-image: none;
}
.text-entry.title-text-entry[data-status="COMPLETED"] .text-container .ql-editor p {
  padding: 20px;
  font-size: 57px;
  line-height: 1.2em;
  text-align: center;
  background-image: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .text-entry.title-text-entry[data-status="COMPLETED"] .text-container {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
  }
  .text-entry.title-text-entry[data-status="COMPLETED"] .text-container .ql-editor p {
    font-size: 28px;
  }
}
.text-entry.title-text-entry[data-status="LOVED"] .text-container {
  height: 130px;
  min-height: 130px;
  max-height: 130px;
  overflow-y: auto;
  background-position-y: 8px !important;
}
.text-entry.title-text-entry[data-status="LOVED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry.title-text-entry[data-status="LOVED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-loved-thumb);
  border-radius: 5px;
}
.text-entry.title-text-entry[data-status="LOVED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-loved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.title-text-entry[data-status="LOVED"] .text-container {
    scrollbar-color: var(--text-entry-loved-thumb) var(--text-entry-loved-track);
    scrollbar-width: thin;
  }
}
.text-entry.title-text-entry[data-status="LOVED"] .text-container .ql-editor {
  width: 100%;
  padding: 20px;
  background-image: none;
}
.text-entry.title-text-entry[data-status="LOVED"] .text-container .ql-editor p {
  padding: 20px;
  font-size: 57px;
  line-height: 1.2em;
  text-align: center;
  background-image: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .text-entry.title-text-entry[data-status="LOVED"] .text-container {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
  }
  .text-entry.title-text-entry[data-status="LOVED"] .text-container .ql-editor p {
    font-size: 28px;
  }
}
.text-entry.title-text-entry[data-status="APPROVED"] .text-container {
  height: 130px;
  min-height: 130px;
  max-height: 130px;
  overflow-y: auto;
  background-position-y: 8px !important;
}
.text-entry.title-text-entry[data-status="APPROVED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry.title-text-entry[data-status="APPROVED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-approved-thumb);
  border-radius: 5px;
}
.text-entry.title-text-entry[data-status="APPROVED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-approved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.title-text-entry[data-status="APPROVED"] .text-container {
    scrollbar-color: var(--text-entry-approved-thumb) var(--text-entry-approved-track);
    scrollbar-width: thin;
  }
}
.text-entry.title-text-entry[data-status="APPROVED"] .text-container .ql-editor {
  width: 100%;
  padding: 20px;
  background-image: none;
}
.text-entry.title-text-entry[data-status="APPROVED"] .text-container .ql-editor p {
  padding: 20px;
  font-size: 57px;
  line-height: 1.2em;
  text-align: center;
  background-image: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .text-entry.title-text-entry[data-status="APPROVED"] .text-container {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
  }
  .text-entry.title-text-entry[data-status="APPROVED"] .text-container .ql-editor p {
    font-size: 28px;
  }
}
.text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container {
  height: 130px;
  min-height: 130px;
  max-height: 130px;
  overflow-y: auto;
  background-position-y: 8px !important;
}
.text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-improved-thumb);
  border-radius: 5px;
}
.text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-improved-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container {
    scrollbar-color: var(--text-entry-improved-thumb) var(--text-entry-improved-track);
    scrollbar-width: thin;
  }
}
.text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor {
  width: 100%;
  padding: 20px;
  background-image: none;
}
.text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor p {
  padding: 20px;
  font-size: 57px;
  line-height: 1.2em;
  text-align: center;
  background-image: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
  }
  .text-entry.title-text-entry[data-status="CAN_BE_IMPROVED"] .text-container .ql-editor p {
    font-size: 28px;
  }
}
.text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container {
  height: 130px;
  min-height: 130px;
  max-height: 130px;
  overflow-y: auto;
  background-position-y: 8px !important;
}
.text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container::-webkit-scrollbar {
  width: 8px;
}
.text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container::-webkit-scrollbar-thumb {
  background-color: var(--text-entry-modified-thumb);
  border-radius: 5px;
}
.text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container::-webkit-scrollbar-track {
  background-color: var(--text-entry-modified-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container {
    scrollbar-color: var(--text-entry-modified-thumb) var(--text-entry-modified-track);
    scrollbar-width: thin;
  }
}
.text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor {
  width: 100%;
  padding: 20px;
  background-image: none;
}
.text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor p {
  padding: 20px;
  font-size: 57px;
  line-height: 1.2em;
  text-align: center;
  background-image: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
  }
  .text-entry.title-text-entry[data-status="STATUS_STUDENT_REVISED"] .text-container .ql-editor p {
    font-size: 28px;
  }
}
@media screen and (max-width: 768px) {
  .text-entry.title-text-entry {
    min-height: 120px;
    height: 120px;
    max-height: 120px;
    width: calc(100% - 60px);
    margin: 0 auto 36px;
  }
  .text-entry.title-text-entry .inner-container {
    height: 120px;
    min-height: 120px;
    max-height: 120px;
  }
  .text-entry.title-text-entry[data-focus="true"] .bottom-button-container .revision-panel {
    min-width: unset;
  }
}
.nanopopup.teacher-challenge-instructions-popup,
.nanopopup.student-challenge-instructions-popup {
  background-color: var(--default-bg-2);
  color: var(--default-color-8);
  height: auto !important;
  max-width: 700px !important;
  overflow: hidden;
}
.nanopopup.teacher-challenge-instructions-popup .close-container,
.nanopopup.student-challenge-instructions-popup .close-container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--challenge-info-popup-close-btn);
  left: 10px;
  top: 10px;
  z-index: 100;
}
.nanopopup.teacher-challenge-instructions-popup .close-container i,
.nanopopup.student-challenge-instructions-popup .close-container i,
.nanopopup.teacher-challenge-instructions-popup .close-container svg,
.nanopopup.student-challenge-instructions-popup .close-container svg {
  font-size: 20px;
  color: var(--default-bg-2);
}
.nanopopup.teacher-challenge-instructions-popup .close-container:hover,
.nanopopup.student-challenge-instructions-popup .close-container:hover {
  filter: brightness(1.1);
}
.nanopopup.teacher-challenge-instructions-popup,
.nanopopup.student-challenge-instructions-popup {
  padding: 0 !important;
  background-color: var(--default-bg);
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description,
.nanopopup.student-challenge-instructions-popup .challenge-description {
  height: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description header,
.nanopopup.student-challenge-instructions-popup .challenge-description header {
  position: relative;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--text-entry-approved-fg);
  text-align: center;
  padding: 0;
  font-weight: normal;
  border-radius: 10px 10px 0 0;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description header .description-label,
.nanopopup.student-challenge-instructions-popup .challenge-description header .description-label {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 2vw, 23px);
  line-height: 1.2em;
  color: var(--text-entry-approved-label-bg);
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
  max-width: calc(100% - 120px);
  gap: 10px;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description header .description-label::before,
.nanopopup.student-challenge-instructions-popup .challenge-description header .description-label::before {
  content: "";
  aspect-ratio: 1 / 1;
  width: clamp(30px, 4vw, 38px);
  border-radius: 50%;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-info.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content,
.nanopopup.student-challenge-instructions-popup .challenge-description .content {
  margin: 20px 15px;
  padding: 0 25px;
  height: 90vh;
  max-height: 330px;
  overflow-y: auto;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content::-webkit-scrollbar,
.nanopopup.student-challenge-instructions-popup .challenge-description .content::-webkit-scrollbar {
  width: 10px;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content::-webkit-scrollbar-thumb,
.nanopopup.student-challenge-instructions-popup .challenge-description .content::-webkit-scrollbar-thumb {
  background-color: var(--description-scrollbar-thumb);
  border-radius: 5px;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content::-webkit-scrollbar-track,
.nanopopup.student-challenge-instructions-popup .challenge-description .content::-webkit-scrollbar-track {
  background-color: var(--description-scrollbar-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .nanopopup.teacher-challenge-instructions-popup .challenge-description .content,
  .nanopopup.student-challenge-instructions-popup .challenge-description .content {
    scrollbar-width: auto;
    scrollbar-color: var(--description-scrollbar-thumb) var(--description-scrollbar-track);
  }
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .title-section,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .title-section {
  margin: 0 0 20px;
  padding: 0;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .title-section .challenge-num-pages,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .title-section .challenge-num-pages {
  color: var(--text-entry-approved-label-bg);
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 400;
  line-height: 1.2em;
  text-transform: none;
  margin: 0 0 20px;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .title-section .challenge-title,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .title-section .challenge-title {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.2em;
  padding: 0;
  word-break: break-all;
  text-transform: none;
  margin: 0;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section {
  height: initial;
  max-height: 225px;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .instructions-title,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .instructions-title {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.2em;
  text-transform: none;
  margin: 0 0 5px;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .description-text,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .description-text,
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .instructions-text,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .instructions-text {
  display: flex;
  flex-direction: column;
  font-family: "Sofia Pro", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.4em;
  padding: 0;
  text-align: left;
  white-space: normal;
  overflow: hidden;
  height: auto;
  word-break: normal;
  word-wrap: normal;
  border: none;
  background-color: transparent;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .description-text.ql-editor,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .description-text.ql-editor,
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .instructions-text.ql-editor,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .instructions-text.ql-editor {
  line-height: unset;
  overflow: unset;
  height: unset;
  padding: unset;
  white-space: unset;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .description-text.ql-editor ul,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .description-text.ql-editor ul,
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .instructions-text.ql-editor ul,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .instructions-text.ql-editor ul,
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .description-text.ql-editor ol,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .description-text.ql-editor ol,
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .instructions-text.ql-editor ol,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .instructions-text.ql-editor ol {
  padding-left: unset;
}
.nanopopup.teacher-challenge-instructions-popup .challenge-description .content .description-section .description-text,
.nanopopup.student-challenge-instructions-popup .challenge-description .content .description-section .description-text {
  margin-bottom: 30px;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.teacher-challenge-instructions-popup,
  .nanopopup.student-challenge-instructions-popup {
    border-radius: 10px !important;
    width: 90vw !important;
    height: 90vh !important;
    min-height: auto !important;
    max-height: 440px !important;
    min-width: 350px !important;
    max-width: 700px !important;
  }
}
.nanopopup.comment-popup {
  flex-direction: column;
  border-radius: 5px;
  background-color: var(--troubadour-main-15);
  overflow: hidden;
}
.nanopopup.comment-popup .close-container {
  top: 10px;
  left: 10px;
  width: clamp(30px, 4vw, 50px);
  height: clamp(30px, 4vw, 50px);
  border-radius: 50%;
  background-color: var(--troubadour-main-5);
  z-index: 100;
}
.nanopopup.comment-popup .close-container i,
.nanopopup.comment-popup .close-container svg {
  font-size: clamp(20px, 3vw, 30px);
  color: var(--troubadour-main-16);
}
.nanopopup.comment-popup .close-container:hover {
  filter: brightness(1.2);
}
.nanopopup.comment-popup[style*="display: block"] {
  display: flex !important;
}
.nanopopup.comment-popup h2 {
  color: var(--troubadour-main-5);
  text-align: center;
  font-size: clamp(24px, 4vw, 48px);
  line-height: 1.2em;
  text-transform: none;
  margin: 0 0 30px;
}
.nanopopup.comment-popup .title {
  color: var(--troubadour-main-5);
  text-align: left;
  margin: 0 0 5px;
  padding: 0;
  font-size: clamp(18px, 3vw, 32px);
}
.nanopopup.comment-popup .ql-toolbar {
  padding: 0 !important;
}
.nanopopup.comment-popup .student-text-container {
  width: 100%;
  height: 100%;
  max-height: 25%;
  margin: 0 0 40px;
  overflow: hidden;
}
.nanopopup.comment-popup .student-text-container .student-text {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 15px;
  background-color: var(--default-color-2);
  border: 1px solid var(--default-color-7);
  overflow-y: auto;
  cursor: default;
}
.nanopopup.comment-popup .student-text-container .student-text::-webkit-scrollbar {
  width: 8px;
}
.nanopopup.comment-popup .student-text-container .student-text::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main-5);
  border-radius: 5px;
}
.nanopopup.comment-popup .student-text-container .student-text::-webkit-scrollbar-track {
  background-color: var(--default-color-7);
}
@supports not selector(::-webkit-scrollbar) {
  .nanopopup.comment-popup .student-text-container .student-text {
    scrollbar-color: var(--troubadour-main-5) var(--default-color-7);
    scrollbar-width: thin;
  }
}
.nanopopup.comment-popup .student-text-container .student-text p {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.2em;
}
.nanopopup.comment-popup .quill-container {
  width: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  margin: 0 0 40px;
  padding-bottom: 10px;
}
.nanopopup.comment-popup .quill-container .text-container {
  width: 100%;
  height: 100%;
  max-height: 25%;
  border: 1px solid var(--default-color-7);
  overflow-y: auto;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.2em;
}
.nanopopup.comment-popup .quill-container .text-container .ql-editor::-webkit-scrollbar {
  width: 8px;
}
.nanopopup.comment-popup .quill-container .text-container .ql-editor::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main-5);
  border-radius: 5px;
}
.nanopopup.comment-popup .quill-container .text-container .ql-editor::-webkit-scrollbar-track {
  background-color: var(--default-color-7);
}
@supports not selector(::-webkit-scrollbar) {
  .nanopopup.comment-popup .quill-container .text-container .ql-editor {
    scrollbar-color: var(--troubadour-main-5) var(--default-color-7);
    scrollbar-width: thin;
  }
}
.nanopopup.comment-popup .quill-container .text-container .ql-editor p {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.2em;
}
.nanopopup.comment-popup .action-buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 20px 80px;
}
.nanopopup.comment-popup .status-button-label {
  text-align: center;
  font-size: 24px;
  padding-bottom: 7px;
}
.nanopopup.comment-popup .status-button-container {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
}
.nanopopup.comment-popup .status-button-container .status-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  margin: 0 5px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 250ms;
  font-size: 1em;
}
.nanopopup.comment-popup .status-button-container .status-button span {
  margin: 0 10px;
}
.nanopopup.comment-popup[data-context="correction"] .quill-container .text-container {
  border: 1px solid var(--default-color-7);
  height: 175px;
  max-height: 175px;
  overflow-x: hidden;
  overflow-y: auto;
}
.nanopopup.comment-popup[data-context="exploration"] .quill-container,
.nanopopup.comment-popup[data-context="construction"] .quill-container {
  max-height: 80%;
}
.nanopopup.comment-popup[data-context="exploration"] .quill-container .text-container,
.nanopopup.comment-popup[data-context="construction"] .quill-container .text-container {
  border: none;
  font-size: 1.6em !important;
  line-height: 1.6em;
  max-height: 100%;
  padding-right: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.comment-popup {
    padding: 50px 5% 40px !important;
    width: 90vw !important;
    height: auto !important;
    min-width: 300px !important;
    max-width: 960px !important;
    min-height: 200px !important;
    max-height: unset !important;
  }
}
.construction-help-popup {
  max-width: 90%;
  width: 90%;
  height: calc(100vh - 50px);
  flex-direction: column;
  padding-bottom: 40px !important;
}
.construction-help-popup.display {
  display: flex;
}
.construction-help-popup .close-container .close-button {
  color: var(--troubadour-main);
}
.construction-help-popup .title {
  color: var(--troubadour-main);
}
.construction-help-popup .popup-section {
  flex: 1;
  display: flex;
  max-height: 85%;
}
.construction-help-popup .popup-section .illustration-section {
  position: relative;
  min-width: 17%;
  margin-right: 30px;
}
.construction-help-popup .popup-section .illustration-section .squirrel-illustration {
  width: 100%;
  position: absolute;
  bottom: -15px;
  left: 0;
}
.construction-help-popup .popup-section .content-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}
.construction-help-popup .popup-section .content-container .help-section {
  flex: 1 1 30%;
  min-width: 250px;
}
.construction-help-popup .popup-section .content-container .help-section .help-section-subtitle {
  text-align: center;
  color: var(--primary-text-2);
  margin-bottom: 30px;
}
.construction-help-popup .popup-section .content-container .help-section img {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
}
.construction-help-popup .popup-section .content-container .button-group {
  flex: 0 0 100%;
  justify-content: flex-end;
  margin-top: auto;
}
.construction-help-popup .popup-section .content-container .button-group .troubadour-button {
  margin-top: auto;
}
@media screen and (max-width: 1024px) {
  .construction-help-popup .title {
    font-size: 30px;
    margin: 0;
  }
  .construction-help-popup .illustration-section {
    display: none;
  }
}
.construction-window-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 10px;
  background-color: var(--default-bg);
  border-radius: 0 10px 10px 0;
  gap: 10px;
}
.construction-window-controls .stub-separator {
  display: none;
}
.construction-window-controls[data-opened="true"] .categorie-explorer-button.active,
.construction-window-controls[data-opened="true"] .scenery-button.active {
  position: relative;
}
.construction-window-controls[data-opened="true"] .categorie-explorer-button.active::before,
.construction-window-controls[data-opened="true"] .scenery-button.active::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 15px;
  height: 15px;
  background-color: var(--default-bg);
  border-color: var(--workpage-nav-separator);
  border-style: solid;
  border-width: 2px 2px 0 0;
  transform: translate(21px, -50%) rotate(45deg);
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .construction-window-controls[data-opened="true"] .categorie-explorer-button.active::before,
  .construction-window-controls[data-opened="true"] .scenery-button.active::before {
    right: 0;
  }
}
.construction-window .construction-window-ui .controls-container {
  position: absolute;
  top: 55px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 5 !important;
}
.construction-window .construction-window-ui .mode-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 10px;
  background-color: var(--default-bg);
  border-radius: 0 10px 10px 0;
  gap: 10px;
  margin-bottom: 15px;
}
.construction-window .construction-window-ui .mode-controls .close-construction-button {
  font-size: 40px;
  color: var(--troubadour-main);
}
.construction-window .construction-window-ui .mode-controls .stub-separator {
  display: none;
}
.construction-window .construction-window-ui .mode-controls[data-opened="true"] .categorie-explorer-button.active,
.construction-window .construction-window-ui .mode-controls[data-opened="true"] .scenery-button.active {
  position: relative;
}
.construction-window .construction-window-ui .mode-controls[data-opened="true"] .categorie-explorer-button.active::before,
.construction-window .construction-window-ui .mode-controls[data-opened="true"] .scenery-button.active::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 15px;
  height: 15px;
  background-color: var(--default-bg);
  border-color: var(--workpage-nav-separator);
  border-style: solid;
  border-width: 2px 2px 0 0;
  transform: translate(21px, -50%) rotate(45deg);
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .construction-window .construction-window-ui .mode-controls[data-opened="true"] .categorie-explorer-button.active::before,
  .construction-window .construction-window-ui .mode-controls[data-opened="true"] .scenery-button.active::before {
    right: 0;
  }
}
.construction-window .construction-window-ui .text-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 10px;
  background-color: var(--default-bg);
  border-radius: 0 10px 10px 0;
  gap: 10px;
  margin-bottom: 15px;
}
.construction-window .construction-window-ui .text-controls .stub-separator {
  display: none;
}
.construction-window .construction-window-ui .text-controls[data-opened="true"] .categorie-explorer-button.active,
.construction-window .construction-window-ui .text-controls[data-opened="true"] .scenery-button.active {
  position: relative;
}
.construction-window .construction-window-ui .text-controls[data-opened="true"] .categorie-explorer-button.active::before,
.construction-window .construction-window-ui .text-controls[data-opened="true"] .scenery-button.active::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 15px;
  height: 15px;
  background-color: var(--default-bg);
  border-color: var(--workpage-nav-separator);
  border-style: solid;
  border-width: 2px 2px 0 0;
  transform: translate(21px, -50%) rotate(45deg);
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .construction-window .construction-window-ui .text-controls[data-opened="true"] .categorie-explorer-button.active::before,
  .construction-window .construction-window-ui .text-controls[data-opened="true"] .scenery-button.active::before {
    right: 0;
  }
}
.construction-window .construction-window-ui .scene-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 10px;
  background-color: var(--default-bg);
  border-radius: 0 10px 10px 0;
  gap: 10px;
  margin-bottom: 15px;
}
.construction-window .construction-window-ui .scene-controls .stub-separator {
  display: none;
}
.construction-window .construction-window-ui .scene-controls[data-opened="true"] .categorie-explorer-button.active,
.construction-window .construction-window-ui .scene-controls[data-opened="true"] .scenery-button.active {
  position: relative;
}
.construction-window .construction-window-ui .scene-controls[data-opened="true"] .categorie-explorer-button.active::before,
.construction-window .construction-window-ui .scene-controls[data-opened="true"] .scenery-button.active::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 15px;
  height: 15px;
  background-color: var(--default-bg);
  border-color: var(--workpage-nav-separator);
  border-style: solid;
  border-width: 2px 2px 0 0;
  transform: translate(21px, -50%) rotate(45deg);
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .construction-window .construction-window-ui .scene-controls[data-opened="true"] .categorie-explorer-button.active::before,
  .construction-window .construction-window-ui .scene-controls[data-opened="true"] .scenery-button.active::before {
    right: 0;
  }
}
.construction-window .construction-window-ui .game-controls {
  z-index: 5 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 10px;
  background-color: var(--default-bg);
  border-radius: 0 10px 10px 0;
  gap: 10px;
  top: 184px;
  height: auto;
  max-height: 450px;
}
.construction-window .construction-window-ui .game-controls .stub-separator {
  display: none;
}
.construction-window .construction-window-ui .game-controls[data-opened="true"] .categorie-explorer-button.active,
.construction-window .construction-window-ui .game-controls[data-opened="true"] .scenery-button.active {
  position: relative;
}
.construction-window .construction-window-ui .game-controls[data-opened="true"] .categorie-explorer-button.active::before,
.construction-window .construction-window-ui .game-controls[data-opened="true"] .scenery-button.active::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 15px;
  height: 15px;
  background-color: var(--default-bg);
  border-color: var(--workpage-nav-separator);
  border-style: solid;
  border-width: 2px 2px 0 0;
  transform: translate(21px, -50%) rotate(45deg);
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .construction-window .construction-window-ui .game-controls[data-opened="true"] .categorie-explorer-button.active::before,
  .construction-window .construction-window-ui .game-controls[data-opened="true"] .scenery-button.active::before {
    right: 0;
  }
}
.construction-window .construction-window-ui .game-controls .zoom-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 10px;
  background-color: var(--default-bg);
  border-radius: 0 10px 10px 0;
  margin: 0;
  padding: 0;
  gap: 10px;
}
.construction-window .construction-window-ui .game-controls .zoom-controls .stub-separator {
  display: none;
}
.construction-window .construction-window-ui .game-controls .zoom-controls[data-opened="true"] .categorie-explorer-button.active,
.construction-window .construction-window-ui .game-controls .zoom-controls[data-opened="true"] .scenery-button.active {
  position: relative;
}
.construction-window .construction-window-ui .game-controls .zoom-controls[data-opened="true"] .categorie-explorer-button.active::before,
.construction-window .construction-window-ui .game-controls .zoom-controls[data-opened="true"] .scenery-button.active::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 15px;
  height: 15px;
  background-color: var(--default-bg);
  border-color: var(--workpage-nav-separator);
  border-style: solid;
  border-width: 2px 2px 0 0;
  transform: translate(21px, -50%) rotate(45deg);
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .construction-window .construction-window-ui .game-controls .zoom-controls[data-opened="true"] .categorie-explorer-button.active::before,
  .construction-window .construction-window-ui .game-controls .zoom-controls[data-opened="true"] .scenery-button.active::before {
    right: 0;
  }
}
.construction-window .construction-window-ui .game-controls .zoom-controls .troubadour-button {
  background-color: var(--default-bg);
}
.construction-window .construction-window-ui .game-controls .zoom-controls .troubadour-button svg {
  width: 30px;
}
.construction-window .construction-window-ui .game-controls .zoom-controls .troubadour-button.zoom-button {
  color: var(--default-color-2);
  background-color: var(--zoom-button-disabled-bg);
}
.construction-window .construction-window-ui .game-controls .zoom-controls .troubadour-button.zoom-button:not(.disabled) {
  background-color: var(--zoom-button-bg);
}
.construction-window .construction-window-ui .game-controls .zoom-controls .troubadour-button.zoom-button:not(.disabled):hover {
  background-color: var(--zoom-button-hover-bg);
  opacity: 1;
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .construction-window .construction-window-ui .game-controls .zoom-controls .troubadour-button svg {
    width: 18px;
  }
}
.construction-window .scene-menus .asset-menu-overlay .menu-container {
  height: 65%;
}
.construction-window .scene-menus .scenery-menu-overlay .menu-container {
  max-width: 720px;
}
.construction-window .scene-menus .asset-menu-overlay .menu-container {
  max-width: 1000px;
}
.construction-window .scene-menus .scenery-menu-overlay .menu-container,
.construction-window .scene-menus .asset-menu-overlay .menu-container {
  position: relative;
  width: calc(100vw - 80px);
  display: flex;
  flex-direction: column;
  background: var(--default-bg);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 0 15px 0 0;
  font-family: Sofia Pro, sans-serif;
  padding: 20px;
}
.construction-window .scene-menus .scenery-menu-overlay .menu,
.construction-window .scene-menus .asset-menu-overlay .menu {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.construction-window .scene-menus .scenery-menu-overlay .menu header,
.construction-window .scene-menus .asset-menu-overlay .menu header {
  height: auto;
  padding-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
  color: var(--default-color);
  flex: 0 0 auto;
  gap: 10px;
}
.construction-window .scene-menus .scenery-menu-overlay .menu header h3,
.construction-window .scene-menus .asset-menu-overlay .menu header h3 {
  flex: 1;
  text-align: center;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2em;
  margin: 0;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .scroll-container,
.construction-window .scene-menus .asset-menu-overlay .menu .scroll-container {
  overflow-y: auto;
  display: flex;
  max-height: 100%;
  padding: 0 10px 10px;
  gap: 20px;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .scroll-container::-webkit-scrollbar,
.construction-window .scene-menus .asset-menu-overlay .menu .scroll-container::-webkit-scrollbar {
  width: 8px;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .scroll-container::-webkit-scrollbar-thumb,
.construction-window .scene-menus .asset-menu-overlay .menu .scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--ui-thumb);
  border-radius: 5px;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .scroll-container::-webkit-scrollbar-track,
.construction-window .scene-menus .asset-menu-overlay .menu .scroll-container::-webkit-scrollbar-track {
  background-color: var(--ui-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .construction-window .scene-menus .scenery-menu-overlay .menu .scroll-container,
  .construction-window .scene-menus .asset-menu-overlay .menu .scroll-container {
    scrollbar-color: var(--ui-thumb) var(--ui-track);
    scrollbar-width: thin;
  }
}
.construction-window .scene-menus .scenery-menu-overlay .menu .close-button,
.construction-window .scene-menus .asset-menu-overlay .menu .close-button {
  position: absolute;
  height: 25px;
  width: 25px;
  top: 15px;
  right: 15px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .close-button img,
.construction-window .scene-menus .asset-menu-overlay .menu .close-button img {
  height: 100%;
  width: auto;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .close-button:hover,
.construction-window .scene-menus .asset-menu-overlay .menu .close-button:hover {
  opacity: 0.8;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .warning,
.construction-window .scene-menus .asset-menu-overlay .menu .warning {
  color: var(--warning-dark2);
}
.construction-window .scene-menus .scenery-menu-overlay .menu .warning h2,
.construction-window .scene-menus .asset-menu-overlay .menu .warning h2 {
  font-family: "Sofia Pro", sans-serif;
  font-size: 38px;
  line-height: 38px;
  font-weight: bold;
  margin: 0;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .warning h3,
.construction-window .scene-menus .asset-menu-overlay .menu .warning h3 {
  font-family: "Sofia Pro", sans-serif;
  font-size: 28px;
  line-height: 32px;
  font-weight: bold;
  margin: 0;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .warning h4,
.construction-window .scene-menus .asset-menu-overlay .menu .warning h4 {
  font-family: "Sofia Pro", sans-serif;
  font-size: 23px;
  line-height: 27px;
  font-weight: normal;
  margin: 0;
}
.construction-window .scene-menus .scenery-menu-overlay .menu .warning svg,
.construction-window .scene-menus .asset-menu-overlay .menu .warning svg {
  color: var(--warning-dark2);
  margin-right: 5px;
}
.construction-window .game-shield-backdrop {
  cursor: pointer;
}
.construction-window .all-dialogs-buttons[data-text-entries-count="0"] .over-game-menu-button {
  filter: grayscale();
  pointer-events: none;
}
.construction-window .hide-till-loaded {
  pointer-events: none;
  opacity: 1;
  filter: grayscale(100%);
}
@media screen and (max-width: 900px) {
  .construction-window .scene-menus .scenery-menu-overlay .menu-container .scenery-choice,
  .construction-window .scene-menus .asset-menu-overlay .menu-container .scenery-choice {
    width: 115px !important;
    height: 75px !important;
  }
  .construction-window .scene-menus .scenery-menu-overlay .menu-container .scenery-choice img:not(.no-img),
  .construction-window .scene-menus .asset-menu-overlay .menu-container .scenery-choice img:not(.no-img) {
    width: 100% !important;
    height: 100% !important;
  }
}
.construction-window {
  height: 700px;
  position: relative;
  padding: 0 !important;
}
.construction-window .game-shield-backdrop {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--backdrop);
  opacity: 0.6;
  border-radius: 15px;
}
.construction-window .game-shield-backdrop.transparent {
  background-color: transparent;
  opacity: 1;
}
.construction-window .scene-texts-count {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--default-color-3);
  background-color: var(--default-color-2);
  text-align: center;
  font-size: clamp(20px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.2em;
  padding: 12px 30px 15px;
  border-radius: 0 0 0 20px;
}
.construction-window .start-correction-buttons {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 30px;
}
.construction-window .end-correction-buttons {
  position: absolute;
  bottom: 25px;
  right: 15px;
}
.construction-window .end-correction-buttons[data-text-entries-count="0"] .end-view-button {
  display: flex;
}
.construction-window .phaser-div {
  background-image: none;
  cursor: move;
}
.construction-window .default {
  cursor: default;
}
.construction-window .grab {
  cursor: grab;
}
.construction-window .grabbing {
  cursor: grabbing;
}
.construction-window .explore-play-button.explore-work-block {
  position: absolute;
  top: -60px !important;
  width: 25% !important;
  margin: 0 !important;
  right: 0 !important;
  font-size: 1em !important;
  z-index: 5 !important;
}
.construction-window .explore-play-button.explore-work-block div {
  padding: 10px !important;
}
@media screen and (max-width: 767px) {
  .construction-window .explore-play-button.explore-work-block {
    width: 100% !important;
  }
}
.fullscreen .construction-window .scene-texts-count {
  display: none;
}
body.fullscreen #main-container {
  padding: 20px 0 0 0 !important;
}
body.fullscreen #main-container.main-container--correction-workpage {
  padding-top: 100px !important;
}
body .challenge-creation,
body .construction,
body .description,
body .work-block,
body .text-entry,
body .construction-window {
  transition: all 250ms ease-in;
}
body .challenge-creation.fullscreen {
  max-width: 100%;
  width: 100%;
  border: none;
  padding-top: 0;
}
body .challenge-creation.fullscreen .general-comment-container {
  height: 80vh;
  max-width: 100%;
  margin: 10vh 175px 0 175px;
  padding: 0 0 15px;
  display: flex;
  flex-direction: column;
}
body .challenge-creation.fullscreen .general-comment-container .comment-text-container {
  flex: 2 0 auto;
}
body .challenge-creation.fullscreen .general-comment-container.is-popup {
  margin: 0;
}
body .challenge-creation.fullscreen .page-indicator {
  top: 128px;
}
body .challenge-creation.fullscreen .page-indicator[data-index="0"] {
  top: 80px;
}
body .challenge-creation.fullscreen .page-indicator[data-in-construction-window="1"] {
  top: 145px;
  display: flex;
}
body .challenge-creation.fullscreen section.description {
  height: 75vh;
  max-width: 80%;
  margin: 15px auto;
  display: flex;
  flex-direction: column;
}
body .challenge-creation.fullscreen section.description .description-section {
  height: initial;
  max-height: 90%;
  flex: 2 0 auto;
}
body .challenge-creation.fullscreen .text-entry:not(.over-game-text-entry) {
  padding: 0;
}
body .challenge-creation.fullscreen .text-entry:not(.over-game-text-entry):first-of-type {
  margin-top: 40px;
}
body .challenge-creation.fullscreen .construction-window {
  margin: 0;
  padding: 0;
}
body .challenge-creation.fullscreen .construction-window .scene-menus .scenery-menu-overlay {
  top: 120px;
}
body .challenge-creation.fullscreen .construction-window .scene-menus .scenery-menu-overlay.opened {
  max-height: calc(100% - 260px);
}
body .challenge-creation.fullscreen .construction-window .scene-menus .scenery-menu-overlay .scenery-container {
  height: auto;
  border-radius: 0 10px 10px 10px;
  border-left: 2px solid var(--workpage-nav-separator);
}
body .challenge-creation.fullscreen .construction-window .scene-menus .asset-menu-overlay {
  top: 120px;
}
body .challenge-creation.fullscreen .construction-window .scene-menus .asset-menu-overlay .menu-container {
  border-radius: 0 10px 10px 10px;
  border-left: 2px solid var(--workpage-nav-separator);
}
body .challenge-creation.fullscreen .text-entry:not(.over-game-text-entry).title-text-entry .bottom-button-container {
  bottom: -54px !important;
}
body .challenge-creation.fullscreen .text-entry:not(.over-game-text-entry) .inner-container .left-button-container {
  left: -5px;
}
body .challenge-creation.fullscreen .text-entry:not(.over-game-text-entry) .inner-container .top-button-container {
  top: 60px;
}
body .challenge-creation.fullscreen .text-entry:not(.over-game-text-entry) [contenteditable="false"] > * {
  cursor: default;
}
body .challenge-creation.fullscreen .title-text-entry {
  height: 200px;
}
body .challenge-creation.fullscreen .title-text-entry .text-container {
  overflow-y: auto;
}
body .challenge-creation.fullscreen .narration-text-entry {
  height: 65vh;
  margin-bottom: 380px;
}
body .challenge-creation.fullscreen .narration-text-entry:nth-of-type(2) {
  height: 45vh;
}
body .challenge-creation.fullscreen .narration-text-entry:nth-of-type(2) .bottom-button-container {
  bottom: -55px;
}
body .challenge-creation.fullscreen .narration-text-entry .text-container {
  overflow-y: auto;
}
body .challenge-creation.fullscreen .text-over-game-menu .scroll-button {
  display: none;
}
body .challenge-creation.fullscreen .text-over-game-menu .revision-panel .save-button {
  order: 10;
}
body .challenge-creation.fullscreen .work-block {
  margin: 10vh 0;
  padding: 0;
  max-width: 100%;
}
body .challenge-creation.fullscreen .work-block .page-number {
  display: none;
  padding: 45px;
}
body .challenge-creation.fullscreen .work-block .page-number span {
  width: 45px;
  height: 45px;
  display: flex;
  background-color: var(--troubadour-main);
  color: var(--default-color-2);
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  font-family: var(--font-reading);
  font-size: 30px;
  line-height: 30px;
  font-weight: 600;
}
body .challenge-creation.fullscreen[data-demo="true"] .page-indicator {
  top: 128px;
}
body .challenge-creation.fullscreen[data-demo="true"] .page-indicator[data-index="0"] {
  top: 80px;
}
body .challenge-creation.fullscreen[data-demo="true"] .page-indicator[data-in-construction-window="1"] {
  top: 60px;
}
body .challenge-creation.fullscreen[data-demo="true"] .construction-window .scene-menus .scenery-menu-overlay {
  top: 120px;
}
body .challenge-creation.fullscreen[data-demo="true"] .construction-window .scene-menus .asset-menu-overlay {
  top: 120px;
}
.main-container .scenery-menu-overlay.opened {
  top: 220px !important;
}
.main-container .asset-menu-overlay.opened {
  top: 140px !important;
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .main-container .asset-menu-overlay.opened {
    top: 124px !important;
  }
}
.main-container--correction-workpage .scenery-menu-overlay.opened,
.main-container--correction-workpage .asset-menu-overlay.opened {
  top: 118px !important;
}
@media screen and (max-width: 768px) {
  .asset-menu-overlay.opened .menu-container,
  .scenery-menu-overlay.opened .menu-container {
    height: 68vh !important;
    max-height: 425px;
  }
}
@media screen and (max-width: 1366px) {
  .challenge-creation.fullscreen {
    max-width: 100% !important;
  }
  .asset-menu-overlay.opened .menu-container {
    height: 80% !important;
  }
}
@media screen and (max-width: 1200px) {
  body .challenge-creation.fullscreen .construction-window .scene-menus .scenery-menu-overlay.opened,
  body .challenge-creation.fullscreen .construction-window .scene-menus .asset-menu-overlay.opened {
    top: 120px;
    height: calc(100% - 100px);
  }
  body .challenge-creation.fullscreen[data-demo="true"] .construction-window .scene-menus .scenery-menu-overlay.opened,
  body .challenge-creation.fullscreen[data-demo="true"] .construction-window .scene-menus .asset-menu-overlay.opened {
    top: 120px;
    height: calc(100% - 200px);
    max-height: calc(100% - 200px);
  }
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .construction-window .construction-window-ui .controls-container {
    width: 65px !important;
  }
  .construction-window .scene-menus .scenery-menu-overlay,
  .construction-window .scene-menus .asset-menu-overlay {
    left: 65px;
  }
  .construction-window .scene-menus .asset-menu-overlay.opened {
    height: 95%;
  }
  .construction-window .scene-menus .asset-menu-overlay .menu-container .assets-menu header {
    padding-left: 0;
    margin-bottom: 0;
  }
  .construction-window .scene-menus .asset-menu-overlay .menu-container .category-block .title h4 {
    font-size: 15px !important;
  }
  .construction-window .scene-menus .asset-menu-overlay .menu-container .category-block .icon-container {
    width: 200px !important;
    height: 125px !important;
  }
  .construction-window .scene-menus .asset-menu-overlay .menu-container .asset-block {
    width: 85px;
    height: 85px;
  }
  .construction-window .scene-menus .asset-menu-overlay .filters {
    width: 90px !important;
    padding: 0 !important;
  }
  .construction-window .scene-menus .asset-menu-overlay .filters .type-filters {
    margin-bottom: 10px;
  }
  .construction-window .scene-menus .asset-menu-overlay .filters .type-filters .filter {
    height: 65px;
    width: 90px;
  }
  .construction-window .scene-menus .asset-menu-overlay .filters .type-filters .filter img {
    max-width: 70%;
    max-height: 50%;
  }
  .construction-window .scene-menus .asset-menu-overlay .filters .size-filters {
    padding-top: 0;
    flex-wrap: wrap;
  }
  .construction-window .scene-menus .asset-menu-overlay .filters .size-filters .filter {
    flex: 0 0 50%;
    margin-bottom: 5px;
  }
  .construction-window .scene-menus .asset-menu-overlay .filters .size-filters .filter .filter-label {
    font-size: 11px;
    margin: 0;
  }
  .construction-window .scene-menus .asset-menu-overlay .filters .size-filters .filter img {
    max-width: 50%;
    margin: 0;
  }
  .construction-window .scene-menus .duplicate-option .duplicate-info-text {
    font-size: 14px;
    line-height: 18px;
  }
}
@media screen and (max-height: 600px) {
  body .challenge-creation.fullscreen section.description {
    height: 70vh;
  }
}
@media screen and (max-width: 900px) {
  body .challenge-creation.fullscreen .bg-element {
    display: none;
  }
  body .challenge-creation.fullscreen section.description {
    margin: 0 100px 60px 15px;
    height: 70vh;
  }
  body .challenge-creation.fullscreen section.description header {
    min-height: 60px;
  }
  body .challenge-creation.fullscreen section.description header .description-icon {
    top: 13.5px;
    height: 32px;
    width: 32px;
  }
  body .challenge-creation.fullscreen section.description header .staple {
    top: 45px;
    height: 30px;
    width: 30px;
  }
  body .challenge-creation.fullscreen section.description header .description-label {
    font-size: 32px;
    line-height: 32px;
  }
  body .challenge-creation.fullscreen section.description .description-section .challenge-title {
    padding: 20px 0;
    font-size: 28px;
    line-height: 32px;
  }
  body .challenge-creation.fullscreen section.description .description-section .description-text {
    font-size: 20px;
    padding: 0 20px;
    line-height: 30px;
  }
  body .challenge-creation.fullscreen .page-indicator:not([data-in-construction-window="1"]) {
    left: initial;
    right: 0;
    border-radius: 10px 0 0 10px;
  }
}
@media screen and (max-height: 768px) {
  .challenge-creation.fullscreen[data-demo="true"] .page-indicator {
    width: 75px;
    top: 55px !important;
    right: initial;
    left: 20px;
    border-radius: 8px;
  }
  .challenge-creation.fullscreen[data-demo="true"] .page-indicator[data-index="0"] {
    top: 75px !important;
  }
  .challenge-creation.fullscreen[data-demo="true"] .page-indicator[data-in-construction-window="1"] {
    border-radius: 0 8px 8px 0;
    left: 0;
    top: 70px !important;
    height: 35px;
    font-size: 16px;
  }
  .challenge-creation.fullscreen[data-demo="true"] .title-text-entry {
    margin-top: 70px !important;
  }
}
.challenge-creation .general-comment-container {
  position: relative;
  max-width: 70%;
  margin: 15px 20%;
  border: 2px solid transparent;
  flex: 1;
}
.challenge-creation .general-comment-container .comment-title {
  color: var(--general-comment-title);
  text-transform: initial;
  text-align: center;
  font-size: 58px;
  font-family: var(--font-title);
  margin-bottom: 25px;
  flex: 0;
}
.challenge-creation .general-comment-container .comment-text-container {
  position: relative;
  padding: 15px;
  background-color: var(--default-bg);
  border: 4px solid var(--general-comment);
  flex: 1;
}
.challenge-creation .general-comment-container .comment-text-container .general-comment-icon {
  top: -23px;
  left: -23px;
  position: absolute;
}
.challenge-creation .general-comment-container .comment-text {
  color: var(--default-color);
  font-size: 28px;
  line-height: 40px;
  resize: none;
  min-height: 10vh;
  border: none;
  overflow-y: auto;
}
.challenge-creation .general-comment-container .comment-text::-webkit-scrollbar {
  width: 8px;
}
.challenge-creation .general-comment-container .comment-text::-webkit-scrollbar-thumb {
  background-color: var(--general-scrollbar-thumb);
  border-radius: 5px;
}
.challenge-creation .general-comment-container .comment-text::-webkit-scrollbar-track {
  background-color: var(--general-scrollbar-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .challenge-creation .general-comment-container .comment-text {
    scrollbar-color: var(--general-scrollbar-thumb) var(--general-scrollbar-track);
    scrollbar-width: thin;
  }
}
.challenge-creation .general-comment-container .general-comment-button {
  margin-top: 10px;
}
.challenge-creation .general-comment-container .bg-element.bg-left {
  left: -60%;
  top: 0;
}
.challenge-creation .general-comment-container .bg-element.bg-right {
  display: none;
}
.challenge-history-popup {
  max-height: 90vh;
  height: 90vh;
  flex-direction: column;
}
.challenge-history-popup[style*="display: block"] {
  display: flex !important;
}
.challenge-history-popup .revision-container {
  display: flex;
  flex-direction: column;
  opacity: 1;
  overflow-y: auto;
  height: 100%;
}
.challenge-history-popup .revision-container .back-to-list-button {
  margin: 0 auto 0 0;
}
.challenge-history-popup .revision-container .title {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.challenge-history-popup .revision-container .title img {
  width: 64px;
  height: 64px;
  margin: 10px auto;
}
.challenge-history-popup .revision-container .title .title-text {
  margin: auto auto auto 10px;
}
.challenge-history-popup .revision-container .content {
  height: 100%;
  border-radius: 5px;
  padding: 15px;
  background-color: var(--default-dark-bg);
  overflow-y: auto;
  font-size: 1.2em !important;
  margin: 20px 0 10px 0;
}
.challenge-history-popup .revision-container[data-user-type="ROLE_MANAGER"] .content {
  border: 2px solid var(--teacher-info);
}
.challenge-history-popup .revision-container[data-user-type="ROLE_MANAGER"] .title-text {
  color: var(--teacher-info);
}
.challenge-history-popup .revision-container[data-user-type="ROLE_STUDENT"] .content {
  border: 2px solid var(--student-info);
}
.challenge-history-popup .revision-container[data-user-type="ROLE_STUDENT"] .title-text {
  color: var(--student-info);
}
.challenge-history-popup .revision-list {
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  opacity: 1;
}
.challenge-history-popup .empty-content {
  width: 100%;
  height: 100%;
  display: flex;
}
.challenge-history-popup .empty-content p {
  margin: auto;
  font-size: 22px;
}
.challenge-history-popup .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  color: var(--popup-default);
}
.challenge-history-popup .placeholder svg {
  margin: auto;
  font-size: 28px;
}
.challenge-history-popup .revision-tab {
  width: 100%;
  display: flex;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}
.challenge-history-popup .revision-tab[data-user-type="ROLE_MANAGER"] {
  background-color: var(--teacher-info);
}
.challenge-history-popup .revision-tab[data-user-type="ROLE_STUDENT"] {
  background-color: var(--student-info);
}
.challenge-history-popup .revision-tab .icon {
  height: 64px;
  width: 64px;
  margin: auto 10px auto 0;
}
.challenge-history-popup .revision-tab .consult-history-button {
  margin: auto 0;
}
.challenge-history-popup .revision-tab .date {
  margin: auto 10px;
  font-size: 12px;
}
.challenge-history-popup .revision-tab .revision-description {
  margin: auto;
  font-size: 18px;
  font-weight: bolder;
}
@media screen and (max-width: 1366px) {
  .challenge-history-popup {
    width: 60vw;
  }
}
@media screen and (max-width: 992px) {
  .challenge-history-popup {
    width: 90vw;
  }
}
.nanopopup.mark-as-done-popup {
  background-color: transparent !important;
  overflow: visible;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 80vw;
  height: 80vh;
  max-width: 367px;
  max-height: 460px;
  background-color: var(--challenges-card-to-do-1);
  border-radius: 20px;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .close-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--text-entry-bg);
  left: -25px;
  top: -25px;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .close-container i,
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .close-container svg {
  font-size: 25px;
  color: var(--challenges-card-to-do-1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .close-container:hover {
  filter: brightness(1.1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .status-finished-indicator {
  position: absolute;
  left: 0;
  top: 50px;
  z-index: 2;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .status-finished-indicator p {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--default-color-2);
  background-color: var(--troubadour-main);
  text-align: center;
  font-size: 33px;
  line-height: 33px;
  font-weight: 800;
  margin: 0;
  padding: 6px 10px 10px;
  border-radius: 0 0 3px 0;
  z-index: 2;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .status-finished-indicator::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -11px;
  width: 50px;
  aspect-ratio: 19 / 20;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-finished-ribbon-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .thumbnail {
  margin: 0 0 10px;
  width: 100%;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .thumbnail img {
  max-width: 100%;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content h3 {
  color: var(--default-color-2);
  font-size: 23px;
  font-weight: 700;
  line-height: 1em;
  padding: 0;
  margin: 0 0 10px;
  text-transform: none;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content h2 {
  color: var(--default-color-2);
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  line-height: 1em;
  padding: 0;
  margin: 0 0 30px;
  text-transform: none;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .previous-page-nav-btn {
  margin: 0 0 10px;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .continue-working {
  color: var(--babillard-color-14);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  text-decoration: none;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .continue-working:hover {
  text-decoration: underline;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] {
  background-color: var(--challenges-card-to-do-1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] .close-container {
  background-color: var(--text-entry-bg);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] .close-container svg {
  color: var(--challenges-card-to-do-1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] h2,
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] h3 {
  color: var(--default-color-2);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] .continue-working {
  color: var(--babillard-color-14);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] {
  background-color: var(--challenges-card-needs-revision-1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] .close-container {
  background-color: var(--student-challenges-color-3);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] .close-container svg {
  color: var(--student-challenges-color-4);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] h2,
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] h3 {
  color: var(--challenges-card-needs-revision-3);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] .continue-working {
  color: var(--student-challenges-color-4);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-is-family="1"] h3 {
  margin: 0 0 10px;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-is-family="1"] h2 {
  margin: 0 0 34px;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.mark-as-done-popup {
    box-shadow: none !important;
    padding: 0 !important;
    width: unset !important;
    height: unset !important;
    min-width: unset !important;
    max-width: unset !important;
    min-height: unset !important;
    max-height: unset !important;
  }
}
@keyframes pageLoaderAnimation {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes spinnerImgAnimation {
  0% {
    transform: translateY(-30px) scale(1.05);
    filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.2));
  }
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
  }
}
@keyframes spinnerTextAnimation {
  0% {
    transform: translateY(-15px) scale(1.05);
    filter: drop-shadow(0px 15px 26px rgba(0, 0, 0, 0.2));
  }
  100% {
    transform: translateY(0) scale(1.05);
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.7));
  }
}
.page-loader,
.troubadour-fullscreen-restriction,
.troubadour-too-small {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  color: var(--default-color-2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 4em;
  animation: pageLoaderAnimation 6s ease-in-out infinite alternate;
  background: linear-gradient(-45deg, var(--primary-text-2), var(--primary-text-1), var(--primary-text-3), var(--primary-text-4), var(--primary-text-3-dark), var(--secondary-text-light));
  background-size: 600% 600%;
  z-index: 300;
}
.page-loader .fade,
.troubadour-fullscreen-restriction .fade,
.troubadour-too-small .fade {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.25s, opacity 0.25s linear;
}
.page-loader .spinner,
.troubadour-fullscreen-restriction .spinner,
.troubadour-too-small .spinner {
  transform: translateY(-25%);
}
.page-loader .troub-logo-feather,
.troubadour-fullscreen-restriction .troub-logo-feather,
.troubadour-too-small .troub-logo-feather {
  width: 330px;
  height: 330px;
}
.page-loader .spinner-text,
.troubadour-fullscreen-restriction .spinner-text,
.troubadour-too-small .spinner-text {
  font-size: clamp(26px, 3vw, 40px);
  transform: translateY(-50px);
  filter: drop-shadow(0px 15px 26px rgba(0, 0, 0, 0.2));
}
.troubadour-fullscreen-restriction {
  z-index: 1001;
}
.troubadour-fullscreen-restriction .back-categories-button {
  position: fixed;
  top: 20px;
  left: 20px;
}
.troubadour-fullscreen-restriction .spinner-img {
  animation: none;
}
.troubadour-too-small {
  z-index: 1001;
}
.troubadour-too-small .back-categories-button {
  margin-top: 20px;
}
.troubadour-too-small .spinner-img {
  animation: none;
}
.troubadour-too-small h3 a {
  color: var(--default-color-2);
  text-decoration: underline;
}
.troubadour-too-small h3 a:hover {
  color: var(--info-1);
}
.revision-panel {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  background-color: var(--default-bg);
  border: 2px solid var(--workblock-shadow);
  width: auto;
  z-index: 15;
  box-shadow: 3px 3px 8px var(--workblock-shadow);
  box-sizing: border-box;
  justify-content: space-between;
  transition: all 250ms;
}
.revision-panel > div {
  padding: 5px 0 !important;
}
.revision-panel .toolbar-wrap-section {
  display: flex;
  justify-content: center;
  align-items: center;
}
.revision-panel .toolbar-wrap-section .toolbar-wrap-content {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
}
.revision-panel .toolbar-wrap-section .toolbar-wrap-content.toolbar-wrap-content--left {
  justify-content: flex-start;
}
.revision-panel .toolbar-wrap-section .toolbar-wrap-content.toolbar-wrap-content--right {
  justify-content: flex-end;
}
.revision-panel .toolbar-wrap-section .toolbar-wrap-content .button-text {
  white-space: nowrap;
}
.revision-panel .toolbar-wrap-section .history-actions-container {
  padding: 0;
}
.revision-panel .toolbar-wrap-section .history-actions-container .history-button {
  margin: auto 5px;
}
.revision-panel .toolbar-wrap-section .comment-actions-container {
  padding: 0;
}
.revision-panel .toolbar-wrap-section .comment-actions-container .teacher-add-comment-button {
  animation: none !important;
  margin: auto 5px;
}
.revision-panel .ql-toolbar {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}
.revision-panel .ql-toolbar .ql-formats {
  min-width: 0;
  margin: 5px 0;
  padding: 0 40px;
  border-right: 1px solid var(--line-separator);
}
.revision-panel .ql-toolbar .ql-formats:last-of-type {
  border-right: none;
}
.revision-panel .ql-toolbar .ql-formats button {
  padding: 0;
}
.revision-panel .ql-toolbar .ql-formats::after {
  display: none !important;
}
.revision-panel .student-actions-container {
  display: flex;
  align-items: baseline;
  padding: 0 20px;
  border-right: 1px solid var(--line-separator);
  flex: 1;
}
.revision-panel .student-actions-container:nth-child(3),
.revision-panel .student-actions-container:last-child {
  border-right: none;
}
.revision-panel .student-actions-container button {
  margin: auto;
}
.revision-panel .status-button-container {
  flex: 0 1 auto;
  display: flex;
  align-items: flex-start;
  padding: 0;
}
.revision-panel .status-button-container .status-button {
  margin: auto 5px;
}
.revision-panel .ql-toolbar button:not(.troubadour-button) {
  height: 30px !important;
  width: 30px !important;
  border-radius: 15px !important;
}
.revision-panel .ql-toolbar .troubadour-button.round {
  background-color: transparent !important;
  opacity: 0.8;
}
.revision-panel .ql-toolbar .ql-normal-formats {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.revision-panel .ql-bold,
.revision-panel .ql-strike,
.revision-panel .ql-italic {
  background-color: var(--quill-text-action-bg) !important;
  color: var(--quill-text-action-color) !important;
}
.revision-panel .ql-bold:hover,
.revision-panel .ql-strike:hover,
.revision-panel .ql-italic:hover,
.revision-panel .ql-bold:active,
.revision-panel .ql-strike:active,
.revision-panel .ql-italic:active,
.revision-panel .ql-bold.ql-active,
.revision-panel .ql-strike.ql-active,
.revision-panel .ql-italic.ql-active {
  background-color: var(--quill-text-action-active-bg) !important;
  color: var(--quill-text-action-active-color) !important;
}
.revision-panel .quick-review i {
  height: 30px !important;
  width: 30px !important;
  padding: 0 !important;
}
.revision-panel[data-user-type="ROLE_STUDENT"] {
  box-shadow: none;
  border: 2px solid var(--line-separator);
}
.revision-panel[data-user-type="ROLE_STUDENT"] .toolbar-wrap-section {
  flex: 1 1 50%;
  justify-content: start;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .toolbar-wrap-section:first-of-type {
  justify-content: flex-start;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .toolbar-wrap-section:first-of-type .student-actions-container {
  flex: 0;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .toolbar-wrap-section.ql-toolbar {
  justify-content: flex-end;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .toolbar-wrap-section.ql-toolbar .student-actions-container {
  flex: 0;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .toolbar-wrap-section .new-dialogue-button {
  border-color: var(--text-entry-add-text);
}
.revision-panel[data-user-type="ROLE_STUDENT"] .toolbar-wrap-section .new-dialogue-button.disabled {
  border-color: var(--disabled) !important;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .toolbar-wrap-section .history-button {
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 15px;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .ql-toolbar {
  width: 100%;
  justify-content: end;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .ql-toolbar .ql-normal-formats {
  border-left: none;
}
.revision-panel[data-user-type="ROLE_STUDENT"] .ql-toolbar:after {
  display: none;
}
.revision-panel[data-user-type="ROLE_MANAGER"] {
  flex-direction: column;
}
.revision-panel[data-user-type="ROLE_MANAGER"] .toolbar-wrap-section {
  flex: 1 1 100%;
  flex-direction: column;
  justify-content: center;
}
.revision-panel[data-user-type="ROLE_MANAGER"] .toolbar-wrap-section .toolbar-wrap-content {
  margin: 0 10px 15px;
}
@media all and (min-width: 1000px) {
  .revision-panel[data-user-type="ROLE_MANAGER"] .toolbar-wrap-section {
    flex-direction: row;
  }
  .revision-panel[data-user-type="ROLE_MANAGER"] .toolbar-wrap-section .toolbar-wrap-content {
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 768px) {
  .revision-panel .ql-toolbar .ql-formats {
    padding: 0 10px;
  }
}
@media screen and (max-width: 1200px) {
  .revision-panel[data-user-type="ROLE_MANAGER"] {
    justify-content: center;
    padding: 0;
    right: 2%;
    width: 99%;
    left: initial;
  }
  .revision-panel[data-user-type="ROLE_MANAGER"] .ql-toolbar {
    flex: 0 1 auto;
    padding: 10px 0;
  }
  .revision-panel[data-user-type="ROLE_MANAGER"] .status-button-container {
    flex: 0 1 auto;
  }
}
.nanopopup.end-correction-popup {
  background-color: var(--student-challenges-color-24);
  overflow: visible;
}
.nanopopup.end-correction-popup.display {
  display: flex;
}
.nanopopup.end-correction-popup .end-correction-popup-content {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  border-radius: 20px;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  flex: 1;
  transition: all 0.25s linear;
}
.nanopopup.end-correction-popup .end-correction-popup-content .back-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.nanopopup.end-correction-popup .end-correction-popup-content .close-container,
.nanopopup.end-correction-popup .end-correction-popup-content .back-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--student-challenges-color-11);
  left: 10px;
  top: 10px;
}
.nanopopup.end-correction-popup .end-correction-popup-content .close-container svg,
.nanopopup.end-correction-popup .end-correction-popup-content .back-container svg {
  font-size: 25px;
  color: var(--default-color-2);
}
.nanopopup.end-correction-popup .end-correction-popup-content .close-container:hover,
.nanopopup.end-correction-popup .end-correction-popup-content .back-container:hover {
  filter: brightness(1.1);
}
@media screen and (max-width: 768px) {
  .nanopopup.end-correction-popup .end-correction-popup-content .close-container,
  .nanopopup.end-correction-popup .end-correction-popup-content .back-container {
    transform: scale(75%);
    left: 5px;
    top: 5px;
  }
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-bg {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-50%, -50%);
  width: 20%;
  max-width: 110px;
  aspect-ratio: 108 / 111;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-end-correction-decoration.svg");
  background-size: cover;
}
.nanopopup.end-correction-popup .end-correction-popup-content .comment-bg {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-50%, -50%);
  width: 20%;
  max-width: 110px;
  aspect-ratio: 108 / 109;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-comment-decoration.svg");
  background-size: cover;
}
.nanopopup.end-correction-popup .end-correction-popup-content h2,
.nanopopup.end-correction-popup .end-correction-popup-content h3,
.nanopopup.end-correction-popup .end-correction-popup-content h4,
.nanopopup.end-correction-popup .end-correction-popup-content h5 {
  width: 100%;
  font-family: "Sofia Pro", sans-serif;
  text-transform: none;
}
.nanopopup.end-correction-popup .end-correction-popup-content h2 {
  color: var(--student-challenges-color-10);
  text-align: center;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  line-height: 1em;
  margin: 0 0 15px;
}
.nanopopup.end-correction-popup .end-correction-popup-content h3 {
  color: var(--default-color-3);
  text-align: center;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 700;
  line-height: 1.2em;
  margin: 0 0 15px;
}
.nanopopup.end-correction-popup .end-correction-popup-content h3 span {
  display: block;
  color: var(--default-color-3);
  font-weight: 400;
}
.nanopopup.end-correction-popup .end-correction-popup-content h4 {
  color: var(--default-color-3);
  text-align: center;
  font-size: 19px;
  font-style: normal;
  font-weight: 700;
  line-height: 1em;
  margin: 10px 0;
}
.nanopopup.end-correction-popup .end-correction-popup-content p {
  flex: 1;
  color: var(--default-color-3);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  margin: 0 0 20px;
}
.nanopopup.end-correction-popup .end-correction-popup-content p span {
  font-style: italic;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides {
  position: relative;
  width: 100%;
  flex: 1;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .end-correction-slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 33.333%;
  max-width: 210px;
  min-height: 240px;
  padding: 20px;
  border-radius: 10px;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state::before {
  content: "";
  height: 36px;
  background-size: cover;
  background-repeat: no-repeat;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state .challenge-state-btn::before {
  background-color: var(--default-color-2);
  border-color: var(--default-color-2);
  opacity: 0.8;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state .challenge-state-btn .button-text {
  font-size: 14px;
  font-weight: 800;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state .challenge-state-btn:hover::before {
  opacity: 1 !important;
  filter: brightness(1) !important;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.in-progress {
  background-color: var(--challenges-card-to-do-1);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.in-progress::before {
  aspect-ratio: 1;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-pencil-solo.svg");
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.in-progress h4 {
  color: var(--default-color-2);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.in-progress p {
  color: var(--babillard-color-14);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.in-progress .challenge-state-btn .button-text {
  color: var(--babillard-color-5);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.needs-revision {
  background-color: var(--challenges-card-needs-revision-1);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.needs-revision::before {
  aspect-ratio: 33 / 34;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-brush-solo.svg");
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.needs-revision h4 {
  color: var(--challenges-card-needs-revision-3);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.needs-revision p {
  color: var(--student-challenges-color-5);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.needs-revision p.no-revisions-text {
  flex: 0;
  color: var(--student-challenges-color-5);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  margin: 10px 0 0;
  padding: 0;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.needs-revision p.no-revisions-text span {
  display: block;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.needs-revision .challenge-state-btn .button-text {
  color: var(--student-challenges-color-4);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.to-portfolio {
  background-color: var(--challenge-state-inportfolio-2);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.to-portfolio::before {
  aspect-ratio: 33 / 36;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-portfolio-solo.svg");
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.to-portfolio h4 {
  color: var(--tutorial-color-12);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.to-portfolio p {
  color: var(--text-entry-completed-fg);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state.to-portfolio .challenge-state-btn .button-text {
  color: var(--challenge-state-inportfolio-2);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment {
  margin: 0 0 20px;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container .general-comment-icon {
  display: none;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container .comment-text-container {
  border: none;
  width: 100%;
  padding: 0;
  background-color: var(--workstate-comment);
  border-radius: 10px;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container textarea {
  outline-color: var(--workstate-comment);
  border: 2px solid var(--workstate-comment);
  color: var(--default-color);
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.4em;
  height: 160px;
  max-height: 100%;
  outline: none;
  overflow-y: auto;
  font-family: "Sofia Pro", sans-serif;
  resize: none;
  padding: 10px;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container textarea::-webkit-input-placeholder {
  color: var(--default-color);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container textarea::-moz-placeholder {
  /* Firefox 18- */
  color: var(--default-color);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container textarea::-ms-input-placeholder {
  color: var(--default-color);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container textarea::placeholder {
  color: var(--default-color);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container .teacher-comment-button-container {
  display: flex;
  padding: 15px;
  background-color: var(--workstate-comment);
  justify-content: center;
  align-items: center;
  border-radius: 0 0 10px 10px;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container .edit-general-comment-button,
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container .add-general-comment-button {
  margin-top: 15px;
  background-color: var(--default-color-2);
  border: 2px solid var(--default-color);
  color: var(--default-color);
  transition: all 250ms;
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container .edit-general-comment-button:hover,
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .teacher-comment .general-comment-container .add-general-comment-button:hover {
  background-color: var(--default-color);
  border: 2px solid var(--default-color);
  color: var(--default-color-2);
}
.nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .action-buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 799px) {
  .nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .end-correction-slide {
    position: relative;
    left: unset;
    top: unset;
  }
  .nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states {
    flex-flow: column nowrap;
    justify-content: flex-start;
    height: 300px;
    padding-right: 20px;
    overflow-y: auto;
  }
  .nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states::-webkit-scrollbar {
    width: 6px;
  }
  .nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states::-webkit-scrollbar-thumb {
    background-color: var(--student-challenges-color-11);
    border-radius: 6px;
  }
  .nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states::-webkit-scrollbar-track {
    background-color: var(--default-color-2);
    border-radius: 6px;
  }
  @supports not selector(::-webkit-scrollbar) {
    .nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states {
      scrollbar-color: var(--student-challenges-color-11) var(--default-color-2);
      scrollbar-width: thin;
    }
  }
  .nanopopup.end-correction-popup .end-correction-popup-content .end-correction-slides .challenge-states .challenge-state {
    width: 100%;
    min-height: unset;
    max-width: unset;
  }
}
.nanopopup.end-correction-popup.teacher-end-correction-popup .end-correction-popup-content .end-correction-slides .end-correction-slide {
  display: none;
}
.nanopopup.end-correction-popup.family-end-correction-popup .end-correction-popup-content h2 {
  margin-bottom: 40px;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.end-correction-popup {
    box-shadow: none !important;
    padding: 0 !important;
    width: 95vw !important;
    height: auto !important;
    min-width: 300px !important;
    max-width: 800px !important;
    min-height: 500px !important;
    max-height: 95vh !important;
  }
}
@keyframes menuOpenAnimation {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  85% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes menuCloseAnimation {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}
.text-over-game-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background: var(--default-bg-2);
  width: 100%;
  height: 100vh;
  z-index: 200;
}
.text-over-game-menu.opened {
  animation: menuOpenAnimation 200ms ease-in-out;
}
.text-over-game-menu.closed {
  animation: menuCloseAnimation 200ms ease-in-out;
}
.text-over-game-menu.no-drag .drag-button {
  display: none !important;
}
.text-over-game-menu.all-texts .dialog-button-container {
  display: none;
}
.text-over-game-menu .close-button {
  align-self: flex-start;
  margin: 20px 30px;
}
.text-over-game-menu .menu-container {
  position: fixed;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 5;
  padding-bottom: 35px;
}
.text-over-game-menu .menu-container.tablet-device {
  padding-bottom: 15px;
  padding-top: 15px;
}
.text-over-game-menu .menu-container .scroll-container {
  width: 100%;
  padding: 10px 50px 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: scroll;
  /* added css prefix for safari */
  overflow: hidden auto;
}
.text-over-game-menu .menu-container .scroll-container::-webkit-scrollbar {
  width: 8px;
}
.text-over-game-menu .menu-container .scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main);
  border-radius: 5px;
}
.text-over-game-menu .menu-container .scroll-container::-webkit-scrollbar-track {
  background-color: var(--input-border);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .text-over-game-menu .menu-container .scroll-container {
    scrollbar-color: var(--troubadour-main) var(--input-border);
    scrollbar-width: thin;
  }
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry {
  width: calc(100% - 100px);
  max-width: 1200px;
  transition: all 350ms !important;
  min-height: 150px;
  margin: 15px auto;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry .inner-container {
  min-height: 150px;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry .inner-container .revision-panel {
  left: 50%;
  width: 100%;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry .inner-container [contenteditable="false"],
.text-over-game-menu .menu-container .scroll-container .asset-text-entry .inner-container [contenteditable="false"] > * {
  cursor: pointer;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"] {
  height: 100%;
  justify-content: flex-start;
  padding: 15px 20px;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"] .asset-text-entry {
  transition: all 350ms !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"] .asset-text-entry .text-container {
  min-height: 25vh !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] {
  padding-top: 35px;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .asset-text-entry .text-container {
  min-height: 30vh !important;
  max-height: 30vh !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .icon-wrapper {
  height: 75px;
  width: 75px;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] {
  height: 100%;
  justify-content: flex-start;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .asset-text-entry {
  min-height: 50vh !important;
  max-height: 50vh !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .asset-text-entry .text-container {
  min-height: 40vh !important;
  max-height: 40vh !important;
}
.text-over-game-menu .menu-container .scroll-container[data-focus="true"] ~ .add-dialogue-button {
  display: none;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry[data-focus="true"] {
  height: initial !important;
  padding: 0 !important;
}
.text-over-game-menu .menu-container .scroll-container .asset-text-entry[data-focus="true"] .drag-button {
  display: none;
}
.text-over-game-menu .menu-container .add-dialogue-button {
  width: 100%;
  padding: 20px 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.text-over-game-menu .menu-container .add-dialogue-button .inner {
  display: flex;
  padding: 15px;
  border: 2px dashed var(--ui-disabled-2);
  border-radius: 10px;
  background-color: var(--default-bg);
  width: calc(100% - 100px);
  max-width: 1200px;
  height: 134px;
  min-height: 134px;
  margin: 0 auto;
  cursor: pointer;
  box-shadow: var(--dropshadow2);
}
.text-over-game-menu .menu-container .add-dialogue-button:hover {
  filter: brightness(98%);
}
.text-over-game-menu .menu-container .add-dialogue-button:hover .icon-wrapper {
  filter: grayscale(0);
}
.text-over-game-menu .menu-container .add-dialogue-button .icon-wrapper {
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--default-bg);
  border-radius: 5px;
  border: 2px solid var(--text-entry-icon-border);
  padding: 2px;
  margin-right: 20px;
  filter: grayscale(100%);
}
.text-over-game-menu .menu-container .add-dialogue-button .icon-wrapper .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  position: relative;
}
.text-over-game-menu .menu-container .add-dialogue-button .icon-wrapper .icon-container.flip {
  transform: rotateY(180deg);
}
.text-over-game-menu .menu-container .add-dialogue-button .icon-wrapper .icon-container .icon {
  position: absolute;
}
.text-over-game-menu .menu-container .add-dialogue-button .text {
  background-color: var(--text-entry-bg);
  color: var(--ui-disabled);
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(18px, 3vw, 36px);
  height: 100px;
  padding: 0 20px;
}
.text-over-game-menu[data-selection="all"] .scroll-container {
  padding: 20px 75px 0 75px;
}
.text-over-game-menu[data-selection="all"] .add-dialogue-button {
  display: none;
}
.text-over-game-menu:not(.no-drag) .text-entry .text-entry-button.drag-button {
  display: flex !important;
}
@media screen and (max-width: 768px) {
  .text-over-game-menu .menu-container .back-to-list-button-header {
    display: none;
  }
  .text-over-game-menu .menu-container .scroll-container {
    padding: 25px 20px 0 20px;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"],
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] {
    padding-top: 90px;
    justify-content: flex-start;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .over-game-text-entry,
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .over-game-text-entry {
    min-height: 40vh !important;
    max-height: 40vh !important;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .over-game-text-entry .comment-button.text-entry-button,
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .over-game-text-entry .comment-button.text-entry-button {
    transform: translate3d(87px, -100%, 10px);
    transition: all 1ms linear;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .over-game-text-entry .inner-container .left-section .back-to-list-button,
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .over-game-text-entry .inner-container .left-section .back-to-list-button {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(-10px, -70px, 10px);
    transition: all 1ms linear;
  }
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="true"] .over-game-text-entry .inner-container .text-container,
  .text-over-game-menu .menu-container .scroll-container[data-focus="true"][data-is-mobile="false"] .over-game-text-entry .inner-container .text-container {
    min-height: 30vh !important;
    max-height: 30vh !important;
  }
  .text-over-game-menu .menu-container .scroll-container .asset-text-entry {
    width: 100%;
    padding-left: 40px;
    padding-right: 20px;
  }
  .text-over-game-menu .menu-container .add-dialogue-button {
    margin-top: 25px;
    padding: 0 40px 0 60px;
  }
  .text-over-game-menu .menu-container .add-dialogue-button .inner {
    width: 100%;
  }
}
.challenge-creation section.work-action-menu {
  display: none;
  flex-direction: row !important;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 0 20px;
  box-shadow: none;
  cursor: default !important;
}
.challenge-creation section.work-action-menu.teacher-end-validation {
  padding-top: 20px;
}
.challenge-creation section.work-action-menu .illustration {
  margin-right: 15px;
  min-width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-creation section.work-action-menu .illustration img {
  max-height: 150px;
}
.challenge-creation section.work-action-menu .action-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.challenge-creation section.work-action-menu .action-container h3 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 2.25em;
  font-weight: 800;
}
.challenge-creation section.work-action-menu.student-end-construction {
  color: var(--userchallenge-status-construction);
}
.challenge-creation section.work-action-menu.student-in-validation {
  color: var(--userchallenge-status-correction);
}
.challenge-creation-assign {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.challenge-creation-assign:focus {
  text-decoration: none;
}
.challenge-creation-assign[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-creation-assign .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-creation-assign .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-creation-assign:active,
.challenge-creation-assign:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-creation-assign.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-assign.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--challenge-creation-assign);
  border-radius: inherit;
  z-index: 10;
}
.challenge-creation-assign.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.challenge-creation-assign.legacy .button-text,
.challenge-creation-assign.legacy .icon {
  z-index: 11;
}
.challenge-creation-assign.legacy .button-text {
  color: var(--challenge-creation-assign);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-assign.legacy svg {
  color: var(--challenge-creation-assign);
}
.challenge-creation-assign.legacy:hover::before,
.challenge-creation-assign.legacy.selected::before {
  background-color: var(--challenge-creation-assign);
  border: 2px solid var(--challenge-creation-assign);
}
.challenge-creation-assign.legacy:hover .button-text,
.challenge-creation-assign.legacy.selected .button-text {
  color: var(--default-color-2);
}
.challenge-creation-assign.legacy:hover img,
.challenge-creation-assign.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-creation-assign.legacy.disabled {
  pointer-events: none;
}
.challenge-creation-assign.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-creation-assign.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-creation-assign.legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-creation-assign.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-creation-assign.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-creation-assign.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-assign.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-creation-assign.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-creation-assign.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-creation-assign.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-creation-assign.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-creation-assign.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-creation-assign.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-creation-assign.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-creation-assign.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-creation-assign.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-creation-assign.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-creation-assign.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-creation-assign.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-creation-assign.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-creation-assign.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-creation-assign.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-creation-assign.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-creation-assign.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-creation-assign.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-creation-assign.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-creation-assign.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-creation-assign.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-creation-assign.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-creation-assign.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-assign.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-creation-assign);
  border: 2px solid var(--challenge-creation-assign);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-creation-assign.pill .button-text,
.challenge-creation-assign.pill .icon {
  z-index: 11;
}
.challenge-creation-assign.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-assign.pill svg {
  color: var(--default-color-2);
}
.challenge-creation-assign.pill:hover::before,
.challenge-creation-assign.pill.selected::before {
  filter: brightness(1.3);
}
.challenge-creation-assign.pill:hover img,
.challenge-creation-assign.pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-creation-assign.pill.no-shadow::before {
  box-shadow: none;
}
.challenge-creation-assign.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-creation-assign.pill.has-border:hover::before,
.challenge-creation-assign.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-creation-assign.pill.alt-hover:hover::before,
.challenge-creation-assign.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.challenge-creation-assign.pill.alt-hover:hover .icon,
.challenge-creation-assign.pill.alt-hover.selected .icon,
.challenge-creation-assign.pill.alt-hover:hover .button-text,
.challenge-creation-assign.pill.alt-hover.selected .button-text {
  color: var(--challenge-creation-assign);
}
.challenge-creation-assign.pill.alt-hover:hover .icon,
.challenge-creation-assign.pill.alt-hover.selected .icon {
  background-color: var(--challenge-creation-assign);
}
.challenge-creation-assign.pill.disabled,
.challenge-creation-assign.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-creation-assign.pill.disabled::before,
.challenge-creation-assign.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-creation-assign.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-creation-assign.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-creation-assign.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-creation-assign.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-assign.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-creation-assign.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-creation-assign.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-creation-assign.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-creation-assign.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-creation-assign.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-creation-assign.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-creation-assign.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-creation-assign.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-creation-assign.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-creation-assign.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-creation-assign.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-creation-assign.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-creation-assign.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-creation-assign.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-creation-assign.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-creation-assign.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-creation-assign.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-creation-assign.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-creation-assign.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-creation-assign.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-creation-assign.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-creation-assign.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-creation-assign.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-creation-assign.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-creation-assign.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-creation-assign.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-creation-assign.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-creation-assign.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-creation-assign.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-creation-assign.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-creation-assign.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-creation-assign.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-creation-assign.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-creation-assign.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-creation-assign.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-creation-assign.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-creation-assign.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-creation-assign.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-creation-assign.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-creation-assign.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-creation-assign.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-creation-assign.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-assign.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-creation-assign.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-assign.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-creation-assign.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-creation-assign.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-creation-assign.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-creation-assign.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-creation-assign.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-creation-assign.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-assign.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-creation-assign.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-assign.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-creation-assign.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-creation-assign.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-creation-assign.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-creation-assign.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-creation-assign.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-creation-assign.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-assign.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-creation-assign.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-assign.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-creation-assign.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-creation-assign.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-creation-assign.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-creation-assign.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-creation-assign.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-creation-assign.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-creation-assign.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-creation-assign.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-creation-assign.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-creation-assign.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-creation-assign.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-creation-assign.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-creation-assign.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-creation-assign.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-creation-assign.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-creation-assign.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-creation-assign.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-assign.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-creation-assign);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-creation-assign.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-assign.pill-alt:hover::before,
.challenge-creation-assign.pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-creation-assign.pill-alt:hover .button-text,
.challenge-creation-assign.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-creation-assign.pill-alt.disabled,
.challenge-creation-assign.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-creation-assign.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-assign.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-creation-assign.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-creation-assign.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-creation-assign.round .icon,
.challenge-creation-assign.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-creation-assign.round:hover,
.challenge-creation-assign.round.selected {
  opacity: 1;
}
.challenge-creation-assign.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-creation-assign.round.disabled {
  pointer-events: none;
}
.challenge-creation-assign.round.disabled .icon {
  filter: saturate(0);
}
.challenge-creation-assign.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-creation-assign.round[data-size="regular"].active {
  opacity: 1;
}
.challenge-creation-assign.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-creation-assign.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-creation-assign.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-creation-assign.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-creation-assign.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-creation-assign.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-creation-assign.nav {
  flex-wrap: nowrap;
}
.challenge-creation-assign.nav svg {
  color: var(--troubadour-main);
}
.challenge-creation-assign.nav .icon,
.challenge-creation-assign.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-creation-assign.nav .button-text {
  color: var(--challenge-creation-assign);
  font-weight: bold;
}
.challenge-creation-assign.nav:hover {
  text-decoration: underline;
}
.challenge-creation-assign.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-creation-assign.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-creation-assign.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-creation-assign.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-creation-assign.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-creation-assign.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-creation-assign.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-creation-assign.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-creation-assign.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-creation-assign.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-creation-assign.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-creation-assign.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-creation-assign.nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-creation-assign.nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-creation-assign.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-creation-assign.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-creation-assign.nav[data-size="small"] {
  padding: 10px;
}
.challenge-creation-assign.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-creation-assign.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-creation-assign.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-creation-assign.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-creation-assign.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-creation-assign.nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-creation-assign.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-creation-assign.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-creation-modify,
.challenge-creation-access,
.challenge-template-modify {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.challenge-creation-modify:focus,
.challenge-creation-access:focus,
.challenge-template-modify:focus {
  text-decoration: none;
}
.challenge-creation-modify[data-icon-position="left"],
.challenge-creation-access[data-icon-position="left"],
.challenge-template-modify[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-creation-modify .button-text,
.challenge-creation-access .button-text,
.challenge-template-modify .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-creation-modify .button-text.ws-no-wrap,
.challenge-creation-access .button-text.ws-no-wrap,
.challenge-template-modify .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-creation-modify:active,
.challenge-creation-access:active,
.challenge-template-modify:active,
.challenge-creation-modify:hover,
.challenge-creation-access:hover,
.challenge-template-modify:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-creation-modify.legacy,
.challenge-creation-access.legacy,
.challenge-template-modify.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-modify.legacy::before,
.challenge-creation-access.legacy::before,
.challenge-template-modify.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--challenge-creation-access);
  border-radius: inherit;
  z-index: 10;
}
.challenge-creation-modify.legacy.has-shadow::before,
.challenge-creation-access.legacy.has-shadow::before,
.challenge-template-modify.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.challenge-creation-modify.legacy .button-text,
.challenge-creation-access.legacy .button-text,
.challenge-template-modify.legacy .button-text,
.challenge-creation-modify.legacy .icon,
.challenge-creation-access.legacy .icon,
.challenge-template-modify.legacy .icon {
  z-index: 11;
}
.challenge-creation-modify.legacy .button-text,
.challenge-creation-access.legacy .button-text,
.challenge-template-modify.legacy .button-text {
  color: var(--challenge-creation-access);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-modify.legacy svg,
.challenge-creation-access.legacy svg,
.challenge-template-modify.legacy svg {
  color: var(--challenge-creation-access);
}
.challenge-creation-modify.legacy:hover::before,
.challenge-creation-access.legacy:hover::before,
.challenge-template-modify.legacy:hover::before,
.challenge-creation-modify.legacy.selected::before,
.challenge-creation-access.legacy.selected::before,
.challenge-template-modify.legacy.selected::before {
  background-color: var(--challenge-creation-access);
  border: 2px solid var(--challenge-creation-access);
}
.challenge-creation-modify.legacy:hover .button-text,
.challenge-creation-access.legacy:hover .button-text,
.challenge-template-modify.legacy:hover .button-text,
.challenge-creation-modify.legacy.selected .button-text,
.challenge-creation-access.legacy.selected .button-text,
.challenge-template-modify.legacy.selected .button-text {
  color: var(--default-color-2);
}
.challenge-creation-modify.legacy:hover img,
.challenge-creation-access.legacy:hover img,
.challenge-template-modify.legacy:hover img,
.challenge-creation-modify.legacy.selected img,
.challenge-creation-access.legacy.selected img,
.challenge-template-modify.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-creation-modify.legacy.disabled,
.challenge-creation-access.legacy.disabled,
.challenge-template-modify.legacy.disabled {
  pointer-events: none;
}
.challenge-creation-modify.legacy.disabled::before,
.challenge-creation-access.legacy.disabled::before,
.challenge-template-modify.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-creation-modify.legacy.disabled .button-text,
.challenge-creation-access.legacy.disabled .button-text,
.challenge-template-modify.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-creation-modify.legacy.disabled .icon,
.challenge-creation-access.legacy.disabled .icon,
.challenge-template-modify.legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-creation-modify.legacy.invalid::before,
.challenge-creation-access.legacy.invalid::before,
.challenge-template-modify.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-creation-modify.legacy.invalid .button-text,
.challenge-creation-access.legacy.invalid .button-text,
.challenge-template-modify.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-creation-modify.legacy.waiting,
.challenge-creation-access.legacy.waiting,
.challenge-template-modify.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-modify.legacy .icon,
.challenge-creation-access.legacy .icon,
.challenge-template-modify.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-creation-modify.legacy .icon img,
.challenge-creation-access.legacy .icon img,
.challenge-template-modify.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-creation-modify.legacy[data-size="tiny"],
.challenge-creation-access.legacy[data-size="tiny"],
.challenge-template-modify.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-creation-modify.legacy[data-size="tiny"] .icon,
.challenge-creation-access.legacy[data-size="tiny"] .icon,
.challenge-template-modify.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-creation-modify.legacy[data-size="tiny"] .button-text,
.challenge-creation-access.legacy[data-size="tiny"] .button-text,
.challenge-template-modify.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-creation-modify.legacy[data-size="tiny"][data-icon-position="left"],
.challenge-creation-access.legacy[data-size="tiny"][data-icon-position="left"],
.challenge-template-modify.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-creation-modify.legacy[data-size="tiny"][data-icon-position="left"] .icon,
.challenge-creation-access.legacy[data-size="tiny"][data-icon-position="left"] .icon,
.challenge-template-modify.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-creation-modify.legacy[data-size="tiny"][data-icon-position="right"],
.challenge-creation-access.legacy[data-size="tiny"][data-icon-position="right"],
.challenge-template-modify.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-creation-modify.legacy[data-size="tiny"][data-icon-position="right"] .icon,
.challenge-creation-access.legacy[data-size="tiny"][data-icon-position="right"] .icon,
.challenge-template-modify.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-creation-modify.legacy[data-size="small"],
.challenge-creation-access.legacy[data-size="small"],
.challenge-template-modify.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-creation-modify.legacy[data-size="small"] .icon,
.challenge-creation-access.legacy[data-size="small"] .icon,
.challenge-template-modify.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-creation-modify.legacy[data-size="small"] .button-text,
.challenge-creation-access.legacy[data-size="small"] .button-text,
.challenge-template-modify.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-creation-modify.legacy[data-size="small"][data-icon-position="left"],
.challenge-creation-access.legacy[data-size="small"][data-icon-position="left"],
.challenge-template-modify.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-creation-modify.legacy[data-size="small"][data-icon-position="left"] .icon,
.challenge-creation-access.legacy[data-size="small"][data-icon-position="left"] .icon,
.challenge-template-modify.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-creation-modify.legacy[data-size="small"][data-icon-position="right"],
.challenge-creation-access.legacy[data-size="small"][data-icon-position="right"],
.challenge-template-modify.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-creation-modify.legacy[data-size="small"][data-icon-position="right"] .icon,
.challenge-creation-access.legacy[data-size="small"][data-icon-position="right"] .icon,
.challenge-template-modify.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-creation-modify.legacy[data-size="regular"],
.challenge-creation-access.legacy[data-size="regular"],
.challenge-template-modify.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-creation-modify.legacy[data-size="regular"] .icon,
.challenge-creation-access.legacy[data-size="regular"] .icon,
.challenge-template-modify.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-creation-modify.legacy[data-size="regular"] .button-text,
.challenge-creation-access.legacy[data-size="regular"] .button-text,
.challenge-template-modify.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-creation-modify.legacy[data-size="regular"][data-icon-position="left"],
.challenge-creation-access.legacy[data-size="regular"][data-icon-position="left"],
.challenge-template-modify.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-creation-modify.legacy[data-size="regular"][data-icon-position="left"] .icon,
.challenge-creation-access.legacy[data-size="regular"][data-icon-position="left"] .icon,
.challenge-template-modify.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-creation-modify.legacy[data-size="regular"][data-icon-position="right"],
.challenge-creation-access.legacy[data-size="regular"][data-icon-position="right"],
.challenge-template-modify.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-creation-modify.legacy[data-size="regular"][data-icon-position="right"] .icon,
.challenge-creation-access.legacy[data-size="regular"][data-icon-position="right"] .icon,
.challenge-template-modify.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-creation-modify.pill,
.challenge-creation-access.pill,
.challenge-template-modify.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-modify.pill::before,
.challenge-creation-access.pill::before,
.challenge-template-modify.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-creation-access);
  border: 2px solid var(--challenge-creation-access);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-creation-modify.pill .button-text,
.challenge-creation-access.pill .button-text,
.challenge-template-modify.pill .button-text,
.challenge-creation-modify.pill .icon,
.challenge-creation-access.pill .icon,
.challenge-template-modify.pill .icon {
  z-index: 11;
}
.challenge-creation-modify.pill .button-text,
.challenge-creation-access.pill .button-text,
.challenge-template-modify.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-modify.pill svg,
.challenge-creation-access.pill svg,
.challenge-template-modify.pill svg {
  color: var(--default-color-2);
}
.challenge-creation-modify.pill:hover::before,
.challenge-creation-access.pill:hover::before,
.challenge-template-modify.pill:hover::before,
.challenge-creation-modify.pill.selected::before,
.challenge-creation-access.pill.selected::before,
.challenge-template-modify.pill.selected::before {
  filter: brightness(1.3);
}
.challenge-creation-modify.pill:hover img,
.challenge-creation-access.pill:hover img,
.challenge-template-modify.pill:hover img,
.challenge-creation-modify.pill.selected img,
.challenge-creation-access.pill.selected img,
.challenge-template-modify.pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-creation-modify.pill.no-shadow::before,
.challenge-creation-access.pill.no-shadow::before,
.challenge-template-modify.pill.no-shadow::before {
  box-shadow: none;
}
.challenge-creation-modify.pill.has-border::before,
.challenge-creation-access.pill.has-border::before,
.challenge-template-modify.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-creation-modify.pill.has-border:hover::before,
.challenge-creation-access.pill.has-border:hover::before,
.challenge-template-modify.pill.has-border:hover::before,
.challenge-creation-modify.pill.has-border.selected::before,
.challenge-creation-access.pill.has-border.selected::before,
.challenge-template-modify.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-creation-modify.pill.alt-hover:hover::before,
.challenge-creation-access.pill.alt-hover:hover::before,
.challenge-template-modify.pill.alt-hover:hover::before,
.challenge-creation-modify.pill.alt-hover.selected::before,
.challenge-creation-access.pill.alt-hover.selected::before,
.challenge-template-modify.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.challenge-creation-modify.pill.alt-hover:hover .icon,
.challenge-creation-access.pill.alt-hover:hover .icon,
.challenge-template-modify.pill.alt-hover:hover .icon,
.challenge-creation-modify.pill.alt-hover.selected .icon,
.challenge-creation-access.pill.alt-hover.selected .icon,
.challenge-template-modify.pill.alt-hover.selected .icon,
.challenge-creation-modify.pill.alt-hover:hover .button-text,
.challenge-creation-access.pill.alt-hover:hover .button-text,
.challenge-template-modify.pill.alt-hover:hover .button-text,
.challenge-creation-modify.pill.alt-hover.selected .button-text,
.challenge-creation-access.pill.alt-hover.selected .button-text,
.challenge-template-modify.pill.alt-hover.selected .button-text {
  color: var(--challenge-creation-access);
}
.challenge-creation-modify.pill.alt-hover:hover .icon,
.challenge-creation-access.pill.alt-hover:hover .icon,
.challenge-template-modify.pill.alt-hover:hover .icon,
.challenge-creation-modify.pill.alt-hover.selected .icon,
.challenge-creation-access.pill.alt-hover.selected .icon,
.challenge-template-modify.pill.alt-hover.selected .icon {
  background-color: var(--challenge-creation-access);
}
.challenge-creation-modify.pill.disabled,
.challenge-creation-access.pill.disabled,
.challenge-template-modify.pill.disabled,
.challenge-creation-modify.pill.invalid,
.challenge-creation-access.pill.invalid,
.challenge-template-modify.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-creation-modify.pill.disabled::before,
.challenge-creation-access.pill.disabled::before,
.challenge-template-modify.pill.disabled::before,
.challenge-creation-modify.pill.invalid::before,
.challenge-creation-access.pill.invalid::before,
.challenge-template-modify.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-creation-modify.pill.disabled:not([data-icon-type=""]) .icon,
.challenge-creation-access.pill.disabled:not([data-icon-type=""]) .icon,
.challenge-template-modify.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-creation-modify.pill.disabled:not([data-icon-type=""]) .icon img,
.challenge-creation-access.pill.disabled:not([data-icon-type=""]) .icon img,
.challenge-template-modify.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-creation-modify.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon,
.challenge-creation-access.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon,
.challenge-template-modify.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-creation-modify.pill.waiting,
.challenge-creation-access.pill.waiting,
.challenge-template-modify.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-modify.pill .icon,
.challenge-creation-access.pill .icon,
.challenge-template-modify.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-creation-modify.pill .icon img,
.challenge-creation-access.pill .icon img,
.challenge-template-modify.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-creation-modify.pill[data-icon-position="null"] .icon,
.challenge-creation-access.pill[data-icon-position="null"] .icon,
.challenge-template-modify.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-creation-modify.pill[data-size="micro"],
.challenge-creation-access.pill[data-size="micro"],
.challenge-template-modify.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-creation-modify.pill[data-size="micro"] .icon,
.challenge-creation-access.pill[data-size="micro"] .icon,
.challenge-template-modify.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-creation-modify.pill[data-size="micro"] .button-text,
.challenge-creation-access.pill[data-size="micro"] .button-text,
.challenge-template-modify.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-creation-modify.pill[data-size="micro"][data-icon-position="left"],
.challenge-creation-access.pill[data-size="micro"][data-icon-position="left"],
.challenge-template-modify.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-creation-modify.pill[data-size="micro"][data-icon-position="left"] .icon,
.challenge-creation-access.pill[data-size="micro"][data-icon-position="left"] .icon,
.challenge-template-modify.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-creation-modify.pill[data-size="micro"][data-icon-position="right"],
.challenge-creation-access.pill[data-size="micro"][data-icon-position="right"],
.challenge-template-modify.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-creation-modify.pill[data-size="micro"][data-icon-position="right"] .icon,
.challenge-creation-access.pill[data-size="micro"][data-icon-position="right"] .icon,
.challenge-template-modify.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-creation-modify.pill[data-size="micro"][data-icon-position="null"],
.challenge-creation-access.pill[data-size="micro"][data-icon-position="null"],
.challenge-template-modify.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-creation-modify.pill[data-size="micro"][data-icon-position="null"] .button-text,
.challenge-creation-access.pill[data-size="micro"][data-icon-position="null"] .button-text,
.challenge-template-modify.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-creation-modify.pill[data-size="mini"],
.challenge-creation-access.pill[data-size="mini"],
.challenge-template-modify.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-creation-modify.pill[data-size="mini"] .icon,
.challenge-creation-access.pill[data-size="mini"] .icon,
.challenge-template-modify.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-creation-modify.pill[data-size="mini"] .button-text,
.challenge-creation-access.pill[data-size="mini"] .button-text,
.challenge-template-modify.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-creation-modify.pill[data-size="mini"][data-icon-position="left"],
.challenge-creation-access.pill[data-size="mini"][data-icon-position="left"],
.challenge-template-modify.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-creation-modify.pill[data-size="mini"][data-icon-position="left"] .icon,
.challenge-creation-access.pill[data-size="mini"][data-icon-position="left"] .icon,
.challenge-template-modify.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-creation-modify.pill[data-size="mini"][data-icon-position="right"],
.challenge-creation-access.pill[data-size="mini"][data-icon-position="right"],
.challenge-template-modify.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-creation-modify.pill[data-size="mini"][data-icon-position="right"] .icon,
.challenge-creation-access.pill[data-size="mini"][data-icon-position="right"] .icon,
.challenge-template-modify.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-creation-modify.pill[data-size="mini"][data-icon-position="null"],
.challenge-creation-access.pill[data-size="mini"][data-icon-position="null"],
.challenge-template-modify.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-creation-modify.pill[data-size="mini"][data-icon-position="null"] .button-text,
.challenge-creation-access.pill[data-size="mini"][data-icon-position="null"] .button-text,
.challenge-template-modify.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-creation-modify.pill[data-size="tiny"],
.challenge-creation-access.pill[data-size="tiny"],
.challenge-template-modify.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-creation-modify.pill[data-size="tiny"] .icon,
.challenge-creation-access.pill[data-size="tiny"] .icon,
.challenge-template-modify.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-creation-modify.pill[data-size="tiny"] .button-text,
.challenge-creation-access.pill[data-size="tiny"] .button-text,
.challenge-template-modify.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-creation-modify.pill[data-size="tiny"][data-icon-position="left"],
.challenge-creation-access.pill[data-size="tiny"][data-icon-position="left"],
.challenge-template-modify.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-creation-modify.pill[data-size="tiny"][data-icon-position="left"] .icon,
.challenge-creation-access.pill[data-size="tiny"][data-icon-position="left"] .icon,
.challenge-template-modify.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-creation-modify.pill[data-size="tiny"][data-icon-position="right"],
.challenge-creation-access.pill[data-size="tiny"][data-icon-position="right"],
.challenge-template-modify.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-creation-modify.pill[data-size="tiny"][data-icon-position="right"] .icon,
.challenge-creation-access.pill[data-size="tiny"][data-icon-position="right"] .icon,
.challenge-template-modify.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-creation-modify.pill[data-size="tiny"][data-icon-position="null"],
.challenge-creation-access.pill[data-size="tiny"][data-icon-position="null"],
.challenge-template-modify.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-creation-modify.pill[data-size="tiny"][data-icon-position="null"] .button-text,
.challenge-creation-access.pill[data-size="tiny"][data-icon-position="null"] .button-text,
.challenge-template-modify.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-creation-modify.pill[data-size="small"],
.challenge-creation-access.pill[data-size="small"],
.challenge-template-modify.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-creation-modify.pill[data-size="small"] .icon,
.challenge-creation-access.pill[data-size="small"] .icon,
.challenge-template-modify.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-creation-modify.pill[data-size="small"] .button-text,
.challenge-creation-access.pill[data-size="small"] .button-text,
.challenge-template-modify.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-creation-modify.pill[data-size="small"][data-icon-position="left"],
.challenge-creation-access.pill[data-size="small"][data-icon-position="left"],
.challenge-template-modify.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-creation-modify.pill[data-size="small"][data-icon-position="left"] .icon,
.challenge-creation-access.pill[data-size="small"][data-icon-position="left"] .icon,
.challenge-template-modify.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-creation-modify.pill[data-size="small"][data-icon-position="right"],
.challenge-creation-access.pill[data-size="small"][data-icon-position="right"],
.challenge-template-modify.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-creation-modify.pill[data-size="small"][data-icon-position="right"] .icon,
.challenge-creation-access.pill[data-size="small"][data-icon-position="right"] .icon,
.challenge-template-modify.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-creation-modify.pill[data-size="small"][data-icon-position="null"],
.challenge-creation-access.pill[data-size="small"][data-icon-position="null"],
.challenge-template-modify.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-creation-modify.pill[data-size="small"][data-icon-position="null"] .button-text,
.challenge-creation-access.pill[data-size="small"][data-icon-position="null"] .button-text,
.challenge-template-modify.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-creation-modify.pill[data-size="regular"],
.challenge-creation-access.pill[data-size="regular"],
.challenge-template-modify.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-creation-modify.pill[data-size="regular"] .icon,
.challenge-creation-access.pill[data-size="regular"] .icon,
.challenge-template-modify.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-creation-modify.pill[data-size="regular"] .button-text,
.challenge-creation-access.pill[data-size="regular"] .button-text,
.challenge-template-modify.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-creation-modify.pill[data-size="regular"][data-icon-position="left"],
.challenge-creation-access.pill[data-size="regular"][data-icon-position="left"],
.challenge-template-modify.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-modify.pill[data-size="regular"][data-icon-position="left"] .icon,
.challenge-creation-access.pill[data-size="regular"][data-icon-position="left"] .icon,
.challenge-template-modify.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-creation-modify.pill[data-size="regular"][data-icon-position="right"],
.challenge-creation-access.pill[data-size="regular"][data-icon-position="right"],
.challenge-template-modify.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-modify.pill[data-size="regular"][data-icon-position="right"] .icon,
.challenge-creation-access.pill[data-size="regular"][data-icon-position="right"] .icon,
.challenge-template-modify.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-creation-modify.pill[data-size="regular"][data-icon-position="null"],
.challenge-creation-access.pill[data-size="regular"][data-icon-position="null"],
.challenge-template-modify.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-creation-modify.pill[data-size="regular"][data-icon-position="null"] .button-text,
.challenge-creation-access.pill[data-size="regular"][data-icon-position="null"] .button-text,
.challenge-template-modify.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-creation-modify.pill[data-size="large"],
.challenge-creation-access.pill[data-size="large"],
.challenge-template-modify.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-creation-modify.pill[data-size="large"] .icon,
.challenge-creation-access.pill[data-size="large"] .icon,
.challenge-template-modify.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-creation-modify.pill[data-size="large"] .button-text,
.challenge-creation-access.pill[data-size="large"] .button-text,
.challenge-template-modify.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-creation-modify.pill[data-size="large"][data-icon-position="left"],
.challenge-creation-access.pill[data-size="large"][data-icon-position="left"],
.challenge-template-modify.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-modify.pill[data-size="large"][data-icon-position="left"] .icon,
.challenge-creation-access.pill[data-size="large"][data-icon-position="left"] .icon,
.challenge-template-modify.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-creation-modify.pill[data-size="large"][data-icon-position="right"],
.challenge-creation-access.pill[data-size="large"][data-icon-position="right"],
.challenge-template-modify.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-modify.pill[data-size="large"][data-icon-position="right"] .icon,
.challenge-creation-access.pill[data-size="large"][data-icon-position="right"] .icon,
.challenge-template-modify.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-creation-modify.pill[data-size="large"][data-icon-position="null"],
.challenge-creation-access.pill[data-size="large"][data-icon-position="null"],
.challenge-template-modify.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-creation-modify.pill[data-size="large"][data-icon-position="null"] .button-text,
.challenge-creation-access.pill[data-size="large"][data-icon-position="null"] .button-text,
.challenge-template-modify.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-creation-modify.pill[data-size="xlarge"],
.challenge-creation-access.pill[data-size="xlarge"],
.challenge-template-modify.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-creation-modify.pill[data-size="xlarge"] .icon,
.challenge-creation-access.pill[data-size="xlarge"] .icon,
.challenge-template-modify.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-creation-modify.pill[data-size="xlarge"] .button-text,
.challenge-creation-access.pill[data-size="xlarge"] .button-text,
.challenge-template-modify.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-creation-modify.pill[data-size="xlarge"][data-icon-position="left"],
.challenge-creation-access.pill[data-size="xlarge"][data-icon-position="left"],
.challenge-template-modify.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-modify.pill[data-size="xlarge"][data-icon-position="left"] .icon,
.challenge-creation-access.pill[data-size="xlarge"][data-icon-position="left"] .icon,
.challenge-template-modify.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-creation-modify.pill[data-size="xlarge"][data-icon-position="right"],
.challenge-creation-access.pill[data-size="xlarge"][data-icon-position="right"],
.challenge-template-modify.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-modify.pill[data-size="xlarge"][data-icon-position="right"] .icon,
.challenge-creation-access.pill[data-size="xlarge"][data-icon-position="right"] .icon,
.challenge-template-modify.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-creation-modify.pill[data-size="xlarge"][data-icon-position="null"],
.challenge-creation-access.pill[data-size="xlarge"][data-icon-position="null"],
.challenge-template-modify.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-creation-modify.pill[data-size="xlarge"][data-icon-position="null"] .button-text,
.challenge-creation-access.pill[data-size="xlarge"][data-icon-position="null"] .button-text,
.challenge-template-modify.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-creation-modify.pill.icon-no-bg .icon,
.challenge-creation-access.pill.icon-no-bg .icon,
.challenge-template-modify.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="micro"] .icon,
.challenge-creation-access.pill.icon-no-bg[data-size="micro"] .icon,
.challenge-template-modify.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="micro"] .button-text,
.challenge-creation-access.pill.icon-no-bg[data-size="micro"] .button-text,
.challenge-template-modify.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="mini"] .icon,
.challenge-creation-access.pill.icon-no-bg[data-size="mini"] .icon,
.challenge-template-modify.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="mini"] .button-text,
.challenge-creation-access.pill.icon-no-bg[data-size="mini"] .button-text,
.challenge-template-modify.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="tiny"] .icon,
.challenge-creation-access.pill.icon-no-bg[data-size="tiny"] .icon,
.challenge-template-modify.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="tiny"] .button-text,
.challenge-creation-access.pill.icon-no-bg[data-size="tiny"] .button-text,
.challenge-template-modify.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="small"] .icon,
.challenge-creation-access.pill.icon-no-bg[data-size="small"] .icon,
.challenge-template-modify.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="small"] .button-text,
.challenge-creation-access.pill.icon-no-bg[data-size="small"] .button-text,
.challenge-template-modify.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="regular"] .icon,
.challenge-creation-access.pill.icon-no-bg[data-size="regular"] .icon,
.challenge-template-modify.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="regular"] .button-text,
.challenge-creation-access.pill.icon-no-bg[data-size="regular"] .button-text,
.challenge-template-modify.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="large"] .icon,
.challenge-creation-access.pill.icon-no-bg[data-size="large"] .icon,
.challenge-template-modify.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="large"] .button-text,
.challenge-creation-access.pill.icon-no-bg[data-size="large"] .button-text,
.challenge-template-modify.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="xlarge"] .icon,
.challenge-creation-access.pill.icon-no-bg[data-size="xlarge"] .icon,
.challenge-template-modify.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-creation-modify.pill.icon-no-bg[data-size="xlarge"] .button-text,
.challenge-creation-access.pill.icon-no-bg[data-size="xlarge"] .button-text,
.challenge-template-modify.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-creation-modify.pill[data-size="responsive"],
  .challenge-creation-access.pill[data-size="responsive"],
  .challenge-template-modify.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-creation-modify.pill[data-size="responsive"] .icon,
  .challenge-creation-access.pill[data-size="responsive"] .icon,
  .challenge-template-modify.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-creation-modify.pill[data-size="responsive"] .button-text,
  .challenge-creation-access.pill[data-size="responsive"] .button-text,
  .challenge-template-modify.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="left"],
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="left"],
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="left"] .icon,
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="left"] .icon,
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="right"],
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="right"],
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="right"] .icon,
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="right"] .icon,
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="null"],
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="null"],
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="null"] .button-text,
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="null"] .button-text,
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-creation-modify.pill[data-size="responsive"].icon-no-bg .icon,
  .challenge-creation-access.pill[data-size="responsive"].icon-no-bg .icon,
  .challenge-template-modify.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-creation-modify.pill[data-size="responsive"].icon-no-bg .button-text,
  .challenge-creation-access.pill[data-size="responsive"].icon-no-bg .button-text,
  .challenge-template-modify.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-creation-modify.pill[data-size="responsive"],
  .challenge-creation-access.pill[data-size="responsive"],
  .challenge-template-modify.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-creation-modify.pill[data-size="responsive"] .icon,
  .challenge-creation-access.pill[data-size="responsive"] .icon,
  .challenge-template-modify.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-creation-modify.pill[data-size="responsive"] .button-text,
  .challenge-creation-access.pill[data-size="responsive"] .button-text,
  .challenge-template-modify.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="left"],
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="left"],
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="left"] .icon,
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="left"] .icon,
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="right"],
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="right"],
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="right"] .icon,
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="right"] .icon,
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="null"],
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="null"],
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-creation-modify.pill[data-size="responsive"][data-icon-position="null"] .button-text,
  .challenge-creation-access.pill[data-size="responsive"][data-icon-position="null"] .button-text,
  .challenge-template-modify.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-creation-modify.pill[data-size="responsive"].icon-no-bg .icon,
  .challenge-creation-access.pill[data-size="responsive"].icon-no-bg .icon,
  .challenge-template-modify.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-creation-modify.pill[data-size="responsive"].icon-no-bg .button-text,
  .challenge-creation-access.pill[data-size="responsive"].icon-no-bg .button-text,
  .challenge-template-modify.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]),
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]),
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"],
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"],
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"],
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"],
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"],
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"],
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]),
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]),
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"],
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"],
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"],
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"],
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"],
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"],
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-creation-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text,
  .challenge-creation-access.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text,
  .challenge-template-modify.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-creation-modify.pill-alt,
.challenge-creation-access.pill-alt,
.challenge-template-modify.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-modify.pill-alt::before,
.challenge-creation-access.pill-alt::before,
.challenge-template-modify.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-creation-access);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-creation-modify.pill-alt .button-text,
.challenge-creation-access.pill-alt .button-text,
.challenge-template-modify.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-modify.pill-alt:hover::before,
.challenge-creation-access.pill-alt:hover::before,
.challenge-template-modify.pill-alt:hover::before,
.challenge-creation-modify.pill-alt.selected::before,
.challenge-creation-access.pill-alt.selected::before,
.challenge-template-modify.pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-creation-modify.pill-alt:hover .button-text,
.challenge-creation-access.pill-alt:hover .button-text,
.challenge-template-modify.pill-alt:hover .button-text,
.challenge-creation-modify.pill-alt.selected .button-text,
.challenge-creation-access.pill-alt.selected .button-text,
.challenge-template-modify.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-creation-modify.pill-alt.disabled,
.challenge-creation-access.pill-alt.disabled,
.challenge-template-modify.pill-alt.disabled,
.challenge-creation-modify.pill-alt.invalid,
.challenge-creation-access.pill-alt.invalid,
.challenge-template-modify.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-creation-modify.pill-alt.waiting,
.challenge-creation-access.pill-alt.waiting,
.challenge-template-modify.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-modify.pill-alt[data-size="small"],
.challenge-creation-access.pill-alt[data-size="small"],
.challenge-template-modify.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-creation-modify.pill-alt[data-size="small"] .button-text,
.challenge-creation-access.pill-alt[data-size="small"] .button-text,
.challenge-template-modify.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-creation-modify.round,
.challenge-creation-access.round,
.challenge-template-modify.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-creation-modify.round .icon,
.challenge-creation-access.round .icon,
.challenge-template-modify.round .icon,
.challenge-creation-modify.round svg,
.challenge-creation-access.round svg,
.challenge-template-modify.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-creation-modify.round:hover,
.challenge-creation-access.round:hover,
.challenge-template-modify.round:hover,
.challenge-creation-modify.round.selected,
.challenge-creation-access.round.selected,
.challenge-template-modify.round.selected {
  opacity: 1;
}
.challenge-creation-modify.round.inactive,
.challenge-creation-access.round.inactive,
.challenge-template-modify.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-creation-modify.round.disabled,
.challenge-creation-access.round.disabled,
.challenge-template-modify.round.disabled {
  pointer-events: none;
}
.challenge-creation-modify.round.disabled .icon,
.challenge-creation-access.round.disabled .icon,
.challenge-template-modify.round.disabled .icon {
  filter: saturate(0);
}
.challenge-creation-modify.round[data-size="regular"],
.challenge-creation-access.round[data-size="regular"],
.challenge-template-modify.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-creation-modify.round[data-size="regular"].active,
.challenge-creation-access.round[data-size="regular"].active,
.challenge-template-modify.round[data-size="regular"].active {
  opacity: 1;
}
.challenge-creation-modify.round[data-size="small"],
.challenge-creation-access.round[data-size="small"],
.challenge-template-modify.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-creation-modify.round[data-size="small"].active,
.challenge-creation-access.round[data-size="small"].active,
.challenge-template-modify.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-creation-modify.round[data-size="tiny"],
.challenge-creation-access.round[data-size="tiny"],
.challenge-template-modify.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-creation-modify.round[data-size="tiny"].active,
.challenge-creation-access.round[data-size="tiny"].active,
.challenge-template-modify.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-creation-modify.round[data-size="mini"],
.challenge-creation-access.round[data-size="mini"],
.challenge-template-modify.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-creation-modify.round[data-size="mini"].active,
.challenge-creation-access.round[data-size="mini"].active,
.challenge-template-modify.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-creation-modify.nav,
.challenge-creation-access.nav,
.challenge-template-modify.nav {
  flex-wrap: nowrap;
}
.challenge-creation-modify.nav svg,
.challenge-creation-access.nav svg,
.challenge-template-modify.nav svg {
  color: var(--troubadour-main);
}
.challenge-creation-modify.nav .icon,
.challenge-creation-access.nav .icon,
.challenge-template-modify.nav .icon,
.challenge-creation-modify.nav svg,
.challenge-creation-access.nav svg,
.challenge-template-modify.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-creation-modify.nav .button-text,
.challenge-creation-access.nav .button-text,
.challenge-template-modify.nav .button-text {
  color: var(--challenge-creation-access);
  font-weight: bold;
}
.challenge-creation-modify.nav:hover,
.challenge-creation-access.nav:hover,
.challenge-template-modify.nav:hover {
  text-decoration: underline;
}
.challenge-creation-modify.nav[data-icon-position="right"][data-size="regular"] .icon,
.challenge-creation-access.nav[data-icon-position="right"][data-size="regular"] .icon,
.challenge-template-modify.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-creation-modify.nav[data-icon-position="right"][data-size="small"] .icon,
.challenge-creation-access.nav[data-icon-position="right"][data-size="small"] .icon,
.challenge-template-modify.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-creation-modify.nav[data-icon-position="right"][data-size="tiny"] .icon,
.challenge-creation-access.nav[data-icon-position="right"][data-size="tiny"] .icon,
.challenge-template-modify.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-creation-modify.nav[data-icon-position="right"][data-size="mini"] .icon,
.challenge-creation-access.nav[data-icon-position="right"][data-size="mini"] .icon,
.challenge-template-modify.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-creation-modify.nav[data-icon-position="right"] .button-text,
.challenge-creation-access.nav[data-icon-position="right"] .button-text,
.challenge-template-modify.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-creation-modify.nav[data-icon-position="left"][data-size="regular"] .icon,
.challenge-creation-access.nav[data-icon-position="left"][data-size="regular"] .icon,
.challenge-template-modify.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-creation-modify.nav[data-icon-position="left"][data-size="small"] .icon,
.challenge-creation-access.nav[data-icon-position="left"][data-size="small"] .icon,
.challenge-template-modify.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-creation-modify.nav[data-icon-position="left"][data-size="tiny"] .icon,
.challenge-creation-access.nav[data-icon-position="left"][data-size="tiny"] .icon,
.challenge-template-modify.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-creation-modify.nav[data-icon-position="left"][data-size="mini"] .icon,
.challenge-creation-access.nav[data-icon-position="left"][data-size="mini"] .icon,
.challenge-template-modify.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-creation-modify.nav[data-icon-position="left"] .button-text,
.challenge-creation-access.nav[data-icon-position="left"] .button-text,
.challenge-template-modify.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-creation-modify.nav[data-size="large"],
.challenge-creation-access.nav[data-size="large"],
.challenge-template-modify.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-creation-modify.nav[data-size="large"] .button-text,
.challenge-creation-access.nav[data-size="large"] .button-text,
.challenge-template-modify.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-creation-modify.nav[data-size="large"] .icon,
.challenge-creation-access.nav[data-size="large"] .icon,
.challenge-template-modify.nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-creation-modify.nav[data-size="regular"],
.challenge-creation-access.nav[data-size="regular"],
.challenge-template-modify.nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-creation-modify.nav[data-size="regular"] .icon,
.challenge-creation-access.nav[data-size="regular"] .icon,
.challenge-template-modify.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-creation-modify.nav[data-size="regular"] .button-text,
.challenge-creation-access.nav[data-size="regular"] .button-text,
.challenge-template-modify.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-creation-modify.nav[data-size="small"],
.challenge-creation-access.nav[data-size="small"],
.challenge-template-modify.nav[data-size="small"] {
  padding: 10px;
}
.challenge-creation-modify.nav[data-size="small"] .icon,
.challenge-creation-access.nav[data-size="small"] .icon,
.challenge-template-modify.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-creation-modify.nav[data-size="small"] .button-text,
.challenge-creation-access.nav[data-size="small"] .button-text,
.challenge-template-modify.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-creation-modify.nav[data-size="tiny"],
.challenge-creation-access.nav[data-size="tiny"],
.challenge-template-modify.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-creation-modify.nav[data-size="tiny"] .icon,
.challenge-creation-access.nav[data-size="tiny"] .icon,
.challenge-template-modify.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-creation-modify.nav[data-size="tiny"] .button-text,
.challenge-creation-access.nav[data-size="tiny"] .button-text,
.challenge-template-modify.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-creation-modify.nav[data-size="mini"],
.challenge-creation-access.nav[data-size="mini"],
.challenge-template-modify.nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-creation-modify.nav[data-size="mini"] .icon,
.challenge-creation-access.nav[data-size="mini"] .icon,
.challenge-template-modify.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-creation-modify.nav[data-size="mini"] .button-text,
.challenge-creation-access.nav[data-size="mini"] .button-text,
.challenge-template-modify.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-creation-scratch {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.challenge-creation-scratch:focus {
  text-decoration: none;
}
.challenge-creation-scratch[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-creation-scratch .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-creation-scratch .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-creation-scratch:active,
.challenge-creation-scratch:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-creation-scratch.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-scratch.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--onboarding-bg-13);
  border: 2px solid var(--onboarding-bg-12);
  border-radius: inherit;
  z-index: 10;
}
.challenge-creation-scratch.legacy.has-shadow::before {
  border: 2px solid var(--onboarding-bg-13);
  box-shadow: var(--dropshadow);
}
.challenge-creation-scratch.legacy .button-text,
.challenge-creation-scratch.legacy .icon {
  z-index: 11;
}
.challenge-creation-scratch.legacy .button-text {
  color: var(--onboarding-bg-12);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-scratch.legacy svg {
  color: var(--onboarding-bg-12);
}
.challenge-creation-scratch.legacy:hover::before,
.challenge-creation-scratch.legacy.selected::before {
  background-color: var(--onboarding-bg-12);
  border: 2px solid var(--onboarding-bg-12);
}
.challenge-creation-scratch.legacy:hover .button-text,
.challenge-creation-scratch.legacy.selected .button-text {
  color: var(--onboarding-bg-13);
}
.challenge-creation-scratch.legacy:hover img,
.challenge-creation-scratch.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-creation-scratch.legacy.disabled {
  pointer-events: none;
}
.challenge-creation-scratch.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-creation-scratch.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-creation-scratch.legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-creation-scratch.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-creation-scratch.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-creation-scratch.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-scratch.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-creation-scratch.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-creation-scratch.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-creation-scratch.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-creation-scratch.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-creation-scratch.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-creation-scratch.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-creation-scratch.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-creation-scratch.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-creation-scratch.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-creation-scratch.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-creation-scratch.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-creation-scratch.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-creation-scratch.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-creation-scratch.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-creation-scratch.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-creation-scratch.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-creation-scratch.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-creation-scratch.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-creation-scratch.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-creation-scratch.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-creation-scratch.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-creation-scratch.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-creation-scratch.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-scratch.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--onboarding-bg-12);
  border: 2px solid var(--onboarding-bg-12);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-creation-scratch.pill .button-text,
.challenge-creation-scratch.pill .icon {
  z-index: 11;
}
.challenge-creation-scratch.pill .button-text {
  color: var(--onboarding-bg-13);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-scratch.pill svg {
  color: var(--onboarding-bg-13);
}
.challenge-creation-scratch.pill:hover::before,
.challenge-creation-scratch.pill.selected::before {
  filter: brightness(1.3);
}
.challenge-creation-scratch.pill:hover img,
.challenge-creation-scratch.pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-creation-scratch.pill.no-shadow::before {
  box-shadow: none;
}
.challenge-creation-scratch.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-creation-scratch.pill.has-border:hover::before,
.challenge-creation-scratch.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-creation-scratch.pill.alt-hover:hover::before,
.challenge-creation-scratch.pill.alt-hover.selected::before {
  background: var(--onboarding-bg-13);
  border: 2px solid var(--onboarding-bg-13);
  filter: brightness(1);
}
.challenge-creation-scratch.pill.alt-hover:hover .icon,
.challenge-creation-scratch.pill.alt-hover.selected .icon,
.challenge-creation-scratch.pill.alt-hover:hover .button-text,
.challenge-creation-scratch.pill.alt-hover.selected .button-text {
  color: var(--onboarding-bg-12);
}
.challenge-creation-scratch.pill.alt-hover:hover .icon,
.challenge-creation-scratch.pill.alt-hover.selected .icon {
  background-color: var(--onboarding-bg-12);
}
.challenge-creation-scratch.pill.disabled,
.challenge-creation-scratch.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-creation-scratch.pill.disabled::before,
.challenge-creation-scratch.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-creation-scratch.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-creation-scratch.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-creation-scratch.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-creation-scratch.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-scratch.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-creation-scratch.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-creation-scratch.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-creation-scratch.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-creation-scratch.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-creation-scratch.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-creation-scratch.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-creation-scratch.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-creation-scratch.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-creation-scratch.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-creation-scratch.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-creation-scratch.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-creation-scratch.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-creation-scratch.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-creation-scratch.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-creation-scratch.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-creation-scratch.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-creation-scratch.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-creation-scratch.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-creation-scratch.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-creation-scratch.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-creation-scratch.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-creation-scratch.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-creation-scratch.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-creation-scratch.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-creation-scratch.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-creation-scratch.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-creation-scratch.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-creation-scratch.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-creation-scratch.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-creation-scratch.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-creation-scratch.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-creation-scratch.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-creation-scratch.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-creation-scratch.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-creation-scratch.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-creation-scratch.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-creation-scratch.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-creation-scratch.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-creation-scratch.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-creation-scratch.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-creation-scratch.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-creation-scratch.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-scratch.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-creation-scratch.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-scratch.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-creation-scratch.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-creation-scratch.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-creation-scratch.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-creation-scratch.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-creation-scratch.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-creation-scratch.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-scratch.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-creation-scratch.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-scratch.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-creation-scratch.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-creation-scratch.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-creation-scratch.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-creation-scratch.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-creation-scratch.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-creation-scratch.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-creation-scratch.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-creation-scratch.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-creation-scratch.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-creation-scratch.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-creation-scratch.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-creation-scratch.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-creation-scratch.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-creation-scratch.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-creation-scratch.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-creation-scratch.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-creation-scratch.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-creation-scratch.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--onboarding-bg-12);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-creation-scratch.pill-alt .button-text {
  color: var(--onboarding-bg-13);
  font-weight: normal;
  z-index: 11;
}
.challenge-creation-scratch.pill-alt:hover::before,
.challenge-creation-scratch.pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-creation-scratch.pill-alt:hover .button-text,
.challenge-creation-scratch.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-creation-scratch.pill-alt.disabled,
.challenge-creation-scratch.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-creation-scratch.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-creation-scratch.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-creation-scratch.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-creation-scratch.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-creation-scratch.round .icon,
.challenge-creation-scratch.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-creation-scratch.round:hover,
.challenge-creation-scratch.round.selected {
  opacity: 1;
}
.challenge-creation-scratch.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-creation-scratch.round.disabled {
  pointer-events: none;
}
.challenge-creation-scratch.round.disabled .icon {
  filter: saturate(0);
}
.challenge-creation-scratch.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-creation-scratch.round[data-size="regular"].active {
  opacity: 1;
}
.challenge-creation-scratch.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-creation-scratch.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-creation-scratch.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-creation-scratch.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-creation-scratch.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-creation-scratch.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-creation-scratch.nav {
  flex-wrap: nowrap;
}
.challenge-creation-scratch.nav svg {
  color: var(--troubadour-main);
}
.challenge-creation-scratch.nav .icon,
.challenge-creation-scratch.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-creation-scratch.nav .button-text {
  color: var(--onboarding-bg-12);
  font-weight: bold;
}
.challenge-creation-scratch.nav:hover {
  text-decoration: underline;
}
.challenge-creation-scratch.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-creation-scratch.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-creation-scratch.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-creation-scratch.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-creation-scratch.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-creation-scratch.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-creation-scratch.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-creation-scratch.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-creation-scratch.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-creation-scratch.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-creation-scratch.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-creation-scratch.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-creation-scratch.nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-creation-scratch.nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-creation-scratch.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-creation-scratch.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-creation-scratch.nav[data-size="small"] {
  padding: 10px;
}
.challenge-creation-scratch.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-creation-scratch.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-creation-scratch.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-creation-scratch.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-creation-scratch.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-creation-scratch.nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-creation-scratch.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-creation-scratch.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-share-challenge,
.troub-share-babillard {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.troub-share-challenge:focus,
.troub-share-babillard:focus {
  text-decoration: none;
}
.troub-share-challenge[data-icon-position="left"],
.troub-share-babillard[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.troub-share-challenge .button-text,
.troub-share-babillard .button-text {
  font-family: Sofia Pro, sans-serif;
}
.troub-share-challenge .button-text.ws-no-wrap,
.troub-share-babillard .button-text.ws-no-wrap {
  white-space: nowrap;
}
.troub-share-challenge:active,
.troub-share-babillard:active,
.troub-share-challenge:hover,
.troub-share-babillard:hover {
  text-decoration: none;
  cursor: pointer;
}
.troub-share-challenge.legacy,
.troub-share-babillard.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-share-challenge.legacy::before,
.troub-share-babillard.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--troubadour-main-20);
  border-radius: inherit;
  z-index: 10;
}
.troub-share-challenge.legacy.has-shadow::before,
.troub-share-babillard.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.troub-share-challenge.legacy .button-text,
.troub-share-babillard.legacy .button-text,
.troub-share-challenge.legacy .icon,
.troub-share-babillard.legacy .icon {
  z-index: 11;
}
.troub-share-challenge.legacy .button-text,
.troub-share-babillard.legacy .button-text {
  color: var(--troubadour-main-20);
  font-weight: normal;
  z-index: 11;
}
.troub-share-challenge.legacy svg,
.troub-share-babillard.legacy svg {
  color: var(--troubadour-main-20);
}
.troub-share-challenge.legacy:hover::before,
.troub-share-babillard.legacy:hover::before,
.troub-share-challenge.legacy.selected::before,
.troub-share-babillard.legacy.selected::before {
  background-color: var(--troubadour-main-20);
  border: 2px solid var(--troubadour-main-20);
}
.troub-share-challenge.legacy:hover .button-text,
.troub-share-babillard.legacy:hover .button-text,
.troub-share-challenge.legacy.selected .button-text,
.troub-share-babillard.legacy.selected .button-text {
  color: var(--default-color-2);
}
.troub-share-challenge.legacy:hover img,
.troub-share-babillard.legacy:hover img,
.troub-share-challenge.legacy.selected img,
.troub-share-babillard.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.troub-share-challenge.legacy.disabled,
.troub-share-babillard.legacy.disabled {
  pointer-events: none;
}
.troub-share-challenge.legacy.disabled::before,
.troub-share-babillard.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-share-challenge.legacy.disabled .button-text,
.troub-share-babillard.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.troub-share-challenge.legacy.disabled .icon,
.troub-share-babillard.legacy.disabled .icon {
  opacity: 0.5;
}
.troub-share-challenge.legacy.invalid::before,
.troub-share-babillard.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-share-challenge.legacy.invalid .button-text,
.troub-share-babillard.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.troub-share-challenge.legacy.waiting,
.troub-share-babillard.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-share-challenge.legacy .icon,
.troub-share-babillard.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-share-challenge.legacy .icon img,
.troub-share-babillard.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-share-challenge.legacy[data-size="tiny"],
.troub-share-babillard.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.troub-share-challenge.legacy[data-size="tiny"] .icon,
.troub-share-babillard.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.troub-share-challenge.legacy[data-size="tiny"] .button-text,
.troub-share-babillard.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.troub-share-challenge.legacy[data-size="tiny"][data-icon-position="left"],
.troub-share-babillard.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.troub-share-challenge.legacy[data-size="tiny"][data-icon-position="left"] .icon,
.troub-share-babillard.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-share-challenge.legacy[data-size="tiny"][data-icon-position="right"],
.troub-share-babillard.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.troub-share-challenge.legacy[data-size="tiny"][data-icon-position="right"] .icon,
.troub-share-babillard.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-share-challenge.legacy[data-size="small"],
.troub-share-babillard.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.troub-share-challenge.legacy[data-size="small"] .icon,
.troub-share-babillard.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.troub-share-challenge.legacy[data-size="small"] .button-text,
.troub-share-babillard.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.troub-share-challenge.legacy[data-size="small"][data-icon-position="left"],
.troub-share-babillard.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.troub-share-challenge.legacy[data-size="small"][data-icon-position="left"] .icon,
.troub-share-babillard.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-share-challenge.legacy[data-size="small"][data-icon-position="right"],
.troub-share-babillard.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.troub-share-challenge.legacy[data-size="small"][data-icon-position="right"] .icon,
.troub-share-babillard.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-share-challenge.legacy[data-size="regular"],
.troub-share-babillard.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.troub-share-challenge.legacy[data-size="regular"] .icon,
.troub-share-babillard.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.troub-share-challenge.legacy[data-size="regular"] .button-text,
.troub-share-babillard.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.troub-share-challenge.legacy[data-size="regular"][data-icon-position="left"],
.troub-share-babillard.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.troub-share-challenge.legacy[data-size="regular"][data-icon-position="left"] .icon,
.troub-share-babillard.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-share-challenge.legacy[data-size="regular"][data-icon-position="right"],
.troub-share-babillard.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.troub-share-challenge.legacy[data-size="regular"][data-icon-position="right"] .icon,
.troub-share-babillard.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-share-challenge.pill,
.troub-share-babillard.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-share-challenge.pill::before,
.troub-share-babillard.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--troubadour-main-20);
  border: 2px solid var(--troubadour-main-20);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.troub-share-challenge.pill .button-text,
.troub-share-babillard.pill .button-text,
.troub-share-challenge.pill .icon,
.troub-share-babillard.pill .icon {
  z-index: 11;
}
.troub-share-challenge.pill .button-text,
.troub-share-babillard.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-share-challenge.pill svg,
.troub-share-babillard.pill svg {
  color: var(--default-color-2);
}
.troub-share-challenge.pill:hover::before,
.troub-share-babillard.pill:hover::before,
.troub-share-challenge.pill.selected::before,
.troub-share-babillard.pill.selected::before {
  filter: brightness(1.3);
}
.troub-share-challenge.pill:hover img,
.troub-share-babillard.pill:hover img,
.troub-share-challenge.pill.selected img,
.troub-share-babillard.pill.selected img {
  transform: scale(0.95, 0.95);
}
.troub-share-challenge.pill.no-shadow::before,
.troub-share-babillard.pill.no-shadow::before {
  box-shadow: none;
}
.troub-share-challenge.pill.has-border::before,
.troub-share-babillard.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.troub-share-challenge.pill.has-border:hover::before,
.troub-share-babillard.pill.has-border:hover::before,
.troub-share-challenge.pill.has-border.selected::before,
.troub-share-babillard.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.troub-share-challenge.pill.alt-hover:hover::before,
.troub-share-babillard.pill.alt-hover:hover::before,
.troub-share-challenge.pill.alt-hover.selected::before,
.troub-share-babillard.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.troub-share-challenge.pill.alt-hover:hover .icon,
.troub-share-babillard.pill.alt-hover:hover .icon,
.troub-share-challenge.pill.alt-hover.selected .icon,
.troub-share-babillard.pill.alt-hover.selected .icon,
.troub-share-challenge.pill.alt-hover:hover .button-text,
.troub-share-babillard.pill.alt-hover:hover .button-text,
.troub-share-challenge.pill.alt-hover.selected .button-text,
.troub-share-babillard.pill.alt-hover.selected .button-text {
  color: var(--troubadour-main-20);
}
.troub-share-challenge.pill.alt-hover:hover .icon,
.troub-share-babillard.pill.alt-hover:hover .icon,
.troub-share-challenge.pill.alt-hover.selected .icon,
.troub-share-babillard.pill.alt-hover.selected .icon {
  background-color: var(--troubadour-main-20);
}
.troub-share-challenge.pill.disabled,
.troub-share-babillard.pill.disabled,
.troub-share-challenge.pill.invalid,
.troub-share-babillard.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-share-challenge.pill.disabled::before,
.troub-share-babillard.pill.disabled::before,
.troub-share-challenge.pill.invalid::before,
.troub-share-babillard.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.troub-share-challenge.pill.disabled:not([data-icon-type=""]) .icon,
.troub-share-babillard.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.troub-share-challenge.pill.disabled:not([data-icon-type=""]) .icon img,
.troub-share-babillard.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.troub-share-challenge.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon,
.troub-share-babillard.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.troub-share-challenge.pill.waiting,
.troub-share-babillard.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-share-challenge.pill .icon,
.troub-share-babillard.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-share-challenge.pill .icon img,
.troub-share-babillard.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-share-challenge.pill[data-icon-position="null"] .icon,
.troub-share-babillard.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.troub-share-challenge.pill[data-size="micro"],
.troub-share-babillard.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.troub-share-challenge.pill[data-size="micro"] .icon,
.troub-share-babillard.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.troub-share-challenge.pill[data-size="micro"] .button-text,
.troub-share-babillard.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.troub-share-challenge.pill[data-size="micro"][data-icon-position="left"],
.troub-share-babillard.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.troub-share-challenge.pill[data-size="micro"][data-icon-position="left"] .icon,
.troub-share-babillard.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.troub-share-challenge.pill[data-size="micro"][data-icon-position="right"],
.troub-share-babillard.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.troub-share-challenge.pill[data-size="micro"][data-icon-position="right"] .icon,
.troub-share-babillard.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.troub-share-challenge.pill[data-size="micro"][data-icon-position="null"],
.troub-share-babillard.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.troub-share-challenge.pill[data-size="micro"][data-icon-position="null"] .button-text,
.troub-share-babillard.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.troub-share-challenge.pill[data-size="mini"],
.troub-share-babillard.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.troub-share-challenge.pill[data-size="mini"] .icon,
.troub-share-babillard.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.troub-share-challenge.pill[data-size="mini"] .button-text,
.troub-share-babillard.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.troub-share-challenge.pill[data-size="mini"][data-icon-position="left"],
.troub-share-babillard.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.troub-share-challenge.pill[data-size="mini"][data-icon-position="left"] .icon,
.troub-share-babillard.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-share-challenge.pill[data-size="mini"][data-icon-position="right"],
.troub-share-babillard.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.troub-share-challenge.pill[data-size="mini"][data-icon-position="right"] .icon,
.troub-share-babillard.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-share-challenge.pill[data-size="mini"][data-icon-position="null"],
.troub-share-babillard.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.troub-share-challenge.pill[data-size="mini"][data-icon-position="null"] .button-text,
.troub-share-babillard.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.troub-share-challenge.pill[data-size="tiny"],
.troub-share-babillard.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.troub-share-challenge.pill[data-size="tiny"] .icon,
.troub-share-babillard.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.troub-share-challenge.pill[data-size="tiny"] .button-text,
.troub-share-babillard.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.troub-share-challenge.pill[data-size="tiny"][data-icon-position="left"],
.troub-share-babillard.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.troub-share-challenge.pill[data-size="tiny"][data-icon-position="left"] .icon,
.troub-share-babillard.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-share-challenge.pill[data-size="tiny"][data-icon-position="right"],
.troub-share-babillard.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.troub-share-challenge.pill[data-size="tiny"][data-icon-position="right"] .icon,
.troub-share-babillard.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-share-challenge.pill[data-size="tiny"][data-icon-position="null"],
.troub-share-babillard.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.troub-share-challenge.pill[data-size="tiny"][data-icon-position="null"] .button-text,
.troub-share-babillard.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.troub-share-challenge.pill[data-size="small"],
.troub-share-babillard.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.troub-share-challenge.pill[data-size="small"] .icon,
.troub-share-babillard.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.troub-share-challenge.pill[data-size="small"] .button-text,
.troub-share-babillard.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.troub-share-challenge.pill[data-size="small"][data-icon-position="left"],
.troub-share-babillard.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.troub-share-challenge.pill[data-size="small"][data-icon-position="left"] .icon,
.troub-share-babillard.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-share-challenge.pill[data-size="small"][data-icon-position="right"],
.troub-share-babillard.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.troub-share-challenge.pill[data-size="small"][data-icon-position="right"] .icon,
.troub-share-babillard.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-share-challenge.pill[data-size="small"][data-icon-position="null"],
.troub-share-babillard.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.troub-share-challenge.pill[data-size="small"][data-icon-position="null"] .button-text,
.troub-share-babillard.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.troub-share-challenge.pill[data-size="regular"],
.troub-share-babillard.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.troub-share-challenge.pill[data-size="regular"] .icon,
.troub-share-babillard.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.troub-share-challenge.pill[data-size="regular"] .button-text,
.troub-share-babillard.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.troub-share-challenge.pill[data-size="regular"][data-icon-position="left"],
.troub-share-babillard.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-share-challenge.pill[data-size="regular"][data-icon-position="left"] .icon,
.troub-share-babillard.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.troub-share-challenge.pill[data-size="regular"][data-icon-position="right"],
.troub-share-babillard.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-share-challenge.pill[data-size="regular"][data-icon-position="right"] .icon,
.troub-share-babillard.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.troub-share-challenge.pill[data-size="regular"][data-icon-position="null"],
.troub-share-babillard.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.troub-share-challenge.pill[data-size="regular"][data-icon-position="null"] .button-text,
.troub-share-babillard.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.troub-share-challenge.pill[data-size="large"],
.troub-share-babillard.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.troub-share-challenge.pill[data-size="large"] .icon,
.troub-share-babillard.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.troub-share-challenge.pill[data-size="large"] .button-text,
.troub-share-babillard.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.troub-share-challenge.pill[data-size="large"][data-icon-position="left"],
.troub-share-babillard.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-share-challenge.pill[data-size="large"][data-icon-position="left"] .icon,
.troub-share-babillard.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.troub-share-challenge.pill[data-size="large"][data-icon-position="right"],
.troub-share-babillard.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-share-challenge.pill[data-size="large"][data-icon-position="right"] .icon,
.troub-share-babillard.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.troub-share-challenge.pill[data-size="large"][data-icon-position="null"],
.troub-share-babillard.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.troub-share-challenge.pill[data-size="large"][data-icon-position="null"] .button-text,
.troub-share-babillard.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.troub-share-challenge.pill[data-size="xlarge"],
.troub-share-babillard.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.troub-share-challenge.pill[data-size="xlarge"] .icon,
.troub-share-babillard.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.troub-share-challenge.pill[data-size="xlarge"] .button-text,
.troub-share-babillard.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.troub-share-challenge.pill[data-size="xlarge"][data-icon-position="left"],
.troub-share-babillard.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-share-challenge.pill[data-size="xlarge"][data-icon-position="left"] .icon,
.troub-share-babillard.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.troub-share-challenge.pill[data-size="xlarge"][data-icon-position="right"],
.troub-share-babillard.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-share-challenge.pill[data-size="xlarge"][data-icon-position="right"] .icon,
.troub-share-babillard.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.troub-share-challenge.pill[data-size="xlarge"][data-icon-position="null"],
.troub-share-babillard.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.troub-share-challenge.pill[data-size="xlarge"][data-icon-position="null"] .button-text,
.troub-share-babillard.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.troub-share-challenge.pill.icon-no-bg .icon,
.troub-share-babillard.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.troub-share-challenge.pill.icon-no-bg[data-size="micro"] .icon,
.troub-share-babillard.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="micro"] .button-text,
.troub-share-babillard.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="mini"] .icon,
.troub-share-babillard.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="mini"] .button-text,
.troub-share-babillard.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="tiny"] .icon,
.troub-share-babillard.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="tiny"] .button-text,
.troub-share-babillard.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="small"] .icon,
.troub-share-babillard.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="small"] .button-text,
.troub-share-babillard.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="regular"] .icon,
.troub-share-babillard.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="regular"] .button-text,
.troub-share-babillard.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="large"] .icon,
.troub-share-babillard.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="large"] .button-text,
.troub-share-babillard.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="xlarge"] .icon,
.troub-share-babillard.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.troub-share-challenge.pill.icon-no-bg[data-size="xlarge"] .button-text,
.troub-share-babillard.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .troub-share-challenge.pill[data-size="responsive"],
  .troub-share-babillard.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .troub-share-challenge.pill[data-size="responsive"] .icon,
  .troub-share-babillard.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .troub-share-challenge.pill[data-size="responsive"] .button-text,
  .troub-share-babillard.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="left"],
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="left"] .icon,
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="right"],
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="right"] .icon,
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="null"],
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="null"] .button-text,
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .troub-share-challenge.pill[data-size="responsive"].icon-no-bg .icon,
  .troub-share-babillard.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .troub-share-challenge.pill[data-size="responsive"].icon-no-bg .button-text,
  .troub-share-babillard.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .troub-share-challenge.pill[data-size="responsive"],
  .troub-share-babillard.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .troub-share-challenge.pill[data-size="responsive"] .icon,
  .troub-share-babillard.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .troub-share-challenge.pill[data-size="responsive"] .button-text,
  .troub-share-babillard.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="left"],
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="left"] .icon,
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="right"],
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="right"] .icon,
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="null"],
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .troub-share-challenge.pill[data-size="responsive"][data-icon-position="null"] .button-text,
  .troub-share-babillard.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .troub-share-challenge.pill[data-size="responsive"].icon-no-bg .icon,
  .troub-share-babillard.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .troub-share-challenge.pill[data-size="responsive"].icon-no-bg .button-text,
  .troub-share-babillard.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]),
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"],
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"],
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"],
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]),
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"],
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"],
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"],
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .troub-share-challenge.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text,
  .troub-share-babillard.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.troub-share-challenge.pill-alt,
.troub-share-babillard.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-share-challenge.pill-alt::before,
.troub-share-babillard.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--troubadour-main-20);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.troub-share-challenge.pill-alt .button-text,
.troub-share-babillard.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-share-challenge.pill-alt:hover::before,
.troub-share-babillard.pill-alt:hover::before,
.troub-share-challenge.pill-alt.selected::before,
.troub-share-babillard.pill-alt.selected::before {
  background: var(--button-border);
}
.troub-share-challenge.pill-alt:hover .button-text,
.troub-share-babillard.pill-alt:hover .button-text,
.troub-share-challenge.pill-alt.selected .button-text,
.troub-share-babillard.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.troub-share-challenge.pill-alt.disabled,
.troub-share-babillard.pill-alt.disabled,
.troub-share-challenge.pill-alt.invalid,
.troub-share-babillard.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-share-challenge.pill-alt.waiting,
.troub-share-babillard.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-share-challenge.pill-alt[data-size="small"],
.troub-share-babillard.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.troub-share-challenge.pill-alt[data-size="small"] .button-text,
.troub-share-babillard.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.troub-share-challenge.round,
.troub-share-babillard.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.troub-share-challenge.round .icon,
.troub-share-babillard.round .icon,
.troub-share-challenge.round svg,
.troub-share-babillard.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-share-challenge.round:hover,
.troub-share-babillard.round:hover,
.troub-share-challenge.round.selected,
.troub-share-babillard.round.selected {
  opacity: 1;
}
.troub-share-challenge.round.inactive,
.troub-share-babillard.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.troub-share-challenge.round.disabled,
.troub-share-babillard.round.disabled {
  pointer-events: none;
}
.troub-share-challenge.round.disabled .icon,
.troub-share-babillard.round.disabled .icon {
  filter: saturate(0);
}
.troub-share-challenge.round[data-size="regular"],
.troub-share-babillard.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.troub-share-challenge.round[data-size="regular"].active,
.troub-share-babillard.round[data-size="regular"].active {
  opacity: 1;
}
.troub-share-challenge.round[data-size="small"],
.troub-share-babillard.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.troub-share-challenge.round[data-size="small"].active,
.troub-share-babillard.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.troub-share-challenge.round[data-size="tiny"],
.troub-share-babillard.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.troub-share-challenge.round[data-size="tiny"].active,
.troub-share-babillard.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.troub-share-challenge.round[data-size="mini"],
.troub-share-babillard.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.troub-share-challenge.round[data-size="mini"].active,
.troub-share-babillard.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.troub-share-challenge.nav,
.troub-share-babillard.nav {
  flex-wrap: nowrap;
}
.troub-share-challenge.nav svg,
.troub-share-babillard.nav svg {
  color: var(--troubadour-main);
}
.troub-share-challenge.nav .icon,
.troub-share-babillard.nav .icon,
.troub-share-challenge.nav svg,
.troub-share-babillard.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-share-challenge.nav .button-text,
.troub-share-babillard.nav .button-text {
  color: var(--troubadour-main-20);
  font-weight: bold;
}
.troub-share-challenge.nav:hover,
.troub-share-babillard.nav:hover {
  text-decoration: underline;
}
.troub-share-challenge.nav[data-icon-position="right"][data-size="regular"] .icon,
.troub-share-babillard.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.troub-share-challenge.nav[data-icon-position="right"][data-size="small"] .icon,
.troub-share-babillard.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.troub-share-challenge.nav[data-icon-position="right"][data-size="tiny"] .icon,
.troub-share-babillard.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.troub-share-challenge.nav[data-icon-position="right"][data-size="mini"] .icon,
.troub-share-babillard.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.troub-share-challenge.nav[data-icon-position="right"] .button-text,
.troub-share-babillard.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.troub-share-challenge.nav[data-icon-position="left"][data-size="regular"] .icon,
.troub-share-babillard.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.troub-share-challenge.nav[data-icon-position="left"][data-size="small"] .icon,
.troub-share-babillard.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.troub-share-challenge.nav[data-icon-position="left"][data-size="tiny"] .icon,
.troub-share-babillard.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.troub-share-challenge.nav[data-icon-position="left"][data-size="mini"] .icon,
.troub-share-babillard.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.troub-share-challenge.nav[data-icon-position="left"] .button-text,
.troub-share-babillard.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.troub-share-challenge.nav[data-size="large"],
.troub-share-babillard.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.troub-share-challenge.nav[data-size="large"] .button-text,
.troub-share-babillard.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.troub-share-challenge.nav[data-size="large"] .icon,
.troub-share-babillard.nav[data-size="large"] .icon {
  height: 80px;
}
.troub-share-challenge.nav[data-size="regular"],
.troub-share-babillard.nav[data-size="regular"] {
  padding: 20px 31px;
}
.troub-share-challenge.nav[data-size="regular"] .icon,
.troub-share-babillard.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.troub-share-challenge.nav[data-size="regular"] .button-text,
.troub-share-babillard.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.troub-share-challenge.nav[data-size="small"],
.troub-share-babillard.nav[data-size="small"] {
  padding: 10px;
}
.troub-share-challenge.nav[data-size="small"] .icon,
.troub-share-babillard.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.troub-share-challenge.nav[data-size="small"] .button-text,
.troub-share-babillard.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.troub-share-challenge.nav[data-size="tiny"],
.troub-share-babillard.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.troub-share-challenge.nav[data-size="tiny"] .icon,
.troub-share-babillard.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.troub-share-challenge.nav[data-size="tiny"] .button-text,
.troub-share-babillard.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-share-challenge.nav[data-size="mini"],
.troub-share-babillard.nav[data-size="mini"] {
  padding: 4px 12px;
}
.troub-share-challenge.nav[data-size="mini"] .icon,
.troub-share-babillard.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.troub-share-challenge.nav[data-size="mini"] .button-text,
.troub-share-babillard.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.share-bulletin-board {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.share-bulletin-board:focus {
  text-decoration: none;
}
.share-bulletin-board[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.share-bulletin-board .button-text {
  font-family: Sofia Pro, sans-serif;
}
.share-bulletin-board .button-text.ws-no-wrap {
  white-space: nowrap;
}
.share-bulletin-board:active,
.share-bulletin-board:hover {
  text-decoration: none;
  cursor: pointer;
}
.share-bulletin-board.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.share-bulletin-board.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--challenge-sharing-color-4);
  border-radius: inherit;
  z-index: 10;
}
.share-bulletin-board.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.share-bulletin-board.legacy .button-text,
.share-bulletin-board.legacy .icon {
  z-index: 11;
}
.share-bulletin-board.legacy .button-text {
  color: var(--challenge-sharing-color-4);
  font-weight: normal;
  z-index: 11;
}
.share-bulletin-board.legacy svg {
  color: var(--challenge-sharing-color-4);
}
.share-bulletin-board.legacy:hover::before,
.share-bulletin-board.legacy.selected::before {
  background-color: var(--challenge-sharing-color-4);
  border: 2px solid var(--challenge-sharing-color-4);
}
.share-bulletin-board.legacy:hover .button-text,
.share-bulletin-board.legacy.selected .button-text {
  color: var(--default-color-2);
}
.share-bulletin-board.legacy:hover img,
.share-bulletin-board.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.share-bulletin-board.legacy.disabled {
  pointer-events: none;
}
.share-bulletin-board.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.share-bulletin-board.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.share-bulletin-board.legacy.disabled .icon {
  opacity: 0.5;
}
.share-bulletin-board.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.share-bulletin-board.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.share-bulletin-board.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.share-bulletin-board.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.share-bulletin-board.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.share-bulletin-board.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.share-bulletin-board.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.share-bulletin-board.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.share-bulletin-board.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.share-bulletin-board.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.share-bulletin-board.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.share-bulletin-board.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.share-bulletin-board.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.share-bulletin-board.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.share-bulletin-board.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.share-bulletin-board.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.share-bulletin-board.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.share-bulletin-board.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.share-bulletin-board.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.share-bulletin-board.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.share-bulletin-board.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.share-bulletin-board.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.share-bulletin-board.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.share-bulletin-board.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.share-bulletin-board.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.share-bulletin-board.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.share-bulletin-board.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.share-bulletin-board.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-sharing-color-4);
  border: 2px solid var(--challenge-sharing-color-4);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.share-bulletin-board.pill .button-text,
.share-bulletin-board.pill .icon {
  z-index: 11;
}
.share-bulletin-board.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.share-bulletin-board.pill svg {
  color: var(--default-color-2);
}
.share-bulletin-board.pill:hover::before,
.share-bulletin-board.pill.selected::before {
  filter: brightness(1.3);
}
.share-bulletin-board.pill:hover img,
.share-bulletin-board.pill.selected img {
  transform: scale(0.95, 0.95);
}
.share-bulletin-board.pill.no-shadow::before {
  box-shadow: none;
}
.share-bulletin-board.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.share-bulletin-board.pill.has-border:hover::before,
.share-bulletin-board.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.share-bulletin-board.pill.alt-hover:hover::before,
.share-bulletin-board.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.share-bulletin-board.pill.alt-hover:hover .icon,
.share-bulletin-board.pill.alt-hover.selected .icon,
.share-bulletin-board.pill.alt-hover:hover .button-text,
.share-bulletin-board.pill.alt-hover.selected .button-text {
  color: var(--challenge-sharing-color-4);
}
.share-bulletin-board.pill.alt-hover:hover .icon,
.share-bulletin-board.pill.alt-hover.selected .icon {
  background-color: var(--challenge-sharing-color-4);
}
.share-bulletin-board.pill.disabled,
.share-bulletin-board.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.share-bulletin-board.pill.disabled::before,
.share-bulletin-board.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.share-bulletin-board.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.share-bulletin-board.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.share-bulletin-board.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.share-bulletin-board.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.share-bulletin-board.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.share-bulletin-board.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.share-bulletin-board.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.share-bulletin-board.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.share-bulletin-board.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.share-bulletin-board.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.share-bulletin-board.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.share-bulletin-board.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.share-bulletin-board.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.share-bulletin-board.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.share-bulletin-board.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.share-bulletin-board.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.share-bulletin-board.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.share-bulletin-board.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.share-bulletin-board.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.share-bulletin-board.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.share-bulletin-board.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.share-bulletin-board.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.share-bulletin-board.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.share-bulletin-board.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.share-bulletin-board.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.share-bulletin-board.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.share-bulletin-board.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.share-bulletin-board.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.share-bulletin-board.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.share-bulletin-board.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.share-bulletin-board.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.share-bulletin-board.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.share-bulletin-board.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.share-bulletin-board.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.share-bulletin-board.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.share-bulletin-board.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.share-bulletin-board.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.share-bulletin-board.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.share-bulletin-board.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.share-bulletin-board.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.share-bulletin-board.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.share-bulletin-board.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.share-bulletin-board.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.share-bulletin-board.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.share-bulletin-board.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.share-bulletin-board.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.share-bulletin-board.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.share-bulletin-board.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.share-bulletin-board.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.share-bulletin-board.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.share-bulletin-board.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.share-bulletin-board.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.share-bulletin-board.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.share-bulletin-board.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.share-bulletin-board.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.share-bulletin-board.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.share-bulletin-board.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.share-bulletin-board.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.share-bulletin-board.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.share-bulletin-board.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.share-bulletin-board.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.share-bulletin-board.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.share-bulletin-board.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.share-bulletin-board.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.share-bulletin-board.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.share-bulletin-board.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.share-bulletin-board.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.share-bulletin-board.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.share-bulletin-board.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.share-bulletin-board.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.share-bulletin-board.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.share-bulletin-board.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.share-bulletin-board.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .share-bulletin-board.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .share-bulletin-board.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .share-bulletin-board.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .share-bulletin-board.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .share-bulletin-board.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .share-bulletin-board.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .share-bulletin-board.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .share-bulletin-board.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .share-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .share-bulletin-board.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .share-bulletin-board.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .share-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.share-bulletin-board.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.share-bulletin-board.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-sharing-color-4);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.share-bulletin-board.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.share-bulletin-board.pill-alt:hover::before,
.share-bulletin-board.pill-alt.selected::before {
  background: var(--button-border);
}
.share-bulletin-board.pill-alt:hover .button-text,
.share-bulletin-board.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.share-bulletin-board.pill-alt.disabled,
.share-bulletin-board.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.share-bulletin-board.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.share-bulletin-board.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.share-bulletin-board.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.share-bulletin-board.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.share-bulletin-board.round .icon,
.share-bulletin-board.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.share-bulletin-board.round:hover,
.share-bulletin-board.round.selected {
  opacity: 1;
}
.share-bulletin-board.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.share-bulletin-board.round.disabled {
  pointer-events: none;
}
.share-bulletin-board.round.disabled .icon {
  filter: saturate(0);
}
.share-bulletin-board.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.share-bulletin-board.round[data-size="regular"].active {
  opacity: 1;
}
.share-bulletin-board.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.share-bulletin-board.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.share-bulletin-board.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.share-bulletin-board.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.share-bulletin-board.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.share-bulletin-board.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.share-bulletin-board.nav {
  flex-wrap: nowrap;
}
.share-bulletin-board.nav svg {
  color: var(--troubadour-main);
}
.share-bulletin-board.nav .icon,
.share-bulletin-board.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.share-bulletin-board.nav .button-text {
  color: var(--challenge-sharing-color-4);
  font-weight: bold;
}
.share-bulletin-board.nav:hover {
  text-decoration: underline;
}
.share-bulletin-board.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.share-bulletin-board.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.share-bulletin-board.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.share-bulletin-board.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.share-bulletin-board.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.share-bulletin-board.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.share-bulletin-board.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.share-bulletin-board.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.share-bulletin-board.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.share-bulletin-board.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.share-bulletin-board.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.share-bulletin-board.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.share-bulletin-board.nav[data-size="large"] .icon {
  height: 80px;
}
.share-bulletin-board.nav[data-size="regular"] {
  padding: 20px 31px;
}
.share-bulletin-board.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.share-bulletin-board.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.share-bulletin-board.nav[data-size="small"] {
  padding: 10px;
}
.share-bulletin-board.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.share-bulletin-board.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.share-bulletin-board.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.share-bulletin-board.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.share-bulletin-board.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.share-bulletin-board.nav[data-size="mini"] {
  padding: 4px 12px;
}
.share-bulletin-board.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.share-bulletin-board.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-add-works {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.bulletin-board-add-works:focus {
  text-decoration: none;
}
.bulletin-board-add-works[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.bulletin-board-add-works .button-text {
  font-family: Sofia Pro, sans-serif;
}
.bulletin-board-add-works .button-text.ws-no-wrap {
  white-space: nowrap;
}
.bulletin-board-add-works:active,
.bulletin-board-add-works:hover {
  text-decoration: none;
  cursor: pointer;
}
.bulletin-board-add-works.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-add-works.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--babillard-color-2);
  border-radius: inherit;
  z-index: 10;
}
.bulletin-board-add-works.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.bulletin-board-add-works.legacy .button-text,
.bulletin-board-add-works.legacy .icon {
  z-index: 11;
}
.bulletin-board-add-works.legacy .button-text {
  color: var(--babillard-color-2);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-add-works.legacy svg {
  color: var(--babillard-color-2);
}
.bulletin-board-add-works.legacy:hover::before,
.bulletin-board-add-works.legacy.selected::before {
  background-color: var(--babillard-color-2);
  border: 2px solid var(--babillard-color-2);
}
.bulletin-board-add-works.legacy:hover .button-text,
.bulletin-board-add-works.legacy.selected .button-text {
  color: var(--default-color-2);
}
.bulletin-board-add-works.legacy:hover img,
.bulletin-board-add-works.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.bulletin-board-add-works.legacy.disabled {
  pointer-events: none;
}
.bulletin-board-add-works.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.bulletin-board-add-works.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.bulletin-board-add-works.legacy.disabled .icon {
  opacity: 0.5;
}
.bulletin-board-add-works.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.bulletin-board-add-works.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.bulletin-board-add-works.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-add-works.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.bulletin-board-add-works.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.bulletin-board-add-works.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.bulletin-board-add-works.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.bulletin-board-add-works.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.bulletin-board-add-works.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.bulletin-board-add-works.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.bulletin-board-add-works.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.bulletin-board-add-works.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.bulletin-board-add-works.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.bulletin-board-add-works.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.bulletin-board-add-works.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.bulletin-board-add-works.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.bulletin-board-add-works.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.bulletin-board-add-works.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.bulletin-board-add-works.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.bulletin-board-add-works.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.bulletin-board-add-works.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.bulletin-board-add-works.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.bulletin-board-add-works.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.bulletin-board-add-works.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.bulletin-board-add-works.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.bulletin-board-add-works.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.bulletin-board-add-works.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-add-works.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-2);
  border: 2px solid var(--babillard-color-2);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.bulletin-board-add-works.pill .button-text,
.bulletin-board-add-works.pill .icon {
  z-index: 11;
}
.bulletin-board-add-works.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-add-works.pill svg {
  color: var(--default-color-2);
}
.bulletin-board-add-works.pill:hover::before,
.bulletin-board-add-works.pill.selected::before {
  filter: brightness(1.3);
}
.bulletin-board-add-works.pill:hover img,
.bulletin-board-add-works.pill.selected img {
  transform: scale(0.95, 0.95);
}
.bulletin-board-add-works.pill.no-shadow::before {
  box-shadow: none;
}
.bulletin-board-add-works.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.bulletin-board-add-works.pill.has-border:hover::before,
.bulletin-board-add-works.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.bulletin-board-add-works.pill.alt-hover:hover::before,
.bulletin-board-add-works.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.bulletin-board-add-works.pill.alt-hover:hover .icon,
.bulletin-board-add-works.pill.alt-hover.selected .icon,
.bulletin-board-add-works.pill.alt-hover:hover .button-text,
.bulletin-board-add-works.pill.alt-hover.selected .button-text {
  color: var(--babillard-color-2);
}
.bulletin-board-add-works.pill.alt-hover:hover .icon,
.bulletin-board-add-works.pill.alt-hover.selected .icon {
  background-color: var(--babillard-color-2);
}
.bulletin-board-add-works.pill.disabled,
.bulletin-board-add-works.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.bulletin-board-add-works.pill.disabled::before,
.bulletin-board-add-works.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.bulletin-board-add-works.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bulletin-board-add-works.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.bulletin-board-add-works.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.bulletin-board-add-works.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-add-works.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.bulletin-board-add-works.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.bulletin-board-add-works.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.bulletin-board-add-works.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.bulletin-board-add-works.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.bulletin-board-add-works.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.bulletin-board-add-works.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.bulletin-board-add-works.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.bulletin-board-add-works.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.bulletin-board-add-works.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.bulletin-board-add-works.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.bulletin-board-add-works.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.bulletin-board-add-works.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.bulletin-board-add-works.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.bulletin-board-add-works.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.bulletin-board-add-works.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.bulletin-board-add-works.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.bulletin-board-add-works.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.bulletin-board-add-works.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.bulletin-board-add-works.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.bulletin-board-add-works.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.bulletin-board-add-works.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.bulletin-board-add-works.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.bulletin-board-add-works.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.bulletin-board-add-works.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.bulletin-board-add-works.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.bulletin-board-add-works.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.bulletin-board-add-works.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.bulletin-board-add-works.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.bulletin-board-add-works.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.bulletin-board-add-works.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.bulletin-board-add-works.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.bulletin-board-add-works.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.bulletin-board-add-works.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.bulletin-board-add-works.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.bulletin-board-add-works.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.bulletin-board-add-works.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.bulletin-board-add-works.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.bulletin-board-add-works.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.bulletin-board-add-works.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.bulletin-board-add-works.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.bulletin-board-add-works.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.bulletin-board-add-works.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-add-works.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.bulletin-board-add-works.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-add-works.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.bulletin-board-add-works.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.bulletin-board-add-works.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.bulletin-board-add-works.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.bulletin-board-add-works.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.bulletin-board-add-works.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.bulletin-board-add-works.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-add-works.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.bulletin-board-add-works.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-add-works.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.bulletin-board-add-works.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.bulletin-board-add-works.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.bulletin-board-add-works.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.bulletin-board-add-works.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.bulletin-board-add-works.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.bulletin-board-add-works.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-add-works.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.bulletin-board-add-works.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-add-works.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.bulletin-board-add-works.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.bulletin-board-add-works.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.bulletin-board-add-works.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.bulletin-board-add-works.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .bulletin-board-add-works.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .bulletin-board-add-works.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .bulletin-board-add-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.bulletin-board-add-works.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-add-works.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-2);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.bulletin-board-add-works.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-add-works.pill-alt:hover::before,
.bulletin-board-add-works.pill-alt.selected::before {
  background: var(--button-border);
}
.bulletin-board-add-works.pill-alt:hover .button-text,
.bulletin-board-add-works.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.bulletin-board-add-works.pill-alt.disabled,
.bulletin-board-add-works.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.bulletin-board-add-works.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-add-works.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.bulletin-board-add-works.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.bulletin-board-add-works.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.bulletin-board-add-works.round .icon,
.bulletin-board-add-works.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bulletin-board-add-works.round:hover,
.bulletin-board-add-works.round.selected {
  opacity: 1;
}
.bulletin-board-add-works.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.bulletin-board-add-works.round.disabled {
  pointer-events: none;
}
.bulletin-board-add-works.round.disabled .icon {
  filter: saturate(0);
}
.bulletin-board-add-works.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.bulletin-board-add-works.round[data-size="regular"].active {
  opacity: 1;
}
.bulletin-board-add-works.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.bulletin-board-add-works.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.bulletin-board-add-works.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.bulletin-board-add-works.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.bulletin-board-add-works.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.bulletin-board-add-works.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.bulletin-board-add-works.nav {
  flex-wrap: nowrap;
}
.bulletin-board-add-works.nav svg {
  color: var(--troubadour-main);
}
.bulletin-board-add-works.nav .icon,
.bulletin-board-add-works.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bulletin-board-add-works.nav .button-text {
  color: var(--babillard-color-2);
  font-weight: bold;
}
.bulletin-board-add-works.nav:hover {
  text-decoration: underline;
}
.bulletin-board-add-works.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.bulletin-board-add-works.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.bulletin-board-add-works.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.bulletin-board-add-works.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.bulletin-board-add-works.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.bulletin-board-add-works.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.bulletin-board-add-works.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.bulletin-board-add-works.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.bulletin-board-add-works.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.bulletin-board-add-works.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.bulletin-board-add-works.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.bulletin-board-add-works.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.bulletin-board-add-works.nav[data-size="large"] .icon {
  height: 80px;
}
.bulletin-board-add-works.nav[data-size="regular"] {
  padding: 20px 31px;
}
.bulletin-board-add-works.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.bulletin-board-add-works.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.bulletin-board-add-works.nav[data-size="small"] {
  padding: 10px;
}
.bulletin-board-add-works.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.bulletin-board-add-works.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.bulletin-board-add-works.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.bulletin-board-add-works.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.bulletin-board-add-works.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-add-works.nav[data-size="mini"] {
  padding: 4px 12px;
}
.bulletin-board-add-works.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.bulletin-board-add-works.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-add-works-disabled {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  color: var(--disabled-text) !important;
  font-weight: lighter;
  filter: grayscale(1);
}
.bulletin-board-add-works-disabled:focus {
  text-decoration: none;
}
.bulletin-board-add-works-disabled[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.bulletin-board-add-works-disabled .button-text {
  font-family: Sofia Pro, sans-serif;
}
.bulletin-board-add-works-disabled .button-text.ws-no-wrap {
  white-space: nowrap;
}
.bulletin-board-add-works-disabled:active,
.bulletin-board-add-works-disabled:hover {
  text-decoration: none;
  cursor: pointer;
}
.bulletin-board-add-works-disabled.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-add-works-disabled.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--disabled);
  border-radius: inherit;
  z-index: 10;
}
.bulletin-board-add-works-disabled.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.bulletin-board-add-works-disabled.legacy .button-text,
.bulletin-board-add-works-disabled.legacy .icon {
  z-index: 11;
}
.bulletin-board-add-works-disabled.legacy .button-text {
  color: var(--disabled);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-add-works-disabled.legacy svg {
  color: var(--disabled);
}
.bulletin-board-add-works-disabled.legacy:hover::before,
.bulletin-board-add-works-disabled.legacy.selected::before {
  background-color: var(--disabled);
  border: 2px solid var(--disabled);
}
.bulletin-board-add-works-disabled.legacy:hover .button-text,
.bulletin-board-add-works-disabled.legacy.selected .button-text {
  color: var(--default-color-2);
}
.bulletin-board-add-works-disabled.legacy:hover img,
.bulletin-board-add-works-disabled.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.bulletin-board-add-works-disabled.legacy.disabled {
  pointer-events: none;
}
.bulletin-board-add-works-disabled.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.bulletin-board-add-works-disabled.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.bulletin-board-add-works-disabled.legacy.disabled .icon {
  opacity: 0.5;
}
.bulletin-board-add-works-disabled.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.bulletin-board-add-works-disabled.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.bulletin-board-add-works-disabled.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-add-works-disabled.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.bulletin-board-add-works-disabled.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.bulletin-board-add-works-disabled.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.bulletin-board-add-works-disabled.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.bulletin-board-add-works-disabled.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.bulletin-board-add-works-disabled.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.bulletin-board-add-works-disabled.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.bulletin-board-add-works-disabled.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.bulletin-board-add-works-disabled.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.bulletin-board-add-works-disabled.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.bulletin-board-add-works-disabled.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.bulletin-board-add-works-disabled.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.bulletin-board-add-works-disabled.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.bulletin-board-add-works-disabled.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.bulletin-board-add-works-disabled.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.bulletin-board-add-works-disabled.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.bulletin-board-add-works-disabled.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.bulletin-board-add-works-disabled.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.bulletin-board-add-works-disabled.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.bulletin-board-add-works-disabled.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.bulletin-board-add-works-disabled.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.bulletin-board-add-works-disabled.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.bulletin-board-add-works-disabled.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.bulletin-board-add-works-disabled.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-add-works-disabled.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--disabled);
  border: 2px solid var(--disabled);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.bulletin-board-add-works-disabled.pill .button-text,
.bulletin-board-add-works-disabled.pill .icon {
  z-index: 11;
}
.bulletin-board-add-works-disabled.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-add-works-disabled.pill svg {
  color: var(--default-color-2);
}
.bulletin-board-add-works-disabled.pill:hover::before,
.bulletin-board-add-works-disabled.pill.selected::before {
  filter: brightness(1.3);
}
.bulletin-board-add-works-disabled.pill:hover img,
.bulletin-board-add-works-disabled.pill.selected img {
  transform: scale(0.95, 0.95);
}
.bulletin-board-add-works-disabled.pill.no-shadow::before {
  box-shadow: none;
}
.bulletin-board-add-works-disabled.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.bulletin-board-add-works-disabled.pill.has-border:hover::before,
.bulletin-board-add-works-disabled.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.bulletin-board-add-works-disabled.pill.alt-hover:hover::before,
.bulletin-board-add-works-disabled.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.bulletin-board-add-works-disabled.pill.alt-hover:hover .icon,
.bulletin-board-add-works-disabled.pill.alt-hover.selected .icon,
.bulletin-board-add-works-disabled.pill.alt-hover:hover .button-text,
.bulletin-board-add-works-disabled.pill.alt-hover.selected .button-text {
  color: var(--disabled);
}
.bulletin-board-add-works-disabled.pill.alt-hover:hover .icon,
.bulletin-board-add-works-disabled.pill.alt-hover.selected .icon {
  background-color: var(--disabled);
}
.bulletin-board-add-works-disabled.pill.disabled,
.bulletin-board-add-works-disabled.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.bulletin-board-add-works-disabled.pill.disabled::before,
.bulletin-board-add-works-disabled.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.bulletin-board-add-works-disabled.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bulletin-board-add-works-disabled.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.bulletin-board-add-works-disabled.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.bulletin-board-add-works-disabled.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-add-works-disabled.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.bulletin-board-add-works-disabled.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.bulletin-board-add-works-disabled.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.bulletin-board-add-works-disabled.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.bulletin-board-add-works-disabled.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.bulletin-board-add-works-disabled.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.bulletin-board-add-works-disabled.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.bulletin-board-add-works-disabled.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.bulletin-board-add-works-disabled.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.bulletin-board-add-works-disabled.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.bulletin-board-add-works-disabled.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.bulletin-board-add-works-disabled.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.bulletin-board-add-works-disabled.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.bulletin-board-add-works-disabled.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.bulletin-board-add-works-disabled.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.bulletin-board-add-works-disabled.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.bulletin-board-add-works-disabled.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.bulletin-board-add-works-disabled.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.bulletin-board-add-works-disabled.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.bulletin-board-add-works-disabled.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-add-works-disabled.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.bulletin-board-add-works-disabled.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-add-works-disabled.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.bulletin-board-add-works-disabled.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.bulletin-board-add-works-disabled.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.bulletin-board-add-works-disabled.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.bulletin-board-add-works-disabled.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .bulletin-board-add-works-disabled.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .bulletin-board-add-works-disabled.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .bulletin-board-add-works-disabled.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.bulletin-board-add-works-disabled.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-add-works-disabled.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--disabled);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.bulletin-board-add-works-disabled.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-add-works-disabled.pill-alt:hover::before,
.bulletin-board-add-works-disabled.pill-alt.selected::before {
  background: var(--button-border);
}
.bulletin-board-add-works-disabled.pill-alt:hover .button-text,
.bulletin-board-add-works-disabled.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.bulletin-board-add-works-disabled.pill-alt.disabled,
.bulletin-board-add-works-disabled.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.bulletin-board-add-works-disabled.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-add-works-disabled.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.bulletin-board-add-works-disabled.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.bulletin-board-add-works-disabled.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.bulletin-board-add-works-disabled.round .icon,
.bulletin-board-add-works-disabled.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bulletin-board-add-works-disabled.round:hover,
.bulletin-board-add-works-disabled.round.selected {
  opacity: 1;
}
.bulletin-board-add-works-disabled.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.bulletin-board-add-works-disabled.round.disabled {
  pointer-events: none;
}
.bulletin-board-add-works-disabled.round.disabled .icon {
  filter: saturate(0);
}
.bulletin-board-add-works-disabled.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.bulletin-board-add-works-disabled.round[data-size="regular"].active {
  opacity: 1;
}
.bulletin-board-add-works-disabled.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.bulletin-board-add-works-disabled.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.bulletin-board-add-works-disabled.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.bulletin-board-add-works-disabled.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.bulletin-board-add-works-disabled.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.bulletin-board-add-works-disabled.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.bulletin-board-add-works-disabled.nav {
  flex-wrap: nowrap;
}
.bulletin-board-add-works-disabled.nav svg {
  color: var(--troubadour-main);
}
.bulletin-board-add-works-disabled.nav .icon,
.bulletin-board-add-works-disabled.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bulletin-board-add-works-disabled.nav .button-text {
  color: var(--disabled);
  font-weight: bold;
}
.bulletin-board-add-works-disabled.nav:hover {
  text-decoration: underline;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.bulletin-board-add-works-disabled.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.bulletin-board-add-works-disabled.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.bulletin-board-add-works-disabled.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.bulletin-board-add-works-disabled.nav[data-size="large"] .icon {
  height: 80px;
}
.bulletin-board-add-works-disabled.nav[data-size="regular"] {
  padding: 20px 31px;
}
.bulletin-board-add-works-disabled.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.bulletin-board-add-works-disabled.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.bulletin-board-add-works-disabled.nav[data-size="small"] {
  padding: 10px;
}
.bulletin-board-add-works-disabled.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.bulletin-board-add-works-disabled.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.bulletin-board-add-works-disabled.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.bulletin-board-add-works-disabled.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.bulletin-board-add-works-disabled.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-add-works-disabled.nav[data-size="mini"] {
  padding: 4px 12px;
}
.bulletin-board-add-works-disabled.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.bulletin-board-add-works-disabled.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-add-works-disabled::before {
  background-color: var(--disabled);
  border: 2px solid var(--disabled-border) !important;
}
.bulletin-board-add-works-disabled:hover::before {
  filter: brightness(1) !important;
}
.bulletin-board-correct-works {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  margin-top: 20px;
}
.bulletin-board-correct-works:focus {
  text-decoration: none;
}
.bulletin-board-correct-works[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.bulletin-board-correct-works .button-text {
  font-family: Sofia Pro, sans-serif;
}
.bulletin-board-correct-works .button-text.ws-no-wrap {
  white-space: nowrap;
}
.bulletin-board-correct-works:active,
.bulletin-board-correct-works:hover {
  text-decoration: none;
  cursor: pointer;
}
.bulletin-board-correct-works.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-correct-works.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--babillard-color-2);
  border-radius: inherit;
  z-index: 10;
}
.bulletin-board-correct-works.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.bulletin-board-correct-works.legacy .button-text,
.bulletin-board-correct-works.legacy .icon {
  z-index: 11;
}
.bulletin-board-correct-works.legacy .button-text {
  color: var(--babillard-color-2);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-correct-works.legacy svg {
  color: var(--babillard-color-2);
}
.bulletin-board-correct-works.legacy:hover::before,
.bulletin-board-correct-works.legacy.selected::before {
  background-color: var(--babillard-color-2);
  border: 2px solid var(--babillard-color-2);
}
.bulletin-board-correct-works.legacy:hover .button-text,
.bulletin-board-correct-works.legacy.selected .button-text {
  color: var(--default-color-2);
}
.bulletin-board-correct-works.legacy:hover img,
.bulletin-board-correct-works.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.bulletin-board-correct-works.legacy.disabled {
  pointer-events: none;
}
.bulletin-board-correct-works.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.bulletin-board-correct-works.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.bulletin-board-correct-works.legacy.disabled .icon {
  opacity: 0.5;
}
.bulletin-board-correct-works.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.bulletin-board-correct-works.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.bulletin-board-correct-works.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-correct-works.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.bulletin-board-correct-works.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.bulletin-board-correct-works.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.bulletin-board-correct-works.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.bulletin-board-correct-works.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.bulletin-board-correct-works.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.bulletin-board-correct-works.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.bulletin-board-correct-works.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.bulletin-board-correct-works.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.bulletin-board-correct-works.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.bulletin-board-correct-works.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.bulletin-board-correct-works.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.bulletin-board-correct-works.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.bulletin-board-correct-works.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.bulletin-board-correct-works.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.bulletin-board-correct-works.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.bulletin-board-correct-works.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.bulletin-board-correct-works.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.bulletin-board-correct-works.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.bulletin-board-correct-works.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.bulletin-board-correct-works.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.bulletin-board-correct-works.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.bulletin-board-correct-works.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.bulletin-board-correct-works.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-correct-works.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-2);
  border: 2px solid var(--babillard-color-2);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.bulletin-board-correct-works.pill .button-text,
.bulletin-board-correct-works.pill .icon {
  z-index: 11;
}
.bulletin-board-correct-works.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-correct-works.pill svg {
  color: var(--default-color-2);
}
.bulletin-board-correct-works.pill:hover::before,
.bulletin-board-correct-works.pill.selected::before {
  filter: brightness(1.3);
}
.bulletin-board-correct-works.pill:hover img,
.bulletin-board-correct-works.pill.selected img {
  transform: scale(0.95, 0.95);
}
.bulletin-board-correct-works.pill.no-shadow::before {
  box-shadow: none;
}
.bulletin-board-correct-works.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.bulletin-board-correct-works.pill.has-border:hover::before,
.bulletin-board-correct-works.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.bulletin-board-correct-works.pill.alt-hover:hover::before,
.bulletin-board-correct-works.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.bulletin-board-correct-works.pill.alt-hover:hover .icon,
.bulletin-board-correct-works.pill.alt-hover.selected .icon,
.bulletin-board-correct-works.pill.alt-hover:hover .button-text,
.bulletin-board-correct-works.pill.alt-hover.selected .button-text {
  color: var(--babillard-color-2);
}
.bulletin-board-correct-works.pill.alt-hover:hover .icon,
.bulletin-board-correct-works.pill.alt-hover.selected .icon {
  background-color: var(--babillard-color-2);
}
.bulletin-board-correct-works.pill.disabled,
.bulletin-board-correct-works.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.bulletin-board-correct-works.pill.disabled::before,
.bulletin-board-correct-works.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.bulletin-board-correct-works.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bulletin-board-correct-works.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.bulletin-board-correct-works.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.bulletin-board-correct-works.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-correct-works.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.bulletin-board-correct-works.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.bulletin-board-correct-works.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.bulletin-board-correct-works.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.bulletin-board-correct-works.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.bulletin-board-correct-works.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.bulletin-board-correct-works.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.bulletin-board-correct-works.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.bulletin-board-correct-works.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.bulletin-board-correct-works.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.bulletin-board-correct-works.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.bulletin-board-correct-works.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.bulletin-board-correct-works.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.bulletin-board-correct-works.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.bulletin-board-correct-works.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.bulletin-board-correct-works.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.bulletin-board-correct-works.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.bulletin-board-correct-works.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.bulletin-board-correct-works.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.bulletin-board-correct-works.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.bulletin-board-correct-works.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.bulletin-board-correct-works.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.bulletin-board-correct-works.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.bulletin-board-correct-works.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.bulletin-board-correct-works.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.bulletin-board-correct-works.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.bulletin-board-correct-works.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.bulletin-board-correct-works.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.bulletin-board-correct-works.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.bulletin-board-correct-works.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.bulletin-board-correct-works.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.bulletin-board-correct-works.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.bulletin-board-correct-works.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.bulletin-board-correct-works.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.bulletin-board-correct-works.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.bulletin-board-correct-works.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.bulletin-board-correct-works.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.bulletin-board-correct-works.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.bulletin-board-correct-works.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.bulletin-board-correct-works.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.bulletin-board-correct-works.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.bulletin-board-correct-works.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.bulletin-board-correct-works.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-correct-works.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.bulletin-board-correct-works.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-correct-works.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.bulletin-board-correct-works.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.bulletin-board-correct-works.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.bulletin-board-correct-works.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.bulletin-board-correct-works.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.bulletin-board-correct-works.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.bulletin-board-correct-works.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-correct-works.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.bulletin-board-correct-works.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-correct-works.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.bulletin-board-correct-works.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.bulletin-board-correct-works.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.bulletin-board-correct-works.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.bulletin-board-correct-works.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.bulletin-board-correct-works.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.bulletin-board-correct-works.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-correct-works.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.bulletin-board-correct-works.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-correct-works.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.bulletin-board-correct-works.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.bulletin-board-correct-works.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.bulletin-board-correct-works.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.bulletin-board-correct-works.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .bulletin-board-correct-works.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .bulletin-board-correct-works.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .bulletin-board-correct-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.bulletin-board-correct-works.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-correct-works.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-2);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.bulletin-board-correct-works.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-correct-works.pill-alt:hover::before,
.bulletin-board-correct-works.pill-alt.selected::before {
  background: var(--button-border);
}
.bulletin-board-correct-works.pill-alt:hover .button-text,
.bulletin-board-correct-works.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.bulletin-board-correct-works.pill-alt.disabled,
.bulletin-board-correct-works.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.bulletin-board-correct-works.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-correct-works.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.bulletin-board-correct-works.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.bulletin-board-correct-works.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.bulletin-board-correct-works.round .icon,
.bulletin-board-correct-works.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bulletin-board-correct-works.round:hover,
.bulletin-board-correct-works.round.selected {
  opacity: 1;
}
.bulletin-board-correct-works.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.bulletin-board-correct-works.round.disabled {
  pointer-events: none;
}
.bulletin-board-correct-works.round.disabled .icon {
  filter: saturate(0);
}
.bulletin-board-correct-works.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.bulletin-board-correct-works.round[data-size="regular"].active {
  opacity: 1;
}
.bulletin-board-correct-works.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.bulletin-board-correct-works.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.bulletin-board-correct-works.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.bulletin-board-correct-works.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.bulletin-board-correct-works.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.bulletin-board-correct-works.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.bulletin-board-correct-works.nav {
  flex-wrap: nowrap;
}
.bulletin-board-correct-works.nav svg {
  color: var(--troubadour-main);
}
.bulletin-board-correct-works.nav .icon,
.bulletin-board-correct-works.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bulletin-board-correct-works.nav .button-text {
  color: var(--babillard-color-2);
  font-weight: bold;
}
.bulletin-board-correct-works.nav:hover {
  text-decoration: underline;
}
.bulletin-board-correct-works.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.bulletin-board-correct-works.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.bulletin-board-correct-works.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.bulletin-board-correct-works.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.bulletin-board-correct-works.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.bulletin-board-correct-works.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.bulletin-board-correct-works.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.bulletin-board-correct-works.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.bulletin-board-correct-works.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.bulletin-board-correct-works.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.bulletin-board-correct-works.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.bulletin-board-correct-works.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.bulletin-board-correct-works.nav[data-size="large"] .icon {
  height: 80px;
}
.bulletin-board-correct-works.nav[data-size="regular"] {
  padding: 20px 31px;
}
.bulletin-board-correct-works.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.bulletin-board-correct-works.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.bulletin-board-correct-works.nav[data-size="small"] {
  padding: 10px;
}
.bulletin-board-correct-works.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.bulletin-board-correct-works.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.bulletin-board-correct-works.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.bulletin-board-correct-works.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.bulletin-board-correct-works.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-correct-works.nav[data-size="mini"] {
  padding: 4px 12px;
}
.bulletin-board-correct-works.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.bulletin-board-correct-works.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-correct-works .button-text {
  margin-left: 10px;
  font-size: 30px !important;
  line-height: 35px !important;
  font-weight: 500 !important;
}
.selection-completed {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.selection-completed:focus {
  text-decoration: none;
}
.selection-completed[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.selection-completed .button-text {
  font-family: Sofia Pro, sans-serif;
}
.selection-completed .button-text.ws-no-wrap {
  white-space: nowrap;
}
.selection-completed:active,
.selection-completed:hover {
  text-decoration: none;
  cursor: pointer;
}
.selection-completed.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.selection-completed.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--babillard-color-2);
  border-radius: inherit;
  z-index: 10;
}
.selection-completed.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.selection-completed.legacy .button-text,
.selection-completed.legacy .icon {
  z-index: 11;
}
.selection-completed.legacy .button-text {
  color: var(--babillard-color-2);
  font-weight: normal;
  z-index: 11;
}
.selection-completed.legacy svg {
  color: var(--babillard-color-2);
}
.selection-completed.legacy:hover::before,
.selection-completed.legacy.selected::before {
  background-color: var(--babillard-color-2);
  border: 2px solid var(--babillard-color-2);
}
.selection-completed.legacy:hover .button-text,
.selection-completed.legacy.selected .button-text {
  color: var(--default-color-2);
}
.selection-completed.legacy:hover img,
.selection-completed.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.selection-completed.legacy.disabled {
  pointer-events: none;
}
.selection-completed.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.selection-completed.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.selection-completed.legacy.disabled .icon {
  opacity: 0.5;
}
.selection-completed.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.selection-completed.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.selection-completed.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.selection-completed.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.selection-completed.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.selection-completed.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.selection-completed.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.selection-completed.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.selection-completed.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.selection-completed.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.selection-completed.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.selection-completed.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.selection-completed.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.selection-completed.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.selection-completed.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.selection-completed.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.selection-completed.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.selection-completed.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.selection-completed.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.selection-completed.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.selection-completed.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.selection-completed.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.selection-completed.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.selection-completed.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.selection-completed.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.selection-completed.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.selection-completed.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.selection-completed.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-2);
  border: 2px solid var(--babillard-color-2);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.selection-completed.pill .button-text,
.selection-completed.pill .icon {
  z-index: 11;
}
.selection-completed.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.selection-completed.pill svg {
  color: var(--default-color-2);
}
.selection-completed.pill:hover::before,
.selection-completed.pill.selected::before {
  filter: brightness(1.3);
}
.selection-completed.pill:hover img,
.selection-completed.pill.selected img {
  transform: scale(0.95, 0.95);
}
.selection-completed.pill.no-shadow::before {
  box-shadow: none;
}
.selection-completed.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.selection-completed.pill.has-border:hover::before,
.selection-completed.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.selection-completed.pill.alt-hover:hover::before,
.selection-completed.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.selection-completed.pill.alt-hover:hover .icon,
.selection-completed.pill.alt-hover.selected .icon,
.selection-completed.pill.alt-hover:hover .button-text,
.selection-completed.pill.alt-hover.selected .button-text {
  color: var(--babillard-color-2);
}
.selection-completed.pill.alt-hover:hover .icon,
.selection-completed.pill.alt-hover.selected .icon {
  background-color: var(--babillard-color-2);
}
.selection-completed.pill.disabled,
.selection-completed.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.selection-completed.pill.disabled::before,
.selection-completed.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.selection-completed.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.selection-completed.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.selection-completed.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.selection-completed.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.selection-completed.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.selection-completed.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.selection-completed.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.selection-completed.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.selection-completed.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.selection-completed.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.selection-completed.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.selection-completed.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.selection-completed.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.selection-completed.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.selection-completed.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.selection-completed.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.selection-completed.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.selection-completed.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.selection-completed.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.selection-completed.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.selection-completed.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.selection-completed.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.selection-completed.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.selection-completed.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.selection-completed.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.selection-completed.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.selection-completed.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.selection-completed.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.selection-completed.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.selection-completed.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.selection-completed.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.selection-completed.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.selection-completed.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.selection-completed.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.selection-completed.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.selection-completed.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.selection-completed.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.selection-completed.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.selection-completed.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.selection-completed.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.selection-completed.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.selection-completed.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.selection-completed.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.selection-completed.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.selection-completed.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.selection-completed.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.selection-completed.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.selection-completed.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.selection-completed.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.selection-completed.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.selection-completed.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.selection-completed.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.selection-completed.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.selection-completed.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.selection-completed.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.selection-completed.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.selection-completed.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.selection-completed.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.selection-completed.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.selection-completed.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.selection-completed.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.selection-completed.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.selection-completed.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.selection-completed.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.selection-completed.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.selection-completed.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.selection-completed.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.selection-completed.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.selection-completed.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.selection-completed.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.selection-completed.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.selection-completed.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.selection-completed.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.selection-completed.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.selection-completed.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.selection-completed.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.selection-completed.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.selection-completed.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.selection-completed.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.selection-completed.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.selection-completed.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.selection-completed.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.selection-completed.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.selection-completed.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.selection-completed.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .selection-completed.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .selection-completed.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .selection-completed.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .selection-completed.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .selection-completed.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .selection-completed.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .selection-completed.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .selection-completed.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .selection-completed.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .selection-completed.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .selection-completed.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .selection-completed.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.selection-completed.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.selection-completed.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-2);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.selection-completed.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.selection-completed.pill-alt:hover::before,
.selection-completed.pill-alt.selected::before {
  background: var(--button-border);
}
.selection-completed.pill-alt:hover .button-text,
.selection-completed.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.selection-completed.pill-alt.disabled,
.selection-completed.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.selection-completed.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.selection-completed.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.selection-completed.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.selection-completed.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.selection-completed.round .icon,
.selection-completed.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selection-completed.round:hover,
.selection-completed.round.selected {
  opacity: 1;
}
.selection-completed.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.selection-completed.round.disabled {
  pointer-events: none;
}
.selection-completed.round.disabled .icon {
  filter: saturate(0);
}
.selection-completed.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.selection-completed.round[data-size="regular"].active {
  opacity: 1;
}
.selection-completed.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.selection-completed.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.selection-completed.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.selection-completed.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.selection-completed.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.selection-completed.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.selection-completed.nav {
  flex-wrap: nowrap;
}
.selection-completed.nav svg {
  color: var(--troubadour-main);
}
.selection-completed.nav .icon,
.selection-completed.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selection-completed.nav .button-text {
  color: var(--babillard-color-2);
  font-weight: bold;
}
.selection-completed.nav:hover {
  text-decoration: underline;
}
.selection-completed.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.selection-completed.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.selection-completed.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.selection-completed.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.selection-completed.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.selection-completed.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.selection-completed.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.selection-completed.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.selection-completed.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.selection-completed.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.selection-completed.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.selection-completed.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.selection-completed.nav[data-size="large"] .icon {
  height: 80px;
}
.selection-completed.nav[data-size="regular"] {
  padding: 20px 31px;
}
.selection-completed.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.selection-completed.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.selection-completed.nav[data-size="small"] {
  padding: 10px;
}
.selection-completed.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.selection-completed.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.selection-completed.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.selection-completed.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.selection-completed.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.selection-completed.nav[data-size="mini"] {
  padding: 4px 12px;
}
.selection-completed.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.selection-completed.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-delete {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.bulletin-board-delete:focus {
  text-decoration: none;
}
.bulletin-board-delete[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.bulletin-board-delete .button-text {
  font-family: Sofia Pro, sans-serif;
}
.bulletin-board-delete .button-text.ws-no-wrap {
  white-space: nowrap;
}
.bulletin-board-delete:active,
.bulletin-board-delete:hover {
  text-decoration: none;
  cursor: pointer;
}
.bulletin-board-delete.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-delete.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color);
  border: 2px solid var(--babillard-color-13);
  border-radius: inherit;
  z-index: 10;
}
.bulletin-board-delete.legacy.has-shadow::before {
  border: 2px solid var(--default-color);
  box-shadow: var(--dropshadow);
}
.bulletin-board-delete.legacy .button-text,
.bulletin-board-delete.legacy .icon {
  z-index: 11;
}
.bulletin-board-delete.legacy .button-text {
  color: var(--babillard-color-13);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-delete.legacy svg {
  color: var(--babillard-color-13);
}
.bulletin-board-delete.legacy:hover::before,
.bulletin-board-delete.legacy.selected::before {
  background-color: var(--babillard-color-13);
  border: 2px solid var(--babillard-color-13);
}
.bulletin-board-delete.legacy:hover .button-text,
.bulletin-board-delete.legacy.selected .button-text {
  color: var(--default-color);
}
.bulletin-board-delete.legacy:hover img,
.bulletin-board-delete.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.bulletin-board-delete.legacy.disabled {
  pointer-events: none;
}
.bulletin-board-delete.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.bulletin-board-delete.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.bulletin-board-delete.legacy.disabled .icon {
  opacity: 0.5;
}
.bulletin-board-delete.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.bulletin-board-delete.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.bulletin-board-delete.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-delete.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.bulletin-board-delete.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.bulletin-board-delete.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.bulletin-board-delete.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.bulletin-board-delete.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.bulletin-board-delete.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.bulletin-board-delete.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.bulletin-board-delete.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.bulletin-board-delete.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.bulletin-board-delete.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.bulletin-board-delete.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.bulletin-board-delete.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.bulletin-board-delete.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.bulletin-board-delete.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.bulletin-board-delete.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.bulletin-board-delete.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.bulletin-board-delete.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.bulletin-board-delete.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.bulletin-board-delete.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.bulletin-board-delete.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.bulletin-board-delete.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.bulletin-board-delete.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.bulletin-board-delete.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.bulletin-board-delete.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-delete.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-13);
  border: 2px solid var(--babillard-color-13);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.bulletin-board-delete.pill .button-text,
.bulletin-board-delete.pill .icon {
  z-index: 11;
}
.bulletin-board-delete.pill .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-delete.pill svg {
  color: var(--default-color);
}
.bulletin-board-delete.pill:hover::before,
.bulletin-board-delete.pill.selected::before {
  filter: brightness(1.3);
}
.bulletin-board-delete.pill:hover img,
.bulletin-board-delete.pill.selected img {
  transform: scale(0.95, 0.95);
}
.bulletin-board-delete.pill.no-shadow::before {
  box-shadow: none;
}
.bulletin-board-delete.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.bulletin-board-delete.pill.has-border:hover::before,
.bulletin-board-delete.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.bulletin-board-delete.pill.alt-hover:hover::before,
.bulletin-board-delete.pill.alt-hover.selected::before {
  background: var(--default-color);
  border: 2px solid var(--default-color);
  filter: brightness(1);
}
.bulletin-board-delete.pill.alt-hover:hover .icon,
.bulletin-board-delete.pill.alt-hover.selected .icon,
.bulletin-board-delete.pill.alt-hover:hover .button-text,
.bulletin-board-delete.pill.alt-hover.selected .button-text {
  color: var(--babillard-color-13);
}
.bulletin-board-delete.pill.alt-hover:hover .icon,
.bulletin-board-delete.pill.alt-hover.selected .icon {
  background-color: var(--babillard-color-13);
}
.bulletin-board-delete.pill.disabled,
.bulletin-board-delete.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.bulletin-board-delete.pill.disabled::before,
.bulletin-board-delete.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.bulletin-board-delete.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bulletin-board-delete.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.bulletin-board-delete.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.bulletin-board-delete.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-delete.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.bulletin-board-delete.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.bulletin-board-delete.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.bulletin-board-delete.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.bulletin-board-delete.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.bulletin-board-delete.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.bulletin-board-delete.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.bulletin-board-delete.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.bulletin-board-delete.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.bulletin-board-delete.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.bulletin-board-delete.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.bulletin-board-delete.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.bulletin-board-delete.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.bulletin-board-delete.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.bulletin-board-delete.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.bulletin-board-delete.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.bulletin-board-delete.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.bulletin-board-delete.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.bulletin-board-delete.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.bulletin-board-delete.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.bulletin-board-delete.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.bulletin-board-delete.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.bulletin-board-delete.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.bulletin-board-delete.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.bulletin-board-delete.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.bulletin-board-delete.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.bulletin-board-delete.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.bulletin-board-delete.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.bulletin-board-delete.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.bulletin-board-delete.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.bulletin-board-delete.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.bulletin-board-delete.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.bulletin-board-delete.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.bulletin-board-delete.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.bulletin-board-delete.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.bulletin-board-delete.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.bulletin-board-delete.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.bulletin-board-delete.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.bulletin-board-delete.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.bulletin-board-delete.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.bulletin-board-delete.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.bulletin-board-delete.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.bulletin-board-delete.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-delete.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.bulletin-board-delete.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-delete.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.bulletin-board-delete.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.bulletin-board-delete.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.bulletin-board-delete.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.bulletin-board-delete.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.bulletin-board-delete.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.bulletin-board-delete.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-delete.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.bulletin-board-delete.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-delete.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.bulletin-board-delete.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.bulletin-board-delete.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.bulletin-board-delete.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.bulletin-board-delete.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.bulletin-board-delete.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.bulletin-board-delete.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.bulletin-board-delete.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.bulletin-board-delete.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.bulletin-board-delete.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.bulletin-board-delete.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.bulletin-board-delete.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.bulletin-board-delete.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.bulletin-board-delete.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .bulletin-board-delete.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .bulletin-board-delete.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .bulletin-board-delete.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .bulletin-board-delete.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .bulletin-board-delete.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .bulletin-board-delete.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .bulletin-board-delete.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .bulletin-board-delete.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .bulletin-board-delete.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .bulletin-board-delete.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .bulletin-board-delete.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .bulletin-board-delete.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.bulletin-board-delete.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.bulletin-board-delete.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-13);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.bulletin-board-delete.pill-alt .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.bulletin-board-delete.pill-alt:hover::before,
.bulletin-board-delete.pill-alt.selected::before {
  background: var(--button-border);
}
.bulletin-board-delete.pill-alt:hover .button-text,
.bulletin-board-delete.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.bulletin-board-delete.pill-alt.disabled,
.bulletin-board-delete.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.bulletin-board-delete.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.bulletin-board-delete.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.bulletin-board-delete.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.bulletin-board-delete.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.bulletin-board-delete.round .icon,
.bulletin-board-delete.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bulletin-board-delete.round:hover,
.bulletin-board-delete.round.selected {
  opacity: 1;
}
.bulletin-board-delete.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.bulletin-board-delete.round.disabled {
  pointer-events: none;
}
.bulletin-board-delete.round.disabled .icon {
  filter: saturate(0);
}
.bulletin-board-delete.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.bulletin-board-delete.round[data-size="regular"].active {
  opacity: 1;
}
.bulletin-board-delete.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.bulletin-board-delete.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.bulletin-board-delete.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.bulletin-board-delete.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.bulletin-board-delete.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.bulletin-board-delete.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.bulletin-board-delete.nav {
  flex-wrap: nowrap;
}
.bulletin-board-delete.nav svg {
  color: var(--troubadour-main);
}
.bulletin-board-delete.nav .icon,
.bulletin-board-delete.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bulletin-board-delete.nav .button-text {
  color: var(--babillard-color-13);
  font-weight: bold;
}
.bulletin-board-delete.nav:hover {
  text-decoration: underline;
}
.bulletin-board-delete.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.bulletin-board-delete.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.bulletin-board-delete.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.bulletin-board-delete.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.bulletin-board-delete.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.bulletin-board-delete.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.bulletin-board-delete.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.bulletin-board-delete.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.bulletin-board-delete.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.bulletin-board-delete.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.bulletin-board-delete.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.bulletin-board-delete.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.bulletin-board-delete.nav[data-size="large"] .icon {
  height: 80px;
}
.bulletin-board-delete.nav[data-size="regular"] {
  padding: 20px 31px;
}
.bulletin-board-delete.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.bulletin-board-delete.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.bulletin-board-delete.nav[data-size="small"] {
  padding: 10px;
}
.bulletin-board-delete.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.bulletin-board-delete.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.bulletin-board-delete.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.bulletin-board-delete.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.bulletin-board-delete.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.bulletin-board-delete.nav[data-size="mini"] {
  padding: 4px 12px;
}
.bulletin-board-delete.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.bulletin-board-delete.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.open-bulletin-board-remove-works {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.open-bulletin-board-remove-works:focus {
  text-decoration: none;
}
.open-bulletin-board-remove-works[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.open-bulletin-board-remove-works .button-text {
  font-family: Sofia Pro, sans-serif;
}
.open-bulletin-board-remove-works .button-text.ws-no-wrap {
  white-space: nowrap;
}
.open-bulletin-board-remove-works:active,
.open-bulletin-board-remove-works:hover {
  text-decoration: none;
  cursor: pointer;
}
.open-bulletin-board-remove-works.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.open-bulletin-board-remove-works.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--babillard-color-4);
  border-radius: inherit;
  z-index: 10;
}
.open-bulletin-board-remove-works.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.open-bulletin-board-remove-works.legacy .button-text,
.open-bulletin-board-remove-works.legacy .icon {
  z-index: 11;
}
.open-bulletin-board-remove-works.legacy .button-text {
  color: var(--babillard-color-4);
  font-weight: normal;
  z-index: 11;
}
.open-bulletin-board-remove-works.legacy svg {
  color: var(--babillard-color-4);
}
.open-bulletin-board-remove-works.legacy:hover::before,
.open-bulletin-board-remove-works.legacy.selected::before {
  background-color: var(--babillard-color-4);
  border: 2px solid var(--babillard-color-4);
}
.open-bulletin-board-remove-works.legacy:hover .button-text,
.open-bulletin-board-remove-works.legacy.selected .button-text {
  color: var(--default-color-2);
}
.open-bulletin-board-remove-works.legacy:hover img,
.open-bulletin-board-remove-works.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.open-bulletin-board-remove-works.legacy.disabled {
  pointer-events: none;
}
.open-bulletin-board-remove-works.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.open-bulletin-board-remove-works.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.open-bulletin-board-remove-works.legacy.disabled .icon {
  opacity: 0.5;
}
.open-bulletin-board-remove-works.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.open-bulletin-board-remove-works.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.open-bulletin-board-remove-works.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.open-bulletin-board-remove-works.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.open-bulletin-board-remove-works.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.open-bulletin-board-remove-works.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.open-bulletin-board-remove-works.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.open-bulletin-board-remove-works.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.open-bulletin-board-remove-works.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.open-bulletin-board-remove-works.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.open-bulletin-board-remove-works.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.open-bulletin-board-remove-works.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.open-bulletin-board-remove-works.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.open-bulletin-board-remove-works.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.open-bulletin-board-remove-works.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.open-bulletin-board-remove-works.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.open-bulletin-board-remove-works.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.open-bulletin-board-remove-works.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.open-bulletin-board-remove-works.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.open-bulletin-board-remove-works.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.open-bulletin-board-remove-works.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.open-bulletin-board-remove-works.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.open-bulletin-board-remove-works.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.open-bulletin-board-remove-works.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.open-bulletin-board-remove-works.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.open-bulletin-board-remove-works.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.open-bulletin-board-remove-works.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.open-bulletin-board-remove-works.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-4);
  border: 2px solid var(--babillard-color-4);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.open-bulletin-board-remove-works.pill .button-text,
.open-bulletin-board-remove-works.pill .icon {
  z-index: 11;
}
.open-bulletin-board-remove-works.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.open-bulletin-board-remove-works.pill svg {
  color: var(--default-color-2);
}
.open-bulletin-board-remove-works.pill:hover::before,
.open-bulletin-board-remove-works.pill.selected::before {
  filter: brightness(1.3);
}
.open-bulletin-board-remove-works.pill:hover img,
.open-bulletin-board-remove-works.pill.selected img {
  transform: scale(0.95, 0.95);
}
.open-bulletin-board-remove-works.pill.no-shadow::before {
  box-shadow: none;
}
.open-bulletin-board-remove-works.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.open-bulletin-board-remove-works.pill.has-border:hover::before,
.open-bulletin-board-remove-works.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.open-bulletin-board-remove-works.pill.alt-hover:hover::before,
.open-bulletin-board-remove-works.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.open-bulletin-board-remove-works.pill.alt-hover:hover .icon,
.open-bulletin-board-remove-works.pill.alt-hover.selected .icon,
.open-bulletin-board-remove-works.pill.alt-hover:hover .button-text,
.open-bulletin-board-remove-works.pill.alt-hover.selected .button-text {
  color: var(--babillard-color-4);
}
.open-bulletin-board-remove-works.pill.alt-hover:hover .icon,
.open-bulletin-board-remove-works.pill.alt-hover.selected .icon {
  background-color: var(--babillard-color-4);
}
.open-bulletin-board-remove-works.pill.disabled,
.open-bulletin-board-remove-works.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.open-bulletin-board-remove-works.pill.disabled::before,
.open-bulletin-board-remove-works.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.open-bulletin-board-remove-works.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.open-bulletin-board-remove-works.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.open-bulletin-board-remove-works.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.open-bulletin-board-remove-works.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.open-bulletin-board-remove-works.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.open-bulletin-board-remove-works.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.open-bulletin-board-remove-works.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.open-bulletin-board-remove-works.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.open-bulletin-board-remove-works.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.open-bulletin-board-remove-works.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.open-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.open-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.open-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.open-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.open-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.open-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.open-bulletin-board-remove-works.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.open-bulletin-board-remove-works.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.open-bulletin-board-remove-works.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.open-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.open-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.open-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.open-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.open-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.open-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.open-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.open-bulletin-board-remove-works.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.open-bulletin-board-remove-works.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.open-bulletin-board-remove-works.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.open-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.open-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.open-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.open-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.open-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.open-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.open-bulletin-board-remove-works.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.open-bulletin-board-remove-works.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.open-bulletin-board-remove-works.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.open-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.open-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.open-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.open-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.open-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.open-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.open-bulletin-board-remove-works.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.open-bulletin-board-remove-works.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.open-bulletin-board-remove-works.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.open-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.open-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.open-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.open-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.open-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.open-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.open-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.open-bulletin-board-remove-works.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .open-bulletin-board-remove-works.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .open-bulletin-board-remove-works.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .open-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.open-bulletin-board-remove-works.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.open-bulletin-board-remove-works.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-4);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.open-bulletin-board-remove-works.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.open-bulletin-board-remove-works.pill-alt:hover::before,
.open-bulletin-board-remove-works.pill-alt.selected::before {
  background: var(--button-border);
}
.open-bulletin-board-remove-works.pill-alt:hover .button-text,
.open-bulletin-board-remove-works.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.open-bulletin-board-remove-works.pill-alt.disabled,
.open-bulletin-board-remove-works.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.open-bulletin-board-remove-works.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.open-bulletin-board-remove-works.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.open-bulletin-board-remove-works.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.open-bulletin-board-remove-works.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.open-bulletin-board-remove-works.round .icon,
.open-bulletin-board-remove-works.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.open-bulletin-board-remove-works.round:hover,
.open-bulletin-board-remove-works.round.selected {
  opacity: 1;
}
.open-bulletin-board-remove-works.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.open-bulletin-board-remove-works.round.disabled {
  pointer-events: none;
}
.open-bulletin-board-remove-works.round.disabled .icon {
  filter: saturate(0);
}
.open-bulletin-board-remove-works.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.open-bulletin-board-remove-works.round[data-size="regular"].active {
  opacity: 1;
}
.open-bulletin-board-remove-works.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.open-bulletin-board-remove-works.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.open-bulletin-board-remove-works.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.open-bulletin-board-remove-works.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.open-bulletin-board-remove-works.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.open-bulletin-board-remove-works.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.open-bulletin-board-remove-works.nav {
  flex-wrap: nowrap;
}
.open-bulletin-board-remove-works.nav svg {
  color: var(--troubadour-main);
}
.open-bulletin-board-remove-works.nav .icon,
.open-bulletin-board-remove-works.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.open-bulletin-board-remove-works.nav .button-text {
  color: var(--babillard-color-4);
  font-weight: bold;
}
.open-bulletin-board-remove-works.nav:hover {
  text-decoration: underline;
}
.open-bulletin-board-remove-works.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.open-bulletin-board-remove-works.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.open-bulletin-board-remove-works.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.open-bulletin-board-remove-works.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.open-bulletin-board-remove-works.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.open-bulletin-board-remove-works.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.open-bulletin-board-remove-works.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.open-bulletin-board-remove-works.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.open-bulletin-board-remove-works.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.open-bulletin-board-remove-works.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.open-bulletin-board-remove-works.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.open-bulletin-board-remove-works.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.open-bulletin-board-remove-works.nav[data-size="large"] .icon {
  height: 80px;
}
.open-bulletin-board-remove-works.nav[data-size="regular"] {
  padding: 20px 31px;
}
.open-bulletin-board-remove-works.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.open-bulletin-board-remove-works.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.open-bulletin-board-remove-works.nav[data-size="small"] {
  padding: 10px;
}
.open-bulletin-board-remove-works.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.open-bulletin-board-remove-works.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.open-bulletin-board-remove-works.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.open-bulletin-board-remove-works.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.open-bulletin-board-remove-works.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.open-bulletin-board-remove-works.nav[data-size="mini"] {
  padding: 4px 12px;
}
.open-bulletin-board-remove-works.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.open-bulletin-board-remove-works.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.close-bulletin-board-remove-works {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.close-bulletin-board-remove-works:focus {
  text-decoration: none;
}
.close-bulletin-board-remove-works[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.close-bulletin-board-remove-works .button-text {
  font-family: Sofia Pro, sans-serif;
}
.close-bulletin-board-remove-works .button-text.ws-no-wrap {
  white-space: nowrap;
}
.close-bulletin-board-remove-works:active,
.close-bulletin-board-remove-works:hover {
  text-decoration: none;
  cursor: pointer;
}
.close-bulletin-board-remove-works.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.close-bulletin-board-remove-works.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--babillard-color-4);
  border-radius: inherit;
  z-index: 10;
}
.close-bulletin-board-remove-works.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.close-bulletin-board-remove-works.legacy .button-text,
.close-bulletin-board-remove-works.legacy .icon {
  z-index: 11;
}
.close-bulletin-board-remove-works.legacy .button-text {
  color: var(--babillard-color-4);
  font-weight: normal;
  z-index: 11;
}
.close-bulletin-board-remove-works.legacy svg {
  color: var(--babillard-color-4);
}
.close-bulletin-board-remove-works.legacy:hover::before,
.close-bulletin-board-remove-works.legacy.selected::before {
  background-color: var(--babillard-color-4);
  border: 2px solid var(--babillard-color-4);
}
.close-bulletin-board-remove-works.legacy:hover .button-text,
.close-bulletin-board-remove-works.legacy.selected .button-text {
  color: var(--default-color-2);
}
.close-bulletin-board-remove-works.legacy:hover img,
.close-bulletin-board-remove-works.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.close-bulletin-board-remove-works.legacy.disabled {
  pointer-events: none;
}
.close-bulletin-board-remove-works.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.close-bulletin-board-remove-works.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.close-bulletin-board-remove-works.legacy.disabled .icon {
  opacity: 0.5;
}
.close-bulletin-board-remove-works.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.close-bulletin-board-remove-works.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.close-bulletin-board-remove-works.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.close-bulletin-board-remove-works.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.close-bulletin-board-remove-works.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.close-bulletin-board-remove-works.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.close-bulletin-board-remove-works.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.close-bulletin-board-remove-works.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.close-bulletin-board-remove-works.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.close-bulletin-board-remove-works.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.close-bulletin-board-remove-works.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.close-bulletin-board-remove-works.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.close-bulletin-board-remove-works.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.close-bulletin-board-remove-works.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.close-bulletin-board-remove-works.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.close-bulletin-board-remove-works.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.close-bulletin-board-remove-works.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.close-bulletin-board-remove-works.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.close-bulletin-board-remove-works.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.close-bulletin-board-remove-works.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.close-bulletin-board-remove-works.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.close-bulletin-board-remove-works.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.close-bulletin-board-remove-works.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.close-bulletin-board-remove-works.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.close-bulletin-board-remove-works.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.close-bulletin-board-remove-works.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.close-bulletin-board-remove-works.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.close-bulletin-board-remove-works.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-4);
  border: 2px solid var(--babillard-color-4);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.close-bulletin-board-remove-works.pill .button-text,
.close-bulletin-board-remove-works.pill .icon {
  z-index: 11;
}
.close-bulletin-board-remove-works.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.close-bulletin-board-remove-works.pill svg {
  color: var(--default-color-2);
}
.close-bulletin-board-remove-works.pill:hover::before,
.close-bulletin-board-remove-works.pill.selected::before {
  filter: brightness(1.3);
}
.close-bulletin-board-remove-works.pill:hover img,
.close-bulletin-board-remove-works.pill.selected img {
  transform: scale(0.95, 0.95);
}
.close-bulletin-board-remove-works.pill.no-shadow::before {
  box-shadow: none;
}
.close-bulletin-board-remove-works.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.close-bulletin-board-remove-works.pill.has-border:hover::before,
.close-bulletin-board-remove-works.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.close-bulletin-board-remove-works.pill.alt-hover:hover::before,
.close-bulletin-board-remove-works.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.close-bulletin-board-remove-works.pill.alt-hover:hover .icon,
.close-bulletin-board-remove-works.pill.alt-hover.selected .icon,
.close-bulletin-board-remove-works.pill.alt-hover:hover .button-text,
.close-bulletin-board-remove-works.pill.alt-hover.selected .button-text {
  color: var(--babillard-color-4);
}
.close-bulletin-board-remove-works.pill.alt-hover:hover .icon,
.close-bulletin-board-remove-works.pill.alt-hover.selected .icon {
  background-color: var(--babillard-color-4);
}
.close-bulletin-board-remove-works.pill.disabled,
.close-bulletin-board-remove-works.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.close-bulletin-board-remove-works.pill.disabled::before,
.close-bulletin-board-remove-works.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.close-bulletin-board-remove-works.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.close-bulletin-board-remove-works.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.close-bulletin-board-remove-works.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.close-bulletin-board-remove-works.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.close-bulletin-board-remove-works.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.close-bulletin-board-remove-works.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.close-bulletin-board-remove-works.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.close-bulletin-board-remove-works.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.close-bulletin-board-remove-works.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.close-bulletin-board-remove-works.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.close-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.close-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.close-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.close-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.close-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.close-bulletin-board-remove-works.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.close-bulletin-board-remove-works.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.close-bulletin-board-remove-works.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.close-bulletin-board-remove-works.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.close-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.close-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.close-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.close-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.close-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.close-bulletin-board-remove-works.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.close-bulletin-board-remove-works.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.close-bulletin-board-remove-works.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.close-bulletin-board-remove-works.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.close-bulletin-board-remove-works.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.close-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.close-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.close-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.close-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.close-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.close-bulletin-board-remove-works.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.close-bulletin-board-remove-works.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.close-bulletin-board-remove-works.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.close-bulletin-board-remove-works.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.close-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.close-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.close-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.close-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.close-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.close-bulletin-board-remove-works.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.close-bulletin-board-remove-works.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.close-bulletin-board-remove-works.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.close-bulletin-board-remove-works.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.close-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.close-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.close-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.close-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.close-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.close-bulletin-board-remove-works.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.close-bulletin-board-remove-works.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.close-bulletin-board-remove-works.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .close-bulletin-board-remove-works.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .close-bulletin-board-remove-works.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .close-bulletin-board-remove-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.close-bulletin-board-remove-works.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.close-bulletin-board-remove-works.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-4);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.close-bulletin-board-remove-works.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.close-bulletin-board-remove-works.pill-alt:hover::before,
.close-bulletin-board-remove-works.pill-alt.selected::before {
  background: var(--button-border);
}
.close-bulletin-board-remove-works.pill-alt:hover .button-text,
.close-bulletin-board-remove-works.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.close-bulletin-board-remove-works.pill-alt.disabled,
.close-bulletin-board-remove-works.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.close-bulletin-board-remove-works.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.close-bulletin-board-remove-works.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.close-bulletin-board-remove-works.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.close-bulletin-board-remove-works.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.close-bulletin-board-remove-works.round .icon,
.close-bulletin-board-remove-works.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.close-bulletin-board-remove-works.round:hover,
.close-bulletin-board-remove-works.round.selected {
  opacity: 1;
}
.close-bulletin-board-remove-works.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.close-bulletin-board-remove-works.round.disabled {
  pointer-events: none;
}
.close-bulletin-board-remove-works.round.disabled .icon {
  filter: saturate(0);
}
.close-bulletin-board-remove-works.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.close-bulletin-board-remove-works.round[data-size="regular"].active {
  opacity: 1;
}
.close-bulletin-board-remove-works.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.close-bulletin-board-remove-works.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.close-bulletin-board-remove-works.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.close-bulletin-board-remove-works.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.close-bulletin-board-remove-works.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.close-bulletin-board-remove-works.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.close-bulletin-board-remove-works.nav {
  flex-wrap: nowrap;
}
.close-bulletin-board-remove-works.nav svg {
  color: var(--troubadour-main);
}
.close-bulletin-board-remove-works.nav .icon,
.close-bulletin-board-remove-works.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.close-bulletin-board-remove-works.nav .button-text {
  color: var(--babillard-color-4);
  font-weight: bold;
}
.close-bulletin-board-remove-works.nav:hover {
  text-decoration: underline;
}
.close-bulletin-board-remove-works.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.close-bulletin-board-remove-works.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.close-bulletin-board-remove-works.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.close-bulletin-board-remove-works.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.close-bulletin-board-remove-works.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.close-bulletin-board-remove-works.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.close-bulletin-board-remove-works.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.close-bulletin-board-remove-works.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.close-bulletin-board-remove-works.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.close-bulletin-board-remove-works.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.close-bulletin-board-remove-works.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.close-bulletin-board-remove-works.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.close-bulletin-board-remove-works.nav[data-size="large"] .icon {
  height: 80px;
}
.close-bulletin-board-remove-works.nav[data-size="regular"] {
  padding: 20px 31px;
}
.close-bulletin-board-remove-works.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.close-bulletin-board-remove-works.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.close-bulletin-board-remove-works.nav[data-size="small"] {
  padding: 10px;
}
.close-bulletin-board-remove-works.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.close-bulletin-board-remove-works.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.close-bulletin-board-remove-works.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.close-bulletin-board-remove-works.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.close-bulletin-board-remove-works.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.close-bulletin-board-remove-works.nav[data-size="mini"] {
  padding: 4px 12px;
}
.close-bulletin-board-remove-works.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.close-bulletin-board-remove-works.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.create-bulletin-board {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.create-bulletin-board:focus {
  text-decoration: none;
}
.create-bulletin-board[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.create-bulletin-board .button-text {
  font-family: Sofia Pro, sans-serif;
}
.create-bulletin-board .button-text.ws-no-wrap {
  white-space: nowrap;
}
.create-bulletin-board:active,
.create-bulletin-board:hover {
  text-decoration: none;
  cursor: pointer;
}
.create-bulletin-board.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.create-bulletin-board.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--babillard-color-5);
  border-radius: inherit;
  z-index: 10;
}
.create-bulletin-board.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.create-bulletin-board.legacy .button-text,
.create-bulletin-board.legacy .icon {
  z-index: 11;
}
.create-bulletin-board.legacy .button-text {
  color: var(--babillard-color-5);
  font-weight: normal;
  z-index: 11;
}
.create-bulletin-board.legacy svg {
  color: var(--babillard-color-5);
}
.create-bulletin-board.legacy:hover::before,
.create-bulletin-board.legacy.selected::before {
  background-color: var(--babillard-color-5);
  border: 2px solid var(--babillard-color-5);
}
.create-bulletin-board.legacy:hover .button-text,
.create-bulletin-board.legacy.selected .button-text {
  color: var(--default-color-2);
}
.create-bulletin-board.legacy:hover img,
.create-bulletin-board.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.create-bulletin-board.legacy.disabled {
  pointer-events: none;
}
.create-bulletin-board.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.create-bulletin-board.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.create-bulletin-board.legacy.disabled .icon {
  opacity: 0.5;
}
.create-bulletin-board.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.create-bulletin-board.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.create-bulletin-board.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.create-bulletin-board.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.create-bulletin-board.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.create-bulletin-board.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.create-bulletin-board.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.create-bulletin-board.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.create-bulletin-board.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.create-bulletin-board.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.create-bulletin-board.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.create-bulletin-board.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.create-bulletin-board.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.create-bulletin-board.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.create-bulletin-board.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.create-bulletin-board.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.create-bulletin-board.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.create-bulletin-board.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.create-bulletin-board.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.create-bulletin-board.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.create-bulletin-board.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.create-bulletin-board.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.create-bulletin-board.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.create-bulletin-board.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.create-bulletin-board.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.create-bulletin-board.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.create-bulletin-board.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.create-bulletin-board.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-5);
  border: 2px solid var(--babillard-color-5);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.create-bulletin-board.pill .button-text,
.create-bulletin-board.pill .icon {
  z-index: 11;
}
.create-bulletin-board.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.create-bulletin-board.pill svg {
  color: var(--default-color-2);
}
.create-bulletin-board.pill:hover::before,
.create-bulletin-board.pill.selected::before {
  filter: brightness(1.3);
}
.create-bulletin-board.pill:hover img,
.create-bulletin-board.pill.selected img {
  transform: scale(0.95, 0.95);
}
.create-bulletin-board.pill.no-shadow::before {
  box-shadow: none;
}
.create-bulletin-board.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.create-bulletin-board.pill.has-border:hover::before,
.create-bulletin-board.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.create-bulletin-board.pill.alt-hover:hover::before,
.create-bulletin-board.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.create-bulletin-board.pill.alt-hover:hover .icon,
.create-bulletin-board.pill.alt-hover.selected .icon,
.create-bulletin-board.pill.alt-hover:hover .button-text,
.create-bulletin-board.pill.alt-hover.selected .button-text {
  color: var(--babillard-color-5);
}
.create-bulletin-board.pill.alt-hover:hover .icon,
.create-bulletin-board.pill.alt-hover.selected .icon {
  background-color: var(--babillard-color-5);
}
.create-bulletin-board.pill.disabled,
.create-bulletin-board.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.create-bulletin-board.pill.disabled::before,
.create-bulletin-board.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.create-bulletin-board.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.create-bulletin-board.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.create-bulletin-board.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.create-bulletin-board.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.create-bulletin-board.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.create-bulletin-board.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.create-bulletin-board.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.create-bulletin-board.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.create-bulletin-board.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.create-bulletin-board.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.create-bulletin-board.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.create-bulletin-board.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.create-bulletin-board.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.create-bulletin-board.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.create-bulletin-board.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.create-bulletin-board.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.create-bulletin-board.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.create-bulletin-board.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.create-bulletin-board.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.create-bulletin-board.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.create-bulletin-board.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.create-bulletin-board.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.create-bulletin-board.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.create-bulletin-board.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.create-bulletin-board.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.create-bulletin-board.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.create-bulletin-board.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.create-bulletin-board.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.create-bulletin-board.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.create-bulletin-board.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.create-bulletin-board.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.create-bulletin-board.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.create-bulletin-board.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.create-bulletin-board.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.create-bulletin-board.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.create-bulletin-board.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.create-bulletin-board.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.create-bulletin-board.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.create-bulletin-board.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.create-bulletin-board.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.create-bulletin-board.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.create-bulletin-board.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.create-bulletin-board.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.create-bulletin-board.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.create-bulletin-board.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.create-bulletin-board.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.create-bulletin-board.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.create-bulletin-board.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.create-bulletin-board.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.create-bulletin-board.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.create-bulletin-board.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.create-bulletin-board.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.create-bulletin-board.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.create-bulletin-board.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.create-bulletin-board.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.create-bulletin-board.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.create-bulletin-board.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.create-bulletin-board.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.create-bulletin-board.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.create-bulletin-board.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.create-bulletin-board.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.create-bulletin-board.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.create-bulletin-board.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.create-bulletin-board.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.create-bulletin-board.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.create-bulletin-board.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.create-bulletin-board.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.create-bulletin-board.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.create-bulletin-board.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.create-bulletin-board.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.create-bulletin-board.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.create-bulletin-board.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.create-bulletin-board.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .create-bulletin-board.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .create-bulletin-board.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .create-bulletin-board.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .create-bulletin-board.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .create-bulletin-board.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .create-bulletin-board.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .create-bulletin-board.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .create-bulletin-board.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .create-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .create-bulletin-board.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .create-bulletin-board.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .create-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.create-bulletin-board.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.create-bulletin-board.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-5);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.create-bulletin-board.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.create-bulletin-board.pill-alt:hover::before,
.create-bulletin-board.pill-alt.selected::before {
  background: var(--button-border);
}
.create-bulletin-board.pill-alt:hover .button-text,
.create-bulletin-board.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.create-bulletin-board.pill-alt.disabled,
.create-bulletin-board.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.create-bulletin-board.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.create-bulletin-board.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.create-bulletin-board.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.create-bulletin-board.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.create-bulletin-board.round .icon,
.create-bulletin-board.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-bulletin-board.round:hover,
.create-bulletin-board.round.selected {
  opacity: 1;
}
.create-bulletin-board.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.create-bulletin-board.round.disabled {
  pointer-events: none;
}
.create-bulletin-board.round.disabled .icon {
  filter: saturate(0);
}
.create-bulletin-board.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.create-bulletin-board.round[data-size="regular"].active {
  opacity: 1;
}
.create-bulletin-board.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.create-bulletin-board.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.create-bulletin-board.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.create-bulletin-board.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.create-bulletin-board.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.create-bulletin-board.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.create-bulletin-board.nav {
  flex-wrap: nowrap;
}
.create-bulletin-board.nav svg {
  color: var(--troubadour-main);
}
.create-bulletin-board.nav .icon,
.create-bulletin-board.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.create-bulletin-board.nav .button-text {
  color: var(--babillard-color-5);
  font-weight: bold;
}
.create-bulletin-board.nav:hover {
  text-decoration: underline;
}
.create-bulletin-board.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.create-bulletin-board.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.create-bulletin-board.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.create-bulletin-board.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.create-bulletin-board.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.create-bulletin-board.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.create-bulletin-board.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.create-bulletin-board.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.create-bulletin-board.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.create-bulletin-board.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.create-bulletin-board.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.create-bulletin-board.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.create-bulletin-board.nav[data-size="large"] .icon {
  height: 80px;
}
.create-bulletin-board.nav[data-size="regular"] {
  padding: 20px 31px;
}
.create-bulletin-board.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.create-bulletin-board.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.create-bulletin-board.nav[data-size="small"] {
  padding: 10px;
}
.create-bulletin-board.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.create-bulletin-board.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.create-bulletin-board.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.create-bulletin-board.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.create-bulletin-board.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.create-bulletin-board.nav[data-size="mini"] {
  padding: 4px 12px;
}
.create-bulletin-board.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.create-bulletin-board.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.modify-bulletin-board {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.modify-bulletin-board:focus {
  text-decoration: none;
}
.modify-bulletin-board[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.modify-bulletin-board .button-text {
  font-family: Sofia Pro, sans-serif;
}
.modify-bulletin-board .button-text.ws-no-wrap {
  white-space: nowrap;
}
.modify-bulletin-board:active,
.modify-bulletin-board:hover {
  text-decoration: none;
  cursor: pointer;
}
.modify-bulletin-board.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.modify-bulletin-board.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--babillard-color-6);
  border-radius: inherit;
  z-index: 10;
}
.modify-bulletin-board.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.modify-bulletin-board.legacy .button-text,
.modify-bulletin-board.legacy .icon {
  z-index: 11;
}
.modify-bulletin-board.legacy .button-text {
  color: var(--babillard-color-6);
  font-weight: normal;
  z-index: 11;
}
.modify-bulletin-board.legacy svg {
  color: var(--babillard-color-6);
}
.modify-bulletin-board.legacy:hover::before,
.modify-bulletin-board.legacy.selected::before {
  background-color: var(--babillard-color-6);
  border: 2px solid var(--babillard-color-6);
}
.modify-bulletin-board.legacy:hover .button-text,
.modify-bulletin-board.legacy.selected .button-text {
  color: var(--default-color-2);
}
.modify-bulletin-board.legacy:hover img,
.modify-bulletin-board.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.modify-bulletin-board.legacy.disabled {
  pointer-events: none;
}
.modify-bulletin-board.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.modify-bulletin-board.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.modify-bulletin-board.legacy.disabled .icon {
  opacity: 0.5;
}
.modify-bulletin-board.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.modify-bulletin-board.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.modify-bulletin-board.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.modify-bulletin-board.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.modify-bulletin-board.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.modify-bulletin-board.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.modify-bulletin-board.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.modify-bulletin-board.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.modify-bulletin-board.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.modify-bulletin-board.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.modify-bulletin-board.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.modify-bulletin-board.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.modify-bulletin-board.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.modify-bulletin-board.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.modify-bulletin-board.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.modify-bulletin-board.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.modify-bulletin-board.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.modify-bulletin-board.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.modify-bulletin-board.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.modify-bulletin-board.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.modify-bulletin-board.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.modify-bulletin-board.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.modify-bulletin-board.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.modify-bulletin-board.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.modify-bulletin-board.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.modify-bulletin-board.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.modify-bulletin-board.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.modify-bulletin-board.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-6);
  border: 2px solid var(--babillard-color-6);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.modify-bulletin-board.pill .button-text,
.modify-bulletin-board.pill .icon {
  z-index: 11;
}
.modify-bulletin-board.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.modify-bulletin-board.pill svg {
  color: var(--default-color-2);
}
.modify-bulletin-board.pill:hover::before,
.modify-bulletin-board.pill.selected::before {
  filter: brightness(1.3);
}
.modify-bulletin-board.pill:hover img,
.modify-bulletin-board.pill.selected img {
  transform: scale(0.95, 0.95);
}
.modify-bulletin-board.pill.no-shadow::before {
  box-shadow: none;
}
.modify-bulletin-board.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.modify-bulletin-board.pill.has-border:hover::before,
.modify-bulletin-board.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.modify-bulletin-board.pill.alt-hover:hover::before,
.modify-bulletin-board.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.modify-bulletin-board.pill.alt-hover:hover .icon,
.modify-bulletin-board.pill.alt-hover.selected .icon,
.modify-bulletin-board.pill.alt-hover:hover .button-text,
.modify-bulletin-board.pill.alt-hover.selected .button-text {
  color: var(--babillard-color-6);
}
.modify-bulletin-board.pill.alt-hover:hover .icon,
.modify-bulletin-board.pill.alt-hover.selected .icon {
  background-color: var(--babillard-color-6);
}
.modify-bulletin-board.pill.disabled,
.modify-bulletin-board.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.modify-bulletin-board.pill.disabled::before,
.modify-bulletin-board.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.modify-bulletin-board.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.modify-bulletin-board.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.modify-bulletin-board.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.modify-bulletin-board.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.modify-bulletin-board.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.modify-bulletin-board.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.modify-bulletin-board.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.modify-bulletin-board.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.modify-bulletin-board.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.modify-bulletin-board.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.modify-bulletin-board.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.modify-bulletin-board.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.modify-bulletin-board.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.modify-bulletin-board.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.modify-bulletin-board.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.modify-bulletin-board.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.modify-bulletin-board.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.modify-bulletin-board.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.modify-bulletin-board.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.modify-bulletin-board.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.modify-bulletin-board.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.modify-bulletin-board.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.modify-bulletin-board.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.modify-bulletin-board.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.modify-bulletin-board.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.modify-bulletin-board.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.modify-bulletin-board.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.modify-bulletin-board.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.modify-bulletin-board.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.modify-bulletin-board.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.modify-bulletin-board.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.modify-bulletin-board.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.modify-bulletin-board.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.modify-bulletin-board.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.modify-bulletin-board.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.modify-bulletin-board.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.modify-bulletin-board.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.modify-bulletin-board.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.modify-bulletin-board.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.modify-bulletin-board.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.modify-bulletin-board.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.modify-bulletin-board.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.modify-bulletin-board.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.modify-bulletin-board.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.modify-bulletin-board.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.modify-bulletin-board.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.modify-bulletin-board.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.modify-bulletin-board.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.modify-bulletin-board.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.modify-bulletin-board.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.modify-bulletin-board.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.modify-bulletin-board.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.modify-bulletin-board.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.modify-bulletin-board.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.modify-bulletin-board.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.modify-bulletin-board.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.modify-bulletin-board.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.modify-bulletin-board.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.modify-bulletin-board.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.modify-bulletin-board.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.modify-bulletin-board.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.modify-bulletin-board.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.modify-bulletin-board.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.modify-bulletin-board.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.modify-bulletin-board.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.modify-bulletin-board.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.modify-bulletin-board.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.modify-bulletin-board.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.modify-bulletin-board.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.modify-bulletin-board.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.modify-bulletin-board.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.modify-bulletin-board.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .modify-bulletin-board.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .modify-bulletin-board.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .modify-bulletin-board.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .modify-bulletin-board.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .modify-bulletin-board.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .modify-bulletin-board.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .modify-bulletin-board.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .modify-bulletin-board.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .modify-bulletin-board.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .modify-bulletin-board.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .modify-bulletin-board.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .modify-bulletin-board.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.modify-bulletin-board.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.modify-bulletin-board.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--babillard-color-6);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.modify-bulletin-board.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.modify-bulletin-board.pill-alt:hover::before,
.modify-bulletin-board.pill-alt.selected::before {
  background: var(--button-border);
}
.modify-bulletin-board.pill-alt:hover .button-text,
.modify-bulletin-board.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.modify-bulletin-board.pill-alt.disabled,
.modify-bulletin-board.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.modify-bulletin-board.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.modify-bulletin-board.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.modify-bulletin-board.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.modify-bulletin-board.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.modify-bulletin-board.round .icon,
.modify-bulletin-board.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modify-bulletin-board.round:hover,
.modify-bulletin-board.round.selected {
  opacity: 1;
}
.modify-bulletin-board.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.modify-bulletin-board.round.disabled {
  pointer-events: none;
}
.modify-bulletin-board.round.disabled .icon {
  filter: saturate(0);
}
.modify-bulletin-board.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.modify-bulletin-board.round[data-size="regular"].active {
  opacity: 1;
}
.modify-bulletin-board.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.modify-bulletin-board.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.modify-bulletin-board.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.modify-bulletin-board.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.modify-bulletin-board.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.modify-bulletin-board.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.modify-bulletin-board.nav {
  flex-wrap: nowrap;
}
.modify-bulletin-board.nav svg {
  color: var(--troubadour-main);
}
.modify-bulletin-board.nav .icon,
.modify-bulletin-board.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modify-bulletin-board.nav .button-text {
  color: var(--babillard-color-6);
  font-weight: bold;
}
.modify-bulletin-board.nav:hover {
  text-decoration: underline;
}
.modify-bulletin-board.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.modify-bulletin-board.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.modify-bulletin-board.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.modify-bulletin-board.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.modify-bulletin-board.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.modify-bulletin-board.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.modify-bulletin-board.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.modify-bulletin-board.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.modify-bulletin-board.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.modify-bulletin-board.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.modify-bulletin-board.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.modify-bulletin-board.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.modify-bulletin-board.nav[data-size="large"] .icon {
  height: 80px;
}
.modify-bulletin-board.nav[data-size="regular"] {
  padding: 20px 31px;
}
.modify-bulletin-board.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.modify-bulletin-board.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.modify-bulletin-board.nav[data-size="small"] {
  padding: 10px;
}
.modify-bulletin-board.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.modify-bulletin-board.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.modify-bulletin-board.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.modify-bulletin-board.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.modify-bulletin-board.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.modify-bulletin-board.nav[data-size="mini"] {
  padding: 4px 12px;
}
.modify-bulletin-board.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.modify-bulletin-board.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-copy-share-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.troub-copy-share-button:focus {
  text-decoration: none;
}
.troub-copy-share-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.troub-copy-share-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.troub-copy-share-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.troub-copy-share-button:active,
.troub-copy-share-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.troub-copy-share-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-copy-share-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color);
  border: 2px solid var(--challenge-sharing-color-2);
  border-radius: inherit;
  z-index: 10;
}
.troub-copy-share-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color);
  box-shadow: var(--dropshadow);
}
.troub-copy-share-button.legacy .button-text,
.troub-copy-share-button.legacy .icon {
  z-index: 11;
}
.troub-copy-share-button.legacy .button-text {
  color: var(--challenge-sharing-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-copy-share-button.legacy svg {
  color: var(--challenge-sharing-color-2);
}
.troub-copy-share-button.legacy:hover::before,
.troub-copy-share-button.legacy.selected::before {
  background-color: var(--challenge-sharing-color-2);
  border: 2px solid var(--challenge-sharing-color-2);
}
.troub-copy-share-button.legacy:hover .button-text,
.troub-copy-share-button.legacy.selected .button-text {
  color: var(--default-color);
}
.troub-copy-share-button.legacy:hover img,
.troub-copy-share-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.troub-copy-share-button.legacy.disabled {
  pointer-events: none;
}
.troub-copy-share-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-copy-share-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.troub-copy-share-button.legacy.disabled .icon {
  opacity: 0.5;
}
.troub-copy-share-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-copy-share-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.troub-copy-share-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-copy-share-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-copy-share-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-copy-share-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.troub-copy-share-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.troub-copy-share-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.troub-copy-share-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.troub-copy-share-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-copy-share-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.troub-copy-share-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-copy-share-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.troub-copy-share-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.troub-copy-share-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.troub-copy-share-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.troub-copy-share-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-copy-share-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.troub-copy-share-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-copy-share-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.troub-copy-share-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.troub-copy-share-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.troub-copy-share-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.troub-copy-share-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-copy-share-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.troub-copy-share-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-copy-share-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-copy-share-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-sharing-color-2);
  border: 2px solid var(--challenge-sharing-color-2);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.troub-copy-share-button.pill .button-text,
.troub-copy-share-button.pill .icon {
  z-index: 11;
}
.troub-copy-share-button.pill .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.troub-copy-share-button.pill svg {
  color: var(--default-color);
}
.troub-copy-share-button.pill:hover::before,
.troub-copy-share-button.pill.selected::before {
  filter: brightness(1.3);
}
.troub-copy-share-button.pill:hover img,
.troub-copy-share-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.troub-copy-share-button.pill.no-shadow::before {
  box-shadow: none;
}
.troub-copy-share-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.troub-copy-share-button.pill.has-border:hover::before,
.troub-copy-share-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.troub-copy-share-button.pill.alt-hover:hover::before,
.troub-copy-share-button.pill.alt-hover.selected::before {
  background: var(--default-color);
  border: 2px solid var(--default-color);
  filter: brightness(1);
}
.troub-copy-share-button.pill.alt-hover:hover .icon,
.troub-copy-share-button.pill.alt-hover.selected .icon,
.troub-copy-share-button.pill.alt-hover:hover .button-text,
.troub-copy-share-button.pill.alt-hover.selected .button-text {
  color: var(--challenge-sharing-color-2);
}
.troub-copy-share-button.pill.alt-hover:hover .icon,
.troub-copy-share-button.pill.alt-hover.selected .icon {
  background-color: var(--challenge-sharing-color-2);
}
.troub-copy-share-button.pill.disabled,
.troub-copy-share-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-copy-share-button.pill.disabled::before,
.troub-copy-share-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.troub-copy-share-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.troub-copy-share-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.troub-copy-share-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.troub-copy-share-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-copy-share-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-copy-share-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-copy-share-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.troub-copy-share-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.troub-copy-share-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.troub-copy-share-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.troub-copy-share-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.troub-copy-share-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.troub-copy-share-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.troub-copy-share-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.troub-copy-share-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.troub-copy-share-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.troub-copy-share-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.troub-copy-share-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.troub-copy-share-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.troub-copy-share-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.troub-copy-share-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-copy-share-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.troub-copy-share-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-copy-share-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.troub-copy-share-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.troub-copy-share-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.troub-copy-share-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.troub-copy-share-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.troub-copy-share-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.troub-copy-share-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-copy-share-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.troub-copy-share-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-copy-share-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.troub-copy-share-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.troub-copy-share-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.troub-copy-share-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.troub-copy-share-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.troub-copy-share-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.troub-copy-share-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-copy-share-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.troub-copy-share-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-copy-share-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.troub-copy-share-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.troub-copy-share-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.troub-copy-share-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.troub-copy-share-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.troub-copy-share-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-copy-share-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.troub-copy-share-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-copy-share-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.troub-copy-share-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.troub-copy-share-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.troub-copy-share-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.troub-copy-share-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.troub-copy-share-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.troub-copy-share-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-copy-share-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.troub-copy-share-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-copy-share-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.troub-copy-share-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.troub-copy-share-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.troub-copy-share-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.troub-copy-share-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.troub-copy-share-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.troub-copy-share-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-copy-share-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.troub-copy-share-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-copy-share-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.troub-copy-share-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.troub-copy-share-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.troub-copy-share-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.troub-copy-share-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .troub-copy-share-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .troub-copy-share-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .troub-copy-share-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .troub-copy-share-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .troub-copy-share-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .troub-copy-share-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .troub-copy-share-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .troub-copy-share-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .troub-copy-share-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .troub-copy-share-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .troub-copy-share-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .troub-copy-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.troub-copy-share-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-copy-share-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-sharing-color-2);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.troub-copy-share-button.pill-alt .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.troub-copy-share-button.pill-alt:hover::before,
.troub-copy-share-button.pill-alt.selected::before {
  background: var(--button-border);
}
.troub-copy-share-button.pill-alt:hover .button-text,
.troub-copy-share-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.troub-copy-share-button.pill-alt.disabled,
.troub-copy-share-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-copy-share-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-copy-share-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.troub-copy-share-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.troub-copy-share-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.troub-copy-share-button.round .icon,
.troub-copy-share-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-copy-share-button.round:hover,
.troub-copy-share-button.round.selected {
  opacity: 1;
}
.troub-copy-share-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.troub-copy-share-button.round.disabled {
  pointer-events: none;
}
.troub-copy-share-button.round.disabled .icon {
  filter: saturate(0);
}
.troub-copy-share-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.troub-copy-share-button.round[data-size="regular"].active {
  opacity: 1;
}
.troub-copy-share-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.troub-copy-share-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.troub-copy-share-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.troub-copy-share-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.troub-copy-share-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.troub-copy-share-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.troub-copy-share-button.nav {
  flex-wrap: nowrap;
}
.troub-copy-share-button.nav svg {
  color: var(--troubadour-main);
}
.troub-copy-share-button.nav .icon,
.troub-copy-share-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-copy-share-button.nav .button-text {
  color: var(--challenge-sharing-color-2);
  font-weight: bold;
}
.troub-copy-share-button.nav:hover {
  text-decoration: underline;
}
.troub-copy-share-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.troub-copy-share-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.troub-copy-share-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.troub-copy-share-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.troub-copy-share-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.troub-copy-share-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.troub-copy-share-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.troub-copy-share-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.troub-copy-share-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.troub-copy-share-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.troub-copy-share-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.troub-copy-share-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.troub-copy-share-button.nav[data-size="large"] .icon {
  height: 80px;
}
.troub-copy-share-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.troub-copy-share-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.troub-copy-share-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.troub-copy-share-button.nav[data-size="small"] {
  padding: 10px;
}
.troub-copy-share-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.troub-copy-share-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.troub-copy-share-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.troub-copy-share-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.troub-copy-share-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-copy-share-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.troub-copy-share-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.troub-copy-share-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-cancel-share-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.troub-cancel-share-button:focus {
  text-decoration: none;
}
.troub-cancel-share-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.troub-cancel-share-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.troub-cancel-share-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.troub-cancel-share-button:active,
.troub-cancel-share-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.troub-cancel-share-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-cancel-share-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--challenge-sharing-color-3);
  border-radius: inherit;
  z-index: 10;
}
.troub-cancel-share-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.troub-cancel-share-button.legacy .button-text,
.troub-cancel-share-button.legacy .icon {
  z-index: 11;
}
.troub-cancel-share-button.legacy .button-text {
  color: var(--challenge-sharing-color-3);
  font-weight: normal;
  z-index: 11;
}
.troub-cancel-share-button.legacy svg {
  color: var(--challenge-sharing-color-3);
}
.troub-cancel-share-button.legacy:hover::before,
.troub-cancel-share-button.legacy.selected::before {
  background-color: var(--challenge-sharing-color-3);
  border: 2px solid var(--challenge-sharing-color-3);
}
.troub-cancel-share-button.legacy:hover .button-text,
.troub-cancel-share-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.troub-cancel-share-button.legacy:hover img,
.troub-cancel-share-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.troub-cancel-share-button.legacy.disabled {
  pointer-events: none;
}
.troub-cancel-share-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-cancel-share-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.troub-cancel-share-button.legacy.disabled .icon {
  opacity: 0.5;
}
.troub-cancel-share-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-cancel-share-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.troub-cancel-share-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-cancel-share-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-cancel-share-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-cancel-share-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.troub-cancel-share-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.troub-cancel-share-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.troub-cancel-share-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.troub-cancel-share-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-cancel-share-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.troub-cancel-share-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-cancel-share-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.troub-cancel-share-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.troub-cancel-share-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.troub-cancel-share-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.troub-cancel-share-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-cancel-share-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.troub-cancel-share-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-cancel-share-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.troub-cancel-share-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.troub-cancel-share-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.troub-cancel-share-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.troub-cancel-share-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-cancel-share-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.troub-cancel-share-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-cancel-share-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-cancel-share-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-sharing-color-3);
  border: 2px solid var(--challenge-sharing-color-3);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.troub-cancel-share-button.pill .button-text,
.troub-cancel-share-button.pill .icon {
  z-index: 11;
}
.troub-cancel-share-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-cancel-share-button.pill svg {
  color: var(--default-color-2);
}
.troub-cancel-share-button.pill:hover::before,
.troub-cancel-share-button.pill.selected::before {
  filter: brightness(1.3);
}
.troub-cancel-share-button.pill:hover img,
.troub-cancel-share-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.troub-cancel-share-button.pill.no-shadow::before {
  box-shadow: none;
}
.troub-cancel-share-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.troub-cancel-share-button.pill.has-border:hover::before,
.troub-cancel-share-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.troub-cancel-share-button.pill.alt-hover:hover::before,
.troub-cancel-share-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.troub-cancel-share-button.pill.alt-hover:hover .icon,
.troub-cancel-share-button.pill.alt-hover.selected .icon,
.troub-cancel-share-button.pill.alt-hover:hover .button-text,
.troub-cancel-share-button.pill.alt-hover.selected .button-text {
  color: var(--challenge-sharing-color-3);
}
.troub-cancel-share-button.pill.alt-hover:hover .icon,
.troub-cancel-share-button.pill.alt-hover.selected .icon {
  background-color: var(--challenge-sharing-color-3);
}
.troub-cancel-share-button.pill.disabled,
.troub-cancel-share-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-cancel-share-button.pill.disabled::before,
.troub-cancel-share-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.troub-cancel-share-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.troub-cancel-share-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.troub-cancel-share-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.troub-cancel-share-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-cancel-share-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-cancel-share-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-cancel-share-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.troub-cancel-share-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.troub-cancel-share-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.troub-cancel-share-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.troub-cancel-share-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.troub-cancel-share-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.troub-cancel-share-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.troub-cancel-share-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.troub-cancel-share-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.troub-cancel-share-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.troub-cancel-share-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.troub-cancel-share-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.troub-cancel-share-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.troub-cancel-share-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.troub-cancel-share-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-cancel-share-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.troub-cancel-share-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-cancel-share-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.troub-cancel-share-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.troub-cancel-share-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.troub-cancel-share-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.troub-cancel-share-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.troub-cancel-share-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.troub-cancel-share-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-cancel-share-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.troub-cancel-share-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-cancel-share-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.troub-cancel-share-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.troub-cancel-share-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.troub-cancel-share-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.troub-cancel-share-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.troub-cancel-share-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.troub-cancel-share-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-cancel-share-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.troub-cancel-share-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-cancel-share-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.troub-cancel-share-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.troub-cancel-share-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.troub-cancel-share-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.troub-cancel-share-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.troub-cancel-share-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-cancel-share-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.troub-cancel-share-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-cancel-share-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.troub-cancel-share-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.troub-cancel-share-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.troub-cancel-share-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.troub-cancel-share-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.troub-cancel-share-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.troub-cancel-share-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-cancel-share-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.troub-cancel-share-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-cancel-share-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.troub-cancel-share-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.troub-cancel-share-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.troub-cancel-share-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.troub-cancel-share-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.troub-cancel-share-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.troub-cancel-share-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-cancel-share-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.troub-cancel-share-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-cancel-share-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.troub-cancel-share-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.troub-cancel-share-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.troub-cancel-share-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.troub-cancel-share-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .troub-cancel-share-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .troub-cancel-share-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .troub-cancel-share-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.troub-cancel-share-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-cancel-share-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-sharing-color-3);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.troub-cancel-share-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-cancel-share-button.pill-alt:hover::before,
.troub-cancel-share-button.pill-alt.selected::before {
  background: var(--button-border);
}
.troub-cancel-share-button.pill-alt:hover .button-text,
.troub-cancel-share-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.troub-cancel-share-button.pill-alt.disabled,
.troub-cancel-share-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-cancel-share-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-cancel-share-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.troub-cancel-share-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.troub-cancel-share-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.troub-cancel-share-button.round .icon,
.troub-cancel-share-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-cancel-share-button.round:hover,
.troub-cancel-share-button.round.selected {
  opacity: 1;
}
.troub-cancel-share-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.troub-cancel-share-button.round.disabled {
  pointer-events: none;
}
.troub-cancel-share-button.round.disabled .icon {
  filter: saturate(0);
}
.troub-cancel-share-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.troub-cancel-share-button.round[data-size="regular"].active {
  opacity: 1;
}
.troub-cancel-share-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.troub-cancel-share-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.troub-cancel-share-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.troub-cancel-share-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.troub-cancel-share-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.troub-cancel-share-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.troub-cancel-share-button.nav {
  flex-wrap: nowrap;
}
.troub-cancel-share-button.nav svg {
  color: var(--troubadour-main);
}
.troub-cancel-share-button.nav .icon,
.troub-cancel-share-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-cancel-share-button.nav .button-text {
  color: var(--challenge-sharing-color-3);
  font-weight: bold;
}
.troub-cancel-share-button.nav:hover {
  text-decoration: underline;
}
.troub-cancel-share-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.troub-cancel-share-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.troub-cancel-share-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.troub-cancel-share-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.troub-cancel-share-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.troub-cancel-share-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.troub-cancel-share-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.troub-cancel-share-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.troub-cancel-share-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.troub-cancel-share-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.troub-cancel-share-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.troub-cancel-share-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.troub-cancel-share-button.nav[data-size="large"] .icon {
  height: 80px;
}
.troub-cancel-share-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.troub-cancel-share-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.troub-cancel-share-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.troub-cancel-share-button.nav[data-size="small"] {
  padding: 10px;
}
.troub-cancel-share-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.troub-cancel-share-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.troub-cancel-share-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.troub-cancel-share-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.troub-cancel-share-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-cancel-share-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.troub-cancel-share-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.troub-cancel-share-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-cancel-share-button-popup {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.troub-cancel-share-button-popup:focus {
  text-decoration: none;
}
.troub-cancel-share-button-popup[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.troub-cancel-share-button-popup .button-text {
  font-family: Sofia Pro, sans-serif;
}
.troub-cancel-share-button-popup .button-text.ws-no-wrap {
  white-space: nowrap;
}
.troub-cancel-share-button-popup:active,
.troub-cancel-share-button-popup:hover {
  text-decoration: none;
  cursor: pointer;
}
.troub-cancel-share-button-popup.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-cancel-share-button-popup.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--challenge-sharing-color-3);
  border-radius: inherit;
  z-index: 10;
}
.troub-cancel-share-button-popup.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.troub-cancel-share-button-popup.legacy .button-text,
.troub-cancel-share-button-popup.legacy .icon {
  z-index: 11;
}
.troub-cancel-share-button-popup.legacy .button-text {
  color: var(--challenge-sharing-color-3);
  font-weight: normal;
  z-index: 11;
}
.troub-cancel-share-button-popup.legacy svg {
  color: var(--challenge-sharing-color-3);
}
.troub-cancel-share-button-popup.legacy:hover::before,
.troub-cancel-share-button-popup.legacy.selected::before {
  background-color: var(--challenge-sharing-color-3);
  border: 2px solid var(--challenge-sharing-color-3);
}
.troub-cancel-share-button-popup.legacy:hover .button-text,
.troub-cancel-share-button-popup.legacy.selected .button-text {
  color: var(--default-color-2);
}
.troub-cancel-share-button-popup.legacy:hover img,
.troub-cancel-share-button-popup.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.troub-cancel-share-button-popup.legacy.disabled {
  pointer-events: none;
}
.troub-cancel-share-button-popup.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-cancel-share-button-popup.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.troub-cancel-share-button-popup.legacy.disabled .icon {
  opacity: 0.5;
}
.troub-cancel-share-button-popup.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-cancel-share-button-popup.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.troub-cancel-share-button-popup.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-cancel-share-button-popup.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-cancel-share-button-popup.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-cancel-share-button-popup.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.troub-cancel-share-button-popup.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.troub-cancel-share-button-popup.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.troub-cancel-share-button-popup.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.troub-cancel-share-button-popup.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-cancel-share-button-popup.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.troub-cancel-share-button-popup.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-cancel-share-button-popup.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.troub-cancel-share-button-popup.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.troub-cancel-share-button-popup.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.troub-cancel-share-button-popup.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.troub-cancel-share-button-popup.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-cancel-share-button-popup.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.troub-cancel-share-button-popup.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-cancel-share-button-popup.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.troub-cancel-share-button-popup.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.troub-cancel-share-button-popup.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.troub-cancel-share-button-popup.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.troub-cancel-share-button-popup.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-cancel-share-button-popup.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.troub-cancel-share-button-popup.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-cancel-share-button-popup.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-cancel-share-button-popup.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-sharing-color-3);
  border: 2px solid var(--challenge-sharing-color-3);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.troub-cancel-share-button-popup.pill .button-text,
.troub-cancel-share-button-popup.pill .icon {
  z-index: 11;
}
.troub-cancel-share-button-popup.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-cancel-share-button-popup.pill svg {
  color: var(--default-color-2);
}
.troub-cancel-share-button-popup.pill:hover::before,
.troub-cancel-share-button-popup.pill.selected::before {
  filter: brightness(1.3);
}
.troub-cancel-share-button-popup.pill:hover img,
.troub-cancel-share-button-popup.pill.selected img {
  transform: scale(0.95, 0.95);
}
.troub-cancel-share-button-popup.pill.no-shadow::before {
  box-shadow: none;
}
.troub-cancel-share-button-popup.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.troub-cancel-share-button-popup.pill.has-border:hover::before,
.troub-cancel-share-button-popup.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.troub-cancel-share-button-popup.pill.alt-hover:hover::before,
.troub-cancel-share-button-popup.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.troub-cancel-share-button-popup.pill.alt-hover:hover .icon,
.troub-cancel-share-button-popup.pill.alt-hover.selected .icon,
.troub-cancel-share-button-popup.pill.alt-hover:hover .button-text,
.troub-cancel-share-button-popup.pill.alt-hover.selected .button-text {
  color: var(--challenge-sharing-color-3);
}
.troub-cancel-share-button-popup.pill.alt-hover:hover .icon,
.troub-cancel-share-button-popup.pill.alt-hover.selected .icon {
  background-color: var(--challenge-sharing-color-3);
}
.troub-cancel-share-button-popup.pill.disabled,
.troub-cancel-share-button-popup.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-cancel-share-button-popup.pill.disabled::before,
.troub-cancel-share-button-popup.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.troub-cancel-share-button-popup.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.troub-cancel-share-button-popup.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.troub-cancel-share-button-popup.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.troub-cancel-share-button-popup.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-cancel-share-button-popup.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-cancel-share-button-popup.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-cancel-share-button-popup.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.troub-cancel-share-button-popup.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.troub-cancel-share-button-popup.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.troub-cancel-share-button-popup.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.troub-cancel-share-button-popup.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.troub-cancel-share-button-popup.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.troub-cancel-share-button-popup.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.troub-cancel-share-button-popup.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.troub-cancel-share-button-popup.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.troub-cancel-share-button-popup.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.troub-cancel-share-button-popup.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.troub-cancel-share-button-popup.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.troub-cancel-share-button-popup.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.troub-cancel-share-button-popup.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.troub-cancel-share-button-popup.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-cancel-share-button-popup.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.troub-cancel-share-button-popup.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-cancel-share-button-popup.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.troub-cancel-share-button-popup.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.troub-cancel-share-button-popup.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.troub-cancel-share-button-popup.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.troub-cancel-share-button-popup.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.troub-cancel-share-button-popup.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.troub-cancel-share-button-popup.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.troub-cancel-share-button-popup.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-cancel-share-button-popup.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.troub-cancel-share-button-popup.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-cancel-share-button-popup.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.troub-cancel-share-button-popup.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.troub-cancel-share-button-popup.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.troub-cancel-share-button-popup.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.troub-cancel-share-button-popup.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.troub-cancel-share-button-popup.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-cancel-share-button-popup.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.troub-cancel-share-button-popup.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-cancel-share-button-popup.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.troub-cancel-share-button-popup.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.troub-cancel-share-button-popup.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.troub-cancel-share-button-popup.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.troub-cancel-share-button-popup.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.troub-cancel-share-button-popup.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.troub-cancel-share-button-popup.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-cancel-share-button-popup.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.troub-cancel-share-button-popup.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-cancel-share-button-popup.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.troub-cancel-share-button-popup.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.troub-cancel-share-button-popup.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.troub-cancel-share-button-popup.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.troub-cancel-share-button-popup.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .troub-cancel-share-button-popup.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .troub-cancel-share-button-popup.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .troub-cancel-share-button-popup.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.troub-cancel-share-button-popup.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-cancel-share-button-popup.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-sharing-color-3);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.troub-cancel-share-button-popup.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-cancel-share-button-popup.pill-alt:hover::before,
.troub-cancel-share-button-popup.pill-alt.selected::before {
  background: var(--button-border);
}
.troub-cancel-share-button-popup.pill-alt:hover .button-text,
.troub-cancel-share-button-popup.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.troub-cancel-share-button-popup.pill-alt.disabled,
.troub-cancel-share-button-popup.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-cancel-share-button-popup.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-cancel-share-button-popup.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.troub-cancel-share-button-popup.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.troub-cancel-share-button-popup.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.troub-cancel-share-button-popup.round .icon,
.troub-cancel-share-button-popup.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-cancel-share-button-popup.round:hover,
.troub-cancel-share-button-popup.round.selected {
  opacity: 1;
}
.troub-cancel-share-button-popup.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.troub-cancel-share-button-popup.round.disabled {
  pointer-events: none;
}
.troub-cancel-share-button-popup.round.disabled .icon {
  filter: saturate(0);
}
.troub-cancel-share-button-popup.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.troub-cancel-share-button-popup.round[data-size="regular"].active {
  opacity: 1;
}
.troub-cancel-share-button-popup.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.troub-cancel-share-button-popup.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.troub-cancel-share-button-popup.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.troub-cancel-share-button-popup.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.troub-cancel-share-button-popup.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.troub-cancel-share-button-popup.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.troub-cancel-share-button-popup.nav {
  flex-wrap: nowrap;
}
.troub-cancel-share-button-popup.nav svg {
  color: var(--troubadour-main);
}
.troub-cancel-share-button-popup.nav .icon,
.troub-cancel-share-button-popup.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-cancel-share-button-popup.nav .button-text {
  color: var(--challenge-sharing-color-3);
  font-weight: bold;
}
.troub-cancel-share-button-popup.nav:hover {
  text-decoration: underline;
}
.troub-cancel-share-button-popup.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.troub-cancel-share-button-popup.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.troub-cancel-share-button-popup.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.troub-cancel-share-button-popup.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.troub-cancel-share-button-popup.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.troub-cancel-share-button-popup.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.troub-cancel-share-button-popup.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.troub-cancel-share-button-popup.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.troub-cancel-share-button-popup.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.troub-cancel-share-button-popup.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.troub-cancel-share-button-popup.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.troub-cancel-share-button-popup.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.troub-cancel-share-button-popup.nav[data-size="large"] .icon {
  height: 80px;
}
.troub-cancel-share-button-popup.nav[data-size="regular"] {
  padding: 20px 31px;
}
.troub-cancel-share-button-popup.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.troub-cancel-share-button-popup.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.troub-cancel-share-button-popup.nav[data-size="small"] {
  padding: 10px;
}
.troub-cancel-share-button-popup.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.troub-cancel-share-button-popup.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.troub-cancel-share-button-popup.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.troub-cancel-share-button-popup.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.troub-cancel-share-button-popup.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-cancel-share-button-popup.nav[data-size="mini"] {
  padding: 4px 12px;
}
.troub-cancel-share-button-popup.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.troub-cancel-share-button-popup.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-student-works {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.troub-student-works:focus {
  text-decoration: none;
}
.troub-student-works[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.troub-student-works .button-text {
  font-family: Sofia Pro, sans-serif;
}
.troub-student-works .button-text.ws-no-wrap {
  white-space: nowrap;
}
.troub-student-works:active,
.troub-student-works:hover {
  text-decoration: none;
  cursor: pointer;
}
.troub-student-works.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-student-works.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--student-challenges-color-6);
  border-radius: inherit;
  z-index: 10;
}
.troub-student-works.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.troub-student-works.legacy .button-text,
.troub-student-works.legacy .icon {
  z-index: 11;
}
.troub-student-works.legacy .button-text {
  color: var(--student-challenges-color-6);
  font-weight: normal;
  z-index: 11;
}
.troub-student-works.legacy svg {
  color: var(--student-challenges-color-6);
}
.troub-student-works.legacy:hover::before,
.troub-student-works.legacy.selected::before {
  background-color: var(--student-challenges-color-6);
  border: 2px solid var(--student-challenges-color-6);
}
.troub-student-works.legacy:hover .button-text,
.troub-student-works.legacy.selected .button-text {
  color: var(--default-color-2);
}
.troub-student-works.legacy:hover img,
.troub-student-works.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.troub-student-works.legacy.disabled {
  pointer-events: none;
}
.troub-student-works.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-student-works.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.troub-student-works.legacy.disabled .icon {
  opacity: 0.5;
}
.troub-student-works.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-student-works.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.troub-student-works.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-student-works.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-student-works.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-student-works.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.troub-student-works.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.troub-student-works.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.troub-student-works.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.troub-student-works.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-student-works.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.troub-student-works.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-student-works.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.troub-student-works.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.troub-student-works.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.troub-student-works.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.troub-student-works.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-student-works.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.troub-student-works.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-student-works.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.troub-student-works.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.troub-student-works.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.troub-student-works.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.troub-student-works.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-student-works.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.troub-student-works.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-student-works.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-student-works.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-6);
  border: 2px solid var(--student-challenges-color-6);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.troub-student-works.pill .button-text,
.troub-student-works.pill .icon {
  z-index: 11;
}
.troub-student-works.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-student-works.pill svg {
  color: var(--default-color-2);
}
.troub-student-works.pill:hover::before,
.troub-student-works.pill.selected::before {
  filter: brightness(1.3);
}
.troub-student-works.pill:hover img,
.troub-student-works.pill.selected img {
  transform: scale(0.95, 0.95);
}
.troub-student-works.pill.no-shadow::before {
  box-shadow: none;
}
.troub-student-works.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.troub-student-works.pill.has-border:hover::before,
.troub-student-works.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.troub-student-works.pill.alt-hover:hover::before,
.troub-student-works.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.troub-student-works.pill.alt-hover:hover .icon,
.troub-student-works.pill.alt-hover.selected .icon,
.troub-student-works.pill.alt-hover:hover .button-text,
.troub-student-works.pill.alt-hover.selected .button-text {
  color: var(--student-challenges-color-6);
}
.troub-student-works.pill.alt-hover:hover .icon,
.troub-student-works.pill.alt-hover.selected .icon {
  background-color: var(--student-challenges-color-6);
}
.troub-student-works.pill.disabled,
.troub-student-works.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-student-works.pill.disabled::before,
.troub-student-works.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.troub-student-works.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.troub-student-works.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.troub-student-works.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.troub-student-works.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-student-works.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-student-works.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-student-works.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.troub-student-works.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.troub-student-works.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.troub-student-works.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.troub-student-works.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.troub-student-works.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.troub-student-works.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.troub-student-works.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.troub-student-works.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.troub-student-works.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.troub-student-works.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.troub-student-works.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.troub-student-works.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.troub-student-works.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.troub-student-works.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-student-works.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.troub-student-works.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-student-works.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.troub-student-works.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.troub-student-works.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.troub-student-works.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.troub-student-works.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.troub-student-works.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.troub-student-works.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-student-works.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.troub-student-works.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-student-works.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.troub-student-works.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.troub-student-works.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.troub-student-works.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.troub-student-works.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.troub-student-works.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.troub-student-works.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-student-works.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.troub-student-works.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-student-works.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.troub-student-works.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.troub-student-works.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.troub-student-works.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.troub-student-works.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.troub-student-works.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-student-works.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.troub-student-works.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-student-works.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.troub-student-works.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.troub-student-works.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.troub-student-works.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.troub-student-works.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.troub-student-works.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.troub-student-works.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-student-works.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.troub-student-works.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-student-works.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.troub-student-works.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.troub-student-works.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.troub-student-works.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.troub-student-works.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.troub-student-works.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.troub-student-works.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-student-works.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.troub-student-works.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-student-works.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.troub-student-works.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.troub-student-works.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.troub-student-works.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.troub-student-works.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.troub-student-works.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.troub-student-works.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.troub-student-works.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.troub-student-works.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.troub-student-works.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.troub-student-works.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.troub-student-works.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.troub-student-works.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.troub-student-works.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.troub-student-works.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.troub-student-works.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.troub-student-works.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.troub-student-works.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .troub-student-works.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .troub-student-works.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .troub-student-works.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .troub-student-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .troub-student-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .troub-student-works.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .troub-student-works.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .troub-student-works.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .troub-student-works.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .troub-student-works.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .troub-student-works.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .troub-student-works.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.troub-student-works.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-student-works.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-6);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.troub-student-works.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-student-works.pill-alt:hover::before,
.troub-student-works.pill-alt.selected::before {
  background: var(--button-border);
}
.troub-student-works.pill-alt:hover .button-text,
.troub-student-works.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.troub-student-works.pill-alt.disabled,
.troub-student-works.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-student-works.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-student-works.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.troub-student-works.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.troub-student-works.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.troub-student-works.round .icon,
.troub-student-works.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-student-works.round:hover,
.troub-student-works.round.selected {
  opacity: 1;
}
.troub-student-works.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.troub-student-works.round.disabled {
  pointer-events: none;
}
.troub-student-works.round.disabled .icon {
  filter: saturate(0);
}
.troub-student-works.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.troub-student-works.round[data-size="regular"].active {
  opacity: 1;
}
.troub-student-works.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.troub-student-works.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.troub-student-works.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.troub-student-works.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.troub-student-works.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.troub-student-works.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.troub-student-works.nav {
  flex-wrap: nowrap;
}
.troub-student-works.nav svg {
  color: var(--troubadour-main);
}
.troub-student-works.nav .icon,
.troub-student-works.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-student-works.nav .button-text {
  color: var(--student-challenges-color-6);
  font-weight: bold;
}
.troub-student-works.nav:hover {
  text-decoration: underline;
}
.troub-student-works.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.troub-student-works.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.troub-student-works.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.troub-student-works.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.troub-student-works.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.troub-student-works.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.troub-student-works.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.troub-student-works.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.troub-student-works.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.troub-student-works.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.troub-student-works.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.troub-student-works.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.troub-student-works.nav[data-size="large"] .icon {
  height: 80px;
}
.troub-student-works.nav[data-size="regular"] {
  padding: 20px 31px;
}
.troub-student-works.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.troub-student-works.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.troub-student-works.nav[data-size="small"] {
  padding: 10px;
}
.troub-student-works.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.troub-student-works.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.troub-student-works.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.troub-student-works.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.troub-student-works.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-student-works.nav[data-size="mini"] {
  padding: 4px 12px;
}
.troub-student-works.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.troub-student-works.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-student-works.empty-group-btn,
.troub-student-works.empty-student-works-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.troub-student-works.empty-group-btn:focus,
.troub-student-works.empty-student-works-btn:focus {
  text-decoration: none;
}
.troub-student-works.empty-group-btn[data-icon-position="left"],
.troub-student-works.empty-student-works-btn[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.troub-student-works.empty-group-btn .button-text,
.troub-student-works.empty-student-works-btn .button-text {
  font-family: Sofia Pro, sans-serif;
}
.troub-student-works.empty-group-btn .button-text.ws-no-wrap,
.troub-student-works.empty-student-works-btn .button-text.ws-no-wrap {
  white-space: nowrap;
}
.troub-student-works.empty-group-btn:active,
.troub-student-works.empty-student-works-btn:active,
.troub-student-works.empty-group-btn:hover,
.troub-student-works.empty-student-works-btn:hover {
  text-decoration: none;
  cursor: pointer;
}
.troub-student-works.empty-group-btn.legacy,
.troub-student-works.empty-student-works-btn.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-student-works.empty-group-btn.legacy::before,
.troub-student-works.empty-student-works-btn.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--onboarding-bg-7);
  border-radius: inherit;
  z-index: 10;
}
.troub-student-works.empty-group-btn.legacy.has-shadow::before,
.troub-student-works.empty-student-works-btn.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.troub-student-works.empty-group-btn.legacy .button-text,
.troub-student-works.empty-student-works-btn.legacy .button-text,
.troub-student-works.empty-group-btn.legacy .icon,
.troub-student-works.empty-student-works-btn.legacy .icon {
  z-index: 11;
}
.troub-student-works.empty-group-btn.legacy .button-text,
.troub-student-works.empty-student-works-btn.legacy .button-text {
  color: var(--onboarding-bg-7);
  font-weight: normal;
  z-index: 11;
}
.troub-student-works.empty-group-btn.legacy svg,
.troub-student-works.empty-student-works-btn.legacy svg {
  color: var(--onboarding-bg-7);
}
.troub-student-works.empty-group-btn.legacy:hover::before,
.troub-student-works.empty-student-works-btn.legacy:hover::before,
.troub-student-works.empty-group-btn.legacy.selected::before,
.troub-student-works.empty-student-works-btn.legacy.selected::before {
  background-color: var(--onboarding-bg-7);
  border: 2px solid var(--onboarding-bg-7);
}
.troub-student-works.empty-group-btn.legacy:hover .button-text,
.troub-student-works.empty-student-works-btn.legacy:hover .button-text,
.troub-student-works.empty-group-btn.legacy.selected .button-text,
.troub-student-works.empty-student-works-btn.legacy.selected .button-text {
  color: var(--default-color-2);
}
.troub-student-works.empty-group-btn.legacy:hover img,
.troub-student-works.empty-student-works-btn.legacy:hover img,
.troub-student-works.empty-group-btn.legacy.selected img,
.troub-student-works.empty-student-works-btn.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.troub-student-works.empty-group-btn.legacy.disabled,
.troub-student-works.empty-student-works-btn.legacy.disabled {
  pointer-events: none;
}
.troub-student-works.empty-group-btn.legacy.disabled::before,
.troub-student-works.empty-student-works-btn.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-student-works.empty-group-btn.legacy.disabled .button-text,
.troub-student-works.empty-student-works-btn.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.troub-student-works.empty-group-btn.legacy.disabled .icon,
.troub-student-works.empty-student-works-btn.legacy.disabled .icon {
  opacity: 0.5;
}
.troub-student-works.empty-group-btn.legacy.invalid::before,
.troub-student-works.empty-student-works-btn.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-student-works.empty-group-btn.legacy.invalid .button-text,
.troub-student-works.empty-student-works-btn.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.troub-student-works.empty-group-btn.legacy.waiting,
.troub-student-works.empty-student-works-btn.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-student-works.empty-group-btn.legacy .icon,
.troub-student-works.empty-student-works-btn.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-student-works.empty-group-btn.legacy .icon img,
.troub-student-works.empty-student-works-btn.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-student-works.empty-group-btn.legacy[data-size="tiny"],
.troub-student-works.empty-student-works-btn.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.troub-student-works.empty-group-btn.legacy[data-size="tiny"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.troub-student-works.empty-group-btn.legacy[data-size="tiny"] .button-text,
.troub-student-works.empty-student-works-btn.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.troub-student-works.empty-group-btn.legacy[data-size="tiny"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.troub-student-works.empty-group-btn.legacy[data-size="tiny"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-student-works.empty-group-btn.legacy[data-size="tiny"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.troub-student-works.empty-group-btn.legacy[data-size="tiny"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-student-works.empty-group-btn.legacy[data-size="small"],
.troub-student-works.empty-student-works-btn.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.troub-student-works.empty-group-btn.legacy[data-size="small"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.troub-student-works.empty-group-btn.legacy[data-size="small"] .button-text,
.troub-student-works.empty-student-works-btn.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.troub-student-works.empty-group-btn.legacy[data-size="small"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.troub-student-works.empty-group-btn.legacy[data-size="small"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-student-works.empty-group-btn.legacy[data-size="small"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.troub-student-works.empty-group-btn.legacy[data-size="small"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-student-works.empty-group-btn.legacy[data-size="regular"],
.troub-student-works.empty-student-works-btn.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.troub-student-works.empty-group-btn.legacy[data-size="regular"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.troub-student-works.empty-group-btn.legacy[data-size="regular"] .button-text,
.troub-student-works.empty-student-works-btn.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.troub-student-works.empty-group-btn.legacy[data-size="regular"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.troub-student-works.empty-group-btn.legacy[data-size="regular"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-student-works.empty-group-btn.legacy[data-size="regular"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.troub-student-works.empty-group-btn.legacy[data-size="regular"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-student-works.empty-group-btn.pill,
.troub-student-works.empty-student-works-btn.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-student-works.empty-group-btn.pill::before,
.troub-student-works.empty-student-works-btn.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--onboarding-bg-7);
  border: 2px solid var(--onboarding-bg-7);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.troub-student-works.empty-group-btn.pill .button-text,
.troub-student-works.empty-student-works-btn.pill .button-text,
.troub-student-works.empty-group-btn.pill .icon,
.troub-student-works.empty-student-works-btn.pill .icon {
  z-index: 11;
}
.troub-student-works.empty-group-btn.pill .button-text,
.troub-student-works.empty-student-works-btn.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-student-works.empty-group-btn.pill svg,
.troub-student-works.empty-student-works-btn.pill svg {
  color: var(--default-color-2);
}
.troub-student-works.empty-group-btn.pill:hover::before,
.troub-student-works.empty-student-works-btn.pill:hover::before,
.troub-student-works.empty-group-btn.pill.selected::before,
.troub-student-works.empty-student-works-btn.pill.selected::before {
  filter: brightness(1.3);
}
.troub-student-works.empty-group-btn.pill:hover img,
.troub-student-works.empty-student-works-btn.pill:hover img,
.troub-student-works.empty-group-btn.pill.selected img,
.troub-student-works.empty-student-works-btn.pill.selected img {
  transform: scale(0.95, 0.95);
}
.troub-student-works.empty-group-btn.pill.no-shadow::before,
.troub-student-works.empty-student-works-btn.pill.no-shadow::before {
  box-shadow: none;
}
.troub-student-works.empty-group-btn.pill.has-border::before,
.troub-student-works.empty-student-works-btn.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.troub-student-works.empty-group-btn.pill.has-border:hover::before,
.troub-student-works.empty-student-works-btn.pill.has-border:hover::before,
.troub-student-works.empty-group-btn.pill.has-border.selected::before,
.troub-student-works.empty-student-works-btn.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.troub-student-works.empty-group-btn.pill.alt-hover:hover::before,
.troub-student-works.empty-student-works-btn.pill.alt-hover:hover::before,
.troub-student-works.empty-group-btn.pill.alt-hover.selected::before,
.troub-student-works.empty-student-works-btn.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.troub-student-works.empty-group-btn.pill.alt-hover:hover .icon,
.troub-student-works.empty-student-works-btn.pill.alt-hover:hover .icon,
.troub-student-works.empty-group-btn.pill.alt-hover.selected .icon,
.troub-student-works.empty-student-works-btn.pill.alt-hover.selected .icon,
.troub-student-works.empty-group-btn.pill.alt-hover:hover .button-text,
.troub-student-works.empty-student-works-btn.pill.alt-hover:hover .button-text,
.troub-student-works.empty-group-btn.pill.alt-hover.selected .button-text,
.troub-student-works.empty-student-works-btn.pill.alt-hover.selected .button-text {
  color: var(--onboarding-bg-7);
}
.troub-student-works.empty-group-btn.pill.alt-hover:hover .icon,
.troub-student-works.empty-student-works-btn.pill.alt-hover:hover .icon,
.troub-student-works.empty-group-btn.pill.alt-hover.selected .icon,
.troub-student-works.empty-student-works-btn.pill.alt-hover.selected .icon {
  background-color: var(--onboarding-bg-7);
}
.troub-student-works.empty-group-btn.pill.disabled,
.troub-student-works.empty-student-works-btn.pill.disabled,
.troub-student-works.empty-group-btn.pill.invalid,
.troub-student-works.empty-student-works-btn.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-student-works.empty-group-btn.pill.disabled::before,
.troub-student-works.empty-student-works-btn.pill.disabled::before,
.troub-student-works.empty-group-btn.pill.invalid::before,
.troub-student-works.empty-student-works-btn.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.troub-student-works.empty-group-btn.pill.disabled:not([data-icon-type=""]) .icon,
.troub-student-works.empty-student-works-btn.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.troub-student-works.empty-group-btn.pill.disabled:not([data-icon-type=""]) .icon img,
.troub-student-works.empty-student-works-btn.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.troub-student-works.empty-group-btn.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon,
.troub-student-works.empty-student-works-btn.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.troub-student-works.empty-group-btn.pill.waiting,
.troub-student-works.empty-student-works-btn.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-student-works.empty-group-btn.pill .icon,
.troub-student-works.empty-student-works-btn.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-student-works.empty-group-btn.pill .icon img,
.troub-student-works.empty-student-works-btn.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-student-works.empty-group-btn.pill[data-icon-position="null"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"],
.troub-student-works.empty-student-works-btn.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"][data-icon-position="null"],
.troub-student-works.empty-student-works-btn.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.troub-student-works.empty-group-btn.pill[data-size="micro"][data-icon-position="null"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"],
.troub-student-works.empty-student-works-btn.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"][data-icon-position="null"],
.troub-student-works.empty-student-works-btn.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.troub-student-works.empty-group-btn.pill[data-size="mini"][data-icon-position="null"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"],
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"][data-icon-position="null"],
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.troub-student-works.empty-group-btn.pill[data-size="tiny"][data-icon-position="null"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.troub-student-works.empty-group-btn.pill[data-size="small"],
.troub-student-works.empty-student-works-btn.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.troub-student-works.empty-group-btn.pill[data-size="small"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.troub-student-works.empty-group-btn.pill[data-size="small"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.troub-student-works.empty-group-btn.pill[data-size="small"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.troub-student-works.empty-group-btn.pill[data-size="small"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-student-works.empty-group-btn.pill[data-size="small"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.troub-student-works.empty-group-btn.pill[data-size="small"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-student-works.empty-group-btn.pill[data-size="small"][data-icon-position="null"],
.troub-student-works.empty-student-works-btn.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.troub-student-works.empty-group-btn.pill[data-size="small"][data-icon-position="null"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"],
.troub-student-works.empty-student-works-btn.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"][data-icon-position="null"],
.troub-student-works.empty-student-works-btn.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.troub-student-works.empty-group-btn.pill[data-size="regular"][data-icon-position="null"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.troub-student-works.empty-group-btn.pill[data-size="large"],
.troub-student-works.empty-student-works-btn.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.troub-student-works.empty-group-btn.pill[data-size="large"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.troub-student-works.empty-group-btn.pill[data-size="large"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.troub-student-works.empty-group-btn.pill[data-size="large"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-student-works.empty-group-btn.pill[data-size="large"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.troub-student-works.empty-group-btn.pill[data-size="large"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-student-works.empty-group-btn.pill[data-size="large"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.troub-student-works.empty-group-btn.pill[data-size="large"][data-icon-position="null"],
.troub-student-works.empty-student-works-btn.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.troub-student-works.empty-group-btn.pill[data-size="large"][data-icon-position="null"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"],
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"][data-icon-position="left"],
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"][data-icon-position="left"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"][data-icon-position="right"],
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"][data-icon-position="right"] .icon,
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"][data-icon-position="null"],
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.troub-student-works.empty-group-btn.pill[data-size="xlarge"][data-icon-position="null"] .button-text,
.troub-student-works.empty-student-works-btn.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg .icon,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="micro"] .icon,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="micro"] .button-text,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="mini"] .icon,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="mini"] .button-text,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="tiny"] .icon,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="tiny"] .button-text,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="small"] .icon,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="small"] .button-text,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="regular"] .icon,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="regular"] .button-text,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="large"] .icon,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="large"] .button-text,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="xlarge"] .icon,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.troub-student-works.empty-group-btn.pill.icon-no-bg[data-size="xlarge"] .button-text,
.troub-student-works.empty-student-works-btn.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .troub-student-works.empty-group-btn.pill[data-size="responsive"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"] .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="left"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="left"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="right"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="right"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="null"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"].icon-no-bg .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"].icon-no-bg .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .troub-student-works.empty-group-btn.pill[data-size="responsive"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"] .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="left"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="left"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="right"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="right"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="null"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"].icon-no-bg .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"].icon-no-bg .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]),
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]),
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"],
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .troub-student-works.empty-group-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text,
  .troub-student-works.empty-student-works-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.troub-student-works.empty-group-btn.pill-alt,
.troub-student-works.empty-student-works-btn.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-student-works.empty-group-btn.pill-alt::before,
.troub-student-works.empty-student-works-btn.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--onboarding-bg-7);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.troub-student-works.empty-group-btn.pill-alt .button-text,
.troub-student-works.empty-student-works-btn.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-student-works.empty-group-btn.pill-alt:hover::before,
.troub-student-works.empty-student-works-btn.pill-alt:hover::before,
.troub-student-works.empty-group-btn.pill-alt.selected::before,
.troub-student-works.empty-student-works-btn.pill-alt.selected::before {
  background: var(--button-border);
}
.troub-student-works.empty-group-btn.pill-alt:hover .button-text,
.troub-student-works.empty-student-works-btn.pill-alt:hover .button-text,
.troub-student-works.empty-group-btn.pill-alt.selected .button-text,
.troub-student-works.empty-student-works-btn.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.troub-student-works.empty-group-btn.pill-alt.disabled,
.troub-student-works.empty-student-works-btn.pill-alt.disabled,
.troub-student-works.empty-group-btn.pill-alt.invalid,
.troub-student-works.empty-student-works-btn.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-student-works.empty-group-btn.pill-alt.waiting,
.troub-student-works.empty-student-works-btn.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-student-works.empty-group-btn.pill-alt[data-size="small"],
.troub-student-works.empty-student-works-btn.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.troub-student-works.empty-group-btn.pill-alt[data-size="small"] .button-text,
.troub-student-works.empty-student-works-btn.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.troub-student-works.empty-group-btn.round,
.troub-student-works.empty-student-works-btn.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.troub-student-works.empty-group-btn.round .icon,
.troub-student-works.empty-student-works-btn.round .icon,
.troub-student-works.empty-group-btn.round svg,
.troub-student-works.empty-student-works-btn.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-student-works.empty-group-btn.round:hover,
.troub-student-works.empty-student-works-btn.round:hover,
.troub-student-works.empty-group-btn.round.selected,
.troub-student-works.empty-student-works-btn.round.selected {
  opacity: 1;
}
.troub-student-works.empty-group-btn.round.inactive,
.troub-student-works.empty-student-works-btn.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.troub-student-works.empty-group-btn.round.disabled,
.troub-student-works.empty-student-works-btn.round.disabled {
  pointer-events: none;
}
.troub-student-works.empty-group-btn.round.disabled .icon,
.troub-student-works.empty-student-works-btn.round.disabled .icon {
  filter: saturate(0);
}
.troub-student-works.empty-group-btn.round[data-size="regular"],
.troub-student-works.empty-student-works-btn.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.troub-student-works.empty-group-btn.round[data-size="regular"].active,
.troub-student-works.empty-student-works-btn.round[data-size="regular"].active {
  opacity: 1;
}
.troub-student-works.empty-group-btn.round[data-size="small"],
.troub-student-works.empty-student-works-btn.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.troub-student-works.empty-group-btn.round[data-size="small"].active,
.troub-student-works.empty-student-works-btn.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.troub-student-works.empty-group-btn.round[data-size="tiny"],
.troub-student-works.empty-student-works-btn.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.troub-student-works.empty-group-btn.round[data-size="tiny"].active,
.troub-student-works.empty-student-works-btn.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.troub-student-works.empty-group-btn.round[data-size="mini"],
.troub-student-works.empty-student-works-btn.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.troub-student-works.empty-group-btn.round[data-size="mini"].active,
.troub-student-works.empty-student-works-btn.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.troub-student-works.empty-group-btn.nav,
.troub-student-works.empty-student-works-btn.nav {
  flex-wrap: nowrap;
}
.troub-student-works.empty-group-btn.nav svg,
.troub-student-works.empty-student-works-btn.nav svg {
  color: var(--troubadour-main);
}
.troub-student-works.empty-group-btn.nav .icon,
.troub-student-works.empty-student-works-btn.nav .icon,
.troub-student-works.empty-group-btn.nav svg,
.troub-student-works.empty-student-works-btn.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-student-works.empty-group-btn.nav .button-text,
.troub-student-works.empty-student-works-btn.nav .button-text {
  color: var(--onboarding-bg-7);
  font-weight: bold;
}
.troub-student-works.empty-group-btn.nav:hover,
.troub-student-works.empty-student-works-btn.nav:hover {
  text-decoration: underline;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="right"][data-size="regular"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="right"][data-size="small"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="right"][data-size="tiny"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="right"][data-size="mini"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="right"] .button-text,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="left"][data-size="regular"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="left"][data-size="small"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="left"][data-size="tiny"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="left"][data-size="mini"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.troub-student-works.empty-group-btn.nav[data-icon-position="left"] .button-text,
.troub-student-works.empty-student-works-btn.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.troub-student-works.empty-group-btn.nav[data-size="large"],
.troub-student-works.empty-student-works-btn.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.troub-student-works.empty-group-btn.nav[data-size="large"] .button-text,
.troub-student-works.empty-student-works-btn.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.troub-student-works.empty-group-btn.nav[data-size="large"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-size="large"] .icon {
  height: 80px;
}
.troub-student-works.empty-group-btn.nav[data-size="regular"],
.troub-student-works.empty-student-works-btn.nav[data-size="regular"] {
  padding: 20px 31px;
}
.troub-student-works.empty-group-btn.nav[data-size="regular"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.troub-student-works.empty-group-btn.nav[data-size="regular"] .button-text,
.troub-student-works.empty-student-works-btn.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.troub-student-works.empty-group-btn.nav[data-size="small"],
.troub-student-works.empty-student-works-btn.nav[data-size="small"] {
  padding: 10px;
}
.troub-student-works.empty-group-btn.nav[data-size="small"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.troub-student-works.empty-group-btn.nav[data-size="small"] .button-text,
.troub-student-works.empty-student-works-btn.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.troub-student-works.empty-group-btn.nav[data-size="tiny"],
.troub-student-works.empty-student-works-btn.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.troub-student-works.empty-group-btn.nav[data-size="tiny"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.troub-student-works.empty-group-btn.nav[data-size="tiny"] .button-text,
.troub-student-works.empty-student-works-btn.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-student-works.empty-group-btn.nav[data-size="mini"],
.troub-student-works.empty-student-works-btn.nav[data-size="mini"] {
  padding: 4px 12px;
}
.troub-student-works.empty-group-btn.nav[data-size="mini"] .icon,
.troub-student-works.empty-student-works-btn.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.troub-student-works.empty-group-btn.nav[data-size="mini"] .button-text,
.troub-student-works.empty-student-works-btn.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-close-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.troub-close-button:focus {
  text-decoration: none;
}
.troub-close-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.troub-close-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.troub-close-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.troub-close-button:active,
.troub-close-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.troub-close-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-close-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--default-color);
  border-radius: inherit;
  z-index: 10;
}
.troub-close-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.troub-close-button.legacy .button-text,
.troub-close-button.legacy .icon {
  z-index: 11;
}
.troub-close-button.legacy .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.troub-close-button.legacy svg {
  color: var(--default-color);
}
.troub-close-button.legacy:hover::before,
.troub-close-button.legacy.selected::before {
  background-color: var(--default-color);
  border: 2px solid var(--default-color);
}
.troub-close-button.legacy:hover .button-text,
.troub-close-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.troub-close-button.legacy:hover img,
.troub-close-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.troub-close-button.legacy.disabled {
  pointer-events: none;
}
.troub-close-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-close-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.troub-close-button.legacy.disabled .icon {
  opacity: 0.5;
}
.troub-close-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.troub-close-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.troub-close-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-close-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-close-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-close-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.troub-close-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.troub-close-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.troub-close-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.troub-close-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-close-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.troub-close-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-close-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.troub-close-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.troub-close-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.troub-close-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.troub-close-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-close-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.troub-close-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-close-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.troub-close-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.troub-close-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.troub-close-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.troub-close-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-close-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.troub-close-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-close-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-close-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-color);
  border: 2px solid var(--default-color);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.troub-close-button.pill .button-text,
.troub-close-button.pill .icon {
  z-index: 11;
}
.troub-close-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-close-button.pill svg {
  color: var(--default-color-2);
}
.troub-close-button.pill:hover::before,
.troub-close-button.pill.selected::before {
  filter: brightness(1.3);
}
.troub-close-button.pill:hover img,
.troub-close-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.troub-close-button.pill.no-shadow::before {
  box-shadow: none;
}
.troub-close-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.troub-close-button.pill.has-border:hover::before,
.troub-close-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.troub-close-button.pill.alt-hover:hover::before,
.troub-close-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.troub-close-button.pill.alt-hover:hover .icon,
.troub-close-button.pill.alt-hover.selected .icon,
.troub-close-button.pill.alt-hover:hover .button-text,
.troub-close-button.pill.alt-hover.selected .button-text {
  color: var(--default-color);
}
.troub-close-button.pill.alt-hover:hover .icon,
.troub-close-button.pill.alt-hover.selected .icon {
  background-color: var(--default-color);
}
.troub-close-button.pill.disabled,
.troub-close-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-close-button.pill.disabled::before,
.troub-close-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.troub-close-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.troub-close-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.troub-close-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.troub-close-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-close-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.troub-close-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.troub-close-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.troub-close-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.troub-close-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.troub-close-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.troub-close-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.troub-close-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.troub-close-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.troub-close-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.troub-close-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.troub-close-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.troub-close-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.troub-close-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.troub-close-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.troub-close-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.troub-close-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.troub-close-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.troub-close-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.troub-close-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.troub-close-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.troub-close-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.troub-close-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.troub-close-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.troub-close-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.troub-close-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.troub-close-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.troub-close-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.troub-close-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.troub-close-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.troub-close-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.troub-close-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.troub-close-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.troub-close-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.troub-close-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.troub-close-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.troub-close-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.troub-close-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.troub-close-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.troub-close-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.troub-close-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.troub-close-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.troub-close-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-close-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.troub-close-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-close-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.troub-close-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.troub-close-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.troub-close-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.troub-close-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.troub-close-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.troub-close-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-close-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.troub-close-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-close-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.troub-close-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.troub-close-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.troub-close-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.troub-close-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.troub-close-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.troub-close-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.troub-close-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.troub-close-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.troub-close-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.troub-close-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.troub-close-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.troub-close-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.troub-close-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.troub-close-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.troub-close-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.troub-close-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.troub-close-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.troub-close-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.troub-close-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.troub-close-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.troub-close-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.troub-close-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.troub-close-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.troub-close-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.troub-close-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.troub-close-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .troub-close-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .troub-close-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .troub-close-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .troub-close-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .troub-close-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .troub-close-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .troub-close-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .troub-close-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .troub-close-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .troub-close-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .troub-close-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .troub-close-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.troub-close-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.troub-close-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-color);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.troub-close-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.troub-close-button.pill-alt:hover::before,
.troub-close-button.pill-alt.selected::before {
  background: var(--button-border);
}
.troub-close-button.pill-alt:hover .button-text,
.troub-close-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.troub-close-button.pill-alt.disabled,
.troub-close-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.troub-close-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.troub-close-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.troub-close-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.troub-close-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.troub-close-button.round .icon,
.troub-close-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-close-button.round:hover,
.troub-close-button.round.selected {
  opacity: 1;
}
.troub-close-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.troub-close-button.round.disabled {
  pointer-events: none;
}
.troub-close-button.round.disabled .icon {
  filter: saturate(0);
}
.troub-close-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.troub-close-button.round[data-size="regular"].active {
  opacity: 1;
}
.troub-close-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.troub-close-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.troub-close-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.troub-close-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.troub-close-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.troub-close-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.troub-close-button.nav {
  flex-wrap: nowrap;
}
.troub-close-button.nav svg {
  color: var(--troubadour-main);
}
.troub-close-button.nav .icon,
.troub-close-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.troub-close-button.nav .button-text {
  color: var(--default-color);
  font-weight: bold;
}
.troub-close-button.nav:hover {
  text-decoration: underline;
}
.troub-close-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.troub-close-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.troub-close-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.troub-close-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.troub-close-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.troub-close-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.troub-close-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.troub-close-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.troub-close-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.troub-close-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.troub-close-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.troub-close-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.troub-close-button.nav[data-size="large"] .icon {
  height: 80px;
}
.troub-close-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.troub-close-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.troub-close-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.troub-close-button.nav[data-size="small"] {
  padding: 10px;
}
.troub-close-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.troub-close-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.troub-close-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.troub-close-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.troub-close-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.troub-close-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.troub-close-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.troub-close-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.correct-workstate-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.correct-workstate-button:focus {
  text-decoration: none;
}
.correct-workstate-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.correct-workstate-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.correct-workstate-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.correct-workstate-button:active,
.correct-workstate-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.correct-workstate-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correct-workstate-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-waitval-dark);
  border-radius: inherit;
  z-index: 10;
}
.correct-workstate-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.correct-workstate-button.legacy .button-text,
.correct-workstate-button.legacy .icon {
  z-index: 11;
}
.correct-workstate-button.legacy .button-text {
  color: var(--workstate-waitval-dark);
  font-weight: normal;
  z-index: 11;
}
.correct-workstate-button.legacy svg {
  color: var(--workstate-waitval-dark);
}
.correct-workstate-button.legacy:hover::before,
.correct-workstate-button.legacy.selected::before {
  background-color: var(--workstate-waitval-dark);
  border: 2px solid var(--workstate-waitval-dark);
}
.correct-workstate-button.legacy:hover .button-text,
.correct-workstate-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.correct-workstate-button.legacy:hover img,
.correct-workstate-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.correct-workstate-button.legacy.disabled {
  pointer-events: none;
}
.correct-workstate-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.correct-workstate-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.correct-workstate-button.legacy.disabled .icon {
  opacity: 0.5;
}
.correct-workstate-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.correct-workstate-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.correct-workstate-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correct-workstate-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.correct-workstate-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.correct-workstate-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.correct-workstate-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.correct-workstate-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.correct-workstate-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.correct-workstate-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.correct-workstate-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.correct-workstate-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.correct-workstate-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.correct-workstate-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.correct-workstate-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.correct-workstate-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.correct-workstate-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.correct-workstate-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.correct-workstate-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.correct-workstate-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.correct-workstate-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.correct-workstate-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.correct-workstate-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.correct-workstate-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.correct-workstate-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.correct-workstate-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.correct-workstate-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correct-workstate-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-waitval-dark);
  border: 2px solid var(--workstate-waitval-dark);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.correct-workstate-button.pill .button-text,
.correct-workstate-button.pill .icon {
  z-index: 11;
}
.correct-workstate-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.correct-workstate-button.pill svg {
  color: var(--default-color-2);
}
.correct-workstate-button.pill:hover::before,
.correct-workstate-button.pill.selected::before {
  filter: brightness(1.3);
}
.correct-workstate-button.pill:hover img,
.correct-workstate-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.correct-workstate-button.pill.no-shadow::before {
  box-shadow: none;
}
.correct-workstate-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.correct-workstate-button.pill.has-border:hover::before,
.correct-workstate-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.correct-workstate-button.pill.alt-hover:hover::before,
.correct-workstate-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.correct-workstate-button.pill.alt-hover:hover .icon,
.correct-workstate-button.pill.alt-hover.selected .icon,
.correct-workstate-button.pill.alt-hover:hover .button-text,
.correct-workstate-button.pill.alt-hover.selected .button-text {
  color: var(--workstate-waitval-dark);
}
.correct-workstate-button.pill.alt-hover:hover .icon,
.correct-workstate-button.pill.alt-hover.selected .icon {
  background-color: var(--workstate-waitval-dark);
}
.correct-workstate-button.pill.disabled,
.correct-workstate-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.correct-workstate-button.pill.disabled::before,
.correct-workstate-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.correct-workstate-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.correct-workstate-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.correct-workstate-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.correct-workstate-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correct-workstate-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.correct-workstate-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.correct-workstate-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.correct-workstate-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.correct-workstate-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.correct-workstate-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.correct-workstate-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.correct-workstate-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.correct-workstate-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.correct-workstate-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.correct-workstate-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.correct-workstate-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.correct-workstate-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.correct-workstate-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.correct-workstate-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.correct-workstate-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.correct-workstate-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.correct-workstate-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.correct-workstate-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.correct-workstate-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.correct-workstate-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.correct-workstate-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.correct-workstate-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.correct-workstate-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.correct-workstate-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.correct-workstate-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.correct-workstate-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.correct-workstate-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.correct-workstate-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.correct-workstate-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.correct-workstate-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.correct-workstate-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.correct-workstate-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.correct-workstate-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.correct-workstate-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.correct-workstate-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.correct-workstate-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.correct-workstate-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.correct-workstate-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.correct-workstate-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.correct-workstate-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.correct-workstate-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.correct-workstate-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.correct-workstate-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.correct-workstate-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.correct-workstate-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.correct-workstate-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.correct-workstate-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.correct-workstate-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.correct-workstate-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.correct-workstate-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.correct-workstate-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.correct-workstate-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.correct-workstate-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.correct-workstate-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.correct-workstate-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.correct-workstate-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.correct-workstate-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.correct-workstate-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.correct-workstate-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.correct-workstate-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.correct-workstate-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.correct-workstate-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.correct-workstate-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.correct-workstate-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.correct-workstate-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.correct-workstate-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.correct-workstate-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.correct-workstate-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .correct-workstate-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .correct-workstate-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .correct-workstate-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .correct-workstate-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .correct-workstate-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .correct-workstate-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .correct-workstate-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .correct-workstate-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .correct-workstate-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .correct-workstate-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .correct-workstate-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .correct-workstate-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.correct-workstate-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correct-workstate-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-waitval-dark);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.correct-workstate-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.correct-workstate-button.pill-alt:hover::before,
.correct-workstate-button.pill-alt.selected::before {
  background: var(--button-border);
}
.correct-workstate-button.pill-alt:hover .button-text,
.correct-workstate-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.correct-workstate-button.pill-alt.disabled,
.correct-workstate-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.correct-workstate-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correct-workstate-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.correct-workstate-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.correct-workstate-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.correct-workstate-button.round .icon,
.correct-workstate-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.correct-workstate-button.round:hover,
.correct-workstate-button.round.selected {
  opacity: 1;
}
.correct-workstate-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.correct-workstate-button.round.disabled {
  pointer-events: none;
}
.correct-workstate-button.round.disabled .icon {
  filter: saturate(0);
}
.correct-workstate-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.correct-workstate-button.round[data-size="regular"].active {
  opacity: 1;
}
.correct-workstate-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.correct-workstate-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.correct-workstate-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.correct-workstate-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.correct-workstate-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.correct-workstate-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.correct-workstate-button.nav {
  flex-wrap: nowrap;
}
.correct-workstate-button.nav svg {
  color: var(--troubadour-main);
}
.correct-workstate-button.nav .icon,
.correct-workstate-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.correct-workstate-button.nav .button-text {
  color: var(--workstate-waitval-dark);
  font-weight: bold;
}
.correct-workstate-button.nav:hover {
  text-decoration: underline;
}
.correct-workstate-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.correct-workstate-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.correct-workstate-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.correct-workstate-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.correct-workstate-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.correct-workstate-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.correct-workstate-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.correct-workstate-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.correct-workstate-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.correct-workstate-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.correct-workstate-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.correct-workstate-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.correct-workstate-button.nav[data-size="large"] .icon {
  height: 80px;
}
.correct-workstate-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.correct-workstate-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.correct-workstate-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.correct-workstate-button.nav[data-size="small"] {
  padding: 10px;
}
.correct-workstate-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.correct-workstate-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.correct-workstate-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.correct-workstate-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.correct-workstate-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.correct-workstate-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.correct-workstate-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.correct-workstate-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.teacher-start-validation {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.teacher-start-validation:focus {
  text-decoration: none;
}
.teacher-start-validation[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.teacher-start-validation .button-text {
  font-family: Sofia Pro, sans-serif;
}
.teacher-start-validation .button-text.ws-no-wrap {
  white-space: nowrap;
}
.teacher-start-validation:active,
.teacher-start-validation:hover {
  text-decoration: none;
  cursor: pointer;
}
.teacher-start-validation.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-start-validation.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--userchallenge-status-revision);
  border-radius: inherit;
  z-index: 10;
}
.teacher-start-validation.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.teacher-start-validation.legacy .button-text,
.teacher-start-validation.legacy .icon {
  z-index: 11;
}
.teacher-start-validation.legacy .button-text {
  color: var(--userchallenge-status-revision);
  font-weight: normal;
  z-index: 11;
}
.teacher-start-validation.legacy svg {
  color: var(--userchallenge-status-revision);
}
.teacher-start-validation.legacy:hover::before,
.teacher-start-validation.legacy.selected::before {
  background-color: var(--userchallenge-status-revision);
  border: 2px solid var(--userchallenge-status-revision);
}
.teacher-start-validation.legacy:hover .button-text,
.teacher-start-validation.legacy.selected .button-text {
  color: var(--default-bg);
}
.teacher-start-validation.legacy:hover img,
.teacher-start-validation.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.teacher-start-validation.legacy.disabled {
  pointer-events: none;
}
.teacher-start-validation.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.teacher-start-validation.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.teacher-start-validation.legacy.disabled .icon {
  opacity: 0.5;
}
.teacher-start-validation.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.teacher-start-validation.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.teacher-start-validation.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-start-validation.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.teacher-start-validation.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.teacher-start-validation.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.teacher-start-validation.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.teacher-start-validation.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.teacher-start-validation.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.teacher-start-validation.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.teacher-start-validation.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.teacher-start-validation.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.teacher-start-validation.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.teacher-start-validation.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.teacher-start-validation.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.teacher-start-validation.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.teacher-start-validation.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.teacher-start-validation.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.teacher-start-validation.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.teacher-start-validation.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.teacher-start-validation.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.teacher-start-validation.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.teacher-start-validation.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.teacher-start-validation.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.teacher-start-validation.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.teacher-start-validation.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.teacher-start-validation.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-start-validation.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--userchallenge-status-revision);
  border: 2px solid var(--userchallenge-status-revision);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.teacher-start-validation.pill .button-text,
.teacher-start-validation.pill .icon {
  z-index: 11;
}
.teacher-start-validation.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.teacher-start-validation.pill svg {
  color: var(--default-bg);
}
.teacher-start-validation.pill:hover::before,
.teacher-start-validation.pill.selected::before {
  filter: brightness(1.3);
}
.teacher-start-validation.pill:hover img,
.teacher-start-validation.pill.selected img {
  transform: scale(0.95, 0.95);
}
.teacher-start-validation.pill.no-shadow::before {
  box-shadow: none;
}
.teacher-start-validation.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.teacher-start-validation.pill.has-border:hover::before,
.teacher-start-validation.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.teacher-start-validation.pill.alt-hover:hover::before,
.teacher-start-validation.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.teacher-start-validation.pill.alt-hover:hover .icon,
.teacher-start-validation.pill.alt-hover.selected .icon,
.teacher-start-validation.pill.alt-hover:hover .button-text,
.teacher-start-validation.pill.alt-hover.selected .button-text {
  color: var(--userchallenge-status-revision);
}
.teacher-start-validation.pill.alt-hover:hover .icon,
.teacher-start-validation.pill.alt-hover.selected .icon {
  background-color: var(--userchallenge-status-revision);
}
.teacher-start-validation.pill.disabled,
.teacher-start-validation.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.teacher-start-validation.pill.disabled::before,
.teacher-start-validation.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.teacher-start-validation.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.teacher-start-validation.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.teacher-start-validation.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.teacher-start-validation.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-start-validation.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.teacher-start-validation.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.teacher-start-validation.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.teacher-start-validation.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.teacher-start-validation.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.teacher-start-validation.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.teacher-start-validation.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.teacher-start-validation.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.teacher-start-validation.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.teacher-start-validation.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.teacher-start-validation.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.teacher-start-validation.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.teacher-start-validation.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.teacher-start-validation.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.teacher-start-validation.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.teacher-start-validation.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.teacher-start-validation.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.teacher-start-validation.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.teacher-start-validation.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.teacher-start-validation.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.teacher-start-validation.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.teacher-start-validation.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.teacher-start-validation.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.teacher-start-validation.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.teacher-start-validation.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.teacher-start-validation.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.teacher-start-validation.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.teacher-start-validation.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.teacher-start-validation.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.teacher-start-validation.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.teacher-start-validation.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.teacher-start-validation.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.teacher-start-validation.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.teacher-start-validation.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.teacher-start-validation.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.teacher-start-validation.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.teacher-start-validation.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.teacher-start-validation.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.teacher-start-validation.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.teacher-start-validation.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.teacher-start-validation.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.teacher-start-validation.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.teacher-start-validation.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-start-validation.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.teacher-start-validation.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-start-validation.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.teacher-start-validation.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.teacher-start-validation.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.teacher-start-validation.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.teacher-start-validation.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.teacher-start-validation.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.teacher-start-validation.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-start-validation.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.teacher-start-validation.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-start-validation.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.teacher-start-validation.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.teacher-start-validation.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.teacher-start-validation.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.teacher-start-validation.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.teacher-start-validation.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.teacher-start-validation.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-start-validation.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.teacher-start-validation.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-start-validation.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.teacher-start-validation.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.teacher-start-validation.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.teacher-start-validation.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.teacher-start-validation.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.teacher-start-validation.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .teacher-start-validation.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .teacher-start-validation.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .teacher-start-validation.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .teacher-start-validation.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .teacher-start-validation.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .teacher-start-validation.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .teacher-start-validation.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .teacher-start-validation.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .teacher-start-validation.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .teacher-start-validation.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .teacher-start-validation.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .teacher-start-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.teacher-start-validation.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-start-validation.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--userchallenge-status-revision);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.teacher-start-validation.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.teacher-start-validation.pill-alt:hover::before,
.teacher-start-validation.pill-alt.selected::before {
  background: var(--button-border);
}
.teacher-start-validation.pill-alt:hover .button-text,
.teacher-start-validation.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.teacher-start-validation.pill-alt.disabled,
.teacher-start-validation.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.teacher-start-validation.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-start-validation.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.teacher-start-validation.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.teacher-start-validation.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.teacher-start-validation.round .icon,
.teacher-start-validation.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teacher-start-validation.round:hover,
.teacher-start-validation.round.selected {
  opacity: 1;
}
.teacher-start-validation.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.teacher-start-validation.round.disabled {
  pointer-events: none;
}
.teacher-start-validation.round.disabled .icon {
  filter: saturate(0);
}
.teacher-start-validation.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.teacher-start-validation.round[data-size="regular"].active {
  opacity: 1;
}
.teacher-start-validation.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.teacher-start-validation.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.teacher-start-validation.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.teacher-start-validation.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.teacher-start-validation.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.teacher-start-validation.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.teacher-start-validation.nav {
  flex-wrap: nowrap;
}
.teacher-start-validation.nav svg {
  color: var(--troubadour-main);
}
.teacher-start-validation.nav .icon,
.teacher-start-validation.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teacher-start-validation.nav .button-text {
  color: var(--userchallenge-status-revision);
  font-weight: bold;
}
.teacher-start-validation.nav:hover {
  text-decoration: underline;
}
.teacher-start-validation.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.teacher-start-validation.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.teacher-start-validation.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.teacher-start-validation.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.teacher-start-validation.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.teacher-start-validation.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.teacher-start-validation.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.teacher-start-validation.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.teacher-start-validation.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.teacher-start-validation.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.teacher-start-validation.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.teacher-start-validation.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.teacher-start-validation.nav[data-size="large"] .icon {
  height: 80px;
}
.teacher-start-validation.nav[data-size="regular"] {
  padding: 20px 31px;
}
.teacher-start-validation.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.teacher-start-validation.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.teacher-start-validation.nav[data-size="small"] {
  padding: 10px;
}
.teacher-start-validation.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.teacher-start-validation.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.teacher-start-validation.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.teacher-start-validation.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.teacher-start-validation.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.teacher-start-validation.nav[data-size="mini"] {
  padding: 4px 12px;
}
.teacher-start-validation.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.teacher-start-validation.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.teacher-end-validation {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.teacher-end-validation:focus {
  text-decoration: none;
}
.teacher-end-validation[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.teacher-end-validation .button-text {
  font-family: Sofia Pro, sans-serif;
}
.teacher-end-validation .button-text.ws-no-wrap {
  white-space: nowrap;
}
.teacher-end-validation:active,
.teacher-end-validation:hover {
  text-decoration: none;
  cursor: pointer;
}
.teacher-end-validation.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-end-validation.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid red;
  border-radius: inherit;
  z-index: 10;
}
.teacher-end-validation.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.teacher-end-validation.legacy .button-text,
.teacher-end-validation.legacy .icon {
  z-index: 11;
}
.teacher-end-validation.legacy .button-text {
  color: red;
  font-weight: normal;
  z-index: 11;
}
.teacher-end-validation.legacy svg {
  color: red;
}
.teacher-end-validation.legacy:hover::before,
.teacher-end-validation.legacy.selected::before {
  background-color: red;
  border: 2px solid red;
}
.teacher-end-validation.legacy:hover .button-text,
.teacher-end-validation.legacy.selected .button-text {
  color: var(--default-bg);
}
.teacher-end-validation.legacy:hover img,
.teacher-end-validation.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.teacher-end-validation.legacy.disabled {
  pointer-events: none;
}
.teacher-end-validation.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.teacher-end-validation.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.teacher-end-validation.legacy.disabled .icon {
  opacity: 0.5;
}
.teacher-end-validation.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.teacher-end-validation.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.teacher-end-validation.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-end-validation.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.teacher-end-validation.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.teacher-end-validation.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.teacher-end-validation.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.teacher-end-validation.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.teacher-end-validation.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.teacher-end-validation.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.teacher-end-validation.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.teacher-end-validation.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.teacher-end-validation.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.teacher-end-validation.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.teacher-end-validation.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.teacher-end-validation.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.teacher-end-validation.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.teacher-end-validation.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.teacher-end-validation.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.teacher-end-validation.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.teacher-end-validation.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.teacher-end-validation.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.teacher-end-validation.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.teacher-end-validation.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.teacher-end-validation.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.teacher-end-validation.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.teacher-end-validation.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-end-validation.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: red;
  border: 2px solid red;
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.teacher-end-validation.pill .button-text,
.teacher-end-validation.pill .icon {
  z-index: 11;
}
.teacher-end-validation.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.teacher-end-validation.pill svg {
  color: var(--default-bg);
}
.teacher-end-validation.pill:hover::before,
.teacher-end-validation.pill.selected::before {
  filter: brightness(1.3);
}
.teacher-end-validation.pill:hover img,
.teacher-end-validation.pill.selected img {
  transform: scale(0.95, 0.95);
}
.teacher-end-validation.pill.no-shadow::before {
  box-shadow: none;
}
.teacher-end-validation.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.teacher-end-validation.pill.has-border:hover::before,
.teacher-end-validation.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.teacher-end-validation.pill.alt-hover:hover::before,
.teacher-end-validation.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.teacher-end-validation.pill.alt-hover:hover .icon,
.teacher-end-validation.pill.alt-hover.selected .icon,
.teacher-end-validation.pill.alt-hover:hover .button-text,
.teacher-end-validation.pill.alt-hover.selected .button-text {
  color: red;
}
.teacher-end-validation.pill.alt-hover:hover .icon,
.teacher-end-validation.pill.alt-hover.selected .icon {
  background-color: red;
}
.teacher-end-validation.pill.disabled,
.teacher-end-validation.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.teacher-end-validation.pill.disabled::before,
.teacher-end-validation.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.teacher-end-validation.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.teacher-end-validation.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.teacher-end-validation.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.teacher-end-validation.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-end-validation.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.teacher-end-validation.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.teacher-end-validation.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.teacher-end-validation.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.teacher-end-validation.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.teacher-end-validation.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.teacher-end-validation.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.teacher-end-validation.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.teacher-end-validation.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.teacher-end-validation.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.teacher-end-validation.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.teacher-end-validation.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.teacher-end-validation.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.teacher-end-validation.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.teacher-end-validation.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.teacher-end-validation.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.teacher-end-validation.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.teacher-end-validation.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.teacher-end-validation.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.teacher-end-validation.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.teacher-end-validation.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.teacher-end-validation.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.teacher-end-validation.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.teacher-end-validation.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.teacher-end-validation.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.teacher-end-validation.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.teacher-end-validation.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.teacher-end-validation.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.teacher-end-validation.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.teacher-end-validation.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.teacher-end-validation.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.teacher-end-validation.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.teacher-end-validation.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.teacher-end-validation.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.teacher-end-validation.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.teacher-end-validation.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.teacher-end-validation.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.teacher-end-validation.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.teacher-end-validation.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.teacher-end-validation.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.teacher-end-validation.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.teacher-end-validation.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.teacher-end-validation.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-end-validation.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.teacher-end-validation.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-end-validation.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.teacher-end-validation.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.teacher-end-validation.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.teacher-end-validation.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.teacher-end-validation.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.teacher-end-validation.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.teacher-end-validation.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-end-validation.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.teacher-end-validation.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-end-validation.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.teacher-end-validation.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.teacher-end-validation.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.teacher-end-validation.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.teacher-end-validation.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.teacher-end-validation.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.teacher-end-validation.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-end-validation.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.teacher-end-validation.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-end-validation.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.teacher-end-validation.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.teacher-end-validation.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.teacher-end-validation.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.teacher-end-validation.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.teacher-end-validation.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .teacher-end-validation.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .teacher-end-validation.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .teacher-end-validation.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .teacher-end-validation.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .teacher-end-validation.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .teacher-end-validation.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .teacher-end-validation.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .teacher-end-validation.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .teacher-end-validation.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .teacher-end-validation.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .teacher-end-validation.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .teacher-end-validation.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.teacher-end-validation.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-end-validation.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: red;
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.teacher-end-validation.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.teacher-end-validation.pill-alt:hover::before,
.teacher-end-validation.pill-alt.selected::before {
  background: var(--button-border);
}
.teacher-end-validation.pill-alt:hover .button-text,
.teacher-end-validation.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.teacher-end-validation.pill-alt.disabled,
.teacher-end-validation.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.teacher-end-validation.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-end-validation.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.teacher-end-validation.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.teacher-end-validation.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.teacher-end-validation.round .icon,
.teacher-end-validation.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teacher-end-validation.round:hover,
.teacher-end-validation.round.selected {
  opacity: 1;
}
.teacher-end-validation.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.teacher-end-validation.round.disabled {
  pointer-events: none;
}
.teacher-end-validation.round.disabled .icon {
  filter: saturate(0);
}
.teacher-end-validation.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.teacher-end-validation.round[data-size="regular"].active {
  opacity: 1;
}
.teacher-end-validation.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.teacher-end-validation.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.teacher-end-validation.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.teacher-end-validation.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.teacher-end-validation.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.teacher-end-validation.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.teacher-end-validation.nav {
  flex-wrap: nowrap;
}
.teacher-end-validation.nav svg {
  color: var(--troubadour-main);
}
.teacher-end-validation.nav .icon,
.teacher-end-validation.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teacher-end-validation.nav .button-text {
  color: red;
  font-weight: bold;
}
.teacher-end-validation.nav:hover {
  text-decoration: underline;
}
.teacher-end-validation.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.teacher-end-validation.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.teacher-end-validation.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.teacher-end-validation.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.teacher-end-validation.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.teacher-end-validation.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.teacher-end-validation.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.teacher-end-validation.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.teacher-end-validation.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.teacher-end-validation.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.teacher-end-validation.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.teacher-end-validation.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.teacher-end-validation.nav[data-size="large"] .icon {
  height: 80px;
}
.teacher-end-validation.nav[data-size="regular"] {
  padding: 20px 31px;
}
.teacher-end-validation.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.teacher-end-validation.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.teacher-end-validation.nav[data-size="small"] {
  padding: 10px;
}
.teacher-end-validation.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.teacher-end-validation.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.teacher-end-validation.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.teacher-end-validation.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.teacher-end-validation.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.teacher-end-validation.nav[data-size="mini"] {
  padding: 4px 12px;
}
.teacher-end-validation.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.teacher-end-validation.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-form-button {
  opacity: 0.8 !important;
}
.challenge-form-button::before {
  filter: brightness(1) !important;
  border-color: var(--troubadour-main-6) !important;
}
.challenge-form-button .button-text {
  color: var(--troubadour-main-6) !important;
}
.challenge-form-button:hover,
.challenge-form-button.selected {
  opacity: 1 !important;
}
.challenge-form-button:hover::before,
.challenge-form-button.selected::before {
  filter: brightness(1) !important;
  background-color: var(--troubadour-main-6) !important;
  border-color: var(--troubadour-main-6) !important;
}
.challenge-form-button:hover .button-text,
.challenge-form-button.selected .button-text {
  color: var(--default-color-2) !important;
}
.group-selection-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.group-selection-btn:focus {
  text-decoration: none;
}
.group-selection-btn[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.group-selection-btn .button-text {
  font-family: Sofia Pro, sans-serif;
}
.group-selection-btn .button-text.ws-no-wrap {
  white-space: nowrap;
}
.group-selection-btn:active,
.group-selection-btn:hover {
  text-decoration: none;
  cursor: pointer;
}
.group-selection-btn.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.group-selection-btn.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--challenge-creation-assign);
  border-radius: inherit;
  z-index: 10;
}
.group-selection-btn.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.group-selection-btn.legacy .button-text,
.group-selection-btn.legacy .icon {
  z-index: 11;
}
.group-selection-btn.legacy .button-text {
  color: var(--challenge-creation-assign);
  font-weight: normal;
  z-index: 11;
}
.group-selection-btn.legacy svg {
  color: var(--challenge-creation-assign);
}
.group-selection-btn.legacy:hover::before,
.group-selection-btn.legacy.selected::before {
  background-color: var(--challenge-creation-assign);
  border: 2px solid var(--challenge-creation-assign);
}
.group-selection-btn.legacy:hover .button-text,
.group-selection-btn.legacy.selected .button-text {
  color: var(--default-color-2);
}
.group-selection-btn.legacy:hover img,
.group-selection-btn.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.group-selection-btn.legacy.disabled {
  pointer-events: none;
}
.group-selection-btn.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.group-selection-btn.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.group-selection-btn.legacy.disabled .icon {
  opacity: 0.5;
}
.group-selection-btn.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.group-selection-btn.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.group-selection-btn.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.group-selection-btn.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.group-selection-btn.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.group-selection-btn.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.group-selection-btn.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.group-selection-btn.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.group-selection-btn.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.group-selection-btn.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.group-selection-btn.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.group-selection-btn.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.group-selection-btn.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.group-selection-btn.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.group-selection-btn.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.group-selection-btn.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.group-selection-btn.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.group-selection-btn.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.group-selection-btn.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.group-selection-btn.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.group-selection-btn.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.group-selection-btn.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.group-selection-btn.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.group-selection-btn.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.group-selection-btn.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.group-selection-btn.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.group-selection-btn.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.group-selection-btn.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-creation-assign);
  border: 2px solid var(--challenge-creation-assign);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.group-selection-btn.pill .button-text,
.group-selection-btn.pill .icon {
  z-index: 11;
}
.group-selection-btn.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.group-selection-btn.pill svg {
  color: var(--default-color-2);
}
.group-selection-btn.pill:hover::before,
.group-selection-btn.pill.selected::before {
  filter: brightness(1.3);
}
.group-selection-btn.pill:hover img,
.group-selection-btn.pill.selected img {
  transform: scale(0.95, 0.95);
}
.group-selection-btn.pill.no-shadow::before {
  box-shadow: none;
}
.group-selection-btn.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.group-selection-btn.pill.has-border:hover::before,
.group-selection-btn.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.group-selection-btn.pill.alt-hover:hover::before,
.group-selection-btn.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.group-selection-btn.pill.alt-hover:hover .icon,
.group-selection-btn.pill.alt-hover.selected .icon,
.group-selection-btn.pill.alt-hover:hover .button-text,
.group-selection-btn.pill.alt-hover.selected .button-text {
  color: var(--challenge-creation-assign);
}
.group-selection-btn.pill.alt-hover:hover .icon,
.group-selection-btn.pill.alt-hover.selected .icon {
  background-color: var(--challenge-creation-assign);
}
.group-selection-btn.pill.disabled,
.group-selection-btn.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.group-selection-btn.pill.disabled::before,
.group-selection-btn.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.group-selection-btn.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.group-selection-btn.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.group-selection-btn.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.group-selection-btn.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.group-selection-btn.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.group-selection-btn.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.group-selection-btn.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.group-selection-btn.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.group-selection-btn.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.group-selection-btn.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.group-selection-btn.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.group-selection-btn.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.group-selection-btn.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.group-selection-btn.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.group-selection-btn.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.group-selection-btn.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.group-selection-btn.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.group-selection-btn.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.group-selection-btn.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.group-selection-btn.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.group-selection-btn.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.group-selection-btn.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.group-selection-btn.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.group-selection-btn.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.group-selection-btn.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.group-selection-btn.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.group-selection-btn.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.group-selection-btn.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.group-selection-btn.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.group-selection-btn.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.group-selection-btn.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.group-selection-btn.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.group-selection-btn.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.group-selection-btn.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.group-selection-btn.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.group-selection-btn.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.group-selection-btn.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.group-selection-btn.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.group-selection-btn.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.group-selection-btn.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.group-selection-btn.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.group-selection-btn.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.group-selection-btn.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.group-selection-btn.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.group-selection-btn.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.group-selection-btn.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.group-selection-btn.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.group-selection-btn.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.group-selection-btn.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.group-selection-btn.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.group-selection-btn.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.group-selection-btn.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.group-selection-btn.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.group-selection-btn.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.group-selection-btn.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.group-selection-btn.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.group-selection-btn.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.group-selection-btn.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.group-selection-btn.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.group-selection-btn.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.group-selection-btn.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.group-selection-btn.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.group-selection-btn.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.group-selection-btn.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.group-selection-btn.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.group-selection-btn.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.group-selection-btn.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.group-selection-btn.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.group-selection-btn.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.group-selection-btn.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.group-selection-btn.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.group-selection-btn.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.group-selection-btn.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.group-selection-btn.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.group-selection-btn.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.group-selection-btn.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.group-selection-btn.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.group-selection-btn.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.group-selection-btn.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.group-selection-btn.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.group-selection-btn.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.group-selection-btn.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.group-selection-btn.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.group-selection-btn.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.group-selection-btn.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .group-selection-btn.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .group-selection-btn.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .group-selection-btn.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .group-selection-btn.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .group-selection-btn.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .group-selection-btn.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .group-selection-btn.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .group-selection-btn.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .group-selection-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .group-selection-btn.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .group-selection-btn.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .group-selection-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.group-selection-btn.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.group-selection-btn.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-creation-assign);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.group-selection-btn.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.group-selection-btn.pill-alt:hover::before,
.group-selection-btn.pill-alt.selected::before {
  background: var(--button-border);
}
.group-selection-btn.pill-alt:hover .button-text,
.group-selection-btn.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.group-selection-btn.pill-alt.disabled,
.group-selection-btn.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.group-selection-btn.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.group-selection-btn.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.group-selection-btn.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.group-selection-btn.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.group-selection-btn.round .icon,
.group-selection-btn.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.group-selection-btn.round:hover,
.group-selection-btn.round.selected {
  opacity: 1;
}
.group-selection-btn.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.group-selection-btn.round.disabled {
  pointer-events: none;
}
.group-selection-btn.round.disabled .icon {
  filter: saturate(0);
}
.group-selection-btn.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.group-selection-btn.round[data-size="regular"].active {
  opacity: 1;
}
.group-selection-btn.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.group-selection-btn.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.group-selection-btn.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.group-selection-btn.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.group-selection-btn.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.group-selection-btn.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.group-selection-btn.nav {
  flex-wrap: nowrap;
}
.group-selection-btn.nav svg {
  color: var(--troubadour-main);
}
.group-selection-btn.nav .icon,
.group-selection-btn.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.group-selection-btn.nav .button-text {
  color: var(--challenge-creation-assign);
  font-weight: bold;
}
.group-selection-btn.nav:hover {
  text-decoration: underline;
}
.group-selection-btn.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.group-selection-btn.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.group-selection-btn.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.group-selection-btn.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.group-selection-btn.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.group-selection-btn.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.group-selection-btn.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.group-selection-btn.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.group-selection-btn.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.group-selection-btn.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.group-selection-btn.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.group-selection-btn.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.group-selection-btn.nav[data-size="large"] .icon {
  height: 80px;
}
.group-selection-btn.nav[data-size="regular"] {
  padding: 20px 31px;
}
.group-selection-btn.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.group-selection-btn.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.group-selection-btn.nav[data-size="small"] {
  padding: 10px;
}
.group-selection-btn.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.group-selection-btn.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.group-selection-btn.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.group-selection-btn.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.group-selection-btn.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.group-selection-btn.nav[data-size="mini"] {
  padding: 4px 12px;
}
.group-selection-btn.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.group-selection-btn.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.group-selection-btn .fa {
  z-index: 11;
}
.group-selection-btn .fa path {
  fill: var(--default-color-2) !important;
}
.confirm-action-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.confirm-action-button:focus {
  text-decoration: none;
}
.confirm-action-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.confirm-action-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.confirm-action-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.confirm-action-button:active,
.confirm-action-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.confirm-action-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.confirm-action-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--assisted-action-button);
  border-radius: inherit;
  z-index: 10;
}
.confirm-action-button.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.confirm-action-button.legacy .button-text,
.confirm-action-button.legacy .icon {
  z-index: 11;
}
.confirm-action-button.legacy .button-text {
  color: var(--assisted-action-button);
  font-weight: normal;
  z-index: 11;
}
.confirm-action-button.legacy svg {
  color: var(--assisted-action-button);
}
.confirm-action-button.legacy:hover::before,
.confirm-action-button.legacy.selected::before {
  background-color: var(--assisted-action-button);
  border: 2px solid var(--assisted-action-button);
}
.confirm-action-button.legacy:hover .button-text,
.confirm-action-button.legacy.selected .button-text {
  color: var(--default-bg);
}
.confirm-action-button.legacy:hover img,
.confirm-action-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.confirm-action-button.legacy.disabled {
  pointer-events: none;
}
.confirm-action-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.confirm-action-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.confirm-action-button.legacy.disabled .icon {
  opacity: 0.5;
}
.confirm-action-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.confirm-action-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.confirm-action-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.confirm-action-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.confirm-action-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.confirm-action-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.confirm-action-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.confirm-action-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.confirm-action-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.confirm-action-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.confirm-action-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.confirm-action-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.confirm-action-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.confirm-action-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.confirm-action-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.confirm-action-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.confirm-action-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.confirm-action-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.confirm-action-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.confirm-action-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.confirm-action-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.confirm-action-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.confirm-action-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.confirm-action-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.confirm-action-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.confirm-action-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.confirm-action-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.confirm-action-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--assisted-action-button);
  border: 2px solid var(--assisted-action-button);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.confirm-action-button.pill .button-text,
.confirm-action-button.pill .icon {
  z-index: 11;
}
.confirm-action-button.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.confirm-action-button.pill svg {
  color: var(--default-bg);
}
.confirm-action-button.pill:hover::before,
.confirm-action-button.pill.selected::before {
  filter: brightness(1.3);
}
.confirm-action-button.pill:hover img,
.confirm-action-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.confirm-action-button.pill.no-shadow::before {
  box-shadow: none;
}
.confirm-action-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.confirm-action-button.pill.has-border:hover::before,
.confirm-action-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.confirm-action-button.pill.alt-hover:hover::before,
.confirm-action-button.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.confirm-action-button.pill.alt-hover:hover .icon,
.confirm-action-button.pill.alt-hover.selected .icon,
.confirm-action-button.pill.alt-hover:hover .button-text,
.confirm-action-button.pill.alt-hover.selected .button-text {
  color: var(--assisted-action-button);
}
.confirm-action-button.pill.alt-hover:hover .icon,
.confirm-action-button.pill.alt-hover.selected .icon {
  background-color: var(--assisted-action-button);
}
.confirm-action-button.pill.disabled,
.confirm-action-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.confirm-action-button.pill.disabled::before,
.confirm-action-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.confirm-action-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.confirm-action-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.confirm-action-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.confirm-action-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.confirm-action-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.confirm-action-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.confirm-action-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.confirm-action-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.confirm-action-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.confirm-action-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.confirm-action-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.confirm-action-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.confirm-action-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.confirm-action-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.confirm-action-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.confirm-action-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.confirm-action-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.confirm-action-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.confirm-action-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.confirm-action-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.confirm-action-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.confirm-action-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.confirm-action-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.confirm-action-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.confirm-action-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.confirm-action-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.confirm-action-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.confirm-action-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.confirm-action-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.confirm-action-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.confirm-action-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.confirm-action-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.confirm-action-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.confirm-action-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.confirm-action-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.confirm-action-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.confirm-action-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.confirm-action-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.confirm-action-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.confirm-action-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.confirm-action-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.confirm-action-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.confirm-action-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.confirm-action-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.confirm-action-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.confirm-action-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.confirm-action-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.confirm-action-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.confirm-action-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.confirm-action-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.confirm-action-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.confirm-action-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.confirm-action-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.confirm-action-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.confirm-action-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.confirm-action-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.confirm-action-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.confirm-action-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.confirm-action-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.confirm-action-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.confirm-action-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.confirm-action-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.confirm-action-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.confirm-action-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.confirm-action-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.confirm-action-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.confirm-action-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.confirm-action-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.confirm-action-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.confirm-action-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.confirm-action-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.confirm-action-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.confirm-action-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.confirm-action-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.confirm-action-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.confirm-action-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.confirm-action-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.confirm-action-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.confirm-action-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.confirm-action-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.confirm-action-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.confirm-action-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.confirm-action-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.confirm-action-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.confirm-action-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .confirm-action-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .confirm-action-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .confirm-action-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .confirm-action-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .confirm-action-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .confirm-action-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .confirm-action-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .confirm-action-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .confirm-action-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .confirm-action-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .confirm-action-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .confirm-action-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.confirm-action-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.confirm-action-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--assisted-action-button);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.confirm-action-button.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.confirm-action-button.pill-alt:hover::before,
.confirm-action-button.pill-alt.selected::before {
  background: var(--button-border);
}
.confirm-action-button.pill-alt:hover .button-text,
.confirm-action-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.confirm-action-button.pill-alt.disabled,
.confirm-action-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.confirm-action-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.confirm-action-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.confirm-action-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.confirm-action-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.confirm-action-button.round .icon,
.confirm-action-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.confirm-action-button.round:hover,
.confirm-action-button.round.selected {
  opacity: 1;
}
.confirm-action-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.confirm-action-button.round.disabled {
  pointer-events: none;
}
.confirm-action-button.round.disabled .icon {
  filter: saturate(0);
}
.confirm-action-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.confirm-action-button.round[data-size="regular"].active {
  opacity: 1;
}
.confirm-action-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.confirm-action-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.confirm-action-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.confirm-action-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.confirm-action-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.confirm-action-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.confirm-action-button.nav {
  flex-wrap: nowrap;
}
.confirm-action-button.nav svg {
  color: var(--troubadour-main);
}
.confirm-action-button.nav .icon,
.confirm-action-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.confirm-action-button.nav .button-text {
  color: var(--assisted-action-button);
  font-weight: bold;
}
.confirm-action-button.nav:hover {
  text-decoration: underline;
}
.confirm-action-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.confirm-action-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.confirm-action-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.confirm-action-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.confirm-action-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.confirm-action-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.confirm-action-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.confirm-action-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.confirm-action-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.confirm-action-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.confirm-action-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.confirm-action-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.confirm-action-button.nav[data-size="large"] .icon {
  height: 80px;
}
.confirm-action-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.confirm-action-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.confirm-action-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.confirm-action-button.nav[data-size="small"] {
  padding: 10px;
}
.confirm-action-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.confirm-action-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.confirm-action-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.confirm-action-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.confirm-action-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.confirm-action-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.confirm-action-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.confirm-action-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.correction-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.correction-btn:focus {
  text-decoration: none;
}
.correction-btn[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.correction-btn .button-text {
  font-family: Sofia Pro, sans-serif;
}
.correction-btn .button-text.ws-no-wrap {
  white-space: nowrap;
}
.correction-btn:active,
.correction-btn:hover {
  text-decoration: none;
  cursor: pointer;
}
.correction-btn.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correction-btn.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-3);
  border: 2px solid var(--student-challenges-color-11);
  border-radius: inherit;
  z-index: 10;
}
.correction-btn.legacy.has-shadow::before {
  border: 2px solid var(--default-color-3);
  box-shadow: var(--dropshadow);
}
.correction-btn.legacy .button-text,
.correction-btn.legacy .icon {
  z-index: 11;
}
.correction-btn.legacy .button-text {
  color: var(--student-challenges-color-11);
  font-weight: normal;
  z-index: 11;
}
.correction-btn.legacy svg {
  color: var(--student-challenges-color-11);
}
.correction-btn.legacy:hover::before,
.correction-btn.legacy.selected::before {
  background-color: var(--student-challenges-color-11);
  border: 2px solid var(--student-challenges-color-11);
}
.correction-btn.legacy:hover .button-text,
.correction-btn.legacy.selected .button-text {
  color: var(--default-color-3);
}
.correction-btn.legacy:hover img,
.correction-btn.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.correction-btn.legacy.disabled {
  pointer-events: none;
}
.correction-btn.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.correction-btn.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.correction-btn.legacy.disabled .icon {
  opacity: 0.5;
}
.correction-btn.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.correction-btn.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.correction-btn.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correction-btn.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.correction-btn.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.correction-btn.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.correction-btn.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.correction-btn.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.correction-btn.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.correction-btn.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.correction-btn.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.correction-btn.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.correction-btn.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.correction-btn.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.correction-btn.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.correction-btn.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.correction-btn.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.correction-btn.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.correction-btn.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.correction-btn.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.correction-btn.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.correction-btn.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.correction-btn.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.correction-btn.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.correction-btn.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.correction-btn.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.correction-btn.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correction-btn.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-11);
  border: 2px solid var(--student-challenges-color-11);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.correction-btn.pill .button-text,
.correction-btn.pill .icon {
  z-index: 11;
}
.correction-btn.pill .button-text {
  color: var(--default-color-3);
  font-weight: normal;
  z-index: 11;
}
.correction-btn.pill svg {
  color: var(--default-color-3);
}
.correction-btn.pill:hover::before,
.correction-btn.pill.selected::before {
  filter: brightness(1.3);
}
.correction-btn.pill:hover img,
.correction-btn.pill.selected img {
  transform: scale(0.95, 0.95);
}
.correction-btn.pill.no-shadow::before {
  box-shadow: none;
}
.correction-btn.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.correction-btn.pill.has-border:hover::before,
.correction-btn.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.correction-btn.pill.alt-hover:hover::before,
.correction-btn.pill.alt-hover.selected::before {
  background: var(--default-color-3);
  border: 2px solid var(--default-color-3);
  filter: brightness(1);
}
.correction-btn.pill.alt-hover:hover .icon,
.correction-btn.pill.alt-hover.selected .icon,
.correction-btn.pill.alt-hover:hover .button-text,
.correction-btn.pill.alt-hover.selected .button-text {
  color: var(--student-challenges-color-11);
}
.correction-btn.pill.alt-hover:hover .icon,
.correction-btn.pill.alt-hover.selected .icon {
  background-color: var(--student-challenges-color-11);
}
.correction-btn.pill.disabled,
.correction-btn.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.correction-btn.pill.disabled::before,
.correction-btn.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.correction-btn.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.correction-btn.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.correction-btn.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.correction-btn.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correction-btn.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.correction-btn.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.correction-btn.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.correction-btn.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.correction-btn.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.correction-btn.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.correction-btn.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.correction-btn.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.correction-btn.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.correction-btn.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.correction-btn.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.correction-btn.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.correction-btn.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.correction-btn.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.correction-btn.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.correction-btn.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.correction-btn.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.correction-btn.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.correction-btn.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.correction-btn.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.correction-btn.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.correction-btn.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.correction-btn.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.correction-btn.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.correction-btn.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.correction-btn.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.correction-btn.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.correction-btn.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.correction-btn.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.correction-btn.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.correction-btn.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.correction-btn.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.correction-btn.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.correction-btn.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.correction-btn.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.correction-btn.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.correction-btn.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.correction-btn.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.correction-btn.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.correction-btn.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.correction-btn.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.correction-btn.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.correction-btn.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.correction-btn.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.correction-btn.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.correction-btn.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.correction-btn.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.correction-btn.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.correction-btn.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.correction-btn.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.correction-btn.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.correction-btn.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.correction-btn.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.correction-btn.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.correction-btn.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.correction-btn.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.correction-btn.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.correction-btn.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.correction-btn.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.correction-btn.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.correction-btn.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.correction-btn.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.correction-btn.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.correction-btn.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.correction-btn.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.correction-btn.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.correction-btn.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.correction-btn.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.correction-btn.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.correction-btn.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.correction-btn.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.correction-btn.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.correction-btn.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.correction-btn.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.correction-btn.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.correction-btn.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.correction-btn.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.correction-btn.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.correction-btn.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.correction-btn.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.correction-btn.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .correction-btn.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .correction-btn.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .correction-btn.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .correction-btn.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .correction-btn.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .correction-btn.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .correction-btn.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .correction-btn.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .correction-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .correction-btn.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .correction-btn.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .correction-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.correction-btn.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correction-btn.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-11);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.correction-btn.pill-alt .button-text {
  color: var(--default-color-3);
  font-weight: normal;
  z-index: 11;
}
.correction-btn.pill-alt:hover::before,
.correction-btn.pill-alt.selected::before {
  background: var(--button-border);
}
.correction-btn.pill-alt:hover .button-text,
.correction-btn.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.correction-btn.pill-alt.disabled,
.correction-btn.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.correction-btn.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correction-btn.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.correction-btn.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.correction-btn.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.correction-btn.round .icon,
.correction-btn.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.correction-btn.round:hover,
.correction-btn.round.selected {
  opacity: 1;
}
.correction-btn.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.correction-btn.round.disabled {
  pointer-events: none;
}
.correction-btn.round.disabled .icon {
  filter: saturate(0);
}
.correction-btn.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.correction-btn.round[data-size="regular"].active {
  opacity: 1;
}
.correction-btn.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.correction-btn.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.correction-btn.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.correction-btn.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.correction-btn.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.correction-btn.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.correction-btn.nav {
  flex-wrap: nowrap;
}
.correction-btn.nav svg {
  color: var(--troubadour-main);
}
.correction-btn.nav .icon,
.correction-btn.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.correction-btn.nav .button-text {
  color: var(--student-challenges-color-11);
  font-weight: bold;
}
.correction-btn.nav:hover {
  text-decoration: underline;
}
.correction-btn.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.correction-btn.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.correction-btn.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.correction-btn.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.correction-btn.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.correction-btn.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.correction-btn.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.correction-btn.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.correction-btn.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.correction-btn.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.correction-btn.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.correction-btn.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.correction-btn.nav[data-size="large"] .icon {
  height: 80px;
}
.correction-btn.nav[data-size="regular"] {
  padding: 20px 31px;
}
.correction-btn.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.correction-btn.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.correction-btn.nav[data-size="small"] {
  padding: 10px;
}
.correction-btn.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.correction-btn.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.correction-btn.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.correction-btn.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.correction-btn.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.correction-btn.nav[data-size="mini"] {
  padding: 4px 12px;
}
.correction-btn.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.correction-btn.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.correction-btn-alt {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.correction-btn-alt:focus {
  text-decoration: none;
}
.correction-btn-alt[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.correction-btn-alt .button-text {
  font-family: Sofia Pro, sans-serif;
}
.correction-btn-alt .button-text.ws-no-wrap {
  white-space: nowrap;
}
.correction-btn-alt:active,
.correction-btn-alt:hover {
  text-decoration: none;
  cursor: pointer;
}
.correction-btn-alt.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correction-btn-alt.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-3);
  border: 2px solid var(--student-challenges-color-11);
  border-radius: inherit;
  z-index: 10;
}
.correction-btn-alt.legacy.has-shadow::before {
  border: 2px solid var(--default-color-3);
  box-shadow: var(--dropshadow);
}
.correction-btn-alt.legacy .button-text,
.correction-btn-alt.legacy .icon {
  z-index: 11;
}
.correction-btn-alt.legacy .button-text {
  color: var(--student-challenges-color-11);
  font-weight: normal;
  z-index: 11;
}
.correction-btn-alt.legacy svg {
  color: var(--student-challenges-color-11);
}
.correction-btn-alt.legacy:hover::before,
.correction-btn-alt.legacy.selected::before {
  background-color: var(--student-challenges-color-11);
  border: 2px solid var(--student-challenges-color-11);
}
.correction-btn-alt.legacy:hover .button-text,
.correction-btn-alt.legacy.selected .button-text {
  color: var(--default-color-3);
}
.correction-btn-alt.legacy:hover img,
.correction-btn-alt.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.correction-btn-alt.legacy.disabled {
  pointer-events: none;
}
.correction-btn-alt.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.correction-btn-alt.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.correction-btn-alt.legacy.disabled .icon {
  opacity: 0.5;
}
.correction-btn-alt.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.correction-btn-alt.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.correction-btn-alt.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correction-btn-alt.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.correction-btn-alt.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.correction-btn-alt.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.correction-btn-alt.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.correction-btn-alt.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.correction-btn-alt.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.correction-btn-alt.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.correction-btn-alt.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.correction-btn-alt.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.correction-btn-alt.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.correction-btn-alt.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.correction-btn-alt.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.correction-btn-alt.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.correction-btn-alt.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.correction-btn-alt.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.correction-btn-alt.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.correction-btn-alt.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.correction-btn-alt.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.correction-btn-alt.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.correction-btn-alt.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.correction-btn-alt.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.correction-btn-alt.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.correction-btn-alt.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.correction-btn-alt.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correction-btn-alt.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-11);
  border: 2px solid var(--student-challenges-color-11);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.correction-btn-alt.pill .button-text,
.correction-btn-alt.pill .icon {
  z-index: 11;
}
.correction-btn-alt.pill .button-text {
  color: var(--default-color-3);
  font-weight: normal;
  z-index: 11;
}
.correction-btn-alt.pill svg {
  color: var(--default-color-3);
}
.correction-btn-alt.pill:hover::before,
.correction-btn-alt.pill.selected::before {
  filter: brightness(1.3);
}
.correction-btn-alt.pill:hover img,
.correction-btn-alt.pill.selected img {
  transform: scale(0.95, 0.95);
}
.correction-btn-alt.pill.no-shadow::before {
  box-shadow: none;
}
.correction-btn-alt.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.correction-btn-alt.pill.has-border:hover::before,
.correction-btn-alt.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.correction-btn-alt.pill.alt-hover:hover::before,
.correction-btn-alt.pill.alt-hover.selected::before {
  background: var(--default-color-3);
  border: 2px solid var(--default-color-3);
  filter: brightness(1);
}
.correction-btn-alt.pill.alt-hover:hover .icon,
.correction-btn-alt.pill.alt-hover.selected .icon,
.correction-btn-alt.pill.alt-hover:hover .button-text,
.correction-btn-alt.pill.alt-hover.selected .button-text {
  color: var(--student-challenges-color-11);
}
.correction-btn-alt.pill.alt-hover:hover .icon,
.correction-btn-alt.pill.alt-hover.selected .icon {
  background-color: var(--student-challenges-color-11);
}
.correction-btn-alt.pill.disabled,
.correction-btn-alt.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.correction-btn-alt.pill.disabled::before,
.correction-btn-alt.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.correction-btn-alt.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.correction-btn-alt.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.correction-btn-alt.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.correction-btn-alt.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correction-btn-alt.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.correction-btn-alt.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.correction-btn-alt.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.correction-btn-alt.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.correction-btn-alt.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.correction-btn-alt.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.correction-btn-alt.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.correction-btn-alt.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.correction-btn-alt.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.correction-btn-alt.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.correction-btn-alt.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.correction-btn-alt.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.correction-btn-alt.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.correction-btn-alt.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.correction-btn-alt.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.correction-btn-alt.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.correction-btn-alt.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.correction-btn-alt.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.correction-btn-alt.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.correction-btn-alt.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.correction-btn-alt.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.correction-btn-alt.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.correction-btn-alt.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.correction-btn-alt.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.correction-btn-alt.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.correction-btn-alt.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.correction-btn-alt.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.correction-btn-alt.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.correction-btn-alt.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.correction-btn-alt.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.correction-btn-alt.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.correction-btn-alt.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.correction-btn-alt.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.correction-btn-alt.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.correction-btn-alt.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.correction-btn-alt.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.correction-btn-alt.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.correction-btn-alt.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.correction-btn-alt.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.correction-btn-alt.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.correction-btn-alt.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.correction-btn-alt.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.correction-btn-alt.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.correction-btn-alt.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.correction-btn-alt.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.correction-btn-alt.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.correction-btn-alt.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.correction-btn-alt.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.correction-btn-alt.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.correction-btn-alt.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.correction-btn-alt.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.correction-btn-alt.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.correction-btn-alt.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.correction-btn-alt.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.correction-btn-alt.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.correction-btn-alt.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.correction-btn-alt.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.correction-btn-alt.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.correction-btn-alt.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.correction-btn-alt.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.correction-btn-alt.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.correction-btn-alt.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.correction-btn-alt.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.correction-btn-alt.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.correction-btn-alt.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.correction-btn-alt.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.correction-btn-alt.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.correction-btn-alt.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.correction-btn-alt.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .correction-btn-alt.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .correction-btn-alt.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .correction-btn-alt.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .correction-btn-alt.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .correction-btn-alt.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .correction-btn-alt.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .correction-btn-alt.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .correction-btn-alt.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .correction-btn-alt.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .correction-btn-alt.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .correction-btn-alt.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .correction-btn-alt.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.correction-btn-alt.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.correction-btn-alt.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-11);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.correction-btn-alt.pill-alt .button-text {
  color: var(--default-color-3);
  font-weight: normal;
  z-index: 11;
}
.correction-btn-alt.pill-alt:hover::before,
.correction-btn-alt.pill-alt.selected::before {
  background: var(--button-border);
}
.correction-btn-alt.pill-alt:hover .button-text,
.correction-btn-alt.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.correction-btn-alt.pill-alt.disabled,
.correction-btn-alt.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.correction-btn-alt.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.correction-btn-alt.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.correction-btn-alt.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.correction-btn-alt.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.correction-btn-alt.round .icon,
.correction-btn-alt.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.correction-btn-alt.round:hover,
.correction-btn-alt.round.selected {
  opacity: 1;
}
.correction-btn-alt.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.correction-btn-alt.round.disabled {
  pointer-events: none;
}
.correction-btn-alt.round.disabled .icon {
  filter: saturate(0);
}
.correction-btn-alt.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.correction-btn-alt.round[data-size="regular"].active {
  opacity: 1;
}
.correction-btn-alt.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.correction-btn-alt.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.correction-btn-alt.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.correction-btn-alt.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.correction-btn-alt.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.correction-btn-alt.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.correction-btn-alt.nav {
  flex-wrap: nowrap;
}
.correction-btn-alt.nav svg {
  color: var(--troubadour-main);
}
.correction-btn-alt.nav .icon,
.correction-btn-alt.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.correction-btn-alt.nav .button-text {
  color: var(--student-challenges-color-11);
  font-weight: bold;
}
.correction-btn-alt.nav:hover {
  text-decoration: underline;
}
.correction-btn-alt.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.correction-btn-alt.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.correction-btn-alt.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.correction-btn-alt.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.correction-btn-alt.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.correction-btn-alt.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.correction-btn-alt.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.correction-btn-alt.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.correction-btn-alt.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.correction-btn-alt.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.correction-btn-alt.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.correction-btn-alt.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.correction-btn-alt.nav[data-size="large"] .icon {
  height: 80px;
}
.correction-btn-alt.nav[data-size="regular"] {
  padding: 20px 31px;
}
.correction-btn-alt.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.correction-btn-alt.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.correction-btn-alt.nav[data-size="small"] {
  padding: 10px;
}
.correction-btn-alt.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.correction-btn-alt.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.correction-btn-alt.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.correction-btn-alt.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.correction-btn-alt.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.correction-btn-alt.nav[data-size="mini"] {
  padding: 4px 12px;
}
.correction-btn-alt.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.correction-btn-alt.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.correction-btn-alt .icon {
  transform: scale(0.6);
}
.all-texts-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.all-texts-btn:focus {
  text-decoration: none;
}
.all-texts-btn[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.all-texts-btn .button-text {
  font-family: Sofia Pro, sans-serif;
}
.all-texts-btn .button-text.ws-no-wrap {
  white-space: nowrap;
}
.all-texts-btn:active,
.all-texts-btn:hover {
  text-decoration: none;
  cursor: pointer;
}
.all-texts-btn.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.all-texts-btn.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-3);
  border: 2px solid var(--tutorial-color-11);
  border-radius: inherit;
  z-index: 10;
}
.all-texts-btn.legacy.has-shadow::before {
  border: 2px solid var(--default-color-3);
  box-shadow: var(--dropshadow);
}
.all-texts-btn.legacy .button-text,
.all-texts-btn.legacy .icon {
  z-index: 11;
}
.all-texts-btn.legacy .button-text {
  color: var(--tutorial-color-11);
  font-weight: normal;
  z-index: 11;
}
.all-texts-btn.legacy svg {
  color: var(--tutorial-color-11);
}
.all-texts-btn.legacy:hover::before,
.all-texts-btn.legacy.selected::before {
  background-color: var(--tutorial-color-11);
  border: 2px solid var(--tutorial-color-11);
}
.all-texts-btn.legacy:hover .button-text,
.all-texts-btn.legacy.selected .button-text {
  color: var(--default-color-3);
}
.all-texts-btn.legacy:hover img,
.all-texts-btn.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.all-texts-btn.legacy.disabled {
  pointer-events: none;
}
.all-texts-btn.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.all-texts-btn.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.all-texts-btn.legacy.disabled .icon {
  opacity: 0.5;
}
.all-texts-btn.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.all-texts-btn.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.all-texts-btn.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.all-texts-btn.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.all-texts-btn.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.all-texts-btn.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.all-texts-btn.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.all-texts-btn.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.all-texts-btn.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.all-texts-btn.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.all-texts-btn.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.all-texts-btn.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.all-texts-btn.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.all-texts-btn.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.all-texts-btn.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.all-texts-btn.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.all-texts-btn.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.all-texts-btn.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.all-texts-btn.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.all-texts-btn.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.all-texts-btn.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.all-texts-btn.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.all-texts-btn.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.all-texts-btn.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.all-texts-btn.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.all-texts-btn.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.all-texts-btn.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.all-texts-btn.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--tutorial-color-11);
  border: 2px solid var(--tutorial-color-11);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.all-texts-btn.pill .button-text,
.all-texts-btn.pill .icon {
  z-index: 11;
}
.all-texts-btn.pill .button-text {
  color: var(--default-color-3);
  font-weight: normal;
  z-index: 11;
}
.all-texts-btn.pill svg {
  color: var(--default-color-3);
}
.all-texts-btn.pill:hover::before,
.all-texts-btn.pill.selected::before {
  filter: brightness(1.3);
}
.all-texts-btn.pill:hover img,
.all-texts-btn.pill.selected img {
  transform: scale(0.95, 0.95);
}
.all-texts-btn.pill.no-shadow::before {
  box-shadow: none;
}
.all-texts-btn.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.all-texts-btn.pill.has-border:hover::before,
.all-texts-btn.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.all-texts-btn.pill.alt-hover:hover::before,
.all-texts-btn.pill.alt-hover.selected::before {
  background: var(--default-color-3);
  border: 2px solid var(--default-color-3);
  filter: brightness(1);
}
.all-texts-btn.pill.alt-hover:hover .icon,
.all-texts-btn.pill.alt-hover.selected .icon,
.all-texts-btn.pill.alt-hover:hover .button-text,
.all-texts-btn.pill.alt-hover.selected .button-text {
  color: var(--tutorial-color-11);
}
.all-texts-btn.pill.alt-hover:hover .icon,
.all-texts-btn.pill.alt-hover.selected .icon {
  background-color: var(--tutorial-color-11);
}
.all-texts-btn.pill.disabled,
.all-texts-btn.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.all-texts-btn.pill.disabled::before,
.all-texts-btn.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.all-texts-btn.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.all-texts-btn.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.all-texts-btn.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.all-texts-btn.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.all-texts-btn.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.all-texts-btn.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.all-texts-btn.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.all-texts-btn.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.all-texts-btn.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.all-texts-btn.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.all-texts-btn.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.all-texts-btn.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.all-texts-btn.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.all-texts-btn.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.all-texts-btn.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.all-texts-btn.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.all-texts-btn.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.all-texts-btn.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.all-texts-btn.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.all-texts-btn.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.all-texts-btn.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.all-texts-btn.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.all-texts-btn.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.all-texts-btn.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.all-texts-btn.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.all-texts-btn.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.all-texts-btn.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.all-texts-btn.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.all-texts-btn.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.all-texts-btn.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.all-texts-btn.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.all-texts-btn.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.all-texts-btn.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.all-texts-btn.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.all-texts-btn.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.all-texts-btn.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.all-texts-btn.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.all-texts-btn.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.all-texts-btn.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.all-texts-btn.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.all-texts-btn.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.all-texts-btn.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.all-texts-btn.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.all-texts-btn.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.all-texts-btn.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.all-texts-btn.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.all-texts-btn.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.all-texts-btn.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.all-texts-btn.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.all-texts-btn.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.all-texts-btn.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.all-texts-btn.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.all-texts-btn.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.all-texts-btn.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.all-texts-btn.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.all-texts-btn.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.all-texts-btn.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.all-texts-btn.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.all-texts-btn.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.all-texts-btn.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.all-texts-btn.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.all-texts-btn.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.all-texts-btn.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.all-texts-btn.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.all-texts-btn.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.all-texts-btn.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.all-texts-btn.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.all-texts-btn.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.all-texts-btn.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.all-texts-btn.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.all-texts-btn.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.all-texts-btn.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.all-texts-btn.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.all-texts-btn.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.all-texts-btn.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.all-texts-btn.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.all-texts-btn.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.all-texts-btn.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.all-texts-btn.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.all-texts-btn.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.all-texts-btn.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.all-texts-btn.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.all-texts-btn.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.all-texts-btn.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.all-texts-btn.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .all-texts-btn.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .all-texts-btn.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .all-texts-btn.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .all-texts-btn.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .all-texts-btn.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .all-texts-btn.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .all-texts-btn.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .all-texts-btn.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .all-texts-btn.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .all-texts-btn.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .all-texts-btn.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .all-texts-btn.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.all-texts-btn.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.all-texts-btn.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--tutorial-color-11);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.all-texts-btn.pill-alt .button-text {
  color: var(--default-color-3);
  font-weight: normal;
  z-index: 11;
}
.all-texts-btn.pill-alt:hover::before,
.all-texts-btn.pill-alt.selected::before {
  background: var(--button-border);
}
.all-texts-btn.pill-alt:hover .button-text,
.all-texts-btn.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.all-texts-btn.pill-alt.disabled,
.all-texts-btn.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.all-texts-btn.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.all-texts-btn.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.all-texts-btn.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.all-texts-btn.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.all-texts-btn.round .icon,
.all-texts-btn.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.all-texts-btn.round:hover,
.all-texts-btn.round.selected {
  opacity: 1;
}
.all-texts-btn.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.all-texts-btn.round.disabled {
  pointer-events: none;
}
.all-texts-btn.round.disabled .icon {
  filter: saturate(0);
}
.all-texts-btn.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.all-texts-btn.round[data-size="regular"].active {
  opacity: 1;
}
.all-texts-btn.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.all-texts-btn.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.all-texts-btn.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.all-texts-btn.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.all-texts-btn.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.all-texts-btn.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.all-texts-btn.nav {
  flex-wrap: nowrap;
}
.all-texts-btn.nav svg {
  color: var(--troubadour-main);
}
.all-texts-btn.nav .icon,
.all-texts-btn.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.all-texts-btn.nav .button-text {
  color: var(--tutorial-color-11);
  font-weight: bold;
}
.all-texts-btn.nav:hover {
  text-decoration: underline;
}
.all-texts-btn.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.all-texts-btn.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.all-texts-btn.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.all-texts-btn.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.all-texts-btn.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.all-texts-btn.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.all-texts-btn.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.all-texts-btn.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.all-texts-btn.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.all-texts-btn.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.all-texts-btn.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.all-texts-btn.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.all-texts-btn.nav[data-size="large"] .icon {
  height: 80px;
}
.all-texts-btn.nav[data-size="regular"] {
  padding: 20px 31px;
}
.all-texts-btn.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.all-texts-btn.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.all-texts-btn.nav[data-size="small"] {
  padding: 10px;
}
.all-texts-btn.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.all-texts-btn.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.all-texts-btn.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.all-texts-btn.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.all-texts-btn.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.all-texts-btn.nav[data-size="mini"] {
  padding: 4px 12px;
}
.all-texts-btn.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.all-texts-btn.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.scene-empty-dialog-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.scene-empty-dialog-button:focus {
  text-decoration: none;
}
.scene-empty-dialog-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.scene-empty-dialog-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.scene-empty-dialog-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.scene-empty-dialog-button:active,
.scene-empty-dialog-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.scene-empty-dialog-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.scene-empty-dialog-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color);
  border: 2px solid var(--default-color-2);
  border-radius: inherit;
  z-index: 10;
}
.scene-empty-dialog-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color);
  box-shadow: var(--dropshadow);
}
.scene-empty-dialog-button.legacy .button-text,
.scene-empty-dialog-button.legacy .icon {
  z-index: 11;
}
.scene-empty-dialog-button.legacy .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.scene-empty-dialog-button.legacy svg {
  color: var(--default-color-2);
}
.scene-empty-dialog-button.legacy:hover::before,
.scene-empty-dialog-button.legacy.selected::before {
  background-color: var(--default-color-2);
  border: 2px solid var(--default-color-2);
}
.scene-empty-dialog-button.legacy:hover .button-text,
.scene-empty-dialog-button.legacy.selected .button-text {
  color: var(--default-color);
}
.scene-empty-dialog-button.legacy:hover img,
.scene-empty-dialog-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.scene-empty-dialog-button.legacy.disabled {
  pointer-events: none;
}
.scene-empty-dialog-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.scene-empty-dialog-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.scene-empty-dialog-button.legacy.disabled .icon {
  opacity: 0.5;
}
.scene-empty-dialog-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.scene-empty-dialog-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.scene-empty-dialog-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.scene-empty-dialog-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.scene-empty-dialog-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.scene-empty-dialog-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.scene-empty-dialog-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.scene-empty-dialog-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.scene-empty-dialog-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.scene-empty-dialog-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.scene-empty-dialog-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.scene-empty-dialog-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.scene-empty-dialog-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.scene-empty-dialog-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.scene-empty-dialog-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.scene-empty-dialog-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.scene-empty-dialog-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.scene-empty-dialog-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.scene-empty-dialog-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.scene-empty-dialog-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.scene-empty-dialog-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.scene-empty-dialog-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.scene-empty-dialog-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.scene-empty-dialog-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.scene-empty-dialog-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.scene-empty-dialog-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.scene-empty-dialog-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.scene-empty-dialog-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.scene-empty-dialog-button.pill .button-text,
.scene-empty-dialog-button.pill .icon {
  z-index: 11;
}
.scene-empty-dialog-button.pill .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.scene-empty-dialog-button.pill svg {
  color: var(--default-color);
}
.scene-empty-dialog-button.pill:hover::before,
.scene-empty-dialog-button.pill.selected::before {
  filter: brightness(1.3);
}
.scene-empty-dialog-button.pill:hover img,
.scene-empty-dialog-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.scene-empty-dialog-button.pill.no-shadow::before {
  box-shadow: none;
}
.scene-empty-dialog-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.scene-empty-dialog-button.pill.has-border:hover::before,
.scene-empty-dialog-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.scene-empty-dialog-button.pill.alt-hover:hover::before,
.scene-empty-dialog-button.pill.alt-hover.selected::before {
  background: var(--default-color);
  border: 2px solid var(--default-color);
  filter: brightness(1);
}
.scene-empty-dialog-button.pill.alt-hover:hover .icon,
.scene-empty-dialog-button.pill.alt-hover.selected .icon,
.scene-empty-dialog-button.pill.alt-hover:hover .button-text,
.scene-empty-dialog-button.pill.alt-hover.selected .button-text {
  color: var(--default-color-2);
}
.scene-empty-dialog-button.pill.alt-hover:hover .icon,
.scene-empty-dialog-button.pill.alt-hover.selected .icon {
  background-color: var(--default-color-2);
}
.scene-empty-dialog-button.pill.disabled,
.scene-empty-dialog-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.scene-empty-dialog-button.pill.disabled::before,
.scene-empty-dialog-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.scene-empty-dialog-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.scene-empty-dialog-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.scene-empty-dialog-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.scene-empty-dialog-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.scene-empty-dialog-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.scene-empty-dialog-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.scene-empty-dialog-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.scene-empty-dialog-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.scene-empty-dialog-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.scene-empty-dialog-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.scene-empty-dialog-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.scene-empty-dialog-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.scene-empty-dialog-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.scene-empty-dialog-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.scene-empty-dialog-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.scene-empty-dialog-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.scene-empty-dialog-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.scene-empty-dialog-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.scene-empty-dialog-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.scene-empty-dialog-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.scene-empty-dialog-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.scene-empty-dialog-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.scene-empty-dialog-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.scene-empty-dialog-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.scene-empty-dialog-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.scene-empty-dialog-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.scene-empty-dialog-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.scene-empty-dialog-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.scene-empty-dialog-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.scene-empty-dialog-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.scene-empty-dialog-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.scene-empty-dialog-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.scene-empty-dialog-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.scene-empty-dialog-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.scene-empty-dialog-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.scene-empty-dialog-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.scene-empty-dialog-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.scene-empty-dialog-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.scene-empty-dialog-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.scene-empty-dialog-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.scene-empty-dialog-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.scene-empty-dialog-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.scene-empty-dialog-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.scene-empty-dialog-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.scene-empty-dialog-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.scene-empty-dialog-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.scene-empty-dialog-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.scene-empty-dialog-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.scene-empty-dialog-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.scene-empty-dialog-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.scene-empty-dialog-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.scene-empty-dialog-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.scene-empty-dialog-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.scene-empty-dialog-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.scene-empty-dialog-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.scene-empty-dialog-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.scene-empty-dialog-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.scene-empty-dialog-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.scene-empty-dialog-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.scene-empty-dialog-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.scene-empty-dialog-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.scene-empty-dialog-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.scene-empty-dialog-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.scene-empty-dialog-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.scene-empty-dialog-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.scene-empty-dialog-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.scene-empty-dialog-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.scene-empty-dialog-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.scene-empty-dialog-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.scene-empty-dialog-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.scene-empty-dialog-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.scene-empty-dialog-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .scene-empty-dialog-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .scene-empty-dialog-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .scene-empty-dialog-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.scene-empty-dialog-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.scene-empty-dialog-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-color-2);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.scene-empty-dialog-button.pill-alt .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.scene-empty-dialog-button.pill-alt:hover::before,
.scene-empty-dialog-button.pill-alt.selected::before {
  background: var(--button-border);
}
.scene-empty-dialog-button.pill-alt:hover .button-text,
.scene-empty-dialog-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.scene-empty-dialog-button.pill-alt.disabled,
.scene-empty-dialog-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.scene-empty-dialog-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.scene-empty-dialog-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.scene-empty-dialog-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.scene-empty-dialog-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.scene-empty-dialog-button.round .icon,
.scene-empty-dialog-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scene-empty-dialog-button.round:hover,
.scene-empty-dialog-button.round.selected {
  opacity: 1;
}
.scene-empty-dialog-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.scene-empty-dialog-button.round.disabled {
  pointer-events: none;
}
.scene-empty-dialog-button.round.disabled .icon {
  filter: saturate(0);
}
.scene-empty-dialog-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.scene-empty-dialog-button.round[data-size="regular"].active {
  opacity: 1;
}
.scene-empty-dialog-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.scene-empty-dialog-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.scene-empty-dialog-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.scene-empty-dialog-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.scene-empty-dialog-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.scene-empty-dialog-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.scene-empty-dialog-button.nav {
  flex-wrap: nowrap;
}
.scene-empty-dialog-button.nav svg {
  color: var(--troubadour-main);
}
.scene-empty-dialog-button.nav .icon,
.scene-empty-dialog-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scene-empty-dialog-button.nav .button-text {
  color: var(--default-color-2);
  font-weight: bold;
}
.scene-empty-dialog-button.nav:hover {
  text-decoration: underline;
}
.scene-empty-dialog-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.scene-empty-dialog-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.scene-empty-dialog-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.scene-empty-dialog-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.scene-empty-dialog-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.scene-empty-dialog-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.scene-empty-dialog-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.scene-empty-dialog-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.scene-empty-dialog-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.scene-empty-dialog-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.scene-empty-dialog-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.scene-empty-dialog-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.scene-empty-dialog-button.nav[data-size="large"] .icon {
  height: 80px;
}
.scene-empty-dialog-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.scene-empty-dialog-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.scene-empty-dialog-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.scene-empty-dialog-button.nav[data-size="small"] {
  padding: 10px;
}
.scene-empty-dialog-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.scene-empty-dialog-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.scene-empty-dialog-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.scene-empty-dialog-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.scene-empty-dialog-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.scene-empty-dialog-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.scene-empty-dialog-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.scene-empty-dialog-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.new-dialogue-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.new-dialogue-button:focus {
  text-decoration: none;
}
.new-dialogue-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.new-dialogue-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.new-dialogue-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.new-dialogue-button:active,
.new-dialogue-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.new-dialogue-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.new-dialogue-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color);
  border: 2px solid var(--text-entry-add-text);
  border-radius: inherit;
  z-index: 10;
}
.new-dialogue-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color);
  box-shadow: var(--dropshadow);
}
.new-dialogue-button.legacy .button-text,
.new-dialogue-button.legacy .icon {
  z-index: 11;
}
.new-dialogue-button.legacy .button-text {
  color: var(--text-entry-add-text);
  font-weight: normal;
  z-index: 11;
}
.new-dialogue-button.legacy svg {
  color: var(--text-entry-add-text);
}
.new-dialogue-button.legacy:hover::before,
.new-dialogue-button.legacy.selected::before {
  background-color: var(--text-entry-add-text);
  border: 2px solid var(--text-entry-add-text);
}
.new-dialogue-button.legacy:hover .button-text,
.new-dialogue-button.legacy.selected .button-text {
  color: var(--default-color);
}
.new-dialogue-button.legacy:hover img,
.new-dialogue-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.new-dialogue-button.legacy.disabled {
  pointer-events: none;
}
.new-dialogue-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.new-dialogue-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.new-dialogue-button.legacy.disabled .icon {
  opacity: 0.5;
}
.new-dialogue-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.new-dialogue-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.new-dialogue-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.new-dialogue-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.new-dialogue-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.new-dialogue-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.new-dialogue-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.new-dialogue-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.new-dialogue-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.new-dialogue-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.new-dialogue-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.new-dialogue-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.new-dialogue-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.new-dialogue-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.new-dialogue-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.new-dialogue-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.new-dialogue-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.new-dialogue-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.new-dialogue-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.new-dialogue-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.new-dialogue-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.new-dialogue-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.new-dialogue-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.new-dialogue-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.new-dialogue-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.new-dialogue-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.new-dialogue-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.new-dialogue-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--text-entry-add-text);
  border: 2px solid var(--text-entry-add-text);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.new-dialogue-button.pill .button-text,
.new-dialogue-button.pill .icon {
  z-index: 11;
}
.new-dialogue-button.pill .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.new-dialogue-button.pill svg {
  color: var(--default-color);
}
.new-dialogue-button.pill:hover::before,
.new-dialogue-button.pill.selected::before {
  filter: brightness(1.3);
}
.new-dialogue-button.pill:hover img,
.new-dialogue-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.new-dialogue-button.pill.no-shadow::before {
  box-shadow: none;
}
.new-dialogue-button.pill.has-border::before {
  border-color: var(--text-entry-add-text);
  box-shadow: none !important;
}
.new-dialogue-button.pill.has-border:hover::before,
.new-dialogue-button.pill.has-border.selected::before {
  border-color: var(--text-entry-add-text) !important;
  box-shadow: none !important;
}
.new-dialogue-button.pill.alt-hover:hover::before,
.new-dialogue-button.pill.alt-hover.selected::before {
  background: var(--default-color);
  border: 2px solid var(--default-color);
  filter: brightness(1);
}
.new-dialogue-button.pill.alt-hover:hover .icon,
.new-dialogue-button.pill.alt-hover.selected .icon,
.new-dialogue-button.pill.alt-hover:hover .button-text,
.new-dialogue-button.pill.alt-hover.selected .button-text {
  color: var(--text-entry-add-text);
}
.new-dialogue-button.pill.alt-hover:hover .icon,
.new-dialogue-button.pill.alt-hover.selected .icon {
  background-color: var(--text-entry-add-text);
}
.new-dialogue-button.pill.disabled,
.new-dialogue-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.new-dialogue-button.pill.disabled::before,
.new-dialogue-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.new-dialogue-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.new-dialogue-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.new-dialogue-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.new-dialogue-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.new-dialogue-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.new-dialogue-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.new-dialogue-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.new-dialogue-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.new-dialogue-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.new-dialogue-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.new-dialogue-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.new-dialogue-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.new-dialogue-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.new-dialogue-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.new-dialogue-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.new-dialogue-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.new-dialogue-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.new-dialogue-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.new-dialogue-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.new-dialogue-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.new-dialogue-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.new-dialogue-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.new-dialogue-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.new-dialogue-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.new-dialogue-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.new-dialogue-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.new-dialogue-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.new-dialogue-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.new-dialogue-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.new-dialogue-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.new-dialogue-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.new-dialogue-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.new-dialogue-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.new-dialogue-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.new-dialogue-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.new-dialogue-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.new-dialogue-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.new-dialogue-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.new-dialogue-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.new-dialogue-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.new-dialogue-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.new-dialogue-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.new-dialogue-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.new-dialogue-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.new-dialogue-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.new-dialogue-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.new-dialogue-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.new-dialogue-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.new-dialogue-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.new-dialogue-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.new-dialogue-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.new-dialogue-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.new-dialogue-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.new-dialogue-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.new-dialogue-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.new-dialogue-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.new-dialogue-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.new-dialogue-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.new-dialogue-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.new-dialogue-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.new-dialogue-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.new-dialogue-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.new-dialogue-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.new-dialogue-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.new-dialogue-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.new-dialogue-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.new-dialogue-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.new-dialogue-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.new-dialogue-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.new-dialogue-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.new-dialogue-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.new-dialogue-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.new-dialogue-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .new-dialogue-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .new-dialogue-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .new-dialogue-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .new-dialogue-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .new-dialogue-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .new-dialogue-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .new-dialogue-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .new-dialogue-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .new-dialogue-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .new-dialogue-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .new-dialogue-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .new-dialogue-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.new-dialogue-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.new-dialogue-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--text-entry-add-text);
  border: 2px solid var(--text-entry-add-text);
  border-radius: inherit;
  z-index: 10;
}
.new-dialogue-button.pill-alt .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.new-dialogue-button.pill-alt:hover::before,
.new-dialogue-button.pill-alt.selected::before {
  background: var(--text-entry-add-text);
}
.new-dialogue-button.pill-alt:hover .button-text,
.new-dialogue-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.new-dialogue-button.pill-alt.disabled,
.new-dialogue-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.new-dialogue-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.new-dialogue-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.new-dialogue-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.new-dialogue-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.new-dialogue-button.round .icon,
.new-dialogue-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.new-dialogue-button.round:hover,
.new-dialogue-button.round.selected {
  opacity: 1;
}
.new-dialogue-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.new-dialogue-button.round.disabled {
  pointer-events: none;
}
.new-dialogue-button.round.disabled .icon {
  filter: saturate(0);
}
.new-dialogue-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.new-dialogue-button.round[data-size="regular"].active {
  opacity: 1;
}
.new-dialogue-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.new-dialogue-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.new-dialogue-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.new-dialogue-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.new-dialogue-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.new-dialogue-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.new-dialogue-button.nav {
  flex-wrap: nowrap;
}
.new-dialogue-button.nav svg {
  color: var(--troubadour-main);
}
.new-dialogue-button.nav .icon,
.new-dialogue-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.new-dialogue-button.nav .button-text {
  color: var(--text-entry-add-text);
  font-weight: bold;
}
.new-dialogue-button.nav:hover {
  text-decoration: underline;
}
.new-dialogue-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.new-dialogue-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.new-dialogue-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.new-dialogue-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.new-dialogue-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.new-dialogue-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.new-dialogue-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.new-dialogue-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.new-dialogue-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.new-dialogue-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.new-dialogue-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.new-dialogue-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.new-dialogue-button.nav[data-size="large"] .icon {
  height: 80px;
}
.new-dialogue-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.new-dialogue-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.new-dialogue-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.new-dialogue-button.nav[data-size="small"] {
  padding: 10px;
}
.new-dialogue-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.new-dialogue-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.new-dialogue-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.new-dialogue-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.new-dialogue-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.new-dialogue-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.new-dialogue-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.new-dialogue-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.history-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: 2px solid var(--default-color) !important;
}
.history-button:focus {
  text-decoration: none;
}
.history-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.history-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.history-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.history-button:active,
.history-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.history-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.history-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color);
  border: 2px solid var(--default-bg);
  border-radius: inherit;
  z-index: 10;
}
.history-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color);
  box-shadow: var(--dropshadow);
}
.history-button.legacy .button-text,
.history-button.legacy .icon {
  z-index: 11;
}
.history-button.legacy .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.history-button.legacy svg {
  color: var(--default-bg);
}
.history-button.legacy:hover::before,
.history-button.legacy.selected::before {
  background-color: var(--default-bg);
  border: 2px solid var(--default-bg);
}
.history-button.legacy:hover .button-text,
.history-button.legacy.selected .button-text {
  color: var(--default-color);
}
.history-button.legacy:hover img,
.history-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.history-button.legacy.disabled {
  pointer-events: none;
}
.history-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.history-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.history-button.legacy.disabled .icon {
  opacity: 0.5;
}
.history-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.history-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.history-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.history-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.history-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.history-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.history-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.history-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.history-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.history-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.history-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.history-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.history-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.history-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.history-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.history-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.history-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.history-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.history-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.history-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.history-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.history-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.history-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.history-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.history-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.history-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.history-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.history-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.history-button.pill .button-text,
.history-button.pill .icon {
  z-index: 11;
}
.history-button.pill .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.history-button.pill svg {
  color: var(--default-color);
}
.history-button.pill:hover::before,
.history-button.pill.selected::before {
  filter: brightness(1.3);
}
.history-button.pill:hover img,
.history-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.history-button.pill.no-shadow::before {
  box-shadow: none;
}
.history-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.history-button.pill.has-border:hover::before,
.history-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.history-button.pill.alt-hover:hover::before,
.history-button.pill.alt-hover.selected::before {
  background: var(--default-color);
  border: 2px solid var(--default-color);
  filter: brightness(1);
}
.history-button.pill.alt-hover:hover .icon,
.history-button.pill.alt-hover.selected .icon,
.history-button.pill.alt-hover:hover .button-text,
.history-button.pill.alt-hover.selected .button-text {
  color: var(--default-bg);
}
.history-button.pill.alt-hover:hover .icon,
.history-button.pill.alt-hover.selected .icon {
  background-color: var(--default-bg);
}
.history-button.pill.disabled,
.history-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.history-button.pill.disabled::before,
.history-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.history-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.history-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.history-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.history-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.history-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.history-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.history-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.history-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.history-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.history-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.history-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.history-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.history-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.history-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.history-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.history-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.history-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.history-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.history-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.history-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.history-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.history-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.history-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.history-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.history-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.history-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.history-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.history-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.history-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.history-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.history-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.history-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.history-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.history-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.history-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.history-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.history-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.history-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.history-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.history-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.history-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.history-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.history-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.history-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.history-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.history-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.history-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.history-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.history-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.history-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.history-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.history-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.history-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.history-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.history-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.history-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.history-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.history-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.history-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.history-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.history-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.history-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.history-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.history-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.history-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.history-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.history-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.history-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.history-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.history-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.history-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.history-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.history-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.history-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.history-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.history-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.history-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.history-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.history-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.history-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.history-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.history-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.history-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.history-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.history-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .history-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .history-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .history-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .history-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .history-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .history-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .history-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .history-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .history-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .history-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .history-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .history-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.history-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.history-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-bg);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.history-button.pill-alt .button-text {
  color: var(--default-color);
  font-weight: normal;
  z-index: 11;
}
.history-button.pill-alt:hover::before,
.history-button.pill-alt.selected::before {
  background: var(--button-border);
}
.history-button.pill-alt:hover .button-text,
.history-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.history-button.pill-alt.disabled,
.history-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.history-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.history-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.history-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.history-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.history-button.round .icon,
.history-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.history-button.round:hover,
.history-button.round.selected {
  opacity: 1;
}
.history-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.history-button.round.disabled {
  pointer-events: none;
}
.history-button.round.disabled .icon {
  filter: saturate(0);
}
.history-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.history-button.round[data-size="regular"].active {
  opacity: 1;
}
.history-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.history-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.history-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.history-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.history-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.history-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.history-button.nav {
  flex-wrap: nowrap;
}
.history-button.nav svg {
  color: var(--troubadour-main);
}
.history-button.nav .icon,
.history-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.history-button.nav .button-text {
  color: var(--default-bg);
  font-weight: bold;
}
.history-button.nav:hover {
  text-decoration: underline;
}
.history-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.history-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.history-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.history-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.history-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.history-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.history-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.history-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.history-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.history-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.history-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.history-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.history-button.nav[data-size="large"] .icon {
  height: 80px;
}
.history-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.history-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.history-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.history-button.nav[data-size="small"] {
  padding: 10px;
}
.history-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.history-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.history-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.history-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.history-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.history-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.history-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.history-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.liked-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.liked-button:focus {
  text-decoration: none;
}
.liked-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.liked-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.liked-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.liked-button:active,
.liked-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.liked-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.liked-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--button-approve);
  border-radius: inherit;
  z-index: 10;
}
.liked-button.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.liked-button.legacy .button-text,
.liked-button.legacy .icon {
  z-index: 11;
}
.liked-button.legacy .button-text {
  color: var(--button-approve);
  font-weight: normal;
  z-index: 11;
}
.liked-button.legacy svg {
  color: var(--button-approve);
}
.liked-button.legacy:hover::before,
.liked-button.legacy.selected::before {
  background-color: var(--button-approve);
  border: 2px solid var(--button-approve);
}
.liked-button.legacy:hover .button-text,
.liked-button.legacy.selected .button-text {
  color: var(--default-bg);
}
.liked-button.legacy:hover img,
.liked-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.liked-button.legacy.disabled {
  pointer-events: none;
}
.liked-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.liked-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.liked-button.legacy.disabled .icon {
  opacity: 0.5;
}
.liked-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.liked-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.liked-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.liked-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.liked-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.liked-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.liked-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.liked-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.liked-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.liked-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.liked-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.liked-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.liked-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.liked-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.liked-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.liked-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.liked-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.liked-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.liked-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.liked-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.liked-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.liked-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.liked-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.liked-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.liked-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.liked-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.liked-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.liked-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-approve);
  border: 2px solid var(--button-approve);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.liked-button.pill .button-text,
.liked-button.pill .icon {
  z-index: 11;
}
.liked-button.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.liked-button.pill svg {
  color: var(--default-bg);
}
.liked-button.pill:hover::before,
.liked-button.pill.selected::before {
  filter: brightness(1.3);
}
.liked-button.pill:hover img,
.liked-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.liked-button.pill.no-shadow::before {
  box-shadow: none;
}
.liked-button.pill.has-border::before {
  border-color: var(--button-approve);
  box-shadow: none !important;
}
.liked-button.pill.has-border:hover::before,
.liked-button.pill.has-border.selected::before {
  border-color: var(--button-approve) !important;
  box-shadow: none !important;
}
.liked-button.pill.alt-hover:hover::before,
.liked-button.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.liked-button.pill.alt-hover:hover .icon,
.liked-button.pill.alt-hover.selected .icon,
.liked-button.pill.alt-hover:hover .button-text,
.liked-button.pill.alt-hover.selected .button-text {
  color: var(--button-approve);
}
.liked-button.pill.alt-hover:hover .icon,
.liked-button.pill.alt-hover.selected .icon {
  background-color: var(--button-approve);
}
.liked-button.pill.disabled,
.liked-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.liked-button.pill.disabled::before,
.liked-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.liked-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.liked-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.liked-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.liked-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.liked-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.liked-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.liked-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.liked-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.liked-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.liked-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.liked-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.liked-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.liked-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.liked-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.liked-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.liked-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.liked-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.liked-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.liked-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.liked-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.liked-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.liked-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.liked-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.liked-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.liked-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.liked-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.liked-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.liked-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.liked-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.liked-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.liked-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.liked-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.liked-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.liked-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.liked-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.liked-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.liked-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.liked-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.liked-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.liked-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.liked-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.liked-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.liked-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.liked-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.liked-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.liked-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.liked-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.liked-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.liked-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.liked-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.liked-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.liked-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.liked-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.liked-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.liked-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.liked-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.liked-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.liked-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.liked-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.liked-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.liked-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.liked-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.liked-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.liked-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.liked-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.liked-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.liked-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.liked-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.liked-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.liked-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.liked-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.liked-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.liked-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.liked-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.liked-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.liked-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.liked-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.liked-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.liked-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.liked-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.liked-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.liked-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.liked-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.liked-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.liked-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .liked-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .liked-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .liked-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .liked-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .liked-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .liked-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .liked-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .liked-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .liked-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .liked-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .liked-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .liked-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.liked-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.liked-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-approve);
  border: 2px solid var(--button-approve);
  border-radius: inherit;
  z-index: 10;
}
.liked-button.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.liked-button.pill-alt:hover::before,
.liked-button.pill-alt.selected::before {
  background: var(--button-approve);
}
.liked-button.pill-alt:hover .button-text,
.liked-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.liked-button.pill-alt.disabled,
.liked-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.liked-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.liked-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.liked-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.liked-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.liked-button.round .icon,
.liked-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.liked-button.round:hover,
.liked-button.round.selected {
  opacity: 1;
}
.liked-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.liked-button.round.disabled {
  pointer-events: none;
}
.liked-button.round.disabled .icon {
  filter: saturate(0);
}
.liked-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.liked-button.round[data-size="regular"].active {
  opacity: 1;
}
.liked-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.liked-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.liked-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.liked-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.liked-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.liked-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.liked-button.nav {
  flex-wrap: nowrap;
}
.liked-button.nav svg {
  color: var(--troubadour-main);
}
.liked-button.nav .icon,
.liked-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.liked-button.nav .button-text {
  color: var(--button-approve);
  font-weight: bold;
}
.liked-button.nav:hover {
  text-decoration: underline;
}
.liked-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.liked-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.liked-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.liked-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.liked-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.liked-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.liked-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.liked-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.liked-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.liked-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.liked-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.liked-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.liked-button.nav[data-size="large"] .icon {
  height: 80px;
}
.liked-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.liked-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.liked-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.liked-button.nav[data-size="small"] {
  padding: 10px;
}
.liked-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.liked-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.liked-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.liked-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.liked-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.liked-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.liked-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.liked-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.revised-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.revised-button:focus {
  text-decoration: none;
}
.revised-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.revised-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.revised-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.revised-button:active,
.revised-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.revised-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.revised-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--button-improve);
  border-radius: inherit;
  z-index: 10;
}
.revised-button.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.revised-button.legacy .button-text,
.revised-button.legacy .icon {
  z-index: 11;
}
.revised-button.legacy .button-text {
  color: var(--button-improve);
  font-weight: normal;
  z-index: 11;
}
.revised-button.legacy svg {
  color: var(--button-improve);
}
.revised-button.legacy:hover::before,
.revised-button.legacy.selected::before {
  background-color: var(--button-improve);
  border: 2px solid var(--button-improve);
}
.revised-button.legacy:hover .button-text,
.revised-button.legacy.selected .button-text {
  color: var(--default-bg);
}
.revised-button.legacy:hover img,
.revised-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.revised-button.legacy.disabled {
  pointer-events: none;
}
.revised-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.revised-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.revised-button.legacy.disabled .icon {
  opacity: 0.5;
}
.revised-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.revised-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.revised-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.revised-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.revised-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.revised-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.revised-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.revised-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.revised-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.revised-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.revised-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.revised-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.revised-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.revised-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.revised-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.revised-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.revised-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.revised-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.revised-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.revised-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.revised-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.revised-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.revised-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.revised-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.revised-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.revised-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.revised-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.revised-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-improve);
  border: 2px solid var(--button-improve);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.revised-button.pill .button-text,
.revised-button.pill .icon {
  z-index: 11;
}
.revised-button.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.revised-button.pill svg {
  color: var(--default-bg);
}
.revised-button.pill:hover::before,
.revised-button.pill.selected::before {
  filter: brightness(1.3);
}
.revised-button.pill:hover img,
.revised-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.revised-button.pill.no-shadow::before {
  box-shadow: none;
}
.revised-button.pill.has-border::before {
  border-color: var(--button-improve);
  box-shadow: none !important;
}
.revised-button.pill.has-border:hover::before,
.revised-button.pill.has-border.selected::before {
  border-color: var(--button-improve) !important;
  box-shadow: none !important;
}
.revised-button.pill.alt-hover:hover::before,
.revised-button.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.revised-button.pill.alt-hover:hover .icon,
.revised-button.pill.alt-hover.selected .icon,
.revised-button.pill.alt-hover:hover .button-text,
.revised-button.pill.alt-hover.selected .button-text {
  color: var(--button-improve);
}
.revised-button.pill.alt-hover:hover .icon,
.revised-button.pill.alt-hover.selected .icon {
  background-color: var(--button-improve);
}
.revised-button.pill.disabled,
.revised-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.revised-button.pill.disabled::before,
.revised-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.revised-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.revised-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.revised-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.revised-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.revised-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.revised-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.revised-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.revised-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.revised-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.revised-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.revised-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.revised-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.revised-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.revised-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.revised-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.revised-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.revised-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.revised-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.revised-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.revised-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.revised-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.revised-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.revised-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.revised-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.revised-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.revised-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.revised-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.revised-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.revised-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.revised-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.revised-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.revised-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.revised-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.revised-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.revised-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.revised-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.revised-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.revised-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.revised-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.revised-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.revised-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.revised-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.revised-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.revised-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.revised-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.revised-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.revised-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.revised-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.revised-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.revised-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.revised-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.revised-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.revised-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.revised-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.revised-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.revised-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.revised-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.revised-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.revised-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.revised-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.revised-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.revised-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.revised-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.revised-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.revised-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.revised-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.revised-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.revised-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.revised-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.revised-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.revised-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.revised-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.revised-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.revised-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.revised-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.revised-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.revised-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.revised-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.revised-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.revised-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.revised-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.revised-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.revised-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.revised-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.revised-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .revised-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .revised-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .revised-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .revised-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .revised-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .revised-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .revised-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .revised-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .revised-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .revised-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .revised-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .revised-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.revised-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.revised-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-improve);
  border: 2px solid var(--button-improve);
  border-radius: inherit;
  z-index: 10;
}
.revised-button.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.revised-button.pill-alt:hover::before,
.revised-button.pill-alt.selected::before {
  background: var(--button-improve);
}
.revised-button.pill-alt:hover .button-text,
.revised-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.revised-button.pill-alt.disabled,
.revised-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.revised-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.revised-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.revised-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.revised-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.revised-button.round .icon,
.revised-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.revised-button.round:hover,
.revised-button.round.selected {
  opacity: 1;
}
.revised-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.revised-button.round.disabled {
  pointer-events: none;
}
.revised-button.round.disabled .icon {
  filter: saturate(0);
}
.revised-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.revised-button.round[data-size="regular"].active {
  opacity: 1;
}
.revised-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.revised-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.revised-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.revised-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.revised-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.revised-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.revised-button.nav {
  flex-wrap: nowrap;
}
.revised-button.nav svg {
  color: var(--troubadour-main);
}
.revised-button.nav .icon,
.revised-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.revised-button.nav .button-text {
  color: var(--button-improve);
  font-weight: bold;
}
.revised-button.nav:hover {
  text-decoration: underline;
}
.revised-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.revised-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.revised-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.revised-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.revised-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.revised-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.revised-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.revised-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.revised-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.revised-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.revised-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.revised-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.revised-button.nav[data-size="large"] .icon {
  height: 80px;
}
.revised-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.revised-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.revised-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.revised-button.nav[data-size="small"] {
  padding: 10px;
}
.revised-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.revised-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.revised-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.revised-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.revised-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.revised-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.revised-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.revised-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.loved-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.loved-button:focus {
  text-decoration: none;
}
.loved-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.loved-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.loved-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.loved-button:active,
.loved-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.loved-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.loved-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--button-love);
  border-radius: inherit;
  z-index: 10;
}
.loved-button.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.loved-button.legacy .button-text,
.loved-button.legacy .icon {
  z-index: 11;
}
.loved-button.legacy .button-text {
  color: var(--button-love);
  font-weight: normal;
  z-index: 11;
}
.loved-button.legacy svg {
  color: var(--button-love);
}
.loved-button.legacy:hover::before,
.loved-button.legacy.selected::before {
  background-color: var(--button-love);
  border: 2px solid var(--button-love);
}
.loved-button.legacy:hover .button-text,
.loved-button.legacy.selected .button-text {
  color: var(--default-bg);
}
.loved-button.legacy:hover img,
.loved-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.loved-button.legacy.disabled {
  pointer-events: none;
}
.loved-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.loved-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.loved-button.legacy.disabled .icon {
  opacity: 0.5;
}
.loved-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.loved-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.loved-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.loved-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.loved-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.loved-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.loved-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.loved-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.loved-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.loved-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.loved-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.loved-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.loved-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.loved-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.loved-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.loved-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.loved-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.loved-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.loved-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.loved-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.loved-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.loved-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.loved-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.loved-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.loved-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.loved-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.loved-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.loved-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-love);
  border: 2px solid var(--button-love);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.loved-button.pill .button-text,
.loved-button.pill .icon {
  z-index: 11;
}
.loved-button.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.loved-button.pill svg {
  color: var(--default-bg);
}
.loved-button.pill:hover::before,
.loved-button.pill.selected::before {
  filter: brightness(1.3);
}
.loved-button.pill:hover img,
.loved-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.loved-button.pill.no-shadow::before {
  box-shadow: none;
}
.loved-button.pill.has-border::before {
  border-color: var(--button-love);
  box-shadow: none !important;
}
.loved-button.pill.has-border:hover::before,
.loved-button.pill.has-border.selected::before {
  border-color: var(--button-love) !important;
  box-shadow: none !important;
}
.loved-button.pill.alt-hover:hover::before,
.loved-button.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.loved-button.pill.alt-hover:hover .icon,
.loved-button.pill.alt-hover.selected .icon,
.loved-button.pill.alt-hover:hover .button-text,
.loved-button.pill.alt-hover.selected .button-text {
  color: var(--button-love);
}
.loved-button.pill.alt-hover:hover .icon,
.loved-button.pill.alt-hover.selected .icon {
  background-color: var(--button-love);
}
.loved-button.pill.disabled,
.loved-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.loved-button.pill.disabled::before,
.loved-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.loved-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.loved-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.loved-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.loved-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.loved-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.loved-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.loved-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.loved-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.loved-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.loved-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.loved-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.loved-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.loved-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.loved-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.loved-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.loved-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.loved-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.loved-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.loved-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.loved-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.loved-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.loved-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.loved-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.loved-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.loved-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.loved-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.loved-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.loved-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.loved-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.loved-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.loved-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.loved-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.loved-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.loved-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.loved-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.loved-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.loved-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.loved-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.loved-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.loved-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.loved-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.loved-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.loved-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.loved-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.loved-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.loved-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.loved-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.loved-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.loved-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.loved-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.loved-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.loved-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.loved-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.loved-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.loved-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.loved-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.loved-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.loved-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.loved-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.loved-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.loved-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.loved-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.loved-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.loved-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.loved-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.loved-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.loved-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.loved-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.loved-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.loved-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.loved-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.loved-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.loved-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.loved-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.loved-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.loved-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.loved-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.loved-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.loved-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.loved-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.loved-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.loved-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.loved-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.loved-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.loved-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .loved-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .loved-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .loved-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .loved-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .loved-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .loved-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .loved-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .loved-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .loved-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .loved-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .loved-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .loved-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.loved-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.loved-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-love);
  border: 2px solid var(--button-love);
  border-radius: inherit;
  z-index: 10;
}
.loved-button.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.loved-button.pill-alt:hover::before,
.loved-button.pill-alt.selected::before {
  background: var(--button-love);
}
.loved-button.pill-alt:hover .button-text,
.loved-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.loved-button.pill-alt.disabled,
.loved-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.loved-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.loved-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.loved-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.loved-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.loved-button.round .icon,
.loved-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loved-button.round:hover,
.loved-button.round.selected {
  opacity: 1;
}
.loved-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.loved-button.round.disabled {
  pointer-events: none;
}
.loved-button.round.disabled .icon {
  filter: saturate(0);
}
.loved-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.loved-button.round[data-size="regular"].active {
  opacity: 1;
}
.loved-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.loved-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.loved-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.loved-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.loved-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.loved-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.loved-button.nav {
  flex-wrap: nowrap;
}
.loved-button.nav svg {
  color: var(--troubadour-main);
}
.loved-button.nav .icon,
.loved-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loved-button.nav .button-text {
  color: var(--button-love);
  font-weight: bold;
}
.loved-button.nav:hover {
  text-decoration: underline;
}
.loved-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.loved-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.loved-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.loved-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.loved-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.loved-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.loved-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.loved-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.loved-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.loved-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.loved-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.loved-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.loved-button.nav[data-size="large"] .icon {
  height: 80px;
}
.loved-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.loved-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.loved-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.loved-button.nav[data-size="small"] {
  padding: 10px;
}
.loved-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.loved-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.loved-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.loved-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.loved-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.loved-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.loved-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.loved-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.save-TE-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.save-TE-button:focus {
  text-decoration: none;
}
.save-TE-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.save-TE-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.save-TE-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.save-TE-button:active,
.save-TE-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.save-TE-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.save-TE-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--button-save);
  border-radius: inherit;
  z-index: 10;
}
.save-TE-button.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.save-TE-button.legacy .button-text,
.save-TE-button.legacy .icon {
  z-index: 11;
}
.save-TE-button.legacy .button-text {
  color: var(--button-save);
  font-weight: normal;
  z-index: 11;
}
.save-TE-button.legacy svg {
  color: var(--button-save);
}
.save-TE-button.legacy:hover::before,
.save-TE-button.legacy.selected::before {
  background-color: var(--button-save);
  border: 2px solid var(--button-save);
}
.save-TE-button.legacy:hover .button-text,
.save-TE-button.legacy.selected .button-text {
  color: var(--default-bg);
}
.save-TE-button.legacy:hover img,
.save-TE-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.save-TE-button.legacy.disabled {
  pointer-events: none;
}
.save-TE-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.save-TE-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.save-TE-button.legacy.disabled .icon {
  opacity: 0.5;
}
.save-TE-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.save-TE-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.save-TE-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.save-TE-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.save-TE-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.save-TE-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.save-TE-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.save-TE-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.save-TE-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.save-TE-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.save-TE-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.save-TE-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.save-TE-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.save-TE-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.save-TE-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.save-TE-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.save-TE-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.save-TE-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.save-TE-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.save-TE-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.save-TE-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.save-TE-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.save-TE-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.save-TE-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.save-TE-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.save-TE-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.save-TE-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.save-TE-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-save);
  border: 2px solid var(--button-save);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.save-TE-button.pill .button-text,
.save-TE-button.pill .icon {
  z-index: 11;
}
.save-TE-button.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.save-TE-button.pill svg {
  color: var(--default-bg);
}
.save-TE-button.pill:hover::before,
.save-TE-button.pill.selected::before {
  filter: brightness(1.3);
}
.save-TE-button.pill:hover img,
.save-TE-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.save-TE-button.pill.no-shadow::before {
  box-shadow: none;
}
.save-TE-button.pill.has-border::before {
  border-color: var(--button-save);
  box-shadow: none !important;
}
.save-TE-button.pill.has-border:hover::before,
.save-TE-button.pill.has-border.selected::before {
  border-color: var(--button-save) !important;
  box-shadow: none !important;
}
.save-TE-button.pill.alt-hover:hover::before,
.save-TE-button.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.save-TE-button.pill.alt-hover:hover .icon,
.save-TE-button.pill.alt-hover.selected .icon,
.save-TE-button.pill.alt-hover:hover .button-text,
.save-TE-button.pill.alt-hover.selected .button-text {
  color: var(--button-save);
}
.save-TE-button.pill.alt-hover:hover .icon,
.save-TE-button.pill.alt-hover.selected .icon {
  background-color: var(--button-save);
}
.save-TE-button.pill.disabled,
.save-TE-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.save-TE-button.pill.disabled::before,
.save-TE-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.save-TE-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.save-TE-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.save-TE-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.save-TE-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.save-TE-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.save-TE-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.save-TE-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.save-TE-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.save-TE-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.save-TE-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.save-TE-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.save-TE-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.save-TE-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.save-TE-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.save-TE-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.save-TE-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.save-TE-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.save-TE-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.save-TE-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.save-TE-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.save-TE-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.save-TE-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.save-TE-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.save-TE-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.save-TE-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.save-TE-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.save-TE-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.save-TE-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.save-TE-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.save-TE-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.save-TE-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.save-TE-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.save-TE-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.save-TE-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.save-TE-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.save-TE-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.save-TE-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.save-TE-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.save-TE-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.save-TE-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.save-TE-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.save-TE-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.save-TE-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.save-TE-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.save-TE-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.save-TE-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.save-TE-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.save-TE-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.save-TE-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.save-TE-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.save-TE-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.save-TE-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.save-TE-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.save-TE-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.save-TE-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.save-TE-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.save-TE-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.save-TE-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.save-TE-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.save-TE-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.save-TE-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.save-TE-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.save-TE-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.save-TE-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.save-TE-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.save-TE-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.save-TE-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.save-TE-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.save-TE-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.save-TE-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.save-TE-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.save-TE-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.save-TE-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.save-TE-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.save-TE-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.save-TE-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.save-TE-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.save-TE-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.save-TE-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.save-TE-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.save-TE-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.save-TE-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.save-TE-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.save-TE-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.save-TE-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .save-TE-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .save-TE-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .save-TE-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .save-TE-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .save-TE-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .save-TE-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .save-TE-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .save-TE-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .save-TE-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .save-TE-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .save-TE-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .save-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.save-TE-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.save-TE-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-save);
  border: 2px solid var(--button-save);
  border-radius: inherit;
  z-index: 10;
}
.save-TE-button.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.save-TE-button.pill-alt:hover::before,
.save-TE-button.pill-alt.selected::before {
  background: var(--button-save);
}
.save-TE-button.pill-alt:hover .button-text,
.save-TE-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.save-TE-button.pill-alt.disabled,
.save-TE-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.save-TE-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.save-TE-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.save-TE-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.save-TE-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.save-TE-button.round .icon,
.save-TE-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.save-TE-button.round:hover,
.save-TE-button.round.selected {
  opacity: 1;
}
.save-TE-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.save-TE-button.round.disabled {
  pointer-events: none;
}
.save-TE-button.round.disabled .icon {
  filter: saturate(0);
}
.save-TE-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.save-TE-button.round[data-size="regular"].active {
  opacity: 1;
}
.save-TE-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.save-TE-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.save-TE-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.save-TE-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.save-TE-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.save-TE-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.save-TE-button.nav {
  flex-wrap: nowrap;
}
.save-TE-button.nav svg {
  color: var(--troubadour-main);
}
.save-TE-button.nav .icon,
.save-TE-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.save-TE-button.nav .button-text {
  color: var(--button-save);
  font-weight: bold;
}
.save-TE-button.nav:hover {
  text-decoration: underline;
}
.save-TE-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.save-TE-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.save-TE-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.save-TE-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.save-TE-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.save-TE-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.save-TE-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.save-TE-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.save-TE-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.save-TE-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.save-TE-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.save-TE-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.save-TE-button.nav[data-size="large"] .icon {
  height: 80px;
}
.save-TE-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.save-TE-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.save-TE-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.save-TE-button.nav[data-size="small"] {
  padding: 10px;
}
.save-TE-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.save-TE-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.save-TE-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.save-TE-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.save-TE-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.save-TE-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.save-TE-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.save-TE-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.delete-TE-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.delete-TE-button:focus {
  text-decoration: none;
}
.delete-TE-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.delete-TE-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.delete-TE-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.delete-TE-button:active,
.delete-TE-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.delete-TE-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.delete-TE-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--button-delete);
  border-radius: inherit;
  z-index: 10;
}
.delete-TE-button.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.delete-TE-button.legacy .button-text,
.delete-TE-button.legacy .icon {
  z-index: 11;
}
.delete-TE-button.legacy .button-text {
  color: var(--button-delete);
  font-weight: normal;
  z-index: 11;
}
.delete-TE-button.legacy svg {
  color: var(--button-delete);
}
.delete-TE-button.legacy:hover::before,
.delete-TE-button.legacy.selected::before {
  background-color: var(--button-delete);
  border: 2px solid var(--button-delete);
}
.delete-TE-button.legacy:hover .button-text,
.delete-TE-button.legacy.selected .button-text {
  color: var(--default-bg);
}
.delete-TE-button.legacy:hover img,
.delete-TE-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.delete-TE-button.legacy.disabled {
  pointer-events: none;
}
.delete-TE-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.delete-TE-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.delete-TE-button.legacy.disabled .icon {
  opacity: 0.5;
}
.delete-TE-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.delete-TE-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.delete-TE-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.delete-TE-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.delete-TE-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.delete-TE-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.delete-TE-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.delete-TE-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.delete-TE-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.delete-TE-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.delete-TE-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.delete-TE-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.delete-TE-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.delete-TE-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.delete-TE-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.delete-TE-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.delete-TE-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.delete-TE-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.delete-TE-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.delete-TE-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.delete-TE-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.delete-TE-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.delete-TE-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.delete-TE-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.delete-TE-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.delete-TE-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.delete-TE-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.delete-TE-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-delete);
  border: 2px solid var(--button-delete);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.delete-TE-button.pill .button-text,
.delete-TE-button.pill .icon {
  z-index: 11;
}
.delete-TE-button.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.delete-TE-button.pill svg {
  color: var(--default-bg);
}
.delete-TE-button.pill:hover::before,
.delete-TE-button.pill.selected::before {
  filter: brightness(1.3);
}
.delete-TE-button.pill:hover img,
.delete-TE-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.delete-TE-button.pill.no-shadow::before {
  box-shadow: none;
}
.delete-TE-button.pill.has-border::before {
  border-color: var(--button-delete);
  box-shadow: none !important;
}
.delete-TE-button.pill.has-border:hover::before,
.delete-TE-button.pill.has-border.selected::before {
  border-color: var(--button-delete) !important;
  box-shadow: none !important;
}
.delete-TE-button.pill.alt-hover:hover::before,
.delete-TE-button.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.delete-TE-button.pill.alt-hover:hover .icon,
.delete-TE-button.pill.alt-hover.selected .icon,
.delete-TE-button.pill.alt-hover:hover .button-text,
.delete-TE-button.pill.alt-hover.selected .button-text {
  color: var(--button-delete);
}
.delete-TE-button.pill.alt-hover:hover .icon,
.delete-TE-button.pill.alt-hover.selected .icon {
  background-color: var(--button-delete);
}
.delete-TE-button.pill.disabled,
.delete-TE-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.delete-TE-button.pill.disabled::before,
.delete-TE-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.delete-TE-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.delete-TE-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.delete-TE-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.delete-TE-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.delete-TE-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.delete-TE-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.delete-TE-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.delete-TE-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.delete-TE-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.delete-TE-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.delete-TE-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.delete-TE-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.delete-TE-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.delete-TE-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.delete-TE-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.delete-TE-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.delete-TE-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.delete-TE-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.delete-TE-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.delete-TE-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.delete-TE-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.delete-TE-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.delete-TE-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.delete-TE-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.delete-TE-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.delete-TE-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.delete-TE-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.delete-TE-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.delete-TE-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.delete-TE-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.delete-TE-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.delete-TE-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.delete-TE-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.delete-TE-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.delete-TE-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.delete-TE-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.delete-TE-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.delete-TE-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.delete-TE-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.delete-TE-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.delete-TE-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.delete-TE-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.delete-TE-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.delete-TE-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.delete-TE-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.delete-TE-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.delete-TE-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.delete-TE-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.delete-TE-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.delete-TE-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.delete-TE-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.delete-TE-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.delete-TE-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.delete-TE-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.delete-TE-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.delete-TE-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.delete-TE-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.delete-TE-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.delete-TE-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.delete-TE-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.delete-TE-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.delete-TE-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.delete-TE-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.delete-TE-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.delete-TE-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.delete-TE-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.delete-TE-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.delete-TE-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.delete-TE-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.delete-TE-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.delete-TE-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.delete-TE-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.delete-TE-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.delete-TE-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.delete-TE-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.delete-TE-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.delete-TE-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.delete-TE-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.delete-TE-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.delete-TE-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.delete-TE-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.delete-TE-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.delete-TE-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.delete-TE-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.delete-TE-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .delete-TE-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .delete-TE-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .delete-TE-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .delete-TE-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .delete-TE-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .delete-TE-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .delete-TE-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .delete-TE-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .delete-TE-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .delete-TE-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .delete-TE-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .delete-TE-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.delete-TE-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.delete-TE-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-delete);
  border: 2px solid var(--button-delete);
  border-radius: inherit;
  z-index: 10;
}
.delete-TE-button.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.delete-TE-button.pill-alt:hover::before,
.delete-TE-button.pill-alt.selected::before {
  background: var(--button-delete);
}
.delete-TE-button.pill-alt:hover .button-text,
.delete-TE-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.delete-TE-button.pill-alt.disabled,
.delete-TE-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.delete-TE-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.delete-TE-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.delete-TE-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.delete-TE-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.delete-TE-button.round .icon,
.delete-TE-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.delete-TE-button.round:hover,
.delete-TE-button.round.selected {
  opacity: 1;
}
.delete-TE-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.delete-TE-button.round.disabled {
  pointer-events: none;
}
.delete-TE-button.round.disabled .icon {
  filter: saturate(0);
}
.delete-TE-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.delete-TE-button.round[data-size="regular"].active {
  opacity: 1;
}
.delete-TE-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.delete-TE-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.delete-TE-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.delete-TE-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.delete-TE-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.delete-TE-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.delete-TE-button.nav {
  flex-wrap: nowrap;
}
.delete-TE-button.nav svg {
  color: var(--troubadour-main);
}
.delete-TE-button.nav .icon,
.delete-TE-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.delete-TE-button.nav .button-text {
  color: var(--button-delete);
  font-weight: bold;
}
.delete-TE-button.nav:hover {
  text-decoration: underline;
}
.delete-TE-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.delete-TE-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.delete-TE-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.delete-TE-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.delete-TE-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.delete-TE-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.delete-TE-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.delete-TE-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.delete-TE-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.delete-TE-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.delete-TE-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.delete-TE-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.delete-TE-button.nav[data-size="large"] .icon {
  height: 80px;
}
.delete-TE-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.delete-TE-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.delete-TE-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.delete-TE-button.nav[data-size="small"] {
  padding: 10px;
}
.delete-TE-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.delete-TE-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.delete-TE-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.delete-TE-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.delete-TE-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.delete-TE-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.delete-TE-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.delete-TE-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.number-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.number-button:focus {
  text-decoration: none;
}
.number-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.number-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.number-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.number-button:active,
.number-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.number-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.number-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--navigation-step);
  border: 2px solid var(--default-bg);
  border-radius: inherit;
  z-index: 10;
}
.number-button.legacy.has-shadow::before {
  border: 2px solid var(--navigation-step);
  box-shadow: var(--dropshadow);
}
.number-button.legacy .button-text,
.number-button.legacy .icon {
  z-index: 11;
}
.number-button.legacy .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.number-button.legacy svg {
  color: var(--default-bg);
}
.number-button.legacy:hover::before,
.number-button.legacy.selected::before {
  background-color: var(--default-bg);
  border: 2px solid var(--default-bg);
}
.number-button.legacy:hover .button-text,
.number-button.legacy.selected .button-text {
  color: var(--navigation-step);
}
.number-button.legacy:hover img,
.number-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.number-button.legacy.disabled {
  pointer-events: none;
}
.number-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.number-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.number-button.legacy.disabled .icon {
  opacity: 0.5;
}
.number-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.number-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.number-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.number-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.number-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.number-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.number-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.number-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.number-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.number-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.number-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.number-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.number-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.number-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.number-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.number-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.number-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.number-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.number-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.number-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.number-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.number-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.number-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.number-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.number-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.number-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.number-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.number-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.number-button.pill .button-text,
.number-button.pill .icon {
  z-index: 11;
}
.number-button.pill .button-text {
  color: var(--navigation-step);
  font-weight: normal;
  z-index: 11;
}
.number-button.pill svg {
  color: var(--navigation-step);
}
.number-button.pill:hover::before,
.number-button.pill.selected::before {
  filter: brightness(1.3);
}
.number-button.pill:hover img,
.number-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.number-button.pill.no-shadow::before {
  box-shadow: none;
}
.number-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.number-button.pill.has-border:hover::before,
.number-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.number-button.pill.alt-hover:hover::before,
.number-button.pill.alt-hover.selected::before {
  background: var(--navigation-step);
  border: 2px solid var(--navigation-step);
  filter: brightness(1);
}
.number-button.pill.alt-hover:hover .icon,
.number-button.pill.alt-hover.selected .icon,
.number-button.pill.alt-hover:hover .button-text,
.number-button.pill.alt-hover.selected .button-text {
  color: var(--default-bg);
}
.number-button.pill.alt-hover:hover .icon,
.number-button.pill.alt-hover.selected .icon {
  background-color: var(--default-bg);
}
.number-button.pill.disabled,
.number-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.number-button.pill.disabled::before,
.number-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.number-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.number-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.number-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.number-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.number-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.number-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.number-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.number-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.number-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.number-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.number-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.number-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.number-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.number-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.number-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.number-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.number-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.number-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.number-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.number-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.number-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.number-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.number-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.number-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.number-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.number-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.number-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.number-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.number-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.number-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.number-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.number-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.number-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.number-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.number-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.number-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.number-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.number-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.number-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.number-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.number-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.number-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.number-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.number-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.number-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.number-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.number-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.number-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.number-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.number-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.number-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.number-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.number-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.number-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.number-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.number-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.number-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.number-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.number-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.number-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.number-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.number-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.number-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.number-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.number-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.number-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.number-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.number-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.number-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.number-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.number-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.number-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.number-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.number-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.number-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.number-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.number-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.number-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.number-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.number-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.number-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.number-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.number-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.number-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.number-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .number-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .number-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .number-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .number-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .number-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .number-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .number-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .number-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .number-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .number-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .number-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .number-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.number-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.number-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-bg);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.number-button.pill-alt .button-text {
  color: var(--navigation-step);
  font-weight: normal;
  z-index: 11;
}
.number-button.pill-alt:hover::before,
.number-button.pill-alt.selected::before {
  background: var(--button-border);
}
.number-button.pill-alt:hover .button-text,
.number-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.number-button.pill-alt.disabled,
.number-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.number-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.number-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.number-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.number-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.number-button.round .icon,
.number-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.number-button.round:hover,
.number-button.round.selected {
  opacity: 1;
}
.number-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.number-button.round.disabled {
  pointer-events: none;
}
.number-button.round.disabled .icon {
  filter: saturate(0);
}
.number-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.number-button.round[data-size="regular"].active {
  opacity: 1;
}
.number-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.number-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.number-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.number-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.number-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.number-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.number-button.nav {
  flex-wrap: nowrap;
}
.number-button.nav svg {
  color: var(--troubadour-main);
}
.number-button.nav .icon,
.number-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.number-button.nav .button-text {
  color: var(--default-bg);
  font-weight: bold;
}
.number-button.nav:hover {
  text-decoration: underline;
}
.number-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.number-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.number-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.number-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.number-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.number-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.number-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.number-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.number-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.number-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.number-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.number-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.number-button.nav[data-size="large"] .icon {
  height: 80px;
}
.number-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.number-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.number-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.number-button.nav[data-size="small"] {
  padding: 10px;
}
.number-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.number-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.number-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.number-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.number-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.number-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.number-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.number-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.open-read-mode-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.open-read-mode-button:focus {
  text-decoration: none;
}
.open-read-mode-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.open-read-mode-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.open-read-mode-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.open-read-mode-button:active,
.open-read-mode-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.open-read-mode-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.open-read-mode-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--challenges-card-to-do-2);
  border: 2px solid var(--tutorial-color-11);
  border-radius: inherit;
  z-index: 10;
}
.open-read-mode-button.legacy.has-shadow::before {
  border: 2px solid var(--challenges-card-to-do-2);
  box-shadow: var(--dropshadow);
}
.open-read-mode-button.legacy .button-text,
.open-read-mode-button.legacy .icon {
  z-index: 11;
}
.open-read-mode-button.legacy .button-text {
  color: var(--tutorial-color-11);
  font-weight: normal;
  z-index: 11;
}
.open-read-mode-button.legacy svg {
  color: var(--tutorial-color-11);
}
.open-read-mode-button.legacy:hover::before,
.open-read-mode-button.legacy.selected::before {
  background-color: var(--tutorial-color-11);
  border: 2px solid var(--tutorial-color-11);
}
.open-read-mode-button.legacy:hover .button-text,
.open-read-mode-button.legacy.selected .button-text {
  color: var(--challenges-card-to-do-2);
}
.open-read-mode-button.legacy:hover img,
.open-read-mode-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.open-read-mode-button.legacy.disabled {
  pointer-events: none;
}
.open-read-mode-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.open-read-mode-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.open-read-mode-button.legacy.disabled .icon {
  opacity: 0.5;
}
.open-read-mode-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.open-read-mode-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.open-read-mode-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.open-read-mode-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.open-read-mode-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.open-read-mode-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.open-read-mode-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.open-read-mode-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.open-read-mode-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.open-read-mode-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.open-read-mode-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.open-read-mode-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.open-read-mode-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.open-read-mode-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.open-read-mode-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.open-read-mode-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.open-read-mode-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.open-read-mode-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.open-read-mode-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.open-read-mode-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.open-read-mode-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.open-read-mode-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.open-read-mode-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.open-read-mode-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.open-read-mode-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.open-read-mode-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.open-read-mode-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.open-read-mode-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--tutorial-color-11);
  border: 2px solid var(--tutorial-color-11);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.open-read-mode-button.pill .button-text,
.open-read-mode-button.pill .icon {
  z-index: 11;
}
.open-read-mode-button.pill .button-text {
  color: var(--challenges-card-to-do-2);
  font-weight: normal;
  z-index: 11;
}
.open-read-mode-button.pill svg {
  color: var(--challenges-card-to-do-2);
}
.open-read-mode-button.pill:hover::before,
.open-read-mode-button.pill.selected::before {
  filter: brightness(1.3);
}
.open-read-mode-button.pill:hover img,
.open-read-mode-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.open-read-mode-button.pill.no-shadow::before {
  box-shadow: none;
}
.open-read-mode-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.open-read-mode-button.pill.has-border:hover::before,
.open-read-mode-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.open-read-mode-button.pill.alt-hover:hover::before,
.open-read-mode-button.pill.alt-hover.selected::before {
  background: var(--challenges-card-to-do-2);
  border: 2px solid var(--challenges-card-to-do-2);
  filter: brightness(1);
}
.open-read-mode-button.pill.alt-hover:hover .icon,
.open-read-mode-button.pill.alt-hover.selected .icon,
.open-read-mode-button.pill.alt-hover:hover .button-text,
.open-read-mode-button.pill.alt-hover.selected .button-text {
  color: var(--tutorial-color-11);
}
.open-read-mode-button.pill.alt-hover:hover .icon,
.open-read-mode-button.pill.alt-hover.selected .icon {
  background-color: var(--tutorial-color-11);
}
.open-read-mode-button.pill.disabled,
.open-read-mode-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.open-read-mode-button.pill.disabled::before,
.open-read-mode-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.open-read-mode-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.open-read-mode-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.open-read-mode-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.open-read-mode-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.open-read-mode-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.open-read-mode-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.open-read-mode-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.open-read-mode-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.open-read-mode-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.open-read-mode-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.open-read-mode-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.open-read-mode-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.open-read-mode-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.open-read-mode-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.open-read-mode-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.open-read-mode-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.open-read-mode-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.open-read-mode-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.open-read-mode-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.open-read-mode-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.open-read-mode-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.open-read-mode-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.open-read-mode-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.open-read-mode-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.open-read-mode-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.open-read-mode-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.open-read-mode-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.open-read-mode-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.open-read-mode-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.open-read-mode-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.open-read-mode-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.open-read-mode-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.open-read-mode-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.open-read-mode-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.open-read-mode-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.open-read-mode-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.open-read-mode-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.open-read-mode-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.open-read-mode-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.open-read-mode-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.open-read-mode-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.open-read-mode-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.open-read-mode-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.open-read-mode-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.open-read-mode-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.open-read-mode-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.open-read-mode-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.open-read-mode-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.open-read-mode-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.open-read-mode-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.open-read-mode-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.open-read-mode-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.open-read-mode-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.open-read-mode-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.open-read-mode-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.open-read-mode-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.open-read-mode-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.open-read-mode-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.open-read-mode-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.open-read-mode-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.open-read-mode-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.open-read-mode-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.open-read-mode-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.open-read-mode-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.open-read-mode-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.open-read-mode-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.open-read-mode-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.open-read-mode-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.open-read-mode-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.open-read-mode-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.open-read-mode-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.open-read-mode-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.open-read-mode-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .open-read-mode-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .open-read-mode-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .open-read-mode-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .open-read-mode-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .open-read-mode-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .open-read-mode-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .open-read-mode-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .open-read-mode-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .open-read-mode-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .open-read-mode-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .open-read-mode-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .open-read-mode-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.open-read-mode-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.open-read-mode-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--tutorial-color-11);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.open-read-mode-button.pill-alt .button-text {
  color: var(--challenges-card-to-do-2);
  font-weight: normal;
  z-index: 11;
}
.open-read-mode-button.pill-alt:hover::before,
.open-read-mode-button.pill-alt.selected::before {
  background: var(--button-border);
}
.open-read-mode-button.pill-alt:hover .button-text,
.open-read-mode-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.open-read-mode-button.pill-alt.disabled,
.open-read-mode-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.open-read-mode-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.open-read-mode-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.open-read-mode-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.open-read-mode-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.open-read-mode-button.round .icon,
.open-read-mode-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.open-read-mode-button.round:hover,
.open-read-mode-button.round.selected {
  opacity: 1;
}
.open-read-mode-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.open-read-mode-button.round.disabled {
  pointer-events: none;
}
.open-read-mode-button.round.disabled .icon {
  filter: saturate(0);
}
.open-read-mode-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.open-read-mode-button.round[data-size="regular"].active {
  opacity: 1;
}
.open-read-mode-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.open-read-mode-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.open-read-mode-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.open-read-mode-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.open-read-mode-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.open-read-mode-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.open-read-mode-button.nav {
  flex-wrap: nowrap;
}
.open-read-mode-button.nav svg {
  color: var(--troubadour-main);
}
.open-read-mode-button.nav .icon,
.open-read-mode-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.open-read-mode-button.nav .button-text {
  color: var(--tutorial-color-11);
  font-weight: bold;
}
.open-read-mode-button.nav:hover {
  text-decoration: underline;
}
.open-read-mode-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.open-read-mode-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.open-read-mode-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.open-read-mode-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.open-read-mode-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.open-read-mode-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.open-read-mode-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.open-read-mode-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.open-read-mode-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.open-read-mode-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.open-read-mode-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.open-read-mode-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.open-read-mode-button.nav[data-size="large"] .icon {
  height: 80px;
}
.open-read-mode-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.open-read-mode-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.open-read-mode-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.open-read-mode-button.nav[data-size="small"] {
  padding: 10px;
}
.open-read-mode-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.open-read-mode-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.open-read-mode-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.open-read-mode-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.open-read-mode-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.open-read-mode-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.open-read-mode-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.open-read-mode-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.back-to-challenges-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.back-to-challenges-button:focus {
  text-decoration: none;
}
.back-to-challenges-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.back-to-challenges-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.back-to-challenges-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.back-to-challenges-button:active,
.back-to-challenges-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.back-to-challenges-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.back-to-challenges-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--troubadour-main);
  border-radius: inherit;
  z-index: 10;
}
.back-to-challenges-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.back-to-challenges-button.legacy .button-text,
.back-to-challenges-button.legacy .icon {
  z-index: 11;
}
.back-to-challenges-button.legacy .button-text {
  color: var(--troubadour-main);
  font-weight: normal;
  z-index: 11;
}
.back-to-challenges-button.legacy svg {
  color: var(--troubadour-main);
}
.back-to-challenges-button.legacy:hover::before,
.back-to-challenges-button.legacy.selected::before {
  background-color: var(--troubadour-main);
  border: 2px solid var(--troubadour-main);
}
.back-to-challenges-button.legacy:hover .button-text,
.back-to-challenges-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.back-to-challenges-button.legacy:hover img,
.back-to-challenges-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.back-to-challenges-button.legacy.disabled {
  pointer-events: none;
}
.back-to-challenges-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.back-to-challenges-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.back-to-challenges-button.legacy.disabled .icon {
  opacity: 0.5;
}
.back-to-challenges-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.back-to-challenges-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.back-to-challenges-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.back-to-challenges-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.back-to-challenges-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.back-to-challenges-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.back-to-challenges-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.back-to-challenges-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.back-to-challenges-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.back-to-challenges-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.back-to-challenges-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.back-to-challenges-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.back-to-challenges-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.back-to-challenges-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.back-to-challenges-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.back-to-challenges-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.back-to-challenges-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.back-to-challenges-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.back-to-challenges-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.back-to-challenges-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.back-to-challenges-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.back-to-challenges-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.back-to-challenges-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.back-to-challenges-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.back-to-challenges-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.back-to-challenges-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.back-to-challenges-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.back-to-challenges-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--troubadour-main);
  border: 2px solid var(--troubadour-main);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.back-to-challenges-button.pill .button-text,
.back-to-challenges-button.pill .icon {
  z-index: 11;
}
.back-to-challenges-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.back-to-challenges-button.pill svg {
  color: var(--default-color-2);
}
.back-to-challenges-button.pill:hover::before,
.back-to-challenges-button.pill.selected::before {
  filter: brightness(1.3);
}
.back-to-challenges-button.pill:hover img,
.back-to-challenges-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.back-to-challenges-button.pill.no-shadow::before {
  box-shadow: none;
}
.back-to-challenges-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.back-to-challenges-button.pill.has-border:hover::before,
.back-to-challenges-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.back-to-challenges-button.pill.alt-hover:hover::before,
.back-to-challenges-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.back-to-challenges-button.pill.alt-hover:hover .icon,
.back-to-challenges-button.pill.alt-hover.selected .icon,
.back-to-challenges-button.pill.alt-hover:hover .button-text,
.back-to-challenges-button.pill.alt-hover.selected .button-text {
  color: var(--troubadour-main);
}
.back-to-challenges-button.pill.alt-hover:hover .icon,
.back-to-challenges-button.pill.alt-hover.selected .icon {
  background-color: var(--troubadour-main);
}
.back-to-challenges-button.pill.disabled,
.back-to-challenges-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.back-to-challenges-button.pill.disabled::before,
.back-to-challenges-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.back-to-challenges-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.back-to-challenges-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.back-to-challenges-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.back-to-challenges-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.back-to-challenges-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.back-to-challenges-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.back-to-challenges-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.back-to-challenges-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.back-to-challenges-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.back-to-challenges-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.back-to-challenges-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.back-to-challenges-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.back-to-challenges-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.back-to-challenges-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.back-to-challenges-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.back-to-challenges-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.back-to-challenges-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.back-to-challenges-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.back-to-challenges-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.back-to-challenges-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.back-to-challenges-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.back-to-challenges-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.back-to-challenges-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.back-to-challenges-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.back-to-challenges-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.back-to-challenges-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.back-to-challenges-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.back-to-challenges-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.back-to-challenges-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.back-to-challenges-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.back-to-challenges-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.back-to-challenges-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.back-to-challenges-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.back-to-challenges-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.back-to-challenges-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.back-to-challenges-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.back-to-challenges-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.back-to-challenges-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.back-to-challenges-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.back-to-challenges-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.back-to-challenges-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.back-to-challenges-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.back-to-challenges-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.back-to-challenges-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.back-to-challenges-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.back-to-challenges-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.back-to-challenges-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.back-to-challenges-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.back-to-challenges-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.back-to-challenges-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.back-to-challenges-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.back-to-challenges-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.back-to-challenges-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.back-to-challenges-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.back-to-challenges-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.back-to-challenges-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.back-to-challenges-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.back-to-challenges-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.back-to-challenges-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.back-to-challenges-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.back-to-challenges-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.back-to-challenges-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.back-to-challenges-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.back-to-challenges-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.back-to-challenges-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.back-to-challenges-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.back-to-challenges-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.back-to-challenges-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.back-to-challenges-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.back-to-challenges-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.back-to-challenges-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.back-to-challenges-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .back-to-challenges-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .back-to-challenges-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .back-to-challenges-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .back-to-challenges-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .back-to-challenges-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .back-to-challenges-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .back-to-challenges-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .back-to-challenges-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .back-to-challenges-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .back-to-challenges-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .back-to-challenges-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .back-to-challenges-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.back-to-challenges-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.back-to-challenges-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--troubadour-main);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.back-to-challenges-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.back-to-challenges-button.pill-alt:hover::before,
.back-to-challenges-button.pill-alt.selected::before {
  background: var(--button-border);
}
.back-to-challenges-button.pill-alt:hover .button-text,
.back-to-challenges-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.back-to-challenges-button.pill-alt.disabled,
.back-to-challenges-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.back-to-challenges-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.back-to-challenges-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.back-to-challenges-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.back-to-challenges-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.back-to-challenges-button.round .icon,
.back-to-challenges-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back-to-challenges-button.round:hover,
.back-to-challenges-button.round.selected {
  opacity: 1;
}
.back-to-challenges-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.back-to-challenges-button.round.disabled {
  pointer-events: none;
}
.back-to-challenges-button.round.disabled .icon {
  filter: saturate(0);
}
.back-to-challenges-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.back-to-challenges-button.round[data-size="regular"].active {
  opacity: 1;
}
.back-to-challenges-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.back-to-challenges-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.back-to-challenges-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.back-to-challenges-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.back-to-challenges-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.back-to-challenges-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.back-to-challenges-button.nav {
  flex-wrap: nowrap;
}
.back-to-challenges-button.nav svg {
  color: var(--troubadour-main);
}
.back-to-challenges-button.nav .icon,
.back-to-challenges-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back-to-challenges-button.nav .button-text {
  color: var(--troubadour-main);
  font-weight: bold;
}
.back-to-challenges-button.nav:hover {
  text-decoration: underline;
}
.back-to-challenges-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.back-to-challenges-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.back-to-challenges-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.back-to-challenges-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.back-to-challenges-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.back-to-challenges-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.back-to-challenges-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.back-to-challenges-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.back-to-challenges-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.back-to-challenges-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.back-to-challenges-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.back-to-challenges-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.back-to-challenges-button.nav[data-size="large"] .icon {
  height: 80px;
}
.back-to-challenges-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.back-to-challenges-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.back-to-challenges-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.back-to-challenges-button.nav[data-size="small"] {
  padding: 10px;
}
.back-to-challenges-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.back-to-challenges-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.back-to-challenges-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.back-to-challenges-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.back-to-challenges-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.back-to-challenges-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.back-to-challenges-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.back-to-challenges-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.student-correction-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.student-correction-button:focus {
  text-decoration: none;
}
.student-correction-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.student-correction-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.student-correction-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.student-correction-button:active,
.student-correction-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.student-correction-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.student-correction-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-waitval-very-dark);
  border-radius: inherit;
  z-index: 10;
}
.student-correction-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.student-correction-button.legacy .button-text,
.student-correction-button.legacy .icon {
  z-index: 11;
}
.student-correction-button.legacy .button-text {
  color: var(--workstate-waitval-very-dark);
  font-weight: normal;
  z-index: 11;
}
.student-correction-button.legacy svg {
  color: var(--workstate-waitval-very-dark);
}
.student-correction-button.legacy:hover::before,
.student-correction-button.legacy.selected::before {
  background-color: var(--workstate-waitval-very-dark);
  border: 2px solid var(--workstate-waitval-very-dark);
}
.student-correction-button.legacy:hover .button-text,
.student-correction-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.student-correction-button.legacy:hover img,
.student-correction-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.student-correction-button.legacy.disabled {
  pointer-events: none;
}
.student-correction-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.student-correction-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.student-correction-button.legacy.disabled .icon {
  opacity: 0.5;
}
.student-correction-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.student-correction-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.student-correction-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.student-correction-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.student-correction-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.student-correction-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.student-correction-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.student-correction-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.student-correction-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.student-correction-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.student-correction-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.student-correction-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.student-correction-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.student-correction-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.student-correction-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.student-correction-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.student-correction-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.student-correction-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.student-correction-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.student-correction-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.student-correction-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.student-correction-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.student-correction-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.student-correction-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.student-correction-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.student-correction-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.student-correction-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.student-correction-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-waitval-very-dark);
  border: 2px solid var(--workstate-waitval-very-dark);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.student-correction-button.pill .button-text,
.student-correction-button.pill .icon {
  z-index: 11;
}
.student-correction-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.student-correction-button.pill svg {
  color: var(--default-color-2);
}
.student-correction-button.pill:hover::before,
.student-correction-button.pill.selected::before {
  filter: brightness(1.3);
}
.student-correction-button.pill:hover img,
.student-correction-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.student-correction-button.pill.no-shadow::before {
  box-shadow: none;
}
.student-correction-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.student-correction-button.pill.has-border:hover::before,
.student-correction-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.student-correction-button.pill.alt-hover:hover::before,
.student-correction-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.student-correction-button.pill.alt-hover:hover .icon,
.student-correction-button.pill.alt-hover.selected .icon,
.student-correction-button.pill.alt-hover:hover .button-text,
.student-correction-button.pill.alt-hover.selected .button-text {
  color: var(--workstate-waitval-very-dark);
}
.student-correction-button.pill.alt-hover:hover .icon,
.student-correction-button.pill.alt-hover.selected .icon {
  background-color: var(--workstate-waitval-very-dark);
}
.student-correction-button.pill.disabled,
.student-correction-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.student-correction-button.pill.disabled::before,
.student-correction-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.student-correction-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.student-correction-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.student-correction-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.student-correction-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.student-correction-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.student-correction-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.student-correction-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.student-correction-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.student-correction-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.student-correction-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.student-correction-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.student-correction-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.student-correction-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.student-correction-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.student-correction-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.student-correction-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.student-correction-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.student-correction-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.student-correction-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.student-correction-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.student-correction-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.student-correction-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.student-correction-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.student-correction-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.student-correction-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.student-correction-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.student-correction-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.student-correction-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.student-correction-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.student-correction-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.student-correction-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.student-correction-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.student-correction-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.student-correction-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.student-correction-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.student-correction-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.student-correction-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.student-correction-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.student-correction-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.student-correction-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.student-correction-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.student-correction-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.student-correction-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.student-correction-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.student-correction-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.student-correction-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.student-correction-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.student-correction-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.student-correction-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.student-correction-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.student-correction-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.student-correction-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.student-correction-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.student-correction-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.student-correction-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.student-correction-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.student-correction-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.student-correction-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.student-correction-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.student-correction-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.student-correction-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.student-correction-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.student-correction-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.student-correction-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.student-correction-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.student-correction-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.student-correction-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.student-correction-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.student-correction-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.student-correction-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.student-correction-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.student-correction-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.student-correction-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.student-correction-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.student-correction-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.student-correction-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.student-correction-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.student-correction-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.student-correction-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.student-correction-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.student-correction-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.student-correction-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.student-correction-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.student-correction-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.student-correction-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .student-correction-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .student-correction-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .student-correction-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .student-correction-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .student-correction-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .student-correction-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .student-correction-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .student-correction-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .student-correction-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .student-correction-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .student-correction-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.student-correction-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.student-correction-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-waitval-very-dark);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.student-correction-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.student-correction-button.pill-alt:hover::before,
.student-correction-button.pill-alt.selected::before {
  background: var(--button-border);
}
.student-correction-button.pill-alt:hover .button-text,
.student-correction-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.student-correction-button.pill-alt.disabled,
.student-correction-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.student-correction-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.student-correction-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.student-correction-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.student-correction-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.student-correction-button.round .icon,
.student-correction-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.student-correction-button.round:hover,
.student-correction-button.round.selected {
  opacity: 1;
}
.student-correction-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.student-correction-button.round.disabled {
  pointer-events: none;
}
.student-correction-button.round.disabled .icon {
  filter: saturate(0);
}
.student-correction-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.student-correction-button.round[data-size="regular"].active {
  opacity: 1;
}
.student-correction-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.student-correction-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.student-correction-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.student-correction-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.student-correction-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.student-correction-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.student-correction-button.nav {
  flex-wrap: nowrap;
}
.student-correction-button.nav svg {
  color: var(--troubadour-main);
}
.student-correction-button.nav .icon,
.student-correction-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.student-correction-button.nav .button-text {
  color: var(--workstate-waitval-very-dark);
  font-weight: bold;
}
.student-correction-button.nav:hover {
  text-decoration: underline;
}
.student-correction-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.student-correction-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.student-correction-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.student-correction-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.student-correction-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.student-correction-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.student-correction-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.student-correction-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.student-correction-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.student-correction-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.student-correction-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.student-correction-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.student-correction-button.nav[data-size="large"] .icon {
  height: 80px;
}
.student-correction-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.student-correction-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.student-correction-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.student-correction-button.nav[data-size="small"] {
  padding: 10px;
}
.student-correction-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.student-correction-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.student-correction-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.student-correction-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.student-correction-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.student-correction-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.student-correction-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.student-correction-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.student-revision-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.student-revision-button:focus {
  text-decoration: none;
}
.student-revision-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.student-revision-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.student-revision-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.student-revision-button:active,
.student-revision-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.student-revision-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.student-revision-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-needrev-dark);
  border-radius: inherit;
  z-index: 10;
}
.student-revision-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.student-revision-button.legacy .button-text,
.student-revision-button.legacy .icon {
  z-index: 11;
}
.student-revision-button.legacy .button-text {
  color: var(--workstate-needrev-dark);
  font-weight: normal;
  z-index: 11;
}
.student-revision-button.legacy svg {
  color: var(--workstate-needrev-dark);
}
.student-revision-button.legacy:hover::before,
.student-revision-button.legacy.selected::before {
  background-color: var(--workstate-needrev-dark);
  border: 2px solid var(--workstate-needrev-dark);
}
.student-revision-button.legacy:hover .button-text,
.student-revision-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.student-revision-button.legacy:hover img,
.student-revision-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.student-revision-button.legacy.disabled {
  pointer-events: none;
}
.student-revision-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.student-revision-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.student-revision-button.legacy.disabled .icon {
  opacity: 0.5;
}
.student-revision-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.student-revision-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.student-revision-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.student-revision-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.student-revision-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.student-revision-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.student-revision-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.student-revision-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.student-revision-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.student-revision-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.student-revision-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.student-revision-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.student-revision-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.student-revision-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.student-revision-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.student-revision-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.student-revision-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.student-revision-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.student-revision-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.student-revision-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.student-revision-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.student-revision-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.student-revision-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.student-revision-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.student-revision-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.student-revision-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.student-revision-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.student-revision-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-needrev-dark);
  border: 2px solid var(--workstate-needrev-dark);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.student-revision-button.pill .button-text,
.student-revision-button.pill .icon {
  z-index: 11;
}
.student-revision-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.student-revision-button.pill svg {
  color: var(--default-color-2);
}
.student-revision-button.pill:hover::before,
.student-revision-button.pill.selected::before {
  filter: brightness(1.3);
}
.student-revision-button.pill:hover img,
.student-revision-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.student-revision-button.pill.no-shadow::before {
  box-shadow: none;
}
.student-revision-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.student-revision-button.pill.has-border:hover::before,
.student-revision-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.student-revision-button.pill.alt-hover:hover::before,
.student-revision-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.student-revision-button.pill.alt-hover:hover .icon,
.student-revision-button.pill.alt-hover.selected .icon,
.student-revision-button.pill.alt-hover:hover .button-text,
.student-revision-button.pill.alt-hover.selected .button-text {
  color: var(--workstate-needrev-dark);
}
.student-revision-button.pill.alt-hover:hover .icon,
.student-revision-button.pill.alt-hover.selected .icon {
  background-color: var(--workstate-needrev-dark);
}
.student-revision-button.pill.disabled,
.student-revision-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.student-revision-button.pill.disabled::before,
.student-revision-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.student-revision-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.student-revision-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.student-revision-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.student-revision-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.student-revision-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.student-revision-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.student-revision-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.student-revision-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.student-revision-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.student-revision-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.student-revision-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.student-revision-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.student-revision-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.student-revision-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.student-revision-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.student-revision-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.student-revision-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.student-revision-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.student-revision-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.student-revision-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.student-revision-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.student-revision-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.student-revision-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.student-revision-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.student-revision-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.student-revision-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.student-revision-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.student-revision-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.student-revision-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.student-revision-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.student-revision-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.student-revision-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.student-revision-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.student-revision-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.student-revision-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.student-revision-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.student-revision-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.student-revision-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.student-revision-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.student-revision-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.student-revision-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.student-revision-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.student-revision-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.student-revision-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.student-revision-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.student-revision-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.student-revision-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.student-revision-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.student-revision-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.student-revision-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.student-revision-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.student-revision-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.student-revision-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.student-revision-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.student-revision-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.student-revision-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.student-revision-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.student-revision-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.student-revision-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.student-revision-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.student-revision-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.student-revision-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.student-revision-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.student-revision-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.student-revision-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.student-revision-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.student-revision-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.student-revision-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.student-revision-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.student-revision-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.student-revision-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.student-revision-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.student-revision-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.student-revision-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.student-revision-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.student-revision-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.student-revision-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.student-revision-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.student-revision-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.student-revision-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.student-revision-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.student-revision-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.student-revision-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.student-revision-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.student-revision-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .student-revision-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .student-revision-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .student-revision-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .student-revision-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .student-revision-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .student-revision-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .student-revision-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .student-revision-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .student-revision-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .student-revision-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .student-revision-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .student-revision-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.student-revision-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.student-revision-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-needrev-dark);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.student-revision-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.student-revision-button.pill-alt:hover::before,
.student-revision-button.pill-alt.selected::before {
  background: var(--button-border);
}
.student-revision-button.pill-alt:hover .button-text,
.student-revision-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.student-revision-button.pill-alt.disabled,
.student-revision-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.student-revision-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.student-revision-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.student-revision-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.student-revision-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.student-revision-button.round .icon,
.student-revision-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.student-revision-button.round:hover,
.student-revision-button.round.selected {
  opacity: 1;
}
.student-revision-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.student-revision-button.round.disabled {
  pointer-events: none;
}
.student-revision-button.round.disabled .icon {
  filter: saturate(0);
}
.student-revision-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.student-revision-button.round[data-size="regular"].active {
  opacity: 1;
}
.student-revision-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.student-revision-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.student-revision-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.student-revision-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.student-revision-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.student-revision-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.student-revision-button.nav {
  flex-wrap: nowrap;
}
.student-revision-button.nav svg {
  color: var(--troubadour-main);
}
.student-revision-button.nav .icon,
.student-revision-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.student-revision-button.nav .button-text {
  color: var(--workstate-needrev-dark);
  font-weight: bold;
}
.student-revision-button.nav:hover {
  text-decoration: underline;
}
.student-revision-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.student-revision-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.student-revision-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.student-revision-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.student-revision-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.student-revision-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.student-revision-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.student-revision-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.student-revision-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.student-revision-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.student-revision-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.student-revision-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.student-revision-button.nav[data-size="large"] .icon {
  height: 80px;
}
.student-revision-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.student-revision-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.student-revision-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.student-revision-button.nav[data-size="small"] {
  padding: 10px;
}
.student-revision-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.student-revision-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.student-revision-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.student-revision-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.student-revision-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.student-revision-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.student-revision-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.student-revision-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.teacher-add-comment-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.teacher-add-comment-button:focus {
  text-decoration: none;
}
.teacher-add-comment-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.teacher-add-comment-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.teacher-add-comment-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.teacher-add-comment-button:active,
.teacher-add-comment-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.teacher-add-comment-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-add-comment-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-comment);
  border-radius: inherit;
  z-index: 10;
}
.teacher-add-comment-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.teacher-add-comment-button.legacy .button-text,
.teacher-add-comment-button.legacy .icon {
  z-index: 11;
}
.teacher-add-comment-button.legacy .button-text {
  color: var(--workstate-comment);
  font-weight: normal;
  z-index: 11;
}
.teacher-add-comment-button.legacy svg {
  color: var(--workstate-comment);
}
.teacher-add-comment-button.legacy:hover::before,
.teacher-add-comment-button.legacy.selected::before {
  background-color: var(--workstate-comment);
  border: 2px solid var(--workstate-comment);
}
.teacher-add-comment-button.legacy:hover .button-text,
.teacher-add-comment-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.teacher-add-comment-button.legacy:hover img,
.teacher-add-comment-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.teacher-add-comment-button.legacy.disabled {
  pointer-events: none;
}
.teacher-add-comment-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.teacher-add-comment-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.teacher-add-comment-button.legacy.disabled .icon {
  opacity: 0.5;
}
.teacher-add-comment-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.teacher-add-comment-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.teacher-add-comment-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-add-comment-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.teacher-add-comment-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.teacher-add-comment-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.teacher-add-comment-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.teacher-add-comment-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.teacher-add-comment-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.teacher-add-comment-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.teacher-add-comment-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.teacher-add-comment-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.teacher-add-comment-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.teacher-add-comment-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.teacher-add-comment-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.teacher-add-comment-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.teacher-add-comment-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.teacher-add-comment-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.teacher-add-comment-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.teacher-add-comment-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.teacher-add-comment-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.teacher-add-comment-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.teacher-add-comment-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.teacher-add-comment-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.teacher-add-comment-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.teacher-add-comment-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.teacher-add-comment-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-add-comment-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-comment);
  border: 2px solid var(--workstate-comment);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.teacher-add-comment-button.pill .button-text,
.teacher-add-comment-button.pill .icon {
  z-index: 11;
}
.teacher-add-comment-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.teacher-add-comment-button.pill svg {
  color: var(--default-color-2);
}
.teacher-add-comment-button.pill:hover::before,
.teacher-add-comment-button.pill.selected::before {
  filter: brightness(1.3);
}
.teacher-add-comment-button.pill:hover img,
.teacher-add-comment-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.teacher-add-comment-button.pill.no-shadow::before {
  box-shadow: none;
}
.teacher-add-comment-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.teacher-add-comment-button.pill.has-border:hover::before,
.teacher-add-comment-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.teacher-add-comment-button.pill.alt-hover:hover::before,
.teacher-add-comment-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.teacher-add-comment-button.pill.alt-hover:hover .icon,
.teacher-add-comment-button.pill.alt-hover.selected .icon,
.teacher-add-comment-button.pill.alt-hover:hover .button-text,
.teacher-add-comment-button.pill.alt-hover.selected .button-text {
  color: var(--workstate-comment);
}
.teacher-add-comment-button.pill.alt-hover:hover .icon,
.teacher-add-comment-button.pill.alt-hover.selected .icon {
  background-color: var(--workstate-comment);
}
.teacher-add-comment-button.pill.disabled,
.teacher-add-comment-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.teacher-add-comment-button.pill.disabled::before,
.teacher-add-comment-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.teacher-add-comment-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.teacher-add-comment-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.teacher-add-comment-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.teacher-add-comment-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-add-comment-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.teacher-add-comment-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.teacher-add-comment-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.teacher-add-comment-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.teacher-add-comment-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.teacher-add-comment-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.teacher-add-comment-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.teacher-add-comment-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.teacher-add-comment-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.teacher-add-comment-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.teacher-add-comment-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.teacher-add-comment-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.teacher-add-comment-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.teacher-add-comment-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.teacher-add-comment-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.teacher-add-comment-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.teacher-add-comment-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.teacher-add-comment-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.teacher-add-comment-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.teacher-add-comment-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.teacher-add-comment-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.teacher-add-comment-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.teacher-add-comment-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.teacher-add-comment-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.teacher-add-comment-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.teacher-add-comment-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.teacher-add-comment-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.teacher-add-comment-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.teacher-add-comment-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.teacher-add-comment-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.teacher-add-comment-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.teacher-add-comment-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.teacher-add-comment-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.teacher-add-comment-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.teacher-add-comment-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.teacher-add-comment-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.teacher-add-comment-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.teacher-add-comment-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.teacher-add-comment-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.teacher-add-comment-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.teacher-add-comment-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.teacher-add-comment-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.teacher-add-comment-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-add-comment-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.teacher-add-comment-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-add-comment-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.teacher-add-comment-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.teacher-add-comment-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.teacher-add-comment-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.teacher-add-comment-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.teacher-add-comment-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.teacher-add-comment-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-add-comment-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.teacher-add-comment-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-add-comment-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.teacher-add-comment-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.teacher-add-comment-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.teacher-add-comment-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.teacher-add-comment-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.teacher-add-comment-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.teacher-add-comment-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-add-comment-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.teacher-add-comment-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-add-comment-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.teacher-add-comment-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.teacher-add-comment-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.teacher-add-comment-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.teacher-add-comment-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .teacher-add-comment-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .teacher-add-comment-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .teacher-add-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.teacher-add-comment-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-add-comment-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-comment);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.teacher-add-comment-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.teacher-add-comment-button.pill-alt:hover::before,
.teacher-add-comment-button.pill-alt.selected::before {
  background: var(--button-border);
}
.teacher-add-comment-button.pill-alt:hover .button-text,
.teacher-add-comment-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.teacher-add-comment-button.pill-alt.disabled,
.teacher-add-comment-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.teacher-add-comment-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-add-comment-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.teacher-add-comment-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.teacher-add-comment-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.teacher-add-comment-button.round .icon,
.teacher-add-comment-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teacher-add-comment-button.round:hover,
.teacher-add-comment-button.round.selected {
  opacity: 1;
}
.teacher-add-comment-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.teacher-add-comment-button.round.disabled {
  pointer-events: none;
}
.teacher-add-comment-button.round.disabled .icon {
  filter: saturate(0);
}
.teacher-add-comment-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.teacher-add-comment-button.round[data-size="regular"].active {
  opacity: 1;
}
.teacher-add-comment-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.teacher-add-comment-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.teacher-add-comment-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.teacher-add-comment-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.teacher-add-comment-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.teacher-add-comment-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.teacher-add-comment-button.nav {
  flex-wrap: nowrap;
}
.teacher-add-comment-button.nav svg {
  color: var(--troubadour-main);
}
.teacher-add-comment-button.nav .icon,
.teacher-add-comment-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teacher-add-comment-button.nav .button-text {
  color: var(--workstate-comment);
  font-weight: bold;
}
.teacher-add-comment-button.nav:hover {
  text-decoration: underline;
}
.teacher-add-comment-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.teacher-add-comment-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.teacher-add-comment-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.teacher-add-comment-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.teacher-add-comment-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.teacher-add-comment-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.teacher-add-comment-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.teacher-add-comment-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.teacher-add-comment-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.teacher-add-comment-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.teacher-add-comment-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.teacher-add-comment-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.teacher-add-comment-button.nav[data-size="large"] .icon {
  height: 80px;
}
.teacher-add-comment-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.teacher-add-comment-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.teacher-add-comment-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.teacher-add-comment-button.nav[data-size="small"] {
  padding: 10px;
}
.teacher-add-comment-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.teacher-add-comment-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.teacher-add-comment-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.teacher-add-comment-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.teacher-add-comment-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.teacher-add-comment-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.teacher-add-comment-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.teacher-add-comment-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.completed-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.completed-button:focus {
  text-decoration: none;
}
.completed-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.completed-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.completed-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.completed-button:active,
.completed-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.completed-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.completed-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-completed-very-dark);
  border-radius: inherit;
  z-index: 10;
}
.completed-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.completed-button.legacy .button-text,
.completed-button.legacy .icon {
  z-index: 11;
}
.completed-button.legacy .button-text {
  color: var(--workstate-completed-very-dark);
  font-weight: normal;
  z-index: 11;
}
.completed-button.legacy svg {
  color: var(--workstate-completed-very-dark);
}
.completed-button.legacy:hover::before,
.completed-button.legacy.selected::before {
  background-color: var(--workstate-completed-very-dark);
  border: 2px solid var(--workstate-completed-very-dark);
}
.completed-button.legacy:hover .button-text,
.completed-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.completed-button.legacy:hover img,
.completed-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.completed-button.legacy.disabled {
  pointer-events: none;
}
.completed-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.completed-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.completed-button.legacy.disabled .icon {
  opacity: 0.5;
}
.completed-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.completed-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.completed-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.completed-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.completed-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.completed-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.completed-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.completed-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.completed-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.completed-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.completed-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.completed-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.completed-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.completed-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.completed-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.completed-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.completed-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.completed-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.completed-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.completed-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.completed-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.completed-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.completed-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.completed-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.completed-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.completed-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.completed-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.completed-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-completed-very-dark);
  border: 2px solid var(--workstate-completed-very-dark);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.completed-button.pill .button-text,
.completed-button.pill .icon {
  z-index: 11;
}
.completed-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.completed-button.pill svg {
  color: var(--default-color-2);
}
.completed-button.pill:hover::before,
.completed-button.pill.selected::before {
  filter: brightness(1.3);
}
.completed-button.pill:hover img,
.completed-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.completed-button.pill.no-shadow::before {
  box-shadow: none;
}
.completed-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.completed-button.pill.has-border:hover::before,
.completed-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.completed-button.pill.alt-hover:hover::before,
.completed-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.completed-button.pill.alt-hover:hover .icon,
.completed-button.pill.alt-hover.selected .icon,
.completed-button.pill.alt-hover:hover .button-text,
.completed-button.pill.alt-hover.selected .button-text {
  color: var(--workstate-completed-very-dark);
}
.completed-button.pill.alt-hover:hover .icon,
.completed-button.pill.alt-hover.selected .icon {
  background-color: var(--workstate-completed-very-dark);
}
.completed-button.pill.disabled,
.completed-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.completed-button.pill.disabled::before,
.completed-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.completed-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.completed-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.completed-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.completed-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.completed-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.completed-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.completed-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.completed-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.completed-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.completed-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.completed-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.completed-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.completed-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.completed-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.completed-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.completed-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.completed-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.completed-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.completed-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.completed-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.completed-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.completed-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.completed-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.completed-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.completed-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.completed-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.completed-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.completed-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.completed-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.completed-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.completed-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.completed-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.completed-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.completed-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.completed-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.completed-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.completed-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.completed-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.completed-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.completed-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.completed-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.completed-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.completed-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.completed-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.completed-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.completed-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.completed-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.completed-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.completed-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.completed-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.completed-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.completed-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.completed-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.completed-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.completed-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.completed-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.completed-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.completed-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.completed-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.completed-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.completed-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.completed-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.completed-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.completed-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.completed-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.completed-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.completed-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.completed-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.completed-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.completed-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.completed-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.completed-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.completed-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.completed-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.completed-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.completed-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.completed-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.completed-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.completed-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.completed-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.completed-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.completed-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.completed-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.completed-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.completed-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .completed-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .completed-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .completed-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .completed-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .completed-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .completed-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .completed-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .completed-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .completed-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .completed-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .completed-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .completed-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.completed-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.completed-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-completed-very-dark);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.completed-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.completed-button.pill-alt:hover::before,
.completed-button.pill-alt.selected::before {
  background: var(--button-border);
}
.completed-button.pill-alt:hover .button-text,
.completed-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.completed-button.pill-alt.disabled,
.completed-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.completed-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.completed-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.completed-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.completed-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.completed-button.round .icon,
.completed-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.completed-button.round:hover,
.completed-button.round.selected {
  opacity: 1;
}
.completed-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.completed-button.round.disabled {
  pointer-events: none;
}
.completed-button.round.disabled .icon {
  filter: saturate(0);
}
.completed-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.completed-button.round[data-size="regular"].active {
  opacity: 1;
}
.completed-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.completed-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.completed-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.completed-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.completed-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.completed-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.completed-button.nav {
  flex-wrap: nowrap;
}
.completed-button.nav svg {
  color: var(--troubadour-main);
}
.completed-button.nav .icon,
.completed-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.completed-button.nav .button-text {
  color: var(--workstate-completed-very-dark);
  font-weight: bold;
}
.completed-button.nav:hover {
  text-decoration: underline;
}
.completed-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.completed-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.completed-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.completed-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.completed-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.completed-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.completed-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.completed-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.completed-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.completed-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.completed-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.completed-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.completed-button.nav[data-size="large"] .icon {
  height: 80px;
}
.completed-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.completed-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.completed-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.completed-button.nav[data-size="small"] {
  padding: 10px;
}
.completed-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.completed-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.completed-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.completed-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.completed-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.completed-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.completed-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.completed-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.construction-mark-undone {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.construction-mark-undone:focus {
  text-decoration: none;
}
.construction-mark-undone[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.construction-mark-undone .button-text {
  font-family: Sofia Pro, sans-serif;
}
.construction-mark-undone .button-text.ws-no-wrap {
  white-space: nowrap;
}
.construction-mark-undone:active,
.construction-mark-undone:hover {
  text-decoration: none;
  cursor: pointer;
}
.construction-mark-undone.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.construction-mark-undone.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--challenge-activate);
  border-radius: inherit;
  z-index: 10;
}
.construction-mark-undone.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.construction-mark-undone.legacy .button-text,
.construction-mark-undone.legacy .icon {
  z-index: 11;
}
.construction-mark-undone.legacy .button-text {
  color: var(--challenge-activate);
  font-weight: normal;
  z-index: 11;
}
.construction-mark-undone.legacy svg {
  color: var(--challenge-activate);
}
.construction-mark-undone.legacy:hover::before,
.construction-mark-undone.legacy.selected::before {
  background-color: var(--challenge-activate);
  border: 2px solid var(--challenge-activate);
}
.construction-mark-undone.legacy:hover .button-text,
.construction-mark-undone.legacy.selected .button-text {
  color: var(--default-color-2);
}
.construction-mark-undone.legacy:hover img,
.construction-mark-undone.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.construction-mark-undone.legacy.disabled {
  pointer-events: none;
}
.construction-mark-undone.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.construction-mark-undone.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.construction-mark-undone.legacy.disabled .icon {
  opacity: 0.5;
}
.construction-mark-undone.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.construction-mark-undone.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.construction-mark-undone.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.construction-mark-undone.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.construction-mark-undone.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.construction-mark-undone.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.construction-mark-undone.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.construction-mark-undone.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.construction-mark-undone.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.construction-mark-undone.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.construction-mark-undone.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.construction-mark-undone.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.construction-mark-undone.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.construction-mark-undone.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.construction-mark-undone.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.construction-mark-undone.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.construction-mark-undone.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.construction-mark-undone.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.construction-mark-undone.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.construction-mark-undone.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.construction-mark-undone.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.construction-mark-undone.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.construction-mark-undone.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.construction-mark-undone.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.construction-mark-undone.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.construction-mark-undone.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.construction-mark-undone.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.construction-mark-undone.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-activate);
  border: 2px solid var(--challenge-activate);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.construction-mark-undone.pill .button-text,
.construction-mark-undone.pill .icon {
  z-index: 11;
}
.construction-mark-undone.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.construction-mark-undone.pill svg {
  color: var(--default-color-2);
}
.construction-mark-undone.pill:hover::before,
.construction-mark-undone.pill.selected::before {
  filter: brightness(1.3);
}
.construction-mark-undone.pill:hover img,
.construction-mark-undone.pill.selected img {
  transform: scale(0.95, 0.95);
}
.construction-mark-undone.pill.no-shadow::before {
  box-shadow: none;
}
.construction-mark-undone.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.construction-mark-undone.pill.has-border:hover::before,
.construction-mark-undone.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.construction-mark-undone.pill.alt-hover:hover::before,
.construction-mark-undone.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.construction-mark-undone.pill.alt-hover:hover .icon,
.construction-mark-undone.pill.alt-hover.selected .icon,
.construction-mark-undone.pill.alt-hover:hover .button-text,
.construction-mark-undone.pill.alt-hover.selected .button-text {
  color: var(--challenge-activate);
}
.construction-mark-undone.pill.alt-hover:hover .icon,
.construction-mark-undone.pill.alt-hover.selected .icon {
  background-color: var(--challenge-activate);
}
.construction-mark-undone.pill.disabled,
.construction-mark-undone.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.construction-mark-undone.pill.disabled::before,
.construction-mark-undone.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.construction-mark-undone.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.construction-mark-undone.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.construction-mark-undone.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.construction-mark-undone.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.construction-mark-undone.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.construction-mark-undone.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.construction-mark-undone.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.construction-mark-undone.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.construction-mark-undone.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.construction-mark-undone.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.construction-mark-undone.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.construction-mark-undone.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.construction-mark-undone.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.construction-mark-undone.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.construction-mark-undone.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.construction-mark-undone.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.construction-mark-undone.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.construction-mark-undone.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.construction-mark-undone.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.construction-mark-undone.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.construction-mark-undone.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.construction-mark-undone.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.construction-mark-undone.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.construction-mark-undone.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.construction-mark-undone.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.construction-mark-undone.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.construction-mark-undone.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.construction-mark-undone.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.construction-mark-undone.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.construction-mark-undone.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.construction-mark-undone.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.construction-mark-undone.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.construction-mark-undone.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.construction-mark-undone.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.construction-mark-undone.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.construction-mark-undone.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.construction-mark-undone.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.construction-mark-undone.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.construction-mark-undone.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.construction-mark-undone.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.construction-mark-undone.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.construction-mark-undone.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.construction-mark-undone.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.construction-mark-undone.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.construction-mark-undone.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.construction-mark-undone.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.construction-mark-undone.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.construction-mark-undone.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.construction-mark-undone.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.construction-mark-undone.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.construction-mark-undone.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.construction-mark-undone.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.construction-mark-undone.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.construction-mark-undone.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.construction-mark-undone.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.construction-mark-undone.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.construction-mark-undone.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.construction-mark-undone.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.construction-mark-undone.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.construction-mark-undone.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.construction-mark-undone.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.construction-mark-undone.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.construction-mark-undone.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.construction-mark-undone.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.construction-mark-undone.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.construction-mark-undone.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.construction-mark-undone.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.construction-mark-undone.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.construction-mark-undone.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.construction-mark-undone.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.construction-mark-undone.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.construction-mark-undone.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.construction-mark-undone.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .construction-mark-undone.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .construction-mark-undone.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .construction-mark-undone.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .construction-mark-undone.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .construction-mark-undone.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .construction-mark-undone.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .construction-mark-undone.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .construction-mark-undone.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .construction-mark-undone.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .construction-mark-undone.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .construction-mark-undone.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .construction-mark-undone.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.construction-mark-undone.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.construction-mark-undone.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenge-activate);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.construction-mark-undone.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.construction-mark-undone.pill-alt:hover::before,
.construction-mark-undone.pill-alt.selected::before {
  background: var(--button-border);
}
.construction-mark-undone.pill-alt:hover .button-text,
.construction-mark-undone.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.construction-mark-undone.pill-alt.disabled,
.construction-mark-undone.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.construction-mark-undone.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.construction-mark-undone.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.construction-mark-undone.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.construction-mark-undone.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.construction-mark-undone.round .icon,
.construction-mark-undone.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.construction-mark-undone.round:hover,
.construction-mark-undone.round.selected {
  opacity: 1;
}
.construction-mark-undone.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.construction-mark-undone.round.disabled {
  pointer-events: none;
}
.construction-mark-undone.round.disabled .icon {
  filter: saturate(0);
}
.construction-mark-undone.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.construction-mark-undone.round[data-size="regular"].active {
  opacity: 1;
}
.construction-mark-undone.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.construction-mark-undone.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.construction-mark-undone.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.construction-mark-undone.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.construction-mark-undone.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.construction-mark-undone.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.construction-mark-undone.nav {
  flex-wrap: nowrap;
}
.construction-mark-undone.nav svg {
  color: var(--troubadour-main);
}
.construction-mark-undone.nav .icon,
.construction-mark-undone.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.construction-mark-undone.nav .button-text {
  color: var(--challenge-activate);
  font-weight: bold;
}
.construction-mark-undone.nav:hover {
  text-decoration: underline;
}
.construction-mark-undone.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.construction-mark-undone.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.construction-mark-undone.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.construction-mark-undone.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.construction-mark-undone.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.construction-mark-undone.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.construction-mark-undone.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.construction-mark-undone.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.construction-mark-undone.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.construction-mark-undone.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.construction-mark-undone.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.construction-mark-undone.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.construction-mark-undone.nav[data-size="large"] .icon {
  height: 80px;
}
.construction-mark-undone.nav[data-size="regular"] {
  padding: 20px 31px;
}
.construction-mark-undone.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.construction-mark-undone.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.construction-mark-undone.nav[data-size="small"] {
  padding: 10px;
}
.construction-mark-undone.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.construction-mark-undone.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.construction-mark-undone.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.construction-mark-undone.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.construction-mark-undone.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.construction-mark-undone.nav[data-size="mini"] {
  padding: 4px 12px;
}
.construction-mark-undone.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.construction-mark-undone.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.construction-mark-as-done {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.construction-mark-as-done:focus {
  text-decoration: none;
}
.construction-mark-as-done[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.construction-mark-as-done .button-text {
  font-family: Sofia Pro, sans-serif;
}
.construction-mark-as-done .button-text.ws-no-wrap {
  white-space: nowrap;
}
.construction-mark-as-done:active,
.construction-mark-as-done:hover {
  text-decoration: none;
  cursor: pointer;
}
.construction-mark-as-done.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.construction-mark-as-done.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--challenges-card-to-do-1);
  border-radius: inherit;
  z-index: 10;
}
.construction-mark-as-done.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.construction-mark-as-done.legacy .button-text,
.construction-mark-as-done.legacy .icon {
  z-index: 11;
}
.construction-mark-as-done.legacy .button-text {
  color: var(--challenges-card-to-do-1);
  font-weight: normal;
  z-index: 11;
}
.construction-mark-as-done.legacy svg {
  color: var(--challenges-card-to-do-1);
}
.construction-mark-as-done.legacy:hover::before,
.construction-mark-as-done.legacy.selected::before {
  background-color: var(--challenges-card-to-do-1);
  border: 2px solid var(--challenges-card-to-do-1);
}
.construction-mark-as-done.legacy:hover .button-text,
.construction-mark-as-done.legacy.selected .button-text {
  color: var(--default-color-2);
}
.construction-mark-as-done.legacy:hover img,
.construction-mark-as-done.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.construction-mark-as-done.legacy.disabled {
  pointer-events: none;
}
.construction-mark-as-done.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.construction-mark-as-done.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.construction-mark-as-done.legacy.disabled .icon {
  opacity: 0.5;
}
.construction-mark-as-done.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.construction-mark-as-done.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.construction-mark-as-done.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.construction-mark-as-done.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.construction-mark-as-done.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.construction-mark-as-done.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.construction-mark-as-done.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.construction-mark-as-done.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.construction-mark-as-done.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.construction-mark-as-done.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.construction-mark-as-done.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.construction-mark-as-done.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.construction-mark-as-done.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.construction-mark-as-done.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.construction-mark-as-done.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.construction-mark-as-done.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.construction-mark-as-done.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.construction-mark-as-done.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.construction-mark-as-done.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.construction-mark-as-done.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.construction-mark-as-done.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.construction-mark-as-done.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.construction-mark-as-done.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.construction-mark-as-done.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.construction-mark-as-done.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.construction-mark-as-done.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.construction-mark-as-done.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.construction-mark-as-done.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenges-card-to-do-1);
  border: 2px solid var(--challenges-card-to-do-1);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.construction-mark-as-done.pill .button-text,
.construction-mark-as-done.pill .icon {
  z-index: 11;
}
.construction-mark-as-done.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.construction-mark-as-done.pill svg {
  color: var(--default-color-2);
}
.construction-mark-as-done.pill:hover::before,
.construction-mark-as-done.pill.selected::before {
  filter: brightness(1.3);
}
.construction-mark-as-done.pill:hover img,
.construction-mark-as-done.pill.selected img {
  transform: scale(0.95, 0.95);
}
.construction-mark-as-done.pill.no-shadow::before {
  box-shadow: none;
}
.construction-mark-as-done.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.construction-mark-as-done.pill.has-border:hover::before,
.construction-mark-as-done.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.construction-mark-as-done.pill.alt-hover:hover::before,
.construction-mark-as-done.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.construction-mark-as-done.pill.alt-hover:hover .icon,
.construction-mark-as-done.pill.alt-hover.selected .icon,
.construction-mark-as-done.pill.alt-hover:hover .button-text,
.construction-mark-as-done.pill.alt-hover.selected .button-text {
  color: var(--challenges-card-to-do-1);
}
.construction-mark-as-done.pill.alt-hover:hover .icon,
.construction-mark-as-done.pill.alt-hover.selected .icon {
  background-color: var(--challenges-card-to-do-1);
}
.construction-mark-as-done.pill.disabled,
.construction-mark-as-done.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.construction-mark-as-done.pill.disabled::before,
.construction-mark-as-done.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.construction-mark-as-done.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.construction-mark-as-done.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.construction-mark-as-done.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.construction-mark-as-done.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.construction-mark-as-done.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.construction-mark-as-done.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.construction-mark-as-done.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.construction-mark-as-done.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.construction-mark-as-done.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.construction-mark-as-done.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.construction-mark-as-done.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.construction-mark-as-done.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.construction-mark-as-done.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.construction-mark-as-done.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.construction-mark-as-done.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.construction-mark-as-done.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.construction-mark-as-done.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.construction-mark-as-done.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.construction-mark-as-done.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.construction-mark-as-done.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.construction-mark-as-done.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.construction-mark-as-done.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.construction-mark-as-done.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.construction-mark-as-done.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.construction-mark-as-done.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.construction-mark-as-done.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.construction-mark-as-done.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.construction-mark-as-done.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.construction-mark-as-done.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.construction-mark-as-done.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.construction-mark-as-done.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.construction-mark-as-done.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.construction-mark-as-done.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.construction-mark-as-done.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.construction-mark-as-done.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.construction-mark-as-done.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.construction-mark-as-done.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.construction-mark-as-done.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.construction-mark-as-done.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.construction-mark-as-done.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.construction-mark-as-done.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.construction-mark-as-done.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.construction-mark-as-done.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.construction-mark-as-done.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.construction-mark-as-done.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.construction-mark-as-done.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.construction-mark-as-done.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.construction-mark-as-done.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.construction-mark-as-done.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.construction-mark-as-done.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.construction-mark-as-done.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.construction-mark-as-done.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.construction-mark-as-done.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.construction-mark-as-done.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.construction-mark-as-done.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.construction-mark-as-done.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.construction-mark-as-done.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.construction-mark-as-done.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.construction-mark-as-done.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.construction-mark-as-done.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.construction-mark-as-done.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.construction-mark-as-done.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.construction-mark-as-done.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.construction-mark-as-done.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.construction-mark-as-done.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.construction-mark-as-done.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.construction-mark-as-done.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.construction-mark-as-done.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.construction-mark-as-done.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.construction-mark-as-done.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.construction-mark-as-done.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.construction-mark-as-done.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .construction-mark-as-done.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .construction-mark-as-done.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .construction-mark-as-done.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .construction-mark-as-done.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .construction-mark-as-done.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .construction-mark-as-done.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .construction-mark-as-done.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .construction-mark-as-done.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .construction-mark-as-done.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .construction-mark-as-done.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .construction-mark-as-done.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .construction-mark-as-done.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.construction-mark-as-done.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.construction-mark-as-done.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--challenges-card-to-do-1);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.construction-mark-as-done.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.construction-mark-as-done.pill-alt:hover::before,
.construction-mark-as-done.pill-alt.selected::before {
  background: var(--button-border);
}
.construction-mark-as-done.pill-alt:hover .button-text,
.construction-mark-as-done.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.construction-mark-as-done.pill-alt.disabled,
.construction-mark-as-done.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.construction-mark-as-done.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.construction-mark-as-done.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.construction-mark-as-done.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.construction-mark-as-done.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.construction-mark-as-done.round .icon,
.construction-mark-as-done.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.construction-mark-as-done.round:hover,
.construction-mark-as-done.round.selected {
  opacity: 1;
}
.construction-mark-as-done.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.construction-mark-as-done.round.disabled {
  pointer-events: none;
}
.construction-mark-as-done.round.disabled .icon {
  filter: saturate(0);
}
.construction-mark-as-done.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.construction-mark-as-done.round[data-size="regular"].active {
  opacity: 1;
}
.construction-mark-as-done.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.construction-mark-as-done.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.construction-mark-as-done.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.construction-mark-as-done.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.construction-mark-as-done.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.construction-mark-as-done.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.construction-mark-as-done.nav {
  flex-wrap: nowrap;
}
.construction-mark-as-done.nav svg {
  color: var(--troubadour-main);
}
.construction-mark-as-done.nav .icon,
.construction-mark-as-done.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.construction-mark-as-done.nav .button-text {
  color: var(--challenges-card-to-do-1);
  font-weight: bold;
}
.construction-mark-as-done.nav:hover {
  text-decoration: underline;
}
.construction-mark-as-done.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.construction-mark-as-done.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.construction-mark-as-done.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.construction-mark-as-done.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.construction-mark-as-done.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.construction-mark-as-done.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.construction-mark-as-done.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.construction-mark-as-done.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.construction-mark-as-done.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.construction-mark-as-done.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.construction-mark-as-done.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.construction-mark-as-done.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.construction-mark-as-done.nav[data-size="large"] .icon {
  height: 80px;
}
.construction-mark-as-done.nav[data-size="regular"] {
  padding: 20px 31px;
}
.construction-mark-as-done.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.construction-mark-as-done.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.construction-mark-as-done.nav[data-size="small"] {
  padding: 10px;
}
.construction-mark-as-done.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.construction-mark-as-done.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.construction-mark-as-done.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.construction-mark-as-done.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.construction-mark-as-done.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.construction-mark-as-done.nav[data-size="mini"] {
  padding: 4px 12px;
}
.construction-mark-as-done.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.construction-mark-as-done.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.teacher-end-demo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.teacher-end-demo:focus {
  text-decoration: none;
}
.teacher-end-demo[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.teacher-end-demo .button-text {
  font-family: Sofia Pro, sans-serif;
}
.teacher-end-demo .button-text.ws-no-wrap {
  white-space: nowrap;
}
.teacher-end-demo:active,
.teacher-end-demo:hover {
  text-decoration: none;
  cursor: pointer;
}
.teacher-end-demo.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-end-demo.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--userchallenge-status-done);
  border-radius: inherit;
  z-index: 10;
}
.teacher-end-demo.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.teacher-end-demo.legacy .button-text,
.teacher-end-demo.legacy .icon {
  z-index: 11;
}
.teacher-end-demo.legacy .button-text {
  color: var(--userchallenge-status-done);
  font-weight: normal;
  z-index: 11;
}
.teacher-end-demo.legacy svg {
  color: var(--userchallenge-status-done);
}
.teacher-end-demo.legacy:hover::before,
.teacher-end-demo.legacy.selected::before {
  background-color: var(--userchallenge-status-done);
  border: 2px solid var(--userchallenge-status-done);
}
.teacher-end-demo.legacy:hover .button-text,
.teacher-end-demo.legacy.selected .button-text {
  color: var(--default-bg);
}
.teacher-end-demo.legacy:hover img,
.teacher-end-demo.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.teacher-end-demo.legacy.disabled {
  pointer-events: none;
}
.teacher-end-demo.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.teacher-end-demo.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.teacher-end-demo.legacy.disabled .icon {
  opacity: 0.5;
}
.teacher-end-demo.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.teacher-end-demo.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.teacher-end-demo.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-end-demo.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.teacher-end-demo.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.teacher-end-demo.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.teacher-end-demo.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.teacher-end-demo.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.teacher-end-demo.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.teacher-end-demo.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.teacher-end-demo.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.teacher-end-demo.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.teacher-end-demo.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.teacher-end-demo.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.teacher-end-demo.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.teacher-end-demo.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.teacher-end-demo.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.teacher-end-demo.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.teacher-end-demo.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.teacher-end-demo.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.teacher-end-demo.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.teacher-end-demo.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.teacher-end-demo.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.teacher-end-demo.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.teacher-end-demo.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.teacher-end-demo.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.teacher-end-demo.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-end-demo.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--userchallenge-status-done);
  border: 2px solid var(--userchallenge-status-done);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.teacher-end-demo.pill .button-text,
.teacher-end-demo.pill .icon {
  z-index: 11;
}
.teacher-end-demo.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.teacher-end-demo.pill svg {
  color: var(--default-bg);
}
.teacher-end-demo.pill:hover::before,
.teacher-end-demo.pill.selected::before {
  filter: brightness(1.3);
}
.teacher-end-demo.pill:hover img,
.teacher-end-demo.pill.selected img {
  transform: scale(0.95, 0.95);
}
.teacher-end-demo.pill.no-shadow::before {
  box-shadow: none;
}
.teacher-end-demo.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.teacher-end-demo.pill.has-border:hover::before,
.teacher-end-demo.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.teacher-end-demo.pill.alt-hover:hover::before,
.teacher-end-demo.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.teacher-end-demo.pill.alt-hover:hover .icon,
.teacher-end-demo.pill.alt-hover.selected .icon,
.teacher-end-demo.pill.alt-hover:hover .button-text,
.teacher-end-demo.pill.alt-hover.selected .button-text {
  color: var(--userchallenge-status-done);
}
.teacher-end-demo.pill.alt-hover:hover .icon,
.teacher-end-demo.pill.alt-hover.selected .icon {
  background-color: var(--userchallenge-status-done);
}
.teacher-end-demo.pill.disabled,
.teacher-end-demo.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.teacher-end-demo.pill.disabled::before,
.teacher-end-demo.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.teacher-end-demo.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.teacher-end-demo.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.teacher-end-demo.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.teacher-end-demo.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-end-demo.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.teacher-end-demo.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.teacher-end-demo.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.teacher-end-demo.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.teacher-end-demo.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.teacher-end-demo.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.teacher-end-demo.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.teacher-end-demo.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.teacher-end-demo.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.teacher-end-demo.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.teacher-end-demo.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.teacher-end-demo.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.teacher-end-demo.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.teacher-end-demo.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.teacher-end-demo.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.teacher-end-demo.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.teacher-end-demo.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.teacher-end-demo.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.teacher-end-demo.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.teacher-end-demo.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.teacher-end-demo.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.teacher-end-demo.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.teacher-end-demo.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.teacher-end-demo.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.teacher-end-demo.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.teacher-end-demo.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.teacher-end-demo.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.teacher-end-demo.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.teacher-end-demo.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.teacher-end-demo.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.teacher-end-demo.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.teacher-end-demo.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.teacher-end-demo.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.teacher-end-demo.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.teacher-end-demo.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.teacher-end-demo.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.teacher-end-demo.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.teacher-end-demo.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.teacher-end-demo.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.teacher-end-demo.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.teacher-end-demo.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.teacher-end-demo.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.teacher-end-demo.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-end-demo.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.teacher-end-demo.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-end-demo.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.teacher-end-demo.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.teacher-end-demo.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.teacher-end-demo.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.teacher-end-demo.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.teacher-end-demo.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.teacher-end-demo.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-end-demo.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.teacher-end-demo.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-end-demo.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.teacher-end-demo.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.teacher-end-demo.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.teacher-end-demo.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.teacher-end-demo.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.teacher-end-demo.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.teacher-end-demo.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.teacher-end-demo.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.teacher-end-demo.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.teacher-end-demo.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.teacher-end-demo.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.teacher-end-demo.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.teacher-end-demo.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.teacher-end-demo.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.teacher-end-demo.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .teacher-end-demo.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .teacher-end-demo.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .teacher-end-demo.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .teacher-end-demo.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .teacher-end-demo.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .teacher-end-demo.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .teacher-end-demo.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .teacher-end-demo.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .teacher-end-demo.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .teacher-end-demo.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .teacher-end-demo.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .teacher-end-demo.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.teacher-end-demo.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.teacher-end-demo.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--userchallenge-status-done);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.teacher-end-demo.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.teacher-end-demo.pill-alt:hover::before,
.teacher-end-demo.pill-alt.selected::before {
  background: var(--button-border);
}
.teacher-end-demo.pill-alt:hover .button-text,
.teacher-end-demo.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.teacher-end-demo.pill-alt.disabled,
.teacher-end-demo.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.teacher-end-demo.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.teacher-end-demo.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.teacher-end-demo.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.teacher-end-demo.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.teacher-end-demo.round .icon,
.teacher-end-demo.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teacher-end-demo.round:hover,
.teacher-end-demo.round.selected {
  opacity: 1;
}
.teacher-end-demo.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.teacher-end-demo.round.disabled {
  pointer-events: none;
}
.teacher-end-demo.round.disabled .icon {
  filter: saturate(0);
}
.teacher-end-demo.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.teacher-end-demo.round[data-size="regular"].active {
  opacity: 1;
}
.teacher-end-demo.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.teacher-end-demo.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.teacher-end-demo.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.teacher-end-demo.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.teacher-end-demo.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.teacher-end-demo.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.teacher-end-demo.nav {
  flex-wrap: nowrap;
}
.teacher-end-demo.nav svg {
  color: var(--troubadour-main);
}
.teacher-end-demo.nav .icon,
.teacher-end-demo.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.teacher-end-demo.nav .button-text {
  color: var(--userchallenge-status-done);
  font-weight: bold;
}
.teacher-end-demo.nav:hover {
  text-decoration: underline;
}
.teacher-end-demo.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.teacher-end-demo.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.teacher-end-demo.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.teacher-end-demo.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.teacher-end-demo.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.teacher-end-demo.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.teacher-end-demo.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.teacher-end-demo.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.teacher-end-demo.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.teacher-end-demo.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.teacher-end-demo.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.teacher-end-demo.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.teacher-end-demo.nav[data-size="large"] .icon {
  height: 80px;
}
.teacher-end-demo.nav[data-size="regular"] {
  padding: 20px 31px;
}
.teacher-end-demo.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.teacher-end-demo.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.teacher-end-demo.nav[data-size="small"] {
  padding: 10px;
}
.teacher-end-demo.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.teacher-end-demo.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.teacher-end-demo.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.teacher-end-demo.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.teacher-end-demo.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.teacher-end-demo.nav[data-size="mini"] {
  padding: 4px 12px;
}
.teacher-end-demo.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.teacher-end-demo.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.no-text-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.no-text-button:focus {
  text-decoration: none;
}
.no-text-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.no-text-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.no-text-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.no-text-button:active,
.no-text-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.no-text-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.no-text-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--userchallenge-status-construction);
  border-radius: inherit;
  z-index: 10;
}
.no-text-button.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.no-text-button.legacy .button-text,
.no-text-button.legacy .icon {
  z-index: 11;
}
.no-text-button.legacy .button-text {
  color: var(--userchallenge-status-construction);
  font-weight: normal;
  z-index: 11;
}
.no-text-button.legacy svg {
  color: var(--userchallenge-status-construction);
}
.no-text-button.legacy:hover::before,
.no-text-button.legacy.selected::before {
  background-color: var(--userchallenge-status-construction);
  border: 2px solid var(--userchallenge-status-construction);
}
.no-text-button.legacy:hover .button-text,
.no-text-button.legacy.selected .button-text {
  color: var(--default-bg);
}
.no-text-button.legacy:hover img,
.no-text-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.no-text-button.legacy.disabled {
  pointer-events: none;
}
.no-text-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.no-text-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.no-text-button.legacy.disabled .icon {
  opacity: 0.5;
}
.no-text-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.no-text-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.no-text-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.no-text-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.no-text-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.no-text-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.no-text-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.no-text-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.no-text-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.no-text-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.no-text-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.no-text-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.no-text-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.no-text-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.no-text-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.no-text-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.no-text-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.no-text-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.no-text-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.no-text-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.no-text-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.no-text-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.no-text-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.no-text-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.no-text-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.no-text-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.no-text-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.no-text-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--userchallenge-status-construction);
  border: 2px solid var(--userchallenge-status-construction);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.no-text-button.pill .button-text,
.no-text-button.pill .icon {
  z-index: 11;
}
.no-text-button.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.no-text-button.pill svg {
  color: var(--default-bg);
}
.no-text-button.pill:hover::before,
.no-text-button.pill.selected::before {
  filter: brightness(1.3);
}
.no-text-button.pill:hover img,
.no-text-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.no-text-button.pill.no-shadow::before {
  box-shadow: none;
}
.no-text-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.no-text-button.pill.has-border:hover::before,
.no-text-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.no-text-button.pill.alt-hover:hover::before,
.no-text-button.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.no-text-button.pill.alt-hover:hover .icon,
.no-text-button.pill.alt-hover.selected .icon,
.no-text-button.pill.alt-hover:hover .button-text,
.no-text-button.pill.alt-hover.selected .button-text {
  color: var(--userchallenge-status-construction);
}
.no-text-button.pill.alt-hover:hover .icon,
.no-text-button.pill.alt-hover.selected .icon {
  background-color: var(--userchallenge-status-construction);
}
.no-text-button.pill.disabled,
.no-text-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.no-text-button.pill.disabled::before,
.no-text-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.no-text-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.no-text-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.no-text-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.no-text-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.no-text-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.no-text-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.no-text-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.no-text-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.no-text-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.no-text-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.no-text-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.no-text-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.no-text-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.no-text-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.no-text-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.no-text-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.no-text-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.no-text-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.no-text-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.no-text-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.no-text-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.no-text-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.no-text-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.no-text-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.no-text-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.no-text-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.no-text-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.no-text-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.no-text-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.no-text-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.no-text-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.no-text-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.no-text-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.no-text-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.no-text-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.no-text-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.no-text-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.no-text-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.no-text-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.no-text-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.no-text-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.no-text-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.no-text-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.no-text-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.no-text-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.no-text-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.no-text-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.no-text-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.no-text-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.no-text-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.no-text-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.no-text-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.no-text-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.no-text-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.no-text-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.no-text-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.no-text-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.no-text-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.no-text-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.no-text-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.no-text-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.no-text-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.no-text-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.no-text-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.no-text-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.no-text-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.no-text-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.no-text-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.no-text-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.no-text-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.no-text-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.no-text-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.no-text-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.no-text-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.no-text-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.no-text-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.no-text-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.no-text-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.no-text-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.no-text-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.no-text-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.no-text-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.no-text-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.no-text-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.no-text-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .no-text-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .no-text-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .no-text-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .no-text-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .no-text-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .no-text-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .no-text-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .no-text-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .no-text-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .no-text-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .no-text-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .no-text-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.no-text-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.no-text-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--userchallenge-status-construction);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.no-text-button.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.no-text-button.pill-alt:hover::before,
.no-text-button.pill-alt.selected::before {
  background: var(--button-border);
}
.no-text-button.pill-alt:hover .button-text,
.no-text-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.no-text-button.pill-alt.disabled,
.no-text-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.no-text-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.no-text-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.no-text-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.no-text-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.no-text-button.round .icon,
.no-text-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.no-text-button.round:hover,
.no-text-button.round.selected {
  opacity: 1;
}
.no-text-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.no-text-button.round.disabled {
  pointer-events: none;
}
.no-text-button.round.disabled .icon {
  filter: saturate(0);
}
.no-text-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.no-text-button.round[data-size="regular"].active {
  opacity: 1;
}
.no-text-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.no-text-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.no-text-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.no-text-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.no-text-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.no-text-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.no-text-button.nav {
  flex-wrap: nowrap;
}
.no-text-button.nav svg {
  color: var(--troubadour-main);
}
.no-text-button.nav .icon,
.no-text-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.no-text-button.nav .button-text {
  color: var(--userchallenge-status-construction);
  font-weight: bold;
}
.no-text-button.nav:hover {
  text-decoration: underline;
}
.no-text-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.no-text-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.no-text-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.no-text-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.no-text-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.no-text-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.no-text-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.no-text-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.no-text-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.no-text-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.no-text-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.no-text-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.no-text-button.nav[data-size="large"] .icon {
  height: 80px;
}
.no-text-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.no-text-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.no-text-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.no-text-button.nav[data-size="small"] {
  padding: 10px;
}
.no-text-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.no-text-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.no-text-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.no-text-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.no-text-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.no-text-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.no-text-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.no-text-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.need-student-correction-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.need-student-correction-button:focus {
  text-decoration: none;
}
.need-student-correction-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.need-student-correction-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.need-student-correction-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.need-student-correction-button:active,
.need-student-correction-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.need-student-correction-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.need-student-correction-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-bg);
  border: 2px solid var(--userchallenge-status-revision);
  border-radius: inherit;
  z-index: 10;
}
.need-student-correction-button.legacy.has-shadow::before {
  border: 2px solid var(--default-bg);
  box-shadow: var(--dropshadow);
}
.need-student-correction-button.legacy .button-text,
.need-student-correction-button.legacy .icon {
  z-index: 11;
}
.need-student-correction-button.legacy .button-text {
  color: var(--userchallenge-status-revision);
  font-weight: normal;
  z-index: 11;
}
.need-student-correction-button.legacy svg {
  color: var(--userchallenge-status-revision);
}
.need-student-correction-button.legacy:hover::before,
.need-student-correction-button.legacy.selected::before {
  background-color: var(--userchallenge-status-revision);
  border: 2px solid var(--userchallenge-status-revision);
}
.need-student-correction-button.legacy:hover .button-text,
.need-student-correction-button.legacy.selected .button-text {
  color: var(--default-bg);
}
.need-student-correction-button.legacy:hover img,
.need-student-correction-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.need-student-correction-button.legacy.disabled {
  pointer-events: none;
}
.need-student-correction-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.need-student-correction-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.need-student-correction-button.legacy.disabled .icon {
  opacity: 0.5;
}
.need-student-correction-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.need-student-correction-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.need-student-correction-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.need-student-correction-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.need-student-correction-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.need-student-correction-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.need-student-correction-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.need-student-correction-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.need-student-correction-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.need-student-correction-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.need-student-correction-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.need-student-correction-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.need-student-correction-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.need-student-correction-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.need-student-correction-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.need-student-correction-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.need-student-correction-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.need-student-correction-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.need-student-correction-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.need-student-correction-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.need-student-correction-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.need-student-correction-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.need-student-correction-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.need-student-correction-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.need-student-correction-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.need-student-correction-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.need-student-correction-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.need-student-correction-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--userchallenge-status-revision);
  border: 2px solid var(--userchallenge-status-revision);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.need-student-correction-button.pill .button-text,
.need-student-correction-button.pill .icon {
  z-index: 11;
}
.need-student-correction-button.pill .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.need-student-correction-button.pill svg {
  color: var(--default-bg);
}
.need-student-correction-button.pill:hover::before,
.need-student-correction-button.pill.selected::before {
  filter: brightness(1.3);
}
.need-student-correction-button.pill:hover img,
.need-student-correction-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.need-student-correction-button.pill.no-shadow::before {
  box-shadow: none;
}
.need-student-correction-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.need-student-correction-button.pill.has-border:hover::before,
.need-student-correction-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.need-student-correction-button.pill.alt-hover:hover::before,
.need-student-correction-button.pill.alt-hover.selected::before {
  background: var(--default-bg);
  border: 2px solid var(--default-bg);
  filter: brightness(1);
}
.need-student-correction-button.pill.alt-hover:hover .icon,
.need-student-correction-button.pill.alt-hover.selected .icon,
.need-student-correction-button.pill.alt-hover:hover .button-text,
.need-student-correction-button.pill.alt-hover.selected .button-text {
  color: var(--userchallenge-status-revision);
}
.need-student-correction-button.pill.alt-hover:hover .icon,
.need-student-correction-button.pill.alt-hover.selected .icon {
  background-color: var(--userchallenge-status-revision);
}
.need-student-correction-button.pill.disabled,
.need-student-correction-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.need-student-correction-button.pill.disabled::before,
.need-student-correction-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.need-student-correction-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.need-student-correction-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.need-student-correction-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.need-student-correction-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.need-student-correction-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.need-student-correction-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.need-student-correction-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.need-student-correction-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.need-student-correction-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.need-student-correction-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.need-student-correction-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.need-student-correction-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.need-student-correction-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.need-student-correction-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.need-student-correction-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.need-student-correction-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.need-student-correction-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.need-student-correction-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.need-student-correction-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.need-student-correction-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.need-student-correction-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.need-student-correction-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.need-student-correction-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.need-student-correction-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.need-student-correction-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.need-student-correction-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.need-student-correction-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.need-student-correction-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.need-student-correction-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.need-student-correction-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.need-student-correction-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.need-student-correction-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.need-student-correction-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.need-student-correction-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.need-student-correction-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.need-student-correction-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.need-student-correction-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.need-student-correction-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.need-student-correction-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.need-student-correction-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.need-student-correction-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.need-student-correction-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.need-student-correction-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.need-student-correction-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.need-student-correction-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.need-student-correction-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.need-student-correction-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.need-student-correction-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.need-student-correction-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.need-student-correction-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.need-student-correction-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.need-student-correction-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.need-student-correction-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.need-student-correction-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.need-student-correction-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.need-student-correction-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.need-student-correction-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.need-student-correction-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.need-student-correction-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.need-student-correction-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.need-student-correction-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.need-student-correction-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.need-student-correction-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.need-student-correction-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.need-student-correction-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.need-student-correction-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.need-student-correction-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.need-student-correction-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.need-student-correction-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.need-student-correction-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.need-student-correction-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.need-student-correction-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.need-student-correction-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .need-student-correction-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .need-student-correction-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .need-student-correction-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .need-student-correction-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .need-student-correction-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .need-student-correction-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .need-student-correction-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .need-student-correction-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .need-student-correction-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .need-student-correction-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .need-student-correction-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .need-student-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.need-student-correction-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.need-student-correction-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--userchallenge-status-revision);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.need-student-correction-button.pill-alt .button-text {
  color: var(--default-bg);
  font-weight: normal;
  z-index: 11;
}
.need-student-correction-button.pill-alt:hover::before,
.need-student-correction-button.pill-alt.selected::before {
  background: var(--button-border);
}
.need-student-correction-button.pill-alt:hover .button-text,
.need-student-correction-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.need-student-correction-button.pill-alt.disabled,
.need-student-correction-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.need-student-correction-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.need-student-correction-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.need-student-correction-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.need-student-correction-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.need-student-correction-button.round .icon,
.need-student-correction-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.need-student-correction-button.round:hover,
.need-student-correction-button.round.selected {
  opacity: 1;
}
.need-student-correction-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.need-student-correction-button.round.disabled {
  pointer-events: none;
}
.need-student-correction-button.round.disabled .icon {
  filter: saturate(0);
}
.need-student-correction-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.need-student-correction-button.round[data-size="regular"].active {
  opacity: 1;
}
.need-student-correction-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.need-student-correction-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.need-student-correction-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.need-student-correction-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.need-student-correction-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.need-student-correction-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.need-student-correction-button.nav {
  flex-wrap: nowrap;
}
.need-student-correction-button.nav svg {
  color: var(--troubadour-main);
}
.need-student-correction-button.nav .icon,
.need-student-correction-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.need-student-correction-button.nav .button-text {
  color: var(--userchallenge-status-revision);
  font-weight: bold;
}
.need-student-correction-button.nav:hover {
  text-decoration: underline;
}
.need-student-correction-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.need-student-correction-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.need-student-correction-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.need-student-correction-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.need-student-correction-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.need-student-correction-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.need-student-correction-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.need-student-correction-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.need-student-correction-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.need-student-correction-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.need-student-correction-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.need-student-correction-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.need-student-correction-button.nav[data-size="large"] .icon {
  height: 80px;
}
.need-student-correction-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.need-student-correction-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.need-student-correction-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.need-student-correction-button.nav[data-size="small"] {
  padding: 10px;
}
.need-student-correction-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.need-student-correction-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.need-student-correction-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.need-student-correction-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.need-student-correction-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.need-student-correction-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.need-student-correction-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.need-student-correction-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.end-page-correction-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.end-page-correction-button:focus {
  text-decoration: none;
}
.end-page-correction-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.end-page-correction-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.end-page-correction-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.end-page-correction-button:active,
.end-page-correction-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.end-page-correction-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.end-page-correction-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--student-challenges-color-10);
  border-radius: inherit;
  z-index: 10;
}
.end-page-correction-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.end-page-correction-button.legacy .button-text,
.end-page-correction-button.legacy .icon {
  z-index: 11;
}
.end-page-correction-button.legacy .button-text {
  color: var(--student-challenges-color-10);
  font-weight: normal;
  z-index: 11;
}
.end-page-correction-button.legacy svg {
  color: var(--student-challenges-color-10);
}
.end-page-correction-button.legacy:hover::before,
.end-page-correction-button.legacy.selected::before {
  background-color: var(--student-challenges-color-10);
  border: 2px solid var(--student-challenges-color-10);
}
.end-page-correction-button.legacy:hover .button-text,
.end-page-correction-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.end-page-correction-button.legacy:hover img,
.end-page-correction-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.end-page-correction-button.legacy.disabled {
  pointer-events: none;
}
.end-page-correction-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.end-page-correction-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.end-page-correction-button.legacy.disabled .icon {
  opacity: 0.5;
}
.end-page-correction-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.end-page-correction-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.end-page-correction-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.end-page-correction-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.end-page-correction-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.end-page-correction-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.end-page-correction-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.end-page-correction-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.end-page-correction-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.end-page-correction-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.end-page-correction-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.end-page-correction-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.end-page-correction-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.end-page-correction-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.end-page-correction-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.end-page-correction-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.end-page-correction-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.end-page-correction-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.end-page-correction-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.end-page-correction-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.end-page-correction-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.end-page-correction-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.end-page-correction-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.end-page-correction-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.end-page-correction-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.end-page-correction-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.end-page-correction-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.end-page-correction-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-10);
  border: 2px solid var(--student-challenges-color-10);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.end-page-correction-button.pill .button-text,
.end-page-correction-button.pill .icon {
  z-index: 11;
}
.end-page-correction-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.end-page-correction-button.pill svg {
  color: var(--default-color-2);
}
.end-page-correction-button.pill:hover::before,
.end-page-correction-button.pill.selected::before {
  filter: brightness(1.3);
}
.end-page-correction-button.pill:hover img,
.end-page-correction-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.end-page-correction-button.pill.no-shadow::before {
  box-shadow: none;
}
.end-page-correction-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.end-page-correction-button.pill.has-border:hover::before,
.end-page-correction-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.end-page-correction-button.pill.alt-hover:hover::before,
.end-page-correction-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.end-page-correction-button.pill.alt-hover:hover .icon,
.end-page-correction-button.pill.alt-hover.selected .icon,
.end-page-correction-button.pill.alt-hover:hover .button-text,
.end-page-correction-button.pill.alt-hover.selected .button-text {
  color: var(--student-challenges-color-10);
}
.end-page-correction-button.pill.alt-hover:hover .icon,
.end-page-correction-button.pill.alt-hover.selected .icon {
  background-color: var(--student-challenges-color-10);
}
.end-page-correction-button.pill.disabled,
.end-page-correction-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.end-page-correction-button.pill.disabled::before,
.end-page-correction-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.end-page-correction-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.end-page-correction-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.end-page-correction-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.end-page-correction-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.end-page-correction-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.end-page-correction-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.end-page-correction-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.end-page-correction-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.end-page-correction-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.end-page-correction-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.end-page-correction-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.end-page-correction-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.end-page-correction-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.end-page-correction-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.end-page-correction-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.end-page-correction-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.end-page-correction-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.end-page-correction-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.end-page-correction-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.end-page-correction-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.end-page-correction-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.end-page-correction-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.end-page-correction-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.end-page-correction-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.end-page-correction-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.end-page-correction-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.end-page-correction-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.end-page-correction-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.end-page-correction-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.end-page-correction-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.end-page-correction-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.end-page-correction-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.end-page-correction-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.end-page-correction-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.end-page-correction-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.end-page-correction-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.end-page-correction-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.end-page-correction-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.end-page-correction-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.end-page-correction-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.end-page-correction-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.end-page-correction-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.end-page-correction-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.end-page-correction-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.end-page-correction-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.end-page-correction-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.end-page-correction-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.end-page-correction-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.end-page-correction-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.end-page-correction-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.end-page-correction-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.end-page-correction-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.end-page-correction-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.end-page-correction-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.end-page-correction-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.end-page-correction-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.end-page-correction-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.end-page-correction-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.end-page-correction-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.end-page-correction-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.end-page-correction-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.end-page-correction-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.end-page-correction-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.end-page-correction-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.end-page-correction-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.end-page-correction-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.end-page-correction-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.end-page-correction-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.end-page-correction-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.end-page-correction-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.end-page-correction-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.end-page-correction-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.end-page-correction-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .end-page-correction-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .end-page-correction-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .end-page-correction-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .end-page-correction-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .end-page-correction-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .end-page-correction-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .end-page-correction-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .end-page-correction-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .end-page-correction-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .end-page-correction-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .end-page-correction-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .end-page-correction-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.end-page-correction-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.end-page-correction-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-10);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.end-page-correction-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.end-page-correction-button.pill-alt:hover::before,
.end-page-correction-button.pill-alt.selected::before {
  background: var(--button-border);
}
.end-page-correction-button.pill-alt:hover .button-text,
.end-page-correction-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.end-page-correction-button.pill-alt.disabled,
.end-page-correction-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.end-page-correction-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.end-page-correction-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.end-page-correction-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.end-page-correction-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.end-page-correction-button.round .icon,
.end-page-correction-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.end-page-correction-button.round:hover,
.end-page-correction-button.round.selected {
  opacity: 1;
}
.end-page-correction-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.end-page-correction-button.round.disabled {
  pointer-events: none;
}
.end-page-correction-button.round.disabled .icon {
  filter: saturate(0);
}
.end-page-correction-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.end-page-correction-button.round[data-size="regular"].active {
  opacity: 1;
}
.end-page-correction-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.end-page-correction-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.end-page-correction-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.end-page-correction-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.end-page-correction-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.end-page-correction-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.end-page-correction-button.nav {
  flex-wrap: nowrap;
}
.end-page-correction-button.nav svg {
  color: var(--troubadour-main);
}
.end-page-correction-button.nav .icon,
.end-page-correction-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.end-page-correction-button.nav .button-text {
  color: var(--student-challenges-color-10);
  font-weight: bold;
}
.end-page-correction-button.nav:hover {
  text-decoration: underline;
}
.end-page-correction-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.end-page-correction-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.end-page-correction-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.end-page-correction-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.end-page-correction-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.end-page-correction-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.end-page-correction-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.end-page-correction-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.end-page-correction-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.end-page-correction-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.end-page-correction-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.end-page-correction-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.end-page-correction-button.nav[data-size="large"] .icon {
  height: 80px;
}
.end-page-correction-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.end-page-correction-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.end-page-correction-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.end-page-correction-button.nav[data-size="small"] {
  padding: 10px;
}
.end-page-correction-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.end-page-correction-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.end-page-correction-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.end-page-correction-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.end-page-correction-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.end-page-correction-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.end-page-correction-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.end-page-correction-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="ALL"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="ALL"]:focus {
  text-decoration: none;
}
.challenge-workstate-button[data-state="ALL"][data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-workstate-button[data-state="ALL"] .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-workstate-button[data-state="ALL"] .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-workstate-button[data-state="ALL"]:active,
.challenge-workstate-button[data-state="ALL"]:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-workstate-button[data-state="ALL"].legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="ALL"].legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--workstate-default-bg);
  border: 2px solid var(--workstate-default-fg);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="ALL"].legacy.has-shadow::before {
  border: 2px solid var(--workstate-default-bg);
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="ALL"].legacy .button-text,
.challenge-workstate-button[data-state="ALL"].legacy .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="ALL"].legacy .button-text {
  color: var(--workstate-default-fg);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="ALL"].legacy svg {
  color: var(--workstate-default-fg);
}
.challenge-workstate-button[data-state="ALL"].legacy:hover::before,
.challenge-workstate-button[data-state="ALL"].legacy.selected::before {
  background-color: var(--workstate-default-fg);
  border: 2px solid var(--workstate-default-fg);
}
.challenge-workstate-button[data-state="ALL"].legacy:hover .button-text,
.challenge-workstate-button[data-state="ALL"].legacy.selected .button-text {
  color: var(--workstate-default-bg);
}
.challenge-workstate-button[data-state="ALL"].legacy:hover img,
.challenge-workstate-button[data-state="ALL"].legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="ALL"].legacy.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="ALL"].legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="ALL"].legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="ALL"].legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-workstate-button[data-state="ALL"].legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="ALL"].legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="ALL"].legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="ALL"].legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="ALL"].legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-workstate-button[data-state="ALL"].legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="ALL"].pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="ALL"].pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-default-fg);
  border: 2px solid var(--workstate-default-fg);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-workstate-button[data-state="ALL"].pill .button-text,
.challenge-workstate-button[data-state="ALL"].pill .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="ALL"].pill .button-text {
  color: var(--workstate-default-bg);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="ALL"].pill svg {
  color: var(--workstate-default-bg);
}
.challenge-workstate-button[data-state="ALL"].pill:hover::before,
.challenge-workstate-button[data-state="ALL"].pill.selected::before {
  filter: brightness(1.3);
}
.challenge-workstate-button[data-state="ALL"].pill:hover img,
.challenge-workstate-button[data-state="ALL"].pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="ALL"].pill.no-shadow::before {
  box-shadow: none;
}
.challenge-workstate-button[data-state="ALL"].pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="ALL"].pill.has-border:hover::before,
.challenge-workstate-button[data-state="ALL"].pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="ALL"].pill.alt-hover:hover::before,
.challenge-workstate-button[data-state="ALL"].pill.alt-hover.selected::before {
  background: var(--workstate-default-bg);
  border: 2px solid var(--workstate-default-bg);
  filter: brightness(1);
}
.challenge-workstate-button[data-state="ALL"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="ALL"].pill.alt-hover.selected .icon,
.challenge-workstate-button[data-state="ALL"].pill.alt-hover:hover .button-text,
.challenge-workstate-button[data-state="ALL"].pill.alt-hover.selected .button-text {
  color: var(--workstate-default-fg);
}
.challenge-workstate-button[data-state="ALL"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="ALL"].pill.alt-hover.selected .icon {
  background-color: var(--workstate-default-fg);
}
.challenge-workstate-button[data-state="ALL"].pill.disabled,
.challenge-workstate-button[data-state="ALL"].pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="ALL"].pill.disabled::before,
.challenge-workstate-button[data-state="ALL"].pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-workstate-button[data-state="ALL"].pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-workstate-button[data-state="ALL"].pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-workstate-button[data-state="ALL"].pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-workstate-button[data-state="ALL"].pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="ALL"].pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="ALL"].pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="ALL"].pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-workstate-button[data-state="ALL"].pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-workstate-button[data-state="ALL"].pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-workstate-button[data-state="ALL"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-workstate-button[data-state="ALL"].pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="ALL"].pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-default-fg);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="ALL"].pill-alt .button-text {
  color: var(--workstate-default-bg);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="ALL"].pill-alt:hover::before,
.challenge-workstate-button[data-state="ALL"].pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-workstate-button[data-state="ALL"].pill-alt:hover .button-text,
.challenge-workstate-button[data-state="ALL"].pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-workstate-button[data-state="ALL"].pill-alt.disabled,
.challenge-workstate-button[data-state="ALL"].pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="ALL"].pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="ALL"].pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="ALL"].pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="ALL"].round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-workstate-button[data-state="ALL"].round .icon,
.challenge-workstate-button[data-state="ALL"].round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="ALL"].round:hover,
.challenge-workstate-button[data-state="ALL"].round.selected {
  opacity: 1;
}
.challenge-workstate-button[data-state="ALL"].round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="ALL"].round.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="ALL"].round.disabled .icon {
  filter: saturate(0);
}
.challenge-workstate-button[data-state="ALL"].round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-workstate-button[data-state="ALL"].round[data-size="regular"].active {
  opacity: 1;
}
.challenge-workstate-button[data-state="ALL"].round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-workstate-button[data-state="ALL"].round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-workstate-button[data-state="ALL"].round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-workstate-button[data-state="ALL"].round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-workstate-button[data-state="ALL"].round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-workstate-button[data-state="ALL"].round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-workstate-button[data-state="ALL"].nav {
  flex-wrap: nowrap;
}
.challenge-workstate-button[data-state="ALL"].nav svg {
  color: var(--troubadour-main);
}
.challenge-workstate-button[data-state="ALL"].nav .icon,
.challenge-workstate-button[data-state="ALL"].nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="ALL"].nav .button-text {
  color: var(--workstate-default-fg);
  font-weight: bold;
}
.challenge-workstate-button[data-state="ALL"].nav:hover {
  text-decoration: underline;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="small"] {
  padding: 10px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-workstate-button[data-state="ALL"].nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="IN_PROGRESS"]:focus {
  text-decoration: none;
}
.challenge-workstate-button[data-state="IN_PROGRESS"][data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-workstate-button[data-state="IN_PROGRESS"] .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-workstate-button[data-state="IN_PROGRESS"] .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-workstate-button[data-state="IN_PROGRESS"]:active,
.challenge-workstate-button[data-state="IN_PROGRESS"]:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-inprog-light);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy .button-text,
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy .button-text {
  color: var(--workstate-inprog-light);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy svg {
  color: var(--workstate-inprog-light);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy:hover::before,
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.selected::before {
  background-color: var(--workstate-inprog-light);
  border: 2px solid var(--workstate-inprog-light);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy:hover .button-text,
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.selected .button-text {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy:hover img,
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-inprog-light);
  border: 2px solid var(--workstate-inprog-light);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill .button-text,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill svg {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill:hover::before,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.selected::before {
  filter: brightness(1.3);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill:hover img,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.no-shadow::before {
  box-shadow: none;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.has-border:hover::before,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.alt-hover:hover::before,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.alt-hover.selected .icon,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.alt-hover:hover .button-text,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.alt-hover.selected .button-text {
  color: var(--workstate-inprog-light);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.alt-hover.selected .icon {
  background-color: var(--workstate-inprog-light);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.disabled,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.disabled::before,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-workstate-button[data-state="IN_PROGRESS"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-inprog-light);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt:hover::before,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt:hover .button-text,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt.disabled,
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round .icon,
.challenge-workstate-button[data-state="IN_PROGRESS"].round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round:hover,
.challenge-workstate-button[data-state="IN_PROGRESS"].round.selected {
  opacity: 1;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round.disabled .icon {
  filter: saturate(0);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round[data-size="regular"].active {
  opacity: 1;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav {
  flex-wrap: nowrap;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav svg {
  color: var(--troubadour-main);
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav .icon,
.challenge-workstate-button[data-state="IN_PROGRESS"].nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav .button-text {
  color: var(--workstate-inprog-light);
  font-weight: bold;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav:hover {
  text-decoration: underline;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="small"] {
  padding: 10px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-workstate-button[data-state="IN_PROGRESS"].nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"]:focus {
  text-decoration: none;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"][data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"] .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"] .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"]:active,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"]:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-waitval-dark);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy .button-text,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy .button-text {
  color: var(--workstate-waitval-dark);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy svg {
  color: var(--workstate-waitval-dark);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy:hover::before,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.selected::before {
  background-color: var(--workstate-waitval-dark);
  border: 2px solid var(--workstate-waitval-dark);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy:hover .button-text,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.selected .button-text {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy:hover img,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-waitval-dark);
  border: 2px solid var(--workstate-waitval-dark);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill .button-text,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill svg {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill:hover::before,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.selected::before {
  filter: brightness(1.3);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill:hover img,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.no-shadow::before {
  box-shadow: none;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.has-border:hover::before,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.alt-hover:hover::before,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.alt-hover.selected .icon,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.alt-hover:hover .button-text,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.alt-hover.selected .button-text {
  color: var(--workstate-waitval-dark);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.alt-hover.selected .icon {
  background-color: var(--workstate-waitval-dark);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.disabled,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.disabled::before,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-waitval-dark);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt:hover::before,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt:hover .button-text,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt.disabled,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round .icon,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round:hover,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round.selected {
  opacity: 1;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round.disabled .icon {
  filter: saturate(0);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round[data-size="regular"].active {
  opacity: 1;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav {
  flex-wrap: nowrap;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav svg {
  color: var(--troubadour-main);
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav .icon,
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav .button-text {
  color: var(--workstate-waitval-dark);
  font-weight: bold;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav:hover {
  text-decoration: underline;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="small"] {
  padding: 10px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-workstate-button[data-state="WAITING_FOR_VALIDATION"].nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="NEED_REVISION"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="NEED_REVISION"]:focus {
  text-decoration: none;
}
.challenge-workstate-button[data-state="NEED_REVISION"][data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-workstate-button[data-state="NEED_REVISION"] .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-workstate-button[data-state="NEED_REVISION"] .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-workstate-button[data-state="NEED_REVISION"]:active,
.challenge-workstate-button[data-state="NEED_REVISION"]:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-needrev-dark);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy .button-text,
.challenge-workstate-button[data-state="NEED_REVISION"].legacy .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy .button-text {
  color: var(--workstate-needrev-dark);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy svg {
  color: var(--workstate-needrev-dark);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy:hover::before,
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.selected::before {
  background-color: var(--workstate-needrev-dark);
  border: 2px solid var(--workstate-needrev-dark);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy:hover .button-text,
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.selected .button-text {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy:hover img,
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-needrev-dark);
  border: 2px solid var(--workstate-needrev-dark);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill .button-text,
.challenge-workstate-button[data-state="NEED_REVISION"].pill .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill svg {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill:hover::before,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.selected::before {
  filter: brightness(1.3);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill:hover img,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.no-shadow::before {
  box-shadow: none;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.has-border:hover::before,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.alt-hover:hover::before,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.alt-hover.selected .icon,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.alt-hover:hover .button-text,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.alt-hover.selected .button-text {
  color: var(--workstate-needrev-dark);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.alt-hover.selected .icon {
  background-color: var(--workstate-needrev-dark);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.disabled,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.disabled::before,
.challenge-workstate-button[data-state="NEED_REVISION"].pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-workstate-button[data-state="NEED_REVISION"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-needrev-dark);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt:hover::before,
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt:hover .button-text,
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt.disabled,
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round .icon,
.challenge-workstate-button[data-state="NEED_REVISION"].round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round:hover,
.challenge-workstate-button[data-state="NEED_REVISION"].round.selected {
  opacity: 1;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="NEED_REVISION"].round.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round.disabled .icon {
  filter: saturate(0);
}
.challenge-workstate-button[data-state="NEED_REVISION"].round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round[data-size="regular"].active {
  opacity: 1;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav {
  flex-wrap: nowrap;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav svg {
  color: var(--troubadour-main);
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav .icon,
.challenge-workstate-button[data-state="NEED_REVISION"].nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav .button-text {
  color: var(--workstate-needrev-dark);
  font-weight: bold;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav:hover {
  text-decoration: underline;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="small"] {
  padding: 10px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-workstate-button[data-state="NEED_REVISION"].nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="COMPLETED"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="COMPLETED"]:focus {
  text-decoration: none;
}
.challenge-workstate-button[data-state="COMPLETED"][data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-workstate-button[data-state="COMPLETED"] .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-workstate-button[data-state="COMPLETED"] .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-workstate-button[data-state="COMPLETED"]:active,
.challenge-workstate-button[data-state="COMPLETED"]:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--student-challenges-color-10);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy .button-text,
.challenge-workstate-button[data-state="COMPLETED"].legacy .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy .button-text {
  color: var(--student-challenges-color-10);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy svg {
  color: var(--student-challenges-color-10);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy:hover::before,
.challenge-workstate-button[data-state="COMPLETED"].legacy.selected::before {
  background-color: var(--student-challenges-color-10);
  border: 2px solid var(--student-challenges-color-10);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy:hover .button-text,
.challenge-workstate-button[data-state="COMPLETED"].legacy.selected .button-text {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy:hover img,
.challenge-workstate-button[data-state="COMPLETED"].legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="COMPLETED"].legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-workstate-button[data-state="COMPLETED"].legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="COMPLETED"].pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-10);
  border: 2px solid var(--student-challenges-color-10);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-workstate-button[data-state="COMPLETED"].pill .button-text,
.challenge-workstate-button[data-state="COMPLETED"].pill .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="COMPLETED"].pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="COMPLETED"].pill svg {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="COMPLETED"].pill:hover::before,
.challenge-workstate-button[data-state="COMPLETED"].pill.selected::before {
  filter: brightness(1.3);
}
.challenge-workstate-button[data-state="COMPLETED"].pill:hover img,
.challenge-workstate-button[data-state="COMPLETED"].pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="COMPLETED"].pill.no-shadow::before {
  box-shadow: none;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.has-border:hover::before,
.challenge-workstate-button[data-state="COMPLETED"].pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.alt-hover:hover::before,
.challenge-workstate-button[data-state="COMPLETED"].pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.challenge-workstate-button[data-state="COMPLETED"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="COMPLETED"].pill.alt-hover.selected .icon,
.challenge-workstate-button[data-state="COMPLETED"].pill.alt-hover:hover .button-text,
.challenge-workstate-button[data-state="COMPLETED"].pill.alt-hover.selected .button-text {
  color: var(--student-challenges-color-10);
}
.challenge-workstate-button[data-state="COMPLETED"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="COMPLETED"].pill.alt-hover.selected .icon {
  background-color: var(--student-challenges-color-10);
}
.challenge-workstate-button[data-state="COMPLETED"].pill.disabled,
.challenge-workstate-button[data-state="COMPLETED"].pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="COMPLETED"].pill.disabled::before,
.challenge-workstate-button[data-state="COMPLETED"].pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-workstate-button[data-state="COMPLETED"].pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-workstate-button[data-state="COMPLETED"].pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="COMPLETED"].pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-workstate-button[data-state="COMPLETED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--student-challenges-color-10);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt:hover::before,
.challenge-workstate-button[data-state="COMPLETED"].pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt:hover .button-text,
.challenge-workstate-button[data-state="COMPLETED"].pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt.disabled,
.challenge-workstate-button[data-state="COMPLETED"].pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="COMPLETED"].pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="COMPLETED"].round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-workstate-button[data-state="COMPLETED"].round .icon,
.challenge-workstate-button[data-state="COMPLETED"].round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="COMPLETED"].round:hover,
.challenge-workstate-button[data-state="COMPLETED"].round.selected {
  opacity: 1;
}
.challenge-workstate-button[data-state="COMPLETED"].round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="COMPLETED"].round.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="COMPLETED"].round.disabled .icon {
  filter: saturate(0);
}
.challenge-workstate-button[data-state="COMPLETED"].round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-workstate-button[data-state="COMPLETED"].round[data-size="regular"].active {
  opacity: 1;
}
.challenge-workstate-button[data-state="COMPLETED"].round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-workstate-button[data-state="COMPLETED"].round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-workstate-button[data-state="COMPLETED"].round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-workstate-button[data-state="COMPLETED"].round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-workstate-button[data-state="COMPLETED"].round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-workstate-button[data-state="COMPLETED"].round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-workstate-button[data-state="COMPLETED"].nav {
  flex-wrap: nowrap;
}
.challenge-workstate-button[data-state="COMPLETED"].nav svg {
  color: var(--troubadour-main);
}
.challenge-workstate-button[data-state="COMPLETED"].nav .icon,
.challenge-workstate-button[data-state="COMPLETED"].nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="COMPLETED"].nav .button-text {
  color: var(--student-challenges-color-10);
  font-weight: bold;
}
.challenge-workstate-button[data-state="COMPLETED"].nav:hover {
  text-decoration: underline;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="small"] {
  padding: 10px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-workstate-button[data-state="COMPLETED"].nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="FAILED"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="FAILED"]:focus {
  text-decoration: none;
}
.challenge-workstate-button[data-state="FAILED"][data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-workstate-button[data-state="FAILED"] .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-workstate-button[data-state="FAILED"] .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-workstate-button[data-state="FAILED"]:active,
.challenge-workstate-button[data-state="FAILED"]:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-workstate-button[data-state="FAILED"].legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="FAILED"].legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-completed-very-dark);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="FAILED"].legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.challenge-workstate-button[data-state="FAILED"].legacy .button-text,
.challenge-workstate-button[data-state="FAILED"].legacy .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="FAILED"].legacy .button-text {
  color: var(--workstate-completed-very-dark);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="FAILED"].legacy svg {
  color: var(--workstate-completed-very-dark);
}
.challenge-workstate-button[data-state="FAILED"].legacy:hover::before,
.challenge-workstate-button[data-state="FAILED"].legacy.selected::before {
  background-color: var(--workstate-completed-very-dark);
  border: 2px solid var(--workstate-completed-very-dark);
}
.challenge-workstate-button[data-state="FAILED"].legacy:hover .button-text,
.challenge-workstate-button[data-state="FAILED"].legacy.selected .button-text {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="FAILED"].legacy:hover img,
.challenge-workstate-button[data-state="FAILED"].legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="FAILED"].legacy.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="FAILED"].legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="FAILED"].legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="FAILED"].legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-workstate-button[data-state="FAILED"].legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-workstate-button[data-state="FAILED"].legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-workstate-button[data-state="FAILED"].legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="FAILED"].legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="FAILED"].legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-workstate-button[data-state="FAILED"].legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="FAILED"].pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="FAILED"].pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-completed-very-dark);
  border: 2px solid var(--workstate-completed-very-dark);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-workstate-button[data-state="FAILED"].pill .button-text,
.challenge-workstate-button[data-state="FAILED"].pill .icon {
  z-index: 11;
}
.challenge-workstate-button[data-state="FAILED"].pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="FAILED"].pill svg {
  color: var(--default-color-2);
}
.challenge-workstate-button[data-state="FAILED"].pill:hover::before,
.challenge-workstate-button[data-state="FAILED"].pill.selected::before {
  filter: brightness(1.3);
}
.challenge-workstate-button[data-state="FAILED"].pill:hover img,
.challenge-workstate-button[data-state="FAILED"].pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-workstate-button[data-state="FAILED"].pill.no-shadow::before {
  box-shadow: none;
}
.challenge-workstate-button[data-state="FAILED"].pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="FAILED"].pill.has-border:hover::before,
.challenge-workstate-button[data-state="FAILED"].pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-workstate-button[data-state="FAILED"].pill.alt-hover:hover::before,
.challenge-workstate-button[data-state="FAILED"].pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.challenge-workstate-button[data-state="FAILED"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="FAILED"].pill.alt-hover.selected .icon,
.challenge-workstate-button[data-state="FAILED"].pill.alt-hover:hover .button-text,
.challenge-workstate-button[data-state="FAILED"].pill.alt-hover.selected .button-text {
  color: var(--workstate-completed-very-dark);
}
.challenge-workstate-button[data-state="FAILED"].pill.alt-hover:hover .icon,
.challenge-workstate-button[data-state="FAILED"].pill.alt-hover.selected .icon {
  background-color: var(--workstate-completed-very-dark);
}
.challenge-workstate-button[data-state="FAILED"].pill.disabled,
.challenge-workstate-button[data-state="FAILED"].pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="FAILED"].pill.disabled::before,
.challenge-workstate-button[data-state="FAILED"].pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-workstate-button[data-state="FAILED"].pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-workstate-button[data-state="FAILED"].pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-workstate-button[data-state="FAILED"].pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-workstate-button[data-state="FAILED"].pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="FAILED"].pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-workstate-button[data-state="FAILED"].pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-workstate-button[data-state="FAILED"].pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-workstate-button[data-state="FAILED"].pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-workstate-button[data-state="FAILED"].pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-workstate-button[data-state="FAILED"].pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-workstate-button[data-state="FAILED"].pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-completed-very-dark);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-workstate-button[data-state="FAILED"].pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-workstate-button[data-state="FAILED"].pill-alt:hover::before,
.challenge-workstate-button[data-state="FAILED"].pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-workstate-button[data-state="FAILED"].pill-alt:hover .button-text,
.challenge-workstate-button[data-state="FAILED"].pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-workstate-button[data-state="FAILED"].pill-alt.disabled,
.challenge-workstate-button[data-state="FAILED"].pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="FAILED"].pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-workstate-button[data-state="FAILED"].pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="FAILED"].pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-workstate-button[data-state="FAILED"].round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-workstate-button[data-state="FAILED"].round .icon,
.challenge-workstate-button[data-state="FAILED"].round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="FAILED"].round:hover,
.challenge-workstate-button[data-state="FAILED"].round.selected {
  opacity: 1;
}
.challenge-workstate-button[data-state="FAILED"].round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-workstate-button[data-state="FAILED"].round.disabled {
  pointer-events: none;
}
.challenge-workstate-button[data-state="FAILED"].round.disabled .icon {
  filter: saturate(0);
}
.challenge-workstate-button[data-state="FAILED"].round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-workstate-button[data-state="FAILED"].round[data-size="regular"].active {
  opacity: 1;
}
.challenge-workstate-button[data-state="FAILED"].round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-workstate-button[data-state="FAILED"].round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-workstate-button[data-state="FAILED"].round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-workstate-button[data-state="FAILED"].round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-workstate-button[data-state="FAILED"].round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-workstate-button[data-state="FAILED"].round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-workstate-button[data-state="FAILED"].nav {
  flex-wrap: nowrap;
}
.challenge-workstate-button[data-state="FAILED"].nav svg {
  color: var(--troubadour-main);
}
.challenge-workstate-button[data-state="FAILED"].nav .icon,
.challenge-workstate-button[data-state="FAILED"].nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-workstate-button[data-state="FAILED"].nav .button-text {
  color: var(--workstate-completed-very-dark);
  font-weight: bold;
}
.challenge-workstate-button[data-state="FAILED"].nav:hover {
  text-decoration: underline;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="small"] {
  padding: 10px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-workstate-button[data-state="FAILED"].nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-comment-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
  border: none !important;
  box-shadow: var(--dropshadow);
}
.challenge-comment-button:focus {
  text-decoration: none;
}
.challenge-comment-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.challenge-comment-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.challenge-comment-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.challenge-comment-button:active,
.challenge-comment-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.challenge-comment-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-comment-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--workstate-comment-light);
  border-radius: inherit;
  z-index: 10;
}
.challenge-comment-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.challenge-comment-button.legacy .button-text,
.challenge-comment-button.legacy .icon {
  z-index: 11;
}
.challenge-comment-button.legacy .button-text {
  color: var(--workstate-comment-light);
  font-weight: normal;
  z-index: 11;
}
.challenge-comment-button.legacy svg {
  color: var(--workstate-comment-light);
}
.challenge-comment-button.legacy:hover::before,
.challenge-comment-button.legacy.selected::before {
  background-color: var(--workstate-comment-light);
  border: 2px solid var(--workstate-comment-light);
}
.challenge-comment-button.legacy:hover .button-text,
.challenge-comment-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.challenge-comment-button.legacy:hover img,
.challenge-comment-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-comment-button.legacy.disabled {
  pointer-events: none;
}
.challenge-comment-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-comment-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.challenge-comment-button.legacy.disabled .icon {
  opacity: 0.5;
}
.challenge-comment-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.challenge-comment-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.challenge-comment-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-comment-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-comment-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-comment-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.challenge-comment-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.challenge-comment-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.challenge-comment-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.challenge-comment-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-comment-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.challenge-comment-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-comment-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.challenge-comment-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.challenge-comment-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.challenge-comment-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.challenge-comment-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-comment-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.challenge-comment-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-comment-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.challenge-comment-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.challenge-comment-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.challenge-comment-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.challenge-comment-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-comment-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.challenge-comment-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-comment-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-comment-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-comment-light);
  border: 2px solid var(--workstate-comment-light);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.challenge-comment-button.pill .button-text,
.challenge-comment-button.pill .icon {
  z-index: 11;
}
.challenge-comment-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-comment-button.pill svg {
  color: var(--default-color-2);
}
.challenge-comment-button.pill:hover::before,
.challenge-comment-button.pill.selected::before {
  filter: brightness(1.3);
}
.challenge-comment-button.pill:hover img,
.challenge-comment-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.challenge-comment-button.pill.no-shadow::before {
  box-shadow: none;
}
.challenge-comment-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.challenge-comment-button.pill.has-border:hover::before,
.challenge-comment-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.challenge-comment-button.pill.alt-hover:hover::before,
.challenge-comment-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.challenge-comment-button.pill.alt-hover:hover .icon,
.challenge-comment-button.pill.alt-hover.selected .icon,
.challenge-comment-button.pill.alt-hover:hover .button-text,
.challenge-comment-button.pill.alt-hover.selected .button-text {
  color: var(--workstate-comment-light);
}
.challenge-comment-button.pill.alt-hover:hover .icon,
.challenge-comment-button.pill.alt-hover.selected .icon {
  background-color: var(--workstate-comment-light);
}
.challenge-comment-button.pill.disabled,
.challenge-comment-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-comment-button.pill.disabled::before,
.challenge-comment-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.challenge-comment-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.challenge-comment-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.challenge-comment-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.challenge-comment-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-comment-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.challenge-comment-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.challenge-comment-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.challenge-comment-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.challenge-comment-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.challenge-comment-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.challenge-comment-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.challenge-comment-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.challenge-comment-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.challenge-comment-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.challenge-comment-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.challenge-comment-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.challenge-comment-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.challenge-comment-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.challenge-comment-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.challenge-comment-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.challenge-comment-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.challenge-comment-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.challenge-comment-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.challenge-comment-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.challenge-comment-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.challenge-comment-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.challenge-comment-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.challenge-comment-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.challenge-comment-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.challenge-comment-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.challenge-comment-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.challenge-comment-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.challenge-comment-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.challenge-comment-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.challenge-comment-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.challenge-comment-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.challenge-comment-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.challenge-comment-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.challenge-comment-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.challenge-comment-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.challenge-comment-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.challenge-comment-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.challenge-comment-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.challenge-comment-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.challenge-comment-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.challenge-comment-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.challenge-comment-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-comment-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.challenge-comment-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-comment-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.challenge-comment-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.challenge-comment-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.challenge-comment-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.challenge-comment-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.challenge-comment-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.challenge-comment-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-comment-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.challenge-comment-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-comment-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.challenge-comment-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.challenge-comment-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.challenge-comment-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.challenge-comment-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.challenge-comment-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.challenge-comment-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.challenge-comment-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.challenge-comment-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.challenge-comment-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.challenge-comment-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.challenge-comment-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.challenge-comment-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.challenge-comment-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.challenge-comment-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .challenge-comment-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .challenge-comment-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .challenge-comment-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .challenge-comment-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .challenge-comment-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .challenge-comment-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .challenge-comment-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .challenge-comment-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .challenge-comment-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .challenge-comment-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .challenge-comment-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .challenge-comment-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.challenge-comment-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.challenge-comment-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--workstate-comment-light);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.challenge-comment-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.challenge-comment-button.pill-alt:hover::before,
.challenge-comment-button.pill-alt.selected::before {
  background: var(--button-border);
}
.challenge-comment-button.pill-alt:hover .button-text,
.challenge-comment-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.challenge-comment-button.pill-alt.disabled,
.challenge-comment-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.challenge-comment-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.challenge-comment-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.challenge-comment-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.challenge-comment-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.challenge-comment-button.round .icon,
.challenge-comment-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-comment-button.round:hover,
.challenge-comment-button.round.selected {
  opacity: 1;
}
.challenge-comment-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.challenge-comment-button.round.disabled {
  pointer-events: none;
}
.challenge-comment-button.round.disabled .icon {
  filter: saturate(0);
}
.challenge-comment-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.challenge-comment-button.round[data-size="regular"].active {
  opacity: 1;
}
.challenge-comment-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.challenge-comment-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.challenge-comment-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.challenge-comment-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.challenge-comment-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.challenge-comment-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.challenge-comment-button.nav {
  flex-wrap: nowrap;
}
.challenge-comment-button.nav svg {
  color: var(--troubadour-main);
}
.challenge-comment-button.nav .icon,
.challenge-comment-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.challenge-comment-button.nav .button-text {
  color: var(--workstate-comment-light);
  font-weight: bold;
}
.challenge-comment-button.nav:hover {
  text-decoration: underline;
}
.challenge-comment-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.challenge-comment-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.challenge-comment-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.challenge-comment-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.challenge-comment-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.challenge-comment-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.challenge-comment-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.challenge-comment-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.challenge-comment-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.challenge-comment-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.challenge-comment-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.challenge-comment-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.challenge-comment-button.nav[data-size="large"] .icon {
  height: 80px;
}
.challenge-comment-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.challenge-comment-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.challenge-comment-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.challenge-comment-button.nav[data-size="small"] {
  padding: 10px;
}
.challenge-comment-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.challenge-comment-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.challenge-comment-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.challenge-comment-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.challenge-comment-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.challenge-comment-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.challenge-comment-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.challenge-comment-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.mandatory-fullscreen-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.mandatory-fullscreen-button:focus {
  text-decoration: none;
}
.mandatory-fullscreen-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.mandatory-fullscreen-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.mandatory-fullscreen-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.mandatory-fullscreen-button:active,
.mandatory-fullscreen-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.mandatory-fullscreen-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mandatory-fullscreen-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--info-1);
  border: 2px solid var(--default-color-2);
  border-radius: inherit;
  z-index: 10;
}
.mandatory-fullscreen-button.legacy.has-shadow::before {
  border: 2px solid var(--info-1);
  box-shadow: var(--dropshadow);
}
.mandatory-fullscreen-button.legacy .button-text,
.mandatory-fullscreen-button.legacy .icon {
  z-index: 11;
}
.mandatory-fullscreen-button.legacy .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.mandatory-fullscreen-button.legacy svg {
  color: var(--default-color-2);
}
.mandatory-fullscreen-button.legacy:hover::before,
.mandatory-fullscreen-button.legacy.selected::before {
  background-color: var(--default-color-2);
  border: 2px solid var(--default-color-2);
}
.mandatory-fullscreen-button.legacy:hover .button-text,
.mandatory-fullscreen-button.legacy.selected .button-text {
  color: var(--info-1);
}
.mandatory-fullscreen-button.legacy:hover img,
.mandatory-fullscreen-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.mandatory-fullscreen-button.legacy.disabled {
  pointer-events: none;
}
.mandatory-fullscreen-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.mandatory-fullscreen-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.mandatory-fullscreen-button.legacy.disabled .icon {
  opacity: 0.5;
}
.mandatory-fullscreen-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.mandatory-fullscreen-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.mandatory-fullscreen-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mandatory-fullscreen-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.mandatory-fullscreen-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.mandatory-fullscreen-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.mandatory-fullscreen-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.mandatory-fullscreen-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.mandatory-fullscreen-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.mandatory-fullscreen-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.mandatory-fullscreen-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.mandatory-fullscreen-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.mandatory-fullscreen-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.mandatory-fullscreen-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.mandatory-fullscreen-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.mandatory-fullscreen-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.mandatory-fullscreen-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.mandatory-fullscreen-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.mandatory-fullscreen-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.mandatory-fullscreen-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.mandatory-fullscreen-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.mandatory-fullscreen-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.mandatory-fullscreen-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.mandatory-fullscreen-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.mandatory-fullscreen-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.mandatory-fullscreen-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.mandatory-fullscreen-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mandatory-fullscreen-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.mandatory-fullscreen-button.pill .button-text,
.mandatory-fullscreen-button.pill .icon {
  z-index: 11;
}
.mandatory-fullscreen-button.pill .button-text {
  color: var(--info-1);
  font-weight: normal;
  z-index: 11;
}
.mandatory-fullscreen-button.pill svg {
  color: var(--info-1);
}
.mandatory-fullscreen-button.pill:hover::before,
.mandatory-fullscreen-button.pill.selected::before {
  filter: brightness(1.3);
}
.mandatory-fullscreen-button.pill:hover img,
.mandatory-fullscreen-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.mandatory-fullscreen-button.pill.no-shadow::before {
  box-shadow: none;
}
.mandatory-fullscreen-button.pill.has-border::before {
  border-color: var(--info-1);
  box-shadow: none !important;
}
.mandatory-fullscreen-button.pill.has-border:hover::before,
.mandatory-fullscreen-button.pill.has-border.selected::before {
  border-color: var(--info-1) !important;
  box-shadow: none !important;
}
.mandatory-fullscreen-button.pill.alt-hover:hover::before,
.mandatory-fullscreen-button.pill.alt-hover.selected::before {
  background: var(--info-1);
  border: 2px solid var(--info-1);
  filter: brightness(1);
}
.mandatory-fullscreen-button.pill.alt-hover:hover .icon,
.mandatory-fullscreen-button.pill.alt-hover.selected .icon,
.mandatory-fullscreen-button.pill.alt-hover:hover .button-text,
.mandatory-fullscreen-button.pill.alt-hover.selected .button-text {
  color: var(--default-color-2);
}
.mandatory-fullscreen-button.pill.alt-hover:hover .icon,
.mandatory-fullscreen-button.pill.alt-hover.selected .icon {
  background-color: var(--default-color-2);
}
.mandatory-fullscreen-button.pill.disabled,
.mandatory-fullscreen-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.mandatory-fullscreen-button.pill.disabled::before,
.mandatory-fullscreen-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.mandatory-fullscreen-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.mandatory-fullscreen-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.mandatory-fullscreen-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.mandatory-fullscreen-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mandatory-fullscreen-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.mandatory-fullscreen-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.mandatory-fullscreen-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.mandatory-fullscreen-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.mandatory-fullscreen-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.mandatory-fullscreen-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.mandatory-fullscreen-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.mandatory-fullscreen-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.mandatory-fullscreen-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.mandatory-fullscreen-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.mandatory-fullscreen-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.mandatory-fullscreen-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.mandatory-fullscreen-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.mandatory-fullscreen-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.mandatory-fullscreen-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.mandatory-fullscreen-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.mandatory-fullscreen-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.mandatory-fullscreen-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.mandatory-fullscreen-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.mandatory-fullscreen-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.mandatory-fullscreen-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.mandatory-fullscreen-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.mandatory-fullscreen-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.mandatory-fullscreen-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.mandatory-fullscreen-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.mandatory-fullscreen-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.mandatory-fullscreen-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.mandatory-fullscreen-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.mandatory-fullscreen-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.mandatory-fullscreen-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.mandatory-fullscreen-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.mandatory-fullscreen-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.mandatory-fullscreen-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.mandatory-fullscreen-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.mandatory-fullscreen-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.mandatory-fullscreen-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.mandatory-fullscreen-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.mandatory-fullscreen-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.mandatory-fullscreen-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.mandatory-fullscreen-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.mandatory-fullscreen-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.mandatory-fullscreen-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.mandatory-fullscreen-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.mandatory-fullscreen-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.mandatory-fullscreen-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.mandatory-fullscreen-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.mandatory-fullscreen-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.mandatory-fullscreen-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.mandatory-fullscreen-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.mandatory-fullscreen-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.mandatory-fullscreen-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.mandatory-fullscreen-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.mandatory-fullscreen-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.mandatory-fullscreen-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.mandatory-fullscreen-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.mandatory-fullscreen-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.mandatory-fullscreen-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.mandatory-fullscreen-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.mandatory-fullscreen-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.mandatory-fullscreen-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .mandatory-fullscreen-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .mandatory-fullscreen-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .mandatory-fullscreen-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.mandatory-fullscreen-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mandatory-fullscreen-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--default-color-2);
  border: 2px solid var(--info-1);
  border-radius: inherit;
  z-index: 10;
}
.mandatory-fullscreen-button.pill-alt .button-text {
  color: var(--info-1);
  font-weight: normal;
  z-index: 11;
}
.mandatory-fullscreen-button.pill-alt:hover::before,
.mandatory-fullscreen-button.pill-alt.selected::before {
  background: var(--info-1);
}
.mandatory-fullscreen-button.pill-alt:hover .button-text,
.mandatory-fullscreen-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.mandatory-fullscreen-button.pill-alt.disabled,
.mandatory-fullscreen-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.mandatory-fullscreen-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mandatory-fullscreen-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.mandatory-fullscreen-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.mandatory-fullscreen-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.mandatory-fullscreen-button.round .icon,
.mandatory-fullscreen-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mandatory-fullscreen-button.round:hover,
.mandatory-fullscreen-button.round.selected {
  opacity: 1;
}
.mandatory-fullscreen-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.mandatory-fullscreen-button.round.disabled {
  pointer-events: none;
}
.mandatory-fullscreen-button.round.disabled .icon {
  filter: saturate(0);
}
.mandatory-fullscreen-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.mandatory-fullscreen-button.round[data-size="regular"].active {
  opacity: 1;
}
.mandatory-fullscreen-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.mandatory-fullscreen-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.mandatory-fullscreen-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.mandatory-fullscreen-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.mandatory-fullscreen-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.mandatory-fullscreen-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.mandatory-fullscreen-button.nav {
  flex-wrap: nowrap;
}
.mandatory-fullscreen-button.nav svg {
  color: var(--troubadour-main);
}
.mandatory-fullscreen-button.nav .icon,
.mandatory-fullscreen-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mandatory-fullscreen-button.nav .button-text {
  color: var(--default-color-2);
  font-weight: bold;
}
.mandatory-fullscreen-button.nav:hover {
  text-decoration: underline;
}
.mandatory-fullscreen-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.mandatory-fullscreen-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.mandatory-fullscreen-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.mandatory-fullscreen-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.mandatory-fullscreen-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.mandatory-fullscreen-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.mandatory-fullscreen-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.mandatory-fullscreen-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.mandatory-fullscreen-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.mandatory-fullscreen-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.mandatory-fullscreen-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.mandatory-fullscreen-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.mandatory-fullscreen-button.nav[data-size="large"] .icon {
  height: 80px;
}
.mandatory-fullscreen-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.mandatory-fullscreen-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.mandatory-fullscreen-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.mandatory-fullscreen-button.nav[data-size="small"] {
  padding: 10px;
}
.mandatory-fullscreen-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.mandatory-fullscreen-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.mandatory-fullscreen-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.mandatory-fullscreen-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.mandatory-fullscreen-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.mandatory-fullscreen-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.mandatory-fullscreen-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.mandatory-fullscreen-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.mark-as-done-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.mark-as-done-button:focus {
  text-decoration: none;
}
.mark-as-done-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.mark-as-done-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.mark-as-done-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.mark-as-done-button:active,
.mark-as-done-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.mark-as-done-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mark-as-done-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--button-action-3);
  border-radius: inherit;
  z-index: 10;
}
.mark-as-done-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.mark-as-done-button.legacy .button-text,
.mark-as-done-button.legacy .icon {
  z-index: 11;
}
.mark-as-done-button.legacy .button-text {
  color: var(--button-action-3);
  font-weight: normal;
  z-index: 11;
}
.mark-as-done-button.legacy svg {
  color: var(--button-action-3);
}
.mark-as-done-button.legacy:hover::before,
.mark-as-done-button.legacy.selected::before {
  background-color: var(--button-action-3);
  border: 2px solid var(--button-action-3);
}
.mark-as-done-button.legacy:hover .button-text,
.mark-as-done-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.mark-as-done-button.legacy:hover img,
.mark-as-done-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.mark-as-done-button.legacy.disabled {
  pointer-events: none;
}
.mark-as-done-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.mark-as-done-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.mark-as-done-button.legacy.disabled .icon {
  opacity: 0.5;
}
.mark-as-done-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.mark-as-done-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.mark-as-done-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mark-as-done-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.mark-as-done-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.mark-as-done-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.mark-as-done-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.mark-as-done-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.mark-as-done-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.mark-as-done-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.mark-as-done-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.mark-as-done-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.mark-as-done-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.mark-as-done-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.mark-as-done-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.mark-as-done-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.mark-as-done-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.mark-as-done-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.mark-as-done-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.mark-as-done-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.mark-as-done-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.mark-as-done-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.mark-as-done-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.mark-as-done-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.mark-as-done-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.mark-as-done-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.mark-as-done-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mark-as-done-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-action-3);
  border: 2px solid var(--button-action-3);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.mark-as-done-button.pill .button-text,
.mark-as-done-button.pill .icon {
  z-index: 11;
}
.mark-as-done-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.mark-as-done-button.pill svg {
  color: var(--default-color-2);
}
.mark-as-done-button.pill:hover::before,
.mark-as-done-button.pill.selected::before {
  filter: brightness(1.3);
}
.mark-as-done-button.pill:hover img,
.mark-as-done-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.mark-as-done-button.pill.no-shadow::before {
  box-shadow: none;
}
.mark-as-done-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.mark-as-done-button.pill.has-border:hover::before,
.mark-as-done-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.mark-as-done-button.pill.alt-hover:hover::before,
.mark-as-done-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.mark-as-done-button.pill.alt-hover:hover .icon,
.mark-as-done-button.pill.alt-hover.selected .icon,
.mark-as-done-button.pill.alt-hover:hover .button-text,
.mark-as-done-button.pill.alt-hover.selected .button-text {
  color: var(--button-action-3);
}
.mark-as-done-button.pill.alt-hover:hover .icon,
.mark-as-done-button.pill.alt-hover.selected .icon {
  background-color: var(--button-action-3);
}
.mark-as-done-button.pill.disabled,
.mark-as-done-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.mark-as-done-button.pill.disabled::before,
.mark-as-done-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.mark-as-done-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.mark-as-done-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.mark-as-done-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.mark-as-done-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mark-as-done-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.mark-as-done-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.mark-as-done-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.mark-as-done-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.mark-as-done-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.mark-as-done-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.mark-as-done-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.mark-as-done-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.mark-as-done-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.mark-as-done-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.mark-as-done-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.mark-as-done-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.mark-as-done-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.mark-as-done-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.mark-as-done-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.mark-as-done-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.mark-as-done-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.mark-as-done-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.mark-as-done-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.mark-as-done-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.mark-as-done-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.mark-as-done-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.mark-as-done-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.mark-as-done-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.mark-as-done-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.mark-as-done-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.mark-as-done-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.mark-as-done-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.mark-as-done-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.mark-as-done-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.mark-as-done-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.mark-as-done-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.mark-as-done-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.mark-as-done-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.mark-as-done-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.mark-as-done-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.mark-as-done-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.mark-as-done-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.mark-as-done-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.mark-as-done-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.mark-as-done-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.mark-as-done-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.mark-as-done-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.mark-as-done-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.mark-as-done-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.mark-as-done-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.mark-as-done-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.mark-as-done-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.mark-as-done-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.mark-as-done-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.mark-as-done-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.mark-as-done-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.mark-as-done-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.mark-as-done-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.mark-as-done-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.mark-as-done-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.mark-as-done-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.mark-as-done-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.mark-as-done-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.mark-as-done-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.mark-as-done-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.mark-as-done-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.mark-as-done-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.mark-as-done-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.mark-as-done-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.mark-as-done-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.mark-as-done-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.mark-as-done-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.mark-as-done-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .mark-as-done-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .mark-as-done-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .mark-as-done-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .mark-as-done-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .mark-as-done-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .mark-as-done-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .mark-as-done-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .mark-as-done-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .mark-as-done-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .mark-as-done-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .mark-as-done-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .mark-as-done-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.mark-as-done-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mark-as-done-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-action-3);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.mark-as-done-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.mark-as-done-button.pill-alt:hover::before,
.mark-as-done-button.pill-alt.selected::before {
  background: var(--button-border);
}
.mark-as-done-button.pill-alt:hover .button-text,
.mark-as-done-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.mark-as-done-button.pill-alt.disabled,
.mark-as-done-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.mark-as-done-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mark-as-done-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.mark-as-done-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.mark-as-done-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.mark-as-done-button.round .icon,
.mark-as-done-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mark-as-done-button.round:hover,
.mark-as-done-button.round.selected {
  opacity: 1;
}
.mark-as-done-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.mark-as-done-button.round.disabled {
  pointer-events: none;
}
.mark-as-done-button.round.disabled .icon {
  filter: saturate(0);
}
.mark-as-done-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.mark-as-done-button.round[data-size="regular"].active {
  opacity: 1;
}
.mark-as-done-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.mark-as-done-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.mark-as-done-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.mark-as-done-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.mark-as-done-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.mark-as-done-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.mark-as-done-button.nav {
  flex-wrap: nowrap;
}
.mark-as-done-button.nav svg {
  color: var(--troubadour-main);
}
.mark-as-done-button.nav .icon,
.mark-as-done-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mark-as-done-button.nav .button-text {
  color: var(--button-action-3);
  font-weight: bold;
}
.mark-as-done-button.nav:hover {
  text-decoration: underline;
}
.mark-as-done-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.mark-as-done-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.mark-as-done-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.mark-as-done-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.mark-as-done-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.mark-as-done-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.mark-as-done-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.mark-as-done-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.mark-as-done-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.mark-as-done-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.mark-as-done-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.mark-as-done-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.mark-as-done-button.nav[data-size="large"] .icon {
  height: 80px;
}
.mark-as-done-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.mark-as-done-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.mark-as-done-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.mark-as-done-button.nav[data-size="small"] {
  padding: 10px;
}
.mark-as-done-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.mark-as-done-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.mark-as-done-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.mark-as-done-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.mark-as-done-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.mark-as-done-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.mark-as-done-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.mark-as-done-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.mark-undone-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-self: center;
}
.mark-undone-button:focus {
  text-decoration: none;
}
.mark-undone-button[data-icon-position="left"] {
  flex-direction: row-reverse;
}
.mark-undone-button .button-text {
  font-family: Sofia Pro, sans-serif;
}
.mark-undone-button .button-text.ws-no-wrap {
  white-space: nowrap;
}
.mark-undone-button:active,
.mark-undone-button:hover {
  text-decoration: none;
  cursor: pointer;
}
.mark-undone-button.legacy {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mark-undone-button.legacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--default-color-2);
  border: 2px solid var(--button-action);
  border-radius: inherit;
  z-index: 10;
}
.mark-undone-button.legacy.has-shadow::before {
  border: 2px solid var(--default-color-2);
  box-shadow: var(--dropshadow);
}
.mark-undone-button.legacy .button-text,
.mark-undone-button.legacy .icon {
  z-index: 11;
}
.mark-undone-button.legacy .button-text {
  color: var(--button-action);
  font-weight: normal;
  z-index: 11;
}
.mark-undone-button.legacy svg {
  color: var(--button-action);
}
.mark-undone-button.legacy:hover::before,
.mark-undone-button.legacy.selected::before {
  background-color: var(--button-action);
  border: 2px solid var(--button-action);
}
.mark-undone-button.legacy:hover .button-text,
.mark-undone-button.legacy.selected .button-text {
  color: var(--default-color-2);
}
.mark-undone-button.legacy:hover img,
.mark-undone-button.legacy.selected img {
  transform: scale(0.95, 0.95);
}
.mark-undone-button.legacy.disabled {
  pointer-events: none;
}
.mark-undone-button.legacy.disabled::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.mark-undone-button.legacy.disabled .button-text {
  color: var(--ui-disabled);
}
.mark-undone-button.legacy.disabled .icon {
  opacity: 0.5;
}
.mark-undone-button.legacy.invalid::before {
  border-color: var(--ui-disabled);
  background-color: var(--ui-disabled-2);
}
.mark-undone-button.legacy.invalid .button-text {
  color: var(--ui-disabled);
}
.mark-undone-button.legacy.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mark-undone-button.legacy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.mark-undone-button.legacy .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.mark-undone-button.legacy[data-size="tiny"] {
  padding: 8px 25px;
  border-radius: 45px;
}
.mark-undone-button.legacy[data-size="tiny"] .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}
.mark-undone-button.legacy[data-size="tiny"] .button-text {
  font-size: 16px;
  line-height: 21px;
  font-weight: 600;
}
.mark-undone-button.legacy[data-size="tiny"][data-icon-position="left"] {
  padding-left: 20px;
}
.mark-undone-button.legacy[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.mark-undone-button.legacy[data-size="tiny"][data-icon-position="right"] {
  padding-right: 20px;
}
.mark-undone-button.legacy[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.mark-undone-button.legacy[data-size="small"] {
  padding: 11px 30px;
  border-radius: 45px;
}
.mark-undone-button.legacy[data-size="small"] .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.mark-undone-button.legacy[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
}
.mark-undone-button.legacy[data-size="small"][data-icon-position="left"] {
  padding-left: 25px;
}
.mark-undone-button.legacy[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.mark-undone-button.legacy[data-size="small"][data-icon-position="right"] {
  padding-right: 25px;
}
.mark-undone-button.legacy[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.mark-undone-button.legacy[data-size="regular"] {
  padding: 20px 40px;
  border-radius: 45px;
}
.mark-undone-button.legacy[data-size="regular"] .icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}
.mark-undone-button.legacy[data-size="regular"] .button-text {
  font-size: 26px;
  line-height: 35px;
  font-weight: 600;
}
.mark-undone-button.legacy[data-size="regular"][data-icon-position="left"] {
  padding-left: 35px;
}
.mark-undone-button.legacy[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.mark-undone-button.legacy[data-size="regular"][data-icon-position="right"] {
  padding-right: 35px;
}
.mark-undone-button.legacy[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.mark-undone-button.pill {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mark-undone-button.pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-action);
  border: 2px solid var(--button-action);
  border-radius: inherit;
  box-shadow: var(--dropshadow);
  z-index: 10;
}
.mark-undone-button.pill .button-text,
.mark-undone-button.pill .icon {
  z-index: 11;
}
.mark-undone-button.pill .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.mark-undone-button.pill svg {
  color: var(--default-color-2);
}
.mark-undone-button.pill:hover::before,
.mark-undone-button.pill.selected::before {
  filter: brightness(1.3);
}
.mark-undone-button.pill:hover img,
.mark-undone-button.pill.selected img {
  transform: scale(0.95, 0.95);
}
.mark-undone-button.pill.no-shadow::before {
  box-shadow: none;
}
.mark-undone-button.pill.has-border::before {
  border-color: var(--button-border);
  box-shadow: none !important;
}
.mark-undone-button.pill.has-border:hover::before,
.mark-undone-button.pill.has-border.selected::before {
  border-color: var(--button-border) !important;
  box-shadow: none !important;
}
.mark-undone-button.pill.alt-hover:hover::before,
.mark-undone-button.pill.alt-hover.selected::before {
  background: var(--default-color-2);
  border: 2px solid var(--default-color-2);
  filter: brightness(1);
}
.mark-undone-button.pill.alt-hover:hover .icon,
.mark-undone-button.pill.alt-hover.selected .icon,
.mark-undone-button.pill.alt-hover:hover .button-text,
.mark-undone-button.pill.alt-hover.selected .button-text {
  color: var(--button-action);
}
.mark-undone-button.pill.alt-hover:hover .icon,
.mark-undone-button.pill.alt-hover.selected .icon {
  background-color: var(--button-action);
}
.mark-undone-button.pill.disabled,
.mark-undone-button.pill.invalid {
  color: var(--disabled-text);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.mark-undone-button.pill.disabled::before,
.mark-undone-button.pill.invalid::before {
  background-color: var(--disabled);
  border-color: var(--disabled-border);
}
.mark-undone-button.pill.disabled:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.mark-undone-button.pill.disabled:not([data-icon-type=""]) .icon img {
  visibility: hidden;
  opacity: 0;
}
.mark-undone-button.pill.disabled.icon-no-bg:not([data-icon-type=""]) .icon {
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-btn-disabled-nobg.svg");
}
.mark-undone-button.pill.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mark-undone-button.pill .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
}
.mark-undone-button.pill .icon img {
  width: 100%;
  height: 100%;
  transition: 250ms all;
  margin: 0 !important;
}
.mark-undone-button.pill[data-icon-position="null"] .icon {
  display: none !important;
}
.mark-undone-button.pill[data-size="micro"] {
  padding: 4px 10px;
  border-radius: 25px;
}
.mark-undone-button.pill[data-size="micro"] .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}
.mark-undone-button.pill[data-size="micro"] .button-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  padding: 0;
}
.mark-undone-button.pill[data-size="micro"][data-icon-position="left"] {
  padding-left: 4px;
}
.mark-undone-button.pill[data-size="micro"][data-icon-position="left"] .icon {
  margin-right: 6px;
}
.mark-undone-button.pill[data-size="micro"][data-icon-position="right"] {
  padding-right: 4px;
}
.mark-undone-button.pill[data-size="micro"][data-icon-position="right"] .icon {
  margin-left: 6px;
}
.mark-undone-button.pill[data-size="micro"][data-icon-position="null"] {
  padding: 4px 12px;
}
.mark-undone-button.pill[data-size="micro"][data-icon-position="null"] .button-text {
  font-size: 10px;
}
.mark-undone-button.pill[data-size="mini"] {
  padding: 4px 13px;
  border-radius: 45px;
}
.mark-undone-button.pill[data-size="mini"] .icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.mark-undone-button.pill[data-size="mini"] .button-text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 4px 0;
}
.mark-undone-button.pill[data-size="mini"][data-icon-position="left"] {
  padding-left: 5px;
}
.mark-undone-button.pill[data-size="mini"][data-icon-position="left"] .icon {
  margin-right: 8px;
}
.mark-undone-button.pill[data-size="mini"][data-icon-position="right"] {
  padding-right: 5px;
}
.mark-undone-button.pill[data-size="mini"][data-icon-position="right"] .icon {
  margin-left: 8px;
}
.mark-undone-button.pill[data-size="mini"][data-icon-position="null"] {
  padding: 4px 18px;
}
.mark-undone-button.pill[data-size="mini"][data-icon-position="null"] .button-text {
  font-size: 15px;
}
.mark-undone-button.pill[data-size="tiny"] {
  padding: 6px 18px;
  border-radius: 45px;
}
.mark-undone-button.pill[data-size="tiny"] .icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}
.mark-undone-button.pill[data-size="tiny"] .button-text {
  font-size: 20px;
  line-height: 25px;
  font-weight: 800;
  padding: 5px 0;
}
.mark-undone-button.pill[data-size="tiny"][data-icon-position="left"] {
  padding-left: 6px;
}
.mark-undone-button.pill[data-size="tiny"][data-icon-position="left"] .icon {
  margin-right: 10px;
}
.mark-undone-button.pill[data-size="tiny"][data-icon-position="right"] {
  padding-right: 6px;
}
.mark-undone-button.pill[data-size="tiny"][data-icon-position="right"] .icon {
  margin-left: 10px;
}
.mark-undone-button.pill[data-size="tiny"][data-icon-position="null"] {
  padding: 6px 24px;
}
.mark-undone-button.pill[data-size="tiny"][data-icon-position="null"] .button-text {
  font-size: 18px;
}
.mark-undone-button.pill[data-size="small"] {
  padding: 8px 30px;
  border-radius: 45px;
}
.mark-undone-button.pill[data-size="small"] .icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
}
.mark-undone-button.pill[data-size="small"] .button-text {
  font-size: 30px;
  line-height: 35px;
  font-weight: 800;
  padding: 12px 0;
}
.mark-undone-button.pill[data-size="small"][data-icon-position="left"] {
  padding-left: 8px;
}
.mark-undone-button.pill[data-size="small"][data-icon-position="left"] .icon {
  margin-right: 18px;
}
.mark-undone-button.pill[data-size="small"][data-icon-position="right"] {
  padding-right: 8px;
}
.mark-undone-button.pill[data-size="small"][data-icon-position="right"] .icon {
  margin-left: 18px;
}
.mark-undone-button.pill[data-size="small"][data-icon-position="null"] {
  padding: 8px 36px;
}
.mark-undone-button.pill[data-size="small"][data-icon-position="null"] .button-text {
  font-size: 26px;
}
.mark-undone-button.pill[data-size="regular"] {
  padding: 16px 30px;
  border-radius: 100px;
}
.mark-undone-button.pill[data-size="regular"] .icon {
  width: 98px;
  height: 98px;
  min-width: 98px;
  min-height: 98px;
}
.mark-undone-button.pill[data-size="regular"] .button-text {
  font-size: 40px;
  line-height: 45px;
  font-weight: 800;
  padding: 26px 0;
}
.mark-undone-button.pill[data-size="regular"][data-icon-position="left"] {
  padding-left: 16px;
}
.mark-undone-button.pill[data-size="regular"][data-icon-position="left"] .icon {
  margin-right: 22px;
}
.mark-undone-button.pill[data-size="regular"][data-icon-position="right"] {
  padding-right: 16px;
}
.mark-undone-button.pill[data-size="regular"][data-icon-position="right"] .icon {
  margin-left: 22px;
}
.mark-undone-button.pill[data-size="regular"][data-icon-position="null"] {
  padding: 16px 40px;
}
.mark-undone-button.pill[data-size="regular"][data-icon-position="null"] .button-text {
  font-size: 34px;
}
.mark-undone-button.pill[data-size="large"] {
  padding: 16px 40px;
  border-radius: 100px;
}
.mark-undone-button.pill[data-size="large"] .icon {
  height: 125px;
  width: 125px;
  min-width: 125px;
  min-height: 125px;
}
.mark-undone-button.pill[data-size="large"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 50px;
  line-height: 55px;
  font-weight: 900;
  padding: 35px 0;
}
.mark-undone-button.pill[data-size="large"][data-icon-position="left"] {
  padding-left: 16px;
}
.mark-undone-button.pill[data-size="large"][data-icon-position="left"] .icon {
  margin-right: 26px;
}
.mark-undone-button.pill[data-size="large"][data-icon-position="right"] {
  padding-right: 16px;
}
.mark-undone-button.pill[data-size="large"][data-icon-position="right"] .icon {
  margin-left: 26px;
}
.mark-undone-button.pill[data-size="large"][data-icon-position="null"] {
  padding: 16px 50px;
}
.mark-undone-button.pill[data-size="large"][data-icon-position="null"] .button-text {
  font-size: 40px;
}
.mark-undone-button.pill[data-size="xlarge"] {
  padding: 16px 70px;
  border-radius: 100px;
}
.mark-undone-button.pill[data-size="xlarge"] .icon {
  height: 150px;
  width: 150px;
  min-width: 150px;
  min-height: 150px;
}
.mark-undone-button.pill[data-size="xlarge"] .button-text {
  font-family: FatFrank, sans-serif;
  font-size: 60px;
  line-height: 65px;
  font-weight: 900;
  padding: 42px 0;
}
.mark-undone-button.pill[data-size="xlarge"][data-icon-position="left"] {
  padding-left: 16px;
}
.mark-undone-button.pill[data-size="xlarge"][data-icon-position="left"] .icon {
  margin-right: 30px;
}
.mark-undone-button.pill[data-size="xlarge"][data-icon-position="right"] {
  padding-right: 16px;
}
.mark-undone-button.pill[data-size="xlarge"][data-icon-position="right"] .icon {
  margin-left: 30px;
}
.mark-undone-button.pill[data-size="xlarge"][data-icon-position="null"] {
  padding: 16px 80px;
}
.mark-undone-button.pill[data-size="xlarge"][data-icon-position="null"] .button-text {
  font-size: 50px;
}
.mark-undone-button.pill.icon-no-bg .icon {
  margin: 0 !important;
}
.mark-undone-button.pill.icon-no-bg[data-size="micro"] .icon {
  padding: 4px;
}
.mark-undone-button.pill.icon-no-bg[data-size="micro"] .button-text {
  font-size: 10px;
}
.mark-undone-button.pill.icon-no-bg[data-size="mini"] .icon {
  padding: 8px;
}
.mark-undone-button.pill.icon-no-bg[data-size="mini"] .button-text {
  font-size: 15px;
}
.mark-undone-button.pill.icon-no-bg[data-size="tiny"] .icon {
  padding: 10px;
}
.mark-undone-button.pill.icon-no-bg[data-size="tiny"] .button-text {
  font-size: 18px;
}
.mark-undone-button.pill.icon-no-bg[data-size="small"] .icon {
  padding: 18px;
}
.mark-undone-button.pill.icon-no-bg[data-size="small"] .button-text {
  font-size: 26px;
}
.mark-undone-button.pill.icon-no-bg[data-size="regular"] .icon {
  padding: 28px;
}
.mark-undone-button.pill.icon-no-bg[data-size="regular"] .button-text {
  font-size: 34px;
}
.mark-undone-button.pill.icon-no-bg[data-size="large"] .icon {
  padding: 30px;
}
.mark-undone-button.pill.icon-no-bg[data-size="large"] .button-text {
  font-size: 40px;
}
.mark-undone-button.pill.icon-no-bg[data-size="xlarge"] .icon {
  padding: 40px;
}
.mark-undone-button.pill.icon-no-bg[data-size="xlarge"] .button-text {
  font-size: 50px;
}
@media only screen and (max-width: 599px) {
  .mark-undone-button.pill[data-size="responsive"] {
    padding: 4px 13px;
    border-radius: 45px;
  }
  .mark-undone-button.pill[data-size="responsive"] .icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .mark-undone-button.pill[data-size="responsive"] .button-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 4px 0;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 4px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 8px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 4px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 8px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 4px 18px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 15px;
  }
  .mark-undone-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 8px;
  }
  .mark-undone-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 600px) {
  .mark-undone-button.pill[data-size="responsive"] {
    padding: 6px 18px;
    border-radius: 45px;
  }
  .mark-undone-button.pill[data-size="responsive"] .icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .mark-undone-button.pill[data-size="responsive"] .button-text {
    font-size: 20px;
    line-height: 25px;
    font-weight: 800;
    padding: 5px 0;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="left"] {
    padding-left: 6px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="left"] .icon {
    margin-right: 10px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="right"] {
    padding-right: 6px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="right"] .icon {
    margin-left: 10px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="null"] {
    padding: 6px 24px;
  }
  .mark-undone-button.pill[data-size="responsive"][data-icon-position="null"] .button-text {
    font-size: 18px;
  }
  .mark-undone-button.pill[data-size="responsive"].icon-no-bg .icon {
    margin: 0 !important;
    padding: 10px;
  }
  .mark-undone-button.pill[data-size="responsive"].icon-no-bg .button-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) {
    padding: 8px 30px;
    border-radius: 45px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]) .button-text {
    font-size: 30px;
    line-height: 35px;
    font-weight: 800;
    padding: 12px 0;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] {
    padding-left: 8px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="left"] .icon {
    margin-right: 18px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] {
    padding-right: 8px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="right"] .icon {
    margin-left: 18px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] {
    padding: 8px 36px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"])[data-icon-position="null"] .button-text {
    font-size: 26px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 18px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]).icon-no-bg .button-text {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1600px) {
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) {
    padding: 16px 30px;
    border-radius: 100px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .icon {
    width: 98px;
    height: 98px;
    min-width: 98px;
    min-height: 98px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]) .button-text {
    font-size: 40px;
    line-height: 45px;
    font-weight: 800;
    padding: 26px 0;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] {
    padding-left: 16px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="left"] .icon {
    margin-right: 22px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] {
    padding-right: 16px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="right"] .icon {
    margin-left: 22px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] {
    padding: 16px 40px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"])[data-icon-position="null"] .button-text {
    font-size: 34px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .icon {
    margin: 0 !important;
    padding: 28px;
  }
  .mark-undone-button.pill[data-size="responsive"]:not([data-max-size="tiny"]):not([data-max-size="small"]).icon-no-bg .button-text {
    font-size: 34px;
  }
}
.mark-undone-button.pill-alt {
  position: relative;
  font-size: 20px;
  opacity: 1;
  border-radius: 45px;
  transition: 250ms all;
  background: none;
  border: none;
}
.mark-undone-button.pill-alt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--button-action);
  border: 2px solid var(--button-border);
  border-radius: inherit;
  z-index: 10;
}
.mark-undone-button.pill-alt .button-text {
  color: var(--default-color-2);
  font-weight: normal;
  z-index: 11;
}
.mark-undone-button.pill-alt:hover::before,
.mark-undone-button.pill-alt.selected::before {
  background: var(--button-border);
}
.mark-undone-button.pill-alt:hover .button-text,
.mark-undone-button.pill-alt.selected .button-text {
  color: var(--default-bg);
}
.mark-undone-button.pill-alt.disabled,
.mark-undone-button.pill-alt.invalid {
  color: var(--disabled-text);
  background-color: var(--disabled);
  border-color: var(--disabled-border);
  font-weight: lighter;
  pointer-events: none;
  filter: grayscale(1);
}
.mark-undone-button.pill-alt.waiting {
  animation: waitingButtonAnimation 1750ms alternate infinite ease-in-out;
}
.mark-undone-button.pill-alt[data-size="small"] {
  padding: 15px 40px;
  border-radius: 100px;
}
.mark-undone-button.pill-alt[data-size="small"] .button-text {
  font-size: 18px;
  line-height: 20px;
  font-weight: 800;
}
.mark-undone-button.round {
  border-radius: 60px;
  opacity: 0.7;
  border: none;
  background: transparent;
  display: flex;
}
.mark-undone-button.round .icon,
.mark-undone-button.round svg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mark-undone-button.round:hover,
.mark-undone-button.round.selected {
  opacity: 1;
}
.mark-undone-button.round.inactive {
  pointer-events: none;
  color: var(--disabled-text);
  filter: grayscale(1);
}
.mark-undone-button.round.disabled {
  pointer-events: none;
}
.mark-undone-button.round.disabled .icon {
  filter: saturate(0);
}
.mark-undone-button.round[data-size="regular"] {
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.mark-undone-button.round[data-size="regular"].active {
  opacity: 1;
}
.mark-undone-button.round[data-size="small"] {
  width: 40px;
  height: 40px;
}
.mark-undone-button.round[data-size="small"].active {
  width: 52px;
  height: 52px;
  opacity: 1;
}
.mark-undone-button.round[data-size="tiny"] {
  width: 33px;
  height: 33px;
}
.mark-undone-button.round[data-size="tiny"].active {
  width: 45px;
  height: 45px;
  opacity: 1;
}
.mark-undone-button.round[data-size="mini"] {
  width: 25px;
  height: 25px;
}
.mark-undone-button.round[data-size="mini"].active {
  width: 25px;
  height: 25px;
  opacity: 1;
}
.mark-undone-button.nav {
  flex-wrap: nowrap;
}
.mark-undone-button.nav svg {
  color: var(--troubadour-main);
}
.mark-undone-button.nav .icon,
.mark-undone-button.nav svg {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mark-undone-button.nav .button-text {
  color: var(--button-action);
  font-weight: bold;
}
.mark-undone-button.nav:hover {
  text-decoration: underline;
}
.mark-undone-button.nav[data-icon-position="right"][data-size="regular"] .icon {
  margin-left: 15px;
}
.mark-undone-button.nav[data-icon-position="right"][data-size="small"] .icon {
  margin-left: 10px;
}
.mark-undone-button.nav[data-icon-position="right"][data-size="tiny"] .icon {
  margin-left: 5px;
}
.mark-undone-button.nav[data-icon-position="right"][data-size="mini"] .icon {
  margin-left: 5px;
}
.mark-undone-button.nav[data-icon-position="right"] .button-text {
  text-align: right;
}
.mark-undone-button.nav[data-icon-position="left"][data-size="regular"] .icon {
  margin-right: 15px;
}
.mark-undone-button.nav[data-icon-position="left"][data-size="small"] .icon {
  margin-right: 10px;
}
.mark-undone-button.nav[data-icon-position="left"][data-size="tiny"] .icon {
  margin-right: 5px;
}
.mark-undone-button.nav[data-icon-position="left"][data-size="mini"] .icon {
  margin-right: 5px;
}
.mark-undone-button.nav[data-icon-position="left"] .button-text {
  text-align: left;
}
.mark-undone-button.nav[data-size="large"] {
  padding: 5px;
  border-radius: 100px;
}
.mark-undone-button.nav[data-size="large"] .button-text {
  padding: 0 15px;
  font-size: 30px;
  line-height: 36px;
}
.mark-undone-button.nav[data-size="large"] .icon {
  height: 80px;
}
.mark-undone-button.nav[data-size="regular"] {
  padding: 20px 31px;
}
.mark-undone-button.nav[data-size="regular"] .icon {
  height: 23px;
  width: auto;
}
.mark-undone-button.nav[data-size="regular"] .button-text {
  font-size: 20px;
  line-height: 22.5px;
}
.mark-undone-button.nav[data-size="small"] {
  padding: 10px;
}
.mark-undone-button.nav[data-size="small"] .icon {
  height: 16px;
  width: auto;
}
.mark-undone-button.nav[data-size="small"] .button-text {
  font-size: 20px;
  line-height: 20px;
}
.mark-undone-button.nav[data-size="tiny"] {
  padding: 15px 20px;
}
.mark-undone-button.nav[data-size="tiny"] .icon {
  height: 10px;
  width: auto;
}
.mark-undone-button.nav[data-size="tiny"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
.mark-undone-button.nav[data-size="mini"] {
  padding: 4px 12px;
}
.mark-undone-button.nav[data-size="mini"] .icon {
  height: 5px;
  width: auto;
}
.mark-undone-button.nav[data-size="mini"] .button-text {
  font-size: 12px;
  line-height: 14px;
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .revision-panel .troubadour-button.round {
    width: 40px;
    height: 40px;
  }
  .troubadour-button.round.work-page-nav-button.active {
    width: 40px;
    height: 40px;
  }
  .troubadour-button.round.work-page-nav-button.active .button-text {
    font-size: 28px;
    line-height: 34px;
  }
  .troubadour-button.close-construction-button.round,
  .troubadour-button.reading-mode-button.round,
  .troubadour-button.fullscreen-on.round,
  .troubadour-button.fullscreen-off.round,
  .troubadour-button.read-instructions-button.round,
  .troubadour-button.read-comment-button.round,
  .troubadour-button.categorie-explorer-button.round,
  .troubadour-button.close-construction-button.round,
  .troubadour-button.scenery-button.round,
  .troubadour-button.mat-controls-button.round,
  .troubadour-button.zoom-button.round,
  .troubadour-button.over-game-menu-button.round,
  .troubadour-button.construction-help-button.round {
    width: 40px !important;
    height: 40px !important;
  }
  .troubadour-button.duplicate-button {
    padding: 15px !important;
  }
  .troubadour-button.status-button .icon {
    width: 30px;
    height: 30px;
  }
  .troubadour-button.toolbar-button .icon {
    width: 30px !important;
    height: 30px !important;
  }
  .troubadour-button.toolbar-button .button-text {
    font-size: 15px !important;
  }
  .confirm-action-button .icon,
  .construction-demo-button .icon,
  .correction-demo-button .icon,
  .demo-button .icon,
  .demo-button-alt2 .icon {
    width: 40px !important;
    height: 40px !important;
    margin-right: 10px !important;
  }
}
#main-container,
.global-footer {
  background-color: var(--default-bg-2);
}
.page-number-header-dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.page-number-header-dropdown .dropdown-menu {
  border: none;
  background: none;
  box-shadow: none;
  max-width: 450px;
}
@media screen and (max-width: 769px) {
  .page-number-header-dropdown .dropdown-menu {
    max-width: 290px;
    right: 10px !important;
  }
}
.page-number-header-dropdown .page-number-header {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--troubadour-main);
  font-size: 18px;
  line-height: 1.2em;
  font-weight: 800;
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  gap: 5px;
}
@media screen and (min-width: 768px) {
  .page-number-header-dropdown .page-number-header.animate {
    animation: pagenumBounce 1s forwards;
    animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
    animation-iteration-count: 1;
    animation-delay: 1250ms;
    transform: translateY(56px) scale(1.75);
  }
}
.page-number-header-dropdown .page-number-header:hover {
  background-color: transparent;
}
.page-number-header-dropdown .page-number-header span {
  color: var(--default-color-2);
  border: 2px solid var(--troubadour-main);
  background-color: var(--troubadour-main);
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.75em;
  height: 1.75em;
}
.page-number-header-dropdown .page-number-header svg {
  font-size: 12px;
  margin: 0 0 0 5px;
}
@media screen and (min-width: 768px) {
  .page-number-header-dropdown[data-mode="teacher"] .page-number-header.animate {
    animation: pagenumBounce2 1.25s forwards;
  }
}
.construction-page-header {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto 40px;
  padding: 0 20px;
  max-width: 1000px;
  gap: 20px;
}
.construction-page-header h1 {
  color: var(--default-color-3);
  text-align: center;
  font-family: "Sofia Pro";
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  text-transform: none;
  line-height: 1.2em;
  word-break: break-word;
  overflow-wrap: break-word;
  margin: 0;
}
.challenge-creation {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 670px;
  padding: 0;
  margin: 30px auto 0;
  background-color: var(--default-bg-2);
}
.challenge-creation.correction-page {
  margin-top: 80px;
}
.challenge-creation.correction-page.family-correction-page {
  margin-top: 0;
}
.challenge-creation section {
  display: flex;
  flex-direction: column;
}
.challenge-creation section.construction {
  position: relative;
  width: 100%;
}
.challenge-creation section.construction .explore-play-button {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 25%;
  align-self: flex-end;
  margin: 0;
  font-size: 1em;
  z-index: 5;
}
.challenge-creation section.construction .explore-play-button div {
  padding: 10px;
}
.challenge-creation section.gradient-under {
  padding-bottom: 35px;
}
.challenge-creation section.gradient-over {
  padding-top: 35px;
}
.challenge-creation.fullscreen .construction-window {
  position: fixed;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 40;
}
.challenge-creation:not(.fullscreen) {
  width: calc(100vw - 240px);
  max-width: 2000px;
  margin: 0 auto;
  padding: 70px 0 0;
}
.challenge-creation:not(.fullscreen).correction-page {
  margin-top: 80px;
}
.challenge-creation:not(.fullscreen).correction-page.family-correction-page {
  margin-top: 0;
}
.challenge-creation:not(.fullscreen) .construction-window {
  overflow: hidden;
  border-radius: 20px;
  margin: 0 0 72px;
}
.challenge-creation:not(.fullscreen) .construction-window .game-shield-buttons {
  position: absolute;
  top: 80px;
  left: 0;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  z-index: 30;
}
.challenge-creation:not(.fullscreen) .construction-window .game-shield-buttons .troubadour-button {
  align-self: flex-start;
}
.challenge-creation:not(.fullscreen) .construction-window .game-shield-buttons .troubadour-button::before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
@media screen and (max-width: 768px) {
  .challenge-creation {
    min-width: 100%;
    padding: 0 20px;
  }
  .challenge-creation:not(.fullscreen).correction-page {
    margin-top: 120px;
  }
  .challenge-creation:not(.fullscreen) .construction-window {
    width: calc(100% - 60px);
    max-height: 50vh;
    margin: 0 auto 36px;
  }
}
@media screen and (max-height: 850px), screen and (max-width: 1024px) {
  .challenge-creation .construction-window .construction-window-ui .controls-container {
    width: 65px !important;
  }
  .challenge-creation .construction-window .scene-menus .scenery-menu-overlay,
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay {
    left: 65px;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay.opened {
    height: 95%;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .menu-container .assets-menu header {
    padding-left: 0;
    margin-bottom: 0;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .menu-container .category-block .title h4 {
    font-size: 15px !important;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .menu-container .category-block .icon-container {
    width: 200px !important;
    height: 125px !important;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .menu-container .asset-block {
    width: 85px;
    height: 85px;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .filters {
    width: 90px !important;
    padding: 0 !important;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .filters .type-filters {
    margin-bottom: 10px;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .filters .type-filters .filter {
    height: 65px;
    width: 90px;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .filters .type-filters .filter img {
    max-width: 70%;
    max-height: 50%;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .filters .size-filters {
    padding-top: 0;
    flex-wrap: wrap;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .filters .size-filters .filter {
    flex: 0 0 50%;
    margin-bottom: 5px;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .filters .size-filters .filter .filter-label {
    font-size: 11px;
    margin: 0;
  }
  .challenge-creation .construction-window .scene-menus .asset-menu-overlay .filters .size-filters .filter img {
    max-width: 50%;
    margin: 0;
  }
}
.challenge-pagination {
  display: block;
  margin: 0;
  background-color: var(--default-bg);
  border: 2px solid var(--student-challenges-binder-spine-1);
  border-radius: 20px;
}
.challenge-pagination .pages-list {
  position: relative;
  margin: 0;
  padding: 0 10px;
  max-height: 120px;
  overflow-x: hidden;
  overflow-y: auto;
  gap: 10px 20px;
}
.challenge-pagination .pages-list a {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  color: var(--troubadour-main);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  padding: 0;
  gap: 5px;
}
.challenge-pagination .pages-list a span {
  font-weight: inherit;
}
.challenge-pagination .pages-list a:hover {
  color: var(--troubadour-main-5);
  text-decoration: underline;
}
.challenge-pagination .pages-list a.special {
  font-weight: 700;
  text-decoration: underline;
}
.challenge-pagination .pages-list a.active {
  pointer-events: none;
  color: var(--troubadour-main-5);
  font-weight: 700;
}
@media screen and (max-width: 769px) {
  .challenge-pagination .pages-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.challenge-pagination .pages-list::-webkit-scrollbar {
  width: 4px;
}
.challenge-pagination .pages-list::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main);
  border-radius: 5px;
}
.challenge-pagination .pages-list::-webkit-scrollbar-track {
  background-color: var(--ui-track);
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .challenge-pagination .pages-list {
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--troubadour-main) var(--ui-track);
  }
}
.challenge-pagination[data-context="dropdown"] {
  padding: 20px 10px;
  box-shadow: var(--dropshadow);
}
.challenge-pagination[data-context="dropdown"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 16px;
  height: 16px;
  background-color: var(--default-bg);
  border-width: 2px 2px 0 0;
  border-style: solid;
  border-color: var(--student-challenges-binder-spine-1);
}
@media screen and (max-width: 769px) {
  .challenge-pagination[data-context="dropdown"]::before {
    left: unset;
    right: 50px;
  }
}
.challenge-pagination[data-context="dropdown"] .pages-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.challenge-pagination[data-context="dropdown"] .pages-list a span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--troubadour-main);
  font-size: 20px;
  width: 1.75em;
  height: 1.75em;
  border: 2px solid var(--troubadour-main);
  background-color: var(--default-color-2);
  border-radius: 50%;
}
.challenge-pagination[data-context="dropdown"] .pages-list a:hover span,
.challenge-pagination[data-context="dropdown"] .pages-list a.active span {
  color: var(--default-color-2);
  border: 2px solid var(--troubadour-main);
  background-color: var(--troubadour-main);
}
.challenge-pagination[data-context="page"] {
  padding: 20px;
  width: auto;
  margin: 0 auto 72px;
}
.challenge-pagination[data-context="page"] .pages-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}
.challenge-pagination[data-context="page"] .pages-list a {
  min-width: 60px;
}
@media screen and (max-width: 768px) {
  .challenge-pagination[data-context="page"] {
    margin-bottom: 36px;
  }
}
.correction-page .construction-window .construction-window-ui .controls-container {
  top: 120px;
}
.correction-page .in-correction-indicator {
  position: fixed;
  top: 140px;
  left: 0;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: 40;
  transform: translateX(-2000px);
}
.correction-page .in-correction-indicator.family-correction-indicator {
  top: 115px;
}
.correction-page .in-correction-indicator .in-correction-flag {
  position: relative;
  margin: 0 0 10px;
}
.correction-page .in-correction-indicator .in-correction-flag p {
  position: relative;
  color: var(--default-color-2);
  background-color: var(--tutorial-color-14);
  text-align: center;
  font-size: 18px;
  line-height: 1em;
  font-weight: 800;
  margin: 0;
  padding: 10px 10px 14px;
  border-radius: 0 0 5px 0;
  max-width: 120px;
  z-index: 2;
}
.correction-page .in-correction-indicator .in-correction-flag::after {
  content: "";
  position: absolute;
  right: -19px;
  top: -8px;
  width: 36px;
  aspect-ratio: 19 / 20;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-in-correction-ribbon-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.correction-page .in-correction-indicator .in-correction-flag .end-page-correction {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -10px;
  top: -8px;
  cursor: pointer;
  z-index: 40;
  width: 40px;
  height: 40px;
}
.correction-page .in-correction-indicator .in-correction-flag .end-page-correction i,
.correction-page .in-correction-indicator .in-correction-flag .end-page-correction svg {
  color: var(--default-color-2);
}
.correction-page.fullscreen .in-correction-indicator {
  top: 30px;
}
.correction-page[data-is-correction-mode="1"] .in-correction-indicator {
  animation: SlideInFromLeft 1s forwards;
}
.correction-page[data-is-correction-mode="0"] .in-correction-indicator {
  animation: SlideOutToLeft 1s forwards;
}
.construction-page-lower {
  display: flex;
  flex-flow: column;
  width: calc(100vw - 240px);
  max-width: 2000px;
  margin: 0 auto;
  padding: 0;
}
.construction-page-lower .footer-actions {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin: 0 0 60px;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .construction-page-lower {
    width: calc(100% - 60px);
  }
}
.mark-undone-flag {
  position: fixed;
  top: 100px;
  left: 0;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: 30;
  animation: SlideInFromLeft 1s forwards;
}
.mark-undone-flag.closed {
  animation: SlideOutToLeft 1s forwards;
}
.mark-undone-flag .finished-flag {
  margin: 0 0 10px;
}
.mark-undone-flag .finished-flag p {
  position: relative;
  color: var(--default-color-2);
  background-color: var(--troubadour-main);
  text-align: center;
  font-size: 40px;
  line-height: 1em;
  font-weight: 800;
  margin: 0;
  padding: 10px 24px 14px 20px;
  border-radius: 0 0 5px 0;
  z-index: 2;
}
.mark-undone-flag .finished-flag::after {
  content: "";
  position: absolute;
  right: -19px;
  top: -8px;
  width: 36px;
  aspect-ratio: 19 / 20;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-finished-ribbon-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.mark-undone-flag .mark-undone-dropdown {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-button {
  color: var(--default-color-2);
  background-color: transparent;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2em;
  text-decoration-line: underline;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 5px;
  user-select: none;
}
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-button i,
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-button svg {
  font-size: 15px;
  line-height: 1;
  margin: 0;
  padding: 0;
}
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-menu {
  position: relative;
  background-color: var(--default-color-2);
  border-radius: 10px;
  padding: 5px;
  border: 2px solid var(--default-color-7);
  transform: translate(0, -12px) !important;
}
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-menu:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-6px, -50%) rotate(-45deg);
  width: 8px;
  height: 8px;
  background-color: var(--default-color-2);
  border-color: var(--default-color-7);
  border-style: solid;
  border-width: 2px 0 0 2px;
}
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-menu .mark-undone-button {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 5px;
  border-radius: 10px;
  width: max-content;
  user-select: none;
  gap: 10px;
}
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-menu .mark-undone-button::before {
  content: "";
  width: 25px;
  height: 25px;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/icons/troub-flag-not-started.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-menu .mark-undone-button p {
  color: var(--default-color-3);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2em;
  margin: 0;
}
.mark-undone-flag .mark-undone-dropdown .mark-undone-dropdown-menu .mark-undone-button:hover {
  background-color: var(--default-color-7);
}
@media screen and (max-width: 1024px) {
  .mark-undone-flag .finished-flag p {
    font-size: 30px;
    padding: 8px 24px 12px 14px;
  }
  .mark-undone-flag .finished-flag::after {
    right: -14px;
    top: -6px;
    width: 26px;
  }
}
.teacher-comment {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.4em;
}
@keyframes pagenumBounce {
  0% {
    transform: translateY(56px) scale(1.75);
  }
  10% {
    transform: translateY(56px);
  }
  30% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px) scale(1);
  }
  57% {
    transform: translateY(0);
  }
  64% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0) scale(1);
    pointer-events: all;
  }
}
@keyframes pagenumBounce2 {
  0% {
    transform: translateY(104px) scale(1.75);
  }
  10% {
    transform: translateY(104px);
  }
  30% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px) scale(1);
  }
  57% {
    transform: translateY(0);
  }
  64% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0) scale(1);
    pointer-events: all;
  }
}
@keyframes SlideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
  80% {
    transform: translateX(-40px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes SlideOutToLeft {
  0% {
    transform: translateX(0);
  }
  99% {
    transform: translateX(-2000px);
  }
  100% {
    opacity: 0;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Game/Construction/ConstructionGuidedTutorial.less ***!
  \********************************************************************************************************************************************************************************************************************************************/
.tutorial-tooltip {
  position: relative;
  display: block;
  background-color: var(--tutorial-color-5);
  border-radius: 6px;
  min-height: 110px;
  height: auto;
  border: none;
}
.tutorial-tooltip .shepherd-arrow::before {
  background-color: var(--tutorial-color-5);
}
.tutorial-tooltip .shepherd-content {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  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: 100px;
  background-position: bottom 80% left -18px;
  border-radius: 6px;
}
.tutorial-tooltip .shepherd-content .shepherd-text {
  color: var(--default-color-2);
  font-family: "Sofia Pro";
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2em;
  padding: 20px 20px 20px 100px;
  min-height: 110px;
  height: 100%;
  flex-grow: 1;
}
.tutorial-tooltip .shepherd-content .shepherd-text p {
  margin: 0 0 15px;
}
.tutorial-tooltip .shepherd-content .shepherd-text p:last-of-type {
  margin-bottom: 0;
}
.tutorial-tooltip .shepherd-content .shepherd-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  padding: 0;
  border-radius: 0 !important;
}
.tutorial-tooltip .shepherd-content .shepherd-footer .shepherd-button {
  color: var(--tutorial-color-13);
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: none;
  padding: 10px 20px 20px;
  -webkit-appearance: none;
  appearance: none;
}
.tutorial-tooltip[data-popper-placement^="left"] {
  border-top-right-radius: 0;
}
.tutorial-tooltip[data-popper-placement^="right"] {
  border-top-left-radius: 0;
}
.tutorial-tooltip.hidden-tooltip {
  left: -10000px;
  top: -10000px;
  right: unset;
  bottom: unset;
  opacity: 0;
}
.tutorial-tooltip.troub-tutorial-tooltip-try-demo-tip-3 {
  position: fixed !important;
  top: unset !important;
  left: 50% !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;
}
.add-asset-text-icon {
  width: 60px;
}
.tutorial-disabled {
  filter: grayscale();
  pointer-events: none;
}
.phaser-div.locked {
  pointer-events: none;
}
.phaser-div.locked * {
  pointer-events: none;
}
.continue-tutorial {
  position: fixed !important;
  bottom: 20px;
  right: 20px;
  z-index: 40;
  display: inline-block;
}
.continue-tutorial .continue-tutorial-btn {
  align-self: flex-end;
}

/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Game/Interfaces/RightMenu.less ***!
  \*************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: Eagle;
  src: url(/fonts/5c034216f83ebdcb8f19.woff2) format("woff2"), url(/fonts/e07636dc31bfd973a3d0.woff) format("woff"), url(/fonts/7e80fdbabc4b60f7179b.ttf) format("truetype");
}
@font-face {
  font-family: "Sofia Pro";
  src: url(/fonts/36caceeea96211e34cd3.woff2) format("woff2"), url(/fonts/c882ad7fd7d50a5e1684.woff) format("woff"), url(/fonts/e74cff718ec00eb5a71f.ttf) format("truetype");
}
@font-face {
  font-family: "Sofia Pro";
  src: url(/fonts/fe529ef6451acc93ccba.woff2) format("woff2"), url(/fonts/834973bb11e1b804a0e7.woff) format("woff"), url(/fonts/6c3598419b959daec424.ttf) format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "Sofia Pro";
  src: url(/fonts/7d6ad1ec9a090ad4a68a.woff2) format("woff2"), url(/fonts/b52d1f5ba82fab9167ff.woff) format("woff"), url(/fonts/8efb0c8c646e9a3007e9.ttf) format("truetype");
  font-style: italic;
}
h1 {
  font-family: Eagle, Lato, sans-serif;
  font-weight: bold;
  font-size: 3em;
  text-transform: uppercase;
}
h2 {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 600;
  font-size: 2em;
  text-transform: uppercase;
}
h3 {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 600;
  font-size: 1.75em;
}
h4 {
  font-family: Eagle, Lato, sans-serif;
  font-weight: 600;
  font-size: 1.5em;
  letter-spacing: 0.04em;
}
h5 {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 400;
  font-size: 1.2em;
}
h6 {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: 0;
}
p {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: 400;
  font-size: 1em;
}
small {
  font-family: "Sofia Pro", Lato, sans-serif;
  font-weight: normal;
  font-size: 0.75em;
  letter-spacing: 0.08em;
}
.right-menu {
  position: fixed;
  right: 0;
  z-index: 35;
}
.right-menu[data-mode="family"],
.right-menu[data-mode="student"] {
  top: 115px;
}
.right-menu[data-mode="teacher"] {
  top: 165px;
}
.right-menu[data-mode="student"] {
  z-index: 45;
}
.right-menu .menu-group {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  background-color: var(--default-bg);
  margin: 0 0 15px;
  padding: 15px 10px;
  box-shadow: var(--dropshadow);
  border-radius: 10px 0 0 10px;
  flex: 0 1 auto;
  gap: 10px;
}
.right-menu section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
}
@media screen and (max-height: 699px), screen and (max-width: 768px) {
  .right-menu section .troubadour-button.round[data-size="regular"] {
    width: 30px !important;
    height: 30px !important;
  }
}
.right-menu section.reading-mode-section .reading-mode-controls-dropdown-menu {
  left: -260px !important;
  top: -20px !important;
  width: 100vw;
  max-width: 230px;
  padding: 20px;
  border-radius: 20px;
  border-color: var(--default-color-5);
  box-shadow: var(--dropshadow4);
}
.right-menu section.reading-mode-section .reading-mode-controls-dropdown-menu:after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: var(--default-color-2);
  transform: translateX(50%) rotate(45deg);
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: var(--default-color-5);
}
.right-menu section.reading-mode-section .reading-mode-controls-dropdown-menu .reading-mode-link {
  color: var(--default-color-3);
  display: block;
  font-size: clamp(12px, 2vw, 16px);
  font-weight: 800;
  line-height: 1.2em;
  padding: 10px;
  border-radius: 10px;
}
.right-menu section.reading-mode-section .reading-mode-controls-dropdown-menu .reading-mode-link:hover {
  background-color: var(--troubadour-main-17);
}
@media screen and (max-width: 768px) {
  .right-menu {
    display: flex;
    width: 100%;
    height: unset;
    flex-flow: row nowrap;
    justify-content: flex-end;
    background-color: var(--troubadour-main);
    box-shadow: var(--dropshadow7);
    border-radius: 0;
    padding: 0 5px;
    gap: 0;
  }
  .right-menu[data-mode="teacher"] {
    top: 136px;
  }
  .right-menu[data-mode="teacher"][data-current-status="IN_PROGRESS"] {
    background-color: var(--challenge-state-inprog-1);
  }
  .right-menu[data-mode="teacher"][data-current-status="NEED_REVISION"] {
    background-color: var(--challenge-state-needrev-1);
  }
  .right-menu[data-mode="teacher"][data-current-status="COMPLETED"] {
    background-color: var(--challenge-state-inportfolio-1);
  }
  .right-menu[data-mode="student"],
  .right-menu[data-mode="family"] {
    top: 40px;
  }
  .right-menu .menu-group {
    flex-flow: row nowrap;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    gap: 0;
  }
  .right-menu .menu-group section {
    padding: 5px 5px 0;
  }
  .right-menu .menu-group section .troubadour-button.round {
    opacity: 1;
  }
  .right-menu .menu-group section.reading-mode-section .reading-mode-controls-dropdown-menu {
    left: -130px !important;
    top: 45px !important;
    max-width: 190px;
    padding: 10px;
    border-radius: 10px;
  }
  .right-menu .menu-group section.reading-mode-section .reading-mode-controls-dropdown-menu:after {
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    transform: translateX(-37px) translateY(-8px) rotate(45deg);
    border-width: 1px 0px 0px 1px;
  }
  .right-menu .menu-group section.reading-mode-section .reading-mode-controls-dropdown-menu .reading-mode-link {
    padding: 5px;
  }
}
@media screen and (max-width: 768px) {
  .construction-page.fullscreen .right-menu[data-mode="student"] {
    top: 0;
  }
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** 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/NoInternetPopup.less ***!
  \**********************************************************************************************************************************************************************************************************************/
.nanopopup.no-internet-popup {
  width: 700px;
  min-width: 700px;
  max-width: 700px;
  height: 455px;
  min-height: 455px;
  max-height: 455px;
  margin: 0;
  padding: 0 !important;
  background-color: var(--no-internet-popup-bg);
  overflow: hidden;
}
.nanopopup.no-internet-popup .no-internet-popup-bg {
  position: absolute;
  width: calc(100% + 20px);
  aspect-ratio: 982 / 402;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  padding: 0;
  margin: 0;
  border: 0;
}
.nanopopup.no-internet-popup .laptop-anim {
  position: absolute;
  left: 47px;
  top: 277px;
  width: 140px;
  aspect-ratio: 480 / 304;
}
.nanopopup.no-internet-popup .back-to-challenges {
  position: absolute;
  left: 20px;
  top: 20px;
}
.nanopopup.no-internet-popup .back-to-challenges .quit-button {
  opacity: 1;
  background-color: var(--default-bg) !important;
}
.nanopopup.no-internet-popup .back-to-challenges .quit-button .button-text {
  color: var(--default-color-3) !important;
}
.nanopopup.no-internet-popup .back-to-challenges .quit-button:hover {
  background-color: var(--default-color-3) !important;
}
.nanopopup.no-internet-popup .back-to-challenges .quit-button:hover .button-text {
  color: var(--default-bg) !important;
}
.nanopopup.no-internet-popup .main-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
}
.nanopopup.no-internet-popup .main-heading h2 {
  color: var(--no-internet-popup-color1);
  margin: 0;
  padding: 10px 60px;
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  text-align: center;
  text-transform: none;
}
.nanopopup.no-internet-popup .main-heading h2.connection-established {
  font-size: 40px;
  line-height: 40px;
}
.nanopopup.no-internet-popup .countdown-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 228px;
  top: 194px;
  width: 256px;
  height: 134px;
}
.nanopopup.no-internet-popup .countdown-container h3 {
  display: inline-block;
  font-family: FatFrank, Eagle, Lato, sans-serif;
  color: var(--no-internet-popup-color2);
  font-size: 100px;
  font-weight: 900;
  line-height: 1em;
  z-index: 2;
}
.nanopopup.no-internet-popup .countdown-container .loading-spinner {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: 1;
}
.nanopopup.no-internet-popup .retry-connection {
  position: absolute;
  right: 2%;
  bottom: 3%;
}
.nanopopup.no-internet-popup .retry-connection .retry-button {
  opacity: 1;
  background-color: var(--default-bg) !important;
}
.nanopopup.no-internet-popup .retry-connection .retry-button .button-text {
  color: var(--default-color-3) !important;
}
.nanopopup.no-internet-popup .retry-connection .retry-button:hover {
  background-color: var(--default-color-3) !important;
}
.nanopopup.no-internet-popup .retry-connection .retry-button:hover .button-text {
  color: var(--default-bg) !important;
}
.nanopopup.no-internet-popup .retry-connection .retry-button.disabled {
  opacity: 0.5;
}
.nanopopup.no-internet-popup .retry-connection .retry-button[data-size="tiny"] {
  display: flex;
}
.nanopopup.no-internet-popup .retry-connection .retry-button[data-size="small"] {
  display: none;
}
@media screen and (min-width: 1061px) and (min-height: 701px) {
  .nanopopup.no-internet-popup .laptop-anim {
    left: 67px;
    top: 386px;
    width: 188px;
  }
  .nanopopup.no-internet-popup .main-heading {
    height: 265px;
  }
  .nanopopup.no-internet-popup .main-heading h2 {
    font-size: 40px;
    line-height: 45px;
  }
  .nanopopup.no-internet-popup .main-heading h2.connection-established {
    font-size: 54px;
    line-height: 54px;
  }
  .nanopopup.no-internet-popup .countdown-container {
    left: 311px;
    top: 277px;
    width: 346px;
    height: 176px;
  }
  .nanopopup.no-internet-popup .countdown-container h3 {
    font-size: 140px;
  }
  .nanopopup.no-internet-popup .retry-connection .retry-button[data-size="tiny"] {
    display: none;
  }
  .nanopopup.no-internet-popup .retry-connection .retry-button[data-size="small"] {
    display: flex;
  }
}
@media (max-width: 1060px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.no-internet-popup {
    width: 700px !important;
    min-width: 700px !important;
    max-width: 700px !important;
    height: 455px !important;
    min-height: 455px !important;
    max-height: 455px !important;
  }
}
@media (min-width: 1061px) and (min-height: 701px) {
  .nanopopup.no-internet-popup {
    width: 950px !important;
    min-width: 950px !important;
    max-width: 950px !important;
    height: 630px !important;
    min-height: 630px !important;
    max-height: 630px !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/Assets/CategoryExplorer.less ***!
  \***********************************************************************************************************************************************************************************************************************/
.asset-menu-overlay {
  position: absolute;
  width: calc(100% - 70px);
  left: 70px;
  z-index: 3;
}
.asset-menu-overlay.opened {
  height: 100%;
}
.assets-creation-menu .categories-menu header h2 {
  color: var(--default-color-3);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.2em;
  text-align: center;
  text-transform: none;
  margin: 0;
}
.assets-creation-menu .categories-menu header h3 {
  color: var(--troubadour-main);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  line-height: 2em;
  border-bottom: 2px solid var(--babillard-color-1);
  text-transform: none;
  margin: 0 0 20px;
}
.assets-creation-menu .categories-menu .list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.assets-creation-menu .categories-menu .list.scrollable-list {
  overflow-y: scroll;
}
.assets-creation-menu .categories-menu .list.scrollable-list::-webkit-scrollbar {
  width: 8px;
}
.assets-creation-menu .categories-menu .list.scrollable-list::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main);
  border-radius: 10px;
}
.assets-creation-menu .categories-menu .list.scrollable-list::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
@supports not selector(::-webkit-scrollbar) {
  .assets-creation-menu .categories-menu .list.scrollable-list {
    scrollbar-color: var(--troubadour-main) transparent;
    scrollbar-width: thin;
  }
}
.assets-creation-menu .categories-menu .list .list-item-container {
  overflow: hidden;
  border-radius: 6px;
  box-shadow: var(--ui-item-shadow);
  margin: 0 7.5px 30px 7.5px;
  cursor: pointer;
  position: relative;
}
.assets-creation-menu .categories-menu .list .list-item-container .remove-button {
  position: absolute;
  left: 5px;
  top: 5px;
}
.assets-creation-menu .categories-menu .list .list-item-container:hover {
  box-shadow: var(--ui-item-shadow-hover);
}
.assets-creation-menu .categories-menu .list .list-item-container:hover img {
  opacity: 0.8;
}
.assets-creation-menu .categories-menu .list .list-item-container .icon-container {
  width: 300px;
  height: 200px;
}
.assets-creation-menu .categories-menu .list .list-item-container .icon-container .icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.assets-creation-menu .categories-menu .list .list-item-container .title {
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--default-color-2);
}
.assets-creation-menu .categories-menu .list .list-item-container .title h4 {
  font-family: var(--font-reading);
  font-weight: 500;
  font-size: 23px;
  line-height: 27px;
  text-align: center;
  color: var(--default-color);
}
.assets-creation-menu .assets-menu header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 25px;
  margin: 0 0 30px;
}
.assets-creation-menu .assets-menu header .category-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.2em;
  width: 100%;
  text-align: center;
}
.assets-creation-menu .assets-menu header .back-categories-button {
  align-self: flex-start;
}
.assets-creation-menu .assets-menu .main-section {
  display: flex;
  overflow: hidden;
}
.assets-creation-menu .assets-menu .main-section .filters {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
}
.assets-creation-menu .assets-menu .main-section .filters .filter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.assets-creation-menu .assets-menu .main-section .filters .filter .filter-label {
  font-size: 12px;
  line-height: 12px;
  font-family: "Sofia Pro", sans-serif;
  font-weight: bolder;
  color: var(--default-color);
  bottom: 0;
  margin: 0 auto 5px auto;
}
.assets-creation-menu .assets-menu .main-section .filters .filter img {
  margin: 10px auto auto auto;
}
.assets-creation-menu .assets-menu .main-section .filters .filter.disabled {
  pointer-events: none;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter {
  background-color: var(--default-bg);
  border: 2px solid var(--ui-disabled);
  border-radius: 10px;
  width: 150px;
  max-height: 70px;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter.disabled {
  pointer-events: none;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter .selected-icon {
  height: 50%;
  width: auto;
  display: none;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter .disabled-icon {
  height: 50%;
  width: auto;
  display: block;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter .filter-label {
  color: var(--ui-disabled);
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter.selected,
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter:hover {
  background-color: var(--ui-filter-bg);
  border-color: transparent;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter.selected .selected-icon,
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter:hover .selected-icon {
  display: block;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter.selected .disabled-icon,
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter:hover .disabled-icon {
  display: none;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter.selected .filter-label,
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter:hover .filter-label {
  color: var(--default-color);
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter:hover {
  opacity: 0.8;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter:last-child {
  margin-bottom: 0;
}
.assets-creation-menu .assets-menu .main-section .filters .type-filters .filter[data-filter="type"] {
  height: 90px;
}
.assets-creation-menu .assets-menu .main-section .filters .size-filters {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  padding-top: 15px;
}
.assets-creation-menu .assets-menu .main-section .filters .size-filters .filter img {
  filter: brightness(0) saturate(100%) invert(60%) sepia(74%) saturate(0%) hue-rotate(308deg) brightness(89%) contrast(95%);
}
.assets-creation-menu .assets-menu .main-section .filters .size-filters .filter .filter-label {
  color: var(--ui-disabled);
}
.assets-creation-menu .assets-menu .main-section .filters .size-filters .filter.selected img,
.assets-creation-menu .assets-menu .main-section .filters .size-filters .filter:hover img {
  filter: none;
}
.assets-creation-menu .assets-menu .main-section .filters .size-filters .filter.selected .filter-label,
.assets-creation-menu .assets-menu .main-section .filters .size-filters .filter:hover .filter-label {
  color: var(--default-color);
}
.assets-creation-menu .assets-menu .main-section .filters .size-filters .filter:hover {
  opacity: 0.8;
}
.assets-creation-menu .assets-menu .main-section .lists {
  flex: 1;
  flex-direction: column;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container.filtered-list {
  border-top: 2px solid var(--border);
  padding-top: 20px;
  gap: 20px;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container {
  overflow: hidden;
  background-color: var(--ui-asset-bg);
  width: 135px;
  height: 135px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container:hover {
  background-color: var(--ui-asset-bg-hover);
  box-shadow: var(--ui-item-shadow-hover);
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container.filtered {
  opacity: 0.4;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container.inactive-historical {
  filter: saturate(0);
  opacity: 0.2;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container .icon-container {
  position: relative;
  overflow: hidden;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container .icon-container .icon {
  position: absolute;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container .asset-flip-img {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container[data-has-back="0"] .asset-flip-img {
  display: none;
}
@media screen and (max-width: 768px) {
  .assets-creation-menu .assets-menu .main-section .lists .list-container .list .list-item-container {
    width: 60px;
    height: 60px;
  }
}
@media screen and (max-height: 850px) {
  .assets-creation-menu .assets-menu .main-section .filters .type-filters {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .assets-creation-menu .assets-menu .main-section .filters .type-filters .filter {
    margin: 0;
    height: 50px;
  }
  .assets-creation-menu .assets-menu .main-section .filters .type-filters .filter .filter-label {
    font-size: 8px;
  }
  .assets-creation-menu .assets-menu .main-section .filters .size-filters .filter {
    flex: 0 0 24% !important;
  }
  .assets-creation-menu .assets-menu .main-section .filters .size-filters .filter .filter-label {
    font-size: 8px !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/Scenery/SceneryMenu.less ***!
  \*******************************************************************************************************************************************************************************************************************/
.scenery-menu-overlay {
  position: absolute;
  width: calc(100% - 70px);
  z-index: 3;
  top: 0;
  left: 70px;
}
.scenery-container {
  max-height: calc(100vh - 130px);
  overflow-y: hidden;
}
.scenery-container .scenery-menu .scenery-menu-container {
  display: flex;
  max-height: 425px;
}
.scenery-container .scenery-menu .options-section {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}
.scenery-container .scenery-menu .options-section .scenery-option {
  width: 150px;
  height: 90px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--ui-button-unselected);
  border-radius: 10px;
  background-color: var(--default-bg);
  color: var(--ui-button-unselected);
  font-size: 12px;
  font-weight: bolder;
  cursor: pointer;
}
.scenery-container .scenery-menu .options-section .scenery-option img {
  width: 50px;
  height: auto;
  opacity: 60%;
}
.scenery-container .scenery-menu .options-section .scenery-option img.hover {
  display: none;
}
.scenery-container .scenery-menu .options-section .scenery-option .option-text {
  color: var(--ui-button-unselected);
  font-size: 12px;
  line-height: 1.2em;
  text-align: center;
}
.scenery-container .scenery-menu .options-section .scenery-option:hover {
  background-color: var(--ui-button-selected);
  color: var(--default-color);
  border-color: var(--default-color);
  opacity: 80%;
}
.scenery-container .scenery-menu .options-section .scenery-option:hover img.hover,
.scenery-container .scenery-menu .options-section .scenery-option.selected img.hover {
  display: block;
}
.scenery-container .scenery-menu .options-section .scenery-option:hover img.normal,
.scenery-container .scenery-menu .options-section .scenery-option.selected img.normal {
  display: none;
}
.scenery-container .scenery-menu .options-section .scenery-option.selected {
  background-color: var(--ui-button-selected);
  color: var(--default-color);
  border-color: transparent;
}
.scenery-container .scenery-menu .options-section .scenery-option.selected img {
  opacity: 100%;
}
.scenery-container .scenery-menu .choices-section {
  overflow-y: auto;
  max-height: 100%;
}
.scenery-container .scenery-menu .choices-section::-webkit-scrollbar {
  width: 8px;
}
.scenery-container .scenery-menu .choices-section::-webkit-scrollbar-thumb {
  background-color: var(--ui-item-selected);
  border-radius: 5px;
}
.scenery-container .scenery-menu .choices-section::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 5px;
}
@supports not selector(::-webkit-scrollbar) {
  .scenery-container .scenery-menu .choices-section {
    scrollbar-color: var(--ui-item-selected) transparent;
    scrollbar-width: thin;
  }
}
.scenery-container .scenery-menu .choices-section .choices-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: wrap;
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice {
  width: 170px;
  height: 115px;
  margin: 0 7.5px 15px 7.5px;
  border-radius: 10px;
  background-color: var(--ui-item-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice .back-color-preview {
  margin: auto;
  width: 80%;
  height: 80%;
  background-image: linear-gradient(var(--back-color-main), var(--back-color-secondary));
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice:hover {
  opacity: 0.8;
  background-color: var(--ui-item-selected);
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice.selected {
  background-color: var(--ui-item-selected);
  border-color: transparent;
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice.selected:hover {
  opacity: 1;
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice.selected .back-color-preview {
  filter: brightness(80%);
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice img {
  width: 175px;
  height: 115px;
  object-fit: cover;
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice img.half-size {
  object-position: top;
  width: 175px;
  height: 100px;
}
.scenery-container .scenery-menu .choices-section .choices-container .scenery-choice img.no-img {
  width: 31px;
  height: 31px;
}
.scenery-container .duplicate-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--info-4);
  margin: 15px 0;
  padding: 20px;
  border-radius: 10px;
  min-height: 80px;
}
.scenery-container .duplicate-option .duplicate-info-text {
  font-size: 20px;
  line-height: 22.5px;
  color: var(--default-color);
  font-weight: bold;
  padding-right: 15px;
}
.scenery-container .duplicate-option .duplicate-button {
  flex: 2 0 auto;
}
.scenery-container .duplicate-menu header {
  flex-wrap: wrap;
  align-items: flex-end;
  height: 100px;
}
.scenery-container .duplicate-menu header .duplication-title {
  flex: 2;
  text-align: center;
  padding-right: 45px;
}
.scenery-container .duplicate-menu header .warning {
  flex: 1 0 100%;
  text-align: center;
  color: var(--warning-dark2);
  font-size: 23px;
  line-height: 27px;
  font-weight: bolder;
}
.scenery-container .duplicate-menu header .warning svg {
  color: var(--warning-dark2);
  margin-right: 5px;
}
.scenery-container .duplicate-menu .sub-header {
  text-align: center;
}
.scenery-container .duplicate-menu .existing-scenes-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  min-height: 200px;
  gap: 20px;
}
.scenery-container .duplicate-menu .existing-scenes-list .existing-scene {
  box-shadow: var(--ui-item-shadow);
  background-color: var(--ui-item-bg);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  margin: 0;
  cursor: pointer;
}
.scenery-container .duplicate-menu .existing-scenes-list .existing-scene .scenery-icon,
.scenery-container .duplicate-menu .existing-scenes-list .existing-scene .scene-spinner {
  width: 100%;
  object-fit: cover;
}
.scenery-container .duplicate-menu .existing-scenes-list .existing-scene .scene-label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  background-color: var(--default-bg);
  border-radius: 0 0 10px 10px;
}
.scenery-container .duplicate-menu .existing-scenes-list .existing-scene .scene-label h4 {
  font-family: "Sofia Pro", sans-serif;
  font-size: 23px;
  line-height: 27px;
  font-weight: normal;
}
.scenery-container .duplicate-menu .existing-scenes-list .existing-scene:hover {
  background-color: var(--left-menu-hover-bg);
}
.scenery-container .duplicate-menu .existing-scenes-list .existing-scene.selected {
  background-color: var(--left-menu-selected-bg);
}
.scenery-container .disclaimer-menu header {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 20px;
  text-align: left;
}
.scenery-container .disclaimer-menu header .button-group {
  width: 100%;
  justify-content: flex-start;
  padding: 0;
}
.scenery-container .disclaimer-menu .warning-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  padding: 0 15px;
}
.scenery-container .disclaimer-menu .warning-container .duplication-title {
  text-align: center;
  padding: 0 0 10px;
}
.scenery-container .disclaimer-menu .button-group {
  display: none;
  justify-content: space-evenly;
  gap: 5px;
  padding-top: 35px;
}
.scenery-container .disclaimer-menu .button-group.mini-buttons {
  display: flex;
}
@media screen and (min-width: 1025px) {
  .scenery-container .disclaimer-menu .button-group.mini-buttons {
    display: none;
  }
  .scenery-container .disclaimer-menu .button-group.small-buttons {
    display: flex;
    min-height: 60px;
  }
}
@media screen and (max-height: 850px) {
  .scenery-container .scenery-menu .scenery-menu-container {
    min-height: calc(95% - 130px) !important;
  }
}
@media screen and (max-width: 1280px) {
  .scenery-container {
    padding: 15px 25px !important;
  }
  .scenery-container .scenery-menu .scenery-menu-container {
    min-height: 365px;
  }
  .scenery-container .scenery-menu .scenery-menu-container .scenery-option {
    width: 100px;
    height: 80px;
  }
  .scenery-container .scenery-menu .scenery-menu-container .scenery-option img {
    width: 40px;
  }
  .scenery-container .scenery-menu .duplicate-option .duplicate-info-text {
    font-size: 16px;
  }
  .scenery-container .duplicate-menu .existing-scene .scenery-icon {
    max-height: 150px;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Game/Interfaces/StoryLocation/StoryLocation.less ***!
  \*******************************************************************************************************************************************************************************************************************************************/

/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Game/Interfaces/StoryLocation/StoryLocationPopup.less ***!
  \************************************************************************************************************************************************************************************************************************************************/
.story-location-popup {
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}
.story-location-popup .close-container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--default-bg);
  right: 0;
  top: 0;
  z-index: 100;
}
.story-location-popup .close-container i,
.story-location-popup .close-container svg {
  font-size: 20px;
  color: var(--troubadour-main);
}
.story-location-popup .close-container:hover {
  filter: brightness(1.2);
}
.story-location-popup .loading-placeholder {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-semitrans-high-opacity);
  width: 100%;
  height: 300px;
  z-index: 1000;
}
.story-location-popup .page-title {
  color: var(--default-color);
  text-align: center;
  font-family: "Sofia Pro";
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.2em;
  text-transform: none;
  margin: 40px 0 20px;
}
.story-location-popup .location-subtitle {
  color: var(--default-color-3);
  text-align: center;
  font-family: "Sofia Pro";
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 400;
  line-height: 1.2em;
  text-transform: none;
  margin: 0 0 20px;
  flex: 1;
}
.story-location-popup .location-subtitle span {
  display: block;
  font-size: clamp(12px, 2vw, 16px);
}
.story-location-popup .cancel-btn {
  color: var(--default-color-8);
  font-size: clamp(12px, 2vw, 16px);
  font-weight: 800;
  line-height: 1.2em;
  text-decoration-line: underline;
}
.story-location-popup .cancel-btn:hover {
  color: var(--troubadour-main-5);
}
.story-location-popup .action-buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
}
.story-location-popup .popup-section {
  display: flex;
  flex-direction: column;
  padding: 0 5% 6%;
  height: 100%;
}
.story-location-popup .popup-section.selection-section .selection-section-content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  flex: 1;
  height: 60vh;
  max-height: 60vh;
  overflow-x: hidden;
  overflow-y: auto;
  container-type: inline-size;
  container-name: locations-list;
}
.story-location-popup .popup-section.selection-section .selection-section-content::-webkit-scrollbar {
  width: 8px;
}
.story-location-popup .popup-section.selection-section .selection-section-content::-webkit-scrollbar-thumb {
  background-color: var(--troubadour-main-5);
  border-radius: 10px;
}
.story-location-popup .popup-section.selection-section .selection-section-content::-webkit-scrollbar-track {
  background-color: var(--default-color-10);
  border-radius: 10px;
}
@supports not selector(::-webkit-scrollbar) {
  .story-location-popup .popup-section.selection-section .selection-section-content {
    scrollbar-color: var(--troubadour-main-5) var(--default-color-10);
    scrollbar-width: thin;
  }
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 2px 15px 40px 5px;
  gap: 20px;
}
@container locations-list (max-width: 759px) {
  .story-location-popup .popup-section.selection-section .selection-section-content .locations-list {
    flex-direction: column;
    align-items: center;
  }
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  aspect-ratio: 350 / 160;
  width: 100%;
  min-width: 260px;
  max-width: 350px;
  background-color: var(--onboarding-bg-9);
  border: 2px dashed var(--default-color-6);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 400;
  opacity: 1;
  transition: all 0.2s ease-in-out;
  order: -1;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn * {
  transition: all 0.1s ease-in-out;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn .add-icon {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 25px;
  width: 100%;
  background-color: var(--default-color-2);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn .add-icon i,
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn .add-icon svg {
  color: var(--default-color-6);
  width: 50px;
  height: 50px;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn .add-text {
  width: 100%;
  padding: 10px;
  margin: 0;
  flex: 1;
  color: var(--default-color-6);
  text-align: center;
  font-size: clamp(18px, 2vw, 23px);
  line-height: normal;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn.--add-location:hover {
  background-color: var(--tutorial-color-12);
  border-color: var(--tutorial-color-14);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn.--add-location:hover .add-icon i,
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn.--add-location:hover .add-icon svg {
  color: var(--tutorial-color-14);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn.--empty-scene {
  opacity: 0.5;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn.--remove {
  pointer-events: none;
  background-color: var(--default-color-9);
  border: 2px solid var(--text-entry-icon-border);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn.--remove .add-icon i,
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn.--remove .add-icon svg {
  color: var(--babillard-color-16);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .add-location-btn.--remove .add-text {
  font-size: clamp(12px, 2vw, 14px);
  color: var(--babillard-color-16);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container {
  position: relative;
  margin: 0;
  padding: 0;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-element {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  aspect-ratio: 350 / 160;
  width: 100%;
  min-width: 260px;
  max-width: 350px;
  border-radius: 6px;
  box-shadow: var(--dropshadow);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-element .location-image img {
  max-width: 100%;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-element .location-name-container {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-element .location-name-container .location-name {
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: clamp(14px, 2vw, 23px);
  line-height: 1.2em;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-element:hover {
  outline: 2px solid var(--tutorial-color-14);
  background-color: var(--tutorial-color-12);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-actions {
  position: absolute;
  top: 0;
  right: 0;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-actions .kebab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 30px;
  background-color: var(--default-bg-semitrans);
  border-radius: 0 6px 0 6px;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-actions .kebab:hover {
  background-color: var(--tutorial-color-14);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-actions .dropdown-menu {
  padding: 20px 20px 0;
  border-radius: 10px;
  overflow: hidden;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-actions .dropdown-menu .dropdown-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  font-size: clamp(12px, 2vw, 16px);
  font-weight: 400;
  line-height: normal;
  color: var(--default-color-3);
  background-color: transparent;
  padding: 0;
  margin-bottom: 20px;
  text-decoration: none;
  gap: 10px;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-actions .dropdown-menu .dropdown-item img {
  margin: 0;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-actions .dropdown-menu .dropdown-item span {
  font-weight: 800;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container .location-actions .dropdown-menu .dropdown-item:hover {
  text-decoration: underline;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container[data-new="true"] {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container[data-new="true"] .location-element {
  pointer-events: none;
  outline: 2px solid var(--tutorial-color-14);
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container[data-new="true"] .location-element::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 110 / 24;
  width: 110px;
  transform: translateX(-10px);
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-new-label-bg.svg");
  background-position: center right;
  background-repeat: no-repeat;
}
.story-location-popup .popup-section.selection-section .selection-section-content .locations-list .location-element-container[data-new="true"] .location-element::after {
  content: attr(data-new-label);
  position: absolute;
  top: 20px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 12px;
  line-height: normal;
  font-weight: 800;
  width: 110px;
  height: 24px;
  color: var(--default-color-2);
  transform: translate(-10px, -3px);
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.story-location-popup .popup-section.naming-section {
  justify-content: flex-start;
  align-items: center;
}
.story-location-popup .popup-section.naming-section input {
  width: 80%;
  max-width: 520px;
  font-size: 21px;
  line-height: normal;
  color: var(--default-color-8);
  border: 2px solid var(--default-color-5);
  border-radius: 4px;
  height: auto;
  padding: 15px 20px;
  margin: 0 0 20px;
  outline: none;
}
.story-location-popup .popup-section.naming-section input::placeholder {
  font-style: italic;
  color: var(--default-color-4);
}
.story-location-popup .popup-section.naming-section input :focus,
.story-location-popup .popup-section.naming-section input :focus-visible {
  outline: none;
}
.story-location-popup .popup-section.naming-section .action-buttons {
  justify-content: flex-end;
  max-width: 520px;
}
.story-location-popup .popup-section.import-first-section .action-buttons,
.story-location-popup .popup-section.import-second-section .action-buttons {
  justify-content: center;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.story-location-popup {
    padding: 0 !important;
    width: 90vw !important;
    height: unset !important;
    min-width: unset !important;
    max-width: 885px !important;
    min-height: unset !important;
    max-height: unset !important;
  }
  .nanopopup.story-location-popup.align-top {
    top: 80px !important;
    transform: translate(-50%, 0);
  }
}

/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** 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/TroubadourPopup.less ***!
  \**********************************************************************************************************************************************************************************************************************/
.troubadour-popup-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 300;
  background-color: var(--backdrop);
}
.troubadour-popup-container .troubadour-popup-section {
  display: flex;
  padding: 45px;
  background-color: var(--popup-error-dark);
  color: var(--assisted-construction-text);
  border-radius: 30px;
  position: relative;
  width: 634px;
  height: 418px;
  justify-content: center;
}
.troubadour-popup-container .troubadour-popup-section .troubadour-illustration-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 25px;
  top: -80px;
  left: 0;
  width: 100%;
  position: absolute;
  align-items: center;
}
.troubadour-popup-container .troubadour-popup-section .troubadour-illustration-container .troubadour-illustration {
  height: 100%;
  object-fit: contain;
  width: 167px;
}
.troubadour-popup-container .troubadour-popup-section .bottom-section {
  display: flex;
  flex-direction: column;
}
.troubadour-popup-container .troubadour-popup-section .troubadour-text-container {
  flex: 1;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.troubadour-popup-container .troubadour-popup-section .troubadour-text-container .title {
  letter-spacing: 0.04em;
  font-family: var(--font-title);
  font-size: 36px;
  line-height: initial;
  margin: 10px 0;
}
.troubadour-popup-container .troubadour-popup-section .troubadour-text-container .description {
  font-size: 23px;
  line-height: 27px;
  margin-top: 5px;
}
.troubadour-popup-container .troubadour-popup-section .button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.close-container {
  display: none;
  position: absolute;
  right: 25px;
  top: 15px;
  padding: 10px;
  border-radius: 25px;
  width: 45px;
  height: 45px;
}
.close-container:hover {
  cursor: pointer;
}
.try-demo-popup .troubadour-popup-section {
  background-color: var(--default-bg);
  border: 1px solid var(--button-border);
  box-shadow: var(--button-dropshadow);
  color: var(--primary-text-3-dark);
  width: 90%;
  max-width: 765px;
  height: auto;
  max-height: 90vh;
  padding: 40px 5%;
  overflow-y: auto;
}
.try-demo-popup .troubadour-popup-section .close-container {
  right: unset;
  left: 15px;
}
.try-demo-popup .troubadour-popup-section .troubadour-text-container {
  justify-content: flex-start;
  padding: 0;
  margin: 0 0 40px;
}
.try-demo-popup .troubadour-popup-section .troubadour-text-container .title {
  color: var(--troubadour-main);
  text-align: center;
  font-family: "Sofia Pro";
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.2em;
  margin: 0 0 20px;
}
.try-demo-popup .troubadour-popup-section .troubadour-text-container .description {
  color: var(--default-color-3);
  text-align: center;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.2em;
  margin: 0;
}
.try-demo-popup .troubadour-popup-section .button-container {
  justify-content: center;
  padding-bottom: 15px;
  gap: 20px;
}
.try-demo-popup .troubadour-popup-section .close-container {
  display: flex;
}
@media screen and (max-width: 992px) {
  .try-demo-popup .title {
    font-size: 45px !important;
  }
  .try-demo-popup .description {
    font-size: 23px !important;
    line-height: 27px;
  }
  .try-demo-popup .student-demo-button {
    margin-right: 15px;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Game/Construction/components/MarkAsDonePopup.less ***!
  \********************************************************************************************************************************************************************************************************************************************/
.nanopopup.mark-as-done-popup {
  background-color: transparent !important;
  overflow: visible;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 80vw;
  height: 80vh;
  max-width: 367px;
  max-height: 460px;
  background-color: var(--challenges-card-to-do-1);
  border-radius: 20px;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .close-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--text-entry-bg);
  left: -25px;
  top: -25px;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .close-container i,
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .close-container svg {
  font-size: 25px;
  color: var(--challenges-card-to-do-1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .close-container:hover {
  filter: brightness(1.1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .status-finished-indicator {
  position: absolute;
  left: 0;
  top: 50px;
  z-index: 2;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .status-finished-indicator p {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--default-color-2);
  background-color: var(--troubadour-main);
  text-align: center;
  font-size: 33px;
  line-height: 33px;
  font-weight: 800;
  margin: 0;
  padding: 6px 10px 10px;
  border-radius: 0 0 3px 0;
  z-index: 2;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .status-finished-indicator::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -11px;
  width: 50px;
  aspect-ratio: 19 / 20;
  background-image: url("https://constellation-backend-images.s3.ca-central-1.amazonaws.com/production/interfaces/troub-finished-ribbon-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .thumbnail {
  margin: 0 0 10px;
  width: 100%;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .thumbnail img {
  max-width: 100%;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content h3 {
  color: var(--default-color-2);
  font-size: 23px;
  font-weight: 700;
  line-height: 1em;
  padding: 0;
  margin: 0 0 10px;
  text-transform: none;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content h2 {
  color: var(--default-color-2);
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  line-height: 1em;
  padding: 0;
  margin: 0 0 30px;
  text-transform: none;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .previous-page-nav-btn {
  margin: 0 0 10px;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .continue-working {
  color: var(--babillard-color-14);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  text-decoration: none;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content .continue-working:hover {
  text-decoration: underline;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] {
  background-color: var(--challenges-card-to-do-1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] .close-container {
  background-color: var(--text-entry-bg);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] .close-container svg {
  color: var(--challenges-card-to-do-1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] h2,
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] h3 {
  color: var(--default-color-2);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="IN_PROGRESS"] .continue-working {
  color: var(--babillard-color-14);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] {
  background-color: var(--challenges-card-needs-revision-1);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] .close-container {
  background-color: var(--student-challenges-color-3);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] .close-container svg {
  color: var(--student-challenges-color-4);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] h2,
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] h3 {
  color: var(--challenges-card-needs-revision-3);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-status="NEED_REVISION"] .continue-working {
  color: var(--student-challenges-color-4);
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-is-family="1"] h3 {
  margin: 0 0 10px;
}
.nanopopup.mark-as-done-popup .mark-as-done-popup-content[data-is-family="1"] h2 {
  margin: 0 0 34px;
}
@media (min-width: 1px), (max-width: 1280px), (max-width: 992px), (max-width: 767px), (max-width: 480px) {
  .nanopopup.mark-as-done-popup {
    box-shadow: none !important;
    padding: 0 !important;
    width: unset !important;
    height: unset !important;
    min-width: unset !important;
    max-width: unset !important;
    min-height: unset !important;
    max-height: unset !important;
  }
}


/*# sourceMappingURL=FamilyConstruction.ba864a7898dcf6a1289e.css.map*/