') center / 1em auto no-repeat !important; border: 0; border-radius: .25rem; opacity: .5; } #sepet-items{ display: flex; flex-direction: column; gap: 15px; } .video-btn{ display: block; height: 50px; max-height: 64px; max-width: 250px; margin: 0 auto; margin-top: 20px; } .platform-platform{ display: none; } .btn-trash{ background: #ffe1eb; color: #f02467; font-size: 22px; padding: 10px; border-radius: 10px; } .btn-success{ background: #72dd47; color: #fff; font-size: 16px; padding: 10px 20px; margin-top: 20px !important; display: block; } .swal2-html-container{ overflow: hidden; } .cart.orsebtns .counter { background: white; color: black; font-size: 13px; width: 18px; display: block; line-height: 18px; text-align: center; border-radius: 50%; position: absolute; right: -7px; top: -9px; } .cart.orsebtns { background: rgba(var(--cl1)); color: #fff; padding: 3px 10px; border-radius: 30px; cursor: pointer; margin-left: 10px; box-shadow: 0 5px 25px rgba(var(--cl1), .3); position: relative; } .orActionBTND.anibut { color: #fff !important; background-color: rgba(var(--cl1)); display: inline-flex ; justify-content: space-between; align-items: center; width: 100%; font-size: 17px; font-weight: 600; text-transform: uppercase; border: none; border-radius: 12px; padding: 17px 25px; padding-bottom: 16px; box-shadow: 0 5px 25px rgba(var(--cl1), .4); } .orActionBTNn.anibut { color: #fff !important; background-color: rgba(var(--cl1)); display: inline-flex ; justify-content: space-between; align-items: center; width: 100%; font-size: 17px; font-weight: 600; text-transform: uppercase; border: none; border-radius: 12px; padding: 17px 25px; padding-bottom: 16px; box-shadow: 0 5px 25px rgba(var(--cl1), .4); } .cart.orsebtnss { background: #f02467; color: #fff; padding: 3px 14px; border-radius: 8px; cursor: pointer; margin-left: 0px; box-shadow: 0 5px 25px rgba(var(--cl1), .3); position: relative; line-height: 36px; } .cart.orsebtnss .counter { background: white; color: black; font-size: 13px; width: 20px; display: block; line-height: 20px; text-align: center; border-radius: 50%; position: absolute; right: -7px; top: -9px; border: 1px solid #00000021; height: 20px; } .cart-item:last-child{ border: none; } .cart-price{ display: flex; align-items: center; justify-content: flex-end; flex-direction: row; } .cart-price .price{ background: #dfe1eb; padding: 10px; border-radius: 18px; display: inline-block; margin-right: 10px; } .cart-item .cart-quantity, .cart-item .cart-price{ } .cart-item .cart-link{ width: 30%; max-width: 30%; } .cart-item .cart-name .subname{ display: block; font-weight: bold; color: #4c5474; } .cart-item .cart-name{ width: 60%; } #sepet-items p { color: black !important; text-align: center; margin: 25px 0; } .cart-name .name{ display: block; color: #f02467; font-weight: bold; } .PaymentMethod li .top span { font-size: 18px; font-weight: 700; color: var(--main-text); } .PaymentMethod li.selected .default{ display: none; } .PaymentMethod li.selected .selected{ display: block; } .PaymentMethod li .selected{ display: none; } .PaymentMethod ul{ display: flex; gap: 10px; flex-direction: column; } .PaymentMethod li { display: flex ; flex-direction: column; align-items: flex-start; justify-content: initial; background: #fcfdff; border: 1px solid #e4e8ef; border-radius: 12px; width: 100%; cursor: pointer; user-select: none; padding: 12px 20px; gap: 3px; } .PaymentMethod li.selected { border-color: var(--main-color); background: #ff932405; } .paymentDetail{ margin-top: 10px; text-align: center; border: 1px solid #e4e8ef; border-radius: 10px; padding: 10px; } .cart-item{ color: black; padding: 20px; display: flex; justify-content: space-between; align-items: center; background: white; border-radius: 15px; font-size: 16px; } .platform-platform .catpi--list .catpi-item.active { background: #ffd7e4; } .item_tabs { position: relative; overflow: auto; margin-bottom: 20px; } .item_tabs .tab-items { padding: 5px; background: #f024679c; border-radius: 15px; border: 1px solid #ffffff20; overflow: auto; } .item_tabs .tab-items .tab-item-scroll { display: flex; min-width: fit-content; align-items: center; gap: 5px; } .item_tabs .tab-items::-webkit-scrollbar { display: none; } .item_tabs .tab-items { -ms-overflow-style: none; scrollbar-width: none; } .item_tabs .tab-items .tab-item { height: 44px; padding: 0 15px; display: flex; align-items: center; justify-content: center; border-radius: 15px; color: #ffffffd6; cursor: pointer; transition: 0.2s; flex: 0 0 auto; } .item_tabs .tab-items .tab-item.active a, .item_tabs .tab-items .tab-item.active { background: #f02467; color: white !important; font-weight: 500; } .item_tabs .tab-items .tab-item:hover:before { opacity: 0.1; } .item_tabs .tab-items .tab-item:hover { color: var(--white); } .service--bases { height: fit-content; width: 100%; display: grid ; } .pl-list-area { margin-top: 15px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .pl-list-area.category { grid-template-columns: repeat(3, 1fr); } .pl-list-area .pl-item { display: flex; align-items: center; background: var(--dark-wcolor, var(--white)); border-radius: 18px; padding: 6px; gap: 15px; transition: 0.2s; } .pl-list-area .pl-item .icon { min-width: 80px; width: 80px; min-height: 100px; border-radius: 12px; background: var(--p, var(--main-color)); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--white); position: relative; z-index: 1; } .pl-list-area .pl-item .icon::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 25px; background: url(../image/path-4.webp); background-size: 112px; opacity: 0.1; z-index: -1; } .pl-list-area .pl-item span.service-name { color: var(--dark-white, var(--dark-text)); font-weight: bold; font-size: 18px; transition: 0.2s; } .pl-list-area .pl-item span.service-name > span { display: block; font-size: 16px; font-weight: 400; color: var(--dark-soft-text, var(--soft-text)); } .pl-list-area .pl-item .detail span.count { display: flex; align-items: center; justify-content: center; width: fit-content; margin-top: 8px; font-size: 14px; color: var(--dark-white, var(--soft-text)); font-weight: 400; position: relative; padding-top: 8px; z-index: 1; } .pl-list-area .pl-item .detail span.count::before { content: ""; position: absolute; left: 0; top: 0; min-width: 120px; height: 1px; background: linear-gradient(to right, var(--dark-white, var(--soft-text)), transparent); z-index: -1; opacity: 0.3; } .pl-list-area .pl-item .action { display: flex; align-items: center; justify-content: center; width: 64px; margin-right: 20px; margin-left: auto; height: 44px; background: var(--dark-loft-color, var(--bg)); border-radius: 10px; color: var(--dark-white, var(--soft-text)); font-size: 18px; transition: 0.2s; } .pl-list-area .pl-item:hover .action { margin-right: 30px; background: var(--p); color: var(--white); } .pl-list-area .pl-item:hover span.service-name { color: var(--p); } @media (max-width: 780px) { .cart-item .btn-danger{ position: absolute; right: 0; top: 38%; } .cart-item { color: black; padding: 10px; display: flex; flex-wrap: wrap; flex-direction: row; align-content: flex-start; position: relative; } .cart.orsebtnss { margin-top: 0; width: auto; text-align: center; padding: 0 10px; } .platform-platform{ display: block; } .platform-platform .catpi--list .catpi-item{ min-width: initial; } .platform-platform .catpi--list .catpi-item .icon{ display:none; } .platform-platform .catpi--list { display: flex; grid-template-columns: repeat(4, 1fr); overflow: auto; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } .platList .item .icon i{ font-size: 16px; } .platList .item .icon::before{ content: " "; border: 6px solid #c6cbef; width: 45px; position: absolute; z-index: 1; height: 45px; border-radius: 50%; } .platList .item .icon::after{ content: " "; border: 6px solid #ebedf7; width: 56px; position: absolute; z-index: 1; height: 56px; border-radius: 50%; } .platList .item .icon{ width: 45px; height: 45px; margin: 0; position: relative; } .platList .item .action .titles{ display: none; } .platList .item{ flex-direction: row; display: flex; align-content: center; align-items: center; justify-content: space-between; padding: 20px; gap:10px } .platList .item .detail h2{ font-size: 18px; } .platList .item .detail p{ display: none; } .platList .action .platActiBut{ min-width: 40px; padding: 10px 15px; } } .modal { position: fixed; top: 0; left: 0; z-index: 1055; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; } .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); } .modal.show .modal-dialog { transform: none; } .modal.modal-static .modal-dialog { transform: scale(1.02); } .modal-dialog-scrollable { height: calc(100% - 1rem); } .modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.375rem; outline: 0; } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1050; width: 100vw; height: 100vh; background-color: #000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: 0.5; } .modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: calc(0.375rem - 1px); border-top-right-radius: calc(0.375rem - 1px); } .modal-header .btn-close { padding: 0.5rem 0.5rem; margin: -0.5rem -0.5rem -0.5rem auto; } .modal-title { margin-bottom: 0; line-height: 1.5; } .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; } .modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; padding: 0.75rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: calc(0.375rem - 1px); border-bottom-left-radius: calc(0.375rem - 1px); } .modal-footer > * { margin: 0.25rem; }