.image-upload {
display: block;
padding: 10px 10px;
text-align: center;
border-radius: 5px;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
::-webkit-scrollbar {
width: 5px;
height: 3px;
}
::-webkit-scrollbar-thumb {
background-color: #a9b5e6;
}
.pointer {
cursor: pointer;
}
.category_Image {
height: 50px;
}
/* ====== Image Protection: Prevent Drag/Download ====== */
img:not(.remove_image):not(.interactive):not([onclick]) {
-webkit-user-drag: none !important;
-khtml-user-drag: none !important;
-moz-user-drag: none !important;
-o-user-drag: none !important;
user-drag: none !important;
pointer-events: none;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
-webkit-touch-callout: none !important;
}
/* ======================================================== */
.remove_image {
display: none;
}
.remove_image_section:hover .remove_image {
display: inline;
position: absolute;
right: 0px;
top: 0px;
}
.product_img {
display: flex;
align-items: center;
justify-content: flex-start;
}
.remove_image_section {
padding-top: 100%;
}
.remove_image_section img.img-fluid {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
box-shadow: 0 0 8px #0000007d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.btn-soft-success:hover {
color: #FFF;
background-color: #36B37E;
border-color: #36B37E;
box-shadow: 0 4px 11px rgb(215 240 229 / 35%);
}
.btn-soft-info:hover {
color: #FFF;
background-color: #00B8D9;
border-color: #00B8D9;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
.btn-soft-danger:hover {
color: #FFF;
background-color: #e63f3f;
border-color: #e63f3f;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
.btn-soft-warning:hover {
color: #FFF;
background-color: #ffc107;
border-color: #ffc107;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
.btn-soft-secondary:hover {
color: #FFF;
background-color: #5a6268;
border-color: #5a6268;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
.btn-soft-dark:hover {
color: #FFF;
background-color: #23272b;
border-color: #23272b;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
/* table tr td .btn-primary:hover {
color: #5eb839;
background-color: #E9FFDF;
border-color: #5eb839;
box-shadow: 0 4px 11px rgb(215 240 229 / 35%);
}
table tr td .btn-success:hover {
color: #5eb839;
background-color: #E9FFDF;
border-color: #5eb839;
box-shadow: 0 4px 11px rgb(215 240 229 / 35%);
}
table tr td .btn-info:hover {
color: #35abb6;
background-color: #E8F8FF;
border-color: #35abb6;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
table tr td .btn-danger:hover {
color: #fff;
background-color: #e63f3f;
border-color: #e63f3f;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
table tr td .btn-warning:hover {
color: #ffc107;
background-color: rgba(244, 180, 26, 0.15);
border-color: #ffc107;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
table tr td .btn-secondary:hover {
color: #5a6268;
background-color: rgba(108, 117, 125, 0.25);
border-color: #5a6268;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
table tr td .btn-dark:hover {
color: #23272b;
background-color: rgba(28, 35, 47, 0.15);
border-color: #23272b;
box-shadow: 0 4px 11px rgb(204 241 247 / 35%);
}
table tr td .btn-dark.text-white:hover {
color: #23272b !important;
} */
.faq .accordion .accordion-item {
border-radius: 5px;
overflow: hidden;
border: none;
margin-bottom: 10px;
/* background: #F5F5F5; */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.faq .accordion .accordion-item .accordion-button {
font-weight: 700;
padding: 1.3rem 1.25rem;
}
.faq .accordion .accordion-item .accordion-button span {
font-size: 16px;
margin-right: 8px;
}
.faq .accordion .accordion-item .accordion-button:not(.collapsed) {
border-radius: 5px;
/* background: #f5f5f5; */
box-shadow: none;
/* border-bottom: 1px solid #d8d8d8; */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.faq .accordion .accordion-item .accordion-button.collapsed {
box-shadow: 0 6px 30px rgb(182 186 203 / 30%);
}
.text-600 {
font-weight: 600;
}
.text-danger {
color: red !important;
}
.w-auto {
width: auto;
}
.opacity-0 {
opacity: 0;
}
/* PAGER */
.dataTable-pagination ul {
margin: 0;
padding-left: 0;
}
.dataTable-pagination li {
list-style: none;
float: left;
}
.dataTable-pagination a {
border: 1px solid transparent;
float: left;
margin-left: 2px;
padding: 6px 12px;
position: relative;
text-decoration: none;
color: #333;
}
.dataTable-pagination a:hover {
background-color: #d9d9d9;
}
.dataTable-pagination .active a,
.dataTable-pagination .active a:focus,
.dataTable-pagination .active a:hover {
background-color: #d9d9d9;
cursor: default;
}
.dataTable-pagination .ellipsis a,
.dataTable-pagination .disabled a,
.dataTable-pagination .disabled a:focus,
.dataTable-pagination .disabled a:hover {
cursor: not-allowed;
}
.dataTable-pagination .disabled a,
.dataTable-pagination .disabled a:focus,
.dataTable-pagination .disabled a:hover {
cursor: not-allowed;
opacity: 0.4;
}
.dataTable-pagination .pager a {
font-weight: bold;
}
.boxed label {
display: inline-flex;
border: solid 2px #ccc;
transition: all 0.3s;
margin-bottom: 5px;
text-align: center;
width: fit-content;
padding: 5px 8px;
text-transform: uppercase;
font-size: 12px;
justify-content: center;
align-items: center;
line-height: 1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
}
.boxed .custom-radio-btn {
display: none;
}
.custom-radio-btn:checked+label {
border: solid 2px #c71c1c;
}
.footer-list-social {
margin-top: 15px;
display: flex;
align-items: center;
}
ul.icon {
margin-top: 7px;
}
.d-block {
display: block;
}
.w-100 {
width: 100%;
}
.mb-0 {
margin-bottom: 0;
}
.mb-1 {
margin-bottom: 10px;
}
.mb-2 {
margin-bottom: 20px;
}
.product-filter-widget {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.product-filter-widget .btn {
padding: 10px 25px;
}
.list_height_css .list {
max-height: 200px;
overflow: scroll;
}
.description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.req {
color: red;
}
.flex-slider .slick-list,
.flex-slider .slick-track {
display: flex;
}
.flex-slider {
margin: 0 -10px;
}
.flex-slider .card {
padding: 5px 10px;
display: flex !important;
}
.flex-slider .card .card-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.blog-head-row .blog-col-right {
max-width: 130px;
width: 100%;
}
.mini-cart-body {
height: 480px;
overflow-y: auto;
}
.checkout-page-right .mini-cart-body {
height: 100%;
max-height: 480px;
}
.table-body tr {
border: 1px solid rgba(48, 56, 61, 0.1);
}
.mini-cart-footer.mini-cart-footer1 .u-save {
margin-bottom: 5px;
}
.form-container.billing_addresses.d-none {
display: none;
}
.choose-files div {
color: var(--bs-white);
background: var(--theme-color) !important;
border: none;
border-radius: 6px;
padding: 8px 15px;
max-width: 155px !important;
font-size: 12px;
font-weight: 500;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.file {
position: relative !important;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 80%;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
}
.card-body.stats {
height: 200px;
}
.quick-add-btn a.btn {
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.card-body.welcome-card {
padding: 15px 20px;
}
.min-h-490 {
min-height: 490px;
max-height: 490px;
}
.active_color {
border: 2px solid #000 !important;
}
.logo-content a {
position: relative;
display: block;
padding-top: 35%;
border-radius: 10px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.logo-content a img {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 60%;
object-fit: contain;
object-position: center;
}
.form-check .form-check-input {
float: left;
margin-right: 5px;
}
.form-check.form-switch {
padding-left: 25px;
}
.img_setting {
filter: drop-shadow(2px 3px 7px #011c4b);
}
.mr-5 {
margin-right: 5px;
}
.mt-5 {
margin-top: 5px;
}
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
margin-bottom: 10px;
}
.order-confirm-details p.mb-5 {
margin-bottom: 5px;
}
.coupon-table {
background: transparent;
border: 1px solid #E8E8E8;
padding: 15px 15px;
margin-top: 30px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.coupon-text {
flex: 1;
display: flex;
align-items: center;
}
.coupon-text h4 {
width: auto;
white-space: nowrap;
font-weight: 400;
font-size: 18px;
}
.coupon-text p {
width: 80%;
font-size: 11px;
padding: 0 20px;
}
.coupon-code {
display: flex;
}
.coupon-code-text {
display: flex;
align-items: center;
}
.coupon-code-text h4 {
font-size: 12px;
font-weight: 500;
}
.coupon-code-text .p {
border: 1px solid var(--black);
border-radius: 30px;
margin: 0 10px;
padding: 10px 20px;
font-size: 12px;
line-height: 16px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
}
.coupon-btn button {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 22px;
background: transparent;
border: 1px solid var(--black);
color: var(--black);
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
}
.coupon-btn button svg {
width: 30px;
height: 9px;
margin-left: 2px;
}
.coupon-btn button svg path {
fill: var(--black);
}
.pagination {
display: flex;
/* gap: 10px; */
align-items: center;
justify-content: flex-end;
margin-top: 30px;
}
.pagination .page-item {
/* background: #f4f4f4; */
/* width: 30px;
height: 30px; */
display: flex;
align-items: center;
justify-content: center;
}
.page-border .table tr td {
border-bottom: 0 !important;
}
.page-border .dataTable-bottom {
border-top: 1px solid #f1f1f1 !important;
}
.mt-1 {
margin-top: 0.25rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.pimage {
max-width: 13px !important;
}
form.variant_form.p-form {
display: flex;
margin-top: 30px;
}
.brand_icon {
width: 100% !important;
}
.uploaded-pics input[type="checkbox"][id^="checkthis"] {
display: none;
}
.uploaded-pics label {
position: relative;
padding: 10px;
border: 1px solid var(--bs-border-color);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
cursor: pointer;
display: block;
}
img {
vertical-align: middle;
}
.stats-wrapper {
height: 100%;
margin-bottom: 0;
}
.stats-wrapper .card-body.stats {
height: auto;
}
.price-card {
text-align: center;
position: relative;
margin-top: 30px;
display: flex;
width: 100%;
}
.plan_card .card.price-card .card-body {
display: flex;
height: 100%;
justify-content: space-between;
flex-direction: column;
}
.uploaded-pics label:before {
font-size: 15px;
background-color: #ffffff;
color: var(--theme-color);
content: "";
display: block;
border-radius: 50%;
border: 1px solid var(--theme-color);
position: absolute;
top: -6px;
right: -6px;
width: 25px;
height: 25px;
text-align: center;
transition-duration: 0.4s;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.uploaded-pics :checked+label::before {
content: "✓";
transform: scale(1);
z-index: 2;
}
.uploaded-pics :checked+label{
border-color: var(--theme-color);
}
.fix-content {
width: 500px;
white-space: normal !important;
}
.navbar-brand img {
max-width: 200px !important;
}
.wow.mobile-widget {
max-width: 200px;
}
.footer .row .col-lg-6.col-sm-12 img {
max-width: 200px;
}
.badges {
--bs-badge-padding-x: 0.5em;
--bs-badge-padding-y: 0.35em;
--bs-badge-font-size: 0.75em;
--bs-badge-font-weight: 500;
--bs-badge-color: #ffffff;
--bs-badge-border-radius: 2px;
display: inline-block;
padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
font-size: var(--bs-badge-font-size);
font-weight: var(--bs-badge-font-weight);
line-height: 1;
color: var(--bs-badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: var(--bs-badge-border-radius);
-webkit-border-radius: var(--bs-badge-border-radius);
-moz-border-radius: var(--bs-badge-border-radius);
-ms-border-radius: var(--bs-badge-border-radius);
-o-border-radius: var(--bs-badge-border-radius);
}
.uploaded-picss label {
padding: 10px;
display: block;
position: relative;
cursor: pointer;
width: 100%;
margin: auto;
border-radius: 5px;
/* border: 1px solid var(--active-theme-border); */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.uploaded-picss label:before {
font-size: 15px;
background-color: #ffffff;
color: var(--active-theme-border);
content: "";
display: block;
border-radius: 50%;
border: 1px solid var(--active-theme-border);
position: absolute;
top: -6px;
right: -6px;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
transition-duration: 8s;
transform: scale(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.uploaded-picss :checked+label::before {
content: "✓";
transform: scale(1);
z-index: 2;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
.package-itm.theme-avtar img {
width: 100%;
height: 100%;
border-radius: 20px;
object-fit: scale-down;
}
.package-itm.theme-avtar {
width: 85px;
height: 85px;
border-radius: 20px;
}
.event-cards .product-card {
margin-bottom: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.event-cards .product-card-inner {
padding: 10px;
border: 1px solid #E9FFDF;
border-radius: 8px;
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
display: flex;
flex-direction: column;
height: 100%;
}
.event-cards .product-card-inner .product-card-image {
position: relative;
}
.event-cards .product-card-inner .product-card-image .pdp-img {
position: relative;
display: block;
padding-top: 70%;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
overflow: hidden;
}
.event-cards .product-card-inner .product-card-image .pdp-img img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-position: top;
transition: 3s all ease;
z-index: 3;
}
.event-cards .product-card-inner .product-card-image .pdp-img:hover img {
object-position: bottom;
}
.event-cards .product-card-inner .checkbox-custom .dropdown-menu {
padding: 10px 0px;
}
.event-cards .product-card-inner .checkbox-custom .dropdown-menu .dropdown-item {
padding: 5px 15px;
}
.event-cards .product-card-inner .checkbox-custom .btn {
padding: 0px;
color: #060606;
border: 0;
outline: 0;
background-color: transparent;
}
.event-cards .product-card-inner .product-content {
margin-top: 15px;
display: flex;
flex-direction: column;
height: 100%;
}
.event-cards .card-wrapper {
display: flex;
flex-direction: column;
}
.inner-div .form-check.form-switch {
padding-left: 2.5em;
}
.theme-color.themes-color {
max-width: 200px;
width: 100%;
}
.danger-btn {
padding: 10px 15px;
}
.danger-btn:hover {
background: #c7100a;
color: #ffffff;
}
.danger-btn:hover span {
color: #fff !important;
}
.navbar.default.top-nav-collapse {
background: rgba(28, 35, 47, 0.9);
}
.product-card-inner .product-content .btn-outline-primary {
color: #000 !important;
background-color: #E9FFDF !important;
}
.product-card-inner .product-content .btn-outline-primary:hover {
color: #fff !important;
border-color: #013D29 !important;
background: #013D29 !important;
}
.e-comm-row .btn-outline-primary {
color: #013D29 !important;
border-color: #013D29 !important;
}
.e-comm-row .btn-outline-primary:hover {
color: #fff !important;
border-color: #013D29 !important;
background: #013D29 !important;
}
.front-img {
width: 100%;
}
.radio-button-group .radio-button {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
/* 16.12 */
.setting-card .logo-content a {
padding-top: 21%;
max-width: 270px;
width: 100%;
margin: 0 auto;
}
.setting-card .logo-content a img {
width: 100%;
}
.img_setting {
filter: drop-shadow(1px 1px 2px #011c4b);
}
.lang-setting {
display: flex;
justify-content: end;
align-items: center;
gap: 10px;
}
.disabledCookie {
pointer-events: none;
opacity: 0.4;
}
/* guest page language dropdown start */
.ecom-lang-drp .dash-head-link {
color: #525b69;
display: inline-flex;
align-items: center;
padding: 0.6rem 0.7rem;
margin: 0 7.5px;
position: relative;
font-weight: 500;
border-radius: 12px;
border: 1px solid rgba(206, 206, 206, 0.2);
gap: 7px;
margin-right: 10px !important;
margin-left: 0 !important;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
}
.ecom-lang-drp .drp-language i {
color: #CECECE;
}
.ecom-lang-drp .dash-head-link>i:not(.nocolor) {
color: #E9FFDF;
}
.ecom-lang-drp .dash-head-link .drp-arrow {
color: #525b69;
font-size: 14px;
opacity: 0.8;
}
@media (max-width:450px) {
.ecom-lang-drp .drp-text {
display: none;
}
.navbar-brand img {
max-width: 120px !important;
}
.ecom-lang-drp .dash-head-link {
margin-right: 0 !important;
}
}
.ai-btn {
font-size: 12px;
padding: 6px 15px;
}
.ai-btn i {
font-size: 14px;
margin-right: 5px;
}
/* pos css start */
.input-group-prepend {
margin-right: -1px;
}
.input-group-prepend,
.input-group-append {
display: flex;
}
.bg-color {
background: linear-gradient(141.55deg, #E9FFDF 3.46%, #E9FFDF 99.86%), #E9FFDF;
}
.pos-top-bar {
background: #6fd944;
border-radius: 10px;
padding: 15px;
}
.carttable .quantity.buttons_added .minus,
.carttable .quantity.buttons_added .plus {
padding: 4px 10px 8px;
height: 35px;
background-color: #ffffff;
border: 1px solid #efefef;
cursor: pointer;
}
.carttable .quantity.buttons_added input {
display: inline-block;
margin: 0;
vertical-align: top;
box-shadow: none;
}
.carttable .quantity.buttons_added .plus {
border-left: 0;
}
.carttable .quantity .input-number {
width: 35px;
height: 35px;
padding: 0 5px;
text-align: center;
background-color: transparent;
border: 1px solid #efefef;
}
.total-section {
width: 100%;
/* background: #f1f1f1; */
padding: 15px 15px;
border-radius: 10px;
/* box-shadow: 0px 10px 10px -10px #97979780; */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.input-group-text {
display: flex;
align-items: center;
padding: 0.575rem 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
/* color: #293240; */
text-align: center;
white-space: nowrap;
/* background-color: #f8f9fd; */
/* border: 1px solid #ced4da; */
border-radius: 6px;
transition: all 0.2s ease;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.form-control,
.custom-select,
.dataTable-selector,
.dataTable-input {
display: block;
width: 100%;
padding: 0.575rem 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
/* color: #293240; */
/* background-color: #ffffff; */
background-clip: padding-box;
/* border: 1px solid #ced4da; */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 6px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-moz-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-ms-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.form-row>.zoom-in {
transition-property: background-color, border-color, color, fill, opacity, box-shadow, transform;
transition-duration: .3s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
cursor: pointer;
margin-bottom: 10px !important;
-webkit-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
-moz-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
-ms-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
-o-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
}
.zoom-in:hover {
--transform-scale-x: 1.05;
--transform-scale-y: 1.05;
}
.product-body-nop {
height: calc(100vh - 260px);
overflow-y: auto;
overflow-x: hidden;
margin-right: -7px;
padding-right: 7px;
}
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
.position-relative {
position: relative !important;
}
.product-body-nop .card {
width: 100%;
}
.product-body-nop .card .avatar {
object-fit: scale-down;
padding: 20px 0 10px;
background: transparent;
min-height: 9rem;
width: 100%;
}
.avatar {
position: relative;
color: #FFF;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
font-size: 1rem;
font-weight: 600;
height: 3.125rem;
width: 3.125rem;
border-radius: 0.25rem;
-webkit-border-radius: 0.25rem;
-moz-border-radius: 0.25rem;
-ms-border-radius: 0.25rem;
-o-border-radius: 0.25rem;
}
.card .card-image,
.card .animate-this,
.card>a {
min-height: 1px;
}
.tab-btns {
min-width: 100px;
white-space: nowrap;
border-radius: 0.625rem !important;
padding: 10px 20px !important;
font-size: 12px !important;
-webkit-border-radius: 0.625rem !important;
-moz-border-radius: 0.625rem !important;
-ms-border-radius: 0.625rem !important;
-o-border-radius: 0.625rem !important;
}
.product-body-nop .card .badge {
padding: 4px 10px;
width: auto;
max-width: 100px;
margin: 0 auto 0 0;
}
.top-badge {
position: absolute;
top: 0;
right: 0;
}
.badge-danger {
color: #FF5630;
background-color: rgba(255, 174, 189, 0.41);
}
.badge-primary {
color: #6FD943;
background-color: #E9FFDF;
}
#product-listing .toacart {
cursor: pointer;
}
.product-body-nop .form-row [class*="col-"] {
display: flex;
}
.form-row>.col,
.form-row>[class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.carttable-scroll {
/* height: calc(100vh - 115px); */
}
/* .card:not(.table-card) .table-responsive {
margin: -25px -25px 0 -25px;
width: calc(100% + 50px);
} */
.carttable-scroll .table-responsive {
height: calc(100vh - 300px);
}
.billed-to p {
font-weight: 400;
}
.pos-module .product-border {
border-bottom: 3px dotted #d8d8d8 !important;
}
.theme-avtar img {
width: 45px;
height: 45px;
}
.theme-1 .bg-light-primary {
background: #ceefdf;
color: #0CAF60;
border-color: #ceefdf;
}
.border-primary {
border-color: var(--theme-color) !important;
}
/* Header: language switcher — circular icon-only trigger (not the admin store megamenu .menu-lnk) */
.dash-header .header-icon-list > .drp-language:not(.menu-lnk) > .dash-head-link.dash-lang-icon-btn {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid rgba(6, 6, 6, 0.1);
background: #fff;
color: #525f72;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.dash-header .header-icon-list > .drp-language:not(.menu-lnk) > .dash-head-link.dash-lang-icon-btn:hover,
.dash-header .header-icon-list > .drp-language:not(.menu-lnk) > .dash-head-link.dash-lang-icon-btn:focus-visible {
color: #060606;
border-color: rgba(6, 6, 6, 0.16);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #f8fafc;
}
@supports (color: color-mix(in srgb, red, blue)) {
.dash-header .header-icon-list > .drp-language:not(.menu-lnk) > .dash-head-link.dash-lang-icon-btn:hover,
.dash-header .header-icon-list > .drp-language:not(.menu-lnk) > .dash-head-link.dash-lang-icon-btn:focus-visible {
background: color-mix(in srgb, var(--theme-color) 8%, #ffffff);
}
}
.dash-header .header-icon-list > .drp-language:not(.menu-lnk) > .dash-head-link.dash-lang-icon-btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* Language on mobile: shown in .page-welcome-bar; header control hidden below md */
.page-welcome-bar .page-welcome-lang-dd > .page-welcome-lang-btn {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid rgba(6, 6, 6, 0.1);
background: #fff;
color: #525f72;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.page-welcome-bar .page-welcome-lang-dd > .page-welcome-lang-btn::after {
display: none !important;
}
.page-welcome-bar .page-welcome-lang-dd > .page-welcome-lang-btn:hover,
.page-welcome-bar .page-welcome-lang-dd > .page-welcome-lang-btn:focus-visible {
color: #060606;
border-color: rgba(6, 6, 6, 0.16);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #f8fafc;
}
.page-welcome-bar .page-welcome-lang-dd > .page-welcome-lang-btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* Header: account — icon-only (greeting + store switcher under page title) */
.dash-header .drp-company > .dash-head-link.dash-account-icon-btn {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid rgba(6, 6, 6, 0.1);
background: #fff;
color: #525f72;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.dash-header .drp-company > .dash-head-link.dash-account-icon-btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* Quick Add — icon-only circular (match language trigger) */
.dash-header .header-wrapper .header-quick-add .btn-q-add {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
border-radius: 9999px;
border: 1px solid rgba(6, 6, 6, 0.1);
background: #fff;
color: #525f72;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.dash-header .header-wrapper .header-quick-add .btn-q-add:hover,
.dash-header .header-wrapper .header-quick-add .btn-q-add:focus-visible {
color: #060606;
border-color: rgba(6, 6, 6, 0.16);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #f8fafc;
}
.dash-header .header-quick-add .btn-q-add .text-store {
display: none !important;
}
.dash-header .header-quick-add .btn-q-add i {
font-size: 1.35rem;
line-height: 1;
}
.dash-header .web-browse-icon .cust-btn i.ti {
font-size: 1.25rem;
line-height: 1;
}
/* Header icon row: Store / POS / preview / cache — same circular pill as language */
.dash-header .header-wrapper .web-browse-icon > .dash-head-link.cust-btn {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid rgba(6, 6, 6, 0.1);
background: #fff;
color: #525f72;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.dash-header .header-wrapper .web-browse-icon > .dash-head-link.cust-btn:hover,
.dash-header .header-wrapper .web-browse-icon > .dash-head-link.cust-btn:focus-visible {
color: #060606;
border-color: rgba(6, 6, 6, 0.16);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #f8fafc;
}
.dash-header .header-wrapper .web-browse-icon > .dash-head-link.cust-btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
margin: 0 !important;
}
/* Mobile menu trigger — circular to match */
.dash-header .header-wrapper .mob-hamburger > .dash-head-link {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid rgba(6, 6, 6, 0.1);
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dash-header .header-wrapper .mob-hamburger > .dash-head-link:hover,
.dash-header .header-wrapper .mob-hamburger > .dash-head-link:focus-visible {
border-color: rgba(6, 6, 6, 0.16);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #f8fafc;
}
/* Desktop sidebar collapse / expand trigger inside glass header */
.dash-header .header-wrapper .desktop-sidebar-toggle > .dash-sidebar-toggle-btn {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(6, 6, 6, 0.1);
border-radius: 9999px;
background: #fff;
color: #060606;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.22s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dash-header .header-wrapper .desktop-sidebar-toggle > .dash-sidebar-toggle-btn:hover,
.dash-header .header-wrapper .desktop-sidebar-toggle > .dash-sidebar-toggle-btn:focus-visible {
border-color: rgba(6, 6, 6, 0.16);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #f8fafc;
}
.dash-header .header-wrapper .desktop-sidebar-toggle > .dash-sidebar-toggle-btn i {
font-size: 1.1rem;
line-height: 1;
}
body.minimenu .dash-header .header-wrapper .desktop-sidebar-toggle > .dash-sidebar-toggle-btn {
transform: rotate(-180deg);
}
@media (max-width: 1024px) {
.dash-header .header-wrapper .desktop-sidebar-toggle {
display: none !important;
}
}
/* Legacy theme (style.css) uses ±15px margin on #vertical-nav-toggle — breaks alignment in the glass pill */
.dash-header .header-wrapper #vertical-nav-toggle {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Left cluster: hamburger, sidebar toggle, account — one horizontal row, vertically centered */
.dash-header .header-wrapper > ul.list-unstyled.header-wrapper__foreground:first-of-type {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
margin-bottom: 0;
}
.dash-header .header-wrapper .desktop-sidebar-toggle.dash-h-item {
display: flex;
align-items: center;
align-self: center;
}
.dash-header .header-wrapper .dash-center-drp,
.dash-header .header-wrapper .dash-right-drp {
display: flex;
align-items: center;
}
.dash-header .header-wrapper .dash-right-drp .header-icon-list {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 0;
}
.dash-header .header-wrapper .web-browse-icon > .dash-head-link.dash-exit-admin-btn {
color: #dc3545 !important;
border-color: rgba(220, 53, 69, 0.45) !important;
background: rgba(255, 255, 255, 0.95) !important;
}
.dash-header .header-wrapper .web-browse-icon > .dash-head-link.dash-exit-admin-btn:hover,
.dash-header .header-wrapper .web-browse-icon > .dash-head-link.dash-exit-admin-btn:focus-visible {
color: #fff !important;
background: #dc3545 !important;
border-color: #dc3545 !important;
}
.page-welcome-bar {
gap: 0.85rem !important;
align-items: center;
}
.page-welcome-bar > .text-muted.small {
font-size: 1.35rem;
line-height: 1.35;
}
.page-welcome-bar > .text-muted.small strong {
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.02em;
}
.page-welcome-bar .page-welcome-store-dd .btn {
font-weight: 600;
font-size: 1.2rem;
line-height: 1.3;
padding: 0.65rem 1.4rem;
min-height: 3rem;
}
.page-welcome-bar .page-welcome-store-dd .btn .ti {
font-size: 1.45rem;
}
/* Dashboard (#dashboard-main-content): circular icon buttons like header .cust-btn + pill controls */
#dashboard-main-content .dash-dash-circle-btn {
width: 44px;
height: 44px;
min-width: 44px;
padding: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0 !important;
border: 1px solid rgba(6, 6, 6, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease,
transform 0.15s ease;
}
#dashboard-main-content .dash-dash-circle-btn i.ti {
font-size: 1.28rem;
line-height: 1;
margin: 0;
}
#dashboard-main-content .btn-primary.dash-dash-circle-btn {
border-color: transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
#dashboard-main-content .dash-dash-circle-btn:hover,
#dashboard-main-content .dash-dash-circle-btn:focus-visible {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
#dashboard-main-content .dataTable-search .dataTable-input,
#dashboard-main-content .dataTable-dropdown .dataTable-selector {
border-radius: 9999px;
border: 1px solid rgba(6, 6, 6, 0.12);
padding: 0.45rem 1rem;
min-height: 2.5rem;
}
#dashboard-main-content .table-inner-text > a.btn,
#dashboard-main-content .recent-orders-card .order-invoice-link {
border-radius: 9999px;
padding: 0.4rem 1rem;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#dashboard-main-content td .btn.btn-icon {
border-radius: 9999px;
padding: 0.45rem 1.15rem;
min-height: 2.35rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
#dashboard-main-content .theme-image .card-badge {
border-radius: 9999px !important;
}
/* Recent Orders: no DataTable chrome; mobile = stacked rows + icon status */
#dashboard-main-content .recent-orders-responsive {
overflow-x: visible;
}
#dashboard-main-content .recent-orders-table thead th {
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
border-bottom-width: 1px;
}
#dashboard-main-content .recent-orders-card .order-invoice-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
max-width: 100%;
}
#dashboard-main-content .recent-orders-card .order-invoice-link__icon {
display: none;
font-size: 1.05rem;
flex-shrink: 0;
}
#dashboard-main-content .recent-orders-card .order-invoice-link__text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#dashboard-main-content .recent-orders-card .recent-orders-status-btn {
font-weight: 600;
border-radius: 9999px;
padding: 0.4rem 0.85rem;
white-space: nowrap;
}
#dashboard-main-content .recent-orders-card .recent-orders-date {
font-size: 0.9375rem;
font-weight: 500;
color: #334155;
}
@media (max-width: 575.98px) {
#dashboard-main-content .recent-orders-card .recent-orders-table thead {
display: none;
}
#dashboard-main-content .recent-orders-card .recent-orders-table tbody tr {
display: block;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 12px;
margin-bottom: 0.65rem;
padding: 0.5rem 0.65rem;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
#dashboard-main-content .recent-orders-card .recent-orders-table tbody td {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0;
border: none;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
#dashboard-main-content .recent-orders-card .recent-orders-table tbody td:last-child {
border-bottom: none;
}
#dashboard-main-content .recent-orders-card .recent-orders-table tbody td::before {
content: attr(data-label);
flex: 0 0 32%;
max-width: 32%;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
line-height: 1.2;
}
#dashboard-main-content .recent-orders-card .recent-orders-cell-inner {
flex: 1;
min-width: 0;
}
#dashboard-main-content .recent-orders-card .order-invoice-link {
width: 100%;
justify-content: flex-start;
padding: 0.35rem 0.65rem;
font-size: 0.78rem;
}
#dashboard-main-content .recent-orders-card .order-invoice-link__icon {
display: block;
}
#dashboard-main-content .recent-orders-card .order-invoice-link__text {
max-width: calc(100% - 1.5rem);
}
#dashboard-main-content .recent-orders-card .recent-orders-cell--status {
flex-wrap: wrap;
}
#dashboard-main-content .recent-orders-card .recent-orders-cell--status .recent-orders-status-btn {
flex: 1;
min-width: 0;
white-space: normal;
text-align: center;
line-height: 1.25;
padding: 0.4rem 0.6rem;
}
#dashboard-main-content .recent-orders-card .recent-orders-date {
font-size: 0.8125rem;
}
}
/* pos css End */
.disabledPWA {
pointer-events: none;
opacity: 0.4;
}
.pos-table .cart-images img {
width: 3.5rem !important;
height: 100%;
object-fit: cover;
}
.fix_badges {
min-width: 95px !important;
}
.dash-container .dash-content .form-group .logo-content img {
width: 100%;
max-width: 70%;
}
.info-card .theme-avtar {
width: 55px;
height: 55px;
margin: auto;
font-size: 25px;
}
.info-card .card-body.stats {
text-align: center;
}
.info-card .card-body h3 {
font-size: 40px;
}
.card-dash {
margin-bottom: 0px;
height: 100%;
}
.plan_card .card {
margin-bottom: 0;
}
.plan_card {
height: 100%;
display: flex;
}
.info-card .theme-avtar {
width: 55px;
height: 55px;
margin: auto;
font-size: 25px;
}
.info-card .card-body.stats {
text-align: center;
}
.info-card .card-body h3 {
font-size: 40px;
}
.dash-data {
display: flex;
flex-direction: column;
}
.dash-data .data-chart {
flex: 1;
}
@media (max-width: 575px) {
.info-card .card-body h3 {
font-size: 25px;
}
.dash-header .dash-head-link .text-store,
.dash-header .dash-head-link.dropdown-toggle span {
display: none;
}
.dash-header .quick-add-btn a {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.user-info {
text-align: center;
}
.qr-code-wrp .code-img {
margin: 0 auto;
}
.quick-add-btn a.btn {
padding: 8px;
}
.quick-add-btn a.btn span {
display: none;
}
.theme-card .theme-card-button .btn {
padding: 8px 12px;
}
.dashboard-theme-card .theme-image {
height: 300px;
}
}
@media(min-width:1024px) {
.dash-sidebar.light-sidebar.transprent-bg .navbar-content {
height: calc(100vh - 145px);
}
}
body .navbar-nav .nav-link {
color: black;
}
.ecom-lang-drp .dash-head-link {
background: rgba(245, 245, 245, 1);
}
.info-card .qrcode {
margin-top: 15px;
}
/* Email Template*/
.drp-languages .drp-language .dropdown-toggle {
color: #525b69;
display: inline-flex;
align-items: center;
padding: 0.6rem 0.7rem;
margin: 0 7.5px;
border-radius: 4px;
position: relative;
font-weight: 500;
border-radius: 12px;
border: 1px solid rgba(206, 206, 206, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.drop-down__menu {
padding-left: 7px;
}
/* Email Template*/
.according-delete-input {
position: relative;
padding: 15px 50px 15px 14px !important;
}
.according-delete-input a.btn {
position: absolute;
right: 7px;
padding: 2px 4px;
}
.add_attribute {
font-family: "Open Sans", sans-serif;
}
.attribute-form-check {
margin-right: 8px;
}
.email_arrow {
margin-right: 0px !important;
}
.share-btn {
background-color: #47dbcd;
border: 1px solid #47dbcd;
}
.share-btn:hover {
background-color: #47dbcd;
border: 1px solid #47dbcd;
}
.sharingButtonsContainer {
position: absolute;
top: 50%;
right: -28px;
transform: translateY(-50%);
z-index: 9999;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.sharingButtonsContainer .Demo1 {
margin-bottom: 0px !important;
}
.sharingButtonsContainer a {
background-color: #ddd;
display: flex;
justify-content: center;
min-width: 13px;
padding: 6px;
border-radius: 20px;
width: 28px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
@media (max-width:1399px) {
.sharingButtonsContainer {
right: -20px;
top: 49%;
}
}
@media (max-width:575px) {
.sharingButtonsContainer {
right: 12px;
top: 102%;
}
.socialJS {
display: flex;
gap: 0 10px;
flex-direction: row-reverse;
}
.socialJS a {
margin: 0;
}
.wishDrawer {
width: 100%;
}
.wishDrawer .mini-wish-header {
padding: 17px 30px 16px 40px;
}
.wishDrawer .closewish {
left: 12px;
}
}
img.refund-image {
width: 100%;
max-width: 50px;
}
/***** dashboard****/
@media (max-width:991px) {
.container {
max-width: 1140px;
}
}
@media (max-width:767px) {
.auth-wrapper .auth-content {
width: 100%;
}
}
@media (max-width:575px) {
.auth-wrapper .auth-content .card .card-body {
padding: 15px 0px;
}
.list-unstyled .dropdown-item span.text-store {
display: none;
}
.list-unstyled .dropdown-item i {
margin: 0 !important;
}
}
@media (max-width: 425px) {
.dash-header .drp-language i.ti-world {
display: none;
}
.info-card .card-body .cp_link {
font-size: 0;
}
}
.auth-wrapper .auth-content .card .card-body {
padding: 40px 0;
}
.modal-body .auth-wrapper .auth-content .card .card-body {
padding: 15px;
}
.dash-sidebar .navbar-content {
height: calc(100vh - 75px);
}
/* Last sidebar items were clipped inside SimpleBar — pad scroll content bottom */
.dash-sidebar .navbar-content .simplebar-content {
padding-bottom: clamp(2.5rem, 6vh, 5rem) !important;
}
.dash-sidebar .navbar-content ul.dash-navbar {
padding-bottom: 1.25rem !important;
}
@media (max-width:575px) {
.pills-search {
width: 100%;
}
.pills-search .btn-box {
width: 65%;
}
.pills-search .chart-data {
width: 30%;
}
.pills-search .chart-data .chart-datas {
padding: 10px 5px;
width: 100%;
}
}
.pills-search {
gap: 3px;
}
.apexcharts-canvas {
margin: auto;
}
/* timeline css start */
.timeline li:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.time-wrapper {
display: block;
font-size: 0.8888em;
color: #6c757d;
margin-top: 20px;
}
.time {
display: inline-block;
padding: 4px 6px;
background: rgb(248, 248, 248);
}
.my-custom-timeline {
padding: 60px 0;
}
.my-custom-timeline .custom-timeline-inner {
padding: 40px 0;
/* background-color: #f9f9f9; */
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.my-custom-timeline .timeline {
z-index: 1;
position: relative;
list-style-type: none;
}
.my-custom-timeline .timeline:before {
background: #DBDBDB;
z-index: 1;
top: 11px;
position: absolute;
left: 50%;
content: ' ';
display: block;
width: 6px;
height: 100%;
margin-left: -3px;
}
.my-custom-timeline .tl-container {
max-width: 50%;
width: 100%;
position: relative;
padding: 0px 25px;
}
.my-custom-timeline .tl-container.left {
left: 0;
text-align: end;
}
.my-custom-timeline .tl-container.right {
left: 50%;
}
.my-custom-timeline .support-time {
position: relative;
}
.my-custom-timeline .support-time::before {
content: " ";
height: 5px;
position: absolute;
top: 30px;
width: 23px;
z-index: 1;
left: -22px;
background: #DBDBDB;
}
.my-custom-timeline .left .support-time::before {
right: -22px;
left: auto;
}
.my-custom-timeline .support-time::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: -30px;
background-color: white;
border: 3px solid #DBDBDB;
top: 27px;
border-radius: 50%;
z-index: 1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.my-custom-timeline .left .support-time::after {
right: -30px;
left: auto;
}
.my-custom-timeline .tl-box {
padding: 15px;
box-shadow: 0px 0px 26.830137252807617px 0px #0000000D;
border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
-ms-border-radius: 9px;
-o-border-radius: 9px;
margin-top: 10px;
background: #ffffff;
}
.my-custom-timeline .tl-btn {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border: 1px solid;
font-size: 12px;
gap: 5px;
font-weight: 600;
margin-bottom: 5px;
}
.my-custom-timeline .tl-btn.support-btn {
background-color: #FFF1F1;
border-color: #FFC3C3;
}
.my-custom-timeline .tl-btn.licence-btn {
background-color: #E0FFF5;
border-color: #01CE8A;
}
.my-custom-timeline .tl-btn.order-btn {
background-color: #FFF3D6;
border-color: #FFD46A;
}
.my-custom-timeline .tl-btn.register-btn {
background-color: #ECFFE4;
border-color: #E9FFDF
}
.my-custom-timeline .left .tl-btn.licence-btn,
.my-custom-timeline .left .tl-btn.order-btn,
.my-custom-timeline .left .tl-btn.register-btn,
.my-custom-timeline .left .tl-btn.support-btn {
flex-direction: row-reverse;
}
.my-custom-timeline ul {
margin: 0;
padding: 0;
}
.my-custom-timeline ul li {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.my-custom-timeline .left .tl-box .time-wrapper {
justify-content: flex-start;
}
.my-custom-timeline .tl-box .time-wrapper {
justify-content: flex-end;
margin-top: 5px;
}
.my-custom-timeline .tl-box .time-wrapper .time {
font-size: 11px;
color: #505050;
line-height: 1;
}
.my-custom-timeline .tl-box .end-date {
font-size: 10px;
padding: 3px;
background: #FF3A6E;
color: #ffffff;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
font-weight: 600;
}
.my-custom-timeline .timeline-schedule {
max-width: 380px;
width: 100%;
padding: 15px;
box-shadow: 0px 0px 26.830137252807617px 0px #0000000D;
font-size: 18px;
}
.my-custom-timeline .tl-schedule {
display: flex;
align-items: center;
padding: 8px 0;
}
.my-custom-timeline .tl-schedule.border-top {
border-top: 1px solid #EBEBEB;
}
.my-custom-timeline .tl-schedule-l {
max-width: 30%;
width: 100%;
text-align: center;
}
.my-custom-timeline .tl-schedule-r {
max-width: 70%;
width: 100%;
}
.my-custom-timeline ul li a {
color: #0CAF60;
text-decoration: none;
}
@media screen and (max-width:767px) {
.my-custom-timeline .tl-container.right {
left: 0%;
}
.my-custom-timeline .tl-container.left {
text-align: left;
}
.my-custom-timeline .tl-container {
margin-bottom: 10px;
max-width: 100%;
text-align: left;
padding: 0px 15px;
}
.my-custom-timeline .tl-container:not(:last-of-type) {
margin-bottom: 25px;
}
.my-custom-timeline .custom-timeline-inner {
padding: 25px 0;
}
.my-custom-timeline .tl-box {
text-align: left;
}
.my-custom-timeline .timeline:before {
z-index: -1;
top: 0px;
}
.my-custom-timeline .support-time::before,
.my-custom-timeline .support-time::after {
display: none;
}
}
.custom-timeline-2 .info-card .card-body h3 {
font-size: 24px;
}
.register-timeline {
background: #4CAF50 !important;
}
.last-login-timeline {
background: #607D8B !important;
}
.wishlist-timeline {
background: #32d7a2 !important;
}
.dlt-wishlist-timeline {
background: #9E9E9E !important;
}
.add-cart-timeline {
background: #FFC107 !important;
}
.dlt-cart-timeline {
background: #795548 !important;
}
.order-timeline {
background: #2196F3 !important;
}
.report-filter {
flex: 1;
gap: 6px;
justify-content: end;
}
.custom-width .choices {
width: 300px;
}
/* timeline css end */
.mail-product {
margin-right: 50px;
}
.modal-body .row.modal-shipping-row .shipping-text {
margin-left: 0 !important;
}
.modal-body textarea.pc-tinymce-2 {
width: 100%;
}
.modal-bottom-btn-wrapper {
justify-content: space-between;
}
.modal-bottom-btn-wrapper .col-md-2:last-of-type a {
margin-right: 0 !important;
}
.card-body .card-header.stock-mange-note {
background: #b1b1b194;
}
.card-body .card-header.order-create-note {
background: #3ec9d652;
}
.card-body .card-header.order-status-note {
background: #E9FFDF;
}
.card-body .card-header.admin-private-note {
background: rgba(255, 174, 189, 0.31);
}
.card-body .card-header.customer-note {
background: rgba(244, 180, 26, 0.15);
}
.card-body .card-header.note-bg-color {
padding: 15px 10px 0 15px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.cart-time-wrapper .btn i {
color: #ff3a6e !important;
}
.cart-time-wrapper {
display: flex;
align-items: center;
justify-content: end;
margin-top: 10px;
}
.cart-time-wrapper .time {
background-color: transparent;
font-size: 10px;
}
.order-report-row .card-header {
align-items: center;
flex-wrap: wrap;
height: 100%;
}
.order-report-row .card-header span {
color: #000;
}
.order-report-row.order-report-category .card-header span {
font-size: 16px;
max-width: 50%;
width: 100%;
}
.order-report-row.order-report-category,
.order-sale-report,
.order-report-row {
margin-bottom: 30px;
}
.order-report-row .card,
.order-sale-report .card {
display: flex;
flex-direction: column;
height: 100%;
}
.order-sale-report .card .card-header {
height: 100%;
display: flex;
align-items: center;
}
.card-input-wrapper {
gap: 10px;
}
.report-text-label {
color: #6FD943;
}
.dash-sidebar .dash-micon .custom_svg {
width: 22px;
height: 22px;
}
/********* 20-10-23 ***********/
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
background: #75DA4840 !important;
}
.ti.ti-trash.text-white.py-1 {
color: #D80027 !important;
}
.btn:hover .ti.ti-trash.text-white.py-1 {
color: #fff !important;
}
.dataTable tbody tr td .btn-danger:hover .ti.ti-trash.text-white.py-1 {
color: #fff !important;
}
.sub-total-footer ul li {
gap: 20px;
}
.sub-total-footer ul li span {
width: 130px;
text-align: right;
}
.badge-same {
width: 200px;
}
.badge-80 {
width: 80px;
}
.table.dataTable-table .input-group .form-control {
background-color: #f5f5f5;
border-color: transparent;
}
.table.dataTable-table tr td,
.table.dataTable-table tr th {
white-space: normal;
}
.plan-active-status {
position: absolute;
right: 0;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
-ms-border-radius: 10px 0 0 10px;
-o-border-radius: 10px 0 0 10px;
}
.switch-on.btn {
background-color: var(--theme-color);
border-color: var(--theme-color);
color: var(--bs-white);
}
.order-sale-report .btn {
padding: 12px !important;
}
.order-sale-report .btn svg {
width: 26px;
height: 23px;
}
.order-sale-report .btn:hover svg path {
fill: #ffffff;
}
span.badge.rounded.p-2.m-1.px-3.bg-dark {
min-width: 100px;
max-width: 212px;
width: 100%;
text-align: left;
}
.theme-link {
position: absolute;
opacity: 0;
z-index: -1;
width: fit-content;
}
.upgrade-plan-model-card {
background-color: #f5f5f5;
padding: 15px;
margin: auto;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
-moz-border-radius: 15px !important;
-ms-border-radius: 15px !important;
-o-border-radius: 15px !important;
}
.upgrade-plan-model-card .badge.bg-warning {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
}
.btn-dark.text-white {
color: #1c232f !important;
}
.btn-dark.text-white:hover {
color: #fff !important;
}
.theme-set-tab {
flex-direction: row;
gap: 20px;
padding: 20px;
}
.sticy-tab {
position: fixed;
width: 100%;
top: 0;
background-color: #fff;
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
max-width: calc(100% - 570px / 2);
right: 0;
}
.switch.btn {
min-width: 4.5rem;
min-height: calc(2em + .75rem + 2px);
}
.new-login-design {
padding: 20px !important;
background-color: #fff;
border-radius: 20px;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
.login-bg-1 {
position: absolute;
bottom: 0;
left: 22%;
max-height: 500px;
display: block;
}
.register-page .login-bg-1 {
display: none;
}
.login-bg-2 {
position: absolute;
bottom: 0;
right: 10%;
max-height: 500px;
display: block;
}
.register-page .login-bg-2 {
display: none;
}
.auth-wrapper.auth-v3 .bg-auth-side.login-page {
bottom: 0;
top: 0;
border-radius: 0;
}
.login-bg-3 {
position: absolute;
bottom: 0;
left: 14%;
max-height: 500px;
display: none;
}
.register-page .login-bg-3 {
display: block;
}
.login-bg-4 {
position: absolute;
bottom: 0;
right: 22%;
max-height: 500px;
display: none;
}
.register-page .login-bg-4 {
display: block;
}
.register-page.auth-wrapper.auth-v3 .bg-auth-side.login-page {
left: 0;
right: 50%;
}
@media (max-width:1439px) {
.login-bg-1 {
max-height: 400px;
left: 19%;
}
.login-bg-2 {
max-width: 400px;
}
.login-bg-3 {
left: 7%;
}
.login-bg-4 {
right: 15%;
}
}
@media (max-width:1199px) {
.login-bg-1 {
left: 14%;
}
.login-bg-2 {
right: 0;
}
.auth-wrapper .auth-content {
width: 85vw;
justify-content: start;
gap: 100px;
}
.auth-wrapper .bg-auth-side {
display: block;
}
.login-bg-3 {
left: 0;
max-width: 330px;
}
.login-bg-4 {
right: 6%;
}
}
@media (max-width:991px) {
.login-bg-1,
.login-bg-2,
.login-bg-3,
.login-bg-4,
.auth-wrapper .bg-auth-side {
display: none;
}
.register-page .login-bg-3,
.register-page .login-bg-4 {
display: none;
}
.auth-wrapper .auth-content {
width: 100%;
gap: 20px;
}
}
@media (max-width:767px) {
/* 16.12 */
.card .card-header {
padding: 15px;
}
.card .card-header:not(.border-0) h5:after {
left: -15px;
}
.auth-wrapper .auth-content .card {
padding: 10px;
}
.modal-body .auth-wrapper .auth-content .card .card-body {
padding: 15px 0;
}
.order-history-tbl tr td {
padding: 10px 10px;
}
.flipdown .rotor-group {
height: 65px;
width: 65px;
padding: 6px;
}
.flipdown .rotor-group-heading:before {
line-height: 28px;
font-size: 12px;
}
.flipdown .rotor {
font-size: 17px;
}
.mini-wish-body .btn {
max-width: 200px;
}
.card-body {
padding: 15px !important;
}
.card-body .setting-card .logo-content {
margin-top: 10px !important;
}
.profile-achievements {
gap: 15px;
margin-top: 30px;
}
.account-info {
gap: 30px;
}
.account-info .profile-pic {
width: 100px;
}
}
@media (max-width:575px) {
#progressbar li {
flex: 0 0 110px;
}
#progressbar {
overflow-x: scroll;
}
}
.btn.order-not-dlt:hover .ti.ti-trash.text-white.py-1 {
color: #D80027 !important;
}
.btn-primary:hover svg path {
fill: #fff;
stroke: #fff;
}
.btn-info:hover svg path {
fill: #fff;
}
.bandonwishmess.btn-primary:hover i svg path {
fill: var(--bs-btn-color) !important;
}
.bg-light-secondary:hover {
background: #e2e3e5;
color: #6c757d;
}
.nav-pills .nav-item a {
cursor: pointer;
}
body.theme-1 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, #0caf604d 3.46%, #0caf604d 99.86%), #0caf604d !important;
color: #0a9552 !important;
}
body.theme-1 .theme-avtar.bg-primary svg path {
fill: #0a9552;
stroke: #0a9552;
}
body.theme-2 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, rgba(88, 78, 210, 0.30) 3.46%, rgba(88, 78, 210, 0.30) 99.86%), rgba(88, 78, 210, 0.30) !important;
color: #584ED2 !important;
}
body.theme-2 .theme-avtar.bg-primary svg path {
fill: #584ED2;
stroke: #584ED2;
}
body.theme-3 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, #E9FFDF 3.46%, #E9FFDF 99.86%), #E9FFDF !important;
color: #6FD943 !important;
}
body.theme-3 .theme-avtar.bg-primary svg path {
fill: #0a9552;
stroke: #0a9552;
}
body.theme-4 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, rgba(20, 83, 136, 0.30) 3.46%, rgba(20, 83, 136, 0.30) 99.86%), rgba(20, 83, 136, 0.30) !important;
color: #145388 !important;
}
body.theme-4 .theme-avtar.bg-primary svg path {
fill: #145388;
stroke: #145388;
}
body.theme-5 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, rgba(185, 64, 107, 0.25) 3.46%, rgba(185, 64, 107, 0.25) 99.86%), rgba(185, 64, 107, 0.25) !important;
color: #B9406B !important;
}
body.theme-5 .theme-avtar.bg-primary svg path {
fill: #B9406B;
stroke: #B9406B;
}
body.theme-6 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, rgba(0, 142, 204, 0.30) 3.46%, rgba(0, 142, 204, 0.30) 99.86%), rgba(0, 142, 204, 0.30) !important;
color: #008ECC !important;
}
body.theme-6 .theme-avtar.bg-primary svg path {
fill: #008ECC;
stroke: #008ECC;
}
body.theme-7 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, rgba(146, 44, 136, 0.25) 3.46%, rgba(146, 44, 136, 0.25) 99.86%), rgba(146, 44, 136, 0.25) !important;
color: #922C88 !important;
}
body.theme-7 .theme-avtar.bg-primary svg path {
fill: #922C88;
stroke: #922C88;
}
body.theme-8 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, rgba(192, 161, 69, 0.25) 3.46%, rgba(192, 161, 69, 0.25) 99.86%), rgba(192, 161, 69, 0.25) !important;
color: #C0A145 !important;
}
body.theme-8 .theme-avtar.bg-primary svg path {
fill: #C0A145;
stroke: #C0A145;
}
body.theme-9 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, rgba(72, 73, 75, 0.30) 3.46%, rgba(72, 73, 75, 0.30) 99.86%), rgba(72, 73, 75, 0.30) !important;
color: #48494B !important;
}
body.theme-9 .theme-avtar.bg-primary svg path {
fill: #48494B;
stroke: #48494B;
}
body.theme-10 .theme-avtar.bg-primary:hover {
background: linear-gradient(141.55deg, rgba(12, 119, 133, 0.30) 3.46%, rgba(12, 119, 133, 0.30) 99.86%), rgba(12, 119, 133, 0.30) !important;
color: #0C7785 !important;
}
body.theme-10 .theme-avtar.bg-primary svg path {
fill: #0C7785;
stroke: #0C7785;
}
body .theme-avtar.bg-primary:hover i {
color: var(--bs-btn-color) !important;
}
.modal-dialog {
margin-top: 20px;
}
.card-body .card-bottom-content .product-title-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-body-nop #product-listing .toacart {
display: flex;
flex-direction: column;
height: 100%;
}
.product-body-nop .card {
height: 100%;
}
/* DropZone */
img.rounded {
width: 100%;
}
.menu-tab-view .accordion-button {
position: relative;
padding: 10px 15px !important;
border-radius: 5px !important;
/* background-color: var(--bs-accordion-active-bg); */
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
-o-border-radius: 5px !important;
}
.menu-tab-view .accordion-button::after {
display: none;
}
.menu-tab-view .accordion-body {
padding: 10px 15px 10px 15px;
}
.sop-card.card {
height: 100vh;
overflow: auto;
transition: opacity .5s;
zoom: 0.9;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
}
.sop-card.card::-webkit-scrollbar {
width: 0px;
}
.shop-theme-wrapper {
border-radius: 20px;
overflow: hidden;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
.preview-header-main {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
align-items: center;
}
.preview-header {
align-items: center;
width: 100%;
}
.preview-header-right,
.preview-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.ScrollStyle {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transition: 10s all ease-in-out;
-webkit-transition: 10s all ease-in-out;
-moz-transition: 10s all ease-in-out;
-ms-transition: 10s all ease-in-out;
-o-transition: 10s all ease-in-out;
}
.highlighted {
border: 4px solid #2C6ECB;
padding: 20px;
position: relative;
}
.custome_tool_bar {
float: right;
}
.custome_tool_bar {
float: right;
position: absolute;
right: 0;
gap: 5px;
z-index: 9999999;
/* top: -24px; */
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.option-button {
background-color: #2C6ECB !important;
border: 1px solid #2C6ECB !important;
}
#default_tool_bar {
position: absolute;
top: 10px;
right: 10px;
display: none;
}
#default_tool_bar button {
margin-left: 5px;
}
.social_icon {
width: 50px;
height: 50px;
background: rgb(157 183 205 / 30%);
}
.right-content header {
position: relative;
/* margin-top: 35px; */
}
.right-content .site-footer,
.right-content .shop-reviews {
overflow: visible !important;
}
.custome_tool_bar .option-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
color: #fff;
}
.custome_tool_bar .option-button ::before {
font-size: 20px;
}
.sidebar_form .card-body .form-group img {
object-fit: scale-down;
border: 1px solid #F0F0F0;
margin-top: 10px;
}
/* updated css */
.sop-card .card-body .right-content a:not([class]) {
color: inherit;
}
.animate-charcter {
text-transform: capitalize;
background-image: linear-gradient(-225deg,
#231557 0%,
#44107A 29%,
#FF1361 67%,
#FFF800 100%);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
.animate-charcter {
animation: blink 1s linear infinite, textclip 2s linear infinite;
-webkit-animation: blink 1s linear infinite, textclip 2s linear infinite;
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
.theme-card .theme-bottom-content {
display: flex;
align-items: center;
margin-top: 10px;
}
.theme-card .theme-card-lable {
display: inline-block;
margin-right: 12px;
}
.theme-card .theme-card-button {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 15px;
}
.theme-card .theme-card-button button {
background-color: #0095ff;
color: #ffff;
}
.theme-card .theme-card-button button:hover {
background-color: #0095ff9a;
border: 1px solid #0095ff;
}
.dashboard-theme-card .theme-image {
position: relative;
height: 400px;
}
.theme-card .theme-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transition: 3s all ease;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.dashboard-theme-card .theme-card-button .btn2 {
background-color: #0095ff;
color: #ffff;
border-color: #0095ff;
}
.dashboard-theme-card {
height: 100%;
width: 100%;
}
.theme-image .badges {
font-size: 10px;
position: absolute;
top: 0;
left: -10px;
display: block;
padding: 30px 15px;
background-size: 207px;
background-position: center;
color: #fff !important;
background-color: transparent !important;
z-index: 1;
background-image: url('data:image/svg+xml,');
}
.theme-card .theme-image:hover img {
object-position: bottom;
}
.support-ticket-div .order-history-tbl tbody tr td .btn {
padding: 6px 7px;
}
.order-history-frame {
overflow-x: auto;
}
/* offer notification */
.announcebar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #013D29;
padding: 11px;
color: #fff;
z-index: 9999;
}
.announcebar p {
margin-bottom: 0;
}
.color-wrp {
display: flex;
align-items: center;
margin-top: 15px;
}
.color-wrp .color-picker-wrp {
width: 100px;
}
.color-wrp .color-picker-wrp input[type="color"] {
background-color: #fff;
height: 55px;
cursor: pointer;
border-radius: 3px;
margin: 0px;
padding: 0px;
border: 0;
margin-bottom: 5px;
margin-left: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
}
/* Bundle product css */
.bundle-product-slider .wishlist-btn {
position: absolute;
top: 10px;
right: 15px;
padding: 0;
border: 0;
background: none;
}
.bundle-product-slider .wishlist-btn a {
position: unset;
padding: 0;
}
.bundle-product-slider .product-btn-wrp button svg {
height: 16px;
width: 16px;
}
.bundle-product-slider .product-content {
margin-top: 15px;
}
.bundle-product-slider .product-content h3 {
font: var(--h4);
margin-bottom: 15px;
}
.bundle-product-slider .product-content .reviews-stars-wrap {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.bundle-product-slider .product-content-bottom {
margin: 0;
}
.bundle-product-slider .product-content-bottom .price {
justify-content: start;
}
.choose_file_custom {
display: none;
}
/* Product-quick-view css */
.product-card .product-card-inner {
overflow: hidden;
position: relative;
width: 100%;
}
.product-btn-wrp {
position: absolute;
right: 15px;
top: 40px;
display: flex;
flex-direction: column;
gap: 10px;
transform: translateX(200%);
transition: all 500ms ease-in-out 0s;
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
-webkit-transition: all 500ms ease-in-out 0s;
-moz-transition: all 500ms ease-in-out 0s;
-ms-transition: all 500ms ease-in-out 0s;
-o-transition: all 500ms ease-in-out 0s;
}
.product-card:hover .product-btn-wrp {
transform: translate(0);
opacity: 1;
visibility: visible;
-webkit-transform: translate(0);
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
}
.product-btn-wrp button {
border: 0;
background: none;
padding: 0;
}
.product-btn-wrp button a {
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--second-color);
padding: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.product-btn-wrp button a:hover {
background-color: var(--theme-color);
}
.product-btn-wrp button a svg path {
transition: all 500ms ease-in-out 0s;
-webkit-transition: all 500ms ease-in-out 0s;
-moz-transition: all 500ms ease-in-out 0s;
-ms-transition: all 500ms ease-in-out 0s;
-o-transition: all 500ms ease-in-out 0s;
}
.product-btn-wrp button a svg path {
fill: var(--white);
}
/* Product compare css */
.header-style-one li.compare-header a svg {
width: 20px;
height: 20px;
margin: 0;
}
.header-style-one li.compare-header a svg path {
transition: all 500ms ease-in-out 0s;
-webkit-transition: all 500ms ease-in-out 0s;
-moz-transition: all 500ms ease-in-out 0s;
-ms-transition: all 500ms ease-in-out 0s;
-o-transition: all 500ms ease-in-out 0s;
}
@media (max-width:767px) {
.header-style-one li.compare-header a svg {
width: 18px;
height: 18px;
}
}
/* spam prevent css start */
.external-btns {
position: fixed;
bottom: 10px;
right: 30px;
font-size: 14px;
transition: bottom .2s;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 2;
-webkit-transition: bottom .2s;
-moz-transition: bottom .2s;
-ms-transition: bottom .2s;
-o-transition: bottom .2s;
}
.external-left-btn {
width: 70px;
height: auto;
position: fixed;
left: -70px;
top: 50%;
z-index: 2;
-webkit-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
}
.external-left-btn .show-btn {
position: absolute;
right: -55px;
z-index: 1;
height: 55px;
width: 55px;
border: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
padding: 0;
box-shadow: 0 9px 9px -1px rgba(81, 69, 157, 0.3);
font-size: 20px;
border-radius: 0 8px 8px 0px;
-webkit-border-radius: 0 8px 8px 0px;
-moz-border-radius: 0 8px 8px 0px;
-ms-border-radius: 0 8px 8px 0px;
-o-border-radius: 0 8px 8px 0px;
}
.external-left-btn .left-btn-inner {
display: flex;
height: auto;
position: relative;
z-index: 1;
background-color: #fff;
flex-direction: column;
gap: 10px;
align-items: center;
padding: 10px;
}
.external-left-btn.active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
box-shadow: 0 0 9.8px 0.2px rgba(0, 0, 0, 0.14);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
}
.external-left-btn .donation-side-btn,
.external-left-btn .free-shipping-button-div .free-shipping-button,
.external-left-btn .Coupon-btn,
.external-left-btn .product-catelog-side-btn,
.external-left-btn .product-compare-side-btn {
padding: 0;
}
/* spam prevent css end */
.modal-popup .no-product-image {
position: relative;
display: block;
width: 100%;
padding-top: 84%;
}
.modal-popup .no-product-wrp {
max-width: 600px;
margin: auto;
}
.modal-popup .no-product-image img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.modal-popup .compare-thumbs a {
position: relative;
display: block;
width: 100%;
padding-top: 68%;
}
.modal-popup .compare-thumbs a img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
object-fit: scale-down;
}
.card .quantity.buttons_added input {
padding: 10px;
display: inline-block;
width: auto;
border: none;
}
.modal-popup .compare-content-list .list p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin: 10px 0;
}
.product-btn-wrp button a svg {
height: 16px;
width: 16px;
}
.product-card .card-top {
position: relative;
}
.product-card .compare-btn a svg {
width: 21px;
height: 21px;
}
.pdp-cart-btn-wrp,
.pdp-add-to-cart-btn,
.product-content-bottom,
.pdp-counter,
.product-detail-bttom-stuff {
gap: 10px;
}
/** Plan Module*/
.plan-module {
height: 400px;
overflow: hidden;
overflow-y: auto;
}
.select-themes .uploaded-pics {
background-color: var(--bs-white);
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
.select-themes .theme-label,
.event-cards .product-content-top .enable-label {
position: absolute;
top: 10px;
left: 10px;
line-height: 1;
color: var(--bs-white);
background-color: var(--theme-color);
padding: 7px 10px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
z-index: 3;
}
.select-themes .theme-label::after {
content: "";
position: absolute;
right: -14px;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-left: 14px solid var(--active-theme-border);
top: 0;
border-bottom: 14px solid transparent;
}
.select-swich .custom-control-label,
.trial-switch .form-label {
flex: 1;
}
/* td.text-end {
display: flex;
} */
/* flipdown */
.flipdown .rotor-group {
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.flipdown .rotor-group .rotor-group-heading {
flex: 100%;
}
.flipdown .rotor {
width: auto;
}
/* all-social-media-btn css start*/
.all-social-media-btn {
gap: 10px;
margin-top: 10px;
}
.all-social-media-btn:not(:last-of-type) {
margin-right: 10px;
}
.all-social-media-btn .btn-img img {
max-width: 175px;
width: 100%;
object-fit: scale-down;
height: 42px;
}
@media (max-width: 575px) {
.register-page .form-footer,
.all-social-media-btn {
justify-content: center;
}
}
/* all-social-media-btn css end*/
/* .addon-side-btn */
.addon-side-btn {
position: fixed;
left: 0;
top: 150px;
z-index: 10;
transition: all 0.15s ease-in-out;
display: flex;
flex-direction: column;
gap: 15px;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
}
/* cart-open pct-btn */
body.cartOpen .pct-customizer .pct-c-btn,
body.wishOpen .pct-customizer .pct-c-btn {
right: 0;
}
/* app-seeting-tab */
.app-seeting-tab {
flex-direction: row;
gap: 20px;
padding: 20px;
}
/* for a external btns */
.site-footer {
z-index: 3;
}
/* subscribe for admin */
@media (min-width: 992px) {
.sop-card .right-content .subscribe-overlay {
width: 66.66666667%;
}
.sop-card .right-content .subscribe-popup {
max-width: 66.66666667%;
width: 100%;
background-color: transparent;
padding: 0;
left: 0;
right: unset;
}
.sop-card .right-content .subscribe-popup-wrp {
max-width: 550px;
width: 100%;
margin: 0 auto;
padding: 60px 50px;
background: var(--theme-color);
position: relative;
}
.sop-card .right-content .pct-customizer {
left: calc(100% - (33.33% + 23px));
}
.sop-card .right-content .pct-customizer.active {
left: calc(100% - (33.33% + 360px));
}
.sop-card .right-content .pct-customizer .pct-c-content {
display: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.sop-card .right-content .pct-customizer.active .pct-c-content {
display: block;
}
}
.theme-signin-btns {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
img[src="#"],
img[src=""],
img[src=" "] {
display: none;
}
.checkout_amount.order-paymentcol {
background-color: var(--theme-color);
}
.order-paycol-inner img {
max-width: 50px;
width: 100%;
}
.order-paymentcol {
/* max-width: 100%; */
flex: 1;
}
.payment-ttl-left span {
font-size: 14px;
}
.order-history-frame .btn {
padding: 6px 7px !important;
}
#progressbar li {
width: -moz-available;
}
.order-paycol-inner {
padding: 0 14px;
}
.product_filter .pagination .page-item {
width: 30px;
height: 30px;
}
/* pagination css */
.pagination-wrp {
flex-wrap: wrap;
gap: 15px;
width: 100%;
}
.pagination {
gap: 5px;
margin: 0;
border-radius: 0 !important;
}
.pagination li span,
.pagination li a {
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-size: 14px;
height: 35px;
width: 35px;
padding: 0;
border-radius: 4px !important;
}
.pagination .page-item:not(:first-child) .page-link {
margin: 0;
}
.nex-prev-btn-wrp {
gap: 10px;
}
.nex-prev-btn-wrp svg path {
fill: #fff;
stroke: none !important;
}
.nex-prev-btn-wrp .arrow-btn {
padding: 0.575rem;
background: transparent !important;
}
body.theme-1 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-1 .nex-prev-btn-wrp .btn svg path {
fill: #0a9552;
}
body.theme-2 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-2 .nex-prev-btn-wrp .btn svg path {
fill: #584ed2;
}
body.theme-3 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-3 .nex-prev-btn-wrp .btn svg path {
fill: #6fd943;
}
body.theme-4 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-4 .nex-prev-btn-wrp .btn svg path {
fill: #145388;
}
body.theme-5 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-5 .nex-prev-btn-wrp .btn svg path {
fill: #b9406b;
}
body.theme-6 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-6 .nex-prev-btn-wrp .btn svg path {
fill: #008ecc;
}
body.theme-7 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-7 .nex-prev-btn-wrp .btn svg path {
fill: #922c88;
}
body.theme-8 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-8 .nex-prev-btn-wrp .btn svg path {
fill: #c0a145;
}
body.theme-9 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-9 .nex-prev-btn-wrp .btn svg path {
fill: #48494b;
}
body.theme-10 .nex-prev-btn-wrp .arrow-btn svg path,
body.theme-10 .nex-prev-btn-wrp .btn svg path {
fill: #0c7785;
}
body.custom-color .nex-prev-btn-wrp .arrow-btn svg path,
body.custom-color .nex-prev-btn-wrp .btn svg path {
fill: var(--color-customColor);
}
body.theme-1 .nex-prev-btn-wrp .btn {
color: #0a9552;
border-radius: 4px;
border-color: #0a9552;
}
body.theme-2 .nex-prev-btn-wrp .btn {
color: #584ed2;
border-radius: 4px;
border-color: #584ed2;
}
body.theme-3 .nex-prev-btn-wrp .btn {
color: #6fd943;
border-radius: 4px;
border-color: #6fd943;
}
body.theme-4 .nex-prev-btn-wrp .btn {
color: #145388;
border-radius: 4px;
border-color: #145388;
}
body.theme-5 .nex-prev-btn-wrp .btn {
color: #b9406b;
border-radius: 4px;
border-color: #b9406b;
}
body.theme-6 .nex-prev-btn-wrp .btn {
color: #008ecc;
border-radius: 4px;
border-color: #008ecc;
}
body.theme-7 .nex-prev-btn-wrp .btn {
color: #922c88;
border-radius: 4px;
border-color: #922c88;
}
body.theme-8 .nex-prev-btn-wrp .btn {
color: #c0a145;
border-radius: 4px;
border-color: #c0a145;
}
body.theme-9 .nex-prev-btn-wrp .btn {
color: #48494b;
border-radius: 4px;
border-color: #48494b;
}
body.theme-10 .nex-prev-btn-wrp .btn {
color: #0c7785;
border-radius: 4px;
border-color: #0c7785;
}
body.custom-color .nex-prev-btn-wrp .btn {
color: var(--color-customColor);
border-radius: 4px;
border-color: var(--color-customColor);
}
.nex-prev-btn-wrp .btn:hover {
color: #ffffff !important;
}
.nex-prev-btn-wrp .btn:not(.arrow-btn):hover svg path {
fill: #fff !important;
}
.btn-addnew-project {
border: 1px solid #f1f1f1;
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
justify-content: center;
}
.btn-addnew-project .proj-add-icon {
width: 35px;
height: 35px;
border-radius: 4px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.nex-prev-btn-wrp .btn:hover {
color: var(--bs-btn-hover-color);
text-decoration: none;
background-color: var(--bs-btn-hover-bg);
border-color: var(--bs-btn-hover-border-color);
}
.nex-prev-btn-wrp .btn svg path {
transition: all 500ms ease-in-out;
}
.nex-prev-btn-wrp .btn {
gap: 8px;
background: transparent;
transition: all 500ms ease-in-out;
}
.product-grid .card {
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
}
.product-grid .card h6 {
margin-bottom: 5px !important;
}
.product-grid .card .card-header .card-header-right .btn.dropdown-toggle {
cursor: pointer;
}
.order-card .user-image {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.order-card .user-image .dropdown-item {
width: auto;
}
.order-card .user-image .dropdown-item i {
font-size: 22px;
}
.order-card {
width: 100%;
}
.order-card-wrp {
row-gap: 25px;
}
.order-card .btn:hover i,
.order-card .btn i {
color: #000000;
}
.product-grid .card .card-header .card-header-right {
right: 16px !important;
top: 25px !important;
}
.product-grid .card .card-header .card-header-right .btn.dropdown-toggle {
top: auto !important;
right: auto !important;
}
.product-grid .card .card-header .d-flex {
flex: 1;
max-width: 95%;
width: 100%;
}
.product-grid .card h6 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.product-grid .card .card-image {
flex: 0 0 50px;
}
@media screen and (max-width:767px) {
.pagination-content-wrp .pagination {
display: none;
}
.order-card-wrp {
row-gap: 20px;
}
}
@media screen and (max-width:575px) {
.pagination-content-wrp {
justify-content: center !important;
flex-direction: column;
}
}
@media screen and (max-width:490px) {
.pagination-content-wrp {
margin-bottom: 10px;
}
}
@media (min-width:1400px) and (max-width:1480px) {
.order-card-wrp .card-body {
padding-left: 7px !important;
padding-right: 7px !important;
}
}
/* 16.12 */
.choose-files input {
display: none;
}
.choose-files {
text-align: center;
}
@media screen and (max-width:1199px) {
.plan-order-sumry-content-wrp {
gap: 20px;
}
}
@media screen and (max-width:575px) {
.card-body {
padding: 10px 15px;
}
.custom-width .choices {
width: auto;
}
}
.dash-header .dash-h-item .cust-btn i {
font-size: 21px;
}
.plan-order-sumry-wrp .card .tab-pane {
padding: 15px;
}
/* sidebar new-css — logo strip detached as liquid-glass pill (same idea as .header-wrapper) */
.dash-sidebar .navbar-wrapper {
padding-top: 12px;
padding-inline: 12px;
}
.dash-sidebar .navbar-wrapper > .m-header {
margin-block-end: 12px;
margin-inline: auto;
width: 100%;
max-width: 100%;
min-height: 5rem;
padding: 0.65rem 1.1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
box-shadow:
0 16px 44px rgba(15, 23, 42, 0.09),
0 4px 14px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
isolation: isolate;
}
.dash-sidebar.light-sidebar .navbar-wrapper > .m-header {
border-color: rgba(6, 6, 6, 0.1);
background: rgba(255, 255, 255, 0.55);
box-shadow:
0 16px 44px rgba(123, 45, 66, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@supports not (backdrop-filter: blur(1px)) {
.dash-sidebar .navbar-wrapper > .m-header {
background: rgba(255, 255, 255, 0.96);
}
}
.dash-sidebar .navbar-wrapper > .m-header a,
.dash-sidebar .m-header a {
max-width: 230px;
width: 100%;
padding: 6px 0;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.dash-sidebar .navbar-wrapper > .m-header img,
.dash-sidebar .m-header img {
width: auto;
max-width: 100%;
max-height: 64px;
object-fit: contain;
}
/* Sidebar logos: expanded = full brand centered; collapsed (.minimenu) = compact mark only */
body:not(.minimenu) .dash-sidebar .m-header .sidebar-logo-minified {
display: none !important;
visibility: hidden !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
border: 0 !important;
}
body:not(.minimenu) .dash-sidebar .m-header .sidebar-logo-expanded {
display: block !important;
margin-inline: auto !important;
}
body:not(.minimenu) .dash-sidebar .m-header .b-brand {
justify-content: center !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
}
.minimenu .dash-sidebar .m-header .sidebar-logo-expanded {
display: none !important;
}
.minimenu .dash-sidebar .m-header .sidebar-logo-minified {
display: block !important;
visibility: visible !important;
position: relative !important;
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
object-fit: cover;
border-radius: 50%;
}
/* Sidebar search — same liquid-glass pill as .m-header */
.dash-sidebar .sidebar-input {
margin: 0 0 1rem !important;
padding: 0.6rem 1rem !important;
display: flex !important;
align-items: center;
gap: 0.65rem;
width: 100%;
box-sizing: border-box;
border-radius: 9999px !important;
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.4) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
box-shadow:
0 16px 44px rgba(15, 23, 42, 0.09),
0 4px 14px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
isolation: isolate;
}
.dash-sidebar.light-sidebar .sidebar-input {
border-color: rgba(6, 6, 6, 0.1);
background: rgba(255, 255, 255, 0.55) !important;
box-shadow:
0 16px 44px rgba(123, 45, 66, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@supports not (backdrop-filter: blur(1px)) {
.dash-sidebar .sidebar-input {
background: rgba(255, 255, 255, 0.96) !important;
}
}
.dash-sidebar .sidebar-input i {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
flex-shrink: 0;
font-size: 1.15rem;
color: rgba(6, 6, 6, 0.45) !important;
}
.dash-sidebar .sidebar-input .form-control {
margin: 0 !important;
padding: 0.35rem 0 !important;
flex: 1 1 auto;
min-width: 0;
background: transparent !important;
border: none !important;
box-shadow: none !important;
font-size: 0.9375rem;
}
.minimenu .dash-sidebar .navbar-wrapper {
padding-inline: 6px;
}
.minimenu .dash-sidebar {
width: 84px;
}
.minimenu .dash-sidebar .navbar-wrapper > .m-header {
min-height: 3.25rem;
padding: 6px 8px;
margin-block-end: 8px;
}
.minimenu .dash-sidebar .navbar-wrapper > .m-header img,
.minimenu .dash-sidebar .m-header img {
max-height: 44px;
}
.minimenu .dash-sidebar .m-header .sidebar-logo-minified {
max-height: 44px !important;
max-width: 44px !important;
}
.minimenu .dash-sidebar .sidebar-input {
padding: 0.45rem 0.75rem !important;
margin-bottom: 0.65rem !important;
cursor: pointer;
}
.minimenu .dash-sidebar .sidebar-input input.form-control {
cursor: pointer;
}
/* Minimized sidebar: keep icons fully visible and hide SimpleBar scrollbar marker */
.minimenu .dash-sidebar .simplebar-content-wrapper {
padding-inline: 6px !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
.minimenu .dash-sidebar .simplebar-content-wrapper::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none;
}
.minimenu .dash-sidebar .simplebar-track.simplebar-vertical {
width: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
.minimenu .dash-sidebar .dash-link {
justify-content: center;
gap: 0;
padding-inline: 10px;
min-height: 46px;
}
.minimenu .dash-sidebar .dash-link .dash-micon {
margin-inline: auto;
}
.minimenu .dash-sidebar .dash-link .dash-micon i,
.minimenu .dash-sidebar .dash-link .dash-micon .custom_svg,
.minimenu .dash-sidebar .dash-link .dash-micon svg {
font-size: 21px;
width: 21px;
height: 21px;
}
.minimenu .dash-sidebar .dash-item:hover > .dash-link {
width: calc(200px + 84px);
}
/* Minimized sidebar hover/flyout must escape clipping and stay on top */
.minimenu .dash-sidebar {
z-index: 1060;
}
.minimenu .dash-sidebar .navbar-wrapper,
.minimenu .dash-sidebar .navbar-content,
.minimenu .dash-sidebar .simplebar-wrapper,
.minimenu .dash-sidebar .simplebar-mask,
.minimenu .dash-sidebar .simplebar-offset,
.minimenu .dash-sidebar .simplebar-content-wrapper,
.minimenu .dash-sidebar .simplebar-content {
overflow: visible !important;
}
.minimenu .dash-sidebar .dash-item {
position: relative;
}
.minimenu .dash-sidebar .dash-item:hover {
z-index: 1075;
}
.minimenu .dash-sidebar .dash-item:hover > .dash-link,
.minimenu .dash-sidebar .dash-item:hover > .dash-submenu {
position: relative;
z-index: 1076;
}
.dash-sidebar .dash-link {
padding: 10px;
font-size: 15px;
font-weight: 500;
color: #333333;
display: flex;
align-items: center;
gap: 10px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.dash-sidebar .dash-submenu .dash-link {
font-size: 14px;
}
.dash-sidebar .dash-item:not(:last-of-type) {
margin: 0 0 4px;
}
.dash-sidebar.light-sidebar .dash-link i {
font-size: 18px;
color: #060606;
}
.dash-sidebar .dash-item {
position: relative;
}
.dash-sidebar .dash-arrow {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.simplebar-content-wrapper {
padding: 0 15px;
}
.sidebar-input .form-control {
padding: 8px 15px 8px 35px;
margin: 0 0 15px;
}
.sidebar-input i {
position: absolute;
top: 20px;
left: 10px;
color: black;
font-size: 18px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.dash-sidebar .dash-submenu .dash-link {
padding: 0 0 5px 35px;
}
.dash-sidebar .dash-submenu {
margin: 10px 0 0;
}
.dash-sidebar .dash-submenu .dash-item:before {
content: "";
position: absolute;
left: 10px;
top: 7px;
width: 8px;
height: 8px;
border: 2px solid #ced4dc;
border-right-color: var(--theme-color);
border-radius: 50%;
z-index: 1;
transform: rotate(45deg);
transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
color: #778290;
}
/* header-css — liquid glass pill (glass-nav style); fixed to viewport so it stays on scroll */
.dash-header {
background: transparent !important;
box-shadow: none !important;
min-height: 0 !important;
padding: 10px clamp(0.75rem, 2vw, 1.5rem) 12px;
position: fixed !important;
top: 0 !important;
left: 255px !important;
right: 0 !important;
z-index: 1025;
}
.minimenu .dash-header {
left: 84px !important;
}
/* Smooth sidebar/header/content transition when toggling minimenu */
.dash-sidebar,
.dash-header,
.dash-container {
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Extra opening emphasis when moving from collapsed -> expanded */
body.sidebar-expanding .dash-sidebar .navbar-wrapper {
animation: sidebarExpandReveal 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sidebarExpandReveal {
0% {
opacity: 0.72;
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.dash-sidebar,
.dash-header,
.dash-container,
body.sidebar-expanding .dash-sidebar .navbar-wrapper {
transition: none !important;
animation: none !important;
}
}
.dash-header.transprent-bg {
background: transparent !important;
box-shadow: none !important;
}
.dash-header .header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: min(56rem, calc(100% - 1.5rem));
max-width: 100%;
margin: 0 auto;
padding: 0.55rem 0.85rem 0.55rem 1rem;
position: relative;
z-index: 2;
overflow: visible;
isolation: isolate;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.38);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
box-shadow:
0 18px 48px rgba(15, 23, 42, 0.1),
0 6px 20px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
border-bottom: none;
}
@supports not (backdrop-filter: blur(1px)) {
.dash-header .header-wrapper {
background: rgba(255, 255, 255, 0.92);
}
}
/* Header: service.png — infinite pass left → right, clipped behind toolbar icons */
.dash-header .header-service-fly {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
border-radius: 9999px;
}
.dash-header .header-service-fly__img {
position: absolute;
top: 50%;
left: 0;
height: clamp(36px, 5.5vh, 52px);
width: auto;
max-width: min(280px, 58vw);
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
will-change: left, transform;
animation: headerServiceMarquee 20s linear infinite;
}
.dash-header .header-wrapper__foreground {
position: relative;
z-index: 1;
}
@keyframes headerServiceMarquee {
0% {
left: 0%;
transform: translate3d(-100%, -50%, 0);
}
100% {
left: 100%;
transform: translate3d(0, -50%, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.dash-header .header-service-fly__img {
animation: none;
left: 50% !important;
transform: translate3d(-50%, -50%, 0) !important;
}
}
/* Main column offset — slightly taller than legacy 70px bar because of floating pill */
.dash-container {
top: 84px !important;
min-height: calc(100vh - 144px) !important;
}
@media (max-width: 408px) {
.dash-container {
top: 110px !important;
min-height: calc(100vh - 170px) !important;
}
}
@media (max-width: 1024px) {
.dash-header {
left: 0 !important;
right: 0 !important;
}
.minimenu .dash-header {
left: 0 !important;
}
.dash-header .header-wrapper {
width: calc(100% - 1rem);
flex-wrap: wrap;
background: rgba(255, 255, 255, 0.42) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
}
.dash-header.mob-header-active .header-wrapper {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.header-icon-list {
gap: 12px;
}
/* dashboard page css */
.dash-order-status .row>.col-12:nth-child(1) .card-icon {
background-color: #E0F2FE;
}
.dash-order-status .row>.col-12:nth-child(1) .card-icon svg path {
stroke: #0EA5E9;
}
.dash-order-status .row>.col-12:nth-child(2) .card-icon {
background-color: #D1FAE5;
}
.dash-order-status .row>.col-12:nth-child(2) .card-icon svg path {
stroke: #10B981;
}
.dash-order-status .row>.col-12:nth-child(3) .card-icon {
background-color: #EDE9FE;
}
.dash-order-status .row>.col-12:nth-child(3) .card-icon svg path,
.dash-order-status .row>.col-12:nth-child(3) .card-icon svg polyline,
.dash-order-status .row>.col-12:nth-child(3) .card-icon svg polygon {
stroke: #8B5CF6;
}
.dash-order-status .row>.col-12:nth-child(4) .card-icon {
background-color: #FEF3C7;
}
.dash-order-status .row>.col-12:nth-child(4) .card-icon svg circle,
.dash-order-status .row>.col-12:nth-child(4) .card-icon svg line {
stroke: #F59E0B;
}
.dash-order-status .row>.col-12:nth-child(5) .card-icon {
background-color: #CCFBF1;
}
.dash-order-status .row>.col-12:nth-child(5) .card-icon svg polygon,
.dash-order-status .row>.col-12:nth-child(5) .card-icon svg circle,
.dash-order-status .row>.col-12:nth-child(5) .card-icon svg rect {
stroke: #14B8A6;
}
.dash-order-status .row>.col-12:nth-child(6) .card-icon {
background-color: #E0E7FF;
}
.dash-order-status .row>.col-12:nth-child(6) .card-icon svg path,
.dash-order-status .row>.col-12:nth-child(6) .card-icon svg rect {
stroke: #6366F1;
}
.dash-order-status .row>.col-12:nth-child(7) .card-icon {
background-color: #ECFCCB;
}
.dash-order-status .row>.col-12:nth-child(7) .card-icon svg path,
.dash-order-status .row>.col-12:nth-child(7) .card-icon svg circle {
stroke: #84CC16;
}
.dash-order-status .row>.col-12:nth-child(8) .card-icon {
background-color: #FAE8FF;
}
.dash-order-status .row>.col-12:nth-child(8) .card-icon svg path,
.dash-order-status .row>.col-12:nth-child(8) .card-icon svg circle,
.dash-order-status .row>.col-12:nth-child(8) .card-icon svg line {
stroke: #D946EF;
}
.superadmin-wrp .row>.col-12:nth-child(1) .card-icon {
background-color: #E0F2FE;
}
.superadmin-wrp .row>.col-12:nth-child(1) .card-icon svg path,
.superadmin-wrp .row>.col-12:nth-child(1) .card-icon svg line,
.superadmin-wrp .row>.col-12:nth-child(1) .card-icon svg circle {
stroke: #0EA5E9;
}
.superadmin-wrp .row>.col-12:nth-child(2) .card-icon {
background-color: #D1FAE5;
}
.superadmin-wrp .row>.col-12:nth-child(2) .card-icon svg circle,
.superadmin-wrp .row>.col-12:nth-child(2) .card-icon svg polyline,
.superadmin-wrp .row>.col-12:nth-child(2) .card-icon svg path {
stroke: #10B981;
}
.superadmin-wrp .row>.col-12:nth-child(3) .card-icon {
background-color: #EDE9FE;
}
.superadmin-wrp .row>.col-12:nth-child(3) .card-icon svg path,
.superadmin-wrp .row>.col-12:nth-child(3) .card-icon svg polyline,
.superadmin-wrp .row>.col-12:nth-child(3) .card-icon svg polygon {
stroke: #8B5CF6;
}
.superadmin-wrp .row>.col-12:nth-child(4) .card-icon {
background-color: #FEF3C7;
}
.superadmin-wrp .row>.col-12:nth-child(4) .card-icon svg path,
.superadmin-wrp .row>.col-12:nth-child(4) .card-icon svg polyline {
stroke: #F59E0B;
}
.superadmin-wrp .row>.col-12:nth-child(5) .card-icon {
background-color: #CCFBF1;
}
.superadmin-wrp .row>.col-12:nth-child(5) .card-icon svg circle,
.superadmin-wrp .row>.col-12:nth-child(5) .card-icon svg line,
.superadmin-wrp .row>.col-12:nth-child(5) .card-icon svg polygon {
stroke: #14B8A6;
}
.superadmin-wrp .row>.col-12:nth-child(6) .card-icon {
background-color: #E0E7FF;
}
.superadmin-wrp .row>.col-12:nth-child(6) .card-icon svg path,
.superadmin-wrp .row>.col-12:nth-child(6) .card-icon svg rect {
stroke: #6366F1;
}
.dashboard-card .dataTable-wrapper {
display: grid;
}
.dashboard-card .dataTable-top {
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
}
.dashboard-card .dataTable-top::after,
.dashboard-card .dataTable-bottom::after {
display: none;
}
.details-card,
.dashboard-card {
position: relative;
width: 100%;
height: 100%;
padding: 16px;
border-radius: 6px;
background-color: #fff;
color: #000;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
.details-card .card-content {
display: flex;
flex-direction: column;
gap: 5px;
}
.details-card .card-icon {
height: 45px;
width: 45px;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
background-color: #eff6ff;
}
.details-card .bg-img {
position: absolute;
bottom: 0;
right: 15px;
height: 100%;
width: 100px;
}
.details-card .bg-img img {
height: 100%;
width: 100%;
}
.dashboard-card .user-img {
height: 70px;
width: 70px;
border: 4px solid #f5f5f5;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
flex-shrink: 0;
}
.dashboard-card .user-img img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.qr-code-wrp .code-img {
height: 70px;
width: 70px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
overflow: hidden;
}
.qr-code-wrp .code-img img,
.qr-code-wrp .code-img svg {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.theme-label-img {
position: relative;
padding-top: 55%;
display: block;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
overflow: hidden;
z-index: 1;
border: 0;
}
.theme-label-img img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-position: top;
transition: 3s all ease;
z-index: 3;
}
.theme-label-img:hover img {
object-position: bottom;
}
.row-gap-2{
row-gap: 20px;
}
/* Sidebar Hover Color Override */
.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link,
.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link i,
.dash-sidebar .dash-navbar > .dash-item.active > .dash-link,
.dash-sidebar .dash-navbar > .dash-item.active > .dash-link i {
color: #ffffff !important;
}
/* SweetAlert2 toast — raised + liquid glass (show_toastr) */
body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-start {
padding: 2rem 1.25rem 1rem !important;
align-items: flex-start !important;
}
.swal2-popup.toast-liquid.swal2-toast {
width: min(22rem, 92vw) !important;
max-width: 92vw !important;
border-radius: 18px !important;
padding: 0.65rem 0.85rem !important;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.34) !important;
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.12),
0 6px 18px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.swal2-popup.toast-liquid.swal2-toast .swal2-title {
margin: 0.15rem 0 0.1rem;
padding: 0 0.25rem;
font-size: 0.9375rem;
font-weight: 700;
color: rgba(15, 23, 42, 0.92);
text-align: start;
}
.swal2-popup.toast-liquid.swal2-toast .swal2-html-container {
margin: 0.15rem 0 0;
padding: 0 0.25rem 0.15rem;
font-size: 0.8125rem;
font-weight: 500;
color: rgba(30, 41, 59, 0.82);
text-align: start;
line-height: 1.45;
}
.swal2-popup.toast-liquid.swal2-toast .swal2-close {
color: rgba(15, 23, 42, 0.45);
font-size: 1.35rem;
margin-top: 0.15rem;
}
.swal2-popup.toast-liquid.swal2-toast .swal2-close:hover {
color: rgba(15, 23, 42, 0.85);
}
.swal2-popup.toast-liquid.swal2-toast .swal2-timer-progress-bar-container {
border-radius: 0 0 18px 18px;
overflow: hidden;
}
.swal2-popup.toast-liquid.swal2-toast .swal2-icon {
margin: 0;
margin-inline-end: 0.65rem;
width: 2.15em;
min-width: 2.15em;
height: 2.15em;
border-width: 0.2em;
overflow: visible !important;
flex-shrink: 0;
}
/* Success — green glass (all toasts). Solid background-color required so Swal2 can tint success-ring / circular lines. */
.swal2-popup.toast-liquid--success.swal2-toast {
background-color: #d1fae5 !important;
background-image: linear-gradient(165deg, rgba(220, 252, 231, 0.98), rgba(167, 243, 208, 0.92)) !important;
border: 1px solid rgba(22, 163, 74, 0.5) !important;
box-shadow:
0 16px 48px rgba(22, 163, 74, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.45) inset,
0 0 36px color-mix(in srgb, var(--theme-color) 18%, transparent);
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-title {
color: #14532d !important;
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-html-container {
color: #166534 !important;
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-close {
color: rgba(20, 83, 45, 0.5) !important;
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-close:hover {
color: #14532d !important;
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-timer-progress-bar {
background: #16a34a !important;
}
/* Filled success disc + white check (green-on-green lines were hiding the mark). */
.swal2-popup.toast-liquid--success.swal2-toast .swal2-icon.swal2-success {
border-color: #15803d !important;
color: #ffffff !important;
background-color: #16a34a !important;
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-success-ring {
border: 0.22em solid rgba(255, 255, 255, 0.45) !important;
opacity: 1 !important;
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-success-line-tip,
.swal2-popup.toast-liquid--success.swal2-toast .swal2-success-line-long {
background-color: #ffffff !important;
z-index: 3 !important;
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-success-circular-line-left,
.swal2-popup.toast-liquid--success.swal2-toast .swal2-success-circular-line-right {
background-color: #16a34a !important;
}
.swal2-popup.toast-liquid--success.swal2-toast .swal2-success-fix {
background-color: #16a34a !important;
}
/* Error — red glass */
.swal2-popup.toast-liquid--error.swal2-toast {
background: rgba(255, 235, 235, 0.42) !important;
border-color: rgba(220, 53, 69, 0.42);
box-shadow:
0 20px 50px rgba(220, 53, 69, 0.2),
0 6px 20px rgba(220, 53, 69, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.swal2-popup.toast-liquid--error.swal2-toast .swal2-title,
.swal2-popup.toast-liquid--error.swal2-toast .swal2-html-container {
color: rgba(114, 28, 36, 0.95);
}
.swal2-popup.toast-liquid--error.swal2-toast .swal2-timer-progress-bar {
background: #dc3545 !important;
}
.swal2-popup.toast-liquid--error.swal2-toast .swal2-icon.swal2-error {
border-color: #dc3545;
color: #dc3545;
}
.swal2-popup.toast-liquid--error.swal2-toast .swal2-x-mark-line-left,
.swal2-popup.toast-liquid--error.swal2-toast .swal2-x-mark-line-right {
background-color: #dc3545 !important;
}
/* Warning / info glass accents */
.swal2-popup.toast-liquid--warning.swal2-toast {
border-color: rgba(245, 158, 11, 0.45);
box-shadow:
0 20px 50px rgba(245, 158, 11, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.swal2-popup.toast-liquid--warning.swal2-toast .swal2-timer-progress-bar {
background: #f59e0b !important;
}
.swal2-popup.toast-liquid--info.swal2-toast {
border-color: rgba(59, 130, 246, 0.4);
box-shadow:
0 20px 50px rgba(59, 130, 246, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.swal2-popup.toast-liquid--info.swal2-toast .swal2-timer-progress-bar {
background: #3b82f6 !important;
}
@supports not (color: color-mix(in srgb, red, blue)) {
.swal2-popup.toast-liquid--success.swal2-toast {
box-shadow:
0 16px 48px rgba(22, 163, 74, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.45) inset,
0 0 32px rgba(12, 175, 96, 0.25);
}
}
/* Dynamic Island — host under .dash-container; fixed rect tracks .dash-content (main column). */
.dash-container .dash-content {
position: relative;
}
/* Host: position/size/z-index set by syncDashIslandHostPosition() — fixed over .dash-content */
.dash-container .dash-dynamic-island-host {
box-sizing: border-box;
pointer-events: none !important;
min-height: 0;
}
.dash-container .dash-dynamic-island-host > .swal2-container {
pointer-events: auto !important;
overflow: visible !important;
overflow-x: visible !important;
position: static !important;
z-index: 2147483000 !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
inset: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
min-height: 0 !important;
transform: none !important;
background: transparent !important;
grid-template: none !important;
box-shadow: none !important;
}
.dash-container .dash-dynamic-island-host .swal2-container.swal2-center {
padding: 0 !important;
}
.dash-container .dash-dynamic-island-host .swal2-popup.swal2-toast {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: min(24rem, 94%) !important;
max-width: 94% !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
margin: 0 auto !important;
transform-origin: 50% 0%;
z-index: 2147483001 !important;
pointer-events: auto !important;
padding-bottom: 0.75rem !important;
touch-action: pan-y;
cursor: grab;
}
.dash-container .dash-dynamic-island-host .swal2-popup.swal2-toast:active {
cursor: grabbing;
}
/* Timer bar must span full toast width (grid + overflow:visible was leaving a stray segment). */
.dash-container .dash-dynamic-island-host .swal2-popup.toast-liquid.swal2-toast .swal2-timer-progress-bar-container {
grid-column: 1 / -1 !important;
grid-row: auto !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 0.22em !important;
min-height: 3px !important;
margin: 0 !important;
border-radius: 0 0 16px 16px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Toast close must sit above title/html overflow and receive clicks (island host uses pointer-events: none on parent). */
.dash-container .dash-dynamic-island-host .swal2-popup.swal2-toast .swal2-close {
pointer-events: auto !important;
position: relative !important;
z-index: 6 !important;
cursor: pointer !important;
}
.dash-container .dash-dynamic-island-host .swal2-popup.toast-liquid.swal2-toast .swal2-title,
.dash-container .dash-dynamic-island-host .swal2-popup.toast-liquid.swal2-toast .swal2-html-container {
max-height: none !important;
overflow: visible !important;
word-break: break-word;
}
/* Island — kill default swal2-show pulse; entry/exit keyframes */
@keyframes toast-island-enter {
0% {
transform: scale(0.2, 0.42) translateY(-24px);
opacity: 0;
border-radius: 999px;
}
55% {
transform: scale(1.06, 0.94) translateY(4px);
opacity: 1;
border-radius: 22px;
}
100% {
transform: scale(1, 1) translateY(0);
opacity: 1;
border-radius: 20px;
}
}
@keyframes toast-island-leave {
0% {
transform: scale(1, 1) translateY(0);
opacity: 1;
border-radius: 20px;
}
35% {
transform: scale(1.02, 0.96) translateY(2px);
opacity: 1;
}
100% {
transform: scale(0.28, 0.48) translateY(-36px);
opacity: 0;
border-radius: 999px;
}
}
.dash-container .dash-dynamic-island-host .swal2-popup.toast-island-motion.swal2-show {
animation: none !important;
}
/* Pre-enter only — exclude .swal2-hide or leave animation gets opacity:0 !important and never plays visibly. */
.dash-container .dash-dynamic-island-host .swal2-popup.toast-island-motion:not(.toast-island-motion--shown):not(.swal2-hide) {
opacity: 0 !important;
transform: scale(0.2, 0.42) translateY(-24px);
border-radius: 999px !important;
}
/* Enter only while visible — otherwise this rule beats the leave animation and the toast never finishes closing. */
.dash-container .dash-dynamic-island-host .swal2-popup.toast-liquid.toast-island-motion.toast-island-motion--shown:not(.swal2-hide) {
animation: toast-island-enter 0.58s cubic-bezier(0.22, 1.18, 0.36, 1) both !important;
}
.dash-container .dash-dynamic-island-host .swal2-popup.swal2-hide.toast-island-hiding {
animation: toast-island-leave 0.45s cubic-bezier(0.55, 0.08, 0.7, 0.46) forwards !important;
}
/* — same visual language as .order-perf-kpi-pill (used on dashboard + reports) */
.dashboard-stat-pill-link {
color: inherit;
}
.dashboard-stat-pill {
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
padding: 0.95rem 0.75rem 1rem;
min-height: 7.25rem;
color: #334155;
}
@media (min-width: 768px) {
.dashboard-stat-pill {
padding: 1.1rem 0.9rem 1.15rem;
min-height: 7.75rem;
}
}
.dashboard-stat-pill:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px -10px rgba(123, 45, 66, 0.18);
border-color: rgba(123, 45, 66, 0.14);
}
.dashboard-stat-pill__icon {
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
margin-bottom: 0.35rem;
opacity: 0.92;
color: inherit;
}
.dashboard-stat-pill__icon svg {
width: 22px;
height: 22px;
}
.dashboard-stat-pill__label {
font-size: 0.64rem;
font-weight: 600;
line-height: 1.2;
color: #64748b;
margin-bottom: 0.2rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 3.75em;
}
.dashboard-stat-pill__val {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: clamp(0.95rem, 2.8vw, 1.1rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: #334155;
text-align: center;
}
.dashboard-stat-pill--primary {
background: rgba(123, 45, 66, 0.1);
border-color: rgba(123, 45, 66, 0.28);
}
.dashboard-stat-pill--primary .dashboard-stat-pill__val {
color: #7b2d42;
}
.dashboard-stat-pill--success {
background: rgba(25, 135, 84, 0.11);
border-color: rgba(25, 135, 84, 0.32);
}
.dashboard-stat-pill--success .dashboard-stat-pill__val {
color: #15803d;
}
.dashboard-stat-pill--info {
background: rgba(13, 202, 240, 0.12);
border-color: rgba(13, 202, 240, 0.35);
}
.dashboard-stat-pill--info .dashboard-stat-pill__val {
color: #0891b2;
}
.dashboard-stat-pill--warning {
background: rgba(253, 126, 20, 0.1);
border-color: rgba(253, 126, 20, 0.32);
}
.dashboard-stat-pill--warning .dashboard-stat-pill__val {
color: #d97706;
}
.dashboard-stat-pill--danger {
background: rgba(220, 53, 69, 0.1);
border-color: rgba(220, 53, 69, 0.32);
}
.dashboard-stat-pill--danger .dashboard-stat-pill__val {
color: #dc2626;
}
.dashboard-stat-pill--purple {
background: rgba(111, 66, 193, 0.1);
border-color: rgba(111, 66, 193, 0.32);
}
.dashboard-stat-pill--purple .dashboard-stat-pill__val {
color: #6f42c1;
}
/* Dashboard — gentle entrance (stats strip, charts, admin cards) */
@keyframes dashboard-soft-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dashboard-nudge-up {
from {
transform: translateY(10px);
}
to {
transform: translateY(0);
}
}
#dashboard-main-content .dash-order-status > .col-12 > .row.g-4 {
animation: dashboard-nudge-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#dashboard-main-content .dashboard-charts-dual-row > .dashboard-order-perf-col,
#dashboard-main-content .dashboard-charts-dual-row > .dashboard-secondary-chart-col {
animation: dashboard-soft-rise 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#dashboard-main-content .dashboard-charts-dual-row > .dashboard-order-perf-col {
animation-delay: 0.06s;
}
#dashboard-main-content .dashboard-charts-dual-row > .dashboard-secondary-chart-col {
animation-delay: 0.12s;
}
#dashboard-main-content .col-12.admin-cards .row.g-4 > .col-xxl-4:nth-child(1) {
animation: dashboard-soft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}
#dashboard-main-content .col-12.admin-cards .row.g-4 > .col-xxl-4:nth-child(2) {
animation: dashboard-soft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}
#dashboard-main-content .col-12.admin-cards .row.g-4 > .col-xxl-4:nth-child(3) {
animation: dashboard-soft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
#dashboard-main-content .row.g-4.admin-cards > .col-xxl-4:nth-child(1) {
animation: dashboard-soft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
#dashboard-main-content .row.g-4.admin-cards > .col-xxl-4:nth-child(2) {
animation: dashboard-soft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
}
#dashboard-main-content .row.g-4.admin-cards > .col-xxl-4:nth-child(3) {
animation: dashboard-soft-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
}
@media (prefers-reduced-motion: reduce) {
#dashboard-main-content .dash-order-status > .col-12 > .row.g-4,
#dashboard-main-content .dashboard-charts-dual-row > .dashboard-order-perf-col,
#dashboard-main-content .dashboard-charts-dual-row > .dashboard-secondary-chart-col,
#dashboard-main-content .col-12.admin-cards .row.g-4 > .col-xxl-4,
#dashboard-main-content .row.g-4.admin-cards > .col-xxl-4 {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Dashboard — order performance + secondary chart (half row each on xl+) */
.dashboard-charts-dual-row {
--dashboard-chart-slot-min: 360px;
}
.dashboard-charts-dual-row .min-chart-slot {
min-height: var(--dashboard-chart-slot-min);
}
.dashboard-kpi-overview-wrap {
box-shadow: 0 10px 30px -5px rgba(123, 45, 66, 0.06);
}
.dashboard-kpi-overview-chart {
min-height: 320px;
width: 100%;
}
@media (min-width: 1200px) {
.dashboard-charts-dual-row .dashboard-kpi-overview-chart,
.dashboard-charts-dual-row .dashboard-commerce-chart {
min-height: 340px;
}
}
.dashboard-commerce-chart {
min-height: 320px;
width: 100%;
}
.dashboard-commerce-chart .apexcharts-canvas {
margin: 0 auto;
}
.dashboard-kpi-overview-chart .apexcharts-canvas {
margin: 0 auto;
}
.dashboard-secondary-chart-slot {
box-shadow: 0 10px 30px -5px rgba(123, 45, 66, 0.04);
background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
}
/*
* RTL — lock dashboard blocks to the same *physical* layout as English (LTR):
* charts row: order performance left, sales right; stat pills & admin rows same column order;
* card interiors (title left, range right, KPI grid | total) match English.
* Arabic text still renders RTL inside neutral runs (unicode bidi).
*/
html[dir="rtl"] #dashboard-main-content .dashboard-charts-dual-row.row {
flex-direction: row;
direction: ltr;
}
html[dir="rtl"] #dashboard-main-content .dashboard-charts-dual-row.row > [class*="col"] {
direction: ltr;
unicode-bidi: isolate;
}
html[dir="rtl"] #dashboard-main-content .dash-order-status > .col-12 > .row.g-4 {
direction: ltr;
flex-direction: row;
flex-wrap: wrap;
}
html[dir="rtl"] #dashboard-main-content .col-12.admin-cards > .row.g-4 {
direction: ltr;
flex-direction: row;
flex-wrap: wrap;
}
html[dir="rtl"] #dashboard-main-content .row.g-4.admin-cards {
direction: ltr;
flex-direction: row;
flex-wrap: wrap;
}
.dashboard-order-perf-range .btn {
border-radius: 999px;
padding: 0.35rem 0.85rem;
font-size: 0.8125rem;
font-weight: 600;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #64748b;
}
.dashboard-order-perf-range .btn:hover {
background: #f1f5f9;
color: #334155;
}
.dashboard-order-perf-range .btn.active {
background: #3498db;
color: #fff;
border-color: #3498db;
}
.dashboard-order-perf-range .btn.active:hover {
background: #2980b9;
border-color: #2980b9;
color: #fff;
}
/* Order performance — KPI pills strip first, then title + range + chart */
#dashboard-main-content .dashboard-kpi-overview-wrap .order-perf-kpi-pills {
row-gap: 0.4rem;
width: 100%;
}
#dashboard-main-content .order-perf-kpi-pill {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
min-width: 5.85rem;
max-width: 8.25rem;
padding: 0.55rem 0.65rem 0.58rem;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
text-align: center;
color: #334155;
}
#dashboard-main-content .order-perf-kpi-pill:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px -10px rgba(123, 45, 66, 0.18);
border-color: rgba(123, 45, 66, 0.14);
}
#dashboard-main-content .order-perf-kpi-pill__icon {
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
color: inherit;
opacity: 0.92;
}
#dashboard-main-content .order-perf-kpi-pill__icon svg {
width: 20px;
height: 20px;
}
#dashboard-main-content .order-perf-kpi-pill__label {
font-size: 0.64rem;
font-weight: 600;
line-height: 1.15;
color: #64748b;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 2.5em;
}
#dashboard-main-content .order-perf-kpi-pill__val {
font-size: 1.08rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
#dashboard-main-content .order-perf-kpi-pill--warning {
background: rgba(253, 126, 20, 0.1);
border-color: rgba(253, 126, 20, 0.32);
}
#dashboard-main-content .order-perf-kpi-pill--warning .order-perf-kpi-pill__val {
color: #d97706;
}
#dashboard-main-content .order-perf-kpi-pill--danger {
background: rgba(220, 53, 69, 0.1);
border-color: rgba(220, 53, 69, 0.32);
}
#dashboard-main-content .order-perf-kpi-pill--danger .order-perf-kpi-pill__val {
color: #dc2626;
}
#dashboard-main-content .order-perf-kpi-pill--danger-muted {
background: rgba(220, 53, 69, 0.07);
border-color: rgba(220, 53, 69, 0.22);
}
#dashboard-main-content .order-perf-kpi-pill--danger-muted .order-perf-kpi-pill__val {
color: #b91c1c;
}
#dashboard-main-content .order-perf-kpi-pill--info {
background: rgba(13, 202, 240, 0.12);
border-color: rgba(13, 202, 240, 0.35);
}
#dashboard-main-content .order-perf-kpi-pill--info .order-perf-kpi-pill__val {
color: #0891b2;
}
#dashboard-main-content .order-perf-kpi-pill--primary {
background: rgba(13, 110, 253, 0.1);
border-color: rgba(13, 110, 253, 0.3);
}
#dashboard-main-content .order-perf-kpi-pill--primary .order-perf-kpi-pill__val {
color: #2563eb;
}
#dashboard-main-content .order-perf-kpi-pill--success {
background: rgba(25, 135, 84, 0.11);
border-color: rgba(25, 135, 84, 0.32);
}
#dashboard-main-content .order-perf-kpi-pill--success .order-perf-kpi-pill__val {
color: #15803d;
}
#dashboard-main-content .order-perf-kpi-pill--purple {
background: rgba(111, 66, 193, 0.1);
border-color: rgba(111, 66, 193, 0.32);
}
#dashboard-main-content .order-perf-kpi-pill--purple .order-perf-kpi-pill__val {
color: #6f42c1;
}
/* Order performance: 3×2 small KPIs + Total Orders fills remaining width */
#dashboard-main-content .dashboard-kpi-overview-wrap .order-perf-kpi-pills--dashboard-order-layout {
width: 100%;
min-width: 0;
}
/* Phone / tablet ( .order-perf-kpi-pill {
min-width: 0;
max-width: none;
width: 100%;
}
#dashboard-main-content .dashboard-secondary-chart-slot .commerce-perf-kpi-pill__amount {
font-size: 0.88rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
text-align: center;
}
#dashboard-main-content .dashboard-secondary-chart-slot .commerce-perf-kpi-pills--equal .order-perf-kpi-pill--success .commerce-perf-kpi-pill__amount {
color: #15803d;
}
#dashboard-main-content .dashboard-secondary-chart-slot .commerce-perf-kpi-pill__hint {
font-size: 0.52rem;
line-height: 1.15;
font-weight: 500;
text-align: center;
max-width: 100%;
}
#dashboard-main-content .dashboard-secondary-chart-slot .order-perf-kpi-pill .stat-growth {
font-size: 9px;
margin-top: 0.15rem;
max-width: 100%;
text-align: center;
}
/* Store analytics — align with dashboard KPI chart cards + theme (--primary / --secondary) */
.store-analytics-page .store-analytic-visitor-card.dashboard-kpi-overview-wrap {
background: #fff;
}
.store-analytics-page .store-analytic-side-card {
background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
box-shadow: 0 10px 30px -5px rgba(123, 45, 66, 0.04);
}
.store-analytics-page .store-analytic-side-card.store-analytic-chart-nested {
min-height: 0;
}
.store-analytics-page .store-analytic-card-head {
padding-bottom: 0.35rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
.store-analytics-page .store-analytic-main-chart {
min-height: 320px;
width: 100%;
}
.store-analytics-page .store-analytic-main-chart .apexcharts-canvas {
margin: 0 auto;
}
.store-analytics-page .store-analytic-table thead th {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
border-bottom: 2px solid color-mix(in srgb, var(--primary, #7b2d42) 22%, transparent);
padding-top: 0.5rem;
padding-bottom: 0.65rem;
white-space: nowrap;
}
.store-analytics-page .store-analytic-table tbody tr {
border-color: rgba(226, 232, 240, 0.9);
}
.store-analytics-page .store-analytic-table tbody tr:hover {
background: color-mix(in srgb, var(--primary, #7b2d42) 5%, #fff);
}
.store-analytics-page .store-analytic-table tbody td {
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
.store-analytics-page .store-analytic-table tbody a {
color: var(--secondary, #3a1520);
font-weight: 600;
text-decoration: none;
}
.store-analytics-page .store-analytic-table tbody a:hover {
color: var(--primary, #7b2d42);
}
.store-analytics-page .store-analytic-table .text-end {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--primary, #7b2d42);
}
html[dir="rtl"] .store-analytics-page .store-analytic-main-chart {
direction: ltr;
unicode-bidi: isolate;
}
/* Roles — system cards (replaces permissions table grid) */
.roles-system-cards-row {
--roles-card-min-h: clamp(22rem, 52vh, 34rem);
}
.roles-system-head__sub {
max-width: 36rem;
line-height: 1.5;
}
.roles-system-create-btn {
white-space: nowrap;
}
.role-system-card {
overflow: hidden;
border: 1px solid rgba(226, 232, 240, 0.95);
box-shadow: 0 10px 30px -5px rgba(123, 45, 66, 0.06) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
min-height: var(--roles-card-min-h);
}
.role-system-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px -8px rgba(123, 45, 66, 0.12) !important;
}
.role-system-card--featured {
border-top: 4px solid var(--primary, #7b2d42) !important;
}
.role-system-card__title {
font-size: clamp(1.1rem, 1.35vw, 1.35rem);
line-height: 1.25;
}
.role-system-card__desc {
line-height: 1.55;
min-height: 3.5rem;
font-size: 0.9rem;
}
.role-system-card__perm-wrap {
min-height: 8rem;
}
.role-system-card__perm-label {
font-size: 0.7rem;
letter-spacing: 0.06em;
}
.role-system-card__perm-badge {
font-size: 0.78rem;
font-weight: 700;
padding: 0.28rem 0.7rem;
border-radius: 999px;
}
.role-system-card__perm-badge--0 {
background: color-mix(in srgb, var(--primary, #7b2d42) 14%, #fff);
color: var(--primary, #7b2d42);
}
.role-system-card__perm-badge--1 {
background: rgba(37, 99, 235, 0.12);
color: #1d4ed8;
}
.role-system-card__perm-badge--2 {
background: rgba(8, 145, 178, 0.12);
color: #0e7490;
}
.role-system-card__perm-badge--3 {
background: #f1f5f9;
color: #64748b;
}
.role-system-card__icon {
width: 3.25rem;
height: 3.25rem;
border-radius: 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.role-system-card__icon--0 {
background: color-mix(in srgb, var(--primary, #7b2d42) 14%, #fff);
color: var(--primary, #7b2d42);
}
.role-system-card__icon--1 {
background: rgba(37, 99, 235, 0.12);
color: #1d4ed8;
}
.role-system-card__icon--2 {
background: rgba(8, 145, 178, 0.12);
color: #0e7490;
}
.role-system-card__icon--3 {
background: #f1f5f9;
color: #64748b;
}
.role-system-card__action {
width: 2.5rem;
height: 2.5rem;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
}
.role-perm-tag {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.75rem;
border-radius: 0.55rem;
font-size: 0.8rem;
font-weight: 600;
background: #f8fafc;
color: #475569;
border: 1px solid #e2e8f0;
line-height: 1.25;
}
.role-perm-tag i {
font-size: 0.88rem;
opacity: 0.75;
}
.role-system-card__avatars .role-system-card__avatar {
display: inline-flex;
margin-left: -0.55rem;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.role-system-card__avatars .role-system-card__avatar:first-child {
margin-left: 0;
}
.role-system-card__avatar img {
object-fit: cover;
display: block;
}
html[dir="rtl"] .role-system-card__avatars .role-system-card__avatar {
margin-left: 0;
margin-right: -0.55rem;
}
html[dir="rtl"] .role-system-card__avatars .role-system-card__avatar:first-child {
margin-right: 0;
}
/* Store settings page — modern card/tabs layout */
.app-store-settings-page .store-setting-search {
display: none !important;
}
.app-store-settings-page .app-store-settings-hero h2 {
font-size: clamp(1.55rem, 2.2vw, 2rem);
font-weight: 800;
color: #0f172a;
}
.app-store-settings-page .app-store-settings-hero p {
color: #64748b;
font-size: 0.98rem;
}
.app-store-settings-page .app-store-settings-tabs-card {
border: 0;
box-shadow: none;
background: transparent;
}
.app-store-settings-page .app-store-settings-tabs {
margin: 0;
padding: 0 0 0.6rem;
border-bottom: 1px solid #e5e7eb;
gap: 0.35rem 0.85rem;
flex-wrap: wrap;
}
.app-store-settings-page .app-store-settings-tabs .nav-link {
border: 0 !important;
background: transparent !important;
color: #475569;
font-weight: 600;
border-radius: 0;
padding: 0.55rem 0.2rem;
position: relative;
}
.app-store-settings-page .app-store-settings-tabs .nav-link.active {
color: var(--primary, #7b2d42) !important;
}
.app-store-settings-page .app-store-settings-tabs .nav-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.62rem;
height: 2px;
border-radius: 2px;
background: var(--primary, #7b2d42);
}
.app-store-settings-page .store-tab-content > .tab-pane > div > .card {
border: 1px solid color-mix(in srgb, var(--primary, #7b2d42) 18%, #e2e8f0);
border-radius: 14px;
box-shadow: 0 6px 24px -14px rgba(15, 23, 42, 0.2);
overflow: hidden;
}
.app-store-settings-page .app-settings-main-card .card-header,
.app-store-settings-page .store-tab-content .card-header {
background: #fff;
border-bottom: 1px solid #eceff3;
padding: 1rem 1.1rem;
}
.app-store-settings-page .app-settings-section-head h5 {
font-size: 1.45rem;
font-weight: 800;
color: #1e293b;
}
.app-store-settings-page .app-settings-section-head p {
font-size: 0.92rem;
color: #64748b;
}
.app-store-settings-page .app-settings-section-head--sub h5 {
font-size: 1.25rem;
}
.app-store-settings-page .card-body {
background: #fff;
padding: 1.25rem !important;
}
.app-store-settings-page .form-label {
font-weight: 700;
color: #334155;
margin-bottom: 0.4rem;
}
/* Basic Information — even 2×2 grid, field “tiles”, clearer hierarchy */
.app-store-settings-page .app-settings-basic-grid .app-settings-field {
padding: 1rem 1.15rem 1.1rem;
height: 100%;
border: 1px solid #e8edf2;
border-radius: 12px;
background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.app-store-settings-page .app-settings-basic-grid .app-settings-field:hover {
border-color: color-mix(in srgb, var(--primary, #7b2d42) 22%, #e2e8f0);
}
.app-store-settings-page .app-settings-basic-grid .app-settings-field:focus-within {
border-color: color-mix(in srgb, var(--primary, #7b2d42) 42%, #cbd5e1);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #7b2d42) 14%, transparent);
}
.app-store-settings-page .app-settings-basic-grid .form-text {
line-height: 1.45;
max-width: 42rem;
}
.app-store-settings-page .app-settings-slug-input {
border-radius: 10px;
overflow: hidden;
flex-wrap: nowrap;
width: 100%;
max-width: 100%;
}
.app-store-settings-page .app-settings-slug-input .input-group-text {
max-width: 45%;
min-width: 0;
font-size: 0.8rem;
font-weight: 600;
flex-shrink: 1;
}
.app-store-settings-page .app-settings-slug-input .form-control {
min-width: 0;
flex: 1 1 auto;
}
/* Store link + domain / subdomain — merged block under Store Settings */
.app-store-settings-page .app-settings-store-access {
padding: 1.1rem 1.2rem 1.25rem;
border: 1px solid #e8edf2;
border-radius: 14px;
background: linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
}
.app-store-settings-page .app-settings-store-access__modes .radio-button-group .btn {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.app-store-settings-page .app-settings-store-link-input {
flex-wrap: nowrap;
border-radius: 10px;
overflow: hidden;
max-width: 100%;
}
.app-store-settings-page .app-settings-store-link-input .form-control {
min-width: 0;
flex: 1 1 auto;
}
.app-store-settings-page .app-settings-store-link-input .btn {
flex-shrink: 0;
white-space: nowrap;
}
/* Delete Store — solid red; match Save Changes control size in same footer */
.app-store-settings-page .app-settings-main-card .card-footer .btn-submit.btn-primary.btn-badge,
.app-store-settings-page .app-settings-main-card .card-footer .app-settings-delete-store-btn {
min-height: 41px;
padding-block: 0.5rem;
padding-inline: 1rem;
font-size: 0.9375rem;
line-height: 1.5;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-store-settings-page .app-settings-main-card .card-footer .app-settings-delete-store-btn {
--app-delete-red: #dc2626;
--app-delete-red-hover: #b91c1c;
background-color: var(--app-delete-red) !important;
border: 1px solid var(--app-delete-red) !important;
color: #fff !important;
font-weight: 600;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-store-settings-page .app-settings-main-card .card-footer .app-settings-delete-store-btn:hover,
.app-store-settings-page .app-settings-main-card .card-footer .app-settings-delete-store-btn:focus-visible {
background-color: var(--app-delete-red-hover) !important;
border-color: var(--app-delete-red-hover) !important;
color: #fff !important;
}
.app-store-settings-page .app-settings-main-card .card-footer .app-settings-delete-store-btn:focus-visible {
box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.35);
}
.app-store-settings-page .app-settings-main-card .card-footer .app-settings-delete-store-btn span {
color: inherit !important;
}
.app-store-settings-page .form-control,
.app-store-settings-page .input-group-text,
.app-store-settings-page .form-select {
border-radius: 10px;
min-height: 44px;
border-color: #e2e8f0;
}
.app-store-settings-page .input-group .input-group-text {
color: #64748b;
background: #f8fafc;
}
.app-store-settings-page .app-branding-upload-card {
border: 1px solid #eceff3;
border-radius: 12px;
box-shadow: none;
height: 100%;
}
.app-store-settings-page .app-branding-upload-card .card-header h5 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.app-store-settings-page .app-branding-upload-card .logo-content {
border: 1px dashed #e2e8f0;
border-radius: 12px;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
background: #fafafa;
padding: 0.75rem;
}
.app-store-settings-page .app-branding-upload-card .logo-content img {
max-height: 155px;
width: 100%;
object-fit: contain;
}
.app-store-settings-page .app-branding-upload-card .logo_update {
border-radius: 10px;
text-align: center;
padding: 0.65rem 0.8rem;
color: #fff;
}