:root {
    --primary-color: #ffdf00;
    --aside-width: 220px;
    --header-height: 60px;
    /* --bs-body-color: #ffffff7a; */
    /* --bs-body-bg: #0a0a0a; */
    /* --bs-body-bg: #1c1c1d; */
    /* --bs-body-font-size: ; */
    --border-color: #f0f0f0 !important;
    --header-font: "Space Grotesk", sans-serif;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0a0a0a;
    --bs-body-light-bg: #1d1d1d;
    --bs-danger: #e42855;
    --bs-text-danger: #e42855;
    --bs-border-color: rgba(255, 255, 255, 0.15);
    --bs-heading-color: white;
    --bs-form-invalid-border-color: #e42855;
    --bs-link-color: #ffdf00;
    --bs-link-color-rgb: 255, 223, 0;
    --bs-link-hover-color-rgb: 246, 213, 0;
    --bs-link-hover-color: #edcd00;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .nav-link {
    font-family: var(--header-font);
    font-weight: 600;
}

.translate-middle-y {
    transform: translateY(-50%) !important;
}

.translate-middle-x {
    transform: translateX(-50%) !important;
}

.top-50 {
    top: 50% !important;
}

.ps-13 {
    padding-left: 3rem !important;
}

.h-40px {
    height: 40px !important;
}

.bg-body {
    background-color: var(--bs-body-light-bg) !important;
    border-color: rgba(255, 255, 255, 0.15);
}

/* modal */
.modal-header {
    justify-content: space-between;
}

.nav-underline>li:not(:last-child) {
    margin-right: 10px;
}

.nav-pills {
    --bs-nav-pills-link-active-color: black;
    --bs-nav-pills-link-active-bg: #ffdf00;
}

.nav-link {
    --bs-nav-link-color: #ffffffce;
    --bs-nav-link-hover-color: #ffdf00;
}

.modal-content {
    backdrop-filter: blur(6px);
    background-color: #0000001c;
}

.form-control:focus, .form-select:focus {
    color: white;
    background-color: var(--bs-body-bg);
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: none;
}

.btn {
    font-family: var(--header-font);
}

.btn-primary {
    --bs-btn-color: #222;
    --bs-btn-bg: #ffdf00;
    --bs-btn-border-color: #ffdf00;
    --bs-btn-hover-color: black;
    --bs-btn-hover-bg: #f6d500;
    --bs-btn-hover-border-color: #ebcc04;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: black;
    --bs-btn-active-bg: #f6d500;
    --bs-btn-active-border-color: #ebcc04;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffdf00;
    --bs-btn-disabled-border-color: #ffdf00;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #14abab;
    --bs-btn-border-color: #14abab;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f9b9b;
    --bs-btn-hover-border-color: #0f9b9b;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0f9b9b;
    --bs-btn-active-border-color: #0f9b9b;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(0 0 0 / 0%);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #e42855;
    --bs-btn-border-color: #e42855;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.select2-container--default .select2-selection--multiple, .select2-container--default .select2-search--dropdown .select2-search__field {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-dropdown {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-menu-dropdown-box-shadow);
    z-index: 9999;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-body-light-bg);
    color: var(--bs-heading-color);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--primary-color);
    color: black;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-size: 16px 12px;
    background-repeat: no-repeat;
    background-position: center;
    height: 35px;
    width: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--bs-body-light-bg);
    border: none;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 15px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-color: transparent;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-heading-color);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-body-light-bg);
    border: none;
    font-size: 0.9rem;
    margin-top: 4px;
    line-height: 2;
    padding-right: 8px;
    padding-left: 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--bs-danger);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    line-height: 2;
}

.select2-container--default .select2-selection--multiple, .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--bs-border-color);
    max-height: 38px;
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 320px;
}
.select2-selection.is-invalid{
    border-color: var(--bs-form-invalid-border-color)!important;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
input:focus-visible {
    outline: none;
}

/* margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent; */
/* width */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #1e1e1e;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.main .aside {
    width: var(--aside-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--bs-body-light-bg);
    z-index: 99;
}

.main .aside .aside-inner {
    height: 100%;
    position: relative;
}

.main .aside .aside-inner .aside-menu {
    padding: 20px 14px;
}

.main .aside .aside-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 14px;
    font-family: var(--header-font);
}

.main .aside .aside-footer .btn {
    font-weight: 300;
    font-size: 14px;
}

.main .aside .aside-footer .action>* {
    width: 100%;
    margin-bottom: 20px;
}

.aside .logo-wrap {
    background-color: var(--bs-body-bg);
    height: var(--header-height);
    margin-bottom: 20px;
    border-bottom: solid 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    padding: 10px 14px;
}

