/*
---------------u-----------------------------------------------------------------------
IMPORTS (fonts, etc.)
--------------------------------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
/* alternative more complete set: @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i&subset=latin-ext'); */





/*
--------------------------------------------------------------------------------------
JAVASCRIPT REFERENCED GLOBALS
--------------------------------------------------------------------------------------

these classes are not directly applied to any elements
instead, our javascript reads the color attribute defined by these classes and uses that value for certain items (mostly SVG elements)

--------------------------------------------------------------------------------------
*/



/* MUST STAY the color of the options within the plan SVG. ONLY CHANGE IF the plan is drawn in a non-standard color. */
.option_color_base {
	color: #000000;
}

/* options color */
.option_color {
	color: #0966a6;
}

/* options color during rollover */
.option_color_hover {
	color: #0f84cc;
}

/* siteplans default lot color when using ?fstatus=xx */
.option_color_notfeatured {
	color: #999999;
}



/* DO NOT CHANGE, MUST STAY the color of the stroke/fill on the POI icons in vip.php's inline SVG. */
.poi_color_base {
	color: #000000;
}

/* POI icon color */
.poi_color {
	color: #0966a6;
}

/* POI icon color during rollover */
.poi_color_hover {
	color: #0f84cc;
}



/* DO NOT CHANGE, MUST STAY the color of the primary stroke/fill on the primary halo elements in vip.php's inline SVG. */
.comp_halo_color_base {
	color: #000000;
}

/* halo color */
.comp_halo_color {
	color: #00adee;
}

/* halo buttons color during rollover */
.comp_halo_color_hover {
	color: #11ccff;
}



/* DEPRECATED - ok to remove from all v2 skins 
.comp_color_base {
	color: #000000;
}
*/

/* component stroke color when selected (use #000001 to disable feature) */
.comp_color {
	color: #000001;
}

/* component stroke color when placed on stage (use #000001 to disable feature) */
.comp_color_placed {
	color: #000001;
}

/* furniture stroke color when selected (use #000001 to disable feature) */
.furniture_color {
	color: #000001;
}

/* furniture stroke color when placed on stage (use #000001 to disable feature) */
.furniture_color_placed {
	color: #000001;
}



/* For the email body background, typically white or else nearly black. */
.email_SkinColorBackground {
	color: #ffffff;
}

/* For text in the body areas, typically opposite/reverse of SkinColorBackground. Note that text in the SkinColorFill areas probably needs to be pure white or black instead of this. */
.email_SkinColorText {
	color: #222222;
}

/* A medium color to fill in the header, footer or other table backgrounds. Often the secondary color from the client logo. */
.email_SkinColorFill {
	color: #0966a6;
}

/* The main bright color, typically used for links or accent/heading text. Often the primary color from the client logo. */
.email_SkinColorAccent {
	color: #0f84cc;
}




/*
--------------------------------------------------------------------------------------
GLOBAL
--------------------------------------------------------------------------------------

tag selectors
widely used named classes (including global overrides of jqmobile classes)

--------------------------------------------------------------------------------------
*/

/* set the width of this div in any responsive breakpoint CSS definitions so we can check it with JS to know which breakpoint we are using (0 = default/non-responsive) */
#divLayoutID {
	display: none;
	height: 0;
	width: 0;
}

/* prevent zooming/scrolling entire page on windows multi-touch */
* {
	-ms-touch-action: none;
	touch-action: none;
}

/* prevent highlighting or selection boxes to make all the dragging go smoother */
* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* a chained :not() selector wasn't working in FF to add exclusions to the above, so instead we restore the properties for text inputs */
input[type=text],
textarea {
	-webkit-touch-callout: default;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
}

* {
	text-shadow: none !important;
	box-shadow: none !important;
	font-family: "Open Sans", sans-serif;
	font-weight: 100;
}

html,
body {
	height: 100%;
	max-height: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
	font-size: 14px;
	background: #222;
	color: #f0f0f0;
}

a,
a:link,
a:visited,
a:active,
a:hover {
	text-decoration: none;
	font-family: "Open Sans", sans-serif;
	font-weight: 100;
	color: #f0f0f0;
}

svg,
svg * {
	font-family: Arial, sans-serif;
	text-shadow: none;
	box-shadow: none;
}

g.note {
	font-size: 12px;
}

.floatcontainer:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
}

.ui-layout {
	display: block;
	margin: 0;
}

.ui-content {
	padding: 0;
	height: 100%;
}

.ui-draggable {
	display: block;
	position: absolute;
	z-index: 500;
	cursor: move;
}
.ui-clickable {
	cursor: pointer;
}

.ui-flipped-h {
	transform: scale(-1, 1);
}
.ui-flipped-v {
	transform: scale(1, -1);
}

.ui-scroll-container {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	position: relative;
	overflow: hidden !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	display: block;
}

.ui-scroll-container * {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
}

.ui-scroll-container .ui-draggable,
.ui-scroll-container .ui-draggable * {
	-ms-touch-action: none;
	touch-action: none;
}

input.ui-input-text,
textarea.ui-input-text {
	padding: 5px 7px 7px 7px;
	border: 1px solid #2a2a2a;
	background: #141414;
	color: #fff;
}

label.ui-input-text {
	font-size: 1rem;
}

.ui-btn-inner {
	border: none;
}

.ui-icon-fa,
.ui-icon {
	font-family: "Font Awesome 5 Light";
	font-size: 20px;
	font-weight: 100;
	line-height: 1em;
	width: 1em;
	height: 1em;
	text-align: center;
	color: #fff;
}

.ui-icon-fa:before,
.ui-icon:before {
	display: block;
	font-family: "Font Awesome 5 Light";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ui-loading:after,
.ui-loading-reversed:after {
	background-image: url('/css/vip2.images/common-loading-white.svg') !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: auto !important;
	display: inline-block;
	height: 50px;
	width: 50px;
	content: '';
	opacity: 0.2;
}
.ui-loading-reversed:after {
	background-image: url('/css/vip2.images/common-loading-black.svg') !important;
}

.ui-blocker {
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1000;
}

.ui-blocker.ui-blocker-invisible {
	display: block;
	background: transparent;
}

.ui-blocker.ui-blocker-darken {
	display: block;
	background-color: #333;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity: 0.60;
	-khtml-opacity: 0.60;
	opacity: 0.60;
}

#divLoading {
	display: none;
	position: absolute;
	z-index: 220;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	border: 0; 
	background: transparent; 
}

