.kg-articlebuilder {
    display: block;
    width: 100%;
}
.kg-articlebuilder-parts {
    width: inherit;
}
.kg-articlebuilder-addPartBtn {
    width: 50%;
    height: 50px;
    border: 2px dotted #b9b9b9;
    border-radius: 5px;
    padding: 10px 10px;
    background: #f1f1f1;
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto;
    margin-top: 1rem;
}
.kg-articlebuilder-addPartBtn svg {
    width: 30px;
    height: 30px;
}

.kg-articlebuilder-addPartBtn:hover {
    background: #dddddd;
}

*[contenteditable="true"]:focus, *:focus {
    outline: 1px solid #31fff5;   
    border-radius: 5px;
}
.kg-article-divider {
    width: 100%;
    height: 62px;  
    font-size: 25px;
    line-height: 1.6em;
    text-align: center;
}
.kg-article-divider-stars::before {
    display: inline-block;
    content: '***';
    line-height: 62px;
    height: 30px;
    letter-spacing: 0.2em;
}
.kg-article-divider-dotted::before {
    display: inline-block;
    content: '---';
    line-height: 62px;
    height: 30px;
    letter-spacing: 0.2em;
}
.kg-article-divider-arrows::before {
    display: inline-block;
    content: ' «---» ';
    line-height: 62px;
    height: 30px;
    letter-spacing: 0.2em;
}
.kg-article-spacing {
    overflow: hidden; 
}
.kg-article-spacing[tabindex="1"]:hover	 {
    background: #e2e2e250;
    cursor: pointer;
    border-radius: 5px;
}
.kg-article-spacing:focus {
    resize: vertical; 
}
.aboveHead {
    background-color: #34383c;
    display: flex;
}
.kg-article-toolbox-upper {
    position: relative;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 17px;
    font-weight: 500;
    width: 100vh;
    height: 100%;
    background-color: #34383c;
    border-radius: 5px;
}
.kg-article-toolbox-header {
    text-align: center;
    color: white;
    margin: 0.25rem 0.25rem 0.25rem 0.5rem;
}
.kg-article-toolbox-button {
    text-align: center;
    margin: 0.25rem 0.25rem 0.25rem 0.5rem;
    color: white;
    background-color: #404349;
    border: 1px solid #404349;
    cursor: grab;
    border-radius: 5px;
    height: 2rem;
    width: 10rem;
}
.kg-article-toolbox-button:hover {
    color: rgba(139, 251, 255, 0.85);
    box-shadow: 1px 0.5px 1px 1px rgba(0, 0, 0, 0.25);
    transition: box-shadow .15s ease-in-out;
}
.kg-article-highlighted {
    border: 4px solid turquoise;
    border-radius: 5px;
}
.kg-article-save {
    margin: 0.25rem 0.25rem 0.25rem 0.5rem;
    text-align: center;
    background-color: rgb(23, 141, 19);
    border-radius: 5px;
    color: white;
    border: 1px solid rgb(23, 141, 19);
    height: 2rem;
    width: 10rem;
    float: left;
}
.kg-article-save:hover {
    box-shadow: 1px 0.5px 1px 1px rgba(0, 0, 0, 0.466);
    transition: box-shadow .25s ease-in-out;
}

.kg-article-checklist {
    margin: 0;
    padding: 0;
}
.kg-article-checklist-item {
    display: flex;
    box-sizing: content-box;
}
.kg-article-checklist-item__content {
    outline: none;
    flex-grow: 1;
    padding: 5px 0;
    margin-left: 7px;
}
.kg-article-checklist-box {
    border-radius: 50%;
    border: 1px solid #b6b6b6;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 5px 0;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background-color: #ffff;
    position: relative;
    transition: background .7s ease-in-out;
    justify-self: center;
    align-self: center;
}
.kg-article-checklist-box:hover {
    background-color: #b5b5b5;
}
.kg-article-checklist-box::after {
    position: absolute;
    top: 6px;
    left: 5px;
    width: 9px;
    height: 4px;
    border: 2px solid #ffff;
    border-top: none;
    border-right: none;
    background: transparent;
    content: '';
    opacity: 0;
    transform: rotate(-45deg);
    transition: background .2s ease-in-out, opacity .2s ease-in-out;
}
.kg-article-checklist-item--checked .kg-article-checklist-box {
    background-color: #388ae5;
    border-color: 1px solid #388ae5;
}
.kg-article-checklist-item--checked .kg-article-checklist-box:hover {
    background-color: #307cd1;
}
.kg-article-checklist-item--checked .kg-article-checklist-box::after{
    opacity: 1;
}
.kg-article-part {
    margin: .5rem 0;
    padding: 5px 0;
    position: relative;
}
.kg-article-part--hover {
    border: 2px solid #388ae5;
}
.kg-article-part__content {
    min-height: 10px;
}
.kg-article-part-empty {
    color: #969696;
    text-align: center;
    background: transparent;
    transition: background .25s ease-in-out, color .3s ease-in-out;
}
.kg-article-part--dragover .kg-article-part-empty {
    background: rgba(0, 0, 0, 0.25);
    color: white;
}
.kg-article-image:focus img {
    border: 2px dotted #494949;
}
.kg-article-image[tabindex="-1"]:hover img {
    cursor: pointer;
}
.kg-article-image__content {
    max-height: 25rem;
    max-width: 100%;
}
.resizeable {
    resize: both;
    overflow: auto;
}
.kg-article-part-editbox-wrapper {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
}
.kg-article-part-empty-text  {
    font-size: x-large;
}