@import url(//fonts.googleapis.com/css?family=Roboto:400,700);

html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}


.labelText {
	padding-left: 5px;
	font-size: 15px;
}

#appContainer {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

#viewDiv {
	height: 100%;
	width: 100%;
}

#zoom {
	margin-bottom: 5px;
}

#actions {
	padding: 5px;
}

.container {
	height: 100%;
	width: 100%;
}


.invisible {
	visibility: collapse;
}

.esri-widget--button {
    font-size: 14px;
    background-color: #fff;
    color: #6e6e6e;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    transition: background-color 125ms ease-in-out

}

.esri-popup.esri-widget {
	max-height: 100%;
}

.esri-view-width-medium .esri-popup__main-container,
.esri-view-width-large .esri-popup__main-container,
.esri-view-width-xlarge .esri-popup__main-container {
	height: 1160px !important;
	width: 750px !important;
	max-height: 1340px;
	max-width: 750px;
}


.esri-view-width-less-than-medium {
	height: 470px;
	width: 350px;
	max-height: 940px;
	max-width: 750px;
}

/* hide some widgets when the screen is really small */
.esri-view-width-less-than-small .esri-zoom .esri-widget--button {
	display: none;
}


.esri-expand .esri-expand__content {
	box-shadow: none;
}

/* NEW */
.esri-widget--button:hover {
    background-color: #f3f3f3;
    color: #2e2e2e
}

.esri-widget--button:active {
    background-color: #e2f1fb
}

.esri-ui-corner .esri-component {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)
}

.esri-ui-corner .esri-expand .esri-widget--panel,.esri-ui-corner .esri-expand .esri-widget--panel-height-only,.esri-ui-corner .esri-component.esri-widget--panel,.esri-ui-corner .esri-component.esri-widget--panel-height-only {
    min-height: 32px;
    transition: max-height 250ms ease-in-out;
    overflow-y: auto
}

.esri-ui-corner .esri-expand .esri-widget--panel,.esri-ui-corner .esri-expand .esri-widget--panel-height-only,.esri-ui-corner .esri-component>.esri-widget--panel,.esri-ui-corner .esri-component.esri-widget--panel {
    width: 300px
}

.esri-ui-corner .esri-expand .esri-widget--panel .esri-widget--panel,.esri-ui-corner .esri-expand .esri-widget--panel-height-only .esri-widget--panel,.esri-ui-corner .esri-component>.esri-widget--panel .esri-widget--panel,.esri-ui-corner .esri-component.esri-widget--panel .esri-widget--panel {
    width: auto
}

.esri-view-height-greater-than-medium .esri-popup__main-container, .esri-view-height-greater-than-medium  .esri-expand .esri-widget--panel,.esri-view-height-greater-than-medium .esri-expand .esri-widget--panel-height-only,.esri-view-height-greater-than-medium .esri-ui-corner .esri-component.esri-widget--panel,.esri-view-height-greater-than-medium .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    max-height: 680px
}

.esri-view-height-medium .esri-popup__main-container, .esri-view-height-medium  .esri-expand .esri-widget--panel,.esri-view-height-medium .esri-expand .esri-widget--panel-height-only,.esri-view-height-medium .esri-ui-corner .esri-component.esri-widget--panel,.esri-view-height-medium .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    max-height: 540px
}

.esri-view-height-small .esri-popup__main-container, .esri-view-height-small .esri-expand .esri-widget--panel,.esri-view-height-small .esri-expand .esri-widget--panel-height-only,.esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel,.esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    max-height: 420px
}

.esri-view-height-xsmall .esri-popup__main-container, .esri-view-height-xsmall .esri-expand .esri-widget--panel,.esri-view-height-xsmall .esri-expand .esri-widget--panel-height-only,.esri-view-height-xsmall .esri-ui-corner .esri-component.esri-widget--panel,.esri-view-height-xsmall .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    max-height: 240px
}
/* END NEW */


/* .esri-view-height-xsmall .esri-ui-corner .esri-expand .esri-legend.esri-widget,
.esri-view-height-small .esri-ui-corner .esri-expand .esri-legend.esri-widget {
	max-height: 100%;
} */

/* .esri-view-height-less-than-medium .esri-popup__main-container {
	max-height: 500px;
  } */

/* .

.esri-view-height-xlarge .esri-popup__main-container,
.esri-view-height-large .esri-popup__main-container,
.esri-view-height-medium .esri-popup__main-container {
	height: 470px !important;
	width: 750px !important;
	max-height: 940px;
	max-width: 750px;
} */


svg {
	font: 14px 'Open Sans';
}

.abs-line,
.legend .abs-line {
	fill: none;
	stroke: rgba(255, 0, 0, 1);
	stroke-width: 2;
}

.area {
	stroke-width: 1;
}

.area.outer,
.legend .outer {
	fill: rgba(230, 230, 255, 0.8);
	stroke: rgba(216, 216, 255, 0.8);
}

.area.inner,
.legend .inner {
	fill: rgba(127, 127, 255, 0.8);
	stroke: rgba(96, 96, 255, 0.8);
}

.axis path,
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.axis text {
	fill: #000;
}

.axis .tick line {
	stroke: rgba(0, 0, 0, 0.1);
}

.marker.client .marker-bg,
.marker.client path {
	fill: rgba(255, 127, 0, 0.8);
	stroke: rgba(255, 127, 0, 0.8);
	stroke-width: 3;
}

.marker path {
	fill: none;
}

.marker.server .marker-bg,
.marker.server path {
	fill: rgba(0, 153, 51, 0.8);
	stroke: rgba(0, 153, 51, 0.8);
	stroke-width: 3;
}

.marker text {
	text-anchor: middle;
}

.median-line,
.legend .median-line {
	fill: none;
	stroke: rgba(0, 0, 255, 1);
	stroke-width: 2;
}

.legend .legend-bg {
	fill: rgba(0, 0, 0, 0.5);
	stroke: rgba(0, 0, 0, 0.5);
}

.legend text,
.marker text {
	fill: #fff;
	font-weight: bold;
}

.overlay {
	fill: none;
	pointer-events: all;
}

.title {
	text-anchor: end;
	font-size: 12px;
	text-decoration: underline;
	stroke-width: 1;
}