#divLoading img {
	margin: 25% auto;
}





/*
--------------------------------------------------------------------------------------
BASIC LAYOUT
--------------------------------------------------------------------------------------

defines the overall page column/row/section structure

--------------------------------------------------------------------------------------
*/


/* ----- general rows & columns (panels) ----- */

.ui-pnl {
	position: relative;
}

.ui-pnl-row {
	width: 100%;
}

.ui-pnl-row-a {
	flex: 0 0 auto;
}

.ui-pnl-row-b {
	flex: 1 1 auto;
}

.ui-pnl-row-c {
	flex: 0 0 auto;
}

.ui-pnl-col {
	height: 100%;
}

.ui-pnl-col-a {
	flex: 0 0 auto;
}

.ui-pnl-col-b {
	flex: 1 1 auto;
}

.ui-pnl-col-c {
	flex: 0 0 auto;
}


/* ----- general drawer handles ----- */

.ui-pnl-handle {
	background: #222;
}

.ui-pnl-handle-btn {
	display: block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	color: #f0f0f0; 
}

.ui-pnl-handle-btn-h {
	height: 26px;
	line-height: 26px;
}

.ui-pnl-handle-btn-h:before {
	content: "\f078";
}

.ui-drawer-open .ui-pnl-handle-btn-h:before {
	content: "\f077";
}

.swap-left-right .ui-pnl-handle-btn-h:before {
	content: "\f077";
}

.swap-left-right .ui-drawer-open .ui-pnl-handle-btn-h:before {
	content: "\f078";
}

.ui-pnl-handle-btn-v {
	width: 26px;
}

.ui-pnl-handle-btn-v:before {
	content: "\f053";
}

.ui-drawer-open .ui-pnl-handle-btn-v:before {
	content: "\f054";
}

.swap-left-right .ui-pnl-handle-btn-v:before {
	content: "\f053";
}

.swap-left-right .ui-drawer-open .ui-pnl-handle-btn-v:before {
	content: "\f054";
}


/* ----- middle row ----- */

#divMain {
	pointer-events: none;
}

#handleMainA,
#pnlMainA,
#divMenu,
#handleMainC,
#pnlMainC,
#handleFooter,
#pnlFooter {
	pointer-events: all;
}

#pnlMainA {

}

#handleMainA {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 234;
}

#pnlMainB {
	overflow: hidden;
	height: 100%;
	width: 100%;
}

#pnlMainC {
	width: 234px;
	height: 100%;
	display: flex;
	flex-flow: column;
	z-index: 235;
	right: 0;
}

#pnlMainC.ui-drawer-closed {
	width: 0;
}

#handleMainC {
	display: block;
	position: fixed;
	top: 140px;
	right: 234px;
	left: auto;
	z-index: 231;
}

#handleMainC.ui-drawer-closed {
	right: 0;
}


/* ----- middle row: swap left & right sides ----- */

.swap-left-right #pnlMainA {
	order: 2
}

.swap-left-right #handleMainA {
	left: auto;
	right: 0;
}

.swap-left-right #pnlMainB {
	order: 1
}

.swap-left-right #pnlMainC {
	order: 0;
	right: auto;
}

.swap-left-right #handleMainC {
	right: auto;
	left: 234px;
}

.swap-left-right #handleMainC.ui-drawer-closed {
	left: 0;
}


/* ----- other layout ----- */

#divPage {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column;
	overflow: hidden;
}

#pnlMain {
	width: 100%;
	height: calc(100% - 85px);
	overflow: hidden;
}

#divMain {
	display: flex;
	flex-flow: row;
	overflow: hidden;
}

#divPageBlocker.ui-blocker-block-main {
	z-index: 199;
}

#divPageBlocker.ui-blocker-block-all {
	z-index: 299;
}

#divStageBlocker.ui-blocker-block-main {
	z-index: 289;
}

#divStageBlocker.ui-blocker-block-all {
	z-index: 299;
}





/*
--------------------------------------------------------------------------------------
HEADER
--------------------------------------------------------------------------------------
*/

#pnlHeader {
	height: 85px;
	overflow: hidden;
}

#divHeader {
	height: 85px;
	overflow: hidden;
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: center;
}

#divHeader img {
	max-width: 100%;
}

#divHeader .ui-pnl {
	height: auto;
}

#divHeaderA {
	padding: 0.5em 0.5em 0.5em 1em;
}

#divHeaderA img {
	max-height: 55px;
}

#divHeaderB {
	text-align: center;
	padding: 0.5em;
}

#divHeaderB img {
	margin-top: 2px;
}

#divHeaderC {
	padding: 0.5em 1em 0.5em 0.5em;
}

#divHeaderInfo {

}

#divPlanName {
	margin-top: -5px;
	font-size: 1.8em;
	text-transform: uppercase; 
	letter-spacing: 0.04em;
	color: #0f84cc;
}

#divProjectName {
	margin-top: -5px;
	font-size: 1.3em; 
	text-transform: uppercase; 
}





/*
--------------------------------------------------------------------------------------
FOOTER
--------------------------------------------------------------------------------------
*/

#pnlFooter {
	height: 84px;
	overflow: visible !important;
	display: none;
}

#pnlFooter.ui-drawer-closed {
	height: 0;
}

#divFooter {
	display: flex;
	flex-flow: row;
}

#handleFooter {
	display: none;
	position: absolute;
	bottom: 84px;
	left: 50%;
	margin-left: -18px;
	z-index: 231;
}

#handleFooter.ui-drawer-closed {
	bottom: 0;
}

#btnHandleFooter {
	margin: 0;
	border-radius: 2px 2px 0 0;
}





/*
--------------------------------------------------------------------------------------
STAGE, PLAN, EXTERIORS, HIDDEN PRINT FRAME
--------------------------------------------------------------------------------------
*/

#pnlMainB {

}

#layoutStage {
	overflow: hidden;
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	z-index: 0;
	background: #fff; 
}

#divStage {
	overflow: hidden;
	height: 100%;
	width: 100%;
	display: block;
	padding-top: 39px;
}

#divPlan {
	position: relative;
	z-index: 210;
	height: 100%;
	width: 100%;
	display: block;
	cursor: all-scroll;
	background: #fff; 
}

