﻿
/*#fpChooseProductCat .subHeading {transform: scale(1); animation: pulse 2s 4s; }*/

.pulseit1 { transform: scale(1); animation: pulse 1.2s 0.4s; }
.pulseitbtn { transform: scale(1); animation: pulse2 1.1s 0.3s; }

@keyframes pulse {
    50% { transform: scale(1); box-shadow: 0 0 0 3px rgba(163, 215, 150, 0.90); }
}

@keyframes pulse2 {
    50% { transform: scale(1.01); box-shadow: 0 0 0 2px rgba(163, 215, 150, 0.90); }
}

#BuildMAFinishedProduct.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; }


/* Buid Multi-Aperture Finished Products */
/*html { overflow-y: scroll; height: 100%; }*/ /* add to main site when tested */
#BuildMAFinishedProduct { padding: 0px 0px 10px 0px; line-height: 1.4em; width: 100%; font-size: 12px; min-height: 760px; }
#BuildMAFinishedProduct h1, #BuildMAFinishedProduct h2, #BuildMAFinishedProduct h3 { margin-top: 0px; padding-top: 0px; color: #3C3C3C; }
#BuildMAFinishedProduct h1 { margin: 0 0 5px 5px; float: left; font-size: 24px;}
#BuildMAFinishedProduct h2 { font-size: 12px; }
#BuildMAFinishedProduct h3 { font-size: 14px; }
#BuildMAFinishedProduct a { outline: none; }
#BuildMAFinishedProduct .no-text-selection { -webkit-user-select: none; /* disable text selection */ -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; -ms-user-select: none; user-select: none; }
.navLinkBack { display: none; }

#BuildMAFinishedProduct .can-select-text { -webkit-user-select: text; /* disable text selection */ -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; -ms-user-select: text; user-select: text; }

