/*-----------------------------
Author         : anhvv
Created time   : Oct.2019
Common styles for all components
-----------------------------*/

i:hover,
th:hover,
td:hover {
    cursor: pointer;
}

.carousel-inner > .row-equal.active,
.carousel-inner > .row-equal.next,
.carousel-inner > .row-equal.prev {
    display: flex;
}

.box-yellow{
background: #fff7a7 !important
}
/*--------------------------------------- PAGE LAYOUT --------*/
.page-wrapper {
    background: #f2f2ff;
}

.heading {
    text-transform: uppercase;
    color: #4c439b;

}

.section-title {
    color: #6d61da;
    text-transform: uppercase;

}

/*------------------------------------------- M - REPORT --------*/
.m-report .dataTables_wrapper.no-footer .dataTables_scrollBody {
    border: none;
}

.m-report .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
    vertical-align: top;
}

.m-report #tableReport_paginate,
.m-report .dataTables_wrapper .dataTables_info,
.m-report .dataTables_filter,
.m-report .dataTables_length {
    padding: 10px
}

.m-report .dataTables_wrapper .dataTables_info label,
.m-report .dataTables_filter label,
.m-report .dataTables_length label {
    font-weight: normal;
}

.m-report .dataTables_length select {
    width: 75px;
    display: inline-block;
}

.m-report .dataTables_filter input {
    margin-left: 0.5em;
    display: inline-block;
    width: auto;
}

.m-report table th.stick {
    padding-top: 20px;
}

.m-report table tr:nth-child(odd),
.m-report table tr:nth-child(odd) td.stick {
    background: #ebeefb;
}

.m-report .table th {
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
}

.m-report .table td.project {
    width: 140px;
}

.m-report .table td.block {
    width: 80px;
}

.btn-table .btn i {
    font-size: 10px;
    margin-right: 3px;
}

.m-report .table-footer .btn-outline-secondary {
    color: #b1ace2;
    border-color: #b1ace2;
    background: #f2f2ff;
}

.m-report .table-footer .btn-outline-secondary:hover,
.m-report .table-footer .btn-outline-secondary:not(:disabled):not(.disabled).active,
.m-report .table-footer .btn-outline-secondary:not(:disabled):not(.disabled):active {
    color: #fff;
    background: #a39ada;
}

.m-report .table-footer {
    background: #d9ddf3;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding-right: 40px;
}

.m-report .table-footer .btn {
    text-transform: uppercase;
}

.m-report .form-control {
    padding: 0.3rem;
}


.m-report .select2 .select2 select2-container .select2-container--default {
    width: 100%;
}

.m-report .pagination {
    display: flex;
    padding: 10px 15px 0;
    justify-content: flex-end;
}

.m-report .table .no3 a {
    font-size: 22px;
    color: #dce0e4;
}

.m-report .table .no3 a.problem-enabled {
    color: #ffbc34;
}

.m-report .table .no2 i {
    margin-top: 7px;
    font-size: 16px;
    color: #d9ddf3;
}

.m-report .table .no2 i.late-enabled {
    color: #DB4E77;
}

/*--------------------------------------- CARD TASK ------------- */
.report .accordion .card:last-of-type {
    border-radius: 4px;
}

.slick-track {
    display: flex;
    float: left;
}

.accordion .card.task .card-body {
    padding: 10px;
    min-height: 105px;
}

.accordion .card.task {
    max-width: 350px;
    margin-left: 15px;
}

.card.task .progress {
    height: 8px;
    border-radius: 8px;
    background: #eaeaf7;
}

.card.task .progress-bar {
    background: #20c997;
}

.card.task .progress span {
    display: block;
    position: relative;
    left: -10px;
}

.card.task .title {
    color: #555;
    font-weight: 600 !important;
    max-height: 40px;
    min-height: 40px;
    overflow: hidden;
}

.card.task .log {
    color: #999;
    font-weight: 300;
    font-size: 12px;
}

.card.task .log span {
    margin-left: 7px;
}

