:root {
  --rocket-color: #87CA68;
  --light-color: #DFDA67;

  --ambiant-light: #DFDA67;

  --gradient-start: 180deg, rgba(10,35,66,1) 0%, rgba(40,62,81,1) 100%;
  --gradient-end: 180deg, rgba(10,35,66,1) 0%, rgba(40,62,81,1) 100%;

  --canvas-width: 400px;
  --canvas-height: 300px;
  --canvas-left: -100px;
}


/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #474747 transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #474747;
  border-radius: 50px;
  border: 2px solid transparent;
}

*{ touch-action: none; } 

body{
  margin:0;
  background: black;
  font-family: 'Google Sans';
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  color: rgb(0 0 0 / 80%);
  height: 100vh;
  background:linear-gradient(to bottom, #000428, #004e92);

}

.fireworks-container, body{
  background: -moz-linear-gradient(var(--gradient-start));
  background: -webkit-linear-gradient(var(--gradient-start));
  background: linear-gradient(var(--gradient-start));
  z-index: 1;
}

/*.fireworks-container, .fireworks-container canvas{
  position: fixed;
  top:0px;
  left:0px;
  right: 0px;
  height: calc(100vh - 290px);
}*/

.fireworks-container::before, body::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;

  background: -moz-linear-gradient(var(--gradient-end));
  background: -webkit-linear-gradient(var(--gradient-end));
  background: linear-gradient(var(--gradient-end));

  z-index: -1;
  transition: opacity 0.2s linear;
  opacity: 0;
}
.fireworks-container.transition::before, body.transition::before {
  opacity: 1;
}

#waveform-containers{
  position: relative;
  background:transparent;
}

.waveform{
}

.waveform-group-scroll{


}

.waveform-container{
  padding-left: 48px;
  position: relative;
}

#waveform-wrapper .waveform-container{
  margin:2px 0px;
}

#waveform1 ::part(wrapper){
  margin-top: 33px;
}

.waveform ::part(timeline-wrapper){
  position: absolute;
  top: -33px;
  left: 0;
  right: 0;
}


.new-waveform ::part(region) {
  border-radius: 500px;
}

.new-waveform ::part(region):hover {

}

.waveform ::part(region-handle) {
  opacity: 0;
}

.waveform ::part(timeline){
  color:white;
}

.waveform ::part(cursor){
  /*margin:0 50vw;*/
}

.new-waveform:nth-child(3) ::part(region) {
  height: 4px !important;
  top: unset !important;
  bottom: 0px !important;
  border:none !important;
}


.img-icon{
  width: 24px;
  height: 24px;
}

.audio-control-container{
  margin-bottom: 12px;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.left-menu, .right-menu {
 flex-grow: 1;
 flex-basis: 0;
}

.right-menu > .audio-control-btn {
  margin-left: auto;
}

.audio-control-btn{
  height: 48px;
  width: 48px;
  border-radius: 50%;
  display: flex;
  transition: background 0.2s;
}

.audio-control-btn .img-icon{
  margin:auto;
}

#context-close{
  display: none;
}

#context-save{
  min-width: 48px;
}

.save-system-grp{
  display: none;
}

.audio-control-grp, .group-open .save-system-grp{
  display: flex;
  flex-direction: row;
  justify-content: right;
}

.scene-settings-group{
  display: flex;
  flex-direction: row;
  justify-content: left;
}

.settings-top-left-menu{
  display: flex;
}

.group-open #context-close{
  display: flex;
}

.group-open .save-system-grp{
  display: flex;
}

.group-open #control-fullscreen{
  display: none;
}

.group-open .audio-control-grp{
  display: none;
}

.group-open .scene-settings-group .input-container{
  display: none;
}


#add-layer{
  display: none;
}

.group-open #add-layer{
  display: none;
}

#add-rocket, #add-light{
  display: none;
}

.group-open.open-rocket #add-rocket{
  display: flex;
}

.group-open.open-light #add-light{
  display: flex;
}


