html {
  background-image: radial-gradient(circle 100vh at 50% 50%, rgba(9, 29, 85, 1) 0.2%, rgba(0, 0, 0, 1) 100.2%);
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  /* animation-name: backgroundShiftBR; */
  color: white;
  background-size: 200% 200%;
  text-wrap: nowrap;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  overflow: hidden;

}

* {
  /* outline: blue 3px solid; */

}

body {
  padding: 0px;
  overflow: hidden;
  position: absolute;
  z-index: -2;
  margin: 0px;
  height: 100%;
  width: 100%;
}


h1 {
  font-size: 10.1vmin;

  text-align: center;
  /* font-weight: 400; */
  font-style: normal;
  margin: 0px;
  padding: 0px
}

h2 {
  font-size: 5vmin;

  /* font-weight: 400; */
  font-style: normal;
  margin: 0px;
  padding: 0px
}


p {
  margin: 0px;
  padding: 0px;
  text-align: center;

}

.app {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;

}


.slider {
  width: 20vmin;
  appearance: none;
  /* outline: 3px blue solid; */
  height: 7vmin;
  margin: 0px;
  opacity: 0%;
  /* pointer-events: none; */
}

.switcher {
  background-color: #000000;
  transition: background-color 200ms ease-out;
  overflow: hidden;
  height: 7vmin;
  clip-path: xywh(-0.65vmin -0.65vmin 115% 120% round 10vmin);

  pointer-events: none;
  width: 20vmin;
  padding: 0px;
  margin: 0px;
  outline: white 0.65vmin solid;
  border-radius: 10vmin;
}

.innerSwitcher {
  /* background-color: black; */
  overflow: hidden;
  height: 7vmin;
  clip-path: xywh(-0.65vmin -0.65vmin 115% 120% round 10vmin);

  pointer-events: all;
  width: 20vmin;
  padding: 0px;
  margin: 0px;
  outline: rgb(255, 255, 255) 0.65vmin solid;
  border-radius: 10vmin;
}

.waterElemSwitch {
  height: max(16vmin);
  width: max(16vmin);
  /* outline: black 3px solid; */
  background-color: #064273;
  border-radius: 100%;
  position: relative;
  /* left: 50%; */
  /* top: 0px; */
  margin-bottom: -16vmin;
  pointer-events: none;
  transform: translate(-50%, 0%);
  transition: margin-top 0.8s ease-in;
  animation: 2s ease-in-out infinite;
  /* margin-top:7vmin; */

}

.waterElemUp {
  margin-top: -3vmin
}

/*///////////////// first time setup ///////////////////////////*/

.fts {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  display: none;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

}

.flex {
  display: flex;
}

.ftsButton {
  font-size: 4vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0px;
  background-color: #064273;
  width: 30vh;
  height: 30vh;
  border-radius: 2vh;
}

.follower {
  /* outline: white 5px solid; */
  width: 1vw;
  height: 1vw;
  border-radius: 100%;
  position: relative;

  top: -20%;
  left: 50%;
}

#flw1 {
  /* animation: toLeftWave; */
  /* animation-timing-function: ease;
  animation-duration: 3.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; */
  transition: left 3.5s ease;
}

#flw2 {
  /* animation: toRightWave; */
  /* animation-timing-function: ease;
  animation-duration: 3.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; */
  transition: left 3.5s ease;
}


.toLeftWave {
  left: 0%
}

.toRightWave {
  left: 100%
}




.bubble {
  width: 5vh;
  height: 5vh;
  border-radius: 100%;
  outline: .5vh white solid;
  position: absolute;
  top: 100%;
  z-index: 9;
  transform: translate(-50%, 0%);
  animation: 1s linear 1;

  background-color: #06427300;
  pointer-events: none;
  animation-name: bubbles;
  opacity: 50%;
  pointer-events: none;
}


.water {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100dvh;
  padding: 0px;
  top: 100%;
  left: 0%;
  margin: 0px;
  /* pointer-events: none; */
  background-color: #064273;
  transition: top 3s ease-in;
  /* animation: rising; */
  /* animation-timing-function: ease-in;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; */


}

.rising {
  top: 0%;
}

.waterElem {
  height: max(30vh);
  width: max(30vh);
  /* outline: black 3px solid; */
  background-color: #064273;
  border-radius: 100%;
  position: absolute;
  padding: 0px;
  margin: 0px;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0%);
  animation: 2s ease-in-out infinite;
  clip-path: xywh(0% 0% 100% 50%);
  animation-name: waves;
}

.waterFaller {
  height: 30vh;
  width: 30vh;
  /* outline: black 3px solid; */
  background-color: #064273;
  border-radius: 100%;
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 0%;
  animation: 1s ease-in 1;
  animation-name: faller;
  animation-fill-mode: forwards;
}

@media (max-aspect-ratio:25/38) {
  h1 {
    font-size: 15vmin;

  }
}

@media (orientation: landscape) {
  .waterElem {
    height: max(30vw);
    width: max(30vw);

  }

  html {
    background-image: radial-gradient(circle 100vw at 50% 50%, rgba(9, 29, 85, 1) 0.2%, rgba(0, 0, 0, 1) 100.2%);

  }
}

@keyframes backgroundShiftBR {
  0% {
    background-position: 200% 200%;
  }

  100% {
    background-position: 0% 0%
  }
}

@keyframes faller {
  from {
    transform: translate(-50%, 0%);
    height: 30vh;
    width: 30vh;
  }

  to {
    transform: translate(-50%, 300%);
    height: 60vh;
    width: 60vh;
  }
}


