/** Illuminated Sign  specific CSS **/
.release-formwrap{
    left: unset; 
    margin-left: unset; 
    position: relative; 
    width: auto; 
    margin-top: 15px;
    margin-bottom: 10px;
    display: block;
}
#backlit-images{
    margin-bottom:40px;
}
.mgz-tabs-content{
    background:#fbfbfb; 
    border:1px solid #ececec; 
    border-radius:5px;
}
.bfb-right-col-form{
    float: none; 
    margin: 0 auto; 
    max-width:950px !important;
}
.mgz-single-image-inner img{
    width:950px;
}
.block.bfb .bfb-element{
    float:unset;
}
.bfb-page-indicator.progress{
    height: 0px;
    box-shadow: none;
    margin-bottom: -1px; 
    display: none;
}
.bfb-page-indicator.progress .bfb-page-indicator-page-progress-wrap{
    height: 10px;  
    background-color: #eee;
}
.bfb-page-indicator.progress .bfb-page-indicator-page-progress-wrap .bfb-page-indicator-page-progress{
    height: 10px;
}
.mgz-tabs-nav,
.bfb-left-col-wrapper,
.bfb-pages.bfb-pages-indicator-progress>.mgz-tabs-nav, 
.bfb-page-indicator.progress span,
.bfb-fileuploader-wraper .bfb-element-file-inner input,
.bfb-file-row-inner .bfb-file-info-name,
.bfb-pageurl-wrapper,
#fasttrack-text{
    display:none;
}
#fasttrack-text span:nth-of-type(2) {
    cursor:pointer;
}

.mgz-element.mgz-element-bfb_pages.bfb-element,
.mgz-element.mgz-child.mgz-element-bfb_radiolist{
    float:none;
}
.bfb-nav-buttons{
    margin: 20px; 
    text-align: center;
}
.bfb-nav-buttons .action{
    padding: 5px 10px; 
    min-width: 100px;
}
.mgz-tabs-content .file-uploader-button{
    font-size: 36px;
}
.mgz-tabs-content .bfb-nav-buttons{
    margin: 0 auto 40px auto;
    position: absolute; 
    bottom: 0px; 
    left:0; 
    right: 0;
    width: 100%;
    max-width: 900px;
    text-align: right;
    padding: 0 40px;
}
.bfb-nav-buttons-inner{
    margin-right:0px;
}
.magezon-builder .mgz-container {
    width: 100%;
}
.bfb-nav-buttons .action-next{
    border:none; 
    border-radius:5px;
    color:#fff;
    background-color:#ff84c7;
    margin-left:20px;
}
.bfb-nav-buttons .action-prev{
    border: 1px solid #5761ff;
    border-radius: 5px; 
    color:#5761ff;
}
.mgz-tabs-content .mgz-tabs-tab-content{
    border:none !important;
}

.bfb-fileuploader-wraper .mgz-child.mgz-element-bfb_file{
    width: 100%;
    text-align: center;
}
.bfb-fileuploader-wraper h3{
    color:#2f2f2f;
}
.bfb-fileuploader-wraper .bfb-file-meta{
    font-size: 14px;
    line-height: 18px;
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 150px;
}
.bfb-fileuploader{
    border:1px solid #5761FE; 
    border-radius:10px;
    background:#fff;
}
.bfb-element-icon.mgz-fa-cloud-upload-alt{
    background: #2f2f2f url(/media/wysiwyg/fileupload-icon.png) no-repeat center; 
    width: 50px; 
    height: 50px;
    border-radius: 50%;
}
.bfb-element-icon.mgz-fa-cloud-upload-alt::before{
    content:"";
}
body.cms-page-view .column.main .mgz-tabs-content ul{
    padding-left:0 !important;
}
body.cms-page-view .column.main .mgz-tabs-content ul li{
    list-style: circle inside !important;
    font-size: 16px !important;
}
.bfb-message-field textarea, .bfb-right-col-form input[type=text], 
.bfb-right-col-form input[type=tel]{
    border: 1px solid #aaa !important; 
    background: #fff; 
    border-radius: 10px;
    line-height:24px;
    font-size:16px;
    color:#2f2f2f;
}
.bfb-usage-wrap .bfb-radio-item.bfb-choices-item label:first-child{
    display: block; 
    position: relative;
    cursor: pointer;
}
.bfb-usage-wrap .bfb-radio-item label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.bfb-usage-wrap .bfb-radio-item label span {
    padding: 0 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border:1px solid #aaa;
    border-radius: 10px;
    min-height: 65px;
    line-height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-size:16px;
}
.bfb-usage-wrap .bfb-radio-item label:hover input ~ .bfb-usage-wrap .bfb-radio-item label span {
    background-color: none;
}
.bfb-usage-wrap .bfb-radio-item.bfb-choices-item.option-selected span {
    border:1px solid #ff84c7;
    border-radius: 10px;
}
.bfb-right-col-form .bfb-error .mage-error{
    color:#ff84c7
}
.bfb-file-row-inner img{
    max-height:50px;
}
.bfb-file-row-inner .fa-file::before{
    font-size: 30px;
}
.bfb-file-row-inner .bfb-file-delete{
    color: #ffabab;
    cursor:pointer;
}
.bfb-file-list{
    display: inline-block;
    width: 100%;
    margin-top: 184px;
    position: relative;
    z-index: 9999;
}
.bfb-file-list .bfb-file-row{
    float:left;
    padding:5px 10px;
}
.bfb-element-control .iti{
    display: inline;
}
.bfb-details-wrapper .bfb-element-label label{
    margin-bottom:3px;
}
.bfb-form-wrapper > div.mgz-element-inner:first-child{
    padding:0;
}
.bfb-form-js{
    opacity:0;
}
.bfb-file-insert h3 span{
    color:#5761ff;
    font-weight:500 !important;
}
.bfb-right-col-form h2{
    font-weight:500 !important;
    font-size:30px;
    position: relative; 
    padding-bottom: 10px;
}
.bfb-right-col-form h2::after{
    content: "";
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 5px;
    border-radius: 5px;
}

