.datatable *, .datatable *::after, .datatable *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } .datatable { position: relative; overflow: auto; } .dt-header { border-collapse: collapse; border-bottom: 1px solid #d1d8dd; position: absolute; top: 0; left: 0; background-color: #fff; } .dt-body { border-collapse: collapse; } .dt-scrollable { max-height: 40vw; overflow: auto; border-bottom: 1px solid #d1d8dd; } .dt-scrollable--highlight-all { background-color: #fffce7; } .dt-scrollable__no-data { text-align: center; padding: 16px; padding: 1rem; border-left: 1px solid #d1d8dd; border-right: 1px solid #d1d8dd; } .dt-row--highlight { background-color: #fffce7; } .dt-row--unhighlight { background-color: #fff; } .dt-row--hide { display: none; } .dt-cell { border: 1px solid #d1d8dd; position: relative; outline: none; padding: 0; } .dt-cell__content { padding: 8px; padding: 0.5rem; border: 2px solid transparent; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .dt-cell__edit { display: none; padding: 8px; padding: 0.5rem; background-color: #fff; border: 2px solid rgb(255, 160, 10); z-index: 1; height: 100%; } .dt-cell__resize-handle { opacity: 0; position: absolute; right: -3px; top: 0; width: 5px; height: 100%; cursor: col-resize; z-index: 1; } .dt-cell--editing .dt-cell__content { display: none; } .dt-cell--editing .dt-cell__edit { display: block; } .dt-cell--focus .dt-cell__content { border-color: rgb(82, 146, 247); } .dt-cell--highlight { background-color: #f5f7fa; } .dt-cell--dragging { background-color: #f5f7fa; } .dt-cell--header .dt-cell__content { padding-right: 16px; padding-right: 1rem; font-weight: bold; } .dt-cell--header:hover .dt-dropdown__toggle { opacity: 1; } .dt-cell--tree-close .dt-tree-node__toggle:before { content: '►'; } .dt-dropdown { position: absolute; right: 10px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: top; text-align: left; font-weight: normal; cursor: pointer; } .dt-dropdown__toggle { opacity: 0; } .dt-dropdown__list { display: none; position: absolute; min-width: 128px; min-width: 8rem; top: 100%; right: 0; z-index: 1; background-color: #fff; border-radius: 3px; padding: 8px 0; padding: 0.5rem 0; -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1); box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1); } .dt-dropdown__list-item { padding: 8px 16px; padding: 0.5rem 1rem; } .dt-dropdown__list-item:hover { background-color: #f5f7fa; } .dt-dropdown--active .dt-dropdown__list { display: block; } .dt-tree-node { display: inline-block; position: relative; } .dt-tree-node__toggle { display: inline-block; position: absolute; font-size: 10px; padding: 0 4px; cursor: pointer; } .dt-tree-node__toggle:before { content: '▼'; } .dt-toast { position: absolute; bottom: 16px; bottom: 1rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .dt-toast__message { display: inline-block; background-color: rgba(0, 0, 0, .8); color: #dfe2e5; border-radius: 3px; padding: 8px 16px; padding: 0.5rem 1rem; } .dt-input { outline: none; width: 100%; border: none; overflow: visible; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; padding: 0; } .dt-freeze { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #f5f7fa; opacity: 0.5; font-size: 2em; } .dt-freeze__message { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } body.dt-resize { cursor: col-resize; }