/* here you can put your own css to customize and override the theme */
/*Author: DuongPD 
 Override*/
.portlet {
    margin-bottom: 0;
}

.portlet.light {
    padding-bottom: 0;
}

.logo-default {
    width: 140px;
    height: auto;
    margin: 0px 0 0 0px !important;
}

.page-logo .big-title {
    color: white;
    margin: 10px 0px 0px 20px !important;
    width: auto;
    font-size: 19px;
    font-family: monospace;
    position: relative;
}

.page-sidebar-closed .big-title {
    display: none;
}

span.form-label {
    line-height: 30px;
}

.page-logo .big-title>.version {
    color: #d64635;
    width: auto;
    font-size: 13px;
    font-family: monospace;
    position: absolute;
    top: 2px;
    right: -36px;
    padding: 1px 2px;
    vertical-align: super;
    border-radius: 30px !important;
    /* background: #ffffff; */
}

.has-error {
    color: #e73d4a !important;
    position: absolute;
    font-size: 11px;
    width: 100%;
    left: 8px;
}

.page-content {
    padding: 0 !important;
}

.page-title {
    margin: 10px 0 !important;
    font-weight: unset !important;
}

.page-footer-inner {
    text-align: center;
}

.modal-header {
    padding: 10px !important;
}

.portlet .portlet-title {
    margin-bottom: unset !important;
}

.portlet .portlet-title .actions {
    display: inline-block !important;
}

.portlet.light>.portlet-title>.caption {
    color: #333 !important;
}

.table>caption+thead>tr:first-child>td,
.table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>td,
.table>colgroup+thead>tr:first-child>th,
.table>thead:first-child>tr:first-child>td,
.table>thead:first-child>tr:first-child>th {
    color: #6B7280;
}

table tbody tr.row-O {
    background-color: #fff;
}

table tbody tr.row-O:hover {
    background-color: #ffa5000f;
}

table tbody tr.row-O td.row-title {
    font-weight: bold;
}

.sub-menu>li>a {
    font-size: 13px !important;
}

.btn-group>.dropdown-menu,
.dropdown-toggle>.dropdown-menu,
.dropdown>.dropdown-menu {
    margin-top: unset !important;
}

/*Override angular loading bar lib*/
#loading-bar {
    pointer-events: all;
    z-index: 99999;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
}

#loading-bar-spinner {
    width: 100%;
    display: block;
    text-align: center;
    z-index: 999999 !important;
    text-align: center !important;
    color: #ffffff !important;
}



/*Author: DuongPD
 Custom Modal*/
.cmodal .modal-header {
    background-color: #04599e !important;
    color: white !important;
    position: relative;
}

