#totalProductHeight { font-size: 10px; text-align: center; }

.parent { background-color: white; border: 1px solid #999; left: 0px; top: 0px; overflow: hidden; position: relative; }
.child { background-color: rgba(219, 228, 241, 1); border: 1px solid #006bb3; position: absolute; text-align: center; cursor: move; overflow: hidden; z-index: 3; }
.child span { color: darkgrey; }
.childText { background-color: rgba(219, 228, 0, 1); border: 1px solid #006bb3; position: absolute; text-align: center; cursor: move; overflow: hidden; z-index: 3; }
.childText span { color: darkgrey; }

#helpguide { min-height:130px; font-size: 12px; margin-bottom: 10px; padding: 12px; text-align: left; background-color: #F4F4F4 }

#uxCustomiseLayoutPopup { padding-right: 0px !important; }

#uxCustomiseLayoutPopup h3 { padding-top: 0; padding-bottom: 0; padding-left: 20px; color: #407272; }
#uxCustomiseLayoutPopup .modal-header { padding: 0 10px 0 0; }
#uxCustomiseLayoutPopup .modal-footer { text-align: left; }

#uxCustomiseLayoutPopup .modal-footer input[type='text'] { width: 50px; }

.popupLabel { width: 90px; float: left; padding-top: 5px; padding-right: 5px }

.centerDiv { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }

.swal-button { background-color: #337ab7 !important; }
.swal-button:hover { background-color: #2e6da4 !important; }

#totalProductWidth { font-size: 10px; text-align: center; display: block }

.rotate { -moz-transform: rotate(-90.0deg); /* FF3.5+ */ -o-transform: rotate(-90.0deg); /* Opera 10.5 */ -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ -ms-transform: rotate(-90deg); /* IE9+ */ float: left; position: relative; top: 100px; left: -20px; }

.uxLayoutFrame { zoom: 0.42; padding-left: 30px; }
.uxLayoutFrame .ui-resizable { position: absolute; }
/*.uxLayoutFrame.portrait { zoom: 0.5 !important; }
.uxLayoutFrame.panoramic { zoom: 0.4 !important; }*/

#uxLayout1Container { width: 150px; height: 100px; position: absolute; }
#uxLayout1 { background-color: rgba(219, 228, 241, 1); text-align: center; width: 150px; height: 100px; position: relative; }
#uxLayout1 span { color: #ccc; }

#posX, #posY, #posH, #posW { padding-left: 3px; width: 40px; border-radius: 4px; margin-bottom: 10px; height: 30px; }

.panelOverlapError { background-color: red !important; }
#uxLayoutName { margin-top: 15px } 

#custSaveBox { float: right; font-size: 10px; padding-right: 5px; padding-top: 10px }
#uxSavingTerms { vertical-align: sub;}
#custErrors {min-height:78px;}
#layoutDesignerErrorMessage { width: 100%; display: inline-block; padding: 8px 10px; margin-top: 10px; margin-bottom: 10px; border: 1px solid red; border-radius: 4px; background-color: #ffeaea; }
#layoutDesignerWarningMessage {width: 100%; display: inline-block; padding: 8px 10px; margin-top: 10px; margin-bottom: 10px; border: 1px solid orange; border-radius: 4px; background-color: #ffeecf; }

.selectedNode { border: 2px green dotted; background-color: #a3d796; z-index: 10 !important; opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ color: black !important; }
.selectedNode > span { color: black !important; font-size: 25px; }
.selectedNode > div { color: black !important; }
.selectedTextNode { border: 2px black dotted; background-color: yellow; z-index: 10 !important; opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ color: black !important; }
.selectedTextNode > span { color: black !important; font-size: 25px; }
.selectedTextNode > div { color: black !important; }

.gridDot { border: 1px solid #595959 !important; /* #c0c0c0 */ width: 1px; height: 1px; position: absolute; z-index: 2; }

.gridDotMini { border: 1px solid #cccccc; width: 1px; height: 1px; position: absolute; z-index: 1; }

.debugHeight { color: darkgray; float: left; padding-left: 10px; top: 50%; -moz-transform: rotate(-90.0deg); /* FF3.5+ */ -o-transform: rotate(-90.0deg); /* Opera 10.5 */ -webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -ms-transform: rotate(-90deg); /* IE9+ */ }
.debugWidth { transform: translateY(-145%); color: darkgray; }
.debug { display: none; }

.title { font-size: 20px; }

.ui-resizable-se, .ui-resizable-sw, .ui-resizable-nw, .ui-resizable-ne { width: 15px; height: 15px; background-color: darkgrey; border-radius: 4px; }
.ui-resizable-sw { left: 0; bottom: 0; }
/*.ui-resizable-se { width: 9px !important; height: 9px !important; right: -5px !important; bottom: -5px !important; position: absolute; }*/
.ui-resizable-se { right: 0; bottom: 0; }
.ui-resizable-nw { left: 0; top: 0; background-position: 0 -13px; }
.ui-resizable-ne { right: 0; top: 0; background-position: 0 -25px; }

@media(min-width:420px) {
    .uxLayoutFrame { zoom: 0.62 }
    .rotate { top: 150px; }
}

@media(min-width:540px) {
    .uxLayoutFrame { zoom: 0.82; padding-left: 12px; }
    .rotate { top: 200px; }
}

@media(min-width:650px) {
    .uxLayoutFrame { zoom: 1; padding-left: 12px; }
    .popupLabel { width: 90px; }
}