.aside .logo img {
    height: 36px;
}

.aside ul {
    margin: 0;
}

.aside ul li {
    padding: 6px 0;
}

.aside .nav-link {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 15px;
    color: var(--bs-body-color);
}

.aside .nav-link.active:not(:disabled), .aside .nav-link:not(:disabled):hover {
    background-color: #2d2d2f;
    color: var(--bs-heading-color);
}

.aside .nav-link.active:not(:disabled) {
    color: var(--primary-color);
}

.main .content-wrapper {
    padding-left: var(--aside-width);
}

.main .content-header {
    background-color: var(--bs-body-bg);
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100% - var(--aside-width));
    padding-left: 26px;
    z-index: 999;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-menu-dropdown-box-shadow);
    height: var(--header-height);
}

.main .content-header .header-wrap {
    height: 100%;
    /* align-content: flex-end; */
    display: flex;
    align-items: flex-end;
    max-width: 1320px;
    justify-content: space-between;
    margin: 0 auto;
}

.main .content-header .title {
    font-size: 15px;
    margin-right: 28px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
}

.main .content-header .title i {
    color: var(--primary-color);
    position: relative;
    top: 1px;
    font-size: 17px;
}

.main .content-header .nav-tabs {
    font-size: 14px;
}

.main .content-header .nav-tabs button {
    border: none;
}

.main .content-header .nav-tabs button.active {
    background-color: var(--primary-color);
    color: black;
}

.main #main-app #home-panel-wrap > .tab-pane.parent-screen, #snipet-tab-wrap > .tab-pane{
    padding-top: 86px;
    padding-left: 26px;
    padding-right: 20px;
    padding-bottom: 60px;
}
.main #main-app #home-panel-wrap > .tab-pane.parent-screen{
    max-width: 1230px;
    margin: 0 auto;
}
#main-app #home-welcome-panel > .feature{
    height: calc(100vh - 60px);
    margin-top: 60px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}
header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 9;
}

.header .header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    max-width: 1320px;
    margin: 0 auto;
}

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

.form-group.form-check {
    display: flex;
    flex-direction: column;
    padding-left: 0;
}

.form-group.form-check input {
    margin: 12px 0px;
}

label[requi]:after {
    content: "*";
    color: var(--bs-danger);
}

.nav-link {
    position: relative;
}

/* .nav-link.active.warning {
    background-color: var(--bs-danger) !important;
    color: white;
} */
.nav-link.warning {
    color: var(--bs-danger) !important;
}

.nav-link.warning::before {
    content: "*";
    display: inline-block;
    /* width: 6px;
    height: 6px;
    border-radius: 5px;
    background: var(--bs-danger)!important; */
    position: absolute;
    right: -9px;
    top: 6px;
}

.aside .nav-link.warning::before {
    right: 8px;
}

.form-check.form-switch input, .form-check.form-switch label {
    cursor: pointer;
}

/* code box style */
.code-box {
    margin-bottom: 30px;
}

.template-content {
    display: none;
}

.code-box pre {
    position: relative;
}

.code-box pre code {
    font-size: 12px;
    max-height: calc(100vh - 146px);
    overflow-y: scroll;
    margin-bottom: 0px;
    margin-top: 0;
    border-radius: 0;
    position: relative;
    font-family: var(--bs-font-monospace);
}

.highlight-toolbar .copy-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.highlight-toolbar .copy-btn svg {
    margin-right: 7px;
    width: 16px;
}

.highlight-toolbar {
    background: #2f2f2f;
    color: #cdcdcd;
    width: 100%;
    top: 0;
    opacity: 1;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
    font-size: 13px;
    align-items: center;
    left: 0;
    border-radius: 5px 5px 0px 0;
    font-weight: 500;
    height: 40px;
}

.highlight-toolbar * {
    line-height: 1;
}

.highlight-toolbar span {
    line-height: 1;
    font-size: 12px;
    font-weight: 500;
    font-size: 13px;
}

.highlight-toolbar button {
    opacity: 1;
    box-shadow: none;
    background: none;
    line-height: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
}

div.code-toolbar .copy-to-clipboard-button[data-copy-state="copy-success"]::before {
    opacity: 0;
}

code.hljs, code[class*="language-"], pre[class*="language-"] {
    font-size: 14px;
    word-wrap: normal;
    color: #fff;
    -webkit-hyphens: none;
    hyphens: none;
    line-height: 1.5;
    tab-size: 4;
    text-align: left;
    white-space: pre;
    word-break: normal;
    word-spacing: normal;
    background: #0d0d0d;
    border: solid 1px var(--bs-border-color);
}

