body {
    overflow: hidden;
}

#kp_theme_picker {
    z-index: 851;
}

#container, #content, #editor_wrapper, #editor_workspace {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: var(--color-base);
}

h4 {
    font-size: 1rem;
    margin: 30px 0 15px 0;
    font-weight: 700;
}

.secondary-menu-trigger {
    color: var(--color-text);
    height: auto;
    margin: 0 15px 0 0;
    padding: 5px;
    opacity: 0.5;
    transition: 0.15s linear;
    line-height: 0;
}

#secondary_menu_trigger {
    padding: 11px 10px 7px 12px;
    opacity: 0.8;
    margin-right: 5px;
}

.secondary-menu-trigger:hover {
    opacity: 1 !important;
}

#secondary_menu_wrapper {
    z-index: 851;
    top: 0;
    height: 100% !important;
}

#secondary_inner {
    padding-top: 30px;
}

#secondary_menu_close {
    display: block;
}

#secondary_menu_wrapper a.moderation-link {
    text-align: center;
    padding: 14px 15px 13px 0;
    border: 1px solid var(--color-text-trans);
    border-radius: var(--border-radius-md);
}

#secondary_inner ul.secondary-editor li a
{
    cursor: pointer;
    border: 1px solid var(--color-text-trans);
}

#editor_wrapper.no-project {
    pointer-events: none !important;
    opacity: 0.8;
}

#modal_newdoc .modal-head {
    margin-bottom: 0;
    border-bottom-color: var(--color-neutral-trans);
    overflow: visible;
    text-align: center;
}

#modal_newdoc .modal-head #head_right {
    width: auto;
    float: right;
    height: 45px;
    margin-top: -4px;
    text-align: left;
}

#modal_newdoc .modal-head #account_dropdown .dropdown-trigger {
    padding: 3px 10px 5px;
    border-radius: var(--border-radius-md);
}

#modal_newdoc .modal-head .notice-dropdown {
    border-top: 1px solid var(--color-base);
}

#modal_newdoc .modal-head .notice-dropdown:before {
    display: none;
}

#newdoc_logo svg {
    margin-bottom: -2px;
}

#newdoc_logo svg.mobile-logo {
    margin: -8px 0 -10px;
    width: auto;
    height: auto;
    display: none;
}

#modal_newdoc h2 {
    color: var(--color-primary);
    float: left;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 26px;
    font-weight: 600;
}

#modal_newdoc h3 {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 30px 0;
    text-align: left;
    float: none;
}

#modal_newdoc h3 em {
    display: block;
    color: var(--color-text-op);
    text-transform: none;
    font-size: 16px;
}

#modal_newdoc .kp-modal {
    max-width: unset;
    max-height: unset;
    height: 92%;
    width: 92%;
    top: 100%;
    left: 4%;
    font-size: 100%;
    transform: none;
    transition: 0.5s;
    padding: 15px;
}

#modal_newdoc .kp-modal.showing {
    top: 4%;
}

#modal_newdoc .modal-body {
    position: relative;
    padding-left: 295px;
    padding-bottom: 0;
    height: calc(100% - 52px);
    border-top: 1px solid var(--color-text-trans);
}

.toggle-switch[for="safesearch_toggle"] input:checked + span:before {
    top: 5px;
}

.newdoc-step {
    display: none;
    height: 100%;
}

.newdoc-step.curstep {
    display: block;
}

.new-project-sidebar {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 295px;
    padding-right: 15px;
    border-right: 1px solid var(--color-neutral-mid);
    background: var(--color-content);
}

.new-project-sidebar .sidebar-widget {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.new-project-sidebar .sidebar-btn {
    text-align: left;
    padding-left: 90px !important;
}

.new-project-sidebar .sidebar-btn > img {
    bottom: -6px;
    width: 74px;
}

.new-project-content {
    position: relative;
    height: 100%;
    overflow: auto;
    padding-left: 15px;
    background: var(--color-base) url(/assets/images/newdoc-load-beads.png) center center no-repeat;
    background-size: contain;
}

.newdoc-step .back-btn {
    text-decoration:  none;
    color: var(--color-text);
    display: inline-block;
    padding: 15px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 15px 0;
}

.newdoc-step .back-btn i {
    float: left;
    line-height: 26px;
    margin-right: 5px;
}

.newdoc-step .back-btn:hover {
    color: var(--color-primary);
}

.newdoc-sidebar-tab {
    display: block;
    padding: 15px;
    text-decoration:  none;
    color: var(--color-text);
    border-top: 1px solid var(--color-neutral-trans);
}

.newdoc-sidebar-tab img, .newdoc-sidebar-tab i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    line-height: 0;
}

.newdoc-sidebar-tab i {
    font-size: 36px;
}

.newdoc-sidebar-tab > span {
    display: inline-block;
    vertical-align: middle;
}

.newdoc-sidebar-tab:last-child {
    border-bottom: 1px solid var(--color-neutral-trans);
}

.newdoc-sidebar-tab.curtab {
    font-weight: 600;
    color: var(--color-primary);
    background: linear-gradient(45deg, var(--color-primary-trans), transparent 50%);
    cursor: default;
}

.newdoc-sidebar-tab:not(.curtab):hover {
    color: var(--color-secondary);
    background: linear-gradient(45deg, var(--color-secondary-trans), transparent 50%);
}

.newdoc-tab-content, .board-option-content {
    display: none;
    padding-bottom: 30px;
}

.newdoc-tab-content.curtab, .board-option-content.active {
    display: block;
}

.board-option-content h4 > img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 30px 0 15px;
}

#editor_user_btns {
    padding: 30px 0;
}

#editor_user_btns > a {
    display: inline-block;
    vertical-align: middle;
    height: 70px;
    width: 350px;
    margin: 0 18px;
    border: 1px solid var(--color-primary-trans);
    border-radius: var(--border-radius-md);
    box-shadow: 0 0 7px var(--color-primary-trans);
    background: linear-gradient(60deg, var(--color-primary-trans), var(--color-content) 60%);
    text-align: right;
    position: relative;
    padding-right: 25px;
    text-decoration: none;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 24px;
    overflow: hidden;
    transition: 0.15s;
}

#editor_user_btns > a#hero_create {
    width: auto;
    padding: 24px 25px;
    background: linear-gradient(20deg, var(--color-primary-trans), var(--color-content) 60%);
}

#editor_user_btns > a:hover {
    border-color: var(--color-secondary-mid);
    box-shadow: 0 0 10px var(--color-secondary-mid);
    color: var(--color-secondary);
    background: linear-gradient(60deg, var(--color-secondary-trans), var(--color-content) 60%) !important;
}

#editor_user_btns > a#hero_create:hover {
}

#editor_user_btns > a > img {
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

#editor_user_btns > a:hover > img {
    opacity: 0.9;
}

#new_project_loadpatterns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    padding-bottom: 30px;
}

#new_project_loadpatterns .project-file {
    width: auto;
    max-width: unset;
    margin: unset;
}

.board-shape-tabs {
    font-size: 0;
}

.board-shape-tabs strong {
    font-size: 16px;
    display: block;
    padding: 15px;
}

#init_project_select input, #init_kandi_project_select input {
    display: none;
}

.board-shape-content {
    text-align: center;
}

.start-project-btn {
    margin-top: 30px;
    text-transform: uppercase;
    font-weight: 600;
}

.kp-modal .new-board-btn, .kp-modal .new-hex-btn {
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 10px 5px;
    background: linear-gradient(0deg,var(--color-content) 0%,transparent 100%);
    color: var(--color-text);
    font-weight: 700;
    width: 47%;
    max-width: 200px;
    margin: 6px 1%;
    text-align: center;
    font-size: 14px;
    display: inline-block;
    vertical-align: bottom;
    border: 1px solid var(--color-neutral-mid);
}

.theme-dark .kp-modal .new-hex-btn img {
    filter: invert(1);
}

#modal_dims_kandi .new-board-btn {
    min-width: 130px;
}

.new-board-btn.active-btn, .new-hex-btn.active-btn {
    border-color: var(--color-secondary);
    background: linear-gradient(0deg,var(--color-secondary-trans) 0%,transparent 100%);
    color: var(--color-secondary);
    cursor: default;
    box-shadow: 0 0 7px var(--color-secondary-mid);
}

.new-board-btn img {
    display: block;
    opacity: 0.9;
    margin: 0 auto 10px;
    height: auto;
    width: 80px;
    max-width: 100%;
}

.new-board-btn i {
    display: block;
    opacity: 0.9;
    margin: 0 auto;
    font-size: 60px;
}

.new-board-btn:not(.needs-pro):hover img, .new-board-btn.active-btn img, .new-board-btn i, .new-board-btn.active-btn i {
    opacity: 1;
}

.new-board-btn:not(.needs-pro):not(.active-btn):hover, .new-hex-btn:not(.active-btn):hover {
    border-color: var(--color-secondary);
}

.newdoc-select {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    padding: 15px;
    border: 1px solid var(--color-neutral);
    border-radius: var(--border-radius-md);
    background: var(--color-content);
    min-width: 100px;
    color: var(--color-text);
}

#autosave_pop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-content-mid);
    display: none;
}

#autosave_pop #asp_inner {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 98%;
    max-width: 600px;
    transform: translate(-50%, -50%);
    background: var(--color-content);
    border-radius: var(--border-radius-md);
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    padding: 30px;
}

#autosave_pop #asp_inner h3 {
    margin: 0 0 15px;
    font-size: 24px;
    border-bottom: 1px solid var(--color-neutral-mid);
    padding-bottom: 10px;
}

#autosave_pop #asp_inner #asp_img {
    margin-bottom: 20px;
    height: 120px;
    position: relative;
    display: inline-block;
    width: 120px;
}

#autosave_pop #asp_inner #asp_img img {
    position: absolute;
    max-width: 98%;
    max-height: 98%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#autosave_pop #asp_inner #asp_img .ringloader {
    position: absolute;
    top: 43px;
    left: 43px;
}

#resizepreset_select, #pbpreset_select, #pborientation_select, #pborientation_ladder {
    width: 300px;
    color: var(--color-text);
    margin: 0;
}

#pbpreset_select, #pborientation_select, #pborientation_ladder {
    background: var(--color-content);
}

.pblayout-content.active-content {
    display: block;
}

.pblayout-content {
    display: none;
}

.pblayout-content > em {
    font-size: 13px;
    display: block;
    margin-top: 5px;
    font-weight: 600;
    color: var(--color-text-op);
}

.pblayout-content > p {
    font-size: 12px;
    margin: 0;
}

.pblayout-select-wrap {
    display: inline-block;
}

.pblayout-select-wrap label {
    display: block;
    padding-bottom: 2px;
    font-size: 14px;
}

#resizepreset_img, #pbpreset_img, #pborientation_img, #pborientation_img_ladder {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

#resizepreset_info, #pbpreset_info {
    font-size: 12px;
    padding: 10px 5px 0;
}

#trim_notice {
    position: absolute;
    top: 130px;
    left: 2%;
    width: 96%;
    background: var(--color-content);
    border-radius: var(--border-radius-md);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 0 15px 15px;
    z-index: 2;
    border: 1px solid var(--color-neutral-trans);
    display: none;
}

#trim_notice p {
    font-size: 14px;
    line-height: 24px;
}

#trim_notice p > strong {
    font-size: 16px;
}

.pattern-resize-warning {
    display: none;
    font-size: 12px;
    line-height: 21px;
    color: var(--color-text-op);
}

.board-count-select.evenodd {
    border-color: #ffa03f;
}

.board-count-select {
    padding: 10px;
    border: 1px solid var(--color-neutral);
    border-radius: var(--border-radius-md);
    min-width: 100px;
    color: var(--color-text);
    margin: 0 !important;
}

#modal_newdoc .board-count-select {
    background: var(--color-content) !important;
}

.pblayout-by {
    display: inline-block;
    padding: 15px;
}

#modal_dims_square .modal-footer button.inactive, #modal_ai .modal-footer button.inactive {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.board-selection-grid {
    text-align: center;
}

#custom_kandi_dims, #custom_single_dim {
    padding-top: 20px;
}

.manual-dimensions {
    font-size: 0;
    display: block;
    margin: 15px 0;
}

.manual-dimensions > select {
    padding: 15px 30px 15px 15px;
    border: 1px solid var(--color-neutral);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    color: var(--color-text);
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
}

.manual-dimensions > i {
    text-align: left;
    line-height: 0;
    font-size: 16px;
    color: var(--color-text-mid);
    display: inline-block;
    vertical-align: middle;
    padding: 0 15px;
}

.board-selection-grid table {
    display: inline-block;
    vertical-align: middle;
}

.board-selection-grid table td {
    width: 70px;
    height: 70px;
    border: 1px solid #ccc;
    background: var(--color-content) url(/assets/images/square_fade.png) center center no-repeat;
    background-size: contain;
    cursor: pointer;
}

.board-selection-grid table.super td {
    width: 80px;
    height: 120px;
    background: var(--color-content) url(/assets/images/rect_fade.png) center center no-repeat;
}

.board-selection-grid table.mini td {
    width: 66px;
    height: 66px;
}

.board-selection-grid table td.sel-hovered, .board-selection-grid table td:hover {
    border-color: var(--color-primary) !important;
    border-width: 2px;
    background-color: rgba(24, 145, 134, 0.1);
}

.board-selection-grid table td.sel-hovered.protrigger, .board-selection-grid table td.protrigger:hover {
    border-color: #ff8888 !important;
    background-color: rgba(229, 209, 204, 0.2) !important;
}

.board-selection-grid table td.sel-active {
    background: rgba(24, 145, 134, 0.4) url(/assets/images/square_fade.png) center center no-repeat !important;
    border-color: var(--color-content);
    border-width: 2px;
}

.board-selection-grid table td.na {
    background-color: #ddd;
    border-color: #ccc;
    cursor: default;
}

/* WORKSPACE RESIZE */

#resize_direction {
    height: 120px;
    width: 120px;
    position: relative;
}

#resize_surround {
    position: absolute;
    height: 60px;
    width: 60px;
    left: 30px;
    top: 30px;
    border: 1px solid var(--color-neutral);
    z-index: 1;
    background-image: radial-gradient(var(--color-neutral-mid) 1px, transparent 0);
    background-size: 5px 5px;
    background-position: 0 0;
}

#resize_options_pony ~ #resize_direction #resize_surround {
    background-image: radial-gradient(var(--color-content) 2px, transparent 0), radial-gradient(var(--color-content) 2px, transparent 0);
    background-size: 7px 17px;
    background-position: 0px 0px, 4px 9px;
    background-color: var(--color-neutral-trans);
}

.resize-direction {
    position: absolute;
    text-align: center;
    cursor: pointer;
    border-radius: var(--border-radius-md);
}

#resize_top {
    top: 0;
    left: 30px;
    width: 60px;
    height: 30px;
    margin-top: 0px;
}

#resize_right {
    top: 30px;
    right: 0;
    height: 60px;
    width: 30px;
}

#resize_bottom {
    bottom: 0;
    left: 30px;
    width: 60px;
    height: 30px;
    margin-top: 0px;
}

#resize_left {
    top: 30px;
    left: 0;
    height: 60px;
    width: 30px;
}

.resize-direction:after {
    content: '';
    position: absolute;
    border: 12px solid transparent;
}

#resize_top:after {
    border-bottom-color: var(--color-neutral);
    top: 0;
    left: 50%;
    margin-left: -12px;
}

#resize_right:after {
    border-left-color: var(--color-neutral);
    top: 50%;
    right: 0;
    margin-top: -12px;
}

#resize_left:after {
    border-right-color: var(--color-neutral);
    top: 50%;
    left: 0;
    margin-top: -12px;
}

#resize_bottom:after {
    border-top-color: var(--color-neutral);
    bottom: 0;
    left: 50%;
    margin-left: -12px;
}

#resize_surround:hover, #resize_surround.selected {
    border-color: var(--color-secondary);
}

#resize_surround:after {
    display: none;
}

#resize_top:hover:after, #resize_surround:hover ~ #resize_top:after, #resize_top.selected:after, #resize_top.selected:after{
    border-bottom-color: var(--color-secondary);
}

#resize_right:hover:after, #resize_surround:hover ~ #resize_right:after, #resize_right.selected:after, #resize_right.selected:after {
    border-left-color: var(--color-secondary);
}

#resize_bottom:hover:after, #resize_surround:hover ~ #resize_bottom:after, #resize_bottom.selected:after, #resize_bottom.selected:after {
    border-top-color: var(--color-secondary);
}

#resize_left:hover:after, #resize_surround:hover ~ #resize_left:after, #resize_left.selected:after, #resize_left.selected:after {
    border-right-color: var(--color-secondary);
}

#resize_top.selected {
    border-bottom: 1px solid var(--color-secondary);
}

#resize_right.selected {
    border-left: 1px solid var(--color-secondary);
}

#resize_bottom.selected {
    border-top: 1px solid var(--color-secondary);
}

#resize_left.selected {
    border-right: 1px solid var(--color-secondary);
}

.resize-direction.flip {
    transform: rotate(180deg);
}

#resize_top.flip:after {
    top: -5px;
}

#resize_right.flip:after {
    right: -5px;
}

#resize_bottom.flip:after {
    bottom: -5px;
}

#resize_left.flip:after {
    left: -5px;
}

#resize_top.flip.selected {
    top: 23px;
    border-bottom-style: dashed;
}

#resize_right.flip.selected {
    right: 23px;
    border-left-style: dashed;
}

#resize_bottom.flip.selected {
    bottom: 23px;
    border-top-style: dashed;
}

#resize_left.flip.selected {
    left: 23px;
    border-right-style: dashed;
}