.card.task .btn {
    font-size: 28px;
    color: #6d61da;
    padding: 0;
}

.card.task .status {
    width: 45px;
    height: 30px;
    padding: 0 5px;
    line-height: 30px;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: 60px;
    background: #20c997;
}

.card.task .status sup {
    font-size: 50%;
}

.card.task.warning .progress-bar,
.card.task.warning .status {
    background: #ffbc34;
}

.card.task.missing .progress-bar,
.card.task.missing .status {
    background: #f62d51;
}

.card.task.disable .progress-bar,
.card.task.disable .status {
    background: #ced4da;
}

.card.task.disable .btn,
.card.task.disable .title,
.card.task.disable .log {
    color: #ced4da;
}

.slick-dotted.slick-slider {
    margin-bottom: 10px;
}

.slick-dots {
    bottom: -10px;
}

/*------------------------------------------------ PROJECT ---------------------*/

.project .dataTables_filter,
.project .pagination,
.project .dataTables_length,
.project .dataTables_info {
    padding: 10px;
}

.project .ti-face-sad:before {
    color: red;
    font-size: 4rem;
}

.project .swal2-content h4 {
    font-weight: 400;
}

.project .unSort.sorting_asc:before,
.project .unSort.sorting_asc:after {
    display: none;
}

.project .selection {
    width: 100%;
}

#updateProject .box1 .info,
#updateProject .box2 .info,
#updateProject .info-container button.btn.clear1,
#updateProject .bootstrap-duallistbox-container label {
    display: none !important;
}

#updateProject .box1 select,
#updateProject .box2 select {
    height: 180px !important;
}

#updateProject .btn.moveall,
#updateProject .btn.move,
#updateProject .btn.remove,
#updateProject .btn.removeall {
    background-color: #6d61da;
}

#updateProject .box1 option,
#updateProject .box2 option {
    padding: 5px;
}

#updateProject .box1 input:placeholder-shown {
    content: 'Từ khóa';
}

/*------------------------------------------------ M-USER ---------------------*/
.user .form-modal.add .user label {
    margin-top: 10px;
    margin-bottom: 0.5rem;
}

.user .form-modal.add .user input:not(.checkbox) {
    width: 100%;
}

/*------------------------------------------------ M-PERMISSON ---------------------*/
.m-permission #add form ul li ul li,
.m-permission #edit form ul li ul li {
    list-style: none;
}

.m-permission #add form ul li ul,
.m-permission #edit form ul li ul {
    display: none;
}

.m-permission #add form ul li,
.m-permission #edit form ul li {
    cursor: pointer;
}

.m-permission #add ul,
.m-permission #edit ul {
    padding-left: 0;
}

.m-permission #add ul li ul,
.m-permission #edit ul li ul {
    padding-left: 20px;
}

.m-permission #add form i,
.m-permission #edit form i {
    color: #9287e8;
}

/*--------------------------------------- FIX PAGIGNATION ------------------*/
.m-report .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    margin-left: -1px;
    *cursor: hand;
    padding: 0;

}

.m-report .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.m-report .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.m-report .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #666 !important;
    background: transparent;
    box-shadow: none;
}

.m-report .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: none;
}

.m-report .paginate_button.previous,
.m-report .paginate_button,
.m-report .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #7460ee !important;
}

.m-report .paginate_button.next.disable {
    color: #dee2e6 !important;
}

.m-report .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.m-report .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #9287e8 !important;
    color: white !important;
}

.m-report .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.m-report .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    z-index: 2;
    color: #381be7;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
    background-image: none;
}

/*--------------------------------------- A-REPORT ------------------*/
.hide {
    display: none;
}

.a-report tspan {
    font: 12px sans-serif;
}

.underline {
    background-color: #9287e8;
    color: white;
    padding: 6px;
    border-radius: 30px;
}

.a-report .tbl1 td:last-child,
.a-report .tbl1 .total th:last-child {
    color: red;
}

.a-report .select2 option {
    min-width: 150px;
    max-width: 150px;
    text-align: center;
}

