:root{

  --inciweb-color-primary:#2f6db5;
  --inciweb-color-primary-hover:#255892;

  --inciweb-color-white:#ffffff;
  --inciweb-color-black:#000000;

  --inciweb-color-gray-100:#f2f2f2;
  --inciweb-color-gray-200:#dddddd;
  --inciweb-color-gray-300:#aaaaaa;
  --inciweb-color-gray-400:#999999;
  --inciweb-color-gray-500:#777777;
  --inciweb-color-gray-700:#333333;

  --inciweb-color-success:#5ca64a;

  --inciweb-shadow-dropdown:0 2px 6px rgba(0, 0, 0, 0.25);
  --inciweb-shadow-tooltip:0 2px 6px rgba(0, 0, 0, 0.35);

  --inciweb-radius-sm:2px;
  --inciweb-radius-md:3px;

}

.inciweb-map-wrapper{
  position:relative;
}

.esri-map-container{
  width:100%;
  height:500px;
}

.inciweb-map-wrapper .esri-map-container{
  width:100%;
  height:400px;
}

@media only screen and (max-width: 768px){
  .esri-map-container{
    height:480px;
  }
}

.mmwrap.home div.inciweb-map-wrapper .esri-map-container{
  min-height:calc(90vh - 215px) !important;
  border-bottom:10px solid var(--inciweb-color-primary);
  height:inherit;
}

.esri-map-container canvas{
  position:relative;
}

.map-settings,
.map-location,
.map-reset,
.map-filter{
  position:absolute;
  left:15.7px !important;
  cursor:pointer;
}

.inciweb-map-controls{
  position:absolute;
  top:100px;
  left:15.5px;
  z-index:20;

  display:flex;
  flex-direction:column;
  align-items:stretch;

  width:36px;
}

.inciweb-map-controls button{
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--inciweb-color-gray-400);
  border-top:0;

  background:var(--inciweb-color-white);

  font-size:18px;
  line-height:1;

  cursor:pointer;
}

.inciweb-map-controls button:first-child{
  border-top:1px solid var(--inciweb-color-gray-400);
}

.inciweb-map-controls button:hover{
  background:var(--inciweb-color-gray-100);
}

.map-custom-controls i{
  font-size:15px;
}

.map-custom-controls .dropdown-menu,
.legend-anchor .dropdown-menu{
  display:none;
}

.map-custom-controls .dropdown-menu.show,
.legend-anchor .dropdown-menu.show{
  display:block;
}

.map-custom-controls .dropdown-menu{
  min-width:210px;
  padding:8px 0;
  margin-top:-36px;
  margin-left:42px;

  border:1px solid var(--inciweb-color-gray-300);
  border-radius:var(--inciweb-radius-sm);

  background:var(--inciweb-color-white);

  box-shadow:var(--inciweb-shadow-dropdown);
}

.map-custom-controls .dropdown-header{
  padding:6px 12px;

  color:var(--inciweb-color-gray-500);

  font-size:13px;
  font-weight:normal;
}

.map-custom-controls .dropdown-menu li a,
.map-custom-controls .dropdown-menu label{
  min-height:32px;
  padding:6px 12px;

  display:flex;
  align-items:center;
  gap:8px;

  color:var(--inciweb-color-gray-700);

  font-size:15px;
  font-weight:normal;
  text-decoration:none;

  cursor:pointer;
}

.map-custom-controls .dropdown-menu li a:hover,
.map-custom-controls .dropdown-menu label:hover{
  background:var(--inciweb-color-gray-100);
}

.map-custom-controls .dropdown-menu li a.menuSelected{
  background:var(--inciweb-color-primary);
  color:var(--inciweb-color-white);
}

.map-custom-controls .divider{
  height:1px;
  margin:8px 0;

  background:var(--inciweb-color-gray-200);
}

.map-custom-controls .input-group{
  width:100%;
  display:flex;
  align-items:center;
}

.map-custom-controls .input-group-addon{
  padding-left:12px;
}

.map-custom-controls input[type="checkbox"]{
  width:18px;
  height:18px;

  accent-color:var(--inciweb-color-success);
}

.map-custom-controls .form-control{
  border:0;
  background:transparent;
  box-shadow:none;
}

ul.dropdown-menu.show li .input-group label{
  margin-left:15px !important;
}

.map-custom-controls .mapIconImage{
  width:24px;
  height:24px;

  object-fit:contain;
}

.icon-box-msg{
  position:absolute;
  z-index:50;

  display:none;

  max-width:360px;
  padding:10px 14px;

  background:var(--inciweb-color-primary);
  color:var(--inciweb-color-white);

  border-radius:var(--inciweb-radius-md);

  font-size:16px;
  line-height:1.3;

  box-shadow:var(--inciweb-shadow-tooltip);

  pointer-events:none;
}

.icon-box-msg.show{
  display:block;
}

.esri-view-width-xlarge .esri-popup__main-container{
    width:310px;
}

@media only screen and (max-width: 768px){
  .esri-popup__main-container{
    bottom:30px !important;
    max-width:80%;
    margin:0 auto;
  }
}

.esri-popup calcite-action-bar, calcite-action{
  display:none !important;
}

.esri-popup calcite-panel article.container header.header{
  background:#2f6db5;
}

.esri-popup .esri-feature-content a.btn{
    display:block;
    font-weight:normal;
    -ms-touch-action:manipulation;
    touch-action:manipulation;
    cursor:pointer;
    background-color:rgba(32, 84, 147, 1);
    color:#fff;
    text-align:center;
    border:1px solid transparent;
    white-space:nowrap;
    padding:6px 12px;
    font-size:14px;
    line-height:1.42857143;
    border-radius:4px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    max-width:150px;
    margin:0 auto;
}

.esri-popup .esri-feature-content a.btn:hover{
  background-color:rgb(37, 118, 218);
}