@import url("../css/../../tabler-ui/dist/css/tabler.min.css");
@import url("../css/../../tabler-ui/dist/css/tabler-vendors.css");
@import "_mw_tabler";
@import "file-robot-image-editor";

:root {

    //--tblr-body-bg: white;
        --tblr-body-font-family: 'Inter';
        --tblr-body-bg2: #f0f0f0;
        --mw-forms-min-height: 45px;
        --mw-admin-gray-color: #f5f5f5;

    body:not(.theme-dark) {
        --tblr-bg-surface-tertiary: #e1edf9;
        .lg-light {
            background-color: var(--tblr-bg-surface-tertiary);
        }

    }

}body {
    --tblr-btn-border-radius: 112px;
}

body:not(.theme-dark, .is_admin) {
    .bg-azure-lt {
        background-color: var(--tblr-body-bg) !important;
    }
}

body.theme-dark {
    --tblr-body-bg2: #0b0b0c;
    --tblr-body-color: #ffffff;
    --mw-admin-gray-color: #4a4a4a;

    .form-check-input:not(:checked), .form-control, .form-file-text, .form-select, .form-selectgroup-check {
        background-color: var(--tblr-body-bg);
        border-color: var(--tblr-body-bg);
    }

    .mw-ui-box.mw-ui-navigation {
        background-color: var(--tblr-bg-surface);

        li {
            &:hover {
                background-color: var(--tblr-bg-surface);
            }
            a {
                color: var(--tblr-body-color);
                &:hover {
                    background-color: var(--tblr-body-surface);

                }
            }
        }
    }

    .mw-dialog-skin-default .mw-dialog-close {

        &:hover {
            &:after {
                filter: none;
            }
        }
        &:after {


            filter: invert(1);

        }

    }

    .dashboard-icons-wrapper {
        background-color: var(--tblr-body-bg) !important;
    }

    .active>.page-link, .page-link.active {

        color: var(--tblr-bg-surface) !important;
    }

    .dots-menu-2 {
        &:after {
            filter: invert(1);
        }
    }

    .btn-outline-dark, .btn-dark {
        color: var(--tblr-body-color) !important;
        border-color: var(--tblr-body-color) !important;

        &:hover, &:active, &.active, &:focus {
            background-color: var(--tblr-body-color);
            color: black !important;

        }
    }


    .admin-dashboard-left-nav {
        .dropdown-toggle {
            &:after {
                filter: invert(1);
            }
        }
    }


    .content-card-blade-dots-menu-wrapper {


        .content-card-blade-dots-menu {
            &:after {
                filter: invert(1);
            }

            &.dots-menu-2 {
                &:after {
                    filter: invert(1);

                }
            }
        }
    }

    .card.modules-card {
      svg {
        filter: invert(1);
          color: black;
      }
    }

    .admin-users-no-user-img-wrapper {
        img  {
            filter: invert(1);
        }

    }


    //LIVE EDIT FOR DARK THEME

    .mw-live-edit-resolutions-wrapper, .mw-live-edit-right-sidebar-wrapper {
        background-color: var(--tblr-body-bg) !important;
    }

    .v3ti {
        .v3ti-tag {
            background-color: var(--tblr-body-bg) !important;
            color: var(--tblr-body-color) !important;
        }
    }

    .mw-domtree-item-label {
        color: var(--tblr-body-color) !important;
    }

    .mw-domtree-item-label .mw_module_settings_sidebar_icon {
        filter: invert(1);
    }

    .live-edit-toolbar-buttons {
        &:hover, &.live-edit-resolution-active, &.live-edit-right-sidebar-active , &:focus, &:active, &.active  {
            background-color: var(--tblr-bg-surface) !important;
            border-color: var(--tblr-bg-surface) !important;

            svg {
                fill: var(--tblr-body-color) !important;
                color: var(--tblr-body-color) !important;
            }
        }
        svg {
            fill: var(--tblr-bg-surface) !important;
            color: var(--tblr-bg-surface) !important;
        }

        img {
            filter: invert(1);
        }
    }

    .modal-add-new-buttons-img, .mw-liveedit-button-actions-component {
        svg:not(.text-danger) {
          filter: invert(1);
        }
    }

    .mw-list-group-accordion-buttons {
        &:after {
            filter: invert(1);
        }
    }

    .btn.live-edit-toolbar-buttons {
        &:hover {
            border-color: var(--tblr-body-color) !important;
            color: var(--tblr-body-color) !important;
        }
    }

    .live-edit-toolbar-buttons-undo-redo, .live-edit-toolbar-buttons {
        svg {
            fill: var(--tblr-body-color) !important;
            color: var(--tblr-body-color) !important;
        }
    }

    #bubble-nav span {
        background-color: var(--tblr-bg-surface) !important;
        color: var(--tblr-body-color) !important;

        svg {
            fill: var(--tblr-body-color) !important;
        }
    }
    .mw-le-modules-dialog .modules-list-block-item-picture{
        filter: invert(1);
    }
    .mw-le-layouts-dialog{
        .modules-list-block-item-picture {
            background-color: var(--tblr-body-bg2) !important;
        }
    }

    .mw-le-layouts-dialog .modules-list-block-item-title, .modules-list-block-item-masonry-title {
        background-color: var(--tblr-body-bg) !important;

    }

    .mw-le-dialog-close {
        filter: invert(1);
    }

    .form-check-input:checked {
        background-color: var(--tblr-body-bg2) !important;
    }

    //END LIVE EDIT FOR DARK THEME
}

.btn-dark {
    color: #fff !important;
}

.modules-list-block-item-picture {
    background-size: contain !important;
}

.btn-outline-dark {
    &:hover, &:active, &.active, &:focus {
        border-color: var(--tblr-body-color) !important;
    }
}

.card.modules-card {
    svg {
        color: var(--tblr-body-color);
    }
}

.mw-dialog-skin-default.active .mw-dialog-holder, .mw-dialog-skin-default.active .mw-dialog-header, .FIE_root.jUrMob {
    background-color: var(--tblr-bg-surface);
}
.gcXnsi.FIE_tab {
    background-color: var(--tblr-body-bg);

    &:hover, &[aria-selected="true"] {
        background-color: var(--tblr-bg-surface-tertiary);
       svg {
            color: var(--tblr-primary);
       }
    }
}

body, .is_admin {
    font-family: var(--tblr-body-font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;

}

.table-responsive, .mw-dialog-header {
    background-color: var(--tblr-bg-surface);
}

.mdi.text-muted, label, .tblr-body-color {
    color: var(--tblr-body-color) !important;
}

.tblr-body-bg, .mw-field select, .mw-field input, input.regular, select.regular {
    background-color: var(--tblr-bg-surface) !important;
}

.tblr-body-bg {
    background-color: var(--tblr-body-bg) !important;
}
.navbar-vertical.navbar-expand-lg.admin-dashboard-left-nav{
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
}

#sidebar-menu{
    display: flex;
}

.navbar-vertical.navbar-expand-xl {
    overflow: hidden;
}

