@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap'); :root {
    --s: #6B53FF;
    --mb-ui-color: #6B53FF;
    --error-color: red;
    --mb-bg: #fff;
    --white: #fff;
    --chart-border: #ecf3fa;
    --chart-text-color: rgba(82, 82, 108, 0.8);
    --mb-t-color: #262626;
    --mb-gradiant: radial-gradient(65.28% 65.28% at 50% 100%, rgba(223, 113, 255, 0.8) 0%, rgba(223, 113, 255, 0) 100%), linear-gradient(0deg, #7a5af8, #7a5af8);
    --mb-gradiant-2: linear-gradient(173deg, #4b5de9, #b037eb);
    --mb-overlay: #4755694f;
    --mb-s-color: #596080;
    --mb-border-color: #e5e7eb;
    --mb-font: 'Cairo';
    --mb-light: #f1f3ff;
    --scrollbarBG: #fff;
    --thumbBG: #f6f6f6;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG)
}
body::-webkit-scrollbar {
    width: 14px
}
.clip-custom-polygon {
    clip-path: polygon(50% 40%, 100% 0, 100% 100%, 0 100%, 0 0);
}
.clip-path-none {
    clip-path: none;
}
body::-webkit-scrollbar-track {
    background: var(--scrollbarBG)
}
body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG);
    border-radius: 12px;
    border: 4px solid var(--scrollbarBG)
}
.-YC-contact-form-container-boxed .-fix-inputs-area {
    min-width: 100%;
    max-width: 100%;
    flex: 1;
    margin-bottom: 22px
}
.-YC-contact-form-container-boxed .-fix-inputs-area[data-field-id=description] {
    max-width: 100%;
    min-width: 95%
}
.-fix-inputs-area .iti__flag {
    margin-inline-end: 7px }
.-fix-inputs-area .iti--separate-dial-code .iti__selected-flag {
    background: 0 0;
    border-inline-start: 1px solid var(--diver); padding-inline-start: 20px;
    border-radius: var(--miniradius) 0 0 var(--miniradius)
}
.-fix-inputs-area .iti--allow-dropdown {
    width: 100%;
    direction: ltr;
    flex: 1 1 0%
}
.-fix-inputs-area.-for-date-field {
    flex-flow: row wrap;
    align-content: center;
    align-items: center
}
.-fix-forms-field-title {
    display: flex;
    align-content: center;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    position: relative;
}
.-fix-inputs-area.-checkboxField .-fix-forms-field-title {
    margin: 0;
}
.-password-status {
    text-align: center;
    border-radius: var(--largeradius);
    font-size: 13px;
    font-weight: 400;
    left: 55px;
    color: var(--item-uicolor)
}
.-Radio-Box-Item, .-Radio-Box-Item input[type=radio], necessary {
    border-radius: var(--miniradius)
}
.-input-password-ivid {
    flex: 1;
    width: 100%;
    position: relative;
}
.-input-password-ivid[passowrd-level="0"], .-input-password-ivid[passowrd-level="1"] {
    --item-uicolor: #e65054
}
.-input-password-ivid[passowrd-level="2"] {
    --item-uicolor: #f86368
}
.-input-password-ivid[passowrd-level="3"] {
    --item-uicolor: #f0c33c
}
.-input-password-ivid[passowrd-level="4"] {
    --item-uicolor: #68de7c
}
.-Mb-input input:focus, .-Mb-input textarea:focus {
    border-color: var(--mb-ui-color) !important;
    !i; !; box-shadow: 0px 0px 0px 2px #6b53ff38 !important;
}
.-input-password-ivid>.-show-password-item {
    left: auto;
    color: var(--secondarytext);
    border-radius: var(--miniradius);
    cursor: pointer;
    width: 25px;
    text-align: center;
    transition: 180ms;
    font-size: 20px;
    margin-inline-start: calc(100% - 40px); line-height: 0;
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.-input-password-ivid>.-show-password-item:hover {
    color: var(--primary-text)
}
.-fix-forms-field-title>h3 {
    font-size: 15px;
    font-weight: 400;
    margin-inline-end: 10px; line-height: 1.5
}
.-CheckBox-Box-Item em, .-Radio-Box-Item em {
    font-size: 14px;
    font-style: normal;
    transition: 180ms;
    white-space: nowrap
}
.-fix-forms-field-title>descor {
    position: relative;
    color: #858497;
    cursor: pointer;
    display: flex;
    align-content: center;
    align-items: center
}
.-fix-forms-field-title>descor>i {
    font-weight: 300
}
necessary {
    display: block;
    min-width: 100%;
    margin-bottom: 10px;
    font-size: 12px;
    color: #991229;
    box-sizing: border-box
}
.-Radio-Box-InnerArea {
    display: flex;
    margin: 0 -5px;
    flex: 1 1 0%;
    border: 1px solid var(--mb-border-color);
    border-radius: 5px;
}
.-Radio-Box-Item {
    display: flex;
    align-content: center;
    align-items: center;
    flex: 1 1 0%;
    min-width: max-content;
    position: relative;
    overflow: hidden;
    justify-content: center;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
}
.-Radio-Box-Item input[type=radio] {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 1;
    transition: 180ms;
    background: #fff;
    appearance: none;
    cursor: pointer;
    margin: 0 !important
}
.-CheckBox-Box-Item input[type=checkbox]:checked, .-Radio-Box-Item input[type=radio]:checked {
    background: rgba(31, 30, 135, .02);
    border-color: rgba(31, 30, 135, .2)
}
.-Radio-Box-Item input[type=radio]:checked+span {
    transform: scale(1.2) translate(0, -39%);
    background: rgba(31, 30, 135, .18);
    box-shadow: rgba(31, 30, 135, .02) 0 0 0 3px
}
.-Radio-Box-Item em {
    display: block;
    position: relative;
    z-index: 1;
    font-weight: 400;
    color: #8c9093
}
.-CheckBox-Box-Item input[type=checkbox]:checked+span+em, .-CheckBox-Box-Item:hover em, .-Radio-Box-Item:hover em {
    color: #041c36
}
.-Radio-Box-Item input[type=radio]:checked+span+em {
    color: #363636
}
.-Radio-Box-Item span {
    display: block;
    border-radius: 50%;
    position: absolute;
    right: 17px;
    transition: 180ms;
    top: 50%
}
.-CheckBox-Box-Item:hover>span, .-Radio-Box-Item:hover>span {
    background: #041c36
}
.-Radio-Box-Item span::before {
    content: "";
    position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, .19) 1px 1px 2px;
    transition: 180ms
}
.-CheckBox-Box-Item input[type=checkbox]:checked+span::before, .-Radio-Box-Item input[type=radio]:checked+span::before {
    background: var(--mb-ui-color);
}
.-Radio-Box-Item input[type=radio i] {
    border: 1px solid var(--diver);
    background: 0 0;
    outline: 0;
    box-shadow: 0 0;
    z-index: 2;
    display: block
}
.-Radio-Box-Item input[type=radio]::before, .-Radio-Box-Item input[type=radio]:checked::before {
    content: "";
    display: none
}
.-CheckBox-Box-InnerArea {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.-CheckBox-Box-Item {
    display: flex;
    padding: 3px 45px 3px 12px;
    align-content: center;
    align-items: center;
    margin: 0 5px 10px;
    border-radius: var(--largeradius);
    position: relative;
    background: #fff;
    flex-direction: column;
    border: 1px solid var(--border-color);
}
.-CheckBox-Box-Item input[type=checkbox] {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    border-radius: var(--largeradius);
    transition: 180ms;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 0;
    display: block;
    appearance: none;
    cursor: pointer;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}
.-CheckBox-Box-Item.Has-ParentChilds {
    min-width: 320px
}
.-CheckBox-Box-Item input[type=checkbox]:checked+span {
    transform: scale(1.2) translate(0, -39%);
    background: rgba(31, 30, 135, .16);
}
.-CheckBox-Box-Item em {
    display: block;
    position: relative;
    z-index: 1;
    font-weight: 400;
    color: #858497;
    flex: 1 1 0%
}
.-CheckBox-Box-Item span {
    display: block;
    border-radius: 30%;
    position: absolute;
    right: 15px;
    transition: 180ms;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.-CheckBox-Box-Item span::before {
    content: "";
    position: absolute;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 30%;
    transition: 180ms
}
.-CheckBox-Box-Item span::after {
    content: var(--check-icon);
    font-family: "Font Awesome 6 Duotone";
    color: #fff;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
    transition: 180ms;
    z-index: 9;
}
.-CheckBox-Box-Item input[type=checkbox]:checked+span::after, .-Select-Field-Code.active .-Select-DropDown-PoneNumber, .Select-Options-Items.active .-Select-DropDown, switchfield>input[type=checkbox]:checked~.Switch>strong {
    visibility: visible;
    opacity: 1;
}
.-Select-DropDown, switchfield>.Switch>strong, switchfield>input[type=checkbox]:checked~.Switch>span {
    visibility: hidden;
    opacity: 0
}
.-CheckBox-Box-Item input[type=radio i] {
    border: 1px solid var(--diver);
    background: 0 0;
    outline: 0;
    box-shadow: 0 0;
    z-index: 2
}
.-CheckBox-Box-Item input[type=checkbox]::before {
    display: none !important
}
.-YC-Forms-button {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 0
}
.-YC-Forms-button>.YC-BTN-Forms-Plugin {
    display: block;
    background: var(--positive);
    border: 0;
    padding: 13px 16px;
    border-radius: var(--largeradius);
    color: #fff;
    cursor: pointer;
    margin-right: 5px;
    font-size: 16px;
    font-weight: 300
}
.-YC-Forms-button>.YC-BTN-Forms-Plugin>i {
    margin: 0 5px
}
.-YC-Forms-button>.YC-BTN-Forms-Plugin.Next-Step-Action {
    background: 0 0;
    color: #1a1a64
}
.Select-Options-Items {
    display: block;
    min-width: 170px;
    position: relative;
    flex: 1 1 0%;
    width: 100%;
    display: flex;
}
.post_top .Select-Options-Items.active.post_top {
}
.Select-Options-Items>h2 {
    display: flex;
    padding: 10px 15px;
    justify-content: space-between;
    width: 100%;
    border: 1px solid var(--mb-border-color);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
    height: 42px;
    font-size: 14px;
    align-items: center;
    background: #fdfdfd;
    overflow: hidden
}
.Select-Options-Items>h2>span {
    margin-inline-end: 15px; display: block;
    flex: 1 1 0%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}
.Select-Options-Items>h2>span>.-field-select-image {
    margin-left: 10px;
    height: 32px;
    max-width: 32px;
    position: relative;
    overflow: hidden;
    border-radius: var(--miniradius);
    box-shadow: rgba(31, 30, 135, .02) 0 2px 3px, rgba(72, 71, 237, .06) 0 3px 10px;
    min-width: 32px;
    max-height: 32px
}
.-select-Code-number-title>span>.-field-select-image>img, .Select-Options-Items>h2>span>.-field-select-image>img {
    position: absolute;
    min-width: 100%;
    max-width: unset;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-height: 100%;
    max-height: 100%
}
.-Select-DropDown {
    position: absolute;
    background: rgb(255 255 255);
    box-shadow: rgb(0 0 0 / 2%) 0 2px 3px, rgb(0 0 0 / 6%) 0 8px 35px;
    border-radius: var(--miniradius);
    min-width: 240px;
    padding: 10px;
    z-index: 90;
    max-height: 391px;
    margin: 0;
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    top: 0 !important;
    left: 0 !important;
}
.post_top .-Select-DropDown {
    bottom: calc(100% - -8px);
    top: inherit;
}
.-Select-DropDown-PoneNumber .Lists-Select-Items-PoneNumber, .Select-Options-Items .Lists-Select-Items {
    position: relative;
    min-width: 100%;
    overflow: auto;
    margin: 0;
    max-height: 265px
}
.Select-Options-Items .Lists-Select-Items::-webkit-scrollbar {
    width: 4px;
    height: 4px
}
.Select-Options-Items .Lists-Select-Items::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, transparent 10%, transparent 0, transparent 90%, transparent 0)
}
.Select-Options-Items .Lists-Select-Items::-webkit-scrollbar-track {
    background: 0 0
}
.Select-Options-Items .Lists-Select-Items:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, transparent 10%, rgba(0, 0, 0, .03) 0, rgba(0, 0, 0, .03) 90%, transparent 0)
}
.Lists-Select-Items-PoneNumber>li, .Select-Options-Items .Lists-Select-Items>li {
    display: flex;
    padding: 0px 13px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: 180ms;
    align-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 5px
}
.Select-Options-Items .Lists-Select-Items>li:hover {
    background: var(--uioverlaycolor)
}
.Select-Options-Items .Lists-Select-Items>li::before {
    content: var(--plus-icon);
    font-family: "Font Awesome 6 Pro";
    font-size: 14px;
    color: var(--secondarytext);
    position: relative;
    margin-left: 10px;
    font-weight: 900;
    display: flex;
    align-content: center;
    align-items: center;
    line-height: 1.6
}
.Select-Options-Items .Lists-Select-Items>li.active::before {
    color: #fff;
}
.-Select-Cuntryes-Item .Select-Options-Items .Lists-Select-Items>li::before {
    display: none
}
.Select-Options-Items .Lists-Select-Items>li.active {
    background: #615dfa;
    color: #ffff;
}
.Lists-Select-Items-PoneNumber>li .-field-select-image, .Select-Options-Items .Lists-Select-Items>li .-field-select-image {
    display: block;
    max-width: 32px;
    min-width: 32px;
    overflow: hidden;
    margin-left: 10px;
    border-radius: 50%;
    height: 32px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: rgba(0, 0, 0, .07) 0 2px 3px, rgba(0, 0, 0, .05) 0 3px 14px
}
.Select-Options-Items .Lists-Select-Items>li .-field-select-image>img {
    max-height: 100%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    max-width: unset
}
.Select-Options-Items .Lists-Select-Items>li>em {
    font-size: 11px;
    color: var(--secondarytext);
    margin-right: 5px
}
switchfield {
}
switchfield>.Switch {
    display: block;
    width: 60px;
    position: relative;
    background: #e5ecff;
    height: 23px;
    border-radius: 40px;
    color: #858497;
    cursor: pointer;
    transition: 180ms
}
switchfield>.Switch>span, switchfield>.Switch>strong {
    position: absolute;
    width: max-content;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    font-size: 17px;
    font-weight: 300;
    transition: 180ms
}
switchfield>.Switch>strong {
    right: 15px;
    left: 0
}
switchfield>.Switch>em {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateY(-50%);
    right: 6px;
    background: var(--secondarytext);
    top: 50%;
    transition: 180ms
}
switchfield>input[type=checkbox]:checked~.Switch>em {
    transform: translate(-34px, -50%);
    background: #ffffff;
}
switchfield>input[type=checkbox]:checked~.Switch {
    background: #0c143f;
    color: #fff
}
switchfield>input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 0 0;
    box-shadow: 0 0 0;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    appearance: none;
    cursor: pointer;
    border: 0 !important
}
.-PhoneNumber-Field-YC {
    flex: 1 1 0%;
    display: flex;
    flex-wrap: wrap;
    width: 100%
}
.-Select-Field-Code {
    display: block;
    position: relative;
    margin-left: 15px;
    max-width: 180px;
    min-width: 180px
}
.-select-Code-number-title {
    display: flex;
    place-content: center space-between;
    width: 100%;
    border: 1px solid var(--diver);
    border-radius: var(--miniradius);
    cursor: pointer;
    height: 60px;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    padding: 20px 15px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: unset !important
}
.-select-Code-number-title>span {
    margin-left: 10px;
    display: flex;
    place-content: center flex-start;
    align-items: center;
    flex: 1 1 0%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%
}
.-select-Code-number-title>span>span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    justify-content: flex-start;
    display: block
}
.-select-Code-number-title>span em {
    font-style: unset;
    font-size: 11px
}
.-select-Code-number-title>span>.-field-select-image {
    margin-left: 10px;
    height: 32px;
    min-width: 32px;
    position: relative;
    overflow: hidden;
    border-radius: var(--miniradius);
    box-shadow: rgba(31, 30, 135, .02) 0 2px 3px, rgba(72, 71, 237, .06) 0 3px 10px
}
.-Select-DropDown-PoneNumber {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background: #fff;
    box-shadow: rgba(31, 30, 135, .02) 0 2px 3px, rgba(72, 71, 237, .06) 0 8px 35px;
    border-radius: var(--largeradius);
    min-width: 250px;
    right: 0;
    padding: 10px;
    z-index: 90;
    top: calc(100% - -8px);
    max-height: 390px;
    margin: 0;
    display: flex;
    flex-flow: column wrap
}
.Lists-Select-Items-PoneNumber>li:hover {
    background: #f4f4f4;
    color: #041c36
}
.Lists-Select-Items-PoneNumber>li.active {
    background: #f3f3ff;
    border-color: rgba(31, 30, 135, .02);
    color: var(--uicolor)
}
.Lists-Select-Items-PoneNumber>li em {
    color: #464646;
    font-style: normal
}
.Lists-Select-Items-PoneNumber>li .-field-select-image>img {
    max-width: unset;
    max-height: 100%;
    min-height: 100%;
    position: absolute
}
.Lists-Select-Items-PoneNumber:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, transparent 10%, rgba(0, 0, 0, .03) 0, rgba(0, 0, 0, .03) 90%, transparent 0)
}
.Lists-Select-Items-PoneNumber::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, transparent 10%, transparent 0, transparent 90%, transparent 0)
}
.Lists-Select-Items-PoneNumber::-webkit-scrollbar-track {
    background: 0 0
}
.Lists-Select-Items-PoneNumber::-webkit-scrollbar {
    width: 4px;
    height: 4px
}
.-select--posts--top-area {
    display: flex;
    align-items: stretch;
    border-radius: var(--largeradius);
    flex-direction: column;
    width: 100%
}
.--result-my-fix-posts-select {
    width: 0;
    align-items: center;
    overflow: hidden;
    border-radius: var(--largeradius);
    background: #f5faff;
    height: 0
}
.-Your-selected-title {
    min-width: 100px;
    max-width: 100px;
    font-size: 22px;
    line-height: 1.3;
    margin-inline-end: 40px; font-weight: 400;
    color: var(--primary-text)
}
.-scroller-slider-findors-UL {
    display: block;
    flex: 1;
    overflow: hidden;
    margin: -20px;
    position: relative
}
.-fix-selcted-items {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: auto;
    padding: 20px
}
.-result-searching-too {
    display: block;
    margin-top: 30px;
    font-size: 23px;
    color: var(--secondarytext)
}
.-result-searching-too:empty {
    display: none;
    margin-top: 0
}
.-searching--result--selected {
    display: flex;
    background: #fff;
    margin: 10px -10px -10px;
    flex-wrap: wrap
}
.-searching--result--selected .-currrent-single-elements:last-child {
    margin-bottom: 0
}
.--platforms-select-Box.active {
    color: var(--uicolor);
    border-color: var(--uicolor)
}
.--platforms-select-Box {
    display: flex;
    padding: 25px;
    background: #fff;
    margin: 15px;
    border-radius: var(--largeradius);
    position: relative;
    align-items: center;
    cursor: pointer;
    transition: 80ms;
    border: var(--border-defult);
    box-shadow: var(--box-shadow-defult);
    flex: 1;
    min-width: max-content;
    font-size: 18px;
    color: var(--secondarytext)
}
.--platforms-select-Box: not(.active):hover {
    border-color: var(--border-defult-hover);
    box-shadow: var(--box-shadow-hover);
    transition: 280ms;
    color: var(--primary-text)
}
.-searching--result--selected .--platforms-select-Box {
    margin: 10px
}
.-aps--tools-action {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
    display: none
}
.-searching--result--selected .--platforms-select-Box .-aps--tools-action {
    display: block
}
.Thumb--II {
    display: flex;
    --elem-w: 40px;
    min-width: var(--elem-w);
    max-width: var(--elem-w);
    height: var(--elem-w);
    position: relative;
    overflow: hidden;
    border-radius: var(--miniradius);
    background: #f7f7f7;
    margin-inline-end: 15px; align-items: center;
    justify-content: center
}
.--platforms-select-Box.active .Thumb--II {
    color: var(--secondarytext);
    --elem-w: 38px
}
.Thumb--II>.-avatar-append-image {
    display: block
}
.Thumb--II>.-avatar-append-image>i {
    font-style: normal
}
.--platforms-select-Box-box-title {
    flex: 1;
    display: block;
    overflow: hidden
}
.--platforms-select-Box>.--platforms-select-Box-box-title>a {
    display: block;
    text-decoration: none;
    font-size: 19px;
    color: var(--secondarytext) !important;
    z-index: 2;
    font-weight: 400;
    transition: 180ms;
    line-height: 1.4;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap
}
.--platforms-select-Box.active>.--platforms-select-Box-box-title>a {
    color: var(--primary-text) !important;
    font-size: 18px
}
.-remove-custom-post-select-tools {
    display: flex;
    margin-inline-start: 15px; font-size: 20px;
    color: var(--secondarytext);
    z-index: 2;
    cursor: pointer;
    transition: 180ms;
    min-width: 38px !important;
    max-width: 38px !important;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    opacity: .6;
    box-sizing: border-box;
    max-height: 38px !important;
    min-height: 38px !important;
    justify-content: center;
    align-items: center
}
.-searching--result--selected .-remove-custom-post-select-tools {
    display: none
}
.AjaxSearchCenter {
    display: flex;
    align-content: center;
    align-items: center;
    border-bottom: 1px solid var(--diver);
    margin-bottom: 10px;
    padding: 0 10px;
    width: 100%;
}
.-fix-inputs-area .AjaxSearchCenter input[type=text] {
    min-height: 50px;
    border-top: 0 !important;
    border-right: 0px !important;
    border-left: 0 !important;
    border-image: initial !important;
    border-bottom: 0 solid var(--diver) !important;
    border-radius: 0 !important;
    padding: 0 10px !important
}
.AjaxSearchCenter::before {
    content: var(--check-icon);
    position: relative;
    display: block;
    font-size: 25px;
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    margin-left: 4px
}
.widget-fields-tap_title {
    padding: 9px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #818a96;
    font-weight: 300;
}
.widget-fields-tap_title h2 {
    font-weight: 200;
}
.widget-fields-tap_title h2 {
    font-size: 16px;
}
.widget-fields-tap_body {
    padding: 15px;
    border-top: 1px solid #dbdbdb;
}
.widget-fields-tap.active .widget-fields-tap_body {
    display: block !important;
    overflow: auto;
    max-height: 300px;
}
.field_arguments {
    position: fixed;
    top: 10px;
    background: #fff;
    z-index: 9;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .1);
    z-index: 9999;
    height: calc(100vh - 20px);
    width: 380px;
    border: 1px solid #d5d8dc;
    overflow: auto;
    border-radius: 10px;
    z-index: 999999999999999999999999999999999999;
    scrollbar-width: thin;
}
.-CheckBox-Centers {
    width: 100%;
}
.widget-fields-InnerElemnt {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.widget-fields-tap {
    border-radius: 0px;
    border-bottom: 1px solid #d5d8dc;
}
.widget_tap_Head {
    padding: 9px;
    border-bottom: 1px solid #d5d8dc;
    font-size: 12px;
}
.widget-fields-area {
    height: calc(100% - 160px);
    flex: 1;
    overflow: hidden;
}
.-YC-widget-save-area {
    display: flex;
    align-items: center;
    justify-content: center;
}
octyai {
    color: #3F51B5;
}
div#popupContainer {
    width: 300px;
    position: fixed;
    left: inherit !important;
    background: linear-gradient(180deg, #2d2d2d 0%, #242424 100%);
    font-size: 14px;
    line-height: normal;
    display: flex;
    flex-direction: column;
    z-index: 999;
    gap: 6px;
    max-width: 300px;
    overflow: hidden;
    ); border-radius: 10px;
    --mb-t-color: #fff;
    --white: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), #1f1f1f);
    --mb-border-color: transparent;
    --mb-s-color: #fff;
}
.switch {
    --switch-width: 46px;
    --switch-height: 24px;
    --switch-bg: rgb(166 174 193 / 64%);
    --switch-checked-bg: rgb(23 209 175);
    --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
    --switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
    --circle-diameter: 21px;
    --circle-bg: #fff;
    --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
    --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
    --circle-transition: var(--switch-transition);
    --icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
    --icon-cross-color: var(--switch-bg);
    --icon-cross-size: 6px;
    --icon-checkmark-color: var(--switch-checked-bg);
    --icon-checkmark-size: 10px;
    --effect-width: calc(var(--circle-diameter) / 2);
    --effect-height: calc(var(--effect-width) / 2 - 1px);
    --effect-bg: var(--circle-bg);
    --effect-border-radius: 1px;
    --effect-transition: all .2s ease-in-out;
}
.switch input {
    display: none;
}
.switch {
}
.switch svg {
    -webkit-transition: var(--icon-transition);
    -o-transition: var(--icon-transition);
    transition: var(--icon-transition);
    position: absolute;
    height: auto;
}
.switch .checkmark {
    width: var(--icon-checkmark-size);
    color: var(--icon-checkmark-color);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.switch .cross {
    width: var(--icon-cross-size);
    color: var(--icon-cross-color);
}
.slider {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 46px;
    height: 18px;
    background: #484848;
    border-radius: 999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-transition: var(--switch-transition);
    -o-transition: var(--switch-transition);
    transition: var(--switch-transition);
    cursor: pointer;
}
.circle {
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    background: var(--circle-bg);
    border-radius: inherit;
    -webkit-box-shadow: var(--circle-shadow);
    box-shadow: var(--circle-shadow);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: var(--circle-transition);
    -o-transition: var(--circle-transition);
    transition: var(--circle-transition);
    z-index: 1;
    position: absolute;
    left: var(--switch-offset);
}
.slider::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 14px;
    left: 4px;
    background: #606067;
    border-radius: 50%;
    transition: .1s all ease;
}
.switch input:checked+.slider {
    background: var(--switch-checked-bg);
}
.switch input:checked+.slider .checkmark {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.switch input:checked+.slider .cross {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.switch input:checked+.slider::before {
    left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
}
.switch input:checked+.slider .circle {
    left: calc(100% - var(--circle-diameter) - var(--switch-offset));
    -webkit-box-shadow: var(--circle-checked-shadow);
    box-shadow: var(--circle-checked-shadow);
}
.Octy_Edit_Body {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    cursor: default;
    overflow: hidden;
    height: 100%;
}
.Octy_Edit_Head_title {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    user-select: none;
    gap: 9px;
}
.Octy_Edit_Head_title span {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.Octy_Edit_Head {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    background: linear-gradient(0deg, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 40%) 100%), #292929;
    color: #fff;
}
.-Mb-input input[type="text"]:not(.coloris), .-Mb-input textarea, .-Mb-input input[type="password"], .-Mb-input input[type="number"], .-Mb-input input[type="tel"], .-Mb-input input[type="email"] {
    display: block;
    width: 100%;
    appearance: none;
    border-radius: 16px;
    border-width: 1px;
    outline: 0;
    border: 1px solid var(--mb-border-color);
    padding: 0.8rem;
    font-size: 16px;
    resize: vertical;
    scrollbar-width: none;
    );
    height: 50px;
    font-weight: 600;
    color: var(--mb-s-color);
    line-height: 1.5;
    font-family: var(--mb-font);
    transition: .3s all ease;
    background: var(--white);
}
.-Mb-input select {
    display: block;
    width: auto;
    border-radius: 16px;
    border-width: 1px;
    outline: 0;
    border: 1px solid var(--mb-border-color);
    padding: 0px 0.8rem;
    font-size: 16px;
    height: 50px;
    scrollbar-width: none;
    font-weight: 600;
    color: var(--mb-s-color);
    line-height: 1.5;
    font-family: var(--mb-font);
    transition: .3s all ease;
    background: var(--white);
    width: 100%;
}
.Octy_Edit_Body-inner input:focus {
    border-color: rgb(119 100 242);
}
.Octy_Edit_Footer {
    padding: 7px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(0deg, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 40%) 100%), #292929;
}
.octyPrompet_Enter {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6a85a5;
    min-width: max-content;
}
.octyPrompet_Enter_logo svg {
    color: #615dfa;
}
.Octy_Edit_Footer_start {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.octybot_actions_list {
    background: #ffffff;
    box-shadow: 14px 12px 40px -4px rgba(0, 0, 0, .14), 0px 0px 2px 0px rgba(0, 0, 0, .08);
    border: 1px solid #ffffff0a;
    border-radius: 16px;
    padding: 8px;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-color: auto;
    position: absolute;
    bottom: 90%;
    z-index: 3;
    width: max-content;
    transform: scale(0.8);
    transform-origin: bottom center;
    opacity: 0;
    visibility: hidden;
}
.octybot_actions:hover .octybot_actions_list {
    opacity: 1;
    visibility: visible;
    transform: inherit;
}
.octybot_actions {
    position: relative;
}
.octybot_actions_list_item {
    cursor: pointer;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 12px;
    gap: 8px;
    color: #222226;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    border-radius: 8px;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}
.octybot_actions_list_item:hover {
    background: #f1f2f3;
}
.octybot_actions_list_item i, .octybot_actions_list_item svg {
    color: #222226;
    --theme-icon-secondary: #222226;
    font-weight: 400;
    font-size: 13px;
}
.Octybot_popup_prompet_handle_action {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 3px;
}
.Octybot_popup_prompet_handle_action > div {
    width: 40px;
    height: 30px;
    color: #12951c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.Octybot_popup_prompet_handle_action_reject {
    color: var(--error-color) !important;
}
.Octybot_popup_prompet_handle {
    margin-bottom: 10px;
}
.Octy_Edit_Body-inner_prompet > svg {
    width: 27px;
    color: var(--error-color);
}
.Octy_Edit_Body-inner_prompet > svg path {
    fill: #615dfa;
}
.Octy_Edit_Body-inner {
    height: calc(100% - 105px);
    overflow: auto;
    scrollbar-width: none;
    padding: 10px;
}
.Octy_Edit_Body-inner_prompet {
}
.InputsAppender--Fields-BoxArea {
    width: 100%;
    color: #262626;
    font-weight: 200;
}
.Title-MoreForms {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    padding: 10px 0px;
}
.Title-MoreForms h2 {
    font-size: 16px;
}
.-Revilotion-Inputs-Fields .Title-MoreForms {
    border-bottom: 1px solid #4f59661f;
    padding: 0px 8px;
    justify-content: space-between;
}
.-Revilotion-Inputs-Fields .Title-MoreForms h2 {
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.Insert-Setp-InForm_wrapper {
}
.-Insert-Form-Item {
    display: flex;
    color: #fff;
    padding: 4px 20px;
    background: #615dfa;
    border-radius: 8px;
    width: max-content;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
}
.-Revilotion-Inputs-Fields {
    border: 1px solid #4f59661f;
    border-radius: 8px;
    margin-bottom: 10px;
}
.-Revilotion-Inputs-Fields_list {
    padding: 10px;
}
.Askfollow-up-chat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: #fff;
    margin: 0px;
}
.Askfollow-up-chat-input {
    flex: 1;
}
.Askfollow-up-chat-input input {
    border: 0;
}
.Askfollow-up-chat-return {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bdbdbd;
    cursor: pointer;
}
.Askfollow-up-chat-send {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bdbdbd;
    cursor: pointer;
    pointer-events: none;
}
.Askfollow-up-chat-send.-active {
    pointer-events: all;
    color: #3F51B5;
}
.Octy_Edit_Head_Exit {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
}
button#edit-button {
    position: absolute;
}
button#ocedit-button {
    position: absolute;
    pointer-events: none;
}
[mbeditable]:hover {
}
[mbeditable] {
    cursor: pointer;
}
[oceditable]:hover .Editable-Element-overlay {
    opacity: 1;
}
.Editable-Element-overlay ul {
    position: absolute;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    transition: all .3s;
    height: 28px;
    top: -30px;
    left: 3px;
    background: var(--mb-ui-color);
    z-index: 999999999999;
    border-start-start-radius: 5px;
    border-start-end-radius: 5px;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}
