{% extends '::baseAjax.html.twig' %}

{% block ajax_body %}
    <link href='{{ asset(ob_project_assets_base_url ~ 'css/bootstrap.min.css', null, true) }}' rel='stylesheet' type='text/css'/>
{#     <link href='{{ asset(ob_project_assets_base_url ~ 'css/printPageBase.css', null, true) }}' rel='stylesheet' type='text/css'/>#}

<link href='{{ asset(ob_project_assets_base_url ~ 'css/normalize.css', null, true) }}' rel='stylesheet' type='text/css'/>
<link href='{{ asset(ob_project_assets_base_url ~ 'css/owl.theme.css', null, true) }}' rel='stylesheet' type='text/css'/>
<link href='{{ asset(ob_project_assets_base_url ~ 'css/style.css', null, true) }}' rel='stylesheet' type='text/css'/>
<link href='{{ asset(ob_project_assets_base_url ~ 'css/font-face.css', null, true) }}' rel='stylesheet' type='text/css'/>
<link href='{{ asset(ob_project_assets_base_url ~ 'css/font-awesome.min.css', null, true) }}' rel='stylesheet' type='text/css'/>
<link href='{{ asset(ob_project_assets_base_url ~ 'css/owl.carousel.css', null, true) }}' rel='stylesheet' type='text/css'/>
<link href='{{ asset(ob_project_assets_base_url ~ 'css/selectric.css', null, true) }}' rel='stylesheet' type='text/css'/>
<link href='{{ asset(ob_project_assets_base_url ~ 'css/jquery.scombobox.min.css', null, true) }}' rel='stylesheet' type='text/css'/>
    
{#     <link href='{{ asset(ob_project_assets_base_url ~ 'css/all-css.css', null, true) }}' rel='stylesheet' type='text/css'/>#}
    <link href='{{ asset(ob_project_assets_base_url ~ 'css/product-print.css', null, true) }}' rel='stylesheet' type='text/css'/>
{#     <link href='{{ asset(ob_project_assets_base_url ~ 'css/goldstar.css', null, true) }}' rel='stylesheet' type='text/css'/>#}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
<style type="text/css">
::-ms-clear {display: none;}
.modal-open .modal.credit-form{overflow-x: auto !important;overflow-y: auto !important;}
.radio label::before {
   display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(../images/radio.png) -6px -10px;
    cursor: pointer;
    top: 6px;
    margin-left: -10px;
    content: "";
    position: absolute;
    left: 0;
}
.radio input[type="radio"]:checked + label::after
{
   display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(../images/radio.png) -6px -54px;
    cursor: pointer;
    top: 6px;
    margin-left: -10px;
    content: "";
    position: absolute;
    left: 0;
}

/*HEADER*/

/*LOGIN POPUP*/
body { font-family: 'arial'; overflow-x: hidden; }
.login-col .btn:hover, .login-col .btn:focus, body header .forgot-passwd .send-email:hover { background: #8e208c;border: 1px solid #8e208c; }
.ob-top-menu .slidemenu .title-login .fa {color: #8e208c;font-size: 16px;}
/*LOGIN POPUP*/
.no-border { border:none;}
.innerpage { margin-top: 6px; }
.ob-top-menu .header-loging .login-text { color: #fff;margin: 0 3px; }
.ob-header .ob-top-menu { background: #fff; border-bottom: none; border-top: 5px solid #0fb0ed; }
.top-search-block { position: absolute; top: -81px }
.ob-header .logo-col{margin: 0px 0 20px;}
.ob-header .logo-col img {height: auto;max-height: 100px;}
.search-in-dropdown .ob-gender-select-box span.checkout-select-wrapper { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.header-search.search-field button { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background: #ea0d8c; }
.header-search i.fa.fa-search.fa-fw { font-size: 23px; }
.ob-logo-block { background: #FFF; }
.ob-menu { background: #8e208c; box-shadow: none; }
.navbar-default .navbar-nav>li>a { color: #FFF }
.common-title { border: none }
header { position: relative }
.home-content { margin-top: 40px; }
.slidemenu { padding-top: 0px }
.menu-box .navbar-nav > li > a { font-family: 'Aleo-Regular'; font-size: 19px }
.ob-header .ob-top-menu { padding: 0; }
.info-menu ul li > a { padding: 4px 0px; }
.header-loging { margin: 0px; background: none; padding: 2px 7px 8px 3px; }
.info-menu.slidemenu .header-loging { background: #0fb0ed; }
.dropdown.cart-popup.header-login-text .login-text { color: #0fb0ed; }
span.fa.fa-shopping-cart.cart-menu { font-size: 37px; color: #0fb0ed; }
.header-loging .login-text { color: #FFF; font-family: 'arial' }
.header-loging li.header-login-text { font-family: 'arial' }
.header-loging li.header-login-text.guest { padding-top: 7px; }
.header-login-text.guest .fa { color: #0fb0ed; padding-right: 4px;font-size: 14px; }
.header-login-text.guest { position: absolute; right: 13%; border: none !important; background: none; color: #0fb0ed; }
.menu-box .menu-caret1 { background: url(../images/goldstar/menu-arrow.png) no-repeat scroll 100% bottom rgba(0, 0, 0, 0); }
.nav.navbar-nav.ui-advance-search.pull-right.position-inherit { position: absolute !important; right: 61%; }
.menu-box .navbar-nav > li > a { padding: 0 16px; line-height: 45px;font-size: 18px;}
.search-in-dropdown { width: 93px !important; }
.search-in-dropdown .ob-gender-select-box span.checkout-select-wrapper, .search-in-dropdown .ob-gender-select-box span.checkout-select-wrapper .custom-select, .search-in-dropdown .inp-parts.ob-gender-select-box { width: 100%; height: 38px; text-transform: capitalize; font-weight: inherit; font-size: 14px; }
.search-in-dropdown .ob-gender-select-box span.checkout-select-wrapper { border: 1px solid #B3B3B3; border-top-right-radius: 0px; border-bottom-right-radius: 0px; background: url("../images/checkout-select-arrow1.png") #E8E8E8 no-repeat scroll 95% 57%; }
.header-search.search-field.advance-search-wrap.dropdown > input { border-left: none !important; box-shadow: inset 0 12px 60px -8px rgba(230, 230, 230, 1); }
.header-search.search-field.advance-search-wrap.dropdown > input::-webkit-input-placeholder {color: #c2c2c2;font-size: 12px;font-family: arial;}
.header-search.search-field.advance-search-wrap.dropdown > input::-moz-input-placeholder {color: #c2c2c2;font-size: 12px;font-family: arial;}
.header-search.search-field.advance-search-wrap.dropdown > input::-ms-input-placeholder {color: #c2c2c2;font-size: 12px;font-family: arial;}
.header-search .form-control { border-top: 1px solid #B3B3B3; border-bottom: 1px solid #B3B3B3; font-style: normal; font-size: 15px; }
.header-loging { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.header-loging .login-text { text-transform: capitalize; font-size: 14px; font-family: arial; }
.header-loging li.header-login-text { border: none }
header .slidemenu ul li > a i.quote-icon span { color: #fff; }
span.login-text .fa.fa-sign-in { display: none; }
.slidemenu .dropdown-popup .dropdown-menu { left: auto; right: 90px; top: 3px; }
.slidemenu .quote-popup .dropdown-menu { left: auto; right: 90px; top: 3px; }
.stick-menu.header-loging span.fa.fa-heart-o { margin-top: 26px; }
.slidemenu .dropdown-menu-arrow::before { left: 366px; top: 6px; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.slidemenu .quote-popup .dropdown-menu-arrow::before { left: 366px; top: 6px; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
header .dropdown-popup .dropdown-menu-arrow:before { left: 367px; }
ul.nav.navbar-nav li > a:hover, .gosh-header .top-menu ul li a:hover { color: #0fb0ed; }
.ob-top-menu .top-advance-search .header-advace-search .advance-search-col { width: 102.5%; }
.ob-top-menu .top-advance-search .header-advace-search .advace-close-but { right: 15px; }
.menu-box .navbar-nav .dropdown-submenu > a { background: url(../images/caret-bg.png) no-repeat 170px 20px; }
.menu-box .navbar-nav > li li a:hover { background-color: #fff; }
.menu-box .navbar-nav li b.menu-caret1 { display: none; }
header .scroll-logo { display: none; }
.dropdown.hover > a.product-add { color: #0fb0ed; }
.member-col.hover > a i, .member-col.hover:hover > a i { color: #0fb0ed; }
.stick-menu.header-loging .fa, .slidemenu .add-button a:hover .fa { color: #FFF; }
.stick-menu.header-loging .add-button .fa { color: #7F7F7F; }
.info-menu.slidemenu ul li:last-child .dropdown-menu-arrow::before{right: 77px;}
.empty-block span{display: block;text-align: center;font-family: 'robotomedium';color: #ea0d8c;font-size: 24px;text-transform: capitalize;padding: 5px 0 30px;}
.slidemenu .dropdown-menu .dropdown-grid{text-align: center;float: none;display: table;margin:0 auto; }
.slidemenu .dropdown-menu .dropdown-grid .empty-block{height: 200px;vertical-align: middle;display: table-cell;width: 100%;}
.empty-block .fa {color: #ea0d8c !important;font-size: 34px; display: block;text-align: center;margin: 0 auto;}
.empty-block .fa span {padding: 0;font-size: 28px;}
/*HEADER*/
.slidemenu .quote-popup .inner-box { margin-left:-10px; margin-right:-10px;}
/*#model-cart .title-block span {padding-top: 5px;}*/
#model-cart .select-quntity-col > div {margin-bottom:0px;}
.padding-left-0 { padding-left: 0 !important; }
.dropdown-grid .price span { display:inline-block;}
.option-head span.remove { margin-left:5px;}
.header-loging li a{display: block;}
/*SLIDE MENU POPUP*/

.slidemenu .dropdown-menu { background: #FFF; border: 3px solid #0fb8f1; }
.slidemenu .dropdown .header-dropdown, header .dropdown-popup .header-dropdown { background: none }
.dropdown-menu-arrow .header-dropdown i.fa { font-size: 29px; color: #0fb0ed; }
.slidemenu .inner-box .fa.close-model { color: #ec008b; font-size: 25px; top: 3px; }
.slidemenu .dropdown-menu-arrow::before { content: ""; width: 25px; height: 17px; background: url(../images/goldstar/sidemenu-right-arrow.png) no-repeat 0 0; display: inline-block; left: 29px; position: absolute; top: -17px; }
header .dropdown-popup .dropdown-menu-arrow::before { left: 364px; transform: none; top: 38px; height: 25px; }
header li.dropdown-popup:nth-child(2) .dropdown-menu-arrow::before { top: 98px; }
.slidemenu .dropdown-popup .dropdown-menu { right: 85px; top: -23px; }
.dropdown-btn .bft-but { background: #ec008b; min-width: 145px; font-family: arial;padding: 10px 5px;}
.slidemenu .quote-popup .dropdown-menu-arrow::before { left: 375px; top: 168px; -ms-transform: none; -webkit-transform: none; transform: none; transform: none; height: 25px; }
header .slidemenu ul li .dropdown-menu .header-dropdown i.quote-icon span{font-size: 22px;}
.slidemenu .quote-popup.request-quote .dropdown-menu-arrow::before{top:248px;}
.slidemenu .quote-popup .dropdown-menu { left: auto; right: 85px; top: 0; margin-top: 0; min-height: 325px; min-width:380px;}
.list-item h3, .dropdown-grid h4, .dropdown-grid .price, .dropdown-grid .price span { font-family: 'arial' }
.slidemenu .dropdown .header-dropdown, header .dropdown-popup .header-dropdown { color: #0fb0ed; font-family: arial; font-size: 18px }
.slidemenu .dropdown-menu-arrow::before { top: -25px; left: 305px; width: 27px; height: 24px; transform: rotate(270deg); }
.slidemenu .cart-popup .dropdown-menu { left: auto; right: -10px; top: 80px; }
.list-item .close-btn { color: #888 !important; font-weight: normal; font-size: 16px }
.list-item .close-btn:hover { color: #ec008b !important }
.slidemenu .list-item .close-btn { font-size: 18px }
.slidemenu .more-product a { color: #888 }
.dropdown-grid .price { font-size: 21px; color: #ec008b;}
.slidemenu .cart-popup .inner-box, .slidemenu .quote-popup .inner-box, .slidemenu .dropdown-popup .inner-box{max-height: 485px;overflow-y: auto;}
/*SLIDE MENU POPUP*/


/*FOOTER*/

.middle-footer { background: #8e208c }
.middle-footer .footer-link a { color: #fff; font-family: "arial"; text-transform: capitalize; }
.middle-footer .footer-heading { background: none; color: #ffa6fe }
.bottom-footer { background: #FFF }
.upper-block img { margin: 26px; }
.copyright { color: #404140; text-align: center; }
.upper-block { margin: auto; text-align: center; }
.social-fooer { height: 100px; background: #FFF; margin: -25px 0px 22px; }
.first-block img { float: left }
.social-img img { margin-left: 8px; }
.social-img { float: right; }
.first-block p { margin-top: 10px; margin-left: 62px; text-transform: none; font-size: 12px; font-family: arial; }
.middle-footer .footer-link a:hover { color: #FFF; }
.social-fooer .container { border-top: 1px solid #0fb0ed; padding-top: 12px; }
/*FOOTER*/


/*-- TEASER ---------------------------------*/
.help-products .index-help-block { padding: 38px; max-width: 100%; height: 194px; display: block; vertical-align: middle; text-align: center; background: #ebebeb; margin: 0px 15px; }
.owl-teaser .owl-nav .owl-prev:before { left: 50%; top: 50%; opacity: 1; z-index: 1; content: "\f104"; font-family: fontawesome; position: absolute; margin-left: -4px; margin-top: -25px; font-size: 36px; color: #555; }
.owl-teaser .owl-nav .owl-prev { background: #f5f5f5; width: 40px; height: 100%; border-radius: 0 !important; background-position: 4px; background-repeat: no-repeat; position: absolute; left: 13px; top: 0; z-index: 1; }
.owl-teaser .owl-nav .owl-next:before { left: 50%; top: 50%; opacity: 1; z-index: 1; content: "\f105"; font-family: fontawesome; position: absolute; margin-left: -4px; margin-top: -25px; font-size: 36px; color: #555; }
.owl-teaser .owl-nav .owl-next { background: #f5f5f5; width: 40px; height: 100%; border-radius: 0 !important; background-position: 4px; background-repeat: no-repeat; position: absolute; right: 13px; top: 0; z-index: 1; }
.owl-teaser .owl-nav .owl-next:after { height: 100px; width: 30px; background: red; display: block }
.owl-teaser.owl-theme .owl-nav { margin-top: 15px; }
.owl-next, .owl-prev{font-size: 0px;display: inline-block;}
/*-- TEASER ---------------------------------*/


/*SLIDER*/

.ob-slide-box h1, .ob-slide-box p.slide-text, .ob-slide-box .btn { display: none; min-height: none }
/*ADVERTISE CATALOG*/

.banner-box .cat-left-side { background: none; padding: 0px; min-height: 275px }
/*ADVERTISE CATALOG*/

.feedback-btn { display: none }
/*--BANNER--*/

.ob-slide-box .carousel-indicators .active { background-color: #898989; border: 2px solid #898989; }
.ob-slide-box .carousel-indicators li { background: transparent; border: 2px solid #898989; }
.ob-slide-box .carousel-indicators { bottom: -30px; }
/*--BANNER--*/


/*RECOMMANDED PRODUCT*/

.recommeded-product-slider .pro-box { margin-bottom: 0; }
.pro-box .product-zoom, .pro-box .pav-colorbox { background: #ea0d8c none repeat scroll 0 0; }
.pro-desc .item-price, .pro-box:hover .pro-desc .item-price { font-size: 24px; color: #ea0d8c; font-family: arial; }
.pro-desc .item-price span { margin-top: 0; display: inline-block; font-size: 14px; color: #898989; font-family: arial; vertical-align: inherit; padding-right: 2px; }
.home-content .pro-overflow .nav-tabs { border-bottom: 2px solid #00abec; }
.home-content .pro-overflow .nav > li { width: 25%; }
.home-content .pro-overflow .nav > li > a { border-radius: 20px 20px 0px 0px; padding: 22px; font-size: 18px; font-family: 'SinkinSans-800Regular'; margin-right: 14px; color: #FFF; font-weight: normal; border-bottom: none; text-transform: uppercase !important; text-align: center; }
.home-content .pro-overflow .nav > li > a:hover{border-color: transparent;}
.home-content .pro-overflow .nav > li:first-child > a, .home-content .pro-overflow .panel-default:first-child .panel-heading { background-color: #00abec; filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#00abec, endColorstr=#FFF);background: -moz-linear-gradient(top, #00abec 30%, #FFF 100%); background: -webkit-linear-gradient(top, #00abec 30%, #FFF 100%); background: -ms-linear-gradient(top, #00abec 30%, #FFF 100%); background: linear-gradient(top, #00abec 30%, #FFF 100%); background: -o-linear-gradient(top, #00abec 30%, #FFF 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(30%, #00abec), color-stop(100%, #FFF)); }
.home-content .pro-overflow .nav > li:nth-child(2) > a, .home-content .pro-overflow .panel-default:nth-child(2) .panel-heading { background: -moz-linear-gradient(top, #b8d233 50%, #FFF 100%); background: -webkit-linear-gradient(top, #b8d233 50%, #FFF 100%); background: -ms-linear-gradient(top, #b8d233 50%, #FFF 100%); background: linear-gradient(top, #b8d233 50%, #FFF 100%); background: -o-linear-gradient(top, #b8d233 50%, #FFF 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(50%, #b8d233), color-stop(100%, #FFF)); }
.home-content .pro-overflow .nav > li:nth-child(3) > a, .home-content .pro-overflow .panel-default:nth-child(3) .panel-heading { background: -moz-linear-gradient(top, #f15e30 30%, #FFF 100%); background: -webkit-linear-gradient(top, #f15e30 30%, #FFF 100%); background: -ms-linear-gradient(top, #f15e30 30%, #FFF 100%); background: linear-gradient(top, #f15e30 30%, #FFF 100%); background: -o-linear-gradient(top, #f15e30 30%, #FFF 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(30%, #f15e30), color-stop(100%, #FFF)); }
.home-content .pro-overflow .nav > li:last-child > a, .home-content .pro-overflow .panel-default:last-child .panel-heading { background: -moz-linear-gradient(top, #8e208c 30%, #FFF 100%); background: -webkit-linear-gradient(top, #8e208c 30%, #FFF 100%); background: -ms-linear-gradient(top, #8e208c 30%, #FFF 100%); background: linear-gradient(top, #8e208c 30%, #FFF 100%); background: -o-linear-gradient(top, #8e208c 30%, #FFF 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(30%, #8e208c), color-stop(100%, #FFF)); margin-right: 0; color: #fff; }
.home-content .pro-overflow .panel-default .panel-heading .panel-title a { display: block; text-transform: uppercase; font-family: 'SinkinSans-800Regular'; font-size: 12px; color: #fff; }
.home-content .pro-overflow .nav-tabs > li.active > a { background: #00abec; color: #fff; border: 1px solid #00abec; border-bottom-color: transparent; }
.home-content .pro-overflow .panel-default:first-child .panel-heading, .home-content .pro-overflow .panel-default .panel-heading { border-radius: 0; margin-right: 0; padding: 15px; }
.pro-box:hover .pro-button { display: none; }
.pro-box:hover { border: none; }
.pro-box:hover .product-img-blk { opacity: 0.7; }
.pro-box { border: none }
.pro-desc { background: none; }
.product-tile .item-title { font-size: 15px; color: #404040; display: block; font-family: 'roboto_condensedregular'; text-transform: uppercase; padding: 5px 5px; min-height:60px; text-align: center }
.pro-desc { padding: 0px }
.product-img-blk { height: 222px;margin-top: 50px; }
.product-img-blk img { max-height: 96% }
.pro-desc .item-code { text-transform: uppercase; font-size: 12px; border-bottom: none;padding-bottom:20px;}
.pro-desc .item-code span { color: #00abec; font-size: 14px; font-weight: bold; }
.product-tile .item-title { text-transform: capitalize; font-size: 18px; font-family: 'arial'; margin-top:20px;position: absolute;top: -275px;display: block;width: 100%;}
.pro-desc .item-price e { font-size: 14px }
.middle-footer .footer-heading { font-family: 'SinkinSans-400Regular'; font-size: 16px; text-shadow: 0px 1px 0px #333; }
/*.pro-desc .item-code { font-family: 'arial'; font-size: 11px; padding-bottom: 0; }*/
.color-block .color-filter ul { margin-left: 0; }
.color-filter ul li { display: inline-block; float: none; margin-bottom: 2px; margin-right: 2px; }
.recommeded-product-slider { border-bottom: 1px solid #00abec; }
.recommeded-product-slider .owl-next { background: url(../images/goldstar/next-arrow-recommanded.png); width: 45px; height: 147px; border-radius: 0 !important; background-position: 4px; background-repeat: no-repeat; position: absolute; right: 7px; top: 21%; opacity: 1; z-index: 9; }
.recommeded-product-slider .owl-prev { background: url(../images/goldstar/previus-arrow-recommanded.png); width: 45px; height: 147px; border-radius: 0 !important; background-position: 4px; background-repeat: no-repeat; position: absolute; left: 0px; top: 21%; opacity: 1; z-index: 999 }
/*RECOMMANDED PRODUCT*/

.product-add { background: rgba(0, 0, 0, 0) url("../images/goldstar/menu-arrow.png") no-repeat scroll right 22px; }
a.back-to-top { display: none; width: 100px; height: 90px; text-indent: -9999px; position: fixed; z-index: 999; right: 20px; bottom: 20px; background: url("../images/goldstar/back-to-top.png") no-repeat center 43%; }
.banner-over { overflow: hidden; display: table; width: 100%; min-height: 200px; background: #e1e1e1; margin-bottom: 25px; }
.banner-over-text { display: table-cell; vertical-align: middle; text-align: center; }
.banner-over-text h4 { font-family: 'SinkinSans-800Regular'; font-size: 18px; color: #b7b7b7; margin: 10px 0; }
.banner-over-text a { font-family: 'SinkinSans-800Regular'; font-size: 24px; color: #b7b7b7; padding: 0 15px; display: inline; }
.banner-over.sign-up { overflow: hidden; display: table; width: 100%; min-height: 75px; background: #e1e1e1; margin-bottom: 25px; }
.banner-over-text p { font-family: 'SinkinSans-400Regular'; font-size: 12px; color: #363636; margin: 5px 0; letter-spacing: 3px; font-weight: 600; padding-bottom: 0; }
.banner-over-text a.btn-sign-up { background: -moz-linear-gradient(top, #ea0d8c 30%, #f793cd 100%); background: -webkit-linear-gradient(top, #ea0d8c 30%, #f793cd 100%); background: -ms-linear-gradient(top, #ea0d8c 30%, #f793cd 100%); background: -linear-gradient(top, #ea0d8c 30%, #f793cd 100%); background: -o-linear-gradient(top, #ea0d8c 30%, #f793cd 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(30%, #ea0d8c), color-stop(100%, #f793cd)); font-family: 'SinkinSans-400Regular'; font-size: 18px; color: #fff; border: none; padding: 6px 30px; vertical-align: middle; display: inline-block; text-shadow: 0px 1px 0px #000000; margin: 5px 0; }
.selection-color-box .dropdown-menu a{padding: 5px;}
.shipping-method .radio {margin-top:0px;}
.shipping-method .radio label { display:inline;}
.shipping-method .radio .upload-logo label {padding: 5px 20px 0 10px !important;}
.proof-box .optional-col.spacing .upload-logo { padding:0px; margin:0px;}
.proof-box .optional-col.spacing .upload-logo label { margin-top:0px;}








/*--COMMON--*/
.list-item .cart-img img{margin: 5px auto;}
.menu-box .dropdown-menu > li > a {padding: 9px 4px 6px;margin: 0 10px 0 10px;font-size: 13px;text-transform: capitalize;}
.empty-quote-block h4 { font: 24px arial; text-align: center; color: #898989; }
/*.radio label { text-align: center; }*/
.continue-btn:hover, .continue-btn:focus { background: #ea0d8c; border: 1px solid #ea0d8c; color: #fff; }
.inp-parts .checkout-select-wrapper .checkout-holder { margin: 0 12px 0 10px; }
.form-group ul.message li { font: 12px arial; color: #898989 !important; text-align: right; position: relative; top: 3px; }
input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], button[type="reset"] { border-radius: 3px; color: #fff; background: #5d5c5c; border: 1px solid #505050; box-shadow: none; margin-right: 7px; text-transform: uppercase; font: 14px arial; padding: 6px 20px; height: 35px; letter-spacing: 1px; }
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover { color: #fff; background: #ea0d8c; border: 1px solid #ea0d8c; }
.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: #ebebeb; }
.form-group label { font-family: arial; }
.form-group .error-message li, .form-group ul li, .form-group .error-message li, .form-group ul li, .help-block {font-size: 11px;color: red !important;margin-top: 3px;position: relative;line-height: 10px;bottom: 0;}
.text-center{clear: both;text-align: center !important;}
.filter-search .checkbox label::after {top: -2px;}
.color-block .color-filter label{border:none;}
.innerpage .fa.fa-question-circle{color: #404040;}
.login-col input[type="text"], .login-col input[type="password"]{box-shadow: none;}
.owl-carousel.color-box li.owl-item{margin-right:7px;width: 100% !important;margin-bottom: 7px;}
.owl-carousel.wish-list-color-box li.owl-item{margin-right:7px;width: 100% !important;margin-bottom: 7px;}
.owl-carousel.wish-list-color-box-guest li.owl-item{margin-right:7px;width: 100% !important;margin-bottom: 7px;}
.required{color: red;}
.pagination>.disabled>a{border-color: #fff;}

/*--COMMON--*/

</style>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	<link href='{{ asset(ob_project_assets_base_url ~ 'css/print.css', null, true) }}' rel='stylesheet' type='text/css'/>
	
	<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style type="text/css">
body * { visibility:visible !important; }
		
*@page {
	margin: 1cm 0.3cm 0.9cm 0.3cm;
	size:auto;
}
*@page:first{
	margin-top: 1cm;
}

.instruction-overflow{height: auto !important;overflow: visible !important;}
.product-des-overflow{height: auto !important;}	

.scroll-header { padding:0px 10px !important;}
.quote-detail-wrapper .product-img-col {min-height: 250px;margin-bottom: 18px;position: relative;}
.scroll-block {border: 1px solid #dadada; margin-bottom: 18px; padding: 10px; }
.box-border { border: 1px solid #dadada; }
.billing-address-block .quote-content {height: auto !important;}

.billing-address-col .address-table table tr{border-bottom:none !important;}


.address-col ul{display: none;}
.product-info-col label{
/* width:75%; */
margin-top:2px;
}

/* .quote-block .quote-content img { */
/*     max-width: 250px !important; */
/* } */
.prod-img {
	max-width: 250px !important;
}
.quote-preview-block .product-info-col .product-info-col-2 .charges-table table {width: 100%;}

.quote-preview-block .modal-dialog{width:100%;} 
.quote-detail-wrapper .product-img-col img{ padding: 0 5px;max-width: 50% !important; margin: auto; top:50%; left:50%; margin:auto; max-height:75%; max-width:99%; position:absolute; -ms-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%)}
/* .quote-detail-wrapper .quote-block .panel-group .panel{ page-break-before: always; page-break-inside: avoid !important; } */
.quote-preview-block{ page-break-inside: avoid; }

.info-table-content { width: 100%; overflow: auto;}


.info-table-content .table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

.info-table-content .table tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.info-table-content .table td, .info-table-content .table th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: none;
    border-right: none;
    text-align: left;
    display: table-cell;
}

.product-info-col-2 .search-sku label {
    float: left;
    color: #363636;
    font-family: 'arial';
    font-size: 12px;
    padding: 0px 10px 0px 0px;
}

.quote-preview-block .quote-detail-wrapper .product-info-col-2 span {
    text-align: left;
}

.order-total {
    font-size: 20px;
    color: #363636;
    font-family: 'arial';
    text-align: right;
    padding: 0px 15px !important;
}

.one-third{width:33%;}
.one-half{width:50%;}

.one-third span{padding:0px 15px !important;}
.one-half span{padding:0px 15px !important;}

.quote-detail-wrapper .info-table th:first-child, .quote-detail-wrapper .info-table td:first-child { text-align: center; }
.quote-detail-wrapper .info-table { border-bottom: 1px solid #dadada; }

.tbl_summary td {text-align: right !important;}

.box-border .scroll-content .estimate-tag-block .estimate-row div {display: block;}

.mob_fax_block { white-space:nowrap;}
</style>






{% set ob_city_dropdown = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['city']['option']['dropdown']['status'] %}
{% set ob_city_textbox = ob_project_setting['configuration_rule']['site_management']['option']['address']['option']['city']['option']['textbox']['status'] %}
<div class="quote-preview-block" id="quote_preview_popup" tabindex="-1" role="dialog" aria-hidden="true">

	<div class="modal-dialog modal-lg">
	<div class="quote-detail-wrapper">

{#     	<div class="modal-header">#}
{#         	<h1 class="modal-title modal-popup-icon-title" ><i class="fa quote-preview"></i>{{ 'quote.quote_preview'|trans }}</h1>#}
{#     	</div>#}
    	<div id="quote-detail-view" class="modal-body">
    		<div class="quote-detail-wrapper">
    			<div class="row">
		        
		        	<div class="ui-quote-wrapper col-lg-12 col-md-12 col-xs-12">
		                	<div class="quote-block title-colum">
		                    	<div class="quote-header-block">
		                    		<div class="row">
		                    			<div class="one-third pull-left">
											<span class="">{{ 'quote.quote_title' | trans }} : # {% block quote_preview_date_id %}{% endblock quote_preview_date_id %}</span>
										</div>
										<div class="form-group2 search-width one-third pull-left">
											<span>{{ 'my_account_my_quote.quote_name' | trans({},'goldstar') }}: {% block quote_preview_title %}{% endblock quote_preview_title %}</span>
										</div>
										<div class="date-col show-date2 one-third pull-right">
											<span class="pull-right">{{ 'quote.quote_date' | trans }}: {% block quote_preview_created %}{% endblock quote_preview_created %}</span>
										</div>
		                			</div>
		                		</div>
		                		{% block quote_preview_visible_text %} {% endblock quote_preview_visible_text %}
		                	</div>
		                			
		                			
			                <!-- customer distributor information -->			
			                <div class="row">
			                    <div class="col-lg-6 col-md-6 col-sm-12 address-block-quote">
								    <div class="quote-block billing-address-block">
								        <div class="quote-header-small">
								            <h3 class="pull-left2">{{ 'admin.quote_info.quote_billing_address' |trans }}</h3>
								        </div>
								        <div class="">
								            {{ render(controller('OfficeBrainQuoteBundle:Quote:getAllAddressByQuotePreview', {'quote_id': data.id })) }}
								        </div>
								    </div>
								</div>
			                    <div class="col-lg-6 col-md-6 col-sm-12 address-block-quote">
								    <div class="quote-block billing-address-block">
								        <div class="quote-header-small">
								            <h3 class="pull-left2">{{ 'admin.quote_info.quote_your_information' | trans }}</h3>
								        </div>
								        <div class="quote-content">
								            <div class="billing-address-col">
								                <div class="address-table" style="display:block;">
								                    <table class="table-responsive">
								                        <tr>
								                            <td width="35%" >
								                                <div class="user-img">
								                                {% if userData.photo is defined and userData.photo !='' %}
									                        <img alt="" src="{{ ob_project_base_url~asset('images/uploads/user_photo/' ~ userData.photo)  }}" class="js-profile-photo" width="100">
																{% else %}
									                      	<img src="{{ ob_project_base_url~asset(ob_project_assets_base_url ~ 'images/man-dummy.png')}}" alt="" />
								                    	{% endif %}
								                                </div>
								                            </td>
								                            <td >
								                                <span>{{ userData.firstName }} {{ userData.lastName }}</span>
								                                <p>
								                                    {% if userData.address is defined and userData.address!='' %}{{ userData.address }} <br>{% endif%}
								                                    {% if userData.street2 is defined and userData.street2!='' %}{{ userData.street2 }} <br>{% endif%}
								                                    {% if userData.cityId is defined and userData.cityId!=''%}{{ userData.cityId|city }},{% endif %}
								                                    {% if userData.cityName is defined and userData.cityName!=''%}{{ userData.cityName }},{% endif %}
								                                    {% if userData.stateName is defined and userData.stateName!=''%}
								                                        {{ userData.stateName }},
								                                    {% elseif userData.stateId is defined and userData.stateId!=''%}
								                                        {{ userData.stateId|state }},
								                                    {% endif %}
								                                    {% if userData.zipcode is defined and userData.zipcode!='' %}{{ userData.zipcode }},<br>{% endif %}
								                                    {% if userData.countryName is defined and userData.countryName!=''%}
								                                        {{ userData.countryName }}
								                                    {% elseif userData.countryId is defined and userData.countryId!='' %}
								                                        {{ userData.countryId|country }}
								                                    {% endif %}
								                                </p>
								                            </td>
								                        </tr>
								                        <tr>
								                            {% if userData.phone is defined and userData.phone!='' %}<td class="nowrap"><i class="fa fa-phone"></i>{{ userData.phone }}</td>{% endif %}
								                            {% if userData.email is defined and userData.email!='' %}<td><a href="mailto:{{ userData.email  }}"><i class="fa fa-envelope"></i>{{ userData.email }}</a></td>{% endif %}
								                        </tr>
								                        <tr>
								                            {% if userData.fax is defined and userData.fax!='' %}<td class="nowrap"><i class="fa fa-print"></i>{{ userData.fax }}</td>{% endif %}
								                            {% if userData.website is defined and userData.website!='' %}<td><a href="javascript:void(0)"><i class="fa fa-globe"></i>{{ userData.website }}</a></td> {% endif %}
								                        </tr>
								                    </table>
								                </div>
								            </div>
								        </div>
								    </div>
								</div>
			                </div>
			                <!-- customer distributor information -->
		                
		                	<!-- product overview -->
			                <div class="quote-block title-colum">
			                	<div class="quote-header quote-detail-title">
									<h2 class="pull-left mob_fax_block">Product Overview</h2>
								</div>
			                    <div class="quote-content">
			                        <div id="js_product_list_preview" class="panel-group"><!-- js_quote_product_list_preview -->
			                            {% if data.quoteItemLine|length>0 %}
			                                {{ render(controller('OfficeBrainQuoteBundle:Quote:getProductListPreview', { 'quote_id': data.id, 'download_flag': '1', 'is_quote_preview_page': '1'})) }}
			                            {% else %}
			                                <div align="center">
			                                    <h2>
			                                        {{ "admin.quote_info.quote_no_product_added"|trans }}
			                                    </h2>
			                                </div>
			                            {% endif %}
			                            <div class="clearfix"></div>
			                        </div>
			                    </div>
			                </div>
			                <!-- product overview -->
                
                                
                                
                                
                                <div class="quote-block discount-col title-colum">
{# 									<div class="quote-header quote-detail-title">#}
{# 										<h2 class="pull-left">{{ 'admin.quote_info.quote_additional_charges' |trans }}</h2>#}
{# 									</div>#}
									<div class="quote-content">
										<div class="product-info-col-3">
											<div class="row">
			                                	<div class="one-third pull-left"><span>{{ 'admin.quote_info.quote_additional_charges' |trans }}</span></div>
												<div class="one-third pull-left">
													<span>{{ data.additionalChargesType }}</span>
												</div>
			                                    <div class="one-third pull-right">
			                                    	<span> 
			                                    	{% if data.isVisibleAdditionalCharges==1 %}
														{{ data.additionalChargesText }}
													{% else %}
														{{ ob_project_setting.currency_code|upper }}
                                    					{% if data.additionalCharges is defined and data.additionalCharges !='' %} {{ data.additionalCharges|price }} {% else %}0.00{% endif %}
													{% endif %}
													</span>
												</div>
											</div>
										</div>
									</div>
{# 									<div class="quote-header quote-detail-title">#}
{# 										<h2 class="pull-left">{{ 'admin.quote_info.quote_discount' |trans }}</h2>#}
{# 									</div>#}
									<div class="quote-content">
										<div class="product-info-col-3">
											<div class="row">
												<div class="one-half pull-left">
													<span>{{ 'admin.quote_info.quote_discount' |trans }}</span>
												</div>
												<div class="one-half pull-right">
													<span>
														{% if data.isVisibleDiscount==1 %}
		                                    				{{ data.discountText }}
		                                    			{% else %}
															{{ ob_project_setting.currency_code|upper }}
			                                                {{ data.discount|price }}
		                                    			{% endif %}
													</span>
												</div>
											</div>
										</div>
									</div>
									<div class="order-total">
										{% if data.isVisibleGrandTotal==1 %}
                                    		{{ data.grandTotalText }}
                                    	{% else %}
                                    		<span>Grand Total: </span>
											{{ ob_project_setting.currency_code|upper }}
                                            {{ data.grandTotal|price }}
                                    	{% endif %}
									</div>
								</div>
                                {% if data.isVisibleFooterText==1 %}
                                	{% if data.footerTextField != '' %}
										<div class="quote-block discount-col title-colum">
											<div class="quote-header quote-detail-title">
												<h2 class="pull-left">Disclaimer</h2>
											</div>
											<div class="quote-content comments">
											{{ (data.footerTextField is defined) ? data.footerTextField|raw : '' }}
											</div>
										</div>
									{% endif %}
								{% endif %}	
		                
                
                
            		</div>
        		</div>
        	</div>
		</div>
	</div>
	</div>
</div>
{% endblock ajax_body %}