/* Base rule: one gradient definition */
.bfb-right-col-form h2::after {
  background: linear-gradient(to right, #ff7ac7 var(--stop, 0%), #5761ff var(--stop, 0%));
}

/* Default formtype */ /* Backlit + boardtype */
#TabSignType, #TabSignType.formtype-backlit.boardtype  { --stop: 9.09%; }
#TabUploadImage, #TabUploadImage.formtype-backlit.boardtype { --stop: 18.18%; }
#TabSize, #TabSize.formtype-backlit.boardtype { --stop: 27.27%; }
#TabIndoorOutdoor, #TabIndoorOutdoor.formtype-backlit.boardtype { --stop: 36.36%; }
#TabFaceColor, #TabFaceColor.formtype-backlit.boardtype { --stop: 45.45%; }
#TabSideColor, #TabSideColor.formtype-backlit.boardtype { --stop: 54.54%; }
#TabBorderColor, #TabLedLight.formtype-backlit.boardtype { --stop: 63.63%; }
#TabLedLight, #TabSignDepth.formtype-backlit.boardtype { --stop: 72.72%; }
#TabSignDepth, #TabMounting.formtype-backlit.boardtype { --stop: 81.81%; }
#TabMounting, #TabBackPanelColor.formtype-backlit.boardtype { --stop: 90.9%; }
#TabDetails, #TabDetails.formtype-backlit.boardtype { --stop: 100%; }

/* Boardtype variant */
#TabSignType.boardtype { --stop: 8.33%; }
#TabUploadImage.boardtype { --stop: 16.66%; }
#TabSize.boardtype { --stop: 24.99%; }
#TabIndoorOutdoor.boardtype { --stop: 33.32%; }
#TabFaceColor.boardtype { --stop: 41.65%; }
#TabSideColor.boardtype { --stop: 49.98%; }
#TabBorderColor.boardtype { --stop: 58.31%; }
#TabLedLight.boardtype { --stop: 66.64%; }
#TabSignDepth.boardtype { --stop: 74.97%; }
#TabMounting.boardtype { --stop: 83.33%; }
#TabBackPanelColor.boardtype { --stop: 91.63%; }
#TabDetails.boardtype { --stop: 100%; }

/* Backlit variant */ /* Fully illuminated + boardtype */
#TabSignType.formtype-backlit, #TabSignType.formtype-fully_illuminated.boardtype { --stop: 10%; }
#TabUploadImage.formtype-backlit, #TabUploadImage.formtype-fully_illuminated.boardtype { --stop: 20%; }
#TabSize.formtype-backlit, #TabSize.formtype-fully_illuminated.boardtype { --stop: 30%; }
#TabIndoorOutdoor.formtype-backlit, #TabIndoorOutdoor.formtype-fully_illuminated.boardtype { --stop: 40%; }
#TabFaceColor.formtype-backlit, #TabFaceColor.formtype-fully_illuminated.boardtype { --stop: 50%; }
#TabSideColor.formtype-backlit, #TabLedLight.formtype-fully_illuminated.boardtype{ --stop: 60%; }
#TabLedLight.formtype-backlit, #TabSignDepth.formtype-fully_illuminated.boardtype { --stop: 70%; }
#TabSignDepth.formtype-backlit, #TabMounting.formtype-fully_illuminated.boardtype { --stop: 80%; }
#TabMounting.formtype-backlit, #TabBackPanelColor.formtype-fully_illuminated.boardtype { --stop: 90%; }
#TabDetails.formtype-backlit, #TabDetails.formtype-fully_illuminated.boardtype { --stop: 100%; }

/* Fully illuminated */ 
#TabSignType.formtype-fully_illuminated { --stop: 11.11%; }
#TabUploadImage.formtype-fully_illuminated { --stop: 22.22%; }
#TabSize.formtype-fully_illuminated{ --stop: 33.33%; }
#TabIndoorOutdoor.formtype-fully_illuminated{ --stop: 44.44%; }
#TabFaceColor.formtype-fully_illuminated { --stop: 55.55%; }
#TabLedLight.formtype-fully_illuminated{ --stop: 66.66%; }
#TabSignDepth.formtype-fully_illuminated{ --stop: 77.77%; }
#TabMounting.formtype-fully_illuminated{ --stop: 87.88%; }
#TabDetails.formtype-fully_illuminated { --stop: 100%; }

/* Lightbox */
#TabSignType.formtype-lightbox { --stop: 9.09%; }
#TabLightboxShape.formtype-lightbox { --stop: 18.18%; }
#TabLightboxType.formtype-lightbox { --stop: 27.27%; }
#TabUploadImage.formtype-lightbox { --stop: 36.36%; }
#TabSize.formtype-lightbox { --stop: 45.45%; }
#TabIndoorOutdoor.formtype-lightbox { --stop: 54.54%; }
#TabFaceColor.formtype-lightbox { --stop: 63.63%; }
#TabBackColor.formtype-lightbox { --stop: 72.72%; }
#TabSideColor.formtype-lightbox { --stop: 81.81%; }
#TabLedLight.formtype-lightbox { --stop: 90.9%; }
#TabDetails.formtype-lightbox { --stop: 100%; }

#TabLightboxType .bfb-choices-item img, 
#TabLightboxShape .bfb-choices-item img{
    border: 2px solid transparent;
    border-radius: 15px;
}

#TabLightboxType .bfb-choices-item.option-selected img, 
#TabLightboxShape .bfb-choices-item.option-selected img{
    border: 2px solid #ff7ac7;
    border-radius: 15px;

}

#TabLightboxShape #lightbox-shape-text h5 span{cursor: pointer;}

#TabFaceColor.formtype-lightbox #is-backcolor{
    display: inline-block;
    margin: 20px 10px;
}
#TabFaceColor.formtype-lightbox .vw1mke7-s{
    min-height: 650px !important;
}
#is-backcolor label{
    font-size: 16px;
    display: inline-table;
}
#is-backcolor input{
    appearance: none; 
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 1px solid #555;
    border-radius: 3px;
    margin-top: 7px;
    float: left;
    position: relative;
}
#is-backcolor input:checked::after{
    content: "✔";           
    color: #5761ff;    
    position: absolute;
    left: 2px;
    top: -4px;
    font-size: 18px;
}
.bfb-message-field textarea{
    line-height:20px
}
.bfb-file-insert{
    cursor: pointer;
    padding-top:25px;
    position: absolute;
    left: 0; 
    right: 0; 
    height: 100%; 
    z-index: 999;
}
.mgz-single-image-wrapper img{
    border-radius: 5px;
}
.mgz-tabs:not(.mgz-tabs-no-fill-content) .mgz-tabs-tab-content{
    background:none
}
.mgz-single-image-wrapper .mgz-flex-position-below .image-content{
    padding: 0 0 10px 0;
}
.unit-wrap{
    position: relative
}
.unit{
    bottom: 55px;
    margin-left: 242px;
    height: 40px;
    margin-bottom: -35px;
}
.unit select{
    background-color: transparent;
    border: none;
    min-width: 95px;
    text-align: right;
    padding: 0 30px 0 11px;
}
.sign-length .bfb-error{
    position:absolute; top:25px;
}
.sign-length input[type="text"], 
.sign-width input[type="text"], 
.sign-height input[type="text"]{
    width:240px;
}
.sign-width input[type="text"]:disabled, .unit select[name="sign-width-unit"]:disabled {
    opacity: 0.6;
}
.sign-height .bfb-element-label, 
.sign-length .bfb-element-label, 
.sign-width .bfb-element-label{
    width:100px;float:left
}
.sign-dimentions p:first-child{
    line-height:3 !important
}
.sign-height .bfb-element-description p, 
body.cms-page-view .column.main .businesswrap .sign-height .bfb-element-description p{
    font-size: 12px !important;
}
.sign-height .bfb-element-description{
    position: absolute;
    font-style: italic;
    right: 117px;
    top: 8px;
}
.sign-size-help input[type="checkbox"] {
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    border: 1px solid #999; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    cursor: pointer; 
    position: relative; 
    background: #fff;
    z-index: 999;
}
.sign-size-help input[type="checkbox"]:checked {
    background-color: #ff7ac7; 
    border-color: #ff7ac7;
}
.sign-size-help input[type="checkbox"]:checked::after {content: "✔"; display: inline-block; color: white; font-size: 14px;position: absolute; top: 2px; right: 6px;}
.sign-size-help .bfb-element-control, .sign-size-help .bfb-element-label{display: inline-block;width:auto}
.sign-size-help .bfb-element-control{float:left;margin: -2px 15px 0 0}