.admin-dashboard-left-nav {
    background-color: var(--tblr-bg-surface);

    li {
        list-style: none;
    }

    .navbar-brand.navbar-nav-padding {
        margin-top: 25px;
    }

    .add-new {

        position: absolute;
        top: 7px;
        visibility: hidden;

        &.add-new-dots {
            right: 5px;
        }

        &.add-new-hamburger{
            left: 5px;
        }

        svg {
            width: 20px;
            height: 20px;
        }
    }

    .nav-item-profile {
        padding-top: 10px;
        padding-bottom: 5px;
    }

    .nav-item.nav-item-profile {



        .profile-img {
            width: 40px;
            height: 40px; object-fit: cover;
            object-position: center;
            margin-inline-end: 10px;
        }
    }



    .nav-link {
        padding: 15px 0 !important;

        @media screen and (min-width: 767px) {
            span {
                position: relative;
                display: block;
            }

            span:after {
                position: absolute;
                content: '';
                bottom: -5px;
                left: 0;
                height: 2px;
                width: 0;
                background-color: var(--tblr-body-color);
                opacity: 0;
                transition: .5s;
            }

            &:after {
                width: 30px;
                height: 30px;
                padding-top: 5px;
                position: absolute;
                top: 14px;
                right: 0;
            }

            &:hover, &.active {
                span:after {
                    width: 100%;
                    opacity: 1;
                    font-weight: bold;
                }

                &:after {
                    background-color: #efefef;

                }
            }

        }
    }

    .dropdown-menu-column {
        padding: 15px 0;
    }

    .dropdown-item {
        color: var(--tblr-body-color);
        min-width: none;
        &:hover {
           .add-new{
               visibility: visible;
           }
        }
    }

    .dropdown-toggle {
        &.show {
            &:after {
                transition: .4s;
                rotate: 90deg;
                background-color: #efefef;
            }

            font-weight: 600;

            span:after {
                width: 100%;
                opacity: 1;

            }
        }


        &:after {
            border: none;
            content: url("data:image/svg+xml; utf8,<svg fill='currentColor' xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 96 960 960' width='20'><path d='m376 816-56-56 184-184-184-184 56-56 240 240-240 240Z'/></svg>");
            transform: unset;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-inline-end: 0;
            border-radius: 50%;

        }
    }

    hr.thin {
        margin: 0 !important;
    }
}

.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item.active {
    background-color: var(--tblr-navbar-active-bg);

    color: var(--tblr-primary);
}

.multilanguage-translations-collapse {
    .dropdown-toggle {
        &:not(.collapsed), &:hover {
            &:after {
                transition: .4s;
                rotate: 90deg;
                background-color: #efefef;
            }

            font-weight: 600;

            span:after {
                width: 100%;
                opacity: 1;

            }
        }


        &:after {
            border: none;
            content: url("data:image/svg+xml; utf8,<svg fill='currentColor' xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 96 960 960' width='20'><path d='m376 816-56-56 184-184-184-184 56-56 240 240-240 240Z'/></svg>");
            transform: unset;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-inline-end: 20px;
            border-radius: 50%;
            margin-inline-start: auto;

            width: 30px;
            height: 30px;
            padding-top: 5px;
            position: absolute;
            top: 14px;
            right: 14px;

        }
    }
}

.hidden {
    display: none;
}

.card-header {
    border-bottom: 0;
    padding-top: 0;
}


.settings-info-holder-title {
    color: var(--tblr-body-color);
    font-weight: bold;
    //margin-bottom: 10px;
}

.card-title strong {
    font-weight: bold;
    font-size: 18px;
}

.main-pages-title {
    font-weight: bold;
    font-size: 24px;
    margin: 0 0 20px 0;
    color: var(--tblr-body-color);
}


.module {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


#settings-container {
    min-height: 350px;
}

p {
    color: var(--tblr-body-color);
}

body.mw-iframe-admin {
    background-color: var(--tblr-bg-surface) !important;
    max-width: 100%;
    overflow-x: hidden;
    //overflow-y: hidden;
}

.settings-holder-wrapper {
    border: 1px solid transparent;
    padding: 40px 20px;
    width: 100%;

    &:hover {
        text-decoration: none;
        border-color: #d8e8ff;
        border-radius: 15px;
        background: var(--tblr-bg-surface-secondary);
    }
}

.icon-holder {
    padding: 8px 12px;
    background: var(--tblr-bg-surface-tertiary);

    border-radius: 10px;
    align-items: start;
    align-self: center;
    display: flex;
    margin-inline-end: 20px;
    position: relative;


    i {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: var(--tblr-body-color);
        margin: 0;
    }

    .mw-update-required {
        position: absolute;
        top: -3px;
        right: -3px;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: #4993fc;
    }
}

.module-settings-group-website-group, .module-shop-settings {
    .card-title:not(.info-holder) {
        margin-top: 10px;
    }
}

.card {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border: none;
    min-height: 110px;
}
.form-label, .dropdown-item-indicator {
    color: var(--tblr-body-color);
}

.form-group {
    .form-label {
        margin: 5px 0;
    }
}

#email_send_test_btn_output {
    background-color: transparent;
}

.mw-dialog-close {
    margin-inline-start: auto;

}

.mw-dialog-skin-default .mw-dialog-close {
    top: 17px;
    right: 13px;
}

.mw-backup-restore, .mw-dialog-holder {
    p, h3, h2, small, span:not(.btn.btn-primary, .page-link), label {
        color: var(--tblr-body-color);
    }
}

td, tr, th, .theme-dark .input-group-text {
    color: var(--tblr-body-color);
    background-color: var(--tblr-body-bg);
}

.mw-dialog-skin-default .mw-dialog-footer {
    border-top: none !important;
}

.mw-alert-holder {
    font-size: 16px;
    color: var(--tblr-body-color) !important;

}

.settings-title-inside {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    color: var(--tblr-body-color) !important;
}
.mw-dialog-header {
    min-height: 3.5rem !important;
}

.img-circle-holder {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tblr-bg-surface);
    border: 1px solid transparent;
    border-radius: 50%;
}

.mw-btn-icon {
    padding: 6px 10px;
    font-size: 20px;
    margin: 0 10px;
    border-radius: 3px;
    cursor: pointer;
}

.card-body {
    .row {

        @media screen and (min-width: 1300px) {
            padding: 30px;
        }
        padding: 10px;

    }
}

small.text-muted {
    color: var(--tblr-body-color) !important;
    font-size: 14px !important;
}

.form-label {
    font-size: 1rem;
}

#mw-notifications-holder {
    position: relative;
    z-index: 9999;
}

#mw-notifications-holder .mw-notification:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

#mw-notifications-holder .mw-notification {
    left: 50%;
    -webkit-margin-start: -175px;
    margin-inline-start: -175px;
    position: fixed;
    top: 0;
    transition: opacity 2s;
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    width: 200px;
    color: var(--tblr-bg-surface);

}

#mw-notifications-holder .mw-notification + .mw-notification {
    top: 40px;
}

#mw-notifications-holder .mw-notification + .mw-notification + .mw-notification {
    top: 80px;
}

#mw-notifications-holder .mw-notification + .mw-notification + .mw-notification + .mw-notification {
    top: 120px;
}

#mw-notifications-holder .mw-notification + .mw-notification + .mw-notification + .mw-notification + .mw-notification {
    top: 160px;
}

#mw-notifications-holder .mw-notification + .mw-notification + .mw-notification + .mw-notification + .mw-notification + .mw-notification {
    top: 200px;
}

#mw-notifications-holder .mw-notification + .mw-notification + .mw-notification + .mw-notification + .mw-notification + .mw-notification + .mw-notification {
    top: 240px;
}