#master-cursor{
  position: absolute;
  width: 2px;
  height: 100%;
  background: white;
  top: 0px;
  left: calc(50% - 1px);
  z-index: 999;
}

.add-object{
  height: 35px;
  color: white;
  margin-left: 50%;
  display: flex;
  padding-left: 12px;
  font-size: 14px;
}

.add-object > div, .add-object > i{
  margin: auto 4px;
  opacity: 0.5;
}

#hover {
  position: absolute;
  left: 0;
  top: 33px;
  z-index: 10;
  pointer-events: none;
  height: -webkit-fill-available;
  width: 50vw;
  mix-blend-mode: overlay;
  background: rgb(255 255 255 / 60%);
  opacity: 1;
}

.timeline-editor-container{
  position: fixed;
  left: 0;
  right: 0px;
  bottom: 24px;
  height: auto;
  max-height: 300px;
  background: rgb(0 0 0 / 70%);
  backdrop-filter: blur(12px);
  max-width: 1000px;
  margin: auto;
  border-radius: 20px;
  padding: 12px;
}

#waveform-wrapper{
  max-height: 173px;
  overflow-y: auto;
}

.waveform-icon{
  color: rgb(255 255 255 / 50%);
  position: absolute;
  width: 48px;
  height: 22px;
  display: flex;
  left: -48px;
  bottom: 0px;
  background: #242424;
  border-radius: 50px 0 0 50px;
}

.waveform-icon-remove{
  color: rgb(255 255 255 / 50%);
  position: absolute;
  width: 22px;
  height: 22px;
  display: flex;
  left: -76px;
  bottom: 0px;
  justify-content: center;
  border-radius: 50%;
}

.div-icon{
  width: 100%;
  display: flex;
}

.div-icon-remove{
  display: flex;
  width: 22px;
  height: 22px;
}

.waveform-icon .img-icon, .waveform-icon-remove .img-icon{
  margin: auto;
  width: 16px;
  height: 16px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/*canvas.spotlight{
  z-index: 2;
  pointer-events: none;
}*/

/*.props-container{
  z-index: 1;
}*/

.carousel-container{
  overflow: auto;
  margin: 24px 0;
  padding: 0 24px;
}

.display-thin-scrollbar{
  padding: 0 24px 6px 24px;
  margin: 15px 0;
  scrollbar-color: #474747 transparent;
  scrollbar-width: thin;
}

.carousel-wrapper{
  display: flex;
  width: max-content;
}

.carousel-wrapper > div:first-child{
  margin-left: 0px;
}

.carousel-wrapper > div:last-child{
  margin-right: 0px;
}



.settings-container{
  max-width: 1000px;
  margin: 0 auto;
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  background: rgb(0 0 0 / 70%);
  backdrop-filter: blur(12px);
  font-size: 12px;
  color: white;
  z-index: 10;
  border-radius: 20px;
  margin: auto;
  padding: 12px;
}

@media only screen and (max-width: 1048px) {
  .timeline-editor-container{
    margin: 0px 24px;
  }

  .settings-container{
    margin: 0px 24px;
  }

  #tiny-player{
    margin:auto;
  }

}

@media only screen and (min-width: 601px) {
  .mobile-only{
    display: none !important;
  }
}

@media only screen and (max-width: 600px) {

  .mobile-only{

  }

  .timeline-editor-container{
    margin: 0px 0px;
    bottom: 0px;
    border-radius: 20px 20px 0px 0px;
    padding: 12px 0;
  }

  .settings-container{
    margin: 0px 0px;
    bottom: 0px;
    border-radius: 20px 20px 0px 0px;
    padding: 0px;
  }

  .file-item{
    width: calc((100% / 2) - 24px);
  }

}


.settings-wrapper{

}