.hljs-comment, .hljs-quote {
    color: hsla(0, 0%, 100%, 0.5);
    font-weight: 300;
}

.hljs-doctag, .hljs-keyword, .hljs-formula {
    color: #2e95d3;
}

.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
    color: #e06c75;
}

.hljs-literal {
    color: #2e95d3;
}

.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta .hljs-string {
    color: #00a67d;
}

.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number {
    color: #df3079;
}

.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
    color: #f22c3d;
    font-weight: 400;
}

.hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title {
    color: #e9950c;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 700;
}

.hljs-link {
    text-decoration: underline;
}

/* end code box style */
.tab-content {
    font-size: 14px;
}

.help-block {
    font-style: italic;
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-secondary-color);
}

.form-label {
    font-weight: 500;
}

.row.disable .form-group {
    opacity: 0.5;
    pointer-events: none;
}

/* select2 */
.select2-container .select2-selection--single {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    height: auto;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-container .select2-selection--single {
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    padding-right: 30px;
}

/* meta box */
.security-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.security-checks>label {
    display: block;
    width: 100%;
}

.more-option-title {
    cursor: pointer;
}

.more-option-title h5 {
    margin-bottom: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.more-option-wrap.open .more-option-title h5 {
    color: var(--primary-color);
}

.more-option-title .toggle .toggle-icon {
    border: solid #434343;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.more-option-title .toggle.up .toggle-icon {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    border-color: var(--primary-color);
}

.more-option-title .toggle {
    display: block;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-option-title {
    display: flex;
    justify-content: space-between;
    border-top: dashed 1px var(--bs-secondary-border-subtle);
    padding-top: 12px;
    margin-top: 4px;
    margin-bottom: 8px;
    align-items: center;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    /* border-bottom: solid 1px var(--bs-secondary-border-subtle); */
}

.page-header .page-title {
    font-size: 20px;
    margin-bottom: 0;
}

.page-header .toolbar {
    display: flex;
}

.page-header .toolbar .nav .nav-link {
    /* margin-right: 20px;
    color: var(--bs-body-color);
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
    border-bottom: solid 3px transparent;
    margin-right: 30px; */
}

.page-header .toolbar .nav-underline {
    margin-right: 30px;
}

.nav .nav-link.active {
    color: var(--bs-nav-link-color);
    border-color: currentColor;
}

.card {
    background-color: var(--bs-body-light-bg);
}

.add-metadata {
    width: 100%;
    height: 70px;
    border: dashed 1px var(--bs-secondary-border-subtle);
    border-radius: 0.43rem;
    text-align: center;
    display: grid;
    cursor: pointer;
    transition: all ease 0.3s;
}

.add-metadata:hover {
    border-color: var(--bs-border-opacity);
    color: var(--bs-heading-color);
}

.metadata {
}

/* repeater */
.meta-field-item {
    position: relative;
    margin-bottom: 18px;
}

.meta-field-item .delete-field {
    top: 23px;
    right: 18px;
    position: static;
    margin-left: 18px;
}

.delete-field {
    position: absolute;
    top: -5px;
    right: -9px;
    width: 26px;
    height: 26px;
    padding: 6px;
    border-radius: 40px;
    background: var(--bs-danger-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all ease 0.3s;
}

.delete-field svg {
    fill: var(--bs-danger);
}

.delete-field:hover {
    background-color: var(--bs-danger);
}

.delete-field:hover svg {
    fill: white;
}

[data-repeater-list] .add-multi-value .inner {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

[data-repeater-list] .add-multi-value .inner .form-control {
    width: auto;
}

[data-repeater-list] .add-multi-value .multi-action {
    width: 26px;
    height: 26px;
    padding: 6px;
    border-radius: 40px;
    background: var(--bs-primary-bg-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all ease 0.3s;
}

[data-repeater-list] .add-multi-value .multi-action.remove {
    background: var(--bs-danger-bg-subtle);
    transform: rotate(45deg);
}

[data-repeater-list] .add-multi-value .multi-action svg {
    fill: var(--bs-primary);
}

[data-repeater-list] .add-multi-value .multi-action:hover {
    background-color: var(--bs-primary);
}

[data-repeater-list] .add-multi-value .multi-action.remove svg {
    fill: var(--bs-danger);
}

[data-repeater-list] .add-multi-value .multi-action.remove:hover {
    background-color: var(--bs-danger);
}

[data-repeater-list] .add-multi-value .multi-action:hover svg {
    fill: white;
}

.multi-options-drag .drag-wrap {
    background: var(--bs-body-bg);
    border: dashed 1px var(--bs-secondary-border-subtle);
    padding: 20px;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    position: relative;
}

.multi-options-drag .drag-wrap .result-item {
    background: var(--bs-body-light-bg);
    border-radius: 2px;
    padding: 3px 12px;
    cursor: pointer;
    line-height: 1.4;
    display: inline-block;
    transition: all ease 0.3s;
    position: relative;
    white-space: nowrap;
}

.ui-sortable-helper {
    background-color: var(--border-color);
    border: dashed 1px grey;
}

.drag-wrap .item-dragging {
    background: rgb(203, 203, 203);
    border-radius: 2px;
}

.multi-options-drag .drag-wrap .result-item.default-op::before {
    content: "";
    display: inline-block;
    transform: rotate(45deg);
    height: 12px;
    width: 6px;
    margin-right: 8px;
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    margin-bottom: 1px;
}

.multi-options-drag .drag-wrap .result-item:hover, .multi-options-drag .drag-wrap .result-item.current {
    background: var(--primary-color);
    color: black;
}

.icon-svg svg {
    width: 18px;
    fill: currentColor;
    vertical-align: middle;
}

.icon-svg {
    line-height: 1;
}

.card-dragging {
    border: 1px dotted black;
    margin: 0 2px 2px 0;
    height: 50px;
    background: red;
}

.generator-code-action {
    /* position: relative; */
    z-index: 105;
    /* bottom: 40px; */
    /* right: 50px; */
    width: 100%;
    margin-bottom: 30px;
}

.generator-code-action.generator button {
    pointer-events: none;
}

.generator-code-action #setting_code {
    border-left: solid 1px #343b41;
}

.generator-code-action.generator #setting_code {
    display: none;
}

.generator-code-action.generator #update_code {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

.generator-code-action .dropdown-toggle::after {
    display: none;
}

.generator-code-action .dropdown-menu {
    font-size: 14px;
}

.generator-code-action button {
    font-size: 15px;
}

.generator-code-action .btn-group button {
    transition: all ease .2s;
    transform-origin: right;
}

.generator-code-action.waiting #setting_code {
    width: 0px;
    padding: 0;
    font-size: 0;
    /* display: none; */
}

.generator-code-action.waiting #update_code:disabled {
    border-top-right-radius: var(--bs-btn-border-radius) !important;
    border-bottom-right-radius: var(--bs-btn-border-radius) !important;
}

.generator-code-action #update_code:disabled {
}

/***** Component *****/
.dropdown-menu {
    --bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    box-shadow: var(--bs-menu-dropdown-box-shadow);
}

.dropdown-menu-dark {
    border: none;
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    background-color: var(--bs-gray-300);
    border: none;
}

.form-switch .form-check-input:checked {
    background-color: var(--primary-color);
}

.form-switch .form-check-input:focus {
    box-shadow: none;
}

.form-check.form-switch input, .form-check.form-switch label {
}

/***** End Component *****/
.overall-metabox-setting {
    font-size: 26px;
    cursor: pointer;
}

.overall-metabox-setting:hover {
    color: var(--primary-color);
}

.btn.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: calc(1.5em + 1.55rem + 2px);
    width: calc(1.5em + 1.55rem + 2px);
    line-height: 1;
}