@keyframes waves {
  0% {
    transform: translate(-50%, 0%);
  }

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

@keyframes wavesNew {
  0% {
    transform: translate(-50%, 0%);
  }

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


/* @keyframes rising {
  0% {
    top: 100%
  }

  100% {
    top: 0%
  }
}
 */

/*/////////////////////////////// team and name input /////////////////////////////////*/

.teamNumberInputH1 {
  position: absolute;
  z-index: 2;
  color: #064273;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 20vh;
  animation: 2s ease-out 1 forwards;
  /* animation-name:teamH1Color; */
}


.teamInput {
  width: min(30vh, 70%);

  height: 9vh;
  font-size: 10vh;
  padding: auto;
  text-align: center;
  position: absolute;


  z-index: 5;
  left: 0;
  background-color: #064273FF;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 35vh;
  border: 1vh #064273;
  border-style: solid;
  border-radius: 30em;
  animation: 2s ease-out 1 forwards;
  /* animation-name: inputShift; */
}


.nameInputH1 {
  position: absolute;
  color: #06427300;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;

  margin-top: 48vh;
  animation: 2s ease-out 1 forwards;
  /* animation-name:teamH1Color; */
}

.nameInput {
  width: min(40vh, 90%);
  z-index: 5;
  background-color: rgba(6, 66, 115, 0);


  height: 9vh;
  font-size: 10vh;
  padding: auto;
  text-align: center;
  position: absolute;
  color: #064273;

  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 62vh;
  border: 1vh #064273;
  border-style: solid;
  border-radius: 30em;
  animation: 2s ease-out 1 forwards;
  /* animation-name: inputShift; */
}


.submit {
  position: absolute;
  color: #064273;
  background-color: #064273;
  left: 0;
  top: 0;
  right: 0;
  z-index: 5;
  bottom: 0;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  outline: .5vh #064273 solid;
  border-radius: 1vh;
  margin: auto;
  margin-top: 77vh;
  font-size: 5vh;
  width: 20vh;
  height: 6vh;
  appearance: none;
  border: none;
  animation: 2s ease-out 1 forwards;
  /* animation-name:submitFade; */
}

.cover {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  /* pointer-events: none; */
  background-color: #06427300;
  /* animation: cover; */
  animation-timing-function: ease-in;
  pointer-events: none;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}

@keyframes submitFade {
  0% {
    color: #064273;
    background-color: #064273;
    outline: .5vh #064273 solid;
  }

  50% {
    color: #064273;
    background-color: #064273;
    outline: .5vh #064273 solid;

  }

  100% {
    color: white;
    outline-color: white;
    background-color: #4f42b5;
  }
}


@keyframes teamH1Color {
  0% {
    color: #064273
  }

  50% {
    color: #064273
  }

  100% {
    color: white
  }
}


@keyframes inputShift {
  0% {
    border-color: #064273FF;
    color: #064273;
    background-color: #064273;

  }

  50% {
    border-color: #064273FF;
    color: #064273;
    background-color: #064273;
  }


  100% {
    background-color: #4f42b5AA;
    border-color: white;
    color: white;
  }
}


@keyframes bubbles {
  0% {
    transform: translate(-50%, 0%);
  }

  100% {
    transform: translate(-50%, -2200%);
  }
}

@keyframes cover {
  0% {
    background-color: #06427300;
    z-index: 0;

  }

  1% {
    background-color: #06427300;

    z-index: 6;
  }

  100% {
    background-color: #064273;

    z-index: 6;

  }
}


/*/////////////////////////////// NAV /////////////////////////////////*/

.nav {
  position: absolute;
  background-color: rgb(12, 12, 12);
  width: 100%;
  padding: 0px;
  height: 7dvh;
  display: flex;
  z-index: 3;
  flex-direction: row;
  align-items: center;
}

.navH1 {
  margin: 0px;
  font-weight: 900;
  height: 7dvh;
  line-height: 7dvh;
  font-size: 5.5dvh;
  text-align: start;
  user-select: none;
  touch-action: none;

}

.quickScout {
  display: none;
  height: 6dvh;
  line-height: 6dvh;
  appearance: none;
  border: none;
  outline: black 0.4vh solid;
  border-radius: 1vh;
  font-weight: bold;
  background-color: rgba(9, 29, 85, 1);
  font-size: 5.5dvh;
}

.hamburger {
  width: 5dvh;
  height: 5dvh;
  margin: 1dvh;
  touch-action: none;
}

/* ///////////////////////BLMANAGER/////////////////////////// */

.phoneIco {
  height: 5dvh;
  width: 3dvh;
  margin: 1dvh;
  margin-left: auto;
  touch-action: none;
}

.deviceIco {
  height: 5dvh;
  width: 3dvh;


}

.circleTrans {
  /* display: none; */
  background-color: #064273;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  width: 100dvw;
  height: 100dvh;
  clip-path: circle(0% at 100% 0%);
  transition: clip-path 750ms ease-in-out;
  /* outline: solid 19px red;  */
}

.blManagerDiv {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100dvw;
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  justify-content: space-evenly;

}

.deviceList {
  display: block;
  /* outline: 2px white solid; */
  scrollbar-width: none;
  flex-direction: column;
  width: 90vmin;
  height: 75dvh;
  overflow-y: scroll;

}

.device {
  width: 100%;
  /* height: 10vh; */
  background-color: #ffffff6e;
  border-radius: 3vmin;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: start;
  justify-content: start;
  margin-block: 1vh;

  overflow: hidden;
}

.phoneCase {
  width: 10dvh;
  height: 10dvh;
  display: flex;
  flex-direction: wrap;
  align-items: center;
  justify-content: center;
  border-right: rgba(0, 0, 0, 0.178) 0.5vh solid;
  touch-action: none;
}


.words {
  display: flex;
  width: min-content;
  height: 8vh;
  flex-direction: column;
  flex: 5;
  margin: 0px;
  padding: 0.75vh;
}

.deviceName {
  text-align: start;
  height: 3vh;
  margin: 0px;
  width: auto;
  font-size: 3vh;
  line-height: 3vh;
}

.deviceStatus {
  text-align: start;
  line-height: 2vh;
  width: auto;
  height: 2vh;

  margin: 0px;
  padding: 0px;
  font-size: 2vh;
}

.deviceManagement {
  flex: 1;

  font-size: 5vh;
  height: 10vh;
}

meter {
  width: 35vmin;
  display: none;
  height: 3vh;

}

.big {
  clip-path: circle(200vmax at 100% 0%);
}

.addDevice {
  width: 100%;
  height: 7vh;
  background-color: #6c4db4;
  border-radius: 3vmin;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;

  overflow: hidden;
}

.plus {
  line-height: 5vh;
  height: 5vh;
  margin-bottom: 0.5vh;
}

@media (orientation: portrait) {
  .circleTrans {
    transition: clip-path 500ms ease-in-out;
    /* outline: solid 19px red;  */
  }
}

@media (max-aspect-ratio:38/88) {
  .navH1 {
    margin-left: 1dvh;
    /* margin-right: auto;  */
    font-size: 12vmin;
  }

  .quickScout {
    height: 6dvh;
    margin-left: 1dvh;
    line-height: 6dvh;
    appearance: none;
    border: none;
    outline: black 0.4vh solid;
    border-radius: 1vh;
    font-weight: bold;
    background-color: rgba(9, 29, 85, 1);
    font-size: 10vmin;
  }

  .hamburger {
    margin-right: 0px;
  }
}

/* ///////////////////////Sidebar/////////////////////// */

.sidebar {
  display: flex;
  flex-direction: column;
  width: 46svw;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgb(12, 12, 12);
  z-index: 2;
  clip-path: circle(0vmax at 0% 0%);

  clip-path: xywh(0px 0px 0px 100%);
  transition: clip-path 500ms linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}

.sideOpen {
  clip-path: circle(200vmax at 0% 0%);
  clip-path: xywh(0px 0px 100% 100%);

}

.spacer {
  height: 7.1dvh;
  width: 100%;
  outline: 0.15vh rgb(26, 25, 25) solid;
  border-bottom: 0.3vh;
}

.listOption {
  height: 7dvh;
  width: 100%;
  background-color: rgb(12, 12, 12);
  margin-right: -0.3vh;
  outline: 0.15vh rgb(26, 25, 25) solid;
  display: flex;
  align-items: center;
  touch-action: none;
  justify-content: center;
}

.sidebarH1 {
  font-size: 4vmin;
  line-height: 4vmin;
  text-align: center;

}

/* //////////////////////////dashboard///////////////////////// */

.dashboard {
  position: absolute;
  top: 7dvh;
  left: 0px;
  height: 93dvh;
  width: 100dvw;
  display: none;
  /* display: ; */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  overflow-y: scroll;
  scrollbar-width: none;
}

#upcomingMatches {
  display: none;
}

#nextBreak {
  display: none;
}

.scoutMatchPanel {
  background-color: rgb(26, 25, 25);
  padding: 1vh;
  width: min(80vh, 90vw);
  border-radius: 3vmin;
  margin: 1vmin;
  display: none;
  /* flex:1; */
}

.scoutPitPanel {
  background-color: rgb(26, 25, 25);
  padding: 1vh;
  width: min(80vh, 90vw);
  border-radius: 3vmin;
  margin: 1vmin;
  display: none;
  /* flex:1; */
}

.startEventButtonOffline {
  display: block;
  background-color: rgb(72, 218, 128);
  width: 100%;
  font-size: 7vmin;
  border-radius: 3vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  font-weight: 900;
  margin-top: 2vh;
  padding: 1vh;
  color: black;
}

.startEventButtonOnline {
  display: block;
  background-color: #3F51B5;
  width: 100%;
  font-size: 7vmin;
  border-radius: 3vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  font-weight: 900;
  margin-top: 2vh;
  padding: 1vh;
  color: black;
}

.openScoutQueue {
  outline: none;
  background-color: black;
  width: 100%;
  font-size: 7vmin;
  border-radius: 3vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  touch-action: none;
  font-weight: 900;
  margin-top: 2vh;
  padding: 1vh;
  color: rgb(72, 218, 128);
}