#resize_top.flip.selected:after {
    top: 15px;
}

#resize_right.flip.selected:after {
    right: 15px;
}

#resize_bottom.flip.selected:after {
    bottom: 15px;
}

#resize_left.flip.selected:after {
    left: 15px;
}

.resize-direction.disabled {
    border: none !important;
    cursor: default !important;
    pointer-events: none !important;
}

#resize_top.disabled:after {
    border-bottom-color: var(--color-neutral-mid) !important;
}

#resize_right.disabled:after {
    border-left-color: var(--color-neutral-mid) !important;
}

#resize_bottom.disabled:after {
    border-top-color: var(--color-neutral-mid) !important;
}

#resize_left.disabled:after {
    border-right-color: var(--color-neutral-mid) !important;
}

#resize_stats {
    font-size: 13px;
    margin: 50px 0 -25px;
}

/* CUFF STUFF */

#kandi_cuff {
    padding-bottom: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid #c5dddb;
    text-align: center;
}

#kandi_cuff p {
    max-width: 362px;
    margin: -10px auto 10px;
    color: var(--color-text);
    font-size: 13px;
}

#kandi_cuff > button {
    display: inline-block;
    width: 90%;
    max-width: 200px;
    margin: 10px 1% 0;
    padding: 10px 0;
    border: 1px solid #ddd;
    border-radius: 45px;
    cursor: pointer;
    color: var(--color-text-mid);
    font-weight: 600;
    background: var(--color-content);
    font-size: 14px;
}

#kandi_cuff > button.selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 5px var(--color-primary);
    background: #f4fffe;
    color: var(--color-text);
}

#kandi_cuff > button:hover {
    border-color: var(--color-primary);
}

#custom_square_dims input, #custom_kandi_dims input, #custom_single_dim input {
    border-radius: 30px;
}

#custom_square_dims span, #custom_kandi_dims span {
    color: var(--color-text-mid);
    padding: 0 10px;
}

#custom_kandi_dims h1 span, #custom_single_dim h1 span {
    display: block;
    margin: -5px 0 20px;
}

#custom_kandi_dims .input-error {
    font-size: 0.813rem;
}

#why_cuff_explanation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, 0.8);
}

#why_cuff_explanation > div {
    position: absolute;
    background: var(--color-content);
    padding: 20px 25px;
    width: 98%;
    max-width: 500px;
    font-size: 13px;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -40%);
    border-radius: var(--border-radius-md);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

#why_cuff_explanation > div > strong {
    font-size: 14px;
}

#custom_square_dims button {
    margin-left: 10px;
    padding: 12px 15px;
}

#orientation_options img {
    cursor: pointer;
    display: inline-block;
    padding: 5px;
    border-radius: var(--border-radius-sm);
    border: 1px solid #ccc;
    margin: 0 5px;
}

#orientation_options img:hover {
    border-color: var(--color-primary);
}

#orientation_options img.selected {
    box-shadow: 0 0 5px var(--color-primary);
    border: 1px solid var(--color-primary);
}

#kandi_orientation button {
    width: 100%;
}

#ai_section_tabs, #palette_section_tabs {
    border-bottom: 1px solid var(--color-neutral-mid);
    margin-bottom: 20px;
}

#modal_ai #ai_section_tabs button, #palette_section_tabs button {
    padding: 15px 0;
    border-radius: var(--border-radius-sm) 5px 0 0;
    border: 1px solid var(--color-neutral-mid);
    display: inline-block;
    border-bottom-color: transparent;
    max-width: 160px;
    width: 47%;
    font-size: 14px;
    background: transparent;
    font-weight: normal;
    color: var(--color-text);
    margin: 0 1% -1px 0;
    box-shadow: none !important;
    cursor: pointer;
}

#modal_ai #ai_section_tabs button.curtab, #palette_section_tabs button.curtab {
    border-bottom-color: var(--color-content);
    color: var(--color-primary);
    background: var(--color-content) !important;
    cursor: default;
}

#ai_section_bg {
    max-width: 500px;
    width: 100%;
    display: none;
    margin: 0 auto;
}

#ai_section_bg.showing {
    display: block;
}

#modal_color_palettes .palette-color-section {
    display: inline-block;
    vertical-align: top;
    padding: 15px;
    margin: 1%;
    width: 47%;
    border: 1px solid var(--color-neutral-mid);
    height: 50vh;
    border-radius: var(--border-radius-md);
}

#modal_color_palettes .palette-color-section > strong {
    display: block;
    border-bottom: 1px solid var(--color-neutral-mid);
    padding-bottom: 5px;
    color: var(--color-text);
}

#modal_color_palettes .palette-color-section > strong.mobile-tab {
    display: none;
}

#modal_color_palettes .palette-color-section select {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid var(--color-neutral-mid);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
}

#new_palette_unused .kp-color-picker {
    float: left;
    width: 50px;
}

#new_palette_unused .kp-color-picker + select {
    width: auto;
    width: calc(100% - 50px);
}

#custom_palette_color_field {
    margin: 0 8px 0 3px;
}

#modal_color_palettes .palette-color-section .new-colors-content {
    position: relative;
    height: calc(100% - 40px);
}

#palette_overwrite_prompt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    z-index: 1;
}

#palette_overwrite_prompt p {
    font-weight: 700;
    padding: 100px 15px 30px;
    max-width: 500px;
    margin: 0 auto;
}

#palette_overwrite_prompt button {
    margin: 10px;
}

#user_custom_palettes .user-custom-palette {
    padding: 10px 0;
    transition: 0.15s linear;
}

#user_custom_palettes .ucp-header {
    font-size: 14px;
    color: #fff;
    text-shadow: 0 0 1px #000;
    border-radius: var(--border-radius-md);
    height: 55px;
    position: relative;
    cursor: pointer;
    transition: 0.15s linear;
}

#user_custom_palettes .ucp-header:hover {
    opacity: 0.9;
}

#user_custom_palettes .ucp-header > strong {
    padding: 5px 10px 2px 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--border-radius-md) 0;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 66%;
    transition: 0.15s linear;
}

#user_custom_palettes .ucp-header  > a {
    float: right;
    color: #fff;
    text-decoration: none;
    padding: 0px 5px;
    border-radius: 30px;
    font-size: 12px;
    margin: 5px;
    cursor: pointer;
    text-shadow: 0 0 5px #000;
}

#user_custom_palettes .ucp-header > a:hover {
    background: rgba(0, 0, 0, 0.6);
}

#user_custom_palettes .ucp-header-data {
    padding: 2px 15px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0 0 10px 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #000;
    text-shadow: none;
    font-weight: 700;
    transition: 0.15s linear;
}

#user_custom_palettes .ucp-header-data span {
    font-size: 13px;
}

#user_custom_palettes .ucp-header-data i {
    float: right;
    font-size: 18px;
    line-height: 10px;
}

#user_custom_palettes .user-custom-palette.open .ucp-header {
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

#user_custom_palettes .user-custom-palette.open .ucp-header-data i {
    transform: rotate(180deg);
}

#user_custom_palettes .user-custom-palette.open .ucp-header-data {
    border-radius: 0;
}

#user_custom_palettes .ucp-colors {
    display: none;
    padding: 10px 15px;
    border: 1px solid var(--color-neutral-mid);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

#user_custom_palettes .ucp-colors .custom-palette-color {
    display: inline-block;
    vertical-align: top;
    padding: 10px 30px 10px 0px;
    width: 50%;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#user_custom_palettes .ucp-colors .custom-palette-color span {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 5px;
}

.editor-kandi #user_custom_palettes .ucp-colors .custom-palette-color span {
    width: 45px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(150, 150, 150, 0.5);
}

#user_custom_palettes .ucp-colors .custom-palette-color em {
    display: block;
    font-size: 10px;
    color: var(--color-text-mid);
    margin-top: -10px;
    margin-left: 39px;
    font-style: normal;
}

#my_palettes_msg {
    text-align: center;
    background: #d7f9cc;
    padding: 5px;
    color: #12550b !important;
    font-size: 13px;
    display: none;
}

.new-colors-content ul {
    height: calc(100% - 40px);
    overflow: auto;
    padding-bottom: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#modal_ai label.biglabel {
    font-size: 16px;
    color: var(--color-content);
    font-weight: 700;
    background: var(--color-secondary);
    padding: 5px 15px;
    border-radius: var(--border-radius-sm);
    display: inline-block;
    position: relative;
}

#ai_prompt {
    background: var(--color-neutral-trans);
    width: 100%;
    height: 100px;
    resize: vertical;
    border: 1px solid rgba(150, 150, 150, 0.5);
    box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.1);
}

span.input-error.ai-prompt-error {
    float: none;
    display: block;
    margin: -10px 0 10px;
}

#ai_examples p {
    font-size: 13px;
    margin: 0;
    padding: 3px 0;
}

#ai_examples {
    font-size: 14px;
    color: var(--color-text);
    padding-bottom: 30px;
}

#ai_examples > strong {
    color: var(--color-text-mid);
    cursor: default;
}

#ai_examples > strong:hover {
    opacity: 0.8;
}

#ai_examples > strong.open {
    color: var(--color-secondary);
}

#ai_examples > strong i {
    transition: 0.15s linear;
    display: inline-block;
    vertical-align: middle;
    padding-left: 5px;
}

#ai_examples > strong.open i {
    transform: rotate(180deg);
    margin-top: -12px;
    padding-left: 0;
    padding-right: 5px;
}

#ai_examples th {
    text-align: right;
    padding: 10px 15px 5px;
    white-space: nowrap;
    border-top: 1px solid #ddd;
}

#ai_examples td {
    padding: 5px 10px;
    border-top: 1px solid #ddd;
}

#ai_examples tr:first-child th, #ai_examples tr:first-child td {
    border: none;
}

#ai_style {
    padding: 10px 15px;
    border: 1px solid rgba(150, 150, 150, 0.5);
    border-radius: var(--border-radius-sm);
    width: 100%;
    max-width: 400px;
    margin: 10px 0 30px;
}

#modal_ai .modal-body button {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid rgba(150, 150, 150, 0.5);
    border-radius: var(--border-radius-md);
    background: transparent;
    width: 47%;
    margin: 0 1%;
    position: relative;
    padding: 30px 15px 15px 0;
    color: var(--color-primary);
    font-weight: 700;
}

#modal_ai .modal-body button img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}

#modal_ai .modal-body button.selected {
    border-color: var(--color-primary);
    background: rgba(173, 233, 228, 0.1);
    color: var(--color-primary) !important;
    box-shadow: 0 0 5px var(--color-primary);
}

#modal_ai .modal-body button:hover {
    background: rgba(173, 233, 228, 0.1);
}

#modal_ai .modal-body button.sample-count-btn {
    width: 70px;
    padding: 10px 0;
    border-radius: 25px;
    color: var(--color-text-mid);
}

#modal_ai label[for="ai_remove_background"] {
    padding: 15px 0;
}

#ai_background_box {
    margin-top: 50px;
    padding: 15px 15px 0;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-sm);
}

#ai_background_box > strong {
    display: block;
    font-size: 14px;
    color: var(--color-secondary);
    line-height: 16px;
    font-weight: 700;
}

#total_credit_cost {
    float: left;
    font-size: 13px;
}

#total_credit_cost p {
    margin: 0;
    text-align: left;
    padding: 2px 0;
}

#user_prompt {
    padding: 15px;
    border-bottom: 1px solid var(--color-neutral-trans);
}

#user_prompt h3 {
    margin: 0;
    color: var(--color-secondary);
}

#user_prompt p {
    margin: 5px 0 0;
}

#user_prompt > a {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    font-size: 13px;
    margin: 10px 15px 0 0;
    color: var(--color-primary);
}

#user_prompt > a:hover {
    text-decoration: none;
}

#ai_sample_section {
    padding-top: 20px;
    text-align: center;
    padding-bottom: 30px;
}

#ai_sample_section.loading {
    padding-top: 100px;
}

#ai_sample_section > div.sample-img {
    display: inline-block;
    vertical-align: middle;
    height: auto;
    width: 48%;
    margin: 1%;
    max-width: 240px;
    text-align: center;
    position: relative;
    font-size: 0;
}

#ai_sample_section > div.sample-img > img {
    border: 2px solid rgba(150, 150, 150, 0.5);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: 0.1s linear;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 240px;
    display: inline-block;
}

#ai_sample_section > div.sample-img > img[data-type^="kandi"] {
    border-color: transparent;
}

#ai_sample_section > div.sample-img > img:hover, #ai_sample_section > div > img.selected {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 8px var(--color-primary);
}

#continue_ai_btn {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    display: block;
}

#ai_loading_outer {
    width: 100%;
    max-width: 500px;
    height: 10px;
    margin: 0 auto;
    border-radius: var(--border-radius-md);
    background: rgba(155, 155, 155, 0.2);
    position: relative;
    overflow: hidden;
}

#ai_loading_inner {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transition: width 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: var(--border-radius-md);
}

#ai_loading_inner.isloading {
    animation: expandAILoadBar 60s linear 0s 1 normal;
}

#ai_sample_section > p {
    font-size: 13px;
    text-align: left;
    width: 100%;
    max-width: 500px;
    margin: 5px auto;
    color: var(--color-text);
}

#ai_section_history .history-record {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin: 1%;
    padding: 10px;
    border: 1px solid var(--color-neutral-mid);
    border-radius: var(--border-radius-md);
    position: relative;
}

#ai_section_history .history-record.needs-pro {
    border: 1px dashed #ddd;
}

#ai_section_history .history-record.needs-pro:after {
    content: '\4e';
    font-family: kandi-pad;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-md);
    font-size: 24px;
    text-align: right;
    padding: 11px 15px;
    box-sizing: border-box;
    color: #ffca00;
}

#ai_section_history {
    font-size: 13px;
}

#ai_section_history .history-images {
    font-size: 0;
    height: 258px;
    position: relative;
    text-align: left;
    color: var(--color-text-mid);
}

#ai_section_history .history-record[data-images="0"] .history-images {
    font-size: 13px;
    padding-top: 49%;
    text-align: center;
}

#ai_section_history .history-images > i {
    display: inline-block;
    vertical-align: middle;
}

#ai_section_history .history-images .history-image {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    height: 50%;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    position: relative;
    overflow: hidden;
}

/*
#ai_section_history .history-images .history-image:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(50, 50, 50, 0.8) 1px, rgba(200, 200, 200, 0.4) 0);
    background-size: 3px 3px;
    mix-blend-mode: hard-light;
}

#ai_section_history .history-images .history-image.history-pony:after {
    background-image: linear-gradient(rgba(200, 200, 200, 0.7) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 200, 200, 0.7) 1px, transparent 1px), linear-gradient( rgba(50, 50, 50, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(50, 50, 50, 1) 1px, transparent 1px);
    background-size: 4px 8px;
}
*/

#ai_section_history .history-images .history-image:hover {
    opacity: 0.8;
    border-color: var(--color-primary);
}

#ai_section_history .history-images .history-image.selected-pattern {
    opacity: 1;
    border-color: var(--color-primary);
    box-shadow: 0 0 5px var(--color-primary);
}

#ai_section_history .history-images .history-image img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#ai_section_history .history-prompt-wrapper {
    border-top: 1px solid var(--color-neutral-mid);
    padding: 5px 5px 0;
    margin-top: 10px;
}

#ai_section_history .history-prompt-wrapper > a {
    text-decoration: none;
    color: var(--color-primary);
}

#ai_section_history .history-prompt-wrapper > a.prompt-showing, #ai_section_history .history-prompt-wrapper > a:hover {
    text-decoration: underline;
}

#ai_section_history .history-prompt-wrapper > .history-prompt {
    display: none;
}

.pegboard {
    border: 2px solid var(--color-neutral-op);
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0;
    cursor: url('/assets/images/icons/cursor-place.png') 7 8, cell;
    box-sizing: content-box;
    background-size: 0 0;
    background-position: 0 0;
    background-repeat: no-repeat;
    overflow: hidden;
}

.pegboard.flood {
    cursor: url('/assets/images/icons/cursor-flood.png') 22 13, crosshair;
}

.pegboard.erase {
    cursor: url(/assets/images/icons/cursor-erase.png) 15 6, not-allowed;
}

.pegboard.text {
    cursor: text;
}

.pegboard.replace {
    cursor: url(/assets/images/icons/cursor-swap.png) 24 2, crosshair;
}

.pegboard.dropper {
    cursor: url(/assets/images/icons/cursor-dropper.png) 5 20, pointer !important;
}

.pegboard.pan {
    cursor: grab !important;
}

.pegboard.pony-board {
    border: none;
}

.pegboard.has-bg-image.noshow {
    background-image: none !important;
}

.square .pegboard {
    border-radius: var(--border-radius-sm);
}

.corner-cover {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none;
    border-color: transparent;
}

.corner-cover.tl {
    top: 0;
    left: 0;
    border-width: 208px 127px 0 0;
    border-top-color: var(--color-content);
}

.corner-cover.bl{
    bottom: 0;
    left: 0;
    border-width: 208px 0 0 127px;
    border-left-color: var(--color-content);
}

.corner-cover.tr {
    top: 0;
    right: 0;
    border-width: 0 127px 208px 0;
    border-right-color: var(--color-content);
}

.corner-cover.br {
    bottom: 0;
    right: 0;
    border-width: 0 0 208px 127px;
    border-bottom-color: var(--color-content);
}

#pegboard_svg_wrapper {
    background: rgba(230, 230, 230, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#pegboard_content, #pegboard_canvas, #pegboard_guides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#pegboard_guides .pbline, #editor_rulers .pbguide {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -1px;
    width: 2px;
    height: 100%;
    background: rgba(150, 150, 150, 0.8);
    pointer-events: none !important;
}

