.vueperslide{white-space:normal;background-size:cover;-ms-flex-negative:0;flex-shrink:0;display:block;width:100%;position:relative}.vueperslide--clone-1{position:absolute;top:0;bottom:0;right:100%}.vueperslides--rtl .vueperslide--clone-1{right:auto;left:100%}.vueperslide[href]{-webkit-user-drag:none}.vueperslide__image{background-size:cover}.vueperslide__image,.vueperslide__loader{position:absolute;top:0;left:0;right:0;bottom:0}.vueperslide__loader{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vueperslide__content-wrapper:not(.vueperslide__content-wrapper--outside-top):not(.vueperslide__content-wrapper--outside-bottom){height:100%;margin:auto}.vueperslides--fade .vueperslide{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;-webkit-transition:opacity ease-in-out;transition:opacity ease-in-out;-webkit-transition-duration:inherit;transition-duration:inherit}.vueperslides--fade .vueperslide--active,.vueperslides--fade .vueperslide--visible{z-index:1;opacity:1}.vueperslides--slide-image-inside .vueperslide{overflow:hidden}.vueperslides--3d .vueperslide{position:absolute;z-index:-1;height:100%}.vueperslides--3d .vueperslide--active,.vueperslides--3d .vueperslide--next-slide,.vueperslides--3d .vueperslide--previous-slide{z-index:0}.vueperslides--3d .vueperslide--active{z-index:1}.vueperslides--3d .vueperslide[face=front]{-webkit-transform:rotateY(90deg) translateX(-50%) rotateY(-90deg);transform:rotateY(90deg) translateX(-50%) rotateY(-90deg)}.vueperslides--3d .vueperslide[face=right]{-webkit-transform:rotateY(90deg) translateX(50%);transform:rotateY(90deg) translateX(50%);-webkit-transform-origin:100% 0;transform-origin:100% 0}.vueperslides--3d .vueperslide[face=back]{-webkit-transform:rotateY(270deg) translateX(-50%) rotateY(-90deg);transform:rotateY(270deg) translateX(-50%) rotateY(-90deg)}.vueperslides--3d .vueperslide[face=left]{-webkit-transform:rotateY(270deg) translateX(-50%);transform:rotateY(270deg) translateX(-50%);-webkit-transform-origin:0 0;transform-origin:0 0}.vueperslides:not(.no-shadow):not(.vueperslides--3d) .vueperslides__parallax-wrapper:after,.vueperslides:not(.no-shadow):not(.vueperslides--3d) .vueperslides__parallax-wrapper:before{content:"";position:absolute;bottom:100%;left:-1em;right:-1em;height:2em;-webkit-box-shadow:0 0 20px rgba(0,0,0,.25);box-shadow:0 0 20px rgba(0,0,0,.25);z-index:2}.vueperslides:not(.no-shadow):not(.vueperslides--3d) .vueperslides__parallax-wrapper:after{top:100%;bottom:auto}.vueperslides__arrows{color:#fff}.vueperslides__arrows--outside{color:currentColor}.vueperslides__arrow{top:50%;background-color:transparent;border:none;opacity:.7}.vueperslides--rtl .vueperslides__arrow--next,.vueperslides__arrow--prev{right:auto;left:0}.vueperslides--rtl .vueperslides__arrow--prev,.vueperslides__arrow--next{left:auto;right:0}.vueperslides__arrow:hover{opacity:1}.vueperslides--rtl .vueperslides__arrows--outside .vueperslides__arrow--next,.vueperslides__arrows--outside .vueperslides__arrow--prev{right:auto;left:-3.5em}.vueperslides--rtl .vueperslides__arrows--outside .vueperslides__arrow--prev,.vueperslides__arrows--outside .vueperslides__arrow--next{left:auto;right:-3.5em}.vueperslides__paused{top:.7em;right:.7em;opacity:0;text-shadow:0 0 3px rgba(0,0,0,.4);z-index:1}.vueperslides:hover .vueperslides__paused{opacity:1}.vueperslides__bullets:not(.vueperslides__bullets--outside){color:#fff}.vueperslides__bullet{margin:1.5em .6em;padding:0;border:none;background:none}.vueperslides__bullet .default{width:12px;height:12px;border-radius:12px;border:1px solid;background-color:transparent;-webkit-box-shadow:0 0 1px rgba(0,0,0,.5),0 0 3px rgba(0,0,0,.3);box-shadow:0 0 1px rgba(0,0,0,.5),0 0 3px rgba(0,0,0,.3);-webkit-transition:.4s ease-in-out;transition:.4s ease-in-out;-webkit-box-sizing:border-box;box-sizing:border-box}.vueperslides__bullet .default span{display:none}.vueperslides__bullet--active .default{border-width:6px}.vueperslide,.vueperslide__image{background-position:50%}.vueperslide__video{outline:none}.vueperslide--no-pointer-events:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0}.vueperslide__content-wrapper:not(.vueperslide__content-wrapper--outside-top):not(.vueperslide__content-wrapper--outside-bottom){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.vueperslide--has-image-inside .vueperslide__content-wrapper,.vueperslide--has-video .vueperslide__content-wrapper,.vueperslide__content-wrapper.parallax-fixed-content{position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none}.vueperslides{position:relative}.vueperslides--fixed-height .vueperslide,.vueperslides--fixed-height .vueperslides__inner,.vueperslides--fixed-height .vueperslides__parallax-wrapper{height:inherit}.vueperslides--fixed-height .vueperslides__parallax-wrapper{padding-bottom:0!important}.vueperslides--fixed-height.vueperslides--bullets-outside{margin-bottom:4em}.vueperslides__inner{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vueperslides__parallax-wrapper{position:relative;overflow:hidden}.vueperslides--3d .vueperslides__parallax-wrapper{overflow:visible}.vueperslides__track{position:absolute;top:0;height:100%;left:0;right:0;overflow:hidden;z-index:1}.vueperslides--parallax .vueperslides__track{height:200%;-webkit-transform:translateY(0);transform:translateY(0)}.vueperslides--touchable .vueperslides__track{cursor:ew-resize;cursor:-webkit-grab;cursor:grab}.vueperslides--touchable .vueperslides__track--dragging,.vueperslides--touchable .vueperslides__track--mousedown{cursor:-webkit-grabbing;cursor:grabbing}.vueperslides--3d .vueperslides__track{overflow:visible;-webkit-perspective:100em;perspective:100em}.vueperslides__track-inner{white-space:nowrap;-webkit-transition:transform .5s ease-in-out;-webkit-transition:-webkit-transform .5s ease-in-out;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.vueperslides--no-animation .vueperslides__track-inner{-webkit-transition-duration:0s!important;transition-duration:0s!important}.vueperslides--fade .vueperslides__track-inner{white-space:normal;-webkit-transition:none;transition:none}.vueperslides--3d .vueperslides__track-inner{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.vueperslides__track--mousedown .vueperslides__track-inner{-webkit-transition:transform .25s ease-in-out!important;-webkit-transition:-webkit-transform .25s ease-in-out!important;transition:-webkit-transform .25s ease-in-out!important;transition:transform .25s ease-in-out!important;transition:transform .25s ease-in-out,-webkit-transform .25s ease-in-out!important}.vueperslides__track--dragging .vueperslides__track-inner{-webkit-transition:none;transition:none}.vueperslides__arrow{position:absolute;font-size:inherit;color:inherit;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;z-index:2;line-height:1}.vueperslides__arrow,.vueperslides__arrow svg{-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.vueperslides__arrow svg{vertical-align:middle;stroke:currentColor;fill:none;width:3.5em;padding:1em;stroke-width:1;-webkit-box-sizing:border-box;box-sizing:border-box}.vueperslides__arrow svg:hover{stroke-width:1.3}.vueperslides__paused{position:absolute;-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}.vueperslides__bullets{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;bottom:0;left:0;right:0}.vueperslides__bullets--outside{position:relative}.vueperslides__bullet,.vueperslides__bullets button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit}.vueperslides__bullet::-moz-focus-inner,.vueperslides__bullets button::-moz-focus-inner{border:0}.vueperslides__fractions{position:absolute;top:.8em;left:.5em;z-index:2;padding:.2em 1em;border:1px solid hsla(0,0%,100%,.5);border-radius:2em;background:hsla(0,0%,100%,.2);color:#fff}.vueperslides__progress{position:absolute;top:0;left:0;right:0;z-index:2;height:6px;color:rgba(0,0,0,.7)}.vueperslides__progress>*{position:absolute;top:0;bottom:0;left:0;background:currentColor;-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out} /*# sourceMappingURL=app.9a44c09d9e6ca2894c9bbfb8c67ab84c.css.map */ .vueperslides--fixed-height.vueperslides--bullets-outside { padding: 0px 20px; } body .xyz-calc-nav > .vueperslides .vueperslides__track-inner { justify-content: center; } body .xyz-calc-nav > .vueperslides .vueperslides__track-inner .xyz-room-custom-btn:last-child { margin-right: 0 !important; } .xyz-mobile-fixed { display: none; position: fixed; top: 20px; left: 2%; width: 96%; animation: fadeInDown ease-in-out 0.6s both; z-index: 9999; margin: 0; } .xyz-add-more-items { z-index: 999; line-height: 22px; top: 0px; text-decoration: none; font-size: 14px; font-weight: 700; color: #54565a; width: 100%; background: #fff; border-radius: 4px; border: 2px solid #434548; padding: 8px 10px; margin: 0 0 20px; position: relative; transition: all 0.3s ease 0s; display: block; text-align: center; } .home-calculate-section .title-wrap h2.title { font-size: 26px; } .home-calculate-section .btn { margin-top: 15px !important; } .home-calculate-section .btn:hover { border: 2px solid #5ac4ba; } .home-calculate-section .icon-arrow::before { margin: 3px 5px 0 0; } .error-message { color: #E0581C; } .xyz-modal .error-message { font-size: 11px; max-width: 250px; display: block; text-align: left; margin: 0 auto; } .xyz-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .xyz-modal { background: white; padding: 20px; border-radius: 8px; width: 400px; position: relative; } .xyz-modal-header { display: flex; justify-content: space-between; align-items: center; } .xyz-modal-title { margin: 0; } .xyz-modal-body input { margin-bottom: 10px; } .xyz-modal-body a.link:hover { color: #48918c; } .xyz-modal-footer { display: flex; justify-content: flex-end; } .xyz-btn { cursor: pointer; background-color: #007bff; color: white; border: none; padding: 8px 16px; border-radius: 4px; } .xyz-close { cursor: pointer; background: none; border: none; font-size: 20px; color: #333; } .xyz-room-products-grid { display: inline-grid; padding: 0px 15px; flex-wrap: wrap; justify-content: space-between; } .xyz-calc-item { flex: 0 0 calc(33.333% - 10px); /* Adjust as needed, this is for 3 items per row with some spacing */ margin-bottom: 20px; /* Adjust spacing between rows */ } .xyz-overflow-scroll { overflow: scroll; } .xyz-flot-right { float: right; } .xyz-text-align-center { text-align: center; } .xyz-d-block { display: block; width: 100%; } .xyz-btn-top { position: absolute; right: 15px; top: 0px; } .xyz_mt { margin-top: 15px; } .xyz_mb { margin-bottom: 15px; } .added-btn-sections { display: flex; justify-content: space-between; align-items: center; } .yellow-bg { background-color: #F5D93F !important; } .xyz-text-lowercase { text-transform: lowercase; } /* End of vue css */ div#customItem { display: none; } .fff-bgr { background: #FFF; overflow: hidden; } .xyz-btn.show-all { border-radius: 4px; background: #FFF; color: #54565A; border: 2px solid #54565A; margin-top: 30px; font-weight: bold; padding-left: 25px; padding-right: 25px; } .xyz-btn.show-all:hover { background: #5AC4BA; color: #000; border-color: #5AC4BA; } /** bootstrap***/ .calculator-section .row, .xyz-display-flex { display: flex; align-items: center; } .calculator-section .row.justify-center { justify-content: center; } .calculator-section .row.justify-center .col-12 { width: 50%; padding: 10px; } .calculator-section .col-6 { flex: 50%; padding: 10px; } .calculator-section { margin-top: 50px; } /**banner**/ /* .self-storage-units.page-id-63010 .xyz-banner, .self-storage-units.page-id-63010 .calculator-section, .locations-template .xyz-banner, .locations-template .calculator-section { display: none; } */ .xyz-banner { background-image:url('/wp-content/themes/custom-theme/xyz-storage-calculator/images/storage-banner.png'); background-size: cover; background-position: center right; display: flex; justify-content: center; align-items: center; padding: 60px; } .xyz-banner-content { width:100%; height: auto; max-width: 600px; display: flex; flex-direction: column; gap: 20px; padding: 40px 0px; } .xyz-banner-content h4 { font-size: 30px; font-weight: 700; line-height: 36px; margin: 0; } .xyz-banner-content p { font-size: 14px; font-weight: 400; line-height: 20px; margin: 0; } .xyz-banner-content ul{ margin-bottom: 0px; } .empty--container { width:100%; height: auto; max-width: 600px; } /***banner****/ /** bootstrap***/ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #loaded-image, div#loaded-image-calculate { position: relative; display: inline-block; border: 4px solid #ccc; border-top: 4px solid #3498db; border-radius: 50%; width: 100px; height: 100px; margin: 150px; animation: spin 1s linear infinite; z-index: 999; display: none; } #loading-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); /* Adjust the alpha (4th value) for the level of blur */ backdrop-filter: blur(5px); /* Adjust the blur amount as needed */ z-index: 99; display: none; } div#loaded-image-calculate { position: relative; z-index: 9999; display: none; } .top-heading { margin-bottom: 30px; } .xyz-calc-heading-color { text-align: center; font-size: 30px; font-style: normal; font-weight: 700; color: #54565A; } .xyz-calc-frame-box { width: 100%; background: #FFF; font-size: 14px; } .xyz-calc-nav.xyz-calc-nav-tabs { justify-content: center; border-bottom: 0px; } .xyz-calc-radio-box-text { display: none; } .xyz-calc-radio-box-text:checked+label, .xyz-calc-radio-box-label.checked, .xyz-calc-radio-box-label:hover { background-color:#5AC4BA; color: #000; } .xyz-calc-radio-box-label { text-align: center; color: #54565A; font-size: 14px !important; font-weight: bold; line-height: 20px; border-radius: 4px; background: #F1F1F1; padding: 10px 25px !important; cursor: pointer; } button.xyz-calc-radio-box-label { background: #F5D93F; border: 0px; } /* .xyz-calc-radio-box-label:last-child { margin-right: 0px; } */ .clear { clear: both; } .xyz-calc-frame-box .display-flex { display: flex; justify-content: center; margin-bottom: 50px; } #xyzCalcRadioButtonsContainer { display: block; width: 78%; text-align: center; padding: 15px 0px; } #xyzCalcSubCategoryContainer { display: block; width: 95%; margin: 0 auto; text-align: center; } #xyzCalcSubCategoryContainer .slider { width: 80%; margin: 0px auto; } #xyzCalcSubCategoryContainer .slick-prev:before, #xyzCalcSubCategoryContainer .slick-next:before { color: black; } #xyzCalcSubCategoryContainer .slick-slide { text-transform: capitalize; margin: 0px 20px; transition: all ease-in-out .3s; opacity: .2; background: #F1F1F1; } #xyzCalcSubCategoryContainer .slick-active { opacity: 1; } #xyzCalcSubCategoryContainer .slick-current { opacity: 1; } #xyzCalcSubCategoryContainer .slick-prev, #xyzCalcSubCategoryContainer .slick-next { background: transparent !important; } #xyzCalcSubCategoryContainer .slick-slider-container { height: 500px; overflow: auto; text-align: left; } #xyzCalcSubCategoryContainer button.btn.show-all { background: #5ac4ba; margin-left: 40px; color: #000; } /***over plus increment***/ div#recommend-background { background-image: url('/wp-content/themes/custom-theme/xyz-storage-calculator/images/background.svg') !important; background-repeat: repeat-x; padding-top: 0; } .xyz-calc-item { width: 150px; position: relative; text-align: center; } /* .xyz-calc-item span.d-block { color: #000; } */ p.xyz-calc-product-size { font-size: 12px; margin-top: 10px; } .xyz-calc-cart-list .xyz-product-list-box { margin-left: 10px; padding: 6px 0px; } .xyz-calc-cart-list .xyz-product-list-box p.xyz-calc-product-size { margin-top: 0px; } .xyz-calc-product-image-increment-decrement { background: #f1f1f1; border-radius: 50%; width: 120px !important; height: 120px !important; cursor: pointer; margin: 10px auto; } .xyz-calc-product-image-increment-decrement:hover, .xyz-calc-product-image-increment-decrement.xyz-hover { background: #F5D93F; } .xyz-calc-product-image-increment-decrement img { margin: 0px auto; padding-top: 25px; max-width: 72px; } .xyz-calc-product-image-increment-decrement:hover .xyz-calc-btns, .xyz-calc-product-image-increment-decrement.xyz-hover .qty{ visibility: visible; } .xyz-calc-itemsSelector { position: absolute; inset: 50px 0px 30px; margin: 0px auto; height: 30px; text-align: center; } .slick-slider-container .xyz-calc-itemsSelector { inset: 60px 0px 30px; } .xyz-calc-btns { margin: 0px 1px; background-color: rgb(248, 247, 241); display: inline-block; visibility: hidden; border-radius: 50%; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px; width: 25px; height: 25px; font-size: 15px; text-align: center !important; line-height: 25px !important; } .xyz-calc-btns.plus:hover, .xyz-calc-btns.minus:hover { background-color: #54565A; color: white; } .xyz-calc-btns.minus[disabled] { color: grey; cursor: default; } .xyz-room-products-grid { display: inline-flex; } /***over plus increment***/ /***cart css start***/ #xyzCalcSelectedProductsContainer { height: 330px; overflow: auto; margin-top: 10px; } #xyz-calc-cart-area { background: #FFF; max-width: 450px; padding: 10px 20px 20px; } .xyz-calc-cart-list { list-style: none; padding-left: 0px; margin-bottom: 20px; font-weight: 400; height: 200px; } .xyz-calc-cart-list li { position: relative; border-radius: 4px; background: #F1F1F1; display: flex; height: 45px; padding: 4px 10px 4px 4px; justify-content: space-between; align-items: center; align-self: stretch; margin-bottom: 10px; } .xyz-calc-cart-list li span { line-height: 0px; display: inline-block; } .xyz-calc-cart-list li img.xyz-calc-item { max-width: 40px; background: #FFF; padding: 4px 8px; margin: 10px 10px 10px 0px; } .xyz-calc-heading-part { color: #54565A; font-size: 20px; font-weight: 700; display: flex; align-items: center; height: 40px; } .xyz-calc-clear-btn { color: #54565A; font-size: 14px; font-weight: 700; float: right; border: 2px solid #54565A; text-decoration: none; padding: 8px 25px; border-radius: 5px; cursor: pointer; } .xyz-calc-clear-btn:hover { background: #5AC4BA; color: #000; border-color: #5AC4BA; } .xyz-calc-cart-list .xyz-calc-itemcount { position: absolute; text-align: center; top: 0px; left: 45px; background: #F5D93F; width: 18px; height: 18px; font-size: 13px; border-radius: 50%; font-weight: bold; } .xyz-calculate-space-link ,.xyz-calculate-space-link:focus { border-radius: 4px; background: #F5D93F !important; display: inline-block; height: 45px; padding: 12px 25px; margin: 0 auto; text-align: center; color: #54565A; text-decoration: none; font-size: 14px; font-weight: 700; margin-top: 20px; border: 0px; } .xyz-calculate-space-link:hover { background: #5AC4BA !important; color: #000; border-color: #5AC4BA; } .xyz-calc-size-update .xyz-calc-btns{ visibility: visible; cursor: pointer; } /***cart css end***/ /***recommend box start**/ #xyz-calc-recommend-box .xyz-calc-recommend-text { width: 70%; margin: 0 auto; } div#xyz-calc-recommend-box { padding-top: 40px; } div#xyzCalcRecommend { width: 100%; margin: 10px auto; } #xyz-calc-recommend-box .xyz-calc-unit { background: #f1f1f1; margin: 5px; padding: 15px 0px; cursor: pointer; border-radius: 4px; } .xyz-calc-box-name { font-weight: 700; color: #54565A; padding: 25px 0px; text-align: left; } .xyz-calc-name { font-size: 18px; } .xyz-calc-width-depth { font-size: 38px; } .xyz-calc-width-height { font-size: 14px; } /***recommend box start**/ /**default zero start**/ div#xyz-calc-default-icon { max-width: 350px; margin: 100px 0px; } #xyz-calc-default-icon .zyz-calc-default-zero { text-align: center; margin-bottom: 30px; } #xyz-calc-default-icon .zyz-calc-default-zero .xyz-calc-product-image-increment-decrement { cursor: auto; position: relative; background: linear-gradient(0deg, rgba(245, 218, 63, 0.50) 0%, rgba(245, 218, 63, 0.50) 100%), #FFF; } #xyz-calc-default-icon .zyz-calc-default-zero .xyz-calc-product-image-increment-decrement .xyz-calc-itemsSelector { inset: 55px 0px 30px; } #xyz-calc-default-icon .zyz-calc-default-zero .xyz-calc-product-image-increment-decrement .xyz-calc-itemsSelector .xyz-calc-btns { visibility: visible; } #xyz-calc-default-icon .zyz-calc-default-zero .xyz-calc-product-image-increment-decrement .xyz-calc-itemsSelector .xyz-calc-btns.plus { background-color: black; color: white; } #xyz-calc-default-icon .zyz-calc-default-zero .xyz-calc-product-image-increment-decrement .xyz-calc-itemsSelector .xyz-calc-btns.minus:hover { background-color: #FFF; color: #000; } #xyz-calc-default-icon p { font-size: 16px; color: #54565A; width: 220px; margin: 0 auto; line-height: 20px; margin-top: 20px; } /**default zero end**/ .xyz-custom-item .xyz-modal { border: 0px; margin-top: 5px; background: #5ac4ba; padding: 0px !important; width: 400px !important; } .xyz-custom-item .xyz-modal .xyz-modal-body { background:#EED04F; padding-top: 25px; padding-bottom: 5px; } .xyz-custom-item .xyz-modal .xyz-modal-body input[type=text] { max-width: 250px; border: none; margin: 5px 0px; background: #FFF; text-align: left; border: 2px solid transparent; } .xyz-custom-item .xyz-modal .xyz-modal-body input[type=text]:focus { border: 2px solid #54565A; } .xyz-custom-item .xyz-modal .xyz-modal-body .error-box { border: 2px solid #E0581C !important; } .xyz-custom-item .xyz-modal .xyz-modal-footer { background: #EED04F; border-top: 0px; justify-content: center; padding-top: 0px; padding-bottom: 25px; border-radius: 0px 0px 5px 5px; } .xyz-custom-item .xyz-modal .xyz-modal-footer button.btn { border-radius: 4px; background: #55565A; width: 80%; color: #FFF; max-width: 250px; border: 2px solid #54565A; } .xyz-custom-item .xyz-modal .xyz-modal-footer button.btn:hover { background: #5ac4ba; color: #000; border: 2px solid #5ac4ba; } .xyz-custom-item .xyz-modal .xyz-modal-header { background: #f1f1f1; min-height: 100px; border-radius: 5px 5px 0px 0px; padding: 30px 0px; } .xyz-custom-item .xyz-modal .xyz-modal-title { margin: 0 auto; text-align: center; line-height: 44px; padding-left: 10px; } .xyz-custom-item-successful .xyz-modal .xyz-modal-title { margin: 20px auto; } .xyz-custom-item-successful .xyz-modal { width: 600px !important; } .xyz-custom-item-large .xyz-modal button.xyz-close { } .xyz-custom-item .xyz-modal span { display: block; color: #54565A; font-size: 24px; font-style: normal; font-weight: 400; } .xyz-custom-item .xyz-modal span.main-title { font-size: 40px; font-weight: 700; } .xyz-custom-item .xyz-modal button.xyz-close { background: url('/wp-content/plugins/arscode-ninja-popups/fancybox2/fancybox_sprite.png'); position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 18040 !important; } .xyz-custom-item .xyz-modal button.xyz-close span { color: #fff; font-size: 18px; } .xyz-custom-item .xyz-modal .xyz-modal-content { width: 370px; margin: 0 auto; } .xyz-custom-item-successful .xyz-modal .xyz-modal-body { padding: 40px 20px; border-radius: 0px 0px 5px 5px; } .xyz-custom-item-successful .xyz-modal .xyz-modal-header { border-radius: 5px 5px 0px 0px; padding: 0px; } ._btn-default { color: #54565A; font-size: 14px; font-weight: bold; text-decoration: none; padding: 10px 25px; cursor: pointer; background: white; border-radius: 4px; border: 2px solid #54565A; } .xyz-calc-frame-box .xyz-modal button._btn-default.yellow-bg { border: 0px; } .xyz-list-model button.xyz-close { background: url('/wp-content/plugins/arscode-ninja-popups/fancybox2/fancybox_sprite.png'); position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 18040 !important; } /***model***/ div#xyz-calc-location { margin-top: 35px; } #xyz-calc-location .xyz-calc-heading-color { margin-bottom: 10px; } #xyz-calc-location-area { display: flex; padding: 10px 20px; justify-content: center; align-items: center; margin-top: 20px; } #xyz-calc-location-area a { border-radius: 30px; background: #FFF; color: #54565A; font-size: 16px; padding: 10px 20px; margin: 0px 10px; text-decoration: none; font-weight: bold; outline: 0; } #xyz-calc-location-area a:hover { background: #F5D93F; } #xyz-calc-location-area a.active { background: #F5D93F; } .xyz-room-list-item { display: inline-flex !important; justify-content: center; align-items: center; width: auto !important; } .xyz-room-custom-btn { display: inline-flex !important; justify-content: center; align-items: center; width: auto !important; } .locations-slider-items { margin: 10px; display: inline-flex; align-items: center; justify-content: center; flex-basis: fit-content; } .locations-slider-items a { text-decoration: none; background: #f1f1f1; padding: 11px 25px; border-radius: 4px; display: flex; justify-content: center; font-weight: bold; } .locations-slider-items a:hover { background: #5AC4BA; color: #000; } .locations-slider-items a:focus { outline: none; } .locations-slider-items a.active { background: #5AC4BA; color: #000; } #xyzCalcSubCategoryContainer .vueperslides--rtl .vueperslides__arrows--outside .vueperslides__arrow--next, #xyzCalcSubCategoryContainer .vueperslides__arrows--outside .vueperslides__arrow--prev { left: -2.5em; } #xyzCalcSubCategoryContainer .vueperslides--rtl .vueperslides__arrows--outside .vueperslides__arrow--prev, #xyzCalcSubCategoryContainer .vueperslides__arrows--outside .vueperslides__arrow--next { right: -2.5em; } .xyz-location-slider .vueperslides__track-inner { justify-content: center; } #recommend-background .vueperslides--fixed-height.vueperslides--bullets-outside { margin-bottom: 30px !important; } /**banner responsive start***/ @media screen and (max-width: 1024px) { .home-calculate-section { background-position: center; } } @media screen and (max-width: 900px) { .xyz-location-slider .vueperslides__track-inner { justify-content: inherit !important; } } @media screen and (max-width: 800px) { .home-calculate-section.mobile-no-bgr { background-image: url('/wp-content/themes/custom-theme/xyz-storage-calculator/images/home_calculate_space_background.jpeg') !important; } } @media screen and (max-width: 767px) { .responsive-display-block { display: block !important; } } @media only screen and (max-width:1200px) { #xyz-calc-location-area a { font-size: 14px; } #xyzCalcRadioButtonsContainer { width: 85%; } .xyz-calc-radio-box-label { margin-right: 10px; } .vueperslides__arrow svg { width: 3em; } } @media only screen and (max-width:991px) { .xyz-banner { background-position: center left; padding: 20px 60px; } .empty--container { display: none; } .xyz-banner-content { max-width:100%; } .xyz-calc-radio-box-label { font-size: 14px !important; margin-right: 5px; font-weight: 600; } .vueperslides__arrow svg { width: 2.5em; } } @media only screen and (max-width:768px) { body .xyz-calc-nav .vueperslides__arrow--prev, body .vueperslides__arrows--outside .vueperslides__arrow--prev { left: 0; } body .xyz-calc-nav .vueperslides__arrow--next, body .vueperslides__arrows--outside .vueperslides__arrow--next { right: 0; } body .xyz-calc-nav .custom-arrow-right { right: -20px; } body .xyz-calc-nav .custom-arrow-left { right: auto; left: -20px; } body .xyz-calc-nav > .vueperslides .vueperslides__track-inner, body #xyz-calc-location > div > .vueperslides .vueperslides__track-inner { justify-content: flex-start !important; } body .xyz-calc-nav > .vueperslides, body #xyz-calc-location > div > .vueperslides { padding: 0 25%; } body .xyz-calc-nav > .vueperslides .vueperslides__inner, body #xyz-calc-location > div > .vueperslides .vueperslides__inner { position: static; } body .xyz-calc-nav > .vueperslides .vueperslides__parallax-wrapper, body .xyz-calc-nav > .vueperslides .vueperslides__track, body #xyz-calc-location > div > .vueperslides .vueperslides__parallax-wrapper, body #xyz-calc-location > div > .vueperslides .vueperslides__track { overflow: visible; } body .xyz-calc-nav #xyz-calc-cart-area { max-width: 100%; } body #xyz-calc-location .vueperslides__bullet { margin: 0 .6em; } .vueperslides--fixed-height.vueperslides--bullets-outside { padding: 0px; } /**new design start*/ .locations-slider-items a:hover { background: #f1f1f1; color: #54565a; } .locations-slider-items a.active { background: #5AC4BA; color: #000; } .locations-slider-items { width: 100% !important; } .xyz-calc-frame-box .display-flex { display: block; } div#custom-item { display: none; } div#xyz-calc-recommend-box { margin-top: 0px; } #xyz-calc-recommend-box .xyz-calc-recommend-text { width: 100%; } #xyzCalcRadioButtonsContainer, #xyz-calc-location-area { width: 100%; overflow: auto; white-space: nowrap; } .xyz-calc-heading-color { font-size: 20px; } /**new design end*/ #xyz-calc-location-area { display: block; height: 70px; } #xyz-calc-location-area a { padding: 10px 15px; font-size: 12px; } .xyz-calc-cart-list li span { font-size: 12px; } .xyz-calc-cart-list li img.xyz-calc-item { max-width: 35px; margin: 10px 2px 10px 0px; } .xyz-calc-cart-list .product-name-ellipsis { font-size: 12px; line-height: 12px; } .xyz-calc-cart-list .xyz-product-list-box { max-width: 175px; text-align: left; margin-left: 5px; } .mobile-view-products { height: 324px !important; } .box-section { display: flex; padding: 0px 20px; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; } .added-btn-sections { display: flex; } .xyz-modal-footer.added-btn-sections a { text-decoration: none; } #xyz-calc-cart-area { background: #FFF; max-width: 450px; margin-top: 20px; padding: 10px; } .btn-items-added { opacity: 0.6; color: #54565A; border: 2px solid #54565A; } .btn-items-added.active { opacity: 1 !important; } .xyz-custom-item-successful .xyz-modal span.main-title { font-size: 32px; } .xyz-custom-item-successful .xyz-modal span { font-size: 24px; } .xyz-room-products-grid { padding: 0px 15px; } .xyz-calc-radio-box-label { text-align: center; } .xyz-room-custom-btn.vueperslide--active .xyz-calc-radio-box-label, .xyz-room-list-item.vueperslide--active .xyz-calc-radio-box-label { background-color: #5AC4BA !important; color: #000 !important; } .xyz-calc-radio-box-text:checked+label, .xyz-calc-radio-box-label.checked, .xyz-calc-radio-box-label:hover { background-color: #F1F1F1; color: #54565A; } /**arrow css icon css start***/ .custom-arrow { width: 30px; /* Set the desired size */ height: 30px; cursor: pointer; background-size: cover; background-repeat: no-repeat; transition: transform 0.3s ease; /* box-shadow: -30px 0px 8px rgba(255, 255, 255, 0.5);*/ } .custom-arrow-left { background-image: url('/wp-content/themes/custom-theme/xyz-storage-calculator/images/icon/left_sign-button.svg'); position: absolute; top: -15px; right: 0; /* box-shadow: 30px 0px 8px rgba(255, 255, 255, 0.5)*/ } .custom-arrow-right { background-image: url('/wp-content/themes/custom-theme/xyz-storage-calculator/images/icon/right_sign-button.svg'); position: absolute; top: -15px; right: -20px; } .custom-arrow:hover { transform: scale(1.1); /* Optional hover effect */ } .locations-slider-items { display: inline-flex !important; white-space: nowrap; width: 100%; flex-basis: auto; margin: 0; } /**arrow css icon css end***/ } @media only screen and (max-width:600px) { .xyz-room-list-item { width: 100% !important; margin: 0 !important; } .xyz-calc-radio-box-label, .locations-slider-items a { width: 90%; padding: 10px !important; } .xyz-calc-radio-box-label { display: inline-block; margin: 0px; } } @media only screen and (max-width:575px) { .home-calculate-section.mobile-no-bgr { height: 660px; background-size: cover; background-image: url('/wp-content/themes/custom-theme/xyz-storage-calculator/images/home_calculate_mobile.jpeg') !important; } .calculator-section .row { display: block; } .calculator-section .col-6 { flex: 100%; padding: 10px; } .calculator-section .row.justify-center .col-12 { width: 100%; } .calculator-section { margin-top: 30px; } .xyz-banner { padding: 0px 30px; } #xyz-calc-cart-area { padding: 0px; padding-bottom: 20px; } .xyz-calc-cart-list li img.xyz-calc-item { max-width: 35px; margin: 10px 2px 10px 0px; padding: 10px 8px; } .xyz-calc-clear-btn { float: none; } .xyz-custom-item .xyz-modal .xyz-calc-radio-box-label { font-size: 10px !important; line-height: 14px; } .xyz-calc-cart-list li { height: 60px; padding: 10px 5px; } /***new design start**/ .xyz-calc-frame-box .xyz-modal { max-width: 320px; } .xyz-custom-item-large .xyz-modal button.xyz-close { } .xyz-calc-box-name { text-align: center; } div#recommend-background { padding-bottom: 0; } #xyz-calc-recommend-box { padding-top: 40px; } .top-heading { margin-bottom: 10px; } button.btn-add-custom { background: #F5D93F; padding: 12px 25px; border: 0px; } .xyz_mb_10 { margin-bottom: 15px !important; } .xyz-calc-box-name { padding: 0px; } .added-btn-sections { margin-top: 10px; } /***new design end**/ } @media only screen and (max-width:375px) { #xyz-calc-cart-area .xyz-calc-cart-list { margin-top: 10px; } .xyz-calc-cart-list .xyz-product-list-box { max-width: 150px; margin-left: 5px; text-align: left; } .xyz-list-model .xyz-calc-cart-list .product-name-ellipsis { font-size: 10px; } .xyz-calc-cart-list .product-name-ellipsis { line-height: 14px; } .xyz-calc-frame-box .xyz-modal { width: 100%; } .xyz-calc-btns { width: 20px; height: 20px; line-height: 20px !important; } } @media only screen and (max-width:325px) { .xyz-calc-cart-list .product-name-ellipsis, .xyz-product-list-box .xyz-calc-product-size { font-size: 10px; } .xyz-modal-body .xyz-calc-cart-list .product-name-ellipsis { font-size: 8px; } .xyz-modal-body .xyz-calc-cart-list .xyz-calc-btns { width: 15px; height: 15px; line-height: 15px !important; } .xyz-modal .xyz-calc-cart-list .xyz-product-list-box { max-width: 130px; } .xyz-calc-frame-box .xyz-modal { max-width: 280px; } } /**banner responsive end***/