@keyframes loading {
  0% {
    transform: translateY(-50%) rotate(0);
  }
  100% {
    transform: translateY(-50%) rotate(1turn);
  }
}
@keyframes leafanim {
  50% {
    filter: hue-rotate(312deg) saturate(1.2);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-family: "Manrope", sans-serif;
}

button {
  background: transparent;
  cursor: pointer;
}

html {
  font-size: 63%;
  box-sizing: border-box;
}

body {
  display: flex;
  color: #ececec;
  font-weight: 400;
  line-height: 1.6;
  overscroll-behavior-y: none;
  background-color: #fff;
}

a:link,
a:visited {
  color: #ffb545;
}

.logo {
  height: 5.2rem;
  align-self: center;
  margin-bottom: 3rem;
}

.swal2-popup {
  font-size: 1.5rem;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #131214;
  display: none;
  place-items: center;
  z-index: 10;
}
.loading::before {
  content: "";
  width: 48px;
  height: 48px;
  border: 4px solid #EAE6F2;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: loading 0.5s linear infinite;
}

div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-noanimation {
  background: rgba(59, 63, 67, 0.99);
}

.workout__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.workout__buttons .workout__delete--btn {
  color: #fe0000;
}
.workout__buttons .workout__edit--btn {
  color: #ffb545;
}
.workout__buttons > * {
  font-size: 1.7rem;
  transition: all 0.2s ease;
}
.workout__buttons > *:hover {
  transform: scale(1.1);
}

.delete__all {
  margin-bottom: 1rem;
  padding: 1.1rem 2rem;
  align-self: flex-start;
  border-radius: 5px;
}

.delete__all--btn {
  background-color: #fe0000;
  font-size: 1.5rem;
  color: #ececec;
  font-weight: 600;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
  font-size: 1.3rem;
  color: #aaa;
}
.footer .link:visited,
.footer .link {
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  justify-content: center;
}
.footer .api__logo {
  transition: 0.7s all;
  animation: leafanim 3s ease 3s 1 normal none;
  width: 80px;
}
.footer .api__logo:hover, .footer .api__logo:focus {
  filter: hue-rotate(-70deg) saturate(1.5);
}

.form {
  background-color: #42484d;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 5px;
  padding: 1.5rem 2.75rem;
  margin-bottom: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2.5rem;
  height: 9.25rem;
  transition: all 0.5s, transform 1ms;
}
@media only screen and (max-width: 992px) {
  .form {
    grid-template-columns: 1fr;
    height: 17rem;
  }
}
@media only screen and (max-width: 768px) {
  .form {
    grid-template-columns: 1fr 1fr;
    height: 10rem;
  }
}
@media only screen and (max-width: 576px) {
  .form {
    grid-template-columns: 1fr;
    height: 17rem;
  }
}
.form.hidden {
  transform: translateY(-30rem);
  height: 0;
  padding: 0 2.25rem;
  margin-bottom: 0;
  opacity: 0;
}
.form .form__row {
  display: flex;
  align-items: center;
  align-items: center;
}
.form .form__row .form__label {
  flex: 0 0 50%;
  font-size: 1.5rem;
  font-weight: 600;
}
@media only screen and (max-width: 992px) {
  .form .form__row .form__label {
    flex: 0 0 35%;
  }
}
.form .form__row--hidden {
  display: none;
}
.form .form__btn {
  display: none;
}

.form__input {
  width: 100%;
  padding: 0.3rem 1rem;
  font-family: inherit;
  font-size: 1.4rem;
  border-radius: 3px;
  background-color: rgb(214, 222, 224);
  transition: all 0.2s;
}
.form__input:focus {
  background-color: #fff;
}

#map {
  flex: 1;
  height: 100%;
  background-color: #aaa;
}