.qq-upload-list { background-color: #FCFCFC; border-radius: 3px; padding: 0 5px 5px 5px !important; z-index: 2; position: relative; }

#BuildMAFinishedProduct #fpHeaderBar { height: 40px; margin-top: 5px; font-size: 14px; }

#BuildMAFinishedProduct .subHeading { padding: 10px; background-color: #fff; }
#BuildMAFinishedProduct .subHeading h2 { font-weight: bold; font-size: 18px; margin: 6px 0 0 6px; }
#BuildMAFinishedProduct .subHeading span { display: block; margin: 10px 3px 9px 6px; line-height: 1.2em; font-size: 16px; font-weight: normal; }

#navBar { display: inline-block; min-height: 50px; padding-top: 10px; background-color: white; }
#BuildMAFinishedProduct .navLinkNext { min-width: 100px; float: right; margin: 0 10px 5px 0; }
#BuildMAFinishedProduct .btnDisabled, .navLinkNext.btnDisabled { opacity: .3; }
#BuildMAFinishedProduct .navLinkBack { float: left; margin: 0 10px 5px 0; }
#bottomnNavButtons { width: 100%; height: 60px; display: inline-block; padding: 10px 60px 10px 50px; }
#bottomnNavButtons #navLinkNext4 { float: right; margin: 0; width: 120px; }
#bottomnNavButtons #navLinkBack4 { float: left; margin: 0; }

#uxCustomiseLayoutDiv { margin-left: 78px; position: relative; top: -5px; margin-bottom: 15px; }
#uxCustomiseLayout1, #uxCustomiseLayout2 { display: none; }

#BuildMAFinishedProduct #fpNavBar ul { display: inline-flex; padding-top: 5px; list-style-type: none; font-size: 14px; color: #FFF; }
#BuildMAFinishedProduct #fpNavBar li { display: inline; line-height: 18px; margin: 0px; font-size: 14px; }
#BuildMAFinishedProduct #fpNavBar ul a { line-height: 18px; padding: 5px 12px 5px 5px; background-image: url('images/Arrow.png'); background-position: right; background-repeat: no-repeat; margin-left: 0px; color: #444; text-align: right; font-size: 16px; }
#BuildMAFinishedProduct #fpNavBar #navLnkConfirm { background-image: none; }
#BuildMAFinishedProduct #fpNavBar a.selected { background-image: url('images/ArrowSelected.png'); color: #0762D9; }
#BuildMAFinishedProduct #fpNavBar a.disabled { background-image: url('images/ArrowDisabled.png'); text-decoration: none; color: #999; }

#BuildMAFinishedProduct a:hover img { visibility: hidden; }

#previewWall { background-color: #f5f7f6; padding-left: 25px; padding-right: 25px }
#previewWall #uxMainImage { padding: 0; margin-top: 40px; margin-bottom: 40px; }
#PreviewZoom #PreviewDownloadLink { margin-right: 33% }

/* Preview box */
#BuildMAFinishedProduct #fpPreview { width: 320px; min-height: 624px; float: right; margin: 0 15px 0 0; background-color: #f5f7f6; border: 1px solid #E6E6E6; z-index: 1010 }

#BuildMAFinishedProduct #fpPreview h2 { width: 70px; float: left; margin: 7px 0 0 10px; font-size: 18px; font-weight: normal; }
#BuildMAFinishedProduct #fpPreview .fpPreview-top a { color: #333; }
#BuildMAFinishedProduct #fpPreview .lnk-wall-colour { height: 20px; float: right; margin: 7px 7px 0 0; padding-left: 25px; background-image: url('images/paint.svg'); background-position: left top; background-repeat: no-repeat; }
#BuildMAFinishedProduct #fpPreview .lnk-preview-zoom { height: 20px; float: right; margin: 7px 23px 0 0; padding-left: 25px; background-image: url('images/zoom.svg'); background-position: left top; background-repeat: no-repeat; }

#BuildMAFinishedProduct #fpPreview .fpPreview-top { width: 318px; height: 32px; background-color: rgba(235, 235, 235, 0.5); margin: 0-15px 0 -15px; }
#BuildMAFinishedProduct #fpPreview .fpPreview-middle { width: 320px; height: 300px; }
#BuildMAFinishedProduct #fpPreview .fpPreview-middle table { width: 300px; height: 300px; margin-left: -6px; }
#BuildMAFinishedProduct #fpPreview .fpPreview-middle table td { width: 300px; height: 300px; vertical-align: middle; text-align: center; }
#BuildMAFinishedProduct #fpPreview .fpPreview-bottom { width: 300px; height: 20px; }
#BuildMAFinishedProduct #fpPreview .fpPreview-bottom a { width: 300px; height: 20px; }
#BuildMAFinishedProduct #fpPreview .background-close-msg { color: #777; font-style: italic }

#BuildMAFinishedProduct #fpPreview #imgPrevLoading { float: left; position: relative; z-index: 2; top: -157px; left: 152px; }
#BuildMAFinishedProduct #fpPreview #imgPrevLoading.hide-me { display: none; }
#BuildMAFinishedProduct #fpPreview #closePreview { margin-left: 55px }

#BuildMAFinishedProduct #fpPreview #displayPreview { width: 100px; position: absolute; top: 180px; left: -70px; z-index: 1020; font-size: 16px; border: none; border-top-left-radius: 6px; border-top-right-radius: 6px; outline: none; background-color: #407272; color: white; cursor: pointer; padding: 10px; -webkit-box-shadow: -1px -1px 2px #bbb; box-shadow: -2px -2px 2px #bbb; -webkit-animation: fadein .2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein .2s; /* Firefox < 16 */ -o-animation: fadein .2s; /* Opera < 12.1 */ animation: fadein .2s; transition: .2s }
#BuildMAFinishedProduct #fpPreview #displayPreview:hover { -webkit-animation: fadein .2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein .2s; /* Firefox < 16 */ -o-animation: fadein .2s; /* Opera < 12.1 */ animation: fadein .2s; transition: .2s; background-color: #8fbbbc }
.rotate { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg) }

#BuildMAFinishedProduct #fpSummary { width: 290px; overflow: hidden; padding: 8px 2px 8px 8px; margin: 5px 0 16px 0; background-color: #FEFEFE; border: 1px solid #DDDDDD }
#BuildMAFinishedProduct #fpSummary h2 { margin-bottom: 9px; font-size: 18px !important; font-weight: bold }
#BuildMAFinishedProduct #fpSummary .sumTop h2 { margin-left: 0px; width: 100% }
#BuildMAFinishedProduct #fpSummary .sumTop { width: 280px; min-height: 317px }
#BuildMAFinishedProduct #fpSummary .sumBottom { width: 276px; height: 28px; float: left}
#BuildMAFinishedProduct #fpSummary div { width: 280px; float: left; line-height: 1.2em; margin-bottom: 8px; color: #333333}
#BuildMAFinishedProduct #fpSummary .label { width: 90px; float: left; margin-right: 5px; padding: 0; line-height: 1.15em; color: black; text-align: right; font-size: 14px; font-weight: normal; white-space: normal}
#BuildMAFinishedProduct #fpSummary .value { width: 185px; float: left; font-weight: bold; padding: 0; line-height: 1.15em; color: black; font-size: 14px; font-weight: bold; white-space: normal}
#BuildMAFinishedProduct #fpSummary .not-chosen { color: #d41d21; font-size: 14px; font-weight: bold}
#BuildMAFinishedProduct #fpSummary .start-over { float: left; margin: 15px 0 0 10px; font-size: 11px; font-weight: bold}

