.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-content{overflow: unset!important;}
.layout-element h1, .layout-element h2, .layout-element h3, .layout-element h4, .layout-element h5, .layout-element h6{margin: 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;}
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: #f1f1f1; border-radius: 3px; color: #000; display: inline-block; cursor: pointer; transition: 0.3s;}
.layout-button.active, .layout-button:hover{background-color: rgb(0, 132, 255); color: #fff;}
#manage-top{background-color: #e1e1e1; position: sticky; top: 0; z-index: 999;}
#edit-layout{position: fixed; left: 40px; bottom: 40px; padding: 5px 10px; z-index: 999;}

.section-add-between .layout-button{background-color: blue;}
.section-add-between{position: absolute; bottom: -15px; left: 60%; 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-content .background{height: calc(100% + 40px); top: -40px;}

.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; z-index: 9; font-family: sans-serif; color: #fff; position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); 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;}
.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 .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;}
.breakpoint-icon > svg{width: 30px; height: 30px;}

#layout-create > a{color: #999}
#layout-create > .layout-active{text-decoration: underline; color: #fff;}

.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;}

/* NEW */
.layout-grid { display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: 3vh; gap: 0.8vh; position: relative;}
.grid-overlay { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-columns: repeat(24, 1fr); grid-auto-rows: 3dvh; gap: 0.8dvh; z-index: 0;}
.grid-overlay div { border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.02);}
.layout-grid-block {border-radius: 6px; cursor: grab; position: relative;}
.layout-grid-block .image{user-drag: none; -webkit-user-drag: none;}
.block-handle {position: absolute;width: 10px;height: 10px;background: white;border: 2px solid black; display: none; z-index: 2;}
.layout-active > .block-handle{display: block;}

.block-handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
.block-handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
.block-handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.block-handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }

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