.Editable-Element-overlay ul li {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin: 0;
    font-size: 14px;
    color: #fff;
    min-width: 35px;
}
.posts_selection_inner {
    display: flex;
    gap: 15px;
    height: 100%;
    min-height: 300px;
}
.posts_selection_selectd_Wrapper {
    width: 100%;
    padding: 10px;
    background: #f1f2f369;
    border-radius: 10px;
}
.posts_selection_filter_search {
    width: 100%;
    margin-bottom: 10px;
}
.posts_selection_filter_item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 10px;
}
.posts_selection_filter {
    width: 100%;
}
.Octy_Edit_Body select {
    display: block;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--diver);
    outline: 0;
    padding: 4px 15px;
    width: 100%;
    flex: 1 1 0%;
    text-transform: capitalize;
    box-shadow: 0 0 0 !important;
    color: #000;
}
.posts_selection_filter_val_item {
    margin-bottom: 4px;
    padding: 5px;
    font-size: 13px;
    color: #002745;
    background: #f9fafa;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    line-height: 1.3;
    font-weight: 200;
    cursor: pointer;
    gap: 8px;
    width: 100%;
}
.posts_selection_filter_val_item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.posts_selection_Wrapper {
    width: 800px;
}
.posts_selection_selectd_list_item {
    padding: 5px 10px;
    background: #fff;
    margin-bottom: 5px;
    border-radius: 8px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .04);
    font-size: 13px;
    line-height: 1.5;
    cursor: grab;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline-end: 40px; }
.posts_selection_selectd_list_item input {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}
.posts_selection_selectd_list_item_delete {
    position: absolute;
    left: 0;
    width: 40px;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    cursor: auto;
}
.posts_selection_bar {
    min-width: 250px;
}
.posts_selection_bar_taps {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-radius: 4px;
    background-color: #eee;
    box-sizing: border-box;
    padding: 0.25rem;
    width: 100%;
    font-size: 14px;
    margin-bottom: 10px;
}
.posts_selection_bar_taps .radio {
    flex: 1 1 auto;
    text-align: center;
}
.posts_selection_bar_taps .radio input {
    display: none;
}
.posts_selection_bar_taps .radio .name {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    height: 30px;
    padding: 0.5rem 0;
    color: rgba(51, 65, 85, 1);
    transition: all 0.15s ease-in-out;
}
.posts_selection_bar_taps .radio input:checked + .name {
    background-color: #fff;
    font-weight: 600;
}
.posts_selection_barItem {
    display: none;
}
.posts_selection_barItem.active {
    display: block;
}
.Submit_query {
    width: 100%;
    background: #615dfa;
    padding: 4px 13px;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 15px;
}
.posts_selection_selectd_list.active {
    display: block;
}
._selectd_list_empty_icon svg {
    width: 80px;
    height: 90px;
}
._selectd_list_empty_icon svg path {
    fill: #b7b7b7;
}
.posts_selection_selectd_list_empty {
    -webkit-user-drag: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 74px;
    color: #b7b7b7;
}
.posts_selection_selectd_Custom.active {
    display: block;
}
.posts_selection_selectd_list {
    display: none;
}
.posts_selection_selectd_Custom {
    display: none;
}
.footer_Columns {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
.-YourColor-Add_new_Widget {
    height: 2px;
    background: #2196F3;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    position: relative;
    cursor: pointer;
}
.-YourColor-Add_new_Widget_icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2196f3;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
}
.Widget_Seletor_popup {
    max-width: 1200px;
    width: 100vw;
    font-family: var(--mb-font);
    font-size: 14px;
    line-height: normal;
    display: flex;
    flex-direction: column;
    height: 95vh;
    overflow: hidden;
}
.WidgeItem_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.WidgeItem {
    min-width: 210px;
    display: flex;
    gap: 9px;
    flex: 1;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 2px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}
.WidgeItem_thumb {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.WidgeItem_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.WidgeItem_text {
    width: 100%;
    padding: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: center;
    justify-content: center;
}
.YC_Builder_Elements_item_Selecy:hover .WidgeItem_text h3 {
    color: var(--mb-ui-color);
}
.WidgeItem_text h3 {
    font-weight: 200;
}
.WidgeItem_text svg {
    width: 20px;
    height: 20px;
}
.-YourColor-Widgets-Empty-wrapper {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.-YourColor-Widgets-Empty-box {
    width: 100%;
    max-width: 710px;
    height: 250px;
    border-radius: 20px;
    gap: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #6841ea;
    box-shadow: 0 6px 10.7px 0 #6841ea14;
    backdrop-filter: blur(20px);
}
.-YourColor-Widgets-Empty-ICon {
    width: 90px;
    height: 90px;
    margin: 0 auto;
}
.-YourColor-Widgets-Empty-ICon svg {
    height: 100%;
    width: 100%;
}
.-YourColor-Widgets-Empty-ICon svg path {
    fill: #b7b7b7;
}
.Add_new_widget {
    background: #6841ea;
    color: #fff;
    cursor: pointer;
    height: 40px;
    min-height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding: 0 42px;
    border-radius: 8px;
}
._Yc_Magic_Builder-Widget {
    min-height: 100px;
    position: relative;
}
.mb-Notselected-section {
    opacity: .5;
    filter: opacity(0.5);
    pointer-events: none;
}
.Editable-Element-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    letter-spacing: 0;
    z-index: 9999999999;
    opacity: 0;
    visibility: hidden;
    width: calc(100% - 20px);
    transform: translate(-50%, -50%);
    height: calc(100% - 20px);
    border: 1px solid var(--mb-ui-color);
    pointer-events: none;
}
.YC_Builder_Element_Wrap .Editable-Widget-overlay ul {
    transform: translateX(0) translateY(-100%);
    top: -3px;
    left: -1px;
    white-space: nowrap;
    pointer-events: all;
}
.Editable-Element-overlay {
    outline: 2px solid var(--mb-ui-color);
    outline-offset: 0px;
}
.Editable-Widget-tools {
    position: absolute;
    display: flex;
    width: max-content;
    list-style: none;
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
    transition: all .3s;
    gap: 8px;
    right: 10px;
    top: 4px;
    pointer-events: all;
    background: var(--mb-gradiant);
    z-index: 999999999999;
    color: #fff;
    display: flex;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
    align-items: center;
    gap: 8px;
}
.Editable-Widget-overlay ul li {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    margin: 0;
    font-size: 14px;
    min-width: 35px;
    color: #fff;
    font-weight: 600;
}
.octy_builder_container {
    width: 100%;
    padding: 20px;
    outline: 1px dashed #d5d8dc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #ffffff1f;
}
.YC_Builder_Elements_item_Selecy {
    min-width: calc(100% / 7 - 6px);
    border: 1px solid #F0E9FF;
    border-radius: 18px;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    position: relative;
    cursor: pointer;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, transform .4s;
}
.YC_Builder_Elements_item_Selecy:hover {
    box-shadow: 0px 9px 33px 0px rgba(2, 8, 53, 0.15);
    transform: translate(0, -5px);
    border-color: var(--mb-ui-color);
}
.yc-template-center-template:hover {
}
.Widget_Seletor_popup_head {
    padding: 6px 10px;
    border-bottom: 1px solid #e8eaed;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.Widget_Seletor_popup_body {
    display: flex;
    align-items: start;
    height: 100%;
    overflow: hidden;
}
.Widget_Seletor_popup_head_Close svg {
    width: 20px;
    height: 20px;
    fill: var(--mb-s-color);
}
.Widget_Seletor_popup_head_Close {
    background: var(--mb-light);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--mb-s-color);
    cursor: pointer;
}
.yc-column {
    flex: 1;
}
.yc-container {
    display: flex;
    width: 100%;
    gap: 20px;
}
.WidgeItem_thumb > svg {
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
}
.Yc-builder-AdminTool {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 4px;
    box-shadow: 0 8px 20px 0 #00000014, 0 0 1px 0 #00000014;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #55555d;
    transition: all .3s ease-in-out;
    opacity: 1;
    background: #fff;
    z-index: 999999;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #e8e8e8fc;
    margin-bottom: 10px;
}
.Yc-builder-AdminTool:hover .Yc-builder-AdminTool-icon {
    background: #6841ea14;
    color: #6841ea;
}
.Yc-builder-AdminTools {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 9999999;
}
.Yc-builder-AdminTool-icon:hover {
    background: var(--error-color);
}
.Yc-builder-AdminTool-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.Yc_Bulilder_Setup_page {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: start;
    justify-content: center;
    background-position: center;
    flex-direction: row;
    font-family: var(--mb-font);
}
.Yc_Bulilder_Setup_Box {
    min-height: 340px;
    user-select: none;
    max-width: 600px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #ffffff03;
    backdrop-filter: blur(3px);
}
.-octbtn {
    width: 100%;
    font-size: 1.125rem;
    padding: .875rem 1.25rem;
    border-radius: 10px;
    outline: 0;
    background: var(--mb-ui-color);
    color: #fff;
    border: 2px solid transparent;
    line-height: 1.5rem;
    cursor: pointer;
    font-weight: 660;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
}
button.-octbtn[disabled] {
    background: #e5e7eb;
    color: #9ca3af;
    pointer-events: none;
}
button.-octbtn:hover {
    opacity: .8;
}
.Yc_Bulilder_Setup_Box_body {
    width: 100%;
}
.Yc_Bulilder_Setup_Box_body_title {
    font-size: 23px;
    margin-bottom: 40px;
    color: var(--mb-t-color);
}
.Yc_Bulilder_Setup_Box_body_title p {
    margin-top: 13px;
    color: var(--secondarytext);
    font-size: 16px;
    line-height: 28px;
}
.Yc_Bulilder_Setup_Box_step {
    display: none;
    border-radius: 20px;
    width: 100%;
}
.Yc_Bulilder_Field input {
    border-radius: 10px;
    border-width: 1.5px;
    --tw-border-opacity: 1;
    border: 1px solid #ffffff;
    border-color: #e5e7eb;
    padding: .875rem 1.125rem;
    font-size: 16px;
    line-height: 1.5rem;
    height: 44px;
    --tw-text-opacity: 1;
    min-width: 100%;
    width: 100%;
    text-align: right;
    outline: 0;
    --tw-shadow: 0 0 #0000;
    box-shadow: 0 0 0px #0000, 0 0 0px #0000, 0 1px 2px 0 rgb(0 0 0 / .05);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    font-family: var(--font-family);
}

.Yc_Bulilder_Field input {}
.Error input {
    border-color: var(--error-color) !important;
}
.Error input:focus {
    border-color: var(--error-color) !important;
}
.Error i {
    color: var(--error-color);
}
.subdomain-check-status {
    position: relative;
}
.subdomain-check-status i {
    position: static !important;
}
.Yc_Bulilder_Field input:focus {
    box-shadow: 0px 0px 0px 4px rgb(76 53 222 / 25%);
    border-color: #4c35de !important;
}
.Yc_Bulilder_Field input:hover {
    border-color: var(--mb-ui-color);
}
.Yc_Bulilder_KeywordSelect_list {
    display: flex;
    flex-wrap: wrap;
    max-height: 200px;
    overflow: auto;
    gap: 7px;
    scrollbar-width: none;
}
.Yc_Bulilder_Setup_Box_body_Form {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.Yc_Bulilder_Industry_Select_input input {
    padding-right: 50px;
}
input:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #000 !important;
}
.Yc_Bulilder_Industry_Select_input {
    position: relative;
    color: var(--mb-t-color);
}
.Yc_Bulilder_Industry_Select_input label {
    font-size: 17px;
    margin-bottom: 10px;
    display: block;
}
.Yc_Bulilder_Industry_Select_input.addmore_to__Industry h2 {
    margin-bottom: 20px;
}
.Yc_Bulilder_Field i {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    font-size: 18px;
}
.Yc_Bulilder_logo {
    width: 50px;
}
.Yc_Bulilder_Setup_Steps_bar {
    display: flex;
    color: #cfc8fe;
    width: 100%;
    flex: 1;
    justify-content: center;
}
.Yc_Bulilder_Setup_Steps_bar_item_Dot {
    width: 16px;
    height: 16px;
    background: #cfc8fe33;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Yc_Bulilder_Setup_Steps_bar_item_Dot span {
    width: 6px;
    height: 6px;
    background: #4c35de;
    display: block;
    border-radius: 50%;
}
.Yc_Bulilder_Setup_Steps_bar_item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.Yc_Bulilder_Setup_Steps_bar_item_Line {
    width: 72px;
    height: .125rem;
    background: #cfc8fe33;
    margin-inline-start: 16px; }
.Yc_Bulilder_Setup_page_Header {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 40px;
    position: relative;
    z-index: 1;
}
.Yc_Bulilder_Setup_page_inner:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: 50px 50px;
    background-position: center center;
    mask-image: radial-gradient(#000000 -5%, #00000000 70%);
}
.Yc_Bulilder_Field {
    position: relative;
}
.Yc_Bulilder_Field.-logoupload {
    display: flex;
    align-items: center;
    gap: 10px;
}
.company-logo-upload {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: bold;
    color: #333;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.company-logo-upload img {
    object-fit: contain;
    border-radius: 50%;
    height: 100%;
    width: 100%;
}
.change-logo-btn {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 2px 6px;
    cursor: pointer;
}
.mb-builder-field-body.Yc_Bulilder_Field input {
    height: 42px;
    background: #fff;
    border-radius: .375rem;
}
.Yc_Bulilder_Industry_Select_input error {
    color: var(--error-color);
    padding-top: 5px;
    display: block;
}
.Yc_Bulilder_Setup_Box_back {
    font-size: 18px;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 10px;
    width: fit-content;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    color: #36364a;
    white-space: nowrap;
    background-color: #fff;
    border-radius: 8px;
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    min-height: 32px;
    padding: 6px 14px;
    font-weight: 500;
    text-decoration: none;
    transition: box-shadow .3s;
    display: flex;
    box-shadow: 0 2px 6px #122b690a, 0 1px 2px #122b6914, 0 0 0 1px #122b6914;
}
.Yc_Bulilder_Setup_Box_body_Form {
    margin-bottom: 20px;
}
form.-Yc_Magic_Builder_TourGuide_box {
    width: 300px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 1px 0 rgb(0 0 0 / 8%), 0 0 1px #00000014, 0 8px 20px #0000001f;
    overflow: hidden;
    user-select: none;
    position: fixed;
    bottom: 30px;
    left: 80px;
    color: var(--mb-ui-color);
}
._TourGuide_box_head {
    padding: 26px;
    font-size: 16px;
    color: var(--mb-t-color);
}
._TourGuide_box_head h5 {
    font-size: 21px;
}
._TourGuide_box_head h5 strong {
    color: var(--mb-ui-color);
}
._TourGuide_box_body {
    padding: 0px 26px 26px 26px;
}
.mb-builder-field-image-preview {
    width: 400px;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    border: 1px dashed var(--mb-border-color);
    align-items: center;
    border-radius: 8px;
    margin-bottom: 10px;
    gap: 10px;
    padding: 20px;
}
.mb-builder-field-image-preview svg {
    min-width: 450px;
    height: 50px;
}
.mb-builder-field-image-preview-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 23.2px;
    cursor: pointer;
    transition: .3s all ease;
}
.mb-builder-field-image-preview-empty:hover {
    opacity: 0.6;
}
.mb-builder-field-image-preview-empty > span {
    font-size: 17px;
    color: var(--mb-t-color);
}
.mb-builder-field-image-preview-empty > span:last-child {
    color: var(--mb-s-color);
    font-size: 15px;
    margin: 0;
}
.mb-builder-field-image-preview-empty icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 4px 4px 4px #00000012;
    font-size: 20px;
    border: 1px solid var(--mb-border-color);
    color: var(--mb-ui-color);
    margin-bottom: 10px;
}
.mb-builder-field-title {
    line-height: 22px;
    margin-bottom: 10px;
    color: var(--mb-t-color);
}
.mb-builder-field-title p {
    color: var(--mb-s-color);
}
.mb-builder-ImageAi-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    border: 1px solid var(--mb-border-color);
    background-color: #fff;
    padding: .625rem 1rem;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: var(--mb-ui-color);
    width: 100%;
    cursor: pointer;
    margin-bottom: 10px;
    height: 42px;
}
.mb-builder-ImageAi-button svg {
    width: 40px;
    height: 23px;
}
.Yc_Bulilder_builder_page_body {
    width: 100%;
    height: 100%;
}
#site-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    scrollbar-width: none;
}
iframe#site-iframe._opendPanel {
    transform: translateZ(0px) scale(0.8);
    transform-origin: left top;
    overflow: inherit;
    max-width: 1920px;
    height: calc(112.218vh);
    background: red;
}
iframe#site-iframe.site-iframe {
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
}
.Yc_Bulilder_builder_page_header {
    height: 70px;
    box-shadow: 0px 0px 10px #000000;
    margin-bottom: 20px;
    background: #0a1425;
}
.position-container {
    padding-top: 24px;
    padding: 0;
}
.position-title {
    font-weight: 600;
}
.position-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}
.label {
    color: #4B5563;
    font-size: 14px;
    width: 20%;
}
.range-container {
    flex: 1;
}
.range-wrapper {
    display: flex;
    border-radius: 4px;
    position: relative;
}
.range-input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--mb-border-color);
    border-radius: 5px;
    outline: none;
    transition: background 0.3s ease-in-out;
}
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    box-shadow: 0px 0px 6px #0000004d;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}
.range-input::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}
._yc__live_create_process_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #01002682;
    z-index: 999999999999999999999999999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
