html,
body,

#viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: VIC,Arial,sans-serif;
    color: #53565A;
}

.esri-view-root .esri-view-surface::after {
    outline: none !important;
}

.esri-widget {
    font-family: VIC,Arial,sans-serif;
    color: #53565A;
  }


.template-content {
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-family: VIC,Arial,sans-serif;
    color: #53565A;
    border-collapse: collapse;
}

.template-content tr{
    height: 35px;
}

.template-content tr td:first-child{
    width: 120px;
}


.custom-legend{
    right: 15px;
    top:15px;
    position: absolute;
    width: 208px;
    height: auto;
    z-index: 2;
    padding:5px;
    background-color: rgba(255,255,255,1);
    box-shadow: #3c40434d 0 1px 2px, #3c404326 0 1px 3px 1px;
}

.custom-legend table{
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;

}


.custom-legend table tr{
    height: 35px;
}

.custom-legend table tr td:first-child{
    width: 25px;
}

.custom-legend table tr td img{
    height: 16px;
    width: 16px;
}

.custom-legend table tr:nth-child(1) td img{
    height: 24px;
    width: 24px;
}

.custom-legend table tr:nth-child(2) td img{
    height: 21px;
    width: 21px;
}

.custom-legend table tr:nth-child(3) td img{
    height: 18px;
    width: 18px;
}

.esri-widget *:focus-visible,
.esri-widget *:focus {
    outline:none;
}

.esri-view-root .esri-view-surface{
    outline:none;
}