#second-fileupload{margin-top: -30px;margin-bottom: 20px;}
#second-fileupload .bfb-file-list{margin-top: 110px;}
#second-fileupload .bfb-file-meta{top: 68px;}
#second-fileupload h3{font-weight: 400;font-size: 20px;}
#second-fileupload-label .mgz-element-inner{margin-bottom:0px;}
#second-fileupload-label .mgz-element-inner h3{margin-bottom:5px;}
#second-fileupload + .mgz-element.mgz-element-row.full_width_row{margin-bottom:40px}

#form-types-block, #lightbox-types-block, #lightbox-shape-block {margin:25px 0 0 0;}
.bfb-column2 .bfb-radio-item.bfb-choices-item{flex: 1 1 calc(33.333% - 30px);box-sizing: border-box;}
#form-types-block .bfb-choices-image-style-none, #lightbox-types-block .bfb-choices-image-style-none, #lightbox-shape-block .bfb-choices-image-style-none{display:flex;flex-direction: row; flex-wrap: wrap;gap: 30px;}
#form-types-block input[name="backlit-quote-options"], #lightbox-types-block input[name="lightbox-options"], #lightbox-shape-block input[name="lightbox-shape-options"]{display:none}

#form-types-block .bfb-choices-item label span, 
#lightbox-types-block .bfb-choices-item label span,
#lightbox-shape-block .bfb-choices-item label span{
    font-size: 16px;
    color: #FFF;
    background-color: #5761ff;
    padding:6px 10px;
    border-radius: 5px;
    display:block;
    text-align: center;
    margin-top: -10px;
    position: relative; 
    margin-bottom: 25px;
}
#lightbox-shape-block .bfb-choices-item label span{
    margin-bottom: 5px;
}
#form-types-block .bfb-radio-item.bfb-choices-item label span::before, 
#lightbox-types-block .bfb-radio-item.bfb-choices-item label span::before{ font-size: 16px; position: absolute; top: 44px; color: #333; z-index: 999; width: 100%; left: 0;}
#form-types-block .bfb-radio-item.bfb-choices-item.backlit label span::before{ content: "Lit from behind"}
#form-types-block .bfb-radio-item.bfb-choices-item.frontlit label span::before{ content: "Illuminated Face with colored sides"}
#form-types-block .bfb-radio-item.bfb-choices-item.frontlit.auuk label span::before{ content: "Illuminated Face with coloured sides"}
#form-types-block .bfb-radio-item.bfb-choices-item.backandfrontlit label span::before{ content: "Lit from behind with illuminated Face"}
#form-types-block .bfb-radio-item.bfb-choices-item.fullyilluminated label span::before{ content: "Fully Illuminated Letters & Logos"}
#form-types-block .bfb-radio-item.bfb-choices-item.lightbox label span::before{ content: "Illuminated Lightbox signs"}
#form-types-block .bfb-radio-item.bfb-choices-item.ledneon label span::before{ content: "Custom-made LED Neon signs"}

#lightbox-types-block .bfb-radio-item.bfb-choices-item.fullyilluminated label span::before{ content: "Lit on five sides"}
#lightbox-types-block .bfb-radio-item.bfb-choices-item.frontlit-metal label span::before{ content: "Illuminated Face with metal sides"}
#lightbox-types-block .bfb-radio-item.bfb-choices-item.frontlit-acrylic label span::before{ content: "Illuminated Face with acrylic sides"}
#lightbox-types-block .bfb-radio-item.bfb-choices-item.doublesided-metal label span::before{ content: "Front and back lit with metal sides"}
#lightbox-types-block .bfb-radio-item.bfb-choices-item.doublesided-acrylic label span::before{ content: "Front and back lit with acrylic sides"}
#lightbox-types-block .bfb-radio-item.bfb-choices-item.slim label span::before{ content: 'Sleek 0.4" thin sign, double or single sided'}
#lightbox-types-block .bfb-radio-item.bfb-choices-item.slim.auuk label span::before{ content: "Sleek 1cm thin sign, double or single sided"}

#form-types-block .bfb-choices-item .bfb-choices-image, 
#lightbox-types-block .bfb-choices-item .bfb-choices-image, 
#lightbox-shape-block .bfb-choices-item .bfb-choices-image{border-radius:5px;padding:2px}

#form-types-block .bfb-radio-item.bfb-choices-item label, 
#lightbox-types-block .bfb-radio-item.bfb-choices-item label,
#lightbox-shape-block .bfb-radio-item.bfb-choices-item label{cursor: pointer;}
#form-type-hidden, #lightboxshape-hidden, #lightboxtype-hidden{display:none}

.bfb-loading{position:relative;}
.bfb-loading .bfb-loading-mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .5);
    text-align: center; 
    padding: 23% 0;
    background-image: url(/media/wysiwyg/ZKZg.gif); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5%;
}

