/*
    Part of     :   OpenTel - opentel.co.za
    By          :   Emmanuel Adigun (emmanuel@zignal.net)
    Date        :   25 Jan 2023
*/

:root {
  --calcite-ui-foreground-1:  green !important;
}

div.map_wrapper { height:100vh; }

div.map_wrapper,
div#map {
  padding-left: 0px;
  padding-right: 0px;
}

div#map,div#arc_map,
div.opentel-map {
  position: relative; 
  overflow: hidden;
  height: 100vh !important;
}

div.row-map {
  position: relative;
}

div.over_map,
div#mapSearchWrapper {
  position: absolute; top: 60px; right: 20px; z-index: 99;
  align-items: flex-end !important;
}

div#mapSearchWrapper-suggest-menu ul {
  z-index: 199 !important;
}

form.search-form {
  justify-content: flex-end;
}

form.search-form div.search-name { width: 400px !important; }

div.card-map,div.card-map div.card-body { padding: 0px !important; }
div.card-map div.card-body { padding: 5px !important; }
div.map-row i.fa-map-marker { color: #0061f2; }

div.map-row button.btn-address {
  background-color: #0061f2;
  color: #fff;
}


div.file-input-wrapper {
    position: relative;
    display: inline-block;
}

div.file-input-wrapper input.inputs {
    position:absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index:999;
}

div.file-input-wrapper .btn-fileinput-icons {
    position:relative;
    border-color: transparent;
    border-radius: 0;
}

div.sites_over_map {
  position: absolute; 
  top: 10px; 
  right: 10px; z-index: 99;
}

.converage-title  h2{
  text-align: center;
  margin-bottom: 10px;
}


button.coverage-button {
  padding: 9px 9px;
  background-image: linear-gradient(to right,#d1245a 0%,#ff0050 80%,#ff0050 100%);
  width:  10% !important;
}

button.coverage-button:hover {
  background-image: linear-gradient(to right,#d1245a 0%,#ff0050 80%,#ff0050 100%);
}


div.coverage-map-wrapper {
  min-height: 400px;
  margin-top: 10px;
}

div#mapSearchWrapper {
  /*position: absolute;
  top: 40px;
  left:  50%;
  z-index: 99;*/
  background-color: #fff !important;
  border-radius: .35rem;
  border-top-right-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem;

}

div.coverage_map {
  position: relative;
  overflow: hidden;
  height: 100vh !important;
}


div.search-wrapper {
  width:  80% !important;
  top: 15%;
  left:  10%;
}

div.esri-component.esri-search.esri-widget,
div.search-wrapper {
  display: none;
}

div#arc_search_input_widget div.esri-component.esri-search.esri-widget {
  width: 100% !important;
  background-color: transparent !important;
}

div#arc_search_input_widget input.esri-input.esri-search__input {
  width: 100%;
  height: 54px;
  border: transparent;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: none;
  padding: 6px 20px;
  outline: none;
  color: #495057;
  border-radius: 5px;
  transition: 0.3s;

}


.esri-search__input, 
.esri-search__submit-button, .esri-search__clear-button {
  height: 50px !important;
}

.esri-search__submit-button, 
.esri-search__clear-button {
  width: 50px !important;
}

.esri-search__submit-button {
  background-image: linear-gradient(to right,#d1245a 0%,#ff0050 80%,#ff0050 100%) !important;
}

div#arc_search_input_widget input.esri-input.esri-search__input {
  border-radius: .35rem;
  border-bottom-right-radius: 0rem;
  border-top-right-radius: 0rem;
  border: 3px solid rgba(110,110,110,.3);
  color:  #111;
  font-weight: bold;
  border-color: #ff0050;
}

input.esri-input.esri-search__input::placeholder{
    color:#211e3b;
}‍‍‍

.esri-search__submit-button {
  background-color: rgba(0,0,0,0.75) !important;
  color: #fff;
  border-top-right-radius: 0.35rem;
  border-bottom-right-radius: 0.35rem;
}

.esri-menu__list-item {
  text-align: left !important;
}

.esri-menu__list.esri-search__suggestions-list {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

div#arc_search_input_widget input.esri-input.esri-search__input:focus {
  border-color: #ff0050 !important;
}

.mapView {
height: 400px;
border: 0px solid #a8a8a8;
border-radius: 5px;
}


table.popup {
    color: #000 !important;
    font-size: 12px !important;
    border-radius: 5px;
}


table.popup td, 
table.popup th {
  border: 1px solid rgba(173,173,173,.4) !important;
}

table.popup td.package-not-found {
  width:  40%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

table.popup td.package-not-found.first {
  width:  60% !important;
  text-align: left !important;
}


.esri-view-width-large .esri-popup__main-container {
  width: 600px;
  height: 100%;
}

h2.esri-popup__header-title-packages{
  padding-left: 2px !important;
}

p.esri-popup__header-title-text {
  margin-left: 2px;
  padding:  10px;
  padding-bottom: 0px;
  padding-top: 0px;
  margin-bottom: 0px !important;
  color: #111 !important;
  font-weight: bold !important;
}

h3.esri-popup__header-title-packages {
  padding-left: 6px !important;
  font-weight: normal !important;
  margin: 0px !important;
  text-align: left !important;
  font-size: 12px !important;
}

.page-area div.section {
  padding: 15px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 5px;
  border-radius: 10px;
}



/* ESRI UI StYLING */
.sassy-theme .esri-widget,
.sassy-theme .esri-widget--button,
.sassy-theme .esri-menu,
.sassy-theme .esri-popup__main-container,
.sassy-theme .esri-popup .esri-popup__pointer-direction,
.sassy-theme .esri-popup .esri-popup__button,
.sassy-theme .esri-button,
/*.sassy-theme .esri-input,*/
.sassy-theme .esri-widget a,
.esri-widget__heading.esri-popup__header-title:hover,
.esri-popup__header-container.esri-popup__header-container--button:hover {
  color: #fff;
  background-color: #1498d7;

  color: #1498d7;
  background-color: #ffffff;
}

.sassy-theme .esri-widget--button:focus,
.sassy-theme .esri-widget--button:hover,
.sassy-theme .esri-menu li:focus,
.sassy-theme .esri-menu li:hover {
  background-color: #699;
  color: #fff;
}

.sassy-theme .esri-button:focus,
.sassy-theme .esri-button:hover {
  color: #fff;
}

.esri-popup__content {
  --calcite-ui-background: #fff !important;
  color: #000 !important;
  border-radius: 5px;
}


.esri-popup__header-title-text {
  color: #000 !important;
}

div.popup-table-wrapper {
  margin: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

div.popup-table-wrapper-parent {
  position: relative;
  height: 300px;
}

div.popup-table-wrapper-parent-empty {
  position: relative;
  height: 80px;
}

.esri-popup__content-empty {
  height: 200px;
}

.esri-popup__main-container.esri-widget.esri-popup--is-collapsible,
.esri-popup__main-container {
  height: 400px !important;
  max-height: 400px !important;
  width: 600px !important;
}

.esri-popup__content {
  height: 500px;
  overflow: hidden;
}

.esri-popup__content-empty {
  height: 180px;
}