.btn.btn-icon i {
    display: inline-flex;
    font-size: 22px;
    vertical-align: middle;
}

#nav_show_code .active {
    color: var(--primary-color);
    background-color: transparent;
}

#nav_show_code i {
    font-size: 20px;
    position: relative;
    top: 3px;
}

/* admin column */
.admin-colum-wrap .card-title {
    color: var(--primary-color);
    text-transform: capitalize;
    font-size: 15px;
}

.admin-drag-frame {
    padding: 20px;
    border: dashed 1px var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

.admin-drag-frame.admin-table-columns:not(:has(.column-item))::before {
    content: "Drag the field item into this box to create an admin column";
    width: 100%;
    text-align: center;
    display: inline-block;
    opacity: 0.5;
    line-height: normal;
}

.admin-drag-frame .column-item {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bs-body-light-bg);
    margin: 6px 8px;
    /* margin-bottom: 8px; */
    white-space: nowrap;
    cursor: move;
}

.admin-drag-frame .column-item.current {
    background-color: var(--primary-color);
    color: black;
}

.admin-drag-frame .column-item.sort::before {
    font-family: obelixicons-solid !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e94b";
    margin-right: 4px;
}

/* .dashicons-icontools {
    position: relative;
}

.dashicons-icontools #search_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-46%);
    right: 5px;
    display: inline-block;
    cursor: pointer;
    height: 31px;
    width: 30px;
    line-height: 32px;
    text-align: center;
    font-size: 18px;
    transition: all ease .3s;
}

.dashicons-icontools input[name="menu_icon"] {
    padding-right: 44px;
    padding-left: 39px;
}

.dashicons-icontools #preview_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-46%);
    left: 11px;
    border-radius: 3px;
}

.dashicons-icontools.warning #preview_icon {
    background: var(--bs-danger);
}

.dashicons-icontools.warning #search_icon {
    right: 30px;
} */
.form-group.menu_icon .icon-wp {
    display: flex;
    align-items: center;
}

