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: 8px;
    padding: 5px;
}

[v-cloak] {
    display: none;
}

.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
 */
.ewin {
    background: #2e4e8a;
    color: white;
}

.ewin_light {
    background: #3877be;
    color: white;
}

.ewin_xlight {
    background: #73b6e6;
    color: white;
}

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

/* =====================================================================================================================
   === 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
}

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

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

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

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

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

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

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

.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 .worksite-row-new {
    background: #e1edff;
}

.el-table .worksite-row-new:hover {
    background: #d8e3f2;
    transition: background-color .15s ease;
}

.el-table .worksite-row-forminprogress {
    background: #e1edff;
}

.el-table .worksite-row-forminprogress:hover {
    background: #d8e3f2;
    transition: background-color .15s ease;
}

.el-table .worksite-row-inprogress {
    background: #ffffff;
}

.el-table .worksite-row-inprogress:hover {
    transition: background-color .15s ease;
    background: #f2f2f2;
}

.el-table .worksite-row-doe {
    background: #bbe6b8;
}

.el-table .worksite-row-doe:hover {
    transition: background-color .15s ease;
    background: #b3d9b0;
}

.el-table .worksite-row-attachment {
    background: #ffe6cc;
}

.el-table .worksite-row-attachment:hover {
    transition: background-color .15s ease;
    background: #f2dac2;
}

.el-table .worksite-row-invoice {
    background: #ffcc99;
}

.el-table .worksite-row-invoice:hover {
    transition: background-color .15s ease;
    background: #f2c291;
}

.el-table .worksite-row-payment {
    background: #fff8e6;
}

.el-table .worksite-row-payment:hover {
    transition: background-color .15s ease;
    background: #e6e0d1;
}

.el-table .worksite-row-rework {
    background: #ffd5cc;
    color: #690000;
}

.el-table .worksite-row-rework:hover {
    transition: background-color .15s ease;
    background: #f2c9c2;
}

.el-table .worksite-row-blocked {
    background: #e6bfb8;
    color: #800d0d;
}

.el-table .worksite-row-blocked:hover {
    transition: background-color .15s ease;
    background: #d9b3ad;
}

.el-table .worksite-row-canceled {
    background: #f2e6e6;
    color: #b3a1a1;
}

.el-table .worksite-row-canceled:hover {
    transition: background-color .15s ease;
    background: #dbd3d3;
}

.el-table .worksite-row-done {
    background: #f2f2f2;
    color: #b3b3b3;
}

.el-table .worksite-row-done:hover {
    transition: background-color .15s ease;
    background: #dbdbdb;
}

.el-table .worksite-row-error {
    background: #f77c63;
}

.el-table .worksite-row-error:hover {
    transition: background-color .15s ease;
    background: #de715b;
}

.rework-green {
    color: #1fcc00;
}

.rework-orange {
    color: #f2a500;
}

.rework-red {
    color: #ff4100;
}

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

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

/*.el-progress-bar__inner {*/
/*background-color: #51a825;*/
/*}*/

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

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

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

/* ====================================================================================================================
    === Worksite Table Detail style ===
 */
.el-table__expanded-cell[class*=cell] {
    padding: 10px 20px;
}

.worksite-detail .el-row {
    margin-bottom: 8px;
}

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

/*  ====================================================================================================================
    === Edit Worksite Modal style
 */
.el-dialog__header {
    background: #66a0cc;
    color: white;
    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;
}

/* ====================================================================================================================
    === Ripsite Table Update Row style ===
 */

.el-table .ripactivitystatus-row-todo {
    background: #ffffff;
}

.el-table .ripactivitystatus-row-inprogress {
    background: #ebf2eb;
}

.el-table .ripactivitystatus-row-done {
    background: #d7edd5;
}

.el-table .ripactivitystatus-row-warning1  {
    background: #f0e4aa;
}

.el-table .ripactivitystatus-row-warning2 {
    background: #f0cdaa;
}

.el-table .ripactivitystatus-row-blocked {
    background: #f0b0aa;
}

.el-table .ripactivitystatus-row-canceled {
    background: #e6e8eb;
}

/* ====================================================================================================================
    === 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;
}