/* asset-manager*/

#asset-manager-interface {
  max-width: 1440px;
  margin: 0 auto;
}

#asset-manager-hint {
  font-size: 0.9rem;
  margin-bottom: 0rem;
  margin-top: 0rem;
  /* min-height: 6.2rem; */
}

#asset-manager-button-and-map-wrapper {
  margin-top: -0.75rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 3fr; /* Button:Map ratio */
  gap: 0.5rem;
}

@media (max-width: 1200px) {
  #asset-manager-button-and-map-wrapper {
    grid-template-columns: 1fr 2fr;
  }
}
@media (max-width: 768px) {
  #asset-manager-button-and-map-wrapper {
    grid-template-columns: 1fr;
  }
}

#asset-manager-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
}

#viewDiv {
  border: 2px solid rgb(148, 148, 148);
  position: relative;
  width: 100%;
  height: 20rem;
  display: flex;
}

#mode-status-banner {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  text-align: center;
  font-weight: bold;
  font-size: 0.8rem;
  pointer-events: none;
  white-space: nowrap;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mode-status-banner-select {
  background: #a8d4e8;
  color: #000;
}

.mode-status-banner-sketch {
  background: #174054;
  color: #fff;
}

#mode-status-text-span {
  display: flex;
  align-items: center;
}

#layer-data-container {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr 1fr;  */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem 1rem;
  align-items: start;
  z-index: 0;
}

#layer-data-container > :only-child {
  grid-column: 1 / -1;
}

 /* @media (max-width: 1440px) {
  #layer-data-container {
    grid-template-columns: 1fr 1fr ;
  }
} */
/*@media (max-width: 992px) {
  #layer-data-container {
    grid-template-columns: 1fr 1fr;
  }
} */
/* @media (max-width: 768px) {
  #layer-data-container {
    grid-template-columns: 1fr;
  }
} */

#layer-data-container::before {
  display: none !important;
  content: none !important;
}

.stat-title {
  padding-top: 0 !important;
  padding-bottom: 0.25rem !important;
  min-height: 32px;
}

.layer-data-display-title-div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.zoom-alert-button {
  font-size: 12px;
}
.zoom-alert-button:hover {
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.1),
    0 6px 10px 0 rgba(0, 0, 0, 0.1);
  scale: 102%;
  /* will-change: transform; */
}
.zoom-alert-button:active {
  transform: scale(0.95);
}

.layer-data-display-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.layer-data-display-button-row {
  margin-left: auto; /* ensures it hugs the right if needed */
  display: flex;
  gap: 0.5rem; /* space between buttons */
}

.max-asset-allowed-message {
  margin-top: 0.25rem;
}

.toggleLayerVisibilityButton {
  font-size: 12px;
  background-color: #eeeeee;
  transition: transform 0.1s;
  padding-left: 6px;
  padding-right: 6px;
  min-width: 60px;
}

.toggleLayerVisibilityButton:hover {
  transform: scale(1.02);
  background-color: #f9f9f9;
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.1),
    0 6px 10px 0 rgba(0, 0, 0, 0.1);
}

.toggleLayerVisibilityButton:active {
  transform: scale(0.95);
}

.enable-sketch-button {
  font-size: 12px;
  background-color: #eeeeee;
  /* transition: transform 0.1s; */
  padding-left: 6px;
  padding-right: 6px;
  min-width: 60px;
  color: #174054;
  visibility: hidden;
  border: 2px solid #174054;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.enable-sketch-button:hover {
  transform: scale(1.02);
  background-color: #174054;
  color: white;
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.1),
    0 6px 10px 0 rgba(0, 0, 0, 0.1);
  border: #333 2px solid;
}

.sketch-button-shadow {
  box-shadow: 2px 2px 2px 2px #174054;
}

.sketch-button-disabled {
  pointer-events: none;
}

.invisible-button {
  display: none;
}

.remove-asset-btn {
  gap: 0.25rem;
  padding: 0.25rem !important;
  padding-right: 0.35rem !important;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.remove-asset-btn:hover {
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.1),
    0 6px 10px 0 rgba(0, 0, 0, 0.1);
}

.remove-asset-btn:active {
  transform: scale(0.95);
}

.select-border {
  border: 2px solid #a8d4e8 !important;
  box-sizing: border-box;
}

.sketch-border {
  border: 2px solid #174054 !important;
  box-sizing: border-box;
}

.assets-valid-border {
  border: 2px solid #538400 !important;
  box-sizing: border-box;
}

.select-shadow {
  box-shadow: 4px 4px 2px 2px #a8d4e8 !important;
}

.sketch-shadow {
  box-shadow: 4px 4px 2px 2px #174054 !important;
}