#editor_rulers .pbguide {
    height: 100vh;
    width: 1px;
    margin-left: 0;
}

#pegboard_guides .pbline.pbline-horiz, #editor_rulers .pbguide.pbguide-horiz {
    margin-left: 0;
    margin-top: -1px;
    height: 2px;
    width: 100%;
}

#editor_rulers .pbguide.pbguide-horiz {
    width: 100vw;
    height: 1px;
    margin-top: 0;
}

.hex .pegboard {
    border: none;
    overflow: visible;
}

.hex #pegboard_canvas {
    margin: -2px 0 0 -2px;
}

.hex #pegboard_svg_wrapper {
    background: transparent;
}

.pegboard.has-bg-image:not(.noshow) #pegboard_svg_wrapper{
    background: rgba(230, 230, 230, 0.1);
}

#pegboard_svg_wrapper > .peg {
    display: inline-block;
    position: relative;
    border-radius: 2px;
}

#pegboard_svg_wrapper > .peg.pegged {
    overflow: hidden;
}

#pegboard_svg_wrapper:not(.large) > .peg {
    transition: background 0.5s linear;
}

#editor_workspace.hex #pegboard_svg_wrapper > .peg {
    border-radius: 50%;
}

#pegboard_svg_wrapper > .peg[data-color="var(--color-base)"] {
    background: rgba(238, 238, 238, 0.8) !important;
}

#pegboard_svg_wrapper #peg_hover_ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: 2;
    display: none;
    pointer-events: none !important;
}

#pegboard_svg_wrapper #bead_text_input {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    z-index: 2;
    border: 3px dotted rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5);
    color: #000;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    font-family: Courier, monospace;
}

.editor-kandi #pegboard_svg_wrapper #peg_hover_ring {
    border-radius: 6px;
}

#pegboard_svg_wrapper > .peg:hover:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.8), inset 0 0 4px rgba(255, 255, 255, 0.8);
}

#pegboard_svg_wrapper > .peg > .peg-inner {
    content: '';
    width: 46%;
    height: 46%;
    left: 27%;
    top: 27%;
    position: absolute;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    z-index: 1;
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
}

#pegboard_svg_wrapper > .peg.pegged > .peg-inner {
    border-width: 7px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-shadow: none;
}

#pegboard_svg_wrapper > .peg.pegged.highlighted {
    border: 1px dashed var(--color-content);
}

#pegboard_svg_wrapper > .peg.pegged.highlighted > span.peg-inner {
    box-shadow: inset 0 0 0px 2px rgba(0, 0, 0, 0.5);
    border-width: 0px;
    border-radius: 0px;
}

#pegboard.nopegs #pegboard_svg_wrapper {
    opacity: 0.1;
}

.pony-board #pegboard_svg_wrapper {
    background: transparent;
}

.pony-board #pegboard_svg_wrapper > .peg {
    border-radius: 4px;
    opacity: 0.3;
}

.pony-board #pegboard_svg_wrapper > .peg.pegged {
    border-radius: 4px;
    opacity: 1;
}

.pony-board #pegboard_svg_wrapper > .peg:not(.pegged):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--border-radius-md);
    margin-left: -2px;
    margin-top: -2px;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.pony-board #pegboard_svg_wrapper > .peg:hover {
    opacity: 0.6;
}

.pony-board #pegboard_svg_wrapper > .peg.pegged:hover {
    opacity: 0.8;
}

.pony-board #pegboard_svg_wrapper > .peg > .peg-inner {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.9);
    background: var(--color-neutral-trans);
}

.pony-board #pegboard_svg_wrapper > .peg:hover:after {
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.kandi-vx .pony-board #pegboard_svg_wrapper > .peg, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg > .peg-inner, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg:hover:after {
    border-radius: 8px;
}

.kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-diag, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-diag > .peg-inner, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-diag:hover:after {
    border-radius: 15px;
}

.kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-mid, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-mid > .peg-inner, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-mid:hover:after {
    border-radius: 22px;
}

.kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-end, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-end > .peg-inner, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-end:hover:after {
    border-radius: 22px 22px 8px 8px;
}

.kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-start, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-start > .peg-inner, .kandi-vx .pony-board #pegboard_svg_wrapper > .peg.vx-start:hover:after {
    border-radius: 8px 8px 22px 22px;
}

#editor_wrapper:not(.no-project) *:not(input) {
    user-select: none;
}

#editor_menubar {
    position: relative;
    z-index: 2;
    background: var(--color-content);
    height: 45px;
    font-size: 0;
    border-bottom: 1px solid var(--color-neutral-mid);
}

#editor_menu_items {
    display: inline-block;
    vertical-align: baseline;
    height: 100%;
}

#editor_menubar .menu-category, #editor_menubar #editor_history, #editor_menubar #editor_save{
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    color: var(--color-text);
    height: 100%;
    margin: 0;
    list-style: none;
    position: relative;
}

#editor_menubar .menu-category > strong, #editor_menubar #editor_history > li {
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    padding: 14px 15px 0;
    display: block;
    height: 100%;
}

#editor_menubar .menu-category > strong > i, #editor_menubar #editor_history > li > i {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    padding-right: 5px;
    line-height: 1.7;
    margin-top: -3px;
}

#editor_menubar .menu-category > strong:hover, #editor_menubar .menu-category.open > strong {
    color: var(--color-secondary);
}

#editor_menubar .menu-category > ul, #editor_menubar #editor_save > ul {
    display: none;
    position: absolute;
    top: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    left: 0;
    background: var(--color-content);
    box-shadow: 1px 8px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-text-trans);
    border-top: none;
    min-width: 190px;
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

#editor_menubar #editor_save > ul {
    border: none;
    left: auto;
    right: 0;
    background: var(--color-secondary);
    font-size: 14px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

#editor_menubar .menu-category > ul > li, #editor_menubar #editor_save > ul > li {
    padding: 10px 15px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--color-text);
    position: relative;
    border-radius: 0;
    display: block;
    font-weight: 500;
}

#editor_menubar .menu-category > ul > li:last-child, #editor_menubar #editor_save > ul > li:last-child {
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

#editor_menubar .menu-category > ul > li:not(.btn-save):not(.btn-saveas).disabled {
    opacity: 0.5;
    cursor: default;
}

#editor_menubar .menu-category > ul > li:not([data-target="#modal_login"]).disabled {
    pointer-events: none;
}

#editor_menubar .menu-category > ul > li.divider-top {
    border-top: 1px dashed var(--color-text-trans);
}

#editor_menubar .menu-category > ul > li:hover, #editor_menubar #editor_save > ul > li:hover {
    background: var(--color-content-light);
    color: var(--color-secondary);
}

#editor_menubar .menu-category > ul > li > span {
    color: var(--color-text-op);
    font-size: 10px;
}

#editor_menubar .menu-category > ul > li.comingsoon {
    pointer-events: none;
    opacity: 0.3;
}

#editor_menubar .menu-category > ul > li.comingsoon:after {
    content: '- Coming Soon -';
    position: absolute;
    top: 13px;
    right: 5px;
    text-align: right;
    font-size: 10px;
}

#editor_menubar #editor_history {
    padding-left: 12px;
    margin-left: 15px;
    border-left: 1px dashed var(--color-neutral-mid);
}

#editor_menubar #editor_history > li:hover {
    color: var(--color-primary);
}

#editor_menubar #editor_history > li {
    display: inline-block;
    font-size: 11px;
}

#editor_menubar #editor_history > li > i {
    font-size: 26px;
    line-height: 0;
    margin-top: -8px;
}

#editor_menubar #editor_history > li.disabled {
    pointer-events: none;
    opacity: 0.3;
}

#editor_menubar #editor_history > li#clear_board > i {
    font-size: 21px;
}

#editor_menubar #editor_history > li:not(#clear_board) {
    padding: 16px 10px;
}

#editor_menubar #editor_history > li:not(#clear_board) > i {
    padding: 0 5px;
}

#editor_menubar #editor_save {
    float: right;
}

#editor_menubar #editor_save > button {
    color: #fff;
    border: none;
    height: 100%;
    background: var(--color-secondary);
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    box-shadow: none !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

#editor_menubar #editor_save > button > strong {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    padding: 13px 15px 0;
    border-radius: 0;
}

#editor_menubar #editor_save > button > strong > i {
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
    font-size: 1.125rem;
}

#editor_menubar #editor_save > button > strong > em {
    font-style: normal;
}

#editor_menubar #editor_save > button > span {
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    padding: 10px 10px 0 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
}

#editor_menubar #editor_save > button > strong:hover, #editor_menubar #editor_save > button > span:hover, #editor_menubar #editor_save.open > button > span {
    background: rgba(255, 255, 255, 0.1);
}

#editor_menubar #editor_save > ul > li {
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

#editor_menubar #editor_save > ul > li:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

#editor_menubar #editor_save > ul > li > span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
}

#editor_menubar #editor_save > button > span > i {
    transition: 0.15s linear;
    display: inline-block;
    line-height: 0;
}

#editor_menubar #editor_save.open > button > span > i {
    transform: rotate(180deg);
}

#editor_menubar.disabled #editor_menu_items, #editor_menubar.disabled #editor_save, #editor_footbar.disabled {
    opacity: 0.6;
    pointer-events: none !important;
}

#editor_logo {
    position: absolute;
    top: 13px;
    left: 50%;
    margin-left: -64px;
}

#editor_toolbar, #editor_sidebar {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-content);
    padding: 0 0 35px;
    border-top: 45px solid transparent;
    height: 100%;
    width: 160px;
    text-align: center;
    z-index: 1;
}

#editor_sidebar {
    left: auto;
    right: 0;
    width: 208px;
    border-left: 1px solid var(--color-neutral-mid);
}

#editor_toolbar > section label {
    text-align: left;
    display: block;
    padding: 15px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-text-op);
    z-index: 1;
    position: relative;
}

#editor_toolbar > section#toolbar_colors label:first-letter {
    text-decoration:  underline;
}

#editor_toolbar ul, #editor_sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0;
    color: var(--color-text);
}

#editor_toolbar #toolbar_tools {
    text-align: left;
}

#editor_toolbar #toolbar_tools ul {
    line-height: 0;
    text-align: left;
    display: inline;
}

#editor_toolbar #toolbar_tools ul li {
    display: inline-block;
    vertical-align: bottom;
    width: 46%;
    font-size: 28px;
    padding: 5px;
    margin: 3px 0 0 2%;
    height: auto;
    cursor: pointer;
    text-align: center;
    position: relative;
}

#editor_toolbar #toolbar_tools ul li span {
    font-size: 11px;
    text-transform: uppercase;
    display: block;
    color: var(--color-text-mid);
    font-weight: 600;
    padding: 11px 0;
}

#editor_toolbar #toolbar_tools ul li span em {
    font-style: normal;
}

#editor_toolbar:not(.panning):not(.picking) #toolbar_tools ul li.fill-method.selected, #editor_toolbar ul li.fill-method.selected span {
    color: var(--color-primary) !important;
}

#editor_toolbar #toolbar_tools ul li#eyedropper.selected, #editor_toolbar ul li#pan.selected {
    color: var(--color-primary) !important;
}

#editor_toolbar #toolbar_tools ul li#eyedropper.selected ~ .fill-method.selected, #editor_toolbar.panning ul li.fill-method {
    color: var(--color-text) !important;
}

#editor_toolbar #toolbar_tools .fill-method span em {
    text-decoration: underline;
}

#editor_toolbar #toolbar_tools ul li#pan i {
    font-size: 26px;
}

#editor_toolbar #toolbar_tools ul#fill_methods li#mobile_fill_method_trigger {
    display: none;
}

#editor_rulers {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none !important;
    overflow: hidden;
    display: none;
    z-index: 1;
}

#editor_rulers .ruler-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--color-content);
    border-right: 1px solid var(--color-neutral-trans);
    border-bottom: 1px solid var(--color-neutral-trans);
    pointer-events: all;
}

#editor_rulers .ruler-bar#ruler_x {
    width: 100%;
    border-right: none;
    top: 44px;
}

#editor_rulers .ruler-bar#ruler_y {
    height: 100%;
    border-bottom: none;
    left: 160px;
}

#editor_rulers .ruler-bar#ruler_menu {
    cursor: pointer;
    color: var(--color-text-op);
    text-align: center;
    padding-top: 4px;
    top: 44px;
    left: 160px;
    z-index: 4;
}

#ruler_menu_options {
    position: fixed;
    top: 44px;
    left: 184px;
    background: var(--color-content);
    z-index: 5;
    border-radius: 0 0 5px 0;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    display: none;
    pointer-events: all;
}

#editor_rulers .ruler-bar#ruler_menu:hover, #editor_rulers .ruler-bar#ruler_menu.open {
    color: var(--color-secondary);
}

#ruler_menu.open + #ruler_menu_options {
    display: block;
}

#ruler_menu_options #ruler_units {
    padding: 10px 0 5px;
    margin: 0;
    list-style: none;
}

#ruler_menu_options > a {
    cursor:  pointer;
    display: block;
    padding: 10px 15px 6px 10px;
    text-decoration:  none;
    color: var(--color-text);
    font-size: 13px;
    border-top: 1px solid var(--color-neutral-mid);
}

#ruler_menu_options > a.editor-remove-guides {
    display: none;
}

#ruler_menu_options > a:hover {
    color: var(--color-primary);
}

.editor-guide-btn {
    display: none;
}

#ruler_menu_options #ruler_units li {
    display: block;
    cursor: pointer;
    padding: 5px 10px 5px 35px;
    font-size: 14px;
    position: relative;
}

#ruler_menu_options #ruler_units li:before {
    content: '';
    width: 11px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--color-text-mid);
    position: absolute;
    top: 6px;
    left: 10px;
    line-height: 10px;
    padding-left: 1px;
}

#ruler_menu_options #ruler_units li.checked-unit {
    cursor: default;
}

#ruler_menu_options #ruler_units li.checked-unit:before {
    content: '\e8b6';
    font-family: 'kandi-pad';
    color: var(--color-primary);
    border-color: var(--color-primary);
}

#ruler_menu_options #ruler_units li:not(.checked-unit):hover {
    color: var(--color-primary);
}

#ruler_menu_options #ruler_units li:hover:before {
    border-color: var(--color-primary);
}

#ruler_menu_options > a > i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 14px;
}

#editor_rulers .ruler-bar-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
}

#editor_rulers .ruler-bar-inner span {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    text-align: right;
    z-index: 1;
}

#editor_rulers .ruler-bar-inner span em {
    font-style: normal;
    display: block;
    position: absolute;
    bottom: 50%;
    right: 0;
    line-height: 1;
    background: var(--color-content);
    padding: 1px 2px;
    transform: translate(50%, 50%);
}

#editor_rulers #ruler_y .ruler-bar-inner span em {
    bottom: 0;
    right: 50%;
}

#editor_rulers .ruler-bar-inner span:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 60%;
    background: var(--color-neutral-op);
    margin-right: -1px;
}

#editor_rulers #ruler_y .ruler-bar-inner span:before {
    bottom: 0;
    right: 0;
    width: 60%;
    height: 1px;
    margin-left: 0;
    margin-bottom: -1px;
}

#editor_rulers.peg .ruler-bar-inner span {
    text-align: center;
}

#editor_rulers.peg .ruler-bar-inner span em {
    right: 50% !important;
    bottom: 50% !important;
}

#editor_rulers.peg .ruler-bar-inner span:before {
    right: 50%;
}

#editor_rulers.peg #ruler_y .ruler-bar-inner span:before {
    bottom: 50%;
}

#editor_rulers #ruler_x .ruler-bar-inner span.nodigitmulti:nth-child(even):before {
    height: 30%;
}

#editor_rulers #ruler_y .ruler-bar-inner span.nodigitmulti:nth-child(even):before {
    width: 30%;
}

#editor_rulers .ruler-bar-inner span:not(.rulerindex).nodigit {
    z-index: 0;
}

#editor_rulers .ruler-bar-inner span:not(.rulerindex).nodigit em {
    opacity: 0;
    font-size: 0;
}

#editor_rulers .ruler-bar-inner span.rulerindex {
    font-weight: 600;
    color: var(--color-primary);
    z-index: 3;
}

#editor_rulers #ruler_x .ruler-bar-inner span.rulerindex:before {
    height: 100%;
    background: var(--color-primary);
}

#editor_rulers #ruler_y .ruler-bar-inner span.rulerindex:before {
    width: 100%;
    background: var(--color-primary);
}

#editor_rulers .ruler-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--color-text-trans);
    z-index: 2;
}

#editor_rulers #ruler_y .ruler-cursor {
    width: 100%;
    height: 1px;
}

#guide_grid_settings p input {
    display: inline-block;
    margin-right: 10px;
}

#guide_grid_settings p {
    margin: 5px 0 0;
    padding-top: 15px;
    border-top: 1px solid var(--color-neutral-mid);
}

#guide_grid_settings > input {
    width: 100px;
    background: transparent;
    box-shadow: none;
    margin: 5px 5px 15px;
}

#guide_grid_settings p:first-child {
    border: none;
    padding: 0;
    margin: 0;
}

#guide_grid_settings {
    border-bottom: 1px solid var(--color-neutral-mid);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

#guide_grid_settings > select {
    padding: 12px 15px;
    border: 1px solid var(--color-neutral-mid);
    border-radius: var(--border-radius-md);
    color: var(--color-text);
    font-size: 16px;
    background: var(--color-content);
}

#guide_grid_colors > label, #guide_grid_settings > label {
    font-size: 14px;
    font-weight: 600;
    display: block;
}

