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

:root {
  --clr-main: #1c75ba;
  --clr-main-active: #1c75ba;
  --clr-secondary: #8cc740;
  --clr-accent: #4f3b6b;
  --clr-accent-active: #4f3b6b;
  --clr-button-main: #1c75ba;
  --clr-button-main-active: #0a5d9d;
  --clr-bg-light: #f0e0c91c;
  --clr-bg-light-gray: #f0e0c9;
  --clr-main-heading: #018748;
  --clr-text: #304e4a;
}

body {
  background-color: var(--clr-bg-light);
  font-family: "Roboto", sans-serif;
}

h1 {
  color: var(--clr-main-heading);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

p {
  color: var(--clr-text);
}

h2 {
  color: var(--clr-main);
  font-weight: 700;
}

h3 a,
a {
  color: var(--clr-accent);
}
hr {
  color: var(--clr-secondary);
}
a:hover {
  color: var(--clr-accent-active);
}

select {
  cursor: pointer;
}
.lang-select {
  background-color: var(--clr-bg-light);
}
label {
  margin-bottom: 0.2rem;
}
#map {
  width: 100%;
  height: 750px;
}
#locationMap {
  width: 100%;
  /*height: 340px;*/
}

.bg-light-gray {
  background-color: var(--clr-bg-light-gray);
}
.custom-card {
  box-shadow: 0 1px 3px 0 #00000012;
  border-radius: 8px;
  background-color: white;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--clr-button-main);
  --bs-btn-border-color: var(--clr-button-main);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--clr-button-main-active);
  --bs-btn-hover-border-color: var(--clr-button-main-active);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--clr-button-main-active);
  --bs-btn-active-border-color: var(--clr-button-main-active);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.125);
}

.btn-outline-primary {
  --bs-btn-color: var(--clr-button-main);
  --bs-btn-border-color: var(--clr-button-main);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--clr-button-main-active);
  --bs-btn-hover-border-color: var(--clr-button-main-active);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--clr-button-main-active);
  --bs-btn-active-border-color: var(--clr-button-main-active);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.125);
  --bs-gradient: none;
}

#message {
  padding: 30px 0px;
  width: 435px;
  max-width: 90vw;
  border-radius: 7px;
}

#message dialog {
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
  border-radius: 7px;
  border-color: transparent;
  position: absolute;
  top: 70px;
  box-shadow: 0 0px 20px 150vh #1e1e1e96;
}

.gm-style-iw-d {
  overflow: unset !important;
}

.gm-style .gm-style-iw-c {
  padding-left: 0 !important;
}

.cluster span {
  color: white;
  transform: translate(-1px, -1px);
  display: block;
  font-size: 10px;
}

.cluster img {
  width: 37px;
  top: 7px;
  left: 9px;
}

.add_fountain_btn {
  padding: 10px 15px;
}

.create_team a {
  color: #1c75ba;
}

/* .p-box {
  background-color: #31a5ff1f;
  width: max-content;
  max-width: 99%;
  padding: 10px 30px 10px 10px;
  margin: 20px auto;
  border-radius: 4px;
  display: flex;
  text-align: left;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  border-radius: 16px;
  box-shadow: rgb(0 0 0 / 31%) 0px 25px 18px -20px;
} */
.logo_counter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo_wrapper {
  width: max-content;
  padding: 0;
}

.p-box {
  background-color: #31a5ff1f;
  width: max-content;
  max-width: 99%;
  padding: 20px 40px;
  border-radius: 4px;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  border-radius: 16px;
  box-shadow: rgb(0 0 0 / 31%) 0px 25px 18px -20px;
}

.p-box p {
  margin-bottom: 0;
}

.p-box span {
  color: var(--clr-main);
  font-size: 19px;
}

@media only screen and (max-width: 770px) {
  h1 {
    text-align: left;
  }
  .p-box {
    margin: 20px 0;
    padding: 10px 20px;
    font-size: 13px;
  }
  .p-box span {
    color: var(--clr-main);
    font-size: 16px;
  }

  .logo_counter {
    justify-content: flex-start;
  }
}