@font-face {
  font-family: "Sys";
  src: url("../assets/fonts/sysfont.otf") format("opentype");
}

@font-face {
  font-family: "W95";
  src: url("../assets/fonts/W95FA.otf") format("opentype");
}
@font-face {
  font-family: "Windows"; /* Choose any name for the font */
  src: url("../assets/fonts/MS\ Sans\ Serif\ 8pt.ttf");
}

@font-face {
  font-family: "Analog";
  src: url("../assets/fonts/Analog.ttf") format("opentype");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  user-select: none;
}

.hidden {
  display: none !important;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #018281;
  background-image: url("../assets/BG.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.preload {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #50e5ab; */
  background-color: black;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  width: 8vw;
}

.bootbox {
  position: fixed;
  width: 950px;
  height: 100vh;
  /* background-color: white; */
  /* border: 1px solid gray; */
}

.bootbox-top {
  position: relative;
  width: 100%;
  height: 10rem;
  /* background-color: red; */
}

.bootlogo {
  width: 100%;
  display: block;
  margin: 0 auto;
  transform: scale(1.2);
}

.boot-title {
  color: white;
  font-family: W95;
  position: relative;
  font-size: 2.25rem;
  text-align: center;
  top: -3rem;
}

.boot-subtitle {
  color: rgb(205, 198, 198);
  font-family: W95;
  position: relative;
  font-size: 1rem;
  text-align: center;
  display: block;
  top: -3rem;
  margin-right: 8.2rem;
}

.boot-output {
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: green; */
  padding: 1rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 5rem;
}

.boot-txt {
  font-family: W95;
  color: white;
  font-size: 22px;
}

.bootspin-txt {
  font-family: W95;
  color: white;
  font-size: 20px;
}

.desktop {
  position: absolute;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  top: 0;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 3rem;
  padding-top: 1rem;
  padding-left: 1rem;
}

.start {
  position: absolute;
  height: 35px;
  bottom: 35px;
}

.start-bar {
  position: absolute;
  width: 100vw;
  height: 35px;
  background-color: rgb(192, 192, 192);
  border-top: 3px solid rgb(217, 225, 219);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  user-select: none;
  bottom: 0;
  left: 0;
  /* background-color: red; */
}

.start-button {
  position: relative;
  height: 27px;
  width: 65px;
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
  left: 3px;
  top: 1px;
  cursor: pointer;
  text-shadow: 0.5px 0px black, 1.5px 0px black;
  letter-spacing: 1px;
  background-size: cover;
  background-repeat: no-repeat;
  user-select: none;
  user-select: none;
}

.start-button:active {
  border-top: 3px solid black;
  border-left: 2px solid black;
  border-right: 2px solid rgb(251, 250, 251);
  border-bottom: 2px solid rgb(251, 250, 251);
}

.start-active {
  border-top: 3px solid black;
  border-left: 2px solid black;
  border-right: 2px solid rgb(251, 250, 251);
  border-bottom: 2px solid rgb(251, 250, 251);
}

.start-img {
  width: 100%;
}

.time-box {
  position: relative;
  margin-right: 3px;
  top: 0px;
  width: 100px;
  height: 29px;
  background-color: transparent;
  border: 1px solid black;
  border-top: 2px solid rgb(145, 145, 145);
  border-left: 2px solid rgb(145, 145, 145);
  border-bottom: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(251, 250, 251);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.clock-img {
  position: relative;
  width: 22px;
  left: 3px;
  top: -1px;
}

.current-time {
  font-family: W95;
  margin: 0 auto;
  font-size: 14px;
}

.start-menu {
  position: absolute;
  width: 185px;
  height: 16.8rem;
  background-color: rgb(195, 199, 203);
  bottom: 0px;
  left: 1px;
  z-index: 10;
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
  user-select: none;
  z-index: 50 !important;
}

.win95-long {
  position: absolute;
  height: 100%;
  width: 24px;
  left: 1px;
}

.start-left {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
}

.start-list {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 9.7rem;
  left: 25px;
  height: 16.5rem;
}

.start-item {
  width: 100%;
  height: 37px;
  position: relative;
  overflow: hidden;
}

.start-item:hover {
  background-color: rgb(0, 0, 170);
}

.start-item:hover .start-item-title {
  color: white;
}
.start-item:hover .fa-play {
  color: white;
}

.nav-icon {
  width: 30px;
  top: 5px;
  position: absolute;
  left: 5px;
}

.ico-sml {
  transform: scale(0.8);
}
.ico-pad {
  top: 0.5rem;
}

.fa-play {
  position: absolute;
  font-size: 0.5rem;
  right: 0.5rem;
  top: 0.9rem;
}
.start-item-title {
  position: absolute;
  font-family: W95;
  font-size: 15px;
  left: 47px;
  top: 12px;
  color: black;
  text-decoration: none;
}

.border {
  border-top: 1px solid black;
  border-bottom: 2px solid rgb(251, 250, 251);
  position: relative;
  width: 98%;
}

.desktop-icon {
  width: 6.35rem;
  /* height: 3.8rem; */
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.6rem;
  user-select: none;
  text-align: center;
  cursor: pointer;
  z-index: 0 !important;
  padding-bottom: 0.4rem;
}

.desktop-icon:active {
  cursor: grab;
}

.terminal-icon img {
  width: 2.5rem;
}

.desktop-logo {
  width: 45px;
  height: 35px;
  user-select: none;
}

.icon-text {
  font-size: 14px;
  font-family: W95;
  color: white;
  line-height: 14px;
}

.icon-text-black {
  font-size: 14px;
  font-family: W95;
  color: black;
  line-height: 14px;
}

.programs {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.puzzle-modal {
  position: absolute;
  width: 495px;
  height: 510px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 30;
  border-radius: 0.4rem;
  overflow: hidden;
}

.puzzle-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0.25rem;
}

.pieces-grid {
  display: flex;
  justify-content: flex-start;
  padding: 0.25rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pieces-grid div {
  width: 88px;
  height: 88px;
}

.puzzle-tile {
  width: 100%;
  cursor: pointer;
  position: relative;
}
.puzzle-tile:hover {
  box-shadow: 0px 0px 2px black;
}

.decode-modal {
  position: absolute;
  width: 400px;
  height: 300px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 30;
  border-radius: 0.4rem;
  overflow: hidden;
}

.decode-textmodal {
  display: flex;
  justify-content: flex-start;
  height: calc(100% - 20px);
  width: 100%;
  text-align: start;
  background-color: white;
}

.decode-par {
  position: relative;
  font-size: 15px;
  user-select: text;
  display: block;
  padding: 5px 0px 0px 5px;
}

.team-modal {
  position: absolute;
  width: 590px;
  height: 625px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 30;
  border-radius: 0.4rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: gainsboro;
}

.poobah {
  overflow-y: hidden !important;
}

.team-nav {
  position: relative;
  width: 100%;
}
.team-rows {
  position: relative;
  width: 36.1rem;
  height: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: gainsboro;
  flex-wrap: wrap;
  margin-left: 1.3rem;
  margin-top: 0.7rem;
}
.team-row {
  height: 17.5rem;
  /* border: 1px solid black; */
  border-radius: 0.4rem;
  width: 30%;
  overflow: scroll;
  overflow-x: hidden;
  margin-right: 1.2rem;
}

.team-desc {
  font-family: W95;
  width: 10rem;
  position: relative;
  margin: 0rem auto;
  margin-top: 1rem;
  padding-left: 0.5rem;
}

.team-img {
  width: 9rem;
  margin: 0rem auto;
  position: relative;
  display: block;
  margin-top: 1rem;
  border-radius: 0.5rem;
}

.team-img:hover {
  box-shadow: 0px 0px 5px black;
  cursor: pointer;
}

.row1 {
  background: linear-gradient(50deg, rgb(91, 212, 91), lightgreen);
}
.row2 {
  background: linear-gradient(120deg, rgb(124, 223, 124), rgb(85, 215, 85));
}
.row3 {
  background: linear-gradient(300deg, rgb(86, 226, 91), rgb(103, 248, 103));
}
.row4 {
  background: linear-gradient(170deg, rgb(120, 232, 120), rgb(89, 216, 144));
}
.row5 {
  background: linear-gradient(220deg, rgb(101, 225, 101), rgb(112, 215, 113));
}
.row6 {
  background: linear-gradient(20deg, rgb(133, 209, 133), rgb(62, 224, 65));
}

.team-member-title {
  position: relative;
  display: block;
  text-align: center;
  font-family: W95;
  margin-top: 0.5rem;
  font-size: 1.25rem;
}

.stock-modal {
  position: absolute;
  width: 1000px;
  height: 700px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 30;
  border-radius: 0.4rem;
  overflow: hidden;
}

.arcade-modal {
  position: absolute;
  width: 1000px;
  height: 700px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 30;
  border-radius: 0.4rem;
  overflow: hidden;
}

.stake-modal {
  position: absolute;
  width: 800px;
  height: 700px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 30;
  border-radius: 0.4rem;
  overflow: hidden;
}

.photobooth-modal {
  position: absolute;
  width: 1000px;
  height: 700px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 30;
  border-radius: 0.4rem;
  overflow: hidden;
}

.mint-modal {
  position: absolute;
  width: 410px;
  height: 400px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 20;
  border-radius: 0.4rem;
  overflow: hidden;
}

.bin-modal {
  position: absolute;
  width: 600px;
  height: 500px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 20;
  border-radius: 0.4rem;
  overflow: hidden;
}

.terminal-modal {
  position: absolute;
  width: 600px;
  height: 500px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 20;
  border-radius: 0.4rem;
}

.folder-modal {
  position: absolute;
  width: 600px;
  height: 500px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 20;
  border-radius: 0.4rem;
}

.music-modal {
  position: absolute;
  width: 275px;
  height: 150px;
  background-color: #c7c7c7;
  border: 1px solid black;
  border-top: 1px solid rgb(240, 240, 240);
  border-left: 1px solid rgb(240, 240, 240);
  z-index: 20;
  border-radius: 0.4rem;
}

.program-nav {
  background-color: rgb(0, 0, 170);
  background: linear-gradient(80deg, #808080, #808080, #9a9b9d, white);
  position: relative;
  height: 18px;
  margin: 1px 2px 0px 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
}

.left-block {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 2px;
}

.program-logo {
  width: 19px;
  user-select: none;
}

.program-title {
  position: relative;
  font-family: W95;
  color: white;
  font-size: 13px;
  padding-left: 2px;
  user-select: none;
}

.right-block {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 2px;
}

.min-btn {
  position: relative;
  width: 16px;
  height: 16px;
  background: url("../assets/icons/Minimize.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  cursor: pointer;
  border: 1px solid transparent;
}

.min-btn:active {
  border-top: black;
  border-right: black;
  border-left: white;
  border-bottom: white;
}

.enl-btn {
  position: relative;
  width: 16px;
  height: 16px;
  background: url("../assets/icons/Enlarge.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  cursor: pointer;
  border: 1px solid transparent;
}

.enl-btn:active {
  border-top: black;
  border-right: black;
  border-left: white;
  border-bottom: white;
}

.enl-disable {
  position: relative;
  width: 16px;
  height: 16px;
  background: url("../assets/icons/EnlargeDisabled.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  cursor: pointer;
  pointer-events: none;
}

.clo-btn {
  position: relative;
  width: 16px;
  height: 16px;
  background: url("../assets/icons/Close.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  cursor: pointer;
  border: 1px solid transparent;
}

.clo-btn:active {
  border-top: black;
  border-right: black;
  border-left: white;
  border-bottom: white;
}

.active-programs {
  position: relative;
  height: 100%;
  left: 0rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.2rem;
  padding-left: 6px;
  padding-top: 1px;
  /* background-color: green; */
}

.active-program {
  height: 26px;
  position: relative;
  width: 150px;
  border: 1px solid transparent;
  border-top: 2px solid black;
  border-left: 2px solid black;
  background-color: white;
  display: flex;
  justify-content: flex-start;
  gap: 0.2rem;
  align-items: center;
  padding-left: 3px;
  background: url("../assets/Dotted.png") 0% 0% / cover;
}

.prog-title {
  color: black;
  font-family: W95;
  font-size: 13px;
}

.mini-logo {
  width: 19px;
}

.minimized {
  background-color: #c3c7cb;
  border-width: 2px 1px 1px 2px;
  border-style: solid;
  border-color: rgb(217, 225, 219) black black rgb(217, 225, 219);
  cursor: pointer;
}

.maximized {
  width: 100%;
  height: calc(100vh - 36px);
  top: 0;
  margin-bottom: 36px;
  z-index: 10;
  transform: translate3d(0px, 0px, 0) !important;
}

.music-file-nav {
  position: relative;
  height: 18px;
  margin: 1px 2px 0px 1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 5px;
}

.left-cornered {
  left: 0;
  bottom: 0;
}

.music-nav-left {
  position: relative;
  width: 4.1rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 4px;
}

.nav-txt {
  font-family: W95;
  font-size: 13px;
}

.music-program-box {
  position: relative;
  width: 100%;
  height: 6.75rem;
  border-top: 2px solid white;
  border-left: 2px solid white;
}

.music-player-block {
  position: relative;
  width: 100%;
  border-right: 2px solid #848484;
}

.music-duration-block {
  position: relative;
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.analog-display {
  position: relative;
  width: 203px;
  height: 37px;
  background-color: black;
  margin-left: 5px;
  border-top: 2px solid #848484;
  border-left: 2px solid #848484;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.music-cta-box {
  position: relative;
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #848484;
}

.music-cta-btns {
  position: relative;
  padding-left: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.track-display {
  position: relative;
  height: 100%;
  width: 3rem;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 2px;
  margin-right: 0.25rem;
}

.track-title {
  font-family: W95;
  font-size: 10px;
  color: #00ff00;
  text-align: center;
}

.track-counter {
  font-family: Analog;
  font-size: 19px;
  color: #00ff00;
  padding-right: 6px;
}

.second-counter {
  font-family: Analog;
  font-size: 19px;
  color: #00ff00;
  padding-left: 1px;
}

.minute-counter {
  font-family: Analog;
  font-size: 19px;
  color: #00ff00;
}

.minute-display {
  position: relative;
  height: 100%;
  width: 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 2px;
}

.colon-display {
  font-family: Analog;
  width: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 2px;
  color: #00ff00;
  font-size: 20px;
  padding-top: 11px;
}

.second-display {
  position: relative;
  height: 100%;
  width: 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 2px;
  font-family: Analog;
}

.music-info-btn {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background: url("../assets/icons/MusicInfo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 0.6rem;
  border-top: 2px solid white;
  border-right: 2px solid #848484;
  border-bottom: 2px solid #848484;
  border-left: 2px solid white;
  cursor: pointer;
}

.music-info-btn:active {
  border-bottom: 2px solid white;
  border-left: 2px solid #848484;
  border-top: 2px solid #848484;
  border-right: 2px solid white;
}

.music-inner-border {
  position: relative;
  width: 95%;
  left: 2%;
  background-color: #848484;
  height: 2px;
  border-bottom: 1px solid white;
}

.cta-play {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background: url(../assets/icons/PlayButton.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 2px solid white;
  border-bottom: 2px solid #848484;
  border-left: 2px solid white;
  border-right: 1px solid transparent;
  cursor: pointer;
}

.cta-play:active {
  border-bottom: 2px solid white;
  border-left: 2px solid #848484;
  border-top: 2px solid #848484;
  border-right: 2px solid white;
}

.cta-stop {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background: url(../assets/icons/StopButton.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 2px solid white;
  border-right: 2px solid #848484;
  border-left: 1px solid transparent;
  border-bottom: 2px solid #848484;
  cursor: pointer;
}

.cta-stop:active {
  border-bottom: 2px solid white;
  border-left: 2px solid #848484;
  border-top: 2px solid #848484;
  border-right: 2px solid white;
}

.cta-pause {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background: url(../assets/icons/PauseButton.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 2px solid white;
  border-right: 1px solid transparent;
  border-bottom: 2px solid #848484;
  border-left: 1px solid transparent;
  cursor: pointer;
}

.cta-pause:active {
  border-bottom: 2px solid white;
  border-left: 2px solid #848484;
  border-top: 2px solid #848484;
  border-right: 2px solid white;
}

.cta-music-back {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background: url(../assets/icons/TrackBack.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 2px solid white;
  border-right: 1px solid transparent;
  border-bottom: 2px solid #848484;
  border-left: 1px solid transparent;
  cursor: pointer;
}
.cta-music-back:active {
  border-bottom: 2px solid white;
  border-left: 2px solid #848484;
  border-top: 2px solid #848484;
  border-right: 2px solid white;
}

.cta-music-forward {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background: url(../assets/icons/TrackForward.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 2px solid white;
  border-right: 1px solid transparent;
  border-bottom: 2px solid #848484;
  border-left: 1px solid transparent;
  cursor: pointer;
}

.cta-music-forward:active {
  border-bottom: 2px solid white;
  border-left: 2px solid #848484;
  border-top: 2px solid #848484;
  border-right: 2px solid white;
}

.cta-eject {
  position: relative;
  width: 2.5rem;
  height: 1.5rem;
  background: url(../assets/icons/EjectButton.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 2px solid white;
  border-bottom: 2px solid #848484;
  border-left: 2px solid white;
  border-right: 1px solid transparent;
  cursor: pointer;
  margin-right: 10px;
}

.cta-eject:active {
  border-bottom: 2px solid white;
  border-left: 2px solid #848484;
  border-top: 2px solid #848484;
  border-right: 2px solid white;
}

.music-save-row {
  position: relative;
  border: 1px solid white;
  border-right: 1px solid #848484;
  border-bottom: 1px solid #848484;
  width: 100%;
  height: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.electro-logo {
  height: 90%;
}

.download-track {
  position: relative;
  width: 20px;
  height: 10px;
  background: url(../assets/icons/MusicDownloadButton.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: none;
  cursor: pointer;
  margin-right: 3px;
  margin-left: 3px;
}

.download-track:active {
  border-bottom: 2px solid white;
  border-left: 2px solid #848484;
  border-top: 2px solid #848484;
  border-right: 2px solid white;
}

.music-player {
  display: none;
}

.on-top {
  z-index: 100 !important;
}

.master-top {
  z-index: 9999 !important;
}
.terminal-body {
  position: relative;
  /* width: 100%; */
  height: calc(100% - 21px);
  background-color: black;
  margin: 1px 2px 0px;
}

.terminal-inner-body {
  position: relative;
  width: 100%;
  height: 100%;
  /* background-color: red; */
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: scroll;
}

.terminal-inputbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.terminal-prepend {
  font-family: Windows;
  color: #50e5ab;
  width: 3.7rem;
}

.term-stl {
  color: #50e5ab;
}

.term-default {
  color: rgb(226, 223, 223);
}

.terminal-output {
  position: relative;
  top: 0;
  list-style-type: none;
  font-family: Windows;
  color: #50e5ab;
  word-wrap: break-word;
  width: 100%;
}

.term-output-txt {
  color: rgb(226, 223, 223);
  font-family: Windows;
}

.terminal-input {
  font-family: Windows;
  width: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  color: rgb(226, 223, 223);
}

.folder-inner {
  position: relative;
  width: 100%;
  height: calc(100% - 19px);
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 0.4rem;
  background-color: white;
}

.inner-folder-nav {
  position: relative;
  width: 100%;
  height: 2.5rem;
  /* background-color: red; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 0.5rem;
  gap: 0.7rem;
}

.fld-btn {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  justify-content: space-between;
  gap: 0.3rem;
  font-family: W95;
  border: 1px solid transparent;
  cursor: pointer;
  width: 3rem;
}

.arrow-img {
  height: 0.6rem;
  width: 1.25rem;
  margin: 0 auto;
}

.arrow-span {
  text-align: center;
  display: block;
  width: 100%;
}

.folder-inner-modals {
  position: relative;
  width: 100%;
  height: calc(100% - 2.5rem);
}

.folder-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.program-grid {
  position: relative;
  width: 100%;
  /* height: 100%; */
  padding: 1rem;
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.folder-program {
  position: relative;
  width: 3rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  user-select: none;
  text-align: center;
  gap: 0.5rem;
  cursor: pointer;
  z-index: 0 !important;
}

.folder1 {
  position: absolute;
  top: 0;
  background-color: green;
}

.folder2 {
  position: absolute;
  top: 0;
  background-color: red;
}
.enlarge {
  transform: scale(1.1);
}

.bin-file-nav {
  position: relative;
  width: 100%;
  height: 20px;
  /* background-color: red; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  padding-left: 3px;
}

.dropdown {
  font-family: W95;
  /* width: 20px; */
  padding: 2px 5px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  user-select: none;
  position: relative;
}

.dropdown:hover {
  cursor: pointer;
  color: white;
  background-color: #0000aa;
}

.bin-inner {
  position: relative;
  width: calc(100% - 4px);
  height: calc(100% - 62px);
  background-color: white;
  border-radius: 2px;
  margin: 0 auto;
  overflow: hidden;
}

.bin-info-row {
  position: relative;
  height: 21px;
  width: calc(100% - 1px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.bin-left {
  position: relative;
  width: 40%;
  height: 20px;
  padding-left: 5px;
  border-top: 1px solid rgb(112, 105, 105);
  border-left: 1px solid rgb(112, 105, 105);
  border-right: 1px solid rgb(217, 225, 219);
  border-bottom: 1px solid rgb(217, 225, 219);
  margin-top: 2px;
  margin-left: 4px;
}

.bin-objects {
  font-family: Windows;
  font-size: 13px;
}

.bin-right {
  position: relative;
  width: 60%;
  height: 20px;
  padding-left: 5px;
  border-top: 1px solid rgb(112, 105, 105);
  border-left: 1px solid rgb(112, 105, 105);
  border-right: 1px solid rgb(217, 225, 219);
  border-bottom: 1px solid rgb(217, 225, 219);
  margin-top: 2px;
  margin-left: 4px;
}

.bin-item {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 10rem;
  height: 10rem;
}

.bin-item:active {
  cursor: grab;
}

.bin-item-txt {
  font-family: W95;
  text-align: center;
  display: block;
}

.bin-item-img {
  width: 100%;
}

.drop-stl {
  position: absolute;
  width: 65px;
  background-color: #c7c7c7;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 20px;
  left: 0px;
  z-index: 10;
  gap: 0.3rem;
  padding: 3px;
  list-style-type: none;
}

.dropitem {
  font-family: W95;
  color: black;
  width: 100%;
  height: 18px;
  /* padding: 5px 0px; */
  display: flex;
  padding-left: 2px;
}

.dropitem:hover {
  color: white;
  background-color: #0000aa;
}

.prio-z {
  z-index: 50 !important;
}

.master-z {
  z-index: 100 !important;
}

.photobooth-content {
  position: relative;
  height: calc(100% - 20px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.booth-half {
  position: relative;
  width: 450px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.booth-navblock {
  width: 100%;
  height: 5rem;
  margin-top: 2rem;
}

.booth-mainblock {
  width: 100%;
  height: 535px;
  background-color: white;
  border-radius: 4px;
}

.bth-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.connect-booth-wallet {
  width: 8rem;
  height: 2rem;
  border: 2px solid purple;
  border-radius: 0.6rem;
  cursor: pointer;
  font-family: W95;
  transition: all 0.2s ease-in-out;
}

.connect-booth-wallet:hover {
  background: linear-gradient(90deg, purple, rgb(217, 70, 217));
  color: white;
}

.bth-left {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

.trait-nav-btn {
  width: 60px;
  height: 50px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 2px solid purple;
  border-bottom: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.market-nav-btn {
  width: 60px;
  height: 50px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 2px solid purple;
  border-bottom: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: W95;
  background: linear-gradient(
    90deg,
    rgba(128, 0, 128, 0.48),
    rgba(0, 0, 255, 0.546)
  );
  color: white;
}

.trait-btn-img {
  width: 75%;
  height: 75%;
}

.mar-bot {
  margin-bottom: 1.5rem;
}

.scale {
  transform: scale(1.5);
  margin-bottom: 0.6rem;
  margin-right: 0.4rem;
}

.mar-top {
  margin-top: 0.7rem;
}

.trait-act-btn {
  background-color: rgba(128, 0, 128, 0.185);
}

.t-view {
  width: 100%;
  padding: 1.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1.6rem;
}

.trait-item {
  position: relative;
  width: 60px;
  height: 60px;
  border: 1px solid purple;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}

.trait-img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.booth-imgbox {
  position: relative;
  width: 100%;
  height: 450px;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.8rem;
}

.booth-ctabox {
  position: relative;
  width: 100%;
  height: 85px;
  /* background-color: purple; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.res-img {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  border-radius: 1.75rem;
  user-select: none;
}

.t-selected {
  box-shadow: 0px 0px 5px purple;
}

.toggle-bg-span {
  font-family: W95;
}

.toggle-bg-btn {
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  left: -5rem;
  cursor: pointer;
  margin-bottom: 1rem;
}

.toggle-bg-inner {
  width: 3.5rem;
  height: 1.75rem;
  border-radius: 2rem;
  background-color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.1rem;
}

.toggle-circle {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 50%;
  background-color: white;
  transition: all 0.2s ease-in-out;
}

.circle-act {
  transform: translateX(1.8rem);
}

.save-booth-btn {
  width: 8rem;
  height: 2rem;
  border: 2px solid purple;
  border-radius: 0.6rem;
  cursor: pointer;
  font-family: W95;
  transition: all 0.2s ease-in-out;
}

.save-booth-btn:hover {
  background: linear-gradient(90deg, purple, rgb(217, 70, 217));
  color: white;
}

.del-imgs {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 20;
  font-size: 2rem;
  color: gray;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.del-imgs:hover {
  color: black;
}

.start-tab1 {
  position: absolute;
  width: 9.7rem;
  /* height: 5rem; */
  background-color: rgb(195, 199, 203);
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
  bottom: 9.25rem;
  left: 11.3rem;
  z-index: 50;
}

.start-tab2 {
  position: absolute;
  width: 9.7rem;
  /* height: 5rem; */
  background-color: rgb(195, 199, 203);
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
  bottom: 11.8rem;
  left: 11.3rem;
  z-index: 50;
}

.construction-fallback {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: W95;
  font-size: 25px;
  color: black;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stockmarket-inner {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.stock-item {
  position: relative;
  width: 100%;
  height: 2rem;
  border-bottom: 1px solid rgb(179, 169, 169);
}

.crypto-icon {
  position: relative;
  /* height: 100%; */
  width: 1.5rem;
  color: white;
  top: 0.2rem;
  left: 0.2rem;
}

.stockrow {
  position: relative;
  /* width: 6rem; */
  height: 100%;
  /* background-color: red; */
  padding: 0rem 1rem;
  padding-top: 0.5rem;
}

.stockrow-title {
  font-family: W95;
  font-size: 20px;
  font-weight: 1000;
}

.stockitem {
  /* border: 1px solid black; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.3rem;
  height: 2rem;
  margin-top: 0.5rem;
}

.crypto-logo {
  width: 1.5rem;
}

.stockname-txt {
  font-family: W95;
  font-size: 18px;
}

.stockticker {
  font-size: 15px;
  color: gray;
}

.col-up {
  color: green;
  font-family: W95;
  font-size: 18px;
}

.col-down {
  color: red;
  font-family: W95;
  font-size: 18px;
}

.fa-price-up {
  position: relative;
  top: 0;
  left: 0;
  transform: rotate(270deg);
  color: green;
}

.fa-price-down {
  position: relative;
  top: 0;
  left: 0;
  transform: rotate(90deg);
  color: red;
}

.stonkspinner {
  position: absolute;
  z-index: 75;
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: W95;
  font-size: 2rem;
}

.staker-tabs {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
}

.connect-meta-stake {
  user-select: none;
  position: relative;
  font-family: Windows;
  width: 10rem;
  height: 3rem;
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
  cursor: pointer;
}

.connect-meta-stake:active {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid rgb(251, 250, 251);
  border-bottom: 2px solid rgb(251, 250, 251);
}

.connect-tab {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.approve-tab {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.approve-top {
  position: relative;
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-family: Windows;
  padding-bottom: 3rem;
}

.approve-bot {
  position: relative;
  height: 20%;
  width: 100%;
  /* background-color: green; */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  gap: 1.25rem;
  padding-top: 3rem;
}

.approval-btn {
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
  cursor: pointer;
  width: 10rem;
  height: 3rem;
  font-size: 1rem;
}
.approval-btn:active {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid rgb(251, 250, 251);
  border-bottom: 2px solid rgb(251, 250, 251);
}

.stake-interface {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.stake-top-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.wrap {
  border-left: 1px solid #868a8e;
  border-top: 1px solid #868a8e;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  width: 48.5%;
  margin-top: 0.5rem;
}

.staker-info-top {
  position: relative;
  width: 100%;
  left: 0%;
  height: 10rem;
  border: 1px solid red;
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
}

.staker-info-bot {
  position: relative;
  width: 100%;
  height: 100%;
  width: 98%;
  margin: 0.5rem 0rem;
  display: flex;
  gap: 0.5rem;
}

.staker-bot-left {
  position: relative;
  width: 100%;
  height: 100%;
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
  overflow-y: scroll;
}

.staker-bot-right {
  position: relative;
  width: 100%;
  height: 100%;
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
  overflow-y: scroll;
}

.bdr {
  border-left: 1px solid #868a8e;
  border-top: 1px solid #868a8e;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  width: 50%;
}

.bdr-long {
  border-left: 1px solid #868a8e;
  border-top: 1px solid #868a8e;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  width: 98%;
  margin-bottom: 0.5rem;
}

.staker-btn-row {
  position: relative;
  width: 100%;
  height: 5rem;
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-family: Windows;
}

.box-title {
  font-family: Windows;
  text-align: center;
  display: block;
}

.stickyy {
  position: sticky;
  text-align: center;
  top: 0;
  width: 100%;
  background-color: #c3c7cb;
  z-index: 30;
}

.staker-info-box {
  position: relative;
  width: 100%;
  height: calc(100% - 26px);
  display: flex;
  flex-direction: column;
  font-family: Windows;
  gap: 0.1rem;
  padding-left: 0.5rem;
}

.old-btn {
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
  cursor: pointer;
  width: 9rem;
  height: 3rem;
  font-size: 0.95rem;
}
.old-btn:active {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid rgb(251, 250, 251);
  border-bottom: 2px solid rgb(251, 250, 251);
}

.green {
  background-color: rgb(125, 240, 185);
  color: black;
  text-shadow: 0px 0px 5px white;
}

.left {
  border-radius: 0px 10px 10px 0px;
}

.left-xl {
  border-radius: 0px 20px 20px 0px;
}

.right {
  border-radius: 10px 0px 0px 10px;
}

.right-xl {
  border-radius: 20px 0px 0px 20px;
}

.staker-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 110;
  font-family: Windows;
  background-color: #121212c9;
  color: white;
  user-select: none;
}

.wallet-nfts {
  position: relative;
  width: 100%;
  height: 18rem;
  /* background-color: green; */
  display: flex;
  flex-wrap: wrap;
  padding: 0.3rem;
  gap: 0.4rem;
  user-select: none;
}

.vault-nfts {
  position: relative;
  width: 100%;
  height: 18rem;
  /* background-color: green; */
  display: flex;
  flex-wrap: wrap;
  padding: 0.3rem;
  gap: 0.4rem;
  user-select: none;
}

.vault-nft {
  position: relative;
  width: 7.5rem;
  height: 9.1rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.vault-nft:hover {
  border: 1px solid rgb(17, 4, 137);
}

.gallery-nft {
  position: relative;
  width: 7.5rem;
  height: 9.1rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.gallery-nft:hover {
  border: 1px solid rgb(17, 4, 137);
}

.wallet-nft {
  position: relative;
  width: 7.5rem;
  height: 9.1rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.wallet-nft:hover {
  border: 1px solid rgb(17, 4, 137);
}

.selected {
  border: 2px solid rgb(17, 4, 137);
}

.selected:hover {
  border: 2px solid rgb(17, 4, 137);
}

.nft-mini {
  position: relative;
  width: 100%;
}

.nft-id {
  font-family: Windows;
  display: block;
  text-align: center;
  margin-bottom: 0.1rem;
}

.staker-unlocks {
  position: absolute;
  z-index: 100;
  width: calc(100% - 2px);
  height: calc(100% - 20px);
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Windows;
  font-size: 18px;
}

.min-pad {
  margin-left: 18px;
}

.lottery-inner {
  position: relative;
  width: calc(100% - 2px);
  height: calc(100% - 20px);
}

.lottery-metamask-box {
  position: relative;
  width: calc(100% - 2px);
  height: calc(100% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lottery-scrollbox {
  position: relative;
  width: 100%;
  height: 3rem;
  top: 1px;
  padding: 2px;
  overflow: hidden;
}

.animated-bar {
  position: relative;
  width: 120%;
  left: -3%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 2px solid rgb(145, 145, 145);
  border-right: 2px solid rgb(145, 145, 145);
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
}

.marquee {
  color: black;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 1.8rem;

  font-family: Windows;
  user-select: none;
}

.purp {
  color: purple;
}

.greeny {
  color: rgb(17, 165, 17);
}

.greenn {
  color: green;
}

/* Mint */

.modals-wrapper {
  position: relative;
  width: 99%;
  left: 0.5%;
  top: 0px;
  height: 380px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.minter-inner-1 {
  position: relative;
  width: 99%;
  left: 0.5%;
  height: 20.5rem;
  top: 0%;
  /* background-color: green; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.minter-inner-2 {
  position: relative;
  width: 99%;
  left: 0.5%;
  height: 100%;
}

.minter-inner-3 {
  position: relative;
  width: 99%;
  left: 0.5%;
  height: 21rem;
  /* background-color: green; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-mint {
  font-size: 18px;
  font-family: Windows;
}

.progress-wrap {
  width: 100%;
  position: absolute;
  bottom: 0px;
}

.status-bar {
  position: relative;
  height: 20px;
  width: 98.5%;
  left: 0.7%;
  /* background-color: red; */
  border: 1px solid black;
  display: flex;
  margin-top: 5px;
}

.stat-block {
  position: relative;
  width: 11px;
  height: 16px;
  top: 1px;
  background-color: #19286c;
  margin-left: 1px;
}

.status-text {
  text-align: center;
  display: block;
  font-family: Windows;
  font-size: 13px;
  position: relative;
  margin: 0.2rem 0;
}
.status-text2 {
  text-align: center;
  display: block;
  font-family: Windows;
  font-size: 13px;
  position: relative;
  margin: 0.2rem 0;
}

.mint-meta-connect {
  border-top: 2px solid #fbfafb;
  border-left: 2px solid #fbfafb;
  background-color: #c5c5c5;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}

.web3modal-modal-lightbox {
  z-index: 100 !important;
}

.border-wrap {
  border-left: 1px solid #868a8e;
  border-top: 1px solid #868a8e;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  position: absolute;
  width: 99%;
  left: 0.5%;
  height: 5.15rem;
  top: 1rem;
}

.minter-user-info {
  position: relative;
  height: 5rem;
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
  padding: 10px;
  padding-left: 5px;
  display: flex;
  justify-content: space-between;
}

.minter-box-left {
  position: relative;
  width: 75%;
  height: 4.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.minter-box-right {
  position: relative;
  width: 25%;
  height: 4.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: Windows;
}

.connected-wallet {
  font-family: Windows;
  font-size: 12px;
  width: 100%;
}

.block-timestamp {
  font-family: Windows;
  font-size: 12px;
  width: 100%;
}

.bytes32-text {
  font-family: Windows;
  font-size: 12px;
  width: 100%;
}

.minter-ethbalance {
  font-family: Windows;
  font-size: 12px;
  width: 100%;
}

.minter-mintable {
  font-family: Windows;
  font-size: 12px;
  width: 100%;
}

.minter-minted {
  font-family: Windows;
  font-size: 12px;
  width: 100%;
}

.border-wrap2 {
  border-left: 1px solid #868a8e;
  border-top: 1px solid #868a8e;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  position: absolute;
  width: 99%;
  left: 0.5%;
  height: 13.15rem;
  top: 7rem;
}

.minter-action-box {
  position: relative;
  height: 13rem;
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
}

.minter-info-box {
  font-family: Windows;
  font-size: 13px;
  background-color: #c3c7cb;
  position: absolute;
  top: -9px;
  left: 5px;
}

.mint-config-box {
  position: absolute;
  width: 15rem;
  height: 11rem;
  left: 9rem;
  top: 0.7rem;
  gap: 1.8rem;
  display: flex;
  flex-direction: column;
}

.row {
  position: relative;
  height: 20px;
}

.mint-btn-row {
  position: relative;
  width: 100%;
  height: 2rem;
  /* border: 1px solid blue; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.center-btn {
  position: relative;
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
}

.nft-mint-price {
  font-family: Windows;
  font-size: 15px;
  display: block;
  text-align: center;
}

.total-hr {
  color: black;
  background-color: black;
  height: 3px;
  width: 100%;
  position: relative;
}

.btn-stl {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 30px;
  font-family: Windows;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.min {
  user-select: none;
  position: relative;
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
}

.min:active {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid rgb(251, 250, 251);
  border-bottom: 2px solid rgb(251, 250, 251);
}

.plus {
  user-select: none;
  position: relative;
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
}

.plus:active {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid rgb(251, 250, 251);
  border-bottom: 2px solid rgb(251, 250, 251);
}

.total-mint-price {
  font-family: Windows;
  font-size: 15px;
  display: block;
  text-align: center;
  position: relative;
}

.mint-button {
  position: relative;
  height: 27px;
  width: 85px;
  font-family: Windows;
  font-size: 13px;
}

.win-stl {
  cursor: pointer;
  text-shadow: 0.5px 0px black, 0.5px 0px black;
  letter-spacing: 1px;
  background-size: cover;
  background-repeat: no-repeat;
  user-select: none;
  border-top: 2px solid rgb(251, 250, 251);
  border-left: 2px solid rgb(251, 250, 251);
  border-right: 2px solid rgb(20, 20, 20);
  border-bottom: 2px solid rgb(20, 20, 20);
}

.win-stl:active {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid rgb(251, 250, 251);
  border-bottom: 2px solid rgb(251, 250, 251);
}

.cur-minted-box {
  position: absolute;
  width: 8.3rem;
  height: 3rem;
  top: 8.5rem;
  /* border: 1px solid red; */
  font-family: Windows;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mint-gif {
  position: relative;
  width: 7.5rem;
  left: 0.3rem;
  top: 0.75rem;
}

.mint-counter {
  font-family: Windows;
  font-size: 20px;
  position: relative;
}

.all-wallet {
  position: absolute;
  left: 22.1rem;
  top: 0.3rem;
  z-index: 100;
  font-family: Windows;
  font-size: 10px;
  width: 1.75rem;
  cursor: pointer;
  border: 1px solid black;
}

.all-vault {
  position: absolute;
  left: 22rem;
  top: 0.2rem;
  z-index: 100;
  font-family: Windows;
  font-size: 10px;
  width: 1.75rem;
  cursor: pointer;
  border: 1px solid black;
}

.all-active {
  background-color: black;
  color: white;
}

.moveUp {
}
.moveRight {
  transform: translateX(1rem);
}
.moveBottom {
}
.moveLeft {
}