html, body {
    /*font-family: Ubuntu, Calibri, sans-serif;*/
    font-family: Calibri, sans-serif;
    font-size: 14px;
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    margin: 8px 0;
}

pre {
    margin: 4px 0;
    background: #eeeeee;
    border-radius: 5px;
    padding: 5px;
}

h2 {
    margin: 0 0;
}

.lp_block {
    padding: 8px 16px;
    border-radius: 5px;
    margin: 10px 0;
}

.lp_block.tip {
    background-color: #ecf8ff;
    border-left: 5px solid #50bfff;
}

.lp_block.warning {
    background-color: #fff6f7;
    border-left: 5px solid #fe6c6f;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.clipboard {
    display: none;
}


/*.el-table .cell {*/

/*}*/

/*.el-table--scrollable-y .el-table__body-wrapper {*/
/*height: calc(100vh - 120px);*/
/*}*/
/* =====================================================================================================================
   === Menu Header style
 */
.batec-header {
    background: #F6BF32;
    color: #1F2B3C;
}

.batec-header-text {
    color: #664c0a;
}

.aside-menu-container {
    padding: 5px;
}

.on-hover .show {
    visibility: hidden;
}

.on-hover:hover .show {
    visibility: visible;
}

.header-menu-container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-menu-container .content {
    margin: 0px 5px;
}

.header-menu-container .icon {
    padding: 4px 10px;
}

.el-col.align-right {
    text-align: right;
}

.el-row.spaced {
    margin-bottom: 5px;
}

.el-row.doublespaced {
    margin-top: 20px;
    margin-bottom: 5px;
}

.missing-data {
    text-decoration: red wavy underline;
}

/*  ====================================================================================================================
    === Edit Worksite Modal style
 */
.el-dialog__header {
    background: #F6BF32;
    color: #1F2B3C;
    border-bottom: 1px solid #e1e4eb
}

.el-dialog__body {
    padding: 5px 2px 5px 5px;
}

.form-row {
    /*margin: 5px 5px;*/
    padding: 8px 0;
}

.el-dialog__footer {
    border-top: 1px solid #e1e4eb
}

.fluid-select {
    display: block;
}

.fluid-input {
    width: 100%;
}

.form-textarea .el-textarea__inner {
    font-family: inherit;
    line-height: 1.2em;
}

.el-dropdown-menu.el-popper {
    max-height: 33vh;
    overflow: auto;
}


/* =====================================================================================================================
   === Message Box style
 */
.message {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.3em;
}

.el-input-group__append, .el-input-group__prepend {
    padding: 0 5px
}

/* ====================================================================================================================
    === icons style ===
 */
.icon--big {
    font-size: 1.5em
}

.icon--medium {
    font-size: 1.25em
}

.icon--small {
    font-size: 0.8em
}

.icon--tiny {
    font-size: 0.7em
}

.icon--right {
    margin-left: .3em
}

.icon--left {
    margin-right: .3em
}

.icon--disabled {
    color: #d9d9d9;
}

.shadow-effect {
    cursor: pointer;
    transition: box-shadow .2s ease;
}

.shadow-effect:hover {
    box-shadow: 3px 3px 10px #bfbfbf;
}

.link-cursor {
    cursor: pointer;
}

.link {
    cursor: pointer;
    opacity: .7;
    font-size: 100%;
    transition: opacity .2s ease, font-size 0.2s ease;
}

.link:hover {
    opacity: 1 !important;
    font-size: 110%;
}

.article-unit {
    margin: 0 0 0 0;
}

.light {
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 3px;
}

/* ====================================================================================================================
    === Table style ===
 */

.el-table--mini td, .el-table--mini th {
    padding: 1px 0px;
    font-size: 1em;
}

.el-table td, .el-table th {
    padding: 1px 0px;
    font-size: 1em;
}

.el-table .cell {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.3em;
    padding-top: .3em;
    padding-bottom: .3em;
}

/*.el-table .worksite-row-need-save {*/
/*background: #f8f8f8;*/
/*color: #ffbf80;*/
/*}*/

/* disable element ui hover*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: initial !important;
}

.el-table__expanded-cell[class*=cell] {
    padding: 10px 20px;
}

/* ========   Stock Table      =========== */

.el-table .stock-row-available {
    background: #ffffff;
    transition: background-color .15s ease;
}

.el-table .stock-row-available:hover {
    background: #e6e6e6;
}

.el-table .stock-row-unavailable {
    background: #cccccc;
    color: #737373;
    transition: background-color .15s ease;
}

.el-table .stock-row-unavailable:hover {
    background: #b3b3b3;
}

.el-table .stock-row-outofstock {
    background: #ffe5e5;
    color: #735050;
    transition: background-color .15s ease;
}

.el-table .stock-row-outofstock:hover {
    background: #e6cfcf;
}

.el-table .stock-row-error {
    background: #ffffff;
    transition: background-color .15s ease;
}

.el-table .stock-row-error:hover {
    background: #e6e6e6;
}

/* ========   Worksite table Rows   =========== */

.el-table .worksite-row-present {
    background: #ffffff;
    transition: background-color .15s ease;
}

.el-table .worksite-row-present:hover {
    background: #f5f5f5;
}

.el-table .worksite-row-past {
    background: #e6e6e6;
    color: #8c8c8c;
    transition: background-color .15s ease;
}

.el-table .worksite-row-past:hover {
    background: #dbdbdb;
}

