.log-list > div {
    padding: 6px 10px;
    border-bottom: 1px solid #e6ecec;
    display: flex;
    flex-wrap: nowrap;
    overflow: none;
    white-space: nowrap;
    align-items: center;
    font-family: 'Menlo', 'Source Code Pro', monospace;
    font-size: 11px;
    color: #262626;

}

.log-row.wrap, .log-list > div.wrap {
    display: inline-block;
}

.log-list > div:hover {
    background-color: #f5f7f7;
    background-color: #f8f8f8;
}

.metadata {
    color: #1d75b3;
}

.log-line .label {
    color: #262626;
}

.log-line .label:before {
    content: "|";
    color: #ccc;
    margin-left: 10px;
    margin-right: 10px;
}

.log-line .value {
    color: #047d65;
}


.log-list > div.selected {
    background-color: #d9e0e0;
    background-color: #e0f3f2;
    background-color: rgba(54, 183, 177, .2);
    background-color: #efefef;

}

.log-row {
    height: auto;
    font-size: 11px;
    line-height: 18px;
    font-family: 'Menlo', monospace;
}

.log-row.no-hover:hover {
    background-color: transparent;
}

.log-row.selected {
    background-color: #fafafa;
}
.log-row.non-monospace {
    font-family: Lato, Arial, sans-serif;
    font-size: 12px;
}

.log-row.single-line {
    height: 25px;
    align-items: center;
}

.log-row.single-line .log-content-container {
    display: flex;
    align-items: center;
}

.log-content-container {
    line-height: 1.5em;
    
}
.log-content-container.condensed {
    display: none;
}

.log-content-container.wrap {
    flex-wrap: wrap;
    height: auto;
}

.log-content-container.wrapping {
    display: flex;
    flex-direction: column;
    width: 100%;
    white-space: normal;
    padding-top: 7px;
    padding-bottom: 8px;
}

.log-row.single-line .log-content-container.condensed {
    display: flex;
    align-items: center;
}

.log-row.single-line .log-content-container.wrapping {
    display: none;
    
}

.log-row-toggle {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: -8px;
    margin-right: 4px;
}

.log-row .field-value-pair {
    display: inline-flex;
    align-items: center;
    color: #51535f;
}

.field-value-pair .field-name {

}


.field-value-pair .value.number {
    color: #b35e14;

}

.field-value-pair:after {
    content: "";
    margin-left: 12px;
    margin-right: 12px;
    border-right: 1px solid #ccc;
    width: 1px;
    height: 15px;
}

.log-row.single-line .log-content-container.condensed {
    display: flex;
    align-items: center;
}

.metadata {
    color: #1d75b3;
    margin-right: 10px;
}

.log-row .tag.warning {
    color: #fff;
    background-color: #eca43c;
}

.log-row .tag.error {
    color: #fff;
    background-color: #c83125;
}

.log-row .value {
    color: inherit;
}

.log-row .tag {
    margin-right: 10px;
    border-radius: 3px;
    padding: 1px 4px;
    background-color: #eaeaea;
    width: 60px;
    text-align: center;
    font-family: 'Lato', sans-serif;
}

#log-table th, #pq-table th, .log-table th {
    white-space: nowrap;
    font-size: 11px;
    line-height: 16px;
}

#log-table table td, #pq-table td, .log-table table td {
    padding: 6px 8px;
    vertical-align: top;
    font-size: 11px;
}

#pq-table {
    font-family: 'Menlo', monospace;
}

#pq-table td {
    vertical-align: middle;
}



/* Log Inspector */




.inspector-row {
    display: flex;
    align-items: flex-start;
    position: relative;
    border-bottom: 0px;
    height: 28px;
    min-height: 26px;
    padding: 4px 10px 4px 20px;
    height: auto;
}

.inspector-row:hover {
    background-color: #f8f8f8;
}

.inspector-row .label {
    text-transform: none;
    flex: 0 0 180px;
    margin-right: 10px;
    color: #575757;
    font-size: 12px;
    font-weight: bold;
    white-space: normal;
    overflow-wrap: break-word;
    overflow: visible;
    white-space: normal;
    max-width: 180px;
}



.inspector-row .json .label {
    font-weight: normal;
    margin-bottom: 0px;
}

.inspector-row .value {
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    flex: 1 1 auto;
    position: relative;
    flex: 1 1 auto;
    white-space: normal;
    color: #575757;
    word-break: break-word;
}


.inspector-row .operators {
    flex: 0 0 100px;
    background-color: #f8f8f8;
    top: auto;
    position: relative;
    display: none;
    position: absolute;
    right: 10px;
    top: 0px;
    
    
}

.inspector-row .operators:before {
    content: "";
    height: 26px;
    width: 50px;
    left: -50px;
    position: absolute;
    top: 0px;
    background-image: linear-gradient(to right, transparent, #f8f8f8);
}




.operators {
    margin-left: auto;
    display: flex;
    position: absolute;
    right: 0px;
    top: 10px;
}

.operators > span {
    padding: 2px 0px;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: .2s all ease;
    height: auto;
    min-width: 24px;
    text-align: center;
    margin-left: 2px;
    cursor: pointer;
    font-size: 12px;
}

.operators > span.disabled {
    opacity: .3;
    cursor: auto;
}

.operators > span:hover {
    border-color: #eaeaea;
    background-color: #eaeaea;
    
}

.operators > span.disabled:hover {
    border-color: transparent;
    background-color: transparent;
}

.inspector-row:hover > div.operators {
    display: flex;
}

.string .operators > span:first-child, .string .operators > span:last-child {
    visibility: hidden;
}




.inspector-row > div:first-child {
    display: flex;
    flex-direction: row;
}



.inspector-row.child1 .label {
    padding-left: 24px;
}

.inspector-row.child1 .label:before {
    position: absolute;
    content: "";
    left: 20px;
    border-left: 1px solid #dadada;
    height: 100%;
    width: 1px;
    display: none;
}

.inspector-row.parent {
    cursor: pointer;
}

.inspector-row.parent .expand-icon {
    position: absolute;
    left: 2px;
    top: 00x;
    height: 15px;
    width: 13px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    
}

.inspector-row.parent .expand-icon .material-icons {
    font-size: 16px;
    opacity: .8;
}



.inspector-row .label:after {
    content: "";
}