@charset "UTF-8";

.product-item, .product-item *, .slick-slider {
    box-sizing: border-box
}

.slick-dots li button:before, .slick-next:before, .slick-prev:before {
    font-family: slick;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.menu-vertical .menu-inner {
    overflow-x: hidden !important;
    border-right: 1px solid #ddd;
}

.layout-navbar.navbar-detached {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid #ddd
}

.remove-search {
    position: absolute;
    right: 42px;
    top: 0;
    width: 32px;
    padding: 0;
    height: 48px
}

.create-and-edit {
    background-color: #202123 !important;
    margin-left: 250px !important;
    border-bottom: 1px solid #202123;
    width: calc(100% - 250px) !important
}

    .create-and-edit .btn {
        padding: 5px 10px;
    }


.menu-vertical .menu-inner > .menu-item > .menu-toggle:after {
    display: None !important
}

.menu-vertical .menu-sub .menu-link {
    padding-left: 39px;
    padding-top: .1rem;
    padding-bottom: .1rem;
    color: #616a75
}

.bg-label-primary, .text-primary, .uib-weeks .btn-default.active, .uib-weeks .btn-default.active > * {
    color: #154fef !important
}

.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page:before {
    content: "";
    width: 100%;
    height: .75rem;
    position: fixed;
    top: 0;
    z-index: 10
}

.bg-menu-theme .menu-header, .product-canvas-sticky, .product-item-like img {
    position: relative !important
}

.bg-menu-theme .menu-inner > .menu-header::before, .table > :last-child, .table > :last-child tr, .table > :last-child tr td {
    background-color: transparent
}

.layout-horizontal .bg-menu-theme .menu-inner > .menu-item > .menu-link, .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner .menu-item .menu-link {
    border-radius: .375rem
}

@media (min-width:1200px) {
    .layout-horizontal .bg-menu-theme .menu-inner > .menu-item {
        margin: .565rem 0
    }

        .layout-horizontal .bg-menu-theme .menu-inner > .menu-item:not(:first-child) {
            margin-left: .0625rem
        }

        .layout-horizontal .bg-menu-theme .menu-inner > .menu-item:not(:last-child) {
            margin-right: .0625rem
        }

        .layout-horizontal .bg-menu-theme .menu-inner > .menu-item .menu-sub {
            box-shadow: 0 .25rem 1rem rgba(161,172,184,.45)
        }
}

.bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
    content: "";
    position: absolute;
    left: 21px;
    width: 4px;
    height: 4px;
    border-radius: 50%
}

.layout-horizontal .bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
    left: 1.3rem
}

#cachePhotos, .bg-menu-theme .menu-horizontal-wrapper > .menu-inner > .menu-item > .menu-sub > .menu-item > .menu-link:before, .product-canvas .btn-close, .slick-arrow.slick-hidden, .slick-slide.slick-loading img, .toast-close-button {
    display: none
}

.layout-horizontal .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
    left: 1.1rem
}

.layout-menu-hover .layout-menu {
    box-shadow: 0 .625rem 1.25rem rgba(161,172,184,.5);
    transition: .3s ease-in-out
}

.app-brand .layout-menu-toggle {
    position: absolute;
    left: 15rem;
    border-radius: 50%
}

@media (max-width:1199.98px) {
    .app-brand .layout-menu-toggle {
        display: none !important
    }

    .layout-menu-expanded .app-brand .layout-menu-toggle {
        display: block !important
    }
}

.text-body[href]:hover {
    color: #222 !important
}

.bg-primary, .card .alert-primary hr {
    background-color: #154fef !important
}

a.bg-primary:focus, a.bg-primary:hover {
    background-color: #6467f2 !important
}

.bg-label-primary {
    background-color: #e7e7ff !important
}

.border-label-primary {
    border: 3px solid #c3c4ff !important
}

.border-light-primary {
    border: 3px solid rgba(105,108,255,.08)
}

.pagination {
    justify-content: center
}

    .page-item.active .page-link, .page-item.active .page-link:focus, .page-item.active .page-link:hover, .pagination li.active > a:not(.page-link), .pagination li.active > a:not(.page-link):focus, .pagination li.active > a:not(.page-link):hover {
        border-color: #ddd !important;
        background-color: #f5f5f5;
        color: #333
    }

    .pagination > li > a, .pagination > li > span {
        display: block;
        padding: 5px 15px !important;
        border: 1px solid #ddd
    }

    .bg-footer-theme, .bg-footer-theme .footer-link, .bg-menu-theme .menu-horizontal-next, .bg-menu-theme .menu-horizontal-prev, .bg-menu-theme .menu-link, .bg-navbar-theme .navbar-nav > .nav-item > .nav-link, .bg-navbar-theme .navbar-nav > .nav-link, .bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link, .bg-navbar-theme .navbar-search-wrapper .navbar-search-icon, .bg-navbar-theme .navbar-search-wrapper .search-input, .bg-navbar-theme .navbar-text, .pagination > li > a {
        color: #333
    }

    .pagination > li:first-child > a {
        border-radius: 999px 0 0 999px
    }

    .pagination > li:last-child > a {
        border-radius: 0 999px 999px 0
    }

    .alert-primary .alert-link, .bg-footer-theme .active > .footer-link, .bg-footer-theme .footer-link.active, .bg-footer-theme .footer-link.show, .bg-footer-theme .footer-link:focus, .bg-footer-theme .footer-link:hover, .bg-footer-theme .footer-text, .bg-footer-theme .show > .footer-link, .bg-menu-theme .menu-horizontal-next.active, .bg-menu-theme .menu-horizontal-next:focus, .bg-menu-theme .menu-horizontal-next:hover, .bg-menu-theme .menu-horizontal-prev.active, .bg-menu-theme .menu-horizontal-prev:focus, .bg-menu-theme .menu-horizontal-prev:hover, .bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon, .bg-menu-theme .menu-item.active > .menu-link, .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle, .bg-menu-theme .menu-link.active, .bg-menu-theme .menu-link:focus, .bg-menu-theme .menu-link:hover, .bg-menu-theme .menu-text, .bg-navbar-theme .navbar-brand, .bg-navbar-theme .navbar-brand a, .bg-navbar-theme .navbar-brand a:focus, .bg-navbar-theme .navbar-brand a:hover, .bg-navbar-theme .navbar-brand:focus, .bg-navbar-theme .navbar-brand:hover, .bg-navbar-theme .navbar-nav .active > .nav-link, .bg-navbar-theme .navbar-nav .nav-link.active, .bg-navbar-theme .navbar-nav .nav-link.show, .bg-navbar-theme .navbar-nav .show > .nav-link, .bg-navbar-theme .navbar-nav > .nav-item > .nav-link:focus, .bg-navbar-theme .navbar-nav > .nav-item > .nav-link:hover, .bg-navbar-theme .navbar-nav > .nav-link:focus, .bg-navbar-theme .navbar-nav > .nav-link:hover, .bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link:focus, .bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link:hover, .bg-navbar-theme .navbar-text a, .bg-navbar-theme .navbar-text a:focus, .bg-navbar-theme .navbar-text a:hover, .pagination > li > a:hover, .product-title:hover, a, a.list-group-item-primary, button.list-group-item-primary {
        color: #154fef
    }

.progress-bar {
    background-color: #154fef;
    color: #fff
}

.list-group-item-primary {
    background-color: #e1e2ff;
    color: #154fef !important
}

a.list-group-item-primary:focus, a.list-group-item-primary:hover, button.list-group-item-primary:focus, button.list-group-item-primary:hover {
    background-color: #d6d7f2;
    color: #154fef
}