.el-table .worksite-row-future {
    background: #ceecf2;
    color: #476166;
    transition: background-color .15s ease;
}

.el-table .worksite-row-future:hover {
    background: #bee3ed;
}

/* ========   Article Pick table Rows   =========== */

.el-table .articlepick-row-present {
    background: #ffffff;
    transition: background-color .15s ease;
}

.el-table .articlepick-row-present:hover {
    background: #f5f5f5;
}

.el-table .articlepick-row-selected {
    background: #ffffff;
    color: #2e86d2;
    font-weight: bold;
    transition: all .15s ease;
}

.el-table .articlepick-row-selected:hover {
    background: #cfdce6;
    color: #2976ba;
}


/* Workload Columns */
.small-font {
    font-size: 0.75em;
    line-height: 1.0em;
}

/* ====================================================================================================================
    === Progress Bar style ===
 */

.el-progress-bar__outer {
    background-color: #cccccc;
}

.progress-bar {
    line-height: 1em;
}

.progress-bar.over-spent {
    color: #DB2828;
}

.progress-bar.over-spent .el-progress-bar__inner {
    background-color: #DB2828;
}

/* ====================================================================================================================
    === Stock Selector style ===
 */
.stock-selector {
    background: #F6BF32;
    border-radius: 8px;
    padding: 20px 20px;
    margin-bottom: 20px;
}

.stock-selector i {
    color: #cc9e29;
    transition: color .2s ease;
}

.stock-selector:hover i {
    color: #99761f;
}

.worksite-detail .el-row:last-child {
    margin-bottom: 0;
}

.invoice-detail .el-row {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 8px;
}

.invoice-detail .el-row:last-child {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
}

/* ====================================================================================================================
    === TwoValues Progress Bar style ===
 */

.twovalues-progressbar {
    /*padding-right: 50px;*/
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    /*margin-right: -55px;*/
    box-sizing: border-box;
}

.twovalues-progressbar .outer {
    height: 5px;
    border-radius: 100px;
    background-color: #e6e6e6;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

.twovalues-progressbar .inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    text-align: right;
    line-height: 1;
    white-space: nowrap;
    transition: width .6s ease;
}

.twovalues-progressbar .inprogress {
    background-color: #409eff;
}

.twovalues-progressbar .inprogress2 {
    background-color: #4c8c2b;
}

.twovalues-progressbar .complete {
    background-color: #67C23A;
}

.twovalues-progressbar .ko {
    background-color: #ff4040;
}

.twovalues-progressbar .begin {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.twovalues-progressbar .end {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

/* ====================================================================================================================
    === Block ===
 */

.warning-block {
    color: #eb7500;
    background-color: #ffdfbf;
    border-color: #ff9f40;
    border-width: 0 0 0 5px;
    border-style: solid;
    border-radius: 5px;
    margin: 5px 0;
    padding: 5px;
}

.bordered-box {
    border-style: solid;
    border-color: #e6e6e6;
    border-width: 1px;
    border-radius: 3px;
    padding: 5px;
    margin: 5px 10px 5px 0px;
}

/* ====================================================================================================================
    === El-Upload ===
 */
.upload-narrow {
}

.upload-narrow .el-upload-dragger {
    width: 270px;
}

.image-container {
    width: 100%;
    height: 480px;
    position: relative;
}

.image-container .bottom-right {
    opacity: 0.5;
    transition: opacity .25s ease-out;
    position: absolute;
    top: 20px;
    right: 5px;
}

.bottom-right:hover {
    opacity: 1;
}

.image-error-slot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    background: #e5e5e5;
    border-radius: 8px;
}

.image-mini {
    width: 40px;
    height: 40px;
    transition: all .25s ease-out;
}

.image-mini:hover {
    width: 480px;
    height: 480px;
}

/* ====================================================================================================================
    === Movement ===
 */
p.article-title {
    font-size: 1.25em;
    height: 9ex;
    text-align: center;
    border-radius: 5px;
    margin: 0px 0px 5px 0px;
}

.article-card {
    width: 270px;
    border: 1px solid #e1e4eb;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 3px 3px 10px #d9d9d9;
}

.articleflow-qty {
    width: 100%;
    text-align: right;
    border: 1px solid #e1e4eb;
    border-radius: 5px;
    padding: 8px;
    margin: 3px 0;
    box-shadow: 3px 3px 7px #d9d9d9;
}


.num-pad {
    margin: 20px 0;
}

.num-pad.num-pad-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}


.num-pad-pick-mode {
    width: 100%;
    text-align: center;
    font-size: 2em;
    border-radius: 25px;
    padding: 8px;
    box-shadow: 3px 3px 7px #d9d9d9;
}

.num-pad-button {
    width: 100px;
    font-size: 3em;
    border-radius: 25px;
    margin: 0;
}

.num-pad-button + .num-pad-button {
    margin: 0;
}


.num-pad-qty {
    font-size: 3em;
    margin: 0;
}

.cart-article-row {
    font-size: 1.5em;
    border: 1px solid #e1e4eb;
    border-radius: 5px;
    padding: 5px;
    margin: 10px 0;
}

.touchpad-select {
    width: 100%;
    font-size: 1.2em;

    .el-input {
        font-size: inherit;
    }
}

.touchpad-select {
    width: 100%;
    font-size: 1.5em;
}

.touchpad-button {
    width: 200px;
    font-size: 2em;
}