.widget.journal {
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.widget.journal > .message {
    flex-grow: 2;
    transition: opacity .2s, background .2s;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.widget.journal > .message:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.widget.journal > .message > .icon {
    background: url(./journal.svg) no-repeat center;
    background-size: 100%;
    width: 12px;
    height: 12px;
    flex: none;
    margin: 0 12px;
}

.widget.journal > .message > .val {
    opacity: 0;
    flex-grow: 2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: scale(.8);
    transform-origin: left;
}

.widget.journal > .message > .arrow {
    margin: 0 12px;
}

.widget.journal div.symbol, .journal-overlay div.symbol {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    margin: 0 6px;
    text-transform: uppercase;
    min-width: 16px;
    text-align: center;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    padding: 1px 4px;
}

.widget.journal strong, .journal-overlay strong {
    display: inline-block;
    font-weight: 600;
    color: lightblue;
    margin: 0 4px;
}

.widget.journal b, .journal-overlay b {
    display: inline-block;
    font-weight: 600;
    color: #6addd6;
    margin: 0 4px;
}

.widget.journal green, .journal-overlay green {
    display: inline-block;
    color: #fff;
    background: darkgreen;
    border-radius: 3px;
    padding: 1px 4px;
    margin: 0 6px;
    text-transform: uppercase;
    font-size: 10px;
}

.widget.journal red, .journal-overlay red {
    display: inline-block;
    color: #fff;
    background: darkred;
    border-radius: 3px;
    padding: 1px 4px;
    margin: 0 6px;
    text-transform: uppercase;
    font-size: 10px;
}

.widget.journal > .arrow {
    flex: none;
    margin-left: 12px;
}

.journal-overlay {
    box-sizing: border-box;
    background: #222;
    font-size: 10pt;
    color: #fff;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

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

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

.journal-overlay > .header > .counter {
    font-size: 8pt;
    font-weight: bold;
    padding: 2px 4px;
    margin: 0 12px 0 0;
    background: rgba(65, 105, 225, 0.75);
    border-radius: 3px;
}

.journal-overlay > .header > button {
    width: 120px;
    margin: 0 16px;
    color: #fff;
    fill: #fff;
    border: 1px solid rgba(255, 255, 255, .1);
}

.journal-overlay > .header > button:hover {
    border: 1px solid rgba(255, 255, 255, .5);
    background: none!important;
}

.journal-overlay > .header > .search-input {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .1);
}

.journal-overlay > .header > .search-input input {
    color: #fff;
    background: transparent;
    padding: 4px 8px;
}

.journal-overlay > .header > .search-input button {
    color: silver!important;
    background: rgba(255, 255, 255, 0.2)!important;
    margin-right: 4px;
}

.journal-overlay > .header > .search-input button:hover {
    background: rgba(255, 255, 255, 0.3)!important;
}

.journal-overlay > .list-holder {
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    flex-grow: 2;
}

.journal-overlay > .list-holder > .list {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
    position: relative;
}

.journal-overlay > .list-holder > .list > .stretcher {
    flex: none;
    width: 0;
}

.journal-overlay > .list-holder > .list > .sign {
    display: flex;
    flex-grow: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    justify-self: stretch;
    opacity: .5;
}

.journal-overlay > .list-holder > .list > .sign.hidden {
    display: none;
}

.journal-overlay > .list-holder > .list > .sign > .icon {
    width: 128px;
    height: 128px;
}

.journal-overlay > .list-holder > .list > .sign.empty > .icon {
    background: url(space.svg) no-repeat center;
    background-size: contain;
}

.journal-overlay > .list-holder > .list > .sign > .title {
    font-size: var(--header-font-size);
    font-family: var(--header-font-family);
    margin: 16px 0 12px 0;
    color: #fbfeff;
}

.journal-overlay > .list-holder > .list > .sign > .subtitle {
    color: #fbfeff;
}

.journal-overlay > .list-holder::-webkit-scrollbar {
    width: 8px;
    height: 100%;
}

.journal-overlay > .list-holder::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}

.journal-overlay > .list-holder > .list > .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    user-select: text;
    opacity: .8;
    transition: opacity .2s, background-color .2s;
    overflow: hidden;
}

.journal-overlay > .list-holder > .list > .line.hidden {
    opacity: 0;
}

.journal-overlay > .list-holder > .list > .line:not(.hidden):hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
    opacity: 1;
}

.journal-overlay > .list-holder > .list > .line > .flag {
    width: 4px;
    align-self: stretch;
    flex: none;
    box-sizing: border-box;
    border-width: 1px 0;
    border-color: #222;
    border-style: solid;
}

.journal-overlay > .list-holder > .list > .line.verbose > .flag {
    background: lightslategray;
}

.journal-overlay > .list-holder > .list > .line.error > .flag {
    background: red;
}

.journal-overlay > .list-holder > .list > .line.warning > .flag {
    background: orange;
}