.form-check-input {
    width: 1.3rem;
    height: 1.3rem;
    background-size: unset;

}

.mdi-20px {
    font-size: 20px;
}

.form-control {
    padding: .65rem .9rem;
    min-height: var(--mw-forms-min-height);
}


.form-select, .dropdown-toggle:not(.btn) {
/*    padding: 0.65rem 2.25rem 0.65rem 0.75rem;
    min-height: 45px;
    */
    color: var(--tblr-body-color);
    font-size: 1rem;
}

.form-select-lg {
    padding: 0.65rem 2.25rem 0.65rem 0.75rem;
    min-height: var(--mw-forms-min-height);
    border-radius: 4px;
}

.input-group, input, .custom-control, .nav-link, textarea  {
    color: var(--tblr-body-color) !important;

}

.btn:not(.btn-sm, .live-edit-toolbar-buttons) {
    padding: 0.65rem 1.25rem;
    min-height: var(--mw-forms-min-height);
}


.btn.btn-link {
    padding: 0;
    border: none;
    background-color: transparent;

    &:hover, &:active {
        background-color: transparent;
    }

}

.tab-content {
    padding-inline-end: 0;
    padding-inline-start: 0;
    padding-left: 0;
    padding-right: 0;
}

.form-switch .form-check-input {
    height: 1.25rem;
    width: 2.4rem;
}

.admin-toolbar-buttons {
    transition: 0.25s ease;

    &:hover {
        transform: scale(1.1);
        background-color: #f8fcff !important;
    }
}

.admin-add-new-modal-buttons {
    border-radius: 5px;
    padding: 13px;
    transition: 0.25s ease;

    h3, p {
        color: var(--tblr-body-color);
    }

    .modal-add-new-buttons-img {
        background-color: #f1f5f9;
        padding: 20px 15px;
        text-align: center;
        border-radius: 3px;
        box-shadow: var(--tblr-shadow-button-inset);

    }

    &:hover {
        //transform: scale(1.1);
        background-color: var(--tblr-body-bg) !important;
        cursor: pointer;
        text-decoration: none;

        .modal-add-new-buttons-img {
            background-color: white;
        }
    }
}

.font-weight-light {
    font-weight: 300;
}

.font-weight-normal {
    font-weight: 400;
}

.font-weight-bold {
    font-weight: 500;
}

.font-weight-bolder {
    font-weight: 600;
}

.modal-add-new-buttons-p {
    font-size: 13px;
    color: #2b2b2b;
}

.mw-admin-sidebar-profile {
    background: var(--tblr-body-bg);
    margin-inline-end: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.btn-group-sm>.btn, .btn-sm {
    padding: 3px 15px;
    font-size: 14px;
    border-radius: 2px;
}

.btn {

    font-weight: normal;
}

.navbar .navbar-nav .nav-link .badge {
    top: 0;
    background-color: var(--tblr-primary);
    padding: 4px;
}


.form-check-input {
    margin-top: -1px;
}


.mw-toolbar-back-button-wrapper {
    a {
        height: 40px;
        width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: 0.25s ease;
        margin-inline-start: -10px;
        color: var(--tblr-body-color);

        &:hover {
            background-color: var(--tblr-bg-surface);
            border-radius: 50%;
            box-shadow: var(--tblr-shadow-button-inset);
        }
    }
}

.form-label-inner {
    font-size: 0.8rem;
}

.form-group {
    margin-bottom: 20px;
}

.dashboard-title-container {
    padding: 30px 0;

    .dashboard-welcome-title {
        font-size: 36px;
        margin-bottom: 15px;
        font-weight: 700;
    }
    .dashboard-welcome-p {
        font-size: 24px;
        font-weight: 500;
    }
}

.apexcharts-menu-icon {
    display: none;
}

.advanced-settings-small-helper {
    font-size: 14px;
    padding-bottom: 10px;
    color: var(--tblr-body-color);
}

.advanced-settings-p-helper {
    font-size: 16px;
    padding-bottom: 10px;
    color: var(--tblr-body-color);
}

.dashboard-admin-cards {
    .dashboard-admin-cards-a {
        text-decoration: none;
        color: var(--tblr-body-color);
    }

    .dashboard-icons-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 5px;

        svg {
            width: 30px;
            height: 30px;
        }

        &.wrapper-icon-emails {
            background-color: #e1f9f9;

            svg {
                fill: #0078dd;
            }
        }

        &.wrapper-icon-messages {
            background-color: #e1edf9;

            svg {
                fill: #0078dd;
            }
        }

        &.wrapper-icon-comments {
            background-color: #f9e1f3;

            svg {
                fill: #f20c78;
            }
        }

        &.wrapper-icon-orders {
            background-color: #f9f3e1;

            svg {
                fill: #ee9d00;
            }
        }

        &.wrapper-icon-sales {
            background-color: #e1f9e6;

            svg {
                fill: #3d9707;
            }
        }

        &.wrapper-icon-statistics {
            background-color: var(--tblr-body-bg);

        }

    }

    small {
        margin-bottom: 6px;
    }

    a {
        font-weight: 500;
    }

    p {
        font-weight: 500;
        font-size: 16px;
    }

    .dashboard-numbers {
        font-size: 30px;
        font-weight: 600;
    }
    .btn.btn-link {
        font-size: 16px;
        padding: 0 !important;
        margin-bottom: 35px;
    }
}


.dropdown-menu-column-item{
    position: relative;
}
 .mw-admin-sidebar-navigation-menu{
    z-index: 2;
    position: absolute;
    top: 100%;
    right: 9px;
    visibility: hidden;
    opacity: 0;
    transition: .2s;
    min-width: 150px;

 }

 .mw-admin-sidebar-navigation-menu.active{
    opacity: 1;
    visibility: visible;
 }

 html[dir="rtl"]  .mw-admin-sidebar-navigation-menu{
    left: auto;
    right: auto;
 }

 .d-block {
     display: block !important;
 }

#js-page-tree-wrapper {
    margin-top: 60px;
}

.module-standalone-icons-check {
    .text-success {
        svg {
            fill: var(--tblr-success);
        }
    }

    .text-danger {
        svg {
            fill: var(--tblr-danger);
        }
    }
}


#allow-users-social-newtworks-login {
    small {
        font-size: 13px;
    }
}


.multilanguage-module-dropdown-settings {
    color: var(--tblr-primary);
}

.mw-dropdown-default .mw-dropdown-content li {
    &:hover {
        background-color: #efefef;
    }
}



.navbar-vertical.navbar-expand-lg .navbar-collapse div.tomselect .dropdown-menu{
    position: absolute;
    background-color: var(--tblr-bg-surface);
}

.navbar-vertical.navbar-expand-lg .navbar-collapse div.tomselect .dropdown-menu .dropdown-item{
    padding-inline-start: 10px;
}


.shipping-module-draggable-item, .card-product-holder, .mw-tree-item-content {
    .cursor-move-holder, .mdi-cursor-move {
        opacity: .5;
        cursor: grab;
    }

    &:hover {
        .cursor-move-holder, .mdi-cursor-move {
            opacity: 1;

        }
    }

}

.nav-link:focus, .nav-link:hover {
    color: var(--tblr-body-color);
}

