a{
    color: initial;
    text-decoration: none;
}
a:hover{
    color: #106ebe;
}

[v-cloak] { display: none; }

#front-wrap{ font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; position:fixed; left:0%; top:0%; width:66%; height:100%; background:#0f6fc6;}
#front-wrap .heading{ display:block; position:absolute; top:50%; margin-top:-1em; width:100%; font-size:1.8em; line-height:1em; text-align:center; color:#fff; font-weight:900;}
#login-wrap { font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif; font-size:1.8em; line-height:2em; position:absolute; width:283px; right:calc( 17% - 141px); top:20%; margin-left:-141px;}
#login-wrap img{ padding-bottom:0.5em; max-width:60%; margin:0 20%;}
#login-wrap div{ padding-bottom:0.5em;}
#login-wrap label{ display:block; font-weight:bold; height:1.5em; line-height:1.5em;}
#login-wrap input, #login-wrap select{ display:block; width:283px; padding:0 6px; font-size:0.8em; height:2em; line-height:2em; border:0; border-bottom:1px solid #333; background:none; vertical-align:top; outline:0;}
.form-btns{ padding-left:80px;}
.btn-submit{ display:inline-block; padding:0.2em 1em; background:#0f6fc6; color:#fff;}
.btn-submit:hover{ text-decoration:none;}
.error { min-height:1.5em; background-color:#b00;border:1px solid #d00; font-size:1.2rem; line-height:1.5em; color:#fff;padding:5px 10px; margin-left:-2px;}
.error a{ color:#fff;}

#Header{
    height: 80px;
    position: relative;
}

#Header .lefttop-box{
    width: 80px;
    height: 100%;
    display: inline-block;
}
#Header #logo{
    padding: 10px;
    box-sizing: border-box;
}


#Header .docs-Header-right{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#Header .ms-Icon--Settings{
    margin: 0 20px;
    vertical-align: middle;
    font-size: 25px;
}

#Header label{
    display: inline-block;
}

#Header .ms-Icon--Contact{
    margin: 0 20px;
    vertical-align: middle;
    font-size: 35px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}
#sub-header{
    width: 100%;
}
#sub-header .ms-Icon--CollapseMenu{
    font-size: 20px;
    vertical-align: middle;
    margin: 10px 12% 10px 10px;
    cursor: pointer;
}
#sub-header  .ms-Button--hero{
    height: 100%;
    vertical-align: middle;
    margin: 0 20px 0 10px;
}

#body-content{
    height: auto;
    min-height: 600px;
    display: flex;
}

.title{
    padding: 20px 0;
    font-weight: 500;
    margin-left: 20px;
}


#body-content .body-content-left .side-menu{
    width: 200px;
}

#body-content .body-content-left .side-menu p{
    margin: 8px 35px;
    font-weight: 900 
}
#body-content .body-content-left .side-menu ul{
    list-style-type: none;
    margin: 0 35px;
    padding: 0
}
#body-content .body-content-left .side-menu ul li{
    margin-bottom: 8px;
    cursor: pointer;
}
#body-content .body-content-left .ms-Icon--ChevronDown{
    float: left;
    margin-left: -25px;
    margin-top:2px;
    cursor: pointer;
}

#body-content .body-content-left .ms-fontColor-themePrimary{
    font-size: 20px;
    margin:10px;
}


#body-content .body-content-right{
    height: 100%;
    width: 100%;
}
.body-content-right .date-select{
    padding: 20px 0
}
.body-content-right .date-select .week-select{
    display: inline-block;
}
.body-content-right .date-select .week-select button{
    background: none;
    border: none;
}
.body-content-right .date-select ,.body-content-right .status-show{
    font-weight: 500;
    margin-left:20px; 
}
.body-content-right .status-show{
    display: none;

}
.body-content-right .date-select .ms-Icon{
    margin:0 5px;
    cursor: pointer;
}
.body-content-right .date-select .week-choose.hide,.body-content-right .date-select .month-choose.hide{
    display: none
}
.ms-SearchBox{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 20px;
}
.ms-Table-head, .ms-Table thead th{
    font-size: 14px;
}
.ms-Button.ms-Button--hero .ms-Button-icon{
    padding-top:1px;
}
.ms-Button.ms-Button--hero .ms-Button-label, .ms-Label{
    font-size: 14px;
}

