html {height: 100%;}

::-webkit-scrollbar { width: 8px;}
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.3)}

.feather {
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
}

[data-editor] * {
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;  
    user-select: none;
}

[data-editor] [data-editor-form] {
    display: none;
}

/* Top Bar */
[data-editor] .topbar {
    background-color: #F9F9F9;
    padding: 10px;
}

/* Table */
[data-editor] table {
    width: 100%;   
    table-layout: fixed;
}

/* Columns */
[data-editor] table td {
    position: relative;
    padding: 3px;
    font-size: 14px;

    border: 1px solid #EEE;
}
[data-editor] table td.grab {
    cursor: grab;
    width: 30px;
    text-align: center;
    opacity: 0;
}
[data-editor] table td.remove {
    cursor: pointer;
    width: 30px;
    text-align: center;
    opacity: 0;
    transition: opacity .1s ease;
}
[data-editor] table tr:hover td.grab,
[data-editor] table tr:hover td.remove{
    opacity: 1;
}

/* Head */
[data-editor] table thead td {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Body */
[data-editor] table tbody tr {
    transition: background-color .1s ease;
}
[data-editor] table tbody tr:nth-child(odd) {
    background-color: #F9F9F9;
}
[data-editor] table tbody tr:hover {
    background-color: #F6F6F6;
}

/* Form */
[data-editor] table td input,
[data-editor] table td select {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    border-bottom: 1px solid transparent;
}
[data-editor] table td input:focus,
[data-editor] table td select:focus {

    border-bottom: 1px solid #007bff;
}


/* Dark Theme 
------------------------------------------------------------ */
body.theme-dark {    
    background: #2b2b2b;
    color: #FFF;
}

body.theme-dark [data-editor] table td input, 
body.theme-dark [data-editor] table td select {
    color: #FFF;
}
body.theme-dark [data-editor] table td option {
    color: #000;
}
body.theme-dark [data-editor] table td {
    border: 1px solid #2b2b2b;
}
body.theme-dark [data-editor] table tbody tr:nth-child(odd) {
    background-color: #323232;
}
body.theme-dark [data-editor] table tbody tr:hover {
    background-color: #444;
}


/* TodoList
------------------------------------------------------------ */
.has-todolist {display: flex;align-content: stretch;min-height: 100%;}
.has-todolist [data-editor] {width: 82%;padding: 0;}
.has-todolist [data-todolist] {width: 18%;background-color: #222;}