.journal-overlay > .list-holder > .list > .line > .instance {
    font-size: .8em;
    width: 20px;
    flex: none;
    padding-left: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journal-overlay > .list-holder > .list > .line > .instance > .badge {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: #fff;
    background: rgba(255, 255, 255, 0.075);
    font-weight: 500;
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journal-overlay > .list-holder > .list > .line > .ts {
    font-size: .8em;
    width: 80px;
    flex: none;
    font-family: "Montserrat SemiBold", sans-serif;
    padding-left: 12px;
}

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

.journal-overlay > .list-holder > .list > .line.sys > .tag {
    background: darkslategray;
    display: block;
}
.journal-overlay > .list-holder > .list > .line.sys > .tag:after {
    content: 'Sys';
}

.journal-overlay > .list-holder > .list > .line.vert > .tag {
    background: coral;
    display: block;
}
.journal-overlay > .list-holder > .list > .line.vert > .tag:after {
    content: 'Vertical';
}

.journal-overlay > .list-holder > .list > .line.uv > .tag {
    background: #ba8624;
    display: block;
}
.journal-overlay > .list-holder > .list > .line.uv > .tag:after {
    content: 'Unstarted Vertical';
}

.journal-overlay > .list-holder > .list > .line.fv > .tag {
    background: #ba4c24;
    display: block;
}
.journal-overlay > .list-holder > .list > .line.fv > .tag:after {
    content: 'Forced Vertical';
}

.journal-overlay > .list-holder > .list > .line.ht > .tag {
    background: steelblue;
    display: block;
}
.journal-overlay > .list-holder > .list > .line.ht > .tag:after {
    content: 'Hand Trade';
}

.journal-overlay > .list-holder > .list > .line.ot > .tag {
    background: teal;
    display: block;
}

.journal-overlay > .list-holder > .list > .line.ot > .tag:after {
    content: 'TASK';
}

.journal-overlay > .list-holder > .list > .line.corr > .tag {
    background: deeppink;
    display: block;
}

.journal-overlay > .list-holder > .list > .line.corr > .tag:after {
    content: 'Correction';
}

.journal-overlay > .list-holder > .list > .line.adj > .tag {
    background: #7e0747;
    display: block;
}

.journal-overlay > .list-holder > .list > .line.adj > .tag:after {
    content: 'Adjustment';
}

.journal-overlay > .list-holder > .list > .line.repos > .tag {
    background: #d90101;
    display: block;
}
.journal-overlay > .list-holder > .list > .line.repos > .tag:after {
    content: 'Repos';
}

.journal-overlay > .list-holder > .list > .line.killpos > .tag {
    background: #d90101;
    display: block;
}
.journal-overlay > .list-holder > .list > .line.killpos > .tag:after {
    content: 'Killpos';
}

.journal-overlay > .list-holder > .list > .line.recv > .tag {
    background: #b50c67;
    display: block;
}

.journal-overlay > .list-holder > .list > .line.recv > .tag:after {
    content: 'Recovery';
}

.journal-overlay > .list-holder > .list > .line.trm > .tag {
    background: #5eb50c;
    display: block;
}

.journal-overlay > .list-holder > .list > .line.trm > .tag:after {
    content: 'Trading Mode';
}

.journal-overlay > .list-holder > .list > .line.funding > .tag {
    background: #579121;
    display: block;
}

.journal-overlay > .list-holder > .list > .line.funding > .tag:after {
    content: 'Funding';
}

.journal-overlay > .list-holder > .list > .line.balancing > .tag {
    background: rgba(70, 147, 239, 0.5);
    display: block;
}

.journal-overlay > .list-holder > .list > .line.balancing > .tag:after {
    content: 'Balancing';
}

.journal-overlay > .list-holder > .list > .line.equalization > .tag {
    background: rgba(13, 56, 117, 0.5);
    display: block;
}

.journal-overlay > .list-holder > .list > .line.equalization > .tag:after {
    content: 'Equalization';
}

.journal-overlay > .list-holder > .list > .line > .text {
    flex-grow: 2;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.journal-overlay > .list-holder > .list > .line > .text > .start {
    flex-grow: 2;
    height: 12px;
    align-self: center;
    background: url("up.svg");
    background-size: 12px;
    background-repeat: repeat-x;
    background-position: left center;
    transform: scaleY(-1);
    margin-left: 6px;
}

.journal-overlay > .list-holder > .list > .line > .text > .finish {
    flex-grow: 2;
    height: 12px;
    align-self: center;
    background: url("up.svg");
    background-size: 12px;
    background-repeat: repeat-x;
    background-position: left center;
    margin-left: 6px;
}

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

.journal-overlay > .list-holder > .list > .line > .text > .orderbook.A {
    background: red;
}

.journal-overlay > .list-holder > .list > .line > .text > .orderbook.B {
    background: darkgreen;
}

.journal-overlay .control.checkbox {
    margin-left: 12px;
}

.journal-overlay .control.checkbox:hover {
    background: rgba(255, 255, 255, 0.2)
}

.widget.journal > .message > .val > .entity,
.journal-overlay > .list-holder > .list > .line > .text > .entity {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.widget.journal > .message > .val > .entity > .title,
.journal-overlay > .list-holder > .list > .line > .text > .entity > .title {
    background: teal;
    color: #fff;
    font-size: .9em;
    padding: 2px 4px;
    border-radius: 3px 0 0 3px;
}

.widget.journal > .message > .val > .entity > .value,
.journal-overlay > .list-holder > .list > .line > .text > .entity > .value {
    background: #fff;
    color: #000;
    font-size: .9em;
    padding: 2px 4px;
    border-radius: 0 3px 3px 0;
}

.journal-overlay > .list-holder > .list > .line > .routine {
    font-size: .8em;
    margin: 0 12px;
    flex: none;
    color: silver;
    text-align: right;
}

.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;
}