/* .dashicons-icontools span.select2 {
    display: none;
    position: absolute;
    bottom: -100%;
}
.dashicons-icontools.open-select input[name="menu_icon"]{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dashicons-icontools.open-select span.select2 {
    display: inline;
}
.dashicons-icontools .select2-container--default .select2-selection--single{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
} */
#select2-select_dashicons_list-results {
    max-height: 700px;
}

.form-group .label-replace {
    display: none;
}

.form-group.field-type .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--primary-color);
}

.form-group.field-type .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffdf00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/***** Taxonomy *****/
.show-if-tax-public.disable, .show-if-tax-custom-query.disable, .show-if-tax-rewrite.disable, .show-if-tax-capabilities.disable {
    opacity: 0.5;
    pointer-events: none;
}

/***** End Taxonomy *****/
.obelix-table {
}

.obelix-table .table-row>.form-label {
    width: 25%;
    margin-bottom: 0;
}

.obelix-table .table-row {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
}

.obelix-table .table-row .form-group, .obelix-table .table-row .form-check {
    margin-bottom: 0;
    flex: 1;
}

.field_group.supports .supports {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.form-check-label {
    cursor: pointer;
}

.card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}

.card .card-header .card-title {
    display: flex;
    align-items: center;
    margin: 0.5rem;
    margin-left: 0;
}

.card .card-header .card-toolbar {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}

.add-repeater-group {
    cursor: pointer;
}

.add-repeater-group:hover {
    color: var(--primary-color);
}

.metadata {
    position: relative;
    padding: 10px 0px;
}

.metadata .repeater-drop .drop-inner {
    width: 100%;
    border: solid 1px var(--bs-secondary-border-subtle);
    border-radius: 0.43rem;
    transition: all ease 0.3s;
    margin-bottom: 30px;
    /* padding: 20px; */
    background: black;
    position: relative;
}

.metadata .repeater-drop .meta-field-group {
    min-height: 80px;
    padding: 20px;
    position: relative;
}

.metadata .repeater-drop .meta-field-group:not(:has(.meta-field-item))::before {
    content: "Drag and drop meta field to here";
    width: 100%;
    text-align: center;
    display: inline-block;
    opacity: 0.5;
    line-height: 50px;
}

.metadata .repeater-drop .title {
    font-size: 15px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.metadata .repeater-drop .meta-field-group .meta-field-item:last-child {
    margin-bottom: 0;
}

.metadata .card-header .form-group label {
    margin-bottom: 0;
    margin-right: 8px;
    white-space: nowrap;
}

.drop-header {
    display: flex;
    align-items: center;
    gap: 30px;
    white-space: nowrap;
    padding: 12px 20px;
    padding-right: 60px;
    /* padding-bottom: 14px; */
    border-bottom: solid 1px var(--bs-border-color-translucent);
    cursor: move;
}

.ui-sortable-helper {
    transform: scale(0.99);
    transition: transform 0.1s ease-in;
    border: none;
    background: none;
}

.metadata .card .card-header .card-title {
    min-width: 400px;
}

.metadata .card-header .form-group.field-type {
    min-width: 280px;
    margin-bottom: 0;
}

.toggle-btn {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 28px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    background: #0a0a0a;
    border-radius: 4px;
}

.toggle-btn:hover {
    color: var(--primary-color);
}

.toggle-btn.hide {
    transform: rotate(180deg);
}

.metadata .card .card-header {
    border-bottom: none;
    cursor: move;
    /* padding-right: 62px; */
}

.metadata .card .card-body {
    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

/* .drag-item {
	margin: 5px 0;
	padding: 10px;
	border: 1px solid #000;
	background-color: #f9f9f9;
	cursor: move;
}

.meta-field-group {
	border: 2px dashed #007bff;
	min-height: 50px;
	padding: 5px;
	background-color: #fff;
}

.ui-state-highlight {
	height: 1.5em;
	line-height: 1.2em;
	background-color: #e0e0e0;
	border: 1px dashed #ccc;
}
.ui-sortable-helper {
	transform: rotate(5deg);
	transition: transform 0.1s ease-in;
}
.ui-sortable-placeholder {
	background-color: #404040;
	margin: 10px;
	padding: 10px;
} */
/*----------- * * Field type icons * *--------------------*/
.field-type-icon {
    box-sizing: border-box; 
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
    /* top: -4px; */
    background-color: #ffdf0000;
    /* border-width: 1px; */
    /* border-style: solid; */
    /* border-color: #ffdf00; */
    /* border-radius: 100%; */
}

.field-type-icon:before {
    content: "";
    width: 18px;
    height: 18px;
    position: relative;
    background-color: #ffdf00;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url("../images/field-type-icons/icon-field-accordion.svg");
    mask-image: url("../images/field-type-icons/icon-field-default.svg");
}
.select-field-icon [class*="field-type-icon-col-"]:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-column.svg");
    mask-image: url("../images/field-type-icons/icon-field-column.svg");
}

.field-type-icon.field-type-icon-date-range-picker:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-date-range-picker.svg");
    mask-image: url("../images/field-type-icons/icon-field-date-range-picker.svg");
}

