.tab-content {
    background-color: #fff;
}

.bms-root-div {
    height: 100vh
}

.bms-root-div header {
    height: 50px;
    background-color: #ffd96f;
}

.bms-root-div main .employee_name {
    font-weight: 500;
}

.bms-cell-table-header {
    border: 1px solid #dddddd;
    padding-left: 3px;
    padding-right: 3px;
    background-color: #f2f2f2;
    font-weight: 700;
    text-align: center;
}

.bms-cell-table {
    border: 1px solid #dddddd;
    padding-left: 3px;
    padding-right: 3px;
}

canvas.drawing,
canvas.drawingBuffer {
    position: absolute;
    left: 0;
    top: 0;
}

.value-input {
    font-size: 1rem;
    font-weight: 500;
}

.animated-background-color-3s {
    transition-property: background-color;
    transition-duration: 1s;
}

.tzd-table thead tr th,
.tzd-table tbody tr td {
    overflow: hidden;
}


/*!Copyright (c) 2017 ~ present NAVER Corp.
 * billboard.js project is licensed under the MIT license
 *
 * billboard.js, JavaScript chart library
 * https://naver.github.io/billboard.js/
 *
 * @version 3.15.1 */
.bb svg {
    font: 10px sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.bb path, .bb line {
    fill: none;
    stroke: #000
}

.bb text, .bb .bb-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.bb-legend-item-tile, .bb-xgrid-focus, .bb-ygrid-focus, .bb-ygrid {
    shape-rendering: crispEdges
}

.bb-chart-arcs .bb-needle, .bb-chart-arc .bb-gauge-value {
    fill: #000
}

.bb-chart-arc path {
    stroke: #fff
}

.bb-chart-arc rect {
    stroke: #fff;
    stroke-width: 1
}

.bb-chart-arc text {
    fill: #fff;
    font-size: 13px
}

.bb-chart-funnels path {
    stroke-width: 0
}

.bb-chart-funnels + .bb-chart-texts text {
    font-size: 13px;
    fill: #fff
}

.bb-axis {
    shape-rendering: crispEdges
}

.bb-axis .bb-axis-x-tooltip, .bb-axis .bb-axis-y-tooltip, .bb-axis .bb-axis-y2-tooltip {
    font-size: 1em;
    fill: #fff;
    white-space: nowrap
}

.bb-grid {
    pointer-events: none
}

.bb-grid line {
    stroke: #aaa
}

.bb-grid text {
    fill: #aaa
}

.bb-xgrid, .bb-ygrid {
    stroke-dasharray: 3 3
}

.bb-text.bb-empty {
    fill: gray;
    font-size: 2em
}

.bb-line {
    stroke-width: 1px
}

.bb-circle._expanded_ {
    stroke-width: 1px;
    stroke: #fff
}

.bb-selected-circle {
    fill: #fff;
    stroke-width: 2px
}

.bb-bar {
    stroke-width: 0
}

.bb-bar._expanded_ {
    fill-opacity: .75
}

.bb-candlestick {
    stroke-width: 1px
}

.bb-candlestick._expanded_ {
    fill-opacity: .75
}

.bb-target.bb-focused, .bb-circles.bb-focused {
    opacity: 1
}

.bb-target.bb-focused path.bb-line, .bb-target.bb-focused path.bb-step, .bb-circles.bb-focused path.bb-line, .bb-circles.bb-focused path.bb-step {
    stroke-width: 2px
}

.bb-target.bb-defocused, .bb-circles.bb-defocused {
    opacity: .3 !important
}

.bb-target.bb-defocused .text-overlapping, .bb-circles.bb-defocused .text-overlapping {
    opacity: .05 !important
}

.bb-region {
    fill: #4682b4
}

.bb-region rect {
    fill-opacity: .1
}

.bb-zoom-brush, .bb-brush .extent {
    fill-opacity: .1
}

.bb-legend-item {
    font-size: 12px;
    user-select: none
}

.bb-legend-item-hidden {
    opacity: .15
}

.bb-legend-background {
    opacity: .75;
    fill: #fff;
    stroke: #d3d3d3;
    stroke-width: 1
}

.bb-title {
    font: 14px sans-serif
}

.bb-chart-treemaps rect {
    stroke: #fff;
    stroke-width: 1px
}

.bb-tooltip-container {
    z-index: 10;
    user-select: none
}

.bb-tooltip {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #fff;
    empty-cells: show;
    opacity: .9;
    box-shadow: 7px 7px 12px -9px #777;
    white-space: nowrap
}

.bb-tooltip tr {
    border: 1px solid #CCC
}

.bb-tooltip th {
    background-color: #aaa;
    font-size: 14px;
    padding: 2px 5px;
    text-align: left;
    color: #fff
}

.bb-tooltip td {
    font-size: 13px;
    padding: 3px 6px;
    background-color: #fff;
    border-left: 1px dotted #999
}

.bb-tooltip td > span, .bb-tooltip td > svg {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px
}

.bb-tooltip.value {
    text-align: right
}

.bb-area {
    stroke-width: 0;
    opacity: .2
}

.bb-chart-arcs-title {
    dominant-baseline: middle;
    font-size: 1.3em
}

text.bb-chart-arcs-gauge-title {
    dominant-baseline: middle;
    font-size: 2.7em
}

.bb-chart-arcs .bb-chart-arcs-background {
    fill: #e0e0e0;
    stroke: #fff
}

.bb-chart-arcs .bb-chart-arcs-gauge-unit {
    fill: #000;
    font-size: 16px
}

.bb-chart-arcs .bb-chart-arcs-gauge-max, .bb-chart-arcs .bb-chart-arcs-gauge-min {
    fill: #777
}

.bb-chart-arcs .bb-levels circle {
    fill: none;
    stroke: #848282;
    stroke-width: .5px
}

.bb-chart-arcs .bb-levels text {
    fill: #848282
}

.bb-chart-radars .bb-levels polygon {
    fill: none;
    stroke: #848282;
    stroke-width: .5px
}

.bb-chart-radars .bb-levels text {
    fill: #848282
}

.bb-chart-radars .bb-axis line {
    stroke: #848282;
    stroke-width: .5px
}

.bb-chart-radars .bb-axis text {
    font-size: 1.15em;
    cursor: default
}

.bb-chart-radars .bb-shapes polygon {
    fill-opacity: .2;
    stroke-width: 1px
}

.bb-button {
    position: absolute;
    top: 10px;
    right: 10px
}

.bb-button .bb-zoom-reset {
    font-size: 11px;
    border: solid 1px #ccc;
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer
}

/* billboard.js custom style*/

/* подписи делений (числа) на обеих осях */
.bb-axis .tick text {
    fill: #6c757d; /* серо-синий */
    /*font-weight: 600;       !* по желанию - сделать жирнее *!*/
}

/* названия самих осей, если мы их выводите */
.bb-axis-x-label, .bb-axis-y-label {
    fill: #0d6efd; /* синий */
    font-size: 14px;
}

/* линия и стрелка осей */
.bb-axis line, .bb-axis path {
    stroke: #6c757d; /* серо-синий */
}

/* текст легенды */
.bb-legend-item text {
    fill: #6c757d;
    /*font-weight: 500;*/
}



/* page-chart */
.page-chart-content {
    height: calc(100% - 50px);
    position: relative;
}

.page-chart-canvas {
    height: 100%;
}


.chart-block__box {
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #ccc;
    padding: 5px;
    height: 100%;
}

.chart-block__btn-fullscreen {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    border-color: #cccccc;
    color: #cccccc;
    display: none;
    z-index: 99;
}

.chart-block__box:hover .chart-block__btn-fullscreen {
    display: block;
}


.spinner-chart {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* /page-chart */