.settings-top-menu{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.settings-close-btn, .settings-remove-btn{
  display: flex;
  padding:12px;
  border-radius: 50%;
}

.settings-label{

}

.settings-check-btn{
  display: flex;
  padding:12px;
  border-radius: 50%;
}

.rocket-carousel-container, .color-carousel-container{
  margin: 0px 6px;
  width: 60px;
}

.rocket-carousel-img{
  width: 60px;
  height: 60px;
  background: #474747;
  border-radius: 8px;
  overflow: hidden;
}

.rocket-carousel-img img{
  width:100%;
  height: 100%;
  filter: drop-shadow(0px 1000px 0 var(--rocket-color));
  transform: translateY(-1000px);
}

.standard-carousel-img{
  width: 60px;
  height: 60px;
  background: #474747;
  border-radius: 8px;
}

.standard-carousel-img img{
  width:100%;
  height: 100%;
}

.rocket-carousel-label, .color-carousel-label{
  text-align: center;
  margin-top: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.color-carousel-img{
  width: 60px;
  height: 60px;
  display: flex;
}

.rocket-color{
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin: auto;
  background: #87CA68;
}

.settings-bottom-menu{
  width: 70px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  border-radius: 8px;
  transition: all 0.2s;
  opacity: 0.6;
}

.settings-bottom-menu.active{
  opacity: 1;
}

.settings-bottom-icon{

}

.settings-bottom-label{

}

.settings-top-menu div{
  margin: auto 0;
}

.carousel-separator{
  background: white;
  width: 2px;
  margin: 0 12px;
}

.carousel-selected{
  display: flex;
  position: sticky;
  left: 0;
  z-index: 10;
  padding-left: 12px;
  background: rgb(35,35,35);
  background: -moz-linear-gradient(90deg, rgba(35,35,35,1) 90%, rgba(35,35,35,0) 100%);
  background: -webkit-linear-gradient(90deg, rgba(35,35,35,1) 90%, rgba(35,35,35,0) 100%);
  background: linear-gradient(90deg, rgba(35,35,35,1) 90%, rgba(35,35,35,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#232323",endColorstr="#232323",GradientType=1);
}

.slot-selection-container{
  margin: 24px 0;
  padding: 0 24px;
}

.slot-selection{
  display: flex;
  justify-content: space-evenly;
}

.slot-bottom, .slot-top{
  width: 60px;
  height: 60px;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  font-size: 20px;
  font-weight: bold;
}

.slot-arrow{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  right: 10px;
}

.slot-selection-label{
  text-align: center;
  margin: 12px 0px;
}

.arrow {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--rocket-color)); /* Dégradé de rouge à jaune */
}
.arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
}

.arrow::after {
  right: -10px; /* Ajuster la position */
  border-width: 10px 0 10px 20px; /* Taille de la pointe de la flèche */
  border-color: transparent transparent transparent var(--rocket-color); /* Dégradé pour correspondre à la flèche */
}

.rocket-selection, .color-selection, .sky-selection, .castle-selection{
  display: flex;
}



#settings-container-layer, #settings-container-project{
  /*height: 300px;*/
}

.settings-layer-container{
  display: flex;
  justify-content: space-evenly;
  margin-top: 12px;
}

.layer-container{
  width: 100%;
  border-radius: 20px;
  padding: 32px 0;
  margin: 0px 12px;
  background: #474747;
  opacity: 0.4;
  transition: all 0.1s;
}

.layer-container:hover{
  opacity: 1;
}

.layer-container.active{
  opacity: 1;
}

.layer-icon{
  text-align: center;
}

.layer-label{
  text-align: center;
  font-weight: bold;
}

.layer-descr{
  margin:24px;
  text-align: center;
}

#slider-pips .noUi-value-horizontal {
  -webkit-transform: translate(-50%, 25px);
  transform: translate(-50%, 25px);
}

.active-pip {
  font-weight: bold !important;
  color: var(--light-color) !important;
}

.noUi-pips-horizontal{
  top: -20% !important;
}

.noUi-target{
  background: transparent !important;
  border:none !important;
  box-shadow: unset !important;
}


.slider-container{
  margin-bottom: 50px !important;
  margin-top: 28px;
  margin-left: auto;
  margin-right: auto;
  max-width: 390px;
}

.noUi-horizontal .noUi-handle {
  width: 28px !important;
  height: 28px !important;
  right: -15px !important;
  border-radius: 50% !important;
}