.field-type-icon.field-type-icon-html:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-html.svg");
    mask-image: url("../images/field-type-icons/icon-field-html.svg");
}

.field-type-icon.field-type-icon-iframe:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-iframe.svg");
    mask-image: url("../images/field-type-icons/icon-field-iframe.svg");
}

.field-type-icon.field-type-icon-text:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-text.svg");
    mask-image: url("../images/field-type-icons/icon-field-text.svg");
}

.field-type-icon.field-type-icon-textarea:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-textarea.svg");
    mask-image: url("../images/field-type-icons/icon-field-textarea.svg");
}

.field-type-icon.field-type-icon-textarea:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-textarea.svg");
    mask-image: url("../images/field-type-icons/icon-field-textarea.svg");
}

.field-type-icon.field-type-icon-number:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-number.svg");
    mask-image: url("../images/field-type-icons/icon-field-number.svg");
}

.field-type-icon.field-type-icon-range:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-range.svg");
    mask-image: url("../images/field-type-icons/icon-field-range.svg");
}

.field-type-icon.field-type-icon-email:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-email.svg");
    mask-image: url("../images/field-type-icons/icon-field-email.svg");
}

.field-type-icon.field-type-icon-url:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-url.svg");
    mask-image: url("../images/field-type-icons/icon-field-url.svg");
}

.field-type-icon.field-type-icon-password:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-password.svg");
    mask-image: url("../images/field-type-icons/icon-field-password.svg");
}

.field-type-icon.field-type-icon-image:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-image.svg");
    mask-image: url("../images/field-type-icons/icon-field-image.svg");
}

.field-type-icon.field-type-icon-file:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-file.svg");
    mask-image: url("../images/field-type-icons/icon-field-file.svg");
}

.field-type-icon.field-type-icon-wysiwyg:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-wysiwyg.svg");
    mask-image: url("../images/field-type-icons/icon-field-wysiwyg.svg");
}

.field-type-icon.field-type-icon-oembed:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-oembed.svg");
    mask-image: url("../images/field-type-icons/icon-field-oembed.svg");
}

.field-type-icon.field-type-icon-gallery:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-gallery.svg");
    mask-image: url("../images/field-type-icons/icon-field-gallery.svg");
}

.field-type-icon.field-type-icon-select:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-select.svg");
    mask-image: url("../images/field-type-icons/icon-field-select.svg");
}

.field-type-icon.field-type-icon-checkbox:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-checkbox.svg");
    mask-image: url("../images/field-type-icons/icon-field-checkbox.svg");
}

.field-type-icon.field-type-icon-radio:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-radio.svg");
    mask-image: url("../images/field-type-icons/icon-field-radio.svg");
}

.field-type-icon.field-type-icon-button-group:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-button-group.svg");
    mask-image: url("../images/field-type-icons/icon-field-button-group.svg");
}

.field-type-icon.field-type-icon-true-false:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-true-false.svg");
    mask-image: url("../images/field-type-icons/icon-field-true-false.svg");
}

.field-type-icon.field-type-icon-link:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-link.svg");
    mask-image: url("../images/field-type-icons/icon-field-link.svg");
}

.field-type-icon.field-type-icon-post-object:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-post-object.svg");
    mask-image: url("../images/field-type-icons/icon-field-post-object.svg");
}

.field-type-icon.field-type-icon-page-link:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-page-link.svg");
    mask-image: url("../images/field-type-icons/icon-field-page-link.svg");
}

.field-type-icon.field-type-icon-relationship:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-relationship.svg");
    mask-image: url("../images/field-type-icons/icon-field-relationship.svg");
}

.field-type-icon.field-type-icon-taxonomy:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-taxonomy.svg");
    mask-image: url("../images/field-type-icons/icon-field-taxonomy.svg");
}

