body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* force off scrollbar */
html,
body {
  overflow: hidden !important;
}

/* dont allow the column to have horizontal scrollbar */
.content-column {
  overflow-x: hidden !important;
  /* only show y when needed */
  overflow-y: auto;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.step-nav-off-container {
}

.step-nav img  {
  height: 62px;
}

.step-nav {
  display: flex;
  flex-wrap: nowrap;
}

.step-nav {
  transform: scale(1.6);
  transform-origin: left top;
}

/* Larger screens - scale up */
@media (min-width: 2500px) {
  .step-nav {
    transform: scale(2.0);
  }
}

/* Larger screens - scale up */
@media (min-width: 2400px) {
  .step-nav {
    transform: scale(1.9);
  }
}

/* Larger screens - scale up */
@media (min-width: 2037px) {
  .step-nav {
    transform: scale(1.8);
  }
}

/* Smaller than 1920x1080 - scale down */
@media (max-width: 1807px) {
  .step-nav {
    transform: scale(1.5);
  }
}

/* Smaller devices (e.g., tablets in portrait mode) */
@media (max-width: 1711px) {
  .step-nav {
    transform: scale(1.4);
  }
}

/* Very small devices (e.g., phones in portrait mode) */
@media (max-width: 1594px) {
  .step-nav {
    transform: scale(1.3);
  }
}

/* 1480 1.2 */
@media (max-width: 1480px) {
  .step-nav {
    transform: scale(1.2);
  }
}

@media (max-width: 1361px) {
  .step-nav {
    transform: scale(1.1);
  }
}



@media (max-width: 1255px) {
  .step-nav {
    transform: scale(1.0);
  }
}

@media (max-width: 1140px) {
  .step-nav {
    transform: scale(0.9);
  }
}
@media (max-width: 1113px) {
  .step-nav {
    transform: scale(0.8);
  }
}

@media (max-width: 939px) {
  .step-nav {
    transform: scale(0.7);
  }
}

@media (max-width: 840px) {
  .step-nav {
    transform: scale(0.6);
  }
}

@media (max-width: 730px) {
  .step-nav {
    transform: scale(0.5);
  }
}



.step-nav-off {
  display: flex;
  /* Use Flexbox for the layout */
  width: 100%;
  /* Ensure the parent covers the full width */
  margin: 0;
  /* Remove default margins */
  padding: 0;
  /* Remove default paddings */
}

.step-nav-off-box-background {
  flex-grow: 1;
  /* Allows each box to grow to fill the container equally */
  display: flex;
  /* Aligns content of each box */
  flex-direction: column;
  /* Stack image and text vertically */
  justify-content: center;
  /* Centers content vertically */
  align-items: center;
  /* Centers content horizontally */
  text-align: center;
  /* Ensures text is centered under the image */
  margin: 0;
  /* Ensures no margin between the boxes */
  padding: 0;
  /* Adjust padding as needed */
}

.step-nav-off-box-background img {
  width: auto;
  /* Adjust based on content, maintaining aspect ratio */
  height: auto;
  /* Adjust height automatically */
  max-width: 100%;
  /* Ensures image does not exceed its container's width */
  margin-bottom: 5px;
  /* Space between image and text, adjust as needed */
}

.step-nav-off-label {
  /* font-size: 50px; */
  /* Adjust the font size as needed */
  /* color: #000; */
  /* Adjust the text color as needed */
  margin: 0;
  /* Removes any default margin */
  padding: 0;
  /* Adjust padding as needed to fit */
}
/* include fonts from ./fonts folder */
@font-face {
  font-family: 'Flama-Medium';
  src: url(../../static/media/FLAMA-MEDIUM.9a8e4bc6060fe4aa10e7.OTF) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GothamRounded-Bold';
  src: url(../../static/media/GothamRounded-Bold.ae3b95d0c6532a167baf.otf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

html,
body {
  margin: 0;
  padding: 0;
}

.game {
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  /* Add this line */
}

/* Media query for 1366x768 resolution */
@offmedia screen and (max-width: 1366px) and (max-height: 768px) {
  .game {
    transform: scale(0.8);
    /* render bottom left*/
    transform-origin: bottom left;
    /* Anchor scaling to the bottom-left corner */
    justify-content: flex-start;
    /* Align content to the bottom-left */
    align-items: flex-end;
    scroll-behavior: no;
  }
}

/* Add a higher z-index to make the child elements sit on top */
.game .child-element {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* Increase this value for each child element */
}

/* background pattern media/2x/bgPattern@2x.png */
body {
  /* background-image: url('media/2x/bgPattern@2x.png');
  background-repeat: repeat; */
  /* background-size: 50%; */

  /* Add this line to set the background image */
    background-image: url(../../static/media/bgPattern@2x.1c5f17b5f78608df09bf.png);
    background-repeat: repeat;
    background-size: cover;

}

.hidden {
  display: none;
}

/* default font */
body, a, p, #soup-building-activity p {
  font-family: 'GothamRounded-Bold';
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: 0.00938em;
  color: #5F3913 ;
}

.step-nav {
line-height: 1.75rem;
}

canvas {
  touch-action: none;
  -webkit-user-select: none;
  /* Prevent text selection */
  -webkit-touch-callout: none;
  /* Prevent callout menu */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Remove tap highlight */
}

ul {
  /* list-style-position: inside; */
  text-align: left; 
}

.sub-title {
  max-width: 800px;
  margin-top: 5px;
}

.App {
  text-align: center;
  
  /* width: 1920px; */
  /* width: 1920px;
  height: 1080px; */
}


.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* set the #root div to center in the page and take full screen */
#soup-building-activity {
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;

}

/* always position in the bottom left corner 5px away from the bottom and left */
.audio-player {
  position: absolute;
  bottom: 5px;
  left: 5px;
}

.Loader {
  position: relative;
  pointer-events: all;
}

.Loader .background {
  position: absolute;
  width: 250%;
  height: 250%;
  z-index: -100;
  background-image: url(../../static/media/intro_background_rotating_2x-min.1e3c61f00e8c724acb8f.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%; /* Center the background image */
  animation: rotateBackground 100s linear infinite; 
}

/* main loader background rotation */
@keyframes rotateBackground {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* loader image animations */
.loader-logo-container {
  position: absolute;
  /* align items centered */
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-logo-container img {
  position: relative;
  /* animation: jiggle 3s ease-in-out infinite; */
}

/* if the screen size is 1366 or less make the images 80% smaller */
@media screen and (max-height: 768px) {
  .loader-logo-container img.dynamic-size {
    transform: scale(0.8) !important;
    margin-top: -20px
  }

    .loader-button-container {
      margin-top: -20px !important;
    }
}


@keyframes jiggle {
  0% {
    transform: translate(-0px, -0px);
  }

  20% {
    transform: translate(-2px, -2px);
  }

  40% {
    transform: translate(2px, 2px);
  }

  60% {
    transform: translate(-3px, -1px);
  }

  80% {
    transform: translate(1px, 3px);
  }

  100% {
    transform: translate(-1px, 1px);
  }
}

.loader-logo-container img {
  position: relative;
}

/* Original animation, slightly adjusted for smoothness */
@keyframes jiggle1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-2px, -2px);
  }

  40% {
    transform: translate(2px, 2px);
  }

  60% {
    transform: translate(-3px, -1px);
  }

  80% {
    transform: translate(1px, 3px);
  }
}

/* Additional variations */
@keyframes jiggle2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-1px, -1px);
  }

  40% {
    transform: translate(1px, 1px);
  }

  60% {
    transform: translate(-2px, 0);
  }

  80% {
    transform: translate(0, 2px);
  }
}

