header {background: #fe0;}.avatar-circle { height: 60px; border-radius: 50%; width: 60px; object-fit: cover; border: 3px solid #ebe5d5; margin: 3px; object-position: top; }
.vnm-avatar { width: 45px; height: 45px; border-radius: 50%!important; object-fit: cover; margin-right: 5px; border: 2px solid #e3f3ff; }
.vnm-btn button {font-size: 0.8em; display: block;} #filter ul li:nth-child(14) a span { display: none; }
table#infoOrderCustomer tr, table#infoOrderEmployee tr,table#infoOrder tr { border-top: none; }
.phu-lieu-list li:nth-child(1){background-color:transparent;} .item-body li:nth-child(1){background-color:#0d6efd1f;}.phu-lieu-list li{background-color:#f4433626;border-radius: 8px 8px 0 0; padding: 8px 8px 0 8px; }
.column{column-count: 2; column-gap: 10px;}.phu-lieu-list li span { display: block;padding-bottom: 6px; }
ul.list-item { list-style: none; text-align: left; padding: 0;}.list-all td { border: none !important; }
span.name-item { width: 100px; display: inline-table; } #calenderBox .phu-lieu-list { position: relative !important;  top: auto; bottom: auto; }
.list-item li { padding: 1px 5px; }table#infoOrder tr:nth-child(even),.list-item li:nth-child(even){ background-color: #0d6efd1f; border-radius: 4px;}
.author-info{display: inline-grid;} .worktime { display: block; }
.table>:not(caption)>*>* { padding: .2rem .2rem;}
.fullfrom,.fullto {color:#333} .fullto>.fas {color:#0a58ca;} 
.fullfrom>.fas{color:#ed1c24;} .note-list,.fullto i,.fullfrom i {color: #FF5722;} .note-list {display: block; }
span.text { white-space: pre-wrap; text-align: left; display: block; } 
li.item-footer { display: flex; justify-content: center;align-items: center;width: 100%; text-align: center; margin: auto; }
ul.item-body {position: none!important; bottom: 0; z-index: 0!important;}
.phu-lieu-list { margin: 0; padding: 0; } .phu-lieu-list > li { list-style: none; } .phu-lieu-list ul { margin: 0; padding: 0; }
.item-body li{border: 1px solid #90CAF9;color:#0a57c8;display: inline-block; padding: 2px 5px; background: #0d6efd1f; border-radius: 10px; margin-top: 3px; margin-right: 5px; }
ul.list-item { display: block !important; }
.order_notes { max-height: 180px; overflow-y: auto; transition: max-height 0.5s ease, scrollbar-color 0.3s ease; position: relative; scrollbar-width: none; }
hr {margin: 0.5rem 0;}
#txtGoodsTransNote,#txtNoteSurvey,#txtNoteCustomer{height:120px}
.formprint-payment tr{line-height: 60px;}
.logo-admin{ text-align: center; display: block; margin: auto; top: 70px; position: relative; }
#result-price { font-weight: 500; font-style: italic; }
.tooltip-popup {max-width: 100%; position: absolute; visibility: hidden; background-color: #f6cebf; color: #333; padding: 10px; border-radius: 5px; width: 600px; transition: opacity 0.3s; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px; z-index: 1000; }
.tooltip-popup-quotation {left: 0px; top: 620px;}
.tooltip-popup-tttt{ left: 127px; bottom: -68px; }.tooltip-popup-ttl {right: -70px; top: 625px; transform: translateX(-20%); width: 380px; } {left: 0px; top: 720px;}.tooltip-popup-confirm { left: -41px; bottom: 3px; }.tooltip-popup-ttdh { left: 127px; bottom: 15px; } .tooltip-popup-vat {left: 0px; top: 720px;}.tooltip-popup-price { right: -50px; top: 620px; transform: translateX(-20%); width: 380px; }.tooltip-popup-ck {right: -160px; top: 1020px;transform: translateX(-20%);} .tooltip-popup-ck::after {left: 260px!important;}
.tooltip-popup ul { list-style: none; padding: 5px; margin: auto; }
.tooltip-popup::after {
    content: "";
    display: block;
    position: absolute;
    top: -10px; 
    left: 150px;
    width: 0;
    height: 0;
    border-width: 0 10px 10px 10px;  /* Điều chỉnh để tạo mũi tên hướng lên trên */
    border-style: solid;
    border-color: transparent transparent #f6cebf transparent;
}
#status-icon-quotation { bottom: 72px; left: 128px; } #status-icon-vat { bottom: 72px; left: 90px; }#status-icon-confirm { bottom: 71px; left: 71px; }
#status-icon-ck { left: 82px; top: -72px; }#status-icon-price { left: 35px; top: -109px; } #status-icon-ttdh { bottom: 72px; left: 107px; }#status-icon-ttl{ left: 106px; top: -72px; }#status-icon-tttt { bottom: 71px; left: 153px; }
/* Show the scrollbar on hover */
.order_notes:hover {
    scrollbar-width: thin;
    scrollbar-color: #ffc107 rgb(0 0 0 / 0%); 
}
/* .navbar { background-image: url(../templates/bgnewyear-c.png); background-position: 307px 5px; background-repeat: no-repeat; background-size: 70%; z-index: 999; }*/
.order_notes::-webkit-scrollbar {width: 0;background: transparent;}
#dataSalary>tbody>tr>.sticky1{left: 0 !important;}
#result-price {
    font-weight: 500;
    font-style: italic;
}
.full-name {width: 135px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left;}.full-name:hover { width: auto; white-space: normal; direction: ltr; }
.date-info {
    font-size: 0.8em;
    color: #65676b;
    padding-right: 20px;
    white-space: nowrap;
}
.author-post {
    display: inline-flex;
    padding: 12px 0;
}
.author-post .author-info { padding-right: 8px; flex: 1 1 0px; width: 135px; text-align: left; }

.name-info {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.ks-day {
    font-size: 1.1em;
}
.tooltip-popup {
    max-width: 100%;
    position: absolute;
    visibility: hidden;
    background-color: #f6cebf;
    color: #333;
    padding: 10px;
    border-radius: 5px;
    width: 600px;
    transition: opacity 0.3s;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
    z-index: 1000;
}

.tooltip-popup-quotation {
    left: 0px;
    top: 620px;
}

.tooltip-popup-tttt {
    left: 127px;
    bottom: -68px;
}

.tooltip-popup-ttl {
    right: -70px;
    top: 625px;
    transform: translateX(-20%);
    width: 380px;
}

{
    left: 0px;
    top: 720px;
}

.tooltip-popup-confirm {
    left: -41px;
    bottom: 3px;
}

.tooltip-popup-ttdh {
    left: 127px;
    bottom: 15px;
}

.tooltip-popup-vat {
    left: 0px;
    top: 720px;
}

.tooltip-popup-price {
    right: -50px;
    top: 620px;
    transform: translateX(-20%);
    width: 380px;
}

.tooltip-popup-ck {
    right: -160px;
    top: 1020px;
    transform: translateX(-20%);
}

    .tooltip-popup-ck::after {
        left: 260px !important;
    }

.tooltip-popup ul {
    list-style: none;
    padding: 5px;
    margin: auto;
}

.tooltip-popup::after {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 150px;
    width: 0;
    height: 0;
    border-width: 0 10px 10px 10px; /* Điều chỉnh để tạo mũi tên hướng lên trên */
    border-style: solid;
    border-color: transparent transparent #f6cebf transparent;
}

#status-icon-quotation {
    bottom: 72px;
    left: 128px;
}

#status-icon-vat {
    bottom: 72px;
    left: 90px;
}

#status-icon-confirm {
    bottom: 71px;
    left: 71px;
}

#status-icon-ck {
    left: 82px;
    top: -72px;
}

#status-icon-price {
    left: 35px;
    top: -109px;
}

#status-icon-ttdh {
    bottom: 72px;
    left: 107px;
}

#status-icon-ttl {
    left: 106px;
    top: -72px;
}

