@import "https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap";
@font-face {
  font-family: valorantFont;
  src: url("font.0c88a349.ttf");
}

.header {
  height: 50vh;
  width: 100vw;
  justify-content: center;
  align-items: space-between;
  color: #fff;
  z-index: 10;
  flex-direction: column;
  font-family: Rubik, sans-serif;
  transition: all 1s .1s;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-40vh);
}

.header-head {
  height: 55vh;
  outline-offset: -.5rem;
  background-color: #fff;
  border-bottom-left-radius: 5rem;
  border-bottom-right-radius: 5rem;
  outline: 2px solid red;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 7vh;
  padding: 2rem .5rem .5rem;
  display: flex;
}

.header-head-maps {
  height: 30vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.maps-select {
  height: 30vh;
  width: 30vw;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  transition: all .1s .1s;
  display: flex;
  overflow: hidden;
}

.maps-select:hover {
  cursor: pointer;
  transition: all .1s .1s;
  transform: scale(1.02);
}

.maps-select-header {
  color: #fff;
  text-align: center;
  height: 4rem;
  width: 90%;
  outline-offset: -.5rem;
  background-color: #000;
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
  outline: 1px solid red;
  padding-top: 1rem;
  font-family: valorantFont, sans-serif;
  font-size: 3rem;
  font-weight: 500;
}

.map-select-body {
  height: 30vh;
  width: 90%;
  background-color: #fff;
  border-bottom-left-radius: 2rem;
  overflow: hidden;
}

.map-select-body-image {
  width: 100%;
}

.logo-div {
  width: 100%;
  height: 8vh;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
}

.logo-div-image {
  height: 100%;
}

.slide-down {
  height: 5vh;
  width: 15%;
  outline-offset: -.3rem;
  background-color: #000;
  border-bottom-left-radius: 6rem;
  border-bottom-right-radius: 6rem;
  outline: 1px solid #fff;
  justify-content: center;
  align-self: center;
  align-items: center;
  display: flex;
}

.preetam-singh {
  color: red;
  font-family: valorantFont, sans-serif;
  font-weight: 400;
}

.leaflet-name {
  color: green;
  font-family: valorantFont, sans-serif;
}

.body {
  width: 100vw;
  height: 95vh;
  justify-content: center;
  align-items: center;
  margin-top: 5vh;
  display: flex;
  overflow: hidden;
}

.map {
  height: 95vh;
  width: 50vw;
  z-index: 8;
}

.info-button {
  color: #fff;
  outline-offset: .5rem;
  background-color: red;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  outline: 1px solid red;
  padding: .5rem;
  font-size: 2.1rem;
  font-weight: 300;
}

.info-button:hover {
  cursor: pointer;
  transition: all .1s .1s;
  transform: scale(1.1);
}

.absolute-info {
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #00000091;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  top: 0;
}

.info-box {
  height: 100vh;
  width: 60vw;
  outline-offset: -1rem;
  background-color: #fff;
  border-top-left-radius: 15rem;
  border-bottom-right-radius: 15rem;
  outline: 3px solid red;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  overflow: hidden;
}

.close-info {
  width: 90%;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.close-button {
  color: #fff;
  outline-offset: .5rem;
  background-color: red;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  outline: 1px solid red;
  padding: .5rem;
  font-family: Rubik, sans-serif;
  font-size: 2rem;
  font-weight: 400;
}

.close-button:hover {
  cursor: pointer;
  transition: all .1s .1s;
  transform: scale(1.1);
}

.info-box-paragraph {
  text-align: center;
  color: #fff;
  width: 60%;
  background-color: red;
  border-top-left-radius: 5rem;
  border-bottom-right-radius: 5rem;
  padding: 2rem;
  font-family: Rubik, sans-serif;
  font-size: 2.1rem;
  font-weight: 300;
}

.credit {
  text-align: center;
  height: 4vh;
  background-color: #bebebe;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  padding-left: 2rem;
  padding-right: 2rem;
  font-family: valorantFont, sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
  display: flex;
}

.panel {
  width: 50vw;
  height: 90vh;
  z-index: 9;
  outline-offset: -.5rem;
  background-color: #fff;
  border-top-right-radius: 5rem;
  border-bottom-right-radius: 5rem;
  outline: 2px solid red;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12vh;
  margin-top: 5rem;
  padding-top: 5vh;
  transition: all .5s .1s;
  display: flex;
}

.panel-get-position {
  color: #fff;
  outline-offset: .5rem;
  height: 8vh;
  text-align: center;
  width: 30vw;
  background-color: red;
  border-top-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
  outline: 3px solid red;
  padding-top: .5rem;
  font-family: Rubik, sans-serif;
  font-size: 5vh;
  font-weight: 300;
  transition: all .5s 50ms;
}

.panel-get-position:hover {
  cursor: pointer;
  transition: all .5s 50ms;
  transform: scale(1.1);
}

.form-div {
  width: 100%;
  height: 8vh;
  justify-content: center;
  align-items: center;
}

.position-form {
  width: 100%;
  justify-content: space-evenly;
  gap: 3rem;
  display: flex;
}

.text-input {
  width: 50%;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  padding-top: .25rem;
  padding-left: 1rem;
  line-height: 1.5;
}

.submitButton {
  color: #fff;
  outline-offset: .5rem;
  background-color: red;
  border-style: solid;
  border-color: #fff0;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  outline: 1px solid red;
  padding: .5rem;
  font-size: 2.1rem;
  font-weight: 300;
  transition: all .1s .1s;
}

.submitButton:hover {
  cursor: pointer;
  transition: all .1s .1s;
  transform: scale(1.1);
}

.popup {
  color: red;
}

.logs {
  color: #fff;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  font-family: valorantFont, sans-serif;
  font-size: 3rem;
  display: flex;
}

.logs-header {
  text-align: center;
  color: #fff;
  width: 100%;
  height: 5vh;
  background-color: #000;
  border-radius: 5rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: 4vh;
}

.logs-body {
  height: 60vh;
  padding: 2rem;
  overflow: scroll;
}

.pane {
  width: 100%;
  outline-offset: .5rem;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  outline: 1px solid red;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding: 1rem;
  font-family: Rubik, sans-serif;
  font-size: 2rem;
  transition: all .1s .1s;
  display: flex;
}

.note-text {
  width: 100%;
  text-align: left;
}

.note {
  width: 70%;
  color: #000;
  background-color: #fff;
  border-radius: .5rem;
  font-size: 1.75rem;
}

.coords {
  width: 35%;
  font-size: 1.75rem;
  font-weight: 500;
}

.coords-text {
  width: 100%;
  text-align: right;
}

.delete-button {
  width: 5%;
  height: 100%;
  padding-left: .5rem;
  transition: all .5s .1s;
}

.delete-button:hover {
  cursor: pointer;
  transition: all .1s .1s;
  transform: scale(1.1);
}

.note-imp {
  width: 100%;
  color: #000;
  text-align: center;
  background-color: #d3d3d3;
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: Rubik;
  font-size: 2rem;
  font-weight: 300;
}

/*# sourceMappingURL=index.748ad148.css.map */