.color-box {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    border: 1px solid #555;
    display: none;
    border-radius: 22px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);    
}
.results {
    display: none;
}
.color-grid { 
    visibility: hidden;             
    display: flex;
    flex-wrap: wrap;
    width: 370px;
    margin: 5px auto;
    justify-content: center;
    border: 1px solid #ccc;
    padding: 10px 4px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    position: absolute;
    z-index: 99999;
    left: 225px;
    top: 27px;			
    background-color: #fff;
}
.side-color-grid{
    top: 22px;
    left: 225px;
}
.border-color-grid{
    top:22px;
}
.color-cell {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 50%; 
    margin: 3px;     
}
.color-cell:hover {
    width: 36px;
    height: 36px;
    margin: 0;
    transition: all 0.3s ease-in-out;	
}	
.color-cell.white {
    width: 28px; 
    height: 28px;
    border: 1px solid #d6d6d6;
}																																
.color-cell.white:hover {
    width: 34px;
    height: 34px;
    margin: 0px;
}	
.color-head{
    width: 100%;
    margin: 5px;
    border-bottom: 1px solid #ccc;
}
#front-color .bfb-element-text-wrapper input[type=text], 
#back-color .bfb-element-text-wrapper input[type=text], 
#side-color .bfb-element-text-wrapper input[type=text], 
#border-color .bfb-element-text-wrapper input[type=text],
#backboard-color .bfb-element-text-wrapper input[type=text]{
    padding-left:35px;
}
.color-icon{
    content: "";
    font-size: 16px;
    position: absolute;
    top: 10px;
    left: 73px;
    width: 20px;
    height: 20px;
    border:1px solid #f1f1f1;
    background-color: #ccc;
    border-radius: 5px;
}
#front-color .color-icon,#side-color .color-icon,#border-color .color-icon{
    top:unset;
    bottom: 10px;
    left: 10px;
}
#TabFaceColor input[type=text], #TabBackColor input[type=text], #TabSideColor input[type=text], #TabBorderColor input[type=text]{
    max-width: 214px;
    font-size: 15px;
}
.front-color-cmyk, .back-color-cmyk, .side-color-cmyk, .border-color-cmyk, 
.backboard-color-cmyk, .front-color-values, .back-color-values{
    z-index: -1;
    height: 0px;
    visibility: hidden;
}
div.mage-error{
    color: #ff84c7 !important;
}
#TabFaceColor .color-label{
    margin :5px 20px 0 0;
    display: block;
}
#TabBackPanelColor .color-label, 
#TabBackColor .color-label, 
#TabFaceColor.formtype-lightbox .color-label{
    margin :5px 20px 0 0;
    float: left;
    min-width: 65px;
}
#TabBackPanelColor .color-icon, 
#TabBackColor .color-icon,
#TabFaceColor.formtype-lightbox .color-icon{
    left:93px;
}
#TabFaceColor input[type=text],  
#TabBackColor input[type=text],
#TabSideColor input[type=text], 
#TabBorderColor input[type=text], 
#TabBackPanelColor input[type=text]{
    width:auto;
    float:left;
}
#TabFaceColor .addColor, #TabBackColor .addColor{
    color: #5761ff;
    background: url(/media/wysiwyg/addmore.png) no-repeat left center;
    background-size: 23%;
    padding-left: 40px;
    cursor: pointer;
    display: inline-block;
    margin-top: 15px;
}
#TabFaceColor.formtype-lightbox .addColor{
    display: none;
}
#TabBackColor #back-color .addColor{
    margin: 5px 0 0 84px;
}
#TabSideColor #slimlightbox-sides{
    display:none;
}
#TabBorderColor #face-material-text p{
    text-align: left !important;
}

#TabFaceColor.formtype-lightbox .mgz-element-text .addColor,
#TabBackColor.formtype-lightbox .mgz-element-text .addColor{
    display: inline;
}
#id_face_color .mgz-element-text span.addColor,
#id_back_color .mgz-element-text span.addColor{
    background: none;
    padding-left: 0;
}

#front-color .bfb-element-control-inner,
#back-color .bfb-element-control-inner,
#side-color .bfb-element-control-inner,
#border-color .bfb-element-control-inner
{
    position: relative;
}
#front-color .delete-color, #back-color .delete-color{    
    background: url(/media/wysiwyg/delete.png) no-repeat left center;
    width: 24px;
    height: 24px;
    cursor: pointer;    
    float: right;
    margin: 8px 0 0 5px;
    background-size: 70%;
}
.alternative-colors{    
    float: right;
    display: inline;
}
.alternative-colors span{
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: block;
    margin: 0 5px 0 0;  
    background-size: 90%;
    background-repeat: no-repeat;
    float: left;
}
.alternative-colors span:hover{
    background-size: 100%;
    transition: all 0.3s ease-in-out;	
}
.backboard-color-grid #clear-acrylic{
    background-image: url(/media/wysiwyg/clear36.png);
    background-position: center; 
}
.backboard-color-grid #frosted-acrylic{
    background-image: url(/media/wysiwyg/frosted36.png);
    background-position: center; 
}
.backboard-color-grid #gold{
    background-image: url(/media/wysiwyg/gold36.png);
    background-position: center; 
}
.backboard-color-grid #silver{
    background-image: url(/media/wysiwyg/silver36.png) ;
    background-position: center; 
}
.backboard-color-grid #rose-gold{
    background-image: url(/media/wysiwyg/rosegold36.png) ;
    background-position: center; 
}
#backlit-led-light-color .bfb-choices-image-style-none,
#frontlit-led-light-color .bfb-choices-image-style-none{
    display: flex;
    flex-wrap: wrap;
}
#backlit-led-light-color .bfb-radio-item input[type=radio], 
#frontlit-led-light-color .bfb-radio-item input[type=radio]{
    visibility: hidden;
}
#backlit-led-light-color .bfb-radio-item .bfb-choices-image, 
#frontlit-led-light-color .bfb-radio-item .bfb-choices-image{
    text-align: center;
}
#backlit-led-light-color .bfb-radio-item > label, 
#frontlit-led-light-color .bfb-radio-item > label{
    width: 100%;
}
#backlit-led-light-color .bfb-radio-item, 
#frontlit-led-light-color .bfb-radio-item{    
    cursor: pointer;
    text-align: center;
    flex: 0 0 calc(100% / 8 );
    align-items: center;
}
#backlit-led-light-color .bfb-radio-item img, 
#frontlit-led-light-color .bfb-radio-item img{
    cursor: pointer;
    max-width: 62px;
}
#backlit-led-light-color .bfb-radio-item span, 
#frontlit-led-light-color .bfb-radio-item span{
    display: block;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
    padding: 3px;
    margin: -17px 5px 0;
    border: 2px solid #fbfbfb;
}
#backlit-led-light-color .bfb-choices-image-style-none .bfb-radio-item:first-child .bfb-choices-image, 
#frontlit-led-light-color .bfb-choices-image-style-none .bfb-radio-item:first-child .bfb-choices-image {
    border-radius: 10px 0 0 10px;
}
#backlit-led-light-color .bfb-choices-image-style-none .bfb-radio-item:last-of-type .bfb-choices-image,
#frontlit-led-light-color .bfb-choices-image-style-none .bfb-radio-item:last-of-type .bfb-choices-image {
    border-radius: 0 10px 10px 0;
}
#back-lit-ledcolor{
    margin-bottom: 25px;
}
#backlit-led-light-color .option-selected span, #backlit-led-light-color .bfb-radio-item:hover span,
#frontlit-led-light-color .option-selected span, #frontlit-led-light-color .bfb-radio-item:hover span{
    border:2px solid #5761ff;
    border-radius: 5px;
}

body.cms-page-view .column.main #back-lit-ledcolor p,
body.cms-page-view .column.main #front-lit-ledcolor p{
    font-size: 14px !important;
    line-height: 20px;
}
#backlit-depth-options .bfb-element-label, 
#frontlit-depth-options .bfb-element-label,
#frontlit-depth-input .bfb-element-label,
#backlit-depth-input .bfb-element-label{
    float: left;
    margin-right: 20px;
    margin-top:5px;
}
#backlit-depth-options .bfb-element-control,
#frontlit-depth-options .bfb-element-control,
#frontlit-depth-input .bfb-element-control,
#backlit-depth-input .bfb-element-control{
    float: left;    
}
#backlit-depth-options .bfb-element-control select,
#frontlit-depth-options .bfb-element-control select{
    min-width: 230px;
    border-radius: 10px;
}
#backlit-depth-options,
#frontlit-depth-options,
#frontlit-depth-input,
#backlit-depth-input{
    margin-top: 15px;
    margin-bottom: 5px;
    float: left;
}
.sign-depth-image{    
    display: inline-block;
    height: 215px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    visibility: hidden;
    text-align: center;
    margin: -20px 0 30px 0;
}