._yc__live_create_process_box {
    width: 800px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
._yc__live_create_process_logo {
    position: relative;
}
._yc__live_create_process_loading {
    position: fixed;
    bottom: 30px;
    width: 400px;
    height: 60px;
    left: 50%;
    transform: translate(-50%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    --w: 20%;
    overflow: hidden;
}
._yc__live_create_process_loading:after {
    content: "";
    display: block;
    position: absolute;
    width: var(--w);
    height: 100%;
    background: linear-gradient(90deg, rgb(117 87 228) 30%, rgb(117 133 236) 120%);
    z-index: -1;
    left: 0;
    border-radius: 10px;
}
._yc__live_create_process_loading_inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transform: scale(0.98, .9);
    border-radius: 10px;
}
.InputSearchSelect_menu {
    position: absolute;
    box-shadow: 0 0 0px #0000, 0 0px #0000, 0 25px 50px -12px rgba(0, 0, 0, .25);
    min-height: 150px;
    width: 100%;
    background: #fff;
    z-index: 9;
    border-radius: .75rem;
    padding: .5rem;
    max-height: 200px;
    overflow: auto;
    scrollbar-width: none;
}
.InputSearchSelect_menu li {
    cursor: pointer;
    padding-left: .75rem;
    padding-right: .75rem;
    line-height: 1.25rem;
    font-size: 0.875rem;
    padding-top: .625rem;
    padding-bottom: .625rem;
    border-radius: .375rem;
    gap: .5rem;
    display: flex;
    align-items: center;
}
.InputSearchSelect_menu li:hover {
    background: #e5e1ffa8;
}
._Keyword_item_row_phrase {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 10px;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    border: var(--border);
    border-radius: 20px;
}
._Keyword_item_row {
    position: relative;
}
._Keyword_item_row input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}
._Keyword_item_row input:checked ~ div {
    background: var(--mb-ui-color);
    color: #fff;
}
._Keyword_item_row > input {
    position: absolute;
}
._Keyword_item_row label {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}
._Keyword_item_row_phrase:hover {
    background: #efedff;
}
.Yc_Bulilder_KeywordSelect_input inut {
    height: 20px;
}
.Yc_Bulilder_KeywordSelect_input .Yc_Bulilder_Field input {
    height: 36px;
    border-radius: 8px;
}
.Yc_Bulilder_KeywordSelect_input {
    margin-bottom: 20px;
}
.Yc_Bulilder_Field-Subdomain {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    height: 44px;
    box-shadow: 0 0 0px #0000, 0 0 0px #0000, 0 1px 2px 0 rgb(0 0 0 / .05);
}
.Yc_Bulilder_Field-Subdomain input {
    border: 0;
    width: auto;
    height: 100%;
    min-width: auto;
    flex: 1;
    padding: 10px;
}
.Subdomain-field-meta {
    background: #e5e7eb1f;
    border-inline-end: 1px solid #e5e7eb; padding: 10px 30px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    min-width: max-content;
}
.Yc_Bulilder_Setup_page_inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    scrollbar-width: none;
    background: #fff;
    position: relative;
    z-index: 1;
}
.Yc_Bulilder_Setup_page_inner:after {
    .Yc_Bulilder_Setup_page_inner: before; content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: .75;
}
.Yc_Bulilder_Industry_Select_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0px 0px;
    background: #fff;
    margin-bottom: 30px;
}
.Yc_Bulilder_Industry_Select_list_item {
    flex: 1;
    text-align: center;
    cursor: pointer;
    position: relative;
    min-width: max-content;
    text-align: center;
    max-width: max-content;
}
.Yc_Bulilder_Industry_Select_list_item input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.Yc_Bulilder_Industry_Select_list_item_inner {
    background: #e5e7eb5c;
    padding: 5px 10px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-width: max-content;
    gap: 9px;
    font-size: 15px;
    justify-content: center;
}
.Yc_Bulilder_Industry_Select_list_item:hover .Yc_Bulilder_Industry_Select_list_item_remove {
    opacity: 1;
}
.Yc_Bulilder_Industry_Select_list_item input:checked ~ div {
    border-color: var(--mb-ui-color);
    background: var(--mb-ui-color);
    color: #fff;
}
.Yc_Bulilder_Industry_Select_list_item.-client-insert input:checked ~ div {
    background: #fff;
    color: var(--mb-ui-color);
    border: 1px dashed;
}
.Yc_Bulilder_Industry_Select_list_item:hover .Yc_Bulilder_Industry_Select_list_item_inner {
    border-color: var(--mb-ui-color);
}
._Industry_Select_list_item_logo {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(30.1);
    display: none;
}
._Industry_Select_list_item_logo img {
    width: 100%;
    height: 100%;
}
.Yc_Bulilder_Industry_Select_list_item_remove {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: #ff4343;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9;
}
form#Yc_Bulilder_Setup_page_Form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.Yc_Bulilder_Setup_page_Splach {
    width: 950px;
    max-width: 50%;
    height: 100vh;
    position: relative;
    background: #fafafa;
    padding: 50px;
    justify-content: center;
    display: flex;
    align-items: center;
    z-index: 1;
    background-image: var(--splach);
    background-size: 100%;
    background-position: 0% 0%;
}
.Yc_Bulilder_Setup_page_Splach:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(228.85deg, #ab6ef9 -6.81%, #5318eb 81.65%), linear-gradient(360deg, #eee0ff 34.79%, #fff 89.24%), linear-gradient(0deg, #fff, #fff);
    opacity: 0.8;
}
._Yc_Magic_Builder-Widget_newSection {
    width: 100%;
    height: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
}
.Widget_newSection_button {
    background: var(--mb-gradiant);
    padding: 10px 15px;
    border-radius: 50px;
    color: #fff;
    height: 36px;
    width: 36px;
    z-index: 99999999;
    box-shadow: 0px 0px 10px 10px #0000000f, 0px 1px 2px 0px #6767671c, 0px 0px 0px 4px #fffffff7;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    justify-content: center;
    pointer-events: all;
}
.Widget_newSection_button svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}
button.-obtn.LoginButton.hoverable.-clickable {
    padding: 5px 10px;
    width: 100%;
    border-radius: 9px;
    border: 0;
    background: var(--mb-ui-color);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    height: 44px;
}
.AuthFormInner--Group._Flex {
    margin-top: 20px;
}
.Editable-headlessui-menu-list {
    display: none;
}
.-Widget-tools-item {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    cursor: pointer;
}
.-fix-builder-prev {
    height: calc(100% - var(--bodyheight));
    ); );
    margin: 0 auto;
    font-family: var(--mb-font);
    overflow: hidden;
    padding-inline-start: 0;
    padding-inline-end: 0;
    background-color: #fff;
    background-image: linear-gradient(45deg, #f1f3ff 25%, transparent 25%), linear-gradient(-45deg, #f1f3ff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f3ff 75%), linear-gradient(-45deg, transparent 75%, #f1f3ff 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    transform-origin: left;
}
.-fix-builder-page.side-panel-is-open .-fix-builder-prev {
    transform-origin: left top;
    overflow: inherit;
    max-width: 1920px;
}
main {
    display: block;
    flex: 1;
    height: 100%;
}
.browser__container {
    height: 100%;
    position: relative;
    scrollbar-width: none;
}
.browser__wrapper {
    height: 100%;
    margin: 0px auto;
    transition: .3s all ease;
}
.browser {
    height: 100%;
    max-width: 100%;
    margin: 0px auto;
}
.address-bar__media div.active, .address-bar__media div:hover {
    color: var(--mb-ui-color);
    background: rgb(235, 228, 255);
}
.browser__adressbar {
    transform-origin: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.address-bar__dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 2px 8px 0 0;
}
.address-bar__dots span.dot-1 {
    background-color: #f26c6f;
}
.address-bar__dots span.dot-2 {
    background-color: #ffc554;
}
.address-bar__dots span.dot-3 {
    background-color: #5dce91;
}
.address-bar__page {
    width: 40%;
    max-width: 400px;
    height: 32px;
    padding: 5px 4px 4px 4px;
    background-color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 6px;
    color: var(--mb-s-color);
    cursor: pointer;
    box-shadow: 0 1px 2px #a6afc340;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.address-bar__page span {
    background: #e9e5ff;
    border-radius: 30px;
    line-height: 1;
    padding: 4px 20px;
    color: var(--mb-ui-color);
    font-weight: 600;
}
.address-bar__media {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0px;
    border-radius: 12px;
}
.browser__change-device {
    display: flex;
    width: 32px;
    height: 32px;
    r; align-items: center;
    padding: 0;
    background: none;
    outline: none;
    border: none;
    border-radius: 2px;
    font-size: 18px;
    justify-content: center;
    color: #a6aec1;
    cursor: pointer;
    border-radius: 5px;
}
figure.mb-editable-hover {
    opacity: .9;
    outline-offset: -10px;
}
.mb-editable-hover {
    outline: 1px dashed var(--mb-ui-color);
    outline-offset: 8px;
    position: relative;
}
div#iframe-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1f1f1f;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999999999999999;
}
.toggle-button-cover {
    display: table-cell;
    position: relative;
    box-sizing: border-box;
}
.button-cover {
    height: 100px;
    margin: 20px;
    background-color: #fff;
    box-shadow: 0 10px 20px -8px #c5d6d6;
    border-radius: 4px;
}
.button-cover:before {
    counter-increment: button-counter;
    content: counter(button-counter);
    position: absolute;
    right: 0;
    bottom: 0;
    color: #d7e3e3;
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}
.button-cover, .knobs, .layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.button {
    position: relative;
    width: 55px;
    height: 28px;
    overflow: hidden;
}
.checkbox {
    position: relative;
    width: 100% !important;
    !i; !; height: 100% !important;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}
.knobs {
    z-index: 2;
}
.layer {
    width: 100%;
    background-color: #ffffff33;
    transition: 0.3s ease all;
    z-index: 1;
    border: 1px solid #e4eaee0d;
}
.button.r, .button.r .layer {
    border-radius: 100px;
}
#button-3 .knobs:before {
    content: "\e28f";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 20px;
    height: 20px;
    color: #a6aec1;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    background-color: #fff;
    border-radius: 50%;
    font-family: "Font Awesome 6 Pro";
    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4eaee;
}
#button-3 .checkbox:active + .knobs:before {
    width: 46px;
    border-radius: 100px;
}
#button-3 .checkbox:checked:active + .knobs:before {
    margin-left: -26px;
}
#button-3 .checkbox:checked + .knobs:before {
    content: "\f186";
    left: 28px;
}
#button-3 .checkbox:checked ~ .layer {
}
.NoSections_Select {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}
.no_section_Select_img {
    position: relative;
}
.no_section_Select_img svg {
    position: absolute;
}
.no_section_Select_head h1 {
    margin-bottom: 11px;
    font-size: 26px;
    font-weight: 600;
}
.no_section_Select_head h3 {
    color: #536387;
    font-size: 1.125rem;
    line-height: 1.8;
    max-width: 500px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}
.-Bulding_options_item {
    padding: 20px;
    border: 1px solid #e4eaee;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0%), 0 1px 2px 0 rgba(0, 0, 0, .06);
}
.-Bulding_options_item:hover {
    border-color: #6a87f9;
    box-shadow: 0px 0px 10px #d3d6e3;
    transition: .3s all ease;
}
.Mb-Bulding_options {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}
.WidgeItem_list_category {
    border-inline-end: 1px solid #e8eaed; min-width: 260px;
    height: 100%;
    background: var(--mb-light);
    padding: 10px;
    overflow: auto;
    scrollbar-width: none;
}
.WidgeItem_list_category li {
    display: flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
    font-family: var(--mb-font);
    color: var(--mb-s-color);
    font-size: 17px;
    justify-content: space-between;
    padding: 3px 10px;
    border-radius: 10px;
}
.WidgeItem_list_category li span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.WidgeItem_list_category li span i {
    font-weight: 300;
}
.WidgeItem_list_category li:hover {
    color: var(--mb-ui-color);
}
.WidgeItem_list_category li em {
    width: max-content;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--mb-s-color);
    font-size: 14px;
}
.WidgeItem_list_Widgets {
    width: 100%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    overflow: auto;
    max-height: 100%;
    scrollbar-width: thin;
    height: 100%;
    align-items: start;
}
.Section_Prev_item {
    border-radius: 10px;
    cursor: pointer;
    width: calc(100% / 5 - 72px);
    ); ) _; ); min-width: 219px;
    padding: 0;
    position: relative;
    border: 1px solid var(--mb-border-color);
    overflow: hidden;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px #f3f4f6, 0 4px 6px -4px #f3f4f6;
    display: flex;
    flex-direction: column;
    background: var(--mb-light);
    ); }
.Section_Prev_item.yc-template-center-template span {
    padding: 8px 10px;
    display: flex;
    border-top: 1px solid var(--mb-border-color);
    gap: 7px;
    align-items: center;
    color: var(--mb-s-color);
    background: #fff;
    font-weight: 600;
}
.Section_Prev_item.yc-template-center-template span svg {
    fill: var(--mb-s-color);
    width: 23px !important;
    !i; !; height: 23px !important;
    display: flex;
}
.Section_Prev_item:hover {
    border-color: var(--mb-ui-color);
    transition: .3s all ease;
}
.Section_Prev_item > img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: contain;
}
.hero-skeleton {
    width: 100%;
    max-width: 1600px;
    background-color: #fff;
    border-radius: 8px;
    padding: 70px;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0 auto;
    gap: 80px;
}
.hero-image-loader {
    width: 100%;
    height: 300px;
    width: 50%;
    background-color: #efefef;
    border-radius: 8px;
    animation: shimmer 1.5s infinite;
}
.hero-text-loader {
    margin-top: 20px;
    width: 70%;
}
.skeleton-title {
    width: 70%;
    height: 24px;
    background-color: #efefef;
    margin-bottom: 10px;
    border-radius: 4px;
    animation: shimmer 1.5s infinite;
}
.skeleton-subtitle {
    width: 50%;
    height: 18px;
    background-color: #efefef;
    margin-bottom: 20px;
    border-radius: 4px;
    animation: shimmer 1.5s infinite;
}
.skeleton-button {
    width: 130px;
    height: 36px;
    background-color: #efefef;
    border-radius: 4px;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}
.Mb-Items-List_Item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0px;
    border-bottom: 1px solid #e4eaee;
    transition: .3s all ease;
}
.Mb-Items-List_Item:last-child {
    border-bottom: 0;
}
.Mb-Items-List_Item:hover {
    background: #f9fafb;
}
.Mb-Items-List_Item_actions {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: max-content;
    min-width: 60px;
}
.Mb-Items-List_Item_head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0%;
    0%; */ max-width: calc(100% - 70px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.Mb-Items-List_Item_head i {
    font-size: 20px;
}
.-List_Item_action {
    min-width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #615dfa;
    font-size: 15px;
    cursor: pointer;
}
.-List_Item_action[data_remove_listitem] {
    color: #da4610;
}
.-List_Item_action svg {
    width: 20px;
}
.-List_Item_action[data-remove_listitem] {
    color: var(--error-color);
    font-weight: 200;
}
.AddNew-listItem {
    font-size: 15px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    gap: 6px;
    color: var(--mb-ui-color);
}
.Octy_Edit_save {
    padding: 0px 30px;
    background: var(--mb-gradiant);
    color: #fff;
    border-radius: 10px;
    transition: .3s all ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}
.-loading {
    opacity: .7;
    pointer-events: none;
}
.Octy_Edit_save svg path {
    fill: #fff;
}
.Octy_Edit_save:hover {
    opacity: 0.8;
}
.MB-ui-iconPicker_input.open-iconPicker {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    border-radius: 5px;
    border: 1px solid var(--mb-border-color);
    ); background: #fdfdfd;
    color: var(--mb-s-color);
    cursor: pointer;
    font-size: 30px;
}
.Radio-Options-Items {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background: var(--mb-border-color);
    border-radius: 10px;
    padding: 3px;
}
.Radio-Options-Items label {
    padding: 10px;
    border: 1px solid #e4eaee;
    flex: 1;
}
.-Mb-input-label h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--mb-t-color);
    display: flex;
    align-items: center;
    gap: 5px;
}
.Octy_Edit_Body .-Mb-input-head .-Mb-input-label h3 {
}
.-Mb-input-head {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    justify-content: space-between;
}
.Octy_Edit_Body .-Mb-input-head {
    color: #fff;
}
.-Mb-input.type_SwitchBox .-Mb-input-head {
    margin: 0;
}
.-Mb-input {
    padding: 4px 8px 8px 8px;
    flex: 1;
}
.-Mb-input.type_uploadimage {
}
.-Mb-input:has(input:focus) .-Mb-input-label h3, .-Mb-input:has(textarea:focus) .-Mb-input-label h3 {
    color: var(--mb-ui-color);
    font-weight: 800;
}
.-Mb-input:last-child {
    border: 0;
}
.-Mb-input.type_iconpicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.-Mb-input.type_SwitchBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    en; */ }
._iconPicker_selector_head_search.-Mb-input {
    flex: 1;
}
.field-groupsflex .-Mb-input {
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0;
    padding: 0;
}
._iconPicker_selector {
    max-width: 1200px;
    width: 100%;
    background: #ffffff;
    !i; !; border: 1px solid var(--mb-border-color);
    border-radius: 14px;
    gap: 2px;
    z-index: 9999;
    overflow: hidden;
    font-size: 16px;
    font-family: var(--mb-font);
    max-height: 90vh;
}
._iconPicker_selector_list {
    flex-wrap: wrap;
    padding: 20px;
    scrollbar-width: none;
    gap: 8px;
    max-height: calc(100% - 60px);
    align-items: start;
    overflow: scroll;
    background: #ffffff;
    display: flex;
}
._iconPicker_selectorItemview {
    flex-wrap: wrap;
    align-items: center;
    --w: 146px;
    transition: .3s all ease;
    box-shadow: #e5eaef 0px 0px 0px 1px, 0px 4px 2px -3px #09234012;
    min-width: var(--w);
    max-width: 160px;
    justify-content: center;
    border-radius: 10px;
    color: #607D8B;
    cursor: pointer;
    height: var(--w);
    font-size: 28px;
    display: flex;
    padding: 5px;
    background: #fff;
    gap: 5px;
    flex: 1;
}
._iconPicker_selectorItemview._oneIcon {
}
._iconPicker_selector_list_item {
    --w: calc(50% - 5px);
    min-width: var(--w);
    max-width: var(--w);
    background: #ff000000;
    height: var(--w);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eff2f5;
    border-radius: 12px;
    gap: 6px;
    font-size: 26px;
    transition: .3s all ease;
}
._iconPicker_selectorItemview._oneIcon ._iconPicker_selector_list_item {
    width: 100%;
    --w: 100%;
    font-size: 70px;
}
._iconPicker_selector_list_item:hover {
    background: var(--mb-s-color);
    color: #fff;
}
._iconPicker_selector_list_item span {
    font-size: 13px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
    white-space: nowrap;
    direction: ltr;
    margin-top: 7px;
}
div#media_popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #01051a87;
    z-index: 999999999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media_popup_content {
    width: 100%;
    background: #fff;
    max-width: 1200px;
    border-radius: 10px;
    overflow: hidden;
    height: calc(100vh - 60px);
    font-family: var(--mb-font);
}
ul.media_tabs {
    display: flex;
    list-style: none;
    padding: 10px;
    gap: 10px;
    border-bottom: 1px solid #e4eaee;
}
ul.media_tabs li {
    padding: 9px 13px;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
}
ul.media_tabs li.active {
    background: var(--mb-ui-color);
    color: #fff;
}
ul.media_tabs li a {
    color: #000;
    font-size: 15px;
}
div#user_images {
    overflow: scroll;
    height: 67vh;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: start;
    padding: 20px;
}
div#user_images > svg {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
div#user_images > svg path, div#user_images > svg line, div#user_images > svg circle {
    stroke: #e4eaee;
}
.user-image {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex: 1;
    min-width: 170px;
    max-width: 160px;
    background: #f3f4f6;
    cursor: pointer;
    margin-bottom: 8px;
}
.user-image.selected-image {
    box-shadow: 0px 0px 1px #919191;
}
.user-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.media_tab_content {
    padding: 20px;
    display: none;
    min-height: 500px;
}
.mb-field-image-preview-box > img {
    width: 100%;
    object-fit: contain;
    height: 100%;
}
.mb-builder-field-image-preview-box > img {
    width: 100%;
}
.upload_image_form_Wrapper {
    min-height: 370px;
    border-radius: 10px;
    border: 2px dashed;
    border-color: #d8d8ff00;
    position: relative;
    padding: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.upload_image_form_Wrapper:hover {
    border-color: #b2b1ff;
}
.upload_image_form_Wrapper form input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.upload_image_form_Wrapper > input {
}
.media_library_header {
    padding: 20px;
    border-bottom: 1px solid #e4eaee;
    background: #f8f9fa;
}
div#drop_zone svg {
    width: 100px;
}
div#drop_zone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
div#upload_status {
    width: 100%;
    display: flex;
}
.delete_attachment {
    width: 32px;
    height: 32px;
    background: #F44336;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    box-shadow: 0px 0px 10px #00000045;
}
form#upload_image_form {
    width: 100%;
}
.Mb-Items-List_Item_view_thumb {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #f8f9fa;
    border-radius: 0.25rem;
    background-image: var(--bg);
    background-size: cover;
    background-repeat: no-repeat;
}
.Mb-Items-List_Item_view_thumb.-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
}
.Mb-Items-List_Item_view {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0%;
    overflow: hidden;
}
.Mb-Items-List_Item_view_text h3 {
}
.Mb-Items-List_Item_view_text h4 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Mb-Items-List_Item_view_text p {
    color: rgb(107 114 128);
    font-size: .75rem;
    line-height: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.Mb-Items-List_Item_view_text {
    overflow: hidden;
}
.Mb-Items-List_Item_Dragable {
    cursor: all-scroll;
}
.Mb-Items-List_Item_Dragable svg {
    width: 20px;
}
.listitem_in_over {
    opacity: 1;
    outline: 2px solid var(--mb-ui-color);
}
.listitem_in_out {
    opacity: .5;
}
.mb-builder-Image_replace {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    border: 1px solid var(--mb-border-color);
    background-color: #fff;
    padding: .625rem 1rem;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: var(--mb-ui-color);
    width: 100%;
    cursor: pointer;
    margin-bottom: 10px;
    height: 42px;
}
.mb-builder-field-image-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}
form.Octy_Edit_Form {
    font-family: var(--mb-font);
    height: 100%;
}
.Fonts_Family_item {
    width: 100%;
    cursor: pointer;
    position: relative;
}
.Fonts_Family_item:hover .Fonts_Family_item_inner {
    background: #f8f9fafc;
}
.Fonts_Family_item input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.Fonts_Family_item input[type="radio"]:checked+div {
    box-shadow: 0 1px 2px #a290ff4d;
    border-color: #7b61ff;
}
.Fonts_Family_item_inner h4 {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    color: var(--mb-s-color);
}
.Fonts_Family_item_inner p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mb-s-color);
}
.Fonts_Family_item_inner {
    padding: 10px 20px;
    width: 100%;
    max-width: 400px;
    line-height: 1.8;
    margin-top: 9px;
    transition: .3s all ease;
    background-color: #fff;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 2px #a6afc340;
    border: 1px solid rgb(209 213 219);
}
.-fix-dminbar {
    background-color: var(--mb-bg);
    color: #fff;
    margin-bottom: 0px;
    z-index: 1;
    display: flex;
    align-items: center;
    font-family: var(--mb-font);
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid var(--mb-border-color);
    box-shadow: 1px 14px 10px #4f59660a;
    height: 55px;
}
.-fix-builder-page {
    font-family: var(--mb-font);
    display: flex;
    max-height: 100vh;
    overflow: hidden;
    height: 100vh;
    --footerHeight: 0px;
    --headbarheight: 55px;
    --bodyheight: calc(var(--footerHeight) + var(--headbarheight));
    user-select: none;
}
.fix-dminbar-site_title {
    display: flex;
    justify-content: space-around;
    line-height: 1;
    font-size: 14px;
    gap: 8px;
    padding: 9px;
    background: var(--mb-light);
    border-radius: 4px;
    color: var(--mb-s-color);
}
.-fix-dminbar-start h2 {
    font-size: 12px;
    font-weight: 800;
}
.-fix-dminbar-home a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 800;
    color: rgba(55, 65, 81, 1);
}
.-fix-dminbar-home a i {
    font-weight: 800;
}
.-fix-dminbar-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--headbarheight);
}
.-fix-dminbar-toolItem {
    display: flex;
    align-items: center;
    background: #f3f4f638;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--mb-font);
    position: relative;
}
.-fix-dminbar-toolItem.active {
}
.-dminbar-toolItem_icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 4px;
    margin-inline-end: 8px; }