.mw-ui-box-header, .mw-ui-box:not(.mw-accordion-content, .mw-module-settings-box) {
    background-color: var(--tblr-bg-surface-secondary);
}

.trash-svg-icon {
    fill: var(--tblr-danger);
}


.mw-alert-holder {
    padding: 20px;
    font-size: 16px;
}

.mw-dialog-skin-default .mw-dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.you-dont-have-any {
    svg {
        opacity: .7;
        width: 350px;
        height: 350px;
    }
}

.js-table-active {
    background-color: transparent !important;
}

.js-table-inactive {
    background-color: transparent !important;
}

.btn.btn-outline-primary.js-lang-file-position {

    &:active, &:focus {
        background-color: var(--tblr-primary);
        color: var(--tblr-white);
    }
}

.modules-card {
    .modules-uninstall-button {
        visibility: hidden;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 18px;
    }

    &:hover {
        .modules-uninstall-button {
            visibility: visible;
        }
    }
}

.offers-table {
    td.min-width-100 {
        min-width: 100px;
    }
}

.input-icon-addon:last-child {
    right: 10px;
}

.dashboard-statistics-card-wrappers {
    .card-body {
        height: 300px;
    }
}

.stats-view .visitors .visitor .page-dots .page-circle {
    float: left;
    display: block;
    margin: 0 1px 0 0;
    width: 5px;
    height: 10px;
    background: #ccc;
    -webkit-box-shadow: inset 0 -1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25);
    box-shadow: inset 0 -1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25);

}

.stats-view .visitors .visitor .page-dots {
    border: 1px solid #e5e5e5;
    clear: both;
    height: 14px;
    padding: 1px;
    margin-top: 2px;
}

.hover-bg-light {
   &:hover {
           --tblr-bg-opacity: 1;
           background-color: var(--tblr-body-bg) !important;

   }
}

.modal-header {
    padding: 0 1.5rem 0 1.5rem;
}

.modal-header, .modal-body, .modal-footer {
    color: var(--tblr-body-color);
    border: none;
}

.font-weight-bold {
    font-weight: 600;
}


/* BADGE DROPDOWN FOR FILTERS */
.badge-dropdown {
    background: var(--tblr-bg-surface);
    padding: 20px;
    position: absolute;
    z-index: 15;
    box-shadow: 0 4px 12px var(--tblr-shadow-color);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-top:4px solid var(--tblr-toast-border-color);
    width:300px;
    margin-top:10px;
    visibility:hidden;
    opacity:0;
    transition: 0.3s;
    transform: scale(0);
    transform-origin: center top;
}
.badge-dropdown.active {
    visibility:visible;
    transform: scale(1);
    opacity:1;
}

.badge-dropdown::after {
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent var(--tblr-bg-surface) transparent;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: -13px;
}

.btn-badge-dropdown .action-dropdown-icon {
    cursor: pointer;
    float: right;
    width: 16px;
    padding-top: 0px;
    margin-inline-start: 5px;
    font-size:12px;
}
.btn-secondary .action-dropdown-icon {
    color: var(--tblr-bg-surface);
}

.btn-secondary:hover .action-dropdown-icon {
    color: var(--tblr-bg-surface);
}

.btn-badge-dropdown .action-dropdown-delete {
    cursor: pointer;
    float:right;
    width:24px;
    height:15px;
    padding-inline-start:8px;
}

.action-dropdown-delete {
    color: var(--bs-danger) !important;
}

.btn-secondary .action-dropdown-delete:hover {
    color: var(--tblr-bg-surface);
}


.badge-filter-item {
    background: var(--tblr-bg-surface);;
    color: var(--tblr-body-color);
    border-radius: 15px;
    padding: 5px 6px;
    margin: 0px 12px;
    font-size: 12px;
}

.table-blade-sortable-elements {
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 45px;
    cursor: pointer;
    display: flex;

}



.create-page-clean {
    background: var(--tblr-body-bg);
}

.mw-iframe-admin  {

    .mw-create-page-admin-wrapper {
        height: 300px;

        .preview_frame_container.preview-in-iframe {
            height: 300px !important;
        }

        .preview_frame_container.preview-in-iframe iframe {
            transform: scale(.25);
            height: 3000px !important;
        }
    }
}

.mw-defaults.mw-tree-nav.mw-tree-nav-skin-default, #mw-tree-1 {
    overflow-y: auto;
    //max-height: 380px;
}

.mw-create-page-admin-wrapper {
    position: relative;

    #mw-create-page-card-overlay {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.3);
        z-index: 2;
        cursor: pointer;
    }
    &:hover {
        #mw-create-page-card-overlay {
           display: block;
        }
        .mw-create-page-admin-create-btn {
            visibility: visible;
        }
    }

    .mw-create-page-admin-create-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
        position: absolute;
        top: 44%;
        right: 41%;
        z-index: 3;
    }
}

.mw-content-vision-tabs {
    border-color: transparent !important;
    color: var(--tblr-body-color) !important;

    &:active, &:hover, &.active {
        background-color: transparent !important;
        color: var(--tblr-body-color) !important;
        border-color: var(--tblr-body-color) !important;
    }
}

.btn.show {
    border-color: transparent !important;

}

.no-items-box {
    background-repeat: no-repeat;
    height: 450px;
    width: 450px;
    margin: 0 auto;
}

.comments-card {
    &:hover {
        .dots-menu-2 {
            &:after {

                visibility: visible !important;
            }
        }
    }
}

td {
    .content-card-blade-dots-menu-wrapper {
        .dropdown-menu {
            inset: 10px -20px auto auto !important;
        }
    }
}

.content-card-blade-dots-menu-wrapper {
    &:hover {
        background-color: unset;
    }

    .content-card-blade-dots-menu {
        &:after {
            position: absolute;
            right: 25px;
            bottom: 5px;
            border: none !important;
            transform: none !important;
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") !important;

        }

        &.dots-menu-2 {
            &:after {

                @media screen and (min-width: 1200px) {
                    visibility: hidden;
                }
                position: relative;
                top: 6px;
                right: 6px;
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") !important;
            }
        }

        &.dots-menu-3 {
            &:after {
                right: 70px;
                bottom: 15px;
            }
        }
    }
}



.manage-post-item-links {
    a {
        margin: 5px 0;
        color: var(--tblr-body-color);

        &:hover {
            background-color: var(--tblr-body-bg);
        }
    }
}

svg.text-danger {
    fill: var(--tblr-danger) !important;
}

.badge.bg-green-lt {
    svg {

        fill: var(--tblr-success) !important;
    }
}


.card-product-holder {
    &:hover {
        .display-types-content-icons {
            visibility: visible;
        }
    }

    .display-types-content-icons {
        visibility: hidden;
    }
}

.admin-action-links-dropdown {
    position: relative;

    &:after {
        content: url("data:image/svg+xml; utf8,<svg fill='currentColor' xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 96 960 960' width='20'><path d='m376 816-56-56 184-184-184-184 56-56 240 240-240 240Z'/></svg>");
        position: absolute;
        right: -8px;
        top: 0;
    }
}