a.list-group-item-primary.active, button.list-group-item-primary.active {
    border-color: #154fef;
    background-color: #154fef;
    color: #154fef
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    border-color: #154fef;
    background-color: #154fef
}

.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .btn-primary:hover, .show > .btn-primary.dropdown-toggle {
    background-color: #0b3fcf;
    border-color: #0b3fcf;
    color: #fff
}

.alert-primary {
    background-color: #e7e7ff;
    border-color: #d2d3ff;
    color: #154fef
}

    .alert-primary .btn-close {
        background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%23696cff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    }

.table-primary {
    --bs-table-bg: #e1e2ff;
    --bs-table-striped-bg: #dcdefb;
    --bs-table-striped-color: #435971;
    --bs-table-active-bg: #d1d4f1;
    --bs-table-active-color: #435971;
    --bs-table-hover-bg: #d8daf6;
    --bs-table-hover-color: #435971;
    color: #435971;
    border-color: #d1d4f1
}

    .table-primary th {
        border-bottom-color: inherit !important
    }

    .table-primary .btn-icon {
        color: #435971
    }

.btn-save {
    min-width: 100px
}

.btn-primary {
    color: #fff;
    background-color: #154fef;
    border-color: #154fef
}

    .btn-check:focus + .btn-primary, .btn-primary.focus, .btn-primary:focus {
        color: #fff;
        background-color: #0b3fcf;
        border-color: #0b3fcf;
        box-shadow: none
    }

    .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
        color: #fff;
        background-color: #0b3fcf;
        border-color: #0b3fcf
    }

    .btn-check:active + .btn-outline-primary:focus, .btn-check:active + .btn-primary:focus, .btn-check:checked + .btn-outline-primary:focus, .btn-check:checked + .btn-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.disabled, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus, .btn-outline-primary:disabled, .btn-primary.active:focus, .btn-primary.disabled, .btn-primary:active:focus, .btn-primary:disabled, .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: none
    }

.uib-weeks .btn-default {
    font-size: 13px;
    background-color: transparent !important;
    height: auto !important;
    border: 0;
    color: #333
}

    .table > thead > tr > th, .uib-weeks .btn-default > * {
        color: #333 !important
    }

.uib-weeks .h6 {
    font-size: 15px !important;
    font-weight: 400
}

.note-popover.popover, .slick-slider .slick-next, .slick-slider .slick-prev, .uib-button-bar {
    display: none !important
}

.btn-outline-primary {
    color: #154fef;
    border-color: #154fef;
    background: 0 0
}

    .btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-check:focus + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:hover {
        color: #154fef;
        background-color: #eef3ff;
        border-color: #154fef
    }

    .btn-outline-primary .badge {
        background: #154fef;
        border-color: #154fef;
        color: #fff
    }

    .btn-outline-primary.active .badge, .btn-outline-primary:active .badge, .btn-outline-primary:focus:hover .badge, .btn-outline-primary:hover .badge, .show > .btn-outline-primary.dropdown-toggle .badge {
        background: #fff;
        border-color: #fff;
        color: #154fef
    }

.divider.divider-primary .divider-text:after, .divider.divider-primary .divider-text:before, .form-control:focus, .form-control:focus ~ .form-label, .form-select:focus {
    border-color: #154fef
}

.dropdown-item:not(.disabled).active, .dropdown-item:not(.disabled):active, .dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item), .dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active {
    background-color: #f5f5f5;
    color: #154fef !important
}

.nav .nav-link:focus, .nav .nav-link:hover {
    color: #222
}

.nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover {
    background-color: #154fef;
    color: #fff;
    box-shadow: 0 2px 4px 0 rgba(105,108,255,.4)
}

.input-group:focus-within .form-control, .input-group:focus-within .input-group-text {
    border-color: #154fef
}

.form-check-input:focus {
    border-color: #154fef;
    box-shadow: 0 2px 4px 0 rgba(105,108,255,.4)
}

.form-check-input:disabled {
    background-color: #ddd
}

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: #154fef;
    border-color: #154fef;
    box-shadow: 0 2px 4px 0 rgba(105,108,255,.4)
}

.custom-option.checked {
    border: 1px solid #154fef
}

.bg-navbar-theme .navbar-toggler, .bg-navbar-theme hr {
    border-color: rgba(86,106,127,.075)
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23696cff'/%3e%3c/svg%3e")
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")
}

.footer.bg-primary hr, .navbar.bg-primary .navbar-toggler, .navbar.bg-primary hr {
    border-color: rgba(255,255,255,.15)
}

.form-control:focus ~ .form-label::after {
    border-color: inherit
}