.-dminbar-toolItem_icon i {
    font-weight: 800;
}
.-fix-dminbar-tootls {
    font-size: 17px;
    display: flex;
    padding: 4px 0px;
    height: 100%;
}
.-fix-dminbar-tootls ul li.editor-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}
.toolbar-separator {
    height: 1px;
    background-color: #e0e0e0;
    margin: 15px 10px;
    list-style: none;
}
.-fix-dminbar-tootls ul li:active {
    transform: scale(0.9);
}
.-fix-dminbar-tootls ul li svg {
    --w: 20px;
    width: var(--w);
    height: var(--w);
    fill: var(--mb-s-color);
}
.-fix-dminbar-tootls ul li:hover i {
    color:  var(--mb-ui-color);
}
.-fix-dminbar-tootls ul li i {
    font-size: 22px;
    font-weight: 300;
}
.-fix-dminbar-tootls ul li span {
    position: absolute;
    inset-inline-start: 100%;
    color: #fff;
    background: #20262e;
    padding: 0px 20px;
    line-height: 1.4;
    border-radius: 24px;
    font-size: 13px;
    height: 31px;
    display: flex;
    transform: translate(20px, 0px);
    align-items: center;
    transition: .3s all ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0px 1px 2px #6c66664a;
    min-width: max-content;
}
.-fix-dminbar-tootls ul li:hover span {
    transform: translate(-12px);
    opacity: 1;
    visibility: visible;
}
.-fix-dminbar-tootls ul li span:after {
    content: "";
    width: 0;
    height: 0;
    display: block;
    border-width: 12px;
    border-style: solid;
    border-color: #ff000000 #0000ff00 #d2b48c00 #20262e;
    position: absolute;
    inset-inline-start: -17px;
    top: calc(50% - 11px);
    ); }
.-fix-dminbar-toolItem_drobDown {
    bottom: 100%;
    background: #fff;
    padding: .25rem;
    border-radius: 10px;
}
.-fix-dminbar-toolItem.active .-fix-dminbar-toolItem_drobDown {
    display: block;
}
.-fix-dminbar-toolItem_drobDown li {
    padding: 12px 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(55, 65, 81, 1);
}
.-fix-dminbar-toolItem_drobDown li:hover {
    background: #f3f4f6;
}
.-fix-dminbar-toolItem_drobDown ul {
    list-style: none;
    display: flex;
}
.clr-field {
    display: block !important;
    !i; !; !i; !; color: transparent;
    width: 100%;
    height: 48px;
    background: currentColor;
}
.Mb_color_Pallete_Picker_Item .clr-field button {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    top: 0;
    left: 0;
}
.Mb_color_Pallete_Picker_Item {
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #e4eaee;
}
.Mb_color_Pallete_Picker_Item p {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9;
    background: #fff;
    padding: 0px 10px;
    border-radius: 20px;
}
.Mb_color_Pallete_Picker_Item input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.-fix-dminbar-tootls {
    width: 55px;
    color: var(--mb-s-color);
    font-family: var(--mb-font);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
    background: var(--mb-li);
    z-index: 99999;
    border-inline-end: 1px solid var(--mb-border-color);
    }
.-user_profile_avatar {
    --w: 37px;
    height: var(--w);
    width: var(--w);
    overflow: hidden;
    border-radius: 22px;
    padding: 0.35rem 0;
    background: #EBEDF5;
    transition: background 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.-user_profile_avatar img {
    width: 22px;
    height: 22px;
    margin: 0 auto;
    border-radius: 50%;
}
.-fix-sidebar-user {
    cursor: pointer;
    display: n;
}
.-fix-dminbar-end {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
.-fix-dminbar-end > * {
    width: 38px;
    min-width: max-content;
    padding: 7px 10px;
    min-height: 38px;
    color: var(--mb-t-color);
    gap: 8px;
    cursor: pointer;
    border-radius: 9px;
    box-shadow: #dbdce700 0 0 0 1px, 0 15px 26px -14px #09234014, 0 4px 2px -3px #09234000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--mb-border-color);
}
.-fix-dminbar-end > *:disabled {
    pointer-events: none;
    opacity: .5;
}
.-ocbtn {
    --h--ocbtn: 33px;
    --w--ocbtn: 99px;
    --round: 7px;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.25s ease;
    background: var(--mb-gradiant);
    border-radius: var(--round);
    border: none;
    outline: none;
    padding: 12px 18px;
    height: 25px;
    width: 72px;
    font-family: var(--mb-font);
    text-decoration: none;
}
.-ocbtn::before, .-ocbtn::after {
    content: "";
    position: absolute;
    inset: var(--space);
    transition: all 0.5s ease-in-out;
    border-radius: calc(var(--round) - var(--space));
    z-index: 0;
}
.-ocbtn::before {
    --space: 1px;
    background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
}
.-ocbtn::after {
    --space: 2px;
    background: var(--mb-gradiant);
}
.-ocbtn:active {
    transform: scale(0.95);
}
.-ocbtn .inner {
    z-index: 2;
    gap: 6px;
    position: relative;
    width: 100%;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    transition: color 0.2s ease-in-out;
}
.inner svg.icon {
    width: 16px;
    height: 16px;
    transition: fill 0.1s linear;
}
.-ocbtn:focus svg.icon {
    fill: white;
}
.-ocbtn:hover svg.icon {
    fill: transparent;
    animation: dasharray 1s linear forwards, filled 0.1s linear forwards 0.95s;
}
@keyframes dasharray {
    from {
        stroke-dasharray: 0 0 0 0;
    }
    to {
        stroke-dasharray: 68 68 0 0;
    }
}
@keyframes filled {
    to {
        fill: white;
    }
}
.-Mb-input-label {
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.AuthBoxHead_logo {
    margin-bottom: 30px;
}
octy_popover {
    width: 100%;
    display: flex;
    height: 100%;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    background: var(--mb-overlay);
    backdrop-filter: blur(1px);
}
octy_sideover {
    width: 100%;
    display: flex;
    height: 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    align-items: stretch;
    justify-content: flex-end;
    background: var(--mb-overlay);
    backdrop-filter: blur(1px);
    font-family: var(--mb-font);
}
octy_popover_inner {
    display: block;
    box-shadow: 0 12px 40px -4px #0e104e8c, 0 0 2px #00000014;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    min-width: 500px;
    min-height: 180px;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
    font-family: var(--mb-font);
}
.Radio-Options-Item_inner svg {
    width: 16px;
    height: 16px;
}
.Radio-Options-Item_inner {
    display: flex;
    padding: 10px;
    border: 1px solid var(--mb-border-color);
    gap: 7px;
    align-items: center;
    height: 34px;
    font-size: 13px;
    justify-content: center;
}
.Radio-Options-Item input:checked + .Radio-Options-Item_inner {
    background: #fff;
    border-radius: 10px;
}
.Radio-Options-Item {
    position: relative;
    flex: 1;
    color: var(--mb-s-color);
}
.Radio-Options-Item:last-child .Radio-Options-Item_inner {
}
.Radio-Options-Item:first-child .Radio-Options-Item_inner {
}
.Radio-Options-Item input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    text-align: center;
}
.field-groupsflex {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
}
.field-groupsflex {
}
.field-group_item {
    flex: 1;
}
.field-group_item.-icon {
    max-width: max-content;
}
._iconPicker_selector_head {
    padding: 6px 20px;
    border-bottom: 1px solid var(--mb-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
._iconPicker_selector_head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mb-s-color);
    font-size: 20px;
}
.progress-container {
    position: relative;
    border-bottom: 1px solid var(--mb-border-color);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.progress-bar {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0%;
    height: 5px;
    background: linear-gradient(90deg, rgb(118, 79, 227) 0%, rgb(117, 146, 238) 100%);
    transition: width 0.4s ease-in-out;
    display: none;
}
.progress-steps {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    gap: 20px;
}
.progress_step em {
    width: 35px;
    height: 35px;
    background-color: #cccccc42;
    color: var(--color);
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    position: relative;
    transition: background-color 0.4s;
    font-style: normal;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.progress_step span {
    font-size: 17px;
    display: flex;
    margin: 0px 6px;
    color: var(--mb-overlay);
    gap: 8px;
    align-items: center;
}
.progress_step.active em {
    background: var(--color);
    color: #fff;
}
.progress_step {
    display: flex;
    align-items: center;
    --color: var(--mb-s-color);
}
.progress_step.active {
    --color: var(--mb-ui-color);
}
.mb_overlay_toolbar {
    position: absolute;
    bottom: calc(100% + 20px);
    right: -2px;
    pointer-events: all;
    color: #fff;
    z-index: 999999999;
    display: flex;
    gap: 10px;
    height: 42px;
}
.mb_overlay_toolbar button:hover {
    background: var(--mb-light);
}
span.mb_node_name {
    padding: 3px 10px;
    height: 33px;
    display: flex;
    font-size: 16px;
    align-items: center;
    gap: 8px;
    color: var(--mb-s-color);
    font-family: 'Cairo';
    background: var(--mb-light);
    border-radius: 8px;
}
.mb_overlay_toolbar button {
    padding: 3px 10px;
    display: flex;
    font-size: 16px;
    align-items: center;
    border-radius: 8px;
    gap: 8px;
    height: 33px;
    color: var(--mb-s-color);
    min-width: max-content;
    position: relative;
    margin: 0px 2px;
}
.mb_overlay_toolbar button:last-child {
    border: 0;
}
button.AiMagicButton {
    border: 0;
    background: #fff;
    border-radius: 3px;
    position: relative;
    z-index: 1;
    margin: 3px;
}
button.AiMagicButton.active {
    background: var(--mb-light);
    border-radius: 5px;
}
.mb_overlay_toolbar button:disabled {
    opacity: 0.5;
}
span.mb_node_name > nodename {
    font-size: 16px;
    border-inline-start: 1px solid #ffffff78; padding-inline-start: 8px; }
span.mb_node_name.mb_node_type-selected {
    ); }
.-YourColor-Widgets-Sections {
    position: relative;
    font-family: var(--mb-font);
    transform: translateZ(0px) scale(1);
    transform-origin: left top;
    overflow: inherit;
    max-width: 100%;
    user-select: none;
    background: #fff;
}
.-YourColor-Widgets-Sections > section {
}
.-fix-dminbar-start {
    display: flex;
    align-items: center;
    gap: 8px;
}
.resizer_container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0px;
    height: 100%;
    width: 16px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
}
div#resizer {
    width: 9px;
    height: 60px;
    cursor: col-resize;
    position: absolute;
    pointer-events: all;
    background: var(--mb-ui-color) !important;
    border-radius: 18px;
    z-index: 1;
}
div#resizer:before {
    content: "";
    width: 2px;
    height: 20px;
    border-inline: 1px solid #9E9E9E; position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}
.MB-ui-iconPicker {
    display: flex;
    align-items: center;
}
.MB-ui-iconPicker_filter {
    width: 40%;
}
._iconPicker_selectorItemview:hover {
    box-shadow: 0px 5px 6px #0000001f;
    0px 0px 0px 1px, 0px 4px 2px -3px #09234012; 0px 0px 0px 1px, 0px 4px 2px -3px #09234012; 0px 0px 0px 1px, 0px 4px 2px -3px #09234012; }
._iconPicker_selector_style ul {
    display: flex;
    list-style: none;
    gap: 8px;
}
._iconPicker_selector_style ul li {
    display: flex;
    font-size: 18px;
    align-items: center;
    padding: 1px 15px;
    border: 1px solid #e5eaef;
    gap: 8px;
    border-radius: 9px;
    font-weight: 400;
    transition: .3s all ease;
    cursor: pointer;
    color: var(--mb-s-color);
}
._iconPicker_selector_style ul li:hover {
    background: #b2c0c726;
}
._iconPicker_selector_style ul li.active {
    background: var(--mb-ui-color);
    color: #fff;
    border-color: transparent;
}
._iconPicker_selector_style ul li i {
    font-size: 18px;
}
._iconPicker_selector_Filter {
    display: flex;
    border-bottom: 1px solid #e5eaef;
    padding: 10px 22px;
    align-items: center;
    gap: 10px;
    box-shadow: 0px 6px 10px #00000008;
    position: sticky;
    top: 0;
}
._iconPicker_selector_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999999;
    background: var(--mb-overlay);
    backdrop-filter: blur(4px);
}
._iconPicker_selector_wrapper {
    display: flex;
    align-items: stretch;
    height: calc(90vh - 110px);
    background: #f9f9f982;
    overflow: hidden;
}
._iconPicker_selector_IconPreview_wrapper {
    min-width: 230px;
    height: 100%;
    padding: 10px;
    max-height: 100%;
}
._iconPicker_selector_List {
    border-inline-start: 1px solid #e5eaef; background: #fff;
    width: 100%;
}
._iconPicker_selector_IconPreview_ {
    width: 180px;
    height: 110px;
    display: flex;
    color: var(--mb-ui-color);
    margin: 0 auto;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    box-shadow: 0px 5px 6px #673ab726;
    margin-bottom: 20px;
    background-color: #fff;
    background-size: 29px 29px;
    border: 2px solid var(--mb-ui-color);
}
._iconPicker_selector_Close {
    background: var(--mb-border-color);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--mb-s-color);
    cursor: pointer;
}
._iconPicker_selector_footer {
    height: 50px;
    border-top: 1px solid #e5eaef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 16px;
}
.-obtn {
    padding: 2px 20px;
    background: var(--mb-gradiant);
    border-radius: 6px;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
._iconPicker_selector_IconPreview_Categories_inner {
    overflow: scroll;
    height: auto;
    scrollbar-width: none;
    max-height: calc(90vh - 330px);
}
._iconPicker_selector_IconPreview_Categories {
}
._iconPicker_selector_IconPreview_Categories_inner ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--mb-s-color);
    cursor: pointer;
    margin-bottom: 2px;
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: .3s all ease;
}
._iconPicker_selector_IconPreview_Categories_inner ul li span i {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
._iconPicker_selector_IconPreview_Categories_inner ul li.selected {
    background: var(--mb-ui-color);
    color: #ffff;
}
._iconPicker_selector_IconPreview_Categories_inner ul li:hover {
    border-color: var(--mb-s-color);
    background: var(--mb-s-color);
    color: #fff;
}
._iconPicker_selector_IconPreview_Categories_inner ul li span {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
._iconPicker_selector_IconPreview_Categories_inner ul li em {
    font-size: 12px;
    font-style: normal;
}
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 60px;
    margin: 0 auto;
}
.lds-ellipsis div {
    position: absolute;
    top: 30px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mb-ui-color);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}
._iconPicker_selector_IconPreview_title h3 {
    font-size: 14px;
}
._iconPicker_selector_IconPreview_title {
    margin-bottom: 10px;
    color: var(--mb-s-color);
}
.IconPicker-emptyState {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mb_node_prent_list {
    position: relative;
}
.mb_node_prent_list > ul > li {
    background: #fff;
    padding: 3px 10px;
    height: 24px;
    display: flex;
    border-radius: 5px 5px 5px 5px;
    font-size: 13px;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    color: var(--mb-overlay);
    width: auto;
    cursor: pointer;
    width: max-content;
    opacity: .8;
}
.mb_node_prent_list > ul > li:hover {
    opacity: 1;
    transition: .3s all ease;
}
.ListItem-all_list_wrapper {
    padding: 10px;
}
.ListItem-single_item_edite {
    padding: 0px 0px;
}
.mb-builder-footer {
    height: var(--footerHeight);
    background: var(--mb-bg);
    font-size: 0;
}
.Editable-Widget-tools_title {
    display: flex;
    align-items: center;
    gap: 6px;
}
.Editable-Widget-tools_title svg {
    width: 16px;
    fill: #fff;
}
.Editable-Widget-overlay {
    border-color: #bd6afc !important;
}
.-fix-dminbar-meddile {
    display: flex;
    align-items: center;
    gap: 10px;
}
a.-fix-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin: 0;
    background: var(--mb-ui-color);
    color: #fff;
    border: 0;
}
.popupContainer-empty-state {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: var(--mb-font);
}
.c-empty-state__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--mb-s-color);
    line-height: 1;
    margin-bottom: 10px;
}
.c-empty-state__Description {
    font-size: 16px;
    font-weight: 300;
    color: var(--mb-s-color);
    line-height: 1;
}
button.mb_toggle_parents {
    margin-inline-end: 5px; background: var(--mb-ui-color);
    !i; !; !i; !; !; width: 24px;
    border-radius: 5px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Octy_Edit_Head_title svg {
    width: 24px;
    height: 24px;
}
.Mb_color_Pallete_Picker {
}
.Mb_color_Pallete_ {
    display: flex;
    margin-bottom: 5px;
    overflow: hidden;
    border-radius: 9px;
    border: 1px solid var(--mb-border-color);
    padding: 5px;
    gap: 8px;
    padding-inline-start: 8px; cursor: pointer;
    transition: .3s all ease;
    color: var(--mb-s-color);
    align-items: center;
}
.Mb_color_Pallete_.selected {
    border-color: #7860fbf2;
    color: var(--mb-ui-color);
}
.Mb_color_Pallete_:hover {
    border-color: var(--mb-overlay);
}
.Mb_color_Pallete_item {
    height: 34px;
    width: 22px;
    background: var(--color);
    flex: 1;
}
.Mb_color_Pallete_list {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid #EBEDF5;
    height: 25px;
}
.Mb_color_Pallete_name {
    width: 60px;
    font-weight: 600;
    font-size: 14px;
}
.mb-color-picker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 8px 0px;
    background: var(--mb-bg);
    overflow: hidden;
    display: none;
    font-family: var(--mb-font);
}
.mb-color-picker {
    position: relative;
    width: 200px;
    cursor: pointer;
    z-index: 1;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: rgb(255, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 8px 0px;
}
.mb-color-picker:after {
    content: "";
    display: block;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.mb-color-picker:before {
    content: "";
    display: block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.mb-picker-circle {
    position: absolute;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    z-index: 1;
    background-color: transparent;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}
.mb-hue-slider {
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    position: relative;
    cursor: pointer;
    border-radius: 20px;
}
.mb-hue-circle {
    position: absolute;
    height: 12px;
    border: 2px solid black;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-6px, -7px);
    border: 3px solid #fff;
    background-color: transparent;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}
.mb-controls {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 15px;
}
#mb-eye-dropper {
    font-size: 14px;
    width: 40px;
    height: 30px;
    color: var(--mb-s-color);
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid var(--mb-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
#mb-eye-dropper:hover {
    background-color: #f6f7f7;
}
.mb-selected-color {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0;
    border-radius: 5px;
    border: 1px solid var(--mb-border-color);
}
.mb-color-swatch {
    height: 17px;
    width: 17px;
    outline: 2px solid rgb(0 0 0 / 12%);
    padding: 0;
    border-radius: 22px;
    cursor: pointer;
}
.mb-color-swatch:hover {
    box-shadow: 0px 0px 30px #09234038;
    transition: .3s all ease;
}
.mb-color-suggestions {
    justify-content: center;
    background-color: transparent;
    margin: 12px 0px;
    display: grid;
    grid-template-columns: repeat(8, 20px);
    grid-gap: 4px;
}
.mb-color-picker_inner {
    padding: 0px 15px 15px 15px;
}
.mb-color-picker-head {
    width: 100%;
    padding: 9px 12px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--mb-light);
    padding: .5625rem .75rem;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mb-s-color);
    height: 36px;
    =:15px; margin-bottom: 15px;
}
.mb-color-picker-head > svg {
    width: 18px;
    height: 18px;
    fill: var(--mb-s-color);
}
.mb-color-picker-head i {
    font-weight: 440;
}
.mb-applay-selected.-obtn {
    margin-top: 15px;
    text-align: center;
}
.mb_blog_ColorPallete_item {
    display: flex;
    align-items: center;
    color: var(--mb-s-color);
    min-width: max-content;
    font-size: 12px;
    gap: 8px;
    border: 1px solid var(--mb-border-color);
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    x rgba(0, 0, 0, .1019607843); }
.mb_blog_ColorPallete_item input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ColoredItem {
    width: 20px;
    height: 20px;
    background: var(--color);
    border-radius: 4px;
    outline: 1px solid;
    --color-black: #000;
    outline-offset: calc(1px* -1);
    outline-color: color-mix(in oklab, var(--color-black)10%, transparent)
}
.Mb_color_Pallete_Check {
    border: 1px solid var(--mb-border-color);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0;
}
.selected .Mb_color_Pallete_Check {
    font-size: 15px;
    border-color: var(--mb-ui-color);
}
.Widget_Seletor_popup_head_title h2 {
    min-width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mb-s-color);
    font-size: 20px;
}
.Widget_Seletor_popup_head_title {
    display: flex;
    align-items: center;
    gap: 7px;
}
.Widget_Seletor_popup_head_title svg {
    width: 20px;
    height: 20px;
    fill: var(--mb-s-color);
}
.Section_Prev_item_svg svg {
    width: 60px;
    height: 50px;
    fill: var(--mb-s-color);
}
.Section_Prev_item_svg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}
#toastr-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    width: auto;
    max-width: 350px;
}
.toastr {
    position: relative;
    background-color: #fff;
    color: #fff;
    border-radius: 15px;
    margin: 10px 0;
    padding: 18px 25px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 310px;
    font-family: var(--mb-font);
    border: 1px solid var(--mb-border-color);
    overflow: hidden;
    padding-inline-start: 60px; }