.cmodal .modal-title {
    font-size: 15px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/*hoant*/
/* MODAL */
.cmodal {
    position: relative;
}

.cmodal .modal-close {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    padding: 10px;
    color: #fff;
}

.modal-800 .modal-lg {
    width: 800px;
}

.modal-870 .modal-lg {
    width: 870px;
}

.modal-1000 .modal-lg {
    width: 1100px;
}

.modal-1100 .modal-lg {
    width: 1100px;
}

.modal-1200 .modal-lg {
    width: 1200px;
}

.modal-1300 .modal-lg {
    width: 1300px;
}

.modal-full .modal-lg {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.modal-large {
    width: 1200px;
}

fieldset {
    padding: .35em .625em .75em !important;
    border: 1px solid #c0c0c0 !important;
    margin-bottom: 0px;
    border-left: none !important;
    border-bottom: none !important;
    border-right: none !important;
}

legend {
    display: block;
    padding: 0;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: inherit;
    color: #0070C0;
    width: auto;
    border-bottom: 0px;
    font-weight: 700;
}

body {
    font-family: "Poppins", sans-serif;
}

/*Author: DuongPD
 Custom Grid*/
.grid-header {
    background-color: #F8FAFC;
}

.table-box {
    border: 1px solid #E5E7EB;
    border-radius: 6px !important;
    background: #fff;
}

/*Author: DuongPD*/
.resize-none {
    resize: none !important
}

.text-through {
    text-decoration: line-through;
}

/*Author: HoaNT
 Custom margin, padding*/
.margin-none {
    margin: unset !important;
}

.padding-none {
    padding: unset !important;
}

.padding-left-none {
    padding-left: unset !important;
}

.padding-left-5 {
    padding-left: 5px !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-left-15 {
    padding-left: 15px !important;
}

.padding-left-20 {
    padding-left: 20px !important;
}

.padding-left-25 {
    padding-left: 25px !important;
}

.padding-left-30 {
    padding-left: 30px !important;
}

.padding-right-none {
    padding-right: unset !important;
}

.padding-right-5 {
    padding-right: 5px !important;
}

.padding-right-10 {
    padding-right: 10px !important;
}

.padding-right-15 {
    padding-right: 15px !important;
}

.padding-right-20 {
    padding-right: 20px !important;
}

.padding-right-25 {
    padding-right: 25px !important;
}

.padding-right-30 {
    padding-right: 30px !important;
}

.padding-top-none {
    padding-top: unset !important;
}

.padding-top-5 {
    padding-top: 5px !important;
}

.padding-top-10 {
    padding-top: 10px !important;
}

.padding-top-15 {
    padding-top: 15px !important;
}

.padding-top-20 {
    padding-top: 20px !important;
}

.padding-top-25 {
    padding-top: 25px !important;
}

.padding-top-30 {
    padding-top: 30px !important;
}

.padding-bottom-none {
    padding-bottom: unset !important;
}

.padding-bottom-5 {
    padding-bottom: 5px !important;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}

.padding-bottom-15 {
    padding-bottom: 15px !important;
}

.padding-bottom-20 {
    padding-bottom: 20px !important;
}

.padding-bottom-25 {
    padding-bottom: 25px !important;
}

.padding-bottom-30 {
    padding-bottom: 30px !important;
}

.margin-right-none {
    margin-right: unset !important;
}

.margin-right-5 {
    margin-right: 5px !important;
}

.margin-right-10 {
    margin-right: 10px !important;
}

.margin-right-15 {
    margin-right: 15px !important;
}

.margin-right-20 {
    margin-right: 20px !important;
}

.margin-right-25 {
    margin-right: 25px !important;
}

.margin-right-30 {
    margin-right: 30px !important;
}

.margin-left-none {
    margin-left: unset !important;
}

.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-10 {
    margin-left: 10px !important;
}

.margin-left-15 {
    margin-left: 15px !important;
}

.margin-left-20 {
    margin-left: 20px !important;
}

.margin-left-25 {
    margin-left: 25px !important;
}

.margin-left-30 {
    margin-left: 30px !important;
}

.margin-top-none {
    margin-top: unset !important;
}

.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-5percent {
    margin-top: 5% !important;
}

.margin-top-3percent {
    margin-top: 3% !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-15 {
    margin-top: 15px !important;
}

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

.margin-top-25 {
    margin-top: 25px !important;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.margin-bottom-none {
    margin-bottom: unset !important;
}

.margin-bottom-5 {
    margin-bottom: 5px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-15 {
    margin-bottom: 15px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-25 {
    margin-bottom: 25px !important;
}

.margin-bottom-30 {
    margin-bottom: 30px !important;
}

/*Sonpn*/
.label-title {
    font-weight: 600;
    font-size: 12px;
}

.label-status {
    text-shadow: none !important;
    font-size: 12px;
    border-radius: 3px !important;
    font-weight: 300;
    padding: 3px 8px 3px 8px;
    color: #fff;
    font-family: "Open Sans", sans-serif;
}

.label-1 {
    background: #9b979d;
}

.label-2 {
    background: #16a1f2;
}

.label-3 {
    background: #cc0202;
}

.label-4 {
    background: #21b703;
}

.vertical-middle {
    vertical-align: middle !important;
}

.font-25 {
    font-size: 25px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-15 {
    font-size: 15px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-10 {
    font-size: 10px !important;
}

.font-9 {
    font-size: 9px !important;
}

/*Author: DuongPD 
 Height*/
.height-50-vh {
    height: 50vh !important;
}

.height-55-vh {
    height: 55vh !important;
}

.height-60-vh {
    height: 60vh !important;
}

.height-65-vh {
    height: 65vh !important;
}

.height-70-vh {
    height: 70vh !important;
}

.height-75-vh {
    height: 75vh !important;
}

.height-80-vh {
    height: 80vh !important;
}

.modal-xl {
    width: 90%;
}

/*SONPN Profile css*/
.profile-sidebar {
    float: left;
    width: 300px;
    margin-right: 20px
}

.profile-content {
    overflow: hidden
}

.profile-sidebar-portlet {
    padding: 30px 0 0 !important
}

.profile-userpic img {
    float: none;
    margin: 0 auto;
    width: 50%;
    height: 50%;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important
}

.profile-usertitle {
    text-align: center;
    margin-top: 20px
}

.profile-usertitle-name {
    color: #5a7391;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 7px
}

.profile-usertitle-job {
    text-transform: uppercase;
    color: #5b9bd1;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 7px
}

.profile-userbuttons {
    text-align: center;
    margin-top: 10px
}

.profile-userbuttons .btn {
    margin-right: 5px
}

.profile-userbuttons .btn:last-child {
    margin-right: 0
}

.profile-userbuttons button {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 15px
}

.profile-usermenu {
    margin-top: 30px;
    padding-bottom: 20px
}

.profile-usermenu ul li {
    border-bottom: 1px solid #f0f4f7
}

.profile-usermenu ul li:last-child {
    border-bottom: none
}

.profile-usermenu ul li a {
    color: #93a3b5;
    font-size: 16px;
    font-weight: 400
}

.profile-usermenu ul li a i {
    margin-right: 8px;
    font-size: 16px
}

.profile-usermenu ul li a:hover {
    background-color: #fafcfd;
    color: #5b9bd1
}

.profile-usermenu ul li.active a {
    color: #5b9bd1;
    background-color: #f6f9fb;
    border-left: 2px solid #5b9bd1;
    margin-left: -2px
}

.profile-stat {
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f4f7
}

.profile-stat-title {
    color: #7f90a4;
    font-size: 25px;
    text-align: center
}

.profile-stat-text {
    color: #5b9bd1;
    font-size: 11px;
    font-weight: 800;
    text-align: center
}

.profile-desc-title {
    color: #7f90a4;
    font-size: 17px;
    font-weight: 600
}

.profile-desc-text {
    color: #7e8c9e;
    font-size: 14px
}

.profile-desc-link i {
    width: 22px;
    font-size: 19px;
    color: #abb6c4;
    margin-right: 5px
}

.profile-desc-link a {
    font-size: 14px;
    font-weight: 600;
    color: #5b9bd1
}

/*
.modal-content .portlet-body {
    min-height: 550px;
}
*/
.modal-content {
    border: none;
}

td.pd0 {
    padding: 0px !important;
}

td.pd0 table {
    margin: 0px !important;
}

tr.tr-parent {
    background-color: #ebeef2 !important;
}

tr.tr-parent td {
    font-weight: bold;
}

.table-child thead.color_header tr {
    background: #f7f7f7 !important;
}

.table-child thead.color_header tr td {
    color: #222 !important;
}

table.table-child {
    border: none;
}

tr.tr-parent td {
    font-weight: bold;
    color: #222;
}

@media (max-width: 991px) {
    .profile-sidebar {
        float: none;
        width: 100% !important;
        margin: 0
    }

    .profile-sidebar>.portlet {
        margin-bottom: 20px
    }

    .profile-content {
        overflow: visible
    }
}

.profile,
.profile-classic .profile-image {
    position: relative
}

.add-portfolio,
.portfolio-block,
.portfolio-stat,
.portfolio-text,
.portfolio-text .portfolio-text-info {
    overflow: hidden
}

.page-container-bg-solid .profile {
    background: #fff;
    padding: 20px
}

.profile p {
    color: #636363;
    font-size: 13px
}

.profile p a {
    color: #169ef4
}

.profile label {
    margin-top: 10px
}

.profile label:first-child {
    margin-top: 0
}

.profile-classic .profile-edit {
    top: 0;
    right: 0;
    margin: 0;
    color: #fff;
    opacity: .6;
    padding: 0 9px;
    font-size: 11px;
    background: #000;
    position: absolute;
    filter: alpha(opacity=60)
}

.profile-classic .profile-image img {
    margin-bottom: 15px
}

.profile-classic li {
    padding: 8px 0;
    font-size: 13px;
    border-top: solid 1px #f5f5f5
}

.profile-classic li:first-child {
    border-top: none
}

.profile-classic li span {
    color: #666;
    font-size: 13px;
    margin-right: 7px
}

.profile .tabbable-custom-profile .nav-tabs>li>a {
    padding: 6px 12px
}

.profile ul.profile-nav {
    margin-bottom: 30px
}

.profile ul.profile-nav img.pic-bordered {
    border: 1px solid #e1e7ee
}

.profile ul.profile-nav li {
    position: relative
}

.profile ul.profile-nav li a {
    color: #557386;
    display: block;
    font-size: 14px;
    padding: 8px 10px;
    margin-bottom: 1px;
    background: #f0f6fa;
    border-left: solid 2px #c4d5df
}

.profile ul.profile-nav li a:hover {
    color: #169ef4;
    background: #ecf5fb;
    text-decoration: none;
    border-left: solid 2px #169ef4
}

.profile ul.profile-nav li a.profile-edit {
    top: 0;
    right: 0;
    margin: 0;
    color: #fff;
    opacity: .6;
    border: none;
    padding: 3px 9px;
    font-size: 12px;
    background: #000;
    position: absolute;
    filter: alpha(opacity=60)
}

.profile ul.profile-nav li a.profile-edit:hover {
    text-decoration: underline
}

.profile ul.profile-nav a span {
    top: 0;
    right: 0;
    color: #fff;
    font-size: 16px;
    padding: 7px 13px;
    position: absolute;
    background: #169ef4
}

.profile ul.profile-nav a:hover span {
    background: #0b94ea
}

.profile-info h1 {
    color: #383839;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 10px
}

.profile-info ul {
    margin-bottom: 15px
}

.profile-info li {
    color: #6b6b6b;
    font-size: 13px;
    margin-right: 15px;
    margin-bottom: 5px;
    padding: 0 !important
}

.profile-info li i {
    color: #b5c1c9;
    font-size: 15px
}

.profile-info li:hover i {
    color: #169ef4
}

.sale-summary ul {
    margin-top: -10px
}

.sale-summary li {
    padding: 10px 0;
    overflow: hidden;
    border-top: solid 1px #eee
}

.sale-summary li:first-child {
    border-top: none
}

.sale-summary li .sale-info {
    margin-top: 4px;
    float: left;
    color: #646464;
    font-size: 14px;
    text-transform: uppercase
}

.sale-summary li .sale-num {
    float: right;
    color: #169ef4;
    font-size: 20px;
    font-weight: 300
}

.sale-summary li span i {
    top: 1px;
    width: 13px;
    height: 14px;
    margin-left: 3px;
    position: relative;
    display: inline-block
}

.sale-summary .caption h4 {
    color: #383839;
    font-size: 18px
}

.sale-summary .caption {
    border-color: #c9c9c9
}

.profile .table-advance thead tr th {
    background: #f0f6fa
}

.profile .table-bordered,
.profile .table-bordered td,
.profile .table-bordered th {
    border-color: #e5eff6
}

.profile .table-striped tbody>tr:nth-child(2n+1)>td,
.profile .table-striped tbody>tr:nth-child(2n+1)>th {
    background: #fcfcfc
}

.profile .table-hover tbody tr:hover td,
.profile .table-hover tbody tr:hover th {
    background: #f5fafd
}

.add-portfolio {
    margin-bottom: 30px;
    background: #f0f6fa;
    padding: 12px 14px
}

.add-portfolio span {
    float: none;
    display: inline-block;
    font-weight: 300;
    font-size: 22px;
    margin-top: 0
}

.add-portfolio .btn {
    margin-left: 20px
}

.portfolio-block {
    background: #f7f7f7;
    margin-bottom: 15px
}

.portfolio-text img {
    float: left;
    margin-right: 15px
}

.portfolio-btn a {
    display: block;
    padding: 25px 0;
    background: #ddd !important
}

.portfolio-btn a:hover {
    background: #1d943b !important
}

.portfolio-btn span {
    color: #fff;
    font-size: 22px;
    font-weight: 200
}

.portfolio-info {
    float: left;
    color: #616161;
    font-size: 12px;
    padding: 10px 25px;
    margin-bottom: 5px;
    text-transform: uppercase
}

.portfolio-info span {
    color: #16a1f2;
    display: block;
    font-size: 28px;
    line-height: 28px;
    margin-top: 0;
    font-weight: 200;
    text-transform: uppercase
}

.profile-settings {
    background: #fafafa;
    padding: 15px 8px 0;
    margin-bottom: 5px
}

.profile-settings p {
    padding-left: 5px;
    margin-bottom: 3px
}

.profile-settings .controls>.checkbox,
.profile-settings .controls>.radio {
    font-size: 12px;
    margin-top: 2px !important
}

.btn-icon-only {
    height: 22px;
    width: 22px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    padding-top: 2px;
    font-size: 12px;
}

.avatar-box {
    height: 30px;
    width: 30px;
    background: #ddd;
    display: block;
    float: left;
    margin-right: 14px;
    margin-top: -3px;
    margin-bottom: -5px;
}

.text-single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0px;
    margin: 0px;
    text-align: start;
}

.img-inline {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
}

.img-inline>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-right: 0px;
}

.btn-hover {
    border-width: 1px;
    border-color: none;
}

.btn-hover:hover,
.btn-hover:focus,
.btn-hover.active {
    color: #333 !important;
    background-color: #ededed !important;
    border-color: #b3b3b3 !important;
    border-width: 1px !important;
}

.table-hover>tbody>tr:hover,
.table-hover>tbody>tr:hover>td {
    background: #f3f4f6;
}

.text-bold {
    font-weight: 700;
}

html {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

.table-sort-asc {
    background: url(/assets/global/plugins/datatables/images/sort_asc.png) no-repeat right;
}

.table-sort-both {
    background: url(/assets/global/plugins/datatables/images/sort_both.png) no-repeat right;
}

.table-sort-desc {
    background: url(/assets/global/plugins/datatables/images/sort_desc.png) no-repeat right;
}

/** right click*/
body>ul>li>a {
    font-size: 14px;
    padding: 2px 5px 5px 5px !important;
}

body>ul>li.divider {
    padding: 0px 0px 0px 0px !important;
    margin: 1px;
}

.table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
    background-color: #1c346354 !important;
}

/* .table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td {
    background-color: transparent !important;
}
 */


.selected .mt-checkbox>span::after {
    display: block !important;
}

.mt-radio.mt-radio-outline>span,
.mt-radio.mt-checkbox-outline>span,
.mt-checkbox.mt-radio-outline>span,
.mt-checkbox.mt-checkbox-outline>span {
    background: white !important;
}

.highlight-fts {
    /*     color:red; */
    font-weight: bold;
}


.form-group-sm>label {
    font-size: 12px !important;
}


.ui-select-container .glyphicon-remove {
    margin-top: 1px;
}

.ui-select-match-text {
    margin-top: 2px;
}

#select-site {
    color: white !important;
    margin-top: 5px;
}

.text-oneline {
    white-space: nowrap;
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.ag-theme-balham .multiline .ag-header-cell-label .ag-header-cell-text {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
    height: auto;
}

.table-responsive>table>thead>tr>th {
    font-size: 12px !important;
    font-weight: 600;
    color: #6B7280 !important;
    padding: 10px 5px;
    margin: auto;
    align-content: center;
    font-family: 'Inter';
}

.table-responsive>table>tbody>tr>td {
    font-size: 13px;
    font-family: 'Inter';
    font-weight: 500;
    color: #1F2937;
    overflow: hidden;
}

.table-responsive>table {
    table-layout: fixed;
    margin-bottom: 0px;
}

.avatar-box {
    overflow: hidden;
}

.dashboard-stat:hover {
    transform: translateY(-2px);
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

#newsDate .calendar-table {
    display: none;
}

#newsDate .daterangepicker {
    display: none;
}

#newsDate .calendar {
    width: 40%;
}

#newsDate .ranges {
    margin-top: -5px;
}
/* CSS cho hiển thị cấu trúc cha con OKR */
.font-weight-bold {
    font-weight: bold !important;
}

.text-primary {
    color: #337ab7 !important;
}

.row-title {
    position: relative;
}

label.lbl-type {
    padding: 2px 5px;
    height: 20px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px !important;
    overflow: hidden;
    line-height: 16px;
    margin: 0px;
    text-align: center;
}

.type-O {
    background: orange;
}
.type-NV {
    color: #04599e;
}

.type-KR {
    background: #98ccbc;
}


.lbl-type.type-0 {
    background-color: #337ab7;
    color: white;
}

.lbl-type.type-KR {
    background-color: #5cb85c;
    color: white;
}

.lbl-type.type-NV {
    background-color: #f0ad4e;
    color: white;
}

.lbl-type.type-1 {
    background-color: #d9534f;
    color: white;
}
.lbl-type.type-2 {
    background-color: #06db1f;
    color: white;
}

i.fa-expand {
    font-size: 16px;
}

i.fa-collapse {
    font-size: 16px;
}

/* Indent cho các cấp độ khác nhau */
.okr-level-0 {
    margin-left: 0px;
}

.okr-level-1 {
    margin-left: 20px;
}

.okr-level-2 {
    margin-left: 40px;
}

/* Styling cho OKR cha */
.okr-parent {
    font-weight: bold;
    color: #337ab7;
}

/* Styling cho OKR con */
.okr-child {
    color: #333;
}

/* Styling cho trạng thái */
.text-status {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.text-status-1 {
    background-color: #f0f0f0;
    color: #666;
}

.text-status-141 {
    background-color: #fff3cd;
    color: #856404;
}

.text-status-541 {
    background-color: #d1ecf1;
    color: #0c5460;
} 
.font-small {
    font-size: 13px;
    color: #888;
}

.table-nopadding {
    margin: 0px;
    padding: 0px;
}

.nopadding-right {
    padding-right: 0px;
}

.bt-pd-5 {
    padding-bottom: 5px;
    margin-bottom: 0px;
}

.update-item {
    padding: 10px 0px 20px 0px;
}

ul.db-item {
    background: #f1f1f1;
    margin: 0px;
    padding: 7px 10px;
    list-style: none;
    margin-bottom: 0px;
    display: inline-block;
    width: 100%;
}

ul.db-item li {
    font-size: 13px;
    padding-top: 3px;
    padding-right: 50px;
    display: inline-block;
}

.input-group-addon.group-addon-text {
    background: none;
    border: none;
}

.col-success {
    color: #04599e;
}

.col-danger {
    color: #ec0000;
}

.col-default {
    color: #e1e5ec;
}

.grid-item-state {
    padding-top: 5px;
    padding-right: 10px;
    float: right;
}

.title-nv {
    padding: 10px;
}

/* Put your css in here */

.dropdown-with-ivhTreeView {
    position: relative;
    display: inline-block;
    min-width: 10em;
    width: 20em;
    z-index: inherit;
}

.dropdown-with-ivhTreeView .dropDown {
    min-width: inherit;
    width: inherit;
    height: 30px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: middle;
    overflow: hidden;
    z-index: inherit;
    line-height: 1.5em;
    padding: 5px 0px 5px 5px;
}

.dropdown-with-ivhTreeView .dropDown .dropDownButton {
    float: right;
    border-left: none;
    width: 20px;
    height: 100%;
    text-align: center;
    z-index: inherit;
}

.dropdown-with-ivhTreeView .dropDown .dropDownButton .dropDownButtonIcon {
    width: 0px !important;
    height: 0px !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid #222 !important;
    border-bottom: 0px solid transparent !important;
    top: 35%;
    left: 30%;
    position: relative !important;
}

.dropdown-with-ivhTreeView .dropDownContent {
    background-color: white;
    min-width: inherit;
    max-height: 20em;
    width: inherit;
    overflow: auto;
    display: none;
    position: absolute !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
    z-index: inherit;
}

.dropdown-with-ivhTreeView .dropDownContent .searchBox {
    position: relative !important;
    top: 10px;
    left: 10px;
    width: 93%;
    border: solid 1px #979696;
    border-radius: 4px !important
}

.dropdown-with-ivhTreeView .show {
    display: block;
}

.dropdown-with-ivhTreeView .dropDownContent .ivhTree {
    position: relative !important;
    left: 10px;
    max-width: 95%;
    top: 20px;

}

ul.ivh-treeview ul.ivh-treeview {
    padding-left: 18px;
    padding-top: 5px;
}

/*Related to Inner Tree View Colasable icon : START */
.arrow-right {
    width: 0px !important;
    height: 0px !important;
    border-top: 4px solid transparent !important;
    border-bottom: 4px solid transparent !important;
    border-left: 4px solid black !important;
    border-right: 0px solid transparent !important;
    top: -2px;
    left: 0px;
    position: relative !important;
    display: inline-block;
}

.arrow-down {
    width: 0px !important;
    height: 0px !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid black !important;
    border-bottom: 0px solid transparent !important;
    top: -4px;
    left: 0px;
    position: relative !important;
    display: inline-block;
}

.header-th-wrap {
    overflow: hidden;
    white-space: nowrap;
}

.dataTables_paginate {
    padding-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

span.image-list {
    max-height: 40px;
    object-fit: cover;
    overflow: hidden;
    display: block;
}

.portlet.light .portlet-body {
    padding-top: 8px;
}

h4.section-form-title {
    color: #04599e;
    font-size: 16px;
    font-weight: bold;
    padding-top: 0px;
    padding-bottom: 8px;
    border-bottom: solid 1px #ddd;
    margin-bottom: 15px;
}

span.label-box {
    border: solid 1px #ccc;
    padding: 6px 10px;
    margin-top: 0px;
    display: block;
    background: #EEEEEE;
    text-align: right;
    height: 34px;
}

span.label-box.giaohang-date {
    color: #f30c0c;
    text-align: left;
}

td.sum-grand-total {
    text-align: right;
    font-weight: bold;
    color: #f30c0c;
}

tr.grand-total-row {
    background: #EBEEF2;
    font-weight: bold;
}

.checkin-checkout-box {
    width: 205px;
}

.checkin-box {
    border-right: solid 1px #ddd;
}

.checkin-box,
.checkout-box {
    width: 102px;
    height: 85px;
    display: block;
    text-align: center;
    float: left;
    padding: 10px 0px;
}

.checkinout-img span.box-noimage {
    border: solid 1px #ddd;
    width: 48px;
    height: 48px;
    display: block;
}

span.checkinout-img img {
    width: 48px;
    background: #ddd;
    height: 48px;
    display: block;
    cursor: pointer;
}

span.checkinout-title {
    font-size: 12px;
    line-break: normal;
    white-space: nowrap;
}

.checkin-box .checkinout-img,
.checkout-box .checkinout-img {
    text-align: center;
    display: inline-block;
}

td.header-center {
    text-align: center;
}

thead.header-grey {
    background: #e9e9e9;
    vertical-align: middle;
}

.header-info-grey {
    background: #f1f1f1;
    display: block;
    height: 36px;
}

.table-small td {
    font-size: 12px;
}

.status-mm {
    color: #d64635;
}

.db-item {
    padding-top: 8px;
    padding-bottom: 5px;
}

input.form-small-date {
    font-size: 13px;
    padding: 6px !important;
    height: 30px;
}

.right-box-form-choose {
    padding-top: 3px;
}

.data-empty {
    padding: 200px 0px;
    text-align: center;
}

.original-image {
    padding: 10px;
}

.original-image img {
    width: 100%;
    min-height: 500px;
}

.table-bordered>tbody>tr>td.p0 {
    padding: 0px;
}

td.header-center.box-checkin-header {
    width: 103px;
}

.right-box-form-choose .filter-month {
    width: 300px;
    float: right;
}

.right-box-form-choose .filter-week {
    width: 250px;
    float: right;
}

button.btn.btn-primary.btn-choose-npp.ng-scope {
    border-radius: 10px !important;
    line-height: 14px;
    height: 23px;
    width: 64px;
    margin-bottom: 2px;
    padding: 4px !important;
    font-size: 12px;
}

.ui-grid-top-panel {
    overflow: visible;
}

.ui-grid-header-viewport {
    overflow: visible;
}

.ui-grid-cell>.ui-grid-cell-contents {
    overflow: visible;
}

.ui-grid-cell-contents .dropdown,
.ui-grid-cell-contents .dropup {
    position: absolute;
}

.ui-grid-cell-contents>.dropdown>.dropdown-menu,
.ui-grid-cell-contents>.dropup>.dropdown-menu {
    right: auto;
    left: 0;
}

.ui-grid-cell-contents>.dropdown>.dropdown-menu:after {
    position: absolute;
    top: -6px;
    right: auto;
    left: 10px;
    display: inline-block !important;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    content: '';
}

.ui-grid-cell-contents>.dropdown>.dropdown-menu:before {
    position: absolute;
    top: -7px;
    right: auto;
    left: 9px;
    display: inline-block !important;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #eee;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, .2);
    content: '';
}

ul.action-list {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: inline-block;
}

ul.action-list li {
    display: block;
    float: left;
    margin-right: 10px;
}

#action-menu {
    display: none;
    position: fixed;
}

#action-menu ul.dropdown-menu-default {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    min-width: 175px;
    float: left;
    list-style: none;
    text-shadow: none;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 5px 5px rgb(102 102 102 / 10%);
}

#action-menu ul.dropdown-menu-default:before {
    position: absolute;
    top: -7px;
    right: 9px;
    left: auto;
    display: inline-block !important;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #eee;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, .2);
    content: '';
}

#action-menu ul.dropdown-menu-default:after {
    position: absolute;
    top: -6px;
    right: 10px;
    left: auto;
    display: inline-block !important;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    content: '';
}

#action-menu ul.dropdown-menu-default li {
    padding-bottom: 2px;
}

#action-menu ul.dropdown-menu-default li a {

    padding: 8px 16px;
    color: #6f6f6f;
    text-decoration: none;
    display: block;
    clear: both;
    font-weight: 300;
    line-height: 18px;
    white-space: nowrap;
}