/*.sticky { position: fixed; top: 10px;*/ /*right:50px;*/ /*margin: 0;*/ /*width:calc(33.33% - 25px);*/ /*}*/
.abs { position: absolute; bottom: 30px; /*right:10px;*/ /*width:calc(33.33% - 10px);*/ }

#BuildMAFinishedProduct #WallColourDialog { width: 320px; position: fixed; display: block; padding: 3px; background-color: #407272}
#BuildMAFinishedProduct #WallColourDialog h2 { display: inline; margin-left: 8px; line-height: 24px; font-size: 14px; font-weight: normal; color: #FFF }
#BuildMAFinishedProduct #WallColourDialog .wc-close { width: 20px; height: 20px; font-size: 20px; margin-right: 8px; float: right; color: #fff; }
#BuildMAFinishedProduct #WallColourDialog .wc-top { width: 100%; background-color: #407272 }
#BuildMAFinishedProduct #WallColourDialog .wc-bottom { width: 100%; display: inline-block; background-color: #FFF }
#BuildMAFinishedProduct #WallColourDialog .wc-bottom .subtle { width: 298px; display: inline-block; margin: 10px 0 0 8px }
#BuildMAFinishedProduct #WallColourDialog .wc-bottom .vivid { width: 298px; display: inline-block; margin: 10px 0 10px 8px }
#BuildMAFinishedProduct #WallColourDialog .wc-thumb { width: 31px; height: 27px; float: left; margin: 3px; border: 1px solid #D2D2D2 }
#BuildMAFinishedProduct #WallColourDialog .wc-thumb.wc-highlight { border: 1px solid #577aae }

/* Stages bar */
#BuildMAFinishedProduct #fpStagesBar { float: left; margin-left: 8px; padding-top: 10px; }
#BuildMAFinishedProduct #fpStagesBar a:hover { width: 17px; margin: 1px 0 0 0; }
#BuildMAFinishedProduct #fpStagesBar .message { float: right; overflow: visible; color: #d41d21; font-size: 18px; line-height: 1em; font-weight: bold; }

/* Z-index of #mask must lower than #boxes .window */
#mask { position: absolute; z-index: 9000; background-color: #000; display: none; left: 0px; top: 0px; }
#BuildMAFinishedProduct .window { position: absolute; display: none; z-index: 9999; padding: 20px; -moz-box-shadow: 0 0 10px 5px #999; -webkit-box-shadow: 0 0 10px #999 }  

#BuildMAFinishedProduct #PreviewZoom { display: none; border: 1px solid Silver; position: absolute; }
#BuildMAFinishedProduct #LoadingSplash { width: 300px; height: 100px; display: none; background-color: #FFF; border: solid 4px #29a511; border-radius: 10px}
#BuildMAFinishedProduct #LoadingSplash p { width: 100%; text-align: center; font-size: 18px; line-height: 1.3em; margin-top: 14px}
#BuildMAFinishedProduct .loading-text { padding-left: 10px; color: Maroon}

#BuildMAFinishedProduct .div-loading { width: 100%; height: 50px}
#BuildMAFinishedProduct .div-loading p { font-size: 26px; text-align: center; margin-top: 30px}
#BuildMAFinishedProduct .div-loading img { width: 16px; height: 16px}

#BuildMAFinishedProduct #fpChooseProductCat { width: 100%; height: 100%}
#BuildMAFinishedProduct #fpChooseProductCat #imgTest { min-width: 300px; min-height: 300px; float: left}

#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel ul { width: 180px; float: left; margin: 0 10px 0 0; padding: 10px 0; background-color: #FFF; border: 1px solid #ccc; -webkit-box-shadow: 2px 2px 7px #D1D1D1; box-shadow: 2px 2px 7px #D1D1D1; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel li { width: 170px; height: 27px; line-height: 14px; float: left; margin: 1px 5px 2px 5px; list-style-type: none; background-color: #f1f1f1; font-size: 14px; text-align: left; border: 0px solid #FFF; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel li .designmode { background-color: #ffd7b6 }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel li a { width: 170px; display: inline-block; line-height: 16px; padding: 5px 10px; color: #333; text-decoration: none; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel li a:hover { color: #FFF; background-color: #577aae; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .categorySelected { border: none; background-color: #a3d796; Color: #156121; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .categorySelected.designmode { background-color: #fca761; Color: #156121; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel li a:hover.categorySelected { background-color: #a3d796; Color: #156121; }