.footer.bg-primary, .menu.bg-primary, .navbar.bg-primary, .navbar.bg-primary .search-input-wrapper .search-input, .navbar.bg-primary .search-input-wrapper .search-toggler {
    background-color: #154fef !important;
    color: #e0e1ff
}

    .bg-primary.bs-toast .toast-header, .bg-primary.toast .toast-header, .create-and-edit-title *, .footer.bg-primary .active > .footer-link, .footer.bg-primary .footer-link.active, .footer.bg-primary .footer-link.show, .footer.bg-primary .footer-link:focus, .footer.bg-primary .footer-link:hover, .footer.bg-primary .footer-text, .footer.bg-primary .show > .footer-link, .menu.bg-primary .menu-horizontal-next.active, .menu.bg-primary .menu-horizontal-next:focus, .menu.bg-primary .menu-horizontal-next:hover, .menu.bg-primary .menu-horizontal-prev.active, .menu.bg-primary .menu-horizontal-prev:focus, .menu.bg-primary .menu-horizontal-prev:hover, .menu.bg-primary .menu-item.active > .menu-link, .menu.bg-primary .menu-item.open:not(.menu-item-closing) > .menu-toggle, .menu.bg-primary .menu-link.active, .menu.bg-primary .menu-link:focus, .menu.bg-primary .menu-link:hover, .menu.bg-primary .menu-text, .navbar.bg-primary .navbar-brand, .navbar.bg-primary .navbar-brand a, .navbar.bg-primary .navbar-brand a:focus, .navbar.bg-primary .navbar-brand a:hover, .navbar.bg-primary .navbar-brand:focus, .navbar.bg-primary .navbar-brand:hover, .navbar.bg-primary .navbar-nav .active > .nav-link, .navbar.bg-primary .navbar-nav .nav-link.active, .navbar.bg-primary .navbar-nav .nav-link.show, .navbar.bg-primary .navbar-nav .show > .nav-link, .navbar.bg-primary .navbar-nav > .nav-item > .nav-link:focus, .navbar.bg-primary .navbar-nav > .nav-item > .nav-link:hover, .navbar.bg-primary .navbar-nav > .nav-link:focus, .navbar.bg-primary .navbar-nav > .nav-link:hover, .navbar.bg-primary .navbar-nav > .nav > .nav-item > .nav-link:focus, .navbar.bg-primary .navbar-nav > .nav > .nav-item > .nav-link:hover, .navbar.bg-primary .navbar-text a, .navbar.bg-primary .navbar-text a:focus, .navbar.bg-primary .navbar-text a:hover {
        color: #fff
    }

    .footer.bg-primary .footer-link, .menu.bg-primary .menu-horizontal-next, .menu.bg-primary .menu-horizontal-prev, .menu.bg-primary .menu-link, .navbar.bg-primary .navbar-nav > .nav-item > .nav-link, .navbar.bg-primary .navbar-nav > .nav-link, .navbar.bg-primary .navbar-nav > .nav > .nav-item > .nav-link, .navbar.bg-primary .navbar-search-wrapper .navbar-search-icon, .navbar.bg-primary .navbar-search-wrapper .search-input, .navbar.bg-primary .navbar-text {
        color: #e0e1ff
    }

        .footer.bg-primary .footer-link.disabled, .menu.bg-primary .menu-horizontal-next.disabled, .menu.bg-primary .menu-horizontal-prev.disabled, .menu.bg-primary .menu-item.disabled .menu-link, .navbar.bg-primary .navbar-nav > .nav-item > .nav-link.disabled, .navbar.bg-primary .navbar-nav > .nav-link.disabled, .navbar.bg-primary .navbar-nav > .nav > .nav-item > .nav-link.disabled {
            color: #b0b2ff !important
        }

    .navbar.bg-primary .navbar-toggler {
        color: #e0e1ff
    }

    .navbar.bg-primary .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0,0 L14,0 L14,1.75 L0,1.75 L0,0 Z M0,4.375 L14,4.375 L14,6.125 L0,6.125 L0,4.375 Z M0,8.75 L14,8.75 L14,10.5 L0,10.5 L0,8.75 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='💎-UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='12)-Navbar' transform='translate(-1174.000000, -1290.000000)'%3E%3Cg id='Group' transform='translate(1174.000000, 1288.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.000000)'%3E%3Cuse fill='rgba(255, 255, 255, 0.8)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.1' fill='rgba(255, 255, 255, 0.8)' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    }

    .menu.bg-primary .menu-item.active > .menu-link:not(.menu-toggle) {
        background-color: #6d70ff
    }

    .menu.bg-primary.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
        background-color: #7174ff
    }

    .menu.bg-primary.menu-horizontal .menu-inner .menu-item.open > .menu-toggle, .menu.bg-primary.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub {
        background: #6d70ff
    }

    .menu.bg-primary .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-sub, .menu.bg-primary .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-toggle {
        background: 0 0;
        color: #e0e1ff
    }

    .menu.bg-primary .menu-inner-shadow {
        background: linear-gradient(#154fef 41%,rgba(105,108,255,.11) 95%,rgba(105,108,255,0))
    }

    .menu.bg-primary .menu-header {
        color: #c2c4ff
    }

    .menu.bg-primary .menu-divider, .menu.bg-primary .menu-inner > .menu-item.open > .menu-sub::before, .menu.bg-primary hr {
        border-color: rgba(255,255,255,.15) !important
    }

    .menu.bg-primary .menu-inner > .menu-header::before {
        background-color: rgba(255,255,255,.15)
    }

    .menu.bg-primary .menu-block::before {
        background-color: #c2c4ff
    }

    .menu.bg-primary .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
        background-color: #8385ff
    }

    .bg-menu-theme .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before, .bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle), .bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle), .menu.bg-primary .menu-inner > .menu-item.open .menu-item.active > .menu-link::before, .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #fff
    }

    .menu.bg-primary .menu-inner > .menu-item.open .menu-item.active > .menu-link::before, .menu.bg-primary .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
        box-shadow: 0 0 0 2px #6d70ff
    }

    .menu.bg-primary .ps__rail-y.ps--clicking > .ps__thumb-y, .menu.bg-primary .ps__thumb-y {
        background: rgba(255,255,255,.5942917647) !important
    }

.bg-primary.bs-toast, .bg-primary.toast {
    color: #fff;
    background-color: rgba(105,108,255,.85) !important;
    box-shadow: 0 .25rem 1rem rgba(105,108,255,.4)
}

    .bg-primary.bs-toast .toast-header .btn-close, .bg-primary.toast .toast-header .btn-close {
        background-color: #154fef !important;
        background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='1' fill='%23fff' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        box-shadow: 0 .1875rem .375rem 0 rgba(105,108,255,.4) !important
    }

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    color: #566a7f
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    color: #566a7f
}

.form-floating > .form-control:-webkit-autofill ~ label {
    color: #566a7f
}

.fill-primary, .svg-illustration svg {
    fill: #154fef
}

html:not([dir=rtl]) .border-primary, html[dir=rtl] .border-primary {
    border-color: #154fef !important
}

a:focus, a:hover {
    color: #154fef;
    text-decoration: none !important
}

.bg-navbar-theme, .bg-navbar-theme .search-input-wrapper .search-input, .bg-navbar-theme .search-input-wrapper .search-toggler {
    background-color: #fff !important;
    color: #333
}

    .bg-menu-theme .menu-horizontal-next.disabled, .bg-menu-theme .menu-horizontal-prev.disabled, .bg-menu-theme .menu-item.disabled .menu-link, .bg-navbar-theme .navbar-nav > .nav-item > .nav-link.disabled, .bg-navbar-theme .navbar-nav > .nav-link.disabled, .bg-navbar-theme .navbar-nav > .nav > .nav-item > .nav-link.disabled {
        color: #a5afbb !important
    }

    .bg-navbar-theme .navbar-toggler {
        color: #333
    }

    .bg-navbar-theme .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg width='14px' height='11px' viewBox='0 0 14 11' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0,0 L14,0 L14,1.75 L0,1.75 L0,0 Z M0,4.375 L14,4.375 L14,6.125 L0,6.125 L0,4.375 Z M0,8.75 L14,8.75 L14,10.5 L0,10.5 L0,8.75 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='💎-UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='12)-Navbar' transform='translate(-1174.000000, -1290.000000)'%3E%3Cg id='Group' transform='translate(1174.000000, 1288.000000)'%3E%3Cg id='Icon-Color' transform='translate(0.000000, 2.000000)'%3E%3Cuse fill='rgba(67, 89, 113, 0.5)' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.1' fill='rgba(67, 89, 113, 0.5)' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
    }

.layout-navbar {
    background-color: rgba(255,255,255,.95);
    -webkit-backdrop-filter: saturate(200%) blur(6px);
    backdrop-filter: saturate(200%) blur(6px)
}

.layout-navbar-fixed .layout-page:before {
    -webkit-backdrop-filter: saturate(200%) blur(10px);
    backdrop-filter: saturate(200%) blur(10px);
    background: rgba(245,245,249,.6)
}

.bg-menu-theme {
    background-color: transparent;
    color: #154fef
}

.toast-error, .toast-success {
    color: #fff;
    opacity: 1 !important
}

.bg-menu-theme.menu-horizontal .menu-inner .menu-item.open > .menu-toggle, .bg-menu-theme.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub {
    background: #fff
}

.bg-menu-theme .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-sub, .bg-menu-theme .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-toggle {
    background: 0 0;
    color: #333
}

.bg-menu-theme .menu-divider, .bg-menu-theme .menu-inner > .menu-item.open > .menu-sub::before, .bg-menu-theme hr {
    border-color: transparent !important
}

.bg-menu-theme .menu-block::before {
    background-color: #8f9baa
}

.bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
    background-color: #154fef
}

.bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before, .bg-menu-theme .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
    box-shadow: 0 0 0 2px #fff
}

.bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y, .bg-menu-theme .ps__thumb-y {
    background: rgba(86,106,127,.2) !important
}

.bg-menu-theme .menu-inner .menu-sub > .menu-item.active > .menu-link.menu-toggle, .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover, .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open > .menu-link, html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover, html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open > .menu-link {
    background-color: rgba(67,89,113,.04)
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
    color: #154fef;
    background-color: #eee !important
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
    background: #154fef
}

.bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
    background-color: #616a75 !important
}

