/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/components/errorMessage.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.errorMessage_error__OnKmw {
  background-color: var(--error-background);
  color: var(--error-text);
  border-radius: var(--radius-large);
  padding: var(--medium-gap-padding-size);
}

.errorMessage_inline__2DqKF {
  background: none;
  color: var(--error-background);
  border-radius: 0;
  padding: var(--xsmall-gap-padding-size) 0;
  margin: 0;
  font-size: 0.8em;
  font-weight: bold;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/app/star/buttons/starbuttonbase.module.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
.starbuttonbase_base__b2Myu {
    font-size: 1rem;
    font-weight: 600;
    padding: var(--medium-gap-padding-size);
    border: none;
    border-radius: var(--radius-large);
    font-family: inherit;
    cursor: pointer;
    /* reset anchor styles when rendered as a link */
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.starbuttonbase_hasMaxWidth__SU6p2 {
    width: 100%;
}

.starbuttonbase_hasHalfWidth__EMkU1 {
    width: 50%;
}

.starbuttonbase_hasQuarterWidth__7bv4A {
    width: 25%;
}

.starbuttonbase_disabled__OeB6g {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .starbuttonbase_hasMobileFullWidth__LmYH_ {
        width: 100%;
    }

    .starbuttonbase_hasMobileHalfWidth__JF1Fl {
        width: 50%;
    }

    .starbuttonbase_hasMobileQuarterWidth__y_851 {
        width: 25%;
    }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/app/star/buttons/starbuttonprimary.module.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.starbuttonprimary_primary___hzEp {
  background-color: var(--primary-button-background);
  color: var(--primary-button-text-color);

  &:hover {
    background-color: var(--tertiary-color);
    color: var(--tertiary-color-text);
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/app/star/buttons/starbuttonsecondary.module.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.starbuttonsecondary_secondary__1U2yn {
  background-color: var(--secondary-button-background);
  color: var(--secondary-button-text-color);

  &:hover {
    background-color: var(--tertiary-color);
    color: var(--tertiary-color-text);
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/registration/registrationlogin.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.registrationlogin_inputContainer__3FcL3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--small-gap-padding-size);
  max-width: 450px;
  margin: 0 auto;
  width: 100%;
}

.registrationlogin_inputText__z_rcM {
  width: 100%;
  padding: var(--small-gap-padding-size);
  border: 1px solid black;
  border-radius: var(--radius-small);
  box-sizing: border-box;
}

.registrationlogin_buttonContainer__oYRFJ {
  display: flex;
  gap: var(--small-gap-padding-size);
  width: 100%;
}
.registrationlogin_buttonContainer__oYRFJ > button {
  flex: 1 1;
  min-width: 0;
}

.registrationlogin_error__5cjxx {
  padding: var(--large-gap-padding-size) var(--xsmall-gap-padding-size);
  color: var(--error-background);
}

.registrationlogin_goodjob__KVVuS {
  padding: var(--xsmall-gap-padding-size);
  color: green;
}

.registrationlogin_worldTiles__p_vxm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--large-gap-padding-size);
}

.registrationlogin_worldTile__8EXB_ {
  text-align: center;
}

.registrationlogin_worldText__UL0Zp {
  max-width: 50%;
  text-align: center;
  margin: 0 auto;
}

/* Fun styles for funs -- probably not final */
.registrationlogin_loadingContainer__tq32Q {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* NPC Component for Registration */
.registrationlogin_npcWrapper__IzzVK {
  text-align: center;
  max-width: 100%;
}

.registrationlogin_npcQuestions__KvVPl {
  display: flex;
  justify-content: space-evenly;
  margin: var(--large-gap-padding-size) 0;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/app/star/headers/starHeaderOne.module.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.starHeaderOne_base__x3__1 {
  /* TODO: FONT SIZE FOR HEADERS */
  color: var(--primary-color);
  text-align: left;

  padding: var(--small-gap-padding-size) 0;
  margin: 0;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/app/star/headers/starHeaderTwo.module.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.starHeaderTwo_base__9_bVs {
  text-align: center;
  background-color: var(--secondary-color);
  color: var(--secondary-color-text);
  padding: var(--small-gap-padding-size);
  border-radius: var(--radius-small);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/star/starclickableimage.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.starclickableimage_clickableImage__8Xfpl {
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.starclickableimage_clickableImage__8Xfpl:hover, .starclickableimage_clickableImage__8Xfpl:focus-visible {
  transform: scale(1.05);
}

/* Anchors are inline by default, which transform ignores */
a.starclickableimage_clickableImage__8Xfpl {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .starclickableimage_clickableImage__8Xfpl {
    transition: none;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/components/NPC/npc.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* With Dialogue styles */
.npc_npcSceneWrapper__VY6i1 {
  position: relative;
  width: 100%;
}

.npc_npcBackgroundImageWrapper__CYw9O {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 2000px; /* matches the source art's native width so cover doesn't have to upscale past it */
  height: calc(100% - 30px); /* trims the top of the background so it sits further behind the NPC */
}

.npc_npcBackgroundImage__npWoY {
  object-fit: cover;
  object-position: center bottom;
}

.npc_npcWithDialogueWrapper__cwnOP {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--medium-gap-padding-size);
}

.npc_bubbleWrapper__qlOpa {
  display: flex;
  height: 300px; /* Must match image height on desktop */
  align-items: center;
}

.npc_speechBubble__qTqQM {
  position: relative;
  background: var(--tertiary-color);
  border-radius: 0.4em;
  width: 300px;
  min-width: 300px;
  padding: var(--medium-gap-padding-size);
}

.npc_speechBubble__qTqQM:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-right-color: var(--tertiary-color);
  border-left: 0;
  border-top: 0;
  margin-top: -10px;
  margin-left: -20px;
}

.npc_innerSpeechBubble__e3kg8 {
  color: var(--tertiary-color-text);
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  max-height: 250px;
  overflow: auto;
}

.npc_thieveryInteractionBtnWrapper__lMdXR {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: var(--small-gap-padding-size);
}

/* TODO - quick mobile styles for preview, fix later */
@media screen and (max-width: 768px) {
  .npc_npcWithDialogueWrapper__cwnOP {
    flex-direction: column;
    align-items: center;
    gap: var(--small-gap-padding-size);
  }
  .npc_bubbleWrapper__qlOpa {
    height: auto;
  }
  .npc_speechBubble__qTqQM {
    width: 100%;
    min-width: 0;
    max-width: 300px;
  }
  .npc_speechBubble__qTqQM:after {
    top: 0;
    left: 50%;
    transform: rotate(90deg);
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/components/loginWall.module.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.loginWall_loginFormStyles__7TMEf {
  width: 100%;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/star/starModal.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ********  SASS VARIABLE DEFINITIONS ******** */
/* Widths for different screen sizes, depending on a user's screen */
/* Staff Colors */
.starModal_overlay__HXncu {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  animation: starModal_fadeIn__poL5j 0.225s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  z-index: var(--z-modal-overlay);
  opacity: 0;
}

.starModal_overlay__HXncu.starModal_closing__mnn6y {
  animation: starModal_fadeOut__51_Tb 0.225s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 1;
}

.starModal_modalWrapper__lWxL9 {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: flex-end;
  z-index: var(--z-modal);
}
@media (min-width: 768px) {
  .starModal_modalWrapper__lWxL9 {
    align-items: center;
  }
}

.starModal_headerWrapper__6GDzy {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: var(--primary-color);
  color: var(--primary-color-text);
}

.starModal_modalTitle__x0RJr {
  margin: var(--small-gap-padding-size);
  padding: var(--small-gap-padding-size);
}

.starModal_closeButton__3NkZ6 {
  margin: var(--small-gap-padding-size);
  padding: var(--small-gap-padding-size);
  width: 15px;
  height: 15px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.starModal_closeButton__3NkZ6:hover {
  cursor: pointer;
  background-color: var(--tertiary-color);
}

.starModal_modal__B6uDP {
  background-color: var(--content-background-color);
  color: var(--content-text-color);
  border-radius: var(--radius-small);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  bottom: 0;
  margin-bottom: 20px;
  animation: starModal_unfoldIn__BW5Pz 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (min-width: 768px) {
  .starModal_modal__B6uDP {
    min-height: 300px;
    max-height: 80vh;
    width: 50%;
    height: auto;
    bottom: auto;
  }
}

@media (min-width: 768px) {
  .starModal_modal__B6uDP.starModal_useMinHeight__PV8P0 {
    min-height: 520px;
  }
}

.starModal_modal__B6uDP.starModal_accessibilityMode__Ivnga {
  animation: starModal_fadeIn__poL5j 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

.starModal_modal__B6uDP.starModal_closing__mnn6y {
  animation: starModal_unfoldOut__tY7dm 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.starModal_modal__B6uDP.starModal_closing__mnn6y.starModal_accessibilityMode__Ivnga {
  animation: starModal_fadeOut__51_Tb 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 1;
}

.starModal_modalBody__nyYNR {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--medium-gap-padding-size);
}

.starModal_modalBodyContent___suIJ {
  width: 100%;
  /* Centers short content vertically without the flexbox overflow-clipping bug that
     align-items/justify-content: center has (collapses to 0 and top-aligns when content overflows) */
  margin: auto 0;
}

.starModal_modalOptions__EmErE {
  display: flex;
  justify-content: center;
  gap: var(--small-gap-padding-size);
  flex-shrink: 0;
  padding: var(--medium-gap-padding-size);
  padding-top: 0;
}

@keyframes starModal_fadeIn__poL5j {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes starModal_fadeOut__51_Tb {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes starModal_unfoldIn__BW5Pz {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@keyframes starModal_unfoldOut__tY7dm {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/star/buttons/starbuttonteritary.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.starbuttonteritary_teritary__91hoZ {
  background-color: transparent;
  color: var(--tertiary-color);
  font-weight: bold;
}
.starbuttonteritary_teritary__91hoZ:hover {
  background-color: var(--tertiary-color);
  color: #fff;
  transition: 1s;
}

/* Two classes so these win over .base in starbuttonbase.module.css regardless of stylesheet order. */
.starbuttonteritary_teritary__91hoZ.starbuttonteritary_inline__yZD8d {
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  color: var(--link-color);
  vertical-align: baseline;
}
.starbuttonteritary_teritary__91hoZ.starbuttonteritary_inline__yZD8d:hover {
  background-color: transparent;
  color: var(--link-hover-color);
  text-decoration: underline;
  transition: none;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/exploration/events/event.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.event_randomEvent__6pgAm {
  display: flex;
  flex-direction: column;
  gap: var(--small-gap-padding-size);
  text-align: center;
  width: 100%;
}

.event_text__GXa_w {
  margin: 0;
}

.event_imageWrapper__S__nm {
  align-self: center;
  max-width: 100%;
}
.event_imageWrapper__S__nm img {
  max-width: 100%;
  height: auto;
}

.event_actions__mfMkc {
  display: flex;
  justify-content: center;
  gap: var(--small-gap-padding-size);
  width: 100%;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/pet/petImage.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.petImage_grayscale__GBu97 {
  opacity: 0.5;
  filter: saturate(0);
  filter: brightness(0);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[7].use[3]!./src/app/star/inputs/starinputbase.module.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.starinputbase_inputGroup__3rk7N {
  display: flex;
  flex-direction: column;
  gap: var(--small-gap-padding-size);
}

.starinputbase_label__I_rbl {
  display: block;
  font-weight: 600;
  color: #000; /* MAYBE TODO: use var(--content-text-color); instead of #000*/
}

.starinputbase_input__hRVvP {
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: var(--radius-small);
  font-family: inherit;
  color: #000; /* MAYBE TODO: use var(--content-text-color); instead of #000*/
  background-color: #fff; /* MAYBE TODO: use var(--content-background-color) instead of #fff */
}

.starinputbase_input__hRVvP:focus {
  outline: none;
  border-color: var(--primary-button-background);
  box-shadow: 0 0 0 3px rgba(23, 84, 128, 0.1);
}

.starinputbase_input__hRVvP:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/exploration/explorationModal.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.explorationModal_resumedNotice__dtvX1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--small-gap-padding-size);
  width: 100%;
  background-color: var(--content-alt-background-color);
  padding: var(--small-gap-padding-size) var(--medium-gap-padding-size);
  border-radius: var(--radius-small);
}

.explorationModal_resultWrapper__JmHSm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--medium-gap-padding-size);
  text-align: center;
  width: 100%;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/star/headers/starHeaderThree.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.starHeaderThree_base__tO62E {
  /* TODO: FONT SIZE FOR HEADERS */
  color: var(--tertiary-color);
  text-align: left;
  padding: var(--small-gap-padding-size) 0;
  margin: 0;
  border-bottom: 1px solid var(--tertiary-color);
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/pet/petBondBar.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.petBondBar_progressBar__tybPI {
  width: 100%;
  height: 24px;
  background-color: var(--content-alt-background-color);
  border-radius: 8px;
  overflow: visible;
  margin-top: 8px;
  position: relative;
}

.petBondBar_defaultBg__V8j_Q {
  background-color: var(--content-background-color);
}

.petBondBar_progressFill__T7D9w {
  height: 100%;
  background: linear-gradient(90deg, #c68ce5, #436d9e, #8fbcf6, #a6c56e, #faf497, #f8be79, #e64953);
  background-size: 200% 100%;
  animation: 60s linear infinite alternate petBondBar_fillReveal__DunSA;
  border-radius: 8px;
  transition: width 0.3s ease;
}

@keyframes petBondBar_fillReveal__DunSA {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}
.petBondBar_bondLevelText__eMzVA {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--primary-text-color, #333);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/app/pet/userPets.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ********  SASS VARIABLE DEFINITIONS ******** */
/* Widths for different screen sizes, depending on a user's screen */
/* Staff Colors */
.userPets_activePetContainer__Aj3ZO {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-gap: var(--medium-gap-padding-size);
  gap: var(--medium-gap-padding-size);
}
@media screen and (min-width: 1024px) {
  .userPets_activePetContainer__Aj3ZO {
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
  }
}

.userPets_activePetImage__tcghL {
  width: 100%;
  max-width: 300px;
}
.userPets_activePetImage__tcghL img {
  width: 100%;
  height: auto;
}

.userPets_activePetInfo__KXiAt {
  width: 100%;
  max-width: 300px;
}

.userPets_singlePet__I1dDz {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: var(--content-alt-background-color);
  padding: var(--medium-gap-padding-size);
  border-radius: var(--radius-small);
}

.userPets_petActions__ArA3x {
  display: flex;
  flex-direction: row;
  gap: var(--small-gap-padding-size);
}

.userPets_petsContainer__xrvSE {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--small-gap-padding-size);
  gap: var(--small-gap-padding-size);
}
@media screen and (min-width: 1024px) {
  .userPets_petsContainer__xrvSE {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.userPets_pet__koUFg {
  display: grid;
  grid-template-columns: minmax(0, 250px) 1fr;
  align-items: center;
  grid-gap: var(--small-gap-padding-size);
  gap: var(--small-gap-padding-size);
}
.userPets_pet__koUFg img {
  width: 100%;
  height: auto;
}

.userPets_petDetails__rDfuW {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.userPets_emptyPetSection___tfwC {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--small-gap-padding-size);
}