@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,300&display=swap");

body {
    background: none;
    font-family: "Roboto", "Lato";
    user-select: none;
  }
  
    /* 4k and up */
    @media screen and (min-width: 2561px) {
      body {
        font-size: 160%;
      }
    }
  
    /* 2k  */
    @media screen and (min-width: 1921px) {
          body {
        font-size: 160%;
      }
    }
  
    /* 1080 */
    @media screen and (max-width: 1920px) {
          body {
        font-size: 120%;
      }
    }
  
  
  #container {
    height: 100%;
    width: 100%;
  }
  
  #tablet-container {
    position: absolute;
    height: 80%;
    width: 80%;
    max-width: 3840px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background: black;
    border: 0.5vw solid black;
    border-radius: 4px;
  }
  
  #wallpaper {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
  }
  
  #taskbar {
    position: absolute;
    height: 5%;
    width: 100%;
    border: none;
    bottom: 0;
    overflow: hidden;
    z-index: 2;
    background: rgba(80, 80, 80, 0.2);
    backdrop-filter: blur(10px);
  }
  

  
  #time-container {
    background: none;
    height: 100%;
    width: 3%;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
  }
  
  #time {
    margin-right: 0;
    color: white;
    text-align: center;
    z-index: 20;
  }
  
  #wifi-container {
    background: none;
    height: 100%;
    width: 3%;
    position: absolute;
    bottom: 0;
    right: 5.5%;
    margin-right: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #wifi {
    position: absolute;
    margin-right: 0;
    color: white;
  }

  #settings {
    background: none;
    height: 100%;
    width: 3%;
    position: absolute;
    bottom: 0;
    right: 3%;
    margin-right: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #settings-icon {
    position: absolute;
    margin-right: 0;
    color: white;
  }

  #settings-window {
    position: absolute;
    height: 30%;
    width: 15%;
    background: none;
    bottom: 6%;
    right: 0;
    border-radius: 10px;
    background: rgba(80, 80, 80, 0.2);
    border: 1px solid #6D6D6D;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  #theme-color {
    position: absolute;
    bottom:0;
    left: 0;
    opacity: 0;
    height: 1%;
    width: 1%;
  }
  
  #theme-color-front {
    width: 20%;
    height: 18%;
    border-radius: 50%;
    background: #fefefe;
    margin-top: 5%;
    display: inline-block;
  }

  #background-link {
    width: 90%;
    background: none;
    border: none;
    outline: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
  }

  #background-link::placeholder {
    font-family: 'Orbitron', sans-serif;
    text-shadow: 2px 2px rgb(38, 50, 56);
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
  }

  #submit-background {
    background: none;
    outline: none;
    border: 1px solid #6D6D6D;
    color: white;
    margin-top: 5%;
    width: 30%;
    height: 10%;
    border-radius: 10px;
    font-size: 85%;
  }
  
  .apps-container {
    height: 93%;
    width: 100%;
    z-index: 6;
    font-size: 80%;
  }

  .app {
    position: relative;
    height: 10%;
    width: 5%;
    margin-left: 1%;
    margin-top: 1%;
  }

  .app-icon {
    position: absolute;
    height: 120%;
    width: 112.5%;
    top: 50%;
    left: 50%;
    transform: translateY(-70%) translateX(-50%);
  }

  #incog-icon {
    position: absolute;
    width: 72.5%;
    top: 50%;
    left: 50%;
    transform: translateY(-70%) translateX(-50%);
  }

  .app-text {
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    text-shadow: 2px 2px rgb(38, 50, 56);
    font-family: 'Orbitron', sans-serif;
  }

  .window {
    border-radius: 8px;
  }
  
  #game-window {
    position: absolute;
    background: rgba(29, 30, 34, 1.0);
    height: 80%;
    width: 80%;
    top: 15%;
    left: 15%;
  }
  
  
  .ifrm {
    position: absolute;
    background: rgba(50, 50, 50, 0);
    height: 93%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateY(-49%) translateX(-50%);
    border: none;
  
  }
  
  #ifrm-overly {
    position: absolute;
    background: none;
    height: 93%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateY(-49%) translateX(-50%);
    border: none;
    z-index: 1000;
  }
  
  #drawing-window {
    position: absolute;
    background: rgba(29, 30, 34, 1.0);
    height: 80%;
    width: 80%;
    top: 15%;
    left: 15%;
  }
  
  #drawing-overly {
    position: absolute;
    background: none;
    height: 93%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateY(-49%) translateX(-50%);
    border: none;
    z-index: 1000;
  }

  #inCog-window {
    position: absolute;
    background: rgba(29, 30, 34, 1);
    background: url("imgs/crewWallPaper.png");
    background-size: cover;
    height: 80%;
    width: 80%;
    top: 13%;
    left: 13%;
  }

  #squads-container {
    color: white;
    height: 90%;
    width: 96%;
    bottom: 0;
    right: 50%;
    transform: translateY(0) translateX(50%);
    position: absolute;
    background: none;
    overflow-x: hidden;
}