.field-type-icon.field-type-icon-user:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-user.svg");
    mask-image: url("../images/field-type-icons/icon-field-user.svg");
}

.field-type-icon.field-type-icon-google-map:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-google-map.svg");
    mask-image: url("../images/field-type-icons/icon-field-google-map.svg");
}

.field-type-icon.field-type-icon-date-picker:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-date-picker.svg");
    mask-image: url("../images/field-type-icons/icon-field-date-picker.svg");
}

.field-type-icon.field-type-icon-date-time-picker:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-date-time-picker.svg");
    mask-image: url("../images/field-type-icons/icon-field-date-time-picker.svg");
}

.field-type-icon.field-type-icon-time-picker:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-time-picker.svg");
    mask-image: url("../images/field-type-icons/icon-field-time-picker.svg");
}

.field-type-icon.field-type-icon-color-picker:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-color-picker.svg");
    mask-image: url("../images/field-type-icons/icon-field-color-picker.svg");
}

.field-type-icon.field-type-icon-icon-picker:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-icon-picker.svg");
    mask-image: url("../images/field-type-icons/icon-field-icon-picker.svg");
}

.field-type-icon.field-type-icon-message:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-message.svg");
    mask-image: url("../images/field-type-icons/icon-field-message.svg");
}

.field-type-icon.field-type-icon-accordion:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-accordion.svg");
    mask-image: url("../images/field-type-icons/icon-field-accordion.svg");
}

.field-type-icon.field-type-icon-tab:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-tab.svg");
    mask-image: url("../images/field-type-icons/icon-field-tab.svg");
}

.field-type-icon.field-type-icon-group:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-group.svg");
    mask-image: url("../images/field-type-icons/icon-field-group.svg");
}

.field-type-icon.field-type-icon-repeater:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-repeater.svg");
    mask-image: url("../images/field-type-icons/icon-field-repeater.svg");
}

.field-type-icon.field-type-icon-flexible-content:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-flexible-content.svg");
    mask-image: url("../images/field-type-icons/icon-field-flexible-content.svg");
}

.field-type-icon.field-type-icon-clone:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-clone.svg");
    mask-image: url("../images/field-type-icons/icon-field-clone.svg");
}

/* .field-type-icon.field-type-icon-post:before {
  -webkit-mask-image: url('../images/field-type-icons/icon-field-post-object.svg');
  mask-image: url('../images/field-type-icons/icon-field-post-object.svg');
}
.field-type-icon.field-type-icon-page:before {
  -webkit-mask-image: url('../images/field-type-icons/icon-field-post-object.svg');
  mask-image: url('../images/field-type-icons/icon-field-post-object.svg');
}*/
.field-type-icon.field-type-icon-category:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-group.svg");
    mask-image: url("../images/field-type-icons/icon-field-group.svg");
}

.field-type-icon.field-type-icon-tags:before {
    -webkit-mask-image: url("../images/field-type-icons/icon-field-taxonomy.svg");
    mask-image: url("../images/field-type-icons/icon-field-taxonomy.svg");
}

.select-field-icon .field-type-icon {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    top: 3px;
}

.select-field-icon .field-type-icon::before {
    width: 18px;
    height: 18px;
}

.select2-container--default .select2-results__option[aria-selected="true"] .select-field-icon .field-type-icon::before {
    background-color: black;
}

.form-group.field-type .select2 {
    width: 100% !important;
}

.drop-state-highlight {
    background: var(--bs-body-light-bg);
    border-radius: var(--bs-border-radius);
    margin-bottom: 18px;
}

.form-control.spectrum.sp-colorize {
    border-color: transparent;
    border-radius: 0;
}