.mw-admin-action-links {
    position: relative;
    text-decoration: none !important;
    color: var(--tblr-body-color);
    font-weight: 500;
    outline: none;
    svg{
        fill: currentColor;
    }

    &:focus{
        outline: none;
    }
    &:disabled{
        opacity: .3;
        pointer-events: none;
    }

    &.mw-adm-liveedit-tabs {
        font-weight: 600;

        &:active, &:focus, &.active {
            font-weight: 700;

        }

        &.text-danger {
            color: var(--tblr-danger) !important;

            &:after {
                background-color: var(--tblr-danger);
            }

            &:hover {
                color: var(--tblr-danger) !important;
            }
        }
    }

    &.mw-liveedit-button-animation-component {
        background: transparent;
        border: none;
    }

    &:after {
        position: absolute;
        content: '';
        bottom: 5px;
        left: 0;
        height: 2px;
        width: 0;
        background-color: var(--tblr-body-color);
        opacity: 0;
        transition: .5s;
    }

    &:hover, &:active, &:focus, &.active, &.mw-action-links-with-accordion:not(.collapsed) {
        &:after {
            width: 100%;
            opacity: 1;
        }
        color: var(--tblr-body-color) !important;
        font-weight: 600;
    }

    &:not(&.btn) {
        padding-bottom: 12px !important;
    }
}

.active>.page-link, .page-link.active {
    background-color: var(--tblr-body-color);
    color: var(--tblr-light);
}
.mw-design-page-prev-next-buttons-wrapper {
    display: flex;
    justify-content: end;

    .mw-design-page-prev-next-buttons {
        background-color: var(--tblr-body-bg) !important;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-inline-end: 3px;

        .js-previous-layout {
            color: var(--tblr-body-color);
        }

        .js-next-layout {
            color: var(--tblr-body-color);
        }
    }
}

.mw-liveedit-button-actions-component {
    background: transparent;
    border: none;
}

.preview_frame_container iframe {
    border: none;
}

.marketplace-template-img-wrapper {
    position: relative;

    &:hover {

        .marketplace-template-img-wrapper-overlay {
            background-color: rgba(0, 0, 0, 0.7);
            opacity: 1;
        }
    }

    .marketplace-template-img-wrapper-overlay {
        transition: .5s ease;
        background-color: transparent;
        position: absolute;
        top: 50%;
        left: 47%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
        height: 100%;
        width: 100%;
        opacity: 0;


        .marketplace-template-img-btn {
            opacity: 1;
            z-index: 1;
            position: absolute;
            top: 45%;
            left: 40%;
        }
    }

}


.mw-admin-bold-outline-dark {
    font-weight: bold;
    border: 2px solid black;
}

.mw-admin-edit-post-publish {
    border-radius: 10px;
    background-color: rgba(32, 128, 0, 0.12);
    padding: 3px 10px;

}

.mw-admin-edit-post-unpublish {
    border-radius: 10px;
    background-color: rgba(255, 0, 0, 0.12);
    padding: 3px 10px;
}

.quick-parent-selector {
    .mw--global-admin-tree {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

.mw-admin-multilang-lang-name {
    display: none;
}

.input-group-append .bootstrap-select .dropdown-menu li.active small {
    color: var(--tblr-body-color) !important;

}

.content-title-field-row {

    .dropdown-toggle:after {
        width: 0.6em;
        height: 0.46em;
    }
}

#content-title-field{
    font-size: 26px;
    font-weight: 500;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding-inline: 0;
    outline: none !important;
    box-shadow: none;
}

.manage-post-item-title {
    word-break: break-all;
}

.ts-wrapper.form-select {
    display: block;

    .dropdown-menu.ts-dropdown.single {
        position: absolute;
        background: var(--tblr-bg-surface);

        .dropdown-item {
            padding-inline-start: 20px;
        }
    }
}

.flex-none {
    flex: none !important;
}

.input-group {

    .input-group-prepend {

        .input-group-text {
            height: 100%;
        }
    }
}

.mw-select .mw-select-value:after {
    content: '';
}

.mw-dropzone{
    text-align: center;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


// !!!!!!!!!!! CUSTOM FIELDS ICONS !!!!!!!!!!!!!


.mw-custom-field-title {
    color: var(--tblr-body-color);
    font-size: 14px;
}


[class*='mw-custom-field-icon-'] {
    display: block;
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: 24px;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--tblr-body-color);
    margin-bottom: 5px;
}

.mw-custom-field-icon-phone:before {
    content: '\F011D';
}

.mw-custom-field-icon-breakline:before {
    content: '\F0374';
}

.mw-custom-field-icon-hidden:before {
    content: "\F0209";
}

.mw-custom-field-icon-text:before {
    content: '\F0284';
}

.mw-custom-field-icon-address:before {
    content: '\F02DC';
}

.mw-custom-field-icon-site:before {
    content: '\F01E7';
}

.mw-custom-field-icon-date:before {
    content: '\F00EF';
}

.mw-custom-field-icon-time:before {
    content: '\F0150';
}

.mw-custom-field-icon-email:before {
    content: '\F01EE';
}

.mw-custom-field-icon-upload:before {
    content: '\F0B7E';
}

.mw-custom-field-icon-price:before {
    content: '\F01C1';
}

.mw-custom-field-icon-number:before {
    content: '\F03A0';
}

.mw-custom-field-icon-radio:before {
    content: '\F043E';
}

.mw-custom-field-icon-checkbox:before {
    content: '\F0132';
}

.mw-custom-field-icon-dropdown:before {
    content: '\F09D7';
}

.mw-custom-field-icon-property:before {
    content: "\F064E";
}

.mw-custom-field-icon-button:before {
    content: "";
}

.mw-custom-field-icon-captcha:before {
    content: "";
}

.mw-custom-field-icon-country:before {
    content: '\F0826';
}

.mw-custom-field-icon-color:before {
    content: '\F0765';
}

//END CUSTOM FIELDS ICONS

#save-menu-wrapper {
    background-color: var(--tblr-bg-surface) !important;
    border-top: none !important;
}

.card-table {
    th, tr {
        background-color: var(--tblr-bg-surface) !important;
    }


}

#pages-tree-wrapper:not(.active) .mw-admin-toggle-tree-navigation{
    margin-left: 0;
    left: 0;
    transition: .4s cubic-bezier(0.0, 0.0, 0.2, 1);
    svg{
        transform: rotate(0deg);
    }
}

#pages-tree-wrapper.active .mw-admin-toggle-tree-navigation {
    margin-left: 2px !important;

}


.mw-iframe-admin{
    #pages-tree-wrapper.active .mw-admin-toggle-tree-navigation {
        margin-left: 11px !important;
    }

    #pages-tree-wrapper:not(.active) .mw-admin-toggle-tree-navigation{
        margin-left: 0;
        left: 0;
        transition: .4s cubic-bezier(0.0, 0.0, 0.2, 1);
        svg{
            transform: rotate(0deg);
        }
    }


    .manage-content-body {
        padding: 10px !important;
        .card {
            box-shadow: none;

            .card-body, .row {
                padding: 0 !important;
            }
        }
    }

    .manage-content-sidebar {
        padding: 10px !important;
    }
}

#pages-tree-wrapper.active .mw-admin-toggle-tree-navigation{
    margin-left: 260px;
    transition: .4s cubic-bezier(0.0, 0.0, 0.2, 1);

    svg{
        transform: rotate(180deg);
    }
}