.noUi-marker-normal{
  opacity: 0.5;
}

.noUi-value-sub {
  font-size: 12px !important;
}

.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 100%) !important;
  transform: translate(-50%, 100%) !important;
}

.noUi-handle:after{
  color: black !important;
  font-weight: bold !important;
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  text-align: center !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  cursor: grab !important;
  background: none !important;
}

.noUi-handle.noUi-handle-lower:after{
  content: 'A' !important;

}

.noUi-handle.noUi-handle-upper:after{
  content: 'B' !important;
}








/*houdini*/
@property --blink-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* #fallback @keyframes blink-animation {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}*/

@keyframes blink-animation {
  0%,
  100% {
    opacity: var(--blink-opacity, 1);
  }
  50% {
    opacity: 0;
  }
}
/*houdini*/

/*base*/
:root {
  --stripe-color: #fff;
  --bg: var(--stripe-color);
  --maincolor: var(--bg);
}

/*custom*/

@keyframes smoothBg {
  from {
    background-position: 50% 50%, 50% 50%;
  }
  to {
    background-position: 350% 50%, 350% 50%;
  }
}


.hero {
  height: calc(100vh - 290px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  place-content: center;
  place-items: center;
  --stripes: repeating-linear-gradient(
    100deg,
    var(--stripe-color) 0%,
    var(--stripe-color) 7%,
    transparent 10%,
    transparent 12%,
    var(--stripe-color) 16%
  );

  --rainbow: repeating-linear-gradient(
    100deg,
    #60a5fa 10%,
    #e879f9 15%,
    #60a5fa 20%,
    #5eead4 25%,
    #60a5fa 30%
  );
  background-image: var(--stripes), var(--rainbow);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;

  filter: blur(10px) invert(100%);

  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    animation: smoothBg 60s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
  }
}

:has(:checked) {
  --stripe-color: #000;
}
:has(:checked) .hero,
:has(:checked) .hero::after {
  filter: blur(10px) opacity(50%) saturate(200%);
}


.input-container{
  display: flex;
  width:100%;
}

.input-container input{
  height: 33px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50px;
  color: white;
  padding: 0 12px;
  margin: auto 0;
  font-family: "Google Sans";
  font-style: normal;
  font-size: 16px;
  width: 100%;
  transition: all 0.2s;
  outline: none;
  text-align: right;
}

.input-container input:focus{
  /*border: 1px solid white;*/
}

.input-container input::placeholder {
  font-family: "Google Sans";
  font-style: normal;
  font-size: 16px;
  color:white;
}


.input-container.input-project-name{
  width:100%;
}

.input-container.input-project-name input{
  height: 33px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50px;
  color: white;
  padding: 0 12px;
  margin: auto 0;
  font-family: "Google Sans";
  font-style: normal;
  font-size: 16px;
  width: 100%;
  transition: all 0.2s;
  outline: none;
  text-align: left;
}

.input-container.input-project-name input:focus{
  /*border: 1px solid white;*/
}

.input-container.input-project-name input::placeholder {
  font-family: "Google Sans";
  font-style: normal;
  font-size: 16px;
  color:white;
}


.modal-container{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9;
  background: rgb(0 0 0 / 60%);
}

.modal-inner{
  background: #232323;
  border-radius: 20px;
  padding: 12px 24px;
  max-width: 500px;
  width: 100%;
  margin: 24px;
  color: white;
}

.modal-header-menu{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #474747;
  padding-bottom: 12px;
}

.modal-label{
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: bold;
}

.modal-close-btn{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  min-width: 48px;
  min-height: 48px;
}

.modal-close-btn i{
  margin: auto;
}

.modal-content{
  margin: 24px 0;
  overflow-y: auto;
  max-height: 50vh;
  scrollbar-color: #474747 transparent;
}


.modal-footer{
  display: flex;
  justify-content: right;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #474747;
}

.modal-footer-btn{
  padding: 12px;
  border-radius: 10px;
}

.modal-footer-btn.active{
  background: #474747;
}

.save-groups-container{
  width: 100%;
}

