html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
table .weekend {
    background-color: #d3d3d3;
    width: 45px;
    /*
        width:15px;
    */
}
.weekend {
    background-color: #d3d3d3;
    width: 45px;
    /*
        width:15px;
    */
}
table .red-alert {
    background-color: #ff9999;
}
table .green-alert {
    background-color: #97ffcd;
}
table .green-al-alert {
    background-color: #63d534;
}
table .orange-alert {
    background-color: #ffe297;
}
table .blue-alert {
    background-color: #97f7ff;
}
table .col-width{
    width:45px;
}
table .col-width-wk {
    width: 10px;
}
table .col-name{
    width:300px;
}
.container{
    width:100%;
    max-width:none;
}
form.edit-time
{
    padding:0 6px;
}
form.edit-time input[type="text"] {
    width: 60px;
    padding: 6px 9px;
}
form.edit-time .separate {
    padding: 6px 0;
}
form.edit-time .separate label {
    padding: 0;
}
.dropdown-menu{
    width:240px;
}

.menu.green{
    color: green;
    font-weight:bold;
}
.menu.orange {
    color: #cd8500;
    font-weight: bold;
}
.menu.red {
    color: #c31919;
    font-weight: bold;
}
.menu.blue {
    color: #006edf;
    font-weight: bold;
}
.list-available {
    height: 400px;
    scroll-behavior: auto;
    overflow-x: hidden;
    overflow-y: auto;
}
.list-available button span{
    float:right;
}
.blue-color{
    color:blue;
}
.red-color {
    color: red;
}
.addon-info {
    font-size: 12px;
    position: absolute;
    right: 2px;
    bottom: -2px;
    color:red;
}
.al-info {
    font-size: 12px;
    position: absolute;
    left: 2px;
    bottom: -2px;
    color:green
}
.returnal-info {
    font-size: 12px;
    position: absolute;
    left: 2px;
    bottom: -2px;
    color: green
}
.compensation-info {
    font-size: 12px;
    position: absolute;
    left: 2px;
    top: -2px;
    color: green
}
.addon .row .col{
    text-align:center;
}
.dropdown-menu {
    box-shadow: 1px 2px 16px 4px #b3b3b3;
}
.left-button{
    margin-right:10px;
}
.modal-body label {
    float: left;
    display: contents;
}
.list-employee .modal-body label {
    float: left;
    display: block;
}

.list-employee button {
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
}
.nav-tabs{
    border-bottom:0;
}
.tab-content {
    border-top: 0;
}
.logo{
    height:50px;
}
.navbar-brand {
    color: #602C85 !important;
    font-weight: bold;
}
nav .nav-item a.active {
    color: #602C85 !important;
    font-weight: bold;
}
.container main{
    margin-top:80px;
}
.myAL {
    background-color: #97ffcd;
}
table.klavis tbody td {
    position: relative;
    height: 1px;
    padding: 0;
    text-align:center;
    vertical-align: middle;
}
table.klavis th {
    text-align: center;
    vertical-align: middle;
}
.grid-header {
    margin-bottom: 10px;
    font-weight: bold;
}
.is-support {
    background-color: #ffd280!important;
}
.is-leave {
    background-color: #d3d3d3 !important;
}
.bold {
    font-weight: bold;
}
.holiday {
    background-color: mediumpurple !important;
    width: 45px;
}

.vn-holiday {
    background-color: #229bfb!important;
    width: 45px;
}

.calendar .bootstrap-table .fixed-table-container .table thead th .th-inner {
    padding:0!important;
}
.calendar .bootstrap-table .fixed-table-container .table thead th {
    vertical-align: middle;
}
.calendar .bootstrap-table .fixed-table-container .table thead th .th-inner {
        overflow: visible;
    }
.calendar .row-header {
    font-weight: bold;
}
.dropdown-menu .addon .row{
    text-align:center;
}
.calendar tfoot th.header{
    font-weight:unset;
}
.replace-info {
    font-size: 12px;
    position: absolute;
    right: 2px;
    top: -2px;
    color: green
}
.klavis-al-addon {
    background-color: #ffff98 !important;
    text-align:center;
}
.klavis-employee-total {
    background-color: #ffff98 !important;
}
.select-month {
    width: 200px;
    text-align: center;
    padding-top: 8px;
}
.klavis-char{
    margin-top: 20px
}
.export-button {
    display: flex;
    margin: 10px auto;
    width: 100px !important;
    height: 40px !important;
    text-align: center;
    padding-left: 27px !important;
    padding-top: 5px !important;
}
.al-amount {
    float: left;
    width: 100px;
}
.al-checkbox {
    float: left;
    margin-top: 13px;
    margin-right: 10px;
}
.has-compansationAL {
    background-color: #97ffcd;
}
.btn-save-compensation-al {
    float: left;
    margin-left: 10px;
    height: 37px !important;
}
.div-inner {
    width: 400px;
    margin-top: -200px;
    height: 400px;
}
.btn-login {
    width: 100%;
    margin-bottom: 5px !important;
}
.login-logo {
    width: 100%;
    margin-bottom: 20px;
}
.shadow {
    box-shadow: 0 0rem 1rem rgba(0,0,0,.15) !important;
}
.login-msg{
    color: red;
    text-align:center;
    display:none;

}
.error-msg {
    color: red;
    text-align: center;
    display: none;
}
.login-info {
    margin-right: 30px;
    border: none;
    background: none;
}
    .login-info i {
        margin-left: 5px;
    }
