red-valley/resources/[framework]/[base]/[jobs]/mBossmenu/html/index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

body {
  width: 100vw;
  height: 100vh;
  user-select: none;
}

@font-face {
  font-family: "SF Pro Rounded";
  src: url(./assets/fonts/SF-Pro-Rounded-Regular.otf);
}

#app {
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 80.9375rem;
  height: 48.625rem;
  border-radius: 1.25rem 0rem 0rem 0rem;
  background: rgba(9, 18, 29, 0.76);
  border-radius: 1.6544rem;
  box-shadow: 0rem 0.3309rem 0.3309rem 0rem rgba(0, 0, 0, 0.25);
}

.container.admin {
  background: rgba(30, 9, 10, 0.76);
  background: color(display-p3 0.1083 0.0411 0.0411 / 0.76);
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header {
  display: flex;
  justify-content: center;
  padding: 0rem 1.75rem;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

.header h1 {
  color: rgba(255, 255, 255, 0.69);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.8272rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  flex: 1;
}

.header p {
  flex: 1;
  color: rgba(255, 255, 255, 0.69);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 0.8272rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.header span {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.header div {
  width: 1.228rem;
  height: 1.2279rem;
  border-radius: 50%;
  background-color: #ff2d2d;
  font-family: SF Pro Rounded;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8897rem;
  font-style: normal;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.header div:hover {
  opacity: 0.9;
}

.seperator {
  width: 100%;
  height: 0.0625rem;
  background: rgba(217, 217, 217, 0.06);
}

.main {
  display: flex;
  column-gap: 0.75rem;
  flex: 1;
}

.nav {
  display: flex;
  flex-direction: column;
  padding: 0 0.25rem;
  padding-left: 1rem;
  padding-top: 2.5em;
  row-gap: 2.5rem;
}

.nav-item {
  width: 3.75rem;
  height: 3.75rem;
  background-color: rgba(0, 0, 0, 0.278);
  border-radius: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.0625rem solid rgba(0, 0, 0, 0.278);
}



.nav-item:hover {
  opacity: 0.9;
}

.nav-item.active {
  background-color: #548de8;
  filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #548de8);
  position: relative;
  border: 0.0625rem solid #548de85e;
}



.admin .nav-item.active {
  background-color: #E85454;
  filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #E85454);
  position: relative;
  border: 0.0625rem solid #e8545453;
}

.nav-item.active.red {
  background-color: #FB444D;
  filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #FB444D);
  position: relative;
  border: 0.0625rem solid #FB444D53;
}

.nav-item.active.yellow {
  background-color: #F68D45;
  filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #F68D45);
  position: relative;
  border: 0.0625rem solid #F68D4553;
}

.nav-item.active.purple {
  background-color: #9F50F0;
  filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #9F50F0);
  position: relative;
  border: 0.0625rem solid #9F50F053;
}

.nav-item.active.black {
  background-color: #000;
  filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #000);
  position: relative;
  border: 0.0625rem solid #00000053;
}

.nav-item.active.green {
  
  background-color: #026E00;
  filter: drop-shadow(0.0313rem 0.0313rem 0.25rem #026E00);
  position: relative;
  border: 0.0625rem solid #026E0053;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  bottom: -1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.25rem;
  height: 0.25rem;
  border-radius: 0.6875rem;
  background: #74b4ff;
}

.nav-item.active.red::before {
  background-color: #FB444D;

}

.nav-item.active.yellow::before {
  background-color: #F68D45;

}

.nav-item.active.purple::before {
  background-color: #9F50F0;
}
.nav-item.active.green::before {
  background-color: #026E00;
}

.nav-item.active.black::before {
  background-color: #000;
}

.admin .nav-item.active::before {

  background: #E85454;
}



.hidden-overlay {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.black-overlay {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
}

.actions-page {
  flex: 1;
  height: 100%;
  border-radius: 1.25rem 0rem 0rem 0rem;
  background: rgba(9, 18, 29, 0.3);
  position: relative;
  overflow: hidden;
}

.admin .actions-page {
  background: rgba(30, 9, 10, 0.76);

}

.job-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.3;
}

.container-overlay {
  position: absolute;
  border-radius: 1.25rem 0rem 0rem 0rem;

  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  border-radius: 0.7445rem;
  border: 0.1654rem solid rgba(0, 0, 0, 0.2);
  background: #429dff;
  width: 11rem;
  height: 3.0625rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
  color: color(display-p3 1 1 1);
  leading-trim: both;
  text-edge: cap;
  font-family: SF Pro Rounded;
  font-size: 1.0754rem;
  font-style: normal;
  font-weight: 600;
  line-height: 50%;
}

.header-button.red {
  background: #FB444D;
}

.header-button.black {
  background: #000;
}


.header-button.green {
  background: #026E00;

}

.header-button.purple {
  background: #9F50F0;
}

.header-button.yellow {
  background: #F68D45;
}

.admin .header-button {

  background: #FF4953;
}




.header-button:hover {
  opacity: 0.9;
}

#app .notification-container {
  width: 100%;
  height: 2rem;
  position: absolute;
  z-index: 11;
  left: 50%;
  transform: translateX(-50%);
  top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app .notification-container div {
  max-width: 17.5rem;
  min-width: 10rem;
  min-height: 3rem;
  background: #429dff;
  border-radius: 0.875rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: SF Pro Rounded;
  padding: 1rem;
  font-style: normal;
  font-size: 1rem;
  line-height: 0.9375rem;
  leading-trim: both;
  text-edge: cap;
  letter-spacing: 0.03em;
  color: #ffffff;
}

#app .notification-container div.red {
  background-color: #FB444D;

}

#app .notification-container div.yellow {
  background-color: #F68D45;

}

#app .notification-container div.purple {
  background-color: #9F50F0;

}
#app .notification-container div.green {
  background-color: #026E00;

}

#app .notification-container div.black {
  background-color: #000;

}


.notify-icon {
  position: absolute;
  right: 0;
  top: 0;
}

#app .admin .notification-container div {
  background: rgba(30, 9, 10, 1);
}

#app .notification-container .fade {
  animation: fade 0.5s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}