/* Editor Styles for HTML5 Semantic Elements */

.html5-semantic-article-editor,
.html5-semantic-aside-editor {
    position: relative;
    padding: 20px;
    border: 2px dashed #2271b1;
    border-radius: 4px;
    margin: 10px 0;
}

.html5-semantic-article-editor {
    background-color: rgba(34, 113, 177, 0.05);
}

.html5-semantic-aside-editor {
    background-color: rgba(130, 36, 227, 0.05);
    border-color: #8224e3;
}

.html5-semantic-label {
    position: absolute;
    top: -12px;
    left: 10px;
    padding: 2px 8px;
    background-color: #2271b1;
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
}

.html5-semantic-aside-editor .html5-semantic-label {
    background-color: #8224e3;
}