.workouts {
  list-style: none;
  height: 77vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0;
}
.workouts::-webkit-scrollbar {
  width: 0;
}
.workouts .workout--running {
  border-left: 5px solid #00c46a;
}
.workouts .workout--cycling {
  border-left: 5px solid #ffb545;
}
.workouts .workout {
  position: relative;
  width: 100%;
  background-color: #42484d;
  border-radius: 5px;
  padding: 1.5rem 2.25rem;
  margin: 2rem 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.75rem 1.5rem;
  transition: all 0.2s ease;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  z-index: 10;
}
@media only screen and (max-width: 1200px) {
  .workouts .workout {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 992px) {
  .workouts .workout {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .workouts .workout {
    grid-template-columns: 2fr 2fr 2fr 2fr;
  }
}
@media only screen and (max-width: 576px) {
  .workouts .workout {
    grid-template-columns: 1fr;
  }
}
.workouts .workout:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15;
  transform: translateY(-5px);
}
.workouts .workout .workout__title {
  font-size: 1.7rem;
  font-weight: 600;
  grid-column: 1/-1;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  justify-content: space-between;
}
.workouts .workout .workout__details {
  display: flex;
  align-items: baseline;
  align-items: baseline;
}
.workouts .workout .workout__details .workout__icon {
  font-size: 1.8rem;
  margin-right: 0.2rem;
  height: 0.28rem;
}
.workouts .workout .workout__details .workout__value {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}
.workouts .workout .workout__details .workout__unit {
  font-size: 1.1rem;
  color: #aaa;
  text-transform: uppercase;
  font-weight: 800;
}

.leaflet-popup .leaflet-popup-content-wrapper {
  background-color: #2d3439;
  color: #ececec;
  border-radius: 5px;
  padding-right: 0.6rem;
}
.leaflet-popup .leaflet-popup-content {
  font-size: 1.5rem;
}
.leaflet-popup .leaflet-popup-tip {
  background-color: #2d3439;
}

.running-popup .leaflet-popup-content-wrapper {
  border-left: 5px solid #00c46a;
}

.cycling-popup .leaflet-popup-content-wrapper {
  border-left: 5px solid #ffb545;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}
@media only screen and (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }
}
.wrapper .sidebar {
  display: flex;
  flex-direction: column;
  flex-basis: 59rem;
  background-color: #2d3439;
  padding: 3rem 5rem 2rem 5rem;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
@media only screen and (max-width: 768px) {
  .wrapper .sidebar {
    flex-basis: 34rem !important;
    height: 0;
  }
}
@media only screen and (max-width: 1200px) {
  .wrapper .sidebar {
    flex-basis: 48rem;
  }
}
@media only screen and (max-width: 992px) {
  .wrapper .sidebar {
    flex-basis: 40rem;
  }
}

.btngp_container {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  justify-content: center;
}

#btnSuccess,
#btnInfo,
#btnWarning,
#btnError {
  color: #fff;
  border-radius: 0.5rem;
  font-weight: 400 !important;
  font-size: 0.765rem;
  width: 90px;
  height: 36px;
  margin: 3px;
  cursor: pointer;
}
#btnSuccess p,
#btnInfo p,
#btnWarning p,
#btnError p {
  width: 400px;
  line-height: 1.5rem;
  text-align: center;
  margin: 0 auto;
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.toast-success,
.toast-info,
.toast-warning,
.toast-error {
  width: 380px !important;
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  border-radius: 1rem !important;
  background-color: #edf1fd;
  color: #01081e !important;
  border-color: transparent !important;
}
@media only screen and (max-width: 1200px) {
  .toast-success,
  .toast-info,
  .toast-warning,
  .toast-error {
    width: 310px !important;
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 992px) {
  .toast-success,
  .toast-info,
  .toast-warning,
  .toast-error {
    font-size: 1.1rem;
    width: 270px !important;
  }
}
@media only screen and (max-width: 768px) {
  .toast-success,
  .toast-info,
  .toast-warning,
  .toast-error {
    font-size: 1rem;
    width: 200px !important;
  }
}
@media only screen and (max-width: 576px) {
  .toast-success,
  .toast-info,
  .toast-warning,
  .toast-error {
    width: 250px !important;
  }
}

#toast-container > .toast-success {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKLSURBVHgBzZZNbtpAFMffjMFRQY28hFKpzg1gGZFKWGkqdZX2BHVOUHIC4AQ0J6g5QZVVpDTUqC10V3GDelGqSF3UG1cqgZm+GYIVbPAHoCp/CWY89sxP78289wbgP4tAShW+XugwyeiiP6Xc/VV9PkwzPxao2e+1fHbXBEqOgfEyztDCq5AecN4ZVQ+tuPUigY8H9hvOWHMpZLkc/LWiwEuBwqqcqrUJMBPWk+WN6alrGG4sULpQfWjjqzJsJDL0xsQIQmnws7y6294cJsTLeZW1g6MLwFK/a2JjwvZkFgfd+kogqgFbFuXQ0GxbCwFvrdNhHXHew3+Lz05pUNqD7MQMAYGT17AebTg6eGZMx+PWqhijVDme9zP+KOE1SItCixhVXom+oqp4sld4iHP/EEoLS/3LcsSqrnQVtsFXaFHret9wHvXtBkRvh1b81n3iA6eMrM4kBNw/Y1qZKrSyuEf8TGSUwucPNUwQTYiR4rE9HxgjPb/DGsISytiJRCHYyynNgn2hK5S+gxSaATMZJ/IrDvXip6uXP54e9QjjZ4xSw60YLu5bnCt9/cXKIlr/YGFY/MYmKkm7eBIr18YLRzzIxM7ZW0godL9k3Q2LuLqmKTs70n3ClbKKJBWRcQqLQJiex07kvFYafLRlCCQvWcKYjs+ed3RMPzcq+w6QYqEkLDxgP6uHe/Nn30JHlBEOLdiyRKwGnhdV+nJl4ZVhzTQXkoWH5eTuQCgOszdKXRRP2Fh86OXoaXA0BBSuzWKlFpciWJvFO5gYZKwGX0VeokTJwk1vkKRlS+Zb1hodHK2Mz0T3UlkrRflaVlEkhOMWkHMvT61lVqUGLsIvy+Q22WcyE8fZn2Wee6t/lXrvcWjggekAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-info {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJaSURBVHgBvVZNbtNQEJ55idd4hSphKnOCkhM0PQHpCUhuADsWLTgkQuwQJyCcoOEEpSfAnKBW6cK0m6wb+U1nXu04bdLkTRT1kxLnOR5/b/7eNwge2Dn61ybEN4agbRFiBAjlPgFM+HfK1xSJfuXDl7/XvQtXEh1fdvnyiT8xeAEzgKKfD3ZHjz6xlOjDeYzN4IQQXsNGYOLpzUH+9VX28B+zQPbx8i0FwZ/NyQQUI7/j+dFFZ2Er8wt5wKA5gW0CoZt/jn7WyxISRvGsKojt8cGEptNWFd46pEFw6kfG+SE6KBrQ4kW27mmu4FDqoVo7wrIaY/AB2Z6U/3USpZbsey8Troed44vujBDuSt8LSDgrJs63IvwNx4HS1IB46msmObEAfUR8RkTvVDnnVDTZoEPgD5cTgG9svPrUWG7babLZntJowl8Ze5hKv/Gttr817htdg+MIucT/D6NWPnjR4/PzLyhg+Bw2ur6jLrfPj9lKH53QgBI07xVqwnkH43KiACKlcnXVrYRUuOHvTGNUFMYRsj6qD3fRTWMsnfkayA6vv0RpudoHJSQdEtKxtwHvsGZ3LaECb3hsyrEg8zGoCiZMzkMkrV5iJlxVlfa9TCym9W5xLB/wRuE4HGE+iEZ8AKRrbRpl3ibirf1OQJ5esnflnFMLcMICXGxfgN1k12ABTh4IsNxA8NM3FaHoZ1IPU/dOGnGbRfVQexgsJXLvsL2r4e69PC8fEzm8UASikTFsAK7glJrTw3nPVhLOiJ9qEF4gllGfxZPbYE/kbH7UF23kX2fS1D6j/i3BTfaqkKQ1ngAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHbSURBVHgBxZZPTsJAFMa/NxDEjYJE1/UGcgOP4BEwARNXeAP0BMSVCzWNJxBPIDfQG8COhSSwJBH7fFNbaKV/ZsA/vwVppzPz5Zt58zHAH0OwZOCisjNHgxWmBYVe9RRTm/FWgiMXzpZHz/LoBE1DUly3EVWwoOSpTkRM43hzXMACY4eBu0HCp6m4PDR1aeywzOSmfKrYuDQSHN9LkTCOFw3Mr/I7DF9JUXt0E1vqzQQVqBN5ne41UdfFop+DtkqppDpmc+Wg3SFeKL5IsGeLfSNw4+02sgrrCn5zl0mhkN83U3DiqjZgtjc+ss95LlMF9TFgj63OmCbPZapgGZbuQsRlsO/mguu6W05KnYlkbvK3BIII24TUyFsR1O50iWNDdBgkuVwR/AF3IYmRFwtvXdIF5f/9ZOGH9UwmlDB/0RPn9Y0Ge8yhiLnIp8IiZCDm9/U81Y02LBzqUpbqMhG0Zv7B9YMz6MBfOrSJMDkyV8z8YNq/WKTuUgeJAZ2hxk+1Fi5rTTSIuWc2Zhl5Sh8DG3dQtLuYh+jIdFgYeTS+w4kieoQdQ3wVTF7RxNhmdopSNlaDAhyswexd8kDfLRG5LvwWUmTX1XO5VoYNemmJYbwnNnhAf7+FPv6DT2e/n0VFnPgUAAAAAElFTkSuQmCC") !important;
}
#toast-container > .toast-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIlSURBVHgB3VbBbtNAEH2zTugFFIPgwAlzA4mK8AdrvgC+APiSKl/S9AvoH8SfEEQP3PCNAwjcA6IQeYcdYxtvbK/jNr30SVG86519npk3swvcdNCuC7880dF0Ck1QzxVMKHMGKmOYD5sNkoefknSXfQYJvz7TekJ0xIAe2CjJwSf3PybLgXXd+BzpcHZHHQP8CiPAoOWfjVn0edxJKOE7mNLKPka4HNLfG467SOkayGpSCvjF3XWSNSfV9qpbU3W0BzJBxLmkxIXj4bdD/VaBjrFH5Mzxg7MkqcaOhwHwBuOR+V4GVuHNcU0oubMK032GNh+P5Wdjsq4nGet6vh/619OXj1qEUtQeI/EiswJISXFckArZhGMRxcUFvPhJJm4REmPusQnZ0OrHXIdCIKQVmdTrwYTee2xBStV7T/7PIvQZWY/mJWlcSb1oDrdtCZH3Y6HIzOpnjIFxh2E4eofGcvarrZkz8awZXkdIXd/J6rxFyH6jzJK9rsgkjNs5hac8mMy6RRgESDyEECU6OStzKuVk30lwezXQ3NvpNN8Pte2h/bVYeuEX1zYYyb2zVbssBDljMWA+jszCEJ80xw7hv57Hp9gTCLzcPpBboqYA7+xfiqsjtc25FbEWYaG6oFBdiiuQyR7SCgcJS9LCgOHGfxfYMJ6WB2/a/X4AxRnJ9tgir3oLNdpL1KJ59l2KsIIt8ijP7TWRixqcldbn0jDGXBNvPv4C3QjuTqveJGAAAAAASUVORK5CYII=") !important;
}