.toastr:before {
    --size: 25px;
    --line: color-mix(in hsl, var(--color), transparent 80%);
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background: linear-gradient(-90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
    mask: linear-gradient(20deg, transparent 50%, white);
    top: 0;
    left: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: 0;
}
.toastr.success {
    --color: #4caf50;
}
.toastr.error {
    --color: #f44336;
}
.toastr.info {
    --color: #2196f3;
}
.toastr.warning {
    --color: #ff9800;
}
.toastr-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.4;
}
.toastr-title {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--color);
}
.toastr-message {
    font-size: 16px;
    color: var(--mb-s-color);
}
.toastr-close-btn {
    position: absolute;
    top: 5px;
    left: 18px;
    cursor: pointer;
    color: var(--mb-s-color);
    font-size: 18px;
    background: none;
    border: none;
    font-weight: bold;
}
.toastr-progress-bar {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--color);
    border-radius: 2px;
    transform-origin: left;
}
.toastr-icon {
    width: 40px;
    height: 40px;
    background: #ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: -9px 0 20px rgba(89, 102, 122, 0.1);
    z-index: 1;
    color: var(--color);
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 21px;
}
.toastr-icon i {
    font-weight: 400;
}
.media-tab-content {
    display: none;
    width: 100%;
}
ul.media-tabs {
    display: flex;
    list-style: none;
    border: 1px solid var(--mb-border-color);
    width: max-content;
    margin-bottom: 20px;
    padding: 5px 6px;
    border-radius: 8px;
    gap: 0px;
}
ul.media-tabs li {
    padding: 0px 12px;
    border-radius: 6px;
    cursor: pointer;
}
ul.media-tabs li.active {
    background: #7274862b;
}
.company-logo-uploadlabel h6 {
    font-size: 15px;
    color: var(--mb-t-color);
    margin-bottom: 4px;
}
.company-logo-uploadlabel p {
    font-size: 13px;
    color: var(--mb-s-color);
}
.mb-msg-modal__header {
    padding: 40px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, transparent, #60ff931a, transparent);
    line-height: 1.8;
    position: relative;
    z-index: 1;
    color: var(--mb-s-color);
}
.mb-msg-modal__header h2 {
    color: var(--mb-t-color);
}
.mb-msg-modal__header:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #f6fdfa, transparent);
    border-radius: 0px 0px 50% 50%;
    z-index: -1;
    transform: scale(1.1);
}
.mb-msg-modal__header__icon {
    font-size: 75px;
}
.-modal-sucsess .mb-msg-modal__header__icon {
    color: #00d19a;
    width: 100px;
    height: 100px;
    background: #00d19a14;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #e4eaee61;
    margin-bottom: 10px;
    box-shadow: 0px 0px 0px 7px #e0faf08c, 0px 0px 0px 15px #e0faf04f;
}
.mb-msg-modal {
    font-family: var(--mb-font);
    width: max-content;
    width: 100%;
}
.mb-msg-modal__body {
    padding: 20px 30px;
    width: 100%;
    display: flex;
    align-items: revert;
    justify-content: space-between;
    flex-direction: column;
}
.mb-msg-modal__body > h2 {
    font-size: 20px;
    margin-bottom: 10px;
}
.how_start_building_items {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.how_start_building_item {
    display: flex;
    gap: 10px;
    border: 1px solid var(--mb-border-color);
    padding: 10px;
    border-radius: 16px;
    line-height: 1.3;
    color: var(--mb-s-color);
    width: 100%;
    cursor: pointer;
    transition: .3s all ease;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.how_start_building_item {
}
.how_start_building_item:hover {
    color: var(--mb-ui-color);
    box-shadow: #c5e5ff47 0px 2px 12px 0px;
    background: #f6f7f74d;
}
.how_start_building_item._building_ai_item {
    display: none;
}
._start_building_item_icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mb-light);
    border-radius: 14px;
    font-size: 27px;
    border: 1px solid #e5e7eb;
}
.how_start_building {
    width: 100%;
}
._start_building_item_text p {
    font-size: 14px;
    height: 40px;
}
._start_building_item_text {
    font-size: 14px;
}
.mb-msg-modal__summery {
    line-height: 1.5;
    font-size: 15px;
    margin-bottom: 20px;
    color: var(--mb-t-color);
    text-align: center;
    align-items: center;
}
.mb-msg-modal__summery h2 {
    font-size: 18px;
}
.mb-msg-modal__summery p {
    font-size: 17px;
}
p {
}
.Yc_Bulilder_Industry_Select.-AuthPage {
    margin-bottom: 20px;
}
formloader {
    width: 40px;
    height: 30px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}
formloader svg {
    width: 100%;
    height: 100%;
}
.custom-tooltip {
    position: fixed;
    font-family: var(--mb-font);
    background-color: var(--mb-t-color);
    color: #fff;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 999899999999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lang-switch > .lang-btn {
    border: 0;
    font-family: var(--mb-font);
    padding: 0px 9px;
    min-width: 60px;
    border-radius: 4px;
    border: 1px solid var(--mb-border-color);
    font-weight: 600;
    color: var(--mb-s-color);
    background: #fff;
    cursor: pointer;
}
.lang-switch > .lang-btn.active {
    color: #fff;
    border-color: var(--mb-ui-color);
    background: var(--mb-ui-color);
}
.tooltip-alert {
    position: absolute;
    background: var(--mb-t-color);
    color: #dfdfdf;
    padding: 15px 16px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
    font-family: var(--mb-font);
}
.tooltip-alert button {
    border: 0;
    background: var(--mb-ui-color);
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-family: var(--mb-font);
}
.tooltip-alert::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 10px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--mb-t-color) transparent transparent transparent;
}
.tooltip-alert.tooltip-bottom::after {
    bottom: inherit;
    top: -12px;
    border-color: transparent transparent var(--mb-t-color) transparent;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
span.char-count {
    color: var(--mb-s-color);
}
.fx-flex-fields {
    display: flex;
    align-items: center;
    width: auto;
}
.fx-flex-fields > * {
    flex: 1;
}
.mb-field-image-preview-box {
    --w: 137px;
    width: var(--w);
    padding: 0;
    overflow: hidden;
    position: relative;
    height: var(--w);
    border: 1px solid var(--mb-border-color);
    border-radius: 8px;
}
.mb-field-image-preview-box img {
}
.-image-preview-box-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: var(--bg);
    z-index: -1;
    top: 0;
    left: 0;
    background-size: 100%;
}
.-image-preview-box-bg:after {
    content: "";
    display: block;
    width: 100%;
}
.custom-image-uploader {
    position: relative;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.custom-image-uploader.dragover {
    background: #f0f8ff;
}
.upload-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.upload-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.mb-uploader-image-item {
    position: relative;
    width: 160px;
    height: 130px;
    border: 1px solid var(--mb-border-color);
    overflow: hidden;
    border-radius: 10px;
    background: var(--mb-bg);
    z-index: 1;
    transition: .3s all ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: #dbdce700 0 0 0 1px, 0 15px 26px -14px #09234012, 0 4px 2px -3px #09234012;
}
.add-more-btn.br-upload-btn.mb-uploader-image-item {
    font-size: 21px;
    color: var(--mb-s-color);
    cursor: pointer;
}
.mb-uploader-image-item:hover button.remove-image {
    opacity: 1;
}
.mb-uploader-image-item img {
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    width: auto;
}
.primary-label {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #ff5722;
    color: white;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
    z-index: 10;
}
.remove-image, .remove-single-image {
    transition: .3s all ease;
    position: absolute;
    top: 5px;
    right: 5px;
    background: #092340b3;
    color: white;
    border: none;
    font-size: 14px;
    width: 22px;
    cursor: pointer;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    opacity: 0;
}
button.remove-image {}
button.remove-image:hover {
    background: var(--error-color);
    transform: scale(1.1);
}
.single-image-preview {
    text-align: center;
    display: none;
    max-width: 110px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.single-image-preview img {
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    max-height: 100%;
}
.single-image-preview .remove-single-image {
    width: 30px;
    height: 30px;
}
.custom-image-uploader:hover button.remove-single-image {
    opacity: 1;
}
.mb-uploader-image-item-spinner .loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mb-ui-color);
    border-top: 2px solid #f1f1f1cf;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.mb-uploader-image-item-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    background: #00000087;
}
button.set-primary {
    position: absolute;
    z-index: 9;
    bottom: 10px;
    left: 30px;
    background: red;
    border-radius: 4px;
    padding: 4px 10px;
    display: none;
}
octy_sideover_inner {
    background: #fff;
    min-width: 500px;
    max-width: 550px;
    border-radius: 20px;
    margin: 10px;
    scrollbar-width: none;
    position: relative;
    overflow: hidden;
}
.popup_close {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 0;
    font-size: 17px;
    color: var(--mb-s-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mb-light);
}
.length-indicator {
    background: linear-gradient(to right, #d14c4c 0%, #f06818 18%, #fff 19%, #fff 19%, #f16b17 20%, #f1a104 38%, #fff 39%, #fff 39%, #f1a404 40%, #d9b507 58%, #fff 59%, #fff 59%, #d4b509 60%, #7bb02c 78%, #fff 79%, #fff 79%, #76ae2e 80%, #2da24c 100%);
    width: 180px;
    height: 8px;
    position: relative;
    border-radius: 25px;
    overflow: hidden;
}
.length-indicator span {
    position: absolute;
    z-index: 11;
    border-radius: 0 2px 2px 0;
    background: var(--mb-border-color);
    height: 100%;
    width: 100%;
}
.fx-Services-single-content .length-indicator {
    display: none;
}
.-YC-SingleGroup-Title {
}
-YC-SingleGroup-Item-v1.active {
    box-shadow: 0 0 #0000, 0 0 #0000, 0px 5px 40px -10px #ebf3fd;
    border-color: var(--uicolor);
}
.-YC-SingleGroup-Item-v1 {
    display: block;
    border-radius: 10px;
    background: #fff;
    transition: 180ms all ease;
    border: 1px solid var(--mb-border-color);
    width: 100%;
    padding: 16px;
}
.-YC-SingleGroup-Title {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    flex-wrap: wrap;
    border-radius: 20px;
}
.-YC-SingleGroup-Item-v1.active .-YC-SingleGroup-Title {
    color: var(--mb-ui-color);
    padding-bottom: 20px;
}
.-YC-SingleGroup-Title > h2 {
    color: var(--mb-t-color);
    font-weight: 700;
    font-size: 18px;
    transition: 180ms all ease;
    line-height: 1.5;
}
.-YC-SingleGroup-Title > h2 p {
    font-size: 16px;
    font-weight: 400;
}
.-YC-SingleGroup-Item-v1.active .-YC-SingleGroup-Title > h2 {
    color: var(--uicolor);
}
.-YC-SingleGroup-Title > i {
    font-size: 23px;
    transition: 180ms all ease;
    color: var(--secondarytext);
    font-weight: 400;
}
.-YC-SingleGroup-Title:hover > h2, .-YC-SingleGroup-Title:hover > i {
    color: var(--mb-ui-color);
}
.-YC-SingleGroup-Item-v1.active .-YC-SingleGroup-Title > i {
    transform: rotate(45deg);
    color: var(--uicolor);
}
.-SingleGroup-Content-Row-v1 {
    height: 0;
    --pin-height: auto;
    overflow: hidden;
    transition: 180ms all ease;
}
.-YC-SingleGroup-Item-v1.active .-SingleGroup-Content-Row-v1 {
    display: block;
    height: var(--pin-height);
}
.ghost-button {
    color: var(--mb-s-color);
    padding: 4px 28px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px #122b690a, 0 1px 2px #122b6914, 0 0 0 1px #122b6914;
    border: 1px solid transparent;
    background: #fff;
    font-family: var(--mb-font);
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mb-flex-inputs {
    display: flex;
    align-items: center;
    width: 100%;
}
.mb-flex-inputs > * {
    flex: 1;
}
.mb-msg-modal__header__text {
    text-align: center;
}
.mb_node_octy_ask {
    width: 20px;
    background: var(--mb-t-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
}
.mb-builder-edit-popup {
    position: fixed;
    top: 60px;
    max-width: 320px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;
    background: var(--mb-bg);
    border-radius: 8px;
    box-shadow: 0 12px 32px -12px #00000047;
    overflow: hidden;
    font-family: var(--mb-font);
    z-index: 999999999;
}
.mb-builder-edit-popup.mb-image-edit-popup {
    max-width: 260px;
    min-width: auto;
}
.Text_format_Item, .slider-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mb-font);
    color: #ccc;
    gap: 20px;
    margin-bottom: 10px;
}
.Text_format_Item.dynamic-link-input-container {
    flex-direction: column;
    gap: 6px;
}
.Text_format_Item input, .Text_format_Item select {
    height: 28px;
    border: 0;
    padding: 0px 10px;
    width: 110px;
    border-radius: 5px;
    color: var(--mb-s-color);
    background: var(--mb-light);
    flex: 1;
    width: 100%;
    font-family: var(--mb-font);
}
.Text_format_Item select.unit-type-select {
    padding: 0;
    background: #3a3a3c;
    border-radius: 0;
    padding-right: 1em;
    {
        display: none;
    }
    ; -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: max-content;
    width: 61px;
    padding-left: 0;
}
.mb-look-editor-popup-layers-head {
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: space-between;
    margin-bottom: 10px;
}
.Add_bg_layer {
    position: relative;
}
.Add_bg_layer.opened ul {
    display: block;
}
.Add_bg_layer span {
    outline: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    padding: 4px;
    background: linear-gradient(180deg, #444444 0%, #333333 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    color: #cbcbcb;
    cursor: pointer;
}
.Add_bg_layer ul {
    left: 0;
    width: 130px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 5;
    list-style: none;
    position: absolute;
    top: calc(100% + 3px);
    color: #fff;
    min-width: 160px;
    flex-direction: column;
    align-items: flex-start;
    1f; border: 1px solid #333;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .25), 0px 1px 2px rgba(20, 20, 20, .28);
    background: #1f1f1f;
    padding: 10px 20px;
    border-radius: 6px;
    display: none;
}
.Add_bg_layer ul li {
    width: 100%;
    cursor: pointer;
    color: #CBCBCB;
    display: flex;
    align-items: center;
    gap: 10px;
}
.additional-layer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    background: var(--mb-bg);
    color: var(--mb-s-color);
}
.additional-layer-head-start {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 5px;
}
.additional-layer-head-end.layer-control {
    display: flex;
    align-items: center;
    gap: 8px;
}
.additional-layers-container {
    display: flex;
    flex-direction: column;
    width: 290px;
    margin: 0 auto;
    padding: 6px;
    gap: 4px;
    border-radius: 8px;
    background: var(--mb-light);
}
.additional-layer {
    overflow: hidden;
}
.additional-layer-body {
    display: none;
    padding: 6px;
    gap: 6px;
    margin-top: 1px;
    border-radius: 0px 0px 4px 4px;
    background: var(--mb-bg);
}
.mb-builder-edit-popup-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: .5625rem .75rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mb-t-color);
    height: 38px;
    margin-bottom: 0;
    font-size: 14px;
    justify-content: space-between;
    border-bottom: var(--mb-border-color);
    background: var(--mb-light);
}
.mb-popup-body {
    padding: 16px 16px;
    max-height: 480px;
    overflow: auto;
    scrollbar-width: none;
    background: var(--mb-bg);
    color: var(--mb-s-color);
}
.menu__orientation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-block: 15px; gap: 15px;
}
.menu__angle-picker {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #8a939d;
    height: 37px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu__angle-picker--center-dot {
    content: "";
    aspect-ratio: 1;
    border-radius: 50%;
    height: 3px;
    background-color: currentColor;
}
.menu__angle-picker--rotator {
    --_rotation: 0deg;
    rotate: var(--_rotation);
    position: absolute;
    top: 0%;
    left: 50%;
    height: 50%;
    width: 1px !important;
    background-color: #b6b5b5;
    translate: -50% 0%;
    transform-origin: center bottom;
}
.menu__angle-picker--rotator::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    translate: -50% -50%;
    background-color: #ccc;
    height: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
}
.mb-builder-edit-popup.mb-look-editor-popup {
}
.mb-look-editor-section {
    border-radius: 6px;
    color: var(--mb-s-color);
    padding-bottom: 10px;
}
.mb-look-editor-section h4 {
    margin-top: 0;
    margin-bottom: 0px;
    font-size: 13px;
    padding-bottom: 4px;
}
.mb-look-editor-popup input[type="number"], .mb-look-editor-popup input[type="text"], .mb-look-editor-popup select {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #dddddd00 !important;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.9em;
    text-align: center;
    height: 28px;
    background: #313133;
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding-left: 8px;
    color: #fff;
}
.padding-controls, .radius-controls, .shadow-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 8px;
    align-items: center;
    background: #292929;
    border-radius: 4px;
    box-shadow: 0px 1px 0px 0px inset rgba(255, 255, 255, .1);
    padding: 10px;
}
.padding-field, .radius-field, .shadow-field {
    display: flex;
    flex-direction: column;
    min-width: 40px;
}
.padding-link, .radius-link {
    grid-column: 1 / -1;
    text-align: center;
}
.padding-link i, .radius-link i {
    cursor: pointer;
    font-size: 1.2em;
    color: #ccc;
    transition: color 0.2s ease;
}
.padding-link i.active, .radius-link i.active {
    color: #ededed;
}
.padding-controls {
    grid-template-areas: ". top ." "left link right" ". bottom .";
    grid-template-columns: 1fr 1fr 1fr;
}
.padding-controls-wrap {
    display: flex;
    flex-direction: column;
    width: 278px;
    border: 1px solid var(--Neutral-Neutral700, #333333);
    background: var(--Neutral-Neutral850, #1a1a1a);
    padding: 6px;
    border-radius: 8px;
    margin: 0 auto;
}
.padding-field:nth-child(1) {
    grid-area: top;
}
.padding-field:nth-child(3) {
    grid-area: left;
    min-width: 50px;
}
.padding-field:nth-child(4) {
    grid-area: right;
}
.padding-field:nth-child(5) {
    grid-area: bottom;
}
.padding-link {
    grid-area: link;
}
.radius-controls {
    grid-template-areas: "tl . tr" ". link ." "bl . br";
    grid-template-columns: 1fr max-content 1fr;
}
.radius-field:nth-child(1) {
    grid-area: tl;
}
.radius-field:nth-child(3) {
    grid-area: tr;
}
.radius-field:nth-child(4) {
    grid-area: br;
}
.radius-field:nth-child(5) {
    grid-area: bl;
}
.radius-link {
    grid-area: link;
}
.border-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.border-field {
    flex: 1;
}
.border-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: #555;
    margin-top: 10px;
}
.shadow-inset-field {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}
.shadow-inset-field label {
    margin-bottom: 0;
}
.alignment-buttons button, .heading-buttons button, .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
    display: flex !important;
    min-width: max-content;
    cursor: pointer !important;
    flex: 1;
    height: 32px !important;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-right: 1px solid var(--mb-border-color) !important;
    outline: none;
    background-color: rgba(0, 0, 0, 0) !important;
    color: var(--mb-s-color);
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg {
    width: 16px;
    stroke: #cbcbcb;
}
.ql-snow .ql-stroke {
    stroke: var(--mb-s-color) !important;
}
svg {
}
button.text-align-btn.active {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .4) inset;
    background: #0003 !important;
}
button.change-heading.active {
    box-shadow: inset 0px 0px 10px #6c6a6a1c;
}
.alignment-buttons button:last-child, .heading-buttons button:last-child {
    border: 0
}
.alignment-buttons, .heading-buttons, .ql-formats {
    display: flex;
    height: 32px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mb-border-color);
}
.alignment-buttons {
    width: 100%;
}
.heading-buttons {
    margin-bottom: 10px;
}
.Text_format_Item-title {
    width: 270px;
    gap: 20px;
    color: var(--mb-s-color);
    font-size: 17px;
}
.Text_format_Item-body {
    width: 100%;
}
.ql-toolbar.ql-snow {
    border: 0 !important;
    padding: 0 !important;
    font-family: var(--mb-font) !important;
    margin-bottom: 10px;
}
span.ql-formats {
    margin: 0 !important;
}
.ql-container.ql-snow {
    border: 0 !important;
    font-family: var(--mb-font);
    font-size: 15px;
    direction: rtl;
    margin-bottom: 10px;
}
.ql-editor {
    max-height: 150px !important;
    min-height: 100px;
    background: var(--mb-light);
    scrollbar-width: none;
    text-align: right !important;
    overflow: hidden;
    border-radius: 14px;
}
.mb-builder-edit-popup-close {
    cursor: pointer;
}
.mb_node_octy_ask_wrapper {
    position: relative;
}
.mb_node_octy_ask_drobdowns {
    position: absolute;
    background: #ffff;
    color: var(--mb-s-color);
    width: 200px;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--mb-border-color);
    top: 30px;
    right: 0;
    display: none;
}
.mb_node_octy_ask_wrapper.active .mb_node_octy_ask_drobdowns {
    display: block;
}
.mb-opacity-slider-container {
    color: #fff;
}
.mb_ai_popup_expand_dropdown {
    position: relative;
    padding: 0px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.mb_ai_popup_actions_drobdown {
    position: absolute;
    background: var(--mb-bg);
    box-shadow: 0px 12px 40px -4px rgba(0, 0, 0, .14), 0px 0px 2px 0px rgba(0, 0, 0, .08);
    border: 1px solid #ffffff0a;
    border-radius: 16px;
    padding: 8px;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-color: auto;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.mb_ai_popup_actions_drobdown.active {
    display: flex !important;
}
.mb_ai_popup_actions_drobdown .aiTool {
    ol buttons */ color: white;
    border: none;
    padding: 2px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    text-align: right;
    transition: background-color 0.2s ease;
}
.mb_ai_popup_actions_drobdown .aiTool:hover {
    background-color: #6a4ace;
    color: #fff;
}
.mb_ai_popup_user_selected_text {
    color: var(--mb-s-color);
    border-radius: 9px;
    margin-bottom: 15px;
    font-size: 14px;
    white-space: normal;
    width: 100%;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    background: var(--mb-light);
    padding: 15px;
    font-weight: 600;
}
.mb_ai_popup_result_area {
}
.mb_ai_popup_result_right {
    color: #c0c0c0;
    font-size: 0.85em;
}
.mb_ai_popup_apply_btn:hover {
    background-color: #218838;
}
.mb_ai_popup_header {
    height: 45px;
    align-items: center;
    justify-content: space-between;
    color: var(--mb-s-color);
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--mb-border-color);
    padding: 14px 16px;
    cursor: grab;
}
.draggable-modal {
    background: var(--mb-bg);
    font-family: var(--mb-font);
    justify-content: space-between;
    max-width: 440px;
    border-radius: 12px;
    width: 500px;
    box-shadow: 0 8px 24px 0 rgb(0 0 0 / 8%), 0 1px 3px #00000014;
    border: .5px solid #4f596633;
}
.mb_ai_popup_title_bar {
    display: flex;
    gap: 10px;
}
.mb_ai_popup_content {
    padding: 16px;
    cursor: auto;
}
.mb_ai_popup_result_Content {
    color: var(--mb-t-color);
    font-size: 15px;
    font-weight: 400;
}
.AiMagic_List {
}
.AiMagic_List-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px;
    height: 35px;
    color: var(--mb-s-color);
    border-radius: 7px;
}
.AiMagic_List-item:not(.divider):hover {
    background: var(--mb-light);
}
.AiMagic_List-item.title {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    cursor: default;
    color: #757575;
}
.AiMagic_List-item.divider .line {
    height: 1px;
    background-color: #333;
    width: 100%;
}
.left-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.AiMagic_List-item-icon {
    font-weight: 400;
    font-size: 16px;
}
.AiMagic_List {
    position: absolute;
    width: 248px;
    background: var(--mb-bg);
    display: flex;
    flex-direction: column;
    top: 100%;
    right: -8px;
    border-radius: 12px;
    padding: 16px 8px;
    z-index: 999999999;
    transform: translate(0px, 10px);
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 8px 24px 0 rgb(0 0 0 / 8%), 0 0 1px 0 rgb(0 0 0 / 8%);
    border: 1px solid var(--mb-border-color);
}
button.AiMagicButton.active .AiMagic_List {
    opacity: 1;
    transition: .3s all ease;
    transform: translate(0px, 2px);
    visibility: visible;
}
.mb_ai_popup_result_buttons {
    display: flex;
    gap: 9px;
    padding-inline-start: 40px;
}
.mb_ai_popup_result_buttons > button {
    width: 26px;
    height: 26px;
    transition: .3s all ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    box-shadow: 0px 0px 0px transparent;
    border: 0;
    color: var(--mb-s-color);
    font-size: 16px;
    cursor: pointer;
}
.mb_ai_popup_result_buttons > button i {
    font-weight: 400;
}
.mb_ai_popup_result_buttons > button:hover {
    background: var(--mb-light);
    color: var(--mb-t-color);
}
textarea.ai_edit_area {
    max-height: 90px !important;
    min-height: 80px;
    background: #0c0c0c;
    scrollbar-width: none;
    text-align: right !important;
    box-shadow: 0px 0px 6px 0px #000 inset, 0px 0px 1px 1px rgba(0, 0, 0, 0.1019607843) inset;
    border: 1px solid var(--mb-ui-color);
    overflow: hidden;
    border-radius: 2px;
    resize: none;
    color: #fff;
    font-family: var(--mb-font);
    padding: 10p;
}
button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    text-transform: none;
    outline: 0;
    border: 0;
    box-shadow: 0px 0px 0px transparent;
    cursor: pointer;
}
#seo_status_indicator {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    margin-left: 10px;
    font-size: 18px;
    position: relative;
}
.seo_indicator.green {
    background-color: #4CAF50;
    color: white;
}
.seo_indicator.yellow {
    background-color: #FFC107;
    color: black;
}
.seo_indicator.red {
    background-color: #F44336;
    color: white;
}
.seo_issues_dropdown {
    position: absolute;
    top: 40px;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    padding: 10px;
    width: 300px;
    border-radius: 6px;
}
.seo_issues_dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.seo_issues_dropdown li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}
.radio-icon-group {
    display: flex;
    gap: 4px;
}
.unit-input-wrapper {
    display: flex;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    max-width: 200px;
    background: #313133;
    border-radius: 5px;
    border: 1px solid #3a3a3c;
}
.unit-number-input {
    border: none;
    padding: 6px 10px;
    width: 70%;
    outline: none;
}
.unit-select {
    border: none;
    padding: 6px !important;
    background: #f1f1f1;
    outline: none;
    width: 58px !important;
    cursor: pointer;
}
.custom-radio-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #313133;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    text-align: center;
    width: 26px;
    height: 26px;
    color: #eee;
}
.custom-radio-icon .radio-icon {
    font-size: 12px;
}
.custom-radio-icon input[type="radio"] {
    width: auto;
    height: auto;
}
.custom-radio-icon.active {
    border-color: aliceblue;
    background-color: Var(--mb-ui-color);
    color: #fff;
}
.radio-label {
    font-size: 0;
}
.unit-number-input::-webkit-inner-spin-button, .unit-number-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.unit-number-input[type=number] {
    -moz-appearance: textfield;
    text-align: center;
}
.mb_ai_popup_result_chat {
    border-top: 1px solid var(--mb-border-color);
    padding: 14px 16px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mb_ai_popup_result_chat {
}
.mb_ai_popup_result_chat_area {
    flex: 1;
}
.mb_ai_popup_result_chat_area input {
    flex: 1;
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--mb-t-color);
    resize: none;
    display: flex;
    align-items: center;
    height: 32px;
    line-height: 32px;
    font-family: var(--mb-font);
}
button.mb_ai_popup_result_chat_send {
    color: var(--mb-ui-color);
    font-size: 18px;
}
.image-picker-modal {
    max-width: 400px;
    position: fixed;
    top: 50px;
    right: 90px;
    background: #000;
    border-radius: 20px;
    max-height: calc(100vh - 90px);
    display: flex;
    flex-wrap: wrap;
    overflow: scroll;
}
.image-picker-modal > img {
    width: 180px;
}
.-fix-builder-sidbar.-rightsidabar {
    display: flex;
}
.-fix-dminbar-tootls-pannel {
    width: 320px;
    background: #202020;
    position: fixed;
    top: 36px;
    right: 60px;
    height: calc(100vh - 56px);
    z-index: 9;
    display: none;
}
.preview-container-image {
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 9px;
    background: var(--mb-light);
    position: relative;
    border: 2px solid #ffffff08;
    margin-bottom: 10px;
}
.preview-container-image img {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.Change_Current_image {
    font-size: 15px;
    cursor: pointer;
    transition: 280ms all ease;
    position: relative;
    border-radius: 5px;
    font-family: 'Cairo';
    border: 0;
    display: flex;
    background: linear-gradient(100deg, var(--mb-ui-color), #887dfd);
    padding: 3px 28px;
    width: 100%;
    color: #fff;
    align-items: center;
    gap: 7px;
    justify-content: center;
}
.fill-options {
    display: flex;
    background-color: var(--mb-bg);
    border-radius: 4px;
    box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, .2), inset 0 1px 0px rgba(255, 255, 255, 0.1019607843);
    margin: 15px 0px;
}
button.fill-option-button {
    flex: 1;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0);
    border-right-color: var(--mb-border-color);
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    color: var(--mb-s-color);
    line-height: 1;
    display: flex;
    font-size: 14px;
    width: 66px;
    align-items: center;
    justify-content: center;
    padding: 6.5px 10px;
}
button.fill-option-button.active {
    background-color: var(--mb-light);
    border: 1px solid rgb(255 255 255 / 20%);
}
.image-picker-sidebar {
    max-width: 310px;
    position: fixed;
    top: 50px;
    right: 380px;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;
    background: #292929;
    border-radius: 12px;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .32), 0 1px 3px #00000014;
    overflow: hidden;
    font-family: var(--mb-font);
}
.image-grid.library-grid {
    display: flex;
    flex-wrap: wrap;
}
.image-grid.library-grid img {
    width: 50%;
}
@keyframes slideUp {
    from {
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.mb-builder-edit-popup {
    animation: slideUp 0.1s ease-out;
}
.mb_element_overlay_selected {
    box-sizing: border-box;
    pointer-events: none;
}
.mb_element_overlay_selected .mb_resizer {
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: #fff;
    border: 1px solid var(--mb-ui-color);
    z-index: 99999999;
    pointer-events: auto;
    border-radius: 5px;
    box-shadow: 0 0 4px 1px rgba(57, 76, 96, .15), 0 0 0 1px rgb(43 59 74 / 0%);
}
.mb_element_overlay_selected .mb_resizer:hover {
    background: var(--mb-ui-color);
}
.mb_element_overlay_selected .mb_resizer.top-left {
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}
.mb_element_overlay_selected .mb_resizer.top-right {
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}
.mb_element_overlay_selected .mb_resizer.bottom-left {
    bottom: -6px;
    left: -6px;
    cursor: nesw-resize;
}
.mb_element_overlay_selected .mb_resizer.bottom-right {
    bottom: -6px;
    right: -6px;
    cursor: nwse-resize;
}
.mb_element_overlay_selected .mb_resizer.top {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
    height: 8px;
    width: 18px;
}
.mb_element_overlay_selected .mb_resizer.right {
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
    height: 20px;
    width: 7px;
}
.mb_element_overlay_selected .mb_resizer.bottom {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
    height: 8px;
    width: 18px;
}
.mb_element_overlay_selected .mb_resizer.left {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
    height: 20px;
    width: 7px;
}
.mb_node_hierarchy {
}
.mb_drop_indicator {
    position: absolute;
    background-color: #00c864;
    z-index: 999999999;
    pointer-events: none;
    display: none;
}
.mb_drop_indicator.vertical {
    width: 3px;
    height: 100%;
}
.mb_drop_indicator.horizontal {
    width: 100%;
    height: 3px;
}
.mb_element_overlay_selected {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible;
    outline-width: 2px !important;
}
.mb_rotator {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 1px solid #7a5af8;
    border-radius: 50%;
    bottom: -37px;
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
    z-index: 99999999;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mb_dimensions_display {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 999999999;
    pointer-events: none;
    top: -25px;
    font-family: var(--mb-font);
    left: 50%;
    transform: translateX(-50%);
    display: none;
}
.mb_grid_guide_x, .mb_grid_guide_y {
    position: absolute;
    background-color: rgba(0, 200, 100, 0.5);
    z-index: 999999998;
    pointer-events: none;
    display: none;
}
.mb_grid_guide_x {
    height: 1px;
    width: 100%;
}
.mb_grid_guide_y {
    width: 1px;
    height: 100%;
}
.theme-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    border-bottom: 1px solid #56565f52;
    user-select: none;
    color: #eee;
}
.theme-panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #eee;
}
.close-theme-panel-tm {
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: bold;
    color: #eee;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
}
.close-theme-panel-tm:hover {
    color: #333;
}
.theme-panel-body {
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
    color: var(--mb-t-color);
}
.theme-list-tm {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    margin: 0px 0px;
    padding: 6px;
    gap: 2px;
    border-radius: 10px;
    border: 1px solid var(--mb-border-color);
    background: var(--mb-light);
}
.theme-item {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    color: var(--mb-t-color);
    border-radius: 6px;
}
.theme-item.active, .theme-item:hover {
    background: var(--mb-bg);
    color: var(--mb-t-color);
}
.theme-item.active .theme-item-name {
}
.theme-item-name {
    font-size: 13px;
    font-weight: 500;
    min-width: max-content;
}
.theme-item-colors-preview {
    height: 15px;
    width: 41%;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    min-height: 24px;
}
.theme-item-colors-preview span {
    flex-grow: 1;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .1215686275);
    flex: 1;
    width: 100%;
}
.theme-editor-tm {
    padding: 0px;
}
.theme-editor-inner-tm h3 {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}
.colors-grid {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    margin: 0px 0px;
    padding: 6px;
    gap: 4px;
    border: 1px solid var(--mb-border-color);
    background: var(--mb-light);
    border-radius: 8px;
    column-count: 2;
}
.theme-color-editor {
    flex: 1;
    max-width: max-content;
    min-width: 100%;
    background: var(--mb-bg);
    display: flex;
    border-radius: 4px;
    gap: 10px;
    align-items: center;
    padding: 4px 6px;
    font-weight: 800;
}
.theme-color-editor label {
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 400;
    display: block;
    flex: 1;
    cursor: pointer;
    letter-spacing: 0.4px;
}
.color-input-wrapper {
    display: flex;
    align-items: center;
    width: 24px;
    justify-content: space-between;
}
.theme-color-editor input[type="color"] {
    width: 100%;
    height: 22px;
    padding: 0;
    border: 1px solid var(--mb-border-color);
    border-radius: 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}