#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel #productCatSlidePanel { display: table; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide { width: 141px; height: 177px; float: left; margin-right: 11px; margin-bottom: 12px; padding: 0px; background-color: #fff; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide .t { width: 140px; height: 142px; border: 3px solid #fff; /*-moz-border-radius-topleft:6px; border-top-left-radius:6px; -moz-border-radius-topright:6px; border-top-right-radius:6px;*/ }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide .b { width: 139px; height: 30px; border: 3px solid white; background-color: white; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide .thumb { display: block; width: 134px; height: 134px; margin-left: 1px; margin-top: 1px; background-color: #fff; background-image: url('images/progress.gif'); background-position: center; background-repeat: no-repeat; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide .name { width: 97px; float: left; line-height: 1.2em; margin-left: 6px; color: #3C3C3C; font-size: 11px; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide .b a { width: 18px; height: 18px; float: right; padding: 0px; margin-right: 2px; background-image: url('images/info.svg'); background-repeat: no-repeat; }

#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide .b a:hover { margin-right: 1px; margin-top: -1px; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlideOver { border: 3px solid #577aae !important; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlideSelected .t { border: 3px solid #a3d796; background-color: #fff; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlideSelected .b { border: 3px solid #a3d796; background-color: #a3d796; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlideSelected { background-color: #a3d796; }

#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide.designmode { background-color: #ffd7b6; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide.designmode .t { border: 3px solid #ffd7b6; background-color: #ffd7b6; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlide.designmode .b { border: 3px solid #ffd7b6; background-color: #ffd7b6; }

#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlideSelected.designmode .t { border: 3px solid #fca761; background-color: #fca761; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlideSelected.designmode .b { border: 3px solid #fca761; background-color: #fca761; }
#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlideSelected.designmode { background-color: #fca761; }

#BuildMAFinishedProduct #fpChooseProductCat #productsCatPanel .catSlideSelected .name { color: #156121; }
#BuildMAFinishedProduct #fpChooseProductCat #uxCategoryDropdown { margin-bottom: 20px; }

#uxInfoPopup #detailProductImgTopPopup { width: 100%; }
#uxInfoPopup img { width: 100%; max-width:300px; margin:0 auto; display:block; border: 1px solid #CCCCCD; }
#uxInfoPopup h2 { margin: 0; }
#uxInfoPopup h3 { margin-top: 0px; font-size: 16px; font-weight: bold; margin-top: 20px }
#detailProductDescriptionPopup {margin-top:10px;}
/* Layouts and Sizes */
#uxLayoutDiv { margin: 12px 0; background-color: #fff; }
#BuildMAFinishedProduct #fpChooseLayout { width: 100%; height: 100% }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 { min-height: 120px; display: inline; margin: 0 0 20px 0; background-color: White; border: 0px solid Silver; overflow: visible; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 { min-height: 120px; display: inline; margin: 0 0 20px 0; overflow: visible; }
#BuildMAFinishedProduct #fpChooseLayout #sizeCatList ul { width: 112px; float: left; margin: 0 10px 0 15px; padding: 10px 0; background-color: white; border: 1px solid #ccc; /*-moz-border-radius:6px; border-radius:6px;*/ -webkit-box-shadow: 2px 2px 7px #D1D1D1; box-shadow: 2px 2px 7px #D1D1D1; }
#BuildMAFinishedProduct #fpChooseLayout #sizeCatList li { width: 100px; height: 28px; float: left; line-height: 16px; margin: 3px 5px 2px 5px; list-style-type: none; background-color: #f1f1f1; font-size: 14px; text-align: left; border: 0px solid #FFF; }
#BuildMAFinishedProduct #fpChooseLayout #sizeCatList li a { width: 100px; display: inline-block; line-height: 16px; padding: 5px; color: #3C3C3C; text-decoration: none; }
#BuildMAFinishedProduct #fpChooseLayout #sizeCatList li a:hover { color: #FFF; background-color: #577aae; }
#BuildMAFinishedProduct #fpChooseLayout #sizeCatList li a.sizeCatSelected { border: none; background-color: #a3d796; color: #156121; }
#BuildMAFinishedProduct #fpChooseLayout #sizeCatList li a:hover.categorySelected { background-color: #a3d796; color: #156121; }

