.form-label { margin-bottom: 0.5rem;} .col-form-label { padding-top: calc(0.375rem + var(--bs-border-width));padding-bottom: calc(0.375rem + var(--bs-border-width));margin-bottom: 0;font-size: inherit;line-height: 1.5;} .col-form-label-lg { padding-top: calc(0.5rem + var(--bs-border-width));padding-bottom: calc(0.5rem + var(--bs-border-width));font-size: 1.25rem;} .col-form-label-sm { padding-top: calc(0.25rem + var(--bs-border-width));padding-bottom: calc(0.25rem + var(--bs-border-width));font-size: 0.875rem;} .form-control { display: block;width: 100%;padding: 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: var(--bs-body-color);appearance: none;background-color: var(--bs-body-bg);background-clip: padding-box;border: var(--bs-border-width) solid var(--bs-border-color);border-radius: var(--bs-border-radius);transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;} @media (prefers-reduced-motion: reduce) { .form-control { transition: none;} } .form-control[type=file] { overflow: hidden;} .form-control[type=file]:not(:disabled):not([readonly]) { cursor: pointer;} .form-control:focus { color: var(--bs-body-color);background-color: var(--bs-body-bg);border-color: rgb(134, 182.5, 254);outline: 0;box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);} .form-control::-webkit-date-and-time-value { min-width: 85px;height: 1.5em;margin: 0;} .form-control::-webkit-datetime-edit { display: block;padding: 0;} .form-control::placeholder { color: var(--bs-secondary-color);opacity: 1;} .form-control:disabled { background-color: var(--bs-secondary-bg);opacity: 1;} .form-control::file-selector-button { padding: 0.375rem 0.75rem;margin: -0.375rem -0.75rem;margin-inline-end: 0.75rem;color: var(--bs-body-color);background-color: var(--bs-tertiary-bg);pointer-events: none;border-color: inherit;border-style: solid;border-width: 0;border-inline-end-width: var(--bs-border-width);border-radius: 0;transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;} @media (prefers-reduced-motion: reduce) { .form-control::file-selector-button { transition: none;} } .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--bs-secondary-bg);} .form-control-plaintext { display: block;width: 100%;padding: 0.375rem 0;margin-bottom: 0;line-height: 1.5;color: var(--bs-body-color);background-color: transparent;border: solid transparent;border-width: var(--bs-border-width) 0;} .form-control-plaintext:focus { outline: 0;} .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg { padding-right: 0;padding-left: 0;} .form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));padding: 0.25rem 0.5rem;font-size: 0.875rem;border-radius: var(--bs-border-radius-sm);} .form-control-sm::file-selector-button { padding: 0.25rem 0.5rem;margin: -0.25rem -0.5rem;margin-inline-end: 0.5rem;} .form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));padding: 0.5rem 1rem;font-size: 1.25rem;border-radius: var(--bs-border-radius-lg);} .form-control-lg::file-selector-button { padding: 0.5rem 1rem;margin: -0.5rem -1rem;margin-inline-end: 1rem;} textarea.form-control { min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));} textarea.form-control-sm { min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));} textarea.form-control-lg { min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));} .form-control-color { width: 3rem;height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));padding: 0.375rem;} .form-control-color:not(:disabled):not([readonly]) { cursor: pointer;} .form-control-color::-moz-color-swatch { border: 0 !important;border-radius: var(--bs-border-radius);} .form-control-color::-webkit-color-swatch { border: 0 !important;border-radius: var(--bs-border-radius);} .form-control-color.form-control-sm { height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));} .form-control-color.form-control-lg { height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));} .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");display: block;width: 100%;padding: 0.375rem 2.25rem 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: var(--bs-body-color);appearance: none;background-color: var(--bs-body-bg);background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 16px 12px;border: var(--bs-border-width) solid var(--bs-border-color);border-radius: var(--bs-border-radius);transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;} @media (prefers-reduced-motion: reduce) { .form-select { transition: none;} } .form-select:focus { border-color: rgb(134, 182.5, 254);outline: 0;box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);} .form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: 0.75rem;background-image: none;} .form-select:disabled { background-color: var(--bs-secondary-bg);} .form-select:-moz-focusring { color: transparent;text-shadow: 0 0 0 var(--bs-body-color);} .form-select-sm { padding-top: 0.25rem;padding-bottom: 0.25rem;padding-left: 0.5rem;font-size: 0.875rem;border-radius: var(--bs-border-radius-sm);} .form-select-lg { padding-top: 0.5rem;padding-bottom: 0.5rem;padding-left: 1rem;font-size: 1.25rem;border-radius: var(--bs-border-radius-lg);} [data-bs-theme=dark] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");} .form-check { display: block;min-height: 1.5rem;padding-left: 1.5em;margin-bottom: 0.125rem;} .form-check .form-check-input { float: left;margin-left: -1.5em;} .form-check-reverse { padding-right: 1.5em;padding-left: 0;text-align: right;} .form-check-reverse .form-check-input { float: right;margin-right: -1.5em;margin-left: 0;} .form-check-input { --bs-form-check-bg: var(--bs-body-bg);flex-shrink: 0;width: 1em;height: 1em;margin-top: 0.25em;vertical-align: top;appearance: none;background-color: var(--bs-form-check-bg);background-image: var(--bs-form-check-bg-image);background-repeat: no-repeat;background-position: center;background-size: contain;border: var(--bs-border-width) solid var(--bs-border-color);print-color-adjust: exact;} .form-check-input[type=checkbox] { border-radius: 0.25em;} .form-check-input[type=radio] { border-radius: 50%;} .form-check-input:active { filter: brightness(90%);} .form-check-input:focus { border-color: rgb(134, 182.5, 254);outline: 0;box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);} .form-check-input:checked { background-color: #0d6efd;border-color: #0d6efd;} .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");} .form-check-input:checked[type=radio] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");} .form-check-input[type=checkbox]:indeterminate { background-color: #0d6efd;border-color: #0d6efd;--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");} .form-check-input:disabled { pointer-events: none;filter: none;opacity: 0.5;} .form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label { cursor: default;opacity: 0.5;} .form-switch { padding-left: 2.5em;} .form-switch .form-check-input { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");width: 2em;margin-left: -2.5em;background-image: var(--bs-form-switch-bg);background-position: left center;border-radius: 2em;transition: background-position 0.15s ease-in-out;} @media (prefers-reduced-motion: reduce) { .form-switch .form-check-input { transition: none;} } .form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28134, 182.5, 254%29'/%3e%3c/svg%3e");} .form-switch .form-check-input:checked { background-position: right center;--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");} .form-switch.form-check-reverse { padding-right: 2.5em;padding-left: 0;} .form-switch.form-check-reverse .form-check-input { margin-right: -2.5em;margin-left: 0;} .form-check-inline { display: inline-block;margin-right: 1rem;} .btn-check { position: absolute;clip: rect(0, 0, 0, 0);pointer-events: none;} .btn-check[disabled] + .btn, .btn-check:disabled + .btn { pointer-events: none;filter: none;opacity: 0.65;} [data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");} .input-group { position: relative;display: flex;flex-wrap: wrap;align-items: stretch;width: 100%;} .input-group > .form-control, .input-group > .form-select, .input-group > .form-floating { position: relative;flex: 1 1 auto;width: 1%;min-width: 0;} .input-group > .form-control:focus, .input-group > .form-select:focus, .input-group > .form-floating:focus-within { z-index: 5;} .input-group .btn { position: relative;z-index: 2;} .input-group .btn:focus { z-index: 5;} .input-group-text { display: flex;align-items: center;padding: 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: var(--bs-body-color);text-align: center;white-space: nowrap;background-color: var(--bs-tertiary-bg);border: var(--bs-border-width) solid var(--bs-border-color);border-radius: var(--bs-border-radius);} .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text, .input-group-lg > .btn { padding: 0.5rem 1rem;font-size: 1.25rem;border-radius: var(--bs-border-radius-lg);} .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: 0.25rem 0.5rem;font-size: 0.875rem;border-radius: var(--bs-border-radius-sm);} .input-group-lg > .form-select, .input-group-sm > .form-select { padding-right: 3rem;} .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select { border-top-right-radius: 0;border-bottom-right-radius: 0;} .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4), .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control, .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select { border-top-right-radius: 0;border-bottom-right-radius: 0;} .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: calc(-1 * var(--bs-border-width));border-top-left-radius: 0;border-bottom-left-radius: 0;} .input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .form-select { border-top-left-radius: 0;border-bottom-left-radius: 0;} .valid-feedback { display: none;width: 100%;margin-top: 0.25rem;font-size: 0.875em;color: var(--bs-form-valid-color);} .valid-tooltip { position: absolute;top: 100%;z-index: 5;display: none;max-width: 100%;padding: 0.25rem 0.5rem;margin-top: 0.1rem;font-size: 0.875rem;color: #fff;background-color: var(--bs-success);border-radius: var(--bs-border-radius);} .was-validated :valid ~ .valid-feedback, .was-validated :valid ~ .valid-tooltip, .is-valid ~ .valid-feedback, .is-valid ~ .valid-tooltip { display: block;} .was-validated .form-control:valid, .form-control.is-valid { border-color: var(--bs-form-valid-border-color);padding-right: calc(1.5em + 0.75rem);background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right calc(0.375em + 0.1875rem) center;background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);} .was-validated .form-control:valid:focus, .form-control.is-valid:focus { border-color: var(--bs-form-valid-border-color);box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);} .was-validated textarea.form-control:valid, textarea.form-control.is-valid { padding-right: calc(1.5em + 0.75rem);background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);} .was-validated .form-select:valid, .form-select.is-valid { border-color: var(--bs-form-valid-border-color);} .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] { --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");padding-right: 4.125rem;background-position: right 0.75rem center, center right 2.25rem;background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);} .was-validated .form-select:valid:focus, .form-select.is-valid:focus { border-color: var(--bs-form-valid-border-color);box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);} .was-validated .form-control-color:valid, .form-control-color.is-valid { width: calc(3rem + calc(1.5em + 0.75rem));} .was-validated .form-check-input:valid, .form-check-input.is-valid { border-color: var(--bs-form-valid-border-color);} .was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked { background-color: var(--bs-form-valid-color);} .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);} .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: var(--bs-form-valid-color);} .form-check-inline .form-check-input ~ .valid-feedback { margin-left: 0.5em;} .was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, .was-validated .input-group > .form-select:not(:focus):valid, .input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, .input-group > .form-floating:not(:focus-within).is-valid { z-index: 3;} .invalid-feedback { display: none;width: 100%;margin-top: 0.25rem;font-size: 0.875em;color: var(--bs-form-invalid-color);} .invalid-tooltip { position: absolute;top: 100%;z-index: 5;display: none;max-width: 100%;padding: 0.25rem 0.5rem;margin-top: 0.1rem;font-size: 0.875rem;color: #fff;background-color: var(--bs-danger);border-radius: var(--bs-border-radius);} .was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip { display: block;} .was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--bs-form-invalid-border-color);padding-right: calc(1.5em + 0.75rem);background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right calc(0.375em + 0.1875rem) center;background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);} .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { border-color: var(--bs-form-invalid-border-color);box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);} .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem);background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);} .was-validated .form-select:invalid, .form-select.is-invalid { border-color: var(--bs-form-invalid-border-color);} .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] { --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");padding-right: 4.125rem;background-position: right 0.75rem center, center right 2.25rem;background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);} .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus { border-color: var(--bs-form-invalid-border-color);box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);} .was-validated .form-control-color:invalid, .form-control-color.is-invalid { width: calc(3rem + calc(1.5em + 0.75rem));} .was-validated .form-check-input:invalid, .form-check-input.is-invalid { border-color: var(--bs-form-invalid-border-color);} .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked { background-color: var(--bs-form-invalid-color);} .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus { box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);} .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: var(--bs-form-invalid-color);} .form-check-inline .form-check-input ~ .invalid-feedback { margin-left: 0.5em;} .was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, .was-validated .input-group > .form-select:not(:focus):invalid, .input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, .input-group > .form-floating:not(:focus-within).is-invalid { z-index: 4;} .banner{width:100%;height:auto;background:-webkit-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:-o-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:radial-gradient(80% 100% at 50% 40%,#6132b8 0,#131673 100%)} .banner-header{width:100%;height:auto;overflow:hidden;text-align:center;position:relative} .banner-title{text-transform: uppercase;width:100%;margin-top:60px;font-family:"Julius Sans One";font-size:50px;font-weight:700;line-height:1;color:#fff;text-shadow:0 6px 6px rgba(46,20,107,.45)} .banner-intro{padding:0 20px;margin-top:20px;font-size:18px;font-weight:300;line-height:30px;color:#d9f7ff} .banner-footer{width:100%;height:auto;position:relative;margin-top:-30px} .banner-footer img{width:100%;z-index:1} @media (min-width :992px){ .banner-title{margin-top:80px;} .banner-intro{padding:0 80px} } .product-thumb .image{margin-bottom:10px;position:relative;overflow:hidden;z-index:1} .product-thumb .image img{width:100%;height:auto;padding:20px;transition: all 0.5s ease;} .product-thumb:hover .image img{transform: scale(1.1);} .product-thumb .form{ width:50px;right:-50px;bottom:0px;position:absolute;transition:all .2s ease-in-out;z-index:33} .product-thumb:hover .form{right:10px;bottom:0;} .product-thumb .form-button{width:50px;height:50px;line-height:50px;border:none;border-radius:50%;background:var(--ace-color-button);color:#fff;margin-bottom:10px;} .product-thumb .form-button .iconfont{font-size:20px;} .product-thumb .form-button:hover{cursor:pointer} .product-thumb .description{padding:0 10px 10px;text-align:center} .product-thumb .description h3{font-size: 1.375rem;font-weight:400} .category{width:100%;height:auto;overflow:hidden;background:#fff;border-radius:5px;box-shadow:var(--ace-shadow-main);margin-bottom:20px;padding:15px;} .category-title { width: 100%;line-height: 50px;font-size: 30px;color: var(--ace-color-main);text-align: center;margin-bottom: 20px;} .category-children{width:100%;height:auto;overflow:auto;display:flex;flex-wrap:wrap;gap:0 15px;padding:0 10px;} .category-children li{padding:7px 20px;border:1px solid #ddd;background:#fff;border-radius:5px;display:inline-block;flex:1 1 auto;margin-bottom:15px} .category-children li a{color:#333} .category-children li:hover{background:var(--ace-color-main);border:1px solid var(--ace-color-main)} .category-children li:hover a{color:#fff;} .filter { display: flex;flex-wrap: wrap;align-items: center;} .filter .filter-sort { width: 50%;margin-bottom: 20px;margin-right:20px;} .filter .filter-limit { width: calc(50% - 20px);margin-bottom: 20px;flex-wrap: nowrap;} .filter .filter-refine{width: 100%;margin-bottom: 20px;flex-grow: 1;} .filter .filter-search { width: 100%;margin-bottom: 20px;flex-grow: 1;} .filter lable, .filter input, .filter select, .filter .input-group-text, .filter .btn{ height:36px;line-height:36px;padding-top:0;padding-bottom:0;} .filter .btn{ border:1px solid rgb(213, 222, 232);border-radius: var(--bs-border-radius);background:#f8f9fa;padding:0 1rem;} .filter .input-group{ display: flex;flex-wrap: nowrap;} @media (min-width:992px){ .filter{ flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;} .filter .filter-refine{width:220px;margin-right:20px;} .filter .filter-sort{width:220px;margin-bottom: 20px;} .filter .filter-limit{width:150px;margin-bottom: 20px;} .filter .filter-search{ width:auto;margin-right:20px;} } .pagination{margin-bottom:0 !important;} .product-none{width:100%;height:auto;overflow:hidden;background:#fff;padding:30px;text-align:center;border-radius:5px;box-shadow:var(--ace-shadow-main);} .product-list{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between} .product-list .product-thumb{width:calc(50% - 5px);margin-bottom:10px;margin-right:10px;overflow:hidden;} .product-list .product-thumb:nth-child(2n){margin-right:0;} .product-thumb{border:1px solid rgba(150,50,255,.75);border-radius:5px;box-shadow:0px 5px 15px -5px rgba(90,50,180,1);background:#fff;} @media (min-width:992px){ .product-list .product-thumb{width:calc(25% - 15px);margin-bottom:20px;margin-right:20px;} .product-list .product-thumb:nth-child(2n){margin-right:20px;} .product-list .product-thumb:nth-child(4n){margin-right:0;} }