#guide_grid_colors span {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-md);
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #999;
    margin: 0 10px 10px 0;
    text-align: center;
    padding-top: 8px;
    color: var(--color-content);
    font-family: 'kandi-pad';
    cursor: pointer;
}

#guide_grid_colors span:hover {
    opacity: 0.7;
}

#guide_grid_colors span.selected-color:after {
    content: '\e8b6';
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

#floating_info_bar {
    position: fixed;
    left: 160px;
    top: 44px;
    font-size: 9px;
    border: 1px solid var(--color-neutral-mid);
    background: var(--color-content);
    padding: 5px 10px;
    border-radius: 0 0 5px 0;
    line-height: 1;
    font-weight: 600;
    color: var(--color-text-op);
}

#floating_info_bar.hasruler {
    left: 183px;
    top: 67px;
}

#floating_info_bar strong {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
}

#floating_info_bar span {
    padding-left: 5px;
}

#floating_info_bar span em {
    text-transform: uppercase;
    font-style: normal;
}

#floating_info_bar span:after {
    content: '|';
    padding-left: 5px;
    color: var(--color-text-mid);
}

#floating_info_bar:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 14px;
    border-radius: 0 0 5px 0;
    background: var(--color-content);
}

.sidebar-group {
    padding: 15px;
    font-size: 12px;
    text-align: left;
}

.sidebar-group > strong {
    text-transform: uppercase;
    padding-bottom: 10px;
    display: block;
}

.sidebar-stat {
    padding-bottom: 5px;
}

.sidebar-stat:last-child {
    padding-bottom: 0;
}

.sidebar-stat > span {
    float: right;
}

#ref_photo_tool {
    padding: 20px 0;
    border-radius: var(--border-radius-md);
    text-align: center;
    height: 100px;
    font-size: 13px;
    font-weight: 600;
    border: 1px dashed var(--color-neutral-mid);
    cursor: pointer;
    background-color: var(--color-base);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

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

#ref_photo_tool.is-dragover {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 30px var(--color-primary-mid);
}

#ref_photo_tool > * {
    pointer-events: none;
}

#ref_photo_tool > i {
    display: block;
    font-size: 30px;
}

#ref_photo_tool.has-img > * {
    display: none;
    position: relative;
    z-index: 1;
}

#ref_photo_tool.has-img:hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-base);
    opacity: 0.8;
    border-radius: var(--border-radius-md);
}

#ref_photo_tool.has-img:hover > * {
    display: block;
}

#editor_sidebar ul {
    margin: 0 -15px;
    border-top: 1px solid var(--color-neutral-mid);
}

#editor_sidebar ul li {
    padding: 10px 15px 5px;
    white-space: nowrap;
    width: 100%;
    border-bottom: 1px solid var(--color-neutral-mid);
    font-size: 13px;
    font-weight: 500;
    color: var(
    --color-text);
    line-height: 18px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    transition: .15s linear;
}

#editor_sidebar ul li span {
    transition: 0.15s linear;
    opacity: 1;
}

#editor_sidebar #sidebar_layers ul li span em {
    float: right;
    font-style: normal;
    color: var(--color-text-mid);
    margin-right: -5px;
    font-size: 11px;
    line-height: 21px;
}

#editor_sidebar ul li i.kp-eye-slash {
    opacity: 0.4;
}

#editor_sidebar ul li.label {
    display: inline-block;
    width: auto;
    padding: 10px 10px 6px;
}

#editor_sidebar ul li i {
    display: inline-block;
    vertical-align: middle;
    font-size: 21px;
    margin-right: 15px;
}

#editor_sidebar ul li.label i {
    margin-right: 0;
    transition: .15s linear;
}

.noref #ref_photo_tool {
    display: none !important;
    pointer-events: none !important;
}

#editor_toolbar ul li.cur-tool {
    color: var(--color-primary);
    cursor: default;
}

#editor_toolbar ul li:not(.disabled):hover *, #editor_sidebar ul li:not(.disabled):hover * {
    color: var(--color-primary) !important;
}

#editor_toolbar ul li.disabled, #editor_sidebar ul li.disabled, #editor_toolbar ul li.disabled span, #editor_sidebar ul li.disabled span {
    color: var(--color-text-mid) !important;
    cursor: default;
}

#editor_sidebar ul li[default-disabled] {
    pointer-events: none !important;
}

#editor_sidebar ul li.disabled {
    margin-bottom: 0;
}

#editor_sidebar ul li.disabled:not([data-target="#modal_login"]):active {
    pointer-events: none;
}

#editor_toolbar ul li.disabled img, #editor_sidebar ul li.disabled img {
    opacity: 0.3;
}

#editor_toolbar ul li:not(.disabled):hover img, #editor_sidebar ul li:not(.disabled):hover img {
    opacity: 0.6;
}

#editor_toolbar #toolbar_colors #bead_color_picker {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    background: #ddd;
    border: 1px solid var(--color-content);
    box-shadow: 0 0 0 1px var(--color-neutral);
    margin: 8px auto 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#editor_toolbar #toolbar_colors #bead_color_picker:before {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    border: 5px solid rgba(255, 255, 255, 0.9);
    border-top-color: transparent;
    border-left-color: transparent;
}

#editor_toolbar #toolbar_colors #bead_color_picker:after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    border: 3px solid #000;
    border-top-color: transparent;
    border-left-color: transparent;
}

.editor-kandi #editor_toolbar #toolbar_colors #bead_color_picker.glitter:before, .editor-kandi #editor_toolbar #toolbar_colors #bead_color_picker.clear:before, .editor-kandi #editor_toolbar #toolbar_colors #bead_color_picker.glow:before, .editor-kandi #editor_toolbar #toolbar_colors #bead_color_picker.pearl:before {
    content: 'Glitt';
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    border: none;
    z-index: 1;
    text-shadow: 0 0 2px #000;
    bottom: 0;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
}

.editor-kandi #editor_toolbar #toolbar_colors #bead_color_picker.clear:before {
    content: 'Clear';
}

.editor-kandi #editor_toolbar #toolbar_colors #bead_color_picker.glow:before {
    content: 'Glow';
}

.editor-kandi #editor_toolbar #toolbar_colors #bead_color_picker.pearl:before {
    content: 'Pearl';
}

#editor_toolbar #toolbar_colors #bead_color_picker.glitter:after {
    background-image: linear-gradient(0deg, rgba(220, 220, 220, 0.1) 1px, transparent 10px), radial-gradient(rgba(220, 220, 220, 0.5) 1px, transparent 3px), radial-gradient(rgba(150, 150, 150, 0.5) 1px, transparent 3px);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: rotate(20deg);
}

#editor_toolbar #toolbar_colors #bead_color_picker.clear:after {
    background-image: linear-gradient(45deg, var(--color-content) 50%, var(--color-content-op) 52%, var(--color-content-mid) 80%);
    opacity: 0.7;
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#editor_toolbar #toolbar_colors #bead_color_picker.glow:after {
    background-image: radial-gradient(#fff 15%, rgba(0, 0, 0, 0.1) 70%, #fff 100%);
    opacity: 0.8;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    mix-blend-mode: hard-light;
}

#editor_toolbar #toolbar_colors #bead_color_picker.pearl:after {
    background-image: linear-gradient(#fff 0%, rgba(0, 0, 0, 0.5) 20%, #fff 50%, rgba(0, 0, 0, 0.5) 80%, #fff 100%);
    opacity: 0.2;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    mix-blend-mode: luminosity;
}

#editor_toolbar #toolbar_colors #bead_color_picker.stripe {
    background: repeating-linear-gradient(135deg, attr(data-secondary type(<color>), rgba(255, 255, 255, 0.2)) 0 10px, transparent 10px 20px);
}

#editor_toolbar #toolbar_colors #bead_color_picker input {
    display: none;
}

#editor_toolbar #toolbar_colors #selected_color_name {
    font-size: 12px;
    color: var(--color-text-op);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    padding: 5px;
}

#toolbar_recent {
    overflow: hidden;
    position: relative;
}

#container *::-webkit-scrollbar, .kp-modal-wrapper *::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

#editor_toolbar #toolbar_recent > label, #editor_toolbar #toolbar_recent #mobile_recent_pane > label:not(.palette-close) {
    text-transform: none;
    margin-top: 15px;
    margin-bottom: -1px;
    padding: 5px;
    display: inline-block;
    text-align: center;
    width: 45%;
    vertical-align: bottom;
    border: 1px solid var(--color-neutral-mid);
    border-bottom: 1px solid transparent;
    z-index: 1;
    border-radius: var(--border-radius-sm) 5px 0 0;
    cursor: pointer;
}

#editor_toolbar #toolbar_recent > label i {
    display: none;
}

#editor_toolbar #toolbar_recent > label.selected {
    cursor: default;
    border-bottom-color: var(--color-content);
    box-shadow: 0 3px 5px var(--color-content);
}

#editor_toolbar #toolbar_recent > label:not(.selected):hover {
    background: var(--color-base);
    color: var(--color-primary);
    border-bottom-color: var(--color-neutral-mid);
}

#toolbar_recent ul {
    height: calc(100% - 42px);
    padding-bottom: 5px;
    padding-top: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
    border-top: 1px solid var(--color-neutral-mid);
}

#toolbar_recent ul.selected {
    display: block;
}

#toolbar_recent ul.empty:after {
    content: '-- empty--';
    font-size: 14px;
    color: var(--color-text-mid);
    text-align: center;
    padding-top: 15px;
    display: block;
}

#editor_toolbar #toolbar_recent ul li {
    font-size: 11px;
    color: var(--color-text-op);
    text-align: left;
    padding: 10px 0 10px 12px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    height: 45px;
    cursor: pointer;
    position: relative;
}

#editor_toolbar #toolbar_recent ul#colorlist_recent li:first-child {
    display: none;
}

#editor_toolbar #toolbar_recent ul li:hover:before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 0;
    border: 4px solid transparent;
    border-left-color: var(--color-primary);
}

#editor_toolbar #toolbar_recent ul li span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--color-content);
    box-shadow: 0 0 0 1px var(--color-neutral);
    margin-right: 10px;
    position: relative;
}

#editor_toolbar #toolbar_recent ul#colorlist_pattern li span {
    color: #fff !important;
    text-align: center;
    line-height: 28px;
    text-shadow: 0 0 3px #000;
    font-size:  0;
}

#editor_toolbar #toolbar_recent ul#colorlist_pattern li:hover span {
    font-size: 10px;
}

#editor_toolbar #toolbar_recent ul li em {
    font-style: normal;
    width: 100px;
    overflow: hidden;
}

.editor-kandi #editor_toolbar #toolbar_colors #selected_color_name {
    display: none;
}

.editor-kandi #editor_toolbar #toolbar_recent ul li em {
    display: none;
}

.editor-kandi #editor_toolbar #toolbar_recent ul li {
    display: inline-block;
    vertical-align: middle;
    height: 40px;
    width: 47px;
    padding: 5px;
}

.editor-kandi #editor_toolbar #toolbar_recent ul li span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-sm);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.editor-kandi #editor_toolbar #toolbar_recent ul {
    text-align: left;
    padding: 5px;
}

.editor-kandi #editor_toolbar #toolbar_recent ul li:hover span {
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
}

.editor-kandi #editor_toolbar #toolbar_recent ul li:hover:before {
    display: none;
}

#editor_toolbar #toolbar_palette, #editor_toolbar #mobile_recent_pane {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    background: var(--color-content);
    border-left: 1px solid var(--color-neutral-mid);
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

#editor_toolbar #toolbar_palette.open {
    width: 301px;
    overflow: unset;
    pointer-events: all;
    border-left-color: var(--color-primary-mid);
    box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
}

#editor_toolbar #toolbar_palette:before, #editor_toolbar #mobile_recent_pane:before {
    content: '';
    position: absolute;
    top: 297px;
    right: 100%;
    border: 18px solid transparent;
    border-right-color: var(--color-neutral-trans);
}

.editor-kandi #editor_workspace:not(.kandi-vx) ~ #editor_toolbar #toolbar_palette:before, .editor-kandi #editor_workspace:not(.kandi-vx) ~ #editor_toolbar #mobile_recent_pane:before {
    top: 357px;
}

#editor_toolbar #toolbar_palette.open:before {
    border-right-color: var(--color-primary-mid);
}

#editor_toolbar #toolbar_palette .palette-close, #editor_toolbar #mobile_recent_pane .palette_close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    padding: 5px;
}

#editor_toolbar #toolbar_palette .palette-close:hover {
    color: #f58585;
}

#palette_select_wrap > button, #palette_selector {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 45px);
}

#palette_select_wrap {
    padding: 10px 15px;
    position: relative;
    z-index: 1;
}

#palette_select_wrap > button {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 40px;
    font-size: 21px;
    height: 41px;
    border-color: var(--color-neutral-op);
    margin-right: -1px;
    border-radius: 3px 0 0 3px;
    color: var(--color-text-op) !important;
    padding: 3px 0 0;
}

#palette_select_wrap > button:hover {
    color: var(--color-primary);
}

#palette_selector {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 40px);
}

#palette_selector select {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-neutral-op);
    border-radius: 0 3px 3px 0;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    background: var(--color-content);
}

#palette_selector select:hover {
    border-color: var(--color-neutral);
}

#palette_color_options {
    position: relative;
    z-index: 1;
}

#toolbar_palette.open #palette_color_options {
    overflow: auto;
}

#instant_image_trigger.open {
    color: var(--color-primary);
    padding-left: 30px;
    position: relative;
}

#instant_image_trigger.open:before {
    position: absolute;
    content: '';
    top: 14px;
    left: 0;
    border: 18px solid transparent;
    border-left-color: var(--color-primary-mid);
}

#editor_sidebar #instant_image_trigger i {
    font-size: 36px;
    float: left;
}

#editor_sidebar #convert_image_sidebar {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    padding: 15px 15px 35px;
    background: var(--color-content);
    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1);
    border-right: 1px solid var(--color-neutral-mid);
    pointer-events: none;
    overflow: hidden;
    width: 0;
    opacity: 0;
}

#editor_sidebar #convert_image_sidebar.open {
    width: 401px;
    overflow: unset;
    pointer-events: all;
    opacity: 1;
    border-right-color: var(--color-primary-mid);
}

#editor_sidebar #convert_image_sidebar #instant_sidebar_loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: var(--color-content-mid) url(/assets/images/site/dotloader.gif) center center no-repeat;
    z-index: 1;
}

#editor_sidebar #convert_image_sidebar #instant_sidebar_loading.full {
    position: fixed;
}

#editor_sidebar #convert_image_sidebar #instant_sidebar_loading span {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    margin-top: -50px;
    color: var(--color-primary);
    font-weight: 600;
    text-shadow: 0 0 5px var(--color-content);
}

.kp-color-picker > button {
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none !important;
    cursor: pointer;
    margin: 8px 0 0 10px;
    padding: 5px;
    float: left;
}

.kp-color-picker > button > span {
    display: block;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-content);
    box-shadow: 0 0 0 1px #ccc;
    background: linear-gradient( 45deg, rgba(255, 0, 0, 1) 5%, rgba(255, 154, 0, 1) 15%, rgba(208, 222, 33, 1) 25%, rgba(79, 220, 74, 1) 35%, rgba(63, 218, 216, 1) 45%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100% );
}

#palette_color_options #custom_color_field:hover > span, #palette_color_options #custom_color_field.open > span {
    box-shadow: 0 0 0 1px var(--color-primary);
}

#toolbar_cp, #toolbar_cp_palette {
    margin-left: 12px;
    margin-top: 8px;
    border-radius: var(--border-radius-sm);
}

body > .alwan__preset-button {
    display: none !important;
}

#toolbar_cp .alwan__palette, #toolbar_cp_palette .alwan__palette {
    border-radius: var(--border-radius-sm) 5px 0 0;
}

#toolbar_cp .alwan__inputs label > span, #toolbar_cp_palette .alwan__inputs label > span {
    display: none;
}

#toolbar_cp .alwan__inputs label > input, #toolbar_cp_palette .alwan__inputs label > input {
    border-color: #ddd !important;
    box-shadow: none !important;
}

#toolbar_cp .alwan__container, #toolbar_cp_palette .alwan__container {
    border: none;
}

#cp_palette_select_btn {
    display: block;
    padding: 5px 15px;
    margin: 10px;
    float: right;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    color: var(--color-primary);
    cursor: pointer;
    font-size: 14px;
}

#cp_palette_select_btn:hover {
    background: var(--color-primary);
    color: var(--color-content);
}

#specialty_toggles {
    float: right;
    margin: 15px 15px 0 0;
}

#specialty_toggles select {
    border: 1px solid var(--color-neutral-op);
    border-radius: var(--border-radius-sm);
    padding: 5px 3px;
    font-size: 13px;
    text-transform: uppercase;
    background: var(--color-content);
    color: var(--color-text);
}

.palette-toggles {
    text-align: left;
    padding: 5px 0 0 15px;
    white-space: nowrap;
}

.palette-toggles .box-toggles {
    margin-right: 10px;
}

#palette_color_list {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding-bottom: 15px;
    width: 300px;
    overflow-y: auto;
    border-top: 165px solid var(--color-content);
    border-bottom: 35px solid var(--color-content);
    overscroll-behavior: contain;
}

#palette_color_list ul, .new-colors-content ul {
    font-size: 12px;
    color: var(--color-text-op);
    text-align: left;
}

.editor-kandi #palette_color_list > p {
    display: none;
}

.new-colors-content ul#added_colors_list {
    height: 100%;
    padding-top: 15px;
}