#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize { min-height: 50px; border: none; background-color: white; color: #3C3C3C; text-align: center; padding-top: 15px; margin-bottom: 10px; width: 49% !important; margin-right: 1%; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize:nth-child(2n) { margin-right: 0; margin-left: 1%; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize.designmode { background-color: #ffd7b6; color: #3C3C3C; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize span { width: 140px; min-height: 30px; float: left; font-size: 11px; margin-bottom: 6px; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize:hover { color: #fff; background-color: #577aae; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize:hover.sizeSelected { background-color: #a3d796; color: #156121; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize.sizeSelected { background-color: #a3d796; color: #156121; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize.designmode.sizeSelected { background-color: #fca761; color: #156121; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize a { width: 18px; height: 18px; position: absolute; bottom: 0; right: 0; padding: 0; margin: 0 3px 3px 0; background-image: url('images/info.svg'); background-repeat: no-repeat; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize a:hover { margin:0 2px 4px 0; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize a.add-layout { margin-right: 27px; background-image: url('images/add.svg'); }

#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize { min-height: 61px; border: none; background-color: white; color: #3C3C3C; text-align: center; padding-top: 15px; margin-bottom: 10px; width: 49% !important; margin-right: 1%; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize:nth-child(2n) { margin-right: 0; margin-left: 1%; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize.designmode { background-color: #ffd7b6; color: #3C3C3C; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize span { float: left; padding-bottom:13px; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize:hover { color: White; background-color: #577aae; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize:hover.sizeSelected { background-color: #a3d796; color: #156121; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize.sizeSelected { background-color: #a3d796; color: #156121; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize.designmode.sizeSelected { background-color: #fca761; color: #156121; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 a { width: 18px; height: 18px; position: absolute; bottom: 0; right: 0; padding: 0; margin: 0 3px 3px 0; background-image: url('images/info.svg'); background-repeat: no-repeat; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize a:hover { margin:0 2px 4px 0; }
#BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize a.add-layout { margin-right:27px; background-image: url('images/add.svg'); }

#BuildMAFinishedProduct #fpChooseLayout { width: 100%; height: 100%; display: none; }
#BuildMAFinishedProduct #fpChooseLayout .noSizeSeleced { margin-left: 20px; color: #333; font-size: 18px; }
#BuildMAFinishedProduct #fpChooseLayout #layoutPanel { min-height: 300px; margin-top: 5px; }
#BuildMAFinishedProduct #fpChooseLayout #layoutPanel .layoutSlide { width: 150px; float: left; margin: 3px 7px 7px 5px; padding: 6px; border: none; background-color: #f1f1f1; position: relative; }
#BuildMAFinishedProduct #fpChooseLayout #layoutPanel .layoutSlide:hover { float: left; margin: 3px 7px 7px 5px; padding: 6px; border: none; color: #ffffff; background-color: #577aae; }
#BuildMAFinishedProduct #fpChooseLayout #layoutPanel .layoutSlide a.regenerate-thumbnail { width: 16px; height: 16px; position: absolute; bottom: 0; right: 0; padding: 0; margin: 0 2px 2px 0; background-image: url('images/refresh.svg'); background-repeat: no-repeat; }
#BuildMAFinishedProduct #fpChooseLayout #layoutPanel .layoutImage { display: block; margin: 0px auto; }
#BuildMAFinishedProduct #fpChooseLayout #layoutPanel .layoutSlide.layoutSelected { float: left; margin: 3px 7px 7px 5px; padding: 6px; border: none; color: #156121; background-color: #a3d796; }
#BuildMAFinishedProduct #fpChooseLayout #layoutPanel .layoutName { width: 100%; height: 28px; padding-top: 2px; text-align: center; line-height: 1.1em; }