.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
    left: 1.1875rem;
    width: .875rem;
    height: .875rem;
    background-color: #154fef !important;
    border: 3px solid #e7e7ff !important
}

.app-brand .layout-menu-toggle {
    background-color: #154fef;
    border: 7px solid #f5f5f9
}

.button-save, table {
    background-color: #fff
}

.app-brand .layout-menu-toggle i {
    width: 1.5rem;
    height: 1.5rem;
    transition: .3s ease-in-out;
    color: #fff
}

.app-brand .layout-menu-toggle .menu-inner > .menu-header::before {
    background-color: #b4bdc6
}

.bg-footer-theme .footer-link.disabled {
    color: #a1abb8 !important
}

.bg-footer-theme hr {
    border-color: rgba(86,106,127,.0768713725)
}

.layout-footer-fixed .content-footer {
    box-shadow: 0 0 .375rem .25rem rgba(161,172,184,.15)
}

table {
    border: 1px solid #ddd
}

.table th {
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 400
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 15px;
    border: 0
}

.table > :not(:first-child), .table > tbody > tr > td {
    border-top: 1px solid #eee
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 1px solid #eee;
    padding: 15px;
    font-weight: 600;
    font-size: 12px
}

.border-none th, .product-grid.horizontal .product-item:last-child tbody {
    border-bottom: 0 !important
}

span.total {
    color: #999;
    font-weight: 400
}

.table > tbody > tr > td {
    padding: 10px 15px;
    vertical-align: middle;
    font-weight: 500;
    color: #333;
    font-size: 13px
}

    .table > tbody > tr > td .btn {
        font-size: 13px;
        padding: 2px 10px
    }

.table thead:first-child th {
    border-top: 0 !important
}

.table tr {
    border: 0
}

.card-header h2, .heading-panel h1, .page-header h2, .product-link-item:last-child, .product-price-setting input:last-child, .table .form-group, .widget-list li:last-child {
    margin-bottom: 0
}

.date-filter {
    display: flex;
    align-items: center
}

    .date-filter label {
        margin: 0 5px
    }

.uib-datepicker-popup.dropdown-menu {
    padding: 10px;
}

.ui-select-match:before {
    content: 'Enter name or email addresses';
    position: absolute;
    top: 0;
    left: 0;
    height: 48px;
    line-height: 46px;
    padding: 0 0.875rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .2s ease-in-out,transform .2s ease-in-out;
    color: #566a7f !important;
    font-weight: 400;
    width: 100%;
}


.ui-select-match.Role:before {
    content: 'Select role';
}

.ui-select-match.Department:before {
    content: 'Select department';
}




.color-variant-count, .input-group-btn {
    width: auto
}

:focus {
    outline: 0 !important
}

.page-header {
    border: 0;
    margin: 0;
    padding: 10px 0
}

input[type=checkbox], input[type=radio] {
    --active: #154fef;
    --active-inner: #fff;
    --focus: 2px #154fef;
    --border: #a5a5a5;
    --border-hover: #154fef;
    --background: #fff;
    --disabled: #999;
    --disabled-inner: #999;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 18px;
    outline: 0;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--bc,var(--border));
    background: var(--b,var(--background));
    transition: background .3s,border-color .3s,box-shadow .2s
}

    input[type=checkbox]:after, input[type=radio]:after {
        content: '';
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)
    }

    .radio-type-1.active, input[type=checkbox]:checked, input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: 0.3s;
        --d-t: 0.6s;
        --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2)
    }

    input[type=checkbox]:disabled, input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: .9
    }

        input[type=checkbox]:disabled:checked, input[type=radio]:disabled:checked {
            --b: var(--disabled-inner);
            --bc: var(--border)
        }

        input[type=checkbox]:disabled + label, input[type=radio]:disabled + label {
            cursor: not-allowed
        }

    input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover)
    }

    input[type=checkbox]:focus, input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus)
    }

    input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
        width: 18px;
        margin-right: 2px;
        position: relative !important
    }

        input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
            opacity: var(--o, 0)
        }

        .radio-type-1.active, input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
            --o: 1
        }

    .tab-content, input[type=checkbox] + label, input[type=radio] + label {
        padding: 0
    }

    input[type=checkbox]:not(.switch) {
        border-radius: 4px
    }

        input[type=checkbox]:not(.switch):after {
            width: 5px;
            height: 9px;
            border: 2px solid var(--active-inner);
            border-top: 0;
            border-left: 0;
            left: 5px;
            top: 1px;
            transform: rotate(var(--r,20deg))
        }

        input[type=checkbox]:not(.switch):checked {
            --r: 43deg
        }

    input[type=checkbox].switch {
        width: 40px;
        border-radius: 11px;
        height: 23px;
    }

        input[type=checkbox].switch:after {
            left: 2px;
            top: 2px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: var(--ab,var(--border));
            transform: translateX(var(--x,0))
        }

        input[type=checkbox].switch:checked {
            --ab: var(--active-inner);
            --x: 17px
        }

        input[type=checkbox].switch:disabled:not(:checked):after {
            opacity: .6
        }

input[type=radio] {
    border-radius: 50%
}

    input[type=radio]:after {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s,.7))
    }

    input[type=radio].active, input[type=radio]:checked {
        --s: 0.5
    }

td .btn {
    padding: 3px 15px
}

.panel-default > .card-header {
    background-color: #fff;
    border: 0;
    padding: 15px 15px 0
}

    .panel-default > .card-header h1 {
        font-size: 18px !important;
        margin: 0
    }

.panel-default {
    border-color: #ddd
}

.offcanvas.in {
    visibility: visible;
    transform: none
}

.form-horizontal .control-label, label {
    padding-top: 0;
    margin-bottom: 5px;
    text-align: left;
    font-weight: 400;
    display: block
}

label {
    text-align: left
}

.modal {
    z-index: 999999 !important
}

.full-modal {
    margin: 0;
    transform: none
}

    .full-modal .btn-close {
        margin-top: 0 !important;
        transform: translate(-5px,0) !important
    }

    .full-modal .modal-dialog {
        margin: 0;
        border-radius: 0
    }

    .full-modal .modal-content {
        border-radius: 0
    }

    .full-modal .modal-footer, .full-modal .modal-header {
        height: 70px;
        border-radius: 0
    }

    .full-modal .modal-body {
        height: calc(100vh - 140px)
    }

.button-save {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    padding: 5px 15px;
    border-top: 1px solid #ddd;
    text-align: right
}

.product-grid, .product-item, .table-container tbody, .table-container tfoot, .table-container thead {
    border: 0 !important
}

.table-container th {
    padding: 10px !important
}

.table-container thead.totalAndPagination th {
    padding-top: 0 !important
}

.product-grid {
    padding: 5px !important;
    display: flex;
    flex-wrap: wrap
}

.product-item {
    flex: 0 0 auto;
    width: 25%;
    display: block;
    float: left;
    position: relative;
    padding: 0 10px;
    background: 0 0
}

.product-grid.grid-3 .product-item {
    width: 33.333%;
    padding: 0 5px !important
}

.product-item tr {
    height: auto !important
}

.product-item tbody {
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px;
    font-size: 14px;
    transition: .3s;
    -webkit-transition: .3s;
    margin: 10px 0;
    position: relative
}

    .product-item tbody:hover {
        box-shadow: 0 0 20px rgb(0 0 0 / .1)
    }

.tb-attributes-values {
    visibility: hidden;
    opacity: 0;
    height: 0
}