#whispers-container {
  color: white;
  height: 90%;
  width: 96%;
  bottom: 0;
  right: 50%;
  transform: translateY(0) translateX(50%);
  position: absolute;
  background: none;
  overflow-x: hidden;
}

#home-container {
  color: white;
  height: 90%;
  width: 96%;
  bottom: 0;
  right: 50%;
  transform: translateY(0) translateX(50%);
  position: absolute;
  background: none;
  overflow-x: hidden;
}


#squads-decor {
  position: absolute;
  height: 10%;
  width: 98%;
  background: none;
  border: none;
  top: 3.1%;
  left: 50%;
  transform: translateY(-0%) translateX(-50%);
}

#home-incog-decor {
  position: absolute;
  height: 90%;
  width: 30%;
  background: none;
  border: none;
  top: 10%;
  left: 10%;
}

#squads-incog-icon {
  width: 5%;
  top: 50%;
  left: 50%;
  transform: translateY(1%) translateX(2%);
}

#squads-crew-icon {
  position: absolute;
  width: 14%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

#whispers-whisper-icon {
  position: absolute;
  width: 25%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background: none;
}

#boosting-boosts-icon {
  position: absolute;
  width: 25%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background: none;
}

#squads-style-line {
  position: absolute;
  min-height: 1px;
  height: 0.1%;
  width: 100%;
  background: #5AE25A;
  bottom: 1%;
  left: 50%;
  transform: translateY(-0%) translateX(-50%);
}

#title {
    font-family: 'Orbitron', sans-serif;
    text-shadow: 2px 2px rgb(38, 50, 56);
    color: rgb(255, 255, 255);
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    margin-top: -10px;
    text-align: center;
    font-size: 120%;
}

#channels-title {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 2px 2px rgb(38, 50, 56);
  color: rgb(255, 255, 255);
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateY(-90%) translateX(-50%);
  width: 75%;
  margin-top: -10px;
  text-align: center;
  font-size: 120%;
  background: none;
}

#active-title {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 2px 2px rgb(38, 50, 56);
  color: rgb(255, 255, 255);
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  margin-top: -10px;
  text-align: center;
  font-size: 120%;
}

#home-alias {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 2px 2px rgb(38, 50, 56);
  color: rgb(255, 255, 255);
  position: absolute;
  top: 10%;
  left: 17%;
  width: 100%;
  margin-top: -10px;
  text-align: center;
  font-size: 120%;
}

.channel-button {
  margin-top: 9%;
}
.channel-button:hover{
  color:#66FF66;
}

.modals-button {
  margin-top: 9%;
}
.modals-button:hover{
  color:#66FF66;
}

#channel-button-5 {
  color:#66FF66;
}

.modal-blackout {
  position: absolute;
  bottom:0;
  height: 97%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 90;
  display: none;
}