.ms-Table-head, .ms-Table thead th{
    line-height: 16px;
    border:1px solid #eff6fc!important;
}

.ms-Table-cell, .ms-Table td, .ms-Table th{
    padding: 10px;
    line-height: 16px;
    border: 1px solid #eaeaea;
    position: relative;
    height: 30px;
}
.ms-Table .submited-row td>div{
    height: auto;
}
.ms-Table .ms-DatePicker-table td{
    padding: 0;
    line-height:30px;
    border:0;
}
.ms-Table .ms-DatePicker-day, .ms-Table thead th.ms-DatePicker-weekday{
    padding: 0;
    font-size:12px;
    font-weight:600;
    line-height:30px;
    text-align:center;
    border:0;
}
.ms-Table .ms-DatePicker{
    width:100%;
}
.ms-Table .ms-DatePicker-input{
    border:1px solid #C1E9FE!important;
    border-left:5px solid #A6D1F5!important;
    width:100%!important;
}
.ms-Table td.nopadding{
    padding: 0;
}
.ms-Table td .ms-Icon{
    cursor: pointer;
}
.ms-Table tr .reject-reason,.ms-Table tr .reject-title{
    display: none
}
.ms-Table tr.approved-row{
    background: #deecf9;
    color:#999;
}
.ms-Table tr.rejected-row{
    background: #FFE6F5;
}
.ms-Table.staff-table tr.total-row{
    background: #E6E6E6;
    font-weight: 800
}
.ms-Table tbody .ms-bgColor-themeLighterAlt th{
    font-weight:normal;
    text-align: left;
}
.ms-Table tr.approved-row td:last-child{
    color:#0078D7;
}
.ms-Table tr.rejected-row td:last-child{
    color:#a80000;
}
.ms-Table-row, .ms-Table tr{
    font-size: 14px
}

.ms-Table tr>td>div, .ms-TextField-field{
    height: 100%;
}
.ms-TextField-field:not(.remind-input){
    min-width: 0;
    border: 1px solid #C1E9FE;
    border-left: 5px solid #A6D1F5;
    padding: 6px 12px 7px 4px;    
    font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
}
.ms-TextField-field:not(.remind-input):focus{
    background: #C1E9FE;
    border-color: #C1E9FE;
}

.new-project .ms-TextField-field{
    min-width: 0;
    border: 1px solid #f2b149;
    border-left: 5px solid #f2b149;
    padding: 6px 12px 7px 4px;    
    font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
    height: 100%;
}
/*.new-project .ms-TextField-field:focus{
    background: #F99696;
    border-color: #F99696;
}*/


.alert .ms-TextField-field{
    min-width: 0;
    border: 1px solid #F99696;
    border-left: 5px solid #A80000;
    padding: 6px 12px 7px 4px;    
    font-family: Segoe UI WestEuropean,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;
    height: 100%;
}
.alert .ms-TextField-field:focus{
    background: #F99696;
    border-color: #F99696;
}

.ms-Dialog.email-input{
    padding: 1rem 0;
    min-width: 65%;
}
.ms-Table tr .search-list{
    width: 100%;
    height: auto;
    background: red;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    display: none;
}

.ms-TextField-field[disabled] {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    cursor: default;
}

.button-area{
    float: right;
    margin: 10px 20px;
}

.button-area .ms-Button{
    margin:5px 10px;
}

.ms-ContextualHost-main{
    padding: 20px 28px;
}

.ms-ContextualHost-main .reject-reason{
    color:#a80000;
    font-weight: 400;
}

.ms-Callout-header,.ms-Callout-inner{
    padding: 0;
    margin-bottom:10px;
}

.ms-Dialog{
    min-width: 350px;
}

.table-remark{
    display: inline-block;
    margin: 10px 20px;
}