.product-item tbody:hover .tb-attributes-values {
    position: absolute;
    border: 1px solid #ddd !important;
    margin-top: -7px;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 10px 10px -3px rgb(0 0 0 / .05);
    z-index: 17;
    padding: 15px;
    left: -1px;
    right: 0;
    width: calc(100% + 2px);
    opacity: 1;
    visibility: inherit;
    height: auto;
    background-color: #fafafa !important
}

.tb-attributes-values > div > span {
    display: flex;
    justify-content: space-between
}

    .product-title, .tb-attributes-values > div > span > * {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box !important;
        overflow: hidden
    }

.product-item * {
    width: 100%;
    display: block
}

.product-item td, .product-item tr {
    border: 0 !important;
    background: 0 0 !important;
    border-radius: 0 !important;
    overflow: inherit !important
}

.product-item a {
    display: block;
    position: relative;
    color: #333
}

.color-options, .product-item img {
    position: absolute;
    right: 0;
    left: 0;
    top: 0
}

.product-item img {
    bottom: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    display: inherit
}

.productLink {
    height: 270px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.color-options {
    background-color: #fff;
    cursor: pointer;
    display: flex;
    padding: 0 4px;
    width: 100px;
    font-size: 12px;
    margin: 0 auto;
    text-align: center;
    justify-content: center
}

    .color-options div {
        display: flex;
        align-items: center;
        width: auto
    }

        .color-options div .color-option {
            width: 12px;
            height: 12px;
            border: 1px solid #fff;
            background-color: pink;
            border-radius: 50%
        }

            .color-options div .color-option:first-child {
                background-image: linear-gradient(to right,#3023ae 0,#53a0fd 48%,#b4ec51 101%);
                z-index: 2
            }

            .color-options div .color-option:nth-child(2) {
                background-image: linear-gradient(to right,#6bceb4 0,#f98cc2 48%,#fff781 101%);
                z-index: 1;
                margin-left: -6px
            }

.product-grid.horizontal {
    padding: 0 !important
}

    .product-grid.horizontal .product-item {
        padding: 0;
        width: 100% !important;
        float: none
    }

        .product-grid.horizontal .product-item tbody {
            margin: 0 !important;
            border-radius: 0;
            border: 0 !important;
            border-bottom: 1px solid #eee !important
        }

        .product-grid.horizontal .product-item .productLink {
            height: 90px !important;
            width: 90px;
            border-radius: 4px;
            overflow: hidden
        }

        .product-grid.horizontal .product-item .product-item-detail {
            padding: 15px !important
        }

    .product-grid.horizontal .product-title {
        width: auto !important
    }

.product-item.ui-sortable-helper {
    border-top: 2px solid #154fef !important
}

.jCgXN {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    padding: 5px 15px
}

.product-price-setting {
    padding: 10px 15px;
}

    .product-price-setting input {
        margin-bottom: 10px
    }

.product-item-checkbox {
    position: absolute;
    z-index: 12;
    width: auto;
    left: 15px;
    padding: 0;
    margin: 0;
    top: 15px
}

.target-image img {
    max-height: 65%;
    position: relative
}

.photoContainer img, .product-link-item img, carousel img {
    max-height: 100%;
    max-width: 100%
}

.product-item-checkbox label {
    height: auto;
    margin: 4px 0 0
}

.product-item-checkbox > label input {
    top: 0;
    left: 0
}

.product-grid.horizontal .product-item-checkbox {
    position: relative;
    left: 0;
    top: 0;
    display: inline-block;
    margin-right: 15px;
    min-width: 25px
}

.productMove {
    width: auto;
    margin-right: 10px;
    padding: 0 !important;
    cursor: move
}

    .productMove span {
        font-size: 22px
    }

.product-item-like {
    position: absolute;
    z-index: 11;
    right: 15px;
    left: auto;
    width: auto;
    top: 15px
}

    .product-item-like button {
        width: 28px;
        height: 28px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 50%;
        font-size: 13px;
        padding: 0;
        margin-bottom: 5px
    }

        .product-item-like button span {
            font-size: 16px !important;
            position: relative;
            top: 1px
        }

        .product-item-like button:hover {
            color: #007f5f
        }

@media(min-width:1200px) {
    .product-item .productLink {
        height: 320px
    }

    .trend-report-item .productLink {
        height: 140px
    }
}

@media(min-width:1600px) {
    .product-item .productLink {
        height: 350px
    }

    .trend-report-item .productLink {
        height: 170px
    }
}

.product-item-detail {
    padding: 20px 15px 0;
    text-align: center;
    min-height: 50px;
    font-size: 13px;
    position: relative
}

.totalAndPagination .pagination {
    justify-content: flex-end
}

.heading-panel .total {
    position: relative;
    top: 1px
}

.validationErrors {
    border-radius: .35rem;
    padding: 10px 30px;
    margin-bottom: 15px;
    width: auto;
    position: fixed;
    bottom: 70px;
    right: 15px;
    z-index: 99
}

.toast-top-right {
    top: 70px;
    right: 30px
}

#toast-container > div {
    -webkit-box-shadow: 0 0 4px #999;
    box-shadow: 0 0 3px #999;
    border-radius: .35rem
}

.toast-success {
    background-image: inherit !important;
    background: var(--bs-success)
}

.toast-error {
    background-image: inherit !important;
    background: var(--bs-danger)
}

.deletAttribe {
    position: relative;
    top: 20px;
    height: 32px;
    padding: 0
}

.product-item-checkbox input {
    position: relative;
    top: 10px;
    left: 10px;
    z-index: 5
}

.product-bottom-action {
    bottom: 15px;
    background-color: transparent;
    padding: 10px 0 10px 250px;
    width: 100%;
    z-index: 999;
    border: 0;
    margin: 0 auto;
    align-items: center;
    display: flex;
    justify-content: center;
    pointer-events: none;
    visibility: visible;
    left: 0
}

    .product-bottom-action .row {
        margin: 0 auto;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        background-color: rgb(0 0 0 / 75%);
        width: auto;
        display: flex;
        padding: 15px;
        pointer-events: auto;
        visibility: inherit;
        border-radius: 0.375rem;
        box-shadow: 0 0.125rem 0.25rem #1f21241a, 0 0.0625rem 0.375rem #1f21240d;
    }

    .product-bottom-action .btn {
        padding: 8px 15px
    }

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0
}

.nested .open > .dropdown-menu {
    inset: auto auto 0px 0px;
    margin: 0;
    transform: translate(0,-41px)
}

.modal .product-item {
    width: 33.333%
}

.modal .modal-fullscreen .product-item {
    width: 20%
}

    .modal .modal-fullscreen .product-item .productLink {
        height: 296px
    }

    .modal .modal-fullscreen .product-item tbody, .product-filter-item .card.accordion-item {
        margin-bottom: 0 !important
    }

.note-editor {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    padding: 0;
    margin: 0 !important
}

    .note-editor .card-header {
        padding: 10px 5px !important;
        background-color: #f5f8fa;
        border-bottom: 1px solid #ddd;
        text-align: left;
        border-radius: 12px 12px 0 0
    }

    .note-editor .btn-default {
        background-color: transparent !important;
        color: #435971 !important;
        border: 0
    }

.panel {
    border-radius: 8px;
    overflow: hidden
}

.nav-tabs {
    border-bottom: 0;
    margin-bottom: 15px
}

.padding-table {
    padding: 5px 15px;
    border-top: 0;
    margin-top: 0
}

@media(min-width:992px) {
    .product-filter-wrapper {
        margin: 0 -7px !important
    }

    .product-filter-item {
        width: 25%;
        padding: 0 7px !important
    }
}

.no-data {
    text-align: center;
    border: 0;
    background-color: transparent;
    padding: 30px 0;
    border-radius: 0
}

.form-group-bg, .widget-list li a {
    background-color: #ffffff;
    border: 1px solid #cbd6e2 !important;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    padding: 0.5rem 0.875rem;
}

.no-data.border {
    border: 1px solid #cbd6e2;
    border-radius: .375rem
}

.no-data p {
    margin: 0;
    font-size: 14px
}

    #splash .splash-text, .no-data p.lead {
        font-size: 18px
    }