/* Product Options */
#BuildMAFinishedProduct #fpChooseOptions { width: 100%; height: 100%; display: none; }
#BuildMAFinishedProduct #fpChooseOptions h3 { padding-top: 10px; font-weight: bold; }
#BuildMAFinishedProduct #fpChooseOptions h3.opt2, #BuildMAFinishedProduct #fpChooseOptions h3.opt3, #BuildMAFinishedProduct #fpChooseOptions h3.opt4 { padding-top: 25px; }
#BuildMAFinishedProduct #option1Div, #BuildMAFinishedProduct #option2Div, #BuildMAFinishedProduct #option3Div, #BuildMAFinishedProduct #option4Div { color: #3c3c3c; clear: left; }
#BuildMAFinishedProduct #fpChooseOptions .option-thmb { width: 142px; float: left; margin: 4px 6px 0px 2px; border: 2px solid #F1F1F1; background-color: white; }
#BuildMAFinishedProduct #fpChooseOptions .option-thmb.admin { background-color: #e8bfe5; }
#BuildMAFinishedProduct #fpChooseOptions .option-thmb img { width: 86px; height: 86px; display: block; margin: 0 auto; margin-top: 2px; background-color: White; }
#BuildMAFinishedProduct #fpChooseOptions .option-thmb .option-thmb-text { width: 148px; height: 115px; float: left; margin: 2px 4px 0px 6px; }
#BuildMAFinishedProduct #fpChooseOptions .option-thmb .option-thmb-title { Width: 132px; line-height: 1.1em; float: left; margin: 6px 0 0 0; font-size: 14px; font-weight: bold; }
#BuildMAFinishedProduct #fpChooseOptions .option-thmb .option-thmb-description { Width: 132px; font-size: 12px; line-height: 1.1em; float: left; margin-top: 4px; }
#BuildMAFinishedProduct #fpChooseOptions .option-thmb.hilighted { border-color: #577AAE; }
#BuildMAFinishedProduct #fpChooseOptions .option-thmb.selected { border-color: #A3D796; background-color: #A3D796; }

/* Image Selection */
#BuildMAFinishedProduct #fpChooseImages { width: 100%; height: 100%; display: none; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors { float: left; width: 100%; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .image-selector { min-height: 112px; margin-top: 0px; margin-bottom: 9px; background-color: #FFF; -webkit-box-shadow: 2px 2px 6px #D7D7D7; box-shadow: 2px 2px 6px #D7D7D7; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-top { background: #407272; color: #FFF; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom { min-height: 84px; width: 100%; background-color: #FFF; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-image { float: left; background-color: #FFF; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-image img { width: 68px; height: 68px; float: left; margin: 7px 10px 0 4px; border: 1px solid #8FA1B1; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-image .fileName { margin-top: 7px; font-size: 13px; line-height: 1.2em; word-wrap: break-word; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload { width: 210px; min-height: 69px; float: left; margin-top: 2px; margin-bottom: 0px; padding-left: 10px; padding-top: 5px; background-color: #FFF; border-left: 1px solid #8FA1B1; border-right: 1px solid #8FA1B1; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload .upload-control { float: left; width: 272px; height: 35px; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload .upload-control a { display: inline-block; margin-top: 2px; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload .upload-control .file-uploader { overflow: visible; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload .from-collection { float: left; width: 272px; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload .from-collection a { background-image: url('images/btnCollection.png'); background-position: left top; background-repeat: no-repeat; width: 160px; height: 28px; float: left; margin: 1px 0 4px 0; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload .from-collection a:hover { background-position: 0 -28px; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload .or-span { width: 30px; height: 26px; line-height: 26px; float: left; text-align: center; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-buttons { height: 80px; float: left; touch-action: none; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-buttons a { float: left; clear: both; line-height: 1em; touch-action: none; }
#BuildMAFinishedProduct #fpChooseImages a.btnCrop { Width: 140px; height: 28px; margin-top: 9px; margin-left: 8px; padding: 4px; text-align: center; font-size: 13px; line-height: 14px; background-color: #156121; color: #FFF; -webkit-border-radius: 4px; border-radius: 4px; }
#BuildMAFinishedProduct #fpChooseImages a.checkCrop { color: #FFF; background-color: #d41d21; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors h2 { display: inline-block; margin-left: 10px; margin-top: 3px; margin-bottom: 3px; font-size: 14px; font-weight: normal; color: #FFF; }
#BuildMAFinishedProduct #fpChooseImages #imageSelectors .node-number { color: #FFF; margin: 0 0 0 6px; padding: 2px 6px 2px 6px; display: inline-block; font-size: 16px; font-weight: bold; }

#myCollection .collectionList { padding: 0px 6px 7px 6px; border: 1px #ddd solid; }
#myCollection .collectionList h2 { font-size: 20px; }
#myCollection .collectionList .cd-links a { display: block; padding: 7px 5px 7px 8px; margin-bottom: 5px; background-color: #f1f1f1; color: #3c3c3c}
#myCollection .collectionList .cd-links a:hover { background-color: #577aae; color: #fff; text-decoration: none}
#myCollection .collectionList .cd-links a.cd-selected:hover { background-color: #577aae !important}
#myCollection .collectionList .cd-links .cd-selected { background-color: #a3d796 !important; text-decoration: none}