.flex-stack {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/***** Snippet library *****/
.snippets-main .snippet-item {
    transition: all 0.3s;
}

.snippets-main .snippet-item.hide {
    opacity: 0;
    top: 0;
    left: 0;
    transform: scale(0);
    position: absolute;
}

.snippets-main .snippet-item .item-name {
    font-size: 17px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.snippets-main .snippet-item .item-description {
    /* opacity: 0.8; */
    /* font-size: 14px; */
}

.snippets-main .snippet-item .item-description p {
    margin-bottom: 0;
    color: #c3c3c3;
}

.snippets-main .snippet-item:hover .item-description {
    opacity: 0;
}

.snippets-main .snippet-item .item-buttons {
    display: flex;
    justify-content: space-between;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    align-items: center;
    transform: translateY(50%);
}

.snippets-main .snippet-item:hover .item-buttons {
    opacity: 1;
}

.snippets-main .item-actions {
    position: relative;
}

.snippets-main .card-body {
    position: relative;
    overflow: hidden;
}

.snippets-main .added-label {
    position: absolute;
    right: -20px;
    top: 6px;
    transform: rotate(45deg);
    font-size: 12px;
    text-align: center;
    /* width: 80px; */
    padding: 3px 16px;
    line-height: 1;
    font-weight: 500;
    background-color: var(--primary-color);
    color: black;
    pointer-events: none;
    opacity: 0;
}

.snippets-main .item-added .added-label {
    opacity: 1;
}

.snippets-main .item-added .card {
    border-color: var(--primary-color);
}

.snippets-main .item-added .card .item-name {
    color: var(--primary-color);
}

.snippets-main .snippet-preview {
    text-decoration: none;
    color: white;
    opacity: 0.6;
}

.snippets-main .snippet-preview:hover {
    opacity: 1;
    color: var(--primary-color);
}

.snippets-category .nav .nav-link.active {
    --bs-nav-link-color: var(--primary-color);
}

#added_count {
    cursor: pointer;
}

#added_count:hover {
    color: var(--primary-color);
}

/***** End Snippet library *****/
#counter_render {
    font-size: 14px;
    margin-right: 28px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    font-family: var(--header-font);
}

#counter_render svg {
    position: relative;
    width: 18px;
    fill: #ff3d3d;
}

#counter_render strong {
    margin-left: 10px;
    margin-right: 4px;
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative;
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    *display: inline;
}

.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative;
}

.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
    *display: inline;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
    *display: inline;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
    text-align: left;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
    display: block;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
    display: block;
    -webkit-backface-visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
    display: block;
    -webkit-transform: translateZ(0);
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
    position: absolute;
}

.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
}

.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    font-family: var(--header-font);
    line-height: 1;
}

.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
    text-align: center;
}

/* empty wrap */
.empty-notice-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 48px;
    padding-bottom: 48px;
}

.empty-notice-wrapper .empty-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    text-align: center;
    max-width: 420px;
    min-height: 320px;
}

.empty-notice-wrapper .empty-inner img {
    height: 90px;
}

.empty-notice-wrapper .no-term-meta-inner.empty-inner img {
    height: 40px;
}

.empty-notice-wrapper .empty-inner h2 {
    margin-top: 25px;
    font-size: 24px;
    width: 100%;
}

.empty-notice-wrapper .empty-inner p {
    font-size: 14px;
    margin-top: 6px;
    opacity: .8;
}

.empty-notice-wrapper .empty-inner button {
    margin-top: 10px;
}

/* feature */
.feature {
    background-repeat: no-repeat;
    background-size: cover;
}

.feature .box-text {
    padding: 50px 36px 12px 50px;
    height: 100%;
}
.feature .box-text .box-text-inner{

}
.feature .box-text h1 {
    font-size: 28px;
    margin-bottom: 18px;
}

.feature .box-text p {
    /* font-size: 17px; */
}

.feature .box-code {
    margin-top: 40px;
    height: calc(100% - 200px);
}
.feature .fake-browse .browse-body, .feature  .fake-browse{
    height: 100%;
}
.feature .logo-icon {
    width: 56px;
    margin-bottom: 30px;
}

.feature .card {
    border: none;
    background-color: #00000061;
    backdrop-filter: blur(8px);
}

.feature .card .form-control {
    border-color: #1f1f1f70;
    background-color: #00000061;
    backdrop-filter: blur(8px);
}
.feature .card .form-control::placeholder{
    color: var(--primary-color);
    font-size: 13px;
    font-style: italic;
}
.feature .card-body {
    border: none;
}

.feature .box-code {
}

.fake-browse .browse-bar {
    background: #2f2f2f;
    padding: 10px 12px;
    border: none;
    border-top-left-radius: 7px;
}

.fake-browse .dot-group {
    display: flex;
    gap: 10px;
}

.fake-browse .dot-group .dot {
    border-width: 1px;
    border-style: solid;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    display: inline-block;
}

.fake-browse .dot-group .dot.red {
    border-color: #e12b24;
    background-color: #ed695f;
}

.fake-browse .dot-group .dot.yellow {
    border-color: #ca8a04;
    background-color: #f4be50;
}

.fake-browse .dot-group .dot.green {
    border-color: #16a34a;
    background-color: #62c654;
}

.fake-browse .browse-body {
    background: #0d0d0d;
    padding: 0px 12px;
}
.fake-browse .browse-body pre {
   font-size: 12px!important;
   margin-bottom: 0;
}

#code-block, #fake-browse-code, .hightlight-code {
    border: none!important;
    border-radius: 7px;
    padding: 8px 20px;
    font-size: 13px!important;
}