.font-xl {
    font-size: 32px;
    margin-bottom: 15px
}

.note-editor.note-frame .note-editing-area .note-editable {
    padding: 10px;
    overflow: auto;
    color: #000;
    background-color: #fff;
    min-height: 110px
}

.card-header.note-toolbar > .btn-group, .note-popover .popover-content > .btn-group {
    margin-top: 0
}

.list-group-item.bg-light {
    background-color: #eee !important
}

.product-canvas {
    height: calc(100vh - 75px);
    max-height: 1080px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-link-item, carousel slide {
    align-items: center;
    overflow: hidden
}

.product-canvas-sticky + .col-md-12 {
    padding: 0 15px
}

.view360 {
    overflow: hidden;
    width: calc(100% - 300px);
    height: calc(100% - 125px);
    position: relative;
    background-color: #fff;
    outline: 1px solid #000;
}

.photoContainer {
    display: none;
    opacity: 1 !important;
    width: auto;
    height: 100%;
    margin: 0 auto;
    left: 0 !important;
    right: 0 !important;
    text-align: center;
}

#splash > span, .product-canvas.active .btn-close, .sl-item, .slick-initialized .slick-slide, .slick-slide img, .widget-list li a {
    display: block
}

    .modal-right-button, .sl-item:after {
        right: 15px;
        position: absolute
    }

.canvas-button {
    position: absolute;
    top: 15px;
    z-index: 999;
    right: 15px;
    display: inline-block;
    width: max-content;
}

.sl-item, .store-login, carousel, carousel slide {
    position: relative
}

.canvas-button button,
.canvas-button a {
    font-size: 13px;
    padding: 7px;
    line-height: normal;
    margin-left: 5px;
}

carousel {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    height: 100%
}

    carousel slide {
        max-width: 100%;
        height: 100%;
        display: flex;
        justify-content: center
    }

    carousel img {
        height: 100%;
        width: auto
    }

#slides_control {
    position: absolute;
    width: 400px;
    left: 50%;
    top: 20px;
    margin-left: -200px
}

.photoContainer img {
    object-fit: contain;
    object-position: center center;
    cursor: w-resize;
    object-fit: contain;
    object-position: center center;
    border: 0;
    margin: auto;
    height: auto;
    width: auto;
}

#splash {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto
}

@-webkit-keyframes flickerAnimation {
    0% {
        opacity: 1
    }

    50% {
        opacity: .7
    }

    100% {
        opacity: .5
    }
}

.animate-flicker {
    -webkit-animation: 1.3s infinite flickerAnimation;
    -moz-animation: 1.3s infinite flickerAnimation;
    -o-animation: 1.3s infinite flickerAnimation;
    animation: 1.3s infinite flickerAnimation
}

.form-group-bg {
    border: 1px solid #f0f2f5;
    border-radius: .375rem
}

.table-sticky, .table-sticky .form-control {
    background-color: #202123;
    color: #fff;
    font-size: 13px
}

.widget-list li {
    list-style: none;
    margin-bottom: 15px
}

    .widget-list li a {
        border: 1px solid #ddd;
        border-radius: .375rem;
        transition: .3s;
        -webkit-transition: .3s
    }

        .widget-list li a:hover {
            border-color: #154fef !important;
            background-color: #fff !important
        }

.module-name {
    font-weight: 700
}

.radio-flexiy-text {
    padding-left: 26px
}

.table-sticky {
    top: 60px;
    z-index: 999;
    padding: 10px 15px;
    margin: 0 auto;
    width: auto;
    border-radius: 0;
    box-shadow: 0 .125rem .25rem #1f21241a,0 .0625rem .375rem #1f21240d
}

    .table-sticky .btn {
        padding: 5px 10px;
        font-size: 13px
    }

    .table-sticky .form-control {
        max-width: 80px;
        height: 33.5px;
        border: 1px solid #8d8d8d;
        padding: 0 5px
    }

    .table-sticky input.form-control {
        max-width: 45px
    }

    .table-sticky .form-control:focus {
        border-color: #999
    }

    .table-sticky a {
        color: #658bf3
    }

.link {
    cursor: pointer;
    color: #fff
}

    .link:hover {
        text-decoration: underline
    }

.store-login {
    margin-top: 30px
}

.sl-item {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-bottom: 15px;
    color: #333
}

    .sl-item:hover {
        box-shadow: 0 0 2rem #1718180d,0 .0625rem .125rem #00000026;
        transition: .3s;
        -webkit-transition: .3s
    }

    .sl-item:after {
        content: '';
        background-image: url(/lib/svg/chevron-right.svg);
        width: 20px;
        height: 20px;
        background-size: 100%;
        background-repeat: no-repeat;
        top: 50%;
        transform: translateY(-50%)
    }

.sl-title {
    font-weight: 600
}

.menu-vertical .menu-inner > .menu-item .view-menu-link {
    font-weight: 400;
    padding-left: 15px;
    padding-top: .1rem;
    padding-bottom: .1rem;
    color: #616a75;
    font-size: 13px
}

    .menu-vertical .menu-inner > .menu-item .view-menu-link i {
        font-size: 18px !important
    }

.flex-start .pagination {
    justify-content: flex-start !important
}

.Pwl7A {
    list-style: none;
    margin-top: 10px
}

    .Pwl7A li {
        margin-bottom: 5px
    }

.badge.badge-dot {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    vertical-align: middle
}

.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span {
    background-color: #696cff
}

.layout-navbar .navbar-dropdown.dropdown-notifications .dropdown-notifications-list .dropdown-notifications-item .dropdown-notifications-actions > a {
    display: block;
    text-align: center;
    margin-bottom: 1px
}

.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-archive, .slick-loading .slick-slide, .slick-loading .slick-track {
    visibility: hidden
}

.dropdown-notifications-item:not(.mark-as-read):hover .dropdown-notifications-archive {
    visibility: visible
}

.product-canvas.active {
    cursor: w-resize;
    overflow: hidden;
    position: fixed;
    top: 75px;
    height: calc(100vh - 75px);
    background-color: #ffffff;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    margin: 0 !important;
}

#productLinkData {
    position: absolute;
    left: 18px;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    width: 95px
}

.product-link {
    display: flex;
    width: auto;
    height: auto
}

.product-link-wrapper {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    padding: 15px;
    box-shadow: 0 0 8px rgb(0 0 0 / .1);
    border-radius: 0.375rem;
    max-height: 500px;
    overflow: auto;
    margin-top: 60px;
}

.product-link-body {
    transition: transform .4s;
    width: 100%
}

.product-link-item {
    height: 60px;
    width: 60px;
    margin-bottom: 15px;
    background-color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    border: 1px solid #e8e8e8;
    transition: transform .4s;
    border-radius: 4px;
    cursor: pointer
}

    .product-link-item.active, .product-link-item:hover {
        border-color: #0b3fcf
    }

    .product-link-item img {
        width: auto;
        height: auto;
        border: 0;
        margin: auto;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0
    }

.product-filter-item .accordion-button {
    height: 48px !important
}

