.preview {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    margin: 15px 0 0;
}

.preview {
    width: 100% !important;
}

.preview .scaling-wrapper {
    width: 2600px;
}

.preview .scaling-wrapper {
    width: 100% !important;
}

.panels-container {
    transform-origin: top left;
}

.panels-container .panels {
    float: left;
    position: relative;
    z-index: 3;
    margin-left: 55px;
}

.panels-container .panels .panel {
    background-repeat: repeat-y;
    padding: 0 14px;
    display: inline-block;
    background-size: auto 100%, auto 100%;
    transition: background .5s;
    float: left;
    min-width: 200px;
    max-width: 300px;
    border-radius: 0 0 2px 2px;
}

.panels-container .panels .panel {
    background: url(../../assets/img/preview/left-frame-white.png) repeat-y top right,
                url(../../assets//img//preview//left-frame-white-02.png) repeat-y top left;
}

.panels-container .panels .panel .midpane {
    position: relative;
}

.panels-container .panels .panel .top-rail {
    background: url(../../assets/img/preview/top-rail-white.png) no-repeat bottom left,
                url(../../assets/img/preview/top-rail-white-02.png) no-repeat bottom right;
}

.panels-container .panels .panel .top-rail {
    position: relative;
    z-index: 100;
    padding: 0 2px;
}

.panels-container .panels .panel span {
    display: block;
    width: 100%;
    transition: background .5s;
}

.panels-container .panels .panel .top-rail .rail-bg {
    background: url(../../assets/img/preview/top-rail-white-bg.png) no-repeat bottom center;
}

.panels-container .panels .panel .top-rail .mouse-hole-top {
    position: absolute;
    left: 50%;
    margin-left: -5px;
    width: 9px !important;
    height: 10px;
    min-height: 0 !important;
    background-repeat: no-repeat;
    opacity: .6;
}

.panels-container .panels .panel .mid-rail {
    position: relative;
    z-index: 100;
    padding: 0 2px;
}

.panels-container .panels .panel .mid-rail .rail-bg {
    background: url(../../assets/img/preview/top-rail-white-bg.png) no-repeat bottom center;
}

.panels-container .panels .panel .mid-rail span {
    min-height: 40px;
}

.panels-container .panels .panel .mid-rail .mouse-hole-top {
    position: absolute;
    left: 50%;
    margin-left: -5px;
    width: 9px !important;
    height: 10px;
    min-height: 0 !important;
    background-repeat: no-repeat;
    opacity: .6;
}

.panels-container .panels .panel .mouse-hole-top {
    background-image: url(../../assets/img/preview/mouse-hole-top.png);
    bottom: 0;
}

.panels-container .panels .panel .midpane-fill {
    position: relative;
    z-index: 200;
}

.panels-container .panels .panel .midpane-fill .slats-pushrod {
    position: relative;
    z-index: 200;
}

.panels-container .panels .panel .midpane-fill .slats-pushrod .pushrod {
    width: 6px;
    height: 172px;
    box-sizing: content-box;
    position: absolute;
    bottom: 0;
    margin-bottom: 8px;
    left: 50%;
    margin-left: -4px;
    z-index: 102;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    transition: background 1s, margin 1.2s;
}

.panels-container .panels .panel .midpane-fill .slats-pushrod .pushrod {
    background: url(../img/preview/rod-white.png) repeat-y;
}

.panels-container .panels .panel .midpane-fill .slats-pushrod .slats {
    position: relative;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transform: translateZ(0);
}

.configurator-preview .slats-close .panels-container .panels .panel .midpane-fill .slats-pushrod .slats li {
    transform: rotateX(184deg) scale(1) translateZ(0);
}

.configurator-preview .slats-close .panels-container .panels .panel .midpane-fill .slats-pushrod .pushrod {
    margin-bottom: 15px;
}

.configurator-preview .panels-container .panels .panel .midpane-fill .mid-rail {
    background: url(../../assets/img/preview/top-rail-white.png) no-repeat bottom,
                url(../../assets/img/preview/top-rail-white-02.png) no-repeat bottom right;
}

.configurator-preview .panels-container .panels .panel .midpane-fill .mid-rail .rail-bg {
    background: url(../../assets/img/preview/midrail-white.png) no-repeat bottom center;
}

.panels-container .panels .panel .midpane-fill .slats-pushrod .slats li {
    transition: all 1.5s;
    position: relative;
    padding: 0 2px;
    margin-top: -2px;
    transform: rotateX(54deg) scale(1) translateZ(0);
    transform-origin: 50% 50%;
}

.panels-container .panels .panel .midpane-fill .slats-pushrod .slats li {
    background: url(../img/preview/slat-white.png) no-repeat bottom left,
                url(../img/preview/slat-white-02.png) no-repeat bottom right;
}

.panels-container .panels .panel .midpane-fill .slats-pushrod .slats li span {
    display: block;
    width: 100%;
    transition: background .5s;
}

.panels-container .panels .panel .midpane-fill .slats-pushrod .slats li span {
    background: url(../img/preview/slat-white-03.png) no-repeat bottom right;
}

.panels-container .panels .panel .bottom-rail {
    z-index: 100;
    position: relative;
    padding: 0 2px;
    margin-top: -2px;
}

.panels-container .panels .panel .bottom-rail {
    background: url(../../assets/img/preview/bottom-rail-white.png) no-repeat bottom left,
                url(../../assets/img/preview/bottom-rail-white-02.png) no-repeat bottom right;
}

.panels-container .panels .panel .bottom-rail .rail-bg {
    background: url(../../assets/img/preview/bottom-rail-white-bg.png) no-repeat bottom center;
}

.panels-container .panels .panel .mouse-hole-bottom {
    position: absolute;
    left: 50%;
    margin-left: -5px;
    width: 9px !important;
    height: 10px !important;
    min-height: 0 !important;
    background-repeat: no-repeat;
    opacity: .6;
}

.panels-container .panels .panel .mouse-hole-bottom {
    background-image: url(../../assets/img/preview/mouse-hole-bottom.png);
    top: 0;
    background-size: 0 0;
}

.panel:first-child:before, .panel:first-child:after {
    position: absolute;
    background: url(../img/preview/hinge-chrome.png) no-repeat;
    content: '';
    display: block;
    width: 4px;
    height: 24px;
}

.panel:first-child:after {
    left: auto;
    right: -4px;
    bottom: 10%;
}

.panel:first-child:before {
    left: auto;
    right: -4px;
    transform: scaleX(-1);
    top: 10%;
}

.panel:last-child:before, .panel:last-child:after {
    position: absolute;
    content: '';
    background: url(../img/preview/hinge-chrome.png) no-repeat;
    display: block;
    width: 4px;
    height: 24px;
}

.panel:last-child:after {
    left: -4px;
    bottom: 10%;
}

.panel:last-child:before {
    left: -4px;
    top: 10%;
}

.configurator-info {
    margin-top: 470px;
    font-style: italic;
    font-size: 12px;
    padding-right: 50px;
    padding-left: 45px;
}

.live-error {
    margin-top: 10px;
}

.live-error .error {
    color: red;
    margin-left: 5px;
}