.date-search input {
    width: 46%;
    float: left;
    margin-right: 10px;
}

.padding-filter-first {
    clear: both;
    padding-top: 0px;
}

.padding-filter-last {
    clear: both;

    padding-top: 5px;
    padding-bottom: 5px;
    /* float: right; */
    padding-right: 15px;
}

.vertical_hozitical {
    vertical-align: middle !important;
}

.color_header {
    color: #333 !important;
    vertical-align: middle !important;
    text-align: center !important;
    overflow: hidden;
    white-space: nowrap;
}

.center_header {
    color: #333 !important;
    vertical-align: middle !important;
    text-align: center !important;
    overflow: hidden;
}

.filter-actions {
    float: right;
    padding-left: 15px;
}

.tr_total {
    background: #f1f1f1;
    color: #333 !important;
    vertical-align: middle !important;
    /* text-align: center  !important; */
    font-weight: bolder;
}

.search {
    float: right;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: right;
    padding-right: 0px;
}

.report-wrapper {
    height: calc(100vh - 181px);
}

.list-wrapper {
    margin-top: 10px;
    min-height: calc(100vh - 194px);
}

table.dataTable {
    padding: 0px;
}

.font-small.header-th-wrap {
    max-width: 280px;
    white-space: unset;
    margin: 0px;
    padding: 0px;
}

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

