.modal-backdrop.show { opacity: .8; } @media (min-width: 992px) { #cardProduct .modal-dialog { width: auto; max-width: 800px; } } .kb-modal-wrapper { border: none; border-radius: 0; max-width: 730px; margin: 0 auto; padding: 1em 0; box-shadow: 0px 4px 12px #3e3e3e; } .kb-modal-wrapper .btn-close { width: 24px; height: 24px; opacity: 1; transform: rotate(45deg); font-size: 0; position: absolute; top: 23px; right: 22px; } .kb-modal-wrapper .btn-close:before, .kb-modal-wrapper .btn-close:after { content: ''; position: absolute; left: 50%; top: 50%; background: #8e8f90; } .kb-modal-wrapper .btn-close:before { width: 2px; height: 24px; margin-left: -1px; margin-top: -12px; } .kb-modal-wrapper .btn-close:after { width: 24px; height: 2px; margin-left: -12px; margin-top: -1px; } .kb-modal-wrapper .card-content { margin-top: 3.8em; } .kb-modal-wrapper .product-image { margin: 5px 20px; } .kb-modal-wrapper .product-image img { max-width: 250px; display: block; pointer-events: none; margin: 0 auto 2em; } .kb-modal-wrapper .product-code { color: #8e8f90; font-size: 13px; } .kb-modal-wrapper .product-title { font-size: 18px; font-weight: bold; line-height: 1.4em; margin: 0.4em 0; } .kb-modal-wrapper .product-code, .kb-modal-wrapper .product-title { max-width: 350px; } .kb-modal-wrapper .product-body { font-size: 15px; line-height: 1.4em; padding: 2px 0px; } .btn.big-yellow { width: 100%; font-size: 13px; font-weight: bold; background-color: #ffd800; text-transform: uppercase; padding: 1em; padding-top: calc(1em + 1px); margin: 1em 0; border-radius: 0; } .btn.big-yellow:hover, .btn.big-yellow:active { background-color: #ffe764; box-shadow: inset 0px 0px 0px 2px black, 0px 0px 20px rgba(0, 0, 0, 0.2) !important; transition: 0.3s; } .btn.big-yellow:active { box-shadow: inset 0px 0px 0px 2px black, 0px 0px 30px rgba(0, 0, 0, 0.2) !important; transform: scale(.95); } .kb-modal-wrapper .modal-form { padding-top: 5px; } .kb-modal-wrapper .modal-form .product-counter { border-bottom: 1px solid #ebebeb; padding-bottom: 1em; margin-bottom: 1em; } .kb-modal-wrapper .modal-form label { width: 100%; } .kb-modal-wrapper .modal-form__inner .kb-input { padding-top: 6px; padding-bottom: 20px; } .kb-modal-wrapper .kb-input .label-title { font-size: 15px; margin: 5px 0; } .kb-modal-wrapper .kb-input input { width: 100%; display: block; border: 1px solid #c1c3c7; padding: 0.5em; box-shadow: inset 2px 2px 4px rgb(190 190 190 / 50%); } .kb-modal-wrapper .modal-right { max-width: 450px; margin: 0 0 0 30px; } .kb-modal-wrapper .modal-form__inner { max-width: 255px; } .kb-modal-wrapper .modal-form__inner .submit-button-wr { margin-top: -1px; margin-bottom: 1px; } .kb-modal-wrapper::after { content: ''; position: absolute; width: 100%; bottom: 0; left: 0; height: 2px; background: rgb(30, 178, 105); background: linear-gradient(270deg, rgba(30, 178, 105, 1) 0%, rgba(0, 150, 215, 1) 100%); } .product-counter__label { color: #8e8f90; font-size: 13px; } .product-counter__value { font-size: 15px; font-weight: bold; color: #0096d6; margin-left: 20px; } .product-counter, .product-counter > * { display: flex; align-items: center; flex-wrap: wrap; margin: 8px 0; } .big-container { width: 100% !important; } @media (min-width: 1400px) { .big-container { max-width: 1320px !important; } } .product-counter .kb-input input::-webkit-outer-spin-button, .product-counter .kb-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .product-counter .kb-input input { -moz-appearance: textfield; text-align: center; width: 42px; } .product-counter__actions { display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin-left: 6px; } .product-counter__input { display: flex; margin: 0 12px; } .product-counter__actions > * { display: block; width: 18px; height: 18px; border: none; background-color: #f6f6f6; color: transparent; background-position: center; background-repeat: no-repeat; cursor: pointer; } .product-counter__actions .product-counter__increment { background-image: url("data:image/svg+xml,%3Csvg id='plus' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23f6f6f6;%7D.cls-2%7Bfill:%238e8f90;%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='18' height='18'/%3E%3Crect class='cls-2' x='8' y='4' width='2' height='10'/%3E%3Crect class='cls-2' x='4' y='8' width='10' height='2'/%3E%3C/svg%3E"); } .product-counter__actions .product-counter__decrement { background-image: url("data:image/svg+xml,%3Csvg id='minus' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%238e8f90;%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='4' y='8' width='10' height='2'/%3E%3C/svg%3E"); } .product-counter__actions > *:active { opacity: .5; transition: .2s; } @media (max-width: 991px) { .kb-modal-wrapper .modal-left, .kb-modal-wrapper .modal-right { width: 100%; } .kb-modal-wrapper .modal-right { margin: 0em 0.5em; } .kb-modal-wrapper .modal-form__inner { max-width: 100%; } .product-counter__input { flex: 1; } }