.assets-valid-shadow {
  box-shadow: 4px 4px 2px 2px #538400 !important;
}

#accessibility-icon {
  margin-right: 5px;
}

#edit-asset-selection-button {
  margin: 5px;
}
#cancel-asset-selection-button {
  margin: 5px;
}

/* Modal styles */
.modal::backdrop {
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
}

.modal {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid #888;
  width: 60%;
  border-radius: 5px;
  max-width: 800px;
}

.modal-header {
  margin: -16px -16px 0 -16px;
  background-color: #efefef;
  padding: 14px;
}

.modal-body {
  padding: 10px 0 10px 0;
  margin-top: 20px;
}

.close {
  color: #888;
  float: right;
  font-size: 24px;
  font-weight: bold;
  border: none;
  margin-top: -12px;
  margin-right: -12px;
}

.close:hover {
  cursor: pointer;
  color: black;
}

/* class to disable scrolling */
.no-scroll {
  overflow: hidden;
}

#accomodation-button {
  margin: 0 !important;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  font-size: 1rem;
}
#accomodation-button:hover {
  transform: scale(1.02); /* subtle */
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.1),
    0 6px 10px 0 rgba(0, 0, 0, 0.1);
  
  /* will-change: transform; */
}

#accomodation-button-hint {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: bold;
  font-style: italic;
}

#accomodation-title {
  margin: 0;
  font-size: 1.25rem;
  border-bottom: 0;
  box-shadow: 0 0 0 0;
}

#accomodation-subtitle {
  margin: 0;
}

.accessible-accommodation-num-assets-required {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 1rem;
  font-size: 0.875rem;
}

.accessible-accommodation-input {
  margin-left: 1rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.add-asset-input-button {
  margin-left: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.map-layer-data-container {
  box-sizing: border-box;
  margin: 0;
}

asset-manager-map-layer-data-display li {
  font-size: 0.8rem;
  padding: 0.35rem !important;
}

.asset-list-wrapper {
  margin-top: 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid #cccccc;
  background: #e0e0e0;
  overflow: hidden;
}

.list-group.chosen-asset-data-list,
.list-group.created-asset-data-list {
  min-height: 4rem;
  max-height: 4rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  background: transparent;
  border: none;
  border-radius: 0;
}

.chosen-asset-data-list li,
.created-asset-data-list li {
  background: #f0f0f0;
  margin-bottom: 0.25rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #cccccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.asset-list-item-content-span {
  flex: 1 1 auto; /* <-- make label take all available space */
  min-width: 0; /* <-- add this for text-overflow to work if needed */
}

#asset-manager-mode-toggle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mode-button {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  border: black 1px solid;
  display: flex;
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.mode-button:hover {
  transform: scale(1.02);
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.1),
    0 6px 10px 0 rgba(0, 0, 0, 0.1);
}

.mode-button:active {
  transform: scale(0.95);
}

.mode-button-icon {
  margin-right: 0.5rem;
}

#select-mode-button {
  background-color: #a8d4e8;
}

#sketch-mode-button {
  background-color: #174054;
  color: white;
}

.pointer-events-none {
  pointer-events: none;
}

/* media queries */
@media screen and (max-width: 767px) {
  #layer-data-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media screen and (max-width: 1280px) {
  .modal {
    width: 90%;
  }
}

arcgis-sketch#asset-manager-sketch {
  position: absolute;
  top: 0.4rem;
  left: -1.12rem;
}

arcgis-search#asset-manager-arcgis-search {
  position: absolute;
  top: -1.04rem;
  right: -1.04rem;
}

@media screen and (max-width: 992px) {
  #asset-manager-button-and-map-wrapper {
    margin-top: 1.5rem;
  }
  #mode-status-banner {
    left: -0.12rem;
    top: -1.68rem;
  }
  arcgis-sketch#asset-manager-sketch {
    top: -1.12em;
    left: -1.12rem;
  }
  .mode-status-icon {
    margin-top: 0.15rem;
  }
}

@media screen and (max-width: 884px) {
  arcgis-search#asset-manager-arcgis-search {
    top: 2.14rem;
  }
}

@media screen and (max-width: 768px) {
  #asset-manager-button-and-map-wrapper {
    margin-top: 0.5rem;
  }
}

/* @media screen and (max-width: 600px) {
  arcgis-search#asset-manager-arcgis-search {
    top: 2.14rem;
  }
} */

@media screen and (max-width: 500px) {
  arcgis-search#asset-manager-arcgis-search {
    left: -1.04rem;
  }
}

.asset-list-item-content-span {
  text-decoration: underline;
  color: #0645ad;
  cursor: pointer;
}