.openPitScout {
  outline: none;
  background-color: black;
  width: 100%;
  font-size: 7vmin;
  border-radius: 3vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  touch-action: none;
  font-weight: 900;
  margin-top: 2vh;
  padding: 1vh;
  color: rgb(113, 123, 255);
}


.info {
  background-color: rgb(26, 25, 25);
  padding: 1vh;
  width: min(80vh, 90vw);
  border-radius: 3vmin;
  height: min-content;
  margin: 1vmin;
  display: block;
  /* flex:1 */
}

#eventInfo {
  display: none;
}

#ourInfo {
  display: none;
}

@media (min-aspect-ratio:16/9) {
  .dashboard {
    position: absolute;
    top: 7dvh;
    left: 0px;
    height: 93dvh;
    width: 100dvw;
    display: flex;
    /* display: none; */
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-evenly;
    justify-content: space-evenly;
    overflow-x: scroll;
    /* scrollbar-width: none; */
  }
}

svg {
  height: auto;
  margin: 0px;
  padding: 0px;
  width: 100%;
  aspect-ratio: 16/9;
  /* outline-width: 6px;
  outline-color: rgb(0, 13, 255);
  outline-style: dashed; */
  min-width: 0px;
  min-height: 0px;
  /* flex-shrink: 0; */
}

.svgTxt {
  fill: white;
  font-size: 100px;
  height: 100px;
  font-family: "Trebuchet MS", Roboto, Tahoma;
}

/* //////////////////////////////////////Toast//////////////////////////////////////// */

.toast {
  position: absolute;
  /* top: 8dvh; */
  z-index: 9;
  left: 50dvw;
  max-width: 100dvw;
  max-height: 6dvh;
  text-wrap: wrap;
  padding: 0.5dvh;
  border-radius: 0.7svh;
  top: -6dvh;
  transform: translate(-50%, 0%);
  transition: top 400ms ease-out;
  /* overflow: hidden; */
  display: none;
}

#toastMessage {
  width: max-content;
  max-width: 100dvw;
  max-height: 6dvh;
}

.toasted {
  top: 1.5dvh;

}

/* /////////////////////////////////////Data///////////////////////////////////////// */

.databoard {
  position: absolute;
  top: 7dvh;
  left: 0px;
  height: 93dvh;
  width: 100dvw;
  background-color: rgb(12, 12, 12);
  /* display: flex; */
  display: none;
  flex-direction: column;
}

/* /////////////////////////////////////CreateDatabase//////////////////////////////////// */

.creationCover {
  position: absolute;
  background-color: #006bc3;
  width: 100dvw;
  left: 50%;
  height: 120vh;
  /* transform: translate(-50%, -60%); */
}

.settingText {
  background-color: rgba(0, 0, 0, 0.568);
  padding: .4vw;
  border-radius: .5vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 70%;
}

.postText {
  background-color: rgba(0, 0, 0, 0.568);
  padding: .4vw;
  border-radius: .5vw;
  display: flex;
  flex-direction: row;
  height: 8vh;
  flex-wrap: wrap;
  width: 60%;
}

.textSettingText {
  background-color: rgba(0, 0, 0, 0.568);
  padding: .4vw;
  border-radius: .5vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 98.5%;

}

.setting {
  background-color: rgba(0, 0, 0, 0.568);
  border-radius: .5vw;
  padding: .5vw;
  width: 100%;
  margin-top: .5vh;
  justify-content: center;
  transition: height 300ms ease;
  height: 8vh;
  color: white;
  display: flex;

}

.scoutingPost .setting {
  flex-wrap: wrap;
  margin-top: 1vh;

}

.scoutingPit .setting {
  flex-wrap: wrap;
  margin-top: 1vh;

}

.settingVertical {
  background-color: rgba(0, 0, 0, 0.568);
  border-radius: .5vw;
  padding: .5vw;
  width: 100%;
  margin-top: .5vh;


  height: 19vh;
  color: white;
  display: flex;
  flex-direction: column;
}

.settingStack {
  height: 14vh;
}

.settingName {
  font-size: 7vmin;
  line-height: 8vh;
  width: 80%;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  margin: 0px;
  padding: 0px;
}

.settingEffect {
  font-size: 2vmin;

  /* background-color: rgba(0, 0, 0, 0.568); */
  /* border-radius: .5vw; */
  /* width:10%; */
  margin: 0px;
  margin-left: auto;
  /* padding:.4vw; */

  text-align: end;

}

.buttons {
  color: white;
  border-radius: 1vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* border: 0.1vw white solid; */
  margin-inline: auto;
  /* padding-inline: 3vw; */
  height: 8vh
}

.required>* {
  background-color: #004b89;
  /* background-color: rgb(167, 169, 251); */
}

.setup {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  /* outline: white 2px solid; */
  overflow: hidden;
}

.teleOption {
  display: none;
}

.addSetting {
  flex-shrink: 0;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.568);
  border-radius: .5vw;
  /* padding: .5vw; */
  margin-top: .5vh;
  /* height: 28vh; */
  /* margin-bottom: 5vh; */

  clip-path: xywh(0% 0% 100% 8vh);
  color: white;
  width: 100%;
  transition: clip-path 500ms linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);

}

.plusSetting {

  line-height: 8vh;
  height: 8vh;
}

