.content-sheet-wrap { height: auto; width: 700px; position: relative; display: inline-flex; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; user-select: none; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; } .content-sheet-wrap.drop-zone-hint { box-shadow: 0 0 10px #64b8df; } .content-sheet-selected { outline: 1px solid #64b8df; } .content-sheet-items { display: flex; flex-direction: column; min-height: 600px; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } .content-sheet-placeholder { width: calc(~'100% - 20px'); height: calc(~'100% - 20px'); border: 1px dashed #c0c0c0; margin: 10px; position: absolute; display: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; color: #c0c0c0; font-size: 14pt; } .content-sheet-placeholder-visible { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .content-sheet-wrap .reorderable { height: 2px; width: 100%; padding: 1px 0px 1px 0px; margin: -1px 0px -1px 0px; background: #64b8df; position:relative; z-index: 1; } .content-sheet-wrap .reorderable-arrow { position:absolute; z-index: 1; left: -17px; top: -7px; width: 0; height: 0; border-top: 8px solid transparent; border-left: 16px solid #64b8df; border-bottom: 8px solid transparent; } .content-sheet-tools-wrap { position: absolute; top: -20px; right: -20px; width: 40px; z-index: 100; } .content-sheet-tools-wrap > .t-btn-wrapper { } .content-sheet-tools-wrap > .t-btn-wrapper span { width: 20px; height: 20px; background-color: #fff; }