html,
body,
app-root {
  min-height: 100vh;
  scroll-behavior: smooth;
}

body {
  padding-top: 50px;
  padding-bottom: 100px;
}

.modal-custom {
  z-index: 1060;
}

.modal-background {
  top: 0;
  right: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 1049;
}

.modal-background-loading {
  top: 0;
  right: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 1056 !important;
}

.toast-container {
  z-index: 1400 !important;
}

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
  box-shadow: 0 6px 48px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .09) !important
}

input.form-control,
ng-select.form-control,
textarea.form-control {
  border-color: #e9edf1 !important;
  /* background-color: #eff4f8 !important; */
}

input.form-control:focus,
ng-select.form-control:focus,
textarea.form-control:focus {
  background-color: #f7f7c5 !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #E83A30 !important;
  background-color: #eff4f8 !important;
}


/* ==========================================
select component
 -------------------------------------------*/

.ng-select,
.ng-value-container {
  height: auto !important;
  min-height: calc(1.6em + 1.6rem + 2px) !important;
  padding: 0;
  align-items: center;
}

.ng-dropdown-panel .scroll-host {
  padding: 0;
}

.ng-dropdown-panel .form-control .ng-select-bottom {
  padding: 1px 5px;
}

.ng-select.ng-select-multiple .ng-select-container {
  border: 0;
  background: transparent;
  padding: 0rem 1rem !important;
}

.ng-select.ng-select-single .ng-select-container,
.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container,
.ng-dropdown-panel.ng-select-bottom {
  min-height: calc(1.6em + 1.6rem + 2px) !important;
  border: 0;
  background: transparent;
  padding: 0.5rem 1rem;
  /* z-index: 1090; */
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
  margin-bottom: 0px !important;
}

.ng-dropdown-panel .ng-select-multiple .form-control .ng-select-bottom {
  padding-left: 0;
}

.ng-dropdown-panel .scroll-host {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(31, 45, 65, 0.4) !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled {
  background: #edf1f7 !important;
  color: #d3d6da !important;
}

.ng-select.ng-select-single .ng-select-container .ng-value-container {
  overflow: hidden;
}

.ng-select .ng-select-container .ng-value-container .ng-input>input {
  min-height: calc(1.5em + 1rem + 2px);
  padding-top: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0;
  align-items: center;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
  position: initial !important;
  height: calc(1.4em + 1.4rem + 2px);
  border: 0;
  background: transparent;
  padding: 0.5rem 1rem;
}

.ng-select .form-control {
  height: auto !important;
  min-height: calc(1.5em + 1rem + 2px) !important;
}

/* map */
:host {
  display: flex;
}

mgl-map {
  display: block;
  width: 100%;
  height: 100%;
}

.zone-shadow {
  border-radius: 50%;
  margin: 11px;
  height: 300px;
  width: 300px;
}

.zone {
  background: rgba(255, 0, 75, 0.3);
  border: 1px solid rgba(255, 0, 75, 1);
  border-radius: 50%;
  height: 300px;
  width: 300px;
  transform: scale(1);
  animation: pulse-zone 2s infinite;
}

@keyframes pulse-zone {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(255, 0, 75);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

.pin-shadow {
  border-radius: 50%;
  -webkit-box-shadow: 11px 10px 23px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 11px 10px 23px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 11px 10px 23px 1px rgba(0, 0, 0, 0.75);
  margin: 11px;
  height: 30px;
  width: 30px;
}

.pin {
  background: #ff004b;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  transform: scale(1);
  animation: pulse-pin 2s infinite;
}

@keyframes pulse-pin {
  0% {
    transform: scale(0.95);
    border: 3px rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 0 #ff004b;
  }

  70% {
    transform: scale(1);
    border: 2px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
  }

  100% {
    transform: scale(0.95);
    border: 1px rgba(0, 0, 0, 1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

.profile-submenu {
  color: #a8a3b9;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: .2rem;
  padding: .3rem .4rem;
  text-transform: uppercase;

}