.settingInfo {
  margin: 0px;
  padding-left: auto;
  padding: 0px;
  /* outline: blue 2px solid; */
  overflow-y: scroll;
  height: 100%;
  width: 50%;
  margin-left: -30%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.settingCreator {
  background-color: rgba(0, 0, 0, 0.568);
  display: flex;
  margin: 0px;
  margin-left: -0.5vw;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  border-radius: 0.5vw;
  width: 100%;
  /* height: 67%; */
}

.selectType {
  background-color: #004b8962;
  width: 90%;
  height: 4vh;
  clip-path: circle(0vmax at 0% 0%);
  margin-top: 1.25%;
  margin-bottom: 1.25%;
  clip-path: xywh(0% 0% 100% 4vh);
  transition: clip-path 300ms ease;
  will-change: clip-path;
  display: flex;
  flex-direction: column;
}

.selectTypeOpen {
  clip-path: circle(200vmax at 0% 0%);
  clip-path: xywh(0% -100vh 100% 200vh)
}

.selectTypeOption {
  background-color: #004b89;
  font-size: 3vh;
  border: rgba(255, 255, 255, 0.123) 0.25vh solid;
  color: white;
  text-align: start;
  touch-action: none;
  padding-left: 0.4vh;
}

.selectTypeTitle {
  font-size: 3vh;

  line-height: 3.75vh;
  border: rgba(255, 255, 255, 0.123) 0.25vh solid;
  color: white;
  text-align: start;
  touch-action: none;
  padding-left: 0.4vh;
}

.rangeCreator {
  display: none;
  width: 90%;
  /* background-color: rgba(0, 0, 0, 0.595); */
  /* border:0.5vh solid rgb(12,12,12); */
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.textInput {
  background-color: black;
  border: white 0.2vh solid;
  height: 4vh;
  font-size: 4vh;
  width: 60%;
  margin-top: 1.25%;
  margin-bottom: 1.25%;
  padding: 0px;
}

.smallInput {
  width: 24%;
  /* margin:2.5%; */
  /* margin-top: 5%; */
  /* margin-bottom: 5%; */

}

.smallerInput {
  width: 20%;
  /* margin:2.5%; */
  /* margin-top: 5%; */
  /* margin-bottom: 5%; */

}

.autoOption {
  overflow-y: scroll;

}


.multiSwitch {
  width: 90%;
  height: 4vh;
  outline: rgb(255, 255, 255) 0.2vh solid;
  border-radius: 999em;
  background-color: rgb(14, 14, 14);
  display: flex;
  flex-wrap: wrap;
  /* overflow: hidden; */
  flex-direction: row;

}

.multiSwitchButton {
  flex: 1;
  font-size: 1.8vh;
  line-height: 4vh;
  background-color: rgb(0, 0, 0, 0);
  border: none;

  appearance: none;
}

.multiSlider {
  pointer-events: none;
  width: 100%;
  height: 4vh;
  margin-bottom: -4vh;
  overflow: hidden;
}

.multiSliding {
  height: 4vh;
  pointer-events: none;
  background-color: #004b89;
  border-radius: 999em;
  /* margin-left: -100%; */
  transition: margin-left 300ms ease-in-out;
}

.submitDatapoint {
  width: 90%;
  height: 4vh;
  border-radius: 990em;
  border: none;
  outline: rgb(255, 255, 255) 0.2vh solid;
  font-size: 3vh;
  margin-top: 1.25%;
  margin-bottom: 2.5%;
  background-color: rgb(53, 161, 94);
}

#typeSwitch {
  display: none;
  margin-top: 1.25%;
  margin-bottom: 1.25%;
}


.dataSetup {
  padding: 0px;
  margin: 0px;
  /* margin-top:0.3vh; */
  height: 80%;
  width: 100%;
  /* display:none; */
  background-color: rgba(0, 0, 0, 0.568);
  align-items: center;
  /* outline: white 2px solid; */
  overflow-x: hidden;
}

/* .setupDiv{
} */
.teamSetup {
  /* display: block; */
  opacity: 0%;
  pointer-events: none;
  transition: all 1.5s ease;
}


.showTeamSetup {
  opacity: 100%;
  pointer-events: all;
}

.pageNavigator {
  height: 10%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  margin: 0px;
  background-color: rgb(26, 25, 25);
  padding: 0px;
}


.pageNavigatorText {
  font-size: 8vmin;
  line-height: 6dvh;
}

.setupPageTitle {
  height: 10%;
  line-height: 10vh;
  /* text-justify: center; */
}


.buttonHolder {
  width: 90%;
  height: 4vh;
  outline: rgb(255, 255, 255) 0.2vh solid;
  border-radius: 999em;
  background-color: rgb(14, 14, 14);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.heldButton {

  font-size: 3vh;
  line-height: 4vh;
  background-color: #004b89;
  border: none;
  appearance: none;
  border-radius: 999em;
  flex: 1;
}

.hide {
  display: none;
}

@media (orientation: landscape) {
  .setting {
    width: 100vh;
    margin-inline: auto;
  }

  .settingVertical {
    width: 100vh;
    margin-inline: auto;
  }

  .addSetting {
    width: 101.5vh;
    margin-inline: auto;
  }

  .buttonHolder {
    width: 100vh;
  }

  #pageNavSlider {
    width: 100vh;

  }

  /* h2{
    font-size: 2.5vmin;
  } */
}

.eventTeamsSetup {
  display: none;

  opacity: 0%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin: 0px;
  outline: #004b89 2px solid;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  margin-top: -2vw;
  transition: opacity 300ms ease-in-out;
}

.eventMatchesSetup {
  display: none;
  opacity: 0;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin: 0px;
  outline: #004b89 2px solid;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  margin-top: -2vw;
  transition: opacity 300ms ease-in-out;
}

.eventSetup {
  display: none;
  opacity: 0%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin: 0px;
  outline: #004b89 2px solid;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  margin-top: -2vw;
  transition: opacity 300ms ease-in-out;
}



.search {
  margin: 0px;
  border: none;
  width: 99.01vmin;
  height: 8dvh;
  font-size: 4vmin;
  color: white;
  padding: 0%;
  border: 0.5vmin rgba(0, 0, 0, 0.595) solid;
  background-color: rgba(0, 0, 0, 0.568);

}

.select {
  background-color: rgba(0, 0, 0, 0.568);
  scrollbar-width: none;
  overflow-y: scroll;
  height: 50vh;
  margin: 0px;
  width: 100vmin;
  padding: 0%;

  padding-bottom: 10vh;
}

.selectOption {
  width: 98vmin;
  margin: 1vmin;
  margin-top: 1vw;
  margin-bottom: 1vw;
  font-size: 5vmin;
  font-weight: 900;
  font-style: normal;
  padding-top: 1.25vh;
  padding-bottom: 1.25vh;
  overflow: hidden;
  outline: 0.4vmin rgba(0, 0, 0, 0.568) solid;
  background-color: rgba(0, 0, 0, 0.178);
  text-overflow: ellipsis;
}

.currentEvent {
  text-align: center;
  width: 100vmin;
  padding: 0%;
  font-size: 4vmin;
  padding-top: 1vh;
  padding-bottom: 1vh;
  text-overflow: ellipsis;
  overflow: hidden;
  color: goldenrod;
  background-color: rgba(0, 0, 0, 0.568);

}

.nextButton {
  display: block;
  background-color: #064273;
  width: 94vmin;
  font-size: 7vmin;
  height: 10vh;
  line-height: 4vh;
  border-radius: 3vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  font-weight: 900;
  padding: 1vh;
  overflow: hidden;
  color: white;
}

.eventHeader {
  font-size: 10vh;
  line-height: 10vh;
  height: 10vh;
  margin: 0px;
  padding: 0px
}

.addTeam {
  width: 98.8vmin;
  margin: 1vmin;
  margin-top: 1vw;
  margin-bottom: 1vw;
  margin-left: 0.6vmin;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.178);
  text-overflow: ellipsis;
  flex-shrink: 0;
  /* padding: .5vw; */
  display: none;
  height: 20vh;
  /* margin-bottom: 5vh; */
  clip-path: xywh(-10% -10% 120% 8vh);
  color: white;
  transition: clip-path 500ms linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);

}

.plusTeam {

  line-height: 6vh;
  height: 6vh;
  font-size: 6vh;
}

.teamCreator {
  background-color: rgba(0, 0, 0, 0.568);
  display: flex;
  margin: 0px;
  margin-left: -0.5vw;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  border-radius: 0.5vw;
  width: 100%;
  height: 67%;
}

.submitTeam {
  width: 90%;
  height: 4vh;
  border-radius: 990em;
  border: none;
  outline: rgb(255, 255, 255) 0.2vh solid;
  font-size: 3vh;
  background-color: rgb(53, 161, 94);
}

.secondTeamNumberInput {
  background-color: rgba(0, 0, 0, 0.28);
  border: white 0.2vh solid;
  height: 4vmin;
  width: 40%;
  font-size: 4vmin;
  margin: 0px;
  padding: 0px;
}

.match {
  width: 98vmin;
  margin: 1vmin;
  margin-top: 1vw;
  margin-bottom: 1vw;
  font-size: 5vmin;
  font-weight: 900;
  font-style: normal;
  margin-bottom: 3vh;
  overflow: hidden;
  outline: 0.4vmin rgba(0, 0, 0, 0.568) solid;
  background-color: rgba(0, 0, 0, 0.178);
  text-overflow: ellipsis;
}

.alliance {
  height: 5vh;
  display: flex;

}

.redAlliance {
  background-color: red;
}

.blueAlliance {
  background-color: blue;
}

.divider {
  background-color: rgb(8, 8, 8);
  font-size: 4vh;
  display: flex;
  text-align: center;
}

.team {
  flex: 1;
  font-size: 3vh;
  height: 5vh;
  line-height: 5vh;
}

.slotsSetup {
  display: none;
  opacity: 0;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin: 0px;
  outline: #004b89 2px solid;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  margin-top: -2vw;
  transition: opacity 300ms ease-in-out;

}

.slotsOptionsViewer {
  background-color: rgba(0, 0, 0, 0.568);
  scrollbar-width: none;
  overflow-y: scroll;
  height: 60vh;
  margin: 0px;
  width: 100vmin;
  padding: 0%;
  padding-bottom: 10vh;
}

.slotOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 98vmin;
  margin: 1vmin;
  margin-top: 1vw;
  margin-bottom: 1vw;
  font-size: 5vmin;
  font-weight: 900;
  text-wrap: wrap;
  font-style: normal;
  height: min-content;
  margin-bottom: 3vh;
  outline: 0.4vmin rgba(0, 0, 0, 0.568) solid;
  background-color: rgba(0, 0, 0, 0.178);
  /* text-overflow: ellipsis; */
}

.numberInput {
  text-align: center;
  appearance: none;
  background-color: #004b8900;
  width: 25vmin;
  border: none;
  height: 4vh;
  font-size: 3vh;
  outline: 0.4vmin rgba(0, 0, 0, 0.568) solid;

}

.yap {
  font-size: 2.5vh;
}


.eventSlotsViewing {
  display: none;

  opacity: 0;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin: 0px;
  outline: #004b89 2px solid;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  transition: opacity 300ms ease-in-out;
  margin-top: -2vw;

}

.manualTeamSetup {
  display: none;
  opacity: 0;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-items: center; */
  /* justify-content: space-between; */
  margin: 0px;
  outline: #004b89 2px solid;
  padding: 0px;
  width: 100vw;
  height: 100dvh;
  transition: opacity 300ms ease-in-out;
  margin-top: -2vw;
}

#slotsViewer {
  height: 60vh;
}


.manualViewer {
  display: flex;
  height: 31.65dvh;
  width: 100%;
  outline: 0.25dvh solid rgb(2, 17, 30);
  flex-direction: row;
  flex-wrap: wrap;
}

.numPad {
  display: grid;
  background-color: #031c32;
  height: 40dvh;
  width: min(45dvh, 100dvw);
  margin: 0px;
  padding: 0px;
  grid-template-areas:
    "pad1 pad2 pad3"
    "pad4 pad5 pad6"
    "pad7 pad8 pad9"
    "padE pad0 padN";

}

.pad {
  margin: 1dvh;
  border-radius: 0.75vh;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  line-height: 8dvh;
  text-align: center;
  outline: #010911 solid 0.23dvh;
  font-size: 3dvh;
  height: 8dvh;
  background-color: rgb(2, 17, 30);
  justify-content: center;
  grid-column: 33%;
  user-select: none;
}

.padless {
  margin: 1dvh;
  border-radius: 0.75vh;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  line-height: 8dvh;
  text-align: center;
  outline: #010911 solid 0.23dvh;
  font-size: 3dvh;
  height: 8dvh;
  background-color: rgb(2, 17, 30);
  justify-content: center;
  grid-column: 33%;
  user-select: none;
}

.padEnd {
  width: -10%;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  font-size: 3dvh;
}

#teamManualInput {

  width: 100%;
  font-size: 5dvh;
  outline: 0.25dvh solid rgb(2, 17, 30);
  background-color: #031c32;
  border: none;
  margin: 0px;
}

#backSpace {
  margin: 0px;
  height: 8.2dvh;
  width: 10.5dvh;
  font-size: 3dvh;
  outline: 0.25dvh solid rgb(2, 17, 30);
  background-color: #031c32;
  border: none;
}

#trashTeam {
  margin: 0px;
  height: 8.2dvh;
  width: 10.5dvh;
  font-size: 3dvh;
  outline: 0.25dvh solid rgb(2, 17, 30);
  background-color: #031c32;
  border: none;
}

#numberPadHolder {
  display: block;
  justify-items: end;
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.178);
  background: repeating-linear-gradient(45deg,
      #00000000,
      #00000000 1.5vh,
      #031c32 1.5vh,
      #031c32 3vh);
  background-position-x: 20%;
  background-size: 200%;
  animation: infinite stripes 1s forwards linear;
}

@keyframes stripes {
  0% {
    background-position-x: 0%;


  }

  100% {
    background-position-x: -4.3vh;
  }

}

.manualTeamList {
  font-size: 4dvh;
  padding: 1dvh;
  height: fit-content;
  width: fit-content;
}

#inputHolder {
  display: flex;
  width: min(45dvh, 100dvw);

}

.slidePad {
  bottom: 0px;
  right: 0px;
  width: min(45dvh, 100dvw);
  height: 9dvh;
  background-color: #031c32;

  position: absolute;
  padding-top: 0.23dvh;
  display: none
}

.padHandle {
  margin-left: 0px;
  border-radius: 0.75vh;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  line-height: 8dvh;
  text-align: center;
  outline: #010911 solid 0.23dvh;
  font-size: 3dvh;
  height: 8dvh;
  background-color: rgb(2, 17, 30);
  justify-content: center;
  user-select: none;
  width: 30%;
  position: absolute;
}

.padTrack {
  height: 8dvh;

  background-color: rgb(3, 23, 42);
  margin-inline: 1dvh;
  border-radius: 0.75vh;
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
  outline: #010911 solid 0.23dvh;

}

.trackText {
  width: 60%;
  text-align: center;
  position: absolute;
  line-height: 4dvh;
  height: 8vh;
  margin-left: 14dvh;
  font-weight: 900;
  font-size: 3dvh;
}

.manualMatchSetup {
  display: none;
  opacity: 0;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-items: center; */
  /* justify-content: space-between; */
  margin: 0px;
  outline: #004b89 2px solid;
  padding: 0px;
  width: 100vw;
  height: 100dvh;
  transition: opacity 300ms ease-in-out;
  margin-top: -2vw;
}


.eventSetupShow {
  opacity: 100%;
}

#manualMatchViewer {

  height: 38dvh;

}

#manualTeamForMatchesViewer {
  height: 20dvh;
  justify-content: space-evenly;
}

.manualMatch {
  flex: 1;
  min-width: 30dvh;
}

/* /////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////Dynamic Table////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////// */

.databoardNav {
  border: rgba(9, 29, 85, 1) 0.5vmin solid;
  background: rgb(0, 0, 0);
  background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(9, 29, 85, 1) 100%);
  height: 5vh;
  /* position: absolute; */
  border-collapse: separate;
  display: flex;
  width: 100%;
  
    /* justify-content: space-evenly; */
    /* flex-wrap: wrap; */
}

.selectStarter {
  /* appearance: none;
  border: none; */
  /* background-color: rgba(0, 0, 0, 0); */
  user-select: none;
  font-size: 4dvh;
  touch-action: none;
  margin-inline: 1vmin;
  font-family: Roboto, "Trebuchet MS";
  text-align: center;
  /* font-weight: 400; */

}

.selectDatabase {
  background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(9, 29, 85, 1) 100%);

  position: absolute;
  top: 0dvh;

  width: 100%;
  height: 27.5vh;
  z-index: 2;
  clip-path: circle(0vmax at 0% 0%);
  clip-path: xywh(0% 0% 100% 0vh);
  transition: clip-path 300ms ease;
}

.selectOpen {
  clip-path: circle(200vmax at 0% 0%);
  clip-path: xywh(0% 0% 100% 30vh)
}

.dbSelectOption {
  font-size: 4dvh;
  /* padding:0.4vh; */
  border: rgba(9, 29, 85, 1) 0.5vh solid;

  text-align: start;
  touch-action: none;
  padding-left: 0.4vh;
}


.databaseHotkey {
  aspect-ratio: 1/1;
  height: 5vh;
  line-height: 4vh;
  margin-inline: 1vmax;
  padding: 0px;
  font-size: 4dvh;
  border-radius: 0.5dvh;
  /* font-family:; */
  text-align: center;
  /* font-weight: 400; */
  background-color: rgb(26, 25, 25);
  border: none;
  border: 0.2dvh rgb(26, 25, 25) solid;

  touch-action: none;

}

.hotkeyHolder {
  display: flex;
  flex-direction: row;
  /* justify-content: space-evenly; */
  flex-wrap: wrap;
  width: 70%;
  overflow: hidden;
}