@keyframes jiggle3 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(0, -2px);
  }

  40% {
    transform: translate(2px, 0);
  }

  60% {
    transform: translate(-1px, 2px);
  }

  80% {
    transform: translate(1px, -1px);
  }
}

/* Add more variations as needed */

.full-screen {
  width: 100vw;
  height: 100vh;
  /* Adjusted to viewport height */
  position: fixed;
  top: 0;
  left: 0;
}

.disabled-image {
  /* gray out the image somewhat */
  opacity: 0.5;
}

.disable-buttons button {
  pointer-events: none !important;
  /* Disable clicks */
  opacity: 0.5!important;
  /* Optional: Make buttons appear disabled */
  cursor: not-allowed!important;
  /* Change cursor to indicate disabled state */
}

/* class for element that is verically alligned in the middle */
.vertical-center {
  display: flex;
  align-items: center;
}

/* class for animating button on mouse down to make it look pushed */
.button-pressed {
  transform: scale(0.9);
  transition: transform 0.1s ease-in-out;
}

/* class for scaling image down 2x */
[data-image-2x] {
  transform: scale(0.3);
    /* or 'block' depending on your layout needs */
  /* transition: transform 0.1s ease-in-out; */
}

.loader-button-container {
  transform: scale(0.8);
}

/* Loader images */
.loader-logo-container {
  position: relative;
  width: 628px;
  /* Set the width */
  height: 455px;
  /* Set the height */
  /* transform: scale(0.3); */
  /* left: 42%;
  top: 150px; */
  z-index: -1;
  top: 50px;
  left: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-logo-container img {
  position: absolute;
  left: 0;
  /* transform: translateX(-50%); */
  /* Center horizontally */
}

/* poe center */
.loader-logo-container img:nth-child(1) {
  top: -10px;
  left: 110px;
  z-index: 3;
}

/* soups on */
.loader-logo-container img:nth-child(2) {
  top: 7cap;
  left: 10px;
  z-index: 2;
}

/* bowl */
.loader-logo-container img:nth-child(3) {
  top: 200px;
  z-index: 1;
}

.loading-percent {
  max-width: 300px;
  
  max-height: 20px;
}

/* navigation-status */
.navigation-status {
  /* background-image: url("media/2x/03_steps/steps_all.png");
  background-size: cover;
  background-repeat: no-repeat; */
  width: 950px;
  height: 78px;
  padding-left: 10px;
}

.step-nav-box-background {
  display: inline-block;
  margin-right: -5px;
  position: relative;
}

.step-nav-box-background:not(:first-child) img {
  margin-left: -12px;
}

.step-nav-box-background:last-child img {
  margin-left: -7px;
}

.step-nav-box {
  display: inline-block;
  width: 100px;
  /* border: 1px solid red; */

}

.step-nav-box:first-child {
  margin-left: 20px;
  width: 105px;
}

  /* .step-nav-box {
    margin-left: -6px;
  }

  .step-nav-box:nth-child(2) {
    margin-left: -10px;
  } */

.step-nav-label {
  /* border: 1px solid red; */
  position: absolute;
  left: -12px;
  margin-top: -72px;
  width: 100%;
  height: 55px;
  /* display: grid; */
  place-items: center;
  margin-left: 10px;
  font-family: GothamRounded-Bold;
  font-size: 13px;
  text-align: center;
  padding-top: 20px;
  /* border: 1px solid  red; */
}

.step-nav-box:last-child .step-nav-label {
  margin-left: 18px;
}

.content-column {
  
  /* background-color: antiquewhite; */
  background-image: linear-gradient(to bottom, rgb(253 216 155), rgb(254,238,212));

  box-shadow: -15px 0 15px rgba(0, 0, 0, 0.5); /* Adjust the shadow color and size as needed */

  overflow: scroll;

  padding-bottom: 90px !important;
}

.navigation-buttons {
  position: absolute;
  /* Fixes the element to the viewport */
  bottom: 20px;
  /* Distance from the bottom of the screen */
  right: 55px;
  /* Distance from the right of the screen */
  z-index: 1000;
  /* Ensures the buttons are above other elements */
  display: flex;
  /* Optional: Adjusts layout for multiple buttons */
  gap: 10px;
  /* Optional: Adds space between buttons */
}

.outlined-text {
  font-size: 50px;
  line-height: 60px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  text-shadow: rgb(95, 57, 19) 7px 0px 0px, rgb(95, 57, 19) 6.92869px 0.996602px 0px, rgb(95, 57, 19) 6.71622px 1.9729px 0px, rgb(95, 57, 19) 6.36692px 2.909px 0px, rgb(95, 57, 19) 5.8879px 3.78584px 0px, rgb(95, 57, 19) 5.28893px 4.58555px 0px, rgb(95, 57, 19) 4.5822px 5.29183px 0px, rgb(95, 57, 19) 3.78212px 5.8903px 0px, rgb(95, 57, 19) 2.90498px 6.36876px 0px, rgb(95, 57, 19) 1.96865px 6.71747px 0px, rgb(95, 57, 19) 0.992221px 6.92932px 0px, rgb(95, 57, 19) -0.00442571px 7px 0px, rgb(95, 57, 19) -1.00098px 6.92806px 0px, rgb(95, 57, 19) -1.97715px 6.71498px 0px, rgb(95, 57, 19) -2.91303px 6.36508px 0px, rgb(95, 57, 19) -3.78956px 5.88551px 0px, rgb(95, 57, 19) -4.58889px 5.28603px 0px, rgb(95, 57, 19) -5.29472px 4.57885px 0px, rgb(95, 57, 19) -5.89269px 3.77839px 0px, rgb(95, 57, 19) -6.3706px 2.90095px 0px, rgb(95, 57, 19) -6.71871px 1.96441px 0px, rgb(95, 57, 19) -6.92995px 0.98784px 0px, rgb(95, 57, 19) -6.99999px -0.00885142px 0px, rgb(95, 57, 19) -6.92743px -1.00536px 0px, rgb(95, 57, 19) -6.71372px -1.98139px 0px, rgb(95, 57, 19) -6.36324px -2.91705px 0px, rgb(95, 57, 19) -5.88311px -3.79328px 0px, rgb(95, 57, 19) -5.28313px -4.59223px 0px, rgb(95, 57, 19) -4.57551px -5.29762px 0px, rgb(95, 57, 19) -3.77466px -5.89507px 0px, rgb(95, 57, 19) -2.89692px -6.37243px 0px, rgb(95, 57, 19) -1.96016px -6.71995px 0px, rgb(95, 57, 19) -0.983458px -6.93057px 0px, rgb(95, 57, 19) 0.0132771px -6.99999px 0px, rgb(95, 57, 19) 1.00974px -6.92679px 0px, rgb(95, 57, 19) 1.98564px -6.71247px 0px, rgb(95, 57, 19) 2.92107px -6.36139px 0px, rgb(95, 57, 19) 3.797px -5.88071px 0px, rgb(95, 57, 19) 4.59557px -5.28022px 0px, rgb(95, 57, 19) 5.30051px -4.57215px 0px, rgb(95, 57, 19) 5.89746px -3.77094px 0px, rgb(95, 57, 19) 6.37426px -2.89289px 0px, rgb(95, 57, 19) 6.72119px -1.95591px 0px, rgb(95, 57, 19) 6.93119px -0.979076px 0px;
}

/* Set your aspect ratio */
.video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
  margin-left: 10px;
  margin-right: 10px;
  /* creates a 16:9 aspect ratio */
}