#myCollection .slide-panel { margin: 10px; }
#myCollection .slide-panel .cdImageSlideContainer { height: 200px; padding: 0px 5px 10px 5px; }
#myCollection .slide-panel .cdImageSlide { height: 190px; border: 1px solid #e1e1e1; text-align: center; word-wrap: break-word; overflow: hidden; background-color: #fbfbfb; }
#myCollection .slide-panel .cdImageSlide img { margin-top: 10px; border: 1px solid #f1f1f1; }
#myCollection .slide-panel .cdImageSlide .imageName { display: block; color: #333; font-size: 11px; line-height: 13px; }
#myCollection .slide-panel .cdImageSlide:hover { background-color: #577aae; }
#myCollection .slide-panel .cdImageSlide:hover > span { color: #fff !important; }

#BuildMAFinishedProduct #EditImageDialog { width: 500px; border: 3px solid #F1F1F1; padding: 4px; background-color: #F1F1F1; min-width: 314px; }
#BuildMAFinishedProduct #EditImageDialog h2 { float: left; margin-left: 10px; font-size: 16px; font-weight: normal; line-height: 1.2em; color: #FFF; display: inline; }
#BuildMAFinishedProduct #EditImageDialog h2 .node-number { background-color: #FFF; color: #222; margin: 0 0 0 4px; padding: 2px 3px 3px 3px; display: inline-block; line-height: 1.1em; }
#BuildMAFinishedProduct #EditImageDialog .close { width: 16px; height: 16px; float: right; background-image: url('images/close.png'); background-repeat: no-repeat; }
#BuildMAFinishedProduct #EditImageDialog .ei-top { height: 32px; background-color:#407272; touch-action: none; padding: 5px; min-width: 300px; }
#BuildMAFinishedProduct #EditImageDialog .ei-bottom { background-color: #F1F1F1; touch-action: none; min-width: 300px; }
#BuildMAFinishedProduct #EditImageDialog .ei-bottom table.tbl1 { clear: both; }
#BuildMAFinishedProduct #EditImageDialog .ei-bottom table.tbl2 { width: 600px; }
#BuildMAFinishedProduct #EditImageDialog .ei-bottom .ei-buttonbar { height: 36px; /*background-color:#8FA1B1;*/ background-color: #F1F1F1; width: 100%; }
#BuildMAFinishedProduct #EditImageDialog .ei-bottom .ei-buttonbar .rotations { width: 142px; height: 28px; float: right; margin-top: 7px; padding: 5px 5px 2px 5px; line-height: 1.6em; }
#BuildMAFinishedProduct #EditImageDialog .rotateACW { width: 28px; height: 28px; float: left; background-image: url('images/rotateleft.png'); background-repeat: no-repeat; background-position: center; background-color:#407272; border-radius: 3px; }
#BuildMAFinishedProduct #EditImageDialog .rotateCW { width: 28px; height: 28px; float: left; background-image: url('images/rotateright.png'); background-repeat: no-repeat; background-position: center; background-color:#407272; border-radius: 3px; }
#BuildMAFinishedProduct #EditImageDialog a:hover.rotateACW { background-image: url('images/rotateleftHover.png'); }
#BuildMAFinishedProduct #EditImageDialog a:hover.rotateCW { background-image: url('images/rotaterightHover.png'); }
#BuildMAFinishedProduct #EditImageDialog .rotateTitle { width: 70px; float: left; text-align: center; color: #333; font-size: 16px; margin-top: 2px; }
#BuildMAFinishedProduct #EditImageDialog .ei-bottom select { width: 105px; height: 28px; float: left; margin-left: 10px; margin-top: 12px; }
#BuildMAFinishedProduct #EditImageDialog .ei-bottom .okBtn { width: 90px; float: right; margin: 1px 12px 3px 0; }
#BuildMAFinishedProduct #EditImageDialog .ei-bottom .cancelBtn { width: 80px; float: right; margin: 1px 10px 3px 0; }
#BuildMAFinishedProduct #EditImageDialog .tbl2 img { text-align: center; }