.theme-color-editor input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.theme-color-editor input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}
.theme-color-editor input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 20px;
}
.color-preview {
    display: none;
}
.theme-name-editor {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.theme-name-editor label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    min-width: max-content;
}
.theme-name-editor input[type="text"] {
    width: 100%;
    padding: 0px 12px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: var(--mb-font);
    background: #272728;
    border: 0;
    color: inherit;
}
.theme-name-editor input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
    outline: none;
}
.editor-button, .Editor_ThemeSettings_TM {
    padding: 5px 15px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    background: #fff;
    border: 1px solid var(--mb-border-color);
    box-shadow: #dbdce700 0 0 0 1px, 0 15px 26px -14px #09234012, 0 4px 2px -3px #09234012;
}
.editor-button:hover, .Editor_ThemeSettings_TM:hover {
    border-color: #b9b9b9;
}
.editor-button.primary {
    background-color: var(--mb-ui-color);
    color: white;
    border-color: var(--mb-ui-color);
}
.editor-button.primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.save-custom-theme-button-tm {
    display: block;
    width: 100%;
    margin-top: 10px;
}
.theme-panel-body::-webkit-scrollbar {
    width: 8px;
}
.theme-panel-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.theme-panel-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}
.theme-panel-body::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}
.BUilderloader {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset, 0 5px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.BUilderloader:before, .BUilderloader:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 45%;
    top: -40%;
    background-color: #2e2e2e;
    animation: wave 5s linear infinite;
}
.BUilderloader:before {
    border-radius: 30%;
    background: rgba(122, 122, 122, 0.4);
    animation: wave 5s linear infinite;
}
@keyframes wave {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.mb_overlay_toolbar-right {
    display: flex;
    align-items: center;
    border-radius: 3px;
    gap: 0;
    background: #fff;
    box-shadow: 0 8px 24px 0 rgb(0 0 0 / 8%), 0 0 1px 0 rgb(0 0 0 / 8%);
    border: 1px solid var(--mb-border-color);
    padding: 10px 5px;
    border-radius: 8px;
}
.IconPickerPrview {
    background: #2c2d2f;
    width: var(--www);
    --www: 70px;
    height: var(--www);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 36px;
}
.mb-editor-side-panel {
    position: fixed;
    backdrop-filter: blur(18px) saturate(1.8);
    top: 64px;
    right: -420px;
    width: 400px;
    height: calc(100vh - 76px);
    z-index: 10005;
    transition: right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    font-family: var(--mb-font);
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--mb-border-color);
    Backdrop Filter: blur(18px) saturate(1.8);
    Backdrop Filter: blur(18px) saturate(1.8);
    Backdrop Filter: blur(18px) saturate(1.8);
    Backdrop Filter: blur(18px) saturate(1.8);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgb(0 0 0 / 14%);
}
.mb-editor-side-panel.open {
    right: 65px;
}
.mb-editor-side-panel .side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    user-select: none;
    font-size: 14px;
    background: var(--mb-light);
}
.mb-editor-side-panel .side-panel-header h2 {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
}
.mb-editor-side-panel .close-side-panel {
    width: 27px;
    height: 27px;
    border-radius: 27px;
    font-size: 17px;
    font-weight: bold;
    color: var(--mb-s-color);
    background: var(--mb-light);
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s;
}
.mb-editor-side-panel .close-side-panel:hover {
    color: #333;
}
.mb-editor-side-panel .side-panel-body {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    flex-grow: 1;
    scrollbar-width: none;
    color: var(--mb-s-color);
    padding: 15px;
}
.mb-editor-side-panel .side-panel-content-wrapper {
    height: 100%;
}
.theme-list-section, .theme-editor-section {
    margin-bottom: 25px;
}
.seo-issues-toolbar {
    margin-bottom: 15px;
}
.seo-issue-group {
}
h4.seo-group-title {
    border-bottom: 1px solid #56565f33;
    padding-bottom: 9px;
    margin-bottom: 10px;
    font-weight: 400;
}
.seo-issue-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 8px;
    margin-bottom: 7px;
    color: var(--mb-t-color);
}
span.seo-issue-message {
    gap: 8px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 15px;
}
span.seo-issue-message i {
}
span.seo-issue-icon {
    color: #ffa939;
}
.-fix-dminbar-tootls ul li repon {
    position: absolute;
    left: -10px;
    top: 0;
    background: #ffe6bf;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    color: #b1823a;
    line-height: 1;
    font-weight: 800;
}
.mb_margin_handle {
    position: absolute;
    pointer-events: all;
    background: rgb(249 172 80 / 52%);
    z-index: 10000000;
    box-sizing: border-box;
    border-radius: 20px;
}
.mb_margin_handle.margin-top {
    height: 4px;
    width: 20px;
    top: -12px;
    left: 12px;
    cursor: ns-resize;
}
.mb_margin_handle.margin-bottom {
    height: 4px;
    width: 20px;
    bottom: -12px;
    left: 12px;
    cursor: ns-resize;
}
.mb_margin_handle.margin-left {
    width: 4px;
    height: 17px;
    left: -15px;
    top: calc(50% - 8px);
    cursor: ew-resize;
}
.mb_margin_handle.margin-right {
    right: -12px;
    cursor: ew-resize;
    width: 4px;
    height: 17px;
    top: calc(50% - 8px);
}
div#mb-template-picker-modal {
    position: fixed;
}
.mb-editor-fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c273080;
    z-index: 99999999;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.mb-editor-fullscreen-modal .modal-content-container {
    background-color: var(--mb-bg);
    border-radius: 0;
    width: 90%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
    font-family: var(--mb-font);
    border-radius: 18px;
}
.mb-editor-fullscreen-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
}
.mb-editor-fullscreen-modal .modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
}
.mb-editor-fullscreen-modal .modal-close {
    border: none;
    font-weight: bold;
    color: var(--mb-s-color);
    cursor: pointer;
    padding: 0;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mb-light);
    border-radius: 6px;
}
.mb-editor-fullscreen-modal .modal-close:hover {
    color: #e2e8f0;
}
.mb-editor-fullscreen-modal .modal-content-area {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    padding: 0px 0px 15px 25px;
}
.mb-editor-fullscreen-modal .modal-sidebar {
    min-width: 280px;
    max-width: 280px;
    padding: 0px 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    color: var(--mb-t-color);
}
.mb-editor-fullscreen-modal .sidebar-search {
    margin-bottom: 20px;
}
.mb-editor-fullscreen-modal .sidebar-search input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #1a202c;
    border: 1px solid #4a5568;
    border-radius: 4px;
    box-sizing: border-box;
    color: #e2e8f0;
    font-family: var(--mb-font);
}
.mb-editor-fullscreen-modal .sidebar-search input[type="text"]::placeholder {
    color: #a0aec0;
}
.mb-editor-fullscreen-modal .modal-sidebar h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #a0aec0;
    padding-bottom: 5px;
    border-bottom: 1px solid #4a5568;
}
.mb-editor-fullscreen-modal .category-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mb-editor-fullscreen-modal .category-filter-list li {
    padding: 6px 28px;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #cbd5e0;
    transition: background-color 0.2s, color 0.2s;
}
.mb-editor-fullscreen-modal .category-filter-list li:hover {
    background-color: #38455b;
}
.mb-editor-fullscreen-modal .category-filter-list li.active {
    background-color: var(--mb-ui-color);
    color: #ffffff;
    font-weight: bold;
}
.mb-editor-fullscreen-modal .modal-main-content {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    width: 100%;
}
.modal-main-content.slider-preview-or-edit-area {
}
.mb-editor-fullscreen-modal .templates-grid-fullscreen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 25px;
}
.template-item-card {
    transition: .3s all ease;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    margin-bottom: 5px;
    background: var(--mb-light);
    padding: 20px;
}
.template-item-card:hover {
    box-shadow: 0 0px 0px 2px #fff, 0 0px 0px 4px #6841eabd;
    transform: translateY(-3px);
    opacity: .8;
}
.template-preview-image img {
    width: 100%;
    display: block;
    min-height: 100%;
    object-position: top center;
}
.template-info {
    padding: 10px 0px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.template-info h4 {
    margin-top: 0;
    font-size: 17px;
    color: var(--mb-t-color);
}
.template-info p {
    font-size: 0.88em;
    color: var(--mb-s-color);
    margin-bottom: 0;
    line-height: 1.5;
    flex-grow: 1;
}
.mb-editor-fullscreen-modal .loading-templates {
    text-align: center;
    padding: 50px;
    font-size: 1.2em;
    color: #a0aec0;
}
.mb-editor-fullscreen-modal .loading-templates i {
    margin-right: 10px;
    font-size: 1.5em;
}
.mb_padding_handle {
    position: absolute;
    background-color: rgba(0, 123, 255, 0.6);
    border: 1px solid rgba(0, 100, 220, 0.8);
    z-index: 99999998;
    box-sizing: border-box;
    opacity: 0.7;
    pointer-events: all;
    transition: opacity 0.2s;
}
.mb_padding_handle:hover {
    opacity: 1;
}
.mb_padding_handle.padding-top {
    height: 6px;
    width: calc(100% - 12px);
    top: 3px;
    left: 6px;
    cursor: ns-resize;
}
.mb_padding_handle.padding-bottom {
    height: 6px;
    width: calc(100% - 12px);
    bottom: 3px;
    left: 6px;
    cursor: ns-resize;
}
.mb_padding_handle.padding-left {
    width: 6px;
    height: calc(100% - 12px);
    left: 3px;
    top: 6px;
    cursor: ew-resize;
}
.mb_padding_handle.padding-right {
    width: 6px;
    height: calc(100% - 12px);
    right: 3px;
    top: 6px;
    cursor: ew-resize;
}
.input-with-icon {
    display: flex;
    align-items: center;
}
span.mb-section-toolbar-drag-handle {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}
.-fix-builder-Logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    background: #6841ea;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
}
p.rich-preview-snippet {
}
.slides-item-list {
}
.slide-list-item {
    display: flex;
    align-items: center;
    padding: 5px 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 8px;
    margin-bottom: 4px;
}
.slide-list-item:last-child {
    border-bottom: none;
}
.slide-list-item:hover {
    background-color: #6b53ff1c;
}
.slide-list-item.active {
    background-color: var(--mb-ui-color);
    color: white;
}
.slide-list-item.active .slide-list-item-title, .slide-list-item.active .rich-preview-snippet {
    color: white;
}
.drag-slide-list-item-handle {
    cursor: grab;
    padding: 5px 8px;
    color: #a0aec0;
}
.drag-slide-list-item-handle:active {
    cursor: grabbing;
}
.slide-list-item-preview-wrapper {
    flex-grow: 1;
    min-width: 0;
    padding: 0 5px;
}
.slide-list-item-rich-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 3px;
    height: 60px;
    overflow: hidden;
    background-color: #222938;
}
.rich-preview-image-wrapper, .rich-preview-image-placeholder {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
    background-color: #4a5568;
}
.rich-preview-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rich-preview-image-placeholder i {
    font-size: 24px;
    color: #718096;
}
.rich-preview-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    flex-grow: 1;
}
.slide-list-item-title-rich {
    display: block;
    font-size: 0.85em;
    font-weight: bold;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.rich-preview-snippet {
    font-size: 0.75em;
    color: var(--mb-s-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.delete-slide-from-list-btn {
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    padding: 5px;
    margin-left: 5px;
}
.delete-slide-from-list-btn:hover {
    color: #f56565;
}
.slide-list-sortable-placeholder {
    height: 70px;
    background-color: rgba(66, 153, 225, 0.2);
    border: 1px dashed #4299e1;
    margin: 5px 0;
    box-sizing: border-box;
}
.sidebar-tabs-nav {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
button.sidebar-tab-link {
    text-align: center;
    padding: 7px 12px;
    flex: 1;
    min-width: max-content;
    font-size: 15px;
    border-bottom: 2px solid transparent;
}
button.sidebar-tab-link.active {
    border-color: var(--mb-ui-color);
}
button.sidebar-tab-link:not(.active):hover {
    border-color: #434447;
}
.slide-editor-content-holder {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-main-content.slider-preview-or-edit-area {
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(45deg, var(--mb-light) 25%, transparent 25%), linear-gradient(-45deg, var(--mb-light) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--mb-light) 75%), linear-gradient(-45deg, transparent 75%, var(--mb-light) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    padding: 70px;
    width: 100%;
}
.swiper-container-editor-preview {
    width: 100%;
}
.mb-toggle-switch {
    position: relative;
    display: block;
}
.mb-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
.mb-toggle-switch input:checked + .slider {
    background-color: var(--mb-ui-color);
}
.mb-toggle-switch input:checked + .slider:before {
    transform: translateX(24px);
    background: #fff;
}
.mb-toggle-switch .slider.round {
    border-radius: 24px;
}
.slider-setting-item > div {
    display: flex;
    align-items: center;
    width: max-content;
}
.slider-setting-item label.mb-checkbox-label {
    margin-left: 8px;
    font-size: 0.85em;
    color: #cbd5e0;
}
.slider-setting-item-dependent {
    width: 100%;
    padding-left: 140px;
    box-sizing: border-box;
    margin-top: 8px;
}
.modal-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    padding-bottom: 10px;
    font-size: 17px;
}
.apply-slider-changes-btn {
    background: var(--mb-ui-color);
    padding: 0px 10px;
    border-radius: 5px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}
.slider-editor-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.-mb-slider-Editor-hover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    cursor: pointer;
}
.-mb-slider-Editor-hover svg {
    width: 150px;
}
.slide-list-sortable-placeholder {
    height: 70px;
    background-color: rgba(66, 153, 225, 0.2);
    border: 1px dashed #4299e1;
    margin: 5px 0;
    box-sizing: border-box;
    border-radius: 4px;
}
.drag-slide-list-item-handle {
    cursor: grab;
    padding: 5px 8px;
    color: #a0aec0;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.slide-list-item:hover .drag-slide-list-item-handle {
    opacity: 1;
}
.drag-slide-list-item-handle:active {
    cursor: grabbing;
}
.slide-list-item {
    display: flex;
    align-items: center;
}
.section-sortable-placeholder {
    height: 80px;
    background-color: rgba(66, 153, 225, 0.15);
    border: 2px dashed #4299e1;
    margin: 10px 0;
    box-sizing: border-box;
    border-radius: 6px;
}
.design-root-droppable-hover {
    outline: 2px dashed #28a745;
    outline-offset: -2px;
}
.mb_drop_indicator.horizontal {
    background-color: red;
    height: 80px;
    border-radius: 2px;
    position: absolute;
    z-index: 99999998;
    pointer-events: none;
    transition: all 0.1s linear;
}
.sections-grid-sidepanel.styled-scrollbar {
    columns: 2;
    column-gap: 5px;
    page-break-inside: avoid;
    margin-top: 10px;
}
ul.category-filter-list-sections.category-filter-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
ul.category-filter-list-sections.category-filter-list li {
    color: #afafaf;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .03em;
    cursor: pointer;
    border-radius: 3px;
    background: #444;
    border-radius: 3px;
    padding: 5px 16px;
    flex-grow: 1;
    text-align: center;
}
.section-drop-placeholder {
    background-color: rgba(66, 153, 225, 0.15);
    border: 2px dashed #4299e1;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    pointer-events: none;
}
.section-drop-placeholder.is-active {
    background-color: rgba(66, 153, 225, 0.3);
    border-color: #0d6efd;
    box-shadow: 0 0 15px rgba(66, 153, 225, 0.5);
}
.mb-radius-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: 2px solid #007bff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100000000;
    transition: transform 0.2s;
    pointer-events: all;
}
.mb-radius-handle:hover {
    transform: scale(1.3);
}
.mb-radius-handle[data-corner="tl"] {
    top: 10px;
    left: 10px;
}
.mb-radius-handle[data-corner="tr"] {
    top: 10px;
    right: 10px;
}
.mb-radius-handle[data-corner="bl"] {
    bottom: 10px;
    left: 10px;
}
.mb-radius-handle[data-corner="br"] {
    bottom: 10px;
    right: 10px;
}
#mb-inline-toolbar {
    background-color: #2d3748;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 4px;
    display: flex;
}
#mb-inline-toolbar .inline-toolbar-buttons {
    display: flex;
    gap: 2px;
}
#mb-inline-toolbar .inline-toolbar-btn {
    background-color: transparent;
    border: none;
    color: #cbd5e0;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