.ms-Table-rowCheck:after{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.ms-Table--selectable .ms-Table-row:hover, .ms-Table--selectable tr:hover{
    background-color: #eff6fc;
}
.ms-Table--selectable thead tr:hover,.ms-Table--selectable tr.total-row:hover{
    background-color: rgba(0, 0, 0, 0)!important; 
}

.manager-table.ms-Table tr.total-row{
    border-bottom: 2px solid #999999 ;
    font-weight: 800;
}
.ms-Button.button-reject,.ms-Button.button-comfirmreject,.ms-Button.button-next,.ms-Button--primary.ms-bgColor-redDark{
    background-color: #a80000;
    border-color: #a80000;
}
.ms-Dialog-title.ms-bgColor-redDark{
    background-color: #a80000!important;
}
.ms-Button.button-reject.ms-Button--primary:hover,.ms-Button.button-next:hover,.ms-Button.button-comfirmreject:hover,.ms-Button--primary.ms-bgColor-redDark:hover {
    background-color: #820707;
    border-color: #820707;
}
.ms-Button.button-reject.ms-Button--primary:active,.ms-Button.button-next:active,.ms-Button.button-comfirmreject:active,.ms-Button--primary.ms-bgColor-redDark:active {
    background-color: #820707;
    border-color: #820707;
}

.ms-Button.button-comfirm,.ms-Button.button-next,.ms-Button.button-cancel,.ms-Button.button-comfirmreject{
}

.director-table.ms-Table tr.total-row{
    border-bottom: 2px solid #999999 ;
    font-weight: 800;
}

.director-table.ms-Table tr.monthly-sep{
    border-bottom: 2px solid #999999 ;
}
.director-table.ms-Table tr .monthly-sep{
    border-bottom: 2px solid #999999 ;
}

.director-table .ms-Icon--Edit:before, .director-table .ms-Icon--Save:before{
    margin-right: 5px;
}

.edit-button span:hover, .reminder-Button:hover{
    color: #106ebe;
}

.ms-Icon.hide{
    display:none;
}

.director-table .save-t.hide, .director-table .edit-t.hide{
    display: none
}

.date-select .view-button{
    float: right;
    margin-right: 20px;
    cursor: pointer;
}
.date-select .view-button:hover{
    color: #3c3c3c
}

.date-select .view-button{
    float: right;
    margin-right: 20px;
    cursor: pointer;
}
.date-select .view-button i{
    vertical-align: middle
}
.director-table.weekly.hide{
    display: none
}
.director-table.monthly.hide{
    display: none
}

.weekday-val.disable{
    background: #dcdcdc;
}
.weekday-val:not(.disable):hover{
    background: #E6E6E6;
    cursor: pointer;
}
.weekday-val span.date{
    color: #B3B3B3;
    font-size: 12px;
    padding: 2px 5px;
    position: absolute;
    top: 0;
    right: 0;
}

.weekday-val .ms-Icon--Edit{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2px;
    display: none;
}
td.total-val,td.monthly-val{
    font-weight: 800;
}

td.weekly-status.approved{
    color:#0078D7;  
}

td.weekly-status.d-approved{
    color:#67d700;  
}

td.weekly-status.rejected{
    color: #911843;
}
.dashboard-table td.weekly-status.rejected{
    background: #911843;
    color:#fff;
}
.dashboard-table td.weekly-status.approved{
    background: #0078D7;
    color:#fff;
}
.dashboard-table td.weekly-status.d-approved{
    background: #67d700;
    color:#fff;
}
.dashboard-table td.weekly-status.pending{
    background: #999;
    color:#fff;
}
.dashboard-table td.weekly-status.submitted{
    background: #f99f2c;
    color:#fff;
}
.accounting-table .ms-Icon--Send:before{
    margin-right: 5px;
}
.accounting-table .ms-Icon--Send:hover{
    font-weight: 800
}

.ms-Table .autocomplete{
	height:100%;
}
.ms-Button.reminder-Button{
    background-color: unset;
    border: none;
    padding: 0;
    margin-left: 15px;
}
.ms-ContextualHost-main{
    padding: 0;
}

.ms-SearchBox{
    width: 50%;
    max-width: 300px;
    overflow: visible;
}
.ms-SearchBox-start{
    position: absolute;
    left: 0;
    top: 0;
    background: #106ebe;
    margin: 0!important;
    z-index: 20;
    display: none;
}
.ms-SearchBox.is-active .ms-SearchBox-start{
    display: block;
}

.ms-SearchBox-start button{
    color: #fff;
}
.ms-SearchBox-start button:hover{
    color: #106ebe;
}
.ms-ContextualMenu{
    max-width: unset;
}
.ms-DatePicker-day--today{
    background-color: unset;
}
.ms-DatePicker-table tbody tr:hover{
    cursor: pointer;
    color: #000;
    background: #eaeaea;
}

.ms-DatePicker-day.week-highlighted{
    background: #0078D7!important;
    color:#fff!important;
}

.ms-DatePicker-day--highlighted{
    background: #0078D7!important;
    color:#fff!important;

}

.ms-DatePicker-table tr.active{
    background: #0078D7;
    color: #fff;
}

.ms-DatePicker-input{
    display: inline-block!important;
    width: auto!important;
    border: none!important;
    cursor: pointer!important;
}
.ms-DatePicker-input i{
    position: relative;
    right: unset;
    bottom: unset;
}
.ms-DatePicker{
    display: inline-block;
    margin-bottom: 0;
}
.ms-DatePicker .ms-TextField{
    margin-bottom: 0;
}
.monthly-datepicker.ms-DatePicker .ms-DatePicker-dayPicker{
    display: none;
}

.monthly-datepicker.ms-DatePicker .ms-DatePicker-monthPicker, .ms-DatePicker-yearPicker{
    position: relative;
    top: unset;
    left: unset;
}
.monthly-datepicker.ms-DatePicker .ms-DatePicker-monthComponents{
    display: none;
}

.monthly-datepicker.ms-DatePicker .ms-DatePicker-holder{
    width: auto;
    min-width: unset;
}

.monthly-datepicker.ms-DatePicker .ms-DatePicker-goToday{
    display: none;
}
.monthly-datepicker.ms-DatePicker .weekly-title.out{
    color:#b8b8b8
}

.monthly-datepicker.ms-DatePicker .ms-DatePicker-monthOption.is-highlighted, .ms-DatePicker-yearOption.is-highlighted{
    background-color: #106ebe;
}

.monthly-datepicker.ms-DatePicker .ms-DatePicker-currentYear{
    cursor: initial
}

.send-reminder-dropdown li > .ms-Button{
    width: 100%;
    text-align: left;
}
.send-reminder-dropdown li > .ms-Button:active{
    color:#fff
}

.send-reminder-dropdown li .ms-Label{
    font-weight: 100;
}
.accounting-template-menu > div{
    margin-right: 10px;
    display: inline-block;
}
.accounting-template-menu .ms-Icon--Edit:before, .accounting-template-menu .ms-Icon--Save:before{
    margin-right: 5px;
}
.accounting-template-menu .edit-t:hover{
    color: #106ebe
}
.accounting-template-menu .delete-t:hover{
    color: #911843
}


.finance-table,.accounting-template-table{
    margin-top: 1rem;
}

.finance-table .info-menu .ms-Button, .ms-Button.diglog-button{
    height: unset;
    min-width: unset;
    background: none;
    border: none;
    text-align: left;
    margin: 0;
    padding: 0;
}
.finance-table .info-menu .ms-Button:active{
    height: unset;
    min-width: unset;
    background: none;
}

.richText .richText-editor:focus{
    border: none;
}

.edit-area{
    display: grid;
    grid-template-columns: auto auto;
    margin-left:20px;
    grid-column-gap:30px
}

.edit-area .edit-item{
    display: grid;
    grid-template-columns: 100px auto;
    margin-bottom: 15px;
}
.edit-area .edit-item label{
    font-weight: 500;
}