.hidden-important {
    display: none !important;
}

#editor-start {
    width: calc(var(--info-text-width) / 2);
    margin: 10px auto;
    padding: 10px;
}
.editor-top {
    margin: 80px auto 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;      
}

.editor-block {
    display: block;
    background-color: var(--bg-color);
    text-align: left;
    padding: 20px;
    font-size: 16px;
    border-radius: 20px;
}

.flex {
    display: flex;
 }
 
 .border {
     border: 1px solid;
     border-radius: 20px;
     border-color: var(--border);
 }
 
 .gap {
     gap: 20px;
 }
 
 .pad {
     padding: 0 !important;
 }

.editor-block-98 {
    width: var(--info-text-width);
    margin: 20px auto;
    padding: 20px;
}

.editor-block-49 {
    width: calc(var(--info-text-width) / 2);
    margin: 10px auto;
    padding: 10px;
}

.front-block-49 {
    width: calc(var(--info-text-width));
    margin: 10px auto;
    padding: 10px;
}

.front-block-98 {
    width: calc(var(--info-text-width));
    margin: 10px auto;
}

.editor-block-page {
    width: var(--info-text-width);
    margin: 20px auto;
    padding: 20px;
}

.editor-block::after,
.front-block-49::after,
.front-block-98::after,
.editor-block-page::after {
    content: "";
    display: block;
    clear: both;
}

.editor-input {
    display: inline-flex; 
    align-items: center; 
    gap: 6px;    
}

.editor-top label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin-right: 8px;
}

.editor-top .radio-group {
    display: inline-flex;         
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;           
}

.editor-top .radio-group label {
    white-space: nowrap;
}

.editor-top input[type="text"] {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
}

@media (max-width: 900px) {
    .editor-block-98,
    .editor-block-49,
    .editor-block-page {
        width: 100% !important;
    }
}
.editor-menu {
    display: flex;
    position: fixed;
    gap: 5px;
    align-self: center;
    z-index: 1000;
    background-color: var(--menu-bg-color);
}    

.editor-menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
}

.editor-menu button.active {
    background: #bbb;
}

.editor-menu button svg {
    width: 24px;
    height: 24px;
}    

.editor-block img {
    max-width: 100%;
    height: auto !important;
    display: block;
    margin: 10px auto;
}

.editor-block ol {
    counter-reset: item;
    list-style: none;
    padding-left: 1.5em;
    margin: 0.5em;
}

.editor-block li {
    display: list-item;
    margin: 0.25em 0;
}

/* only apply custom numbering inside <ol>, not <ul> */
.editor-block ol li {
    counter-increment: item;
}

.editor-block ol li::marker {
    content: counters(item, ".") ". ";
}

.editor-block ul {
    margin: 0.3em 0 0.7em 1.5em;
    padding: 0;
    list-style-type: disc;
    list-style-position: outside;
    word-wrap: break-word;
}


.editor-block ul ul,
.editor-block .double-indent {
    margin-left: 1.5em;
    list-style-type: circle;
}

.editor-block h1 {
    text-align: center;
    color: #365F91;
}

.editor-block h2 {
    text-align: center;
    color: #365F91;
}

.editor-block li h2 {
    text-align: left;
}

.editor-block h3 {
    color: #365F91;
}

.editor-block-hr-solid {
    border-top: 2px solid;
}    

.editor-block-hr-dashed {
    border-top: 3px dashed;    
}    

.editor-block-hr-dotted {
    border-top: 3px dotted;
}    

.editor-block-hr-double {
    border-top: 3px double;
}    

#editor {
    position: relative;
    border: 1px solid transparent;
}

#editor:focus {
    outline-color: blue;
    outline-width: 5px;
    outline: double;
    outline-offset: 3px;    
}

#editor img { 
    max-width: 100%; 
    cursor: pointer; 
}

#editor-img-resize-box {
    position: absolute; 
    border: 1px solid #6b7280; 
    pointer-events: none;
    display: none; 
    box-sizing: border-box; 
    background: rgba(255,255,255,0.15);
}

.editor-img-handle {
    position: absolute; 
    width: 10px; 
    height: 10px; 
    background: #2563eb;
    border-radius: 2px; 
    pointer-events: all; 
    cursor: nwse-resize;
}

.editor-img-handle.br { 
    right: -5px; 
    bottom: -5px; 
}