#divStageToolTip {
	display: none;
	position: absolute;
	z-index: 280;
	height: auto;
	max-width: 30em;
	min-width: 12em;
}

#layoutPrintFrame {
	z-index: -100;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
}

#iframeExternalViewer {
	display: none;
	z-index: 210;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: #fff;
}

#canvas {
	display: none;
}

#divSVGToolbox {
	display: none;
}

#divLegendSwatch {
	display: none;
}

#divPoiIcons {
	display: none;
}

#divImgs {
	display: none;
	z-index: 210;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	border: 0; 
	background: #000; 
}

#divImgs .imgs-wrapper {
	width: 100%;
	height: 100%;
	opacity: 0;
	background: transparent;
	position: absolute;
}

#divImgs .imgs-img {
	max-width: 100%;
	max-height: 95%;
	max-height: calc(100% - 40px);
}

#divImgs .imgs-txt {
	margin-top: -2em;
	font-size: 1.15rem;
	font-weight: 400;
}

#divImgs.flipped {
	transform: scale(-1, 1);
}

#divImgs.flipped .imgs-txt {
	transform: scale(-1, 1);
}

#txtNote {
	overflow: auto;
	height: 100px;
	max-height: 100px;
}

#divHalo {
	display: none;
	position: absolute;
	z-index: 400;
	left: 0;
	top: 0;
}

#svgHalo * {
	cursor: move;
}

#divNoteBar {
	display: none;
	position: absolute;
	z-index: 400;
	left: 0;
	top: 0;
}

#gNoteBarMove {
	cursor: move;
}

#divLineBar {
	display: none;
	position: absolute;
	z-index: 400;
	left: 0;
	top: 0;
}

#divLineBar2 {
	display: none;
	position: absolute;
	z-index: 210;
	left: 0;
	top: 0;
}





/*
--------------------------------------------------------------------------------------
SIDEBAR, ACCORDIONS, OPTIONS LIST, COMPONENTS/FURNITURE LISTS, EXTERIORS LIST
--------------------------------------------------------------------------------------
*/

#pnlMainC {
	background: #222;
}

#handleMainC {

}

#btnHandleC {

}

#layoutPreview {
	overflow: hidden;
	flex: 0 0 auto;
}

#divPreview {
	display: block;
	overflow: hidden;
}

#imgPreview {
	display: block;
	max-width: 100%;
}

#divPreviewLabel {
	display: block;
	position: relative;
	top: -1.8em;
	text-align: right;
}

#divPreviewLabel span {
	display: block;
	position: absolute;
	height: 1.8em;
	padding: 0.6em 0.6em 0 0.6em;
	line-height: 1em;
	font-size: 0.9em;
	background: rgba(30, 30, 30, 0.75);
	color: #dfdfdf;
}

.swap-left-right #divPreviewLabel span {
	right: 0;
}

.ui-collapsible-heading {
	margin: 0;
	background: #0f84cc;
}

.ui-collapsible-heading .ui-icon {
	background: none;
}

.ui-collapsible-heading .ui-icon-arrow-d:before {
	content: "\f078";
	font-size: 14px; 
}

.ui-collapsible-heading .ui-icon-arrow-r:before {
	content: "\f054";
	font-size: 14px; 
	padding-left: 0.3em; 
}

.ui-collapsible-heading .ui-btn-inner {
	border: none; 
	font-size: 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.4);
	padding: 11px 0 11px 12px;
}

.ui-collapsible-heading .ui-btn-inner,
.ui-collapsible-content > div .ui-collapsible-heading .ui-btn-inner {
	background: none;
}

.ui-collapsible-heading.ui-collapsible-heading-collapsed .ui-btn-inner {
	background: rgba(0, 0, 0, 0.2);
}

.ui-collapsible-content > div .ui-collapsible-heading .ui-btn-inner {
	padding: 7px 0 7px 22px;
}

.ui-collapsible-heading .ui-btn-inner .ui-btn-text {
	font-weight: 400; 
}

.ui-collapsible.ui-loading:after,
.ui-collapsible.ui-loading-reversed:after {
	margin-left: 8px;
}

.ui-collapsible-collapsed.ui-loading:after,
.ui-collapsible-collapsed.ui-loading-reversed:after {
	display: none;
}

/* visualizer begin */

#layoutAccordion div.ui-collapsible-imgheading {
	overflow-y: visible;
}

.ui-collapsible-imgheading .ui-collapsible-heading .ui-btn-icon-right .ui-btn-inner {
	padding: 0;
	margin-bottom: 1px;
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-radio .ui-btn-inner .ui-btn-text {
	z-index: 0;
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-parent .ui-btn.ui-checkbox-on .ui-btn-inner .ui-icon:after
{
	content: "\f068";
	color: #999;
}
#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-parent .ui-btn.ui-checkbox-on .ui-btn-inner .ui-icon:before
{
	color: rgba(0, 0, 0, 0.1);
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-child
{
	display: none;
	background: #dcdcdc;
	padding: 0.2em 0 0.2em 0.5em;
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-child .ui-btn {
	margin-left: 0.4em;
	padding-left: 0;
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-parent
{

}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox .ui-btn.ui-btn-icon-left.ui-opt-scheme {
	margin: 0.4em 0 0.4em 0.5em;
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox .ui-btn.ui-btn-icon-left.ui-opt-parenthiddenchild-child .ui-btn-inner,
#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox .ui-btn.ui-btn-icon-left.ui-opt-scheme .ui-btn-inner {
	padding: 0.6em 0.8em 0.6em 34px;
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox .ui-btn.ui-btn-icon-left.ui-opt-scheme .ui-btn-inner {
	padding-left: 54px;
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox .ui-mini.ui-btn-icon-left.ui-opt-scheme .ui-icon {
	left: 32px;
}

#layoutAccordion.v2-1 .viz .ui-opt-scheme .ui-opt-scheme-swatch {
	position: absolute;
	height: 100%;
	width: 6px;
}

#layoutAccordion.v2-1 .viz .ui-opt-scheme .ui-opt-scheme-swatch:nth-child(2) {
	left: 6px;
}

#layoutAccordion.v2-1 .viz .ui-opt-scheme .ui-opt-scheme-swatch:nth-child(3) {
	left: 12px;
}

#layoutAccordion.v2-1 .viz .ui-opt-scheme .ui-opt-scheme-swatch:nth-child(4) {
	left: 18px;
}

#layoutAccordion.v2-1 .viz .ui-controlgroup .ui-checkbox.ui-opt-scheme:last-child {
	padding-bottom: 0.2em;
}

#layoutAccordion.v2-1 .ui-radio-btnoverlay {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100px;
	height: 21px;
	background: #e61;
	font-size: 0.8rem;
	font-weight: 400;
	color: #fff;
	padding: 8px 0 2px 0;
	text-align: center;
}

/* visualizer end */

#layoutAccordion .imgs-thumb {
	max-width: 100%;
	height: auto;
	pointer-events: none;
}

