.widget.log {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #fff;
    width: 100%;
    height: 24px;
    box-sizing: border-box;
    margin-right: 16px;
    transition: background-color .2s;
    overflow: hidden;
}

.widget.log:hover {
    background-color: rgba(255, 255, 255, .1);
}

.widget.log > .container {
    display: flex;
    flex-direction: column;
    color: #fff;
    width: 100%;
    height: 24px;
    box-sizing: border-box;
    flex-grow: 2;
}

.widget.log > .warning-badge {
    flex: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    opacity: .9;
}

.widget.log > .warning-badge.lit {
    background: darkred;
}

.widget.log > .warning-badge > .icon {
    background: url(./widgets/log/warning.svg) no-repeat center;
    width: 12px;
    height: 12px;
    flex: none;
    margin: 0 2px 0 8px;
}

.widget.log > .warning-badge > .count {
    margin: 0 4px 0 2px;
}

.widget.log > .container > .message {
    height: 24px;
    max-width: 100%;
    transition: margin-top .1s, opacity .1s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 24px;
    box-sizing: border-box;
    margin: 0 8px;
}

.widget.log > .container > .message.shifted {
    margin-top: -24px;
    opacity: 0;
}

.widget.log > .arrow {
    padding: 0 8px 0 0;
    flex: none;
    font-size: .6em;
}

.widget.log b {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    color: lightgreen;
}

.widget.log b.param-value {
    color: lightblue;
}

.log-widget-overlay {
    box-sizing: border-box;
    background: #222;
    font-size: 10pt;
    color: #fff;
}

.log-widget-overlay > .header {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

.log-widget-overlay > .header > h3 {
    font-size: 10pt;
    margin: 16px;
    flex-grow: 2;
}

.log-widget-overlay > .header > .expand-container {
    margin: 0 12px 0 16px;
    width: 12px;
}

.log-widget-overlay > .header > .period-container {
    width: 150px;
    margin: 0 16px;
}

.log-widget-overlay > .header > .clear-container {
    width: 100px;
    margin: 0 16px 0 0;
}

.log-widget-overlay .layer-btn {
    width: 100%;
    color: rgba(255, 255, 255, .75);
    text-align: left;
    border-color: rgba(255, 255, 255, .3);
    fill: rgba(255, 255, 255, .75);
}

.log-widget-overlay .layer-btn:hover {
    background: rgba(255, 255, 255, .1)!important;
}

.log-widget-overlay .records {
    height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.log-widget-overlay .records::-webkit-scrollbar {
    width: 8px;
    height: 100%;
}

.log-widget-overlay .records::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}

.log-widget-overlay .line {
    display: flex;
    flex-direction: column;
    user-select: text;
}

.log-widget-overlay .line .caption {
    transition: all .15s;
    border: 2px solid transparent;
    padding: 6px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    opacity: .8;
}

.log-widget-overlay .line:hover {
    color: #fff;
    border-left-color: royalblue;
    background: rgba(255, 255, 255, .05);
    opacity: 1;
}

.log-widget-overlay .line b {
    font-family: "Montserrat", sans-serif;
    font-weight: normal;
    color: lightgreen;
}

.log-widget-overlay .line b.param-value {
    color: lightblue;
}

.log-widget-overlay .line b.username {
    background: url(user.svg) no-repeat left center;
    background-size: 10px 10px;
    padding-left: 13px;
}

.log-widget-overlay .line b.param-id {
    background: url(gear.svg) no-repeat left center;
    background-size: 10px 10px;
    padding-left: 13px;
}

.log-widget-overlay .line .ts {
    font-size: .8em;
    width: 75px;
    flex: none;
    font-family: "Montserrat SemiBold", sans-serif;
}

.log-widget-overlay .line > .caption > .tag {
    font-size: .7em;
    flex: none;
    margin-right: 8px;
    padding: 2px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
    flex: none;
    background: dimgray;
    display: none;
}

.log-widget-overlay .line .tag.task {
    background: royalblue;
}

.log-widget-overlay .line .tag.order {
    background: steelblue;
}

.log-widget-overlay .line .tag.correction {
    background: deeppink;
}

.log-widget-overlay .line .tag.moving {
    background: seagreen;
}

.log-widget-overlay .line .tag.error {
    background: maroon;
}

.log-widget-overlay .line .tag.warning {
    background: darkkhaki;
}

.log-widget-overlay .line.param > .caption > .tag {
    background: #56711a;
    display: block;
}
.log-widget-overlay .line.param > .caption > .tag:after {
    content: 'Set';
}

.log-widget-overlay .line.sys > .caption > .tag {
    background: darkslategray;
    display: block;
}
.log-widget-overlay .line.sys > .caption > .tag:after {
    content: 'Sys';
}

.log-widget-overlay .line.trade_mode_automaton > .caption > .tag {
    background: teal;
    display: block;
}
.log-widget-overlay .line.trade_mode_automaton > .caption > .tag:after {
    content: 'Auto';
}

.log-widget-overlay .line.vertical > .caption > .tag {
    background: coral;
    display: block;
}
.log-widget-overlay .line.vertical > .caption > .tag:after {
    content: 'Algo';
}

.log-widget-overlay .line .text {
    flex-grow: 2;
}

.log-widget-overlay .line .text > .orderbook {
    display: inline-flex;
    color: #fff;
    padding: 1px 2px;
    border-radius: 3px;
    font-size: .9em;
}

.log-widget-overlay .line .text > .orderbook.A {
    background: red;
}

.log-widget-overlay .line .text > .orderbook.B {
    background: darkgreen;
}

.log-widget-overlay .line .text > .badge {
    display: inline-flex;
    color: #fff;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: .9em;
    background: teal;
}

.log-widget-overlay .line .triangle {
    margin: 0 4px 0 0;
    flex: none;
    visibility: hidden;
}
.log-widget-overlay .line .triangle:after {
    content: "▸";
}
.log-widget-overlay .line.expanded .triangle:after {
    content: "▾";
}

.log-widget-overlay .line.trade_mode_automaton .triangle,
.log-widget-overlay .line.vertical .triangle{
    visibility: visible;
}

.log-widget-overlay .line > div.children .triangle {
    visibility: hidden;
}

.log-widget-overlay .line:not(.expanded) > div.children {
    display: none;
}

.log-widget-overlay .line .context {
    width: 100px;
    flex: none;
    background: url(user.svg) no-repeat left center;
    background-size: 10px 10px;
    color: lightgreen;
    padding-left: 13px;
}

.log-widget-overlay .line .context.bot {
    background: url(bot.svg) no-repeat left center;
    background-size: 12px 12px;
    padding-left: 15px;
}

.log-widget-overlay .line .result {
    min-width: 120px;
    flex: none;
    text-align: center;
    text-transform: uppercase;
    margin: 0 12px;
    font-size: .8em;
    font-weight: bold;
}

.log-widget-overlay .gap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: .8em;
    background: #ccc;
    color: #222;
    border-radius: 3px;
    padding: 2px 6px;
    align-self: center;
    font-weight: bold;
    margin: 6px 0;
}

.log-period-overlay {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.log-period-overlay > .caption {
    display: flex;
    flex-direction: row;
}

.log-period-overlay > .content {
    margin: 24px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.log-period-overlay > .content > .from, .log-period-overlay > .content > .to {
    width: 100px;
}

.log-period-overlay > .buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}