.mw-admin-toggle-tree-navigation{
    position:absolute;
    left: 100%;

    top:50%;
    transform: translateY(-50%);

    transition: margin-left .4s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 30px;
    padding-inline: 3px;
    font-size: 0;
    cursor: pointer;
    background-color: var(--tblr-body-color);

    border: none;
    outline: none;
    svg{
        width: 16px;
        transition:  .4s;
    }

 }

 #pages-tree-wrapper .card{
    box-shadow: none;
    height: 100%;
 }

 #pages-tree-wrapper{
    transition: .4s cubic-bezier(0.0, 0.0, 0.2, 1);
    position: fixed;
    top: 80px;
    bottom: 0;
    left: 0;
    z-index: 1060;
    display: flex;
    pointer-events: none;
 }

 #pages-tree-wrapper > *{
    pointer-events: all;
 }

 #pages-tree-container{
    max-width: 600px;
    border-top-right-radius:0px;
    transition: .4s cubic-bezier(0.0, 0.0, 0.2, 1);
    transform: translateX(calc(-100% - 25px));

}
#pages-tree-wrapper.active #pages-tree-container{

    transform: translateX(0)
}

 #pages-tree-wrapper.active{
    .mw-admin-toggle-tree-navigation{
        svg{
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);

        }
    }
 }

 .manage-post-item-col-2 {
     svg {
         display: flex;
         margin: 0 auto;
     }
 }


 .mdi-truck-check-outline {
     display: none;
 }


.mw-order-custom-fields {
    ul {
        li {
            display: flex;
            align-items: center;
            margin-bottom: 0 !important;
            margin-inline-start: 3px;

            span {
                margin-inline-start: 3px;

            }
        }
        padding-inline-start: 0;
    }
}

#content-results-table {
    td {
        vertical-align: middle;
        height: 100px;
    }
}

.picture-blade-bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 80%;
}

.keyword-blade-filters-menu {
    .dropdown-item {
        input {
            margin-inline-end: 5px;
        }
    }
}

.mw-live-edit-toolbar-link {
    color: var(--tblr-body-color);
    cursor: pointer;
    font-weight: 400;
    text-decoration: none !important;

    &:hover {
        color: var(--tblr-body-color);
    }
}

.mw-live-edit-toolbar-link--arrowed {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;

    .mw-live-edit-toolbar-arrow-icon {
        position: relative;
        top: -1px;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        vertical-align: middle;
        transform:rotate(180deg);
    }

    g {
        stroke: var(--tblr-body-color);
    }

    .arrow-icon--circle {
        transition: stroke-dashoffset .3s ease;
        stroke-dasharray: 95;
        stroke-dashoffset: 95;
        stroke: currentColor;
        stroke-width: 2.2px;
    }

    .arrow-icon--arrow {
        stroke: currentColor;
        stroke-width: 2.2px;
    }

    &:hover {
        .arrow-icon {
            transform: translate3d(5px, 0, 0);
        }

        .arrow-icon--circle {
            stroke-dashoffset: 0;
        }
    }
}



//!!!!!!!!!!!!!!!!!!!!!!!!!!!  LIVE EDIT CSS !!!!!!!!!!!!!!!!!!!!!!!!!!!

#bubble-nav {

    span {
        &:hover {
            svg {
                fill: var(--tblr-bg-surface);
            }

        }
        svg {
            fill: var(--tblr-body-color);
        }
    }

}


#user-menu {
    width: 220px !important;

}

.mw-le-nav-box {
    nav a {
        &:hover {
            background-color: var(--tblr-body-bg) !important;
        }
    }
}


.live-edit-toolbar-buttons-undo-redo, .live-edit-toolbar-buttons-view {
    background-color: var(--tblr-body-bg2) !important;
    border-color: var(--tblr-body-bg2) !important;
}

.mw-live-edit-resolutions-wrapper, .mw-live-edit-right-sidebar-wrapper {
    background-color: var(--tblr-body-bg2) !important;
    border-radius: 5px !important;
    padding: 5px !important;
    max-height: 35px;
    align-items: center;
    display: flex;
    justify-content: center;
    gap: 2px !important;

    .live-edit-toolbar-buttons {
        border-radius: 5px !important;
        padding: 3px 7px;
        border-color: var(--tblr-body-bg2) !important;
        background-color: var(--tblr-body-bg2) !important;
        box-shadow: none;

        &:hover, &.live-edit-resolution-active, &.live-edit-right-sidebar-active, &:focus, &:active, &.active {
            background-color: var(--tblr-bg-surface) !important;
            border-color: var(--tblr-bg-surface) !important;
        }

        svg {
            fill: var(--tblr-body-color) !important;
        }
    }
}

.mw-live-edit-search-dropdown {
    background-color: var(--tblr-body-bg2);
    border-color: var(--tblr-body-bg2);
    max-height: 45px;
    display: flex;
    align-items: center;
    min-width: 235px;
    position: relative;
}

.modules-list-block-style-list {
    @media screen and (min-width: 890px) {
        height: 240px !important;

    }

    @media screen and (min-width: 768px) {
        width: 45%;
    }

    @media screen and (min-width: 1366px) {
        width: 30%;
    }

    height: 160px;
    width: 100%;
}

.modules-list-block-style-full {
    height: 500px;
    width: 100%;
}

.live-edit-tools {
    text-decoration: none;
    color: var(--tblr-body-color);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;

    &:hover {
       font-weight: 600;
        text-decoration: none;

    }
}

.live-edit-label {
    padding: 0 7px;
    padding-left: 0;
    color: rgb(90, 90, 90);
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 9.75px;
    letter-spacing: 0.75px;
    line-height: 16px;
    text-overflow: ellipsis;
    margin-bottom: 7px;
    margin-top: 7px;
}

.mw-le-layouts-dialog-col:first-child, .modules-list-search-field {
    background-color: var(--tblr-bg-surface) !important;
}

.mw-le-layouts-dialog-col {
    background-color: var(--tblr-body-bg2) !important;
}

#mw-admin-main-navigation{

    max-height: calc(100vh - 280px);
    overflow: auto;
}



.form-control-live-edit-label-wrapper {
    cursor: inherit;
    display: block;
    line-height: 22px;
    min-height: var(--mw-forms-min-height);
    outline: none;
    margin: 0 7px;
    position: relative;

    textarea.form-control-live-edit-input {
        padding-top: 10px;

    }

    @-moz-document url-prefix() {
        .form-control-live-edit-input.form-select {
            padding-top: 10px;
        }
    }

    .form-control-live-edit-input.form-select{
        text-transform: capitalize;

        option {
            color: #000;
        }
    }

    .v-slider-thumb__surface.elevation-2 {
        color: var(--tblr-body-bg2);
    }

    .form-control-live-edit-label-wrapper {

        .text-align  {

            .active {
                background-color: var(--tblr-body-bg2) !important;
                border-color: var(--tblr-body-bg2) !important;
            }
        }
    }

    .form-control-live-edit-input, .form-control-live-edit-input.form-select {
        border: none;
        flex: 1 1 0%;
        font-size: 14px;
        line-height: 22px;
        text-align: left;
        caret-color: var(--tblr-body-color);
        min-height: var(--mw-forms-min-height);
        width: 100%;
        outline: none;
        background-color: var(--tblr-body-bg2);
        padding-inline-start: 10px;

        &:disabled {
            background-color: var(--tblr-body-bg2);
            opacity: .7;
        }


         &:focus, &:focus-visible {
            outline: none;
             background-color: transparent;

             +.form-control-live-edit-bottom-effect {
                 &:after {
                     width: 100%;
                     transition-duration: .3s;
                 }
             }
         }

        &.form-control-input-range-slider {
            background-color: transparent;
            max-width: 45px;
            height: 35px;
            min-height: unset;

            &:focus, &:focus-visible {
                background-color: var(--mw-admin-gray-color);
            }
        }
    }

    .form-control-live-edit-bottom-effect {
        bottom: 0;
        height: 1px;
        left: 6px;
        position: absolute;
        width: calc(100% - 12px);
        background-color: rgb(231, 231, 231);
        box-sizing: border-box;

        &:focus-visible {
            border: none;
        }

        &:after {
            background-color: #0e0e0e;
            bottom: 0;
            content: "";
            display: block;
            height: 1px;
            position: absolute;
            transition: width .25s cubic-bezier(.4,0,.68,.06);
            width: 0;
        }

        &.bottom-effect-textarea {
            bottom: 5px;
        }
    }

    .form-control-live-edit-settings-btn {
        position: absolute;
        top: 10px;
        right: 16px;
        cursor: pointer;
    }
}