#layoutAccordion .ui-controlgroup.ui-mini,
#layoutAccordion fieldset.ui-controlgroup.ui-mini {
	margin: 0; 
}

#layoutAccordion .ui-checkbox .ui-btn-inner {
	border: none; 
}

#divOptions svg {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	overflow: scroll;
}

#divOptions p, #divOptionsImgs p {
	display: inline-block;
	vertical-align: top;
	margin: 8px 10px;
}

#divOpts_Furniture {
	overflow: auto;
}

.ui-li-component {
	transform: perspective(0);
}

.ui-li-component,
.svg-component {
	cursor: move;
}

.ui-li-component.ui-mini.ui-btn-icon-right .ui-btn-inner {
	padding: 0;
}

.collapsible-set-ifp {
	visibility: hidden;
}

.collapsible-set-ifp-created {
	visibility: visible;
}

#layoutOptionsMenu {
	overflow: hidden;
	width: 234px;
}

#layoutOptions {
	overflow: hidden;
	width: 234px;
}

#layoutAccordion {
	overflow: hidden;
	height: auto;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
}

#layoutAccordion > div {
	overflow-y: hidden;
	flex: 1 1 auto;
	min-height: 42px;
	display: flex;
	flex-flow: column;
	display: none;
}

#layoutAccordion > div > div {
	overflow-y: scroll;
}

#layoutAccordion > div .ui-collapsible-content {
	overflow: hidden;
	overflow-y: auto;
	height: auto;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	margin: 0;
}

#layoutAccordion > div .ui-collapsible-content > div {
	min-height: 34px;
	overflow: hidden;
	flex: 1 1 auto;
	display: flex;
	flex-flow: column;
}

#layoutAccordion div.ui-controlgroup-controls {
	background: #222;
}

#layoutAccordion .ui-controlgroup .ui-radio {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}


/* BEGIN: v2-1 options styling (added 2018-08-28): the new "#layoutAccordion.v2-1" selector is to force the new options styling to override all current skins */

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn {
	background: #222;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox.ui-disabled,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio.ui-disabled {
	opacity: 0.3;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox.ui-disabled .ui-btn-inner,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio.ui-disabled .ui-btn-inner {
	background: #444;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn.ui-btn-icon-left .ui-btn-inner {
	padding: 0.8em 0.8em 0.7em 34px;
	line-height: 1.2em;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn.ui-btn-icon-left.ui-checkbox-off .ui-btn-inner,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn.ui-btn-icon-left.ui-radio-off .ui-btn-inner {
	padding-left: 34px;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn .ui-btn-inner .ui-icon,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn .ui-btn-inner .ui-icon {
	display: inline-block;
	background: none;
	margin-top: -8px;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn-inner {
	padding: 7px 12px 7px 34px;
	position: absolute;
	bottom: 0;
	background: #333;
	background: rgba(30, 30, 30, 0.75);
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn .ui-btn-inner .ui-icon {
	margin-top: -9px;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn .ui-btn-inner .ui-icon:before,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn .ui-btn-inner .ui-icon:before,
#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn .ui-btn-inner .ui-icon:after,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn .ui-btn-inner .ui-icon:after {
	display: block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	font-size: 18px;
	line-height: 18px;
	height: 18px;
	top: -1px;
	left: 0;
	font-family: "Font Awesome 5 Solid";
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn .ui-btn-inner .ui-icon:after,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn .ui-btn-inner .ui-icon:after {
	font-family: "Font Awesome 5 Solid";
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn .ui-btn-inner .ui-icon:before,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn .ui-btn-inner .ui-icon:before {
	/* selected checkbox background */
	content: "\f0c8";
	color: #0f84cc;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn .ui-btn-inner .ui-icon:after,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn .ui-btn-inner .ui-icon:after {
	/* selected checkbox foreground */
	font-size: 12px;
	top: 0;
	left: 2px;
	content: "\f00c";
	color: #fff;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn.ui-checkbox-off .ui-btn-inner .ui-icon:before,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn.ui-radio-off .ui-btn-inner .ui-icon:before {
	/*  de-selected checkbox background */
	content: "\f0c8";
	color: rgba(255, 255, 255, 0.15);
}
#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox .ui-btn.ui-checkbox-off .ui-btn-inner .ui-icon:after,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio .ui-btn.ui-radio-off .ui-btn-inner .ui-icon:after {
	/*  de-selected checkbox foreground */
	display: none;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-parent .ui-btn .ui-btn-inner .ui-icon:before,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio.ui-opt-parenthiddenchild-parent .ui-btn .ui-btn-inner .ui-icon:before {
	/* selected parent checkbox background */
	display: block;
	content: "\f0c8";
	color: #0f84cc;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-parent .ui-btn .ui-btn-inner .ui-icon:after,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio.ui-opt-parenthiddenchild-parent .ui-btn .ui-btn-inner .ui-icon:after {
	/* selected parent checkbox foreground */
	display: block;
	content: "\f00c";
	color: #fff;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-parent .ui-btn.ui-checkbox-off .ui-btn-inner .ui-icon:before,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio.ui-opt-parenthiddenchild-parent .ui-btn.ui-radio-off .ui-btn-inner .ui-icon:before {
	/* de-selected parent checkbox background */
	display: block;
	content: "\f0c8";
	color: rgba(255, 255, 255, 0.15);
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-parent .ui-btn.ui-checkbox-off .ui-btn-inner .ui-icon:after,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio.ui-opt-parenthiddenchild-parent .ui-btn.ui-radio-off .ui-btn-inner .ui-icon:after {
	/*  de-selected parent checkbox foreground */
	display: block;
	font-size: 11px;
	top: -1px;
	left: 3px;
	content: "\f067";
	color: #aaa;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-child .ui-btn {
	background: #181818;
	padding-left: 8px;
}

#layoutAccordion.v2-1 .ui-controlgroup .ui-checkbox.ui-opt-parenthiddenchild-child.ui-disabled .ui-btn .ui-btn-inner,
#layoutAccordion.v2-1 .ui-controlgroup .ui-radio.ui-opt-parenthiddenchild-child.ui-disabled .ui-btn .ui-btn-inner {
	background: #3a3a3a;
}

/* END: v2-1 options styling (added 2018-08-28) */


.ui-collapsible-content > .ui-listview {
	margin: 0;
}

#layoutComponents,
#layoutFurniture {
	background: #222;
}

li.ui-li-component.ui-li {
	width: 50%;
	float: left;
}

li.ui-li-component.ui-li .ui-btn-text a.ui-link-inherit {
	height: 75px;
	padding: 7px 5px;
	text-align: center;
	white-space: normal;
}

li.ui-li-component.ui-li .svg-component {
	width: 40px;
	margin: 0 auto 5px auto;
	display: block;
}


/* ----- custom scrollbar ----- */

#layoutAccordion .mCS-vip.mCSB_vertical.mCSB_inside {
	background: #222;
}

#layoutAccordion .mCS-vip.mCSB_scrollTools {
	margin-right: 7px;
}

#layoutAccordion .mCS-vip.mCSB_scrollTools .mCSB_draggerRail {
	background: rgba(255, 255, 255, 0.15);
}

.mCSB_scrollTools .mCSB_buttonUp {
	background-position: 0 0;
	opacity: 0.25;
}

.mCSB_scrollTools .mCSB_buttonDown {
	background-position: 0 -20px;
	opacity: 0.25;
}

#layoutAccordion .mCS-vip .mCSB_dragger {
	height: 20px;
}

#layoutAccordion .mCS-vip.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	width: 20px;
	margin: 0 -2px;
	border-radius: 2px;
	background: #888;
}

#layoutAccordion .mCSB_container img {
	max-width: 100%;
	height: 100%;
}