.a-report .select2-selection--multiple {
    height: 35px;
    vertical-align: middle;
}

/*---text - table---*/
.a-report .table thead th:not(:first-child),
.a-report .table tbody td {
    min-width: 150px;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.a-report .table thead th:first-child,
.a-report .table tbody th {
    min-width: 250px;
    white-space: nowrap;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 52px;
}

.a-report .table .project,
.a-report .table .total .project {
    width: 250px;
    max-width: 250px;
    text-align: left;
}

.a-report .table .total th:not(:first-child) {
    min-width: 150px;
    max-width: 150px;
    text-align: center;
    color: red;
}

.a-report .tbl1 table thead tr th,
.a-report .tbl1 table tbody tr th {
    left: 200px;
}

.a-report .tbl1 table thead,
.a-report .tbl1 table tfoot {
    display: table;
}

.a-report .tbl1 table tbody {
    display: block;
}

/*--- table --- */
.a-report .tbl1 {
    max-height: 65vh;
}

.a-report .tbl1 table {
    position: relative;
    z-index: 1;
    overflow: scroll;
}

.a-report .tbl1 table tbody th {
    width: 100%;
}

.a-report .tbl1 table thead,
.a-report .tbl1 table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    min-width: 100%;
}

.a-report .tbl1 table tfoot,
.a-report .tbl1 table tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 4;
    min-width: 100%;
}

.a-report .tbl1 table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 150px;
}

.a-report .tbl1 table thead th:first-child,
.a-report .tbl1 table tfoot th:first-child {
    z-index: 5;
    width: 150px;

}

.a-report .tbl1 table tfoot thead th:first-child {
    width: 150px;
}

.a-report .tbl1 table tbody tr:nth-child(odd) th {
    background: #ebeefb;
}

.a-report .tbl1 table tbody tr:nth-child(even) th {
    background: #ffffff;
}

.a-report #data-chart .highcharts-container .highcharts-root .highcharts-axis.highcharts-yaxis text tspan {
    display: none;
}

/*--------------------------------------- MO-REPORT ------------------*/

.mo-report #add .form-modal.modal-dialog,
.mo-report #edit .form-modal.modal-dialog {
    max-width: 900px;
}

.mo-report #add .form-modal .modal-content,
.mo-report #edit .form-modal .modal-content {
    min-width: 820px;
}

.mo-report .fa-plus-circle:before,
.mo-report .fa-minus-circle:before {
    color: #4c439b;
    font-size: 20px;
}

.mo-report #add .table td,
.mo-report #add .table th,
.mo-report #edit .table td,
.mo-report #edit .table th {
    padding: 0.75rem 0.5rem;
}

.mo-report #add .table td,
.mo-report #edit .table td {
    border: none;
}

.mo-report #add .table-report .total:after,
.mo-report #edit .table-report .total:after {
    content: '100%';
    color: green;
    padding-left: 5px;
    font-weight: bold;
}

#add .table-report .form-body-add span,
#edit .table-report .form-body-add span {
    width: 100% !important;
}

/*--------------------------------------- A-LATE ------------------*/
.a-late table td:not(.employees) {
    text-align: center;
}

/*-------------------------------------REG-BUSINESS------------------*/
.reg-business .table .project {
    min-width: 223px;
    max-width: 225px;
}

.reg-business .table div.content {
    min-width: 318px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
}

/*--------------------------------------- M-BUSINESS------------------*/
.m-business table div.content {
    min-width: 280px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
}

.m-business table div.place {
    min-width: 90px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
}

/*--------------------------------------- M-HOLIDAY ------------------*/
.m-holiday .table .date,
.m-holiday .table thead th:first-child,
.m-holiday .table tbody td:first-child {
    text-align: center;
}


.m-holiday #add .fa-plus-circle:before,
.m-holiday #add .fa-minus-circle:before {
    color: #4c439b;
    font-size: 20px;
}

.m-holiday #add .table-add {
    padding: 0;
    margin-bottom: 8rem;
}

.m-holiday #add .table th {
    font-weight: 600;
}

