body {
  margin: 0;
}

.hcMap{
  overflow: hidden;
}

.hcMap .legendHeader{
  text-align: center;
  font-weight: bold;
  height: 24px;
  border-bottom: 1px solid #CCCCCC;
  line-height: 24px;
  min-width: 150px;
}

.hcMap_Legend_Wrapper{
  position: absolute;
  top:167px;
  left: 0px;
  height: calc(100% - 200px);
  border: 1px solid #CCCCCC;
  background-color: white;
  color: black;
}

.hcMap .legendToggler{
  background-image: url(./openlayer/img/layer-switcher-maximize.png);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  width: 18px;
  height: 18px;
  z-index: 1000;
  left: 0px;
  top: 140px;
  position: absolute;
  cursor: pointer;
}

.hcMap .hideLegend{
  background-image: url(./openlayer/img/layer-switcher-minimize.png);
  width: 18px;
  height: 18px;
  background-color: #00008B;
  position: absolute;
  top: 3px;
  cursor: pointer;
}

.hcMap .imgContainer{
  height: calc(100% - 25px);
  overflow: auto;
}

.hcMap .hidden {
  display: none;
}

.hcMap_Logo{
  position: absolute;
  right: 2px;
  bottom: 0;
  display: flex;
  width: 45px;
  justify-content: space-between;
  align-items: center;
}

.hcMap_Copyright {
    padding-right: 55px;
    text-align: right;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.hcMap .olControlLayerSwitcher .layersDiv .dataLayersDiv {
    font-size:10px!important;
    overflow: auto;
    height: calc(100% - 35px);
    width: calc(100% - 20px);
}

.hcMap .olControlLayerSwitcher .layersDiv .dataLayersDiv label{
      display: inline-block!important;
      font-size:10px!important;
}

.hcMap .olControlLayerSwitcher{
  width: 200px!important;
}

.hcMap .olMap img{
  max-width: 10000px!important;
}

.hcMap .layerLegendContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hcMap .layerLegendContainer>label{
  background-color: #595959;
  width: calc(100% - 20px);
  color: white;
  margin: 5px;
  padding: 5px;
}
.hcMap .osmContributors{
  position: absolute;
  right: 5px;
  bottom: 35px;
  border-radius: 4px;
  padding: 2px;
  z-index: 10;
  background: rgba(0,60,136,.3);
  font-size: 12px;
}

.waitOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  pointer-events: all;
  animation: color-change 2s infinite;
  cursor: wait;
}

@keyframes color-change {
  0% { background-color: rgba(128, 128, 128, 0); }
  50% { background-color: rgba(64, 64, 64, 0.5); }
  100% { background-color: rgba(128, 128, 128, 0); }
}