/*
--------------------------------------------------------------------------------------
MENUS, VIEW TABS, STATUS/MSG BAR, TOOLBAR, PRICING, SOCIAL ICONS, LEGEND
--------------------------------------------------------------------------------------
*/

#pnlMainA.ui-drawer-open {
	display: block;
}

#handleMainA {

}

#handleMainA {
	width: 46px;
	height: 46px;
}

#btnHandleA {
	margin: 9px 0 0 11px;
}

#btnHandleA .ui-icon-menu {
	padding: 3px 0 0 2.5px;
	margin: 0;
	background: none;
}

#btnHandleA .ui-icon-menu:before {
	content: "\f0c9";
	font-size: 19px;
	margin-top: -1px;
	color: #fff;
}

#btnHandleA .ui-btn-inner {
	width: 25px;
	border: none;
	border-radius: 2px;
	background: #000;
}

.ui-drawer-open #btnHandleA .ui-icon-menu:before {
	content: "\f00d";
	font-size: 21px;
	margin-top: 0;
	color: #fff;
}

.ui-drawer-open #btnHandleA .ui-btn-inner {
	background: #c00;
}

#divMainAMenuBlocker {
	height: 39px;
	bottom: auto;
}

#divStatus,
#divViewMsg,
#divPlanMsg {
	display: none;
	pointer-events: auto;
	height: auto;
	overflow: hidden;
	position: absolute;
	z-index: 1001;
	top: 0;
	left: 0;
	right: 0;
	padding: 8px 12px 10px 12px;
	font-size: 16px;
	font-weight: 400;
	background: #ffca33;
	color: #000;
}

#divViewMsg {
	top: auto;
	bottom: 0;
}

#divViewMsgContent {
	display: inline-block;
}

#divViewMsgContent.msg-collapsible {
	cursor: pointer;
	color: #0080ee;
}

#divViewMsgContent.msg-collapsible:hover,
#divViewMsgContent.msg-collapsible:active {
	color: #1090ff;
}

#divViewMsgContent.msg-collapsible:after {
	display:inline-block;
	content: "\f077";
	font-family: "Font Awesome 5 Light";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: 8px;
	transition: all 100ms;
}

#divViewMsgContent.msg-collapsible.msg-expanded:after {
	transform: rotate(180deg);
}

#divViewMsgContentExpanded {
	display: none;
	max-height: 20vh;
	overflow-y: scroll;
	padding: 8px 12px 10px 12px;
	margin-top: 8px;
	background-color: rgba(255, 255, 255, 0.25);
}

#btnViewMsgCollapse {
	display: inline-block;
	text-align: center;
	width: auto;
	margin: 20px auto 10px auto;
	padding: 3px 22px 5px 22px;
	background-color: rgba(0, 0, 0, 0.7);
	color: #eee;
}

#divPlanMsg {
	z-index: 1000;
	top: 35px !important;
	padding: 1px 12px 1px 12px;
	text-align: center;
	font-size: 45px;
	font-weight: bolder;
	text-transform: uppercase;
	background: none;
	color: #ff3434;
}

#divPlanMsgContent {
	background-color: #fd0000c4;
	border-radius: 4px;
	max-width: 21vw;
	margin: 19px auto;
	margin-top: 19px;
	margin-right: auto;
	margin-bottom: 19px;
	margin-left: auto;
	font-size: 1.75rem;
	font-weight: lighter;
	padding: 0.5rem;
	color: white;
}

#divStatusContent a,
#divStatusViewContent a,
#divPlanMsgContent a {
	color: #cc0001;
	font-weight: bold;
}

#divStatusContent a:hover,
#divStatusContent a:active,
#divStatusViewContent a:hover,
#divStatusViewContent a:active,
#divPlanMsgContent a:hover,
#divPlanMsgContent a:active {
	color: #dd0001;
}

#btnStatusClose,
#btnViewMsgClose,
#btnPlanMsgClose {
	display: none;
	float: right;
	margin: 0;
}

#btnStatusClose .ui-btn-inner,
#btnViewMsgClose .ui-btn-inner,
#btnPlanMsgClose .ui-btn-inner {
	width: 25px;
	border: none;
	border-radius: 2px;
	background: none;
}