.m-holiday #add .table th,
.m-holiday #add .table td {
    border: none;
    text-align: left;
    padding-left: 0;
    padding: 0.5rem;
}

/*
.m-holiday .dataTables_length,
.m-holiday .dataTables_filter,
.m-holiday .dataTables_info {
    display: none;
}
*/

/*--------------------------------------- M-SUPPLEMENTATION ------------------*/
.m-supp .table .date,
.m-supp .table thead th:first-child,
.m-supp .table tbody td:first-child {
    text-align: center;
}

/*
.m-supp .dataTables_length,
.m-supp .dataTables_filter,
.m-supp .dataTables_info {
    display: none;
}
*/

/*--------------------------------------- REG-CA-TRUC ------------------*/
.reg-shift .fc-right {
    display: none;
}

.reg-shift .rotate {
    transform: rotate(180deg);
}

.reg-shift .fc-toolbar .fc-button {
    background: #474697;
}

/*-- favicon --*/
.reg-shift .bg-overtime {
    background-color: #ffc500;
}

.reg-shift .bg-mor {
    background-color: #aedd52;
}

.reg-shift .bg-aft {
    background-color: #474697
}

.reg-shift .bg-off {
    background-color: #f2f2f2;
}

.reg-shift .bg-off .fc-title {
    color: gray;
}

.reg-shift .bg-aft-first {
    background: linear-gradient(to left, #fff 50%, #474697 50%);
    text-align: left;
    border: 0.7px solid #474697;
}

.reg-shift .bg-aft-second {
    background: linear-gradient(to left, #474697 50%, #fff 50%);
    text-align: right;
    border: 0.7px solid #474697;
}

.reg-shift .bg-mor-first {
    background: linear-gradient(to left, #fff 50%, #aedd52 50%);
    text-align: left;
    border: 0.7px solid #aedd52;
}

.reg-shift .bg-mor-second {
    background: linear-gradient(to left, #aedd52 50%, #fff 50%);
    text-align: right;
    border: 0.7px solid #aedd52;
}

.reg-shift .fc-event-container {
    padding: .5px;
}

.reg-shift .bg-overtime,
.reg-shift .bg-mor,
.reg-shift .bg-aft,
.reg-shift .bg-off,
.reg-shift .bg-aft-first,
.reg-shift .bg-aft-second,
.reg-shift .bg-mor-first,
.reg-shift .bg-mor-second {
    font-size: 11px;
}

.reg-shift .bg-mor-first .fc-title,
.reg-shift .bg-mor-second .fc-title,
.reg-shift .bg-overtime .fc-title,
.reg-shift .bg-mor .fc-title {
    color: black;
}

.reg-shift .fc-event {
    margin: 0;
    padding: 5px 3px;
}

/*--------------------------------------- REG-LAM-CA ------------------*/
.reg-lam-ca table#scroll_ver_dynamic_hei tbody tr td {
    text-align: center;
}

.reg-lam-ca .dataTables_length,
.reg-lam-ca .dataTables_filter,
.reg-lam-ca .dataTables_info {
    display: none;
}

.reg-lam-ca table#scroll_ver_dynamic_hei tbody div.display {
    width: 160px;
    height: 20px;

}

.reg-lam-ca table#scroll_ver_dynamic_hei tbody div.display-morning {
    width: 80px;
    height: 20px;
    float: left;

}

#add div.display-option,
#edit div.display-option {
    width: 140px;
    height: 22px;
}

#add div.display-morning-option,
#edit div.display-morning-option {
    width: 70px;
    height: 22px;
}

#add input[type="radio"],
#edit input[type="radio"] {
    margin-left: 20px;
}

#add input[type="radio"]:before,
#edit input[type="radio"]:before {
    content: none;
}

#add .picker__list,
#edit .picker__list {
    height: 90vh;
    overflow-y: auto;
}

#add .picker--time .picker__box,
#edit .picker--time .picker__box {
    margin-bottom: 0;
}