.video-container {
    box-shadow: 4.9px 9.8px 9.8px hsl(0deg 0% 0% / 0.35);
    margin-bottom: 20px;
}

.video-container iframe,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* And set the max-width of the parent element */
.video-wrap {
  width: 100%;
  max-width: 600px;
}

.image-drop-shadow {
  box-shadow: 4.9px 9.8px 9.8px hsl(0deg 0% 0% / 0.35);
}

button {
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  /* Smooth transition for transformations and color */
}

button:hover {
  animation: jiggleHover 0.3s ease forwards;
  /* Slightly enlarges and rotates the button */
  /* background-color: #0056b3; */
  /* Slightly darker shade when hovered */
}

button:active {
  animation: shake 0.5s ease;
  /* Trigger shake animation on click */
}

@keyframes jiggleHover {
  0% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.1) rotate(-4deg);
  }

  100% {
    transform: scale(1.1) rotate(4deg);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

p {
  font-family: Flama-Medium;
}

.normal {
  font-family: Flama-Medium;
  font-weight: normal;
  font-size: 1rem;
}

[role="tooltip"] p {
  margin: 0;
}


.loading-spinner {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border-top: 15px solid #946098;
  border-bottom: 15px solid #3D64A8;
  border-right: 15px solid #77BC1F;
  border-left: 15px solid #FF8300;

  animation: spin 2s linear infinite, gradient 6s ease infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes gradient {
  0% {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }

  100% {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}

#snapModal, #snapModal p,#snapModal a {
  color: rgb(119, 119, 119);
  font-family: Nunito, Nunito;
  font-weight: normal;

  text-align: left;
  font-size: 20px;
  
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed to the viewport */
  z-index: 1000;
  /* Ensure modal appears above other elements */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.4); */
  /* Semi-transparent background */
}

.modal-content {
  position: absolute;
  /* Positioned relative to the modal */
  top: 50%;
  /* Center vertically */
  left: 50%;
  /* Center horizontally */
  transform: translate(-50%, -50%);
  /* Offset by half the width and height */
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 8px;
  /* Optional: rounded corners */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  /* Optional: shadow for depth */
  width: 90%;
  /* Take up most of the width */
  height: 80%;
  /* Take up most of the height */
  max-width: 1200px;
  /* Limit the maximum width */
  max-height: 600px;
  /* Limit the maximum height */
  overflow: auto;
  /* Allow scrolling if content overflows */
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.image-gallery-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* Stacks content vertically */
  width: 100%;
  text-align: center;
  /* Ensures the text aligns nicely */
  margin-bottom: 40px;
}

.image-gallery {
  position: relative;
  width: 90%;
  /* height: 300px; */
  /* border: 1px solid red; */
  /* Adjust as needed */
}

.image-gallery img {
  width: 100%;
  height: auto;
}

.CrossfadeImage {
  /* min-height: 300px; */
}

.CrossfadeImage img {
  /* object-fit: contain; */
  width: 100%;
  height: auto;
  max-width: 100%;
}

.image-gallery-container img {
  width: 100%;
  /* Make the image span the full width of the container */
  height: auto;
  /* Maintain aspect ratio */
  max-width: 100%;
  /* Prevent it from exceeding its parent */
}

#phaserGame {
  height: 100%;
  width: calc(100vw - 350px);
  box-sizing: border-box;
}