.departmentImage {
    float: left;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    background-color: #fff;
    height: 39px;
    width: 70px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-list, .slick-slider, .slick-track {
    position: relative;
    display: block
}

.departmentImage img {
    max-width: 60px;
    max-height: 20px;
    width: auto
}

.slick-slider {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

    .slick-dots li button:focus, .slick-dots li button:hover, .slick-list:focus {
        outline: 0
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand
    }

.slick-slider .slick-list, .slick-slider .slick-track {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.slick-track {
    top: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto
}

    .slick-track:after, .slick-track:before {
        display: table;
        content: ''
    }

    .slick-track:after {
        clear: both
    }

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    background-color: #ffffff;
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-loading .slick-list {
    background: url('./ajax-loader.gif') center center no-repeat #fff
}

.slick-dots li button, .slick-next, .slick-next:focus, .slick-next:hover, .slick-prev, .slick-prev:focus, .slick-prev:hover {
    color: transparent;
    outline: 0;
    background: 0 0
}

@font-face {
    font-family: slick;
    font-weight: 400;
    font-style: normal;
    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'),url('./fonts/slick.woff') format('woff'),url('./fonts/slick.ttf') format('truetype'),url('./fonts/slick.svg#slick') format('svg')
}

.slick-next, .slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    cursor: pointer;
    border: none
}

    .slick-dots li button:focus:before, .slick-dots li button:hover:before, .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {
        opacity: 1
    }

    .slick-next.slick-disabled:before, .slick-prev.slick-disabled:before {
        opacity: .25
    }

    .slick-next:before, .slick-prev:before {
        font-size: 28px;
        line-height: 1;
        opacity: .75;
        color: #000
    }

.slick-prev {
    left: 15px
}

[dir=rtl] .slick-prev {
    right: 0;
    left: auto
}

.slick-prev:before, [dir=rtl] .slick-next:before {
    content: '←'
}

.slick-next:before, [dir=rtl] .slick-prev:before {
    content: '→'
}

.slick-next {
    right: 15px !important
}

[dir=rtl] .slick-next {
    right: auto;
    left: -25px
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-carousel {
    width: 100%;
    height: 600px
}

    .slick-carousel img {
        height: 600px;
        width: auto !important;
        margin: 0 auto;
        max-width: 100%;
    }

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer
    }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            border: 0
        }

            .slick-dots li button:before {
                font-size: 6px;
                line-height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                content: '•';
                text-align: center;
                opacity: .25;
                color: #000
            }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            color: #000
        }

.slick-carousel a {
    cursor: zoom-in !important;
    display: block
}

.lightbox-image-container img {
    height: calc(100vh - 100px) !important;
    width: auto !important
}

.lightbox-nav {
    position: relative;
    margin-bottom: 12px;
    height: auto;
    text-align: center;
    font-size: 0
}

    .lightbox-nav .btn-group {
        vertical-align: top
    }

    .lightbox-nav .close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9999;
    }

.lightbox-image-container {
    position: relative;
    text-align: center
}

.lightbox-image-caption {
    position: absolute;
    top: 0;
    left: 0;
    margin: .5em .9em;
    color: #000;
    font-size: 1.5em;
    font-weight: 700;
    text-align: left;
    text-shadow: .1em .1em .2em rgba(255,255,255,.5)
}

    .lightbox-image-caption span {
        padding-top: .1em;
        padding-bottom: .1em;
        background-color: rgba(255,255,255,.75);
        box-shadow: .4em 0 0 rgba(255,255,255,.75),-.4em 0 0 rgba(255,255,255,.75)
    }


.popover-body > p {
    margin-bottom: 0;
    font-size: 14px;
    padding-left: 30px;
    position: relative;
}

.popover-body p .bx {
    position: absolute;
    left: 0;
    font-size: 26px;
}

.icon-width .dropdown-menu {
    min-width: 300px;
}

.icon-width button.badge-center {
    height: 1.8rem;
    width: 1.8rem;
}

.icon-width button.badge span {
    font-size: 20px !important;
}

.popover-body .list-group {
    border: 1px solid #ddd;
    margin-top: 10px;
}

.popover-body .list-group-item {
    padding: 4px 8px;
    font-size: 12px;
}

    .popover-body .list-group-item .badge-center {
        width: 1rem;
        height: 1rem;
        margin-right: 2px;
    }

.pdf-image {
    width: 70px;
    border-radius: 50%;
    overflow: hidden;
    height: 70px;
}

    .pdf-image img {
        height: 100%;
        width: auto;
        object-fit: cover;
    }

.education-tbody tr:last-child td {
    padding-bottom: 0 !important;
}

.document-file-input {
    display: grid;
    height: 165px;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid #ddd;
    border-radius: 0 0 12px 12px;
}

.document-slick {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ddd;
    padding: 5px;
    background-color: #fafafa;
}

    .document-slick .dz-item {
        position: relative;
    }

        .document-slick .dz-item .dz-item-actions {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 99;
            display: grid;
        }

        .document-slick .dz-item button {
            margin-bottom: 5px;
        }

    .document-slick .ds-privew {
        border-radius: 12px;
        overflow: hidden;
        width: 230px;
        height: 230px;
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fafafa;
        border: 1px solid #cbd6e2;
        margin: 12px;
    }

        .document-slick .ds-privew:hover {
            box-shadow: 0px 0px 15px rgb(0 0 0 / 15%);
        }

        .document-slick .ds-privew img {
            width: auto;
            height: auto;
            max-height: 100%;
            max-width: 100%;
            cursor: zoom-in;
        }

    .document-slick .slick-carousel {
        height: 100%;
    }

    .document-slick .slick-slide > div {
        height: 500px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

.lg-outer .lg-thumb-item img {
    width: auto !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 auto !important;
}

.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab;
    background-color: #fff;
    text-align: center;
}

.product-right-action {
    right: 0;
    top: 0;
    z-index: 99999;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgb(255 255 255);
    padding: 0;
    width: 200px;
    height: 100%;
    border-left: 1px solid #ddd;
    box-shadow: -15px 0px 20px 0px rgb(0 0 0 / 25%);
    opacity: 1;
    transition: 0.3s;
}