#palette_color_list ul li, .new-colors-content ul li {
    cursor: pointer;
    position: relative;
}

#palette_color_list.glitter ul li:after {
    content: '';
    background-image: radial-gradient(rgba(220, 220, 220, 0.4) 1px, transparent 2px), radial-gradient(rgba(150, 150, 150, 0.2) 1px, transparent 2px);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
    border: none;
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px;
    transform: rotate(22deg);
    border-radius: var(--border-radius-lg) 10px;
    z-index: 1;
}

#palette_color_list.clear ul li:after {
    content: '';
    background-image: linear-gradient(45deg, var(--color-content) 50%, var(--color-content-op) 52%, var(--color-content-mid) 80%);
    opacity: 0.5;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#palette_color_list.glow ul li:after {
    content: '';
    background-image: radial-gradient(#fff 25%, #666 80%);
    opacity: 0.4;
    border: none;
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    mix-blend-mode: hard-light;
    border-radius: var(--border-radius-sm);
}

#palette_color_list.pearl ul li:after {
    content: '';
    background-image: linear-gradient(#fff 0%, rgba(0, 0, 0, 0.5) 20%, #fff 50%, rgba(0, 0, 0, 0.5) 80%, #fff 100%);
    opacity: 0.2;
    border: none;
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    mix-blend-mode: luminosity;
    border-radius: var(--border-radius-sm);
}

#pegboard_svg_wrapper .peg.pegged[data-style="g"]:before {
    content: '';
    background-image: radial-gradient(rgba(250, 250, 250, 0.4) 1px, transparent 1px), radial-gradient(rgba(200, 200, 200, 0.2) 1px, transparent 1px);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: rotate(22deg);
    z-index: 2;
}

#pegboard_svg_wrapper .peg.pegged[data-style="s"]:before, #palette_color_list ul li[data-name^="Stripe "] span:before, #editor_toolbar #toolbar_recent ul li[data-name^="Stripe "] span:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-image: repeating-conic-gradient(from 23deg, attr(data-secondary type(<color>), rgba(255, 255, 255, 0.6)) 0deg 45deg, transparent 45deg 90deg);
    border-radius: 50%;
}

.editor-kandi #pegboard_svg_wrapper .peg.pegged[data-style="g"]:before {
    background-image: radial-gradient(rgba(250, 250, 250, 0.4) 1px, transparent 2px), radial-gradient(rgba(200, 200, 200, 0.4) 1px, transparent 2px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

#pegboard_svg_wrapper .peg.pegged[data-style="c"] {
    opacity: 0.5;
}

#pegboard_svg_wrapper .peg.pegged[data-style="c"]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(45deg, transparent, rgba(0, 0, 0, 0.2) 45%, rgba(255, 255, 255, 0.2) 72%);
    z-index: 2;
    mix-blend-mode: luminosity;
}

#pegboard_svg_wrapper .peg.pegged[data-style="l"]:before {
    content: '';
    position: absolute;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: radial-gradient(#fff 25%, #666 75%);
    z-index: 2;
    mix-blend-mode: hard-light;
}

#pegboard_svg_wrapper .peg.pegged[data-style="p"]:before {
    content: '';
    position: absolute;
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(#000 0%, #fff 5%, #000 40%, #fff 80%, #000 100%);
    z-index: 2;
    mix-blend-mode: difference;
}

.new-colors-content ul li.added {
    background: rgba(24, 145, 134, 0.1);
    padding: 0 3px;
}

.new-colors-content ul li.added:hover, .new-colors-content ul#added_colors_list li:hover {
    background: rgba(255, 153, 153, 0.1);
}

#palette_color_list ul li.curswatch span {
    box-shadow: inset 0 0 0 2px var(--color-content), inset 0 0 4px 2px var(--color-text), 0 0 10px 1px rgba(0, 0, 0, 0.2);
}

#palette_color_list ul li em, .new-colors-content ul li em {
    font-size: 9px;
    position: absolute;
    right: 2px;
    top: 0;
    line-height: 30px;
    color: var(--color-text-mid) !important;
    font-style: normal;
    font-weight: 600;
    display: none;
}

#editor_toolbar #palette_color_list ul li:hover em, .new-colors-content ul li:hover em {
    color: var(--color-neutral) !important;
    text-shadow: none;
}

#palette_color_list ul li:hover, .new-colors-content ul li:hover {
    color: var(--color-text);
    text-shadow: 0 0 1px var(--color-text-mid);
}

#palette_color_list ul li:hover:after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 0;
    border: 4px solid transparent;
    border-left-color: var(--color-primary);
}

#palette_color_list ul li:hover span, .new-colors-content ul li:hover span {
    border-color: transparent;
}

#palette_color_list ul span, .new-colors-content ul span {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid var(--color-neutral-mid);
    margin: 3px 10px 3px 12px;
    transition: 0.15s linear;
    position: relative;
}

.new-colors-content ul span {
    margin-left: 0;
}

#palette_color_list.display-grid ul li {
    font-size: 0;
    display: inline-block;
}

#palette_color_list.display-grid ul span {
    width: 32px;
    height: 32px;
    margin: 2px;
    transition: none;
}

#palette_color_list.display-grid ul li:hover:after {
    display: none;
}

#palette_color_list.display-grid ul li:hover span {
    width: 34px;
    height: 34px;
    margin: 1px;
}

#palette_color_list.display-grid ul {
    text-align: center;
    padding-top: 3px;
}

#palette_color_list.display-list ul li em, .new-colors-content ul li em {
    display: block;
}

.editor-kandi #palette_color_list ul span, .editor-kandi .new-colors-content ul span {
    width: 40px;
    border-radius: var(--border-radius-sm);
}

.editor-kandi #palette_color_list ul li:hover span, .editor-kandi .new-colors-content ul li:hover span {
    width: 42px;
    height: 34px;
    margin: 1px;
}

.editor-kandi .new-colors-content ul li span {
    height: 30px !important;
    width: 40px !important;
    margin: 3px 10px 3px 0 !important;
}

#toolbar_palette:after {
    content: '';
    position: absolute;
    top: 165px;
    left: 0;
    width: 300px;
    height: 5px;
    background: linear-gradient(0deg, transparent, var(--color-content));
}

#editor_footbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    font-size: 0;
    background: var(--color-content);
    z-index: 2;
    height: 35px;
    border-top: 1px solid var(--color-neutral-mid);
    padding-top: 3px;
}

#editor_footbar > div {
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    font-size: 12px;
    color: var(--color-text);
    text-transform: uppercase;
    font-weight: 600;
    line-height: 12px;
}

#editor_footbar > div > div {
    display: inline-block;
    vertical-align: middle;
    padding: 0 15px;
}

#foot_board_size .fullscreen-toggle {
    font-size: 21px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 0 -5px;
    cursor: pointer;
}

#foot_board_size .fullscreen-toggle:hover {
    color: var(--color-primary);
}

#workspace_dims_trigger {
    text-transform: capitalize;
    font-weight: 500;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    padding: 12px 30px 8px 5px;
    margin-top: -3px;
    font-size: 12px;
    min-width: 150px;
}

#workspace_dims_trigger em {
    font-style: normal;
    padding-right: 5px;
}

#workspace_dims_trigger i {
    position: absolute;
    right: 8px;
    transform: rotate(180deg);
    transition: 0.15s linear;
    line-height: 8px;
}

#workspace_dims_trigger:hover {
    color: var(--color-text-op);
}

#workspace_dims_menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin: 0;
    min-width: 170px;
    max-width: 315px;
    padding: 5px 0 00;
    background: var(--color-content);
    border: 1px solid var(--color-neutral-mid);
    list-style: none;
    border-bottom-color: var(--color-content);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    overflow: hidden;
    height: 0px;
    opacity: 0;
    box-shadow: none;
    pointer-events: none;
    transition: 0.15s linear;
}

#workspace_dims_trigger.open #workspace_dims_menu {
    height: 140px;
    opacity: 1;
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
    pointer-events: all;
}

.editor-kandi #workspace_dims_trigger.open #workspace_dims_menu {
    height: 50px;
}

#workspace_dims_trigger.open i {
    transform: rotate(0deg);
}

#workspace_dims_menu li {
    font-size: 13px;
    padding: 10px;
    cursor: pointer;
    color: var(--color-text);
}

#workspace_dims_menu li:hover {
    background: var(--color-primary-trans);
}

#foot_resize_trigger:not(:first-child) {
    border-top: 1px dashed var(--color-neutral-mid);
}

#foot_resize_trigger i {
    position: static;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 5px;
    line-height: normal;
}

#editor_footbar > div#edit_footer_mid {
    text-align: center;
    width: 20%;
}

#editor_footbar > div#edit_footer_right {
    text-align: right;
}

#editor_footbar > div > div#foot_zoom {
    padding-top: 7px;
}

#editor_footbar > div > div#foot_bg {
    padding-top: 4px;
}
    
#foot_bg .mobile {
    display: none;
}

#editor_footbar > div > div#foot_zoom > span {
    text-transform: none;
    padding: 0 2px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1.4;
}

#editor_footbar > div > div#foot_zoom > span:hover {
    opacity: 0.8;
}

#editor_footbar > div > div#foot_zoom > span > i {
    padding-right: 3px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

#editor_footbar > div > div#foot_bg > div {
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
    margin-left: 10px;
    color: var(--color-neutral);
}

#editor_toolbar .tool-msg {
    position: absolute;
    top: 50%;
    left: 100%;
    font-size: 12px;
    white-space: nowrap;
    background: #454545;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 3px;
    margin-top: -11px;
    margin-left: 5px;
    color: var(--color-content);
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);
    display: none;
}

.tool-msg.saved-msg {
    position: absolute;
    white-space: nowrap;
    right: 100%;
    font-size: 12px;
    top: 5px;
    margin-right: 5px;
    color: var(--color-content);
    padding: 2px 10px;
    border-radius: var(--border-radius-lg);
}

.tool-msg.error {
    background: #ec5959;
    color: var(--color-content);
}

.tool-msg.success {
    background: #61b736;
    box-shadow: 0 0 5px #61b736;
}

#current_project_title {
    width: 100%;
    position: relative;
}

#current_project_title .psave-msg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 7px;
    background: var(--color-content);
    color: #17a598;
}

#current_project_title .title-right {
    float: right;
    position: relative;
}

#current_project_title .title-right button {
    background: var(--color-content);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px 15px 5px;
    margin-top: -5px;
    margin-left: 10px;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text-mid);
    background: var(--color-content);
}

#current_project_title input#project_title {
    border: 1px solid transparent;
    padding: 5px;
    font-size: 13px;
    border-radius: 3px;
    box-shadow: none;
    background: transparent;
    max-width: 300px;
    width: 99%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 auto;
    color: var(--color-text);
    cursor: default;
}

#current_project_title input#project_title:placeholder-shown {
    font-style: italic;
}

#editor_colors span {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 9px;
    margin-left: 5px;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--color-neutral);
    border: 1px solid var(--color-content);
}

#editor_colors span:first-child {
    margin-left: 0;
}

#editor_colors span:hover {
    border: 2px solid var(--color-content);
    box-shadow: 0 0 1px 2px var(--color-neutral);
}

#editor_colors span.selected-editor-bg {
    box-shadow: 0 0 0 2px var(--color-primary);
    border: 1px solid var(--color-content);
    cursor: default;
}

#snap_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-content-op);
    z-index: 1;
}

#snap_cover:after {
    content: 'Generating Snapshot. Please wait.';
    position: absolute;
    line-height: 24px;
    font-size: 24px;
    top: 50%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background: var(--color-content);
    border-radius: 3px;
    box-shadow: 0 3px 20px rgb(0 0 0 / 30%);
    color: var(--color-primary);
    box-sizing: border-box;
    text-align: center;
    border: 1px solid var(--color-primary);
}

#snap_cover.snap-cover-save:after {
    content: 'Saving project, please wait....';
}

#snap_cover.snap-cover-snapping:after {
    content: 'Generating image thumbnails...';
}

#snap_cover.snap-cover-coloring:after {
    content: 'Optimizing pattern output...';
}

#snap_cover.snap-cover-uploading:after {
    content: 'Uploading reference image...';
}

#snap_cover.snap-cover-finishing:after {
    content: 'Finishing...';
}

#snap_cover.snap-cover-redirecting:after {
    content: 'Saved! Redirecting...';
}

/* NEW BOARD MODALS */

#default_square_dims button span {
    padding: 0 5px;
    font-size: 12px;
}

/* Reference Image Tools */

#crop_tool_wrap {
    text-align: center;
    margin-top: 80px;
    display: none;
}

.current-ref-img {
    display: none;
    float: right;
    margin-top: 5px;
}

.current-ref-img img {
    display: inline-block;
    vertical-align: middle;
    max-width: 80px;
    max-height: 40px;
    margin-right: 10px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-neutral-mid);
}

.current-ref-img a {
    display: inline-block;
    vertical-align: middle;
    color: #f00;
    font-size: 13px;
}

.current-ref-img a i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

#ai_remove_bg_wrapper, #remove_ref_bg_wrapper {
    padding: 15px;
    margin: 15px 0 30px;
    border: 1px solid var(--color-neutral-mid);
    border-radius: var(--border-radius-md);
    text-align: center;
}

#ai_remove_bg_wrapper label, #ai_remove_bg_wrapper input, #remove_ref_bg_wrapper label, #remove_ref_bg_wrapper input {
    cursor:  pointer;
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
    padding: 0;
    color: var(--color-text);
}

#remove_ref_bg_lvl, #remove_ai_bg_lvl {
    display: block;
    margin: 0 auto;
    width: 200px;
    padding: 10px 10px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-neutral-mid);
    margin-top: 10px;
    cursor: pointer;
    background: var(--color-base);
    color: var(--color-text);
}

#ai_remove_bg_wrapper > p, #remove_ref_bg_wrapper > p {
    font-size: 13px;
    color: var(--color-text-op);
    margin: 15px 0 0;
}

.basic-removal-desc, .premium-removal-desc {
    display: none;
}

#remove_bg_toggles {
    width: 300px;
    margin: 15px auto 20px;
    font-size: 0;
}

#remove_bg_toggles label input {
    opacity: 0;
    pointer-events:  none;
    width: 0;
    height: 0;
}

#remove_bg_toggles label {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 0;
    width: 100px;
    margin: 0 0 0 -1px;
    font-size: 16px;
    border: 1px solid var(--color-neutral-op);
}

#remove_bg_toggles label.checked-bg {
    background-color: var(--color-secondary);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

#remove_bg_toggles label:not(.checked-bg):hover {
    background: var(--color-secondary-trans);
}

#remove_bg_toggles label:first-child {
    border-radius: 30px 0 0 30px;
}

#remove_bg_toggles label:last-child {
    border-radius: 0 30px 30px 0;
}

#btn_optimize {
    position: absolute;
    bottom: -18px;
    right: -18px;
    font-size: 21px;
    z-index: 2;
    border-radius: 50%;
    width: 44px;
    line-height: 2.1;
    text-align: center;
    height: 44px;
    color: var(--color-text);
    background: var(--color-content);
    border: 1px solid var(--color-neutral-mid);
    cursor: pointer;
    padding-top: 5px;
}

#btn_optimize.optimized {
    background: var(--color-secondary);
    background: var(--color-secondary);
    color: #fff;
    border: 4px solid var(--color-content);
    padding-top: 1px;
}

#advanced_crop_tools {
    display: none;
    max-width: 360px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin: 10px auto 0;
    background: rgba(230, 230, 230, 0.1);
}

#advanced_crop_tools .cr-slider {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: none;
    width: 200px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
}

#advanced_crop_tools .adv-tool:before {
    content: '';
    font-size: 13px;
    margin-right: 10px;
    line-height: 59px;
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    text-align: right;
}

#advanced_crop_tools .adv-tool#tool_brightness:before {
    content: 'Brightness:';
}

#advanced_crop_tools .adv-tool#tool_posterize:before {
    content: 'Posterize:';
}

#advanced_crop_tools .adv-tool#tool_hue:before {
    content: 'Hue:';
}

#advanced_crop_tools .adv-tool#tool_sepia:before {
    content: 'Sepia:';
}

#advanced_crop_tools .adv-tool#tool_invert:before {
    content: 'Invert:';
}

#advanced_crop_tools.disabled > div {
    pointer-events:  none;
}

#advanced_crop_tools.disabled:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
}

#advanced_crop_tools.disabled {
    position: relative;
}

#advanced_crop_tools.disabled p {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: 0;
    transform: translateY(-50%);
    font-size: 14px;
    padding: 20px;
    width: 100%;
    text-align: center;
    z-index: 1;
    background: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 1px var(--color-content);
}

#advanced_crop_tools.disabled p a {
    color: var(--color-primary);
}

#advanced_crop_tools.disabled p a:hover {
    text-decoration: none;
}

/* CROP */
.crop-img-wrap {
    display: none;
    height: 502px;
    margin: 0 auto 40px;
    background: var(--color-base);
    border: 1px solid var(--color-neutral);
    font-size: 0;
    position: relative;
}
            
.croppie-container .cr-slider-wrap {
    margin: 10px auto 0 !important;
    width: 100% !important;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.croppie-container .cr-slider-wrap:before {
    content: 'Zoom:';
    font-size: 13px;
    margin-right: 10px;
    line-height: 59px;
    display: inline-block;
    vertical-align: middle;
}

.croppie-container .cr-slider-wrap .cr-slider {
    background: transparent;
    box-shadow: none;
    display: inline-block;
    vertical-align: middle;
    width: 260px;
    max-width: unset;
    margin: 0;
}

.crop-img-wrap .croppie-container .cr-viewport {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 300px 50px var(--color-content), 0 0 2000px 2000px rgb(255, 255, 255);
    border: 1px solid var(--color-neutral);
    border-radius: 3px;
    box-sizing: content-box;
}

#modal_project_info .kp-modal.loading-info:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-content-mid) url(/assets/images/site/dotloader.gif) center center no-repeat;
    content: '';
    opacity: 1;
}