.form-check-input {

    &:checked {
        background-color: var(--tblr-body-color);
    }

    &:focus {
        box-shadow: 0 0 0 1px var(--tblr-box-shadow-sm);

    }
}



//!!!!!!!!!!!!!!!!!!!!!!!!!!! END  LIVE EDIT CSS !!!!!!!!!!!!!!!!!!!!!!!!!!!

.mw-list-group-accordion-buttons {
    position: relative;

    &:after {
        content: url("data:image/svg+xml; utf8,<svg fill='currentColor' xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 96 960 960' width='20'><path d='m376 816-56-56 184-184-184-184 56-56 240 240-240 240Z'/></svg>");
        position: absolute;
        right: 10px;
        top: 16px;
    }
}

.mw-autocomplete .mw-autocomplete-list {
    padding: 20px;
}

.modal-footer {
    background-color: var(--tblr-bg-surface);
}


.input-group-top-bottom-left-radius {
    .form-control {
        border-top-left-radius: var(--tblr-border-radius) !important;
        border-bottom-left-radius: var(--tblr-border-radius) !important;
    }
}

.mw-le-layouts-dialog-col-full {
    overflow-y: scroll;
}


.noUi-touch-area {
    background-color: var(--tblr-body-color);
    border-radius: 50%;
}

.noUi-handle.noUi-active, .noUi-handle:focus {
    box-shadow: 0 0 0 1px var(--tblr-body-color);

}

.noUi-horizontal {
    width: 100%;
    margin-left: auto;
}

.noUi-connect {
    background: #444746;
}

.mw-live-edit-pagination-tabler {

    li {
        display: none;
    }

    li.mw-paging-visible-range {
        display: block;
    }

    .page-item:not(.active) .page-link:hover {
        background-color: var(--tblr-body-color);
        border-color: var(--tblr-body-color);
        color: var(--tblr-bg-surface);
    }
}


.mw_modal_live_edit_settings {
    .mw-dialog-holder {
        background-color: var(--tblr-bg-surface);
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        padding: 0 15px;
    }
    .modal-title {
        display: none;
    }

    .mw-dialog-header {
        height: 20px;
        cursor: grab;
        min-height: unset !important;
    }

    .mw-dialog-skin-default .mw-dialog-container, .mw-dialog-header {
        padding: 0 13px !important;
    }
}

.mw_modal_live_edit_link_editor_settings {
    .mw-dialog-header {
        display: none;
    }

    .mw-dialog-container {
        padding: 0 !important;


    }

    .mw-dialog-holder {

    }

    .mw-link-editor-root .mw-ui-form-controller-root>div:first-of-type {
        max-height: calc(100vh - 210px);
        padding-top: 0;

    }

    .mw-link-editor-root {
        display: flex;
        flex-wrap: wrap;
        width: 100%;


        .mw-ac-editor-nav {
            background-color: var(--mw-admin-gray-color);
            padding: 25px;
        }

        .mw-ui-form-controller-root {
            flex: 1 0 0%;
            padding-inline-start: 25px;
            padding-inline-end: 25px;
            background-color: var(--tblr-bg-surface);
            .mw-ui-form-controller--radio-list{
                padding-top: 10px;
                .form-check{
                    padding-block: 4px;
                    .form-check-input{
                        margin-inline-end: 10px;
                    }
                }
            }

        }

        .mw-ui-field-holder, .form-label, .modal-footer {
            padding: 0 5px;
        }

        .mw-ui-form-controller-root > div:first-of-type {
            height: 100%;
            padding-bottom: 25px;
        }
    }
}


.mw-filepicker-component-navigation-header {

    .mw-ac-editor-nav {
        padding: 10px !important;
    }
}

.mw-ui-box.mw-ui-navigation {

    li {
        padding-bottom: 5px;
    }

    a {
        white-space: wrap;
        line-height: 18px;

        &:hover {
            text-decoration: none;
            background-color: transparent;
            font-weight: 500;
        }
    }
}



html:not(.mw-le--page-preview) .mw-prevent-interaction{
    cursor: default;
    * {
        pointer-events: none !important;
    }
}

.mw_modal_live_edit_settings .mw-dialog-header {
     height: 20px;
}

.menu-module-wrapper {
    .menu, .menu-item-box, .manage-menus {
        padding: 0 !important;
    }
}


#mw-admin-container .page{
    display: flex;
    flex-direction: row;
}

#admin-side-content{
    margin-inline: 0;
}

#admin-sidebar .container-fluid{
    background-color: var(--tblr-bg-surface);
    @media (max-width: 1200px) {
        display: block;
    }
}
#admin-sidebar .navbar-brand img{
    width: 190px;
}

#sidebar-toggle{
    display: inline-block;
 }


@media (max-width: 1201px) {

    body.sidebar-mobile-toggle #admin-sidebar:before{
        content: '';
        position: fixed;
        z-index: -1;
        background-color: #00000035;
        inset: 0;
        pointer-events: none;
    }
    body.sidebar-mobile-toggle #admin-sidebar {
        left: 0;
        opacity: 1;
        visibility: visible;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px, 200px 0 100vw #0000004f;

    }
}



#admin-sidebar .navbar-brand{
    padding-top: 31px;
    padding-bottom: 5px;
}
#admin-sidebar .navbar-brand,
#admin-sidebar ul{
    padding-inline: 15px;
}

@media (max-width: 1201px) {
    #pages-tree-wrapper{
        top: 0;
        box-shadow: 5px 0 5px rgba(0,0,0,.02);
    }

    .mw-admin-toggle-tree-navigation{
        left: 0 !important;
    }
    #pages-tree-container,
    #admin-sidebar {
        width: 240px!important;
    }
    #admin-sidebar {

        position: fixed;
        height: 100vh;
        z-index: 2;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        z-index: 10;
        transition: .6s;

        opacity: 0;
        visibility: hidden;
        left: -100%;
    }
    #admin-sidebar .ui-resizable-handle{
        display: none !important;
    }
}
@media (min-width: 1200px) {
    #admin-sidebar{
        width: 240px;
        position: sticky;
        top: 0;
        height: 100vh;
        z-index: 1030;
        align-items: flex-start;
        transition: transform .3s;
        overflow: visible;
        overflow-y: visible;
        overflow-x: visible;
        padding: 0;
    }
}


