@import "common.css";

h1, h2 {
    font-weight: 600;
    margin: 0;
}

h1 {
    font-size: 18px;
}

h2 {
    font-size: 14px;
}

.block {
    border-radius: 5px;
    padding: 16px;
    display: flex;
    flex: none;
    flex-direction: column;
    background: #fff;
    box-shadow: silver 0 0 3px;
    margin: var(--base-margin);
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: border-color .2s;
    overflow: hidden;
}

.block:hover {
    border-color: rgba(0, 139, 139, 0.3);
}

.block > .header {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    margin-bottom: 24px;
    align-items: center;
}

.block > .header .caption {
    flex-grow: 2;
    margin: 0 16px;
    text-align: center;
}

.block > .header .caption h2 {
    margin: 0;
}

.block > .header .caption h3 {
    margin: 0;
    font-size: .6em;
}

.block > .header > .right {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.block > .header button {
    flex: none;
    min-width: 24px;
    height: 24px;
    border: 1px solid silver;
    background: none;
    border-radius: 3px;
    transition: all 200ms;
}

.block > .header button:hover {
    border-color: rgb(128, 128, 128);
    background: #f0f0f0;
}

header {
    width: 100%;
    height: auto;
    position: fixed;
    left: 0;
    top: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 99999;
    box-shadow: 0 0 3px gray;
}

header > .blueline {
    display: flex;
    background: #9f9f9f;
    color: #fff;
    flex-direction: row;
    justify-content: space-between;
    height: 80px;
}

header.production > .blueline {
    background: royalblue;
}

header.test > .blueline {
    background: #515151;
}

header .a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

header .b {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}

header .c {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

header .d {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

header > .darkline {
    display: flex;
    background: #fafafa;
    color: #000;
    flex-direction: row;
    justify-content: space-between;
    height: 60px;
    border: 1px solid slategray;
    border-width: 0 0 1px 0;
}

footer {
    width: calc(100%);
    max-width: calc(100%);
    height: 24px;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #222;
    box-sizing: border-box;
    padding: 0 32px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    font-size: 11px;
    box-shadow: 0 0 3px gray;
}

footer .left {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
}

footer .center {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 2;
    max-width: calc(100% / 1);
}

footer .right {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
}

.workspace {
    width: 100%;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 150px 0 36px 0;
    box-sizing: border-box;
}

.grid {
    display: flex;
    box-sizing: border-box;
}

.grid.column {
    flex-direction: column;
    width: 100%;
    justify-content: space-evenly;
    box-sizing: border-box;
}

.grid.row {
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
}

.grid.row > .quarter {
    display: flex;
    flex-direction: column;
}

.grid.row > .quarter > .q2 > * {
    align-self: stretch;
}

.hid {
    display: none !important;
}

.space-between {
    justify-content: space-between;
}

.grow {
    flex-grow: 2;
}

#sub-bookers .center {
    width: 820px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

#bookers_ab > * {
    width: calc(4 * var(--block-width) - var(--base-margin));
    margin: var(--base-margin);
    box-sizing: border-box;
}

#bookers_c > * {
    width: calc(4 * var(--block-width) - var(--base-margin));
    margin: var(--base-margin);
    box-sizing: border-box;
}

#line_7, #line_8, #line_15 {
    display: none;
}

#line_15 .q4 {
    flex-grow: 2;
}

#line_15 .q4 .widget.orders {
    height: 95%;
}

#line_15 .q5 > * {
    align-self: stretch;
}

#line_15 .q5 .block.ld:not(.state) {
    width: calc(8 * var(--block-width) - var(--base-margin));
}

#line_17 .q3 {
    display: flex;
    flex-direction: column;
}

#line_17 .q5 {
    display: flex;
    flex-direction: row;
    flex-grow: 2;
}

.roboto {
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: center;
    margin: 0 12px;
}

.roboto > .icon {
    background-image: url(./core/icons/robot_light.svg)!important;
    width: 32px!important;
    height: 32px!important;
    background-size: 32px;
}

.roboto > .title {
    font-size: .5em;
    font-weight: bold;
    color: #fff;
}

.widget.norm-calc {
    width: calc(7.3 * var(--block-width) - 2 * var(--base-margin)) !important;
}

.widget.nt.C {
    width: calc(7.5 * var(--block-width) - var(--base-margin) * 2);
}

.widget.correction.C {
    width: calc(11.8 * var(--block-width) - var(--base-margin) * 2);
}