img[data-type="assetURL2"] {
  width: 90%;
}

/* Add a media query for browser height <= 768px */
@media screen and (max-height: 768px) {
  img[data-type="assetURL2"] {
    width: 70%;
    /* Set the width to 50% */
    margin: 0 auto;
    /* Center the image horizontally */
    display: block;
    /* Ensure the image is treated as a block element */
  }
}

/* Add a media query for browser height <= 648px */
@media screen and (max-height: 648px) {
  img[data-type="assetURL2"] {
    width: 40%;
    /* Set the width to 50% */
    margin: 0 auto;
    /* Center the image horizontally */
    display: block;
    /* Ensure the image is treated as a block element */
  }
}
.rhap_container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: inherit;
  width: 100%;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
.rhap_container:focus:not(:focus-visible) {
  outline: 0;
}
.rhap_container svg {
  vertical-align: baseline;
  vertical-align: initial;
}

.rhap_header {
  margin-bottom: 10px;
}

.rhap_footer {
  margin-top: 5px;
}

.rhap_main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.rhap_stacked .rhap_controls-section {
  margin-top: 8px;
}

.rhap_horizontal {
  flex-direction: row;
}
.rhap_horizontal .rhap_controls-section {
  margin-left: 8px;
}

.rhap_horizontal-reverse {
  flex-direction: row-reverse;
}
.rhap_horizontal-reverse .rhap_controls-section {
  margin-right: 8px;
}

