.multi-wrapper { border-radius: 3px; width: 100%; box-sizing:border-box; height:calc(100vh - 333px); } .multi-wrapper .non-selected-wrapper, .multi-wrapper .selected-wrapper { box-sizing: border-box; display: inline-block; height: calc(100% - 50px); padding: 0; vertical-align: top; width: calc(50% - 5px); border-radius: 3px; border: 1px solid #ccc; } .multi-wrapper .non-selected-wrapper { background: #fafafa; margin:10px 10px 0 0; overflow-y: auto; } .multi-wrapper .selected-wrapper { background: #fff; margin:10px 0 0 0; overflow-y: auto; } .multi-wrapper .header { color: #4f4f4f; cursor: default; width:100%; box-sizing:border-box; font-weight: bold; background:#f1f1f1; font-size:1.1em; margin-bottom: 5px; padding: 12px 10px 10px; border-bottom:1px solid #ccc; } .multi-wrapper .item { cursor: pointer; display: block; padding: 5px 10px; } .multi-wrapper .item:hover { background: #ececec; border-radius: 2px; } .multi-wrapper .search-input { display: block; font-size: 1em; margin: 0; outline: 0; padding:5px 10px; width: 100%; box-sizing: border-box; } .admin_contents .multi-wrapper .inputText, .admin_contents .multi-wrapper input[type="text"] { height:50px !important; border: 1px solid #ccc; } .multi-wrapper .non-selected-wrapper .item.selected { opacity: 0.5; } .multi-wrapper .non-selected-wrapper .item.disabled, .multi-wrapper .selected-wrapper .item.disabled { opacity: 0.5; text-decoration: line-through; } .multi-wrapper .non-selected-wrapper .item.disabled:hover, .multi-wrapper .selected-wrapper .item.disabled:hover { background: inherit; cursor: inherit; }