.layout-area, .hover-after-label{font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; font-size: 16px;}
.layout-content{min-height: 20px; padding-right: 11px!important; min-width: 20px;}
.layout-element h1, .layout-element h2, .layout-element h3, .layout-element h4, .layout-element h5, .layout-element h6{margin: 10px 0;}
.layout-content:hover{border: 1px dashed blue;}
section.layout-content{min-height: 80px;}
section.layout-content:hover{border: 1px solid blue;}
.layout-content.layout-active{border: 2px solid #a31010; background-color: rgba(163, 16, 16, 0.3);}
section.layout-content.layout-active{border: 2px solid blue;}
.hover-after-label{  writing-mode: vertical-rl; width: 10px; text-orientation: upright; position: absolute; font-size: 8px; padding: 0!important; margin: 0!important; right: 0; top: 0; display: block; background-color: #a31010; cursor: pointer; color: #fff;}
section > .hover-after-label{background-color: blue;}
.no-subcontent > .hover-after-label{background-color: #555;}
.layout-button{padding: 4px; background-color: #a31010; border-radius: 3px; color: #fff; display: inline-block; cursor: pointer;}
.section-add-between .layout-button{background-color: blue;}
.section-add-between{position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); display: none;}
.add-content{position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); display: none; font-size: 16px!important; font-weight: normal;}
.layout-content.layout-active > .section-add-between, .layout-content.layout-active > .add-content{display: block;}

.layout-panel{padding: 10px; border: 1px solid #adadad;  border-radius: 4px; width: fit-content;margin: 30px auto; background: #fff; color: #000;}
.layout-panel > *, .layout-editor > div{padding: 5px 10px; border-right: 1px solid #adadad; cursor: pointer; font-size: 16px; line-height: 18px; text-transform: uppercase; text-align: center;}
.layout-panel > div img{height: 20px;  width: 50px; display: block; margin-bottom: 10px;}
.layout-panel > *:last-child, .layout-editor > div:last-child{border-right: unset;}

.layout-editor{font-size: 16px; font-family: sans-serif; color: #fff; position: fixed; width: fit-content; box-sizing: border-box; line-height: 18px; height: fit-content; padding: 4px!important; border-radius: 5px; background: #a31010; display: none;}
#layout-editor-container .layout-editor{display: flex; position: fixed; top: 5px; box-shadow: 1px 1px 3px #999; left: 50%; transform: translateX(-50%);z-index: 100; width: max-content; max-width: 100%;}
.layout-editor:hover{z-index: 1001;}
.layout-editor > div img{height: 30px; width: 30px; display: block; filter: invert(1);}
.layout-editor > div{padding: 5px 10px;}
.layout-editor > .flex{align-items: center; gap: 5px;}
.layout-editor .layout-panel{background-color: blue;}

.layout-editor .layout-panel{position: absolute; top: -115px; left: -5px; display: none;}
.layout-editor .add-layout-element:hover > .layout-panel{display: flex;}
.layout-editor .layout-panel > div{font-size: 16px; padding: 2px 5px;}
.layout-editor .layout-panel > div img{height: 30px; width: 30px;}

#layout-create > a{color: #999}
#layout-create > .active{color: #fff; background-color: #999;}

.layout-content .swiper{overflow: unset;}
.swiper {width: 100%; height: 500px;}

.add-layout-content{cursor: pointer; padding: 5px 20px; border-radius: 3px;}
.add-layout-content.active{background-color: #bcd4e9;}

/* BLOG */
.layout-blog-preview .not-active{position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); background-color: #a31010; text-align: center; font-size: 36px; z-index: 3; color: #fff; padding: 10px 0;}
.layout-blog-item .side-panel{border-left: 1px solid #9a9a9a;;}
.side-panel .layout-blog-side{border-bottom: 1px solid #9a9a9a;}
.side-panel .layout-blog-side:last-child{border-bottom: unset;}

@media only screen and (max-width: 1080px){
    .layout-blog-item .side-panel {border-left: none;}
}