/*
 * Using a table to properly align Side Panel and Main Stage seems to be
 * the only way to have the edit button to properly overflow the Side Panel
 */
.containerPanelInner {
	table-layout: fixed;
	width: 100%;
	height: 100%;
}

/*
 * Layout: generic rules
 */

body.side:not(.mobile-view) .esriSimpleSlider {
	left: auto;
	right: 20px;
}

body.mobile-view-expanded .esriSimpleSlider {
    display: none;
}

/*
 * Layout: float
 */

body.layout-float-right #floatingPanel {
	right: 10%;
}

body.layout-float-left #floatingPanel {
	left: 10%;
}

body:not(.mobile-view).layout-float-left .esriSimpleSlider {
	left: auto;
	right: 20px
}
body:not(.mobile-view).layout-float-left .geocoderBtn {
	left: auto;
	right: 20px;
}

body.layout-float .overviewContainer,
body.layout-float .legendContainer {
	opacity: 0.8;
}

body.layout-float-left .overviewContainer {
	left: inherit;
	right: 20px;
}

body.layout-float-right .legendContainer {
	left: 5%;
	right: inherit;
}

body.layout-float-left:not(.mobile-view) .esriAttribution {
	margin-top: 6px;
	float: right;
}

body.layout-float-left:not(.mobile-view) .esriControlsBR .logo-med {
	float: left;
	margin-top: -14px;
}

.skip-to-content {
	position: absolute;
	z-index: 3; /* over side panel */
}

body.layout-float-left .mainMediaContainer .return-to-content {
	left: auto;
	right: 20%;
}

body.layout-float-right .mainMediaContainer .return-to-content {
	right: auto;
	left: 20%;
}