.sign-depth-image span{
    position: absolute;   
    font-size: 12px;
    z-index: 9999;
}
.sign-depth-image.frontlit .side-depth,
.sign-depth-image.fully_illuminated .side-depth,
.sign-depth-image.backlit .led-depth,
.sign-depth-image.backlit_and_frontlit .led-depth{
    transform: translateY(-50%);
    width: 125px;
    left: calc(50% - 100px - 35px - 125px);
    bottom: 45px;
    text-align: right;
    height: 30px;
    padding: 5px 5px 10px 0;
    border-right: 1px solid #252525;
}
.sign-depth-image.frontlit .side-depth,
.sign-depth-image.fully_illuminated .side-depth{
    bottom: 70px;
    height: 45px;
    padding: 4px 10px 14px 0;    
    line-height: 16px;
}

.sign-depth-image.frontlit .side-depth::before,
.sign-depth-image.fully_illuminated .side-depth::before{
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #252525;
}
.sign-depth-image.backlit .led-depth::before,
.sign-depth-image.backlit_and_frontlit .led-depth::before{
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #252525;
}

.sign-depth-image.frontlit .side-depth::after ,
.sign-depth-image.fully_illuminated .side-depth::after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #252525;
}

.sign-depth-image.backlit .led-depth::after ,
.sign-depth-image.backlit_and_frontlit .led-depth::after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #252525;
}

.sign-depth-image.frontlit .side-depth2,
.sign-depth-image.fully_illuminated .side-depth2,
.sign-depth-image.backlit .side-depth2,
.sign-depth-image.backlit_and_frontlit .side-depth2{
    top: 87px;
    border-left: 1px solid #252525;
    padding: 25px 5px 5px 20px;
    height: 70px;
}
.sign-depth-image.frontlit .side-depth2::after,
.sign-depth-image.fully_illuminated .side-depth2::after,
.sign-depth-image.backlit .side-depth2::after,
.sign-depth-image.backlit_and_frontlit .side-depth2::after{
    content: '';
    position: absolute;
    left: -5px;
    bottom: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #252525;
}
.sign-depth-image.frontlit .side-depth2::before,
.sign-depth-image.fully_illuminated .side-depth2::before,
.sign-depth-image.backlit .side-depth2::before,
.sign-depth-image.backlit_and_frontlit .side-depth2::before{
    content: '';
    position: absolute;
    left: -5px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #252525;
}

.sign-depth-image.backlit .side-depth,
.sign-depth-image.backlit_and_frontlit .side-depth{
    top: 90px;
    transform: translateY(-50%);
    width: 125px;
    left: calc(50% - 100px - 35px - 125px);
   /* height: 45px;
      padding: 15px 5px 15px 0; */
    border-right: 1px solid #252525;    
    padding: 8px 5px 8px 0;
    line-height: 16px;
    text-align: right;
}
.sign-depth-image.backlit .side-depth::before,
.sign-depth-image.backlit_and_frontlit .side-depth::before{
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #252525;
}

.sign-depth-image.backlit .side-depth::after,
.sign-depth-image.backlit_and_frontlit .side-depth::after{
    content: '';
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #252525;
}

#backlit-depth-options .bfb-element-description p,
#backlit-depth-input .bfb-element-description p{
    font-size: 12px !important;
    position: absolute;
    left: 0;
}
#mounting-option .bfb-radio-item.bfb-choices-item{
    flex: 1 1 40%;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    background-color: #eeeeee;
    border: 1px solid #ccc;
    border-radius: 10px;
    position: relative;
}
#mounting-option  .bfb-choices-image-style-none{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px 30px;
}
#mounting-option  .bfb-choices-image-style-none .bfb-choices-item label{
    text-align: center;
    margin: 0;
    position: relative;
    min-height: 195px;
}
#mounting-option label input[type="radio"]{
    visibility: hidden;
    width:0px;
    height:0px;
}
#mounting-option{
    margin-top:30px;
}
#mounting-option span.mounting-no-backboard-text,
#mounting-option span.mounting-circle-text,
#mounting-option span.mounting-naked-cut-text,
#mounting-option span.mounting-rectangle-text{
    font-size: 13px;
    margin-top: 10px;
    display: block;
    cursor: pointer;
}
#mounting-option  .bfb-choices-image-style-none .bfb-choices-item label span:not(.mounting-no-backboard-text, .mounting-circle-text, .mounting-naked-cut-text, .mounting-rectangle-text){
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    line-height: 20px;
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
}
#mounting-option  .bfb-radio-item.bfb-choices-item:hover ,
#mounting-option  .bfb-radio-item.bfb-choices-item.option-selected {
    border: 1px solid #5761ff;
    cursor: pointer;
}
#mounting-option .bfb-radio-item.bfb-choices-item{
    text-align: center;
    cursor: pointer;
}
#mounting-option .bfb-choices-image{
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#mounting-option .bfb-radio-item.bfb-choices-item.raceway .bfb-choices-image{
    bottom: 6px;
}
#mounting-option .bfb-choices-item label span a{
    color: #5761ff;
    display: none;
}
#mounting-option .bfb-element-description p{
    font-size: 14px !important;
    margin-top: 20px;
}
#mounting-option .no-backboard{
    background-image: url('/media/wysiwyg/electrician.png');
    background-position: top 10px right 10px;
    background-repeat: no-repeat;        
}
#mounting-option .raceway, #mounting-option .rectangle, #mounting-option .circle{
    background-image: url('/media/wysiwyg/easy_install.png');
    background-position: top 10px right 10px;
    background-repeat: no-repeat;
}
#comments-details textarea, 
#install-space textarea{
    border-radius: 10px;    
    border: 1px solid #aaa;
}
#comments-details .bfb-element-label label span{
    font-size: 20px;
    color: #333;
}
#comments-details .bfb-element-control{
    display: grid;
}
#comments-details .bfb-element-control .bfb-element-description{
    order: -1;
}
#comments-details .bfb-element-control .bfb-element-description p{
    font-size: 14px !important;
    margin-bottom: 5px;
}
#TabSignDepth input[name=backlit-depth-input],
#TabSignDepth input[name=frontlit-depth-input]{
    width: auto;
    max-width:135px;    
    position: relative;
    margin-top:10px;
}
#TabSignDepth input[name=frontlit-depth-input]{
    margin-top:5px;
}
#unitbox{float: left;}
#unitbox select{
    border: 1px solid #aaa;
    border-radius: 10px;
    margin-left: 10px;
    margin-top: 25px;
}
#TabSignDepth #frontlit-depth-input + #unitbox{
  margin-top: -4px;
}