/* Other Frame options */
#BuildMAFinishedProduct #fpConfirm { /*width:100%; height:100%;*/ display: none; }
#BuildMAFinishedProduct #fpConfirm p { margin: 11px 9px 9px 5px; line-height: 1.4em; font-size: 16px }
#BuildMAFinishedProduct #fpConfirm .clearer { margin-bottom: 40px; }
#BuildMAFinishedProduct #fpConfirm .qty-label { width: 120px; height: 26px; padding-top: 3px; float: left; }
#BuildMAFinishedProduct #fpConfirm #txtQty { width: 40px; height: 20px; text-align: center; padding: 0px; }
#BuildMAFinishedProduct #fpConfirm .message { display: block; clear: left; margin: 20px 0px 0px 5px; line-height: 1.2em; font-size: 12px; color: #d41d21; }
/*#BuildMAFinishedProduct #fpConfirm .mfconfirm {width:650px; float:left; margin-top:15px;}*/

.centredBuilder { margin-left: auto; margin-right: auto; width: 200px; }
.centredProduct { margin-left: auto; margin-right: auto; width: 330px; padding-left: 20px; }
.centredProductOptions { margin-left: auto; margin-right: auto; width: 100%; padding-left: 20px; }
#BuildMAFinishedProduct .col-sm-12 { padding: 0; }
.cropBlackAndWhite { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.cropSepia { -webkit-filter: sepia(100%); filter: sepia(100%); }

@media(min-width:168px) {
    #BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom {float:left}
}

@media(min-width:360px) {
    .centredBuilder { margin-left: auto; margin-right: auto; width: 360px; }
    #BuildMAFinishedProduct #fpPreview { margin: 0 9px 0 0; }
}

@media(min-width: 480px) {
    .centredProduct { margin-left: auto; margin-right: auto; width: 480px; padding-left: 20px; }
}

@media(min-width:580px) {
    .centredBuilder { margin-left: auto; margin-right: auto; width: 520px; }
}

@media(min-width:640px) {
    .centredProduct { margin-left: auto; margin-right: auto; width: 630px; padding-left: 20px; }
    .centredProductOptions { margin-left: auto; margin-right: auto; width: 540px; padding-left: 20px; }
}

/* Small devices (tablets, 768px and up) SM */
@media(min-width:768px) {
    #BuildMAFinishedProduct .col-sm-7 { width: 56%; padding-left: 15px }
    #BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom { float: left; }
    #BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload { width: 180px; }
    #BuildMAFinishedProduct #fpChooseImages a.btnCrop { Width: 140px; }
    #BuildMAFinishedProduct #fpPreview #closePreview { display: none }
    .centredBuilder { margin-left: auto; margin-right: auto; width: 360px; }
    .centredProduct { margin-left: auto; margin-right: auto; width: 310px; padding-left: 0; }
    .centredProductOptions { margin-left: auto; margin-right: auto; width: 390px; padding-left: 0; }
    #bottomnNavButtons { display: none; float: right; }
    #displayPreview { display: none }
}

/* Medium devices (desktops, 992px and up) MD */
@media(min-width:992px) {
    #BuildMAFinishedProduct .col-md-8 { width: 66%; padding-left: 15px }
    #BuildMAFinishedProduct #fpChooseImages #imageSelectors .is-bottom .is-upload { width: 210px; }
    #BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize { width: 32% !important; }
    #BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize { width: 30% !important; }
    #BuildMAFinishedProduct #fpChooseImages a.btnCrop { Width: 160px; }
    #BuildMAFinishedProduct #fpChooseLayout #sizePanel1 .productSize:nth-child(2n) { margin-right: 1%; margin-left: 0; }
    #BuildMAFinishedProduct #fpChooseLayout #sizePanel2 .productSize:nth-child(2n) { margin-right: 1%; margin-left: 0; }
    .centredBuilder { margin-left: auto; margin-right: auto; width: 520px; }
    #BuildMAFinishedProduct #layoutPanel { min-height: 600px }

    .centredProduct { margin-left: auto; margin-right: auto; width: 610px; padding-left: 0; }
    .centredProductOptions { margin-left: auto; margin-right: auto; width: 540px; padding-left: 20px; }
}

/* Large devices (large desktops, 1200px and up) LG */
@media(min-width:1200px) {
    #BuildMAFinishedProduct .col-lg-9 { width: 71%; }
    #BuildMAFinishedProduct .col-lg-10 { width: 83%; padding-left: 0; padding-right: 0 }
    body { padding-right: 0px !important; }
    html { overflow-y: scroll !important; }

    .centredBuilder { margin-left: auto; margin-right: auto; width: 680px; }
    .centredProductOptions { margin-left: 0; margin-right: 0; width: 100%; padding-left: 20px; }

    #BuildMAFinishedProduct #fpPreview { margin: 0 15px 0 0; }
    #BuildMAFinishedProduct #layoutPanel { min-height: 800px }
}