.button1{
    background-color:rgb(37, 40, 46);
    display:inline-block;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:rgb(255, 255, 255);
    text-shadow: 1px 1px rgb(38, 50, 56);
    text-align:center;
    transition: all 0.2s;
    border-radius: 16px;
    }
    .button1:hover{
    background-color:rgba(90, 226, 90, 0.4);
    }
    @media all and (max-width:30em){
     .button1{
    display: block;
    margin: 0.4em auto;
     };
    }

#squads-create {
  position: absolute;
  top: 29%;
  left: 9%;
  height: 7%;
  width: 6.8%;
  font-size: small;
  border: 1px solid rgba(102, 255, 102, 1);
}

#squads-invite {
  position: absolute;
  top: 29%;
  left: 25%;
  height: 7%;
  width: 6.8%;
  font-size: small;
  border: 1px solid rgba(102, 255, 102, 1);
}

#squads-leave {
    position: absolute;
    top: 93%;
    left: 50%;
    border: 1px solid #FFD166;
    transform: translateY(-50%) translateX(-50%);
    height: 10%;
    width: 20%;
    font-size: small;
}

#squads {
  font-family: 'Orbitron', sans-serif;
  background: #25282EE6 0% 0% no-repeat padding-box;
  position: absolute;
  height: 68.7%;
  width: 34.3%;
  top: 18%;
  left: 50%;
  border-radius: 20px;
  border: 1px solid #6D6D6D;
  display: flex;
  align-items: center;
  flex-direction: column;
  opacity: 1;
}

#chat-box {
  font-family: 'Orbitron', sans-serif;
  background: #25282EE6 0% 0% no-repeat padding-box;
  position: absolute;
  height: 68.7%;
  width: 60%;
  top: 18%;
  left: 39%;
  border-radius: 20px;
  border: 1px solid #6D6D6D;
  opacity: 1;
  overflow: hidden;
}

#messages-container {
  font-family: 'Orbitron', sans-serif;
  position: absolute;
  height: 90%;
  width: 100%;
  top: 0%;
  left: 0%;
  display: flex;
  align-items: left;
  flex-direction: column-reverse;
  overflow-y: auto;
  opacity: 1;
}

/* width */
#messages-container::-webkit-scrollbar {
  width: 5px;
}

/* Track */
#messages-container::-webkit-scrollbar-track {
  border-radius: 10px;
}
 
/* Handle */
#messages-container::-webkit-scrollbar-thumb {
  background: rgba(102, 255, 102, 1); 
  border-radius: 10px;
}

#messages-container::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 20px;
}

#message-input-container {
  font-family: 'Orbitron', sans-serif;
  background: none;
  position: absolute;
  height: 10%;
  width: 100%;
  bottom: 0%;
  right: 0%;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: left;
  flex-shrink: 0;
}

#chat-input-text {
  position: relative;
  background: none;
  height: 50%;
  width: fit-content;
  font-size: 80%;
  margin-left: 1%;
}

#chat-input {
  position: relative;
  background: none;
  border: 1px solid #66FF66;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  color: #ECECEC;
  text-align: left;
  height: 60%;
  width: 100%;
  font-size: 60%;
  margin-right: 1%;
}

.chat-message {
  font-size: 70%;
  color: #ECECEC;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 0%;
  opacity: 1;
  overflow: hidden;
  flex-shrink: 0;
}

#channels-box {
  font-family: 'Orbitron', sans-serif;
  background: #25282EE6 0% 0% no-repeat padding-box;
  position: absolute;
  height: 40%;
  width: 18%;
  top: 46.6%;
  left: 18%;
  border-radius: 20px;
  border: 1px solid #6D6D6D;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #6D6D6D;
  opacity: 1;
}

#modals-box {
  font-family: 'Orbitron', sans-serif;
  background: #25282EE6 0% 0% no-repeat padding-box;
  position: absolute;
  height: 55%;
  width: 18%;
  top: 35%;
  left: 58%;
  border-radius: 20px;
  border: 1px solid #6D6D6D;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #6D6D6D;
  opacity: 1;
}