#backlit-depth-input label small{
	font-size:12px;
}
#frontlit-depth-input label small{
	font-size:12px;
}
#TabSideColor.formtype-lightbox .htoqxj5-s{
    min-height: 680px !important;
}
#TabLightboxType p.error-message{
    color: #ff7ac7;
    font-size: 14px !important;
    text-align: right;
    display: inline-block;
    FLOAT: right;
    margin-top: 30px;
    margin-right: 35px;
}

#id_face_color, #id_material_options, 
#id_side_color, #id_edge_border, 
#backboard-color-wrap, #id_back_color{
    background-color: #f5f5f5; 
    border: 1px solid #e1e1e1; 
    border-radius: 10px; 
    padding: 10px 0; 
    position: relative;
    min-height: 315px;
    margin: 0 1%;
    width: 45%;
}
#TabFaceColor.formtype-lightbox #id_material_options, 
#TabFaceColor.formtype-lightbox #id_face_color{
    min-height: 250px;
}
#TabSideColor.formtype-lightbox #id_material_options, 
#TabSideColor.formtype-lightbox #id_side_color{
    min-height: 272px;
}

#TabFaceColor.formtype-lightbox .svg-edge,
#TabSideColor.formtype-lightbox .svg-edge
{
    position: absolute;
    max-width: 150px;
    z-index: 99;
    left: 0;
    right: 0;
    margin: auto;
    top: 270px;
}
#TabSideColor.formtype-lightbox .svg-edge{
    top: 285px;
}

#id_face_color .mgz-element-inner:first-of-type, 
#id_side_color .mgz-element-inner:first-of-type,
#id_edge_border .mgz-element-inner:first-of-type,
#id_back_color .mgz-element-inner:first-of-type{
    float: left;
}
#front-color{
    max-width: 250px;
    margin-left: 20px;
    float: left;
}
#TabFaceColor.formtype-lightbox #front-color{
   max-width: 100% !important;
}
#side-color, #border-color{
    max-width: 240px;
    margin-left: 20px;
    float: left;
}
#id_face_color object, #id_side_color object, #id_edge_border object, #id_back_color object{
    float: left;
    margin-left: -7px;
    max-width: 80px;
}
#id_edge_border object{
    float: left;
}
#TabDetails + .bfb-nav-buttons .bfb-nav-buttons-inner {
    text-align: left;
    margin-left: 30px;
}
#TabFaceColor .acrylic-info{
    padding:10px 10px  20px 10px;
}
.custom-depth-dropdown {
    position: absolute;
    background: white;
    border: 1px solid #aaa;
    width: 150px;
    overflow-y: auto;
    display: none;
    z-index:999;
}
.custom-depth-dropdown .dropdown-item {
    padding: 3px 5px;
    cursor: pointer;
}
.custom-depth-dropdown .dropdown-item:hover {
    background-color: #f0f0f0;
} 
.acrylic-wrapper, .metallic-wrapper{
    margin:0 ;
}
.acrylic-wrapper p span, .metallic-wrapper p span{
    font-size: 20px;    
}
.acrylic-wrapper div span.option, 
.metallic-wrapper div span.option,
.metallic-wrapper div span.finish-option{
    font-size: 13px;
    display: inline-block;
    margin-right: 20px;
}
.metallic-wrapper div span.option,
.metallic-wrapper div span.finish-option{
    margin-right: 10px;
    font-size: 12px;
}
.acrylic-wrapper div span.option.selected .swatch, 
.metallic-wrapper div span.option.selected .swatch,
.metallic-wrapper div span.finish-option.selected .swatch{
    border: 2px solid #636dfc;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(99, 109, 252, 0.5);
}
.acrylic-wrapper div span span.swatch, 
.metallic-wrapper div span span.swatch,
.metallic-wrapper div span.finish-option span.swatch{
    display: block;
    width: 27px;
    height: 27px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

.metallic-wrapper div span.finish-option {
    margin-right: 20px;
    font-size: 12px;
    max-height: 150px;    
    display: inline-grid;
    text-align: center;
}
.acrylic-wrapper div span#clear span.swatch { 
    background-image: url(/media/wysiwyg/clear36.png);
 }
.acrylic-wrapper div span#white span.swatch {
    background-image:  url(/media/wysiwyg/whitegloss36.png);
}
.acrylic-wrapper div span#matt-white span.swatch{
    background-image: url(/media/wysiwyg/whitematt36.png);
}
.acrylic-wrapper div span#black span.swatch{
    background-image: url(/media/wysiwyg/black32.png);
}
.acrylic-wrapper div span#matt-black span.swatch{
    background-image: url(/media/wysiwyg/blackmatt32.png);
}

.metallic-wrapper div span#gold span.swatch{
    background-image:  url(/media/wysiwyg/gold32.png);
}
.metallic-wrapper div span#light-gold span.swatch{
    background-image: url(/media/wysiwyg/lightgold32.png);
}
.metallic-wrapper div span#brass span.swatch{
    background-image: url(/media/wysiwyg/bronze32.png);
}
.metallic-wrapper div span#rose-gold span.swatch{
    background-image: url(/media/wysiwyg/rosegold32.png);
}
.metallic-wrapper div span#black span.swatch{
    background-image: url(/media/wysiwyg/black32.png);
}
.metallic-wrapper div span#silver span.swatch{
    background-image: url(/media/wysiwyg/silver32.png);
}
.metallic-wrapper div span#lightly-brushed span.swatch{
    background-image: url(/media/wysiwyg/lightlybrushed32.png);
}
.metallic-wrapper div span#brushed span.swatch{
    background-image: url(/media/wysiwyg/brushed32.png);
}
.metallic-wrapper div span#matt span.swatch{
    background-image: url(/media/wysiwyg/matt32.png);
}
.metallic-wrapper div span#mirrored span.swatch{
    background-image: url(/media/wysiwyg/mirrored32.png);
}

.metallic-wrapper div span#lightly-brushed.m-color-gold span.swatch{
    background-image: url(/media/wysiwyg/goldbrushedlight.png);
}
.metallic-wrapper div span#brushed.m-color-gold span.swatch{
    background-image: url(/media/wysiwyg/goldbrushed.png);
}
.metallic-wrapper div span#matt.m-color-gold span.swatch{
    background-image: url(/media/wysiwyg/goldmatt.png);
}
.metallic-wrapper div span#mirrored.m-color-gold span.swatch{
    background-image: url(/media/wysiwyg/goldmirrored.png);
}

.metallic-wrapper div span#lightly-brushed.m-color-light-gold span.swatch{
    background-image: url(/media/wysiwyg/lightgoldbrushedlight.png);
}
.metallic-wrapper div span#brushed.m-color-light-gold span.swatch{
    background-image: url(/media/wysiwyg/lightgoldbrushed.png);
}
.metallic-wrapper div span#matt.m-color-light-gold span.swatch{
    background-image: url(/media/wysiwyg/lightgoldmatt.png);
}
.metallic-wrapper div span#mirrored.m-color-light-gold span.swatch{
    background-image: url(/media/wysiwyg/lightgoldmirrored.png);
}