.databaseSettings {
  aspect-ratio: 1/1;
  height: 5dvh;
  padding: 0px;
  line-height: 4dvh;
  margin-left: auto;
  margin-right: 1vh;
  font-size: 4dvh;
  border-radius: 0.5vh;
  /* font-family:; */
  text-align: center;
  /* font-weight: 400; */
  background-color: rgb(26, 25, 25);
  border: none;

}

.tableHolder {
  width: 100%;
  overflow: scroll;
  /* position:absolute; */
  /* top:5vh;
  margin-top: 1vmin; */
  scrollbar-gutter: stable;
  height: 87dvh;
  /* scroll-behavior: smooth; */
  /* padding:0.4vmin; */
  clip-path: xywh(0% 0% 100% 100%);
  outline: none;
  flex-shrink: 0;

  background: repeating-linear-gradient(45deg,
      rgb(24, 24, 24),
      rgb(24, 24, 24) 1.5vh,
      rgb(12, 12, 12) 1.5vh,
      rgb(12, 12, 12) 3vh);
  background-position-x: 20%;
  background-size: 200%;
  animation: infinite stripes 1s forwards linear;
}


.tableHalf {
  height: 50dvh;

}

.col {

  font-size: 2.2vh;
  left: 0vmin;
  user-select: none;
  background-color: rgb(12, 12, 12);
  position: sticky;
  /* outline: rgb(32,32,32) 0.7vmin solid; */

}

.dynamicTable {
  /* outline: rgb(85, 9, 58) 0.5vmin solid; */
  max-height: 87dvh;
  table-layout: fixed;
  width: max-content;
  /* position: absolute; */
  padding: 0px;
  margin: 0px;
  /* margin:-0.5vmin; */
  text-align: center;
  border-spacing: 0px;
  /* border-collapse: separate; */
  /* touch-action: none; */

}

.dynamicTable tr {
  padding: 0px;
  margin: 0px;
  height: 5vh;
  /* border-collapse:separate; */
  background-clip:padding-box;
  /* clip-path: xywh(0% 0px 100% 100%); */
  /* outline: rgb(32,32,32) 0.5vmin solid; */
  border-top:0vh solid transparent;

}

.dynamicTable th {
  user-select: none;
  touch-action: none;
  background-clip:padding-box;

  cursor: default;
  line-height: 227.272727272727272727272727272727272727272727%;
  height: 5vh;
  /* outline: rgb(32,32,32) 0.5vmin solid;
   */
  border-collapse:separate;

  border: 0.25vmin rgb(32, 32, 32) solid;
  padding: 0px;
  margin: 0px;
  padding-inline: 0.5vh;

  position: sticky;
  /* z-index: 10; */
  top: 0px;
  font-size: 2.2vh;
  background-color: rgb(12, 12, 12);
}

.dynamicTable tr:nth-child(even) td{
  background-color: rgb(6, 6, 6);
}

.dynamicTable tr:nth-child(odd) td{
  background-color: rgb(12, 12, 12);
}

/* .dynamicTable td:nth-child(even){
  border-color: rgb(255,255,255);
} */
.dynamicTable td {
  font-size: 2.2vh;
  height: 5vh;
  border: 0.25vmin rgb(32, 32, 32) solid;
  padding: 0px;
  margin: 0px;
  background-clip:padding-box;
  border-collapse: separate;
  text-align: center;
  line-height: 227.272727272727272727272727272727272727272727%;

  padding-inline: 1vh;
}


#corner {
  /* position:absolute; */
  /* border-collapse: separate; */
  /* padding-top:1vh; */
  padding-inline: 4vh;

}


.stayWhite {
  color: white !important
}

.legacyMode {
  position: absolute;
  z-index: 10;
  bottom: 0;
  background-color: orangered;
  width: 100vw;
  text-wrap: wrap;
  text-align: center;
  justify-content: center;
  color: black;
  font-weight: 900;
  height: fit-content;
  padding-bottom: 1vh;
  background: repeating-linear-gradient(45deg,
      orangered,
      rgb(255, 68, 0) 1.5vh,
      red 1.5vh,
      red 3vh);
  background-position-x: 20%;
  background-size: 200%;
  animation: infinite stripes 1s forwards linear;
  clip-path: xywh(0px 0px 0px 100%);
}

.spiderHolder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-evenly;
  margin: 0px;
  padding: 0px;
  height: 38dvh;
}

.teamKeyHolder {
  background-color: rgb(7, 7, 7);
  margin-top: 1.5dvh;
  width: 26%;
  margin-left: 3%;
  height: 30dvh;
  border-radius: 6%;
  overflow-y: scroll;
}

.teamKey {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 1vh;
}

.spiderTeam {
  font-size: 4vmin;
}

.spiderColor {
  margin-left: 2vmin;
  margin-right: 2vmin;
  outline: 0.5vhmin rgb(0, 0, 0) solid;
  background-color: indianred;
  height: 3.5vmin;
  width: 3.5vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  font-weight: 900;
}

#databoardSpider {
  width: 71%;
  max-height: 31vh;
}

::-webkit-scrollbar {
  width: 1vmin;
  height: 1vmin;

}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.568);
}

::-webkit-scrollbar-thumb {
  background: #9a9a9a;
  border-radius: 10em;

}

::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

#colorHK {
  padding: 0px
}

@media (max-aspect-ratio:19/32) {

  .spiderHolder {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    justify-content: center;
    align-content: space-around;
    margin: 0px;
    padding: 0px;
    height: 38dvh;
  }

  #databoardSpider {
    width: 100%;
    max-height: 31vh;
    margin-bottom: 0px;
  }

  .teamKeyHolder {
    background-color: rgb(7, 7, 7);
    /* margin-top: 1.5dvh; */
    width: 90%;
    display: flex;
    flex-direction: row;
    height: 9vmin;
    margin-inline: 5%;
    border-radius: 2%;
    overflow-y: hidden;
    overflow-x: scroll;
  }

  .teamKey {
    user-select: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 0vh;
    margin-inline: 1vmin
  }
}

.dashed {
  stroke-dasharray: 1%, 1%;
  outline: #ffffff 1vmin dashed
}

#cornerHide {
  width: 0.25vmin;
  padding-inline: 1vh;
  position: absolute;
  height: 5vh;
  font-size: 2.2vh;
  text-align: center;
  line-height: 5vh;
  /* top:0.5vmin; */
  /* top:5dvh; */
  /* margin-top: 1vmin; */
  /* left:0.5vmin; */
  /* margin-left: -0.25vmin; */
  /* border-collapse: collapse; */
  z-index: 1;
  background-color: rgb(12, 12, 12);
  border: rgb(32, 32, 32) 0.25vmin solid;

}

@media (min-aspect-ratio:12/9) {


  .tableHalf {
    height: 87dvh;
    width: fit-content;
    max-width: 66vw;
  }

  .databoard {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .spiderHolder {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column-reverse;
    justify-content: space-evenly;
    align-content: space-around;
    margin: 0px;
    min-width: 34vw;
    padding: 0px;
    width: auto;
    height: 87dvh;
    flex: 1
  }

  .teamKeyHolder {
    background-color: rgb(7, 7, 7);
    /* margin-top: 1.5dvh; */
    width: 90%;
    display: flex;
    flex-direction: column;
    height: 30vmin;
    margin-inline: 5%;
    border-radius: 2%;
    overflow-y: scroll;
    /* overflow-x: scroll; */
  }

  #databoardSpider {
    max-height: unset;
    width: 100%;

  }

}

.databaseFullSKHolder {
  position: absolute;
  right: 0px;
  top: 5vh;
  display: none;
  margin-top: 1vmin;
  min-width: 30vmin;
  border-radius: 5vmin;

  z-index: 5;
  background-color: rgb(32, 32, 32);
}