.rhap_stacked-reverse {
  flex-direction: column-reverse;
}
.rhap_stacked-reverse .rhap_controls-section {
  margin-bottom: 8px;
}

.rhap_progress-section {
  display: flex;
  flex: 3 1 auto;
  align-items: center;
}

.rhap_progress-container {
  display: flex;
  align-items: center;
  height: 20px;
  flex: 1 0 auto;
  align-self: center;
  margin: 0 calc(10px + 1%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.rhap_progress-container:focus:not(:focus-visible) {
  outline: 0;
}

.rhap_time {
  color: #333;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
}

.rhap_progress-bar {
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 5px;
  background-color: #dddddd;
  border-radius: 2px;
}

.rhap_progress-filled {
  height: 100%;
  position: absolute;
  z-index: 2;
  background-color: #868686;
  border-radius: 2px;
}

.rhap_progress-bar-show-download {
  background-color: rgba(221, 221, 221, 0.5);
}

.rhap_download-progress {
  height: 100%;
  position: absolute;
  z-index: 1;
  background-color: #dddddd;
  border-radius: 2px;
}

.rhap_progress-indicator {
  box-sizing: border-box;
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  top: -8px;
  background: #868686;
  border-radius: 50px;
  box-shadow: rgba(134, 134, 134, 0.5) 0 0 5px;
}

.rhap_controls-section {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  align-items: center;
}

.rhap_additional-controls {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
}

.rhap_repeat-button {
  font-size: 26px;
  width: 26px;
  height: 26px;
  color: #868686;
  margin-right: 6px;
}

.rhap_main-controls {
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rhap_main-controls-button {
  margin: 0 3px;
  color: #868686;
  font-size: 35px;
  width: 35px;
  height: 35px;
}

.rhap_play-pause-button {
  font-size: 40px;
  width: 40px;
  height: 40px;
}

.rhap_volume-controls {
  display: flex;
  flex: 1 0 auto;
  justify-content: flex-end;
  align-items: center;
}

.rhap_volume-button {
  flex: 0 0 26px;
  font-size: 26px;
  width: 26px;
  height: 26px;
  color: #868686;
  margin-right: 6px;
}

.rhap_volume-container {
  display: flex;
  align-items: center;
  flex: 0 1 100px;
  user-select: none;
  -webkit-user-select: none;
}

.rhap_volume-bar-area {
  display: flex;
  align-items: center;
  width: 100%;
  height: 14px;
  cursor: pointer;
}
.rhap_volume-bar-area:focus:not(:focus-visible) {
  outline: 0;
}

.rhap_volume-bar {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 4px;
  background: #dddddd;
  border-radius: 2px;
}

.rhap_volume-indicator {
  box-sizing: border-box;
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  left: 0;
  top: -4px;
  background: #868686;
  opacity: 0.9;
  border-radius: 50px;
  box-shadow: rgba(134, 134, 134, 0.5) 0 0 3px;
  cursor: pointer;
}
.rhap_volume-indicator:hover {
  opacity: 0.9;
}

.rhap_volume-filled {
  height: 100%;
  position: absolute;
  z-index: 2;
  background-color: #868686;
  border-radius: 2px;
}

/* Utils */
.rhap_button-clear {
  background-color: transparent;
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.rhap_button-clear:hover {
  opacity: 0.9;
  transition-duration: 0.2s;
}
.rhap_button-clear:active {
  opacity: 0.95;
}
.rhap_button-clear:focus:not(:focus-visible) {
  outline: 0;
}


/*# sourceMappingURL=main.58826cd7.css.map*/