.payslip-header {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    padding-top: 10px;
}
.color-border {
    border: solid 3px #602C85;
}
.black-border {
    border: solid 1px #000000;
}
.fill-color {
    background-color: #602C85;
    color: #ffffff;
    font-weight: bold;
    padding-left: 13px;
}
.payslip-container{
    width:800px!important;
}
.sub-fill-color {
    padding-left: 11px;
    background-color: #cbcbcb;
}
.sub-container {
    padding-left: 11px;
}
.total-row {
    background-color: #863cbb;
    color: #ffffff;
    font-weight: bold;

}
.total-container {
    background-color: #9f9f9f;
    border-left: solid 1px #000000;
    border-right: solid 1px #000000;
    border-bottom: solid 1px #000000;
}
.row-height {
    height: 30px;
    padding-top: 2px;
}
.color-border-right {
    border-right: solid 3px #602C85
}
.black-border-right {
    border-right: solid 1px #000000
}
.right-text-align{
    text-align:right;
}
#formFile, #formFileKpi {
    float: left;
    width: calc(100% - 60px) !important;
    margin-bottom: 20px;
}
.btn-upload{
    float:right;
}
.run-button
{
    text-align:center;
}
.btn-add-al{
    float:left
}
.text-center{
    text-align:center;
}
.toast-header {
    background-color: rgb(255 255 255 / 40%);
    color:#ffffff;
}
.toast {
    background-color: #26872c;
    color: #ffffff;
   /* position: absolute;
    top: 0;
    right: 0;*/
    z-index:999999;
}
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
.mr-auto, .mx-auto {
    margin-right: auto !important;
}
.payroll-container {
    height: calc(100vh - 160px);
}
.ot-container {
    height: calc(100vh - 200px);
}
.basic-info {
    background-color: #95e395;
}
.salary-info {
    background-color: #6badff;
}
.attendance-info {
    background-color: #ffe09a;
}
.actual-salary {
    background-color: #c087ff;
}
.additional-bonus {
    background-color: #ffe2be;
}
.gross-income {
    background-color: #f8fdae;
}
.insurance-info {
    background-color: #dbdbdb;
}
.tax-info {
    background-color: #bbffff;
}
.net-income {
    background-color: #ffc8c8;
}
.ag-floating-bottom{
    font-weight:bold;
}
.ot-container .ag-floating-bottom{
    display:none!important;
}
.bold-label {
    font-weight: bold;
}

.margin-top-20px {
    margin-top: 20px;
}

.row-info {
    background-color: #fff5c4 !important;
}
.ag-status-bar{
    height:44.5px
}
.btn-upload-user-picture
{
    margin-top:3px;
}
.picture-profile {
    height: 300px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top:10px;
}
.profile-header{
    font-weight:bold;
    margin-bottom:5px;
}
.tbl-profile {
    width: 100%;
}
.tbl-profile tbody tr {
    height:40px;
}
    .tbl-profile tbody tr td:first-child {
        width: 200px;
    }
   
    .tbl-profile .profile-text {
        font-weight:bold;
    }
.btn-ot{
    margin-bottom:10px;
}
#myInput {
    margin-top: -8px;
    border: 0;
    margin-left: 10px;
    width: calc(100% - 20px);
}

.dd-nv .dropdown-menu {
    box-shadow: 0px 3px 16px 0px #b3b3b3;
    height:400px;
    width:100%;
    overflow:auto;
    scroll-behavior:auto;
}
#btnNV{
    width:100%
}

.ot-bg {
    background: linear-gradient(180deg, rgba(255,124,0,1) 5%, rgba(255,255,255,0) 61%);
}
.ot-recording{
    background-color:aquamarine;
}
.ot-employee-item{
    padding-left: 40px;
}
#myGrid .ag-ltr .ag-cell {
    border-right: 1px solid #dde2eb !important;
    overflow:visible;
    padding-left:10px;
    padding-right:10px;
}
#myGrid .ag-cell button.dropdown-toggle::after{
    display:none;
}
#myGrid .ag-header-cell .ag-icon{
    display:none;
}
#myGrad .ag-header-cell .ag-sort-indicator-container{
    display:none;
}
#myGrid .ag-header-cell .ag-header-cell-label, #myGrid .ag-header-cell .ag-header-cell-comp-wrapper, #myGrid .ag-header-cell .ag-cell-label-container {
    overflow: visible;
}
#myGrid .ag-header-cell .ag-header-cell-text{
    margin:auto;
}
#myGrid .ag-header-cell.total{
    padding:0px;
}
#myGrid .ag-cell-value{
    padding-left:10px;
}
#myGrid .ag-floating-bottom .ag-cell-value{
    text-align:center;
}
#myGrid .ag-cell .btn:focus{
    box-shadow:none;
}
#myGrid .ag-ltr .ag-cell-focus {
    border-color: #ffffff00;
}
.ag-header-cell {
    border-right: 1px solid #babfc7;
}
.ag-cell {
    overflow: visible;
}