.metallic-wrapper div span#lightly-brushed.m-color-rose-gold span.swatch{
    background-image: url(/media/wysiwyg/rosegoldbrushedlight.png);
}
.metallic-wrapper div span#brushed.m-color-rose-gold span.swatch{
    background-image: url(/media/wysiwyg/rosegoldbrushed.png);
}
.metallic-wrapper div span#matt.m-color-rose-gold span.swatch{
    background-image: url(/media/wysiwyg/rosegoldmatt.png);
}
.metallic-wrapper div span#mirrored.m-color-rose-gold span.swatch{
    background-image: url(/media/wysiwyg/rosegoldmirrored.png);
}

.metallic-wrapper div span#lightly-brushed.m-color-brass span.swatch{
    background-image: url(/media/wysiwyg/brassbrushedlight.png);
}
.metallic-wrapper div span#brushed.m-color-brass span.swatch{
    background-image: url(/media/wysiwyg/brassbrushed.png);
}
.metallic-wrapper div span#matt.m-color-brass span.swatch{
    background-image: url(/media/wysiwyg/brassmatt.png);
}
.metallic-wrapper div span#mirrored.m-color-brass span.swatch{
    background-image: url(/media/wysiwyg/brassmirrored.png);
}

.metallic-wrapper div span#lightly-brushed.m-color-silver span.swatch{
    background-image: url(/media/wysiwyg/silverbrushedlight.png);
}
.metallic-wrapper div span#brushed.m-color-silver span.swatch{
    background-image: url(/media/wysiwyg/silverbrushed.png);
}
.metallic-wrapper div span#matt.m-color-silver span.swatch{
    background-image: url(/media/wysiwyg/silvermatt.png);
}
.metallic-wrapper div span#mirrored.m-color-silver span.swatch{
    background-image: url(/media/wysiwyg/silvermirrored.png);
}

.metallic-wrapper div span#lightly-brushed.m-color-black span.swatch{
    background-image: url(/media/wysiwyg/blackbrushedlight.png);
}
.metallic-wrapper div span#brushed.m-color-black span.swatch{
    background-image: url(/media/wysiwyg/blackbrushed.png);
}
.metallic-wrapper div span#matt.m-color-black span.swatch{
    background-image: url(/media/wysiwyg/blackmatt.png);
}
.metallic-wrapper div span#mirrored.m-color-black span.swatch{
    background-image: url(/media/wysiwyg/blackmirrored.png);
}

.metallic-wrapper .error{
    color: #ff84c7 !important;
    font-size: 12px;
    font-style: italic;
}
#front-color.inactive, #back-color.inactive, #side-color.inactive, 
#border-color.inactive, #backboard-color.inactive{
    opacity: .2;
    pointer-events: none;
}
#material-data-value{
    visibility: hidden;
    height: 0px;
    overflow: hidden;
}
#side-depth-wrap{
    background-color: #f5f5f5;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}
#optional-edge-border{display: none;}
#TabBackPanelColor #id_material_options{
    margin-bottom: 80px;
}
.or-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px; 
	width: 5%;
    min-height: 315px;
    position: relative;
    float: left;
}
#TabFaceColor.formtype-lightbox .or-divider{
    min-height: 250px;
}
#TabSideColor.formtype-lightbox .or-divider{
    min-height: 272px;
}
.or-divider::before,
.or-divider::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 42%;
    background-color: #e1e1e1;
}
.or-divider::before {
    left: 48%;
    top: 2%;
}
.or-divider::after {
    right: 48%;
    bottom: 2%;
    top: unset;
}
.premium-metal{display:none;margin-top:50px}
#TabSideColor.formtype-lightbox .premium-metal{
    margin-top:10px;
}
#indoor-outdoor {
  input[type="radio"] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #999;
    border-radius: 50%;
    background: #fff;
    margin: 0 8px 0 0;     
    padding: 0;
    cursor: pointer;
    position: relative;
    outline: none;
    vertical-align: middle;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(87, 97, 255, 0.25);
    border-color: #5761ff;
  }
  input[type="radio"]:checked {
    border-color: #5761ff;
  }
  input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 10px;
    height: 10px;
    background: #5761ff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform .2s ease, background .2s ease;
  }
}