#status-icon-tttt {
    bottom: 71px;
    left: 153px;
}
/* Show the scrollbar on hover */
.order_notes:hover {
    scrollbar-width: thin;
    scrollbar-color: #ffc107 rgb(0 0 0 / 0%);
}

    .order_notes:hover::-webkit-scrollbar {
        width: 6px;
    }

    .order_notes:hover::-webkit-scrollbar-track {
        background: #e0e0e0;
    }

    .order_notes:hover::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
        border: 2px solid #e0e0e0;
    }

        .order_notes:hover::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }

.box-search-top {
    position: relative;
}

    .box-search-top .btn-search {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        text-align: center;
        padding: 7px 13px;
        border: 1px solid #e9e9e9;
        background: #ffffff;
        color: #0d6efd;
        border-radius: 0px 15px 15px 0px;
    }

    .box-search-top .btn-clear-search {
        position: absolute;
        right: 41px;
        top: 0;
        bottom: 0;
        text-align: center;
        padding: 4px 11px;
        border: 1px solid #e9e9e9;
        background: #ffffff;
        color: #a6a6a6;
        border-right: 0;
        border-left: 0;
    }

a.nav-link.px-3 {
    display: inline-block
}

.col-md-2.text-right {
    text-align: right;
}

.filter-day li {
    display: inline-block;
    vertical-align: middle;
}