.ag-row {
    z-index: 0;
}

    .ag-row.ag-row-focus {
        z-index: 1;
    }

.ag-root.ag-layout-auto-height,
.ag-body-viewport.ag-layout-auto-height,
.ag-body-viewport-wrapper.ag-layout-auto-height {
    overflow: visible;
}

#myGrid .red-alert {
    background-color: #ff9999;
}

#myGrid .green-alert {
    background-color: #97ffcd;
}

#myGrid .green-al-alert {
    background-color: #63d534;
}

#myGrid .orange-alert {
    background-color: #ffe297;
}

#myGrid .blue-alert {
    background-color: #97f7ff;
}

#myGrid .addon-info {
    font-size: 12px;
    position: absolute;
    right: 2px;
    bottom: -13px;
    color: red;
}

#myGrid .al-info {
    font-size: 12px;
    position: absolute;
    left: 2px;
    bottom: -13px;
    color: green
}

#myGrid .returnal-info {
    font-size: 12px;
    position: absolute;
    left: 2px;
    bottom: -13px;
    color: green
}

#myGrid .compensation-info {
    font-size: 12px;
    position: absolute;
    left: 2px;
    top: 13px;
    color: green
}
#myGrid .replace-info {
    font-size: 12px;
    position: absolute;
    right: 2px;
    top: -13px;
    color: green
}
.import-from{
    width:150px;
    float:left;

}
.import-to {
    width: 150px;
    float: left;
}
.date-separate{
    margin: 5px 10px 0px 10px;
    float:left;
}
.btn-import-acs{
    margin-left: 10px;
}
.import-acs-part{
    margin-top:10px;
}
.lbl-import-acs{
    display:block;
}
.acsevent-container #myGrid {
    height: calc(100vh - 237px)!important;
    margin-top: 10px;
}
.button-contain {
    padding-top: 4px;
}

.action-buton-delete {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 53px;
    padding: 0;
}

.action-acs-buton-delete {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 0px;
    padding: 0;
}

.action-buton-edit {
    height: 30px;
    width: 30px;
    position: absolute;
    padding: 0;
}
.txt-in{
    width:150px;
    float:left;
}
.txt-out {
    width: 150px;
    float: left;
}
.time-separate {
    float: left;
    margin: 5px 10px;
}
.dropdown-menu {
    max-height: 400px;
}
.dd-date .form-check {
    padding-left: 40px;
    width: 100%;
}
.mb-nv-acs {
    margin-top: 10px;
    display: inline-block;
}
.btn-acs-nv {
    width:100%
}
.btn-acs-date {
    width: 100%
}
.acs-employee-item{

}
.dd-nv .form-check {
    padding-left: 40px;
    width: 100%;
}
.sub-tax {
    background-color: #ffc373
}
.sub-tax1 {
    background-color: antiquewhite
}
.dd-date ul.dropdown-menu {
    overflow: auto;
}
.text-center{
    text-align: center;
}
.card-text{
    font-weight:bold;
}
.card-body{
    text-align: center;
}
.card{
    float:left;
    margin-right:20px;
}
.birthday-picture {
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
}
.col-stt{
    width:50px;
}
.col-mnv {
    width: 110px;
}
.export-row{
    text-align: center;
    margin-top:10px;
}
.export-calendar-button {
    width: 120px;
    display: block;
    margin: auto;
}
.report-button{
    display:flex;
    justify-content:left;
}
    .report-button button {
        height:45px;
        margin:auto 0 0 0;
    }
.search-form{
    margin-bottom:10px;
    width:500px;
}
.pit-container {
    height: calc(100vh - 240px);
}
.pit-filter-form {
    display: flex;
    padding-left: unset;
}
.btn-pit-search {
    height: 38px;
    margin-left: 20px;
    margin-top: 24px;
}
.ag-floating-bottom-container div[col-id="rowIndex"] {
    display:none;
}
.kv-report-check {
    position: absolute;
    right: 5px;
    bottom: 1px;
    
}
.bi-exclamation-triangle-fill {
    color: #fff900;
    animation: blink 1s ease-in infinite;
}
.bi-check-circle-fill {
    color: darkgreen;
}
.klavisreport tfoot th{
    position:relative;
}
@keyframes blink {
    from, to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}
.modal-xl {
    max-width: 1300px;
}
.btn-copy-salary{
    margin-right:5px;
}
.btn-sal-mgt{
    margin-right:100px;
}
.margin-right-5px {
    margin-right: 5px;
}
#EmployeeForm .modal-footer {
    flex-wrap:nowrap;
    align-items:unset;
    justify-content:unset;
}
.foot-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding-right: .75rem;
    column-gap:5px;
}