#btnStatusClose .ui-icon-menu:before,
#btnViewMsgClose .ui-icon-menu:before,
#btnPlanMsgClose .ui-icon-menu:before {
	content: "\f00d";
	font-size: 21px;
	color: #000;
}

#btnStatusClose .ui-icon-menu,
#btnViewMsgClose .ui-icon-menu,
#btnPlanMsgClose .ui-icon-menu {
	padding: 3px 0 0 2.5px;
	margin: 0;
    background: transparent;
}


/* ----- toolbar ----- */

#divTools {
	padding-top: 46px;
	width: 46px;
	background: #222;
	overflow: hidden;
}

#divTools .ui-btn-inner {
	border: none;
}

#divTools a {
	display: block;
	width: 20px;
	margin: 0 auto 13px auto;
	text-align: center;
	font-size: 20px;
	color: #eee;
}

#divTools #btnZoomAll {
	font-size: 23px;
}

#divZoomSlider {
	text-align: center;
	margin: 20px auto 45px auto;
}

#divZoomSlider .ui-slider-verticalInverted {
	width: 2px;
	height: 100px;
	margin: -10px 20px;
	background: rgba(255, 255, 255, 0.15);
}

#divZoomSlider .ui-slider-handle-verticalInverted {
	width: 28px;
	height: 28px;
	margin: -13px 0 0 -13px;
	border: none;
	border-radius: 2px;
	background: #444;
}

#divZoomSlider .ui-btn-inner {
	padding: 6px 0 0 0;
}

#divZoomSlider .ui-btn-text:before {
	display: block;
	content: "\f002";
	font-family: "Font Awesome 5 Light";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ----- main menu bar: general, views/tabs ----- */

.ui-dropdown-menu {
	display: none;
	position: relative;
	z-index: 998;
}

.ui-tabs-tab {
	display: none;
}

#divMenu {
	height: 40px;
	background: #222;
}

#divMenu .ui-controlgroup {
	margin: 0;
}

#divMenu .ui-radio {
	margin: 0;
}

#divMenu .ui-btn {
	margin: 0;
	border: none;
	background: #444;
}

#divMenu .ui-btn.ui-btn-active {
	background: #0f84cc;
}

#divMenu .ui-btn-inner {
	padding: 8px 12px 10px 12px;
	border: none;
}

#divMenu .ui-radio .ui-btn-inner .ui-btn-text {
	font-weight: 400;
}

#divMenuViews {
	overflow: hidden;
}

#divMenuGroupRight {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
}

#divMenuGroupRight #divPriceSocialGrouping,
#divMenuGroupRight #divMenuSettings, 
#divMenuGroupRight #divMenuFeatureSwitches, 
#divMenuGroupRight #btnLegend,
#divMenuGroupRight #divLegend {
	pointer-events: auto;
}

#divMenuSettings {
	display: none;
	float: right;
}

#divMenuFeatureSwitches {
	float: left;	
	height: 20px;
	margin: 9px 6px 0 0;	
}

#divMenuFeatureSwitches label.ui-slider {
	display: inline-block;
	font-size: 14px;
	line-height: 25px;
	margin: 0 12px 0 0;
	padding: 0;
	font-weight: 100;
}

#divMenuFeatureSwitches div.ui-slider-mini {
	display: inline-block;
	position: relative;
    vertical-align: bottom;
	top: -11px;
	margin: 0 6px 0 0;
	padding: 0;
	width: 30px;
	z-index: 0;
}

#divMenuFeatureSwitches span.ui-slider-label {
	min-height: auto;
	font-weight: normal;
	font-size: 10px;
	text-indent: 100px;
	background: #fff;
}

#divMenuFeatureSwitches span.ui-slider-label.ui-slider-label-b.ui-btn-down-c {
	background: #888;
}

#divMenuFeatureSwitches a.ui-slider-handle-snapping {
	border: 2px solid #888;
	background: #2c2c2c;
	height: 16px;
	width: 16px;
	top: 0;
}

#divMenuFeatureSwitches a.ui-slider-handle-snapping[aria-valuenow="on"] {
	border-color: #fff;
	background: #555;
}

#divMenuFeatureSwitches .ui-btn-corner-all {
	border-radius: 16px;
}

#divMenuFeatureSwitches .ui-slider-inneroffset {
	margin: 0 20px 0 0;
}

#divMenuFeatureSwitches .ui-btn-inner {
	padding: 0;
}


/* ----- main menu bar: pricing ----- */

#divLegendHandle {
	transform: rotate(90deg);
	float: left;
	position: relative;
	width: 28px;
	margin: 10px 0 0 0;
}

#btnLegendHandle {
	height: 28px;
	margin: 0;
}

#btnLegendHandle .ui-btn-inner {
	padding-bottom: 2px;
	padding-top: 4px;
}

#btnLegendHandle .ui-btn-inner .ui-icon {
	transform: rotate(-90deg);
	margin: 0;
	top: auto;
}

#layoutLegend {
	z-index: 280;
	position: relative;
	left: 0;
	margin: 0;
}

#layoutLegendSS {
	display: none;
}

#layoutLegend #divLegend {
	height: auto;
	max-width: 30em;
	max-height: 75%;
	float: left;
	margin: 0;
	padding: 0.3em 0.85em 0.15em 0.85em;
	border-radius: 0;
	border: 1px solid #999;
	border-top: none;
	text-shadow: none;
	background: #f9f9f9;
	color: #555;
}

#divMenuLegend,
#mnuLegend,
#mnuLegend div {
	/* height: 100%; */
}

#mnuLegend {
	position: absolute;
	right: 0;
}

#divMenuLegend {
	display: none;
	float: right;
	text-align: right;
}

#btnLegend {
	height: 40px;	
}

#btnLegend.ui-btn {
	display: block;
	background: none;
	z-index: 0;
}

#btnLegend .ui-btn-inner {
	padding: 5px 30px 0 12px;
	height: 35px;
}

#btnLegend #spanPriceAsShownNumber {
	font-size: 20px;
	font-weight: 400;
}

#btnLegend:not(.ui-btn-active) #spanPriceAsShownNumber {
	color: #e00;
}

#btnLegend #spanPriceAsShownText {
	font-size: 14px;
}

#btnLegend .ui-icon {
	left: auto;
	right: 12px;
	margin-top: -6px;
	font-size: 14px;
	background-image: none;
}