.stickyProductHideOrShow {
    position: fixed;
    z-index: 999999;
    top: 50%;
    transform: translateY(-50%);
    right: 175px;
    transition: 0.3s;
    background: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .stickyProductHideOrShow.disable {
        right: 15px;
        width: 35px;
        height: 35px;
    }

.product-right-action.disable {
    right: -200px;
    opacity: 0;
}

.stickyProductHideOrShow button {
    background-color: #154fef;
    padding: 0;
    width: 35px;
    border-radius: 999px 0 0 999px;
    height: 35px;
    border-radius: 50%;
    color: #fff !important;
}

.stickyProductHideOrShow.disable button {
    border-radius: 8px 0 0 8px;
}

.stickyProductHideOrShow button i {
    font-size: 24px !important;
}

.sticky-product-wrapper {
    overflow: auto;
    padding: 15px 25px;
    height: 100%;
    max-height: calc(100vh - 65px);
    /*    direction: rtl;*/
}

    .sticky-product-wrapper::-webkit-scrollbar {
        width: 4px;
    }

    .sticky-product-wrapper::-webkit-scrollbar-track {
        background-color: #eee;
        border-radius: 9999px;
    }

    .sticky-product-wrapper::-webkit-scrollbar-thumb {
        background-color: #999;
        border-radius: 9999px;
    }

.spw-item {
    margin-bottom: 10px;
    position: relative;
}

    .spw-item .product-item-checkbox {
        top: 5px;
        right: 5px;
        left: auto;
    }

.spw-title {
    text-align: center;
    font-size: 13px;
    margin-top: 5px;
}

.spw-image {
    width: 150px;
    height: 150px;
    padding: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    overflow: hidden;
    border-radius: 12px;
}

    .spw-image img {
        height: 100%;
        width: auto;
        margin: 0 auto;
        max-width: 100%;
    }

.spl-title {
    font-size: 16px;
    padding: 10px 10px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #ddd;
    background-color: #fafafa;
}

.createPaintPanels {
    position: absolute;
    z-index: 9;
    bottom: 15px;
    padding: 10px 5px;
    display: flex;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgb(255 255 255 / 75%);
    border-radius: 8px;
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
    border: 1px solid #ddd;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .06)) drop-shadow(0 1px 5px rgba(0, 0, 0, .2));
}

    .createPaintPanels > div {
        margin: 0 5px;
    }

    .createPaintPanels button {
        width: 64px;
        height: 64px;
        font-size: 12px;
        padding: 0;
        background-color: #ffffff;
        font-weight: 500;
        color: #000000;
        border-color: #ddd;
    }

        .createPaintPanels button:hover {
            filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .06)) drop-shadow(0 1px 5px rgba(0, 0, 0, .2));
            color: #154fef;
        }

        .createPaintPanels button > i {
            display: block;
            font-size: 24px;
        }

        .createPaintPanels button > span {
            display: block;
        }

.settings-panel {
    position: absolute;
    left: 0;
    padding: 10px;
    width: 300px;
    top: -100px;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgb(255 255 255 / 0.75);
    border: 1px solid #ddd;
    color: #000000;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .06)) drop-shadow(0 1px 5px rgba(0, 0, 0, .2));
    display: flex;
    border-radius: 6px;
    overflow: hidden;
}

.editable-text {
    position: absolute;
    cursor: move;
    z-index: 999;
    width: max-content;
}

    .editable-text:hover {
        outline: 1px solid #154fef !important;
    }

    .editable-text.ui-draggable-dragging {
        outline: 2px solid #154fef !important;
    }


@media(max-width:768px) {
    .product-filter-wrapper > div {
        text-align: left !important;
        margin: 7px 0 !important;
    }

    .btn-group-xs > .btn, .btn-xs, .btn, button, .top-button-list button {
        padding: 7px;
        font-size: 13px !important;
        margin: 0;
    }

    .product-filter-wrapper > div:nth-child(2) {
        width: 60% !important;
    }

    .product-filter-wrapper > div:nth-child(3) {
        width: 40% !important;
    }

        .product-filter-wrapper > div:nth-child(3) .d-flex {
            justify-content: end;
        }

    .product-filter-wrapper > div:nth-child(4) {
        width: 100% !important;
    }

        .product-filter-wrapper > div:nth-child(4) button {
            width: 32.5% !important;
            margin: 0 !important;
        }

    .product-right-action, .stickyProductHideOrShow {
        display: none !important;
    }

    .create-and-edit {
        margin: 0 !important;
        width: 100% !important;
    }

        .create-and-edit .w-auto:first-child,
        .create-and-edit .w-auto:last-child {
            min-width: auto;
        }

        .create-and-edit .create-and-edit-title {
            display: none !important;
        }

    .row {
        margin-right: -5px;
        margin-left: -5px
    }

        .row > * {
            flex-shrink: inherit;
            padding-right: 5px;
            padding-left: 5px;
        }

    .brand-wrapper {
        display: none !important;
    }

    .table-container th {
        padding: 0px 5px !important;
    }

    .product-item {
        padding: 0 0px;
    }

    .form-control, .select2-container .select2-choice {
        height: 36px;
    }

    .barcode-search span {
        height: 36px;
    }

    input[type=checkbox], input[type=radio] {
        height: 32px;
    }

        input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
            width: 32px;
        }

            input[type=checkbox]:not(.switch):after {
                width: 11px;
                height: 19px;
                border: 2px solid var(--active-inner);
                border-top: 0;
                border-left: 0;
                left: 8px;
                top: 1px;
                transform: rotate(var(--r, 20deg));
            }

    .app-brand-link img {
        max-height: 20px;
    }

    .accordion .col-md-3 {
        width: 100% !important;
    }

    .avl-label {
        height: 45px;
        line-height: 45px;
    }

    .row > * {
        width: 100%;
    }

    .slick-carousel img {
        height: auto;
        width: auto !important;
        margin: 0 auto;
        max-width: 100%;
    }

    .product-item tbody .tb-attributes-values {
        position: relative !important;
        border: 1px solid #ddd !important;
        margin-top: -7px;
        border-radius: 0 0 8px 8px !important;
        box-shadow: 0 10px 10px -3px rgb(0 0 0 / .05);
        z-index: 17;
        padding: 15px;
        left: -1px;
        right: 0;
        width: calc(100% + 2px);
        opacity: 1;
        visibility: inherit;
        height: auto;
        background-color: #fafafa !important
    }

    .canvasButtonGroup {
        position: relative;
        left: 0;
        top: 0;
        z-index: 120;
        width: 100%;
        text-align: center;
        border-radius: 12px 12px 0 0;
        border-bottom: 1px solid #ddd;
    }

        .canvasButtonGroup .dropdown-menu {
            width: 100% !important;
        }

    .canvas-button {
        position: absolute;
        top: 10px;
        z-index: 100;
        right: 0;
        display: inline-block;
        width: max-content;
        left: 0;
        margin: 0 auto;
    }

    .photoContainer {
        padding-top: 50px !important;
    }

    .product-link-wrapper {
        background-color: #fff;
        border: 1px solid #e8e8e8;
        padding: 0px;
        box-shadow: 0 0 8px rgb(0 0 0 / .1);
        border-radius: 0.375rem;
        max-height: 500px;
        overflow: auto;
        margin-top: 60px;
    }

    .product-link-item {
        height: 45px;
        width: 45px;
    }

    .photoContainer img {
        object-fit: contain;
        object-position: center center;
        cursor: w-resize;
        object-fit: contain;
        object-position: center center;
        border: 0;
        margin: auto;
        height: auto;
        width: auto;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }

    .editor-button-list button:not(.right) {
        display: none;
    }

    .product-canvas {
        height: calc(100vh - 150px);
    }

    .editor-section {
        height: 75px;
        border-radius: 0;
    }

    .editor-button-list .right {
        position: relative;
        right: 0;
        width: 100%;
    }
}


#sortable tr.selected.ui-sortable-helper {
    background-color: #cce1ff;
    left: 15px;
    right: 0;
    border-radius: 0;
}

.custom-option.custom-option-icon .custom-option-content {
    padding: 1.065em;
    text-align: center;
}

.custom-option.custom-option-icon .custom-option-body .icon-base {
    block-size: 1.75rem;
    font-size: 1.75rem;
    inline-size: 1.75rem;
    display: block;
    margin-block-end: .5rem;
    margin-inline: auto;
}

.custom-option.custom-option-icon .form-check-input {
    margin: 0;
    float: none;
}

.custom-option {
    border: 1px solid #eee;
    border-radius: .375rem;
    padding-inline-start: 0;
}

    .custom-option.custom-option-icon .custom-option-body .custom-option-title {
        display: block;
        color: var(--bs-heading-color);
        font-weight: 600;
        margin-block-end: 0;
    }

    .custom-option.custom-option-icon .custom-option-body {
        display: block;
        margin-block-end: .5rem;
    }


@media (min-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}