#modal_project_info #creation_colors {
    display: block;
    max-width: unset;
    margin-top: 15px;
}

#modal_project_info table {
    width: 100%;
    font-size: 14px;
}

#modal_project_info table#info_stats th{
    text-align: left;
    padding: 10px 0 10px 15px;
    width: 30%;
}

#modal_project_info table#info_beads th {
    text-align: left;
    padding: 15px 10px;
    border-top: 1px solid var(--color-neutral-trans);
}

#modal_project_info table#info_stats td{
    padding: 10px 0 10px 15px;
    width: 70%;
}

#modal_project_info table#info_beads td{
    font-size: 28px;
    color: var(--color-neutral);
}

#modal_project_info table#info_stats tr:nth-child(odd) td, #modal_project_info table#info_stats tr:nth-child(odd) th {
    background: var(--color-base);
}

#modal_project_info table#info_beads tr td:nth-child(odd), #modal_project_info table#info_beads tr th:nth-child(odd) {
    width: 110px;
}

#modal_project_info table#info_beads tr th:nth-child(even) {
    padding-left: 40px;
}

#modal_project_info #kandi_info_color {
    max-height: unset;
}

#modal_project_info #kandi_info_color .info-bead-wrapper {
    display: inline-block;
    vertical-align: middle;
}

#modal_project_info #kandi_info_color .info-bead-wrapper.perler {
    width: 32.333%;
    margin: 0 1% 10px 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius-xl);
}

#modal_project_info #kandi_info_color .info-bead-color.perler {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2);
}

#modal_project_name_prompt .permission-toggle.preview {
    pointer-events: none;
    opacity: 0.5;
}

#modal_project_settings .modal-body > p {
    border-left: 2px solid var(--color-secondary);
    padding-left: 15px;
    font-size: 14px;
}

#modal_project_settings textarea {
    display: block;
    width: 100%;
    height: 150px;
    resize: vertical;
}

#cotd_editor_wrapper {
    border: 1px solid var(--color-neutral-mid);
    padding: 15px;
    border-radius: var(--border-radius-md);
    margin-top: 25px;
}

#cotd_editor_wrapper > strong {
    display: block;
}

#cotd_editor_wrapper > a {
    font-size: 14px;
    white-space:  nowrap;
}

#cotd_editor_wrapper > a > i {
    display: inline-block;
    vertical-align: middle;
    padding-left: 5px;
    font-size: 12px;
}

#cotd_editor_wrapper > p {
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-op);
    margin-top: 5px;
    border-bottom: 1px solid var(--color-neutral-trans);
    padding-bottom: 10px;
}

#cotd_editor_wrapper > label {
    font-size: 14px;
    width: 60px;
}

#cotd_editor_wrapper .cotd-info {
    font-size: 14px;
    padding: 10px;
    border-left: 2px solid var(--color-primary-mid);
    margin: 5px 0 10px;
    display: none;
}

#cotd_newdoc_wrapper {
    border: 1px solid var(--color-neutral-trans);
    border-radius: var(--border-radius-md);
    padding: 15px;
    margin-top: 15px;
    background: var(--color-content-mid);
}

#cotd_newdoc_wrapper h3 {
    margin: 0;
    font-size: 16px;
    color: var(--color-text);
}

#cotd_newdoc_wrapper h3 a {
    white-space: nowrap;
    text-transform: none;
    color: var(--color-secondary);
}

#cotd_newdoc_wrapper h3 a i {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    padding-left: 5px;
    line-height: 0;
}

#cotd_newdoc_wrapper > p {
    font-size: 0.875rem;
    margin: 5px 0 10px;
}

#cotd_newdoc_wrapper > a {
    font-size: 0.75rem;
    color: var(--color-text-op);
}

#cotd_newdoc_wrapper .cotd-info {
    font-size: 13px;
    margin-top: 10px;
    border-left: 2px solid var(--color-primary);
    padding-left: 10px;
    display: none;
}

#pattern_tag_count {
    float: right;
    font-size: 13px;
    margin-bottom: -5px;
    margin-top: 5px;
    margin-right: 10px;
}

#pattern_tag_count em {
    font-style: normal;
}

#pattern_tag_count.limit-reached {
    color: #eb4747;
}

#pattern_info_taglist {
    margin-bottom: 15px;
}

#pattern_info_taglist .pattern-info-tag {
    font-size: 13px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 10px;
    padding: 5px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-secondary-mid);
    background: var(--color-secondary-trans);
    color: var(--color-secondary);
    font-weight: 600;
    cursor: default;
}

#pattern_info_taglist .pattern-info-tag span {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px;
}

#pattern_info_taglist .pattern-info-tag span:hover {
    color: #f00;
    text-shadow: 0 0 1px #000;
}

#instant_options {
    text-align: center;
    padding-top: 30px;
    height: calc(100% - 20px);
    overflow: auto;
    width: 370px;
}

#editor_sidebar #convert_image_sidebar > label {
    text-align: left;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-text-op);
    z-index: 1;
    position: relative;
}

#editor_sidebar #convert_image_sidebar .convert-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

#instant_src_img {
    max-width: 300px;
    max-height: 200px;
    width: auto;
    height: auto;
    min-height: 100px;
    display: block;
    margin: 0 auto 15px;
}

#instant_options > label, label[for="instant_threshold"] {
    font-weight: 700;
    display: inline-block;
    font-size: 16px;
    color: var(--color-text);
    text-align: center;
    line-height: 1;
    cursor: default;
    margin: 15px 0;
}

#instant_options > label > i, label[for="instant_threshold"] > i {
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
    margin-top: -2px;
}

#instant_options > label > i#whats_this_algorithm, #instant_options label[for="instant_threshold"] > i#whats_this_threshold {
    color: var(--color-secondary);
    padding: 0 2px;
    margin-top: -5px;
    cursor: pointer;
}

#algo_info, #threshold_info {
    font-size: 13px;
    max-width: 435px;
    margin: -5px auto 0;
    padding: 0 15px 15px;
    display: none;
}

#instant_options_img {
    display: block;
    margin: 0 auto 15px;
}

.theme-dark:not(.ismobile) #instant_options_img {
    filter: invert(1);
}

#instant_options > label.open > i {
    transform: rotate(180deg);
    margin-top: -5px;
    margin-bottom: 3px;
}

#instant_options > button {
    width: 100%;
    display: block;
    padding: 20px;
    margin: 30px 0 0;
}

#instant_method, #instant_threshold {
    display: block;
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: var(--border-radius-sm);
    margin: 0 auto 10px;
}

#instant_options .threshold {
    display: none;
}

#instant_palettes {
    display: none;
    text-align: left;
    padding-bottom: 15px;
}

#instant_palettes .insta-palette {
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}

#instant_palettes .insta-palette .insta-palette-title span {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-right: 15px;
    margin-top: -4px;
    cursor: pointer;
    position: relative;
}

#instant_palettes .insta-palette .insta-palette-title em {
    float: right;
    font-size: 12px;
    color: var(--color-text-mid);
    padding-top: 2px;
    text-shadow: none;
    margin-right: -60px;
    text-align: right;
}

#instant_palettes .insta-palette .insta-palette-title:after {
    content: '\e804';
    font-family: 'kandi-pad';
    position: absolute;
    right: 0;
    top: 16px;
    color: var(--color-text-op);
}

#instant_palettes .insta-palette .insta-palette-title {
    position: relative;
    padding: 15px 110px 15px 40px;
    cursor: pointer;
    text-indent: -33px;
}

body:not(.ismobile) #instant_palettes .insta-palette .insta-palette-title:hover {
    color: var(--color-primary);
    text-shadow: 0 0 1px var(--color-primary);
}

body:not(.ismobile) #instant_palettes .insta-palette .insta-palette-title span:hover {
    border-color: var(--color-primary);
}

#instant_palettes .insta-palette.selected .insta-palette-title span, #instant_palettes .insta-palette.partial .insta-palette-title span {
    border-color: var(--color-primary);
    background: #f0fdfd;
    color: var(--color-primary);
}

#instant_palettes .insta-palette.selected .insta-palette-title, #instant_palettes .insta-palette.partial .insta-palette-title {
    color: var(--color-primary);
}

body:not(.ismobile) #instant_palettes .insta-palette .insta-palette-title span:hover:after, #instant_palettes .insta-palette.selected .insta-palette-title span:after {
    content: '\e8b6';
    font-family: 'kandi-pad';
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--color-primary);
    text-indent: 0;
}

#instant_palettes .insta-palette.selected .insta-palette-title span:after {
    opacity: 1;
}

#instant_palettes .insta-palette .insta-palette-colors {
    list-style: none;
    margin: 0;
    padding: 5px 2px 15px;
    font-size: 12px;
}

#instant_palettes .insta-palette .insta-palette-colors li {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 15px 5px 5px;
    cursor: pointer;
    position: relative;
    font-size: 12px;
    border: none;
    font-weight: 400;
}

#instant_palettes .insta-palette .insta-palette-colors li:before {
    content: '';
    position: absolute;
    top: 13px;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#instant_palettes .insta-palette .insta-palette-colors li.selected:before {
    background: rgba(255, 255, 255, 0.8);
}

#instant_palettes .insta-palette .insta-palette-colors li.selected:after {
    position: absolute;
    top: 15px;
    left: 4px;
    content: '\e8b6';
    font-family: 'kandi-pad';
    color: #000;
    line-height: 1;
    font-size: 9px;
}

#instant_palettes .insta-palette .insta-palette-colors li span {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 8px;
    margin-top: -4px;
}

#instant_palettes .insta-palette .insta-palette-colors li.selected {
    text-shadow: 0 0 1px var(--color-text-mid);
}

body:not(.ismobile) #instant_palettes .insta-palette .insta-palette-colors li:hover {
    opacity: 0.7;
}

.instant-footer button {
    display: block;
    width: 100%;
    margin: 15px 0;
}

#editor_toolbar.pattern-to-image, #editor_sidebar.pattern-to-image {
    pointer-events:  none !important;
}

#editor_toolbar.pattern-to-image:before, #editor_sidebar.pattern-to-image:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

#editor_toolbar.pattern-to-image:after, #editor_sidebar.pattern-to-image:after {
    content: 'PRO';
    position: absolute;
    z-index: 1;
    color: var(--color-primary);
    font-weight: 900;
    font-size: 54px;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: rotate(-90deg);
    margin-top: -70px;
    opacity: 0.1;
}

.wizard-step {
    display: none;
}

.wizard-step.current-step {
    display: block;
}

.board-option-section > strong {
    display: block;
}

#modal_help table th, #modal_help table td {
    text-align: left;
    padding: 10px;
    font-size: 13px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-neutral-mid);
}

#modal_help table th {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
}

#modal_help table tr td:last-child, #modal_help table tr th:last-child {
    text-align: center;
    font-style: normal;
    font-size: 14px;
}

#modal_help table tr td:first-child, #modal_help table tr th:first-child {
    font-size: 14px;
    padding: 10px 15px 10px 10px;
    font-style: normal;
    color: var(--color-text);
    white-space: nowrap;
}

#modal_help table tr td:last-child {
    border-left: 1px solid var(--color-neutral-mid);
}

#modal_help table tr:hover td {
    background: var(--color-primary-trans);
}

#modal_help table tr td i {
    font-size: 18px;
    padding-right: 15px;
    display: inline-block;
    vertical-align: middle;
}

#editor_faq .faq-q {
    padding: 15px 40px 15px 35px;
    border-bottom: 1px solid var(--color-neutral-mid);
    position: relative;
    cursor: pointer;
}

#editor_faq .faq-q:hover {
    background: var(--color-neutral-trans);
}

#editor_faq div > strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-secondary);
    padding: 3px 10px 18px 0;
    position: absolute;
    line-height: 16px;
    left: 0;
}

#editor_faq .faq-q:after {
    content: '\65';
    font-family: 'kandi-pad';
    position: absolute;
    right: 5px;
    top: 50%;
    color: var(--color-neutral);
    font-size: 30px;
    margin-top: -20px;
    transition: 0.15s linear;
}

#editor_faq .faq-q.open {
    border: none;
}

#editor_faq .faq-q.open:after {
    transform: rotate(180deg);
}

#editor_faq .faq-a {
    display: none;
    border-bottom: 1px solid var(--color-neutral-mid);
    padding: 15px 15px 15px 50px;
    position: relative;
    font-size: 14px;
    line-height: 1.8;
}

#editor_faq div.faq-a > strong {
    color: var(--color-primary);
    position: absolute;
    top: 15px;
    left: 20px;
}

#editor_faq .faq-a a {
    color: var(--color-primary);
    font-weight: 700;
}

#editor_faq .faq-a a:hover {
    text-decoration:  none;
}

#editor_faq div.faq-a > em {
    font-weight: 700;
    font-style: normal;
    white-space: nowrap;
}

#editor_faq div.faq-a > em > i {
    font-size: 16px;
}

#editor_wrapper.wizzing > div:not(#editor_wizard) *:not(.notrans), #editor_wrapper.wizzing > aside *:not(.notrans) {
    opacity: 0.8;
}

#editor_wizard {
    position: absolute;
    top: -1%;
    left: -1%;
    width: 102%;
    height: 102%;
    z-index: 6;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    display: none;
}

.editor-wizard-step .wizard-mobile, .faq-m {
    display: none;
}

.editor-wizard-step {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    border-radius: var(--border-radius-md);
    color: var(--color-text);
    padding: 0 15px 5px;
    background: var(--color-content);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 2px var(--color-content);
    font-size: 14px;
    z-index: 9;
}

.editor-wizard-step p:first-child strong {
    color: var(--color-primary);
    font-size: 16px;
}

.editor-wizard-step .step-control > button {
    border: none;
    background: transparent;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.editor-wizard-step .step-control {
    text-align: right;
    padding-top: 15px;
}

.editor-wizard-step .step-control > button.close-wiz-btn {
    float: left;
    margin-top: 4px;
}

.editor-wizard-step .step-control > button:hover {
    color: var(--color-secondary);
}

.editor-wizard-step .step-control > button > i {
    display: inline-block;
    vertical-align: middle;
    padding: 0 2px;
    line-height: 1.6;
}

.editor-wizard-step .step-control > .stepcounter {
    font-size: 12px;
    padding: 0 10px;
}

.editor-wizard-step p em {
    font-weight: 600;
    color: var(--color-text);
}

.editor-wizard-step p.shortcut {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-op);
    display: inline-block;
    margin: 5px 0 0;
    padding: 5px 8px;
    border: 1px solid var(--color-neutral-mid);
    border-radius: var(--border-radius-md);
}

.editor-wizard-step p span {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
}

.editor-wizard-step p:not(.shortcut) span > i {
    display: inline-block;
    vertical-align: middle;
}

.editor-wizard-step p.shortcut.sub {
    border: none;
    font-weight: normal;
    padding: 0;
    font-style: italic;
}

.wiz-tool-highlighter {
    position: absolute;
    border: 3px solid var(--color-secondary);
    z-index: 8;
    box-shadow: 0 0 20px var(--color-secondary);
    border-radius: var(--border-radius-md);
}

.theme-dark .newdoc-sidebar-tab img, .theme-dark .new-board-btn img, .theme-dark #resizepreset_img, .theme-dark #pbpreset_img, .theme-dark #pborientation_img, .theme-dark #pborientation_img_ladder, .theme-dark .board-option-content h4 > img {
    filter: invert(1);
}

@keyframes pegged {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes expandAILoadBar {
    from {width: 0}
    to {width: 200%}
}

/* ADS */
body:not(.ismobile).has-kpstickyad #container, body:not(.ismobile).has-kpstickyad #content, body:not(.ismobile).has-kpstickyad #editor_wrapper, body:not(.ismobile).has-kpstickyad #editor_workspace, body:not(.ismobile).has-kpstickyad #editor_rulers {
    height: calc(100% - 95px);
}


body:not(.ismobile).has-kpstickyad #editor_wrapper:after {
    content: 'AD';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 95px;
    background: var(--color-base);
    text-align: center;
    font-weight: 600;
    color: var(--color-text-trans);
    font-size: 21px;
    padding-top: 30px;
}

body:not(.ismobile).has-kpstickyad #editor_footbar {
    border-bottom: 1px solid var(--color-neutral-mid);
}

body:not(.ismobile).has-kpstickyad .adhesion_wrapper.adhesion_container {
    background: var(--color-base) !important;
    min-height: 95px !important;
    max-height: 95px !important;
    height: 95px !important;
    overflow: hidden !important;
}

body:not(.ismobile).has-kpstickyad .universalPlayer__bottom {
    bottom: 30px;
}

#pw-oop-bottom_rail {
    border: none !important;
    background: var(--color-base) !important;
    min-height: 95px !important;
    max-height: 95px !important;
    height: 95px !important;
}

#pw-oop-bottom_rail > div {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}

.new-project-sidebar .sidebar-widget.sidebar-ad {
    margin-top: 50px;
}
 
.dismissrail {
    display: none !important;
}

.pw-corner-ad-video {
    bottom: 140px !important;
    margin-bottom: 0 !important;
}

/* MEDIA QUERIES */

@media (max-width: 1400px) {
    #secondary_menu_trigger {
        margin-right: 0;
    }

    #editor_menubar .menu-category > strong, #editor_menubar #editor_history > li {
        padding: 14px 10px;
    }
    
    #editor_menubar #editor_history {
        margin-left: 8px;
        padding-left: 0;
    }
}