.group-container{
  transition: all 0.2s;
  background: #474747;
  border-radius: 12px;
  padding: 12px;
  margin: 12px;
  border: 2px solid #474747;
  opacity: 0.6;
}

.group-container:hover{
  opacity: 1;
}

.group-container.active{
  opacity: 1;
}

.group-container-header{
  display: flex;
  justify-content: space-between;
}

.group-label{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.group-btn{
  width: 48px;
  height: 48px;
  display: flex;
  border-radius: 50%;
  min-width: 48px;
}

.group-action-btn{
  display: flex;
}

.btn-file-save{
  display: none;
}

.group-container.active .btn-file-save, .project-container.active .btn-file-save{
  display: flex;
}

.group-btn i{
  margin:auto;
}

.group-metadata{
  font-size: 12px;
}

.group-rocket-preview{
  display: flex;
  gap: 6px;
  margin: 12px 0;
}

.group-rocket{
  width: 100%;
  height: fit-content;
  background: #313131;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  z-index: -1;
}

.waves-effect img {
  z-index: 0;
}

.group-rocket img{
  border-radius: 8px;
  width: 100%;
  filter: drop-shadow(0px 1000px 0 var(--rocket-color));
  transform: translateY(-1000px);
}

.group-new-project-container{
  transition: all 0.2s;
  border: 2px #474747 solid;
  border-radius: 12px;
  color:white;
  margin: 24px auto;
  width: fit-content;
}

.group-new-project-container:hover{
  transition: all 0.2s;
  border: 2px white solid;
  border-radius: 12px;
  color:white;
  margin: 24px auto;
  width: fit-content;
}

.group-new-project{
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border-radius: 12px;
}


.group-new-save-container{
  transition: all 0.2s;
  border: 2px #474747 dashed;
  border-radius: 12px;
  margin: 12px;
}

.group-new-save-container.active{
  border: 2px #fff solid;
}


.group-new-save{
  display: flex;
  justify-content: left;
  gap: 12px;
  padding: 24px;
  border-radius: 12px;
}


.scene-carousel-container{
  margin: 0px 6px;
  width: 120px;
}

.scene-carousel-img {
  width: 120px;
  height: 60px;
  background: #474747;
  border-radius: 8px;
  display: flex;
}

.scene-carousel-img img {
  width: 60px;
  height: 60px;
  margin: auto;
}

.file-list{
  display: flex;
  flex-wrap: wrap;
}

.file-item{
  transition: all 0.2s;
  width: calc((100% / 3) - 24px);
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 12px;
  padding: 24px 12px;
  background: #474747;
  border-radius: 14px;
  opacity: 0.6;
  margin: 12px;
}

.file-item:hover{
  opacity: 1;
}

.file-item.active{
  opacity: 1;
}

.file-item i{
  margin:auto;
}

.file-label{
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}





.project-container{
  transition: all 0.2s;
  display: flex;
  border-radius: 12px;
  padding: 12px;
  opacity: 0.6;
}

.project-container:hover{
  opacity: 1;
}

.project-container.active{
  opacity: 1;
}


.project-inner{
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border-radius: 12px;
  padding: 12px;
  background: #474747;
}

.project-thumbnail{
  width: 34%;
  min-width: 33%;
  margin: 0px;
  padding: 0px 8%;
  display: flex;
  background: linear-gradient(var(--gradient-start));
  border-radius: 8px;
}

.project-thumbnail img{
  width: 100%;
  height: auto;
}

.project-name{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.project-last-edit{
  font-size: 12px;

}

.project-metadata{
  width: 42%;
  padding: 0px 12px;
}

.project-inner .group-action-btn{
  width: 24%;
  justify-content: end;
}

#drop-zone.hover{
  border: 2px white solid;
}

.drag-and-drop-container {
  margin:0;
}

.univers > .props-container{
  cursor: grab;
}


.univers{
  transition: height 0.5s ease;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: calc(100vh - 290px);
  height: calc(100vh / 2);
  display: flex;
  justify-content: center;
}

.univers{
  transition: height 0.5s ease;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: calc(100vh - 290px);
  height: calc(100vh / 2);
  display: flex;
  justify-content: center;
}

@media only screen and (max-height: 900px) {
  .univers{
    height: calc(100vh - 290px);
  }
}

.univers.extended{
  height: calc(100vh - (100vh / 2));
}

.scene {
  width: 200px;
  height: 200px;
  perspective: 800px;
  transform: translateX(50%);
  pointer-events: none;
  margin-top:auto;
  margin-bottom: 48px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
  /*transition: transform 6s;*/
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 165, 0, 0.8);
}