#mb-inline-toolbar .inline-toolbar-btn:hover {
    background-color: #4a5568;
}
#mb-inline-toolbar .inline-toolbar-btn.active {
    background-color: #4299e1;
    color: white;
}
#mb-inline-toolbar .separator {
    border-left: 1px solid #4a5568;
    margin: 4px 6px;
}
.global-styles-container {
    padding: 10px;
    color: #e2e8f0;
}
.g-styles-section h3 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f7fafc;
}
.g-styles-section h3 .fas {
    color: #90cdf4;
}
.mb-accordion .accordion-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.mb-accordion .accordion-header {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.07);
    border: none;
    padding: 0px 15px;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: #e2e8f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}
.mb-accordion .accordion-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.mb-accordion .accordion-header::after {
    content: '›';
    font-size: 20px;
    font-weight: bold;
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
}
.mb-accordion .accordion-item.is-open .accordion-header::after {
    transform: rotate(90deg);
}
.mb-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0 15px;
}
.mb-accordion .accordion-item.is-open .accordion-content {
    padding: 15px;
}
.style-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}
.style-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.style-control.full-width {
    grid-column: 1 / -1;
}
.style-control label {
    font-size: 12px;
    color: #a0aec0;
    margin-right: 2px;
}
.style-input {
    width: 100%;
    padding: 8px 10px;
    background-color: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 4px;
    color: #e2e8f0;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.style-input:focus {
    outline: none;
    border-color: #63b3ed;
    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.3);
}
input[type=number].style-input::-webkit-inner-spin-button, input[type=number].style-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number].style-input {
    -moz-appearance: textfield;
}
.section-item-card {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
    cursor: pointer;
    border: 2px solid var(--mb-border-color);
    transition: .3s all ease;
}
.section-item-card:hover {
    border-color: var(--mb-ui-color);
    z-index: 9;
}
.section-template-preview-image {
    height: 90px;
    overflow: hidden;
    width: 100%;
}
.section-template-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.section-template-info {
    display: none;
}
.drop-hover {
    background: red !important;
}
.mb-ai-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(23 29 34 / 40%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100005;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mb-ai-loader-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.ai-loader-box {
    background-color: var(--mb-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 36px;
    padding: 40px 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    color: var(--mb-t-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    font-family: var(--mb-font);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.mb-ai-loader-overlay.is-visible .ai-loader-box {
    transform: scale(1);
}
.loader-title {
    font-size: 17px;
    color: var(--mb-t-color);
    margin: 0 0 8px 0;
}
.loader-subtitle {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0 0 20px 0;
    min-height: 1.2em;
}
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.progress-bar-fill {
    width: 0%;
    height: 100%;
    background-image: linear-gradient(90deg, #df64ee, var(--mb-ui-color));
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.progress-percentage {
    font-size: 0.8rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.spinner {
    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
    width: 100px;
    height: 100px;
    animation: spinning82341 1.7s linear infinite;
    text-align: center;
    border-radius: 50px;
    filter: blur(1px);
    box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);
    margin: 20px;
}
.spinner {
}
.spinner1 {
    background-color: var(--mb-bg);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    filter: blur(10px);
}
@keyframes spinning82341 {
    to {
        transform: rotate(360deg);
    }
}
.ai-loader-box-spinner {
    position: relative;
}
.template-preview-image {
    border-radius: 15px;
    overflow: hidden;
    height: 293px;
    background: #fff;
}
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(40 40 40 / 60%);
    font-family: var(--mb-font);
    z-index: 100200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.slideshow-is-active .welcome-overlay {
    opacity: 1;
    visibility: visible;
}
.welcome-modal-box {
    background-color: var(--mb-bg);
    border-radius: 20px;
    width: 90%;
    max-width: 470px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.slideshow-is-active .welcome-modal-box {
    transform: scale(1);
}
.slide-image-container {
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.slide-image-container img {
    width: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover;
}
.slide-content-container {
    padding: 30px 30px;
    text-align: center;
}
.slide-title {
    font-size: 25px;
    font-weight: 500;
    color: var(--mb-t-color);
    margin-top: 0;
    margin-bottom: 12px;
}
.slide-text {
    font-size: 16px;
    color: var(--mb-s-color);
    line-height: 1.6;
    margin-bottom: 0;
}
.slide-navigation {
    padding: 15px 20px;
    border-top: 1px solid var(--mb-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.slide-dots {
    display: flex;
    gap: 8px;
}
.slide-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--mb-light);
    transition: background-color 0.3s ease;
}
.slide-dots .dot.active {
    background-color: var(--mb-ui-color);
}
.slide-btn {
    border: none;
    padding: 1px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.slide-next-btn, .slide-finish-btn {
    background-color: var(--mb-ui-color);
    color: white;
}
.slide-next-btn:hover, .slide-finish-btn:hover {
    opacity: .8;
}
.slide-prev-btn {
    background-color: #464646;
    color: #fff;
}
.slide-prev-btn:hover {
    opacity: .8;
}
body.tour-is-active .tour-overlay, body.tour-is-active .tour-highlight-box, body.tour-is-active .tour-tooltip {
    opacity: 1;
    visibility: visible;
}
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100100;
    background: #0b02291a;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(0px);
    transition: opacity 0.3s ease;
}
.tour-highlight-box {
    position: fixed;
    z-index: 100101;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.tour-tooltip {
    position: fixed;
    z-index: 100102;
    background-color: var(--mb-bg);
    color: var(--mb-s-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 330px;
    min-width: max-content;
    max-width: 90vw;
    opacity: 0;
    font-family: var(--mb-font);
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
}
.tour-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.tour-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--mb-border-color);
    padding-top: 15px;
}
.tour-steps {
    font-size: 0.8rem;
    color: #718096;
}
.tour-btn {
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
.tour-next-btn, .tour-finish-btn {
    background-color: var(--mb-ui-color);
    color: white;
}
.tour-next-btn:hover, .tour-finish-btn:hover {
    opacity: .6;
}
.tour-prev-btn {
    background-color: #e2e8f0;
    color: #4a5568;
}
.tour-prev-btn:hover {
    background-color: #cbd5e0;
}
.media-library-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999999999999999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.media-library-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.media-library-box {
    width: 80%;
    height: 80vh;
    max-width: 1200px;
    background-color: var(--mb-bg);
    color: var(--mb-s-color);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    font-family: var(--mb-font);
    overflow: hidden;
    transform: scale(0.95);
}
.media-library-overlay.is-visible .media-library-box {
    transform: scale(1);
}
.media-library-header {
    padding: 15px 25px;
    border-bottom: 1px solid var(--mb-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.media-library-header h3 {
    margin: 0;
    font-size: 1.2rem;
}
.media-library-header .close-media-library {
    background: none;
    border: none;
    color: #a0aec0;
    font-size: 24px;
    cursor: pointer;
    padding: 0 5px;
}
.media-library-body {
    display: flex;
    flex-grow: 1;
    height: 100%;
    overflow: hidden;
}
.media-library-sidebar {
    width: 240px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex-shrink: 0;
    border-left: 1px solid #4a5568;
}
.media-library-sidebar .upload-new-btn {
    width: 100%;
    margin-bottom: 25px;
}
.media-filters {
    list-style: none;
    padding: 0;
    margin: 0;
}
.media-filters li {
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease;
}
.media-filters li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.media-filters li.active {
    background-color: #3182ce;
    color: white;
}
.media-library-main {
    flex-grow: 1;
    padding: 20px;
    overflow: hidden;
}
.media-grid-container {
    height: 100%;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}
.empty-library-message {
    grid-column: 1 / -1;
    text-align: center;
    color: #718096;
    margin-top: 50px;
}
.media-library-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--mb-border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
.insert-selected-btn:disabled {
    background-color: #4a5568;
    cursor: not-allowed;
    opacity: 0.6;
}
.media-item-card {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.media-item-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
}
.media-item-card.is-selected {
    border-color: #3182ce;
}
.media-item-card.is-selected::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #3182ce;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.media-library-header {
    gap: 20px;
}
.media-library-header .header-actions {
    margin-left: auto;
}
.media-library-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}
.media-tabs {
    display: flex;
    padding: 10px 20px 0 20px;
    border-bottom: 1px solid var(--mb-border-color);
    flex-shrink: 0;
}
.media-tab-btn {
    padding: 10px 20px;
    border: none;
    background: none;
    color: var(--mb-s-color);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.media-tab-btn.active {
    color: var(--mb-ui-color);
    border-bottom-color: var(--mb-ui-color);
}
.media-panels {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}
.media-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: none;
    flex-direction: column;
}
.media-panel.active {
    display: flex;
}
.uploader-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3);
}
.uploader-progress {
    width: 60px;
    height: 60px;
}
.uploader-svg {
    transform: rotate(-90deg);
}
.uploader-progress-circle {
    fill: none;
    stroke: #3182ce;
    stroke-width: 4;
    stroke-linecap: round;
    animation: uploader-spin 1.5s linear infinite;
}
@keyframes uploader-spin {
    100% {
        transform: rotate(360deg);
    }
}
.theme-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.theme-item-info {
    display: flex;
    align-items: center;
    flex: 1;
}
.sections-panel-body.view-categories .single-category-view {
    display: none;
}
.sections-panel-body.view-categories .category-list-view {
    display: block;
}
.sections-panel-body.view-single-category .category-list-view {
    display: none;
}
.sections-panel-body.view-single-category .single-category-view {
    display: block;
}
.category-group {
    margin-bottom: 5px;
}
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 5px;
    font-size: 11px;
}
.category-header h3 {
    margin: 0;
    font-size: 13px;
}
.section-preview-list, .sections-grid-sidepanel {
    columns: 2;
    gap: 5px;
}
button.view-all-btn.editor-button-small {
    background: var(--mb-light);
    padding: 4px 12px;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: .03em;
    color: var(--mb-s-color);
    border-radius: 16px;
}
.category-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: stretch;
    margin-bottom: 12px;
}
button.category-filter-btn {
    color: var(--mb-s-color);
    font-size: 15px;
    line-height: 16px;
    letter-spacing: .03em;
    cursor: pointer;
    border-radius: 3px;
    background: var(--mb-light);
    border-radius: 3px;
    padding: 5px 16px;
    flex-grow: 1;
    text-align: center;
    transition: .3s all ease;
}
button.category-filter-btn {
}
button.category-filter-btn:hover {
    color: #fff;
}
.additional-layer-head-dragable {
    width: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}
.editor-top-bar {
    display: flex;
    position: relative;
}
.options-btn {
    background: none;
    border: none;
    color: var(--dark-text-secondary);
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
}
.options-btn:hover {
    background-color: var(--dark-border);
    color: var(--dark-text-primary);
}
.pages-context-menu {
    position: fixed;
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1020;
    min-width: 180px;
}
.pages-context-menu ul {
    list-style: none;
    padding: 5px;
    margin: 0;
}
.pages-context-menu li {
    padding: 8px 12px;
    color: var(--dark-text-primary);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.pages-context-menu li:hover {
    background-color: var(--dark-accent-primary);
    color: white;
}
.pages-context-menu li.delete {
    color: var(--dark-danger);
}
.pages-context-menu li.delete:hover {
    background-color: var(--dark-danger);
    color: white;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.modal-overlay.is-hidden {
    display: none;
}
.modal-content {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--mb-border-color);
}
.modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--dark-text-primary);
}
.close-modal-btn {
    background: none;
    border: none;
    color: var(--dark-text-secondary);
    font-size: 24px;
    cursor: pointer;
}
.close-modal-btn:hover {
    color: var(--dark-text-primary);
}
.modal-body {
    padding: 20px;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--dark-text-secondary);
    font-size: 14px;
}
.form-group input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: var(--dark-bg-primary);
    border: 1px solid var(--dark-border);
    border-radius: 5px;
    color: var(--dark-text-primary);
    outline: none;
}
.form-group input[type="text"]:focus {
    border-color: var(--dark-accent-primary);
}
.url-prefix-group {
    display: flex;
    align-items: center;
    background-color: var(--dark-bg-primary);
    border: 1px solid var(--dark-border);
    border-radius: 5px;
}
.url-prefix-group span {
    padding: 10px;
    color: var(--dark-text-secondary);
    border-right: 1px solid var(--dark-border);
}
.url-prefix-group input {
    border: none !important;
    flex-grow: 1;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    background-color: var(--dark-bg-primary);
    border-top: 1px solid var(--dark-border);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#create-new-page-confirm.editor-button.primary {
    background-color: var(--dark-accent-primary);
    color: white;
}
#create-new-page-confirm.editor-button.primary:hover {
    background-color: var(--dark-accent-primary-hover);
}
#create-new-page-confirm:disabled {
    background-color: var(--dark-border);
    cursor: wait;
}
#cancel-create-page.editor-button {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}
#cancel-create-page.editor-button:hover {
    background-color: var(--dark-border);
}
div#chat-widget-live-preview {
    width: 100%;
    height: 100%;
}
.IconPickerPrview-wrapper {
}
.popup-settings-bar {
    position: absolute;
    bottom: 10px;
    display: flex;
    height: 60px;
    background: #fff;
    align-items: center;
    right: 20px;
    padding: 0px 20px;
    border-radius: 8px;
}
li.popup-item {
    border: 1px solid var(--mb-border-color);
    border-radius: 12px;
    margin-bottom: 10px;
}
.popup-item-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--mb-light);
    padding: 5px 10px;
}
.popup-item-main {
    padding: 10px;
}
.meatballs-menu {
    visibility: hidden;
    min-width: 116px;
    top: 30px;
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(89, 102, 122, 0.1);
    border: 1px solid var(--mb-border-color2);
    z-index: 1;
    overflow: hidden;
}
.meatballs-menu.dropdown-right {
    left: 30px;
    right: inherit;
}
.meatballs-menu.dropdown-up {
    bottom: 40px;
    top: inherit;
}
.-meatballs-dropdown-item {
    padding: 4px 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    color: var(--mb-s-color);
}
.-meatballs-dropdown-item:hover {
    background: #f1f0ff42;
}
.-meatballs-dropdown-item.delete-action:hover {
    background: #ff717112;
}
.-meatballs-dropdown-item.delete-action {
    color: var(--mb-error);
}
.-mb-seo-bar {
    display: flex;
    background: #5ab0834a;
    padding: 2px 8px;
    border-radius: 4px;
    gap: 8px;
    font-weight: 800;
    color: #2b714c;
    cursor: pointer;
}
.seo-issue-marker {
    position: relative;
}
.seo-issue-marker:after {
    content: "\21";
    font-family: "Font Awesome 6 Pro";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff0000d6;
    position: absolute;
    top: 0px;
    pointer-events: none;
    right: -20px;
    animation: seo-pulse 1s infinite;
}
@keyframes seo-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}
img.issue-thumbnail {
    width: 32px;
    height: 27px;
    border-radius: 5px;
    object-fit: cover;
}
.seo-status-good {
    background-color: #2ecc71 !important;
    color: white !important;
}
.seo-status-ok {
    background-color: #fbe1b9;
    color: #694308;
}
.seo-status-poor {
    background-color: #ffc2bb54;
    color: #a63325;
}
.-mb-seo-bar-value span {
    color: var(--mb-t-color);
}
.-mb-seo-bar-value strong {
    font-weight: 700;
}
.seo-v3-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    border: 1px solid var(--mb-border-color);
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.content_stracture_item {
    width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
    flex: 1;
    min-width: 25%;
}
.content_stracture_item_head {
    display: flex;
    align-items: center;
    color: var(--mb-s-color);
    margin-bottom: 4px;
    line-height: 1;
    flex-direction: column;
    font-size: 14px;
}
.content_stracture_item_head i {
    border-radius: 50%;
    width: 27px;
    height: 27px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(85, 162, 113);
    margin-bottom: 8px;
}
.seo-v3-issue-group {
    border: 1px solid var(--mb-border-color);
    border-radius: 8px;
    margin-bottom: 10px;
}
.seo-v3-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.seo-v3-group-issues {
}
.seo-v3-issue-item {
    background: #fff;
    padding: 9px;
    border-radius: 8px;
    margin-bottom: 8px;
}
.issue-details {
    display: none;
}
.issue-main-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.issue-actions {
    min-width: 100%;
}
.keywords-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--mb-border-color);
    border-radius: 8px;
    min-height: 42px;
    position: relative;
}
.keyword-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px;
}
.keyword-list li {
    background-color: var(--mb-ui-color);
    color: white;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s ease;
}
.keyword-list li:hover {
    background-color: #005a87;
}
.keyword-list li .remove-keyword {
    cursor: pointer;
    font-weight: bold;
    color: white;
    font-size: 12px;
}
.keywords-input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 14px;
    min-width: 120px;
    background: transparent;
    padding: 4px;
    color: #333;
}
button.refresh-seo-analysis.editor-button {
    display: none;
}
.seo-v3-summary {
    margin-bottom: 10px;
    background: #fff;
    padding: 20px;
    border: 1px solid var(--mb-border-color);
    border-radius: 12px;
}
.focus-keyword-container-new {
    margin-bottom: 10px;
}
.focus-keyword-container-new label {
    font-size: 17px;
    margin-bottom: 8px;
    display: block;
}
.keyword-pill-item {
    width: max-content;
    border-radius: 18px;
    padding: 4px 10px;
    padding-inline-end: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}