.text-align-left {
    text-align: left !important;
}

span.icon-inactive i {
    font-size: 16px;
    color: #c9c5c5;
}

span.icon-active i {
    font-size: 16px;
    color: #04599e;
}

table.dataTable tbody tr.sub-total,
table.dataTable tbody tr.sub-total:hover {
    background-color: #eff2f8 !important;
    font-weight: 600;
}

#loadingDiv img {
    width: 400px;
    margin-bottom: 100px;
}

.pb10 {
    padding-bottom: 10px;
}

.table-wrapper {
    max-height: 450px;
    overflow-y: scroll;
    margin-bottom: 20px;
}

#image span.checkinout-img img,
#image .checkinout-img span.box-noimage {
    width: 100%;
    height: 200px;
}

.report-advance h4 {
    font-size: 14px;
    color: #04599e;
    font-weight: 600;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.report-advance ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.report-advance ul li {
    padding: 6px 0px;
}

ul.actions-list {
    margin-bottom: 0px;
}

.h-line {
    border-right: 1px dashed #ddd;
    width: 1px;
    height: calc(100vh);
    float: left;
}

ul.baocao-list li {
    width: 100%;
    float: left;
}

.nhombaocao-list li {
    display: inline-block;
    border-left: solid 1px #ddd;
    padding: 2px 10px 0px;
}

.nhombaocao-list li:first-child {
    border-left: none;
}

.nhombaocao-list li a.active {
    font-weight: bold;
}

ul.nhombaocao-list {
    margin-bottom: 0px;
    padding: 0px;
}

.report-detail {
    min-height: 600px;
}

span.col-status i {
    padding: 0px 5px;
}

span.col-status i.enable {
    color: #04599e;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-6 {
    margin-bottom: 6px;
}

.mb-4 {
    margin-bottom: 4px;
}

.mb-0 {
    margin-bottom: 0px;
}

.ui-select-match {
    overflow: hidden;
    padding-right: 0px;
}

.lbl-status {
    font-size: 12px;
    min-width: 60px;
    display: block;
    text-align: center;
}

.ui-grid-cell-contents.row-actions {
    background: #e1e1e1;
    height: 22px;
    padding: 3px 10px;
    margin: 0px 10px;
    font-size: 12px;
}

.ui-grid-cell-contents.row-actions .dropdown {
    text-align: center;
}

.pr-0 {
    padding-right: 0px;
}

.pl-0 {
    padding-left: 0px;
}

.mr-0 {
    margin-right: 0px;
}

.ml-0 {
    margin-left: 0px;
}

span.lbl-line {
    font-weight: bold;
    color: #04599E;
    line-height: 30px;
    text-align: right;
    float: right;
}

span.lbl-line i {
    color: red;
}

.btn:not(.btn-sm):not(.btn-lg) {
    line-height: 1.5;
}

.label {
    text-shadow: none !important;
    font-size: 12px;
    font-weight: 300;
    padding: 2px 6px 2px 6px;
    color: #fff;
    border-radius: 4px !important;
}
/* Trạng thái */
/* Dự thảo = 1 */
/* Dự thảo = 1 */
.text-status-1 {
    color: #6B7280;
}
/* Đang thực hiện = 2 */
.text-status-2 {
    color: #F59E0B;
}
/* Hoàn thành = 3 */
.text-status-3 {
    color: #10B981;
}
/* Hủy = 4 */
.text-status-4 {
    color: #EF4444;
}

.page-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
}

