[for='editor.js'] .editorJs { background-color: white; border: 1px solid var(--dh-bc04); } [for='editor.js'] .ce-block__content { max-width: 100%; padding: 10px 70px; } [for='editor.js'] .ce-toolbar__content { max-width: 100%; padding: 0; } [for='editor.js'] .ce-toolbar__actions { left: 10px; } [for='editor.js'] .ce-toolbar { z-index: 1000; } .ct--bottom .ct__content * { color: white; } .ct--bottom .ce-toolbar__plus-shortcut { color: var(--dh-ts10); }#popup { position: relative; top: 0; left: 0; pointer-events: none; } #popup > .popup { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 1000001; overflow: hidden; } #popup > .popup > .overlay { background: black; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; pointer-events: auto; } #popup > .popup > .overlay.click-false { pointer-events: none; } #popup > .popup > div > .html { background: #fff; pointer-events: auto; z-index: 1000000; position: relative; height: 100%; } #popup > .popup .drag, #popup > .popup .resizable { touch-action: none; } #popup > .popup .drag { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } #popup > .popup div > .resize { display: none; } #popup > .popup > div > .html { width: fit-content; height: fit-content; } #popup > .popup > .sizeW > .html { width: 100%; } #popup > .popup > .sizeH > .html { height: 100%; } #popup > .popup .resizable > .resize { position: absolute; height: 100%; width: 6px; cursor: ew-resize; touch-action: none; transition: background 0.1s; z-index: 5000000; pointer-events: auto; display: block; } #popup > .popup .resizable > .resize:hover, #popup > .popup .resizable > .resize.active { background: var(--dh-brp10); } #popup > .popup .resizable > .resize:hover { z-index: 5000000; } #popup > .popup .resizable > .resize[resize='right'] { right: -3px; } #popup > .popup .resizable > .resize[resize='left'] { left: -3px; } #popup > .popup .resizable > .resize[resize='bottom'] { height: 6px; bottom: -3px; width: 100%; cursor: ns-resize; } #popup .popup > div > .html, #popup .popup > div { width: fit-content; height: fit-content; background: transparent; }#popup [data-id^=event-click] > div > .html, #popup [data-id^=event-click] > div { width: fit-content; height: fit-content; background: transparent!important; }#popup [data-id^=event-contextmenu] > div > .html, #popup [data-id^=event-contextmenu] > div { width: fit-content; height: fit-content; background: transparent!important; } #popup [data-id^=event-hover] .event.dark { background: #292929; padding: 1px 8px; border: 1px solid var(--dh-bc01); color: #fff; font-size: 11px; border-radius: 5px; } #popup [data-id^=event-hover] > div > .html { width: fit-content; height: fit-content; background: transparent!important; pointer-events: none; } #popup [data-id^=notification] .notification { max-width: 300px; margin: 0 auto; border-radius: 3px; display: flex; align-items: center; cursor: pointer; } #popup [data-id^=notification] .left { margin-right: 15px; margin-left: 15px; height: 20px; width: 20px; text-align: center; } #popup [data-id^=notification] .left i { font-size: 26px!important; } #popup [data-id^=notification] .left i, #popup [data-id^=notification] .right { color: white; } #popup [data-id^=notification] .right { color: white; font-size: 13px; padding-right: 15px; font-weight: 500; padding-top: 10px; padding-bottom: 10px; letter-spacing: 0.5px; }#popup [data-id^=notification] .danger { background: var(--dh-danger10); }#popup [data-id^=notification] .neutral { background: #fff; } #popup [data-id^=notification] .neutral .left i, #popup [data-id^=notification] .neutral .right { color: var(--dh-tp10); } #popup [data-id^=notification] .neutral .right { color: var(--dh-tp10); }#popup [data-id^=notification] .success { background: var(--dh-success10); }[animation-name], .animations { opacity: 0; } .spa-fade { opacity: 0; }part[for="applications.dropdown"] .apps-opener * { color:white; } part[for="applications.dropdown"] .apps-opener { display: flex; justify-content: space-between; align-items: center; padding: 2px 9px; cursor:pointer; background: #2B2B2E; } part[for="applications.dropdown"].light .apps-opener { background: #fbfbfb; border: 1px solid var(--dh-bc04); } part[for="applications.dropdown"] .apps-opener p { display: flex; flex-direction: column; margin-right: 40px; line-height: 1; } part[for="applications.dropdown"] .apps-opener p span {color:var(--dh-ts10); font-size: 10px;} part[for="applications.dropdown"] .apps-opener p span:last-child {color: #fff; font-size: 12px;} part[for="applications.dropdown"].light .apps-opener p span:last-child {color: var(--dh-tp10); font-size: 12px;} part[for="applications.dropdown"].light .apps-opener i { border-left: 1px solid var(--dh-bc04); } part[for="applications.dropdown"] .apps-opener i { position: absolute; right: 0; height: 100%; width: 25px; display: flex; align-items: center; justify-content: center; background: var(--dh-bc01); color:var(--dh-ts10); font-size:11px; font-size: 16px; } part[for="button.default"] > * { font-size: 14px; font-weight: 600; padding: 0 20px; border-radius: 0; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap:10px; height: 44px; min-width: 100%; color: white; background: var(--dh-bgp10); border: 1px solid var(--dh-bgp10); cursor: pointer; } part[for="button.default"].w150 { width: 150px!important; } part[for="button.default"] > *:hover { color: var(--dh-bgp10); background: white; border: 1px solid var(--dh-bgp10); } part[for="button.default"].medium > * { height: 40px; } part[for="button.default"].small > * { height: 36px; font-size: 13px; } part[for="button.default"].transparent > * { background: transparent; color: var(--dh-tp10); border: 1px solid var(--dh-bc10); } part[for="button.default"].transparent:hover > * { border: 1px solid var(--dh-bgp10); } part[for="button.default"].transparentWhite > * { background: transparent; color: white; border: 1px solid white; } part[for="button.default"].transparentWhite:hover > * { background: white; color: var(--dh-bgp10); border: 1px solid white; } part[for="button.default"].danger > * { background: transparent; color: var(--dh-danger10); border: 1px solid var(--dh-danger10); } part[for="button.default"].danger:hover > * { background: var(--dh-danger10); color: white; border: 1px solid var(--dh-danger10); } part[for="button.default"].highlight > * { background: var(--dh-brp10); color: white; border: 1px solid var(--dh-brp10); } part[for="button.default"].highlight:hover > * { color: var(--dh-bgp10); border: 1px solid var(--dh-bgp10); background:white } part[for="button.default"].success > * { background: var(--dh-success10); color: white; border: 1px solid var(--dh-success10); } part[for="button.default"].success:hover > * { color: var(--dh-success10); border: 1px solid var(--dh-success10); background:white } part[for="button.default"].icon-right > * i, part[for="button.default"].icon-right > * img{ order:2; } part[for="config.languages"] { display: flex; justify-content: center; align-items: center; } part[for="config.languages"] > .code { cursor: pointer; padding: 2px 5px; font-weight: bold; margin-right: 10px; background: #c0c0c02e; border-radius: 5px; text-align: center; display: flex; align-items: center; border: 1px solid var(--dh-bc02); font-size: 12px; font-weight: 500; } part[for="config.languages"] > .code > i { font-size: 12px; margin-left: 4px; top: 0px!important; } #popup .languages { padding: 2px 5px; font-weight: bold; margin-right: 10px; border-radius: 5px; border: 1px solid var(--dh-bc02); background: #fff; width: 43px; text-align: center; } #popup .languages > a { display: block; color: var(--dh-tp10); cursor: pointer; padding: 5px 0; border-bottom: 1px solid var(--dh-bc04); font-size: 12px; font-weight: 500; } #popup .languages > a:hover { color: var(--dh-brp10); } #popup .languages > a:last-child { border-bottom: unset; }part[for="dropdown.links"] { width: 100%; display: unset; } part[for="dropdown.links"] > div .list { display: block; padding: 15px; border-top: 1px solid var(--dh-bc01); color: var(--dh-ts10); text-align: left; background:var(--dh-bgp10) } part[for="dropdown.links"] > div .list a:not(.elements) { display: block; transition: 0.2s; font-size:14px; padding-bottom: 7.5px; margin-bottom: 7.5px; border-bottom: 1px solid var(--dh-bc01); color: white; line-height: 1.4; } part[for="dropdown.links"] > div .list a:not(.elements):hover { color: var(--dh-brp10); } part[for="dropdown.links"] > div .list a:not(.elements):last-child { border-bottom:none; padding-bottom: 0; margin-bottom: 0; } part[for="dropdown.links"] > div.list a:last-child {margin-bottom:0} part[for="dropdown.links"] > div .list a:hover { color:var(--dh-brp10)!important; } part[for="dropdown.links"].light > div .list { background: white; border: 1px solid var(--dh-bc05); color: var(--dh-tp10); } part[for="dropdown.links"].light > div .list a:not(.elements) { color: var(--dh-tp10); border-bottom: 1px solid var(--dh-bc05); } part[for="dropdown.links"].light > div .list a:not(.elements):last-child { border-bottom: unset; }part[for="editor.codemirror"] { display: block; } part[for="editor.codemirror"] > textarea { width: 100%; height: 100%; } part[for="editor.codemirror"].auto .CodeMirror { width: 100%; height: 100%; } part[for="editor.codemirror"] > .CodeMirror-wrap .CodeMirror-scroll { background: #fbfbfb; } part[for="editor.codemirror"] .CodeMirror .CodeMirror-linenumber { color: #000; text-align: center; font-size: 12px; } part[for="editor.codemirror"] .CodeMirror .CodeMirror-gutters { background: transparent!important; height: 100%!important; border-right: none!important; } part[for="editor.codemirror"] .CodeMirror div.CodeMirror-cursor { border-left: 1px solid #000; } part[for="editor.codemirror"] .CodeMirror * { color: #000; }part[for="editor.js"] { display: block; } part[for="editor.js"].full { width: 100%; height: 100%; } part[for="editor.js"].full .editorJs { height: calc(100vh - 102px); overflow: auto; background: #fbfbfb!important; border: none!important; } .ct--top .ct__content *, .ct--bottom .ct__content * { color: #fff!important; }part[for="editor.quill"] { display: block; } part[for="editor.quill"].mini { border: 1px solid var(--dh-bc10); background: #fff; } part[for="editor.quill"] > .ql-toolbar.ql-snow { border: 0; background: #fff; border-bottom: 1px solid var(--dh-bc04); position: sticky; top: 0; z-index: 1000; } part[for="editor.quill"] > .quill { border: 0; } part[for="editor.quill"] > .quill > .ql-editor { min-height: 200px; }part[for="editor.trumbowyg"] { display: block; } part[for="editor.trumbowyg"] > div { border: none; word-break: break-all; } part[for="editor.trumbowyg"] div[for="trumbowyg"] { height: calc(100vh - 140px); overflow: auto; } part[for="editor.trumbowyg"].mini div[for="trumbowyg"] { height: 300px; overflow: auto; } part[for="editor.trumbowyg"] .trumbowyg-button-pane { background: #fff!important; border: unset!important; position: sticky; top: 0; } part[for="editor.trumbowyg"].mini { border: 1px solid var(--dh-bc06); background: #fff; }part[for="error.custom"] { text-align: center; width: 100%; } part[for="error.custom"] > div > h4 { font-size: 22px; margin-bottom: 10px; } part[for="error.custom"] > div > div > h4 { font-size: 24px; }part[for="error.empty"] { text-align: center; width: 100%; padding: 100px 0; } part[for="error.empty"].small { padding: 30px; } part[for="error.empty"] > div > i { font-size: 80px; color: var(--dh-tp02); } part[for="error.empty"] > div > h4 { font-size: 22px; margin-bottom: 10px; } part[for="error.empty"] > div > div > h4 { font-size: 24px; }part[for="filter.block"] { display: block; } part[for="filter.block"] > .category { margin-top: 25px; margin-bottom: 15px; } part[for="filter.block"] > .category > h3 { color: var(--dh-ts10); font-weight: 100; font-size: 14px; margin-bottom: 10px; } part[for="filter.inline"] { display: flex; } part[for="filter.inline"] > div > * { display: inline; width: fit-content; } part[for="filter.inline"] > .left, part[for="filter.inline"] > .right { display: flex; flex: 1; gap: 10px; } part[for="filter.inline"] > .right { justify-content: flex-end; }part[for="form.inline"] { width: 100%; } part[for="form.inline"] > .rows { margin: 0 auto; } part[for="form.inline"] > .rows > * { display: flex; margin-bottom: 30px; justify-content: flex-end; } part[for="form.inline"] > .rows > .row:last-child { margin-bottom: 0px; } part[for="form.inline"] > .rows > .row > .left { width: 150px; text-align: right; padding-right: 30px; padding-top: 8px; color: var(--dh-tp06); font-size: 13px; } part[for="form.inline"].full > .rows > .row > .left { display: none; } part[for="form.inline"] > .rows > .row > .right { flex: 1; width: 100%; display: flex; gap: 20px; max-width: calc(100% - 150px); } part[for="form.inline"] > .rows > .row > .right > * { min-height: 36px; line-height: 36px; } part[for="form.inline"] > .rows > .row > .right > part { width: 100%; }@media screen and (max-width: 767px) { part[for="form.inline"] > .rows > * { display: block; } part[for="form.inline"] > .rows > .row > .left { text-align: left; } part[for="form.inline"] > .rows > .row > .right { display: grid; } }part[for="heading.default"] { width: 100%; padding-top: 40px; padding-bottom: 40px; } part[for="heading.default"].clean { width: 100%; padding-top: 0; padding-bottom: 0; } part[for="heading.default"].white { background: #fff; } part[for="heading.default"].clean > div[for="container"] { padding-left: 0; padding-right: 0; display: flex; align-items: center; } part[for="heading.default"].clean > div[for="container"] > .left { flex: 1; } part[for="heading.default"].clean > div[for="container"] > .right { width: 200px; display: flex; justify-content: end; } part[for="heading.default"] > div > div > h1 { font-size: 28px; font-weight: 700; line-height: 1.1; margin-bottom: 15px; color: var(--dh-tp10); } part[for="heading.default"] > div > div > h1 > span { background: var(--dh-brp01); color: var(--dh-brp10); border-radius: 10px; margin-left: 14px; font-size: 15px; font-weight: bold; position: relative; bottom: 1px; padding: 6px 20px; } part[for="heading.default"].danger > div > div > h1 { color: var(--dh-danger10); } part[for="heading.default"].big > div > div > h1 { font-size: 36px; line-height: 1.6; margin-bottom: 15px; } part[for="heading.default"].clean > div > div > h1 { font-size: 20px; } part[for="heading.default"] > div > div > p { font-size: 14px; font-weight: 400; margin-top: 7.5px; color: var(--dh-tp07); max-width: 500px; } part[for="heading.default"].big > div > div > p { font-size: 16px; }part[for="input.default"].checkbox { display: flex; } part[for="input.default"].checkbox > label { order: 2; margin-left: 10px; margin-bottom: 0; line-height: 36px; font-weight: 300; } part[for="input.default"].checkbox > div { padding: 0; background: transparent; border: unset!important; } part[for="input.default"].checkbox > div > input { width: 20px; height: 20px; }part[for="input.default"].hidden { display: none; } part[for="input.default"] > label { font-weight: 500; margin-bottom: 5px; font-size: 14px; display: block; } part[for="input.default"] > div > input { background: transparent; border:none; height: 100%; flex: 1; } part[for="input.default"] > p { font-size: 12px; max-width: calc(100% - 35px); margin-top: 5px; } part[for="input.default"] > div { position: relative; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid var(--dh-bc04); border-radius: 0; align-items: center; max-width: 100%; transition: 0.2s; height: 36px; padding: 0 7.5px; display: flex; align-items: center; justify-content: space-between; } part[for="input.default"].clean > div { background: transparent; border: none; height: 100%; } part[for="input.default"].big > div { height: 44px; } part[for="input.default"] > div:focus-within { border: 1px solid var(--dh-bgp10); } part[for="input.default"].clean > div:focus-within { border: none; } part[for="input.default"] > div > i { color:var(--dh-ts05); font-size: 16px; } part[for="input.default"] > div > i.toggle_password {cursor: pointer; transition: 0.2s;} part[for="input.default"] > div > i.toggle_password:hover {color: var(--dh-tp10);} part[for="input.default"] > div > p { position: absolute; right: 0; bottom: -20px; font-size: 10px; font-weight: 600; } part[for="input.default"] > div > p > span { color:var(--dh-ts10); } part[for="input.default"] > div > i[data-tooltip]::after { content: attr(data-tooltip); position: absolute; right: 0; width: max-content; max-width: 150px; font-size: 12px; background: white; padding: 8px; color: var(--dh-tp10); font-family: var(--dh-fp); font-weight: 400; line-height: 1.2; border: 1px solid var(--dh-bc10); bottom: 36px; box-shadow: 0 0 15px #0000001a; visibility: hidden; opacity: 0.1; font-style: normal; pointer-events: none; } part[for="input.default"] > div > i[data-tooltip]:hover::after { visibility: visible; opacity: 1; }part[for="layout.flex"] { display: flex; width: 100%; }part[for="layout.grid"] { display: grid; width: 100%; } part[for="layout.grid"] > div > * { width: 100%; }part[for="layout.space"] { width: 100%; display: block; } part[for="layout.space"].bg { padding: 10px; background: #fff; border: 1px solid var(--dh-bc06); } part[for="layout.space"] > h2 { margin-bottom: 20px; color: var(--dh-tp06); font-weight: 400; } part[for="layout.space"]::-webkit-scrollbar-thumb { background: #b6b6b6; cursor: pointer; border-radius: 5px; } part[for="layout.space"]::-webkit-scrollbar-track { background: #ffffff; } part[for="layout.space"]::-webkit-scrollbar { width: 5px; height: 5px; border-radius: 5px; }part[for="navbar.admin"] { display: none; } .navbar-1 .open-menu { display: none; } .navbar-1 .menu-wrapper { position: absolute; display: none!important; right: 20px; top: 5px!important; margin: auto; width: 30px; height: 40px; cursor: pointer; z-index: 1005435430; } .navbar-1 .menu-wrapper.fixed { position: fixed; } .navbar-1 .hamburger-menu, .navbar-1 .hamburger-menu:after, .navbar-1 .hamburger-menu:before { width: 25px; height: 3px; border-radius: 3px; } .navbar-1 .hamburger-menu { position: relative; transform: translateY(19px); background: var(--dh-ts10); transition: all 0ms 300ms; } .navbar-1 .hamburger-menu:before { content: ""; position: absolute; left: 0; bottom: 8px; background: var(--dh-ts10); transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } .navbar-1 .hamburger-menu {width: 18px} .navbar-1 .hamburger-menu:after { content: ""; position: absolute; left: 0; top: 8px; background: var(--dh-ts10); transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } .navbar-1 .hamburger-menu.animate {background: transparent;} .navbar-1 .hamburger-menu.animate:after { top: 0; transform: rotate(45deg); background: var(--dh-ts10); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } .navbar-1 .hamburger-menu.animate:before { bottom: 0; transform: rotate(-45deg); background: var(--dh-ts10); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } part[for="navbar.admin"] .left > .logo { display: flex; align-items: center; padding-right: 5px; } part[for="navbar.admin"] .left > .logo > img { object-fit: contain; padding-right: 15px; max-height: 50px; } part[for="navbar.admin"] .left > .logo > span { font-size: 18px!important; color: #fff; } part[for="navbar.admin"].light .left > .logo > span { font-size: 18px!important; color: #000; }part[for="navbar.admin"] .middle { display: flex; align-items: center; border-left: 1px solid var(--dh-bc04); width: 100%; height: 50px; } part[for="navbar.admin"] .middle:empty { border-left: none; } part[for="navbar.admin"] .middle > * { padding: 0 23px; cursor: pointer; border-right: 1px solid var(--dh-bc04); transition: 0.1s background; font-size: 13px; position: relative; display: inline-block; height: 100%; line-height: 50px; color: var(--dh-tp08); display:flex; align-items: center; } part[for="navbar.admin"] .middle > *.clean { background: transparent; padding: 0; } part[for="navbar.admin"] part[for="select.custom"] > div > div { background: transparent; border: unset; padding: 0 23px; } part[for="navbar.admin"] part[for="select.custom"] > div > div i.ph-caret-down { margin-right: 0px; } part[for="navbar.admin"] .middle > *:hover { background: var(--dh-bc02); color: var(--dh-tp08); } part[for="navbar.admin"] .middle > * i { margin-right: 7.5px; position: relative; color: var(--dh-tp08); font-size: 16px; }part[for="navbar.admin"] .right { display: flex; align-items: center; width: auto; justify-content: flex-end; gap: 15px; } part[for="navbar.admin"] .right .menus { display: flex; align-items: center; } part[for="navbar.admin"] .right .menus > a { color: var(--dh-ts10); font-size: 14px; margin-left: 30px; position: relative; display: inline-block; font-weight: bold; white-space: nowrap; } part[for="navbar.admin"] .right .menus > a::after { content: ''; width: 6px; height: 6px; border-radius: 100%; position: absolute; bottom: -14px; left: 0; right: 0; margin:0 auto; background: var(--dh-brp10); transition: 0.2s; opacity: 0; visibility: hidden; } part[for="navbar.admin"] .right .menus > a:hover::after, part[for="navbar.admin"] .right .menus > a.active::after { bottom: -8px; visibility: visible; opacity: 1; } part[for="navbar.admin"] .right .menus > a:hover, part[for="navbar.admin"] .right .menus > a.active { color: white; } part[for="navbar.admin"].light .right .menus > a:hover, part[for="navbar.admin"].light .right .menus > a.active { color: var(--dh-tp10); }part[for="navbar.admin"] { background: var(--dh-bgp10); position: relative; z-index: 10000; height: 50px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 10000000; } part[for="navbar.admin"].light { background: #fff; border-bottom: 1px solid var(--dh-bc04); } part[for="navbar.admin"] > div > div { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 50px; } part[for="navbar.admin"]:not(.light) part[for="config.languages"] > .code { color: #fff; } @media (max-width: 767px) { .navbar-1 {padding: 5px } .navbar-1 .notificaitons-area .open-notifications { font-size: 24px; } .navbar-1 .account-area .accimg { width: 36px; height: 36px; } .navbar-1 .menu { position: absolute; right: 0; z-index: 4324; background: var(--dh-bgp10); padding: 35px; top: 50px; } .navbar-1 .menu ul { flex-direction: column; align-items: flex-end; } .navbar-1 .menu ul a { margin-left: 0; margin-top: 10px; } .navbar-1 .menu ul li:first-child a {margin-top: 0;} .navbar-1 .menu ul a::after { left: unset; right: -19px; bottom: 0; } .navbar-1 .menu ul a:hover::after, .navbar-1 .menu ul .active a::after { bottom: 7px; } .navbar-1 .open-menu { display: block!important; position: initial; margin-left: 15px; } .navbar-1 .account-area {margin-left: 10px;} .navbar-1 .menu {display: none; padding: 25px;} .navbar-1 .account-area {padding-right: 45px;} }.notification-1.danger { background: var(--dh-danger10); } .notification-1.danger .left { background: rgb(255 255 255 / 15%); } .notification-1.danger .left i, .notification-1.danger .right { color: white; }.notification-1.neutral { background: var(--dh-bgp10); } .notification-1.neutral .left { background: rgb(0 0 0 / 2.5%); } .notification-1.neutral .left i, .notification-1.neutral .right { color: white; }.notification-1 { width: 300px; display: flex; border-radius: 4px; cursor: pointer; box-shadow: var(--dh-sw03); position: absolute; top: 35px; left: 0; right: 0; margin: auto; text-align: left; } .box-1 .notification-1 { position: static; } .notification-1 > .left { width: 50px; text-align: center; } .notification-1 > .right { flex: 1; padding: 15px; font-weight: 600; }.notification-1.success { background: var(--dh-success10); } .notification-1.success .left { background: rgb(255 255 255 / 15%); } .notification-1.success .left i, .notification-1.success .right { color: white; }part[for="pagination.default"] { display: flex; align-items: center; justify-content: space-between; } part[for="pagination.default"] a { border: 1px solid var(--dh-bc04); background: #fff; color: #1A1A1C; border-right: none; height: 36px; display: flex; align-items: center; justify-content: center; width: 36px; transition: 0.2s; } part[for="pagination.default"] a.next, part[for="pagination.default"] a.prev { width: auto; padding: 0 15px; } part[for="pagination.default"] a:hover { background: var(--dh-bgp10); color: white; } part[for="pagination.default"] a:last-of-type { border-right: 1px solid var(--dh-bc04); } part[for="pagination.default"] .goto { display: flex; margin-left: 10px; align-items: center; } part[for="pagination.default"] .goto input { width: 36px; text-align: center; height: 36px; border: 1px solid var(--dh-bc04); background: #fff; margin: 0 5px; } part[for="pagination.default"] .goto input::-webkit-outer-spin-button, part[for="pagination.default"] .goto input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } part[for="pagination.default"] .goto input[type=number] { -moz-appearance: textfield; } part[for="pagination.default"] .links { display: flex; }part[for="popup.create"] { max-width: 330px; margin: 0 auto; box-shadow: var(--dh-sw01); position: relative; background: white; border-radius:0; border-top: 5px solid var(--dh-success10); } part[for="popup.create"] .info { padding: 20px; text-align: left; margin: 0 auto; } part[for="popup.create"] .info > p { margin-top: 10px; } part[for="popup.create"] .inputs { padding: 0 20px; margin-bottom: 20px; text-align: left; gap: 20px; display: grid; } part[for="popup.create"] .inputs:empty { padding: 0; margin-bottom: 0; } part[for="popup.create"] .inputs > part { width: 100%; } part[for="popup.create"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } part[for="popup.create"] .actions > * { width: 100%; }part[for="popup.remove"] { max-width: 330px; margin: 0 auto; box-shadow: var(--dh-sw01); position: relative; background: white; border-radius:0; border-top: 5px solid var(--dh-danger10); } part[for="popup.remove"] .info { padding: 20px; text-align: left; margin: 0 auto; } part[for="popup.remove"] .info > p { margin-top: 10px; } part[for="popup.remove"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } part[for="popup.remove"] .actions > * { width: 100%; }part[for="select.custom"] > label { font-weight: 500; margin-bottom: 5px; font-size: 14px; display: block; } part[for="select.custom"] > div > input { background: transparent; border:none; height: 100%; flex: 1; } part[for="select.custom"] > p { font-size: 12px; max-width: calc(100% - 35px); margin-top: 5px; } part[for="select.custom"] > div { position: relative; } part[for="select.custom"] {width: 100%;} part[for="select.custom"] > div > div { position: relative; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid var(--dh-bc04); border-radius: 0; align-items: center; max-width: 100%; height: 36px; padding: 0 12px; display: flex; justify-content: space-between; cursor: pointer; font-size: 14px; } part[for="select.custom"].big > div > div { height: 44px; } part[for="select.custom"].medium > div > div { height: 40px; } part[for="select.custom"] > div > div i { pointer-events: none; } part[for="select.custom"] > div > div i.ph-caret-down { margin-left: 10px; } part[for="select.custom"] > div > div > p { pointer-events: none; } part[for="select.custom"] > div > div > p .hidden { display: none; } part[for="select.custom"] > div > ul { position: absolute; background: white; box-shadow: 0 0 15px #0000001f; width: 100%; min-width: 150px; border: 1px solid var(--dh-bc06); max-height: 200px; overflow: auto; top: calc(100% + 12px); visibility: hidden; opacity: 0; z-index: 1000; height: 0; } part[for="select.custom"] > div.show > ul { height: unset; } part[for="select.custom"] > div.show > ul { visibility: visible; opacity: 1; top: calc(100% + 5px); z-index: 10000000; } part[for="select.custom"] > div > ul li { list-style: none; padding: 5px 12px; cursor: pointer; font-size: 13px; } part[for="select.custom"] > div > ul li.selected { background: var(--dh-bc03); position: relative; } part[for="select.custom"] > div > ul li.selected::after { font-family: "Font Awesome 5 Free"; content: "\f00c"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; position: absolute; right: 0; top: 51%; transform: translateY(-50%); right: 9px; color: var(--dh-ts10); } part[for="select.custom"] > div > ul li.disabled { pointer-events: none; opacity: 0.6; } part[for="select.custom"] > div > ul li:hover { background: var(--dh-bc02); } part[for="select.custom"] > div > ul::-webkit-scrollbar { width: 3px; } part[for="select.custom"] > div > ul::-webkit-scrollbar-track { box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3); } part[for="select.custom"] > div > ul::-webkit-scrollbar-thumb { background-color: var(--dh-bc10); } /* search */ part[for="select.custom"] > div > ul > .search {display: none;} part[for="select.custom"] > div > ul > div input { padding: 6px 15px; border-bottom: 1px solid var(--dh-bc06); } part[for="sidebar.simple"] > .applications { width: 40px; min-width: 40px; background: #232326; border-right: 1px solid var(--dh-bc01); display: flex; align-items: center; justify-content: center; flex-direction: column; } #browser part[for="sidebar.simple"] > .applications { display: none; } part[for="sidebar.simple"] > .applications > a { text-align: center; color: #fff; width: 30px; height: 30px; border-radius: 5px; line-height: 35px; margin-top: 10px; margin-bottom: 10px; transition: 0.15s; font-size: 20px; } part[for="sidebar.simple"] > .applications > a:hover { color: var(--dh-brp10); background: var(--dh-bc01); } part[for="sidebar.simple"] > .applications > .active { border-top: 1px solid var(--dh-bc01); border-bottom: 1px solid var(--dh-bc01); background: var(--dh-brp10); }part[for="sidebar.simple"] > .right .menus { padding: 20px 15px; overflow: hidden; flex: 1; display: grid; margin-top: -15px; } part[for="sidebar.simple"] > .right .menus > .menu { position: relative; padding-bottom: 20px; border-bottom: 1px solid var(--dh-bc08); } part[for="sidebar.simple"].dark > .right .menus > .menu { position: relative; padding-bottom: 20px; border-bottom: 1px solid rgb(56 56 59); } part[for="sidebar.simple"] > .right .menus > .menu > h3 { margin-bottom: 15px; margin-top: 15px; } part[for="sidebar.simple"].dark > .right .menus > .menu > h3 { color: #fff; display: flex; } part[for="sidebar.simple"].dark > .right .menus > .menu > h3:empty { margin-bottom: 0px!important; } part[for="sidebar.simple"].dark > .right .menus > .menu > h3 > .actions { display: flex; justify-content: end; color: #fff; width: 100%; align-content: center; } part[for="sidebar.simple"].dark > .right .menus > .menu > h3 > .actions > i { font-size: 14px; cursor: pointer; padding: 3px 5px; transition: 0.15s all; display: flex; align-items: center; } part[for="sidebar.simple"].dark > .right .menus > .menu > h3 > .actions > i:hover { background: rgb(255 255 255 / 13%); border: 5px; } part[for="sidebar.simple"] > .right .menus > .menu > .submenus > * { display: flex; align-items: center; color: rgb(0 0 0 / 60%); font-size: 12px; line-height: 18px; margin-bottom: 2.5px; cursor: pointer; padding: 5px; gap: 10px; margin-left: -5px; } part[for="sidebar.simple"].dark > .right .menus > .menu > .submenus > * { color: rgb(255 255 255 / 60%); } part[for="sidebar.simple"].dark > .right .menus > .menu > .submenus > * > i { font-size: 16px; } part[for="sidebar.simple"] > .right .menus > .menu > .submenus > *:last-child { margin-bottom: 0px; } part[for="sidebar.simple"] > .right .menus > .menu > .submenus > *.active, part[for="sidebar.simple"] > .right .menus > .menu > .submenus > *:hover { background: rgb(159 159 159 / 20%); padding-left: 12px; margin-left: -12px; width: calc(100% + 30px); } part[for="sidebar.simple"] > .right .menus > .menu > .submenus .count { border-radius: 3px; background: #232326; color: var(--dh-ts10); font-weight: 500; border: 1px solid var(--dh-bc01); padding: 0 4px; font-size: 10px; }part[for="sidebar.simple"] { overflow: auto; background: #fff; height: 100%; display: flex; max-width: 230px; flex-shrink: 0; } part[for="sidebar.simple"].dark { background: var(--dh-bgp10); } part[for="sidebar.simple"].dark > .right { width: 100%; min-width: 190px; }part[for="tab.default"] { font-size: 18px; font-weight: bold; border-bottom: 1px solid var(--dh-bc04); display: flex; background: #fff; } part[for="tab.default"] > .left, part[for="tab.default"] > .right { display: flex; flex: 1; } part[for="tab.default"] > .right { justify-content: flex-end; } part[for="tab.default"] > .right > * { border-right: 1px solid var(--dh-bc04); border-bottom: unset!important; } part[for="tab.default"] > .right > * i { margin-left: 6px; } part[for="tab.default"] > .right > *:first-child { border-left: 1px solid var(--dh-bc04); border-bottom: unset!important; } part[for="tab.default"] > * > * { font-size: 13px; padding: 15px; padding-bottom: 12px; border-bottom: 3px solid transparent; cursor: pointer; transition: 0.125s all; color: var(--dh-tp08); font-weight: 400; } part[for="tab.default"].fit > * > * { padding-left: 0px; padding-right: 0px; margin-right: 30px; } part[for="tab.default"] > * > *:hover { color: var(--dh-brp10); } part[for="tab.default"] > * > *.active { border-bottom: 3px solid var(--dh-brp10); color: var(--dh-brp10); } part[for="tab.default"] > * > * > i { margin-right: 6px; position: relative; top: 4px; pointer-events: none; font-size: 16px; }part[for="table.default"] { display: block; width: 100%; } part[for="table.default"] .wrapper { border-collapse: collapse; display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; text-align: left; display: block; overflow: auto; background: #fff; border: 1px solid var(--dh-bc04); } part[for="table.default"] .buttons:not(empty) { margin-bottom: 15px; } part[for="table.default"] .wrapper::-webkit-scrollbar { width: 5px; } part[for="table.default"] .wrapper::-webkit-scrollbar-track { background: #f7f7f700; margin-top: 40px; } part[for="table.default"] .wrapper::-webkit-scrollbar-thumb { background: #e5e3e3; cursor: pointer; } part[for="table.default"] .wrapper::-webkit-scrollbar-thumb:hover { background: #cbc8c8; } part[for="table.default"] table { width: 100%; -webkit-overflow-scrolling: touch; border-collapse: collapse; overflow-x: auto; } part[for="table.default"] thead { display: table-header-group; vertical-align: middle; border-color: inherit; border-radius: 10px; width: 100%; } part[for="table.default"] tbody tag { background: #fbfbfb; padding: 0 8px; border: 1px solid var(--dh-bc04); border-radius: 5px; display: inline-block; font-weight: 300; text-align: center; height: 22px; } part[for="table.default"] thead tr, part[for="table.default"] thead th { border: transparent; outline: 0; padding: 10px 15px; font-weight: 500; font-size: 13px; width: auto; position: sticky; top: 0; border-bottom: var(--dh-bc04); z-index: 999999; background: #fff; text-align: left; } part[for="table.default"] thead th { font-weight: bold; } part[for="table.default"] .thead-search tr, part[for="table.default"] .thead-search th { padding: 0; } part[for="table.default"] thead th:first-child { font-weight: 700; border-radius: 5px 0 0 5px; width: 35px; } part[for="table.default"] thead th:last-child { border-radius: 0 5px 5px 0; } part[for="table.default"] tbody td { padding: 10px 15px; font-weight: 400; font-size: 13px; } part[for="table.default"] tbody tr { border-bottom: 1px solid var(--dh-bc04); transition: 0.125s background; } part[for="table.default"] tbody tr:hover { background: var(--dh-bc02); } part[for="table.default"] tbody tr .action { justify-content: flex-end; display: inline-flex; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; height: calc(1.5em + 0.5rem + 0px); width: calc(1.5em + 0.5rem + 0px); margin-right: 0px; cursor: pointer; position: relative; top: 4px; } part[for="table.default"] tbody tr .action:hover { background: var(--dh-bc04); border-radius: 3px; } part[for="table.default"] tbody tr .action > i { color: var(--dh-tp07); } part[for="table.default"] td[data-td="Hide"] { text-align: right; } part[for="editor.quill"] { display: block; } part[for="editor.quill"].mini { border: 1px solid var(--dh-bc10); background: #fff; } part[for="editor.quill"] > .ql-toolbar.ql-snow { border: 0; background: #fff; border-bottom: 1px solid var(--dh-bc04); position: sticky; top: 0; z-index: 1000; } part[for="editor.quill"] > .quill { border: 0; } part[for="editor.quill"] > .quill > .ql-editor { min-height: 200px; } part[for="textarea.default"] { width: 100%; } part[for="textarea.default"] > label { font-weight: 500; margin-bottom: 5px; font-size: 14px; display: block; } part[for="textarea.default"] > div > textarea { background: transparent; border:none; height: 100%; flex: 1; } part[for="textarea.default"] > p { font-size: 12px; max-width: calc(100% - 35px); margin-top: 5px; } part[for="textarea.default"] > div { position: relative; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid var(--dh-bc04); border-radius: 0; align-items: center; max-width: 100%; transition: 0.2s; padding: 0; display: flex; justify-content: space-between; width: 100%;; } part[for="textarea.default"] > div textarea { min-height: 90px; resize: vertical; height: 120px; max-height: 400px; padding: 4px 7.5px; } part[for="textarea.default"] > div:focus-within { border: 1px solid var(--dh-bgp10); } part[for="textarea.default"] > div > i.toggle_password {cursor: pointer; transition: 0.2s;} part[for="textarea.default"] > div > i.toggle_password:hover {color: var(--dh-tp10);} part[for="textarea.default"] > div > p { position: absolute; right: 0; bottom: -20px; font-size: 10px; font-weight: 600; } part[for="textarea.default"] > div > p > span { color:var(--dh-ts10); } part[for="textarea.default"] > div > i[data-tooltip]::after { content: attr(data-tooltip); position: absolute; right: 0; width: max-content; max-width: 150px; font-size: 12px; background: white; padding: 8px; color: var(--dh-tp10); font-family: var(--dh-fp); font-weight: 400; line-height: 1.2; border: 1px solid var(--dh-bc10); bottom: 36px; box-shadow: 0 0 15px #0000001a; visibility: hidden; opacity: 0.1; font-style: normal; pointer-events: none; } part[for="textarea.default"] > div > i[data-tooltip]:hover::after { visibility: visible; opacity: 1; }part[for="toggle.default"] { position: relative; } part[for="toggle.default"] { display: flex; gap: 10px; flex-direction: column; } part[for="toggle.default"].flex { flex-direction: row; align-items: center; gap: 20px; } part[for="toggle.default"] > div > p { font-size: 14px; display: block; flex-direction: column; line-height: 1.2; margin-bottom: 5px; } part[for="toggle.default"] > div > span { font-size: 13px; color: var(--dh-ts10); max-width: 400px; display: inline-block; } part[for="toggle.default"] .switch { display: inline-block; height: 30px; position: relative; width: 50px; min-width: 50px; } part[for="toggle.default"].small .switch { display: inline-block; height: 22px; position: relative; width: 35px; min-width: 35px; } part[for="toggle.default"] .switch input { display:none; } part[for="toggle.default"] .slider { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } part[for="toggle.default"] .slider:before { background-color: var(--dh-bgp10); bottom: 3px; content: ""; height: 22px; left: 4px; position: absolute; transition: .4s; width: 22px; } part[for="toggle.default"].small .slider:before { bottom: 3px; content: ""; height: 14px; left: 2px; position: absolute; transition: .4s; width: 14px; } part[for="toggle.default"] input:checked + .slider { background-color: var(--dh-success10); border: 1px solid var(--dh-success10); } part[for="toggle.default"] input:checked + .slider:before { transform: translateX(18px); background: white; } part[for="toggle.default"].small input:checked + .slider:before { transform: translateX(15px); background: white; } part[for="toggle.default"] .slider.round { border-radius: 34px; border: 1px solid var(--dh-bc10); } part[for="toggle.default"] .slider.round:before { border-radius: 50%; background: var(--dh-bc10); } part[for="toggle.default"].on_darkBG .slider.round { border:1px solid var(--dh-bc10); } part[for="toggle.default"].on_darkBG .slider:before { background: var(--dh-bc10); } part[for="toggle.default"].on_darkBG input:checked + .slider { background-color: var(--dh-success10); border: 1px solid var(--dh-success10); } part[for="apb.about"] { display: block; }part[for="apb.blog"] { display: block; }part[for="apb.blogs"] { display: block; }part[for="apb.blogsfull"] { display: block; }part[for="apb.contact"] { display: block; }part[for="apb.depressed"] { display: block; }part[for="apb.footer"] { display: block; }part[for="apb.footersoon"] { display: block; min-height: 100vh; background: #f9f5f2; display: flex; justify-content: center; align-items: center; } part[for="apb.footersoon"] .footer .bottom .left .newsletter .form input { background-color: #fff!important; }part[for="apb.header"] { display: block; }part[for="apb.intro"] { display: block; }part[for="apb.login"] { display: block; }part[for="apb.privacy"] { display: block; }part[for="apb.register"] { display: block; }part[for="apb.soon"] { display: block; }part[for="apb.terms"] { display: block; }part[for="apb.testimonials"] { display: block; }part[for="apb.therapies"] { display: block; }part[for="uploads.box"] { width: 100%; cursor: pointer; } part[for="uploads.box"] > .image { height: 140px; width: 100%; background: #fff; border: 1px solid var(--dh-bc04); position: relative; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 20px; word-break: break-all; } part[for="uploads.box"] > .image > .copy { position: absolute; right: 0; top: 0; background: #fff; border: 1px solid var(--dh-bc04); font-size: 10px; border-radius: 5px; margin: 5px; padding: 0 5px; box-shadow: var(--dh-sw01); cursor: pointer; z-index: 9999999; display: none; } part[for="uploads.box"] > .image:hover > .copy { display: block; } part[for="uploads.box"] > .image img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block;; } part[for="uploads.box"] > .informations { margin-top: 10px; text-align: center; display: flex; } part[for="uploads.box"] > .informations > .tags { display: flex; gap: 5px; } part[for="uploads.box"] > .informations > .tags > * { padding: 0px 5px; background: #fff; border: 1px solid var(--dh-bc04); border-radius: 5px; font-size: 12px; color: var(--dh-tp10); display: flex; align-items: center; overflow: hidden; max-width: 70px; } part[for="uploads.box"] > .informations > .tags > * > i { color: var(--dh-warning07); margin-right: 4px; } part[for="uploads.box"] > .informations > span { width: 100%; text-align: left; margin-left: 7.5px; } part[for="uploads.box"] > .image > .checked { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; opacity: 1; transition: 0.07s; background: var(--dh-bgp07); text-align: center; display: none; } part[for="uploads.box"].selected > .image > .checked { display: block; } part[for="uploads.box"] > .image > .checked > div { height: 100%; font-size: 36px; color: var(--dh-success10); align-items: center; } part[for="uploads.box"] > .image > .checked > div > i { font-size: 28px; }part[for="uploads.file"] { max-width: 330px; margin: 0 auto; box-shadow: var(--dh-sw01); position: relative; background: white; border-radius:0; border-top: 5px solid var(--dh-warning10); } part[for="uploads.file"] .info { padding: 20px; text-align: left; margin: 0 auto; } part[for="uploads.file"] .info > p { margin-top: 10px; } part[for="uploads.file"] .inputs { padding: 0 20px; margin-bottom: 20px; text-align: left; } part[for="uploads.file"] .inputs:empty { padding: 0; margin-bottom: 0; } part[for="uploads.file"] .inputs > part { width: 100%; } part[for="uploads.file"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } part[for="uploads.file"] .actions > * { width: 100%; }part[for="uploads.folder"] { max-width: 330px; margin: 0 auto; box-shadow: var(--dh-sw01); position: relative; background: white; border-radius:0; border-top: 5px solid var(--dh-warning10); } part[for="uploads.folder"] .info { padding: 20px; text-align: left; margin: 0 auto; } part[for="uploads.folder"] .info > p { margin-top: 10px; } part[for="uploads.folder"] .inputs { padding: 0 20px; margin-bottom: 20px; text-align: left; } part[for="uploads.folder"] .inputs:empty { padding: 0; margin-bottom: 0; } part[for="uploads.folder"] .inputs > part { width: 100%; } part[for="uploads.folder"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } part[for="uploads.folder"] .actions > * { width: 100%; }part[for="uploads.upload"] { width: 100%; padding: 20px; background: #fff; border: 1px solid var(--dh-bc04); max-width: 565px; text-align: left; } part[for="uploads.upload"] > p { margin-top: 5px; margin-bottom: 20px; } part[for="uploads.upload"] > .tabs { display: flex; border-bottom: 1px solid var(--dh-bc04); margin-bottom: 20px; gap: 20px; } part[for="uploads.upload"] > .tabs > li { list-style-type: none; padding-bottom: 10px; cursor: pointer; } part[for="uploads.upload"] > .tabs > li.active { border-bottom: 2px solid var(--dh-brp10); } part[for="uploads.upload"] > .computer { padding: 40px; border: 2px dotted var(--dh-bc06); text-align: center; font-size: 25px; color: var(--dh-tp05); cursor: pointer; display: flex; justify-content: center; width: auto; padding: 10px 20px; background: var(--dh-bgp10); color: white; border: none; transition: 0.1s; font-size: 14px; } part[for="uploads.upload"] > .computer::after { content: "Upload Files"; } part[for="uploads.upload"] > .computer > i { font-size: 40px; } part[for="uploads.upload"] > .computer:hover { opacity: 0.95; } part[for="uploads.upload"] > #uploads_url { max-height: 300px; overflow: auto; } part[for="uploads.upload"] > #uploads_url > .url { width: 100%; margin-bottom: 7.5px; } part[for="uploads.upload"] > #uploads_url > .url:last-child { margin-bottom: 0px; } part[for="uploads.upload"] > #uploads_url > .url > div { border: 2px dotted var(--dh-bc06); }part[for="uploads.use"] > .wrapper { background: #fff; border: 1px dashed var(--dh-bc10); text-align: center; padding: 50px 20px; cursor: pointer; position: relative; transition: 0.15s all; } part[for="uploads.use"] > .wrapper:hover { border: 1px dashed var(--dh-brp10); } part[for="uploads.use"] > .wrapper > i { font-size: 60px; color: var(--dh-bc04); } part[for="uploads.use"] > .wrapper > .input { display: none; } part[for="uploads.use"] > .wrapper > p { margin-top: 5px; } part[for="builder.editor"] { width: 100%; display: block; }part[for="builder.live"] { width: 100%; display: block; min-height: 100vh; } part[for="builder.live"] > div { height: 100%; } part[for="builder.live"] > div > #made { position: fixed; right: 0; bottom: 0; background: #fff; margin: 10px; display: flex; box-shadow: var(--dh-sw01); border: 1px solid #f3f3f3; z-index: 100000000; border-radius: 3px; padding-left: 5px; padding-right: 5px; } part[for="builder.live"] > div > #made > img { padding: 5px; }part[for="admin.application"] { background: #fff; border: 1px solid var(--dh-bc10); width: 100%; padding: 15px; border-radius: 5px; position: relative; padding-bottom: 66px; } part[for="admin.application"] > .category { position: absolute; right: 15px; top: 15px; padding: 0 10px; border-radius: 3px; background: rgb(166 166 166 / 10%); font-size: 12px; font-weight: bold; border: 1px solid var(--dh-bc04); } part[for="admin.application"] > .settings { position: absolute; right: 15px; bottom: 15px; padding: 0 10px; border-radius: 3px; font-size: 12px; font-weight: bold; height: 36px; display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--dh-tp10); transition: 0.1s background-color; border: 1px solid transparent; } part[for="admin.application"] > .settings:hover { background: rgb(166 166 166 / 10%); border: 1px solid var(--dh-bc04); } part[for="admin.application"] > div > h3 { margin-bottom: 5px; } part[for="admin.application"] > div > h3 > .route { margin-left: 10px; background: var(--dh-brp01); color: var(--dh-brp10); font-size: 12px; padding: 0 6px; border-radius: 2px; } part[for="admin.application"] > i { font-size: 26px; margin-bottom: 10px; } part[for="admin.application"] > part[for="button.default"] { position: absolute; bottom: 15px; left: 15px; } part[for="account.dropdown"] > .avatar { width: 40px; height: 40px; background: var(--dh-brp10); border-radius: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; } part[for="account.dropdown"] > .avatar > span { color: #fff; margin-top: 3px; } part[for="account.dropdown"] .dropdown-hidden { background: #fff; box-shadow: var(--dh-sw01); border: 1px solid var(--dh-bc04); } part[for="account.dropdown"] .dropdown-hidden > .top { padding: 15px; } part[for="account.dropdown"] .dropdown-hidden > .top > .name { font-size: 18px; font-weight: bold; margin-bottom: 5px; } part[for="account.dropdown"] .dropdown-hidden > .top > .email { font-size: 12px; display: inline; background: var(--dh-bc02); border: 1px solid var(--dh-bc04); padding: 0 5px; border-radius: 5px; } part[for="account.dropdown"] .dropdown-hidden > .top > .email:empty { display: none; } part[for="account.dropdown"] .dropdown-hidden > .links > * { display: block; color: var(--dh-tp10); border-bottom: 1px solid var(--dh-bc04); transition: 0.15s; padding: 5px 15px; } part[for="account.dropdown"] .dropdown-hidden > .links > *:hover { background: var(--dh-bc01); } part[for="account.dropdown"] .dropdown-hidden > .links > * > i { margin-right: 5px; position: relative; top: 4px; } part[for="account.dropdown"] .dropdown-hidden > .global { padding: 7.5px 15px; text-align: center; background: var(--dh-bc01); gap: 10px; display: flex; justify-content: flex-end; } part[for="account.dropdown"] .dropdown-hidden > .global > * { color: var(--dh-tp10); transition: 0.15s color; } part[for="account.dropdown"] .dropdown-hidden > .global > *:hover { color: var(--dh-brp10); }part[for="account.login"] { width: 100%; } part[for="account.login"] .top > h3 { font-size: 28px; line-height: 35px; color: var(--dh-tp10); font-weight: 700; }part[for="account.register"] { width: 100%; } part[for="account.register"] .top > h3 { font-size: 28px; line-height: 35px; color: var(--dh-tp10); font-weight: 700; }part[for="houndstore.offer"] { max-width: 500px; margin: 0 auto; box-shadow: var(--dh-sw01); position: relative; background: white; border-radius: 0; border-top: 5px solid var(--dh-warning10); max-height: 95vh; overflow: auto; } part[for="houndstore.offer"] .info { padding: 20px; text-align: left; margin: 0 auto; } part[for="houndstore.offer"] .info > p { margin-top: 10px; } part[for="houndstore.offer"] .inputs { padding: 0 20px; margin-bottom: 20px; text-align: left; } part[for="houndstore.offer"] .inputs:empty { padding: 0; margin-bottom: 0; } part[for="houndstore.offer"] .inputs > part { width: 100%; } part[for="houndstore.offer"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } part[for="houndstore.offer"] .actions > * { width: 100%; } part[for="houndstore.offer"] .prices { display: flex; background: #f6f6f6; padding: 10px; border: 1px solid #e3e3e3; } part[for="houndstore.offer"] .prices > div { flex: 1; } part[for="houndstore.offer"] .prices > div:first-child { max-width: 30px; }part[for="store.category"] { padding: 15px; border: 1px solid var(--dh-bc04); display: block; width: 100%; }part[for="store.collection"].full > .details { border: unset!important; border-bottom: 1px solid var(--dh-bc04)!important; padding-top: 50px; padding-bottom: 50px; } part[for="store.collection"].full > .details:hover { border: unset!important; border-bottom: 1px solid var(--dh-bc04)!important; box-shadow: unset!important; } part[for="store.collection"].full > .details .bottom { display: none!important; } part[for="store.collection"].full > .details .right > part[for="button.default"] { margin-top: 20px; }part[for="store.collection"] { display: block; } part[for="store.collection"] > .details { background: #fff; padding: 30px; margin-bottom: 15px; border: 1px solid var(--dh-bc08); } part[for="store.collection"] > .details:hover { border: 1px solid var(--dh-bc10); box-shadow: 0 2px 2px 0 rgb(0 0 0 / 15%); } part[for="store.collection"] > .details > * { display: flex; } part[for="store.collection"] > .details > * > .left { width: 80px; } part[for="store.collection"] > .details > * > .left > .icon { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 5px; transform: rotate(45deg); background: var(--dh-brp01); } part[for="store.collection"] > .details > * > .left > .icon i { font-size: 30px; color: #fff; transform: rotate(-45deg); } part[for="store.collection"] > .details > * .icon.a { background: red; } part[for="store.collection"] > .details > * .icon.b { background: red; } part[for="store.collection"] > .details > * .icon.c { background: red; } part[for="store.collection"] > .details > * .icon.d { background: red; } part[for="store.collection"] > .details > * .icon.e { background: red; } part[for="store.collection"] > .details > * .icon.f { background: red; } part[for="store.collection"] > .details > * .icon.g { background: rgb(222 121 239); } part[for="store.collection"] > .details > * .icon.h { background: red; } part[for="store.collection"] > .details > * .icon.i { background: red; } part[for="store.collection"] > .details > * .icon.j { background: red; } part[for="store.collection"] > .details > * .icon.k { background: red; } part[for="store.collection"] > .details > * .icon.l { background: red; } part[for="store.collection"] > .details > * .icon.m { background: rgb(124 121 239); } part[for="store.collection"] > .details > * .icon.n { background: red; } part[for="store.collection"] > .details > * .icon.o { background: red; } part[for="store.collection"] > .details > * .icon.p { background: red; } part[for="store.collection"] > .details > * .icon.q { background: red; } part[for="store.collection"] > .details > * .icon.r { background: red; } part[for="store.collection"] > .details > * .icon.s { background: rgb(245 113 113); } part[for="store.collection"] > .details > * .icon.t { background: rgb(154 239 121); } part[for="store.collection"] > .details > * .icon.u { background: red; } part[for="store.collection"] > .details > * .icon.v { background: red; } part[for="store.collection"] > .details > * .icon.w { background: red; } part[for="store.collection"] > .details > * .icon.x { background: red; } part[for="store.collection"] > .details > * .icon.y { background: red; } part[for="store.collection"] > .details > * .icon.z { background: red; } part[for="store.collection"] > .details > * > .right { flex: 1; } part[for="store.collection"] > .details > * > .right > .top > h3 { margin-bottom: 5px; display: flex; justify-content: left; align-items: center; } part[for="store.collection"] > .details > * > .right > .top > h3 > span { margin-right: auto; } part[for="store.collection"] > .details > * > .right > .top > p { color: var(--dh-ts10); max-width: 700px; margin-top: 10px; } part[for="store.collection"] > .details > * > .right > .bottom { margin-top: 15px; display: flex; gap: 5px; } part[for="store.collection"] > .details > * > .right > .bottom > div { padding: 3px 10px; background: var(--dh-bc01); border: 1px solid var(--dh-bc04); font-weight: 500; font-size: 12px; } part[for="store.collection"] > .details > * > .right .tags { display: flex; gap: 5px; margin-left: 10px; } part[for="store.collection"] > .details > * > .right .tags > div { padding: 3px 10px; background: var(--dh-success01); color: var(--dh-success10); font-weight: bold; font-size: 12px; border-radius: 50px; display: flex; justify-content: center; align-items: center; } part[for="store.collection"] > .details > * > .right .tags > div.brand { background: var(--dh-brp01); color: var(--dh-brp10); } part[for="store.collection"] > .details > * > .right .tags > div i { margin-right: 4px; } part[for="store.collection"] > .details > * > .right > .info { display: flex; gap: 30px; margin-top: 30px; font-weight: 500; } part[for="store.collection"] > .details > * > .right > .info > div { display: flex; gap: 5px; align-items: center; }part[for="store.collection"] > .structure .tabs > h2 { margin-bottom: 20px; } part[for="store.collection"] > .structure .tabs > .tab { border-left: 4px solid var(--dh-bc08); padding-left: 30px; margin-bottom: 50px; } part[for="store.collection"] > .structure .tabs > .tab:last-child { margin-bottom: 0; } part[for="store.collection"] > .structure .tabs > .tab > p { font-size: 16px; font-weight: 500; margin-bottom: 15px; display: flex; gap: 6px; align-items: center; } part[for="store.collection"] > .structure .tabs > .tab .fields { display: flex; gap: 10px; } part[for="store.collection"] > .structure .tabs > .tab .field { border: 1px solid var(--dh-bc08); padding: 5px 10px; background: #fff; display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } part[for="store.collection"] > .structure .tabs > .tab .field p { font-weight: 500; margin-bottom: 3px; } part[for="store.element"] { } part[for="store.element"] > .image { width: 100%; position: relative; border-radius: 5px; border: 1px solid var(--dh-bc04); overflow: hidden; } part[for="store.element"] > .image > .category { position: absolute; left: 10px; top: 10px; z-index: 10000000; background: var(--dh-brp10); padding: 2px 7.5px; border-radius: 3px; font-size: 12px; color: #fff; box-shadow: var(--dh-sw03); } part[for="store.element"] > .image > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: flex; border-radius: 5px; } part[for="store.element"] > .image > .hover { width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: 1000; text-align: center; background: rgb(0 0 0 / 50%); padding: 40px; transition: 0.1s opacity; opacity: 0; pointer-events: none; } part[for="store.element"]:hover > .image > .hover { opacity: 1; pointer-events: auto; } part[for="store.element"] > .details { display: flex; height: 42px; margin-top: 15px; } part[for="store.element"] > .details > .left { flex: 1.5; display: flex; } part[for="store.element"] > .details > .left > img { width: 25px; height: 25px; object-fit: contain; margin-right: 10px; line-height: 40px; margin-top: 7.5px; } part[for="store.element"] > .details > .right { flex: 1; }part[for="collections.box"] { background: #fff; padding: 0 12px 12px; border: 1px solid var(--dh-bc08); width: 100%; position: relative; } part[for="collections.box"]:hover { border: 1px solid var(--dh-bc10); box-shadow: 0 2px 2px 0 rgb(0 0 0 / 15%); } part[for="collections.box"] > .information { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 15px; } part[for="collections.box"] > .information > .head { display: block; } part[for="collections.box"] > .information > .head > .collection-name { font-size: 15px; text-align: left; margin-bottom: 2px; margin-top: 5px; color: var(--dh-tp10); font-weight: 500; } part[for="collections.box"] > .information > .head > .items { color: var(--dh-tp10); border: 1px solid var(--dh-bc04); height: 26px; line-height: 26px; padding: 0 7px; background: var(--dh-bc01); border-radius: 5px; font-weight: 500; font-size: 11px; } part[for="collections.box"] > .information > .head > .global { color: var(--dh-success10); font-weight: bold; font-size: 14px; border: 1px solid var(--dh-success02); height: 26px; line-height: 26px; padding: 0 7px; background: var(--dh-success01); border-radius: 5px; margin-left: 5px; font-size: 12px; } part[for="collections.box"] > .links { position: absolute; top: 0; bottom: 0; right: 0; display: flex; align-items: center; padding-right: 12px; gap: 10px; pointer-events: none; } part[for="collections.box"] > .links .settings { font-size: 22px; color: var(--dh-tp10); display: flex; pointer-events: auto; } part[for="collections.box"] > .links .settings:hover { color: var(--dh-brp10); }part[for="collections.field"] { max-width: 910px; width: 70vw; margin: 0 auto; box-shadow: var(--dh-sw01); background: white; border-radius: 0; display: block; border-top: 5px solid var(--dh-success10); position: fixed; top: 0; right: 0; height: 100vh; } part[for="collections.field"] .info { padding: 10px 20px; text-align: left; margin: 0 auto; border-bottom: 1px solid var(--dh-bc04); } part[for="collections.field"] .info > p { margin-top: 10px; } part[for="collections.field"] > .middle { height: calc(100vh - 137px); overflow: auto; background: #fbfbfb; padding: 20px; } part[for="collections.field"] .inputs { padding: 0 20px; margin-bottom: 20px; text-align: left; } part[for="collections.field"] .inputs:empty { padding: 0; margin-bottom: 0; } part[for="collections.field"] .inputs > part { width: 100%; } part[for="collections.field"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; } part[for="collections.field"] .actions > * { width: 100%; }part[for="collections.tab"] { max-width: 530px; width: 100%; margin: 0 auto; box-shadow: var(--dh-sw01); position: relative; background: white; border-radius:0; border-top: 5px solid var(--dh-warning10); } part[for="collections.tab"] .info { padding: 20px; text-align: left; margin: 0 auto; } part[for="collections.tab"] .info > p { margin-top: 10px; } part[for="collections.tab"] .inputs { padding: 0 20px; margin-bottom: 20px; text-align: left; } part[for="collections.tab"] .inputs:empty { padding: 0; margin-bottom: 0; } part[for="collections.tab"] .inputs > part { width: 100%; } part[for="collections.tab"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } part[for="collections.tab"] .actions > * { width: 100%; }part[for="collections.tabs"] { background: #fff; border-right: 1px solid var(--dh-bc04); z-index: 100000000; position: relative; height: calc(100vh - 104px); width: 60px; } part[for="collections.tabs"] > .wrapper > * { text-align: center; height: 50px; line-height: 50px; border-bottom: 1px solid var(--dh-bc04); cursor: pointer; transition: 0.15s background-color; } part[for="collections.tabs"] > .wrapper > *:last-child { border-bottom: none; } part[for="collections.tabs"] > .wrapper > *:hover, part[for="collections.tabs"] > .wrapper > *.active { background-color: var(--dh-bc04); } part[for="collections.tabs"] > .wrapper > * > .icon { width: 100%; color: var(--dh-tp10); } part[for="collections.tabs"] i { position: relative; top: 4px; }part[for="forms.field"] { max-width: 910px; width: 70vw; margin: 0 auto; box-shadow: var(--dh-sw01); background: white; border-radius: 0; display: block; border-top: 5px solid var(--dh-success10); position: fixed; top: 0; right: 0; height: 100vh; } part[for="forms.field"] .info { padding: 10px 20px; text-align: left; margin: 0 auto; border-bottom: 1px solid var(--dh-bc04); } part[for="forms.field"] .info > p { margin-top: 10px; } part[for="forms.field"] > part[for="layout.grid"] { height: calc(100vh - 137px); overflow: auto; background: #fbfbfb; } part[for="forms.field"] .inputs { padding: 0 20px; margin-bottom: 20px; text-align: left; } part[for="forms.field"] .inputs:empty { padding: 0; margin-bottom: 0; } part[for="forms.field"] .inputs > part { width: 100%; } part[for="forms.field"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } part[for="forms.field"] .actions > * { width: 100%; }part[for="forms.intake"] > div > .forms-heading { padding: 30px 60px; border-bottom: 1px solid var(--dh-bc04); } part[for="forms.intake"] > div > .forms-heading > h1 { font-size: 42px; color: var(--dh-tp10); } part[for="forms.intake"] > div > .forms-heading > p { font-size: 16px; font-weight: 300; color: var(--dh-tp07); } part[for="forms.intake"].clean > div > .forms-heading { display: none; }part[for="forms.intake"]:not(.clean) .forms-intake { padding: 60px; text-align: right; } part[for="forms.intake"]:not(.clean) form > .forms-groups-row { display: flex; margin-bottom: 30px; justify-content: flex-end; gap: 20px; text-align: left; } part[for="forms.intake"]:not(.clean) form > .forms-groups-row:last-child { margin-bottom: 0px; } part[for="forms.intake"]:not(.clean) form > .forms-groups-row > div { flex: 1; width: 100%; display: flex; gap: 20px; } part[for="forms.intake"]:not(.clean) form > .forms-groups-row > .forms-groups-right > * { min-height: 36px; line-height: 36px; } part[for="forms.intake"]:not(.clean) form button { background: var(--dh-brp10); padding: 15px 30px; color: #fff; border-radius: 5px; } part[for="forms.intake"]:not(.clean) form .forms-response { text-align: left; font-weight: 16px; } part[for="forms.intake"] { display: block } part[for="forms.intake"]:not(.clean) > div { background: #fff; border: 1px solid var(--dh-bc04); }part[for="forms.intake"]:not(.clean) .forms-field-input { width: 100%; } part[for="forms.intake"]:not(.clean) .forms-field-input label { font-size: 16px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; display: block; } part[for="forms.intake"]:not(.clean) .forms-field-input input { border: 1px solid var(--dh-bc04); background: #fbfbfb; padding: 10px; } part[for="forms.intake"]:not(.clean) .forms-field-input p { font-weight: 100; color: var(--dh-tp05); margin-top: 10px; }part[for="forms.intake"]:not(.clean) .forms-field-textarea { width: 100%; } part[for="forms.intake"]:not(.clean) .forms-field-textarea label { font-size: 16px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; display: block; } part[for="forms.intake"]:not(.clean) .forms-field-textarea textarea { border: 1px solid var(--dh-bc04); background: #fbfbfb; padding: 10px; max-width: 100%; min-width: 100%; min-height: 200px; max-height: 500px; } part[for="forms.intake"]:not(.clean) .forms-field-textarea p { font-weight: 100; color: var(--dh-tp05); margin-top: 10px; }part[for="forms.submit"] { max-width: 520px; width: 100vw; margin: 0 auto; box-shadow: var(--dh-sw01); border-radius: 0; border-top: 5px solid var(--dh-success10); display: grid; gap: 20px; background: #fbfbfb; } part[for="forms.submit"] > .field { padding: 0 20px; } part[for="forms.submit"] part[for="error.empty"] { background: #fff; } part[for="forms.submit"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; } part[for="forms.submit"] .actions > * { width: 100%; } part[for="forms.submit"] .info { padding: 10px 20px; text-align: left; margin: 0 auto; border-bottom: 1px solid var(--dh-bc04); width: 100%; background: #fff; } part[for="forms.submit"] .info > p { margin-top: 10px; }part[for="forms.survey"] > div > .forms-heading { padding: 30px 60px; border-bottom: 1px solid var(--dh-bc04); } part[for="forms.survey"] > div > .forms-heading > h1 { font-size: 42px; color: var(--dh-tp10); } part[for="forms.survey"] > div > .forms-heading > p { font-size: 16px; font-weight: 300; color: var(--dh-tp07); }part[for="forms.survey"] > div { background: #fff; border: 1px solid var(--dh-bc04); }part[for="forms.survey"] > div > .forms-survey { padding: 80px 60px; padding-left: 0; } part[for="forms.survey"] > div > .forms-survey > form > div { border-left: 5px solid var(--dh-success10); padding-left: 55px; } part[for="forms.survey"] > div > .forms-survey label { font-size: 16px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; display: block; } part[for="forms.survey"] > div > .forms-survey input { border: 1px solid var(--dh-bc04); background: #fbfbfb; padding: 10px; } part[for="forms.survey"] > div > .forms-survey p { font-weight: 100; color: var(--dh-tp05); margin-top: 10px; }part[for="account.dropdown"] > .avatar { width: 40px; height: 40px; background: var(--dh-brp10); border-radius: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; } part[for="account.dropdown"] > .avatar > span { color: #fff; margin-top: 3px; } part[for="account.dropdown"] .dropdown-hidden { background: #fff; box-shadow: var(--dh-sw01); border: 1px solid var(--dh-bc04); } part[for="account.dropdown"] .dropdown-hidden > .top { padding: 15px; } part[for="account.dropdown"] .dropdown-hidden > .top > .name { font-size: 18px; font-weight: bold; margin-bottom: 5px; } part[for="account.dropdown"] .dropdown-hidden > .top > .email { font-size: 12px; display: inline; background: var(--dh-bc02); border: 1px solid var(--dh-bc04); padding: 0 5px; border-radius: 5px; } part[for="account.dropdown"] .dropdown-hidden > .top > .email:empty { display: none; } part[for="account.dropdown"] .dropdown-hidden > .links > * { display: block; color: var(--dh-tp10); border-bottom: 1px solid var(--dh-bc04); transition: 0.15s; padding: 5px 15px; } part[for="account.dropdown"] .dropdown-hidden > .links > *:hover { background: var(--dh-bc01); } part[for="account.dropdown"] .dropdown-hidden > .links > * > i { margin-right: 5px; position: relative; top: 4px; } part[for="account.dropdown"] .dropdown-hidden > .global { padding: 7.5px 15px; text-align: center; background: var(--dh-bc01); gap: 10px; display: flex; justify-content: flex-end; } part[for="account.dropdown"] .dropdown-hidden > .global > * { color: var(--dh-tp10); transition: 0.15s color; } part[for="account.dropdown"] .dropdown-hidden > .global > *:hover { color: var(--dh-brp10); }part[for="account.login"] { width: 100%; } part[for="account.login"] .top > h3 { font-size: 28px; line-height: 35px; color: var(--dh-tp10); font-weight: 700; }part[for="account.register"] { width: 100%; } part[for="account.register"] .top > h3 { font-size: 28px; line-height: 35px; color: var(--dh-tp10); font-weight: 700; }part[for="automation.action"] { background: #fff; padding: 12px; padding-top: 0; border: 1px solid var(--dh-bc04); width: 100%; transition: 0.1s border; cursor: pointer; } part[for="automation.action"]:hover { border: 1px solid var(--dh-bc10); } part[for="automation.action"] > div > .informations { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 15px; } part[for="automation.action"] > div > .informations > .head > .action-application { font-size: 16px; text-align: left; margin-bottom: 2px; margin-top: 5px; color:var(--dh-tp10); font-weight: bold; text-transform: capitalize; } part[for="automation.action"] > div > .informations > p:empty:after { content: "Missing description"; } part[for="automation.action"] > div > .automation { padding: 10px; background: var(--dh-bc02); border-radius: 5px; border: 1px solid var(--dh-bc04); text-align: left; font-weight: 600; margin-top: 10px; } part[for="automation.action"] > div > .automation > div > div { font-size: 12px; padding: 2px 0px; cursor: pointer; margin-top: 3px; border-bottom: 1px solid var(--dh-bc06); font-weight: 400; } part[for="automation.action"] > div > .automation > div > div:last-child { border-bottom: none; } part[for="automation.action"] > div > .automation p { text-align: left; position: relative; } part[for="automation.action"] > div > .automation p > i { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; cursor: pointer; border-radius: 5px; display: flex; align-items: center; justify-content: center; }part[for="automation.actionSettings"] .automation { padding: 15px; border: 1px solid var(--dh-bc06); background: #fff; border-left: 3px solid var(--dh-success10); margin-bottom: 15px; } part[for="automation.actionSettings"] .automation:last-child { margin-bottom: 0px; } part[for="automation.actionSettings"] .automation .information { border-bottom: 1px solid var(--dh-bc06); padding-bottom: 15px; margin-bottom: 15px; } part[for="automation.actionSettings"] .automation .inputs { display: grid; gap: 25px; padding-bottom: 15px; } part[for="automation.actionSettings"] .automation .options { display: flex; align-items: flex-end; justify-content: right; gap: 20px; margin-top: 30px; } part[for="automation.actionSettings"] { max-width: 910px; width: 70vw; margin: 0 auto; box-shadow: var(--dh-sw01); background: white; border-radius: 0; display: block; border-top: 5px solid var(--dh-success10); position: fixed; top: 0; right: 0; height: 100vh; } part[for="automation.actionSettings"] .info { padding: 10px 20px; text-align: left; margin: 0 auto; border-bottom: 1px solid var(--dh-bc04); } part[for="automation.actionSettings"] .info > p { margin-top: 10px; } part[for="automation.actionSettings"] > .body { height: calc(100vh - 138px); overflow: auto; background: #fbfbfb; padding: 20px; } part[for="automation.actionSettings"] .actions { background: #fbfbfb; border-top: 1px solid var(--dh-bc04); padding: 20px; display: grid; grid-gap: 20px; } part[for="automation.actionSettings"] .actions > * { width: 100%; }/* [Background Primary] */ .bg-bgp00 { background: var(--dh-bgp00)!important; } .bgh-bgp00:hover { background: var(--dh-bgp00)!important; } .bg-bgp01 { background: var(--dh-bgp01)!important; } .bgh-bgp01:hover { background: var(--dh-bgp01)!important; } .bg-bgp02 { background: var(--dh-bgp02)!important; } .bgh-bgp02:hover { background: var(--dh-bgp02)!important; } .bg-bgp03 { background: var(--dh-bgp03)!important; } .bgh-bgp03:hover { background: var(--dh-bgp03)!important; } .bg-bgp04 { background: var(--dh-bgp04)!important; } .bgh-bgp04:hover { background: var(--dh-bgp04)!important; } .bg-bgp05 { background: var(--dh-bgp05)!important; } .bgh-bgp05:hover { background: var(--dh-bgp05)!important; } .bg-bgp06 { background: var(--dh-bgp06)!important; } .bgh-bgp06:hover { background: var(--dh-bgp06)!important; } .bg-bgp07 { background: var(--dh-bgp07)!important; } .bgh-bgp07:hover { background: var(--dh-bgp07)!important; } .bg-bgp08 { background: var(--dh-bgp08)!important; } .bgh-bgp08:hover { background: var(--dh-bgp08)!important; } .bg-bgp09 { background: var(--dh-bgp09)!important; } .bgh-bgp09:hover { background: var(--dh-bgp09)!important; } .bg-bgp10 { background: var(--dh-bgp10)!important; } .bgh-bgp10:hover { background: var(--dh-bgp10)!important; } /* [Background Secondary] */ .bg-bgs01 { background: var(--dh-bgs01)!important; } .bgh-bgs01:hover { background: var(--dh-bgs01)!important; } .bg-bgs02 { background: var(--dh-bgs02)!important; } .bgh-bgs02:hover { background: var(--dh-bgs02)!important; } .bg-bgs03 { background: var(--dh-bgs03)!important; } .bgh-bgs03:hover { background: var(--dh-bgs03)!important; } .bg-bgs04 { background: var(--dh-bgs04)!important; } .bgh-bgs04:hover { background: var(--dh-bgs04)!important; } .bg-bgs05 { background: var(--dh-bgs05)!important; } .bgh-bgs05:hover { background: var(--dh-bgs05)!important; } .bg-bgs06 { background: var(--dh-bgs06)!important; } .bgh-bgs06:hover { background: var(--dh-bgs06)!important; } .bg-bgs07 { background: var(--dh-bgs07)!important; } .bgh-bgs07:hover { background: var(--dh-bgs07)!important; } .bg-bgs08 { background: var(--dh-bgs08)!important; } .bgh-bgs08:hover { background: var(--dh-bgs08)!important; } .bg-bgs09 { background: var(--dh-bgs09)!important; } .bgh-bgs09:hover { background: var(--dh-bgs09)!important; } .bg-bgs10 { background: var(--dh-bgs10)!important; } .bgh-bgs10:hover { background: var(--dh-bgs10)!important; } /* [Background Brand Primary] */ .bg-brp01 { background: var(--dh-brp01)!important; } .bgh-brp01:hover { background: var(--dh-brp01)!important; } .bg-brp02 { background: var(--dh-brp02)!important; } .bgh-brp02:hover { background: var(--dh-brp02)!important; } .bg-brp03 { background: var(--dh-brp03)!important; } .bgh-brp03:hover { background: var(--dh-brp03)!important; } .bg-brp04 { background: var(--dh-brp04)!important; } .bgh-brp04:hover { background: var(--dh-brp04)!important; } .bg-brp05 { background: var(--dh-brp05)!important; } .bgh-brp05:hover { background: var(--dh-brp05)!important; } .bg-brp06 { background: var(--dh-brp06)!important; } .bgh-brp06:hover { background: var(--dh-brp06)!important; } .bg-brp07 { background: var(--dh-brp07)!important; } .bgh-brp07:hover { background: var(--dh-brp07)!important; } .bg-brp08 { background: var(--dh-brp08)!important; } .bgh-brp08:hover { background: var(--dh-brp08)!important; } .bg-brp09 { background: var(--dh-brp09)!important; } .bgh-brp09:hover { background: var(--dh-brp09)!important; } .bg-brp10 { background: var(--dh-brp10)!important; } .bgh-brp10:hover { background: var(--dh-brp10)!important; } /* [Background Secondary] */ .bg-brs01 { background: var(--dh-brs01)!important; } .bgh-brs01:hover { background: var(--dh-brs01)!important; } .bg-brs02 { background: var(--dh-brs02)!important; } .bgh-brs02:hover { background: var(--dh-brs02)!important; } .bg-brs03 { background: var(--dh-brs03)!important; } .bgh-brs03:hover { background: var(--dh-brs03)!important; } .bg-brs04 { background: var(--dh-brs04)!important; } .bgh-brs04:hover { background: var(--dh-brs04)!important; } .bg-brs05 { background: var(--dh-brs05)!important; } .bgh-brs05:hover { background: var(--dh-brs05)!important; } .bg-brs06 { background: var(--dh-brs06)!important; } .bgh-brs06:hover { background: var(--dh-brs06)!important; } .bg-brs07 { background: var(--dh-brs07)!important; } .bgh-brs07:hover { background: var(--dh-brs07)!important; } .bg-brs08 { background: var(--dh-brs08)!important; } .bgh-brs08:hover { background: var(--dh-brs08)!important; } .bg-brs09 { background: var(--dh-brs09)!important; } .bgh-brs09:hover { background: var(--dh-brs09)!important; } .bg-brs10 { background: var(--dh-brs10)!important; } .bgh-brs10:hover { background: var(--dh-brs10)!important; } /* [Background Success] */ .bg-success01 { background: var(--dh-success01)!important; } .bgh-success01:hover { background: var(--dh-success01)!important; } .bg-success02 { background: var(--dh-success02)!important; } .bgh-success02:hover { background: var(--dh-success02)!important; } .bg-success03 { background: var(--dh-success03)!important; } .bgh-success03:hover { background: var(--dh-success03)!important; } .bg-success04 { background: var(--dh-success04)!important; } .bgh-success04:hover { background: var(--dh-success04)!important; } .bg-success05 { background: var(--dh-success05)!important; } .bgh-success05:hover { background: var(--dh-success05)!important; } .bg-success06 { background: var(--dh-success06)!important; } .bgh-success06:hover { background: var(--dh-success06)!important; } .bg-success07 { background: var(--dh-success07)!important; } .bgh-success07:hover { background: var(--dh-success07)!important; } .bg-success08 { background: var(--dh-success08)!important; } .bgh-success08:hover { background: var(--dh-success08)!important; } .bg-success09 { background: var(--dh-success09)!important; } .bgh-success09:hover { background: var(--dh-success09)!important; } .bg-success10 { background: var(--dh-success10)!important; } .bgh-success10:hover { background: var(--dh-success10)!important; } /* [Background Warning] */ .bg-warning01 { background: var(--dh-warning01)!important; } .bgh-warning01:hover { background: var(--dh-warning01)!important; } .bg-warning02 { background: var(--dh-warning02)!important; } .bgh-warning02:hover { background: var(--dh-warning02)!important; } .bg-warning03 { background: var(--dh-warning03)!important; } .bgh-warning03:hover { background: var(--dh-warning03)!important; } .bg-warning04 { background: var(--dh-warning04)!important; } .bgh-warning04:hover { background: var(--dh-warning04)!important; } .bg-warning05 { background: var(--dh-warning05)!important; } .bgh-warning05:hover { background: var(--dh-warning05)!important; } .bg-warning06 { background: var(--dh-warning06)!important; } .bgh-warning06:hover { background: var(--dh-warning06)!important; } .bg-warning07 { background: var(--dh-warning07)!important; } .bgh-warning07:hover { background: var(--dh-warning07)!important; } .bg-warning08 { background: var(--dh-warning08)!important; } .bgh-warning08:hover { background: var(--dh-warning08)!important; } .bg-warning09 { background: var(--dh-warning09)!important; } .bgh-warning09:hover { background: var(--dh-warning09)!important; } .bg-warning10 { background: var(--dh-warning10)!important; } .bgh-warning10:hover { background: var(--dh-warning10)!important; } /* [Background Danger] */ .bg-danger01 { background: var(--dh-danger01)!important; } .bgh-danger01:hover { background: var(--dh-danger01)!important; } .bg-danger02 { background: var(--dh-danger02)!important; } .bgh-danger02:hover { background: var(--dh-danger02)!important; } .bg-danger03 { background: var(--dh-danger03)!important; } .bgh-danger03:hover { background: var(--dh-danger03)!important; } .bg-danger04 { background: var(--dh-danger04)!important; } .bgh-danger04:hover { background: var(--dh-danger04)!important; } .bg-danger05 { background: var(--dh-danger05)!important; } .bgh-danger05:hover { background: var(--dh-danger05)!important; } .bg-danger06 { background: var(--dh-danger06)!important; } .bgh-danger06:hover { background: var(--dh-danger06)!important; } .bg-danger07 { background: var(--dh-danger07)!important; } .bgh-danger07:hover { background: var(--dh-danger07)!important; } .bg-danger08 { background: var(--dh-danger08)!important; } .bgh-danger08:hover { background: var(--dh-danger08)!important; } .bg-danger09 { background: var(--dh-danger09)!important; } .bgh-danger09:hover { background: var(--dh-danger09)!important; } .bg-danger10 { background: var(--dh-danger10)!important; } .bgh-danger10:hover { background: var(--dh-danger10)!important; } .bg-00 { background: var(--dh-bgp00)!important; } .bgh-00:hover { background: var(--dh-bgp00)!important; } .bg-white { background: #fff; } /* [Background Gradient ] */ .bg-grbpbs { background:#7510FF; background-image:var(--dh-grbpbs); background-size:300% 100%; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; background-position:100% 0; } .bg-grbpbs:hover { background-position:0 0; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; }/* [Default] */ .br0 { border-radius: 0px!important; } .br2 { border-radius: 2px!important; } .br4 { border-radius: 4px!important; } .br6 { border-radius: 6px!important; } .br8 { border-radius: 8px!important; } .br10 { border-radius: 10px!important; } .br14 { border-radius: 14px!important; } .br18 { border-radius: 18px!important; } .br22 { border-radius: 22px!important; } .br26 { border-radius: 26px!important; } .br30 { border-radius: 30px!important; } .br40 { border-radius: 40px!important; } .br50 { border-radius: 50px!important; } .br60 { border-radius: 50px!important; } .br70 { border-radius: 50px!important; } .br80 { border-radius: 50px!important; } .br90 { border-radius: 50px!important; } .br100 { border-radius: 100%!important; }/* [Border Full] */ .b-bc00 { border: 1px solid transparent!important; } .b-bc01 { border: 1px solid var(--dh-bc01)!important; } .b-bc02 { border: 1px solid var(--dh-bc02)!important; } .b-bc03 { border: 1px solid var(--dh-bc03)!important; } .b-bc04 { border: 1px solid var(--dh-bc04)!important; } .b-bc05 { border: 1px solid var(--dh-bc05)!important; } .b-bc06 { border: 1px solid var(--dh-bc06)!important; } .b-bc07 { border: 1px solid var(--dh-bc07)!important; } .b-bc08 { border: 1px solid var(--dh-bc08)!important; } .b-bc09 { border: 1px solid var(--dh-bc09)!important; } .b-bc10 { border: 1px solid var(--dh-bc10)!important; } /* [Border Bottom] */ .bb-bc00 { border-bottom: 1px solid transparent!important; } .bb-bc01 { border-bottom: 1px solid var(--dh-bc01)!important; } .bb-bc02 { border-bottom: 1px solid var(--dh-bc02)!important; } .bb-bc03 { border-bottom: 1px solid var(--dh-bc03)!important; } .bb-bc04 { border-bottom: 1px solid var(--dh-bc04)!important; } .bb-bc05 { border-bottom: 1px solid var(--dh-bc05)!important; } .bb-bc06 { border-bottom: 1px solid var(--dh-bc06)!important; } .bb-bc07 { border-bottom: 1px solid var(--dh-bc07)!important; } .bb-bc08 { border-bottom: 1px solid var(--dh-bc08)!important; } .bb-bc09 { border-bottom: 1px solid var(--dh-bc09)!important; } .bb-bc10 { border-bottom: 1px solid var(--dh-bc10)!important; } /* [Border Top] */ .bt-bc00 { border-top: 1px solid transparent!important; } .bt-bc01 { border-top: 1px solid var(--dh-bc01)!important; } .bt-bc02 { border-top: 1px solid var(--dh-bc02)!important; } .bt-bc03 { border-top: 1px solid var(--dh-bc03)!important; } .bt-bc04 { border-top: 1px solid var(--dh-bc04)!important; } .bt-bc05 { border-top: 1px solid var(--dh-bc05)!important; } .bt-bc06 { border-top: 1px solid var(--dh-bc06)!important; } .bt-bc07 { border-top: 1px solid var(--dh-bc07)!important; } .bt-bc08 { border-top: 1px solid var(--dh-bc08)!important; } .bt-bc09 { border-top: 1px solid var(--dh-bc09)!important; } .bt-bc10 { border-top: 1px solid var(--dh-bc10)!important; } /* [Border Left] */ .bl-bc00 { border-left: 1px solid transparent!important; } .bl-bc01 { border-left: 1px solid var(--dh-bc01)!important; } .bl-bc02 { border-left: 1px solid var(--dh-bc02)!important; } .bl-bc03 { border-left: 1px solid var(--dh-bc03)!important; } .bl-bc04 { border-left: 1px solid var(--dh-bc04)!important; } .bl-bc05 { border-left: 1px solid var(--dh-bc05)!important; } .bl-bc06 { border-left: 1px solid var(--dh-bc06)!important; } .bt-bc07 { border-left: 1px solid var(--dh-bc07)!important; } .bl-bc08 { border-left: 1px solid var(--dh-bc08)!important; } .bl-bc09 { border-left: 1px solid var(--dh-bc09)!important; } .bl-bc10 { border-left: 1px solid var(--dh-bc10)!important; } /* [Border Right] */ .br-bc00 { border-right: 1px solid transparent!important; } .br-bc01 { border-right: 1px solid var(--dh-bc01)!important; } .br-bc02 { border-right: 1px solid var(--dh-bc02)!important; } .br-bc03 { border-right: 1px solid var(--dh-bc03)!important; } .br-bc04 { border-right: 1px solid var(--dh-bc04)!important; } .br-bc05 { border-right: 1px solid var(--dh-bc05)!important; } .br-bc06 { border-right: 1px solid var(--dh-bc06)!important; } .br-bc07 { border-right: 1px solid var(--dh-bc07)!important; } .br-bc08 { border-right: 1px solid var(--dh-bc08)!important; } .br-bc09 { border-right: 1px solid var(--dh-bc09)!important; } .br-bc10 { border-right: 1px solid var(--dh-bc10)!important; } /* [Border Options] */ .bc-00 { border-color: transparent!important; } .bc-brp { border-color: var(--dh-brp10)!important; } .bc-brs { border-color: var(--dh-brs10)!important; } .bc-bgp { border-color: var(--dh-bgp10)!important; } .bc-bgs { border-color: var(--dh-bgs10)!important; } .bc-success { border-color: var(--dh-success10)!important; } .bc-warning { border: 1px solid var(--dh-warning10)!important; } .bc-danger { border: 1px solid var(--dh-danger10)!important; } .bch-00:hover { border-color: transparent!important; } .bch-brp:hover { border-color: var(--dh-brp10)!important; } .bch-brs:hover { border-color: var(--dh-brs10)!important; } .bch-bgp:hover { border-color: var(--dh-bgp10)!important; } .bch-bgs:hover { border-color: var(--dh-bgs10)!important; } .bch-success:hover { border-color: var(--dh-success10)!important; } .bch-warning:hover { border-color: var(--dh-warning10)!important; } .bch-danger:hover { border-color: var(--dh-danger10)!important; }/* [Text Primary] */ .c-tp01 { color: var(--dh-tp01)!important; } .ch-tp01:hover { color: var(--dh-tp01)!important; } .c-tp02 { color: var(--dh-tp02)!important; } .ch-tp02:hover { color: var(--dh-tp02)!important; } .c-tp03 { color: var(--dh-tp03)!important; } .ch-tp03:hover { color: var(--dh-tp03)!important; } .c-tp04 { color: var(--dh-tp04)!important; } .ch-tp04:hover { color: var(--dh-tp04)!important; } .c-tp05 { color: var(--dh-tp05)!important; } .ch-tp05:hover { color: var(--dh-tp05)!important; } .c-tp06 { color: var(--dh-tp06)!important; } .ch-tp06:hover { color: var(--dh-tp06)!important; } .c-tp07 { color: var(--dh-tp07)!important; } .ch-tp07:hover { color: var(--dh-tp07)!important; } .c-tp08 { color: var(--dh-tp08)!important; } .ch-tp08:hover { color: var(--dh-tp08)!important; } .c-tp09 { color: var(--dh-tp09)!important; } .ch-tp09:hover { color: var(--dh-tp09)!important; } .c-tp10 { color: var(--dh-tp10)!important; } .ch-tp10:hover { color: var(--dh-tp10)!important; } /* [Text Secondary] */ .c-ts01 { color: var(--dh-ts01)!important; } .ch-ts01:hover { color: var(--dh-ts01)!important; } .c-ts02 { color: var(--dh-ts02)!important; } .ch-ts02:hover { color: var(--dh-ts02)!important; } .c-ts03 { color: var(--dh-ts03)!important; } .ch-ts03:hover { color: var(--dh-ts03)!important; } .c-ts04 { color: var(--dh-ts04)!important; } .ch-ts04:hover { color: var(--dh-ts04)!important; } .c-ts05 { color: var(--dh-ts05)!important; } .ch-ts05:hover { color: var(--dh-ts05)!important; } .c-ts06 { color: var(--dh-ts06)!important; } .ch-ts06:hover { color: var(--dh-ts06)!important; } .c-ts07 { color: var(--dh-ts07)!important; } .ch-ts07:hover { color: var(--dh-ts07)!important; } .c-ts08 { color: var(--dh-ts08)!important; } .ch-ts08:hover { color: var(--dh-ts08)!important; } .c-ts09 { color: var(--dh-ts09)!important; } .ch-ts09:hover { color: var(--dh-ts09)!important; } .c-ts10 { color: var(--dh-ts10)!important; } .ch-ts10:hover { color: var(--dh-ts10)!important; } /* [Text Brand Primary] */ .c-brp01 { color: var(--dh-brp01)!important; } .ch-brp01:hover { color: var(--dh-brp01)!important; } .c-brp02 { color: var(--dh-brp02)!important; } .ch-brp02:hover { color: var(--dh-brp02)!important; } .c-brp03 { color: var(--dh-brp03)!important; } .ch-brp03:hover { color: var(--dh-brp03)!important; } .c-brp04 { color: var(--dh-brp04)!important; } .ch-brp04:hover { color: var(--dh-brp04)!important; } .c-brp05 { color: var(--dh-brp05)!important; } .ch-brp05:hover { color: var(--dh-brp05)!important; } .c-brp06 { color: var(--dh-brp06)!important; } .ch-brp06:hover { color: var(--dh-brp06)!important; } .c-brp07 { color: var(--dh-brp07)!important; } .ch-brp07:hover { color: var(--dh-brp07)!important; } .c-brp08 { color: var(--dh-brp08)!important; } .ch-brp08:hover { color: var(--dh-brp08)!important; } .c-brp09 { color: var(--dh-brp09)!important; } .ch-brp09:hover { color: var(--dh-brp09)!important; } .c-brp10 { color: var(--dh-brp10)!important; } .ch-brp10:hover { color: var(--dh-brp10)!important; } /* [Text Secondary] */ .c-brs01 { color: var(--dh-brs01)!important; } .ch-brs01:hover { color: var(--dh-brs01)!important; } .c-brs02 { color: var(--dh-brs02)!important; } .ch-brs02:hover { color: var(--dh-brs02)!important; } .c-brs03 { color: var(--dh-brs03)!important; } .ch-brs03:hover { color: var(--dh-brs03)!important; } .c-brs04 { color: var(--dh-brs04)!important; } .ch-brs04:hover { color: var(--dh-brs04)!important; } .c-brs05 { color: var(--dh-brs05)!important; } .ch-brs05:hover { color: var(--dh-brs05)!important; } .c-brs06 { color: var(--dh-brs06)!important; } .ch-brs06:hover { color: var(--dh-brs06)!important; } .c-brs07 { color: var(--dh-brs07)!important; } .ch-brs07:hover { color: var(--dh-brs07)!important; } .c-brs08 { color: var(--dh-brs08)!important; } .ch-brs08:hover { color: var(--dh-brs08)!important; } .c-brs09 { color: var(--dh-brs09)!important; } .ch-brs09:hover { color: var(--dh-brs09)!important; } .c-brs10 { color: var(--dh-brs10)!important; } .ch-brs10:hover { color: var(--dh-brs10)!important; } /* [Text Success] */ .c-success01 { color: var(--dh-success01)!important; } .ch-success01:hover { color: var(--dh-success01)!important; } .c-success02 { color: var(--dh-success02)!important; } .ch-success02:hover { color: var(--dh-success02)!important; } .c-success03 { color: var(--dh-success03)!important; } .ch-success03:hover { color: var(--dh-success03)!important; } .c-success04 { color: var(--dh-success04)!important; } .ch-success04:hover { color: var(--dh-success04)!important; } .c-success05 { color: var(--dh-success05)!important; } .ch-success05:hover { color: var(--dh-success05)!important; } .c-success06 { color: var(--dh-success06)!important; } .ch-success06:hover { color: var(--dh-success06)!important; } .c-success07 { color: var(--dh-success07)!important; } .ch-success07:hover { color: var(--dh-success07)!important; } .c-success08 { color: var(--dh-success08)!important; } .ch-success08:hover { color: var(--dh-success08)!important; } .c-success09 { color: var(--dh-success09)!important; } .ch-success09:hover { color: var(--dh-success09)!important; } .c-success10 { color: var(--dh-success10)!important; } .ch-success10:hover { color: var(--dh-success10)!important; } /* [Text Warning] */ .c-warning01 { color: var(--dh-warning01)!important; } .ch-warning01:hover { color: var(--dh-warning01)!important; } .c-warning02 { color: var(--dh-warning02)!important; } .ch-warning02:hover { color: var(--dh-warning02)!important; } .c-warning03 { color: var(--dh-warning03)!important; } .ch-warning03:hover { color: var(--dh-warning03)!important; } .c-warning04 { color: var(--dh-warning04)!important; } .ch-warning04:hover { color: var(--dh-warning04)!important; } .c-warning05 { color: var(--dh-warning05)!important; } .ch-warning05:hover { color: var(--dh-warning05)!important; } .c-warning06 { color: var(--dh-warning06)!important; } .ch-warning06:hover { color: var(--dh-warning06)!important; } .c-warning07 { color: var(--dh-warning07)!important; } .ch-warning07:hover { color: var(--dh-warning07)!important; } .c-warning08 { color: var(--dh-warning08)!important; } .ch-warning08:hover { color: var(--dh-warning08)!important; } .c-warning09 { color: var(--dh-warning09)!important; } .ch-warning09:hover { color: var(--dh-warning09)!important; } .c-warning10 { color: var(--dh-warning10)!important; } .ch-warning10:hover { color: var(--dh-warning10)!important; } /* [Text Danger] */ .c-danger01 { color: var(--dh-danger01)!important; } .ch-danger01:hover { color: var(--dh-danger01)!important; } .c-danger02 { color: var(--dh-danger02)!important; } .ch-danger02:hover { color: var(--dh-danger02)!important; } .c-danger03 { color: var(--dh-danger03)!important; } .ch-danger03:hover { color: var(--dh-danger03)!important; } .c-danger04 { color: var(--dh-danger04)!important; } .ch-danger04:hover { color: var(--dh-danger04)!important; } .c-danger05 { color: var(--dh-danger05)!important; } .ch-danger05:hover { color: var(--dh-danger05)!important; } .c-danger06 { color: var(--dh-danger06)!important; } .ch-danger06:hover { color: var(--dh-danger06)!important; } .c-danger07 { color: var(--dh-danger07)!important; } .ch-danger07:hover { color: var(--dh-danger07)!important; } .c-danger08 { color: var(--dh-danger08)!important; } .ch-danger08:hover { color: var(--dh-danger08)!important; } .c-danger09 { color: var(--dh-danger09)!important; } .ch-danger09:hover { color: var(--dh-danger09)!important; } .c-danger10 { color: var(--dh-danger10)!important; } .ch-danger10:hover { color: var(--dh-danger10)!important; }/* [Default] */ .content { max-width: 1140px!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } .content-full { max-width: 100%!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } .content-full-plr30 { max-width: 100%!important; margin: 0 auto!important; padding-left: 30px!important; padding-right: 30px!important; width: 100%!important; display: block; } .content-400 { max-width: 400px!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } .content-600 { max-width: 600px!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } .content-800 { max-width: 800px!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } .content-1000 { max-width: 1000px!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } .content-1200 { max-width: 1180px!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } .content-1400 { max-width: 1400px!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } .content-1600 { max-width: 1600px!important; margin: 0 auto!important; padding-left: 20px!important; padding-right: 20px!important; width: 100%!important; display: block; } /* [Aligns] */ .content-middle { display: -webkit-box!important; display: -webkit-flex!important; display: flex!important; -webkit-flex-direction: column!important; flex-direction: column!important; -webkit-justify-content: center!important; justify-content: center!important; } @media (max-width: 767px) { .content-full, .content-400, .content-600, .content-800, .content-10000, .content-1200, .content-1400, .content-1600, .content-full-plr30 { padding-left: 12px!important; padding-right: 12px!important; } }/* Custom CSS */ .w100 { width: 100%!important; }/* [Default] */ .inline-block { display: inline-block!important; } .block { display: block!important;; }/* [Default] */ .flex { display: flex!important; } /* [Options] */ .flex.jcce { justify-content: center!important; } .flex.jcsa { justify-content: space-around!important; } .flex.jcsb { justify-content: space-between!important; } .flex.jcse { justify-content: space-evenly!important; } .flex.jsfs { justify-content: flex-start!important; } .flex.jcfe { justify-content: flex-end!important; } .flex.wrap { flex-wrap: wrap!important; } .flex.shrink0 { flex-shrink: 0!important; } .flex.shrink1 { flex-shrink: 1!important; } .flex.shrink2 { flex-shrink: 2!important; } .flex.grow1 { flex-grow: 1!important; } .flex.grow2 { flex-grow: 2!important; } .flex.grow3 { flex-grow: 3!important; } /* [Flex's] */ .flex1 { flex: 1!important; } .flex2 { flex: 2!important; } .flex3 { flex: 3!important; } .flex4 { flex: 4!important; } .flex5 { flex: 5!important; }/* [Default] */ .fs8 { font-size: 8px!important; line-height: 18px!important; } .fs9 { font-size: 9px!important; line-height: 19px!important; } .fs10 { font-size: 10px!important; line-height: 20px!important; } .fs11 { font-size: 11px!important; line-height: 21px!important; } .fs12 { font-size: 12px!important; line-height: 22px!important; } .fs13 { font-size: 13px!important; line-height: 23px!important; } .fs14 { font-size: 14px!important; line-height: 24px!important; } .fs15 { font-size: 15px!important; line-height: 25px!important; } .fs16 { font-size: 16px!important; line-height: 26px!important; } .fs18 { font-size: 18px!important; line-height: 28px!important; } .fs20 { font-size: 20px!important; line-height: 30px!important; } .fs22 { font-size: 22px!important; line-height: 32px!important; } .fs24 { font-size: 24px!important; line-height: 34px!important; } .fs28 { font-size: 28px!important; line-height: 38px!important; } .fs32 { font-size: 32px!important; line-height: 42px!important; } .fs36 { font-size: 36px!important; line-height: 46px!important; } .fs42 { font-size: 42px!important; line-height: 52px!important; } .fs48 { font-size: 48px!important; line-height: 58px!important; } .fs56 { font-size: 56px!important; line-height: 66px!important; } .fs62 { font-size: 62px!important; line-height: 72px!important; } .fs68 { font-size: 68px!important; line-height: 78px!important; }/* [Default] */ .fw100 { font-weight: 100!important; } .fw200 { font-weight: 200!important; } .fw300 { font-weight: 300!important; } .fw400 { font-weight: 400!important; } .fw500 { font-weight: 500!important; } .fw600 { font-weight: 600!important; } .fw700 { font-weight: 700!important; } .fw800 { font-weight: 800!important; } .fw900 { font-weight: 900!important; }/* [Default] */ .ffp { font-family: var(--dh-fp)!important; } .ffs { font-family: var(--dh-fs)!!important; } /* [Default] */ .grid { display: grid!important; } /* [Grid Gap] */ .grid.gap5 { grid-gap: 5px!important; } .grid.gap10 { grid-gap: 10px!important; } .grid.gap15 { grid-gap: 15px!important; } .grid.gap20 { grid-gap: 20px!important; } .grid.gap25 { grid-gap: 25px!important; } .grid.gap30 { grid-gap: 30px!important; } .grid.gap35 { grid-gap: 35px!important; } .grid.gap40 { grid-gap: 40px!important; } .grid.gap45 { grid-gap: 45px!important; } .grid.gap50 { grid-gap: 50px!important; } /* [Grid Columns] */ .grid.col1 { grid-template-columns: repeat(1, minmax(5px, 1fr)); } .grid.col2 { grid-template-columns: repeat(2, minmax(5px, 1fr)); } .grid.col3 { grid-template-columns: repeat(3, minmax(5px, 1fr)); } .grid.col4 { grid-template-columns: repeat(4, minmax(5px, 1fr)); } .grid.col5 { grid-template-columns: repeat(5, minmax(5px, 1fr)); } .grid.col6 { grid-template-columns: repeat(6, minmax(5px, 1fr)); } .grid.col7 { grid-template-columns: repeat(7, minmax(5px, 1fr)); } .grid.col8 { grid-template-columns: repeat(8, minmax(5px, 1fr)); } .grid.col9 { grid-template-columns: repeat(9, minmax(5px, 1fr)); } .grid.col10 { grid-template-columns: repeat(10, minmax(5px, 1fr)); } /* [Grid Auto] */ .grid.auto50 { grid-template-columns: repeat(auto-fit, minmax(50px, 50px)); } .grid.auto100 { grid-template-columns: repeat(auto-fit, minmax(100px, 100px)); } .grid.auto150 { grid-template-columns: repeat(auto-fit, minmax(150px, 150px)); } .grid.auto200 { grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); } .grid.auto250 { grid-template-columns: repeat(auto-fit, minmax(250px, 250px)); } .grid.auto300 { grid-template-columns: repeat(auto-fit, minmax(300px, 300px)); } .grid.auto350 { grid-template-columns: repeat(auto-fit, minmax(350px, 350px)); } .grid.auto400 { grid-template-columns: repeat(auto-fit, minmax(400px, 400px)); } .grid.auto450 { grid-template-columns: repeat(auto-fit, minmax(450px, 450px)); } .grid.auto500 { grid-template-columns: repeat(auto-fit, minmax(500px, 500px)); }body { line-height: 1.4; font-size: 14px; letter-spacing: 0.1px; font-weight: 400; margin: 0 auto; height: 100%; overflow-x: hidden; display: block; color: var(--dh-tp10); scroll-behavior: smooth; } html { display: block; } * { box-sizing: border-box; } body { font-family: var(--dh-fp); color: var(--dh-tp10); font-size: 14px; line-height: 1.6; } body a { color: var(--dh-brp10); font-family: var(--dh-fp); text-decoration: none; cursor: pointer; display: inline-block; transition: 0.1s all; } body a:hover { color: var(--dh-brp07); } body h1, body h2, body h3, body h4, body h5, body h6 { margin: 0px; padding: 0px; color: var(--dh-tp10); font-family: var(--dh-fp); } body p, body small, body span, body ul, body li, body div { margin: 0px; padding: 0px; line-height: 1.6; color: var(--dh-tp10); list-style-type: none; font-family: var(--dh-fp); } body img { max-width: 100%; } body input, body select, body textarea, body iframe { outline: 0; background: transparent; text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; z-index: 10; position: relative; width: 100%; border: 0; font-family: var(--dh-fp); } body button { outline: none; color: var(--dh-tp10); text-rendering: auto; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; margin: 0; display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: none; cursor: pointer; transition: 0.15s all; background: transparent; font-family: var(--dh-fp); } body select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; } body pre { margin: 0!important; background: var(--dh-bgs10); border-radius: 5px; overflow: hidden; font-family: var(--dh-fp); } body code { padding: 15px!important; } /* [Margin Full] */ .mf5 { margin: 5px!important; } .mf10 { margin: 10px!important; } .mf15 { margin: 15px!important; } .mf20 { margin: 20px!important; } .mf25 { margin: 25px!important; } .mf30 { margin: 30px!important; } .mf35 { margin: 35px!important; } .mf40 { margin: 40px!important; } .mf45 { margin: 45px!important; } .mf50 { margin: 50px!important; } .mf60 { margin: 60px!important; } .mf70 { margin: 70px!important; } .mf80 { margin: 80px!important; } .mf90 { margin: 90px!important; } .mf100 { margin: 100px!important; } /* [Margin Top Bottom] */ .mtb5 { margin: 5px 0px!important; } .mtb10 { margin: 10px 0px!important; } .mtb15 { margin: 15px 0px!important; } .mtb20 { margin: 20px 0px!important; } .mtb25 { margin: 25px 0px!important; } .mtb30 { margin: 30px 0px!important; } .mtb35 { margin: 35px 0px!important; } .mtb40 { margin: 40px 0px!important; } .mtb45 { margin: 45px 0px!important; } .mtb50 { margin: 50px 0px!important; } .mtb60 { margin: 60px 0px!important; } .mtb70 { margin: 70px 0px!important; } .mtb80 { margin: 80px 0px!important; } .mtb90 { margin: 90px 0px!important; } .mtb100 { margin: 100px 0px!important; } /* [Margin Left Right] */ .mlr5 { margin: 0px 5px!important; } .mlr10 { margin: 0px 10px!important; } .mlr15 { margin: 0px 15px!important; } .mlr20 { margin: 0px 20px!important; } .mlr25 { margin: 0px 25px!important; } /* [Margin Top] */ .mt5 { margin-top: 5px!important; } .mt10 { margin-top: 10px!important; } .mt15 { margin-top: 15px!important; } .mt20 { margin-top: 20px!important; } .mt25 { margin-top: 25px!important; } .mt30 { margin-top: 30px!important; } .mt35 { margin-top: 35px!important; } .mt40 { margin-top: 40px!important; } .mt45 { margin-top: 45px!important; } .mt50 { margin-top: 50px!important; } .mt100 { margin-top: 100px!important; } /* [Margin Bottom] */ .mb0 { margin-bottom: 0!important } .mb5 { margin-bottom: 5px!important; } .mb10 { margin-bottom: 10px!important; } .mb15 { margin-bottom: 15px!important; } .mb20 { margin-bottom: 20px!important; } .mb25 { margin-bottom: 25px!important; } .mb30 { margin-bottom: 30px!important; } .mb35 { margin-bottom: 35px!important; } .mb40 { margin-bottom: 40px!important; } .mb45 { margin-bottom: 45px!important; } .mb50 { margin-bottom: 50px!important; }/* [Padding Full] */ .pf5 { padding: 5px!important; } .pf10 { padding: 10px!important; } .pf15 { padding: 15px!important; } .pf20 { padding: 20px!important; } .pf25 { padding: 25px!important; } .pf30 { padding: 30px!important; } .pf35 { padding: 35px!important; } .pf40 { padding: 40px!important; } .pf45 { padding: 45px!important; } .pf50 { padding: 50px!important; } .pf60 { padding: 60px!important; } .pf70 { padding: 70px!important; } .pf80 { padding: 80px!important; } .pf90 { padding: 90px!important; } .pf100 { padding: 100px!important; } /* [Padding Top Bottom] */ .ptb5 { padding: 5px 0px!important; } .ptb10 { padding: 10px 0px!important; } .ptb15 { padding: 15px 0px!important; } .ptb20 { padding: 20px 0px!important; } .ptb25 { padding: 25px 0px!important; } .ptb30 { padding: 30px 0px!important; } .ptb35 { padding: 35px 0px!important; } .ptb40 { padding: 40px 0px!important; } .ptb45 { padding: 45px 0px!important; } .ptb50 { padding: 50px 0px!important; } .ptb60 { padding: 60px 0px!important; } .ptb70 { padding: 70px 0px!important; } .ptb80 { padding: 80px 0px!important; } .ptb90 { padding: 90px 0px!important; } .ptb100 { padding: 100px 0px!important; } /* [Padding Left Right] */ .plr5 { padding: 0px 5px!important; } .plr10 { padding: 0px 10px!important; } .plr15 { padding: 0px 15px!important; } .plr20 { padding: 0px 20px!important; } .plr25 { padding: 0px 25px!important; } /* [Padding Top] */ .pt5 { padding-top: 5px!important; } .pt10 { padding-top: 10px!important; } .pt15 { padding-top: 15px!important; } .pt20 { padding-top: 20px!important; } .pt25 { padding-top: 25px!important; } .pt30 { padding-top: 30px!important; } .pt35 { padding-top: 35px!important; } .pt40 { padding-top: 40px!important; } .pt45 { padding-top: 45px!important; } .pt50 { padding-top: 50px!important; } /* [Padding Bottom] */ .pb5 { padding-bottom: 5px!important; } .pb10 { padding-bottom: 10px!important; } .pb15 { padding-bottom: 15px!important; } .pb20 { padding-bottom: 20px!important; } .pb25 { padding-bottom: 25px!important; } .pb30 { padding-bottom: 30px!important; } .pb35 { padding-bottom: 35px!important; } .pb40 { padding-bottom: 40px!important; } .pb45 { padding-bottom: 45px!important; } .pb50 { padding-bottom: 50px!important; }.scrollbar::-webkit-scrollbar { width: 5px; height: 5px; border-radius: 5px; } .scrollbar::-webkit-scrollbar-track { background: #ffffff; } .scrollbar::-webkit-scrollbar-thumb { background: #b6b6b6; cursor: pointer; border-radius: 5px; } .scrollbar::-webkit-scrollbar-thumb:hover { background: #ffffff; }/* [Default] */ .sw01 { box-shadow: var(--dh-sw01)!important; } .sw02 { box-shadow: var(--dh-sw02)!important; } .sw03 { box-shadow: var(--dh-sw03)!important; }/* [Default] */ .ttupper { text-transform: uppercase!important; } .ttcapit { text-transform: capitalize!important; } .ttlower { text-transform: lowercase!important; } .ttinit { text-transform: initial!important; } /* [Alings] */ .tac { text-align: center!important; } .tal { text-align: left!important; } .tar { text-align: right!important; } .taj { text-align: justify!important; } /* [Ellipsis] */ .ellipsis1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ellipsis4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ellipsis5 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }body.silver { background: #fbfbfb!important; } body.white { background: #ffffff!important; } body.transparent { background: transparent!important; } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background: #f1f1f1; border-left: 1px solid #d3d3d3; } body::-webkit-scrollbar-thumb { background: #d9d9d9; box-shadow: inset 0 0 5px #c3c3c3; } part { display: inline-block; } style { display: none!important; } i { font-size: 17px; }body { /* [Fonts] */ --dh-fp: 'Mukta', sans-serif; /* [Shadows For Light] */ --dh-sw01: 0 2px 20px 0 rgba(0,0,0,.04); --dh-sw02: 0 2px 20px 0 rgba(0,0,0,.08); --dh-sw03: 0 2px 20px 0 rgba(0,0,0,.12); /* [Brand Primary] */ --dh-brp01: rgb(163 117 255 / 0.1); --dh-brp02: rgb(163 117 255 / 0.2); --dh-brp03: rgb(163 117 255 / 0.3); --dh-brp04: rgb(163 117 255 / 0.4); --dh-brp05: rgb(163 117 255 / 0.5); --dh-brp06: rgb(163 117 255 / 0.6); --dh-brp07: rgb(163 117 255 / 0.7); --dh-brp08: rgb(163 117 255 / 0.8); --dh-brp09: rgb(163 117 255 / 0.9); --dh-brp10: rgb(163 117 255 / 1.0); /* [Brand Secondary] */ --dh-brs01: rgb(181 55 255 / 0.1); --dh-brs02: rgb(181 55 255 / 0.2); --dh-brs03: rgb(181 55 255 / 0.3); --dh-brs04: rgb(181 55 255 / 0.4); --dh-brs05: rgb(181 55 255 / 0.5); --dh-brs06: rgb(181 55 255 / 0.6); --dh-brs07: rgb(181 55 255 / 0.7); --dh-brs08: rgb(181 55 255 / 0.8); --dh-brs09: rgb(181 55 255 / 0.9); --dh-brs10: rgb(181 55 255 / 1.0); /* [Background Primary] */ --dh-bgp01: rgb(26 26 28 / 0.1); --dh-bgp02: rgb(26 26 28 / 0.2); --dh-bgp03: rgb(26 26 28 / 0.3); --dh-bgp04: rgb(26 26 28 / 0.4); --dh-bgp05: rgb(26 26 28 / 0.5); --dh-bgp06: rgb(26 26 28 / 0.6); --dh-bgp07: rgb(26 26 28 / 0.7); --dh-bgp08: rgb(26 26 28 / 0.8); --dh-bgp09: rgb(26 26 28 / 0.9); --dh-bgp10: rgb(26 26 28 / 1.0); /* [Background Secondary] */ --dh-bgs00: rgb(246 246 246 / 1.0); --dh-bgs01: rgb(246 246 246 / 0.1); --dh-bgs02: rgb(246 246 246 / 0.2); --dh-bgs03: rgb(246 246 246 / 0.3); --dh-bgs04: rgb(246 246 246 / 0.4); --dh-bgs05: rgb(246 246 246 / 0.5); --dh-bgs06: rgb(246 246 246 / 0.6); --dh-bgs07: rgb(246 246 246 / 0.7); --dh-bgs08: rgb(246 246 246 / 0.8); --dh-bgs09: rgb(246 246 246 / 0.9); --dh-bgs10: rgb(246 246 246 / 1.0); /* [Text Primary] */ --dh-tp01: rgb(26 26 28 / 0.1); --dh-tp02: rgb(26 26 28 / 0.2); --dh-tp03: rgb(26 26 28 / 0.3); --dh-tp04: rgb(26 26 28 / 0.4); --dh-tp05: rgb(26 26 28 / 0.5); --dh-tp06: rgb(26 26 28 / 0.6); --dh-tp07: rgb(26 26 28 / 0.7); --dh-tp08: rgb(26 26 28 / 0.8); --dh-tp09: rgb(26 26 28 / 0.9); --dh-tp10: rgb(26 26 28 / 1.0); /* [Text Secondary] */ --dh-ts01: rgb(125 125 125 / 0.1); --dh-ts02: rgb(125 125 125 / 0.2); --dh-ts03: rgb(125 125 125 / 0.3); --dh-ts04: rgb(125 125 125 / 0.4); --dh-ts05: rgb(125 125 125 / 0.5); --dh-ts06: rgb(125 125 125 / 0.6); --dh-ts07: rgb(125 125 125 / 0.7); --dh-ts08: rgb(125 125 125 / 0.8); --dh-ts09: rgb(125 125 125 / 0.9); --dh-ts10: rgb(125 125 125 / 1.0); /* [Success Colors] */ --dh-success01: rgb(68 230 182 / 0.1); --dh-success02: rgb(68 230 182 / 0.2); --dh-success03: rgb(68 230 182 / 0.3); --dh-success04: rgb(68 230 182 / 0.4); --dh-success05: rgb(68 230 182 / 0.5); --dh-success06: rgb(68 230 182 / 0.6); --dh-success07: rgb(68 230 182 / 0.7); --dh-success08: rgb(68 230 182 / 0.8); --dh-success09: rgb(68 230 182 / 0.9); --dh-success10: rgb(68 230 182 / 1.0); /* [Warning Colors] */ --dh-warning01: rgb(255 169 0 / 0.1); --dh-warning02: rgb(255 169 0 / 0.2); --dh-warning03: rgb(255 169 0 / 0.3); --dh-warning04: rgb(255 169 0 / 0.4); --dh-warning05: rgb(255 169 0 / 0.5); --dh-warning06: rgb(255 169 0 / 0.6); --dh-warning07: rgb(255 169 0 / 0.7); --dh-warning08: rgb(255 169 0 / 0.8); --dh-warning09: rgb(255 169 0 / 0.9); --dh-warning10: rgb(255 169 0 / 1.0); /* [Danger Colors] */ --dh-danger01: rgb(230 68 68 / 0.1); --dh-danger02: rgb(230 68 68 / 0.2); --dh-danger03: rgb(230 68 68 / 0.3); --dh-danger04: rgb(230 68 68 / 0.4); --dh-danger05: rgb(230 68 68 / 0.5); --dh-danger06: rgb(230 68 68 / 0.6); --dh-danger07: rgb(230 68 68 / 0.7); --dh-danger08: rgb(230 68 68 / 0.8); --dh-danger09: rgb(230 68 68 / 0.9); --dh-danger10: rgb(230 68 68 / 1.0); /* [Border] */ --dh-bc00: rgb(217 219 224 / 0.0); --dh-bc01: rgb(217 219 224 / 0.1); --dh-bc02: rgb(217 219 224 / 0.2); --dh-bc03: rgb(217 219 224 / 0.3); --dh-bc04: rgb(217 219 224 / 0.4); --dh-bc05: rgb(217 219 224 / 0.5); --dh-bc06: rgb(217 219 224 / 0.6); --dh-bc07: rgb(217 219 224 / 0.7); --dh-bc08: rgb(217 219 224 / 0.8); --dh-bc09: rgb(217 219 224 / 0.9); --dh-bc10: rgb(217 219 224 / 1.0); /* Css */ background: #fff; }#popup .browser[data-id="uploads"] { height:calc(100vh - 130px); } #popup .browser[data-id="uploads"] a.logo { display: none; } #popup .browser[data-id="uploads"] part[for="sidebar.simple"] { height: calc(100vh - 130px); } #popup .browser[data-id="uploads"] part[identifier="uploads.main"] { height: calc(100vh - 180px); background: #fbfbfb; } #popup .browser[data-id="uploads"] part[for="account.dropdown"] { display: none; } #uploads #file .file-header { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom:1px solid var(--dh-bc10); background:white; } #uploads #file .file-header .left { display: flex; align-items:center; } #uploads #file .file-header .left p { font-weight: 700; border-right: 1px solid var(--dh-bc10); margin-right: 25px; padding-right: 25px; height: 88%; display: flex; align-items: center; } #uploads #file .file-header .right { display: flex; align-items:center; justify-content: flex-end; } #uploads #file .file-header .right a:nth-child(2) { border-left: 1px solid var(--dh-bc10); margin-left: 25px; padding-left: 25px; display:flex; align-items:center; } #uploads #file .file-flex { display: flex; justify-content: space-between; } #uploads #file .file-flex aside { width:300px; height:calc(100vh - 53px); overflow-y: auto; background:white; border-left:1px solid var(--dh-bc10); } #uploads #file .file-flex > div { flex:1; height:calc(100vh - 53px); overflow-y: auto; background:var(--dh-bgs10); } #uploads #file aside .part h2 { font-size: 18px; line-height: 22px; margin-bottom: 20px; } #uploads #file aside .part li { font-size: 14px; line-height: 18px; margin-bottom: 7px; } #uploads #file aside .part::after { width:100%; left:0; } #uploads #file aside .part li span {color: var(--dh-ts10)} #uploads #file aside .part li:last-child {margin-bottom: 0;} #uploads #file .actions .top { display:flex; align-items: center; } #uploads #file .actions .top button {margin-right: 30px;} #uploads #file .file-flex .preview .image-wrapper { height:calc(100vh - 53px); padding:50px; text-align:center; width:100%; overflow: hidden; } #uploads #file .file-flex .preview .image-wrapper img { max-height: 100%; max-width: 100%; object-fit: contain; object-position:top; margin:0 auto; max-height: calc(100vh - 153px); } /* FILTERS */ #uploads .elements[pid="85"] {padding-right:20px} #uploads .filters-wrapper { background:white; padding:30px 20px 30px 30px; display: flex; justify-content: space-between; align-items:center; } #uploads .filters-wrapper .filters { display:flex; justify-content:flex-end; } #uploads .filters-wrapper .filters > div { margin-left: 15px; } /* [FILES GRID & INFO ] */ /* [FILES GRID & INFO ] */ #file-manager .file-manager-main { display: flex; justify-content: space-between; background:white; padding:0px 20px 30px 30px; } #file-manager .files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-gap: 18px; flex: 1; padding:0; } #file-manager .files-grid .file { position: relative; padding-bottom: 56.25%; background: #F6F6F6; } #file-manager .files-grid .file .check { display: none; } #uploads #file-manager tag { border-radius: 6px; padding: 0 5px; margin: 2px; font-weight: bold; font-size: 10px; background: #f5f5f5; border: 1px solid #e6e6e6; cursor: pointer; } #file-manager .files-grid .file > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } #file-manager .files-grid .file .hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; visibility: hidden; opacity: 0; transition: 0.07s; background: var(--dh-bgp09); } #file-manager .files-grid .file .hover .actions { display: flex; justify-content: flex-end; } #file-manager .files-grid .file .hover .actions button { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; color: white; margin-left: 4px; padding:0; } #file-manager .files-grid .file .hover .basic-info p { line-height: 1.5; padding: 0; color: white; font-size: 11px; } #file-manager .files-grid .file:hover .hover { opacity: 1; visibility: visible; } #file-manager .files-grid .file-wrap.selectable .file { cursor: pointer; } #file-manager .files-grid .file-wrap.selected .check { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; opacity: 1; transition: 0.07s; background: var(--dh-bgp07); text-align: center; } #file-manager .files-grid .file-wrap.selected .check > div { height: 100%; font-size: 36px; color: var(--dh-success10); } #file-manager .files-grid filename { display: block; font-size: 12px; line-height: 16px; color:var(--dh-ts10); margin-top: 4px; } #file-manager .file-manager-main .files-empty { text-align: center; width:100%; } #file-manager .file-manager-main .files-empty > div { display:flex; justify-content: center; } #file-manager .upload-options { background: var(--dh-bgs00); padding: 5px 15px; border: 1px solid var(--dh-bc04); } #file-manager .upload-options > div { font-size: 14px; padding-top: 5px; padding-bottom: 5px; cursor: pointer; text-align: left; } #file-manager .upload-options > div:hover { font-weight: bold; }body[data-id="uploads"] { background: #fbfbfb; } #uploads .content-flex { display:flex; background: white; } #uploads .content-flex > div { flex:1; height:calc(100vh - 49px); overflow:auto; } #uploads .content-flex aside { width:200px; height:calc(100vh - 49px); background:#F6F6F6; border-right: 1px solid var(--dh-bc10); } #uploads .content-flex aside .scollable { width:200px; height:calc(100vh - 49px); overflow:auto; } #uploads aside .part { padding:20px 12px; position:relative; } #uploads aside .part::after { width:calc(100% - 24px); left:12px; bottom:0; height:1px; content:''; background: var(--dh-bc10); position: absolute; } #uploads aside .part:last-child::after {display:none} #uploads aside .hdr { display:flex; justify-content:space-between; padding-bottom: 15px; } #uploads aside .hdr > div { display:flex; justify-content: flex-end; } #uploads aside .hdr > div button img { transition:0.2s; } #uploads aside .hdr > div button:hover img { filter: brightness(0.5); } #uploads aside .hdr p { color:var(--dh-ts10); font-weight: 700; font-size: 16px; } #uploads aside .folders a { display:flex; align-items: center; color:var(--dh-ts10); font-size:14px; line-height:18px; margin-bottom:14px; transition: 0.18s; cursor: pointer } #uploads aside li {list-style: none} #uploads aside .folders a:last-child {margin-bottom: 0;} #uploads aside .folders a img {transition: 0.18s;} #uploads aside .folders a:hover img, #uploads aside .folders li.active img {filter: brightness(0.5)} #uploads aside .folders a:hover, #uploads aside .folders li.active {color:var(--dh-tp10); } #uploads aside .folders a img { margin-right: 9px; position: relative; top:-1px; } #uploads aside .storageleft p { color:var(--dh-ts10); font-size:14px; line-height:18px; display:flex; align-items: center; } #uploads aside .storageleft p img {margin-right: 9px;} #uploads .storage-progress-wrap { height: 4px; background: #D9DBE0; width:100%; position: relative; margin-top:15px; } #uploads .storage-progress-wrap completed { position:absolute; left:0; top:0; height:4px; background: var(--dh-bgp10); } #uploads .storageleft > span { color:var(--dh-ts10); font-size:14px; line-height:18px; } #uploads .sidebar-open { display:none; font-weight: 700; color: var(--dh-brp10); text-decoration: underline; position: relative; margin-left: 5px; } #uploads aside .sidebar-close { display: none; position: absolute; bottom:0; width: 100%; left: 0; left: 0; align-items: center; color: var(--dh-ts10); background: var(--dh-bgs10); padding: 10px 12px; } #uploads aside .A-uploads-close_sidebar img { margin-right: 9px; z-index: 9999; } #uploads aside .A-uploads-close_sidebar::before { content: ''; height: 45px; left: 0; width: 100%; top: -45px; position: absolute; background: rgb(246,246,246); background: linear-gradient(180deg, rgba(246,246,246,0) 0%, rgba(246,246,246,0.9) 50%, rgba(246,246,246,1) 100%); } @media (max-width: 767.98px) { #uploads aside .A-uploads-close_sidebar {display: flex} #uploads aside .A-uploads-opepn_sidebar {display: inline} #uploads .filters-wrapper > h4 { display: flex; justify-content: space-between; width: 100%; } #uploads .contnet-flex aside { position:fixed; left:0; top:49px; z-index: 99999; transform: translateX(-100%); transition: 0.15s ease-in-out; } #uploads .content-flex aside.opened { transform: translateX(0); } #uploads .elements[pid="85"], #uploads .filters-wrapper, #file-manager .file-manager-main {padding:12px;} #uploads .filters-wrapper {padding-top: 20px} #uploads .filters-wrapper, #uploads .filters-wrapper .filters { flex-direction: column; align-items: flex-start; width:100%; } #uploads .filters-wrapper .filters > div {margin-left: 0; margin-top: 10px; width: 100%} #uploads .A-uploads-open_sidebar {display:inline;} } #uploads .upload-files { padding: 50px 12px; } #uploads .upload-files or { display:flex; width:100%; justify-content:center; text-align:center; font-size:16px; margin:15px 0; } #uploads .upload-files .upload-box { background: white; padding: 15px 25px; } #uploads .drop-area { border: 1px dashed var(--dh-bc10); text-align: center; padding:65px 12px; cursor: pointer; position: relative; } #uploads .drop-area.out { background: white; padding: 15px 25px; } #uploads .drop-area .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; } #uploads .drop-area.out:hover { background: var(--dh-bgs10); } #uploads .drop-area.out img { height: 100px; } #uploads .upload-files .upload-box .link-upload { display:flex; align-items: center; justify-content: space-between; } #uploads .upload-files .upload-box .link-upload input { height:36px; line-height:36px; font-size:14px; border: 1px dashed var(--dh-bc10); padding:0 15px; }#uploads { /* [Fonts] */ --dh-fp: 'Mukta', sans-serif; --dh-fs: 'Mukta', sans-serif; /* [Shadows For Light] */ --dh-sw01: 0 2px 20px 0 rgba(0,0,0,.04); --dh-sw02: 0 2px 20px 0 rgba(0,0,0,.08); --dh-sw03: 0 2px 20px 0 rgba(0,0,0,.12); /* [Brand Primary] */ --dh-brp01: rgb(163 117 255 / 0.1); --dh-brp02: rgb(163 117 255 / 0.2); --dh-brp03: rgb(163 117 255 / 0.3); --dh-brp04: rgb(163 117 255 / 0.4); --dh-brp05: rgb(163 117 255 / 0.5); --dh-brp06: rgb(163 117 255 / 0.6); --dh-brp07: rgb(163 117 255 / 0.7); --dh-brp08: rgb(163 117 255 / 0.8); --dh-brp09: rgb(163 117 255 / 0.9); --dh-brp10: rgb(163 117 255 / 1.0); /* [Brand Secondary] */ --dh-brs01: rgb(181 55 255 / 0.1); --dh-brs02: rgb(181 55 255 / 0.2); --dh-brs03: rgb(181 55 255 / 0.3); --dh-brs04: rgb(181 55 255 / 0.4); --dh-brs05: rgb(181 55 255 / 0.5); --dh-brs06: rgb(181 55 255 / 0.6); --dh-brs07: rgb(181 55 255 / 0.7); --dh-brs08: rgb(181 55 255 / 0.8); --dh-brs09: rgb(181 55 255 / 0.9); --dh-brs10: rgb(181 55 255 / 1.0); /* [Background Primary] */ --dh-bgp00: rgb(26 26 28 / 1.0); --dh-bgp01: rgb(26 26 28 / 0.1); --dh-bgp02: rgb(26 26 28 / 0.2); --dh-bgp03: rgb(26 26 28 / 0.3); --dh-bgp04: rgb(26 26 28 / 0.4); --dh-bgp05: rgb(26 26 28 / 0.5); --dh-bgp06: rgb(26 26 28 / 0.6); --dh-bgp07: rgb(26 26 28 / 0.7); --dh-bgp08: rgb(26 26 28 / 0.8); --dh-bgp09: rgb(26 26 28 / 0.9); --dh-bgp10: rgb(26 26 28 / 1.0); --dh-bgpc1: rgb(26 26 28 / 1.0); /* [Background Secondary] */ --dh-bgs00: rgb(246 246 246 / 1.0); --dh-bgs01: rgb(246 246 246 / 0.1); --dh-bgs02: rgb(246 246 246 / 0.2); --dh-bgs03: rgb(246 246 246 / 0.3); --dh-bgs04: rgb(246 246 246 / 0.4); --dh-bgs05: rgb(246 246 246 / 0.5); --dh-bgs06: rgb(246 246 246 / 0.6); --dh-bgs07: rgb(246 246 246 / 0.7); --dh-bgs08: rgb(246 246 246 / 0.8); --dh-bgs09: rgb(246 246 246 / 0.9); --dh-bgs10: rgb(246 246 246 / 1.0); /* [Text Primary] */ --dh-tp01: rgb(26 26 28 / 0.1); --dh-tp02: rgb(26 26 28 / 0.2); --dh-tp03: rgb(26 26 28 / 0.3); --dh-tp04: rgb(26 26 28 / 0.4); --dh-tp05: rgb(26 26 28 / 0.5); --dh-tp06: rgb(26 26 28 / 0.6); --dh-tp07: rgb(26 26 28 / 0.7); --dh-tp08: rgb(26 26 28 / 0.8); --dh-tp09: rgb(26 26 28 / 0.9); --dh-tp10: rgb(26 26 28 / 1.0); /* [Text Secondary] */ --dh-ts01: rgb(125 125 125 / 0.1); --dh-ts02: rgb(125 125 125 / 0.2); --dh-ts03: rgb(125 125 125 / 0.3); --dh-ts04: rgb(125 125 125 / 0.4); --dh-ts05: rgb(125 125 125 / 0.5); --dh-ts06: rgb(125 125 125 / 0.6); --dh-ts07: rgb(125 125 125 / 0.7); --dh-ts08: rgb(125 125 125 / 0.8); --dh-ts09: rgb(125 125 125 / 0.9); --dh-ts10: rgb(125 125 125 / 1.0); /* [Success Colors] */ --dh-success01: rgb(68 230 182 / 0.1); --dh-success02: rgb(68 230 182 / 0.2); --dh-success03: rgb(68 230 182 / 0.3); --dh-success04: rgb(68 230 182 / 0.4); --dh-success05: rgb(68 230 182 / 0.5); --dh-success06: rgb(68 230 182 / 0.6); --dh-success07: rgb(68 230 182 / 0.7); --dh-success08: rgb(68 230 182 / 0.8); --dh-success09: rgb(68 230 182 / 0.9); --dh-success10: rgb(68 230 182 / 1.0); /* [Warning Colors] */ --dh-warning01: rgb(255 169 0 / 0.1); --dh-warning02: rgb(255 169 0 / 0.2); --dh-warning03: rgb(255 169 0 / 0.3); --dh-warning04: rgb(255 169 0 / 0.4); --dh-warning05: rgb(255 169 0 / 0.5); --dh-warning06: rgb(255 169 0 / 0.6); --dh-warning07: rgb(255 169 0 / 0.7); --dh-warning08: rgb(255 169 0 / 0.8); --dh-warning09: rgb(255 169 0 / 0.9); --dh-warning10: rgb(255 169 0 / 1.0); /* [Danger Colors] */ --dh-danger01: rgb(230 68 68 / 0.1); --dh-danger02: rgb(230 68 68 / 0.2); --dh-danger03: rgb(230 68 68 / 0.3); --dh-danger04: rgb(230 68 68 / 0.4); --dh-danger05: rgb(230 68 68 / 0.5); --dh-danger06: rgb(230 68 68 / 0.6); --dh-danger07: rgb(230 68 68 / 0.7); --dh-danger08: rgb(230 68 68 / 0.8); --dh-danger09: rgb(230 68 68 / 0.9); --dh-danger10: rgb(230 68 68 / 1.0); /* [Border] */ --dh-bc00: rgb(217 219 224 / 0.0); --dh-bc01: rgb(217 219 224 / 0.1); --dh-bc02: rgb(217 219 224 / 0.2); --dh-bc03: rgb(217 219 224 / 0.3); --dh-bc04: rgb(217 219 224 / 0.4); --dh-bc05: rgb(217 219 224 / 0.5); --dh-bc06: rgb(217 219 224 / 0.6); --dh-bc07: rgb(217 219 224 / 0.7); --dh-bc08: rgb(217 219 224 / 0.8); --dh-bc09: rgb(217 219 224 / 0.9); --dh-bc10: rgb(217 219 224 / 1.0); } .builder-button { background: var(--dh-brp10); color: wheat; border-radius: 5px; padding: 10px; font-size: 12px; transition:0.2s; } .builder-button:hover { background: white; color: var(--dh-brp10); }#builder #navbar #cms-admin { border-radius: 5px; color: var(--dh-ts10); font-size: 12px; padding: 3px; transition: 0.15s color, 0.15s background-color; align-items: center; display: flex; } #builder #navbar #cms-admin:hover { color: #fff; } #builder #navbar #cms-publish { border-radius: 5px; color: var(--dh-ts10); font-size: 12px; padding: 3px; transition: 0.15s color, 0.15s background-color; align-items: center; display: flex; cursor: pointer; letter-spacing: 0.5px; } #builder #navbar #cms-publish:hover { color: #fff; }#popup [data-id="browser-builder-collections"] { width: 100vw!important; height: calc(100vh - 74px)!important; } #popup [data-id="browser-builder-collections"] .html { width: 100%!important; height: 100%!important; background: #fbfbfb!important; } #popup [data-id="browser-builder-collections"] .browser-navigation { display: none; } #popup [data-id="browser-builder-collections"] part[for="sidebar.simple"] { height: calc(100vh - 74px); } #popup [data-id="browser-builder-collections"] part[for="collections.tabs"] { height: calc(100vh - 103px); } #popup [data-id="browser-builder-collections"] part[for="table.default"] div[for="wrapper"] { max-height: calc(100vh - 215px); } #popup [data-id="browser-builder-collections"] part[for="account.dropdown"], #popup [data-id="browser-builder-collections"] part[for="navbar.admin"] .left > .logo { display: none; } /* Search */ .builder-sidebar-search { display: flex; border-radius: 5px; background: #242426; font-size: 12px; padding:8px; color:white; align-items: center; height: 33px; } .builder-sidebar-search i { color: var(--dh-ts10); margin-right:8px } .builder-sidebar-search input { color: white; font-size: 12px; padding-left:3px!important; } /* Select Dropdown */ .builder-custom-select { display: flex; border-radius: 5px; background: #242426; font-size: 12px; padding: 0 8px; color: #7d7d7d; position: relative; min-width: 120px; cursor: pointer; padding-right: 15px; height: 33px; align-items: center; cursor: pointer; } .builder-custom-select > img { width: 7px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } #builder .hovering { outline: 1px solid var(--dh-brp08); cursor: pointer; }body[data-id="builder"] main a { color: inherit; font-family: inherit; } body[data-id="builder"] main h1, body[data-id="builder"] main h2, body[data-id="builder"] main h3, body[data-id="builder"] main h4, body[data-id="builder"] main h5, body[data-id="builder"] main h6 { color: inherit; font-family: inherit; } body[data-id="builder"] main p, body[data-id="builder"] main small, body[data-id="builder"] main span, body[data-id="builder"] main ul, body[data-id="builder"] main li, body[data-id="builder"] main div { color: inherit; font-family: inherit; } body[data-id="builder"] main input, body[data-id="builder"] main select, body[data-id="builder"] main textarea, body[data-id="builder"] main iframe { color: inherit; font-family: inherit; } body[data-id="builder"] main button { color: inherit; font-family: inherit; } body[data-id="builder"] main pre { color: inherit; font-family: inherit; } body[data-id="builder"] main code { color: inherit; font-family: inherit; } /*body[data-id="builder"]::-webkit-scrollbar-track*/ /*{*/ /* background: #121212;*/ /* border-left: 1px solid #242426;*/ /*}*/ /*body[data-id="builder"]::-webkit-scrollbar-thumb*/ /*{*/ /* background: #545353;*/ /* box-shadow: unset;*/ /*}*/ /*body[data-id="builder"]::-webkit-scrollbar*/ /*{*/ /* width: 7px;*/ /*}*/#popup .builder-popup { width: 100%;; background: var(--dh-bgp10); border:1px solid #2E2E30; box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, 0.2); border-radius: 5px; } #popup .builder-popup > .section { border-bottom: 1px solid #2E2E30; position:relative; } #popup .builder-popup > .section:last-child { border-bottom: none; } #popup .builder-popup .grid-row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap:13px; width: 100%; align-items: center; padding: 10px 15px; position: relative; } #popup .builder-popup .grid-row.pt0 { padding-top: 0; } #popup .builder-popup .grid-row.hasPopup .builder-popup { position: absolute; left: 100%; top: 0; visibility: hidden; opacity: 0; max-height: 300px; overflow: hidden; } #popup .builder-popup .grid-row.hasPopup:hover .builder-popup { visibility: visible; opacity: 1; } #popup .builder-popup .grid-row.click-action { cursor: pointer; transition: 0.2s; } #popup .builder-popup .grid-row.click-action * { cursor: pointer; } #popup .builder-popup .grid-row.click-action:hover { background: #2E2E30; } #popup .builder-popup .grid-row .g12 {grid-column: span 12;} #popup .builder-popup .grid-row .g10 {grid-column: span 10;} #popup .builder-popup .grid-row .g9 {grid-column: span 9;} #popup .builder-popup .grid-row .g8 {grid-column: span 8;} #popup .builder-popup .grid-row .g7 {grid-column: span 7;} #popup .builder-popup .grid-row .g6 {grid-column: span 6;} #popup .builder-popup .grid-row .g5 {grid-column: span 5;} #popup .builder-popup .grid-row .g4 {grid-column: span 4;} #popup .builder-popup .grid-row .g3 {grid-column: span 3;} #popup .builder-popup .grid-row .g2 {grid-column: span 2;} #popup .builder-popup .grid-row label { color:white; font-size: 12px; display: flex; align-items: center; gap: 5px; width: 100%; overflow: hidden; text-transform: capitalize; } #popup .builder-popup .grid-row label.silver { color: var(--dh-ts10); } #popup .builder-popup .grid-row label.active { color: white; } #popup .builder-popup .grid-row label > i { font-size: 14px; color: vaR(--dh-ts10); } #popup .builder-popup .grid-row input, #popup .builder-popup .grid-row select { background: var(--dh-bgs10); padding: 9px 10px; border-radius: 5px; font-size: 12px; line-height: 1.1; background: #242426; width: 100%; color: white; border: 1px solid #2E2E30; } #popup .builder-popup .grid-row textarea { background: var(--dh-bgs10); padding: 9px 10px; border-radius: 5px; font-size: 12px; line-height: 1.1; background: #242426; width: 100%; color: white; border: 1px solid #2E2E30; resize: vertical; max-height: 300px; height: 80px; min-height: 50px; } #popup .builder-popup .fullw-label { margin-bottom: -8px; } #popup .builder-popup .toggle-buttons { display: flex; gap: 4px; } #popup .builder-popup .toggle-buttons > div { flex:1; color: var(--dh-ts10); height: 26px; padding: 0 8px; font-size: 11px; border-radius:5px; background: #242426; cursor: pointer; display: flex; align-items: center; justify-content: center; text-transform: capitalize; } #popup .builder-popup .toggle-buttons > div:hover { background: #2c2c2e; } #popup .builder-popup .toggle-buttons > div[selected] { background: #525257; color: white; } #popup .builder-popup .right-side-label { color: var(--dh-ts10); font-size: 11px; display: flex; justify-content: flex-end; gap: 5px; text-align: right; align-items: center; overflow: hidden; word-break: break-all; } #popup .builder-popup .right-side-label > i { font-size: 10px; } #popup .builder-popup .head { background: #272729; display: flex; align-items: center; justify-content: space-between; padding: 14px 10px; } #popup .builder-popup .head p { color: white; font-size: 12px; font-weight: 500; } #popup .builder-popup .head i { color: var(--dh-ts10); cursor: pointer; } #popup .builder-popup .head i:hover { color: white; } #popup .builder-popup .input-description { margin-top: -10px; font-size: 12px; color: var(--dh-ts10); } #popup .builder-popup .grid-row h3{ color: white; font-size: 12px; font-weight: 600px; } #popup .builder-popup .grid-row p{ font-size: 12px; color: var(--dh-ts10); } #popup .builder-popup .grid-row .image-upload { background: #272729; display: flex; align-items: center; justify-content: center; height: 120px; cursor: pointer; border-radius: 5px; } #popup .builder-popup .forms[pid="64"] .slider.round { background: #272729; } #popup .builder-popup .forms[pid="64"] input:checked + .slider { background: #272729; } #popup .builder-popup .toggles-list { display: flex; flex-direction: column; gap: 0; } #popup .builder-popup .toggles-list .toggle-item { width: 100%; display: flex; align-items: center; justify-content: center; border-top: 1px solid #242426; padding: 7px 0; } #builder .scrollbar::-webkit-scrollbar { width: 3px; height:5px; border-radius: 5px; } #builder .scrollbar::-webkit-scrollbar-track { background: #1a1a1c; } #builder .scrollbar::-webkit-scrollbar-thumb { background: #525256; cursor:pointer; } #builder .scrollbar::-webkit-scrollbar-thumb:hover { background: #1A1A1C; } #popup .scrollbar::-webkit-scrollbar { width: 5px; height:5px; border-radius: 5px; } #popup .scrollbar::-webkit-scrollbar-track { background: #1a1a1c; } #popup .scrollbar::-webkit-scrollbar-thumb { background: #525256; cursor:pointer; } #popup .scrollbar::-webkit-scrollbar-thumb:hover { background: #1A1A1C; }/* Header */ #builder .builder-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap:10px; padding:10px; background-color: #24242654; border-bottom: 1px solid var(--dh-bc10); padding-right: 4px; margin-bottom: 10px; } #builder .builder-sidebar-header > h2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } #builder .builder-sidebar-header > .actions { display:flex; justify-content: flex-end; gap: 5px;; } #builder .builder-sidebar-header > .actions button { display: flex; align-items: center; justify-content: center; color: var(--dh-ts10); } #builder .builder-sidebar-header > .actions button:hover { color: white; } #builder .builder-sidebar-header > h2 { font-weight:600; font-size: 12px; } /* Dropdown */ .builder-sidebar-dropdown > .head { display: flex; align-items: center; justify-content: space-between; gap:10px; padding:10px; cursor: pointer; position: sticky; top: 0px; z-index: 1000000; background: var(--dh-bgp10); } .builder-sidebar-dropdown > .head > .actions { display:flex; justify-content: flex-end; gap: 5px;; } .builder-sidebar-dropdown > .head > .actions button { display: flex; align-items: center; justify-content: center; color: var(--dh-ts10); } .builder-sidebar-dropdown > .head > .actions button:hover { color:white } .builder-sidebar-dropdown > .head > h3 { font-weight:600; font-size: 12px; display:flex; align-items: center; gap:5px; max-width: calc(100% - 40px); overflow: hidden; word-break: break-all; text-transform: capitalize; } .builder-sidebar-dropdown > .head > h3 > i { color: var(--dh-ts10); cursor: pointer; font-size: 10px;; } .builder-sidebar-dropdown > .head > h3 > i:hover { color: white; } .builder-sidebar-dropdown.minimized > .head > h3 > i { transform: rotate(-90deg); } .builder-sidebar-dropdown.minimized > .drop-content { display: none; } #builder .builder-sidebar-header .editable { display: flex; align-items: center; gap: 6px; } #popup [data-id="browser-builder-uploads"] { width: 100vw!important; height: calc(100vh - 74px)!important; } #popup [data-id="browser-builder-uploads"] .html { width: 100%!important; height: 100%!important; background: #fbfbfb!important; } #popup [data-id="browser-builder-uploads"] .browser-navigation { display: none; } #popup [data-id="browser-builder-uploads"] part[for="sidebar.simple"] { height: calc(100vh - 74px); } #popup [data-id="browser-builder-uploads"] part[for="layout.space"] { height: calc(100vh - 124px); } #popup [data-id="browser-builder-uploads"] part[for="account.dropdown"], #popup [data-id="browser-builder-uploads"] part[for="navbar.admin"] .left > .logo { display: none; } #popup [data-id="browser-uploads-popup"] > .html { height: 100%; width: 100%; overflow: auto; background: var(--dh-bgp10)!important; } #popup [data-id="browser-uploads-popup"] part[for="layout.space"] { height: 100%; background: var(--dh-bgp10); } #popup [data-id="browser-uploads-popup"] .A-uploads-select, #popup [data-id="browser-uploads-popup"] .A-uploads-remove, #popup [data-id="browser-uploads-popup"] .A-uploads-settings { display: none!important; } #popup [data-id="browser-uploads-popup"] part[for="account.dropdown"], #popup [data-id="browser-uploads-popup"] part[for="navbar.admin"] .left > .logo { display: none; } #popup [data-id="browser-uploads-popup"] part[for="navbar.admin"] { position: sticky; top: -1px; z-index: 10; } #popup [data-id="browser-uploads-popup"] part[data-id="28"] div[for="space"] { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))!important; gap: 10px; } #popup [data-id="browser-uploads-popup"] part[for="uploads.box"] > .image { aspect-ratio: 16/9; height:auto; background: rgb(32 32 34); border-radius: 3px; border: 1px solid #29292b; color: white; font-size: 12px; font-weight: 500; text-align: center; } #popup [data-id="browser-uploads-popup"] part[for="uploads.box"] > .informations {display: none;} #popup [data-id="browser-uploads-popup"] part[for="uploads.box"] > .informations > .tags > * {display: none;} #popup [data-id="browser-uploads-popup"] part[for="uploads.box"] > .informations > span { font-size: 11px; margin-left: 0; color:white; } #popup [data-id="browser-uploads-popup"] part[for="uploads.box"] > .informations { margin-top: 5px; } #popup [data-id="browser-uploads-popup"] part[for="navbar.admin"] { height: 35px; background: rgb(32 32 34); border-bottom: 1px solid rgb(41 41 43); } #popup [data-id="browser-uploads-popup"] part[for="navbar.admin"] .middle { height: 35px; border-left:1px solid rgb(41 41 43); } #popup [data-id="browser-uploads-popup"] part[for="navbar.admin"] .middle > * { color: white; line-height: 35px; height: 35px; font-size: 11px; border-right:1px solid rgb(41 41 43); padding:0 8px; } #popup [data-id="browser-uploads-popup"] part[for="navbar.admin"] .middle > * i { color: white; font-size: 13px; } #popup [data-id="browser-uploads-popup"] > div > .html.scrollbar::-webkit-scrollbar { width: 5px; height:5px; border-radius: 5px; } #popup [data-id="browser-uploads-popup"] > div > .html.scrollbar::-webkit-scrollbar-track { background: #1a1a1c; } #popup [data-id="browser-uploads-popup"] > div > .html.scrollbar::-webkit-scrollbar-thumb { background: #525256; cursor:pointer; } #popup [data-id="browser-uploads-popup"] > div > .html.scrollbar::-webkit-scrollbar-thumb:hover { background: #1A1A1C; } #popup [data-id="browser-uploads-popup"] part[for="layout.space"] div[for="space"] { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr))!important; gap: 8px!important; margin-top: 0!important; } #popup [data-id="browser-uploads-popup"] part[for="error.empty"] h4, #popup [data-id="browser-uploads-popup"] part[for="error.empty"] i, #popup [data-id="browser-uploads-popup"] part[for="error.empty"] p { color: var(--dh-ts10); } #popup [data-id="browser-uploads-popup"] .browser-html { background: #1a1a1c; } #popup [data-id="browser-uploads-popup"] part[for="sidebar.simple"].dark > .right { border-right: 1px solid #29292b; min-width: 170px; } #popup [data-id="browser-uploads-popup"] part[for="layout.space"] .content-full[for='layout.space'] { padding-left: 10px!important; padding-right: 10px!important; padding-top: 10px!important; }#builder { /* [Shadows For Light] */ --dh-sw01: 0 2px 20px 0 rgba(0,0,0,.04); --dh-sw02: 0 2px 20px 0 rgba(0,0,0,.08); --dh-sw03: 0 2px 20px 0 rgba(0,0,0,.12); /* [Brand Primary] */ --dh-brp01: rgb(163 117 255 / 0.1); --dh-brp02: rgb(163 117 255 / 0.2); --dh-brp03: rgb(163 117 255 / 0.3); --dh-brp04: rgb(163 117 255 / 0.4); --dh-brp05: rgb(163 117 255 / 0.5); --dh-brp06: rgb(163 117 255 / 0.6); --dh-brp07: rgb(163 117 255 / 0.7); --dh-brp08: rgb(163 117 255 / 0.8); --dh-brp09: rgb(163 117 255 / 0.9); --dh-brp10: rgb(163 117 255 / 1.0); /* [Brand Secondary] */ --dh-brs01: rgb(181 55 255 / 0.1); --dh-brs02: rgb(181 55 255 / 0.2); --dh-brs03: rgb(181 55 255 / 0.3); --dh-brs04: rgb(181 55 255 / 0.4); --dh-brs05: rgb(181 55 255 / 0.5); --dh-brs06: rgb(181 55 255 / 0.6); --dh-brs07: rgb(181 55 255 / 0.7); --dh-brs08: rgb(181 55 255 / 0.8); --dh-brs09: rgb(181 55 255 / 0.9); --dh-brs10: rgb(181 55 255 / 1.0); /* [Background Primary] */ --dh-bgp00: rgb(18 18 18 / 1.0); --dh-bgp01: rgb(18 18 18 / 0.1); --dh-bgp02: rgb(18 18 18 / 0.2); --dh-bgp03: rgb(18 18 18 / 0.3); --dh-bgp04: rgb(18 18 18 / 0.4); --dh-bgp05: rgb(18 18 18 / 0.5); --dh-bgp06: rgb(18 18 18 / 0.6); --dh-bgp07: rgb(18 18 18 / 0.7); --dh-bgp08: rgb(18 18 18 / 0.8); --dh-bgp09: rgb(18 18 18 / 0.9); --dh-bgp10: rgb(18 18 18 / 1.0); /* [Background Secondary] */ --dh-bgs00: rgb(36 36 38 / 1.0); --dh-bgs01: rgb(36 36 38 / 0.1); --dh-bgs02: rgb(36 36 38 / 0.2); --dh-bgs03: rgb(36 36 38 / 0.3); --dh-bgs04: rgb(36 36 38 / 0.4); --dh-bgs05: rgb(36 36 38 / 0.5); --dh-bgs06: rgb(36 36 38 / 0.6); --dh-bgs07: rgb(36 36 38 / 0.7); --dh-bgs08: rgb(36 36 38 / 0.8); --dh-bgs09: rgb(36 36 38 / 0.9); --dh-bgs10: rgb(36 36 38 / 1.0); /* [Text Primary] */ --dh-tp01: rgb(255 255 255 / 0.1); --dh-tp02: rgb(255 255 255 / 0.2); --dh-tp03: rgb(255 255 255 / 0.3); --dh-tp04: rgb(255 255 255 / 0.4); --dh-tp05: rgb(255 255 255 / 0.5); --dh-tp06: rgb(255 255 255 / 0.6); --dh-tp07: rgb(255 255 255 / 0.7); --dh-tp08: rgb(255 255 255 / 0.8); --dh-tp09: rgb(255 255 255 / 0.9); --dh-tp10: rgb(255 255 255 / 1.0); /* [Text Secondary] */ --dh-ts01: rgb(125 125 125 / 0.1); --dh-ts02: rgb(125 125 125 / 0.2); --dh-ts03: rgb(125 125 125 / 0.3); --dh-ts04: rgb(125 125 125 / 0.4); --dh-ts05: rgb(125 125 125 / 0.5); --dh-ts06: rgb(125 125 125 / 0.6); --dh-ts07: rgb(125 125 125 / 0.7); --dh-ts08: rgb(125 125 125 / 0.8); --dh-ts09: rgb(125 125 125 / 0.9); --dh-ts10: rgb(125 125 125 / 1.0); /* [Success Colors] */ --dh-success01: rgb(5 201 96 / 0.1); --dh-success02: rgb(5 201 96 / 0.2); --dh-success03: rgb(5 201 96 / 0.3); --dh-success04: rgb(5 201 96 / 0.4); --dh-success05: rgb(5 201 96 / 0.5); --dh-success06: rgb(5 201 96 / 0.6); --dh-success07: rgb(5 201 96 / 0.7); --dh-success08: rgb(5 201 96 / 0.8); --dh-success09: rgb(5 201 96 / 0.9); --dh-success10: rgb(5 201 96 / 1.0); /* [Warning Colors] */ --dh-warning01: rgb(255 169 0 / 0.1); --dh-warning02: rgb(255 169 0 / 0.2); --dh-warning03: rgb(255 169 0 / 0.3); --dh-warning04: rgb(255 169 0 / 0.4); --dh-warning05: rgb(255 169 0 / 0.5); --dh-warning06: rgb(255 169 0 / 0.6); --dh-warning07: rgb(255 169 0 / 0.7); --dh-warning08: rgb(255 169 0 / 0.8); --dh-warning09: rgb(255 169 0 / 0.9); --dh-warning10: rgb(255 169 0 / 1.0); /* [Danger Colors] */ --dh-danger01: rgb(230 68 68 / 0.1); --dh-danger02: rgb(230 68 68 / 0.2); --dh-danger03: rgb(230 68 68 / 0.3); --dh-danger04: rgb(230 68 68 / 0.4); --dh-danger05: rgb(230 68 68 / 0.5); --dh-danger06: rgb(230 68 68 / 0.6); --dh-danger07: rgb(230 68 68 / 0.7); --dh-danger08: rgb(230 68 68 / 0.8); --dh-danger09: rgb(230 68 68 / 0.9); --dh-danger10: rgb(230 68 68 / 1.0); /* [Border] */ --dh-bc00: rgb(36 36 38 / 0.0); --dh-bc01: rgb(36 36 38 / 0.1); --dh-bc02: rgb(36 36 38 / 0.2); --dh-bc03: rgb(36 36 38 / 0.3); --dh-bc04: rgb(36 36 38 / 0.4); --dh-bc05: rgb(36 36 38 / 0.5); --dh-bc06: rgb(36 36 38 / 0.6); --dh-bc07: rgb(36 36 38 / 0.7); --dh-bc08: rgb(36 36 38 / 0.8); --dh-bc09: rgb(36 36 38 / 0.9); --dh-bc10: rgb(36 36 38 / 1.0); }#builder.white { /* [Shadows For Light] */ --dh-sw01: 0 2px 20px 0 rgba(0,0,0,.04); --dh-sw02: 0 2px 20px 0 rgba(0,0,0,.08); --dh-sw03: 0 2px 20px 0 rgba(0,0,0,.12); /* [Brand Primary] */ --dh-brp01: rgb(163 117 255 / 0.1); --dh-brp02: rgb(163 117 255 / 0.2); --dh-brp03: rgb(163 117 255 / 0.3); --dh-brp04: rgb(163 117 255 / 0.4); --dh-brp05: rgb(163 117 255 / 0.5); --dh-brp06: rgb(163 117 255 / 0.6); --dh-brp07: rgb(163 117 255 / 0.7); --dh-brp08: rgb(163 117 255 / 0.8); --dh-brp09: rgb(163 117 255 / 0.9); --dh-brp10: rgb(163 117 255 / 1.0); /* [Brand Secondary] */ --dh-brs01: rgb(181 55 255 / 0.1); --dh-brs02: rgb(181 55 255 / 0.2); --dh-brs03: rgb(181 55 255 / 0.3); --dh-brs04: rgb(181 55 255 / 0.4); --dh-brs05: rgb(181 55 255 / 0.5); --dh-brs06: rgb(181 55 255 / 0.6); --dh-brs07: rgb(181 55 255 / 0.7); --dh-brs08: rgb(181 55 255 / 0.8); --dh-brs09: rgb(181 55 255 / 0.9); --dh-brs10: rgb(181 55 255 / 1.0); /* [Background Primary] */ --dh-bgp00: rgb(255 255 255 / 1.0); --dh-bgp01: rgb(255 255 255 / 0.1); --dh-bgp02: rgb(255 255 255 / 0.2); --dh-bgp03: rgb(255 255 255 / 0.3); --dh-bgp04: rgb(255 255 255 / 0.4); --dh-bgp05: rgb(255 255 255 / 0.5); --dh-bgp06: rgb(255 255 255 / 0.6); --dh-bgp07: rgb(255 255 255 / 0.7); --dh-bgp08: rgb(255 255 255 / 0.8); --dh-bgp09: rgb(255 255 255 / 0.9); --dh-bgp10: rgb(255 255 255 / 1.0); /* [Background Secondary] */ --dh-bgs00: rgb(245 245 245 / 1.0); --dh-bgs01: rgb(245 245 245 / 0.1); --dh-bgs02: rgb(245 245 245 / 0.2); --dh-bgs03: rgb(245 245 245 / 0.3); --dh-bgs04: rgb(245 245 245 / 0.4); --dh-bgs05: rgb(245 245 245 / 0.5); --dh-bgs06: rgb(245 245 245 / 0.6); --dh-bgs07: rgb(245 245 245 / 0.7); --dh-bgs08: rgb(245 245 245 / 0.8); --dh-bgs09: rgb(245 245 245 / 0.9); --dh-bgs10: rgb(245 245 245 / 1.0); /* [Text Primary] */ --dh-tp01: rgb(0 0 0 / 0.1); --dh-tp02: rgb(0 0 0 / 0.2); --dh-tp03: rgb(0 0 0 / 0.3); --dh-tp04: rgb(0 0 0 / 0.4); --dh-tp05: rgb(0 0 0 / 0.5); --dh-tp06: rgb(0 0 0 / 0.6); --dh-tp07: rgb(0 0 0 / 0.7); --dh-tp08: rgb(0 0 0 / 0.8); --dh-tp09: rgb(0 0 0 / 0.9); --dh-tp10: rgb(0 0 0 / 1.0); /* [Text Secondary] */ --dh-ts01: rgb(0 0 0 / 0.1); --dh-ts02: rgb(0 0 0 / 0.2); --dh-ts03: rgb(0 0 0 / 0.3); --dh-ts04: rgb(0 0 0 / 0.4); --dh-ts05: rgb(0 0 0 / 0.5); --dh-ts06: rgb(0 0 0 / 0.6); --dh-ts07: rgb(0 0 0 / 0.7); --dh-ts08: rgb(0 0 0 / 0.8); --dh-ts09: rgb(0 0 0 / 0.9); --dh-ts10: rgb(0 0 0 / 1.0); /* [Success Colors] */ --dh-success01: rgb(5 201 96 / 0.1); --dh-success02: rgb(5 201 96 / 0.2); --dh-success03: rgb(5 201 96 / 0.3); --dh-success04: rgb(5 201 96 / 0.4); --dh-success05: rgb(5 201 96 / 0.5); --dh-success06: rgb(5 201 96 / 0.6); --dh-success07: rgb(5 201 96 / 0.7); --dh-success08: rgb(5 201 96 / 0.8); --dh-success09: rgb(5 201 96 / 0.9); --dh-success10: rgb(5 201 96 / 1.0); /* [Warning Colors] */ --dh-warning01: rgb(255 169 0 / 0.1); --dh-warning02: rgb(255 169 0 / 0.2); --dh-warning03: rgb(255 169 0 / 0.3); --dh-warning04: rgb(255 169 0 / 0.4); --dh-warning05: rgb(255 169 0 / 0.5); --dh-warning06: rgb(255 169 0 / 0.6); --dh-warning07: rgb(255 169 0 / 0.7); --dh-warning08: rgb(255 169 0 / 0.8); --dh-warning09: rgb(255 169 0 / 0.9); --dh-warning10: rgb(255 169 0 / 1.0); /* [Danger Colors] */ --dh-danger01: rgb(230 68 68 / 0.1); --dh-danger02: rgb(230 68 68 / 0.2); --dh-danger03: rgb(230 68 68 / 0.3); --dh-danger04: rgb(230 68 68 / 0.4); --dh-danger05: rgb(230 68 68 / 0.5); --dh-danger06: rgb(230 68 68 / 0.6); --dh-danger07: rgb(230 68 68 / 0.7); --dh-danger08: rgb(230 68 68 / 0.8); --dh-danger09: rgb(230 68 68 / 0.9); --dh-danger10: rgb(230 68 68 / 1.0); /* [Border] */ --dh-bc00: rgb(245 245 245 / 0.0); --dh-bc01: rgb(245 245 245 / 0.1); --dh-bc02: rgb(245 245 245 / 0.2); --dh-bc03: rgb(245 245 245 / 0.3); --dh-bc04: rgb(245 245 245 / 0.4); --dh-bc05: rgb(245 245 245 / 0.5); --dh-bc06: rgb(245 245 245 / 0.6); --dh-bc07: rgb(245 245 245 / 0.7); --dh-bc08: rgb(245 245 245 / 0.8); --dh-bc09: rgb(245 245 245 / 0.9); --dh-bc10: rgb(245 245 245 / 1.0); }.styler [data-addon='builder.transform.tab'] .label_inline label { width: 100px; max-width: 100px; }*[an-name="scrollHorizontal"] { white-space: nowrap!important; display: flex!important; overflow-x: auto!important; } *[an-name="scrollHorizontal"] > * { flex: 0 0 auto!important; width: 100%!important; }#builder #area_scale_input { display: flex; } #builder #area_scale_input > input { width: 40px; color: var(--dh-ts10); margin-left: 5px; text-align: center; font-size: 12px; }#builder[for="editor"] #area { height: calc(100vh - 74px); overflow: hidden; position: relative; background: var(--dh-bgp09); transition: 0s transform; touch-action: none; } #builder[for="editor"].beast-0 #area { height: calc(100vh - 34px); } #builder[for="editor"] #area #website > main { transform: translateY(0); } #builder[for="preview"] #area { height: unset; } #builder[for="editor"] #area.drag { transition: transform 0s; touch-action: none; } #builder[for="editor"] #area.drag > * { pointer-events: none; } #builder[for="editor"] #area.drag:hover { cursor: -webkit-grabbing; cursor: grabbing; } #builder[for="editor"] #area.drag .tag > span.max_widths, #builder[for="editor"] #area.drag .tag > span.paddings, #builder[for="editor"] #area.drag .tag > span.margins, #builder[for="editor"] #area.drag .tag > span.outline, #builder[for="editor"] #area.tagDrag .tag > span.max_widths, #builder[for="editor"] #area.tagDrag .tag > span.paddings, #builder[for="editor"] #area.tagDrag .tag > span.margins, #builder[for="editor"] #area.tagDrag .tag > span.outline { display: none!important; } #builder[for="editor"] #area .tag.dragged > .max_widths, #builder[for="editor"] #area .tag.dragged > .paddings, #builder[for="editor"] #area .tag.dragged > .margins { display: none!important; } #builder[for="editor"] #area.drag .tag { cursor: grabbing!important; } #builder[for="editor"] #area.drag .tag:not(.empty) { outline: none!important; } #builder[for="editor"] #area .space { display: block; max-width: 100%; margin: 0px auto; position: relative; transition: all 0.15s ease 0s; } #builder[for="editor"] #area .space > .left { position: absolute; left: -530px; width: 480px; min-height: 100px; } #builder[for="editor"] #area .space > .right { position: absolute; right: -530px; width: 480px; min-height: 100px; } #builder[for="editor"] #area .space > .left > div, #builder[for="editor"] #area .space > .right > div { margin-bottom: 30px; border-bottom: 1px solid rgb(255 255 255 / 20%); padding-bottom: 30px; } #popup .builder-popup .secret { position: absolute; left: 100%; top: 0; bottom: 0; width: 50px; padding: 0 10px; color: #fff; font-weight: 500; }#builder #area .builder-colors { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } #builder #area .builder-colors > div { background: rgb(0 0 0 / 20%); padding: 15px; } #builder #area .builder-colors > div label { display: block; margin-bottom: 5px; color: silver; }#builder #area > div > .draggable { height: auto; transform-origin: 0 0; transition: .05s transform, .15s width, .15s opacity; isolation: isolate; -webkit-font-smoothing: antialiased; } #builder #area.drag > div > .draggable { transition: 0s transform; }#builder #area #float { position: absolute!important; top: 0; left: 0; right: 0; margin: auto; height: 0px; pointer-events: none; } #builder #area #float .float:not(.bg) > main { background: transparent!important; background-color: transparent!important; } #builder[for="editor"] #area > div > div .site #float main { transform: translateY(0); } #builder #area > div > div .site #float > .float > .element > * { pointer-events: auto; } #builder #area > div > div .site #float > div { position: absolute!important; width: 100%; } #builder #area > div > div .site #float > div > .name { position: absolute; top: -40px; color: var(--dh-tp05); font-size: 20px; height: 40px; line-height: 40px; transform-origin: left bottom; transition: .2s transform; text-transform: capitalize; pointer-events: auto; } #builder #area > div > div .site #float > div > .name > small { font-size: 10px; color: var(--dh-ts10); margin-left: 5px; } #builder #area > div > div .site #float > div > .drag:hover { cursor: -webkit-grabbing; cursor: grabbing; }#builder #area > .scrollable { margin: 0 auto; transition: .05s transform, .15s width, .15s opacity; height: calc(100vh - 74px); z-index: 100; position: relative; } #builder #area > .scrollable { height: calc(100vh - 34px); } #builder[for="preview"] #area > .scrollable { height: unset; } #builder #area.drag > .scrollable { transition: 0s transform; }#builder #area[for="editor"]::-webkit-scrollbar-track { background: var(--dh-bgp06); } #builder #area[for="editor"]::-webkit-scrollbar { width: 10px; } #builder #area[for="editor"]::-webkit-scrollbar-thumb { background: var(--dh-bgs03); }#builder #area .site { opacity: 0; } #builder[for="preview"] area .site { opacity: 1; } #builder[for="live"] #area .site { opacity: 1; } #builder[for="preview"] #area .site > #styles { display: none; } #builder #area .site > .width { margin: auto; padding-left: 45px; padding-right: 15px; } #builder[for="preview"] #area .site > #dropzone { width: 0; height: 5px; z-index: 1000000000000; left: 0; top: 0; opacity: 0; position: absolute; background: var(--dh-success07); pointer-events: none; opacity: 0; } #builder[for="preview"] #area .site > #dropzone > div { position: absolute; left: 0; right: 0; margin: auto; bottom: 5px; background: var(--dh-success07); width: 70px; line-height: 10px; text-align: center; border-radius: 5px 5px 0 0; font-size: 9px; height: 10px; font-weight: 700; padding-top: 2.5px; }#builder #area .builder-text-styles li { list-style-type: none; background: rgb(0 0 0 / 20%); padding: 15px; margin-bottom: 10px; cursor: pointer; } #builder #area .builder-text-styles li .info { display: flex; align-items: center; gap: 7px; padding: 5px; position: relative; border-radius: 5px; cursor: pointer; transition: 0.16s; font-size: 13px; } #builder #area .builder-text-styles li .info i { display: none; } #builder #area .builder-text-styles li .preview { width: 100%; height: 170px; background: rgb(255 255 255 / 1%); overflow: hidden; position: relative; } #builder #area .builder-text-styles li .preview main { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 15px; } #builder[for="editor"] #area #website { transition: .15s width; margin: 0 auto; display: block; outline: 1px solid #545454; cursor: pointer; max-height: inherit!important; height: inherit!important; overflow: inherit!important; } #builder[for="live"] #area #website > main { min-height: 100vh; } #builder[for="editor"] #area #website > .top { position: absolute; top: -40px; color: var(--dh-tp05); font-size: 20px; height: 40px; line-height: 40px; transform-origin: left bottom; transition: .2s transform; text-transform: capitalize; color: var(--dh-brp10); } #builder[for="editor"] #area #website > .top > small { font-size: 10px; color: var(--dh-ts10); margin-left: 5px; }.browse-preview-prev { position: fixed; width: 25px; height: 50px; background: var(--dh-bgp00); left: 0; top: 0; bottom: 0; margin: auto; z-index: 100000000000; line-height: 50px; text-align: center; border-radius: 0 5px 5px 0; cursor: pointer; border-bottom: 1px solid var(--dh-bc10); } .browse-preview-next { position: fixed; width: 25px; height: 50px; background: var(--dh-bgp00); right: 0; top: 0; bottom: 0; margin: auto; z-index: 100000000000; line-height: 50px; text-align: center; border-radius: 5px 0 0 5px; cursor: pointer; border-bottom: 1px solid var(--dh-bc10); } .browse-preview-next i, .browse-preview-prev i { line-height: 50px; } #javascript #events, #javascript #functions { overflow: auto; } #javascript { height: 100%; max-height: 80vh; overflow: auto; } #javascript #functions .function-item, #javascript #events .event-item { padding: 10px; display: flex; align-items: center; justify-content: space-between; background: #222; } #javascript #functions .function-item:first-child, #javascript #events .event-item:first-child { border-top: 1px solid rgb(54 54 55); } #javascript #functions .function-item .info, #javascript #events .event-item .info { flex:1; } #javascript #functions .function-item .actions, #javascript #events .event-item .actions { display: flex; width: 80px; justify-content: flex-end; gap: 6px; } #javascript #functions .function-item .info, #javascript #events .event-item .info { font-size: 13px; } #javascript #functions .function-item .info span, #javascript #events .event-item .info span { color: var(--dh-ts10); font-size: 12px; background: #242424; padding: 0 6px ; border-radius: 3px; margin-top: 2px ; display: inline-block; font-weight: bold; border: 1px solid #3a3a3a; } #javascript #functions .function-item .actions i, #javascript #events .event-item .actions i { font-size: 15px; color: var(--dh-ts10); transition: 0.2s; cursor: pointer; } #javascript #functions .function-item .actions i:hover, #javascript #events .event-item .actions i:hover { color: white; } .custom-javascript-popup { background: var(--dh-bgp10); color: white; max-width: 1000px; margin: 0 auto; max-height: 80vh; overflow: auto; height: 80vh; display: flex; flex-direction: column; width: 100%; } .custom-javascript-popup .head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid rgb(61 61 61); } .custom-javascript-popup .head .left input { background: rgb(36 36 38); color: white; padding: 7px 15px; min-width: 200px; } .custom-javascript-popup .head .left select { color: white; } .custom-javascript-popup .head .right { display: flex; gap: 15px; justify-content: flex-end; align-items: center; } .custom-javascript-popup .head .right button {padding: 0;} .custom-javascript-popup .CodeMirror { flex: 1; } .custom-javascript-popup .CodeMirror pre {font-size: 15px;} .custom-javascript-popup .cm-tab{ background-position: right; background-repeat: no-repeat; border-left: 1px solid #2b2b2e; } .horizontalScrollTrack { position: relative!important; z-index: 10000!important; } .horizontalScrollCamera { position: sticky!important; top: 0px!important; overflow: hidden; } .horizontalScrollFrame { display: flex!important; flex-direction: row!important; height: 100%!important; } .horizontalScrollFrame > * { flex-shrink: 0!important; flex-grow: 0!important; width: 100%!important; }*[animation*="fadeView"] { opacity: 0; }#builder.live .area { height: auto!important; margin-top: unset!important; overflow: visible!important; } #builder.live .area .scrollable { margin: unset!important; width: 100%!important; height: auto!important; transition: 0s all!important; }#builder.live .draggable { height: auto; transform: unset!important; transition: 0s all!important; }#builder.live .site .section-add { display: none; } #builder.live section > .options { display: none; } #builder.live section > .resizes { display: none; } #builder.live section .empty { display: none; }#builder.live .site { width: 100%!important; padding-left: 0!important; padding-right: 0!important; }#builder.preview .tag > span.max_widths, #builder.preview .tag > span.paddings, #builder.preview .tag > span.margins, #builder.preview .tag > span.outline { display: none!important; } #builder.preview > .max_widths, #builder.preview > .paddings, #builder.preview > .margins { display: none!important; } #builder.preview .tag { cursor: grabbing!important; } #builder.preview .tag:not(.empty) { outline: none!important; } #builder.preview { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } #builder #navbar #responsive { cursor: pointer; } #builder #navbar #responsive > selected > span { color: var(--dh-ts10); margin-left: 5px; text-align: center; font-size: 12px; } #builder #navbar #responsive > selected img { position: relative; top: 3px; } #builder #navbar #responsive > img { position: relative; top: -1px; }.popup[data-id="event-responsive-options"] div.event { width: 100%; background: var(--dh-bgp10); border: 1px solid #2E2E30; box-shadow: 0px 0px 15px 4px rgb(0 0 0 / 20%); border-radius: 5px; margin-top: 33px; padding: 10px; } .popup[data-id="event-responsive-options"] div.event > li { color: var(--dh-ts10); margin-left: 5px; font-size: 12px; transition: 0.15s color; cursor: pointer; padding-top: 3px; padding-bottom: 3px; display: flex; gap: 6px; align-items: center; } .popup[data-id="event-responsive-options"] div.event > li:hover { color: #fff; } #builder.selection { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; } #builder.selection #area.drag .tag > span.max_widths, #builder.selection .tag > span.paddings, #builder.selection .tag > span.margins, #builder.selection .tag > span.outline { display: none!important; } #builder.selection > .max_widths, #builder.selection > .paddings, #builder.selection > .margins { display: none!important; } #builder.selection .tag { cursor: grabbing!important; } #builder.selection .tag:not(.empty) { outline: none!important; } #builder #selection { position: fixed; z-index: 10000000; outline: 1px solid #4254d2; background: rgb(66 84 210 / 15%); left: 0; top: 0; width: 0; left: 0; }#popup .store-category { background: #242426; justify-content: center; align-items: center; padding: 6px 12px; cursor: pointer; transition: 0.15s background; } #popup .store-category:hover { background: #303033; }#builder #ruler { height: 20px; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; z-index: 0; display: none; background: #303032; } #builder #ruler.active { z-index: 10000000; display: block; opacity: 1; } #builder #ruler .left { position: absolute; top: 0; height: 20px; right: 50%; display: flex; background: #303032; z-index: 10; display: none; } #builder #ruler .right { position: absolute; top: 0; height: 20px; left: 50%; display: flex; background: #303032; display: none; } #builder #ruler.active .left, #builder #ruler.active .right { display: flex; } #builder #ruler .part { width: 100px; transition: 0.15s width; text-align: center; font-size: 10px; font-weight: 700; border: 1px solid var(--dh-bc06); line-height: 20px; color: var(--dh-tp04); position: relative; left: 35px; } #builder #ruler .follow { position: absolute; background: var(--dh-brp09); color: var(--dh-tp10); height: 20px; line-height: 20px; text-align: center; border-radius: 5px; padding: 0 5px; font-size: 12px; display: none; width: 60px; right: -30px; z-index: 10000; font-weight: bold; } #builder #ruler .right .follow { right: unset; left: -30px; } #builder #ruler .follow .line { width: 1px; height: 100vh; background: var(--dh-brp05); position: absolute; left: 28px; } #builder #ruler .point { position: absolute; width: 1px; height: calc(100vh - 30px); bottom: 20px; background: #00FFFF; z-index: 100000000000; pointer-events: none; display: none; } #builder #ruler .point > div { position: absolute; bottom: -20px; width: 11px; height: 4px; cursor: col-resize; pointer-events: auto; border-radius: 5px 5px 0 0; left: -5.5px; border-bottom: 20px solid transparent; border-top: 5px solid #00FFFF; } #builder #ruler.active .point { display: block; }#builder #styles { display: none; }#builder .tag[data-id].dragged { transition: 0s!important; opacity: 0.5!important; pointer-events: none!important; }#popup #tag-icon-popup { background: #1a1a1c; width: 100%; height: 100%; display: flex; flex-direction: column; box-shadow: 0 0 15px #00000054; border: 1px solid #2E2E30; border-radius: 5px; } #popup #tag-icon-popup .top { height: 50px; padding: 10px; border-bottom: 1px solid #242426; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #121212; } #popup #tag-icon-popup .top .left { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: space-between; } #popup #tag-icon-popup .top .right { display: flex; justify-content: flex-end; align-items: center; } #popup #tag-icon-popup .top .right .A-popup-close { color: white; cursor:pointer; } #popup #tag-icon-popup .icons { flex: 1; overflow: auto; max-height: 40vh; } #popup #tag-icon-popup .icons .icons-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(57px, 1fr)); padding: 20px; } #popup #tag-icon-popup .icons .icons-grid .icon-wrapper { display: flex; align-items: center; flex-direction: column; padding: 6px; text-align: center; transition: 0.12s; border-radius: 5px; cursor: pointer; justify-content: center; } #popup #tag-icon-popup .icons .icons-grid .icon-wrapper:hover { background: #242426; } #popup #tag-icon-popup .icons .icons-grid .icon-wrapper i { color: white; font-size: 40px; } #popup #tag-icon-popup .icons .icons-grid .icon-wrapper p { color: #7d7d7d; font-size: 11px; margin-top: 5px; transition: 0.12s; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #popup #tag-icon-popup .icons .icons-grid .icon-wrapper:hover p { color: white; } #popup #tag-icon-popup .head { width: 100%; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; background: #242426; border-bottom: 1px solid #2E2E30; border-radius: 5px 5px 0 0; } #popup #tag-icon-popup .head p { color: white; font-size: 12px; font-weight: 600; } #builder #tags_options { display: flex; background: rgb(255 255 255 / 5%); padding: 4px 10px; border-radius: 5px; gap: 17px; align-items: center; justify-content: center; } #builder #tags_options > div { display: flex; justify-content: center; align-items: center; cursor: pointer; } #builder #tags_options > div > i { color: var(--dh-ts10); font-size: 16px; } #builder #tags_options > div:hover > i { color: #fff; }body[data-id="builder"] text[contenteditable="true"] { cursor: text!important; display: inline-block!important; outline: 1px dashed var(--dh-brp10); width: 100%; } body[data-id="builder"] text[contenteditable="true"]::after { opacity: 0; } body[data-id="builder"] text:empty::after { content: "Empty"; } body[data-id="builder"] text[type="p"]:empty::after { content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."; } body[data-id="builder"] text[type="h1"]:empty::after { content: 'Heading 1'; } body[data-id="builder"] text[type="h2"]:empty::after { content: 'Heading 2'; } body[data-id="builder"] text[type="h3"]:empty::after { content: 'Heading 3'; } body[data-id="builder"] text[type="h4"]:empty::after { content: 'Heading 4'; } body[data-id="builder"] text[type="h5"]:empty::after { content: 'Heading 5'; } body[data-id="builder"] text[type="h6"]:empty::after { content: 'Heading 6'; } body[data-id="builder"] text[type="a"]:empty::after { content: 'Link Item'; } body[data-id="builder"] text[type="button"]:empty::after { content: 'Button Text'; } body[data-id="builder"] text[type="div"]::after, body[data-id="builder"] text[type="container"]::after, body[data-id="builder"] text[type="section"]::after, body[data-id="builder"] text.clean::after { content: ''!important; } text { white-space: break-spaces; } #popup .create-tag-popup { display: flex; gap: 15px; padding-left: 15px; padding-right: 15px; background: rgb(36 36 38); border: 0; box-shadow: unset; } #popup .create-tag-popup > div { padding: 9px 0; cursor: pointer; display: flex; } #popup .create-tag-popup icon { display: flex; } #popup .create-tag-popup img { filter: brightness(0) invert(1); opacity: 0.6; } #popup .create-tag-popup > div:hover img { opacity: 1; } #builder #tags_types { display: flex; gap: 17px; align-items: center; } #builder #tags_types > div { position: relative; } #builder #tags_types .children { position: absolute; top: 25px; left:-5px; background: #242426; border: 1px solid #434343; padding: 5px; width: 28px; opacity: 0; visibility: hidden; } #builder #tags_types > div:hover .children { visibility: visible; opacity: 1; flex-direction: column; gap: 10px; } #builder #tags_types > div .children::before { background:transparent; height: 10px; width: 28px; left:0; top:-10px; content: ""; position: absolute; } #builder #tags_types > div > div, #builder #tags_types .children > div, #builder #tags_types icon { display: flex; align-items: center; } #builder #tags_types .A-builder-elements-tags-create { cursor: pointer; } #builder #tags_types .A-builder-elements-tags-create:hover { filter: brightness(5); } #builder #area > #outline .margins { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; pointer-events: none; } #builder #area > #outline .margin { position: absolute; z-index: 100; display: flex; align-items: center; justify-content: center; } #builder #area > #outline .margin:hover value, #builder #area > #outline .margin.active value { opacity: 1; } #builder #area > #outline .margin:hover { background: var(--dh-warning03); } #builder #area > #outline .margin.active { opacity: 1; } #builder #area > #outline .margin.hidden { display: none!important; } #builder #area > #outline .margin[for="left"] { left: -4px; top: 2px; transform: translateX(-100%); min-width: 5px; height: calc(100% - 4px); cursor: default!important; z-index: 100; pointer-events: auto; } #builder #area > #outline .margin[for="left"].active, #builder #area > #outline .margin[for="left"]:hover { cursor: w-resize!important;; } #builder #area > #outline .margin[for="right"] { right: -4px; top: 2px; min-width: 5px; height: calc(100% - 4px); cursor: default!important; z-index: 100; transform: translateX(100%); pointer-events: auto; } #builder #area > #outline .margin[for="right"].active, #builder #area > #outline .margin[for="right"]:hover { cursor: w-resize!important; } #builder #area > #outline .margin[for="top"] { left: 2px; top: -4px; width: calc(100% - 4px); min-height: 5px; cursor: default!important; z-index: 99; transform: translateY(-100%); pointer-events: auto; } #builder #area > #outline .margin[for="top"].active, #builder #area > #outline .margin[for="top"]:hover { cursor: ns-resize!important;; } #builder #area > #outline .margin[for="bottom"] { left: 2px; bottom: -4px; width: calc(100% - 4px); min-height: 5px; cursor: default!important; z-index: 99; transform: translateY(100%); pointer-events: auto; } #builder #area > #outline .margin[for="bottom"].active, #builder #area > #outline .margin[for="bottom"]:hover { cursor: ns-resize!important; } #builder #area > #outline .margin[for="left"] > .rotate { transform: rotate(-90deg); } #builder #area > #outline .margin[for="right"] > .rotate { transform: rotate(90deg); } #builder #area > #outline .margin.active { background: var(--dh-warning03); } #builder #area > #outline .margin value { border-radius: 2px; font-size: 2px; background: var(--dh-warning10); color: transparent; font-weight: 500; pointer-events: auto; transition: 0.15s font-size; display: inline-block; padding: 0 10px; opacity: 0; } #builder #area > #outline .margin > .rotate { padding: 1px; display: inherit!important; pointer-events: auto; } #builder #area > #outline .margin.active value { color: #fff; font-weight: bold; font-size: 10px; }#builder #area > #outline { position: fixed; z-index: 10000000; left: 0; top: 0; } #builder #area.drag > #outline { display: none; } #builder.preview #area > #outline > div { border: none!important; } #builder.preview #area > #outline > div > .label, #builder.preview #area > #outline > div > .size { display: none!important; } #builder #area > #outline > div { position: fixed; border: 2px solid var(--dh-brp10); z-index: 1000000; pointer-events: none; } #builder #area > #outline > div > .line { display: none; position: absolute; border-color: var(--dh-warning10); border-style: dashed; border-width: 1px; pointer-events: none; margin: 0 auto; } #builder.modern #area > #outline > div { border: 1px solid var(--dh-brp10); } #builder #area > #outline > div[data-type="edit"] { border: 1px solid var(--dh-brp10); } #builder #area > #outline > div[data-type="options"] { border: unset; z-index: 2000010; } #builder #area > #outline > div[data-type="class"] { border: 1px solid var(--dh-warning10); } #builder #area > #outline > div[data-active="true"] { border: 1px solid var(--dh-brp10); z-index: 1000001; } #builder #area > #outline > div[data-type="hover"] { z-index: 1000010; } #builder.modern #area > #outline > div[data-active="true"] { border: 1px solid var(--dh-success10); } #builder #area > #outline > div[data-active="true"] .label { background: var(--dh-brp10); } #builder.modern #area > #outline > div[data-active="true"] .label { background: var(--dh-success10); } #builder #area > #outline > div[data-active="true"] .size > div { background: var(--dh-brp10); } #builder.modern #area > #outline > div[data-active="true"] .size > div { background: var(--dh-success10); } #builder #area > #outline > div[data-type="edit"][data-loop="0"] { border: 1px solid var(--dh-brp10); } /* Options */ #builder #area > #outline > div > .options { position: absolute; right: 15px; top: 15px; display: flex; background: rgb(36 36 38); border-radius: 5px; pointer-events: auto; width: 150px; align-items: center; justify-content: space-evenly; padding: 5px 0; z-index: 100000000; } #builder #area > #outline > div[data-type="edit"] > .options { left: 0; right: 0; margin: auto; top: unset; bottom: -70px; } #builder #area > #outline > div > .options > div { padding: 5px 5px; display: flex; cursor: pointer; border-radius: 5px; } #builder #area > #outline > div > .options > div.active { background: var(--dh-brp10); } #builder #area > #outline > div > .options > div:not(.active):hover { background: rgb(255 255 255 / 10%); } #builder #area > #outline > div > .options > div > i { font-size: 14px; color: #c7c7c7; } #builder #area > #outline > div > .options > div.active > i { color: #fff; } /* Sections */ #builder #area > #outline > div > .sections > div { position: absolute; left: -35px; margin: auto; width: 30px; height: 30px; font-size: 12px; border: 1px solid #404040; pointer-events: auto; color: rgb(255 255 255); background: #121212; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 7px; } #builder #area > #outline > div > .sections > .top { top: -15px; } #builder #area > #outline > div > .sections > .top.active, #builder #area > #outline > div > .sections > .bottom.active { background-color: var(--dh-brp10); } #builder #area > #outline > div > .sections > .bottom { bottom: -15px; } #builder #area > #outline > div > .sections > div > i { font-size: 12px; } /* Label */ #builder #area > #outline > div > .label { position: absolute; top: -23px; left: -1px; display: none; background: var(--dh-brp10); opacity: 1; font-size: 12px; line-height: 16px; font-weight: 400; height: 22px; justify-content: center; align-items: center; padding: 4px 6px; gap: 6px; min-width: max-content; white-space: nowrap; } /* Parents */ #builder #area > #outline > div > .parents { position: absolute; bottom: 100%; margin-bottom: 25px; left: -1px; z-index: 100000000; pointer-events: auto; display: none; width: 15px; } #builder #area > #outline > div[data-active="true"] > .parents { display: block; } #builder #area > #outline > div > div > .parent { background: rgb(163 117 255 / 85%); font-size: 10px; line-height: 16px; font-weight: 400; gap: 4px; cursor: pointer; z-index: 100000000; margin-top: 2px; position: relative; width: max-content; justify-content: center; align-items: center; padding: 1px 3px; opacity: 0; display: flex; transition: 0.5s opacity; } #builder #area > #outline > div > .parents:hover > .parent { opacity: 1; } #builder.modern #area > #outline > div[data-active="true"] div > .parent { background: rgb(5 201 96 / 85%); } /* Spacing */ #builder #area > #outline > div > .label .spacing:not(:empty) { font-size: 10px; color: #fff; padding-left: 3px; padding-right: 3px; background: rgb(255 255 255 / 20%); } #builder #area > #outline > div > .label .spacing[data-type="right-top"], #builder #area > #outline > div > .label .spacing[data-type="right-bottom"] { border-left: 2px dashed #fff; } #builder #area > #outline > div > .label .spacing[data-type="left-top"], #builder #area > #outline > div > .label .spacing[data-type="left-bottom"] { border-right: 2px dashed #fff; } #builder #area > #outline > div > .label .spacing[data-type="bottom-left"], #builder #area > #outline > div > .label .spacing[data-type="bottom-right"] { border-top: 2px dashed #fff; } #builder #area > #outline > div > .label .spacing[data-type="top-left"], #builder #area > #outline > div > .label .spacing[data-type="top-right"] { border-bottom: 2px dashed #fff; } #builder #area > #outline > div > .label > img, #builder #area > #outline > div > div > .parent > img { filter: brightness(5); } #builder #area > #outline > div[data-active="true"] > .label, #builder #area > #outline > div[data-type="hover"] > .label { display: flex; } #builder #area > #outline > div[data-type="hover"] > .label { left: -2px; } #builder.modern #area > #outline > div[data-type="hover"] > .label { left: -1px; } #builder #area > #outline > div[data-type="edit"][data-loop="0"] > .label { display: none; } #builder #area > #outline > div[data-type="edit"][data-loop="0"][data-index="0"] > .label { display: flex; } /* Size */ #builder #area > #outline > div > .size { position: absolute; left: 0px; right: 0px; bottom: -20px; font-size: 12px; display: none; margin: auto; text-align: center; width: 100%; font-weight: 400; color: var(--dh-brp10); justify-content: center; align-items: center; height: 1px; } #builder #area > #outline > div > .size > div { background-color: var(--dh-brp10); border-radius: 5px; font-size: 11px; font-weight: 500; line-height: 13.3px; display: flex; padding: 4px 6px; } #builder #area > #outline > div[data-active="true"] > .size, #builder #area > #outline > div[data-type="hover"] > .size { display: flex; } #builder #area > #outline > div[data-type="edit"] > .size { color: var(--dh-success10); } #builder #area > #outline > div[data-type="edit"][data-loop="0"] > .size { display: none; } #builder #area > #outline > div[data-type="edit"][data-loop="0"][data-index="0"] > .size { display: flex; }#builder #area > #outline .paddings { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; pointer-events: none; line-height: 1.4; } #builder #area > #outline .padding { position: absolute; z-index: 100; display: flex; align-items: center; justify-content: center; } #builder #area > #outline .padding.active { background: var(--dh-success03); } #builder #area > #outline .padding.hidden { display: none!important; } #builder #area > #outline .padding[for="left"] { left: 2px; top: 2px; min-width: 5px; height: calc(100% - 4px); cursor: default!important; z-index: 100; } #builder #area > #outline .padding[for="left"].active, #builder #area > #outline .padding[for="left"]:hover { cursor: w-resize!important;; } #builder #area > #outline .padding[for="right"] { right: 2px; top: 2px; min-width: 5px; height: calc(100% - 4px); cursor: default!important; z-index: 100; } #builder #area > #outline .padding[for="right"].active, #builder #area > #outline .padding[for="right"]:hover { cursor: w-resize!important; } #builder #area > #outline .padding[for="top"] { left: 2px; top: 2px; width: calc(100% - 4px); min-height: 5px; cursor: default!important; z-index: 99; } #builder #area > #outline .padding[for="top"].active, #builder #area > #outline .padding[for="top"]:hover { cursor: ns-resize!important;; } #builder #area > #outline .padding[for="bottom"] { left: 2px; bottom: 2px; width: calc(100% - 4px); min-height: 5px; cursor: default!important; z-index: 99; } #builder #area > #outline .padding[for="bottom"].active, #builder #area > #outline .padding[for="bottom"]:hover { cursor: ns-resize!important; } #builder #area > #outline .padding[for="left"] > .rotate { transform: rotate(-90deg); } #builder #area > #outline .padding[for="right"] > .rotate { transform: rotate(90deg); } #builder #area > #outline .padding value { border-radius: 2px; font-size: 2px; background: var(--dh-success10); color: transparent; font-weight: 500; pointer-events: auto; transition: 0.15s font-size; display: inline-block; padding: 0 10px; } #builder #area > #outline .padding > .rotate { padding: 1px; display: inherit!important; pointer-events: auto; } #builder #area > #outline .padding.active value { color: #fff; font-weight: bold; font-size: 10px; }#builder #classes { margin-top: 10px; height: calc(100vh - 169px); overflow: auto; display: flex; flex-direction: column; } #builder.beast-0 #classes { height: calc(100vh - 126px); } #builder #tabs > .parts > div > div[data-id="classes"] { max-width: 40vw; } #builder.modern #classes .classes-list { background: #1a1a1a; border-top: 1px solid #242426; border-bottom: 1px solid #242426; } #builder #classes .classes-list li { display: flex; align-items: center; justify-content: space-between; padding:8px 10px; font-size: 12px; color: var(--dh-ts10); cursor: pointer; transition: 0.2s; text-transform: capitalize; } #builder #classes .classes-list li span { color: var(--dh-ts10); } #builder #classes .classes-list li:hover { background: var(--dh-bgs10); } #builder #classes .classes-list li.editing { background: var(--dh-bgs10); } #builder #classes .classes-list li.editing span { color: white; } #builder #classes .classes-list li > left { display: flex; align-items: center; gap:5px; max-width: 100%; overflow: hidden; } #builder #classes .classes-list li > right { display: flex; align-items: center; justify-content: flex-end; gap:5px; }#builder #colors { margin-top: 10px; height: calc(100vh - 169px); overflow: auto; display: flex; flex-direction: column; } #builder.beast-0 #colors { height: calc(100vh - 126px); } #builder #tabs > .parts > div > div[data-id="colors"] { max-width: 40vw; } #builder.modern #colors .colors-list { background: #1a1a1a; border-top: 1px solid #242426; border-bottom: 1px solid #242426; } #builder.modern #colors .colors-list {padding-top: 10px!important;;} #builder #colors .colors-list {padding: 10px; padding-top: 0} #builder #colors .colors-list { display: grid; grid-gap: 10px; grid-template-columns: 1fr; } #builder #colors .colors-list > li { list-style-type: none; display: flex; align-items: center; gap: 5px; text-transform: capitalize; } #builder #colors .colors-list.global > li { flex-direction:column; align-items: flex-start; gap: 5px; } #builder #colors .colors-list > li { display: grid; } #builder #colors .colors-list > li label { font-size: 12px; color: var(--dh-ts10); overflow: hidden; margin-bottom: 0; line-height: 1; display: flex; align-items: center; gap:5px; } #builder #colors .colors-list > li label > span { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; text-transform: capitalize; color: var(--dh-ts10); } #builder #colors .colors-list > li input { color: var(--dh-ts10); pointer-events: none; } #builder #colors .color-group { position:relative; } #builder #colors .color-group::after { width: calc(100% - 20px); left: 10px; bottom: 0px; background: #242426; content: ""; height: 1px; display: block; position: absolute; }#styler_interactions h2{ display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; font-size: 12px; background: #181819; font-weight: 400; } #styler_interactions .styler_interactions { padding: 15px; } #styler_interactions { overflow: auto; height: calc(100vh - 118px); } #styler_interactions .animation-tab { padding: 15px; display: none;; flex-direction: column; gap:8px; } #styler_interactions .animation-tab.active { display: flex; } #styler_interactions .fromtotoggle { padding: 0 15px;; } #styler_interactions .animation-tab > div { gap: 8px; display: flex; flex-direction: column;. } #styler_interactions .animation-main { padding: 15px; } #styler_interactions .animation-main > div { gap: 8px; display: flex; flex-direction: column; } .styler_input unit { color:var(--dh-ts10); } #styler_interactions .animation-boolean { display: flex; width: 100%; grid-column: span 12; justify-content: space-between; align-items: center; gap: 13px; } #styler_interactions .animation-boolean label { font-size: 11px; color: white; max-width: 100px; line-height: 1.1; width: 100px; display: flex; align-items: center; } #styler_interactions .animation-boolean .styler_icons_grid { flex: 1; } .styler #styler_interactions .styler_interactions_options .label_inline label { max-width: 100px; line-height: 1.1; width: 100px; } #builder .layout { display: flex; } #builder .layout > .left { z-index: 9999; background: var(--dh-bgp00); transform: translateX(0px); } #builder .layout.openLeft > .left {transform: translateX(0);} #builder .layout.leftPin > .left { position: initial; height: 100vh; padding-top: 40px; } #builder .layout > .center { flex: 1; } #builder .layout > .right { position: fixed; top: 74px; right: 0; width: 265px; } #builder .layout > .left { position: fixed; top: 74px; left: 0; border-right: 1px solid var(--dh-bc10); } #builder .layout > .right , #builder .layout > .left { background: var(--dh-bgp00); z-index: 999999; height: calc(100vh - 74px); display: none; } .styler-sidebar { min-height: calc(100vh - 74px); } #builder.beast-0 .styler-sidebar { min-height: calc(100vh - 34px); } #builder .layout > .right { border-left: 1px solid var(--dh-bc10); }#builder .navbar-editor { background: var(--dh-bgp00); height: 40px; width: 100%; position: fixed; top: 0; left: 0; z-index: 10000; border-bottom: 1px solid var(--dh-bc10); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 12px; } #builder .navbar-editor > div { flex:1; } /* navbar left */ #builder .navbar-editor .logo { border-right: 1px solid var(--dh-bc10); padding-right: 20px; margin-right: 10px; } #builder .navbar-editor .n-left { display: flex; align-items: center; } /* navbar center */ #builder #actions .responsive-icons { display: flex; align-items: center; justify-content: center; grid-gap: 14px; } #builder #actions .hover-brightness { cursor: pointer; transition: 0.2s; } #builder #actions .hover-brightness:hover { filter: brightness(3); } #builder #actions .responsive-icons img.active { filter: brightness(3); } /* navbar right */ #builder #actions { display: flex; align-items: center; justify-content: flex-end; } #builder #actions .r-part:not(:last-child) { border-right: 1px solid var(--dh-bc10); margin-right: 5px; padding-right: 15px; display: flex; align-items: center; height: 15px; z-index: 10000; } #builder #actions .undo-forward { grid-gap: 10px; } #builder #actions .undo-forward img { cursor: pointer; } #builder #actions .zoom-input input { width: 35px; font-size: 12px; line-height: 1; color: var(--dh-ts10); cursor: pointer; } #builder #actions .zoom-input { margin-left: 5px; } #builder #actions .zoom-dropdown icons { display: flex; align-items: center; grid-gap: 5px; } #builder #actions .zoom-dropdown img {transition: 0.2s;} /* #builder #actions .zoom-dropdown icons {cursor: pointer;} #builder #actions .zoom-dropdown icons:hover img {filter: brightness(3);} */ #builder #actions .zoom-dropdown icons {cursor: pointer;} .popup.editor .container { width: 100vw; height: 100vh; background: var(--dh-bgs10); }.styler .all-styles-list-popup { position: absolute; left: 0; top: 44px; background: var(--dh-bgp00); z-index: 4324324; width: 100%; height: calc(100vh - 111px); overflow: auto; padding: 15px; display: none; } .styler .all-styles-list-popup .all-styles-property { display: flex; align-items: center; gap: 10px; position: relative; margin-bottom: 5px; } .styler .all-styles-list-popup .all-styles-property p { width: 80px; color: var(--dh-ts10); font-size: 12px; line-height: 1; } .styler .all-styles-list-popup .all-styles-property input { color: white; flex: 1; border-bottom: 1px solid var(--dh-bc10); font-size:12px; padding:5px 0; } .all-styles-list-popup h3:not(:first-of-type) { border-top: 1px solid var(--dh-bc10); margin-top: 30px; padding-top: 15px; } .all-styles-list-popup h3 { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; color: var(--dh-ts10); font-weight: 400; position: relative; font-size: 12px; } .all-styles-list-popup h4 { margin-top: 15px; font-weight: 400; font-size: 12px; margin-bottom: 8px; position: relative; } .all-styles-list-popup h3 i , .all-styles-list-popup h4 i { position: absolute; right: 0; font-size: 13px; color: var(--dh-ts10); cursor: pointer; top: 3px; width: 14px; } .all-styles-list-popup h3 i:hover , .all-styles-list-popup h4 i:hover { color: white; } .all-styles-list-popup > .properties-of { position: relative; left: -15px; top: -15px; background: orange; width: calc(100% + 30px); border-bottom: 1px solid var(--dh-bc10); background: #24242654; height: 44px; font-size: 11px; line-height: 44px; font-weight: 600; padding: 0 15px; }#builder .effects-list .item button.save { margin: 0; padding: 0 25px; width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; } .radius-switches { display: flex; grid-gap: 5px; align-items: center; justify-content: flex-end; } .border-radius .border-radius-basic > p { display: flex; align-items: center; justify-content: space-between; grid-gap: 10px; } .border-radius .border-radius-advanced { display: none; } .border-radius .border-radius-basic > p i { color: var(--dh-bc08); cursor: pointer; font-size: 15px; } .border-radius .border-radius-basic > p i:first-child { color: var(--dh-brp10); } .border-radius.show-advanced-radius .border-radius-basic > p i:first-child { color: var(--dh-bc08); } .border-radius.show-advanced-radius .border-radius-basic > p i:last-child { color: var(--dh-brp10); } .border-radius.show-advanced-radius .border-radius-advanced { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; margin-top: 15px; } .border-radius.show-advanced-radius .border-radius-advanced label span { font-size: 10px; color:var(--dh-ts10); } .styler .border-radius.show-advanced-radius .styler-flex-field { grid-gap: 3px; position: relative; } .styler .border-radius.show-advanced-radius .styler-flex-field label { position: absolute; bottom: -15px; } .styler .border-radius-advanced .styler-flex-field {margin-bottom: 0;} .styler .border-radius-advanced .styler-flex-field > div, .styler .border-radius-basic .styler-flex-field > div { flex: 1; width: auto; display: flex; align-items: center; border-bottom: 1px solid var(--dh-bc10); } .border-radius-advanced { margin-bottom: 10px; } .styler .border-radius-advanced .styler-flex-field > p { width: 23px; height: 23px; position: relative; background: var(--dh-brp01); border-radius: 2px; } .styler .border-radius-advanced .styler-flex-field > p i { position: absolute; color: var(--dh-brp10); font-size: 14px; } .styler .border-radius-advanced .styler-flex-field:first-child > p i { top: -4px; left: -3px; transform: rotate(-45deg); } .styler .border-radius-advanced .styler-flex-field:nth-child(2) > p i { top: -4px; right: -3px; transform: rotate(45deg); } .styler .border-radius-advanced .styler-flex-field:nth-child(3) > p i { bottom: -4px; left: -3px; transform: rotate(-135deg); } .styler .border-radius-advanced .styler-flex-field:nth-child(4) > p i { bottom: -4px; right: -3px; transform: rotate(135deg); } .border-radius-basic { display: flex; justify-content: space-between; } .styler .border-radius-basic .styler-flex-field > p { display: none; } .styler .border-radius-basic .styler-flex-field > div {flex:1; width: auto; justify-content: flex-end;} .styler .border-radius-basic .styler-flex-field input {max-width: 51px;} .border-customization-side {display: none} .border-customization-side.active {display: flex; flex-direction: column; grid-gap: 10px;} .styler .shadow-editor-box { position: absolute; top: 70px; left: 0; width: calc(100% - 10px); background: var(--dh-bgp00); padding: 7px; box-shadow: 0 0 20px black; z-index: 432432; border-radius: 4px; border: 1px solid var(--dh-bc04); display: none; left: 5px; } .styler .shadow-buttons { display: flex; align-items: center; justify-content: space-between; grid-gap: 10px; } .styler .shadow-item { display: flex; align-items: center; justify-content: space-between; padding: 5px; background: white; border-radius: 4px; font-size: 11px; margin-bottom: 3px; background: var(--dh-bc03); } .styler .shadow-item color { background: orange; min-width: 13px; max-width: 13px; height: 13px; display: block; border-radius: 2px; } .styler .shadow-item .shadow-info { display: flex; align-items: center; grid-gap: 5px; } .styler .shadow-item .shadow-info text {padding-right: 25px;} .styler .shadow-item .delete-shadow { color: var(--dh-danger10); margin-left: 4px; cursor: pointer; } .styler .shadow-item .edit-shadow { color: var(--dh-brp10); cursor: pointer; } .styler .shadow-actions {min-width: 30px;} .styler .shadow-buttons { display: flex; align-items: center; justify-content: space-between; grid-gap: 10px; } .styler .shadow-buttons button { flex: 1; font-size: 11px!important; font-weight: 400; padding: 6px!important; line-height: 1.3!important; } .styler .button-1 { height:26px; line-height: 26px; font-size: 12px; font-weight: 500; border-radius: 5px; background: var(--dh-brp10); color: white; width: 100%; line-height: 1; } .styler .button-1:hover { background: var(--dh-brp08); }.sidebar-classes .search { border-bottom: 1px solid var(--dh-bc10); background: var(--dh-bc10); border-top: 1px solid rgb(54 54 55); border-bottom: 1px solid rgb(54 54 55); } .sidebar-classes .search input { padding: 8px; color: white; } .sidebar-classes .classes-list { height: calc(100vh - 84px); overflow: auto; } .sidebar-classes .classes-list ul { height: calc(100vh - 84px); } .sidebar-classes .classes-list::-webkit-scrollbar-track { background-color: var(--dh-bgp10); } .sidebar-classes .classes-list::-webkit-scrollbar { width: 5px; height:5px; background-color: var(--dh-bgp10); } .sidebar-classes .classes-list::-webkit-scrollbar-thumb { background-color: var(--dh-bgp10); } .sidebar-classes .classes-list:hover::-webkit-scrollbar-thumb { background-color: #925bff; } .sidebar-classes .classes-list li > div { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-bottom: 1px solid rgb(54 54 55); cursor: pointer; } .sidebar-classes .classes-list li > div:hover, .sidebar-classes .classes-list li > div.active { background: var(--dh-bc10); } .sidebar-classes .classes-list li > div:hover > span { color: white; } .sidebar-classes .classes-list li > div > span, .sidebar-classes .classes-list li > div.active > span { color: var(--dh-ts10); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-classes .classes-list li div .actions { display: flex; justify-content: flex-end; gap: 6px; font-size: 12px; visibility: hidden; opacity: 0; } .sidebar-classes .classes-list li div:hover .actions { visibility: visible; opacity: 1; } .sidebar-classes .classes-list .actions button { padding: 0; font-size: 15px; color: var(--dh-ts10); } .sidebar-classes .classes-list .actions button:hover {color: white} .sidebar-classes .classes-srch { background: var(--dh-bc10); position: relative; } .sidebar-classes .classes-srch input { width: 100%; height: 100%; padding: 10px 15px; padding-right: 30px; color: white; } .sidebar-classes .classes-srch i { position: absolute; top: 50%; transform: translateY(-50%); right:15px; color: var(--dh-ts10); font-size: 17px; }.pickr { display: flex; justify-content: flex-end; position: absolute; left: 0; top: 0; border: 1px solid var(--dh-bc10); border-radius: 5px; opacity:0!important;; } .pickr .pcr-button { height: 22px; width: 22px; padding: 0; position: relative; left: 1px; top: -1px; } .dh-color-picker-fake { height: 28px; min-width: 28px; padding: 0; background: #f3f3f3; border-radius: 5px; margin-left: auto; cursor: pointer; border:1px solid #333336; } .pcr-app { z-index: 99999999999999; } .styler-color-field { position: relative; border: 1px solid #2e2e30; height: 30px; background:rgb(36 36 38); } [addon='builder.animations:options'] .styler-color-field { position: relative; border: 1px solid #2e2e30; height: 30px; background:rgb(36 36 38); } [addon='builder.animations:options'] .styler-color-field input { border-bottom: none; } .pcr-app .pcr-interaction .pcr-result {width: 100%; min-width: 9em;} .pcr-app .pcr-interaction .pcr-result, .pcr-app .pcr-interaction input { background:rgb(36 36 38 / 1.0); color:white; } .pcr-app { background:#1a1a1c } .pcr-app .pcr-interaction input:focus {box-shadow: none!important} .pcr-app .pcr-interaction .pcr-type { width: calc(50% - 5px); } .pcr-app .pcr-interaction .pcr-type.active , .pcr-app .pcr-interaction .pcr-save { background: #925bff; } .pcr-app .pcr-interaction .pcr-save { border-radius: 5px; display: block; width: 100%; } #styler-content-link .content_link_tabs { display: flex; align-items: center; justify-content: space-between; list-style: none; margin-bottom: 10px; } #styler-content-link .content_link_tabs li { flex:1; padding: 5px; display: flex; align-items: center; justify-content: center; color: var(--dh-ts10); cursor: pointer; transition: 0.2s; border-radius: 3px; } #styler-content-link .content_link_tabs li:hover { color: var(--dh-tp10); } #styler-content-link .content_link_tabs li.active { background: #7510FF; background-image: var(--dh-grbpbs); background-size: 300% 100%; color: var(--dh-tp10); } #styler-css-dropdowns .content_link_tab { display: flex; flex-direction: column; grid-gap: 10px; display: none; } #styler-css-dropdowns .content_link_tab.active { display: flex; } #styler-css-dropdowns .label_inline.content_input { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid silver; padding: 0; grid-gap: 5px; width: 100%; border-bottom: 1px solid var(--dh-bc10); } #styler-css-dropdowns .label_inline.content_input label {width: auto} #styler-content-link .content_input input { flex:1; } #global .content_link_tab .form-main.custom-dropdown .opener label {font-size: 11px;} #styler-content-link .rel_newtab { margin-top: 10px; display: flex; flex-direction: column; grid-gap: 10px; } #styler-content-link.hide_rel .rel_newtab { display: none; } #styler-css-dropdowns #styler-content-link .styler-dropdown:not(.units) {padding: 3px 0} #builder .navbar-builder .n-right .r-part.ruler-icon {display: none} #builder .navbar-builder .n-right .r-part.preview {display: none} #builder #actions .undo-forward img[data-id]{ filter: brightness(3); }#builder .add-new-class { display: flex; justify-content: space-around; margin-bottom: 10px; margin-top: 5px; background: #1a1a1c; padding: 0px; border-radius: 5px; overflow: hidden; } #builder .add-new-class button { background: var(--dh-brp10); font-size: 11px; padding: 0 10px; } #builder .add-new-class input { padding: 0 8px; color:white; height: 28px; font-size: 12px; } .styler .classes-input .custom-options ul { max-height: 150px; overflow: auto; } .styler .classes-input selected { display: flex; gap: 3px; font-size:12px; flex-wrap:wrap; justify-content: flex-start; text-transform: none; } .styler .classes-input selected p { line-height: 1; font-size:11px; } .styler .classes-input input { min-width: 60px; max-width: 120px; color:white; flex:1; font-size: 11px; } .styler .classes-input selected item { display: flex; justify-content: flex-start; padding: 3px; background: var(--dh-brp10); color: white; border-radius:5px; height: 22px; align-items: center; padding: 0 7px; width:max-content; position: relative; min-width: 34px; } .styler .classes-input selected item:hover { background: var(--dh-brp05); } .styler .classes-input selected item:hover p { color: rgba(255,255,255,0.6); } .styler .classes-input selected item ul { display: flex; align-items: center; justify-content: flex-end; gap: 4px; list-style: none; margin-left:0; padding:0 5px; position: absolute; right:0; top:0; background: var(--dh-brp10); border-radius: 5px; height:22px; visibility: hidden; opacity:0; } .styler .classes-input selected item:hover ul { visibility: visible; opacity: 1; } .styler .classes-input selected item li { display: flex; } .styler .classes-input .classes-list { display: flex; justify-content: flex-start; background: var(--dh-bgs10); height: 28px; line-height: 28px; padding: 0 7px 0 10px; border-radius: 5px; cursor: pointer; display: flex; flex-wrap: wrap; padding: 4px; height: auto; align-items: center; gap:4px; min-height:32px; margin-top:5px; } .styler .classes-input .classes-focus { position: relative; z-index: 3000; } .styler .classes-input .classes-dropdown { position: absolute; z-index: 3001; left: 0; transform: translateY(5px); width:185px; visibility: hidden; opacity: 0; } .styler .classes-input.focus .classes-dropdown { visibility: visible; opacity: 1; } .styler .classes-input .classes-dropdown .create-new-class { border-bottom: 1px solid var(--dh-bc10); font-size: 12px; color: var(--dh-ts10); padding-bottom: 7px; margin-bottom: 7px; flex-wrap: wrap; gap: 3px; display: none; cursor:pointer; align-items: center; padding:6px 8px; font-size: 11px; } .styler .classes-input .classes-dropdown .create-new-class.show {display: flex} .styler .classes-input .classes-dropdown .create-new-class newclass { background: var(--dh-brp10); color: white; font-size: 11px; padding: 2px 6px; border-radius: 5px; } .styler .A-styler-selectors-state.active .select-opener { background: rgb(0 172 112); } .styler .A-styler-selectors-state.active img {filter: brightness(3)} .styler .A-styler-selectors-state.custom-dropdown .select-opener { height: 32px; width: 32px; padding: 0; margin-top:-6px; margin-right:0; margin-left:auto; } .styler .classes-applied { font-size: 11px; display: flex; align-items: center; margin-left: 5px; } .styler .classes-applied #tag_classes_amount { display: flex; gap:7px; align-items: center; font-weight: 700; font-size: 13px; } .styler .classes-applied box { width: 6px; height: 6px; background: #925BFF; transform: rotate( 45deg); } .styler .classes-applied label { padding: 1px 9px; background: rgb(146 91 255 / 24%); color: #925bff; font-size: 11px; border-radius: 5px; cursor: pointer; text-transform: none; } .styler label#state_label { line-height: 1; font-size: 11px; display: flex; align-items: center; } .styler .dropdown-classes-list span { text-transform: uppercase; color: var(--dh-ts10); font-size: 11px; padding: 6px 8px; display: block; } .styler .dropdown-classes-list.styler-select li { color:white!important; padding: 6px 8px!important; display: flex; align-items: center; justify-content: space-between; gap: 6px; } .styler .dropdown-classes-list.styler-select li p { display: flex; align-items: center; gap: 7px; } .styler .dropdown-classes-list.styler-select li:hover { background:#333336; } .styler .dropdown-classes-list.styler-select li img { cursor:pointer; } .styler .dropdown-classes-list.styler-select li img:hover { filter: brightness(3); }#builder .text-styles-list { padding: 5px; } #builder .text-styles-list li .info { display: flex; align-items: center; gap: 7px; padding: 5px; position: relative; border-radius: 5px; cursor: pointer; transition: 0.16s; font-size: 13px; } #builder .sidebar-styles .text-styles-list .preview { display: none!important; } #builder .text-styles-list li img { width: 18px; object-fit: contain; } #builder .text-styles-list li span { color: var(--dh-ts10); } #builder .text-styles-list li i { color: var(--dh-ts10); position: absolute; right: 5px; top: 50%; transform: translateY(-50%); opacity: 0; transition: 0.16s; } #builder .text-styles-list li:hover i{ opacity: 1; } #builder .text-styles-list li:hover { background: var(--dh-bc10); } #builder .text-styles-list li.active { background: var(--dh-bc10); } #builder .text-styles-list li .font { max-width: 126px; line-height: 1; } /* colors */ #builder .color-styles-list {padding: 10px; padding-top: 0;} #builder .color-styles-list > ul { display: grid; grid-gap: 10px; grid-template-columns: 1fr; } #builder .color-styles-list.global > ul { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } #builder .color-styles-list > ul > li { list-style-type: none; display: flex; align-items: center; gap: 5px; } #builder .color-styles-list.global > ul > li { flex-direction:column; align-items: flex-start; gap: 5px; } #builder .color-styles-list > ul > li label { color: var(--dh-ts10); font-size: 12px; width: 85px; max-width: 85px; min-width: 85px; overflow: hidden; margin-bottom: 5px; line-height: 1; } #builder .color-styles-list > ul > li input { color: var(--dh-ts10); } #builder .color-styles-list.global { position: relative; } #builder .color-styles-list.global::after { width: calc(100% - 20px); left: 10px; bottom: -4px; background: #242426; content: ""; height: 1px; display: block; position: absolute; } #builder .color-styles-list .styler-color-field { width: 100%; } #builder .effect-header { display:flex; align-items:center; justify-content: space-between; } #builder .effect-header h2 { font-weight: 400; font-size: 11px; margin-bottom: 0; } #builder .effect-header button { padding: 0; display: flex; } #builder .effects-list .item { display: flex; justify-content: space-between; flex:1; cursor: pointer; } #builder .effects-list .item button { padding: 0; margin-left: 10px; align-items: center; justify-content: flex-end; display: flex; min-width: 8px; } #builder .effects-list .item .inside{ padding: 0px; border-radius: 5px; background: #242426; display: flex; align-items: center; margin-top: 0px; height: 24px; padding-left: 4px; flex:1; } #builder .effects-list .item {margin-top: 5px;} #builder .effects-list .item:first-child{ margin-top: 10px; } #builder .effects-list .item icon { margin-right: 7px; display:flex; align-items: center; min-width:14px; width: auto; } #builder .effects-list .item icon color{ height: 20px; border:1px solid var(--dh-bc10); width:20px; border-radius: 5px; display: block; position: relative; left: -1px; } #builder .effects-list .item p { font-size: 12px; color: var(--dh-ts10); height:19px; max-width:182px; overflow: hidden; } .attrs-popup label { color: var(--dh-ts10); font-size: 11px; } .attrs-popup input { display: flex; font-size: 12px;; justify-content: space-between; background: rgb(36 36 38); height: 28px; line-height: 28px; padding: 0 7px 0 10px; border-radius: 5px; cursor: pointer; color:white; } .attrs-popup textarea { color:white; font-size: 12px;; display: flex; justify-content: space-between; background: rgb(36 36 38); height: 60px; max-height: 150px; min-height: 28px; line-height: 28px; padding: 0 7px 0 10px; border-radius: 5px; cursor: pointer; resize: vertical; } .attrs-popup button { height: 26px; line-height: 26px; font-size: 13px; font-weight: 500; border-radius: 5px; background: var(--dh-brp10); color: white; width: 100%; margin-top: 10px; } .attrs-popup .attr_value { margin-top: 10px; }#tab-elements #elements { overflow: auto; max-height: calc(100vh - 159px); } #tab-elements #elements::-webkit-scrollbar-track { background-color: var(--dh-bgp10); } #tab-elements #elements::-webkit-scrollbar { width: 5px; height:5px; background-color: var(--dh-bgp10); } #tab-elements #elements::-webkit-scrollbar-thumb { background-color: var(--dh-bgp10); } #tab-elements #elements:hover::-webkit-scrollbar-thumb { background-color: #925bff; } #tab-elements #elements > ul > li {position: relative} #tab-elements #elements > ul > li::before { content: ''; width: 100%; background: var(--dh-bc10); position: absolute; left: 0; top: -1px; height: 1px; } #tab-elements #elements li > * { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; gap: 5px; border-bottom: 1px solid var(--dh-bc10); pointer-events: none; line-height: 1.2; } #tab-elements #elements li ul > * { border-left: 1px solid var(--dh-bc10); } #tab-elements #elements li > * span pagename { color: var(--dh-ts10); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; font-size: 13px; margin-bottom: 2px; } #tab-elements #elements li div:hover span pagename {color: white} #tab-elements route { font-size: 10px; background: var(--dh-ts02); padding: 0px 5px; border-radius: 5px; color: var(--dh-ts10); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; width: max-content; } #tab-elements #elements li { list-style: none; cursor: pointer; transition: 0.15s all; border-right: 0px solid var(--dh-brp10); } .sidebar-pages .current-page { background: var(--dh-brp10); display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; } #tab-elements .current-page route {color: white; background: #a87cff} .sidebar-pages .current-page > span { display: flex; flex-direction: column; align-items: flex-start; } #tab-elements #elements li > * .actions, .sidebar-pages .current-page .actions { opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 6px; font-size: 12px; } #tab-elements #elements li > * { color: var(--dh-ts10); } .sidebar-pages .current-page .actions a { color: white; } #tab-elements #elements li div:hover > .actions, .sidebar-pages .current-page:hover > .actions { opacity: 1; visibility: visible; } #tab-elements #elements li .actions a { padding: 0!important; border: none!important; } #tab-elements #elements li .actions div:hover , .sidebar-pages .current-page .actions a:hover { color: white!important; } #tab-elements #elements li ul { padding-left: 10px; } /* NEW PAGES */ .tab-sidebar #pages .page-item { position: relative; padding: 6px 10px; font-size: 14px; cursor: pointer; line-height:1.2 } .tab-sidebar #pages .page-item pageroute { font-size: 11px; color: var(--dh-ts10); background: var(--dh-bc10); padding: 0 5px; line-height: 1; border-radius: 2px; } .tab-sidebar #pages .page-item.active { background: #242426; } .tab-sidebar #pages .page-item.active img {filter: brightness(3);} .tab-sidebar #pages .page-item > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tab-sidebar #pages .page-item > div > div { display: flex; align-items: center; justify-content: flex-end; gap: 5px; opacity: 0; } .tab-sidebar #pages .page-item:hover > div > div { opacity: 1; } .tab-sidebar #pages .page-item > div > div a { color: var(--dh-ts10); } .tab-sidebar #pages .page-item > div > div a:hover { color: white; } .tab-sidebar #pages .page-item .actions { position: absolute; right: 0; top: 50px; background: #1F1F21; border: 1px solid #333336; box-sizing: border-box; box-shadow: 0px 0px 10px rgb(0 0 0 / 50%); border-radius: 8px; padding: 13px; min-width: 110px; font-size: 14px; display: none; } .tab-sidebar #pages .page-item span { display: flex; align-items: center; font-size: 14px; color: var(--dh-ts10); gap: 8px; } .tab-sidebar #pages .page-item:hover span { color: white; } .tab-sidebar #pages .page-item.active span { color: white; } .tab-sidebar #pages ul > p { padding: 8px 12px; font-size: 14px; color: white; border-top: 1px solid var(--dh-bc10); margin-top: 15px; padding-top: 12px; } .tab-sidebar #pages ul > span { padding: 8px 12px; font-size: 12px; color: var(--dh-ts10); display: block; } #builder .radial-or-linear { display: flex; justify-content: flex-end; align-items: center; background: rgba(36, 36, 38, 1); border-radius: 5px; padding: 2px; } #builder .radial-or-linear button:nth-child(1) { background: rgba(51, 51, 54, 1); } #builder .radial-or-linear button { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 5px; } #builder .selected-radial .radial-or-linear button:nth-child(1) {background: rgba(36, 36, 38, 1);} #builder .selected-radial .radial-or-linear button:nth-child(2) {background: rgba(51, 51, 54, 1);} #builder .selected-radial .angle-select {display:none;} #builder .angle-select { width:82px; } #builder .angle-select label {width:25px!important;} #builder .gradient-colors-header { margin-bottom: 5px; font-size: 12px; } #builder .gradient-colors .item, #builder .gradient-colors-header { display: grid; grid-template-columns: 1fr 46px 12px; gap: 9px; margin-bottom: 10px; } #builder .gradient-colors .item .remove {padding:0} #builder .gradient-colors .item .stop span { color: var(--dh-ts10); font-size: 11px; padding-top: 3px; } #builder .add-new { display: flex; align-items: center; gap: 10px; color: var(--dh-ts10); font-size: 12px; padding: 0; } #builder .add-new:hover { color:white; } #builder .add-new:hover img {filter: brightness(3)} #builder .image-field, #builder .image-data { display: flex; justify-content: space-between; align-items: center; } #builder .image-data { cursor:pointer; height: 28px; line-height: 28px; background: var(--dh-bgs10); border-radius: 5px; } #builder .image-data img { width:28px; height: 28px; border-radius: 5px; object-fit: cover; } #builder .image-field > button { height: 28px; padding: 0px; min-width:28px; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; background: var(--dh-bgs10); padding: 0px; } #builder .image-data input { font-size: 13px; color: var(--dh-ts10); line-height: 24px; height: 24px; padding-left: 5px; }/* this styles are using are extending styles from input-spacings.css */ /* this styles are using are extending styles from input-spacings.css */ /* this styles are using are extending styles from input-spacings.css */ .styler .positions-wrapper { position: absolute; left: 0; width: 100%; height: 100%; z-index: 10; background:#616066; border-radius: 3px; overflow: hidden; } .styler .positions-wrapper::before { content: 'position'; font-size: 9px; color: #fff; text-transform: uppercase; top: 2px; left: 4px; z-index: 1000; position: absolute; font-weight: 400; } .styler .spaces-position .spaces-wrapper {height: 100px;} .styler .positions { position: absolute; cursor: ew-resize; display: flex; align-items: center; justify-content: center; } .styler .positions input { padding: 1px; font-size: 11px; display: block; z-index: 100; position: relative; line-height: 1; background: var(--dh-bc01); border-radius: 2px; width: 36px; height: auto; border:none; text-align: center; transition: 0.1s; } .styler .positions input::selection { background: transparent; } .styler .positions input:focus { font-size: 10px; transform: scale(1.15); border:1px solid var(--dh-brp10); } .styler .positions.left { left: 0; top: 0; width: 20%; background: #3F3E42; height: 100%; } .styler .positions.right { right: 0; top: 0; width: 20%; background: #3F3E42; height: 100%; } .styler .positions.top { right: 0; left: 0; top: 0; width: 100%; background: #3F3E42; height: 30%; cursor: n-resize; } .styler .positions.bottom { right: 0; left: 0; bottom: 0; width: 100%; background: #3F3E42; height: 30%; cursor: n-resize; } .styler .if-not-initial {display: none;} .styler .display-position-edit .if-not-initial {display: block;}.styler .spaces-wrapper { width: 100%; height: 120px; position: relative; background: #3F3E42; border-radius: 3px; overflow: hidden; } .spaces-margins { position: absolute; left: 0; width: 100%; height: 100%; z-index: 10; background:#3F3E42; border-radius: 3px; overflow: hidden; } .spaces-paddings { width: 70%; left: 0; right: 0; margin:0 auto; height: 60%; top:50%; transform: translateY(-50%); background: #706E75; z-index: 15; position: absolute; border-radius: 3px; overflow: hidden; } .spaces-paddings::before, .spaces-margins::before { content: 'padding'; font-size: 9px; color: #fff; text-transform: uppercase; top: 3px; left: 5px; z-index: 1000; position: absolute; font-weight: 400; } .spaces-margins::before { content: "margin"; } .spaces-margin, .spaces-padding { position: absolute; cursor: ew-resize; display: flex; align-items: center; justify-content: center; } .styler .spaces-margin input, .styler .spaces-padding input { padding: 1px; font-size: 11px; display: block; z-index: 100; position: relative; line-height: 1; border-radius: 2px; width: 30px; height: auto; border:none; text-align: center; transition: 0.1s; } .styler .spaces-margin input::selection, .styler .spaces-padding input::selection { background: transparent; } .spaces-margin.left { left: 0; top: 0; width: 15%; background: #3F3E42; height: 100%; z-index: 15; } .spaces-margin.right { right: 0; top: 0; width: 15%; background: #3F3E42; height: 100%; z-index: 15; } .spaces-margin.top { right: 0; left: 0; top: 0; width: 100%; background: #3F3E42; height: 20%; cursor: n-resize; } .spaces-margin.bottom { right: 0; left: 0; bottom: 0; width: 100%; background: #3F3E42; height: 20%; cursor: n-resize; } .spaces-padding.left { left: 0; top: 0; width: 24%; background: #535157; height: 100%; z-index: 100; z-index: 15; } .spaces-padding.right { right: 0; top: 0; width: 24%; background: #535157; height: 100%; z-index: 100; z-index: 15; } .spaces-padding.top { right: 0; left: 0; top: 0; width: 100%; background: #535157; height: 31%; cursor: n-resize; } .spaces-padding.bottom { right: 0; left: 0; bottom: 0; width: 100%; background: #535157; height: 31%; cursor: n-resize; } .styler * { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } /* buttons */ .margin-buttons { display: flex; align-items: center; justify-content: space-between; grid-gap: 5px; margin-top: 5px; } .margin-buttons button { padding: 0; width: 20px; height: 20px; border-radius: 3px; color: var(--dh-brp10); background: var(--dh-brp01); display: flex; align-items: center; justify-content: center; font-size: 11px; } .margin-buttons .clear { display: flex; align-items: center; grid-gap: 5px; } .margin-buttons .clear button { color: var(--dh-danger10); background: var(--dh-danger01); } /* spacings popup in editor */ #editor-spacings {position: relative;} #editor-spacings > img { cursor: pointer; } #editor-spacings .popup-spacing { position: absolute; top: 50px; left: 0; width: 240px; padding: 5px; background: var(--dh-bgp00); box-shadow: 0 0 10px #1a1a1c; border-radius: 3px; visibility: hidden; opacity: 0; transition: 0.2s; } #editor-spacings.opened .popup-spacing { visibility: visible; opacity: 1; } .styler select.value_unit { background-image: none; padding: 0 2px!important; width: 37px; margin-left: 3px; cursor: pointer; } .styler .styler-select.textarea-styler { flex-direction: column; } .styler .styler-select.textarea-styler > * {width: 100%!important} .styler .styler-select.textarea-styler textarea { max-width: 100%; width: 100%; min-width: 100%; max-height: 250px; min-height: 60px; height: 80px; font-size: 12px; background: var(--dh-bc10); border-radius: 3px; padding: 8px; } .styler #tag_css_textarea { max-width: 100%; max-height: 250px; min-height: 80px; min-width: 100%; height: 130px; font-size: 12px; background: transparent; color: white; padding: 5px; border-radius: 4px; border:none; margin-top: 3px; outline: none!important; margin-bottom: 3px; overflow: auto; } .styler .custom-css-wrapper p {font-size: 12px;} .styler .custom-css-wrapper h5 { font-weight: 400; padding: 1px 1px; display: inline-block; border-radius: 2px; margin-bottom: 10px; color: var(--dh-ts10); } .styler #tag_css_textarea::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); border-radius: 10px; background-color: #616161; cursor: pointer; } .styler #tag_css_textarea::-webkit-scrollbar { width: 4px!important; height: 4px; background-color: #616161; cursor: pointer!important; } .styler #tag_css_textarea::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3); background-color: #ffffff; } ::-webkit-scrollbar { cursor:pointer; } .styler-dropdown.mw20 .form-main.custom-dropdown {min-width: 20px} .styler-dropdown.mw80 .form-main.custom-dropdown {min-width: 80px} .styler-dropdown.mw100 .form-main.custom-dropdown {min-width: 100px} .styler-dropdown.mw120 .form-main.custom-dropdown {min-width: 120px} .styler-dropdown.mw140 .form-main.custom-dropdown {min-width: 140px} .styler-dropdown.mw160 .form-main.custom-dropdown {min-width: 160px} .styler-dropdown.mw180 .form-main.custom-dropdown {min-width: 180px} .styler-dropdown.mw200 .form-main.custom-dropdown {min-width: 200px} .styler-dropdown.mw240 .form-main.custom-dropdown {min-width: 240px} .styler-dropdown.mw260 .form-main.custom-dropdown {min-width: 260px} .styler-dropdown.mw300 .form-main.custom-dropdown {min-width: 300px} .styler-dropdown:not(.withBorder) .form-main.custom-dropdown .opener { padding: 0!important; padding-right: 10px!important; justify-content: flex-start; } .styler-dropdown:not(.withBorder) .form-main.custom-dropdown .opener > img { right: 0!important; } .styler-dropdown.withBorder .form-main.custom-dropdown .opener { padding: 5px 9px!important; } .styler-dropdown.withBorder .form-main.custom-dropdown .opener > img { right: 7px!important; } .styler-icon-input { display: flex; align-items: center; justify-content: flex-start; grid-gap: 7px } .styler-icon-input icon { display: flex; align-items: center; } .styler-icon-input input { max-width: 31px; min-width: 31px; } .styler-dropdown.units .form-main.custom-dropdown .opener { padding: 2px!important; font-size: 11px!important; color:var(--dh-ts10); justify-content: flex-end; background: transparent; } .styler-dropdown.units .form-main.custom-dropdown .custom-options { background: #171717; border: 1px solid #2E2E30; box-sizing: border-box; box-shadow: 0px 0px 15px 4px rgb(0 0 0 / 20%); border-radius: 5px; padding:0; } .styler-dropdown.units .form-main.custom-dropdown .custom-options li { padding: 2px!important; text-align: center; font-size: 11px!important; line-height: 1.5; list-style: none; border-bottom: 1px solid var(--dh-bc01); color:var(--dh-ts10); cursor: pointer; } .styler-dropdown.units .form-main.custom-dropdown .custom-options li:last-child {border-bottom:none;} .styler-dropdown.units .form-main.custom-dropdown .custom-options li:hover { color:white; } .styler-icon-input .input_unit { display: flex; align-items: center; border-bottom: 1px solid var(--dh-bc10); } .styler-dropdown selected { text-transform: capitalize; display: flex; align-items: center; justify-content: center; font-size: 12px; } .styler-dropdown.units selected {text-transform: lowercase;} #styler-css-dropdowns .styler-dropdown:not(.units) { border-bottom: 1px solid var(--dh-bc10); padding: 2px 0; } .styler-dropdown.icons-dropdown .form-main.custom-dropdown .custom-options { width: 24px!important; top: 22px!important; left: -5px!important; } .styler-dropdown.icons-dropdown .form-main.custom-dropdown .custom-options li { padding: 5px!important; display: flex; align-items: center; justify-content: center; } .styler-dropdown.icons-dropdown .form-main.custom-dropdown .custom-options li img { width: 100%; object-fit: contain; } .styler-dropdown.icons-dropdown .form-main.custom-dropdown .opener {padding-right: 0!important} .styler-dropdown.icons-dropdown .form-main.custom-dropdown .opener > img { display: none; } .styler-dropdown.icons-dropdown .form-main.custom-dropdown .custom-options li:hover { background: var(--dh-ts03); } .styler-dropdown.icons-dropdown img {width: 14px; min-width: 14px;} .invert_icon_color img { filter: invert(1); } .styler-color-field { display: flex; align-items: center; grid-gap: 7px; height: 28px; background: var(--dh-bgs10); border-radius: 5px; padding: 0 2px 0 0; } .styler-color-field input { border-bottom: 1px solid var(--dh-bc10); color:white; font-size: 12px; } #styler-css-state .toggle-custom-css { display: flex!important; align-items: center; justify-content: space-between; margin-top: 15px; font-size: 11px; } #styler-css-state .toggle-custom-css label { display: flex; align-items: center; grid-gap: 4px; } #global .form-main.custom-dropdown .opener label {min-width: auto!important; max-width: auto!important; width: auto!important} #global .form-main.custom-dropdown .opener {background: transparent!important;} #styler-css-state input::placeholder, #styler-css-state textarea::placeholder { color: var(--dh-ts10); } #global #styler-css-state .form-main .switch.hover { background: transparent linear-gradient(90deg, #7510FF 0%, #B537FF 100%) 0% 0% no-repeat padding-box; } #global #styler-css-state .form-main .switch .toggle {background: var(--dh-tp10);} #global #styler-css-state .form-main .switch {background: var(--dh-bc10)} .styler-dropdown.hasResetButton { position:relative; } .styler-dropdown.hasResetButton .reset { padding: 0; width: 28px; height: 28px; background: #242426; border-radius: 5px; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; bottom: 0; z-index: 15; } .styler-dropdown.hasResetButton .custom-dropdown { width: calc(100% - 32px); } #styler-css-state > h2 { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; font-size: 11px; font-weight: 400; background: var(--dh-bgs10); font-size: 13px; color: white; font-weight: 500; } #styler-css-state.hidden { display: none; } #styler-css-state { position:relative; z-index: 2000; border-bottom:1px solid rgba(43, 43, 46, 1); } .styler #styler-css-state .styler-flex-field > p {font-weight: 600} .styler *.dimmed {position: relative} .styler *.dimmed::after { content: ""; position: absolute; z-index: 3000; left:0; top:0; width:100%; height:100%; background: rgba(0,0,0,0.5); pointer-events: none; } .styler .zindex4000 {z-index:4000!important;} .styler .styler-css-dropdown.dimmed { border-bottom: 1px solid rgb(8 8 8); } .styler #styler-dropdowns { background: var(--dh-bgp01); height: calc(100vh - 228px); overflow: auto; overflow-x:hidden; } .styler #styles-light-popup { position: absolute; left: 0; top: 44px; background: var(--dh-bgp00); z-index: 4324324; width: 100%; height: calc(100vh - 78px); } .styler #styles-light-popup #styler-dropdowns { height: calc(100vh - 146px); } .styler #styles-light-popup.hidden {display:none;} .styler #styler-dropdowns.hidden {display:none;} .styler #styler-settings { background: var(--dh-bgp01); height: calc(100vh - 118px); overflow: auto; overflow-x:hidden; } .styler .styler-css-dropdown { border-bottom: 1px solid rgba(31, 31, 33, 1); position: relative; } .styler .styler-css-dropdown .opener { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; font-size: 12px; font-weight: 400; } .styler .styler-css-dropdown .opener.A-styler-html-dropdown-toggle { cursor: pointer; } .styler .styler-css-dropdown.opened .opener { padding-bottom:5px; } .styler .styler-css-dropdown .opener .flex > img { transform:rotate(45deg); } .styler .styler-css-dropdown.opened .opener .flex > img { transform:rotate(0deg); } .styler .styler-css-dropdown .opener h2 { font-size: 12px; color: white; font-weight: 500; display: flex; align-items: center; } .styler .styler-css-dropdown.childsEdited .opener h2::after { background: #925BFF; content: ""; width: 4px; height: 4px; border-radius: 100%; margin-left: 5px; } .styler .styler-css-dropdown.childsInherited .opener h2::before { background: #FF9B73; content: ""; width: 4px; height: 4px; border-radius: 100%; margin-left: 5px; order:3; } .styler .styler-css-dropdown .edit-items{ display: none; padding: 15px; } styler .styler-css-dropdown .edit-items.hidden {display:none!important;} .styler .styler-css-dropdown .edit-items .edit-items {padding: 0;} .styler .styler-css-dropdown.opened .edit-items { display: grid!important; grid-template-columns: repeat(12,1fr); grid-gap: 7px; border-radius: 5px; } .styler .styler-css-dropdown.opened .edit-items.hidden {display:none!important;} .styler .styler-css-dropdown.opened .g12 {grid-column: span 12;} .styler .styler-css-dropdown.opened .g10 {grid-column: span 10;} .styler .styler-css-dropdown.opened .g9 {grid-column: span 9;} .styler .styler-css-dropdown.opened .g8 {grid-column: span 8;} .styler .styler-css-dropdown.opened .g7 {grid-column: span 7;} .styler .styler-css-dropdown.opened .g6 {grid-column: span 6;} .styler .styler-css-dropdown.opened .g5 {grid-column: span 5;} .styler .styler-css-dropdown.opened .g4 {grid-column: span 4;} .styler .styler-css-dropdown.opened .g3 {grid-column: span 3;} .styler .styler-css-dropdown.opened .g2 {grid-column: span 2;} .styler .styler-css-dropdown .edit-items h2 { font-size: 13px; margin-bottom: 10px; margin-top: 15px; } .styler .styler-css-dropdown .edit-items h2:first-child {margin-top: 0;} .styler .styler-css-dropdown.opened .opener > i { transform: rotate(-45deg); } .styler .styler-flex-field { display: flex; align-items: center; justify-content: space-between; grid-gap: 8px; } .styler .styler-flex-field > div {flex:1} .styler .styler-flex-field label { font-size:12px; } .styler .styler-flex-field:last-child {margin-bottom: 0;} .styler .styler-flex-field.value_inherited {position: relative;} .styler .styler-flex-field.value_inherited > p::after { content: 'inherited'; font-size: 10px; z-index: 4324324; margin-left: 5px; background: #438ce624; color: #438ce6; line-height: 1; padding: 1px 2px; border-radius: 3px; } .styler_icons_grid { display: flex; flex-wrap: wrap; justify-content: flex-end; background: var(--dh-bgs10); border-radius:5px; grid-gap:0!important; } .styler_icons_grid > div { flex:1; height: 28px; padding: 0px; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; padding: 0px; font-size: 11px; font-weight: 500; } .styler_icons_grid > div[edited] { background:#333336; } .styler_icons_grid > div[selected] { background: var(--dh-brp10); color: white!important; background: #525257; opacity: 1!important; } .styler_icons_grid > div { width: 100%; object-fit: contain; } .styler_icons_grid[css-property='background-position'] > div, .styler_icons_grid[css-property='object-position'] > div { width: 100%; object-fit: contain; opacity: 0.4; background: var(--dh-bgs02); border: 1px solid var(--dh-bgs04); } .styler_icons_grid > div > img { max-height: 19px; } .styler_icons_grid > div:hover {opacity: 1;} .styler_icons_grid > div:hover img {filter: brightness(3)} .styler_icons_grid > div[selected] img {filter: brightness(3)} .styler .css_state_tabs { width: 100%!important; } .styler .css_state_tabs ul{ display: flex; align-items: center; justify-content: space-between; border-radius: 3px; overflow: hidden; margin-bottom: 8px; } .styler .css_state_tabs li { flex: 1; list-style: none; padding: 5px; text-align: center; background: white; border-right: 1px solid var(--dh-bc10); font-size: 12px; cursor: pointer; transition: 0.2s; font-weight: 500; } .styler .css_state_tabs li:last-child {border-right: none} .styler .css_state_tabs li:hover {background: var(--dh-bgp07);} .styler .css_state_tabs li[selected] { background:var(--dh-brp10); color: white; } .styler .css_state_tabs > div { display: none; } .styler .css_state_tabs > div.active {display: block;} .styler .css_state_tabs > p { text-align: center; font-weight: 600; margin-bottom: 0; background: #438ce614; padding: 3px; border-radius: 5px; /* border-bottom: 1px solid var(--dh-bc01); */ font-size: 13px; color: #438ce6; margin-bottom: 5px; } .styler-tooltip .container { background: var(--dh-bgp00); padding: 10px; font-size: 12px; border-radius: 3px; box-shadow: 0 3px 7px #101010; color: var(--dh-ts10); } .styler .advanced-css-state { display: flex; grid-gap: 5px; justify-content: space-between; margin-top: 10px; align-items: flex-end; } .styler .advanced-css-state > div { flex: 1; border-bottom: 1px solid var(--dh-bc01); } .styler .advanced-css-state .select { flex: 1; flex: 1; border: 1px solid var(--dh-bc10)!important; padding: 3px 2px 3px 5px; border-radius: 4px; } .styler .advanced-css-state .child-select { display: flex; align-items: center; justify-content: space-between; grid-gap: 3px; } .styler .advanced-css-state .child-select p { font-size: 12px; color: silver; margin-top: 3px; } .styler .advanced-css-state .child-select input { font-size: 12px; font-weight: 500; } .styler .advanced-css-state label { display: flex!important; justify-content: space-between; align-items: center; margin-bottom: 3px; font-size: 12px; font-weight: 500; height: 22px; } .styler .advanced-css-state label button, .styler .custom-css-state button { color: white; width: auto; background: var(--dh-brp10); border-radius:5px; height: 26px; line-heght: 26px; font-size: 13px; font-weight: 500; border-radius: 5px; padding:0 10px; } .styler .advanced-css-state .A-styler-adv-css_state-select-child { padding: 0; min-width: 26px; height: 26px; object-fit: contain; padding:6px; border: 1px solid var(--dh-bc10); display: flex; align-items: center; justify-content: center; background: var(--dh-bc10); } .styler .advanced-css-state .A-styler-adv-css_state-select-child img { object-fit: contain; width: 100%; display: block; max-width: 12px; } .styler .tooltip-link { font-size: 12px; color: var(--dh-warning10); cursor: pointer; display: flex; align-items: center; justify-content: center; } .styler .custom-css-state { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; } .styler .custom-css-state button { height: 25px; margin-left: 10px; } .styler .custom-css-state input { color:white; background: var(--dh-bgp10); height: 28px; line-height: 28px; padding: 0 7px 0 10px; border-radius: 5px; color:white; } .styler .styler-nothing-selected { padding: 50px 10px; font-size: 13px; text-align: center; height: calc(100vh - 34px); } .styler .styler-nothing-selected p { margin-top: 15px; color: var(--dh-ts10); font-size:12px; } .styler .triple-grid-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 5px; } .styler .triple-grid-fields .styler-flex-field { display: block; margin-bottom: 0; } .styler .triple-grid-fields .styler-flex-field > div {width: 100%} .styler .triple-grid-fields .styler-flex-field > p {width: 100%} .styler .triple-grid-fields .styler-flex-field input { padding: 0 1px; } .styler .styler-two-columns { display: flex; justify-content: space-between; grid-gap: 14px; margin-bottom: 10px; } .styler .styler-two-columns > div {flex:1;} .styler .styler-two-columns .styler-flex-field > p { font-size: 11px; width: 34%; } .styler .layout-flex, .styler .layout-grid { display: none; } .styler .layout-flex-selected .layout-flex, .styler .layout-grid-selected .layout-grid { display: flex; flex-direction: column; grid-gap: 8px; } .styler .background-pos { display: flex; align-items: center; justify-content: space-between; } .styler .background-pos label { font-size: 11px; color: var(--dh-ts10); max-width: 55px; line-height: 1.1; } .styler .background-pos .styler_icons_grid { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 80px; grid-gap: 4px; } .layout-flex div[value] > img, .layout-grid div[value] > img {filter: invert(1);} .styler .border-switcher { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2px; width: 66px; max-width: 66px; max-height: 66px; } .styler .border-switcher span { width: 20px; height: 20px; } .styler .border-items-flex { display: flex!important; align-items: center; justify-content: space-between; grid-gap: 15px; } .styler .border-items-flex .styler-flex-field > p {width: 20%;} .styler .border-items-flex .styler-flex-field > div {width: 80%;} .styler .border-items-flex > div {flex: 1} .styler .border-switcher span[for] { border:1px solid var(--dh-bc01); border-radius: 2px; cursor: pointer; background: var(--dh-bgs01); } .styler .border-switcher span[for="border-all"] {border:3px solid var(--dh-bgs03);} .styler .border-switcher span[for="border-top"] {border-top: 3px solid var(--dh-bgs03)} .styler .border-switcher span[for="border-left"] {border-left: 3px solid var(--dh-bgs03)} .styler .border-switcher span[for="border-right"] {border-right: 3px solid var(--dh-bgs03)} .styler .border-switcher span[for="border-bottom"] {border-bottom: 3px solid var(--dh-bgs03)} .styler .border-switcher span[selected] {background: var(--dh-brp10);} .styler_icons_grid small { font-weight: 500; font-size: 12px; } .styler .posrelative {position: relative;} ::-webkit-scrollbar { cursor:pointer; } #global #styler-dropdowns .form-main.custom-dropdown .custom-options { top: 24px; background: var(--dh-bc10); } .styler .label_inline { display: flex; align-items: center; justify-content: space-between; grid-gap: 13px; } .styler .label_inline label { font-size: 11px; color: white; max-width: 55px; line-height: 1.1; width: 50px; display:flex; align-items:center; } .styler .label_inline label > div {margin-left:5px;} .styler .g6 .label_inline label {max-width: 35px} .styler .label_inline .A-styler-input-change { display: flex; justify-content: space-between; border-bottom: 1px solid var(--dh-bc10); flex:1; } .styler .label_inline > div { flex:1; grid-gap: 5px; } .styler .custom-dropdown .select-opener, .styler_icons_grid { border: 1px solid #2E2E30; border-radius: 7px; } .styler-background-image img { width: 100%; height: 120px; object-fit: contain; background: var(--dh-bc05); border-radius: 3px; } .styler-background-image { position: relative; } .styler-background-image button { position: absolute; top: 5px; right: 5px; font-size: 12px; background: var(--dh-bc04); background: transparent linear-gradient(90deg, #7510FF 0%, #B537FF 100%) 0% 0% no-repeat padding-box; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding-right: 4px; } #custom-states.visible { display: block; } .styler .A-clear-current-tab-styles { padding: 0; position: absolute; right: 28px; color: var(--dh-ts10); cursor: pointer; transition: 0.2s; } .styler .A-clear-current-tab-styles:hover { color: var(--dh-tp10); } .styler .content_icons .icons_grid { display: grid; grid-template-columns: repeat(10,1fr); max-height: calc(6*24px); overflow: auto; } /* width */ .styler .content_icons .icons_grid::-webkit-scrollbar { width: 2px; } /* Track */ .styler .content_icons .icons_grid::-webkit-scrollbar-track { background: var(--dh-bc07); } /* Handle */ .styler .content_icons .icons_grid::-webkit-scrollbar-thumb { background: var(--dh-bc10); } .styler .content_icons .icons_grid i { text-align: center; cursor: pointer; color: var(--dh-ts10); font-size: 13px; width: 100%; height: 24px; display: flex; align-items: center; justify-content: center; align-items: center; border-right: 1px solid var(--dh-bc05); border-bottom: 1px solid var(--dh-bc05); cursor: pointer; transition: 0.2s; } .styler .content_icons .icons_grid i:hover {color: var(--dh-tp10);} .styler .content_icons .icons_grid i:nth-child(-n+10) { border-top: 1px solid var(--dh-bc05); } .styler .content_icons .icons_grid i:nth-child(10n + 1) { border-left: 1px solid var(--dh-bc05); } .styler .content_icons .icons_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; } .styler .content_icons .icons_header h4 { font-size: 13px; font-weight: 400; color: var(--dh-ts10); } .styler .content_icons .icons_header input { border-bottom: 1px solid var(--dh-bc05); max-width: 120px; padding: 2px 20px 2px 0; font-size: 13px; } .styler .content_icons .icons-search {position: relative;} .styler .content_icons .icons-search i { position: absolute; right: 3px; top: 7px; font-size: 12px; color: var(--dh-bc10); } #global .styler .form-main.styler-checkbox [type="checkbox"]:not(:checked) + label:before, #global .styler .form-main.styler-checkbox [type="checkbox"]:checked + label:before { width: 18px; height: 18px; border:none; top: 1px; } #global .styler .form-main.styler-checkbox [type="checkbox"]:checked + label:before { background: transparent linear-gradient(90deg, #7510FF 0%, #B537FF 100%) 0% 0% no-repeat padding-box; } #global .styler .form-main.styler-checkbox label {margin-bottom: 0;} #global .styler .form-main.styler-checkbox label > p { font-size: 11px; color: var(--dh-ts10); } #global .styler .form-main.styler-checkbox [type="checkbox"]:not(:checked) + label, #global .styler .form-main.styler-checkbox [type="checkbox"]:checked + label { padding-left: 25px } #global .styler .form-main.styler-checkbox [type="checkbox"]:not(:checked) + label:after, #global .styler .form-main.styler-checkbox [type="checkbox"]:checked + label:after { top: 8px; left: 5px; font-size: 11px; color: var(--dh-tp10) } .flex-tooltip { display: flex; align-items: center; grid-gap: 10px; } /* REDISGNED */ .styler label { font-size:11px; color:white; text-transform: capitalize; } .styler .styler_input input { color:white; font-size: 12px; } .styler .styler_input input::placeholder { color: var(--dh-ts04); } .styler .styler_input > div { display: flex; justify-content: space-between; font-size: 12px; background:rgb(36 36 38); border-radius:5px; height:28px; align-items:center; padding:0 4px; z-index: 3000; border: 1px solid #2E2E30; } .styler .forms[pid="86"].textarea textarea { border-bottom:1px solid var(--dh-bc10); background:var(--dh-bgs10); color:white; padding: 5px 10px; resize: vertical; border-radius: 3px;; min-height: 90px; } .styler .styler_input.label_left { display: flex; align-items:center; } .styler .styler_input.label_left label { margin-right: 10px; } .styler .g12 .styler_input.label_left label {width:90px} .styler .label_under { display:flex; flex-direction: column; } .styler .label_under label * {pointer-events: none;} .styler .label_under label { order:2; color:var(--dh-ts10); width:100%; } .styler .label_under label icon { display: block; text-align: center; width: 100%; padding-top: 5px; } .styler .custom-dropdown .select-opener { display:flex; justify-content:space-between; background: var(--dh-bgs10); height:28px; line-height: 28px; padding:0 7px 0 10px; border-radius:5px; cursor:pointer; } .styler .custom-dropdown .select-opener > img { width:7px; opacity:0.3 } .styler .styler-select { background: #242426; padding: 0; border: 1px solid var(--dh-bc10); border-radius:5px; max-height: 40vh; box-shadow: 0 0 15px #00000082; overflow: auto; } .styler .styler-select li { padding: 4px!important; text-align: left; font-size: 12px!important; line-height: 1.5; list-style: none; border-bottom: 1px solid var(--dh-bc10); color: var(--dh-ts10); cursor: pointer; } .styler .styler-select li:hover {color:white;} .styler .styler-select li[data-value]::after { content: "(" attr(data-value) ")"; opacity: 0.5; } .styler .styler-select > ul > p { color: white!important; background: var(--dh-bgp10)!important; padding: 7px 10px!important; height: 100%!important; font-size: 12px!important; } .styler .tooltip-popup { background: #242426; padding: 5px; border: 1px solid var(--dh-bc10); border-radius: 5px; font-size:13px; color:white; } .styler .icon-more-options { display: flex; align-items: center; justify-content: center; height: 30px; background: var(--dh-bgs10); border-radius: 5px; cursor: pointer; border: 1px solid rgb(46 46 48); } .styler .icon-more-options:hover > img {filter: brightness(3)} .styler .dropdown-hidden { z-index: 3020; width: 100%; } .styler .dropdown-hidden .edit-items { background: var(--dh-bgp10); padding: 15px!important; border: 1px solid var(--dh-bc04); box-shadow: 0 0 8px #00000085; border-radius:5px; } .styler .custom-css-wrapper #css-monacoeditor { height: 250px; } .styler .monaco-hover , .styler .monaco-hover * { color: white!important; } .styler .monaco-editor .monaco-hover .hover-row .actions { display: none; } .custom-css-wrapper #css-monacoeditor .mtk22 { color: #75ccff; } .custom-css-wrapper #css-monacoeditor .mtk5, .custom-css-wrapper #css-monacoeditor .mtk7 { color: #ff9265; } .custom-css-wrapper .view-lines { font-size: 12px!important; } .custom-css-wrapper .monaco-editor .margin-view-overlays .line-numbers { width: 22px!important; } .custom-css-wrapper .margin-view-overlays { width: 32px!important; } .custom-css-wrapper .monaco-editor .margin-view-overlays .current-line, .custom-css-wrapper .monaco-editor .view-overlays .current-line, .monaco-editor .margin { width: 32px!important; } .custom-css-wrapper .monaco-scrollable-element { left: 32px!important; width: calc(100% - 32px)!important; } .styler ::-webkit-scrollbar { width: 5px; height:5px; border-radius: 5px; } .styler ::-webkit-scrollbar-track { background: #1a1a1c; } .styler ::-webkit-scrollbar-thumb { background: #525256; cursor:pointer; } .styler ::-webkit-scrollbar-thumb:hover { background: #1A1A1C; } #selectors-selected { display: flex; align-items: center; justify-content: space-between; padding: 7px 15px; font-size: 11px; font-weight: 400; font-size: 12px; color: white; font-weight: 500; border-bottom: 1px solid var(--dh-bc10); background:#24242654; min-height: 44px; position: relative; z-index: 600000; } #selectors-selected .classes-input.disabled { opacity: 0.4; pointer-events: none; } #selectors-selected p { display:flex; align-items: center; text-transform: capitalize; width:100% } #selectors-selected p selected { display:flex; align-items:center; flex:1; } #selectors-selected p selected tagName { display: flex; text-transform: none; align-items: center; gap: 6px; overflow: hidden; max-width: 118px; line-height: 1; max-height: 24px; word-break: break-all; overflow: hidden; font-size: 11px; } #selectors-selected p selected tagid { color:var(--dh-ts10); text-transform:lowercase; margin-left:5px; display:none; } #selectors-selected p span { font-size: 11px; margin-right:5px; } #selectors-selected search { min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #242426; border-radius: 5px; cursor: pointer; position: absolute; right: 15px; } #selectors-selected search i { color:var(--dh-ts10); } #selectors-selected search.active i { color: white; } #selectors-selected search.A-styler-custom-css-open { right: 48px; } #custom_css_tab .hdr { display: flex; align-items: center; padding: 7px 10px; font-size: 11px; font-weight: 400; font-size: 12px; color: white; font-weight: 500; border-bottom: 1px solid var(--dh-bc10); } #custom-states > label { display:flex; align-items: center; } #custom-states > label div {margin-left: 5px;} input::-webkit-calendar-picker-indicator { opacity: 0!important; } .styler .custom-css-current-state { position: absolute; right: 10px; top: 7px; font-size: 12px; color: var(--dh-ts10); } #builder .two-inputs-flex { display: flex; justify-content: space-between; gap: 25px; } #builder .two-inputs-flex > div {flex:1} .styler .disabled { opacity: 0.3!important; pointer-events: none!important; } .styler .styler-css-dropdown.opened .edit-items.link-tab { display:none!important; } .styler .styler-css-dropdown.opened .edit-items.link-tab.active { display:grid!important; } .styler #styler-search { border-bottom:1px solid var(--dh-bc10); position: absolute; z-index: 432432; background: #1a1a1c; width: 100%; align-items:center; justify-content:space-between; display:none; padding-right: 15px; width: 50%; right: 0; border-left: 1px solid #242426; } .styler #styler-search input { padding: 0 15px; font-size: 14px; color: white; height: 44px; } .styler #styler-search.open { display: flex; } .styler #relative-to { opacity: 0.5; height: auto; line-height: 1.2; padding: 5px 4px; min-height: 28px; height: auto; } .styler-small-button-purple { height: 20px; background: var(--dh-brp10); color: white; border-radius: 3px; font-size: 11px; line-height: 11px; margin-left: 10px; } .styler .styler-action-icon { margin-right: 5px; color: var(--dh-ts10); transition: 0.2s; cursor: pointer; } .styler .styler-action-icon:hover { color: white;; } .styler .css-property-label.inherited { color: #FF9B73 ; position: relative; } .styler .css-property-label.inherited img { filter: invert(101%) sepia(313%) saturate(500%) hue-rotate( 324deg) brightness(100%) contrast(119%); } .styler .css-property-label.inherited::after { content: attr(data-content); position: absolute; top: -20px; left: 0; visibility: hidden; opacity: 0; pointer-events: none; width: max-content; z-index: 100000; padding: 0 8px; font-size: 12px; border-radius: 3px; box-shadow: 0 0 3px #181717; color: #f8906a; background: #3a1b0c; height: 20px; display: flex; align-items: center; justify-content: center; } .styler .css-property-label.inherited:hover::after { visibility: visible; opacity: 1; } .styler .css-property-label.inherited.user-edited:hover::after {opacity: 0; visibility: hidden;} .styler .css-property-label.user-edited { color: var(--dh-brp10); position: relative; font-weight: 500; } .styler .css-property-label.user-edited img { filter: invert(0%) sepia(97%) saturate(3500%) hue-rotate( 590deg) brightness(119%) contrast(158%); } .builder-label-reset-css button { color: white; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; background: var(--dh-bgp10); border: 1px solid #2E2E30; height: 22px; width: 100%; justify-content: flex-start; border-radius: 5px; } .builder-label-reset-css button i { font-size: 13px; } .styler span.pink-around , .styler span.bg-around { padding: 0 4px; background: #FF5893; min-height: 20px; width: 42px; line-height: 20px; font-size: 12px; color: white; text-transform: lowercase; border-radius: 5px; text-align: center; display: inline-flex; justify-content: center; font-size: 11px; min-width: 36px; line-height: 1; text-align: left; line-height: 20px; } .styler span.inactive { opacity: 0.6; } .styler span.bg-around { width: max-content; padding: 0 7px; margin-left:5px; font-weight: 400; } .styler span.purple-around { padding: 4px; background: var(--dh-brp10); min-height: 20px; min-width: 36px; line-height: 20px; font-size: 12px; color: white; text-transform: lowercase; border-radius: 5px; text-align: center; display: inline-flex; justify-content: center; font-size: 11px; min-width: 36px; line-height: 1; text-align: left;; } .styler span.blue-around { padding: 4px; background: rgba(60, 114, 255, 1); min-height: 20px; width: 36px; min-width: 36px; line-height: 20px; font-size: 12px; color: white; text-transform: lowercase; border-radius: 5px; text-align: center; display: inline-flex; justify-content: center; font-size: 11px; line-height: 1; text-align: left;; } .A-styler-selectors-class-remove-from_tag:hover {color: white!important;} .styler .classes-input input { min-width: 60px; max-width: 100%; color: white; flex: 1; font-size: 11px; background: #333336; margin: 5px; max-width: calc(100% - 10px); padding: 5px 8px; border-radius: 5px; } #selected_classes, #selected_state { color: white; padding: 4px; background: rgb(0 172 112); min-height: 20px; line-height: 20px; font-size: 12px; color: white; text-transform: lowercase; border-radius: 5px; text-align: center; margin-right: 7px; display: inline-flex; justify-content: center; display: inline-flex; margin-left: 3px; overflow:hidden; line-height: 1; } #selected_state { margin: 0; } .A-styler-selectors-loop-select { z-index: 1000; margin-left: 10px; cursor: pointer; position: absolute; right: 82px; top: 50%; transform: translateY(-50%); } .A-styler-selectors-loop-select loop{ display: flex; align-items: center; gap: 5px; background: var(--dh-bgs10); height: 30px; border-radius: 5px; padding: 3px 7px; } .A-styler-selectors-loop-select .loop-dropdown-select { position: absolute; left: 0; background: orange; background: #242426; padding: 0; border: 1px solid var(--dh-bc10); border-radius: 5px; max-height: 40vh; overflow: auto; width: 35px; text-align: center; box-shadow: 0 0 15px #000000a6; top: 33px; height: max-content; } .A-styler-selectors-loop-select .loop-dropdown-select li { list-style: none; padding: 4px; cursor: pointer; } .A-styler-selectors-loop-select .loop-dropdown-select li:hover { background: #333336; } @media (max-width: 991.98px) { #builder[for='editor']::after { content:"Sorry, your window width is too small. Currently our editor is not usable on devices with resolution less than 992px."; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; width: 100%; background: #1a1a1a; padding: 20px; color: white; z-index: 99999999999; text-align: center; box-sizing: border-box; } #builder[for='editor'] {overflow: hidden;} } .A-styler-tab-clear-styles { display: none; } .forms[pid="64"] { position: relative; } .forms[pid="64"].flex { display: flex; align-items: center; justify-content: space-between; max-width: 330px; } .forms[pid="64"] span { margin-right: 10px; font-size: 16px; } .forms[pid="64"] span:last-child {margin-left:10px; margin-right: 0;} .forms[pid="64"] .switch { display: inline-block; height: 30px; position: relative; width: 50px!important; } .forms[pid="64"] .switch input { display:none; } .forms[pid="64"] .slider { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .forms[pid="64"] .slider:before { background-color: var(--dh-bgp10); bottom: 3px; content: ""; height: 22px; left: 4px; position: absolute; transition: .4s; width: 22px; } .forms[pid="64"] input:checked + .slider { background-color: var(--dh-bgp10); } .forms[pid="64"] input:checked + .slider:before { transform: translateX(18px); background: white; } .forms[pid="64"] .slider.round { border-radius: 34px; border: 1px solid transparent; max-width: 46px; } .forms[pid="64"] .slider.round:before { border-radius: 50%; } #builder .forms[pid="64"] input:checked + .slider { background:rgb(36 36 38); } #builder .forms[pid="64"] .slider.round { background: rgb(36 36 38); } #builder .forms[pid="64"] .switch {height:28px; } #builder .forms[pid="64"] .slider:before { height:20px; width:20px; } #builder .forms[pid="64"] .slider:before { background:#ffffff1c; } #builder .forms[pid="64"] input:checked + .slider:before {background: white; transform:translateX(15px)} .styler icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* custom css popup */ .styler.custom-css-popup .styler-nothing-selected { height: auto; display: none; } .styler.custom-css-popup .close-circle { width: 18px; height: 18px; border-radius: 100%; background: #7D7D7D; cursor: pointer; transition: 0.15s; position: relative; } .styler.custom-css-popup .close-circle::before { content: "X"; color: white; font-size: 10px; position: absolute; top: 4px; left: 6px; line-height: 1; transform: scaleX(1.4); } .styler.custom-css-popup .close-circle:hover { background: var(--dh-bgp10); } .styler.custom-css-popup { border-radius: 5px; background:var(--dh-bgp10)!important; } .styler.custom-css-popup .head { width: 100%; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; background: #242426; border: 1px solid #2E2E30; border-radius: 5px 5px 0 0; } .styler.custom-css-popup .head p { color: white; font-size: 12px; font-weight: 600; } .styler.custom-css-popup #custom-states { background: #242426; border: 1px solid #2E2E30; padding: 6px 10px; } .styler .styler-content-icon { display: flex; justify-content: space-between; } .styler .styler-content-icon button { font-size: 12px; color: var(--dh-ts10); text-decoration: underline; } .styler .styler-content-icon i { font-size: 35px; } .styler .sub-dropdown { display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 13px; border-bottom: 1px solid var(--dh-bc10); padding-bottom: 10px; } .styler .sub-dropdown:empty {display: none;} .styler .sub-dropdown > *:not(.sub-dropdown-opener) { display: none; } .styler .sub-dropdown.opened > *:not(.sub-dropdown-opener) { display: block; } .styler .sub-dropdown.opened > .label_inline { display: flex; } .styler .sub-dropdown.opened .sub-dropdown-opener > i { transform: rotate(-45deg); } .styler .sub-dropdown-opener { display: flex; align-items: center; justify-content: space-between; font-size: 12px; cursor: pointer; } .styler .sub-dropdown-opener > p { display: flex; align-items: center; gap: 5px; } .styler .sub-dropdown-opener i { font-size: 14px; color: var(--dh-ts10); } .styler .sub-dropdown label { color: var(--dh-ts10); } .styler .method-filter-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 5px; } .dhselect-variable-wrap { display: flex; justify-content: space-between; align-items: flex-end; grid-column: span 12; } .dhselect-variable-wrap > div { display: flex; justify-content: flex-end; cursor: pointer; align-items: flex-end; } .dhselect-variable { display: flex; align-items: center; justify-content: center; background: var(--dh-brp10); border-radius: 3px; font-size: 12px; padding: 0 5px; color:white; } .styler .positions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .styler .positions-grid .label_inline label { width: auto; } .styler .positions-grid .label_inline { gap: 6px; } .styler .position-box { display: grid; grid-template-columns: 1fr 1fr 1fr; background: #242426; border: 0.7px solid #2E2E30; border-radius: 3.5px; margin-right: 3px;; } .styler .position-box > div { padding-bottom: 100%; width: 100%; position: relative; cursor: pointer; } .styler .position-box > div::before { content: ''; width: 10px; height: 10px; background: #7d7d7d4f; position: absolute; left: 0; right: 0; margin:0 auto; top: 50%; border-radius: 100%; transform: translateY(-50%); } .styler .position-box > div:hover::before { background: #925bff54; } .styler .position-box > div.active::before { background: #925BFF; } .styler .disabled-pos-box { pointer-events:none; opacity:0.4; } .styler .select-opener selected { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .styler #builder-state-selected { display: flex; } .A-styler-shortcuts-open { border-radius: 5px; color: var(--dh-ts10); font-size: 12px; padding: 3px; transition: 0.15s color, 0.15s background-color; align-items: center; display: flex; cursor: pointer; } .A-styler-shortcuts-open:hover { color: white; } .styler .light-loop { min-width: 28px; height: 30px; display: flex; align-items: center; justify-content: center; background: #242426; border-radius: 5px; cursor: pointer; position: absolute; right: 13px; text-align: center; } .styler .light-loop i { font-size: 11px; cursor: pointer; display: flex; height: 100%; align-items: center; padding: 5px; transition: 0.1s; border-radius: 5px; } .styler .light-loop i:hover { background: #77777738; } .styler .light-loop input { text-align: center; color: white; width: 100%; height: 100%; width: 22px; } .styler .light-loop > span { position: absolute; left: -5px; transform: translateX(-100%); font-size: 11px; color: var(--dh-ts10); } .styler .light-loop input[type='number'] { -moz-appearance:textfield; } .styler .light-loop input::-webkit-outer-spin-button, .styler .light-loop input::-webkit-inner-spin-button { -webkit-appearance: none; } .styler .page-var-slug { display: none; } .styler .page-var-slug.active { display: flex; } .styler .monaco-editor .suggest-widget .monaco-list, .styler .monaco-editor .suggest-widget .monaco-list * { color: white;; } .dh-dropdown-float { position: absolute; left: 0; width: 100%; top: calc(100% + 10px); } .dh-dropdown-float::before { content: ""; width: 100%; height: 11px; position: absolute; left: 0; top: -10px; z-index: 5; } /* button */ .styler-button-field button { height: 30px; line-height: 30px; font-size: 12px; font-weight: 500; border-radius: 5px; background: var(--dh-brp10); color: white; width: 100%; display: flex; align-items: center; justify-content: center; } #builder .styler .navbar-editor { background: var(--dh-bgp01); height: 50px; width: 100%; position: fixed; top: -50px; left: 0; z-index: 1000; border-bottom: 1px solid var(--dh-bc10); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 12px; transition: 0.2s; } #builder .styler .navbar-editor.visible { top: 40px; background: var(--dh-bgp10); z-index: 100000000; } #builder.live .styler .navbar-editor.visible { top: -50px!important; } #builder .styler .navbar-editor .e-center { display: flex; align-items: center; justify-content: center; } #builder .styler .navbar-editor .edit-part { margin-right: 16px; padding-right: 16px; position: relative; display: flex; align-items: center; grid-gap: 16px; } #builder .styler .navbar-editor .edit-part::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: var(--dh-bc10); width: 1px; height: 15px; content: ''; } #builder .styler .navbar-editor .edit-part:last-child::after {display: none;} #builder .styler .navbar-editor .e-right { display: flex; align-items: center; justify-content: flex-end; grid-gap: 8px; } #builder .styler .navbar-editor .e-right button { font-size: 13px; display: flex; align-items: center; grid-gap: 7px; padding: 5px 20px; height: 30px; font-weight: 400; } #builder .applications-navbar { background: var(--dh-bgp05); box-shadow: var(--dh-sw01); } #builder .navbar-editor .n-right .sidebar-part { display: flex; align-items: center; justify-content: flex-end; width: 250px; grid-gap: 10px; } #builder .navbar-editor .n-right .sidebar-part button.bg-grbpbs { width: 90px; height: 30px; line-height: 1; border-radius: 3px; } #builder .navbar-editor .n-right .sidebar-part .clear-styles-advanced {display: none} #builder .left-sidebar-tabs { border-right: 1px solid var(--dh-bc05); } #builder .left-sidebar-tabs li { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #A5A5A5; transition: 0.2s; list-style: none; cursor: pointer; } #builder .left-sidebar-tabs li:hover { color: white; } #builder .left-sidebar-tabs li.active { color: white; background: var(--dh-bc10); } #builder .left-after-tabs {margin-left: 15px;} #builder .left-after-tabs .switch-sections { display: flex; align-items: center; color: var(--dh-ts10); border-right: 1px solid var(--dh-bc05); padding-right: 10px; } #builder .left-after-tabs .switch-sections p { line-height: 1; margin-right: 10px; } #builder .left-after-tabs .switch-sections button { height: 40px; width: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--dh-ts10); } #builder .left-after-tabs .switch-sections button.active { color: var(--dh-tp10); } .sidebar-part .auto-save { position: relative; display: flex; align-items: center; grid-gap: 3px; } #global .auto-save .form-main .switch { transform: scale(0.7); } #global .auto-save .form-main .switch.hover { background: transparent linear-gradient(90deg, #7510FF 0%, #B537FF 100%) 0% 0% no-repeat padding-box; } .sidebar-part .auto-save span { position: relative; font-size: 18px; display: flex; align-items: center; margin-right: 5px; color: var(--dh-ts10); cursor: help; } #global .auto-save .form-main .switch .toggle {background: var(--dh-tp10)} #global .auto-save i { font-size: 17px; color: var(--dh-ts10); cursor: help; } #global .auto-save .tooltip-link {display: flex; align-items: center;} .sidebar-pages .search input { padding: 8px; color: white; } .sidebar-pages .search { border-bottom: 1px solid var(--dh-bc10); background: var(--dh-bc10); border-top: 1px solid rgb(54 54 55); } #tab-pages .builder-pages { overflow: auto; max-height: calc(100vh - 205px); } #tab-pages .builder-pages::-webkit-scrollbar-track { background-color: var(--dh-bgp10); } #tab-pages .builder-pages::-webkit-scrollbar { width: 5px; height:5px; background-color: var(--dh-bgp10); } #tab-pages .builder-pages::-webkit-scrollbar-thumb { background-color: var(--dh-bgp10); } #tab-pages .builder-pages:hover::-webkit-scrollbar-thumb { background-color: #925bff; } #tab-pages .builder-pages > ul > li {position: relative} #tab-pages .builder-pages > ul > li::before { content: ''; width: 100%; background: var(--dh-bc10); position: absolute; left: 0; top: -1px; height: 1px; } #tab-pages .builder-pages li > * { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; gap: 5px; border-bottom: 1px solid var(--dh-bc10); } #tab-pages .builder-pages li ul > * { border-left: 1px solid var(--dh-bc10); } #tab-pages .builder-pages li > * span pageName { color: var(--dh-ts10); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; font-size: 13px; margin-bottom: 2px; } #tab-pages .builder-pages li div:hover span pageName {color: white} #tab-pages route { font-size: 10px; background: var(--dh-ts02); padding: 0px 5px; border-radius: 5px; color: var(--dh-ts10); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; width: max-content; } #tab-pages .builder-pages li { list-style: none; cursor: pointer; transition: 0.15s all; border-right: 0px solid var(--dh-brp10); } #tab-pages .builder-pages li:hover, #tab-pages .builder-pages li.active { border-right: 5px solid var(--dh-brp10); } .sidebar-pages .current-page { background: var(--dh-brp10); display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; } #tab-pages .current-page route {color: white; background: #a87cff} .sidebar-pages .current-page > span { display: flex; flex-direction: column; align-items: flex-start; } #tab-pages .builder-pages li > * .actions, .sidebar-pages .current-page .actions { opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 6px; font-size: 12px; } #tab-pages .builder-pages li > * { color: var(--dh-ts10); } .sidebar-pages .current-page .actions a { color: white; } #tab-pages .builder-pages li div:hover > .actions, .sidebar-pages .current-page:hover > .actions { opacity: 1; visibility: visible; } #tab-pages .builder-pages li .actions a { padding: 0!important; border: none!important; } #tab-pages .builder-pages li .actions div:hover , .sidebar-pages .current-page .actions a:hover { color: white!important; } #tab-pages .builder-pages li ul { padding-left: 10px; } /* NEW PAGES */ .tab-sidebar #pages .page-item { position: relative; padding: 6px 10px; font-size: 14px; cursor: pointer; } .tab-sidebar #pages .page-item.active { background: #242426; } .tab-sidebar #pages .page-item.active img {filter: brightness(3);} .tab-sidebar #pages .page-item .actions { position: absolute; right: 0; top: 50px; background: #1F1F21; border: 1px solid #333336; box-sizing: border-box; box-shadow: 0px 0px 10px rgb(0 0 0 / 50%); border-radius: 8px; padding: 13px; min-width: 110px; font-size: 14px; display: none; } .tab-sidebar #pages .page-item span { display: flex; align-items: center; font-size: 14px; color: var(--dh-ts10); gap: 8px; } .tab-sidebar #pages .page-item:hover span { color: white; } .tab-sidebar #pages .page-item.active span { color: white; } .styler .range-slider { width: 100%; display: flex; align-items: center; } .styler .range-slider__range { border: none; -webkit-appearance: none; width: calc(100% - (43px)); height: 2px; border-radius: 5px; background: var(--dh-bc10); outline: none; padding: 0; margin: 0; } .styler .range-slider__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border-radius: 100%; background: var(--dh-brp10); cursor: pointer; -webkit-transition: background .15s ease-in-out; transition: background .15s ease-in-out; } .styler .range-slider__range::-webkit-slider-thumb:hover { background: var(--dh-brp10); } .styler .range-slider__range:active::-webkit-slider-thumb { background: var(--dh-brp10); } .styler.range-slider__range::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--dh-brp10); cursor: pointer; -moz-transition: background .15s ease-in-out; transition: background .15s ease-in-out; } .styler .range-slider__range::-moz-range-thumb:hover { background: var(--dh-brp10); } .styler .range-slider__range:active::-moz-range-thumb { background: var(--dh-brp10); } .styler .range-slider__range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--dh-brp10); } .styler .range-slider__value { display: inline-block; position: relative; width: 40px; margin-right: 8px; } .styler .range-slider__value:after { position: absolute; top: 8px; left: -7px; width: 0; height: 0; border-top: 7px solid transparent; border-right: 7px solid #2c3e50; border-bottom: 7px solid transparent; content: ''; } .styler ::-moz-range-track { background: var(--dh-brp10); border: 0; } .styler input::-moz-focus-inner, .styler input::-moz-focus-outer { border: 0; } .styler .range-input { display: flex; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--dh-bc10); margin-right: 15px; } .styler .range-input input { max-width: 50px; }@media (max-width: 900px) { #builder .area[for="editor"]::after { content:"Sorry, your window width is too small. Currently our editor is not usable on devices with resolution less than 900px."; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; width: 100%; background: #1a1a1a; padding: 20px; color: white; z-index: 9999999; text-align: center; box-sizing: border-box; } }#builder[for="editor"][breakpoint="1920"] .hide-1920, #builder[for="editor"][breakpoint="1440"] .hide-1440, #builder[for="editor"][breakpoint="1200"] .hide-1200, #builder[for="editor"][breakpoint="991"] .hide-991, #builder[for="editor"][breakpoint="767"] .hide-767, #builder[for="editor"][breakpoint="480"] .hide-480 { opacity: 0.35!important; filter: blur(2px)!important; } @media (min-width: 1400.98px) { #builder[for="live"] .hide-1920 { display: none!important; } } @media (min-width: 1200.98px) and (max-width: 1400px) { #builder[for="live"] .hide-1440 { display: none!important; } } @media (min-width: 991.98px) and (max-width: 1200px) { #builder[for="live"] .hide-1200 { display: none!important; } } @media (min-width: 767.98px) and (max-width: 991px) { #builder[for="live"] .hide-991 { display: none!important; } } @media (min-width: 480.98px) and (max-width: 767px) { #builder[for="live"] .hide-767 { display: none!important; } } @media (max-width: 480px) { #builder[for="live"] .hide-480 { display: none!important; } }.popup .shortcuts-wrap { padding: 20px; display: grid; grid-template-columns: 1fr; max-height: 70vh; overflow: auto; } .popup .shortcuts-wrap * { color:white; } .popup .shortcuts-category { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #2E2E30; } .popup kbd { padding: 4px 6px; background: #242426; font-size: 11px; border: 1px solid rgb(55 55 56); border-radius: 5px; height: 25px; line-height: 1; display: flex; align-items: center; justify-content: center; } .popup .shortcuts-grid { display: grid; grid-template-columns: 1fr; gap: 6px; } .popup .shortcut-keys { display: flex; gap: 6px; } .popup .shortcuts-grid > div p { color: var(--dh-ts10); font-size: 11px; } .popup .shortcuts-category h3 { margin-bottom: 10px; font-weight: 500; font-size: 14px; } .popup .shortcuts-grid > div { display: flex; align-items: center; gap: 10px; } #builder .not-connected-fields .connected {display: none} #builder .not-connected-fields .not_connected {display: flex} #builder .connected-fields .connected {display: flex} #builder .connected-fields .not_connected {display: none} .styler .connected.label_inline {grid-gap:0} .styler .connected.label_inline label {width:14px; margin-right: 5px;} #builder .connected-fields .connected {justify-content: flex-start} #builder .connect-fields { display: flex; justify-content: flex-end; align-items: center; background:rgba(36, 36, 38, 1); border-radius:5px; padding:2px; } #builder .connect-fields button { display:flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 5px; } #builder .connect-fields-spacing button { padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 3px; } #builder .connect-fields-spacing button.connected { background: #525257; } #builder .connect-fields-spacing button:hover img, #builder .connect-fields-spacing button.connected img { filter: brightness(3); } #builder .spacing-inputs .top { display: flex; align-items: center; justify-content: space-between; } #builder .spacing-inputs .top > div { display:flex; justify-content:flex-end; align-items:center; } #builder .spacing-inputs .top > div > div { margin-left:10px; display: flex; align-items: center; } #builder .spacing-inputs .top > div > button { padding: 0;; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #builder .spacing-inputs .top > div > button:hover img {filter:brightness(3)} #builder .not-connected-fields .connect-fields button:nth-child(2) {background: rgba(51, 51, 54, 1)} #builder .not-connected-fields .connect-fields button:nth-child(2) img {filter: brightness(3);} #builder .connected-fields .connect-fields button:nth-child(1) {background: rgba(51, 51, 54, 1)} #builder .connected-fields .connect-fields button:nth-child(1) img {filter: brightness(3);} #builder .A-styler-spacing-setValue.connected .styler_input:nth-of-type(4), #builder .A-styler-spacing-setValue.connected .styler_input:nth-of-type(5) { opacity: 0.4; pointer-events: none; } #builder #area .tag.subediting { outline: 1px solid var(--dh-warning07); } #builder #area .tag.editing { /* outline: 1px solid var(--dh-brp10); */ } #builder #area .tag.hovering { outline: 1px solid var(--dh-brp10); cursor: pointer; } #builder #area .tag.editing .outline {display: none;} #builder #area .tag.editing[data-active] { /* outline: 1px solid var(--dh-success10)!important; */ } #builder.preview #area .tag.editing[data-active] { outline: unset!important; } #builder #area .tag.editing[data-active] .outline { display: block; } #builder #area .tag.loopHovering { outline: #39ff9f solid 1px; } #builder.selection .tag.p-selected { outline: 1px solid #4254d2!important; } #builder #layers-items .tag.p-selected > span { outline: 1px solid #4254d2!important; z-index: 100; position: relative; transition: 0s all!important; } #builder .tag.empty:not(h1,h2,h3,h4,h5,h6,p,span,b,strong,img,a,button) { min-height: 60px; width: 100%; outline: 1px solid rgb(156 156 156); padding-left: 30px; padding-right: 30px; } #builder #area .tag.editing:hover { /*outline: 2px solid var(--dh-brp10);*/ } #builder #area .tag.child-select-mode-disabled { cursor: default; } #builder #area .tag.child-select-mode-disabled:hover {outline: none;} #builder #area .tag.child-select-mode-parent { outline: 2px solid var(--dh-brp10); } #builder #area .tag.child-select-mode-activate.hoveringChild { pointer-events: default; outline: 1px solid var(--dh-success10); cursor: pointer; } #builder #area .tag.editingChild { outline: 1px solid var(--dh-success10); } #builder #area .tag.childHighlight { outline: 1px solid #00c3c7; } #builder #area .tag.childSelected { outline: 1px solid #00c3c7; } #builder #area[for='builder'] .tag.subediting { outline: 1px solid var(--dh-warning07); } #builder #area[for='builder'] .tag.editing { outline: 1px solid var(--dh-brp10); } #builder #area[for='builder'] .tag.editing:hover { outline: 2px solid var(--dh-brp10); } #builder #area[for='builder'] .tag.hovering { outline: 1px solid var(--dh-brp08); cursor: pointer; } #builder #navbar #elements-activity { border-radius: 5px; color: var(--dh-ts10); font-size: 12px; padding: 3px; transition: 0.15s color, 0.15s background-color; align-items: center; display: flex; cursor: pointer; } #builder #navbar #elements-activity:hover { color: #fff; } #builder #navbar #cms-publish { border-radius: 5px; color: var(--dh-ts10); font-size: 12px; padding: 3px; transition: 0.15s color, 0.15s background-color; align-items: center; display: flex; cursor: pointer; letter-spacing: 0.5px; } #builder #navbar #cms-publish:hover { color: #fff; } #elements-activity-popup { width: 100%; background: var(--dh-bgp10); border: 1px solid #2E2E30; box-shadow: 0px 0px 15px 4px rgb(0 0 0 / 20%); border-radius: 5px; margin-top: 33px; padding: 10px 15px; } #elements-activity-popup > h3 { color: #fff; font-size: 14px; } #elements-activity-popup > h6 { padding: 5px 10px; color: var(--dh-brp10); background: var(--dh-brp01); display: inline-block; border: 1px solid var(--dh-brp05); border-radius: 5px; margin-top: 5px; font-size: 10px; } #elements-activity-popup > .list { margin-top: 10px; max-height: 300px; overflow: auto; } #elements-activity-popup > .list > div { border-bottom: 1px solid var(--dh-bc01); padding-top: 2px; padding-bottom: 2px; color: var(--dh-ts10); cursor: pointer; font-size: 12px; transition: 0.15s color; } #elements-activity-popup > .list > div.active { background: rgb(255 255 255 / 5%); } #elements-activity-popup > .list > div:hover { color: #fff; } #elements-activity-popup > .list > div > span { color: var(--dh-brp10); } #elements-activity-popup > .list > div > small { color: var(--dh-ts10); }#builder #elements { margin-top: 10px; height: calc(100vh - 169px); overflow: auto; display: flex; flex-direction: column; } #builder.beast-0 #elements { height: calc(100vh - 126px); } #builder #tabs > .parts > div > div[data-id="elements"] { max-width: 40vw; } #builder.modern #elements .elements-list { background: #1a1a1a; border-top: 1px solid #242426; border-bottom: 1px solid #242426; } #builder #elements .hidden { display: none; } #builder #elements .elements-list li > .top{ display: flex; align-items: center; justify-content: space-between; padding:8px 10px; font-size: 12px; color: var(--dh-ts10); cursor: pointer; transition: 0.2s; text-transform: capitalize; touch-action: none; pointer-events: none; } #builder #elements .elements-list li.dragged { pointer-events: none; background: var(--dh-brp01); z-index: 99999999999!important; } #builder #elements .elements-list li.dragged span { color: var(--dh-brp10); } #builder #elements .elements-list li span { color: var(--dh-ts10); } #builder #elements .elements-list li:hover { background: var(--dh-bgs10); } #builder #elements .elements-list li.editing { background: var(--dh-bgs10); } #builder #elements .elements-list li.editing span { color: white; } #builder #elements .elements-list li > .top > left { display: flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; pointer-events: none; } #builder #elements .elements-list li > .top > right { display: flex; align-items: center; justify-content: flex-end; gap:5px; pointer-events: auto; } #builder .A-builder-elements-sections-use { cursor: pointer; }#popup > div[data-id="preview"] { pointer-events: none!important; z-index: 100; } #popup > div[data-id="preview"] > div > .html { pointer-events: none!important;; } #popup .builder-popup[type="styled"] { } #popup .builder-popup[type="styled"] .types, #popup .builder-popup[type="wireframe"] .types { display: grid; grid-template-columns: 1fr 1fr; position: relative; top: 10px; } #popup .builder-popup[type="styled"] .types > div, #popup .builder-popup[type="wireframe"] .types > div { text-align: center; font-weight: 500; color: var(--dh-ts10); font-size: 12px; padding: 5px 5px; cursor: pointer; } #popup .builder-popup[type="styled"] .types > .styled, #popup .builder-popup[type="wireframe"] .types > .wireframe { background: var(--dh-brp01); color: var(--dh-brp10); opacity: 1; border-radius: 10px; } #popup .builder-popup[type="styled"] .category.wireframe, #popup .builder-popup[type="wireframe"] .category.styled { display: none; } #popup .builder-popup[type="styled"] .category[data-styled="0"], #popup .builder-popup[type="wireframe"] .category[data-wireframe="0"] { display: none; }body[data-id="builder"] { background: #fbfbfb; } body[data-id="builder"] p, body[data-id="builder"] small, body[data-id="builder"] span, body[data-id="builder"] ul, body[data-id="builder"] li, body[data-id="builder"] div { line-height: inherit; } body[data-id="builder"] div[type="text"] * { all: revert!important; }#browser #builder { overflow: hidden; }.builder-options { background: #333336; border-radius: 6px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); height: auto!important; padding-top: 0; padding-bottom: 0; max-width: 180px; width: 100%; } .builder-options > div, .builder-options .option { padding: 5px 15px; cursor: pointer; transition: 0.15s background; position: relative; font-size: 14px; color: #fff; } .builder-options > div:hover, .builder-options .option:hover { background: var(--dh-bgp03); } .builder-options .option small { color: var(--dh-brp10); position: relative; left: 3px; font-size: 9px; } .builder-options > div:last-child, .builder-options .option:last-child { border-bottom: none; } .builder-options > div i { margin-right: 4px; width: 15px; line-height: 20px; } .builder-options .dropdown .option:hover { background: var(--dh-bgs01); } .builder-options > div:hover .dropdown { display: block; z-index: 1000000; } .builder-options .dropdown { position: absolute; width: 191px; max-height: 200px; overflow: auto; right: -120px; top: 0; background: var(--dh-bgp10); border-radius: 6px; box-shadow: 0 0 15px rgb(0 0 0 / 15%); height: auto!important; display: none; padding: 0; } .builder-options .dropdown::-webkit-scrollbar-thumb { background: var(--dh-ts03); border-radius: 10px; } .builder-options .dropdown::-webkit-scrollbar { width: 6px; } .builder-options .dropdown .category { margin-bottom: 10px; border-bottom: 1px solid var(--dh-bc01); padding-bottom: 10px; } .builder-options .dropdown .category:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; } .builder-options .dropdown .category > p { font-size: 12px; font-weight: 500; margin-bottom: 5px; text-transform: capitalize; } .builder-options .dropdown .category .tags > div { padding: 2px 5px; border: 1px solid var(--dh-bgs01); font-size: 10px; font-weight: 500; text-align: center; text-transform: lowercase; background: rgb(255 255 255 / 10%); } .builder-options .dropdown .category .tags > div:hover { border: 1px solid var(--dh-bc02); } .builder-options .input-opt { position: absolute; right: 14px; bottom: 0; top: 0; height: 21px; margin: auto; background: rgb(255 255 255 / 12%); width: 40px; padding-left: 8px; font-weight: 300; color: #fff; border-radius: 4px; } .builder-options .shortcut { position: absolute; right: 15px; bottom: 0; top: 0; line-height: 29px; opacity: 0.3; font-weight: 500; color: #fff; font-size: 12px; } .builder-options .shortcut i { line-height: 29px; }.builder-select { background: #171717; border: 1px solid #2E2E30; box-sizing: border-box; box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, 0.2); border-radius: 5px; height: auto!important; padding-top: 0; padding-bottom: 0; width: 100%; max-height: 300px; overflow: auto; padding: 10px; display: flex; flex-direction: column; overflow-x: hidden; min-width: auto; width: 100%; } .builder-select.big { max-height: 400px; } .builder-select > ul { list-style-type: none; display: flex; flex-direction: column; gap: 6px; } .builder-select > ul > li, .builder-select > ul > li a { color: var(--dh-ts10); font-size: 12px; cursor: pointer; } .builder-select > ul > li, .builder-select > ul > li > a { color: var(--dh-ts10); font-size: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 5px; } .builder-select > ul > li > i, .builder-select > ul > li > a > i { font-size: 13px; } .builder-select > ul > li span, .builder-select > ul > li a span { color: var(--dh-ts10); font-size: 12px; cursor: pointer; } .builder-select > ul > li:hover, .builder-select > ul > li:hover a { color:white; } .builder-select > ul > li:hover span, .builder-select > ul > li:hover a span { color:white; } .builder-select .sticky-search { position: sticky; top: 0px; width: calc(100% + 20px); background: rgb(23 23 23); padding: 10px; transform: translate(-10px, -10px); } .builder-select .builder-sidebar-search { padding:5px; } .builder-select .builder-dropdown-folder > ul { list-style-type: none; display: flex; flex-direction: column; gap: 6px; } .builder-select .builder-dropdown-folder > ul > li span, .builder-select .builder-dropdown-folder > ul > li { color: var(--dh-ts10); font-size: 12px; cursor: pointer; } .builder-select .builder-dropdown-folder > ul > li span:hover, .builder-select .builder-dropdown-folder > ul > li:hover { color:white; } .builder-select .builder-dropdown-folder > ul > li ul { padding: 4px; padding-left: 14px; border-left: 1px solid #242426; flex-direction: column; gap: 7px; margin-left: 0; margin-top: 3px; } .builder-select .builder-dropdown-folder > ul { display: none; padding: 7px; padding-left: 14px; border-left: 1px solid #242426; flex-direction: column; gap: 0px; margin-left: 5px; } .builder-select .builder-dropdown-folder.opened > ul { display: flex; } .builder-select .builder-dropdown-folder { margin-bottom: 5px; } .builder-select .builder-dropdown-folder:last-of-type { margin-bottom: 0; } .builder-select .builder-dropdown-folder > .opener { cursor:pointer; display: flex; align-items: center; gap: 5px; margin-top: 7px; } .builder-select .builder-dropdown-folder > .opener > i{ font-size: 11px; color: #7D7D7D; } .builder-select .builder-dropdown-folder.opened > .opener > i { transform: rotate(90deg); } .builder-select .builder-dropdown-folder > .opener p { color: #7D7D7D; display: flex; align-items: center; gap: 5px; font-size: 12px; } .builder-select .builder-dropdown-folder > .opener:hover p { color: white; } .builder-select .builder-dropdown-folder.opened > .opener p { color: white; } .builder-select .builder-dropdown-folder > .opener p i { font-size: 14px; } #builder { /* [Shadows For Light] */ --dh-sw01: 0 2px 20px 0 rgba(0,0,0,.04); --dh-sw02: 0 2px 20px 0 rgba(0,0,0,.08); --dh-sw03: 0 2px 20px 0 rgba(0,0,0,.12); /* [Brand Primary] */ --dh-brp01: rgb(163 117 255 / 0.1); --dh-brp02: rgb(163 117 255 / 0.2); --dh-brp03: rgb(163 117 255 / 0.3); --dh-brp04: rgb(163 117 255 / 0.4); --dh-brp05: rgb(163 117 255 / 0.5); --dh-brp06: rgb(163 117 255 / 0.6); --dh-brp07: rgb(163 117 255 / 0.7); --dh-brp08: rgb(163 117 255 / 0.8); --dh-brp09: rgb(163 117 255 / 0.9); --dh-brp10: rgb(163 117 255 / 1.0); /* [Brand Secondary] */ --dh-brs01: rgb(181 55 255 / 0.1); --dh-brs02: rgb(181 55 255 / 0.2); --dh-brs03: rgb(181 55 255 / 0.3); --dh-brs04: rgb(181 55 255 / 0.4); --dh-brs05: rgb(181 55 255 / 0.5); --dh-brs06: rgb(181 55 255 / 0.6); --dh-brs07: rgb(181 55 255 / 0.7); --dh-brs08: rgb(181 55 255 / 0.8); --dh-brs09: rgb(181 55 255 / 0.9); --dh-brs10: rgb(181 55 255 / 1.0); /* [Background Primary] */ --dh-bgp00: rgb(18 18 18 / 1.0); --dh-bgp01: rgb(18 18 18 / 0.1); --dh-bgp02: rgb(18 18 18 / 0.2); --dh-bgp03: rgb(18 18 18 / 0.3); --dh-bgp04: rgb(18 18 18 / 0.4); --dh-bgp05: rgb(18 18 18 / 0.5); --dh-bgp06: rgb(18 18 18 / 0.6); --dh-bgp07: rgb(18 18 18 / 0.7); --dh-bgp08: rgb(18 18 18 / 0.8); --dh-bgp09: rgb(18 18 18 / 0.9); --dh-bgp10: rgb(18 18 18 / 1.0); /* [Background Secondary] */ --dh-bgs00: rgb(36 36 38 / 1.0); --dh-bgs01: rgb(36 36 38 / 0.1); --dh-bgs02: rgb(36 36 38 / 0.2); --dh-bgs03: rgb(36 36 38 / 0.3); --dh-bgs04: rgb(36 36 38 / 0.4); --dh-bgs05: rgb(36 36 38 / 0.5); --dh-bgs06: rgb(36 36 38 / 0.6); --dh-bgs07: rgb(36 36 38 / 0.7); --dh-bgs08: rgb(36 36 38 / 0.8); --dh-bgs09: rgb(36 36 38 / 0.9); --dh-bgs10: rgb(36 36 38 / 1.0); /* [Text Primary] */ --dh-tp01: rgb(255 255 255 / 0.1); --dh-tp02: rgb(255 255 255 / 0.2); --dh-tp03: rgb(255 255 255 / 0.3); --dh-tp04: rgb(255 255 255 / 0.4); --dh-tp05: rgb(255 255 255 / 0.5); --dh-tp06: rgb(255 255 255 / 0.6); --dh-tp07: rgb(255 255 255 / 0.7); --dh-tp08: rgb(255 255 255 / 0.8); --dh-tp09: rgb(255 255 255 / 0.9); --dh-tp10: rgb(255 255 255 / 1.0); /* [Text Secondary] */ --dh-ts01: rgb(125 125 125 / 0.1); --dh-ts02: rgb(125 125 125 / 0.2); --dh-ts03: rgb(125 125 125 / 0.3); --dh-ts04: rgb(125 125 125 / 0.4); --dh-ts05: rgb(125 125 125 / 0.5); --dh-ts06: rgb(125 125 125 / 0.6); --dh-ts07: rgb(125 125 125 / 0.7); --dh-ts08: rgb(125 125 125 / 0.8); --dh-ts09: rgb(125 125 125 / 0.9); --dh-ts10: rgb(125 125 125 / 1.0); /* [Success Colors] */ --dh-success01: rgb(5 201 96 / 0.1); --dh-success02: rgb(5 201 96 / 0.2); --dh-success03: rgb(5 201 96 / 0.3); --dh-success04: rgb(5 201 96 / 0.4); --dh-success05: rgb(5 201 96 / 0.5); --dh-success06: rgb(5 201 96 / 0.6); --dh-success07: rgb(5 201 96 / 0.7); --dh-success08: rgb(5 201 96 / 0.8); --dh-success09: rgb(5 201 96 / 0.9); --dh-success10: rgb(5 201 96 / 1.0); /* [Warning Colors] */ --dh-warning01: rgb(255 169 0 / 0.1); --dh-warning02: rgb(255 169 0 / 0.2); --dh-warning03: rgb(255 169 0 / 0.3); --dh-warning04: rgb(255 169 0 / 0.4); --dh-warning05: rgb(255 169 0 / 0.5); --dh-warning06: rgb(255 169 0 / 0.6); --dh-warning07: rgb(255 169 0 / 0.7); --dh-warning08: rgb(255 169 0 / 0.8); --dh-warning09: rgb(255 169 0 / 0.9); --dh-warning10: rgb(255 169 0 / 1.0); /* [Danger Colors] */ --dh-danger01: rgb(230 68 68 / 0.1); --dh-danger02: rgb(230 68 68 / 0.2); --dh-danger03: rgb(230 68 68 / 0.3); --dh-danger04: rgb(230 68 68 / 0.4); --dh-danger05: rgb(230 68 68 / 0.5); --dh-danger06: rgb(230 68 68 / 0.6); --dh-danger07: rgb(230 68 68 / 0.7); --dh-danger08: rgb(230 68 68 / 0.8); --dh-danger09: rgb(230 68 68 / 0.9); --dh-danger10: rgb(230 68 68 / 1.0); /* [Border] */ --dh-bc00: rgb(36 36 38 / 0.0); --dh-bc01: rgb(36 36 38 / 0.1); --dh-bc02: rgb(36 36 38 / 0.2); --dh-bc03: rgb(36 36 38 / 0.3); --dh-bc04: rgb(36 36 38 / 0.4); --dh-bc05: rgb(36 36 38 / 0.5); --dh-bc06: rgb(36 36 38 / 0.6); --dh-bc07: rgb(36 36 38 / 0.7); --dh-bc08: rgb(36 36 38 / 0.8); --dh-bc09: rgb(36 36 38 / 0.9); --dh-bc10: rgb(36 36 38 / 1.0); }#builder #navbar part[for="account.dropdown"] > .avatar { width: 25px; height: 25px; font-size: 11px; } #builder #navbar part[for="account.dropdown"] .dropdown-hidden { background: var(--dh-bgp10); border:1px solid var(--dh-bc10) }#builder .builder-template-settings { display: flex; background: var(--dh-bgp10); justify-content: space-between; gap: 20px; padding: 15px; } #builder .builder-template-settings .cnt-wrapper { flex: 1; } #builder .builder-template-settings .cnt-wrapper .cnt .category > h3 { margin-bottom: 15px; font-weight: 600; font-size: 14px; color: var(--dh-ts10); } #builder .builder-template-settings .cnt-wrapper .cnt .category:not(:last-of-type) { margin-bottom: 15px; padding-bottom: 15px; } #builder .builder-template-settings aside { max-width: 120px; width: 100%; border-right: 1px solid var(--dh-bc10); padding:0; padding-right: 20px; } #builder .builder-template-settings aside ul {width: 100%;} #builder .builder-template-settings aside li { list-style-type: none; padding: 5px 8px; cursor: pointer; border-radius: 5px; color: var(--dh-ts10); font-size: 14px; margin-bottom: 5px; } #builder .builder-template-settings aside li.active { color: white; background: var(--dh-bc10); } #builder .builder-template-settings aside li:hover { color: white; } #builder .builder-template-settings aside li:last-of-type {margin-bottom:0} #builder .builder-template-settings .options-list .category > div:not(:last-child) { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--dh-bc10); } #builder .builder-template-settings .cnt-wrapper .shortcuts-list .category > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--dh-bc10); } #builder .builder-template-settings .cnt-wrapper .shortcuts-list .category > div:last-of-type { border-bottom: none; } #builder .builder-template-settings .cnt-wrapper .shortcuts-list p { color: var(--dh-tp06); font-weight: 600; } #builder .builder-template-settings .cnt-wrapper .cnt > div { margin-bottom: 30px; } #builder .builder-template-settings .cnt-wrapper .cnt > div:empty { margin-bottom: 0; } #builder .builder-template-settings .cnt-wrapper .cnt > div:last-child { margin-bottom: 0px; } #builder kbd { padding: 4px 6px; background: var(--dh-bc10); font-size: 11px; border: 1px solid rgb(55 55 56); border-radius: 5px; height: 25px; line-height: 1; display: flex; align-items: center; justify-content: center; } #builder .builder-template-settings .cnt-wrapper .shortcuts-list .category > div > div { display: flex; align-items: center; justify-content: center; gap: 5px; }#builder #navbar { height:34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--dh-bc10); position: relative; z-index: 10000002; background: var(--dh-bgp10); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #builder[for="live"] #navbar { position: fixed; width: 100%; top: 0; left: 0; z-index: 100000000; } #builder[for="live"]:not(.admin) #navbar { width: 39px; border-radius: 5px; margin: 5px; } #builder[for="live"]:not(.admin) #navbar > .left logo { border-right: unset; } #builder[for="live"]:not(.admin) #navbar > .left .items, #builder[for="live"]:not(.admin) #navbar > .right { display: none; } #builder.white #navbar { background: #242426; } #builder #navbar > .left { display: flex; width: 405px; } #builder #navbar > .right { flex: 1; display: flex; align-items: center; justify-content: flex-end; border-bottom: 0px !important; padding-right: 10px; gap: 8px; } #builder #navbar > div > .items { display: flex; align-items: center; } #builder #navbar > div > .items > div { padding:0 10px; border-right: 1px solid var(--dh-bc10); } #builder #navbar > div.left > .items > div:last-child { border-right: none; } #builder #navbar > .left logo { display: flex; align-items: center; justify-content: center; height: 34px; border-right: 1px solid var(--dh-bc10); width: 39px; cursor: pointer; } #builder #navbar > .right .action-icon { min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #242426; border-radius: 5px; cursor:pointer; color: var(--dh-ts10); font-size: 14px; margin-left: 5px; } #builder #navbar > .right.action-icon.active i { color: white; } #builder #pages { margin-top: 10px; height: calc(100vh - 169px); overflow: auto; display: flex; flex-direction: column; } #builder.beast-0 #pages { height: calc(100vh - 126px); } #builder #tabs > .parts > div > div[data-id="pages"] { max-width: 40vw; } #builder.modern #pages .pages-list { background: #1a1a1a; border-top: 1px solid #242426; border-bottom: 1px solid #242426; } #builder #pages .page-group:not(:first-child) { position: relative; } #builder #pages .page-group:not(:first-child)::before { content: ""; width: 100%; background: #272729; position: absolute; top:0; left:10px; height: 1px; width: calc(100% - 20px); } #builder #pages .pages-list li { padding: 9px 10px; display:flex; align-items:center; justify-content: space-between; gap: 10px; color:var(--dh-ts10); font-size: 12px; cursor:pointer; text-transform: capitalize; } #builder #pages .pages-list li > div > name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #builder #pages .pages-list li > div > i { color: var(--dh-ts10); } #builder #pages .pages-list li:hover, #builder #pages .pages-list li.active { background: #2E2E30; color:white; } #builder #pages .pages-list li:hover > div > img, #builder #pages .pages-list li.active > div > img { filter: brightness(10); } #builder #pages .pages-list li:hover > div > i, #builder #pages .pages-list li.active > div > i { color: white; } #builder #pages .pages-list li:hover > div.actions { visibility: visible; opacity: 1; } #builder #pages .pages-list li > div { display: flex; align-items: center; width: 100%; gap:8px; color: var(--dh-ts10); } #builder #pages .pages-list li.active > div, #builder #pages .pages-list li:hover div { color: white; } #builder #pages .pages-list li > div.actions { width: 40px; justify-content: flex-end; visibility: hidden; opacity: 0;; } #builder #pages .pages-list li > div.actions a { display: flex; } #builder #pages .pages-list li > div.actions i { font-size:15px; color:var(--dh-ts10); cursor:pointer; } #builder #pages .pages-list li > div.actions i:hover { color: white; } #builder #navbar #pages-preview { background: var(--dh-brp03); border-radius: 5px; color: var(--dh-brp10); font-size: 12px; padding: 3px 10px; transition: 0.15s color, 0.15s background-color; align-items: center; display: flex; } #builder #navbar #pages-preview:hover { color: #fff; background: var(--dh-brp10); } #builder #navbar #pages-preview > i { font-size: 16px; } #popup .page-settings-popup { background: #171717!important; border-radius: 0; box-shadow: none; max-height: calc(100vh - 73px); overflow: auto; height: 100vh!important; border-bottom: 0px; } #popup .page-settings-popup slug { color: white; }#builder.modern .styler-css-dropdown.opened .edit-items-grid { background: #1a1a1a; border-top: 1px solid #242426; border-bottom: 1px solid #242426; border-radius: 0!important; } #builder.modern .styler .styler-css-dropdown.opened > .opener { padding-bottom: 10px!important; } #builder.modern .styler .styler-css-dropdown { border-bottom: unset!important; }#builder #tabs { z-index: 10000001; position: relative; border-bottom: 1px solid var(--dh-bc10); height: 40px; } #builder.beast-0 #tabs { border-bottom: unset; height: calc(100vh - 34px); width: 38px; position: absolute; }#builder #tabs > .navigation { padding: 10px 6px; background: var(--dh-bgp10); display:flex; justify-content:space-between; align-items:center; height: 40px; border-bottom: 1px solid var(--dh-bc10); } #builder.beast-0 #tabs > .navigation { height: 100%; border-bottom: unset; border-right: 1px solid var(--dh-bc10); width: 39px; position: fixed; display: block; } #builder #tabs > .navigation > div {flex:1} #builder.beast-0 #tabs > .navigation > div { margin-bottom: 10px; } #builder.beast-0 #tabs > .navigation > div.middle { display: none; } #builder.beast-0 #tabs > .navigation > div.right { display: none; } #builder #tabs > .navigation > div > ul { flex:1; display: flex; gap: 10px; } #builder.beast-0 #tabs > .navigation > div > ul { display: grid; justify-content: center!important;; } #builder #tabs > .navigation > .right > ul{ justify-content: flex-end; } #builder #tabs > .navigation > .middle > ul{ justify-content: center; } #builder #tabs > .navigation > div > ul > li { list-style: none; height: 28px; width: 28px; border-radius: 5px; color:var(--dh-ts10); cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; } #builder #tabs > .navigation > div > ul > li:hover { color: white; } #builder #tabs > .navigation > div > ul > li.active { color: white; background: var(--dh-brp10); } #builder #tabs > .navigation > div > ul > li.hidden { display: none; } #builder #tabs > .navigation > div > ul > li.active img , #builder #tabs > .navigation > div > ul > li:hover img { filter: brightness(10); } #builder #tabs > .navigation > div > ul > li i { font-size: 17px; } #builder #tabs > .parts > div { position: fixed; } #builder #tabs > .parts > div.left { top: 74px; left: 0; min-width: 200px; max-width: 50vw; height:calc(100vh - 74px); overflow: hidden; pointer-events: none; width: 100%; } #builder.beast-0 #tabs > .parts > div.left { top: 34px; left: 39px; height:calc(100vh - 34px); } #builder #tabs > .parts > div.right { top: 74px; right: 0; min-width: 200px; height:calc(100vh - 74px); overflow: hidden; max-width: 50vw; pointer-events: none; width: 100%; } #builder.beast-0 #tabs > .parts > div.right { top: 34px; height:calc(100vh - 34px); } #builder #tabs > .parts > div.middle { position: fixed; top: 80px; height: auto; width: auto; display: flex; justify-content: center; left: 0; right: 0; margin:0 auto; pointer-events: none; width: 100%; } #builder #tabs > .parts > div > div { background: var(--dh-bgp10); display: none; pointer-events: auto; max-height: calc(100vh - 74px); height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; } #builder.beast-0 #tabs > .parts > div > div { max-height: calc(100vh - 34px); width: 252px!important; } #builder.beast-0 #tabs > .parts > .right > div { width: 290px!important; } #builder.beast-0 #tabs > .parts > div > div .resize { display: none; } #builder #tabs > .parts > div.right > div { left: unset; right: 0; } #builder #tabs > .parts > div.middle > div { left: 0; right: 0; margin:0 auto; } #builder #tabs > .parts > div > div.active { opacity: 1; z-index: 10; display: block; transition: 0.15s transform; } #builder #tabs > .parts > .left > div.active { border-right: 1px solid var(--dh-bc10); } #builder #tabs > .parts > .right > div.active { border-left: 1px solid var(--dh-bc10); } #builder #tabs > .parts > div > div > .resize { position: absolute; height: 100%; width: 4px; cursor: ew-resize; touch-action: none; transition: background 0.1s; z-index: 100; } #builder #tabs > .parts > div > div > .resize:hover, #builder #tabs > .parts > div > div > .resize.active { background: var(--dh-brp04); } #builder #tabs > .parts > div > div > .resize:hover { z-index: 10000; } #builder #tabs > .parts > div > div > .resize[resize='right'] { right: -4px; } #builder #tabs > .parts > div > div > .resize[resize='left'] { left: -4px; }#builder #update_clients { display: flex; align-items: center; gap:3px; } #builder #update_clients > div { width: 25px; height: 25px; font-size: 11px; border-radius: 100%; background: var(--dh-brp10); display: flex; justify-content: center; align-items: center; } #builder #update_clients > div:first-child {background: #1EC6A4;} #builder #update_clients > div:nth-child(2) {background: #FF9B73;} #builder #update_clients > div:nth-child(3) {background: #ff5bb6;} #builder #update_clients > div:nth-child(4) {background: #5b60ff;} #builder #update_clients > div:nth-child(5) {background: #5bb3ff;} #builder #update_clients > div:nth-child(6) {background: #bdae00;} #builder #update_clients > div:nth-child(7) {background: #d36b00;} #builder #update_clients > div:nth-child(8) {background: #fb4141;} body[data-id="admin"] { background: #fbfbfb; }body[data-id="store"] { background: #fbfbfb; }body[data-id="account"] { background: #fbfbfb; }#popup .browser[data-id="collection-item"] { max-width: 910px; width: 70vw; margin: 0 auto; box-shadow: var(--dh-sw01); background: white; border-radius: 0; display: block; border-top: 5px solid var(--dh-success10); position: fixed; top: 0; right: 0; height: 100vh; background: #fbfbfb; } #popup .browser[data-id="collection-item"] .browser-navigation, #popup .browser[data-id="collection-item"] part[for="account.dropdown"], #popup .browser[data-id="collection-item"] part[for="config.languages"], #popup .browser[data-id="collection-item"] part[for="navbar.admin"] > div > div > .left { display: none; }body[data-id="collections"] { background: #fbfbfb; }#builder-layers ._abl-heading { } #builder-layers ._abl-heading > ._abl-heading-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; background-color: #24242654; border-bottom: 1px solid var(--dh-bc10); } #builder-layers ._abl-heading > div > h2 { font-weight: 600; font-size: 12px; } #builder-layers ._abl-back { display: flex; align-items: center; color: var(--dh-ts10); font-size: 12px; padding: 2px 10px; cursor: pointer; gap: 4px; background-color: #24242654; border-bottom: 1px solid var(--dh-bc10); transition: 0.15s padding; } #builder-layers ._abl-back:hover { padding-left: 2px; } #builder-layers ._abl-back > span { color: var(--dh-ts10); }#builder #layers > ul { overflow: auto; height: calc(100vh - 124px); border-left: 0!important; margin-left: 0!important; padding: 1px!important; } #builder[for="live"] #layers > ul { height: calc(100vh - 84px); } #builder.modern #layers > ul { background: #1a1a1a; border-top: 1px solid #242426; border-bottom: 1px solid #242426; } #builder #layers > ul > li > span { width: calc(100% + 7px)!important; left: -7px; position: relative; padding-left: 25px!important; } #builder.beast-0 #layers > ul > li > span { padding-left: 15px!important; } #builder #layers ul li > span > i { font-size: 10px; height: 18px; display: flex; align-items: center; cursor: pointer; width: 14px; padding: 0; justify-content: center; margin-left: -11px; margin-top: -5px; } #builder #layers ul li:not(.children) > span > i { opacity: 0; pointer-events: none; } #builder #layers li { list-style: none; padding-top: 1px; touch-action: none; } #builder #layers li.highlight > span { background-color: #2b2041; } #builder #layers li.centered { display: flex; } #builder #layers li.component > ul { border-left: 2px solid rgb(17 209 170 / 32%); } #builder #layers li.component > span { color: #11d1aa!important; } #builder #layers li.centered right { display: flex; align-items: center; justify-content: right; gap: 5px; padding-right: 10px; width: 60px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 10000; } #builder #layers li.centered right > * { display: flex; align-items: center; justify-content: right; cursor: pointer; } #builder #layers li.centered right > * i { color: var(--dh-ts10); font-size: 16px; } #builder #layers li.centered right > * i:hover { color: #fff; } #builder #layers li.hidden > ul { display: none; } #builder #layers li.dragged > ul { display: none; } #builder #layers li.opened > ul { display: block!important; } #builder #layers li.opened li:not(.opened) > ul { display: none!important; } #builder #layers li.opened li:not(.opened) > span i { transform: rotate(-90deg); } #builder #layers li.opened li:not(.opened):not(.hidden) > ul { display: block!important; } #builder #layers li.opened li:not(.opened):not(.hidden) > span i { transform: rotate(0deg); } #builder #layers li.hidden > span > i { transform: rotate(-90deg); } #builder #layers li.opened > span > i { transform: rotate(0deg)!important; } #builder #layers > ul li.active > span { color: white; background: var(--dh-bc10); } #builder #layers > ul li.hideChildren > span > i::before { transform: rotate(-90deg); } #builder #layers > ul li.hideChildren > ul { display: none; } #builder #layers ul { border-left: 1px solid var(--dh-bc10); margin-left: 12px; } #builder #layers li span { color: var(--dh-ts10); font-size: 12px; border-radius: 0; cursor: pointer; padding: 7px 11px; display: flex; align-items: center; line-height: 1; width: max-content; height: 30px; min-width: 100%; padding-left: 16px; } #builder #layers li span > small { color: var(--dh-brp10); margin-left: 4px; font-weight: 500; font-size: 9px; position: relative; top: 1.4px; } #builder #layers li.hideChildren > ul {display:none;} #builder #layers li.hideChildren > span > .A-elements-layers-toggle { transform:rotate(-90deg); } #builder #layers li .A-elements-layers-toggle { width: 12px; height: 12px; padding: 2px; } #builder #layers li .A-elements-layers-toggle:hover { filter: brightness(3); } #builder #layers li span img { margin-right: 5px; height: 14px; width: 14px; object-fit: contain; margin-top: -4px; } #builder #layers li span:hover { color:white; } #builder #layers .clone { pointer-events: none; width: 100%; background: var(--dh-brp02); } #builder #layers .clone li { opacity: 1!important; } #builder #layers .clone .right { display: none; } #builder #layers .empty { text-align: center; padding: 20px 0; } #builder #layers .empty > p { margin-top: 15px; color: var(--dh-ts10); font-size: 12px; } /* badges */ #builder #layers li {position: relative;} #builder #layers li .right { position: absolute; right: -1px; top: 2.5px; height: 27px; display: flex; align-items: center; gap: 4px; padding: 0 10px; background:var(--dh-bgp10); padding-left: 3px; } #builder.modern #layers li .right { background: rgb(26 26 26); } #builder #layers li .right:not(:empty)::before { position: absolute; left: -25px; width: 25px; height: 27px; top: 0; background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, rgb(18 18 18) 100%); content: ""; } #builder #layers .right:not(:empty)::before { background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, rgb(18 18 18) 100%); } #builder.modern #layers .right:not(:empty)::before { background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, rgb(26 26 26) 100%); } #builder #layers .component .right { background: rgb(18 18 18); } #builder #layers li .right:empty { display: none; } #builder #layers li.active > span > .right { background: rgb(36 36 38); } #builder #layers li.active > span > .right::before { background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, #242426 100%)!important; } #builder #layers li.highlight > span > .right { background: #2b2041; } #builder #layers li.highlight > span > .right::before { background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, #2b2041 100%)!important; } #builder #layers li .right icon.badge { height: 14px; background: #0effce29; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 10px; border-radius: 2px; min-width: 14px; color:#0effce; padding: 0 3px; } #builder #layers li .right icon.badge.portal { color: #2ad8ff; background: #2ad8ff2e; } #builder #layers li .right icon.badge.option { background: transparent; } #builder #layers li .right icon.badge.option i { color: var(--dh-ts10); font-size: 12px; } #builder #layers li .right icon.badge.method { background: #ffb12326; color: #ffb123; } #builder #layers li .right icon.badge.visible-condition { color: #fcff2b; background: #fcff3529; } #builder #layers li .right icon.badge.iterable { color: #ff1576; background: #ff15761f; } #builder #layers li .right icon.badge.loop { background: var(--dh-brp02); color: var(--dh-brp10); } #builder #layers li .right icon.badge.classes { background: var(--dh-brp02); color: var(--dh-brp10); } #builder #layers li .right icon.badge.attributes { background: rgb(255 171 14 / 16%); color: rgb(255 171 14 / 100%) } #builder #layers .back { display: flex; align-items: center; color: var(--dh-ts10); font-size: 12px; padding: 2px 10px; cursor: pointer; margin-bottom: 7px; gap: 4px; cursor: pointer; } #builder #layers .back span { color: var(--dh-ts10); } #builder #layers .back:hover span{ color:white; } #builder-layers ._abl-list > ul { overflow-y: auto; overflow-x: hidden; height: calc(100vh - 112px); border-left: 0!important; margin-left: 0!important; padding: 1px!important; } #builder-layers ._abl-list > ul > li > span { width: calc(100% + 7px)!important; left: -7px; position: relative; padding-left: 25px!important; } #builder-layers ._abl-list > ul li > span > i { font-size: 10px; height: 18px; display: flex; align-items: center; cursor: pointer; width: 14px; padding: 0; justify-content: center; margin-left: -11px; margin-top: -5px; } #builder-layers ._abl-list > ul li:not(.children) > span > i { opacity: 0; pointer-events: none; } #builder-layers ._abl-list li.dragged { opacity: 0.1; pointer-events: none; } #builder-layers ._abl-list li.dragged > ul { display: none; } #builder-layers ._abl-list > ul li { list-style: none; padding-top: 1px; touch-action: none; cursor: default!important; } #builder-layers ._abl-list > ul li.highlight > span { background-color: #2b2041; } #builder-layers ._abl-list > ul li.centered { display: flex; } #builder-layers ._abl-list > ul li.component > ul { border-left: 2px solid rgb(17 209 170 / 32%); } #builder-layers ._abl-list > ul li.component > span { color: #11d1aa!important; } #builder-layers ._abl-list > ul li.centered right { display: flex; align-items: center; justify-content: right; gap: 5px; padding-right: 10px; width: 60px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 10000; } #builder-layers ._abl-list > ul li > .right i { font-size: 14px; } #builder-layers ._abl-list > ul li.centered right > * { display: flex; align-items: center; justify-content: right; cursor: pointer; } #builder-layers ._abl-list > ul li.centered right > * i { color: var(--dh-ts10); font-size: 16px; } #builder-layers ._abl-list > ul li.centered right > * i:hover { color: #fff; } #builder-layers ._abl-list > ul li.hidden > ul { display: none; } #builder-layers ._abl-list > ul li.opened > ul { display: block!important; } #builder-layers ._abl-list > ul li.opened li:not(.opened) > ul { display: none!important; } #builder-layers ._abl-list > ul li.opened li:not(.opened) > span i { transform: rotate(-90deg); } #builder-layers ._abl-list > ul li.opened li:not(.opened):not(.hidden) > ul { display: block!important; } #builder-layers ._abl-list > ul li.opened li:not(.opened):not(.hidden) > span i { transform: rotate(0deg); } #builder-layers ._abl-list > ul li.hidden > span > i { transform: rotate(-90deg); } #builder-layers ._abl-list > ul li.opened > span > i { transform: rotate(0deg)!important; } #builder-layers ._abl-list > ul li.active > span { color: white; background: var(--dh-bc10); } #builder-layers ._abl-list > ul > ul li.hideChildren > span > i::before { transform: rotate(-90deg); } #builder-layers ._abl-list > ul > ul li.hideChildren > ul { display: none; } #builder-layers ._abl-list > ul ul { border-left: 1px solid var(--dh-bc10); margin-left: 12px; } #builder-layers ._abl-list > ul li span { color: var(--dh-ts10); font-size: 12px; border-radius: 0; cursor: pointer; padding: 7px 11px; display: flex; align-items: center; line-height: 1; width: max-content; height: 30px; min-width: 100%; padding-left: 16px; } #builder-layers ._abl-list > ul li span > small { color: var(--dh-brp10); margin-left: 4px; font-weight: 500; font-size: 9px; position: relative; top: 1.4px; } #builder-layers ._abl-list > ul li.hideChildren > ul {display:none;} #builder-layers ._abl-list > ul li.hideChildren > span > .A-elements-layers-toggle { transform:rotate(-90deg); } #builder-layers ._abl-list > ul li .A-elements-layers-toggle { width: 12px; height: 12px; padding: 2px; } #builder-layers ._abl-list > ul li .A-elements-layers-toggle:hover { filter: brightness(3); } #builder-layers ._abl-list > ul li span img { margin-right: 5px; height: 14px; width: 14px; object-fit: contain; margin-top: -4px; } #builder-layers ._abl-list > ul li span:hover { color:white; } #builder-layers ._abl-list > ul .cloned { pointer-events: none; width: 100%; background: var(--dh-brp01); opacity: 1!important; } #builder-layers ._abl-list > ul .cloned span { color: var(--dh-brp10); } #builder-layers ._abl-list > ul .cloned li { opacity: 1!important; } #builder-layers ._abl-list > ul .cloned .right { display: none; } #builder-layers ._abl-list > ul .empty { text-align: center; padding: 20px 0; } #builder-layers ._abl-list > ul .empty > p { margin-top: 15px; color: var(--dh-ts10); font-size: 12px; } #builder-layers ._abl-list > ul li {position: relative;} #builder-layers ._abl-list > ul li .right { position: absolute; right: -1px; top: 2.5px; height: 27px; display: flex; align-items: center; gap: 4px; padding: 0 10px; background:var(--dh-bgp10); padding-left: 3px; } #builder-layers ._abl-list > ul li .right:not(:empty)::before { position: absolute; left: -25px; width: 25px; height: 27px; top: 0; background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, rgb(18 18 18) 100%); content: ""; } #builder-layers ._abl-list > ul .right:not(:empty)::before { background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, rgb(18 18 18) 100%); } #builder-layers ._abl-list > ul .component .right { background: rgb(18 18 18); } #builder-layers ._abl-list > ul li .right:empty { display: none; } #builder-layers ._abl-list > ul li.active > span > .right { background: rgb(36 36 38); } #builder-layers ._abl-list > ul li.active > span > .right::before { background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, #242426 100%)!important; } #builder-layers ._abl-list > ul li.highlight > span > .right { background: #2b2041; } #builder-layers ._abl-list > ul li.highlight > span > .right::before { background: linear-gradient(80deg, rgba(0,0,0,0.00) 0%, #2b2041 100%)!important; } #builder-layers ._abl-list > ul li .right icon.badge { height: 14px; background: #0effce29; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 10px; border-radius: 2px; min-width: 14px; color:#0effce; padding: 0 3px; } #builder-layers ._abl-list > ul li .right icon.badge.portal { color: #2ad8ff; background: #2ad8ff2e; } #builder-layers ._abl-list > ul li .right icon.badge.option { background: transparent; } #builder-layers ._abl-list > ul li .right icon.badge.option i { color: var(--dh-ts10); font-size: 12px; } #builder-layers ._abl-list > ul li .right icon.badge.method { background: #ffb12326; color: #ffb123; } #builder-layers ._abl-list > ul li .right icon.badge.visible-condition { color: #fcff2b; background: #fcff3529; } #builder-layers ._abl-list > ul li .right icon.badge.iterable { color: #ff1576; background: #ff15761f; } #builder-layers ._abl-list > ul li .right icon.badge.loop { background: var(--dh-brp02); color: var(--dh-brp10); } #builder-layers ._abl-list > ul li .right icon.badge.classes { background: var(--dh-brp02); color: var(--dh-brp10); } #builder-layers ._abl-list > ul li .right icon.badge.attributes { background: rgb(255 171 14 / 16%); color: rgb(255 171 14 / 100%) } #builder-layers ._abl-list > ul .back { display: flex; align-items: center; color: var(--dh-ts10); font-size: 12px; padding: 2px 10px; cursor: pointer; margin-bottom: 7px; gap: 4px; cursor: pointer; } #builder-layers ._abl-list > ul .back span { color: var(--dh-ts10); } #builder-layers ._abl-list > ul .back:hover span{ color:white; } #builder-layers ._abl-list > ul > ._abl-new-section { background: #181819; border-top: 1px solid var(--dh-bc10); border-bottom: 1px solid var(--dh-bc10); }#builder-animations-options { background-color: #121212; max-height: 70vh; overflow: auto; } #builder-animations-options h2 { text-transform: capitalize; } #builder-animations-options [addon='builder.animations:tabs'] { padding: 10px 15px; } #builder-animations-options .styler_icons_grid { background-color: rgb(36 36 38); } #builder-animations-options .styler_icons_grid span { color: white; } #builder-animations-options [addon='builder.animations:options'] { display: flex; flex-direction: column; } #builder-animations-options p, #builder-animations-options small, #builder-animations-options span, #builder-animations-options ul, #builder-animations-options li, #builder-animations-options div { color: white;; } #builder-animations-options .label_inline label { color: var(--dh-ts10); }#builder-explorer { background: #121212; padding: 14px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25); border-radius: 8px; } #builder-explorer [addon='builder.explorer:tabs'], #builder-explorer [addon='builder.explorer:results'] { display: none; } #builder-explorer ._abe-search > div { display: flex; align-items: center; gap: 10px; border-radius: 8px; background-color: #242426; height: 54px; padding: 0 14px; } #builder-explorer ._abe-search > div input { height: 100%; flex: 1; font-size: 16px; color: white; } #builder-explorer ._abe-search > div input::placeholder { color: var(--dh-ts10); } #builder-explorer ._abe-search > div i { color: var(--dh-ts10); font-size: 20px; } #builder-explorer ._abe-results { max-height: 400px; overflow: auto; margin-top: 14px; } #builder-explorer ._abe-result { padding: 10px; border-top: 1px solid rgb(36 36 38); line-height: 1.4; transition: 0.1s; cursor: pointer; position: relative; } #builder-explorer ._abe-result * { color: white; } #builder-explorer ._abe-result > span { color: var(--dh-ts10); font-size: 11px; } #builder-explorer ._abe-result.active { background: rgb(36 36 38); } #builder-explorer ._abe-result > p { display: flex; align-items: center; gap: 8px; } #builder-explorer ._abe-result i { color:var(--dh-ts10); } #builder-explorer ._abe-result small { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 2px 5px; color: var(--dh-ts10); }#builder-explorer ._abe-tabs { display: flex; margin-top: 8px; } #builder-explorer ._abe-tab { display: flex; align-items: center; padding: 4px 10px 0; } #builder-explorer ._abe-tab span { color: var(--dh-ts10); } #builder-explorer ._abe-tab.active span { color: white; }