@media (max-width: 1340px) {
    #new_board_options .new-board-option-set#options_load {
        margin-left: 30px;
    }
    
    .option_buttons > button {
        margin-right: 10px;
    }
}

@media (max-width: 1279px) {    
    #editor_logo {
        left: auto;
        right: 240px;
    }
    
    #editor_footbar > div#edit_footer_left {
        width: 33%;
    }
    
    #editor_footbar > div#edit_footer_right {
        width: 47%;
    }
    
    #foot_board_size {
        font-size: 0;
    }
    
    #foot_board_size .fullscreen-toggle {
        margin: -10px 10px 0 -5px;
    }
    
    #foot_bg .desktop {
        display: none;
    }
    
    #foot_bg .mobile {
        display: inline;
    }
    
}

@media (max-width: 1020px) {
    #landing_content h2 {
        font-size: 21px;
    }

    #landing_content h1 {
        font-size: 42px;
    }
    
    #new_board_options {
        padding-top: 20px;
    }
    
    #new_board_options .new-board-option-set {
        display: block;
        font-size: 16px;
    }

    #new_board_options .new-board-option-set label {
        display: none;
    }
    
    #new_board_options .new-board-option-set#options_load {
        margin-left: 0;
        padding-top: 10px;
    }
    
    .option_buttons > button {
        float: left;
        width: 46%;
        margin: 0 2% 30px;
        height: 140px;
    }
    
    .option_buttons > button:last-child {
        margin-right: 2%;
    }
    
    .option_buttons > button.newbanner:after {
        top: 80px;
    }
    
    .option_buttons > button > img {
        max-width: 100px;
        margin-left: -50px;
        margin-top: -60px;
    }

    .option_buttons > button > img.load-img {
        max-width: 30px;
        max-height: 30px;
        margin-top: -37px;
    }

    .option_buttons > button > img.load-img:nth-child(3) {
        margin-top: -32px;
        margin-left: 25px;
    }

    .option_buttons > button > img.load-img:nth-child(2) {
        margin-top: -32px;
        margin-left: -25px;
    }

    .option_buttons > button > em {
        padding: 10px 5px;
    }
    
    .option_buttons > button > em > span {
        display: unset !important;
    }
}

@media (max-width: 950px) {

    #editor_menubar #editor_history {
        margin-left: 8px;
        padding-left: 5px;
    }

    #editor_menubar .menu-category > strong, #editor_menubar #editor_history > li {
        font-size: 11px;
        padding: 14px 8px 0;
    }

    #editor_menubar .menu-category > strong > i, #editor_menubar #editor_history > li > i {
        font-size: 18px;
        padding-right: 3px;
    }
    
    #editor_menubar #editor_history > li:not(#clear_board) {
        padding: 16px 5px;
    }

    #editor_menubar #editor_history > li:not(#clear_board) > i {
        padding: 0;
        font-size: 24px;
    }
    
    #editor_logo {
        right: 230px;
    }
}

@media (max-width: 900px) {
    
    #editor_user_btns > a {
        display: block;
        width: auto;
        margin: 0 0 15px;
        text-align: center;
    }
    
    #editor_user_btns > a > img {
        display: none;
    }

    #secondary_menu_trigger {
        display: block !important;
        padding-top: 10px;
    }
    
    #editor_logo {
        left: 50%;
        right: auto;
    }
    
    #editor_menubar {
        z-index: 3;
    }
    
    #editor_menubar.menu-open {
        z-index: 1000;
    }
    
    #editor_menubar #editor_menu_mobile_toggle {
        display: inline-block;
    }
    
    #editor_menubar.menu-open #editor_menu_mobile_toggle {
        display: block;
        position: fixed;
        top: 0;
        z-index: 3;
        right: 2%;
        opacity: 0.5;
        font-size: 0;
    }

    #editor_menu_items {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        position: fixed;
        top: 45px;
        left: 0;
        width: 100%;
        height: 40px;
        z-index: 2;
        background: var(--color-content);
        border-bottom: 1px solid var(--color-neutral-mid);
    }
    
    #editor_menubar #editor_history, #editor_sidebar #instant_image_trigger em {
        display: none;
    }
    
    #sidebar_reference_photo, #instant_image_trigger, #editor_save {
        position: fixed !important;
        top: 100px;
        left: 0;
        margin-left: 15px;
        padding: 0;
    }
    
    #editor_menubar #editor_save {
        margin-right: 15px;
        position: relative !important;
    }
    
    #editor_menubar #editor_save > button > strong:hover, #editor_menubar #editor_save > button > span:hover, #editor_menubar #editor_save.open > button > span {
        background: transparent;
    }
    
    #editor_sidebar #ref_photo_tool, #editor_sidebar #instant_image_trigger {
        padding: 5px !important;
        height: auto;
        width: 140px !important;
        text-align: left;
        line-height: 1;
        background: var(--color-content);
        overflow: auto !important;
        border-radius: 30px;
        border: 1px solid var(--color-neutral-mid);
        white-space: normal !important;
        background-image: none !important;
    }
    
    #editor_sidebar #instant_image_trigger {
        left: 155px;
    }
    
    #editor_sidebar #convert_image_sidebar {
        position: fixed;
        top: 1%;
        left: 50%;
        right: auto;
        width: 98% !important;
        transform: translateX(-50%);
        height: 98%;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--color-neutral-mid) !important;
        box-shadow: 0 0 100px rgba(0, 0, 0, 0.2);
    }

    #instant_options {
        width: 100%;
    }
    
    #instant_options_img {
        max-width: 120px;
        max-height: 100px;
    }
    
    #editor_sidebar #convert_image_sidebar .convert-close {
        font-size: 21px;
    }

    #editor_sidebar #ref_photo_tool > i, #editor_sidebar #instant_image_trigger > i {
        display: inline-block;
        vertical-align: middle;
        margin: 5px 10px 0 8px;
        font-size: 24px;
        float: none;
    }

    #ref_photo_tool > span, #instant_image_trigger > span {
        display: inline-block;
        vertical-align: middle;
        width: 80px;
    }
    
    #ref_photo_tool.has-img > *, #ref_photo_tool.has-img:hover > * {
        display: inline-block;
    }
    
    #ref_photo_tool.has-img:hover:before {
        display: none;
    }

    #editor_menubar #editor_save > button {
        border-radius: 30px;
        font-size: 12px;
        line-height: 1.6;
    }

    #editor_menubar #editor_save.open > button {
        border-radius: 30px 30px 0 30px;
    }
    
    #editor_menubar #editor_save > button > strong {
        padding-top: 14px;
    }
    
    #editor_menubar #editor_save > button > strong > i {
        font-size: 16px;
    }
    
    #editor_menubar #editor_save > button > span {
        padding: 8px 10px 8px 8px;
    }

    #editor_menubar #editor_save > ul {
        border-radius: var(--border-radius-md) 0 10px 10px;
        min-width: 140px;
    }
    
    #editor_menubar .menu-category {
        width: auto;
        text-align: center;
    }

    #editor_menubar .menu-category > strong {
        padding: 10px 0 4px;
        font-size: 13px;
    }

    #editor_menubar .menu-category > strong > i {
        padding-right: 5px;
    }
    
    #editor_menubar .menu-category > ul {
        left: -15px;
    }
    
    #editor_menubar .menu-category#editor_menu_colors > ul, #editor_menubar .menu-category#editor_menu_help > ul {
        left: auto;
        right: -15px;
        border-left-color: var(--color-neutral-mid);
        border-right-color: var(--color-secondary);
    }

    #editor_menubar .menu-category > ul > li {
        padding: 15px;
        text-align: left;
    }
    
    #editor_menubar .menu-category > ul > li#undo, #editor_menubar .menu-category > ul > li#redo {
        display: none;
    }
    
    #modal_help table tr td:last-child, #modal_help table tr th:last-child {
        display: none;
    }
    
    #editor_workspace {
        height: 45%;
        top: 160px;
        overflow: hidden;
        width: 96%;
        left: 2%;
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        border: 1px solid var(--color-neutral-trans);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }
    
    #editor_toolbar {
        position: fixed;
        display: block;
        width: 100%;
        background: transparent;
        border-top: none;
        text-align: left;
        z-index: 4;
        padding: 50px 15px 0;
        top: calc(45% + 207px);
        height: 160px;
    }

    #editor_toolbar > section label:not(.palette-close) {
        display: none;
    }
    
    #toolbar_tools {
        display: inline-block;
        vertical-align: top;
        width: 80%;
        margin-top: 15px;
        font-size: 0;
    }
    
    #editor_toolbar #toolbar_tools ul {
        height: 67px;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 75%;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods {
        float: right;
        width: 25%;
    }

    #editor_toolbar #toolbar_tools ul li {
        width: 33%;
        height: 50%;
        background: var(--color-content);
        font-size: 19px;
        padding: 6px 0;
        margin: 0;
        border-radius: 3px;
        border: 1px solid var(--color-neutral-mid);
        position: absolute;
        top: 0;
        left: 0;
        display: block !important;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods li {
        width: 100%;
        height: 100%;
        padding-top: 19px;
        font-size: 26px;
        top: auto;
        bottom: 0;
        transition: 0.15s linear;
    }
    
    #editor_toolbar ul li:not(.disabled):hover *, #editor_sidebar ul li:not(.disabled):hover * {
        color: var(--color-text) !important;
    }
    
    #editor_toolbar #toolbar_tools ul li#eyedropper.selected i, #editor_toolbar ul li#pan.selected i, #editor_toolbar #toolbar_tools ul li.fill-method.selected i{
        color: var(--color-primary) !important;
    }
    
    #editor_toolbar #toolbar_tools ul li.history-undo, #editor_toolbar #toolbar_tools ul li.history-redo, #editor_toolbar #toolbar_tools ul li#eyedropper {
        top: 50%;
    }
    
    #editor_toolbar #toolbar_tools ul li.history-undo, #editor_toolbar #toolbar_tools ul li.zoom-out {
        left: 33%;
    }

    #editor_toolbar #toolbar_tools ul li.history-redo, #editor_toolbar #toolbar_tools ul li.zoom-in {
        left: 66%;
    }

    #editor_toolbar #toolbar_tools ul li span {
        font-size: 0;
        padding: 0;
    }

    #editor_toolbar #toolbar_tools ul li#pan i {
        font-size: 19px;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods:before, #editor_toolbar #toolbar_tools ul#fill_methods:after {
        content: '';
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -7px;
        width: 14px;
        height: 2px;
        background: #000;
        border: 1px solid #fff;
        z-index: 2;
        opacity: 0.3;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods:after {
        top: 2px;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods li.selected {
        z-index: 1;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods li#mobile_fill_method_trigger {
        z-index: 2;
        display: block;
        opacity: 0;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods li#mobile_fill_method_trigger i {
        color: var(--color-text-op);
    }

    #editor_toolbar #toolbar_tools ul#fill_methods.open {
        z-index: 3;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods.open li#mobile_fill_method_trigger {
        opacity: 1;
    }

    #editor_toolbar #toolbar_tools ul#fill_methods.open li#paint {
        bottom: 100%;
    }
    
    #editor_toolbar #toolbar_tools ul#fill_methods.open li#flood {
        bottom: 200%;
    }
    
    #editor_toolbar #toolbar_tools ul#fill_methods.open li#erase {
        bottom: 300%;
    }
    
    #editor_toolbar #toolbar_tools ul#fill_methods.open li#replace {
        bottom: 400%;
    }
    
    #editor_toolbar #toolbar_tools ul#fill_methods.open li#text {
        bottom: 500%;
    }
    
    #toolbar_colors {
        display: inline-block;
        vertical-align: top;
        width: 18%;
        text-align: right;
        margin-top: 15px;
    }

    #editor_toolbar #toolbar_colors #bead_color_picker {
        margin: 0;
        display: inline-block;
        width: 100%;
        max-width: 120px;
        height: 60px;
    }

    #editor_toolbar #toolbar_colors #selected_color_name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        padding: 0;
        height: 52px;
    }
    
    #editor_toolbar #toolbar_palette, #editor_toolbar #mobile_recent_pane {
        position: fixed;
        top: 0;
        left: auto;
        right: 0;
        padding-top: 50px;
        z-index: 2;
        margin-right: -1px;
    }

    #toolbar_palette:after {
        top: 175px;
        width: 305px;
    }

    #editor_toolbar #toolbar_palette:before {
        display: none;
    }

    #editor_toolbar #toolbar_palette.open, #editor_toolbar #mobile_recent_pane.open {
        width: 311px;
        box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
        overflow: unset;
        pointer-events: all;
    }
    
    #editor_toolbar #toolbar_palette.open:before, #editor_toolbar #mobile_recent_pane.open:before {
        border: none;
        display: block;
        top: 0;
        width: 900px;
        height: 100%;
        background: var(--color-base);
        opacity: 0.5;
    }

    #editor_toolbar #toolbar_palette .palette-close {
        font-size: 21px;
        right: auto;
        left: 10px;
    }
    
    #editor_toolbar #mobile_recent_pane .palette-close {
        font-size: 21px;
        right: auto;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #toolbar_cp .alwan__inputs label > span {
        display: block;
        position: absolute;
        top: 10px;
        left: 15px;
        font-size: 0;
        height: 35px;
        width: 36px;
        background: #000;
        border: 1px solid #ddd;
    }

    #palette_color_list {
        border-bottom-width: 0;
        border-top-width: 175px;
        width: 311px;
    }

    #palette_color_list.display-grid ul span, #palette_color_list.display-grid ul li:hover span {
        width: 43px;
        height: 43px;
        margin: 3px;
    }

    #palette_color_list ul span {
        width: 34px;
        height: 34px;
        margin: 5px 10px 5px 12px;
    }

    #palette_color_list ul {
        font-size: 13px;
    }
    
    #palette_color_list ul li em {
        line-height: 44px;
        right: 5px;
    }

    .box-toggles > button {
        width: 35px;
        height: 35px;
    }

    #palette_color_options #custom_color_field > span {
        width: 35px;
        height: 35px;
    }    
    
    #floating_info_bar, #editor_rulers {
        display: none !important;
    }
    
    #toolbar_recent {
        position: absolute;
        top: 0;
        left: 0;
        height: 50px !important;
        width: 100%;
        padding: 0 10px;
    }
    
    #toolbar_recent::-webkit-scrollbar, #toolbar_recent *::-webkit-scrollbar, #toolbar_recent:hover::-webkit-scrollbar, #toolbar_recent *:hover::-webkit-scrollbar {
        height: 0;
        width: 0;
    }

    #editor_toolbar #toolbar_recent > label {
        font-size: 0;
        margin: 0;
        border: none !important;
        box-shadow: none !important;
        width: 30px;
        position: absolute;
        top: 23px;
        left: 65%;
        margin-left: 18px;
        transition: 0.15s linear;
        background: transparent !important;
    }
    
    #editor_toolbar #toolbar_recent > label.selected {
        z-index: 2;
        margin-left: 0;
        top: 8px;
    }
    
    #editor_toolbar #toolbar_recent > label.selected:after {
        content: '';
        position: absolute;
        top: 50%;
        margin-right: 0;
        margin-top: -10px;
        right: 100%;
        border: 5px solid transparent;
        border-right-color: var(--color-text-op);
    }

    #toolbar_recent > ul {
        height: 60px;
        width: 62%;
        display: block;
        border-top: none;
        white-space: nowrap;
        padding: 5px;
        overflow: auto;
        overflow-y: hidden;
        top: 50px;
        position: absolute;
        transition: 0.15s linear;
    }
    
    #toolbar_recent ul.selected {
        top: 0;
    }
    
    #editor_toolbar #toolbar_recent ul li {
        font-size: 0;
        display: inline-block !important;
        vertical-align: middle;
        width: 41px;
        padding: 5px;
    }
    
    #editor_toolbar #toolbar_recent ul li:hover:before {
        display: none;
    }
    
    #editor_toolbar #toolbar_recent ul li span {
        width: 30px;
        height: 30px;
        display: block;
    }
    #editor_toolbar #toolbar_recent ul#colorlist_pattern li:hover span {
        font-size: 0;
    }

    #editor_toolbar #toolbar_recent > label i {
        display: block;
        font-size: 12px;
        color: var(--color-text-mid);
        transition: 0.15s linear;
    }
    
    #editor_toolbar #toolbar_recent > label.selected i {
        font-size: 24px;
        color: var(--color-text);
    }
    
    #mobile_recent_trigger {
        float: right;
        height: 40px;
        border-radius: var(--border-radius-sm);
        background: var(--color-content);
        width: 40px;
        margin-top: 5px;
        margin-right: 10px;
        padding: 2px;
        font-size: 0;
        border: 1px solid var(--color-neutral-mid);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    #mobile_recent_trigger span {
        display: inline-block;
        vertical-align: middle;
        width: 40%;
        height: 40%;
        border-radius: 50%;
        margin: 5%;
        border: 1px solid #ddd;
    }

    #editor_toolbar #mobile_recent_pane {
        font-size: 0;
        text-align: center;
    }
    
    #editor_toolbar #toolbar_recent #mobile_recent_pane > label:not(.palette-close) {
        width: 49%;
        border-radius: 0;
        margin-left: -1px;
        padding: 13px 0;
        font-size: 13px;
        background: var(--color-base);
    }

    #editor_toolbar #toolbar_recent #mobile_recent_pane > label:not(.palette-close).selected {
        border-bottom-color: var(--color-content);
        padding: 15px 0;
        background: var(--color-content);
        color: var(--color-text);
    }
    
    #mobile_recent_pane ul {
        width: 311px;
        padding-bottom: 100px;
    }

    #editor_toolbar #toolbar_recent #mobile_recent_pane ul li {
        font-size: 12px;
        display: block !important;
        width: 100%;
        height: auto;
    }
    
    #editor_toolbar #toolbar_recent #mobile_recent_pane ul li:hover em {
        color: var(--color-text) !important;
    }

    #editor_toolbar #toolbar_recent #mobile_recent_pane ul li span {
        width: 35px;
        height: 35px;
        display: inline-block;
        vertical-align: middle;
        margin: 5px 15px 5px 5px;
        color: #fff !important;
        text-align: center;
        padding-top: 9px;
        text-shadow: 0 0 4px #000;
    }
    
    .editor-kandi #editor_toolbar #toolbar_recent #mobile_recent_pane ul li {
        display: inline-block !important;
        width: 64px;
        margin: 5px;
    }

    .editor-kandi #editor_toolbar #toolbar_recent #mobile_recent_pane ul li span {
        width: 100%;
        margin: 0;
        height: 36px;
    }
    
    #editor_sidebar {
        width: 0;
        height: 0;
        background: transparent;
    }
    
    #sidebar_utlities, #sidebar_layers, #edit_footer_right {
        position: fixed;
        top: calc(45% + 160px);
        left: 2%;
        width: auto;
        padding: 0;
        margin-left: 41px;
    }

    #sidebar_utlities > strong, #sidebar_layers > strong {
        display: none;
    }

    #sidebar_layers {
        left: auto;
        right: 2%;
        text-align: right;
        margin-left: 0;
        margin-right: 1px;
    }

    #sidebar_utlities ul, #sidebar_layers ul {
        margin: 0;
        border: none;
    }

    #sidebar_utlities ul li:not(#instant_image_trigger), #sidebar_layers ul li {
        display: inline-block;
        vertical-align: top;
        width: auto;
        font-size: 11px;
        border: none;
        margin: 0 0 0 5px;
        text-align: center;
        padding: 5px 10px 3px;
        background: var(--color-content);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    }

    #sidebar_utlities ul li:not(#instant_image_trigger) i, #sidebar_layers ul li i {
        font-size: 16px;
        margin-right: 8px;
    }

    #sidebar_layers ul li span em, #sidebar_layers ul li#toggle_guides, .editor-guide-btn {
        display: none !important;
    }
    
    #editor_footbar > div#edit_footer_right {
        font-size: 0;
        width: auto;
        margin-left: 1px;
    }
    
    #sidebar_project_info {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 12px;
        text-align: center;
    }

    #sidebar_project_info > strong {
        display: none;
    }

    .sidebar-stat {
        display: inline-block;
        vertical-align: middle;
        padding: 0 12px;
    }

    .sidebar-stat > span {
        padding-left: 5px;
    }
    
    #editor_footbar {
        bottom: 75px;
        background: transparent;
        border-top: none;
        z-index: 5;
        height: auto;
        text-align: center;
    }
    
    #editor_footbar > div#edit_footer_left {
        position: fixed;
        bottom: 35px;
        width: 100%;
        text-align: center;
        display: block;
        z-index: 1;
    }
    
    #editor_footbar > div#edit_footer_mid {
        width: 100%;
    }
    
    #current_project_title input#project_title:placeholder-shown {
        font-style: normal;
    }
    
    #editor_footbar > div > div {
        display: block;
        padding: 0;
    }    
    
    #current_project_title .psave-msg {
        background: var(--color-base);
    }
    
    #editor_footbar > div#edit_footer_right #foot_zoom {
        display: none;
    }
    
    #editor_footbar > div > div#foot_bg {
        padding-top: 0;
        line-height: 0;
        font-size: 0;
    }

    #editor_footbar > div > div#foot_bg > div {
        display: block;
        margin: 0;
        vertical-align: unset;
        padding: 7px;
        border-radius: 0 0 30px 30px;
        background: var(--color-content);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        width: 30px;
        white-space: nowrap;
        transition: width 0.15s linear;
        font-size: 0;
    }

    #editor_colors span {
        margin: 0 20px 0 0 !important;
        width: 16px;
        height: 16px;
        border: 1px solid var(--color-content) !important;
    }
    
    #foot_board_size {
        font-size: 12px;
    }
    
    #foot_board_size .fullscreen-toggle {
        display: none;
    }

    body.wizzing {
        overflow: hidden;
    }
    
    .editor-wizard-step {
        left: 4% !important;
        width: 92%;
        overflow: auto;
    }
    
    .editor-wizard-step .wizard-mobile, .faq-m {
        display: block;
    }
    
    .editor-wizard-step .wizard-desktop, .faq-d {
        display: none;
    }
    
    #editor_wizard:before {
        display: none;
    }
    
    #pw-oop-bottom_rail {
        display: none !important;
    }

    .ismobile .pw-corner-ad-video {
        bottom: 15px !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767px) {    
    #pegboard_svg_wrapper > .peg:hover {
        opacity: initial !important;
    }
    
    #pegboard_svg_wrapper > .peg:hover:after {
        display: none !important;
    }
    
    .option_buttons > button {
        margin-bottom: 25px;
    }
    
    #modal_newdoc .modal-body {
        padding-left: 0;
        text-align: center;
        overflow: auto;
    }
    
    .newdoc-step .back-btn {
        width: 120px;
        display: block;
        font-size: 16px;
    }

    .new-project-sidebar {
        position: relative;
        height: auto;
        top: auto;
        left: auto;
        width: auto;
        padding-right: 0;
        border: none;
    }
    
    .new-project-sidebar .sidebar-btn {
        text-align: center;
        padding-left: 0 !important;
    }
    
    .newdoc-sidebar-tab {
        display: inline-block;
        vertical-align: bottom;
        width: 50%;
        border-top: none;
        border-bottom: 1px solid var(--color-neutral-mid) !important;
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        text-align: center;
        font-size: 16px;
    }

    .newdoc-sidebar-tab.curtab {
        background: linear-gradient(180deg, var(--color-primary-trans), var(--color-content));
        border: 1px solid var(--color-neutral-mid) !important;
        border-bottom: none !important;
    }

    #new_pony_menu .newdoc-sidebar-tab {
        width: 25%;
        font-size: 13px;
        height: 110px;
        padding-top: 25px;
    }

    #new_pony_menu .newdoc-sidebar-tab[data-tabto="multistitch"] {
        padding-top: 15px;
    }

    #new_pony_menu .newdoc-sidebar-tab img {
        display: block;
        margin: 0 auto 5px;
    }

    #new_pony_menu .newdoc-sidebar-tab > span > span {
        display: none;
    }

    #new_pony_menu .newdoc-sidebar-tab > span > em {
        display: block;
    }
    
    .new-project-content {
        padding: 0 15px 15px;
        text-align: left;
        height: auto;
    }
    
    #new_project_load {
        height: auto;
        text-align: center;
    }
    
    .new-project-content, .new-project-content h4, .new-project-content h3 {
        text-align: center !important;
    }
    
    .start-project-btn {
        width: 100%;
    }

    #resizepreset_select, #pbpreset_select, #pborientation_select, #pborientation_ladder {
        width: 80% !important;
    }

    .board-option-content h4 > img {
        display: block;
        margin: 0 auto 10px !important;
    }

    #cotd_newdoc_wrapper {
        margin: 0 -15px 60px;
        background: var(--color-content);
        border-radius: 0;
        border: none;
        text-align: left;
        border-bottom: 1px dashed var(--color-neutral-mid);
        border-top: 1px dashed var(--color-neutral-mid);
        box-shadow: 0 30px 0 var(--color-content);
    }

    #cotd_newdoc_wrapper h3 {
        color: var(--color-text);
        margin-bottom: 10px;
        text-align: left !important;
    }

    #cotd_newdoc_wrapper h3 a {
        font-size: 16px;
    }

    #autosave_pop #asp_inner > button {
        display: block;
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 600px) {
    #modal_newdoc .modal-head {
        text-align: left;
    }
    
    #newdoc_logo svg:not(.mobile-logo) {
        display: none;
    }
    
    #newdoc_logo svg.mobile-logo {
        display: inline-block;
    }
    
    #editor_menubar #editor_save > button > strong > em {
        display: none;
    }
    
    #landing_content h1 {
        font-size: 36px;
        line-height: 1;
        margin-bottom: 10px;
    }
    
    #landing_content h2 {
        font-size: 18px;
    }
    
    #new_board_options {
        padding-top: 30px;
    }
    
    #new_board_options .new-board-option-set {
        font-size: 14px;
    }
    
    .option_buttons > button {
        margin-bottom: 20px;
    }
    
    .option_buttons > button.newbanner:after {
        top: 66px;
    }
    
    .kp-modal .manual-dimensions {
        display: block;
        margin: 15px 0;
    }

    .kp-modal .manual-dimensions > select {
        display: inline-block;
        vertical-align: middle;
    }

    .kp-modal .manual-dimensions > i {
        display: inline-block;
        vertical-align: middle;
        padding: 0 15px;
    }

    .kp-modal .manual-dimensions > label {
        display: none;
    }
    
    #modal_project_info #kandi_info_color .info-bead-wrapper.perler {
        width: 49%;
    }
    
    #instant_palettes .insta-palette .insta-palette-colors li {
        width: 50%;
    }
    
    #modal_ai .modal-body button {
        padding: 30px 0;
    }

    #modal_ai .modal-body button img {
        display: block;
    }
    
    #ai_section_history .history-images {
        height: 200px;
    }

    #modal_color_palettes .palette-color-section {
        display: none;
    }
    
    #modal_color_palettes .palette-color-section.current {
        width: 100%;
        display: block;
        margin: 0;
        z-index: 1;
        border-color: transparent;
        padding: 0;
    }
    
    #modal_color_palettes .palette-color-section > strong {
        display: inline-block !important;
        vertical-align: bottom;
        cursor: pointer;
    }
    
    #modal_color_palettes .palette-color-section.current > strong {
        border: 1px solid var(--color-neutral-mid);
        border-bottom-color: transparent;
        padding: 10px 20px;
        border-radius: var(--border-radius-sm) 5px 0 0;
        margin-bottom: -1px;
        z-index: 1;
        position: relative;
    }

    #modal_color_palettes .palette-color-section.current > strong:not(.mobile-tab) {
        border-bottom-color: var(--color-content);
        color: var(--color-secondary);
    }

    #modal_color_palettes .palette-color-section .new-colors-content {
        border-top: 1px solid var(--color-neutral-mid);
    }
    
    .new-colors-content ul li.added:hover, .new-colors-content ul#added_colors_list li:hover {
        background: rgba(24, 145, 134, 0.1);
    }
    
    #new_palette_unused .kp-color-picker {
        margin-top: 10px;
    }
    
    #user_custom_palettes .ucp-colors .custom-palette-color {
        display: block;
        width: 100%;
    }
    
    #snapshot_board span, #project_3d_btn span {
        font-size: 0;
    }

    #snapshot_board i, #project_3d_btn i {
        margin: 0 !important;
        line-height: 0;
        font-size: 18px !important;
    }
    
    #editor_menubar .menu-category > ul > li > span, #editor_menubar #editor_save > ul > li > span {
        display: none;
    }
}