.breadcrumb li {
    display: inline-block;
    font-size: 12px;
}

.breadcrumb a:hover {
    color: #3598dc;
}
.page-header.navbar .page-logo>a {
    color: #fff;
    line-height: 48px;
    font-size: 18px;
    font-weight: bold;
}

/*Related to Inner Tree View Colasable icon : END */

/* Fix for ui-select long text overflow */
.ui-select-match .ui-select-match-text {
  width: calc(100% - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: left;
}
.ui-select-bootstrap .ui-select-toggle {
    width: 100%;
}

/* Dashboard Styles */
.dashboard-stat {
    transition: all 0.3s ease;
    cursor: pointer;
}

.dashboard-stat:hover {
    transform: translateY(-2px);
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.dashboard-stat .details .number {
    font-weight: 600;
    font-size: 36px;
}

.dashboard-stat .details .desc {
    font-weight: 500;
    font-size: 14px;
}

/* Modern Dashboard Stats */
.dashboard-stat-modern {
    background: #fff;
    border-radius: 20px !important;
    padding: 20px 15px;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #d7d4d4;
}

.dashboard-stat-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dashboard-stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.dashboard-stat-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
}

.dashboard-stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
}

.dashboard-stat-subtitle {
    font-size: 14px;
    font-weight: 500;
    color: #7f8c8d;
}