div#postModal {
    padding: 0 !important;
}

    div#postModal .modal-dialog {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        left: 0 !important;
    }

.box-radius tbody tr td {
    vertical-align: middle;
    border: 1px solid #e1e1e1;
}

.box-radius tr th {
    vertical-align: middle;
    border: 1px solid #e1e1e1 !important;
    text-align: center;
    background: #f8f9fa;
    white-space: nowrap
}

#dataNumberOfMaterial>tbody>tr:nth-child(even),#dataPost>tbody>tr:nth-child(even),#dataSalary>tbody>tr:nth-child(even),#dataEmployeeTrip>tbody>tr:nth-child(even),.report:nth-child(even) {
    background-color: #F9f9f9;
}
.box-radius .odd td {
    background: #e9f4fd;
}

.box-radius tbody tr.xong td {
    background: #f2fbf7;
}

.box-radius tbody tr.odd.xong td {
    background: #e9f4fd;
}


.box-radius tr:hover td {
}

.filter-day {
    padding: 0;
    margin: auto;
}

    .filter-day li {
        display: inline-block;
    }

.btn-kh {
    color: #048af5;
    cursor: pointer;
    white-space: nowrap;
}

.icon-tooltip, #priceTotal {
    color: red
}

label {
    font-weight: bold;
    padding: 2px 5px;
}

table {
    /* font-family:roboto*/
}

td.text-right {
    text-align: right;
}

.navbar-light .navbar-toggler {
    margin-left: 0;
    font-size: 16px;
    font-weight: bold;
}

body {
    overflow-x: hidden
}


/* The container */
.checkBox {
    display: inline-block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .checkBox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 8px;
}

/* On mouse-over, add a grey background color */
.checkBox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkBox input:checked ~ .checkmark {
    background-color: #2196F3;
    border-radius: 8px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkBox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkBox .checkmark:after {
    left: 10px;
    top: 7px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.desktop {
    display: block
}

.mobile {
    display: none
}

#calenderBox .addheight {
    height: 80vh !important
}

td.amount {
    color: green
}

td.amountReturn {
    color: blue
}

td.amountSum {
}

table .odd {
}

table .even {
    background: #fcf8ed !important
}

.pin-head thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

#data {
    height: 80vh;
    overflow: scroll;
    position: relative;
}

.btn-default {
    background: #e5efff;
    border: 1px solid #e5efff;
}

table.table.table-info {
    margin-bottom: 0px;
}

.table-info td, .table-info th {
    vertical-align: middle;
    border-bottom: 1px solid #f3f3f3;
    background-color: #fff;
}

.mb-10 {
    margin-bottom: 10px;
}

.menu-right {
    padding: 0;
    display: flex;
    margin: 0;
    justify-content: end;
}

    .menu-right li {
        position: relative;
        list-style: none;
    }

    .menu-right ul {
        position: absolute;
        display: none;
    }

    .menu-right li:hover ul {
        display: block;
        padding: 0;
        margin: 0;
        right: 0px;
        background: #fff;
        top: 100%;
    }

    .menu-right li a {
        display: block;
        padding: 15px;
        color: #333
    }

@media only screen and (max-width: 600px) {
    .desktop {
        display: none
    }

    .mobile {
        display: block
    }
}


div#boxVAR {
    background: #fe0;
    padding: 10px;
    margin: 10px;
}

#histories {
    padding: 0px;
    max-height: 400px;
    overflow: scroll;
}

    #histories li {
        list-style: none;
        padding: 10px 0px;
    }

        #histories li span.VIEW {
            color: #007793;
        }

        #histories li span.UPDATE {
            color: red;
        }

        #histories li span.UpdateField {
            color: orange;
        }

        #histories li span.ADD {
            color: green;
        }

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.box-thu {
    padding: 20px;
    background: #e2f7ee;
    border-radius: 10px;
    border: 3px solid #b7ffde;
    margin-bottom: 20px;
}