.squad-member {
  font-family: 'Orbitron', sans-serif;
  font-size: 95%;
  text-shadow: 2px 2px rgb(38 50 56);
  color: rgb(255, 255, 255);
  position: relative;
  margin: 0%;
  text-align: left;
}

.squad-member-Container {
  width: 100%;
  margin: 5%;
}

.squad-rep {
  font-family: 'Orbitron', sans-serif;
  font-size: 75%;
  text-shadow: 2px 2px rgb(38 50 56);
  color: rgb(255, 255, 255);
  position: relative;
  margin: 0%;
  text-align: left;
}

#squads-leader-icon {
  position: absolute;
  width: 11%;
  top: 7%;
  left: 1%;
}

#squad1-rep {
  transform: translateY(0%) translateX(14%);
}

#squad1 {
  transform: translateY(0%) translateX(14%);
}

#squad2-rep {
  transform: translateY(0%) translateX(4%);
}

#squad2 {
  transform: translateY(0%) translateX(4%);
}

#squad3-rep {
  transform: translateY(0%) translateX(4%);
}

#squad3 {
  transform: translateY(0%) translateX(4%);
}

#squad4-rep {
  transform: translateY(0%) translateX(4%);
}

#squad4 {
  transform: translateY(0%) translateX(4%);
}

#squads-input {
    position: absolute;
    top: 18.5%;
    left: 0.5%;
    color: rgb(255, 255, 255);
    background-color: rgb(37, 40, 46);
    width: 40%;
    font-size: 15px;
    padding: 12px;
    border-radius: 8px;
    outline: none;
    border: 1px solid rgba(109, 109, 109, 1);
    text-align: center;
}