#btnLegend .ui-icon:before {
	content: "\f078";
	margin: 0;
	padding: 0;
}

#tblLegendPricing tr td:nth-child(1) {
	width: 90px;
	text-align: right;
}

#tblLegendPricing tr td:nth-child(2) {
	width: 170px;
	text-align: left;
	padding-left: 3px;
	font-size: 0.9rem;
}

#tblLegendPricing tr.base td:nth-child(1) {
	font-size: 1.3em;
}

#tblLegendPricing tr.total td:nth-child(1) {
	font-size: 1.3em;
	color: #d00;
}

#tblLegendPricing tr.base td:nth-child(2),
#tblLegendPricing tr.total td:nth-child(2) {
	vertical-align: bottom;
	padding-bottom: 0.3em;
}

#tblLegendPricing tr td:last-child {
	white-space: nowrap;
}

#divPriceSocialGrouping {
	display: block;
	float: right;
	margin: auto;
	padding: 0;
}

#divPriceGrouping {
	display: block;
	float: left;
	position: relative;
	z-index: 250;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
}


/* ----- social icons ----- */


#divDialogShare {
	text-align: center;
}

#divSocialIcons {
	margin: 1em;
}



/*
--------------------------------------------------------------------------------------
DIALOGS, POPUPS, OVERLAYS
--------------------------------------------------------------------------------------
*/

.ui-popup-screen {
	background: #000;
}

.ui-popup {
	border: 1px solid #000;
	background: #222;
}

.ui-popup-container {
	margin-top: 10px;
}

.ui-popup.ui-content,
.ui-popup .ui-content {
	max-height: 400px;
	overflow: auto;
	z-index: 999;
}

.ui-popup .ui-header {
	background: #000;
	border-color: #000;
}

.ui-popup .ui-title {
	margin: 9px 15px 10px 15px;
	font-weight: 600;
	color: #f0f0f0;
}

.ui-popup .ui-content {
	padding: 15px;
}

.ui-popup .ui-popup-btns {
	padding: 8px 15px 15px 15px;
}

.ui-grid-a .ui-block-a {
	padding-right: 10px;
}

.ui-popup .ui-btn {
	margin: 0;
	border-radius: 2px;
	background: #555;
}

.ui-popup .ui-btn-inner,
.ui-footer .ui-btn-icon-left .ui-btn-inner,
.ui-mini .ui-btn-icon-left .ui-btn-inner,
.ui-mini.ui-btn-icon-left .ui-btn-inner {
	background: transparent;
	padding: 8px 10px;
}

.ui-popup .ui-btn:hover .ui-btn-inner {
	background: rgba(255, 255, 255, 0.05);
}

.ui-popup .ui-btn-text {
	font-size: 14px;
	font-weight: 400;
}

.ui-popup .ui-btn.ui-checkbox-on,
.ui-popup .ui-btn.ui-checkbox-off {
	background: transparent;
}

.ui-popup .ui-checkbox input[type="checkbox"] {
	display: none;
}

.ui-popup .ui-icon.ui-icon-checkbox-off {
	background: rgba(255, 255, 255, 0.10);
}

#divDialogPrint {
	height: 400px;
}

#divPrintPreview {
	display: block;
	width: 350px;
	margin: 30px auto 0 auto;
}

#divPrintPreview > div {
	display: block;
	position: relative;
	text-align: center;
	margin: 20px 0;
	background: #fff;
	border: 1px solid #000;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#divPrintPreview div {
		height: 450px;
	}
}

/* IE10+ css hack, keep print preview pages from being too short, optimized for letter paper aspect ratio, longer paper sizes will have white sidebars */
#divPrintPreview svg {
	display: block;
	margin: 0;
	padding: 0;
}

#divPrintPreview #divLegend {
	height: auto;
	width: auto;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	text-align: left;
	text-wrap: none;
	padding: 0 0.75em;
}

#layoutDialogNote {
	width: 250px;
}

#layoutDialogPOI {
	width: auto;
	height: auto;
	border: none;
}

#divDialogPOI {
	max-height: 100%;
	padding: 0;
	text-align: center;
	background: #000;
}

.ui-popup #btnDialogPOICancel {
	top: 0px;
	right: 0px;
}

.ui-popup #btnDialogPOICancel.ui-btn {
	background: none;
}

.ui-popup #btnDialogPOICancel.ui-btn .ui-btn-inner {
	display: block;
	width: 15px;
	height: 15px;
	padding: 4px 7px 9px 8px;
	background: #C00;
}

#divDialogPOI.ui-loading {
	background: #000 url('/css/vip2.images/common-loading-white.svg') center center no-repeat;
}

#divDialogPoiIFrame {
	margin: 0 auto;
}

#divDialogPoiImg {
	max-width: 100%;
	max-height: 100%;
}

#divDialogPoiHtml {
	display: block;
	margin: 0 auto;
}

#layoutDialogHaloSize-popup {
	width: 100%;
	top: 10px;
}

#layoutDialogHaloSize {
	margin: 0 auto;
	width: 250px;
}

#divDialogHaloSizeBtns {
	margin-top: 0;
}





/*
--------------------------------------------------------------------------------------
RESPONSIVE - 1024px wide (iPad landscape) & smaller
--------------------------------------------------------------------------------------
*/

@media only screen and (max-width: 1024px) {

	#divLayoutID {
		width: 1024px;
	}

	/* #layoutDialogPOI.ui-popup {
		max-height: 100%;
		max-width: 100%;
		height: 100%;
		width: 100%;
	}

	.ui-popup-screen.in {
		height: 100%;
		opacity: 1;
	}

	.ui-popup-container {
		margin-top: 0;
	}
	*/

}





/*
--------------------------------------------------------------------------------------
RESPONSIVE - 768px wide (iPad portrait) & smaller
--------------------------------------------------------------------------------------
*/

@media only screen and (max-width: 768px) {

	#divLayoutID {
		width: 768px;
	}

	#divHeaderB * {
		display: none;
	}

	#layoutOptionsImgs .ui-radio .imgs-thumb {
		max-width: 100%;
	}
	
	#divMenuFeatureSwitches {
		display: none;
	}

}




/*
--------------------------------------------------------------------------------------
RESPONSIVE - any screen less than 800px tall (i.e. iPad & smaller tablets in landscape, very small laptops, phones)
--------------------------------------------------------------------------------------
*/

