/*
Default CSS for the Data inspector
see also: DataInspector.js
*/

/*
  Grey color palette
  https://www.google.com/design/spec/style/color.html
/*   #FAFAFA; /* Grey 50  */
/*   #F5F5F5; /* Grey 100 */
/*   #EEEEEE; /* Grey 200 */
/*   #E0E0E0; /* Grey 300 */
/*   #BDBDBD; /* Grey 400 */
/*   #9E9E9E; /* Grey 500 */
/*   #757575; /* Grey 600 */
/*   #616161; /* Grey 700 */
/*   #424242; /* Grey 800 */
/*   #212121; /* Grey 900 */

/*.inspector {*/
/* display: inline-block; */
/*font: bold 14px helvetica, sans-serif;
    background-color: #212121;*/ /* Grey 900 */
/*color: #F5F5F5;*/ /* Grey 100 */
/*cursor: default;
    min-width: 100px;
}

    .inspector table {
        border-collapse: separate;
        border-spacing: 2px;
    }

    .inspector td, th {
        padding: 2px;
    }

    .inspector input {
        background-color: #424242;*/ /* Grey 800 */
/*color: #F5F5F5;*/ /* Grey 100 */
/*font: bold 12px helvetica, sans-serif;
        border: 0px;
        padding: 2px;
    }

    .inspector input:disabled {
        background-color: #BDBDBD;*/ /* Grey 400 */
/*color: #616161;*/ /* Grey 700 */
/*}

    .inspector select {
        background-color: #424242;
        color: #F5F5F5;
    }*/

.inspector {
    /* display: inline-block; */
    background-color: whitesmoke;
    cursor: default;
    min-width: 100px;
}

.inspector table {
    border-collapse: collapse;
    border-spacing: 0px;
    min-width: 100px;
    width: 100%;
    /* Set to fixed so that the table logic doesn't expand
       columns automatically. E.g. if a property name is really, really long
       the column would expand to accomodate which makes the value column super small.
    */
    table-layout: fixed;
}

/*.inspector table tr:first-child td {
    resize: horizontal;
}
*/
.inspector td, th {
    font: bold 12pt helvetica, sans-serif;
    border: 1px solid darkgray;
    /*Add some padding to the cell*/
    padding: 0.2em;
}

.inspector td {
    font: 11pt helvetica, sans-serif;
    /* These only affects the property name column since the value
       column has an input element in each cell which displays the actual value */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide the overflowed text */
    text-overflow: ellipsis; /* Display ellipsis (...) */
}

/* If both columns should have same size
.inspector. col {
    width: 50%;
}*/

 /* If we want to assign different widths to each column*/
.inspector col:nth-child(odd) {
    width: 40%;
}

.inspector col:nth-child(even) {
    width: 60%;
}

.inspector col.checkcolumn:nth-child(1) {
    width: 1.6em;
}

.inspector col.checkcolumn:nth-child(2) {
    width: 40%;
}

.inspector col.checkcolumn:nth-child(3) {
    width: 60%;
}


.inspector input {
    background-color: whitesmoke;
    font-style: normal;
    border: 0px;
    width: 100%;
    padding: 0px
    /*outline: none;*/
}

/*.inspector input:focus {
    background-color:lightblue;
}*/

.inspector input:disabled {
    background-color: #BDBDBD; /* Grey 400 */
    color: #616161; /* Grey 700 */
}

.inspector input[type='checkbox'] {
    width: 1em;
    margin-top: 0.25em;
}

.inspector input[type='checkbox']:checked {
    /* Sets the background color of the checkbox to a better one than grey in Edge. 
       This is a nice blue which is what Chrome uses.
    */
    accent-color: #0075FF; 
}

.inspector select {
    font-style: normal;
    background-color: whitesmoke;
    width: 100%;
    border: 1px solid black;
}

/*.inspector select:focus {
    background-color: lightblue;
}*/

.inspector select:disabled {
    background-color: #BDBDBD;
    color: #616161;
}