.box-chi {
    padding: 20px;
    background: #e0edff;
    border-radius: 10px;
    border: 3px solid #83b2f3;
}

.box-files {
    padding: 20px;
    background: #f3f3f3;
    border-radius: 10px;
    border: 3px solid #d5d5d5;
}

.type-1 {
    background: #fcfadb;
}

.type-2 {
    background: #d3fed3;
}

.type-3 {
    background: #f0f6ff;
}

.type-4 {
    background: #dcfea5;
}

.type-5 {
    background: #f2edff;
}

.receipts-in-list {
    padding: 0;
    margin: 0;
}

    .receipts-in-list li {
        list-style: none;
        padding: 5px;
        border-bottom: 1px solid #a39e9e;
    }

        .receipts-in-list li:last-child {
            border-bottom: 0px solid #a39e9e;
        }

        .receipts-in-list li .amount {
            background: #ffe9dc;
            display: inline-block;
            padding: 3px 10px;
            border-radius: 0.72rem;
        }


.color-order-info {
    background-color: #f7f5d9 !important
}

.color-receipt-info-title {
    background-color: #ddfcec !important
}

.color-receipt-info {
    background-color: #f1fff8 !important
}

.color-receipt-info-1 {
    background-color: #e1fff0 !important
}

.color-pay-info {
    background-color: #f2f9ff !important
}

ul.order-items-receipt {
    text-align: left;
    margin: 0;
}

.select2-container {
    z-index: 9999;
    display: block;
}

    .select2-container .select2-selection--single {
        height: 40px;
        border-color: #ddd !important;
        margin-top: 4px;
        padding: 5px;
		width:270px;
    }

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px;
}

.select2-container.select2-container--default.select2-container--open {
    z-index: 5000;
}

ul.shorttext, ul.order_notes {
    padding: 2px 0 0;
    list-style: none;
}

.note_content p {
    margin-bottom: 0rem;
}

.note-view { display: block; color: #3F51B5; }
.text-right {
    text-align: right
}

ul.order_notes li .note_content {
    padding: 10px;
    background: #f6cebf;
    position: relative;
    border-radius: 6px;
    max-width: max-content;
}

ul.order_notes > li:nth-child(2n) > .note_content {
    background: #f7f5d9;
}

ul.order_notes li .note_content::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 0;
    height: 0;
    border-width: 10px 10px 0 0;
    border-style: solid;
    border-color: #f6cebf transparent;
}

ul.order_notes > li:nth-child(2n) > .note_content::after {
    border-color: #f7f5d9 transparent;
}

ul.order_notes li p.meta {
    padding: 10px;
    color: #999;
    margin: 0;
    font-size: 11px;
}

.shorttext li {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #adc5be;
    font-size: 0.8em;
    padding: 8px;
    border-radius: 17px;
    margin-right: 5px;
    margin-bottom: 5px;
    background: #f3f3f3;
    line-height: 10px;
    color: #666;
}
table {
     -webkit-user-select: auto;
     -webkit-touch-callout: auto;
     -moz-user-select: auto;
     -ms-user-select: auto;
     user-select: auto; 
 }
@media only screen and (max-width: 600px) {
    #calenderBox ul, #calenderBox > div:nth-child(2) {
        display: none;
    }
}



@media only screen and (max-width: 1000px) {

    #calenderBox ul, #calenderBox > div:nth-child(2) {
        display: none;
    }

    .table-scroll .sticky0 {
        position: relative;
        left: auto;
        width: auto;
        min-width: 0px;
    }

    .table-scroll .sticky1 {
        position: relative;
        left: auto;
        width: auto;
        min-width: 0px;
    }

    .table-scroll .sticky2 {
        position: relative;
        left: auto;
        width: auto;
        min-width: 0px;
    }


    .table-scroll .sticky3 {
        position: relative;
        left: auto;
        width: auto;
        min-width: 0px;
    }



    .table-scroll .sticky4 {
        position: relative;
        left: auto;
        width: auto;
        min-width: 222px;
    }
}
/*.menu-callcenter{
    display:none;
}*/
span.select2-selection.select2-selection--single {
    width: 100%;
}