/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/SearchForm.vue?vue&type=style&index=0&id=51efc6bc&lang=scss ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .d-flex { display: flex !important; align-items: center; } .filter-container input { padding: 2px; } .number-input input { width: 75px; } .form .p-dropdown-label { width: 150px !important; } .form .p-dropdown-label-empty { width: 80px !important; } .form .p-multiselect.p-inputwrapper, .form .p-dropdown { border-radius: 6px !important; justify-content: space-between !important; padding: 8px !important; width: 300px !important; height: 36px !important; } .form .p-placeholder, .form .p-multiselect-label { font-weight: 500; font-size: 16px !important; line-height: 19.2px !important; color: #757575 !important; } .form .p-inputswitch.p-focus .p-inputswitch-slider { box-shadow: unset !important; } .form input::-moz-placeholder { font-weight: 500; font-size: 16px !important; line-height: 19.2px !important; color: #757575 !important; } .form input::placeholder { font-weight: 500; font-size: 16px !important; line-height: 19.2px !important; color: #757575 !important; } .custom-header { display: flex !important; } .custom-header .p-checkbox-box, .custom-header input { box-shadow: unset !important; } .custom-header input { padding: 5px !important; } /*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/SearchForm.vue?vue&type=style&index=1&id=51efc6bc&scoped=true&lang=scss ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .form[data-v-51efc6bc] { position: relative; width: 100%; height: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-top: 30px; row-gap: 20px; } .form .form__item[data-v-51efc6bc] { flex-direction: column; width: 300px; height: auto; display: flex; gap: 12px; } .form .form__item .p-invalid[data-v-51efc6bc] { color: #e24c4c; } .form .form__item label[data-v-51efc6bc] { font-size: 16px; font-weight: 400; min-width: 110px; --tw-text-opacity: 1; color: rgb(117 117 117 / var(--tw-text-opacity)); } .form .form__item label span[data-v-51efc6bc] { --tw-text-opacity: 1; color: rgb(236 46 46 / var(--tw-text-opacity)); } .form .form__item .item__content[data-v-51efc6bc] { width: 100%; height: auto; display: flex; justify-content: flex-start; align-items: flex-start; -moz-column-gap: 16px; column-gap: 16px; row-gap: 16px; } .form .form__item .item__text[data-v-51efc6bc] { --tw-text-opacity: 1; color: rgb(117 117 117 / var(--tw-text-opacity)); font-size: 16px; } .form .form__item .item__btns[data-v-51efc6bc] { width: 100%; height: auto; display: flex; justify-content: flex-start; align-items: center; -moz-column-gap: 8px; column-gap: 8px; } .form .find-button[data-v-51efc6bc] { background: linear-gradient(to bottom, rgb(67, 160, 71) 0%, rgb(56, 142, 60) 100%); cursor: pointer; font-family: "Lato"; padding: 20px 0 22px !important; color: #ffffff; font-size: 20px; font-weight: bold; border: 0; border-radius: 0; z-index: 1; position: relative; } .form .find-button[data-v-51efc6bc]:hover { background: #388E3C; } .formTitle[data-v-51efc6bc] { font-weight: 400; font-size: 32px; line-height: 38.4px; color: #333333; } .filter-group[data-v-51efc6bc] { display: flex; gap: 40px; } /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/entities/complexItem.vue?vue&type=style&index=0&id=9ce4d924&lang=css ***! \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .p-button:focus { box-shadow: unset !important; } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/entities/complexItem.vue?vue&type=style&index=1&id=9ce4d924&scoped=true&lang=scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .complexItem[data-v-9ce4d924] { width: 100%; height: 353px; display: grid; grid-template-columns: 20.8333333333vw 1fr; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); overflow: hidden; } .complexItem .no-image[data-v-9ce4d924] { height: 353px; } .complexItem .no-image svg[data-v-9ce4d924] { top: 60px; left: 50%; margin-left: -65px; position: relative; } .complexItem .complexItem__title[data-v-9ce4d924] { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .complexItem.medium[data-v-9ce4d924] { width: 100%; height: auto; grid-template-columns: 1fr; border-radius: 5px; overflow: hidden; } .complexItem.medium .complexItem__content[data-v-9ce4d924] { grid-template-columns: 1fr; padding: 16px; } .complexItem.medium .complexItem__head[data-v-9ce4d924] { flex-direction: column; padding: 0; border-bottom: 1px solid; --tw-border-opacity: 1; border-color: rgb(242 242 242 / var(--tw-border-opacity)); padding-bottom: 16px; } .complexItem.medium .complexItem__nav[data-v-9ce4d924] { width: 100%; margin-left: 0; margin-bottom: 20px; } .complexItem.medium .complexItem__btnMenu[data-v-9ce4d924] { margin-left: auto; } .complexItem.medium .complexItem__title[data-v-9ce4d924] { font-size: 18px; } .complexItem.medium .complexItem__location[data-v-9ce4d924] { width: 100%; padding: 16px 0; } .complexItem.medium .complexItem__change[data-v-9ce4d924] { grid-column: 1; grid-row: 3; border-left: 0; padding: 16px 0; max-height: 130px; overflow: auto; } .complexItem.medium .complexItem__advertisement[data-v-9ce4d924] { grid-row: 4; grid-column: 1; padding: 16px 0; } .complexItem.medium .complexItem__counts[data-v-9ce4d924] { grid-row: 5; grid-column: 1; padding: 16px 0 0 0; } .complexItem.medium .complexItem__counts strong[data-v-9ce4d924] { text-decoration: underline; } .complexItem__image[data-v-9ce4d924] { width: 100%; height: 100%; } .complexItem__image img[data-v-9ce4d924] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; height: 343px; } .complexItem .no-image[data-v-9ce4d924] { height: 343px; } .complexItem .no-image svg[data-v-9ce4d924] { top: 60px; left: 50%; margin-left: -65px; position: relative; } .complexItem__content[data-v-9ce4d924] { display: grid; grid-template-columns: 1fr 0.8fr; } .complexItem__head[data-v-9ce4d924] { width: 100%; height: auto; grid-row: 1; grid-column: span 2; display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: flex-start; padding: 30px; border-bottom: 1px solid; --tw-border-opacity: 1; border-color: rgb(242 242 242 / var(--tw-border-opacity)); } .complexItem__title[data-v-9ce4d924] { width: -moz-max-content; width: max-content; position: relative; font-size: 27px; line-height: 100%; } .complexItem__title[data-v-9ce4d924]::before { width: 100%; height: 1px; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); content: ""; position: absolute; left: 0; bottom: -2px; right: 0; } .complexItem__nav[data-v-9ce4d924] { width: auto; height: auto; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 15px; margin-left: auto; } .complexItem__develop[data-v-9ce4d924] { --tw-text-opacity: 1; color: rgb(117 117 117 / var(--tw-text-opacity)); font-size: 15px; line-height: 100%; margin-right: 30px; } .complexItem__btnMenu[data-v-9ce4d924] { width: -moz-max-content; width: max-content; height: -moz-max-content; height: max-content; } .complexItem__btnMenu svg[data-v-9ce4d924] { width: 18px; height: 18px; } .complexItem__location[data-v-9ce4d924] { grid-row: 2; grid-column: 1; width: 100%; padding: 20px 30px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-bottom: 1px solid; --tw-border-opacity: 1; border-color: rgb(242 242 242 / var(--tw-border-opacity)); } .complexItem__metro[data-v-9ce4d924] { width: 100%; height: auto; display: flex; justify-content: flex-start; align-items: center; -moz-column-gap: 10px; column-gap: 10px; } .complexItem__metro .time[data-v-9ce4d924] { --tw-text-opacity: 1; color: rgb(117 117 117 / var(--tw-text-opacity)); font-size: 14px; } .complexItem__change[data-v-9ce4d924] { width: 100%; grid-row: 2; grid-column: 2; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border-left: 1px solid; border-bottom: 1px solid; --tw-border-opacity: 1; border-color: rgb(242 242 242 / var(--tw-border-opacity)); padding: 20px 30px; font-size: 15px; max-height: 130px; overflow: auto; } .complexItem__advertisement[data-v-9ce4d924] { width: 100%; grid-row: 3; grid-column: 1; padding: 18px 30px; display: flex; justify-content: flex-start; align-items: center; } .complexItem__advertisementLink[data-v-9ce4d924] { border-radius: 3px; border: 1px solid; --tw-border-opacity: 1; border-color: rgb(76 175 80 / var(--tw-border-opacity)); background: var(--linear, linear-gradient(180deg, #fefefe 0%, #f6f6f6 100%)); padding: 8px 12px; --tw-text-opacity: 1; color: rgb(76 175 80 / var(--tw-text-opacity)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .complexItem__advertisementLink[data-v-9ce4d924]:hover { background: transparent; --tw-bg-opacity: 1; background-color: rgb(76 175 80 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .complexItem__counts[data-v-9ce4d924] { grid-row: 3; grid-column: 2; padding: 18px 30px; display: flex; justify-content: flex-start; align-items: center; -moz-column-gap: 10px; column-gap: 10px; border-left: 1px solid; --tw-border-opacity: 1; border-color: rgb(242 242 242 / var(--tw-border-opacity)); } .complexItem__counts a[data-v-9ce4d924] { padding: 8px 20px; border-radius: 3px; border: 1px solid #dedede; background: var(--linear, linear-gradient(180deg, #fefefe 0%, #f6f6f6 100%)); } .complexItem__metroList[data-v-9ce4d924] { max-height: 50px; overflow: auto; width: 100%; } @media screen and (max-width: 2000px) { .complexItem[data-v-9ce4d924] { width: 100%; height: 300px; display: grid; grid-template-columns: 20.8333333333vw 1fr; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .complexItem__image[data-v-9ce4d924] { width: 100%; height: 100%; } .complexItem__image img[data-v-9ce4d924] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; height: 300px; } .complexItem .no-image[data-v-9ce4d924] { height: 300px; } .complexItem .no-image svg[data-v-9ce4d924] { top: 60px; left: 50%; margin-left: -65px; position: relative; } } @media screen and (max-width: 1900px) { .complexItem[data-v-9ce4d924] { width: 100%; height: 270px; display: grid; grid-template-columns: 20.8333333333vw 1fr; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .complexItem__image[data-v-9ce4d924] { width: 100%; height: 100%; } .complexItem__image img[data-v-9ce4d924] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; height: 270px; } .complexItem .no-image[data-v-9ce4d924] { height: 270px; } .complexItem .no-image svg[data-v-9ce4d924] { top: 60px; left: 50%; margin-left: -65px; position: relative; } } .complexItem .complexItem__btnMenu[data-v-9ce4d924] { box-shadow: unset !important; } .complexItem .complexItem__btnMenu svg[data-v-9ce4d924] { width: 18px !important; } @media screen and (max-width: 1600px) { .complexItem[data-v-9ce4d924] { width: 100%; height: 250px; display: grid; grid-template-columns: 20.8333333333vw 1fr; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .complexItem.medium[data-v-9ce4d924] { width: 100%; height: auto; grid-template-columns: 1fr; border-radius: 5px; overflow: hidden; /*.complexItem__image { height: 280px; }*/ } .complexItem.medium .complexItem__content[data-v-9ce4d924] { grid-template-columns: 1fr; padding: 16px; } .complexItem.medium .complexItem__head[data-v-9ce4d924] { flex-direction: column; padding: 0; border-bottom: 1px solid; --tw-border-opacity: 1; border-color: rgb(242 242 242 / var(--tw-border-opacity)); padding-bottom: 16px; } .complexItem.medium .complexItem__nav[data-v-9ce4d924] { width: 100%; margin-left: 0; margin-bottom: 20px; } .complexItem.medium .complexItem__btnMenu[data-v-9ce4d924] { margin-left: auto; } .complexItem.medium .complexItem__title[data-v-9ce4d924] { font-size: 18px; } .complexItem.medium .complexItem__location[data-v-9ce4d924] { width: 100%; padding: 16px 0; } .complexItem.medium .complexItem__change[data-v-9ce4d924] { border-left: 0; padding: 16px 0; max-height: 130px; overflow: auto; } .complexItem.medium .complexItem__advertisement[data-v-9ce4d924] { padding: 16px 0; } .complexItem.medium .complexItem__counts[data-v-9ce4d924] { padding: 16px 0 0 0; } .complexItem__image[data-v-9ce4d924] { width: 100%; height: 100%; } .complexItem__image img[data-v-9ce4d924] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; height: 250px; } .complexItem .no-image[data-v-9ce4d924] { height: 250px; } .complexItem .no-image svg[data-v-9ce4d924] { top: 60px; left: 50%; margin-left: -65px; position: relative; } .complexItem__content[data-v-9ce4d924] { display: grid; grid-template-columns: 1fr 0.8fr; } .complexItem__head[data-v-9ce4d924] { padding: 26px; border-bottom: 1px solid; --tw-border-opacity: 1; border-color: rgb(242 242 242 / var(--tw-border-opacity)); } .complexItem__title[data-v-9ce4d924] { font-size: 24px; } .complexItem__nav[data-v-9ce4d924] { margin-bottom: 0px; } .complexItem__develop[data-v-9ce4d924] { font-size: 14px; } .complexItem__location[data-v-9ce4d924] { padding: 16px 25px; } .complexItem__metro[data-v-9ce4d924] { -moz-column-gap: 8px; column-gap: 8px; margin-bottom: 0; flex-wrap: wrap; flex-direction: row; align-items: flex-start; } .complexItem__change[data-v-9ce4d924] { padding: 16px 25px; font-size: 14px; } .complexItem__advertisement[data-v-9ce4d924] { padding: 16px 25px; } .complexItem__advertisementLink[data-v-9ce4d924] { padding: 6px 10px; font-size: 14px; } .complexItem__counts[data-v-9ce4d924] { -moz-column-gap: 8px; column-gap: 8px; } .complexItem__counts a[data-v-9ce4d924] { padding: 8px 18px; font-size: 15px; } } .complexItem__content[data-v-9ce4d924] { width: 100%; } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/RouterHistory.vue?vue&type=style&index=0&id=79b150ea&lang=css ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .navigation { width: 100%; gap: 20px; padding-bottom: 10px; top: 20px; z-index: 11; height: 56px; } .nav-button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } .back { border: 1px solid; color: rgb(236 46 46 / 1); border-color: rgb(198, 132, 132); } .back:hover { color: white; background-color: #d32f2f; } .next { background-color: #4caf50; color: white; } .next:hover { background-color: #388e3c; } /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/widgets/ListItems.vue?vue&type=style&index=0&id=08349a8e&scoped=true&lang=scss ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .listItems[data-v-08349a8e] { width: 100%; height: -moz-max-content; height: max-content; display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; --tw-bg-opacity: 1; background-color: rgb(245 245 245 / var(--tw-bg-opacity)); overflow-y: none; overflow-x: hidden; } .listItems.listItems--tile[data-v-08349a8e] { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 28px; } .listItems .p-paginator-bottom[data-v-08349a8e] { border: none !important; } .listItems .p-paginator[data-v-08349a8e] { display: flex; /*justify-content: flex-end;*/ align-items: center; -moz-column-gap: 10px; column-gap: 10px; padding: 0; padding-top: 10px; padding-bottom: 10px; } .listItems .p-paginator .p-dropdown[data-v-08349a8e] { height: 37px; } .listItems .p-paginator .p-paginator-page-input .p-inputtext[data-v-08349a8e] { max-width: 4rem; } .listItems .p-paginator-first[data-v-08349a8e], .listItems .p-paginator-prev[data-v-08349a8e], .listItems .p-paginator-next[data-v-08349a8e], .listItems .p-paginator-last[data-v-08349a8e] { width: 37px !important; height: 37px !important; padding: 10px !important; display: flex !important; justify-content: center !important; align-items: center !important; border-radius: 3px !important; border: 1px solid #dedede !important; margin: 0 !important; min-width: 0 !important; } .listItems .p-paginator-first svg[data-v-08349a8e], .listItems .p-paginator-prev svg[data-v-08349a8e], .listItems .p-paginator-next svg[data-v-08349a8e], .listItems .p-paginator-last svg[data-v-08349a8e] { width: 16px; height: 16px; } .listItems .p-paginator-prev[data-v-08349a8e] { margin-right: 10px; } .listItems .p-paginator-next[data-v-08349a8e] { margin-left: 10px; } .listItems .p-paginator-pages[data-v-08349a8e] { display: flex; justify-content: flex-start; align-items: center; } .listItems .p-paginator-pages .p-paginator-page[data-v-08349a8e] { height: auto !important; min-height: 37px !important; min-width: 37px !important; padding: 10px !important; border-radius: 3px !important; border: 1px solid #dedede !important; box-shadow: none !important; } .listItems .p-paginator-pages .p-paginator-page.p-highlight[data-v-08349a8e] { background: #4caf50 !important; color: #ffffff !important; } @media screen and (max-width: 1600px) { .listItems.listItems--tile[data-v-08349a8e] { grid-template-columns: repeat(3, 1fr); } } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/widgets/ListItems.vue?vue&type=style&index=1&id=08349a8e&lang=css ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/ .wrapper { width: 100%; } .wrapper .p-panel.p-panel-toggleable .p-panel-header { justify-content: center; border-radius: unset; padding: 12px 35px 15px; margin: 0; text-align: center; font-size: 15px; color: #757575; background: -webkit-linear-gradient(top, #f8f8f8, #fff); border-bottom: 1px solid #dedede; } .wrapper .p-panel.p-panel-toggleable .p-panel-header button { cursor: pointer; font-size: 15px; display: flex; gap: 5px; } .wrapper .p-panel.p-component.p-panel-toggleable { margin-bottom: 15px; } .wrapper .p-panel .p-panel-header .p-panel-header-icon { width: unset; height: unset; border-radius: unset; } .wrapper .p-panel-header-icon > svg { transition: 0.2s ease-in-out; } .wrapper .p-panel-header-icon[aria-expanded="true"] > svg { rotate: 180deg; } .wrapper .p-panel.p-panel-toggleable .p-panel-header button:hover { color: #6c757d; border: 0 none; background: transparent; } .p-panel .p-panel-header .p-panel-header-icon:focus { box-shadow: unset !important; } .p-submenu-header { display: none !important; } .p-dialog-header-icons button{ box-shadow: unset !important; } .p-paginator.p-component { background: unset; } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/ComplexesView.vue?vue&type=style&index=0&id=1f373faf&lang=scss ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ .loader-div { margin-left: 45%; margin-right: 50%; margin-top: 15%; } .loader-div img { width: 150px; max-width: none; }