/*--------------------------------------- REG-OT ------------------*/
/***** classs: 
.timeup-OT: màu xanh
.timeout-OT: màu đỏ
****/
.reg-OT .table .thead-light th {
    vertical-align: middle;
    padding: 10px;
}

.reg-OT .table tbody tr td:first-child,
.reg-OT .table tbody tr td:nth-child(2),
.reg-OT .table tbody tr td:nth-child(6),
.reg-OT .table tbody tr td:nth-child(7),
.reg-OT .table tbody tr td:nth-child(8) {
    text-align: center;
}

#add-OT .time-OT {
    background-color: #5dec23;
    border-radius: 6px;
    padding: 2px 4px;
    color: #fff;
    margin-left: 5px;
    margin-bottom: 4px;
}

.reg-OT .table tbody span.timeup-OT {
    background-color: #5dec23;
    border-radius: 6px;
    padding: 2px 4px;
    color: #fff;
    font-size: 12px;
}

.reg-OT .table tbody span.timeout-OT {
    background-color: #ec5555;
    border-radius: 6px;
    padding: 2px 4px;
    color: #fff;
    font-size: 12px;
}

.reg-OT .table tbody tr td i.check-OT {
    color: #7460ee;
    font-size: 22px;
}

.reg-OT .table tbody tr td i.uncheck-OT {
    color: #ec5555;
    font-size: 22px;
}

.reg-OT .table tbody tr td {
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#update-OT .time-OT {
    background-color: #5dec23;
    border-radius: 6px;
    padding: 0;
    color: #fff;
    margin-bottom: 5px;
    padding-top: 2px;
    text-align: center;
}

#update-OT .update-time-OT {
    background-color: #a1aab2;
    border-radius: 6px;
    padding: 4px;
    color: #fff;
}

#update-OT .table-OT {
    padding: 0;
}

#update-OT .fa-plus-circle:before,
#update-OT .fa-minus-circle:before {
    color: #4c439b;
    font-size: 20px;
}

#update-OT .table td {
    vertical-align: middle;
}

#update-OT .table td:not(:nth-child(3)),
#update-OT .table th {
    padding: 0.5rem;
    padding-left: 0;
    border: none;
    text-align: left;
}

#update-OT .table td:nth-child(3),
#update-OT .table th:nth-child(3) {
    border: none;
    text-align: center;
}

#update-OT .table th {
    font-weight: 600;
}

#update-OT .picker--time .picker__box,
#add-OT .picker--time .picker__box {
    margin-bottom: 0;
}

#update-OT .picker__list,
#add-OT .picker__list {
    height: 90vh;
    overflow-y: auto
}

/*--------------------------------------- A-OT ------------------*/
.a-OT .table th:nth-child(4),
.a-OT .table th:nth-child(5),
.a-OT .table th:nth-child(6),
.a-OT .table td:nth-child(4),
.a-OT .table td:nth-child(5),
.a-OT .table td:nth-child(6) {
    text-align: center;
}

/*--------------------------------------- A-BLOCK-OT ------------------*/
.a-block-OT .table td:first-child,
.a-block-OT .table td:nth-child(2),
.a-block-OT .table td:nth-child(3),
.a-block-OT .table td:nth-child(6),
.a-block-OT .table td:nth-child(9),
.a-block-OT .table td:nth-child(10) {
    text-align: center;
}


/*--------------------------------------- M-LATE ------------------*/
.m-leave .btn-time {
    background-color: #D6E4FF;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 13px;

}

.m-leave table .block,
.m-leave table .room {
    min-width: 100px;
    max-height: 150px
}

.m-leave table .date {
    min-width: 55px;
    max-width: 70px
}

.m-leave table .btn-wait {
    background-color: #FFC444;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 13px;
}

.m-leave table .btn-done {
    background-color: #D6E4FF;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 13px;
}

.m-leave table .btn-removed {
    background-color: #B7B5B5;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 13px;
}

.m-leave table .btn-cancel {
    background-color: #D6E4FF;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 13px;
}

.m-leave table i {
    color: #9287e8;
    font-size: 16px;
}