.bottom {
  transform: rotateX(90deg) translateZ(-100px);
  background-color: black;
  background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px);
  background-size: 30px 30px;
  border-radius: 0;
  opacity: 1;
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: green;
  opacity: 0;
}

.right {
  transform: rotateY(180deg) translateZ(100px);
  background-color: green;
  opacity: 0;
}

.ground.left {
  transform: rotateY(0deg) translateZ(100px) translateY(300px);
  background-color: #1f1f1f;
  height: 20px;
  opacity: 1;
}

.ground.right {
  transform: rotateY(180deg) translateZ(100px) translateY(300px);
  background-color: #1f1f1f;
  height: 20px;
  opacity: 1;
}

.ground.front {
  transform: rotateY(90deg) translateZ(100px) translateY(300px);
  background-color: #434343;
  height: 20px;
  opacity: 1;
}

.ground.back {
  transform: rotateY(180deg) translateZ(100px) translateY(300px);
  background-color: green;
  height: 20px;
  opacity: 1;
}

.image {
  width: 200px;
  height: 200px;
  transform: rotateX(0deg) rotateY(45deg) translateZ(0px);
  background-size: cover;
  background-position: center;
  background-color: transparent;
  border: none;
  margin: auto;
  bottom:0;
}

.controls {
  position: fixed;
  top: 20px;
}

.cube canvas {
  bottom:0;
  left: -100px;
  position: absolute;
  z-index: -1;
}

label {
  margin-right: 10px;
}

input[type="range"] {
  margin: 0 20px 20px 10px;
}

#wrap
{
  width: 100%;
  height: 100%;
  width: var(--canvas-width);
  height: var(--canvas-height);
  left: var(--canvas-left);
  position: absolute;
  bottom: 0px;
  margin: 0 auto 0 auto;
  overflow: hidden;
  transform: rotateX(0deg) rotateY(45deg) translateZ(-15px);
}

#lightings
{
  bottom: -15px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
}

section
{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  height: 20px;
  width: 100%;
  position: relative;
  margin: auto;

}


#one
{
  width: 70%;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 1, 1);
  box-shadow: 0 0 250px 20px rgb(0 0 0 / 0%);
}

#one.active
{
  transition: box-shadow 1s cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 0 100px 15px var(--ambiant-light);
}

#two
{
  width: 40%;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 1, 1);
  box-shadow: 0 0 250px 20px rgb(0 0 0 / 0%);
}

#two.active
{
  transition: box-shadow 2s cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 0 100px 15px var(--ambiant-light);
}



.props-p3e3t1{
  transform: rotateX(0deg) rotateY(45deg) translateZ(-40px) !important;
}

.props-p3e3t3{
  transform: rotateX(0deg) rotateY(45deg) translateZ(-35px) !important;
}

.props-p3e3t2{
  transform: rotateX(0deg) rotateY(45deg) translateZ(-30px) !important;
}

.props-p2e2t1{
  transform: rotateX(0deg) rotateY(45deg) translateZ(-20px) !important;
}

#wrap{
  transform: rotateX(0deg) rotateY(45deg) translateZ(-5px) !important;
}

.props-layer-3{
  transform: rotateX(0deg) rotateY(45deg) translateZ(0px) !important;
}

.props-layer-4{
  transform: rotateX(360deg) rotateY(0deg) translateZ(0px);
  animation: rotateAnimation 120s infinite;
  animation-timing-function: ease-in-out;
}