.databaseSK {
  appearance: none;
  border: none;
  background-color: #00000000;
  height: 7vh;
  width: 100%;
  border-bottom: black solid 0.2vh;
  line-height: 4vh;
  display: flex;
  flex-wrap: wrap;
  font-size: 3dvh;

  text-align: center;
  align-items: center;
  padding-inline: 1dvh;
}

.databaseSKICO {
  /* padding-inline: 1dvh; */
  line-height: 0vh;
  width: 5dvh;
  font-size: 3dvh;
  font-weight: 300;
}

.databaseSKTxt {
  padding-top: 0.5dvh;
  line-height: 4vh;
  font-size: 3dvh;

}

.databaseSKZoom {
  margin-inline: 1dvh;
  margin-right: 1.5dvh;
}

.showSK {
  display: unset;
}

.hkON {
  background-color: rgba(9, 29, 85, 1);
}

#zoomNum {
  width: 6vh;
}

.teamNumberDBInput {
  display: flex;
  align-items: center;
  /* padding:0.4vh; */
  border: rgba(9, 29, 85, 1) 0.5vh solid;

}

.goToTeamDB {
  border: none;
  appearance: none;
  background-color: #00000000;
  font-size: 3vh;
  touch-action: none;
}

.goToClickedTeamDB {
  border: none;
  appearance: none;

  background-color: #00000000;
  font-size: 3vh;
  touch-action: none;
}

.scoutingBG {
  background-image: radial-gradient(circle 100vmax at 50% 50%, hsl(284.8, 100%, 0%) 0.2%, hsl(284.8, 100%, 0%) 100.2%);
  /* background: radial-gradient(circle 100vmax at 50% 50%, hsl(284.8,100%,17.8%) 0.2%, hsl(284.8,100%,9.2%) 100.2%); */
  animation-name: backgroundShiftBR;
  background-size: 200% 200%;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 7;
  touch-action: none;
}

.scoutingCover {
  background-color: black;
  opacity: 1;
  width: 100%;
  height: 100%;
  transition: opacity 10000ms ease;

}

.scouting {
  transition: background-color 100ms ease, opacity 300ms ease;
  background-color: rgba(255, 255, 255, 0);
  position: absolute;
  top: 10dvh;
  left: 0;
  width: 100%;
  height: 90dvh;
  z-index: 8;
  display: none;
  gap: 1vh;
  grid-template-columns: repeat(auto-fill, minmax(0px, 1fr));
  max-width: 100%;
  max-height: 100%;
  grid-column-start: auto;
  justify-items: center;
  align-items: center;

}

.scoutButton {
  /* width: 50vmin; */
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 100%;
  /* Prevents overflow */
  /* outline: blue 3px solid; */
  background-color: #98989857;
  font-size: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 3vh;
  display: flex;
  overflow: hidden;
  align-content: center;
  /* box-shadow: rgba(0, 0, 0, 0.367) 0.5vh 0.5vh; */
}

.scoutButtonTime {
  font-size: 6vmin;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-iteration-count: infinite;
  transform: scaleY(1);
  user-select: none;
}

.scoutButtonName {
  display: flex;
  flex-direction: row;
  user-select: none;
  font-size: 3vmin;
  justify-content: start;
  will-change: transform;

}

.scoutButtonId {
  user-select: none;
  position: absolute;
  color: #00000048;
  font-family: monospace
}

.scoutButtonBoolean {
  font-size: 6vmin;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
  transform: scaleY(1);
  user-select: none;
  transition: transform 250ms ease;
}

.scoutButtonScore {
  font-size: 6vmin;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
  transform: scaleY(1);
  user-select: none;

}

.spawnedCircle {
  position: absolute;
  z-index: 7;
  width: 200vmax;
  height: 200vmax;
  transform: scale(1);
  clip-path: circle(1vmax at center);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  transition: all 3000ms linear;
  will-change: clip-path, background-color;
  background-color: #ffffff24;
  pointer-events: none;

}

.spawnedBigCircle {
  clip-path: circle(200vmax at center);
  background-color: #00000000 !important
}

.funkyLetter {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
  transform: scaleY(1);
}

.freakyLetter {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-iteration-count: infinite;
  transform: scaleY(1);

}

@keyframes streachUp {
  0% {
    transform: scaleY(1);

  }

  50% {
    transform: scaleY(2);

  }

  100% {
    transform: scaleY(1);
  }
}

@keyframes squash {
  0% {
    transform: scale(1, 1);

  }

  20% {
    transform: scale(2, 0.5)
  }

  50% {
    transform: scale(4, 0.25)
  }

  80% {
    transform: scale(2, 0.5)
  }

  100% {
    transform: scale(1, 1);

  }
}