.m-leave .filter-leave .daterangepicker.ltr .ranges,
.daterangepicker.ltr .drp-calendar {
    float: none;
}

.m-leave .filter-leave .daterangepicker .drp-calendar.left,
.m-leave .filter-leave .daterangepicker .drp-calendar.right {
    padding: 6px 0 6px 6px;
}

.m-leave .filter-leave .daterangepicker .drp-buttons {
    text-align: center;
}

.m-leave .filter-leave .daterangepicker .drp-buttons .btn.btn-default {
    display: none !important;
}

/*--------------------------------------- REG-LEAVE ------------------*/

.reg-leave .card-title {
    text-transform: uppercase;
    font-weight: 700;
}

.reg-leave .statistic .mount {
    font-size: 3.5em;
    line-height: 0;
    font-family: "Open Sans", sans-serif;
}

.reg-leave .statistic .time {
    font-size: 0.95em;
    color: #888;
    font-style: italic;
}

.reg-leave .statistic .box {
    display: block;
    padding: 15px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 2em;
}

.reg-leave .valid .box {
    background: #8dc63f;
}

.reg-leave .valid .mount,
.reg-leave .valid .card-title {
    color: #6ea721;
}

.reg-leave .remain .box {
    background: #7460ee;
}

.reg-leave .remain .mount,
.reg-leave .remain .card-title {
    color: #7460ee;
}

.reg-leave .old .box,
.reg-leave .used .box {
    background: #d9ddf3;
}

.reg-leave .old .time,
.reg-leave .old .mount,
.reg-leave .old .card-title,
.reg-leave .used .time,
.reg-leave .used .mount,
.reg-leave .used .card-title {
    color: #c9ceea;
}

.reg-leave .old.active .box {
    background: #ffca00;
}

.reg-leave .old.active .mount,
.reg-leave .old.active .card-title {
    color: #ff9800;
}

.table-leave .table th,
.table-leave .table thead th {
    font-weight: 600;
    padding-bottom: 5px !important;
}

.table-leave th,
.table-leave td {
    text-align: left;
    padding: 0 10px 10px 0;
}

.table-leave .end i {
    color: #7460ee;
    font-size: 1.5em;
    text-align: left;
}

.table-leave .input-group .input-group-text {
    margin-left: -1px;
}

.table-leave .input-group > input,
.table-leave .input-group > select {
    max-width: 120px;
}

.table-leave select {
    max-width: 300px;
}


.reg-leave .table-leave .total-day .reg-day,
.reg-day {
    padding-left: 5px;
    color: red;
    font-style: italic;
}

.reg-leave .total-day .reg-day:after,
.reg-day:after {
    content: 'ngày';
    padding-left: 5px;
    color: red;
    font-style: italic;
}

.reg-leave .table-leave .btn-leave button {
    padding: 8px 30px;
}


.reg-leave .history-leave table .no2 i {
    color: #9287e8;
    font-size: 18px;
}

.reg-leave .history-leave table td:not(.no1) {
    text-align: center;
}

.reg-leave .history-leave table td:last-child {
    width: 150px
}

.reg-leave .history-leave {
    width: 100%;
    height: 50vh
}

table .btn-last i {
    font-size: 25px;
    color: #7460ee;
}

.reg-leave .btn-time {
    background-color: #D6E4FF;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 13px;

}

.reg-leave table .btn-wait {
    background-color: #FFC444;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 13px;
}

.reg-leave table .btn-done {
    background-color: #D6E4FF;
    border-radius: 15px;
    padding: 2px 8px;
    font-size: 13px;
}

#add.add-cong-tac .select2-selection.select2-selection--multiple {
    height: auto;
    max-height: 85px;
    overflow-y: scroll;
}

/*--------------------------------------- A-LEAVE ------------------*/
.a-leave table i {
    color: #9287e8;
    font-size: 26px;
}

.a-leave table td:not(.name) {
    text-align: center;
}


.a-leave #tableReport .no1,
.follow-leave #tableReport .no2 {
    background-color: #d9ddf363;
}