#squads-input::placeholder {
    font-family: 'Orbitron', sans-serif;
    text-shadow: 2px 2px rgb(38, 50, 56);
    color: rgb(255, 255, 255);
    font-size: 15px;
  }
  
  
  
  #boosting-window {
    position: absolute;
    background: rgba(29, 30, 34, 1.0);
    height: 80%;
    width: 80%;
    top: 13%;
    left: 13%;
  }
  
  
  .confirm-container {
    position: absolute;
    background: rgb(37, 40, 46);
    height: 30%;
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.9);
    z-index: 91;
    font-size: 80%;
    background: #25282EE6 0% 0% no-repeat padding-box;
    border-radius: 20px;
    border: 1px solid #6D6D6D;
    opacity: 1;
  }
  
  .confirm-header {
    text-align: center;
    color: white;
  }
  
  .confirm-body {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
  }
  
  #vin-scratch {
    position: absolute;
    background: #25282E 0% 0% no-repeat padding-box;
    height: 20%;
    width: 30%;
    bottom: 8%;
    left: 15%;
    font-size: 65%;
    text-align: center;
    color: white;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.9);
    border: 1px solid #66FF66;
    border-radius: 16px;
    opacity: 1;
  }
  
  #vin-scratch-text {
    position: absolute;
    background: none;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
  }
  
  #drop-off {
    position: absolute;
    height: 20%;
    width: 30%;
    bottom: 8%;
    right: 15%;
    font-size: 65%;
    text-align: center;
    color: white;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.9);
    background: #25282E 0% 0% no-repeat padding-box;
    border: 1px solid #66FF66;
    border-radius: 16px;
    opacity: 1;
  }
  
  #drop-off-text {
    position: absolute;
    background: none;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
  }
  
  
  .confirm-close {
    position: absolute;
    background: transparent;
    border: none;
    top: 0;
    right: 0%;
    height: 7%;
    width: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2%;
    margin-top: 2%;
  }
  
  .confirm-close-text {
    position: absolute;
    color: white;
    background: none;
    border: none;
    top: 50%;
    left: 50%;
    transform: translateY(-140%) translateX(-50%);
    user-select: none;
  }
  
  .transfer-container {
    position: absolute;
    background: rgb(37, 40, 46);
    height: 30%;
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.9);
    z-index: 91;
    font-size: 80%;
    background: #25282EE6 0% 0% no-repeat padding-box;
    border-radius: 20px;
    border: 1px solid #6D6D6D;
    opacity: 1;
  }
  
  .transfer-header {
    text-align: center;
    color: white;
  }
  
  .transfer-body {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
  }
  
  #transfer-input {
    position: absolute;
    width: 20%;
    height: 20%;
    top: 55%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    outline: none;
    border: solid 1px #6D6D6D;
    border-radius: 10px;
    background: rgba(29, 30, 34, 1.0);
    color: white;
    text-align: center;
    font-size: 65%;
  }
  
  .transfer-close {
    position: absolute;
    background: transparent;
    border: none;
    top: 0;
    right: 0%;
    height: 7%;
    width: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2%;
    margin-top: 2%;
  }
  
  .transfer-close-text {
    position: absolute;
    color: white;
    background: none;
    border: none;
    top: 50%;
    left: 50%;
    transform: translateY(-140%) translateX(-50%);
    user-select: none;
  }
  
  #transfer-send {
    position: relative;
    height: 15%;
    width: 20%;
    border-radius: 4px;
    top: 30%;
    left: 40%;
    font-size: 65%;
    text-align: center;
    color: white;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.9);
    background: #25282E 0% 0% no-repeat padding-box;
    border: 1px solid #66FF66;
    border-radius: 16px;
    opacity: 1;
  }
  
  #transfer-send-text {
    position: absolute;
    background: none;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
  }

  .delete-container {
    position: absolute;
    background: rgb(37, 40, 46);
    height: 30%;
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.9);
    z-index: 91;
    font-size: 80%;
    background: #25282EE6 0% 0% no-repeat padding-box;
    border-radius: 20px;
    border: 1px solid #6D6D6D;
    opacity: 1;
  }
  
  .delete-header {
    text-align: center;
    color: white;
  }
  
  .delete-body {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
  }
  
  #delete-button {
    position: absolute;
    background: #25282E 0% 0% no-repeat padding-box;
    height: 20%;
    width: 20%;
    top: 65%;
    left: 40%;
    font-size: 85%;
    text-align: center;
    color: white;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.9);
    border: 1px solid #66FF66;
    border-radius: 16px;
    opacity: 1;
  }
  
  #delete-button-text {
    position: absolute;
    background: none;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
  }
  
  .delete-close {
    position: absolute;
    background: transparent;
    border: none;
    top: 0;
    right: 0%;
    height: 7%;
    width: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2%;
    margin-top: 2%;
  }
  
  .delete-close-text {
    position: absolute;
    color: white;
    background: none;
    border: none;
    top: 50%;
    left: 50%;
    transform: translateY(-140%) translateX(-50%);
    user-select: none;
  }
  
  .login-container {
    position: absolute;
    height: 30%;
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translateY(-150%) translateX(-50%);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.9);
    z-index: 91;
    font-size: 80%;
    background: #25282EE6 0% 0% no-repeat padding-box;
    border-radius: 20px;
    border: 1px solid #6D6D6D;
    opacity: 1;
  }
  
  .login-header {
    text-align: center;
    color: #5AE25A;
  }
  
  .login-body {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
  }

  .login-error {
    text-align: center;
    color: rgba(206, 78, 78, 0.7);
  }
  
  .login-input {
    position: absolute;
    width: 25%;
    top: 70%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    outline: none;
    border: none;
    border-bottom: solid 1px #5AE25A;
    background: none;
    color: white;
    text-align: center;
  }
  
  .login-submit {
    position: absolute;
    background: rgba(29, 30, 34, 1.0);
    height: 15%;
    width: 20%;
    border-radius: 4px;
    bottom: 5%;
    left: 40%;
    font-size: 65%;
    text-align: center;
    color: white;
  }
  
  .login-send-text {
    position: absolute;
    background: none;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
  }
  
  .topbar {
    position: absolute;
    background: rgb(37, 40, 46);
    border: none;
    top: 0;
    right: 0%;
    height: 3%;
    width: 100%;
    border-radius: 8px 8px 0px 0px;
  }
  
  .topbar-text {
    font-size: 80%;
    position: absolute;
    width: 0;
    color: white;
    bottom: 1%;
    left: 0.5%;
    background: none;
  }
  
  .window-close {
    position: absolute;
    background: transparent;
    border: none;
    top: 0;
    right: 0%;
    height: 3%;
    width: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .window-close-text {
    position: absolute;
    color: white;
    background: none;
    border: none;
    top: 50%;
    left: 50%;
    transform: translateY(-140%) translateX(-50%);
    user-select: none;
  }
  
  .queue {
    position: absolute;
    height: 5%;
    width: 8%;
    top: 5%;
    left: 91%;
    font-size: 65%;
    text-align: center;
    color: white;
    background: #25282E 0% 0% no-repeat padding-box;
    border: 1px solid #66FF66;
    border-radius: 16px;
    opacity: 1;
  }
  
  #queue-text {
    position: absolute;
    background: none;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
  }
  
  .contracts-container {
    position: absolute;
    background: none;
    height: 80%;
    width: 96%;
    bottom: 0;
    right: 50%;
    transform: translateY(0) translateX(50%);
    border: none;
    display: flex;
    flex-shrink: 0;
    overflow-x: auto;
  }
  
  .contracts-container::-webkit-scrollbar {
    width: 12px;
    background-color: none;
  }
  
  .contracts-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgb(37, 40, 46);
  }
  
  .contracts-container::-webkit-scrollbar-track {
    display: none;
  }
  
  .contract-text {
    position: relative;
    font-size: 100%;
    margin-left: 1%;
    margin-top: 3%;
    top: 5%;
    text-align: center;
  }
  
  .contract {
    position: relative;
    height: 75%;
    min-width: 20%;
    background: #25282EE6 0% 0% no-repeat padding-box;
    border-radius: 20px;
    border: 1px solid #6D6D6D;
    opacity: 1;
    top: 0%;
    margin-right: 2%;
  }
  
  .contract-button-container {
    position: relative;
    background: none;
    height: 35%;
    width: 85%;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translateY(-90%) translateX(-50%);
    font-size: 65%;
    text-align: center;
    color: white;
  }
  
  .contract-button {
    position: relative;
    height: 25%;
    width: 100%;
    margin-top: 3%;
    background: rgba(29, 30, 34, 1.0);
    color: rgba(255, 255, 255, 0.5);
    flex-grow: 0;
    flex-shrink: 0;
  }
  
  .contract-button-text {
    position: absolute;
    background: none;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    white-space: nowrap;
  }
  
  
  #boosting-overly {
    position: absolute;
    background: none;
    height: 93%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateY(-49%) translateX(-50%);
    border: none;
    z-index: 1000;
  }
  
  .window-maximize {
    position: absolute;
    background: none;
    border: none;
    top: 0;
    right: 3%;
    height: 3%;
    width: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .window-maximize-icon {
    position: absolute;
    background: none;
    border: 0.1em solid white;
    height: 30%;
    width: 30%;
    top: 50%;
    left: 50%;
    transform: translateY(-49%) translateX(-50%);
    user-select: none;
  }
  
  .queue:hover {
    transform: scale(1.02);
  }
  
  .contract-button:hover {
    transform: scale(1.02);
    color: #5AE25A;
  }
  
  
  .window-maximize:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  #drop-off:hover {
    transform: scale(1.02);
  }
  
  #vin-scratch:hover {
    transform: scale(1.02);
  }

  #delete-button:hover {
    transform: scale(1.02);
  }

  #submit-background:hover {
    transform: scale(1.02);
  }
  
  .confirm-close:hover {
    background: darkred;
  }

  .delete-close:hover {
    background: darkred;
  }
  
  .transfer-close:hover {
    background: darkred;
  }
  
  #transfer-send:hover {
    transform: scale(1.04);
  }
  
  .window-close:hover {
    background: darkred;
  }
  
  #login-submit:hover {
    transform: scale(1.02);
  }