/* Color variants for modern stats */
.dashboard-stat-cream {
    background: linear-gradient(135deg, #f5f3f0 0%, #ede8e0 100%);
}

.dashboard-stat-green-light {
    background: linear-gradient(135deg, #e8f5e8 0%, #d4f2d4 100%);
}

.dashboard-stat-blue-light {
    background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%);
}

.dashboard-stat-purple-light {
    background: linear-gradient(135deg, #f0e6ff 0%, #e0ccff 100%);
}

/* Modern Dashboard Chart Containers */
.dashboard-chart-container {
    background: #fff;
    border-radius: 20px !important;
    margin-bottom: 30px;
    border: 1px solid #d7d4d4;
    transition: all 0.3s ease;
    overflow: hidden;
}

.dashboard-chart-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dashboard-chart-header {
    padding: 25px 30px 0px 30px;
}

.dashboard-chart-title {
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    text-align: center;
}

.dashboard-chart-body {
    padding: 20px 30px 30px 30px;
    background: #fff;
}

/* Chart containers */
.chart-container {
    padding: 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Custom colors for dashboard stats */
.dashboard-stat.blue {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.dashboard-stat.green {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.dashboard-stat.purple {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.dashboard-stat.yellow {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

/* Filter section styling */
.search-box {
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 20px;
}

.form-label {
    font-weight: 600;
    color: #2c3e50;
    line-height: 34px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dashboard-stat .details .number {
        font-size: 28px;
    }
    
    .dashboard-stat .details .desc {
        font-size: 12px;
    }
    
    .dashboard-stat .visual > i {
        font-size: 80px;
        line-height: 80px;
    }
    
    .dashboard-stat-modern {
        padding: 20px 15px;
        margin-bottom: 15px;
    }
    
    .dashboard-stat-number {
        font-size: 36px;
    }
    
    .dashboard-stat-title {
        font-size: 14px;
    }
    
    .dashboard-stat-subtitle {
        font-size: 12px;
    }
    
    .dashboard-chart-container {
        margin-bottom: 20px;
    }
    
    .dashboard-chart-header {
        padding: 20px 20px 15px 20px;
    }
    
    .dashboard-chart-title {
        font-size: 16px;
    }
    
    .dashboard-chart-body {
        padding: 15px 20px 20px 20px;
    }
}