.mw-modal {
    padding: 20px 20px 10px 20px;
    position: relative;

    .mw-modal-title {
        font-weight: bold;
        font-size: 18px;
        color: var(--tblr-body-color);
    }

    .btn-close {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .mw-modal-body {

        padding: 20px 0;
        padding-bottom: 30px;
    }
}

.mw-mod-template-settings-holder {
    padding: 0 7px;
}

.js-apply-template, .current-template  {

    margin: 15px 0 !important;

    .live-edit-label {
        padding: 10px;
    }

    &:hover {
        text-decoration: none;
        cursor: pointer;
    }
}

.mw-fields-upload-buttons {
    .input-group {
        .btn {
            margin-bottom: 0 !important;
            margin-inline-start: 10px;
        }
    }
}

.navbar-expand-xl.navbar-vertical~.navbar, .navbar-expand-xl.navbar-vertical~.page-wrapper {
    margin: 0!important;
}

.mw-tags--container {
    svg {
        margin-inline-end: 5px;
    }
}


.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


.x-close-modal-link {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    color: var(--tblr-body-color);
    font-size: 24px;
    cursor: pointer;
}


.rte-css-editor-accordion-header {
    background-color: var(--tblr-bg-surface);
    margin: 20px 0;
    svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
    }

    .mw-admin-action-links {
        font-weight: 300;
    }
}

.tags-list {
    --tblr-list-gap: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tblr-list-gap);
}

.tags-list {
    &.btn-close {
        width: .4px;
        height: .4px;
    }
}

.tag {
    --tblr-tag-height: 1.5rem;
    border: 1px solid var(--tblr-border-color);
    display: inline-flex;
    align-items: center;
    height: var(--tblr-tag-height);
    border-radius: var(--tblr-border-radius);
    padding: .8rem;
    background: var(--tblr-bg-surface);
    box-shadow: var(--tblr-box-shadow-input);
    gap: 0.5rem;
    font-size: 13px;
}
@media screen and (max-width: 1200px) {
    .mw-live-edit-toolbar-link.mw-live-edit-toolbar-link--arrowed span {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    #user-menu-wrapper {
        display: none !important;
    }
    #toolbar {
        padding: 0 10px !important;
    }

}
@media screen and (max-width: 500px) {
    .mw-live-edit-right-sidebar-wrapper {
        display: none;
    }

    .live-edit-undo-redo-buttons-wrapper {
        display: none;

    }
    #toolbar {
        padding: 0 3px !important;
    }

}

@media screen and (max-width: 300px) {

    #toolbar {
        flex-wrap: wrap !important;
        height: auto !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        padding-bottom: 20px !important;
    }
}

.position-relative {
    position: relative !important;
}

.mw-live-edit-search-dropdown {
    min-width: unset !important;
}

.mw-list-group-accordion-buttons {
    border: none;
}

.dropdown-toggle {
    cursor: pointer;
}

.mw-autocomplete .mw-autocomplete-list {
    a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 400px;
    }
}

#mw-dialog-holder-mw-add-content-editor-front {
    width: 800px !important;
}

.mw-btn-icon-delete {
    color: var(--tblr-danger);
    &:after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>');
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
    }
}

.reset-template-settings-and-stylesheet-button {
    background-color: transparent;
    border: none;
    opacity: .4;
    &:hover {
        opacity: 1;
    }
}

.mw-field-color-indicator {
    background-repeat: repeat;
}

.mw-field-flat {

    input.colorField.mw-color-picker-field {
        border-bottom: none;
    }
}

.mw-action-buttons-background-circle-on-hover {
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 30px !important;
    height: 30px;

    &:hover {
        background-color: var(--mw-admin-gray-color);
    }
}


#live_edit_side_holder .mw-control-boxcontent .ui-resizable-handle.ui-resizable-n:before{
    display: block;
    content: "...";
    text-align: center;
    font-size: 20px;
    font-family: Arial, ui-sans-serif;
    line-height: 17px;
    color: #999;
}
#live_edit_side_holder .mw-control-boxcontent{
    top: 0 !important;
}

.mw-field select {
    &:hover, &:focus, &:active {

        border-color: var(--tblr-body-color);
    }
}

.mw-multiple-fields {
    .mw-field.mw-field-flat {
        select {

        }

    }
}

.a-color-picker-hsl>input, .a-color-picker-rgb>input, .a-color-picker-single-input>input, .a-color-picker-hsl>label, .a-color-picker-rgb>label, .a-color-picker-single-input>label {
    color: var(--tblr-bg-surface) !important;
}

.form-control-live-edit-label-wrapper {

    .text-align  {
        border: 1px solid var(--tblr-body-color);
        .active {
            background-color: var(--tblr-body-color) !important;
            border: 1px solid var(--tblr-body-color) !important;
        }

        .mdi:before {
            padding-top: 2px;
        }

    }
}

.v-slider.v-input--horizontal .v-slider-track__background {
    height: 2px !important;
}

.v-slider-track__background, .v-slider-track__fill {
    height: 3px !important;
}

.v-input__details {
    display: none !important;
}

.mw-element-spacing-editor .input input {
    background-color: var(--tblr-bg-surface);
}

.mw-ese-holder {
    background-color: var(--tblr-body-bg2) !important;
}

.mw-ese-padding .mw-ese-label {
    color: var(--tblr-body-color);
}

.v3ti  {

    margin-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
    border-color: var(--tblr-body-bg);

    .v3ti-tag{
        background-color: var(--tblr-body-color) !important;
        color: var(--tblr-body-bg) !important;

        &.v3ti-tag-content {
            color: var(--tblr-body-color) !important;
        }
    }
    .v3ti-content {
        background-color: var(--tblr-body-bg) !important;
        border: none;
    }
}

.rounded-corners {

    .angle-top-right, .angle-top-left, .angle-bottom-right, .angle-bottom-left {
        border-width: 2px !important;
        border-color: var(--tblr-body-color);
    }

    .angle {
        width: 24px !important;
        height: 24px !important;
    }
}

.mw-admin-post-slug > .mdi{
    margin-inline-end: 7px;
}
.mw-admin-post-slug > *{
    vertical-align: middle;
}
.mw-admin-post-slug{
    font-size: 0;
}
.mw-admin-post-slug-text > *{
    font-size: 14px;
}
.js-slug-base-url{
    font-weight: 600;
}



.mw-iframe-admin #sidebar-toggle, .mw-iframe-admin .admin-toolbar-buttons{
    display: none !important;
}

.mw-le-layouts-dialog .modules-list-categories {
   li {
       &:hover, &.active {
            color: var(--tblr-body-color) !important;
       }
   }
}


.mw-unlock-package-modal {
    .mw-dialog-container {
        padding: 0;
        max-height: 100% !important;
    }
}


[data-mwplaceholder]:empty:after {
    content: attr(data-mwplaceholder);

    opacity: .8;
}

.mw-live-edit [data-mwplaceholder]:empty {
    cursor: pointer;
    background: #ffffff38;
    color: inherit;
    opacity: .57;
    white-space: normal;

}

.mw-skin-templates-bg-image {
    margin: 0 auto !important;
    width: 100% !important;
    height: 300px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
