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

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