@media only screen and (min-width : 1665px){.mgz-tabs-content .bfb-nav-buttons{}}
@media only screen and (min-width : 1551px) and (max-width : 1660px) {
    .mgz-tabs-content .bfb-nav-buttons{
        right:9%;
    }
}
@media only screen and (min-width : 1421px) and (max-width : 1550px) {
    .mgz-tabs-content .bfb-nav-buttons{
        right:6%;
    }
}
@media only screen and (min-width : 1320px) and (max-width : 1420px) {
    .mgz-tabs-content .bfb-nav-buttons{
        right:2%;
    } 
    h2 span.sale-discount{
        position: absolute; 
        width: 100%; 
        left: 0; 
        top: 90px;
    }
    .sale-discount-margin{
        margin-bottom:40px;
    }
}
@media (min-width: 768px) {
    .bfb-right-col-form{ 
        width: 100%;
    } 
    .mgz-single-image-inner img{
        width:900px;
    }
}
@media (max-width: 958px){
    .slider-image-box img.enlarged {
        transform: scale(1.5); 
    } 
    #form-types-block .bfb-choices-image-style-none, 
    #lightbox-types-block .bfb-choices-image-style-none, 
    #lightbox-shape-block .bfb-choices-image-style-none{
        flex-wrap: wrap; 
        gap: 50px 9%;
    } 
    #form-types-block, #lightbox-types-block, #lightbox-shape-block{
        margin:0;
    }
}
@media (max-width: 991px){
    #form-types-block .bfb-choices-image-style-none, 
    #lightbox-types-block .bfb-choices-image-style-none, 
    #lightbox-shape-block .bfb-choices-image-style-none{
        gap: 50px 9%;
    }
    .sign-height .bfb-element-description{
        right: unset;
        top: unset;
    }
    .color-grid { 
        left: 0;
        top: 40px;
        width:305px
    }
    #TabFaceColor .color-label, 
    #TabBackColor .color-label,
    #TabSideColor .color-label,
    #TabBorderColor .color-label,
    #TabBackPanelColor .color-label{
        margin:5px 15px 0 0;
        float: left;
    }
    #TabBackPanelColor .color-icon{
        left: 68px;
    }
    #TabBackPanelColor input[type=text]{
        width: 70%;
    }
    #TabFaceColor .delete-color{
        background-size: 64%;
    }    
    #id_face_color #front-color, 
    #id_side_color #side-color, 
    #id_edge_border #border-color,
    #id_back_color #back-color
      {
        width: 100%;
        margin-left: 0;
        max-width: 100%;
    }
    #front-color .color-icon, 
    #side-color .color-icon, 
    #border-color .color-icon,
    #backboard-color-wrap .color-icon,
    #back-color .color-icon{
        left: 80px;
    }
    .color-grid.grid-top2{top:90px}
    .color-grid.grid-top3{top:140px}
    .color-grid.grid-top4{top:190px}
    .color-grid.grid-top5{top:240px}
    .color-grid.grid-top6{top:290px}    

    #TabFaceColor + .bfb-nav-buttons, 
    #TabMounting + .bfb-nav-buttons { 
        margin-bottom: 20px; 
    }  
    .sign-depth-image{
        width:100%;
    }
    #TabBackPanelColor .backboard-color-cmyk{
        height:auto;
    }  
    #TabDetails + .bfb-nav-buttons{
        float: left; 
        padding: 0;  
        position: relative;
    }
    #backlit-led-light-color .bfb-radio-item, 
    #frontlit-led-light-color .bfb-radio-item{
        flex: 1 1 20%;
    }
    #TabLedLight + .bfb-nav-buttons{
        position:relative;
    }
    .alternative-colors span{
        width: 35px; 
        height: 35px;
        margin: 0px 3px 5px 0;  
    } 
    .sign-depth-image.frontlit .side-depth,
    .sign-depth-image.fully_illuminated .side-depth,
    .sign-depth-image.backlit .side-depth,
    .sign-depth-image.backlit_and_frontlit .side-depth,    
    .sign-depth-image.backlit .led-depth,
    .sign-depth-image.backlit_and_frontlit .led-depth{
        width: 90px;
        left: calc(50% - 100px - 105px);        
        font-size: 10px;
    }
    .sign-depth-image.frontlit .side-depth2, 
    .sign-depth-image.fully_illuminated .side-depth2, 
    .sign-depth-image.backlit .side-depth2, 
    .sign-depth-image.backlit_and_frontlit .side-depth2{
        padding: 20px 5px 5px 5px;
        font-size: 10px;
    }
    #frontlit-depth-input .bfb-element-label{
        float: unset;
    }
    #TabSignDepth #frontlit-depth-input + #unitbox{
        margin-top: -85px;        
    }
}
@media (max-width: 778px){
    .sign-height .bfb-element-label, 
    .sign-length .bfb-element-label,
    .sign-width .bfb-element-label{
        width:77px;
    }
    .unit {
        margin-left: 220px; 
    }
    #front-color .color-icon, 
    #back-color .color-icon, 
    #side-color .color-icon, 
    #border-color .color-icon{ 
        right: 185px;  
        left: unset;  
    }
    #backboard-color-wrap .color-icon { 
        right: 245px; 
        left: unset;  
    }
    #TabSideColor.formtype-lightbox .svg-edge,
    #TabFaceColor.formtype-lightbox .svg-edge{
        top: unset; 
        bottom: -150px;
    }
    #TabFaceColor .bfb-right-col-form{min-height:1220px}
    #TabSideColor .bfb-right-col-form{min-height:1180px}
    #TabBorderColor .bfb-right-col-form{min-height:1185px}
    #TabSignDepth .bfb-right-col-form{min-height:845px}
    #TabMounting .bfb-right-col-form{min-height:1275px}
    .slider-image-box img.enlarged {transform: scale(1.7); } 
    .bfb-fileuploader-wraper .bfb-file-meta {top:140px} 
    #mounting-option .bfb-radio-item.bfb-choices-item{ flex: 1 1 50%; box-sizing: border-box;}
    #second-fileupload .bfb-file-insert {padding-top: 5px;}	
    #second-fileupload h3{line-height:24px;}
    #second-fileupload .bfb-file-meta{top:59px;} 
    h2 span.sale-discount{position: absolute; width: 100%; left: 0; top: 90px;}
    .sale-discount-margin{margin-bottom:40px} 
    #form-types-block .bfb-choices-image-style-none, 
    #lightbox-types-block .bfb-choices-image-style-none, 
    #lightbox-shape-block .bfb-choices-image-style-none{flex-wrap: wrap; gap: 50px;} 
    #form-types-block, #lightbox-types-block, #lightbox-shape-block{margin:0}
    #id_face_color, #id_back_color, #id_side_color, #id_edge_border, 
    #id_material_options,#backboard-color-wrap{width: 100%; margin-bottom: 20px;}
    .acrylic-wrapper div span.option, .metallic-wrapper div span.option, 
    .metallic-wrapper div span.finish-option{font-size: 12px;}

    .sign-depth-image.frontlit .side-depth,
    .sign-depth-image.fully_illuminated .side-depth,
    .sign-depth-image.backlit .side-depth,
    .sign-depth-image.backlit_and_frontlit .side-depth,    
    .sign-depth-image.backlit .led-depth,
    .sign-depth-image.backlit_and_frontlit .led-depth{
        width: 90px;
        left: calc(50% - 100px - 105px);        
        font-size: 10px;
    }
    .sign-depth-image.frontlit .side-depth2, 
    .sign-depth-image.fully_illuminated .side-depth2, 
    .sign-depth-image.backlit .side-depth2, 
    .sign-depth-image.backlit_and_frontlit .side-depth2{
        padding: 20px 5px 5px 5px;
        font-size: 10px;
    }
    #unitbox {margin-top: -85px;margin-left: 137px;} 

    .or-divider, 
    #TabSideColor.formtype-lightbox .or-divider,
    #TabFaceColor.formtype-lightbox .or-divider{
        width: 100%;
        min-height: 30px;
        margin-bottom: 20px;
    }
    .or-divider::before,
    .or-divider::after {
        width: 42%;
        height: 1px;
        top: 48%;
    }
    .or-divider::before {
        left: 2%;    
    }
    .or-divider::after {
        right: 2%;    
    }
    #TabSideColor.formtype-lightbox .htoqxj5-s {
        min-height: 1188px !important;
    }
    #TabLedLight.formtype-lightbox .l4n81r8-s{
        min-height: 550px !important;
    }    
    #TabFaceColor.formtype-lightbox + .bfb-nav-buttons{
        margin-bottom: 140px;
    }
}

@media (max-width: 520px){
    #TabFaceColor h2 span.sale-discount{top:130px} 
    #form-types-block .bfb-choices-image-style-none, #lightbox-types-block .bfb-choices-image-style-none, #lightbox-shape-block .bfb-choices-image-style-none{flex-wrap: wrap; gap: 20px 50px;} 
    #form-types-block, #lightbox-types-block, #lightbox-shape-block{margin:0}
    .bfb-column2 .bfb-radio-item.bfb-choices-item{flex:1 1 100%; text-align: center;}
}
@media only screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    #unitbox {
        margin-top: 0;
        margin-left: 0;
    }
    .acrylic-wrapper div span.option, .metallic-wrapper div span.option, .metallic-wrapper div span.finish-option{
        margin-right: 18px;
    }
    .metallic-wrapper div span.option, .metallic-wrapper div span.finish-option {
        margin-right:5px;
    }
}
@media (max-width: 992px) {
    .section-text-block .padding-left60{padding-left:15px}
    .section-text-block .padding-right60{padding-right:15px}
}