@media only screen and (max-height: 799px) {

	#layoutPreview {
		display: none !important;
	}

}




/*
--------------------------------------------------------------------------------------
RESPONSIVE - 736px wide (phone landscape) & smaller & specifically iPhoneX landscape even though it's 812px wide
--------------------------------------------------------------------------------------
*/

@media only screen and (max-width: 736px), only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {

	#divLayoutID {
		width: 736px;
	}

	#divStatus,
	#divViewMsg {
		position: fixed;
	}

	#divTools,
	#handleMainA {
		display: none;
	}

	#pnlHeader {
		display: none;
	}

	#divHeaderA,
	#divHeaderC {
		max-width: 50%;
	}

	#handleMainC {
		top: 50%;
		margin-top: -18px;
	}

	#pnlFooter {
		display: block;
	}

	#handleFooter {
		display: block;
	}

	#btnSave {
		position: absolute;
		top: -42px;
		text-align: center;
		left: 10px;
		margin: 0;
		display: block;
		border: none;
		width: 32px;
		height: 28px;
		backface-visibility: hidden;
		transform: scale(1);
		padding: 5px 0 0 0;
		border-radius: 2px;
		line-height: 1em;
		background: #0f84cc;
		color: #fff;
		font-size: 22px;
	}

	.swap-left-right #btnSave {
		left: auto;
		right: 10px;
	}

	#layoutPreview,
	#layoutComponents,
	#layoutFurniture {
		display: none;
	}

	#pnlMainC {
		position: fixed;
	}

	#layoutDialogSave {
		width: auto;
	}

	#layoutDialogSave br,
	#divDialogSaveHeader {
		display: none;
	}

	#layoutDialogSave p,
	#layoutDialogSave label.ui-input-text,
	#layoutDialogSave input.ui-mini,
	#layoutDialogSave .ui-mini input,
	#layoutDialogSave textarea.ui-mini,
	#layoutDialogSave.ui-popup .ui-btn-text {
		font-size: 12px;
		margin: 0;
	}

	#layoutDialogSave label.ui-input-text {
		margin-top: 8px;
	}

	#layoutDialogSave.ui-popup .ui-content {
		padding: 10px 10px 0 10px;
	}

	#layoutDialogSave.ui-popup .ui-grid-a.ui-popup-btns {
		margin: 8px 0 0 0;
	}

	#layoutDialogSave.ui-popup .ui-btn-inner {
		padding: 5px;
	}

	#layoutDialogSave.ui-popup .ui-checkbox .ui-btn-inner {
		padding: 5px 0 0 28px;
	}

	#layoutDialogSave.ui-popup .ui-checkbox .ui-mini.ui-btn-icon-left .ui-icon {
		left: 0;
	}

	#divMenuFeatureSwitches {
		display: none;
	}
	
	#divImgs .imgs-txt {
		margin-top: -55px;
		font-size: 1rem;
	}

	#divViewMsg {
		display: none !important;
	}

}





/*
--------------------------------------------------------------------------------------
RESPONSIVE - 420px wide (phone portrait) & smaller
--------------------------------------------------------------------------------------
*/

@media only screen and (max-device-width: 420px) and (orientation: portrait) {

	#divLayoutID {
		width: 420px;
	}

	#divMenu {
		height: 38px;
		width: 100%;
	}

	#mnuMenuViews {
		display: flex;
		flex-flow: row nowrap;
	}

	#mnuMenuViews .ui-radio {
		flex: 1 1 auto;
	}

	#divMenuGroupRight {
		margin-top: auto;
		width: 100%;
		text-align: center;
		position: static;
	}

	#divMenuLegend {
		float: none;
		text-align: center;
		background: #222;
	}

	#btnLegend {
		text-align: center;
	}

	#layoutLegend #divLegend {
		float: none;
		max-width: 100%;
	}

	#divStage {
		padding-top: 80px;
	}

	#divMainAMenuBlocker {
		height: 80px;
	}

	#divImgs {
		margin-top: 44px;
	}
	
	#divImgs .imgs-txt {
		margin-top: 0;
	}

	#layoutDialogSave label.ui-input-text {
		margin-top: 15px;
	}
	
	#layoutDialogSave.ui-popup .ui-grid-a.ui-popup-btns {
		margin: 15px 0 0 0;
	}
		
}





/*
--------------------------------------------------------------------------------------
RESPONSIVE - iPhoneX specific landscape overrides
--------------------------------------------------------------------------------------
*/

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {

	body {
		background: #222 !important;
	}

}





/*
----------------------------------------------------------------------------
ANY TOUCH DEVICE (regardless of screen size or display pixel density)
----------------------------------------------------------------------------
*/

html.ifptouchdevice #layoutDialogPOI.ui-popup {
	max-height: 100%;
	max-width: 100%;
	height: 100%;
	width: 100%;
}

html.ifptouchdevice .ui-popup-screen.in {
	height: 100%;
	opacity: 1;
}

html.ifptouchdevice .ui-popup-container {
	margin-top: 0;
}





/*
----------------------------------------------------------------------------
DEBUGGING
----------------------------------------------------------------------------
*/

#divDbg1 {
	height: 50%;
	left: 46px;
	right: 0;
	bottom: 0;
	position: absolute;
	z-index: 290;
	overflow: auto;
	color: #eee;
	background: #300;
}

#divDbg1 textarea {
	width: 100%;
	height: 90%;
	font: 11px 'Courier New', Courier, monospace;
	color: #eee;
	background: #300;
	border: none;
}

/*

* {
	border: none !important;
}

body {
	background: #00f !important;
}

.ui-layout {
	background: #00c !important;
}

[id^=handle] {
	background: #00c !important;
}

.ui-pnl-row-a {
	background: rgba(170,0,0,0.75) !important;
}

.ui-pnl-row-b {
	background: rgba(150,0,0,0.75) !important;
}

.ui-pnl-row-c {
	background: rgba(190,0,0,0.75) !important;
}

.ui-pnl-col-a {
	background: rgba(0,70,0,0.75) !important;
}

.ui-pnl-col-b {
	background: rgba(0,50,0,0.75) !important;
}

.ui-pnl-col-c {
	background: rgba(0,90,0,0.75) !important;
}

*/