@media (max-width: 480px) {

    #editor_sidebar #ref_photo_tool, #editor_sidebar #instant_image_trigger {
        width: 120px !important;
        font-weight: 500;
    }

    #editor_sidebar #ref_photo_tool > i, #editor_sidebar #instant_image_trigger > i {
        font-size: 21px;
        margin-right: 5px;
    }
    
    #editor_sidebar #instant_image_trigger {
        margin-left: 0;
        left: 150px !important;
        width: 105px !important;
    }
    
    #editor_sidebar #ref_photo_tool > span, #editor_sidebar #instant_image_trigger > span {
        font-size: 12px;
        width: 70px;
    }

    #editor_sidebar #instant_image_trigger > span {
        width: 55px !important;
    }

    #editor_menubar #editor_save {
        height: 42px;
    }
    
    #editor_menubar #editor_save > button {
        line-height: 1;
    }

    #editor_menubar #editor_save > button > strong {
        padding: 16px 12px;
    }

    #editor_menubar #editor_save > button > strong > i {
        padding-right: 5px;
    }

    #editor_menubar #editor_save > button > span {
        padding: 9px 8px 0 5px;
    }
    
    #foot_board_size {
        font-size: 0;
    }
}

@media (max-width: 446px) {

    #modal_newdoc .secondary-menu-trigger {
        padding-right: 15px;
    }
    
    #modal_newdoc .kp-modal {
        height: 96%;
        width: 96%;
        left: 2%;
    }
    
    #modal_newdoc .kp-modal.showing {
        top: 2%;
    }
    
    .newdoc-sidebar-tab img, .newdoc-sidebar-tab i {
        display: block;
        margin: 0 auto 5px;
    }
    
    .option_buttons > button {
        margin-bottom: 15px;
    }
    
    #instant_palettes .insta-palette .insta-palette-colors li {
        width: 50%;
    }

    #ai_section_history .history-record {
        display: block;
        width: 100%;
        margin: 15px 0;
    }
    
    #ai_section_history .history-images {
        height: 258px;
    }
    
    #snapshot_board, #project_3d_btn {
        display: none !important;
    }
    
    #snapshot_board, #project_3d_btn {
        display: none !important;
    }

    #sidebar_reference_photo {
        margin-left: 10px;
    }

    #editor_sidebar #ref_photo_tool > span, #editor_sidebar #instant_image_trigger > span {
        font-size: 11px;
        width: 62px;
    }

    #editor_sidebar #ref_photo_tool, #editor_sidebar #instant_image_trigger {
        width: 110px !important;
        font-weight: 500;
    }

    #editor_sidebar #instant_image_trigger {
        left: 125px !important;
        width: 100px !important;
    }

    #editor_sidebar #instant_image_trigger > span {
        width: 50px !important;
    }

    #editor_menubar #editor_save > button {
        font-size: 11px;
    }

    #editor_menubar #editor_save {
        margin-right: 10px;
    }

    #editor_menubar .menu-category > strong {
        font-size: 12px;
    }
    
    .sidebar-stat {
        padding: 0 5px;
    }
}

@media (max-width: 900px) and (max-height: 880px) {
    #editor_footbar {
        bottom: 65px;
    }

    #sidebar_reference_photo, #instant_image_trigger, #editor_save {
        top: 90px;
    }
    
    #editor_workspace {
        top: 140px;
    }
    
    #sidebar_utlities, #sidebar_layers, #edit_footer_right {
        top: calc(45% + 140px);
    }
    
    #editor_toolbar {
        top: calc(45% + 180px);
    }
}

@media (max-width: 900px) and (max-height: 810px) {
    #sidebar_project_info {
        padding: 8px 0;
        font-size: 11px;
    }

    #editor_footbar > div#edit_footer_left {
        bottom: 25px;
    }

    #editor_footbar {
        bottom: 50px;
    }

    #editor_menubar {
        height: 35px;
    }

    #secondary_menu_trigger {
        padding: 4px 10px 0;
    }

    #editor_logo {
        top: 9px;
        margin-left: -55px;
    }

    #editor_logo img {
        height: 18px;
        width: 110px;
    }

    #editor_menu_items {
        top: 35px;
    }

    #sidebar_reference_photo, #instant_image_trigger, #editor_save {
        top: 85px;
    }

    #editor_menubar #editor_save {
        height: 35px;
    }

    #editor_sidebar #ref_photo_tool, #editor_sidebar #instant_image_trigger {
        padding: 2px 5px !important;
    }

    #editor_menubar #editor_save > button > strong {
        padding-top: 13px;
    }

    #editor_menubar #editor_save > button > span {
        padding-top: 6px;
    }

    #editor_workspace {
        top: 130px;
    }

    #sidebar_utlities, #sidebar_layers, #edit_footer_right {
        top: calc(45% + 130px);
    }

    #editor_toolbar {
        top: calc(45% + 170px);
    }
}


@media (max-height: 840px) {
    .has-kpstickyad .sidebar-group {
        padding-bottom: 0;
    }

    .has-kpstickyad #editor_toolbar #toolbar_tools ul li {
        padding: 5px;
    }

    .has-kpstickyad #editor_toolbar > section:not(#toolbar_palette) label {
        padding: 5px 10px;
    }

    .has-kpstickyad #editor_toolbar #toolbar_recent > label, .has-kpstickyad #editor_toolbar #toolbar_recent #mobile_recent_pane > label:not(.palette-close) {
        margin-top: 5px;
    }
    
    .has-kpstickyad #ref_photo_tool {
        height: 60px;
        padding-top: 5px;
    }

    .has-kpstickyad #ref_photo_tool > i {
        line-height: 0;
    }
}

@media (max-width: 900px) and (max-height: 750px) {
    #sidebar_reference_photo, #instant_image_trigger, #editor_save {
        top: 78px;
    }

    #editor_workspace {
        top: 120px;
        height: calc(100% - 375px);
    }

    #sidebar_utlities, #sidebar_layers, #edit_footer_right {
        top: calc((100% - 415px) + 160px);
    }

    #editor_toolbar {
        top: calc((100% - 415px) + 190px);
        padding-top: 55px;
    }
    
    #toolbar_tools {
        margin-top: 5px;
    }
    
    #toolbar_colors {
        margin-top: 8px;
    }
    
    #sidebar_project_info {
        padding: 2px 0;
    }

    #editor_footbar > div#edit_footer_left {
        bottom: 15px;
    }

    #editor_footbar {
        bottom: 40px;
    }

    #current_project_title input#project_title {
        padding: 2px;
    }
}