.props-p0e0t0{
  transform: rotateX(0deg) rotateY(45deg) translateZ(0px) !important;
}

.props-p2e2t3{
  transform: rotateX(0deg) rotateY(45deg) translateZ(10px) !important;
}

.props-layer-2{
  transform: rotateX(0deg) rotateY(45deg) translateZ(20px) !important;
}

.props-p1e1t2{
  transform: rotateX(0deg) rotateY(45deg) translateZ(30px) !important;
}


.props-p2e1t2{
  transform: rotateX(0deg) rotateY(45deg) translateZ(30px) !important;
}

.props-layer-1{
  transform: rotateX(0deg) rotateY(45deg) translateZ(40px) !important;
}

.spotlight{
  transform: rotateX(0deg) rotateY(45deg) translateZ(30px) !important;
}

.props-container{
  position: absolute;
  bottom: 24px;
  margin: auto;
}


@keyframes rotateAnimation {
  0% {
    transform: rotateX(360deg) rotateY(360deg) translateZ(0px);
  }
  50% {
    transform: rotateX(360deg) rotateY(0deg) translateZ(0px);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) translateZ(0px);
  }
}



.draggable {
  cursor: grab;
  position: absolute;
}

.animate__animated.animate__faster {
  -webkit-animation-duration: .3s !important;
  animation-duration: .3s !important;
}

#tiny-player{
  width: fit-content;
}

#tiny-player .center-menu{
  display: flex;
}

#tiny-player .audio-control-container{
  margin-bottom: 0px;
}

.timecode-player{
  justify-content: center;
  flex-direction: column;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  width: 150px;
  padding-left: 12px;
}

#tiny-player .right-menu{
  width: 150px;
}

.btn-open-editor-window{

}

.control-panel {
  background: rgb(0 0 0 / 70%);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 12px;
  color: white;
  position: absolute;
  left: 24px;
}

.control-panel-container .control-panel{
  position: relative;
  left: 0px;
}

.camera-settings{
  transition: all 0.2s ease;
}

.file-settings{
  width: 258px;
  margin-bottom: 12px;
}

.control-panel-container{
  position: absolute;
  top: 108px;
  left: 24px;
}

.control-group {
  display: flex;
  align-items: center;
  border-radius: 10px;
}


.range-input {
  display: flex;
  margin: 0 12px;
}

.range-input input[type="range"] {
  width: 130px;
  margin:auto;
}

.range-value {
  display: flex;
  width: 48px;
  text-align: center;
  justify-content: center;
  align-items: center;
}


.control-panel-container .audio-control-btn{
  height: 32px;
  width: 32px;
}

.control-panel .img-icon{

}

.control-panel .label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  width: 130px;
  margin:auto;
  font-size: 14px;
}

.audio-control-btn.active{
  background:#474747;
}

.file-settings .label{
  width: auto;
  margin: auto 12px;
}

.group-separator{
  height: 1px;
  width: 100%;
  background: white;
  opacity: 0.2;
  margin: 6px;
}

.control-panel.panel-left{
  top: 24px;
  left: 24px;
  right: unset;
}

.control-panel.panel-right{
  top: 24px;
  right: 24px;
  left: unset;
}

.control-panel.panel-left .control-group, .control-panel.panel-right .control-group{
  gap:6px;
}

.label-btn{
  height: 48px;
  width: auto;
  border-radius: 10px;
  display: flex;
  padding: 0 12px;
  justify-content: center;
  flex-direction: column;
  background: #0075ff;
}

.camera-settings.collide{
  position: absolute;
  top: 0px;
  left: 270px;
  margin-top: 0px;
}

.scene-settings-group .input-container input{
  text-align: left;
}

.new-project-name{
  margin: 0px;
  margin-top: 24px;
}

.previously-imported-music-container{
  margin-top: 24px;
}

.previously-imported-music-list{
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.previously-imported-music{
  transition: opacity 0.2s;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  border-radius: 12px;
  padding: 12px;
  background: #474747;
  opacity: 0.6;
}

.previously-imported-music:hover{
  opacity: 1;
}