@keyframes spinAround {
  0% {
    transform: scaleX(1);

  }

  25% {
    transform: scaleX(0);

  }

  50% {
    transform: scaleX(-1);

  }

  75% {
    transform: scaleX(0);

  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes rollAround {
  0% {
    transform: rotateZ(0deg);

  }

  100% {
    transform: rotateZ(360deg);

  }

}

@keyframes flipAround {
  0% {
    transform: rotateX(0deg);

  }

  50% {
    transform: rotateX(360deg);

  }

}

@keyframes jumpUp {
  0% {
    transform: translate(0%, 0%);

  }

  50% {
    transform: translate(0%, -50%);
  }

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

  }

}

.scoutingNav {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  /* display:flex; */
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  font-size: 6.5vmin;
  font-weight: bold;
  font-family: monospace;
  line-height: 6.5vh;
  margin: 0px;
  padding: 0px;
  z-index: 8;
  height: 10dvh;
  background-color: rgba(0, 0, 0, 0.397);
}

.scoutNavButton {
  position: absolute;
  user-select: none;
  appearance: none;
  font-size: 9.2vmin;
  border-radius: 0 0 0 15vmin;
  width: 20vmin;
  line-height: 6.2vh;
  height: 20vmin;
  font-family: unset;
  border: none;
  outline: rgb(255, 255, 255) 0.4vmin solid;
  background-color: rgb(0, 0, 0);

  z-index: 8;
}

.scoutForth {
  right: 0px;
  top: 0px;
}

.scoutBack {
  left: 0px;
  top: 0px;
}

.scoutNavWrappable {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  width: 60vw;
  font-size: 3.9vmax;
}

.scoutNavWrappable p {
  padding: 0px;
  height: 4vh;
  border-right: rgba(0, 0, 0, 0.28) 0.4vh solid;
  border-left: rgba(0, 0, 0, 0.28) 0.4vh solid;

  line-height: 4vh;
  padding-inline: 1vh;
}


.scoutBGHIDE {
  width: 10dvw;
  height: 7dvh;
}

.preScout {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  width: 100dvw;
  height: 90dvh;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  opacity: 0;
  transition: opacity 300ms ease-in-out;

}

.expandHorizontally {
  width: 100dvw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin: 1dvh;

}

.scoutingDevice {
  height: 10dvh;
  width: min(32vh, 75%);
  margin-inline: auto;
  background-color: #3a3a3a;
  margin: 0px;
}

.teamToScoutInput {
  width: min(30vh, 70%);

  height: 9vh;
  font-size: 10vh;
  padding: auto;
  text-align: center;


  z-index: 5;
  left: 0;
  background-color: #064273FF;
  border: 1vh #064273;
  border-style: solid;
  border-radius: 30em;
  background-color: #3a3a3a;
  border-color: white;
  color: white;
  /* animation-name: inputShift; */
}

.matchToScoutInput {
  width: min(25vh, 50%);

  height: 9vh;
  font-size: 10vh;
  padding: auto;
  text-align: center;


  z-index: 5;
  left: 0;
  background-color: #064273FF;
  border: 1vh #064273;
  border-style: solid;
  border-radius: 30em;
  background-color: #3a3a3a;
  border-color: white;
  color: white;
  /* animation-name: inputShift; */
}

.scoutingFormHolder {
  width: 100dvw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.scoutCancelButton {
  position: absolute;

  appearance: none;
  font-size: 8vmin;
  border-radius: 0 0 10vmin 0;
  width: 15vmin;
  line-height: 12.5vmin;
  height: 15vmin;
  font-family: unset;
  border: none;
  outline: rgb(255, 255, 255) 0.4vmin solid;
  background-color: rgb(0, 0, 0);
  left: 0px;
  top: 0px;
  z-index: 8;
}

.startScoutSequence {
  width: min(32vh, 75%);

  outline: none;
  background-color: black;
  font-size: 9vmin;
  border-radius: 3vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  font-weight: 900;
  margin-top: 2vh;
  padding: 1vh;
  color: rgb(72, 218, 128);
}

.slideHint {
  display: none
}

@media (orientation: landscape) {
  .expandHorizontally {
    flex-direction: row;

  }
}

.scoutingPost {
  transition: background-color 100ms ease, opacity 300ms ease;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 10dvh;
  left: 0;
  width: 100%;
  height: 80dvh;
  z-index: 8;
  display: none;
  overflow-y: scroll;
  flex-direction: column-reverse;
  scroll-behavior: smooth;
  overflow-x: hidden;

}

.scoutingPit {
  transition: background-color 100ms ease, opacity 300ms ease;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 10dvh;
  left: 0;
  width: 100%;
  height: 80dvh;
  z-index: 8;
  display: none;
  overflow-y: scroll;
  flex-direction: column-reverse;
  overflow-x: hidden;

}


.numberAdding {
  display: flex;
}

.numberTextInput {
  border: black solid 0.5vh;
  height: 5vh;
  color: white;
  line-height: 9vmin;
  font-size: 8vmin;
  width: 31vmin;
  background-color: rgba(0, 0, 0, 0.568);

  text-align: center;
}

.timeTextInput {
  border: black solid 0.5vmin;
  height: 7vmin;
  margin-right: 1vmin;
  color: white;
  line-height: 9vmin;
  font-size: 8vmin;
  width: 24vmin;
  background-color: rgba(0, 0, 0, 0.568);

  text-align: center;
}

.numberPlus {
  height: 8vmin;
  border: rgb(47, 0, 255) solid 0.5vmin;
  width: 8vmin;
  line-height: 8vmin;
  border-radius: 0 3vmin 3vmin 0;
  font-size: 8vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background-color: rgba(47, 0, 255, 0.552);
}

.numberMinus {
  height: 8vmin;
  border: rgb(255, 0, 0) solid 0.5vmin;
  width: 8vmin;
  line-height: 0vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3vmin 0 0 3vmin;
  font-size: 8vmin;
  font-weight: 900;
  background-color: rgba(255, 0, 0, 0.552);
}

.numberPlus p {
  color: white !important;
  font-size: 8vmin;
  font-weight: 900;
}

.numberMinus p {
  color: white !important;
  font-size: 8vmin;
  font-weight: 900;
}



.settingVertical textarea {
  border-radius: .5vw;
  padding: .5vw;
  background-color: rgba(0, 0, 0, 0.568);
  resize: none;
  width: 98%;
  height: 8vh;
  margin-top: .5vh;

  font-size: 3vmin;
}

.timeText {
  font-size: 5vmin;
}

.submitBar {
  background-color: rgba(0, 0, 0, 0.568);
  position: absolute;
  top: 90vh;
  left: 0px;
  height: 10dvh;
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.submitBarPit {
  background-color: rgba(0, 0, 0, 0.568);
  position: absolute;
  top: 90vh;
  left: 0px;
  height: 10dvh;
  width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.postFormSubmit {
  display: block;
  background-color: transparent;
  width: 90vmin;
  color: white;
  font-size: 6vh;
  height: 9vh;
  border-radius: 3vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  font-weight: 900;
  padding: 1vh;
  color: black;
}

.pitFormSubmit {
  display: block;
  background-color: transparent;
  width: 90vmin;
  color: white;
  font-size: 6vh;
  height: 9vh;
  border-radius: 3vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  font-weight: 900;
  padding: 1vh;
  color: black;
}


@media (orientation: landscape) {
  .postFormSubmit {

    width: 100vmin;

  }
}

.debugMenu button {
  margin-inline: 1vmin;
  font-size: 2vmin;
  font-family: "Trebuchet MS", Roboto, Tahoma;
  padding-inline: 2vmin;
  border-radius: 1vmin;
}

.reset {
  background-color: red;
}

.newOption {
  display: grid;
  grid-template-columns: min-content;
  align-items: center;
  background-color: rgb(24, 24, 24);
  grid-template-areas:
    "N P"
    "O P";
}

.newOptionName {
  width: 72.5vmin;
  grid-area: N;
  margin-left: 2vmin;


}


.newOptionScore {
  width: 72.5vmin;
  margin-left: 2vmin;
  grid-area: O
}

.newOptionSubmit {
  margin-right: 2vmin;
  grid-area: P;
  width: 10vmin;
  height: 9.5vh;
  margin-left: 2vmin;
  font-size: 8vmin;
  text-align: center;
  line-height: 10vh;
  color: white;
  background-color: rgb(53, 161, 94);
  border-radius: 1vmin;

}

.dropDownTitle {
  width: 100%;
  background-color: rgb(32, 32, 32);
  text-align: center;
  padding-top: 1vmin;
  padding-bottom: 1vmin;

}

.dropDownCreator {
  border: rgb(32, 32, 32) 0.5vh solid;
  display: none
}

.madeOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2vmin;
  background-color: rgb(12, 12, 12);
  border: rgb(24, 24, 24) 0.25vmin solid;
  border-radius: 999em;
  height: 5vh;
  padding-inline: 3vmin;
}

.madeOption div {
  font-size: 3vh;
}

.scoutSlider {

  width: 90vw;
  margin: 2vh;
  height: 1vmin;
  margin-top: 3vmin;
  margin-bottom: 3vmin;
  border-radius: 1vmin;
  appearance: none;
  background-color: rgb(36, 36, 36);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 5vmin;
  width: 5vmin;
  border-radius: 10vmin;

}

.selectComponent {
  background-color: #004b8962;
  width: 90%;
  height: 4vh;
  clip-path: circle(14vmax at 0% 0%);
  margin-top: 1.25%;
  margin-bottom: 1.25%;
  clip-path: xywh(0% 0% 100% 4vh);
  transition: clip-path 300ms ease;
  will-change: clip-path;
  display: flex;
  flex-direction: column;
}

.selectComponentOpen {
  clip-path: circle(200vmax at 0% 0%);
  clip-path: xywh(0% -100vh 100% 200vh)
}

.selectComponentOption {
  background-color: #004b89;
  font-size: 3vh;
  border: rgba(255, 255, 255, 0.123) 0.25vh solid;
  color: white;
  text-align: start;
  touch-action: scroll;
  padding-left: 0.4vh;
}

.selectComponentTitle {
  font-size: 3vh;

  /* line-height: 3.75vh; */
  border: rgba(255, 255, 255, 0.123) 0.25vh solid;
  color: white;
  text-align: start;
  touch-action: none;
  padding-left: 0.4vh;
}

.extend {
  height: auto;
}

.selectComponentOpenBig {
  clip-path: circle(200vmax at 0% 0%);
  clip-path: xywh(0% -100vh 100% 200vh);
  height: unset;
}

.pitSelector {
  overflow: hidden;
}

.selectScrollable {
  height: 20vh;
  overflow-y: scroll;

}


.tablePhase {
  position: absolute !important;
  user-select: none;
  /* top:0px; */
  touch-action:none;
  z-index:1;
  cursor:grabbing;
}


.tableTransitionVertical{
  transition: border 500ms ease;
  will-change: border-top;
  
}