/*--------------------------------------- M-CONTRACT ------------------*/
.m-contract .table th {
    vertical-align: middle;
}


/*--------------------------------------- CREATE-KPI ------------------*/
.cr-KPI .addNew {
    border-bottom: 1px solid #f2f2ff
}

.cr-KPI .addNew .col-12,
.cr-KPI .addNew .col-3,
.cr-KPI .addNew .col-4 {
    padding: 0px;
}

.cr-KPI .addNew div.profile {
    border-right: 1px solid #f2f2ff;
}

.cr-KPI div.action div button {
    min-width: 93px;
    max-width: 93px
}

.cr-KPI .filterReport {
    padding-top: 1.5rem;
}

.cr-KPI .filterReport span.status {
    color: red;
    font-weight: 700;
}

.cr-KPI .filterReport span.name {
    color: green;
    font-weight: 700;
}

.cr-KPI table#crtb-KPI thead tr th {
    vertical-align: middle;
    padding: .4rem .1rem;
}

.cr-KPI table#crtb-KPI tbody tr:not(.addRow) {
    background-color: #f2f2ff;
}

.cr-KPI table#crtb-KPI tfoot th {
    background-color: #f2f2ff;
}

.cr-KPI table#crtb-KPI tfoot th:first-child,
.cr-KPI table#crtb-KPI tr.group {
    font-weight: 600;
    color: #4c439b;
}

.cr-KPI table#crtb-KPI .total {
    color: red;
}

.cr-KPI table#crtb-KPI td.end {
    padding-left: 0;
    vertical-align: middle;
}

.cr-KPI table#crtb-KPI td.end i {
    color: #7460ee;
    font-size: 1.2em;
}

.cr-KPI table#crtb-KPI tbody td {
    border: 1px solid #d5dade;
    border-top: 1px solid #dee2e6;
}
.cr-KPI table#crtb-KPI tbody td input, .cr-KPI table#crtb-KPI tbody td textarea{
    border: none;
}
/*--------------------------------------- FOLLOW-LEAVE ------------------*/
.follow-leave .table td:not(.room):not(.block) {
    text-align: center;
}

.follow-leave .table .room {
    min-width: 180px;
}

.follow-leave .table .name {
    max-width: 200px;
}

/*--------------------------------------- REG-TRAVEL ------------------*/
.reg-travel #comment span.comment {
    display: block;
    text-align: justify;
    padding: 0 10px;
}

/*
.reg-travel table tbody td {
    border: 1px solid black;
}
*/
/*
.reg-travel table .user{
    min-width: 95px;
    max-width: 110px;
    width: 15px;
}
.reg-travel table .minCol {
    min-width: 80px;
    max-width: 85px;
}

.reg-travel table .maxCol {
    min-width: 100px;
    max-width: 130px;
}
*/

/*--------------------------------------- LOG-IN ------------------*/
.log-in .btn-login {
    background-color: #7460ee;
    border-color: #7460ee;
}

.log-in .auth-wrapper .auth-box {
    padding: 60px;
    max-width: 500px;
    border-radius: 6px;
    background: #ffffff73;
}

.log-in .auth-wrapper {
    background-image: url(../img/background-login.jpg);
    background-size: cover;
    background-repeat: no-repeat
}

.log-in #profile .modal-dialog {
    max-width: 900px;
}

.log-in legend {
    font-size: 1.1rem;
}

.log-in .img-profile {
    width: 220px;
}

.custom-file {
    color: transparent;
    left: 30%;
}

.custom-file::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file::before {
    content: 'Chọn ảnh';
    color: #4c439b;
    display: inline-block;
    background: -webkit-linear-gradient(top, #b1ace29e, #b1ace29e);
    border: 1px solid #b1ace29e;
    border-radius: 18px;
    padding: 5px 10px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}

.custom-file:hover::before {
    border-color: #4c439b;
}

.custom-file:active {
    outline: 0;
}

.custom-file:active::before {
    background: -webkit-linear-gradient(top, #b1ace29e, #b1ace29e);
}
#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#loading-image {
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: 100;
}