.keyword-pill-item.status-red {
    background: red;
}
.keyword-pill-item.status-green {
    background: #187f4f;
    color: #fff;
}
.keyword-pills-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.content_stracture_item_current {
    text-align: center;
}
span.keyword-usage {
    background: #ffffff;
    border-radius: 20px;
    padding: 0px 8px;
    color: var(--mb-s-color);
}
.keyword-editor-container .popover-header {
    padding: 20px 25px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.keyword-editor-container .popover-header h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #1F2937;
}
.keyword-editor-container .popover-header p {
    margin: 0;
    color: #6B7280;
    font-size: 14px;
}
.keyword-editor-container .popover-body {
    padding: 25px;
}
.keyword-editor-container .form-section {
    margin-bottom: 25px;
}
.keyword-editor-container .form-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
    color: #374151;
}
.keyword-editor-container .editor-input-field {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
}
.tags-input-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
}
.tags-input-container .tag {
    background-color: #e0e7ff;
    color: #3730a3;
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tag-remove {
    cursor: pointer;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.tag-remove:hover {
    opacity: 1;
}
.tags-input-field {
    border: none;
    outline: none;
    flex-grow: 1;
    min-width: 150px;
    padding: 5px;
    background: transparent;
}
.ai-suggestion-section .action-btn {
    background: transparent;
    border: 1px dashed #a5b4fc;
    color: #4338ca;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
}
.suggested-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}
.suggested-keyword-pill {
    background: #f0fdf4;
    color: #166534;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.suggested-keyword-pill:hover {
    background-color: #dcfce7;
}
.keyword-editor-container .popover-footer {
    padding: 15px 25px;
    text-align: left;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.keyword-editor-container .popover-footer .action-btn {
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 500;
}
:root {
    --app-bg: #F8F9FC;
    --card-bg: #FFFFFF;
    --text-primary: #1F2937; 
    --text-secondary: #6B7280;
    --border-color: #EFF2F7;
    --main-gradient: linear-gradient(135deg, #A5B4FC 0%, #7C83FD 100%);
    --pill-bg: #F3F4F6;
    --pill-text: #4B5563;
    --severity-error: #e74c3c;
    --severity-warning: #f39c12;
    --severity-suggestion: #3498db;
    --success-bg: #f0fff4;
    --success-text: #2f855a;
    --success-border: #c6f6d5;
}
.seo-agent-container,
.seo-agent-view-container {
    padding: 20px; 
    font-family: 'Cairo', sans-serif;
    border-radius: 30px;
    background: #eeeeee42;
}
.view-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px; 
}
.view-header-back-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.view-header-title .view-icon {
    font-size: 24px;
}
.view-header-title h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 700;
}
.agent-header h3 {
    font-weight: 700;
    font-size: 22px; 
    margin-bottom: 20px;
    color: var(--text-primary);
}
.agent-strength-meter,
.agent-card,
.agent-top-issues {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: #dbdce700 0 0 0 1px, 0 15px 26px -14px #09234012, 0 4px 2px -3px #09234012;
    transition: all 0.3s ease;
}
.agent-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(124, 131, 253, 0.1);
}
.strength-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.strength-emoji {
    font-size: 35px;
    min-width: 57px;
    height: 57px;
    background: #fff;
    border-radius: 19px;
    color: var(--mb-s-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
span.strength-emoji i {
    font-weight: 300;
}
.strength-info p {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.strength-progress-bar-container {
    background: var(--border-color);
    border-radius: 20px;
    height: 12px;
    width: calc(100% - 60px);
    display: inline-block;
    color: var(--mb-s-color);
}
.strength-progress-bar {
    background: var(--main-gradient);
    height: 100%;
    border-radius: 20px;
    transition: width 0.5s ease-in-out;
}
.strength-score {
     font-weight: 700;
     font-size: 14px;
     margin-right: 10px;
     background: #fff;
     color: var(--mb-t-color);
     padding: 1px 10px;
     border-radius: 18px;
}
.agent-cards-grid {
    column-count: 2;
    gap: 10px;
    margin-bottom: 25px;
}
.agent-card {
    text-align: right; 
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;
    align-items: flex-start;
    page-break-inside: avoid;
}
.agent-card-icon {
    font-size: 20px; 
    color: #7C83FD;
    background: #F5F6FF;
    border-radius: 16px;
    width: 63px;
    height: 63px;
    margin-bottom: 10px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.agent-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 15px; 
}
.agent-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}
.card-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    background: var(--severity-error);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.agent-top-issues h4 {
    margin-top: 0;
    color: var(--text-primary);
    font-weight: 700;
}
.agent-top-issues ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0; 
}
.top-issue-item {
    padding: 12px 15px 12px 25px; 
    font-size: 14px;
    position: relative;
    background: #FDFDFD; 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    margin-bottom: 8px; 
}
.top-issue-item:last-child {
    border-bottom: 1px solid var(--border-color); 
}
.top-issue-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px; 
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.top-issue-item.severity-error::before {
    background: var(--severity-error);
}
.top-issue-item.severity-warning::before {
    background: var(--severity-warning);
}
.top-issue-item.severity-suggestion::before {
    background: var(--severity-suggestion);
}
.keyword-search-bar {
    position: relative;
    margin-bottom: 15px;
}
.keyword-search-bar i {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #9CA3AF;
}
.keyword-search-bar input {
    width: 100%;
    padding: 10px 35px 10px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
}
.tabs-container {
    display: inline-flex; 
    background-color: var(--pill-bg); 
    border-radius: 20px; 
    padding: 4px; 
    margin-bottom: 15px;
    border-bottom: none; 
    width: 100%;
}
.tab-btn {
    padding: 6px 20px; 
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600; 
    color: var(--text-secondary);
    position: relative;
    border-radius: 16px; 
    flex: 1;
}
.tab-btn.active {
    color: #7C83FD; 
    background: var(--card-bg); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}
.tab-btn.active::after {
    display: none; 
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.keyword-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px; 
    background: var(--card-bg); 
    border-radius: 16px; 
    margin-bottom: 8px;
    border: 1px solid var(--border-color); 
}
.keyword-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.keyword-text {
    font-weight: 500;
}
.keyword-text small {
    font-weight: 400;
    color: var(--text-secondary);
}
.placement-analysis {
    display: flex;
    gap: 6px;
}
.placement-analysis span {
    font-size: 10px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.placement-analysis span.yes {
    background-color: #2ecc71;
}
.placement-analysis span.no {
    background-color: #e0e0e0;
}
.keyword-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--text-secondary);
}
.density-meter-container {
    width: 60px;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
}
.density-meter {
    height: 100%;
    border-radius: 3px;
}
.density-meter.low {
    background: var(--severity-warning);
    width: 25%;
}
.density-meter.ok {
    background: #2ecc71;
    width: 60%;
}
.density-meter.high {
    background: var(--severity-error);
    width: 100%;
}
#tab-headings-tree ul {
    list-style: none;
    padding-right: 16px;
    margin: 0;
    position: relative;
    border-right: 1px solid var(--border-color); 
}
#tab-headings-tree li {
    position: relative;
}
#tab-headings-tree li::before {
    content: '';
    position: absolute;
    top: 21px;
    right: -20px;
    width: 20px;
    height: 1px;
    background: var(--border-color); 
}
.heading-tree-item {
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.heading-tree-item:hover,
.heading-tree-item.active {
    background-color: #F5F6FF; 
}
.heading-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px; 
    background: #fff; 
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: #dbdce700 0 0 0 1px, 0 15px 26px -14px #09234012, 0 4px 2px -3px #09234012;
}
.heading-tag {
    font-size: 10px;
    font-weight: 700;
    background: var(--pill-bg); 
    color: var(--pill-text); 
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.heading-tag.structural-error {
    background-color: #ffe4e6;
    color: #c0392b;
    cursor: help;
}
.heading-text {
    font-size: 14px;
    flex-grow: 1;
    color: #374151;
}
.heading-text em {
    color: #9CA3AF;
    font-style: italic;
}
.heading-meta {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}
.keyword-status {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
}
.keyword-status.missing {
    background-color: #fde8e6;
    color: #c0392b;
}
.keyword-status.recommended {
    background-color: #fef4e6;
    color: #d35400;
}
.task-list-container {
    max-height: 75vh;
    overflow-y: auto;
    padding: 5px;
}
.task-category-header {
    font-size: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    margin: 20px 0 15px 0;
    color: var(--text-primary);
}
.task-item {
    background: var(--card-bg);
    border-radius: 16px; 
    margin-bottom: 10px;
    border: 1px solid var(--border-color); 
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); 
}
.task-item.active .task-expand-icon {
    transform: rotate(180deg);
}
.task-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px; 
    cursor: pointer;
}
.task-severity-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.task-item.severity-error .task-severity-icon {
    background: var(--severity-error);
}
.task-item.severity-warning .task-severity-icon {
    background: var(--severity-warning);
}
.task-item.severity-suggestion .task-severity-icon {
    background: var(--severity-suggestion);
}
.task-title {
    margin: 0;
    flex-grow: 1;
    font-weight: 600; 
    font-size: 14px;
}
.task-expand-icon {
    color: #9ca3af;
    transition: transform 0.2s ease-in-out;
}
.task-item-details {
    display: none;
    padding: 20px; 
    border-top: 1px solid var(--border-color); 
    background-color: var(--app-bg); 
}
.task-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 15px 0;
}
.task-fix-actions {
    display: flex;
    gap: 10px;
}
.fix-btn {
    border: none;
    padding: 8px 18px; 
    border-radius: 20px; 
    font-weight: 700;
    cursor: pointer;
}
.fix-btn.programmatic {
    background-color: #E0E7FF; 
    color: #4338CA; 
}
.fix-btn.ai-driven {
    background: var(--main-gradient); 
    color: white; 
}
.sub-task-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}
.sub-task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--card-bg); 
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color); 
}
.sub-task-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}
.sub-task-name {
    flex-grow: 1;
    font-size: 13px;
    color: #374151;
}
.sub-task-item .fix-btn {
    font-size: 12px;
    padding: 5px 10px;
}
.no-keywords-state,
.no-seo-tasks,
.top-issue-item-none {
    text-align: center;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 12px;
}
.no-keywords-state h4,
.no-seo-tasks h3 {
    margin: 0 0 10px 0;
}
.no-keywords-state p,
.no-seo-tasks p {
    margin: 0 0 20px 0;
    color: var(--text-secondary);
    font-size: 14px;
}
.no-tasks-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}
.top-issue-item-none {
    color: #2ecc71;
    font-weight: 500;
}
.passed-check-item {
    background-color: var(--success-bg);
    color: var(--success-text);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--success-border);
}
h3.side-panel-title {
    font-size: 16px;
}
.strength-progress {
    display: flex;
    align-items: center;
}
.draggable-modal-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    justify-content: space-between;
    border-bottom: 1px solid #4f59661f;
}
.ai-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
    direction: rtl;
    scrollbar-width: none;
}
.suggestion-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--mb-border-color);
    border-radius: 10px;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align: right;
}
.suggestion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    border-color: #d1d5db;
}
.suggestion-item input[type="radio"] {
    display: none;
}
.suggestion-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.suggestion-item .suggestion-text {
    font-size: 14px;
    color: #111827;
    line-height: 1.6;
}
.suggestion-item .custom-radio-indicator {
    width: 22px;
    height: 22px;
    border: 2px solid var(--mb-border-color);
    border-radius: 50%;
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background-color: #fff;
    font-size: 13px;
}
.suggestion-item .custom-radio-indicator::after {
    content: '\f00c';
    font-weight: 900;
    color: white;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    line-height: 1;
    font-family: "Font Awesome 6 Pro";
    display: flex;
    align-items: center;
    justify-content: center;
}
.suggestion-item input[type="radio"]:checked ~ .custom-radio-indicator {
    background-color: var(--mb-ui-color);
    border-color: var(--mb-ui-color);
}
.suggestion-item input[type="radio"]:checked ~ .custom-radio-indicator::after {
    transform: scale(1);
}
.suggestion-item:has(input[type="radio"]:checked) {
    border-color: var(--mb-ui-color);
    box-shadow: 0 0 0 1px #6b53ff99;
}
.suggestion-badges {
    display: flex;
    gap: 6px;
}
.suggestion-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 12px;
    background-color: var(--mb-border-color);
    color: #4b5563;
}
.suggestion-item .suggestion-text .text-primary {
    color: var(--mb-ui-color);
    font-weight: 800;
}
textarea.ai-form-input.a-result-as-textarea {
    width: 100%;
    resize: none;
    height: max-content !important;
    display: block;
    pointer-events: none;
    scrollbar-width: none;
}
span.modal-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--mb-t-color);
}
.ai-chat-loader {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 5px;
    direction: rtl;
}
.ai-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--mb-border-color);
    margin-bottom: 6px;
}
.ai-avatar svg {
    width: 20px;
    height: 20px;
    color: #4b5563;
}
.ai-chat-bubble {
    border-radius: 18px;
    border-top-right-radius: 4px;
    flex: 1;
    display: flex;
    align-items: center;
}
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
}
.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9ca3af;
    animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-of-type(1) {
    animation-delay: -0.32s;
}
.typing-dot:nth-of-type(2) {
    animation-delay: -0.16s;
}
@keyframes typing-bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.0);
    opacity: 1;
  }
}
.ai-chat-response {
    display: flex;
    align-items: start;
    gap: 8px;
}
.ai-history-controls {
    color: var(--mb-s-color);
}
button.ai_btn_history[disabled] {
    opacity: .5;
}
#seo-onboarding-nudge {
    position: fixed;
    bottom: -200px; 
    right: 20px;
    z-index: 100001;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    padding: 16px 20px;
    width: 100%;
    max-width: 450px;
    transition: bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: 'Cairo', sans-serif;
}
#seo-onboarding-nudge.visible {
    bottom: 20px;
}
.seo-nudge-icon {
    flex-shrink: 0;
    margin-right: 15px;
    width: 40px;
    height: 40px;
    background-color: #e3e8ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B53FF;
}
.seo-nudge-content p {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: #333;
}
.seo-nudge-input-wrapper {
    display: flex;
    align-items: center;
}
#seo-page-topic {
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    transition: border-color 0.2s;
}
#seo-page-topic:focus {
    outline: none;
    border-color: #6B53FF;
}
#seo-start-btn {
    border: none;
    background-color: #6B53FF;
    color: white;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 8px; 
    transition: background-color 0.2s;
}
#seo-start-btn:hover {
    background-color: #523ee8;
}
.seo-inspector-active > *:not(.seo-issue-badge) {
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}
.seo-issue-badge {
    position: absolute;
    z-index: 9999999;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: 2px solid white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.seo-issue-badge:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.seo-issue-badge.error {
    background-color: #e53e3e; 
}
.seo-issue-badge.warning {
    background-color: #dd6b20; 
}
.seo-issue-badge.suggestion {
    background-color: #3182ce; 
}
.seo-fix-popover {
    position: fixed;
    z-index: 100002;
    background: #2c2c3d; 
    color: #f0f0f0;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 280px;
    border: 1px solid #4a4a6a;
}
.seo-fix-popover .seo-fix-popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    transform: translateX(-50%); 
}
.seo-fix-popover.direction-bottom .seo-fix-popover-arrow {
    bottom: -8px;
    border-top: 8px solid #2c2c3d;
}
.seo-fix-popover.direction-top .seo-fix-popover-arrow {
    top: -8px;
    border-bottom: 8px solid #2c2c3d;
}
.seo-fix-popover p {
    margin: 0 0 15px 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: right;
}
.seo-smart-fix-btn {
    width: 100%;
    border: none;
    background-image: linear-gradient(to right, #6B53FF, #8a7aff);
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.seo-smart-fix-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(107, 83, 255, 0.4);
}
.seo-agent-modal {
    padding: 5px;
    text-align: center;
}
.seo-agent-header {
    margin-bottom: 15px;
}
.seo-agent-header h3 {
    margin: 0;
    font-size: 1.2rem;
}
.seo-agent-modal p {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.seo-agent-modal textarea.editor-input-field {
    resize: vertical;
    text-align: right;
    padding: 10px;
    width: 100%;
    box-sizing: border-box; 
}
.seo-keywords-list {
    text-align: right;
    margin-bottom: 15px;
    max-height: 250px;
    overflow-y: auto;
    padding-left: 10px; 
}
.seo-keyword-item {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}
.seo-keyword-item:last-child {
    border-bottom: none;
}
.seo-keyword-item:hover {
    background-color: #f9f9f9;
}
.seo-keyword-item input[type="checkbox"] {
    margin-left: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.seo-keyword-item label {
    flex-grow: 1;
    cursor: pointer;
}
.ai-chat-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 100px;
}
.seo-report-score {
    text-align: center;
    padding: 15px;
    margin-bottom: 15px;
}
.score-label {
    font-size: 14px;
    color: #777;
    margin-bottom: 5px;
}
.score-value {
    font-size: 42px;
    font-weight: bold;
    line-height: 1;
}
.score-value span {
    font-size: 16px;
    font-weight: normal;
    color: #aaa;
}
.seo-report-panel {
    padding: 10px;
    font-family: 'Cairo', sans-serif;
}
.seo-report-summary {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 8px;
    margin-bottom: 15px;
}
.summary-item {
    text-align: center;
    font-size: 13px;
    color: #555;
}
.summary-item strong {
    display: block;
    font-size: 20px;
    font-weight: bold;
}
.summary-item.error strong { color: #e53e3e; }
.summary-item.warning strong { color: #dd6b20; }
.summary-item.suggestion strong { color: #3182ce; }
.seo-issue-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.seo-issue-list-item {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}
.seo-issue-list-item:hover {
    background-color: #f9f9f9;
}
.seo-issue-list-item .issue-icon {
    flex-shrink: 0;
    margin-right: 12px;
    width: 20px;
    text-align: center;
}
.seo-issue-list-item .issue-icon.error { color: #e53e3e; }
.seo-issue-list-item .issue-icon.warning { color: #dd6b20; }
.seo-issue-list-item .issue-icon.suggestion { color: #3182ce; }
.seo-issue-list-item .issue-message {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
.seo-report-empty {
    text-align: center;
    padding: 40px 20px;
    color: #777;
    background-color: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #bbf7d0;
}
.flash-highlight {
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 0 3px rgba(107, 83, 255, 0.7) !important;
}
.history-dropdown {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 280px;
    background-color: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 10001;
    max-height: 400px;
    overflow-y: auto;
}
.history-dropdown-list {
    list-style: none;
    padding: 5px;
    margin: 0;
}
.history-item {
    padding: 10px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}
.history-item:hover {
    background-color: #f0f2f5;
}
.history-item.active {
    background-color: #e3e8ff;
    color: #6B53FF;
    font-weight: bold;
}
.seo-inspector-active > *:not(.seo-issue-badge) {
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}
.seo-issue-badge {
    position: absolute;
    z-index: 9999999;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: 2px solid white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.seo-issue-badge:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.seo-issue-badge.error { background-color: #ef4444; }
.seo-issue-badge.warning { background-color: #f59e0b; }
.seo-issue-badge.suggestion { background-color: #3b82f6; }
.issue-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    text-align: center;
}
.seo-fix-popover {
    position: fixed;
    z-index: 100002;
    background: #2c2c3d;
    color: #f0f0f0;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 300px;
    border: 1px solid #4a4a6a;
}
.seo-fix-popover.no-arrow.centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.seo-fix-popover.no-arrow .seo-fix-popover-arrow {
    display: none;
}
.seo-fix-popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    transform: translateX(-50%);
}
.seo-fix-popover.direction-bottom .seo-fix-popover-arrow {
    bottom: -8px;
    border-top: 8px solid #2c2c3d;
}
.seo-fix-popover.direction-top .seo-fix-popover-arrow {
    top: -8px;
    border-bottom: 8px solid #2c2c3d;
}
.popover-tabs {
    padding: 10px 15px;
    border-bottom: 1px solid #4a4a6a;
    display: flex;
    gap: 5px;
}
.popover-tab-item {
    background: transparent;
    border: 2px solid #555;
    color: #999;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}
.popover-tab-item.active {
    border-color: #fff;
    color: #fff;
    transform: scale(1.1);
}
.popover-panes { padding: 15px; }
.popover-pane { display: none; }
.popover-pane.active { display: block; }
.issue-item {
    border-bottom: 1px solid #4a4a6a;
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.issue-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.seo-fix-popover p {
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: right;
}
.seo-smart-fix-btn {
    width: 100%;
    border: none;
    background-image: linear-gradient(to right, #6B53FF, #8a7aff);
    color: white;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.seo-smart-fix-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(107, 83, 255, 0.4);
}
.seo-dashboard-tabs {
    display: flex;
    background-color: #e9ecef;
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 15px;
}
.seo-tab-btn {
    flex: 1;
    padding: 8px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    color: #6c757d;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}
.seo-tab-btn.active {
    background-color: #fff;
    color: #6B53FF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.seo-dashboard-panels .seo-panel { display: none; }
.seo-dashboard-panels .seo-panel.active { display: block; }
.seo-report-main-score { text-align: center; margin-bottom: 20px; }
.score-chart { position: relative; width: 100px; height: 100px; margin: 0 auto; }
.score-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-circle-bg { fill: none; stroke: #e6e6e6; stroke-width: 3.8; }
.score-circle {
    fill: none;
    stroke: var(--score-color, #22c55e);
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}
@keyframes progress { 0% { stroke-dasharray: 0 100; } }
.score-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px; font-weight: bold; color: #333;
}
.score-title { margin-top: 10px; font-weight: 600; color: #555; }
.seo-report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.summary-item { background: #fff; padding: 15px 10px; border-radius: 8px; text-align: center; border-left: 4px solid; }
.summary-item strong { font-size: 22px; font-weight: 700; display: block; }
.summary-item span { font-size: 13px; color: #777; }
.summary-item.error { border-color: #ef4444; } .summary-item.error strong { color: #ef4444; }
.summary-item.warning { border-color: #f59e0b; } .summary-item.warning strong { color: #f59e0b; }
.summary-item.suggestion { border-color: #3b82f6; } .summary-item.suggestion strong { color: #3b82f6; }
.seo-issue-list { list-style: none; padding: 0; margin: 0; }
.seo-issue-list-item { display: flex; align-items: center; padding: 12px 8px; border-bottom: 1px solid #eee; cursor: pointer; transition: background-color 0.2s; }
.seo-issue-list-item:hover { background-color: #f9f9f9; }
.seo-issue-list-item .issue-icon { flex-shrink: 0; margin-left: 12px; width: 20px; text-align: center; }
.seo-issue-list-item .issue-message { font-size: 14px; color: #333; line-height: 1.5; }
.seo-issue-list-item.is-group { justify-content: space-between; }
.issue-group-arrow { color: #aaa; }
.seo-report-success { text-align: center; padding: 30px 20px; background-color: #fff; border-radius: 8px; }
.success-icon { font-size: 48px; color: #22c55e; margin-bottom: 15px; }
.heading-tree-item { padding: 8px 10px; border-left: 3px solid #ddd; margin-bottom: 2px; cursor: pointer; background-color: #fff; transition: background-color 0.2s; }
.heading-tree-item:hover { background-color: #f8f9fa; }
.heading-level-1 { margin-right: 0; border-color: #6B53FF; font-weight: bold; }
.heading-level-2 { margin-right: 20px; border-color: #3b82f6; }
.heading-level-3 { margin-right: 40px; border-color: #14b8a6; }
.heading-level-4 { margin-right: 60px; border-color: #f59e0b; color: #555; font-size: 0.9em; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.stat-card { background-color: #fff; padding: 20px; border-radius: 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.stat-value { font-size: 28px; font-weight: 700; color: #6B53FF; }
.stat-label { font-size: 14px; color: #6c757d; margin-top: 5px; }
.mb-form-popover { padding: 20px; }
.mb-form-popover h3 { margin-top: 0; }
.mb-form-popover .form-group { margin-bottom: 15px; }
.mb-form-popover label { display: block; margin-bottom: 5px; font-weight: 600; }
.mb-in-between-add-button {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0px;
    margin-top: -1px;
}
.mb-in-between-add-button .add-line {
    height: 2px;
    background-color: #6B53FF;
    flex-grow: 1;
    transition: opacity 0.2s ease-in-out;
}
.mb-in-between-add-button .add-btn {
    background-color: #6B53FF;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    margin: 0 5px;
    transform: scale(1);
    transition: all 0.2s ease-in-out;
}
.mb-in-between-add-button:hover .add-line, .mb-in-between-add-button:hover .add-btn {
    opacity: 1;
}
.mb-in-between-add-button:hover 
.add-btn {
    transform: scale(1);
}
#mb-apps-center-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 24, 41, 0.6);
    backdrop-filter: blur(5px);
    z-index: 100000;
    display: none;
    justify-content: center;
    align-items: center;
}
.apps-center-container {
    width: 90%;
    max-width: 900px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.apps-center-header {
    padding: 15px 25px;
    border-bottom: 1px solid var(--mb-border-color);
    background: #fff;
}
.apps-center-header h3 {
    margin: 0;
    font-size: 23px;
    font-family: var(--mb-font);
}
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    padding: 25px;
    max-height: 65vh;
    overflow-y: auto;
    background: #fff;
    scrollbar-width: none;
}
.app-card {
    background: #fff;
    transition: all 0.2s ease-in-out;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid var(--mb-border-color);
    padding: 20px;
    border-radius: 20px;
    gap: 4px;
    position: relative;
    margin: 0;
    font-family: var(--mb-font);
    overflow: hidden;
    box-shadow: #dbdce700 0 0 0 1px, 0 15px 26px -14px #09234012, 0 4px 2px -3px #09234012;
}
.app-card.disabled {
}
.app-card:not(.disabled):hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.app-icon {
    font-size: 36px;
    color: #4a90e2;
    margin-bottom: 15px;
}
.app-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.app-desc {
    font-size: 0.85rem;
    color: #666;
    margin: 8px 0 15px 0;
    min-height: 50px;
    flex-grow: 1;
}
.app-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    margin-top: auto;
}
.fx-label-title { display:block; font-weight:700; margin:0 0 10px; font-size:16px; }
.fx-category-toolbar {align-items:center;margin-bottom:12px;}
.fx-search { flex:1; min-width:220px; padding:8px 10px; border:1px solid #d0d7de; border-radius:8px; outline:none; }
.fx-btn { padding:8px 12px; border:0; border-radius:8px; cursor:pointer; }
.fx-btn.primary { background:#0073aa; color:#fff; }
.fx-btn.secondary { background:#6b7280; color:#fff; }
.fx-tree { margin:0; padding-left:0; list-style:none; }
.fx-tree-item { margin:2px 0; }
.fx-item-row {display: flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;}
.fx-item-row:hover { background:#f6f8fa; }
.fx-toggle{
  width: 22px; height: 22px; border:0; background:none; cursor:pointer; position:relative;
}
.fx-toggle::before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width: 0;
  height: 0;
  transform: translate(-50%,-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid var(--mb-s-color);
  transition: transform .2s ease;
}
.fx-toggle[aria-expanded="true"]::before { transform: translate(-50%,-50%) rotate(90deg); }
.fx-toggle-placeholder { display:inline-block; opacity:0.2; }
.fx-checkbox-wrapper {display: flex;gap:8px;cursor:pointer;user-select:none;align-items: center;}
.fx-checkbox { position:absolute; opacity:0; width:0; height:0; }
.fx-checkbox-ui {
  width:18px;
  height:18px;
  border: 2px solid var(--mb-border-color);
  border-radius:4px;
  display:inline-block;
  position:relative;
  transition: all .15s ease;
}
.fx-checkbox:checked + .fx-checkbox-ui {background: var(--mb-ui-color);border-color: var(--mb-ui-color);}
.fx-checkbox:checked + .fx-checkbox-ui::after {
  content:""; position:absolute; top:1px; left:5px; width:4px; height:8px;
  border: solid #fff; border-width:0 2px 2px 0; transform: rotate(45deg);
}
.fx-label-text { font-size:14px; color:#111827; }
.fx-bulk-wrapper { display:inline-flex; align-items:center; cursor:pointer; margin-inline-start:8px; }
.fx-bulk-wrapper .fx-bulk-children { position:absolute; opacity:0; width:0; height:0; }
.fx-bulk-ui {
  width:22px; height:22px; border:2px dashed #cbd5e1; border-radius:6px; display:inline-block; position:relative;
  transition: all .15s ease;
}
.fx-bulk-children:checked + .fx-bulk-ui { background:#10b98122; border-color:#10b981; }
.fx-bulk-children:checked + .fx-bulk-ui::after {
  content:""; position:absolute; top:3px; left:6px; width:6px; height:10px;
  border: solid #059669; border-width:0 3px 3px 0; transform: rotate(45deg);
}
.fx-bulk-placeholder { width:22px; height:22px; }
.fx-children { margin-inline-start:26px; }
.fx-children.collapsed { display:none; }
.depth-0 > .fx-tree-item .fx-item-row { font-weight:600; }
.depth-1 > .fx-tree-item .fx-item-row { font-weight:500; }
.fx-checkbox[indeterminate] + .fx-checkbox-ui {
  background: linear-gradient(180deg, #e5f3ff 0%, #cfe8ff 100%);
  border-color:#60a5fa;
}
.fx-checkbox[indeterminate] + .fx-checkbox-ui::after {
  content:""; position:absolute; top:7px; left:3px; right:3px; height:2px; background:#2563eb; border:none; transform:none;
}
@media (max-width: 520px) {
  .fx-item-row { grid-template-columns: 28px 1fr 28px; }
}
.radio-inputs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0.5rem;
    background-color: #EEE;
    box-sizing: border-box;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
    padding: 0.25rem;
    width: 300px;
    font-size: 14px;
}
.radio-inputs .radio {
    flex: 1 1 auto;
    text-align: center;
}
.radio-inputs .radio input {
    display: none;
}
.radio-inputs .radio .name {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: none;
    padding: 0.5rem 0;
    color: var(--mb-t-color);
    transition: all 0.15s ease-in-out;
}
.radio-inputs .radio input:checked + .name {
    background-color: #fff;
    font-weight: 600;
}
.radio-inputs .radio:hover .name {
    background-color: rgba(255, 255, 255, 0.5);
}
.radio-inputs .radio input:checked + .name {
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: select 0.3s ease;
}
@keyframes select {
    0% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
.radio-inputs .radio input:checked + .name::before,
.radio-inputs .radio input:checked + .name::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: Var(--mb-ui-color);
    opacity: 0;
    animation: particles 0.5s ease forwards;
}
.radio-inputs .radio input:checked + .name::before {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}
.radio-inputs .radio input:checked + .name::after {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}
@keyframes particles {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(var(--direction));
    }
}
.radio-inputs .radio input:checked + .name::before {
    --direction: -10px;
}
.radio-inputs .radio input:checked + .name::after {
    --direction: 10px;
}