@charset "utf-8";
@import url("mo.css");
@import url("ta.css");
@import url("de.css");
@import url("error.css");
@import url("banner.css");

html {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(169, 169, 169, 0.4);
}

* {
    margin: 0px;
    padding: 0px;
}

table {
    min-width: 100%;
}

a,
a:visited {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--primary-color);
}

a img {
    border: none;
}

label {
    cursor: pointer;
}

fieldset {
    padding: 6px;
    border: 1px solid #CCCCCC;
    margin-bottom: 10px;
    border-radius: 8px;
}

legend {
    padding: 6px;
    font-size: 1.2em;
    font-weight: bold;
    color: #666666;

}

/*---------------------------------------------------------------------*/
#content-wrapper {
    width: 98%;
    padding: 0 25px;
    margin: 0 auto;
    
}

.content-wrapper:before {
    content: " ";
    clear: both;
}

.content-wrapper:after {
    content: " ";
    clear: both;
}

#menubar {
    width: 100%;
}

#menubar:after {
    content: '';
    clear: both;
    display: block;
}

.under-menu {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}

.under-menu .user-fullname a {
    font-size: 14px;
    color: var(--primary-color) !important;
    font-weight: bold;
}

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

@media (max-width: 768px) {
    #header .header-items {
        flex-direction: column;
        gap: 10px;
    }

    #header .logoicon a img {
        width: 50px;
    }

    #header .homelink {
        font-size: 18px;
    }

    ul.systemMenu {
        justify-content: start;
        align-items: center;
    }

    ul.systemMenu li.infor_user img {
        width: 40px;
        height: 40px;
    }

    .under-menu {
        flex-direction: column;
    }

    .company-kgi-wrap {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .list-unstyled {
        text-align: left;
    }
}

/*--------- Notification ------------*/
.notice-title {
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: var(--primary-color);
    /* Thay #0000FF bằng biến màu chính */
}

.notice-content {
    padding: 15px 0;
    line-height: 180%;
    color: var(--text-primary);
    /* Thêm màu chữ phù hợp với chủ đề */
}

.notice-confirm {
    color: var(--error-color);
    /* Thay #c82333 bằng biến màu lỗi */
    padding-top: 15px;
}

.notice-author {
    font-style: italic;
    font-weight: bold;
    padding-top: 20px;
    text-align: right;
    color: var(--text-secondary);
    /* Thêm màu chữ phù hợp với chủ đề */
}

/*--------- Login ------------*/
.login {
    padding: 20px 20px 20px;
    position: relative;
    margin: 0 auto;
    background: white;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.login:before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: -1;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

.login h1 {
    margin: -20px -20px 21px;
    line-height: 40px;
    font-size: 15px;
    font-weight: bold;
    color: #555;
    text-align: center;
    margin-top: 10px;
}

.login-container {
    background-image: url("<?php echo WEB_ROOT; ?>public/images/backgroundlogin.jpg");
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .login-container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
  } */
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: fit-content;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    position: relative;
    z-index: 2;
    padding: 20px;
}

.login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form-input {
    margin: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login .error-box {
    color: #c82333;
}

.login-form .alert-danger a {
    color: inherit;
}

.login input[type="text"],
.login input[type="password"] {
    width: 278px;
}

.login p.remember_me {
    float: left;
    line-height: 31px;
}

.login p.remember_me label {
    font-size: 12px;
    color: #777;
}

.login p.remember_me input {
    position: relative;
    bottom: 1px;
    margin-right: 4px;
    vertical-align: middle;
}

.login p.submit {
    text-align: right;
}

.login-help {
    margin: 20px 0;
    font-size: 11px;
    color: #387A3A;
    text-align: center;
    /*text-shadow: 0 1px #2a85a1;*/
}

.login-help a {
    /*color: #cce7fa;*/
    color: #AD180E;
    text-decoration: none;
}

.login input {
    font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
    font-size: 14px;
}

.login input[type=text],
.login input[type=password] {
    margin: 5px;
    padding: 0 10px;
    /*width: 200px;*/
    height: 34px;
    color: #404040;
    background: white;
    border: 1px solid;
    border-color: #c4c4c4 #d1d1d1 #d4d4d4;
    border-radius: 2px;
    outline: 5px solid #eff4f7;
    -moz-outline-radius: 3px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.login input[type=text]:focus,
.login input[type=password]:focus {
    border-color: #7dc9e2;
    outline-color: #dceefc;
    outline-offset: 0;
}

.login input[type=submit] {
    padding: 0 18px;
    height: 29px;
    font-size: 12px;
    font-weight: bold;
    color: #527881;
    text-shadow: 0 1px #e3f1f1;
    background: #cde5ef;
    border: 1px solid;
    border-color: #b4ccce #b3c0c8 #9eb9c2;
    border-radius: 16px;
    outline: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
    background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
    background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
    background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
    -webkit-box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.15);
}

.login input[type=submit]:active {
    background: #cde5ef;
    border-color: #9eb9c2 #b3c0c8 #b4ccce;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

/*--------- MainMenu ------------*/
.jqueryslidemenu {
    width: 100%;
}

.jqueryslidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.jqueryslidemenu ul li.item {
    list-style-type: none;
    margin: 0 2px 0 0;
    padding: 0;
    position: relative;
    padding: 0 13px;
    background: white;
    border: 1px solid rgba(39, 39, 42, 0.12);
    border-radius: 6px;
    margin-top: 4px;
}

.jqueryslidemenu ul .menu-item img {
    border-radius: 8px;
}

.jqueryslidemenu li a.TopMenuItem {
    height: 28px;
}

.jqueryslidemenu li a {
    color: #000000;
    display: block;
    font-weight: normal;
    outline: medium none;
    text-decoration: none;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.jqueryslidemenu .menu-item:hover {
    background-position: 0 -112px;
    background: rgba(39, 39, 42, 0.12);
}

.jqueryslidemenu li a .MenuText {
    background-position: 0 8px;
    background-repeat: no-repeat;
    color: #333333;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 28px;
    line-height: 28px;
    margin-left: 12px;
    padding-left: 10px;
}

.jqueryslidemenu .MenuImageIcon {
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 16px;
    width: 16px;
    left: 12px;
    position: absolute;
    top: 6px;
}

* html .jqueryslidemenu ul li a {
    display: inline-block;
}

.jqueryslidemenu ul li a:link,
.jqueryslidemenu ul li a:visited {
    color: #464646;
}

.jqueryslidemenu ul li ul {
    display: block;
    left: 0;
    position: absolute;
    visibility: hidden;
    z-index: 100;
    transition: opacity 0.2s ease-in-out;
    box-shadow: 0 4px 18px rgba(47, 43, 61, 0.16), 0 0 transparent, 0 0 transparent;
    border-radius: 8px;
    overflow: hidden;
    top: 29px !important;

}

.jqueryslidemenu ul li ul li a {
    padding: 6px 10px;
}

.jqueryslidemenu ul li ul li {
    background: none repeat scroll 0 0 #FFFFFF;
    width: 100%;
    margin: 0;
}

.jqueryslidemenu ul li ul li:first-child {
    padding-top: 5px;
}

.jqueryslidemenu ul li ul li:last-child {
    padding-bottom: 5px;
}

.jqueryslidemenu ul li ul li a {
    background-image: none;
    border-top-width: 0;
    font-weight: normal;
    margin: 0 5px;
}

.jqueryslidemenu ul li ul li a span {
    text-decoration: none;
}

.jqueryslidemenu ul li ul li:hover a {
    background: #dcdce1;
}

.downarrowclass {
    position: absolute;
    right: 7px;
    top: 12px;
}

.rightarrowclass {
    position: absolute;
    right: 5px;
    top: 18px;
}

#myslidemenu li li span {
    padding: 3px 0;
}

#myslidemenu li li strong,
#myslidemenu li li span {
    display: block;
    line-height: 1.2;
}

.jqueryslidemenu ul ul ul {
    top: 0;
    left: 100%;
}

.jqueryslidemenu ul li:hover>ul {
    visibility: visible;
    opacity: 1;
}

div.line-border-bottom {
    height: 5px;
    width: 100%;
    background-color: var(--primary-color);
    float: left;
    display: none;
}

/*------- Layout ----------*/
#content,
#center-content {
    clear: both;
    margin: 0;
    padding-top: 6px;
    /*border: #CCC solid 1px;
    border-radius: 3px; */
}

/*------- End Layout ----------*/

/*--------- User ------------*/
.user-wrapper {
    width: 100%;
    margin: 0 auto;
}

.userGroup {
    font-weight: bold;
    padding: 6px;
}

.userList {
    padding-bottom: 10px;
    display: block;
    overflow: hidden;
}

.user-account,
.btn-more-less {
    padding: 5px;
}

.location-content {
    width: 24%;
    padding: 5px 0;
    float: left;
}

.Required {
    color: #c82333;
}

.personal-avatar {
    width: 200px;
    float: left;
}

.avatar-suggestion {
    line-height: 20px;
    float: left;
}

.user-box-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 10px;
}

.user-content {
    line-height: 25px;
    display: flex;
}

.field-name {
    width: 95px;
    font-weight: bold;
}

.field-value {
    margin-left: 10px;
}

/* ------- System Admin --------*/
input.txtOrder {
    width: 50px
}

input.txtUsername {
    width: 100px;
}

/*----- Current path --------*/
.content-wrapper {}

.path {
    /* border: #DDDDDD solid 1px; */
    margin-bottom: 10px;
    border-radius: 6px;
}

.subMenuBox,
.toolboxButton,
.content-box,
.home-admin-wrapper {
    box-shadow: 0 4px 18px rgba(47, 43, 61, 0.16), 0 0 transparent, 0 0 transparent;
    background-color: #FFFFFF;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 12px;
}

.path {
    min-height: 26px;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}

.path button {
    border: none;
    font-size: 20px;
}

.path ul,
.path ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.path ul li {
    display: inline;
    height: 24px;
    display: flex;
    background: url("../layout/next.svg") no-repeat right;
}

.path ul li:last-child {
    background: none;
}

.path ul li a,
.path ul li span {
    color: var(--primary-color);
    display: block;
    font-weight: normal;
    margin-right: 10px;
    padding: 2px 10px 4px;
    text-decoration: none;
}

.path ul li span {
    color: #333
}

/*----- Sub menu list --------*/
.subMenuBox {
    clear: both;
    min-height: 25px;
    overflow: hidden;
}

ul.submenu {
    padding: 0 5px;
    float: right
}

ul.submenu li {
    list-style: none;
    float: left;
    margin: 6px 0;
    padding: 0;
}

ul.submenu li:last-child a,
ul.submenu li:last-child a:visited {
    border-right: unset;
}

ul.submenu li a,
ul.submenu li a:visited {
    border-right: 1px solid #CCCCCC;
    color: var(--primary-color);
    cursor: pointer;
    font-weight: bold;
    padding: 0 10px;
}

ul.submenu li a.active {
    color: #993300
}

/*--------- Toolbox -----------*/
.toolboxButton {
    display: flex;
    justify-content: space-between;
    /* Push elements apart */
    align-items: center;
    /* Align them vertically */
    flex-wrap: wrap;
    /* Allows elements to stack on smaller screens */
    gap: 10px;
    /* Adds space between items */
    padding: 10px;
}

.toolbar-table {
    text-align: right;
    /* Aligns buttons to the right */
}

.toolboxButton .header {
    flex: 1;
    color: #666666;
    display: flex;
    align-items: center;
    min-width: fit-content;
}

.toolboxButton .header img {
    vertical-align: middle;
    display: none;
}

.toolboxButton .header span {
    color: #666666;
}

.toolboxButton .toolbar-table {
    overflow-x: scroll;
    scrollbar-width: none;
}

.toolboxButton .toolbar-table::-webkit-scrollbar {
    width: 0;
    height: 0;
}

table.toolbar {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    display: inline;
}

table.toolbar tr {
    display: flex;
    flex-wrap: wrap;
}

table.toolbar td {
    color: #666666;
    /*max-width: 55px;*/
    padding: 1px 1px 1px 4px;
    text-align: center;
    vertical-align: top;
    margin-bottom: 2px;
    margin-top: 2px;
}

table.toolbar a {
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    color: var(--primary-color);
    cursor: pointer;
    display: block;
    /* float: left; */
    padding: 1px 5px;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 10px;
}

table.toolbar a:hover {
    opacity: 0.9;
    background-color: #e7e7e7;
}

table.toolbar span {
    /* display: block;
    float: none;
    height: 32px;
    width: 32px; */
    margin: 0 auto;
}

/*-- Toolbox button --*/
.icon-button,
.icon-button-16 {
    background-color: Transparent;
    background-position: left top;
    transition: all 0.8s ease 0s;
    border: 0 none;
    cursor: pointer;
    display: table;
    padding-right: 5px;

}

a:hover .icon-button,
.icon-button:hover {
    background-position: left top;
    transition: all var(--transition-xs) ease 0s;
}

.icon-disabled {
    background-position: left bottom;
}

.icon-button-16,
.icon-16-button {
    height: 16px;
    width: 16px;
    font-family: 'FontAwesome';
}


/* General button styling */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-family: 'FontAwesome';
}

.icon-button:hover {
    filter: brightness(1.2);
}

/* Base icon styles */
[class^="Icon-"] {
    font-family: "FontAwesome" !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Size-specific base styles */
.Icon-16 {
    font-size: 16px;
    width: 24px;
    height: 24px;
}

.Icon-32 {
    font-size: 24px;
    width: 32px;
    height: 32px;
}

.Icon-48,
.icon-48-button {
    font-size: 32px;
    width: 48px;
    height: 48px;
    font-family: "FontAwesome" !important;
}

/* Specific icon definitions with content and colors */
.Icon-32-Add::before {
    content: "\f067";
    color: var(--primary-color);
}

/* Green - Creation */
.Icon-32-Add:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Apply::before {
    content: "\f00c";
    color: #17a2b8;
}

/* Cyan - Action */
.Icon-32-Apply:hover {
    color: #138496;
}

.Icon-32-Approve::before {
    content: "\f164";
    color: var(--primary-color);
}

/* Green - Positive */
.Icon-32-Approve:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Archive::before {
    content: "\f187";
    color: #6c757d;
}

/* Gray - Storage */
.Icon-32-Archive:hover {
    color: #5a6268;
}

.Icon-32-Back::before {
    content: "\f060";
    color: #007bff;
}

/* Blue - Navigation */
.Icon-32-Back:hover {
    color: #0069d9;
}

.Icon-32-Cache::before {
    content: "\f013";
    color: #6c757d;
}

/* Gray - System */
.Icon-32-Cache:hover {
    color: #5a6268;
}

.Icon-32-Calendar::before {
    content: "\f073";
    color: #6610f2;
}

/* Purple - Time */
.Icon-32-Calendar:hover {
    color: #520dc2;
}

.Icon-32-Cancel::before {
    content: "\f00d";
    color: #dc3545;
}

/* Red - Negative */
.Icon-32-Cancel:hover {
    color: #c82333;
}

.Icon-32-Copy::before {
    content: "\f0c5";
    color: #17a2b8;
}

/* Cyan - Action */
.Icon-32-Copy:hover {
    color: #138496;
}

.Icon-32-Config::before {
    content: "\f013";
    color: #6c757d;
}

/* Gray - System */
.Icon-32-Config:hover {
    color: #5a6268;
}

.Icon-32-CheckCircle::before {
    content: "\f058";
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-CheckCircle:hover {
    color: #25853a;
}

.Icon-32-PlusCircle::before {
    content: "\f055";
    color: #217c35;
}

.Icon-32-PlusCircle:hover::before {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Confirm::before {
    content: "\f058";
    color: var(--primary-color);
}

/* Green - Positive */
.Icon-32-Confirm:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Confirm-Classify::before {
    content: "\f058";
    color: #25853a;
}

/* Green - Positive */
.Icon-32-Confirm-Classify:hover {
    color: #217c35;
    filter: brightness(0.9);
}

.Icon-32-Csv::before {
    content: "\f15c";
    color: #17a2b8;
}

/* Cyan - File */
.Icon-32-Csv:hover {
    color: #138496;
}

.Icon-32-Custom::before {
    content: "\f0c4";
    color: #fd7e14;
}

/* Orange - Modify */
.Icon-32-Custom:hover {
    color: #e06c00;
}

.Icon-32-Delete::before {
    content: "\f014";
    color: #dc3545;
}

/* Red - Negative */
.Icon-32-Delete:hover {
    color: #c82333;
}

.Icon-32-Deposit::before {
    content: "\f0d6";
    color: var(--primary-color);
}

/* Green - Money */
.Icon-32-Deposit:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Dispute::before {
    content: "\f086";
    color: #dc3545;
}

/* Red - Conflict */
.Icon-32-Dispute:hover {
    color: #c82333;
}

.Icon-32-Edit::before {
    content: "\f044";
    color: #fd7e14;
}

/* Orange - Modify */
.Icon-32-Edit:hover {
    color: #e06c00;
}

.Icon-32-Excel::before {
    content: "\f1c3";
    color: var(--primary-color);
}

/* Green - File */
.Icon-32-Excel:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Excel-Fast::before {
    content: "\f1c3";
    color: #217346;
}

.Icon-32-Excel-Fast:hover {
    filter: brightness(0.9);
}

.Icon-32-Finish::before {
    content: "\f046";
    color: var(--primary-color);
}

/* Green - Completion */
.Icon-32-Finish:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Instock::before {
    content: "\f150";
    color: var(--primary-color);
}

/* Green - Completion */
.Icon-32-Instock:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}
 
.Icon-32-Forward::before {
    content: "\f061";
    color: #007bff;
}

/* Blue - Navigation */
.Icon-32-Forward:hover {
    color: #0069d9;
}

.Icon-32-Invoice::before {
    content: "\f0f6";
    color: #17a2b8;
}

/* Cyan - Document */
.Icon-32-Invoice:hover {
    color: #138496;
}

.Icon-32-Help::before {
    content: "\f059";
    color: #6610f2;
}

/* Purple - Info */
.Icon-32-Help:hover {
    color: #520dc2;
}

.Icon-32-Headline::before {
    content: "\f02b";
    color: #fd7e14;
}

/* Orange - Content */
.Icon-32-Headline:hover {
    color: #e06c00;
}

.Icon-32-List::before {
    content: "\f03a";
    color: #007bff;
}

/* Blue - Display */
.Icon-32-List:hover {
    color: #0069d9;
}

.Icon-32-Lock::before {
    content: "\f023";
    color: #dc3545;
}

/* Red - Security */
.Icon-32-Lock:hover {
    color: #c82333;
}

.Icon-32-Merge::before {
    content: "\f0c9";
    color: #fd7e14;
}

/* Orange - Modify */
.Icon-32-Merge:hover {
    color: #e06c00;
}

.Icon-32-Move::before {
    content: "\f047";
    color: #007bff;
}

/* Blue - Navigation */
.Icon-32-Move:hover {
    color: #0069d9;
}

.Icon-32-Optimize::before {
    content: "\f085";
    color: #6c757d;
}

/* Gray - System */
.Icon-32-Optimize:hover {
    color: #5a6268;
}

.Icon-32-Paid::before {
    content: "\f154";
    color: var(--primary-color);
}

.Icon-32-Upload::before {
    content: "\f093";
    color: #007bff;
}

.Icon-32-Upload:hover {
    color: #0056b3;
    /* Darker blue on hover */
}

.Icon-32-Paid:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Pdf::before {
    content: "\f1c1";
    color: #dc3545;
}

/* Red - File */
.Icon-32-Pdf:hover {
    color: #c82333;
}

.Icon-32-Pending::before {
    content: "\f017";
    color: #fd7e14;
}

/* Orange - Status */
.Icon-32-Pending:hover {
    color: #e06c00;
}

.Icon-32-Read::before {
    content: "\f06e";
    color: #007bff;
}

/* Blue - View */
.Icon-32-Read:hover {
    color: #0069d9;
}

.Icon-32-Restore::before {
    content: "\f0e2";
    color: #17a2b8;
}

/* Cyan - Action */
.Icon-32-Restore:hover {
    color: #138496;
}

.Icon-32-Print::before {
    content: "\f02f";
    color: #6c757d;
}

/* Gray - Output */
.Icon-32-Print:hover {
    color: #5a6268;
}

.Icon-32-Payment::before {
    content: "\f0d6";
    color: var(--primary-color);
}

/* Green - Money */
.Icon-32-Payment:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Process::before {
    content: "\f085";
    color: #6610f2;
}

/* Purple - System */
.Icon-32-Process:hover {
    color: #520dc2;
}

.Icon-32-Publish::before {
    content: "\f019";
    color: var(--primary-color);
}

/* Green - Action */
.Icon-32-Publish:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Publish-shipment::before {
    content: "\f019";
    color: #6c757d;
}

/* Green - Action */
.Icon-32-Publish-shipment:hover {
    color: #6c757dd5;
    filter: brightness(0.9);
}

.Icon-32-Publish-reserved::before {
    content: "\f019";
    color: #443527;
}

/* Green - Action */
.Icon-32-Publish-reserved:hover {
    color: #443527ce;
    filter: brightness(0.9);
}

.Icon-32-QR::before {
    content: "\f029";
    color: #007bff;
}

/* Blue - Tech */
.Icon-32-QR:hover {
    color: #0069d9;
}

.Icon-32-Racking::before {
    content: "\f0c8";
    color: #6c757d;
}

/* Gray - Structure */
.Icon-32-Racking:hover {
    color: #5a6268;
}

.Icon-32-Return::before {
    content: "\f112";
    color: #dc3545;
}

/* Red - Action */
.Icon-32-Return:hover {
    color: #c82333;
}

.Icon-32-Revert::before {
    content: "\f0e2";
    color: #fd7e14;
}

/* Orange - Action */
.Icon-32-Revert:hover {
    color: #e06c00;
}

.Icon-32-Review::before {
    content: "\f06e";
    color: #007bff;
}

/* Blue - View */
.Icon-32-Review:hover {
    color: #0069d9;
}

.Icon-32-Save::before {
    content: "\f0c7";
    color: var(--primary-color);
}

/* Green - Storage */
.Icon-32-Save:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-SaveAndAdd::before {
    content: "\f0fe";
    color: var(--primary-color);
}

/* Green - Creation */
.Icon-32-SaveAndAdd:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-Search::before {
    content: "\f002";
    color: #6610f2;
}

/* Purple - Find */
.Icon-32-Search:hover {
    color: #520dc2;
}

.Icon-32-Send::before {
    content: "\f1d8";
    color: #007bff;
}

/* Blue - Communication */
.Icon-32-Send:hover {
    color: #0069d9;
}

.Icon-32-Statistic::before {
    content: "\f080";
    color: #17a2b8;
}

/* Cyan - Data */
.Icon-32-Statistic:hover {
    color: #138496;
}

.Icon-32-Transfer::before {
    content: "\f0ec";
    color: #fd7e14;
}

/* green - Movement */
.Icon-32-Transfer-Acc:hover {
    color: #217346;
}

.Icon-32-Transfer-Acc::before {
    content: "\f0ec";
    color: #217346d7;
}

.Icon-32-Transfer-Acc:hover {
    color: #5c1818;
}

.Icon-32-Transfer-Acc::before {
    content: "\f0ec";
    color: #5c1818de;
}

.Icon-32-Transfer-Customer:hover {
    color: #3b7321;
}

.Icon-32-Transfer-Customer::before {
    content: "\f0ec";
    color: #3b7321ce;
}

.Icon-32-Transfer-Withdraw:hover {
    color: #73214a;
}

.Icon-32-Transfer-Withdraw::before {
    content: "\f0ec";
    color: #73214ad0;
}

.Icon-32-Unlock::before {
    content: "\f13e";
    color: var(--primary-color);
}

/* Green - Security */
.Icon-32-Unlock:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-32-UnReview::before {
    content: "\f070";
    color: #dc3545;
}

/* Red - View */
.Icon-32-UnReview:hover {
    color: #c82333;
}

.Icon-32-UnArchive::before {
    content: "\f187";
    color: #6c757d;
}

/* Gray - Storage */
.Icon-32-UnArchive:hover {
    color: #5a6268;
}

.Icon-32-UnPublish::before {
    content: "\f093";
    color: #dc3545;
}

/* Red - Action */
.Icon-32-UnPublish:hover {
    color: #c82333;
}

.Icon-32-Undo::before {
    content: "\f0e2";
    color: #fd7e14;
}

/* Orange - Action */
.Icon-32-Undo:hover {
    color: #e06c00;
}

.Icon-32-Bolt::before {
    content: "\f0e7";
    color: #ffc107;
}

/* Yellow - Lightning */
.Icon-32-Bolt:hover {
    color: #e0a800;
}

.Icon-32-Update::before {
    content: "\f00c";
    color: #e0a800;
}
/* Yellow - Lightning */
.Icon-32-Update:hover {
    color: #e0a800;
}

.Icon-32-Request-New::before {
    content: "\f067";
    color: #e0a800;
}
/* Yellow - Lightning */
.Icon-32-Request-New:hover {
    color: #e0a800;
}

/* Yellow - Lightning */
.Icon-32-Add-Excel::before {
    content: "\f067";
    color: #217346;
}
.Icon-32-Add-Excel:hover {
    color: #217346;
}


/* 16px icons */
.Icon-16-Add::before {
    content: "\f067";
    color: var(--primary-color);
}

.Icon-16-Add:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-16-Cancel::before {
    content: "\f00d";
    color: #dc3545;
}

.Icon-16-Cancel:hover {
    color: #c82333;
}

.Icon-16-Collapse::before {
    content: "\f068";
    color: #fd7e14;
}

.Icon-16-Collapse:hover {
    color: #e06c00;
}

.Icon-16-Edit::before {
    content: "\f044";
    color: #fd7e14;
}

.Icon-16-Edit:hover {
    color: #e06c00;
}

.Icon-16-View::before {
    content: "\f06e";
    color: #007bff;
}

.Icon-16-View:hover {
    color: #0069d9;
}

.Icon-16-Expand::before {
    content: "\f065";
    color: var(--primary-color);
}

.Icon-16-Expand:hover {
    color: var(--primary-color);
    filter: brightness(0.9);
}

.Icon-16-Delete::before {
    content: "\f014";
    color: #dc3545;
}

.Icon-16-Delete:hover {
    color: #c82333;
}

.Icon-16-Calendar::before {
    content: "\f073";
    color: #6610f2;
}

.Icon-16-Calendar:hover {
    color: #520dc2;
}

.Icon-16-List::before {
    content: "\f03a";
    color: #007bff;
}

.Icon-16-List:hover {
    color: #0069d9;
}

.Icon-16-Restore::before {
    content: "\f0e2";
    color: #17a2b8;
}

.Icon-16-Restore:hover {
    color: #138496;
}

/* 48px icons */
/* Previously added classes remain the same */
/* Will continue adding remaining classes below */
.Icon-48-Payment {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2328a745"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>')
}

.Icon-48-Payment:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23218838"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>')
}

.Icon-48-ProductAdd {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2328a745"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>')
}

.Icon-48-ProductAdd:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23218838"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>')
}

.Icon-48-ProductList {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%233498db" viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>');
}

.Icon-48-Content {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fd7e14"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>')
}

.Icon-48-Content:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e06c00"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>')
}

.Icon-48-List {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%239b59b6" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
}

.Icon-48-List:hover {}

.Icon-48-Category {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236610f2"><path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 7h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z"/></svg>')
}

.Icon-48-Category:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23520dc2"><path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 7h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z"/></svg>')
}

.Icon-48-Config {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236c757d"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.64-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>')
}

.Icon-48-Config:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%235a6268"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.64-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg>')
}

.Icon-48-Interface {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2317a2b8"><path d="M20 3H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v2h8v-2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H4V5h16v12z"/></svg>')
}

.Icon-48-Interface:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23138496"><path d="M20 3H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v2h8v-2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H4V5h16v12z"/></svg>')
}

.Icon-48-OrderList {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23007bff"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>')
}

.Icon-48-OrderList:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230069d9"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>')
}

.Icon-48-StockIn {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%232ecc71" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>');
}

.Icon-48-StockOut {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23e74c3c" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>');
}


.Icon-48-Customer {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23f39c12" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

.Icon-48-Calendar {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%231abc9c" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>');
}

.Icon-48-Account {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2316a085" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>');
}

.Icon-48-Grant {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23c0392b" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>');
}

.Icon-48-User {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%237f8c8d" viewBox="0 0 24 24"><path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

.Icon-48-Dispute {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dc3545"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>')
}

.Icon-48-Feedback {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fd7e14"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"/></svg>')
}


/*-- End Toolbox button --*/
/*----------------------------*/

/*---- Form search ----*/

.content-box #advance-search,
.content-box #auto-fill-box,
.content-box #email-box {
    display: none
}

#email-box input.txtMail {
    width: 85%;
}

#email-box span#email_cc,
#email-box span#email_bcc {
    margin-left: 5px;
    cursor: pointer;
}

#email-box span#ccbcc:hover {
    color: #005FB1
}

#email-box tr#email_cc,
#email-box tr#email_bcc {
    display: none;
    margin: 3px 0
}

#advance-search {
    width: 80%;
    padding: 10px;
    margin: 0 auto;
}

#advance-search .advance-search-title {
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000000;
}

.advance-search form#frmAdvanceSearch tbody .key {
    width: fit-content;
}

.advance-search form#frmAdvanceSearch tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    align-items: end;
    margin-bottom: 5px;
}

.advance-search form#frmAdvanceSearch tr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: start;
    flex: 0 1 auto;
}

.advance-search form#frmAdvanceSearch td {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    background: none;
    padding-left: 0;
    border: 0;
    flex: 0 1 auto;
}

.advance-search form#frmAdvanceSearch td input[name="btnSearch"] {
    margin-right: 0;
}

.proposer-wrapper {
    position: relative;
}

#proposer-box,
#purchaser-box {
    position: relative;
}

.userlist-container {
    width: 180px;
    height: 160px;
    overflow-y: scroll;
    top: 3px;
    left: 0;
    position: absolute;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    z-index: 1;
    box-shadow: var(--shadow-color);
}

.btnclose {
    border: 1px solid var(--border-color);
    width: 20px;
    height: 20px;
    border-radius: 15px;
    text-align: center;
    left: 164px;
    position: absolute;
    font-weight: bold;
    line-height: 20px;
    background-color: #fff;
    z-index: 2;
}

.ui-widget-overlay {
    background: #000;
    opacity: 0.3;
    filter: Alpha(Opacity=80)
}

/*---- End Form search ----*/

/*--- Content detail ---*/
table.admintable {
    /*background-color: #FFFFFF;*/
    border-spacing: 3px;
}

table.admintable td.key,
table.admintable td.paramlist_key {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    color: #4a5568;
    font-weight: 500;
    width: 250px;
    padding: 4px 12px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease;
}

table.admintable td.key:hover,
table.admintable td.paramlist_key:hover {
    background-color: #edf2f7;
}

table.admintable td.sub-head {
    background: none repeat scroll 0 0 #EFEFEF;
    border-bottom: 1px solid #777777;
    color: #444444;
    font-weight: bold;
    height: 25px;
    padding: 2px 5px;
    text-align: left;
}

table.admintable td {
    padding: 2px 5px;
}

table.search td:first-child {
    min-width: 150px;
}

.content-list table td img {
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #bdbdbd;
}

table.admintable td div#other_image_list div {
    line-height: 32px;
    height: 32px;
}

table.admintable td select.cbList {
    width: 200px;
}

table.admintable td textarea {
    width: 500px;
    height: 150px;
    background: none;
}

.content-detail {
    padding: 5px;
    position: relative;
}

.diff-notice-box {
    font-weight: bold;
    color: #343434;
}

.diff-notice-box a:before {
    content: ' ';
    background: url("images/arrow-blink.gif") no-repeat 50% 50%;
    background-size: cover;
    padding-left: 20px;
}

.diff-notice-box a,
.diff-notice-box a:visited {
    color: #c82333;
}

.diff-notice-box a:hover {
    color: #0000FF;
    text-decoration: none;
    /*transition: ease-in all var(--transition-xs);*/
    transition: all 0.8s ease 0s;
}

/*---- End content detail ----*/

/*--- Content list ---*/
.content-box .content-list {
    width: 100%;
    overflow: auto;
}

tbody#list {
    max-height: 700px;
    width: 100%;
    overflow: scroll;
}

.content-box .content-block {
    background: #FFFFFF url("images/bg-block.png") no-repeat 50% 50%;
}

.content-box .content-normal {}

.content-box .select-data-type {
    padding: 10px;
}

.content-box .select-data-type h2 {
    color: #444444;
    display: block
}

.content-box .select-data-type a {
    padding: 10px 0;
    margin: 0 15px;
    display: inline-block
}

.content-box .content-list-empty {
    padding: 25px 60px;
    font-size: 18px;
    font-weight: bold;
    color: #666666;
}

.content-box .content-list img.imagethumb {
    width: 130px;
}

.content-box .content-list .otherImageList {
    padding: 10px;
    float: left;
    text-align: center
}

.content-box .content-list .otherImageList img {
    display: block
}

.sub-title {
    font-size: 90%;
    font-style: italic;
    font-weight: normal;
}

.content-box .chart-box {
    padding: 25px 50px 0;
}

.content-box .content-list .feedback-wrapper {
    padding: 10px;
    display: block;
}

.feedback-wrapper .thread-title {
    color: #666666;
    padding: 1em 0px;
    font-size: 20px;
    font-weight: bold;
}

.feedback-wrapper .thread-info {
    position: relative;
    padding-bottom: 15px;
    display: flex;
    justify-content: flex-start;
}

.feedback-wrapper .user-avatar {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin-right: 15px;
    background-color: #e0e0e0;
    border: 1px solid var(--primary-color);
}

.feedback-wrapper .user-info {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    background: none;
}

.feedback-wrapper .user-name {
    font-size: 1rem;
    text-rendering: optimizelegibility;
    color: #0d6cb6;
    font-weight: 600;
    margin-bottom: 3px;
}

.feedback-wrapper .date-comment-view {
    color: #7a7a7a;
    font-size: 0.8rem;
    flex-flow: wrap;
    display: flex;
}

.feedback-wrapper .feedback-date {
    margin: 0;
    padding: 0;
}

.feedback-wrapper .feedback-comment:before {
    content: '•';
    margin-right: 5px;
    padding-left: 0px;
}

.feedback-wrapper .feedback-comment {
    margin: 0 5px;
}

.feedback-wrapper .feedback-view {
    margin: 0 5px;
}

.feedback-wrapper .feedback-content {
    font-size: 15px;
    line-height: 1.3;
}

.feedback-wrapper .feedback-file {
    margin-top: 24px;
    position: relative;
    margin: 10px 0;
}

.feedback-wrapper .feedback-receiver {
    margin-top: 24px;
    position: relative;
    margin: 10px 0;
}

.feedback-wrapper .feddback-reply-list {
    position: relative;
    padding: 1rem 0 1rem 2rem;
    border-radius: 13px;
}

.feddback-reply-list .reply-container {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.reply-container .reply-wrapper {
    padding: 5px 15px 0 0;
    overflow: hidden;
}

.reply-container .reply-button {
    display: flex;
    justify-content: space-between;
    width: 80px;
}

.reply-button .edit-reply,
.reply-button .delete-reply,
.reply-button .save-reply {
    padding: 4px 8px;
    border: #585858 solid 1px;
    border-radius: 5px;
}

.reply-button .edit-reply:hover,
.reply-button .delete-reply:hover,
.reply-button .save-reply:hover {
    background: #0d6cb6;
    text-decoration: none;
    color: #fff;
}

.reply-container .reply-control {
    display: flex;
}

.reply-container .reply-user {
    font-weight: 600;
    font-size: 13px;
    color: #0d6cb6;
}

.reply-container .reply-time {
    font-weight: normal;
}

.reply-container .reply-content {
    position: relative;
    margin-top: 1rem;
    font-size: 15px;
}

.feedback-wrapper .thread-action {
    padding: 1rem 0 1rem 2rem;
    margin: 10px 0;
    display: flex;
}

.feedback-wrapper .post-reply {
    width: 100%;
    border-radius: 8px;
    padding: 13px 15px;
    justify-content: center;
    position: relative;
    background-color: #eff1f3;
}

.feedback-wrapper .edit-reply-input {
    resize: none;
    width: 100%;
    font-size: 15px;
    display: block;
    line-height: 1.4;
    min-height: 100px;
}

.feedback-wrapper .post-reply-author,
.feedback-wrapper .post-reply-content {
    resize: none;
    width: 100%;
    font-size: 15px;
    flex: 1;
    box-sizing: border-box;
    border-radius: 0;
    background: none;
    border: none;
    outline: none;
    outline-width: medium;
    box-shadow: none;
    display: block;
    line-height: 1.4;
    overflow: hidden;
}

.feedback-wrapper #add-recipients {
    padding: 10px 4px;
}

.feedback-wrapper .title-label {
    padding: 15px 4px 0;
}

.feedback-wrapper .post-reply-author {
    min-height: 30px;
    padding: 4px;
}

.feedback-wrapper .post-reply-content {
    min-height: 100px;
}

.feedback-wrapper .post-reply-button {
    display: flex;
    right: 30px;
    bottom: 25px;
    position: absolute;
    padding: 5px 20px;
    border-radius: 3px;
    background: #0d6cb6;
    color: #fff;
}

.content-box .content-list .show-less {
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    max-width: 85%;
    display: inline-block;
}

.content-box .content-list .list-user {
    margin-right: 5px;
}

.sub-header {
    color: #666666;
    padding: 15px 0;
    font-weight: bold;
    background-color: #f0f0f0;
    font-size: 15px;
}

table.adminlist {
    border-spacing: 0;
    border-collapse: collapse;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

table.adminlist thead {
    position: relative;
}

table.adminlist thead th {
    position: relative;
}

table.adminlist th::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -1px;
    bottom: -1px;
    left: 0;
    border-bottom: 1px solid #999999;
    border-top: 2px solid #E7E7E7;
    border-right: 1px solid #E7E7E7;
    pointer-events: none;
}

table.adminlist thead::before {
    content: "";
    position: absolute;
    left: 0;
    border-left: 1px solid #E7E7E7;
    height: 100%;
}

table.adminlist tbody tr td:first-child:not([colspan]) {
    text-align: center;
    min-width: fit-content;
    white-space: nowrap;
}


table.adminlist th {
    background: none repeat scroll 0 0 #fafafa;
    border-color: #E7E7E7 #E7E7E7 var(--border-color);
    border-style: solid;
    border-width: 1px;
    color: #666666;
    text-align: center;
    font-weight: bold;
    padding: 4px;
}

table.adminlist th a {
    color: #666666;
}

table.adminlist tr.single-row th {
    border-bottom: none
}

table.adminlist th.col_20 {
    width: 20px;
    min-width: 20px;
}

table.adminlist th.col_25 {
    width: 25px;
    min-width: 25px;
}

table.adminlist th.col_40 {
    width: 40px;
    min-width: 40px;
}

table.adminlist th.col_50 {
    width: 50px;
    min-width: 50px;
}

table.adminlist th.col_60 {
    width: 80px;
    min-width: 80px;
}

table.adminlist th.col_70 {
    width: 90px;
    min-width: 90px;
}

table.adminlist th.col_80 {
    width: 80px;
    min-width: 80px;
}

table.adminlist th.col_90 {
    width: 90px;
    min-width: 90px;
}

table.adminlist th.col_100 {
    width: 100px;
    min-width: 100px;
}

table.adminlist th.col_120 {
    width: 120px;
    min-width: 120px;
}

table.adminlist th.col_150 {
    width: 150px;
    min-width: 150px;
}

table.adminlist th.col_180 {
    width: 180px;
    min-width: 180px;
}

table.adminlist th.col_200 {
    width: 200px;
    min-width: 200px;
}

table.adminlist th.col_250 {
    width: 250px;
    min-width: 250px;
}

table.adminlist th.col_300 {
    width: 300px;
    min-width: 300px;
}

table.adminlist th.col_400 {
    width: 400px;
    min-width: 400px;
}

table.adminlist th.col_300 {
    width: 300px;
}

table.adminlist th.col_500 {
    width: 500px;
    min-width: 500px;
}

table.adminlist tbody tr.head td {
    background: #D8D8D8;
    font-weight: bold
}

table.adminlist tbody tr.head td a {
    color: inherit
}

table.adminlist tbody tr.head td a:hover {
    color: var(--primary-color);
}

table.adminlist tbody tr.empty td {
    text-align: center;
}

table.adminlist tbody tr td {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.07);
    border-style: solid;
    border-width: 0 1px 1px;
    height: 25px;
}

.action-button a {
    display: flex;
    justify-content: center;
}

table.adminlist tbody tr td ol,
table.adminlist tbody tr td li {
    list-style-position: inside;
}

table.adminlist tr.row0 td {
    background-color: #ffffff;
    border-bottom: 1px solid #00000012;
    color: #495057;
}

table.adminlist tr.row1 td {
    background-color: #f8f9fa;
    border-bottom: 1px solid #00000012;
    color: #495057;
}

table.adminlist tbody tr:hover td {
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
}

table.adminlist tbody tr:last-child td {
    border-bottom: none;
}

table.adminlist tbody tr.m-row td {
    background-color: #FFDAA5;
    /* Màu cam nhạt dịu mắt hơn */
    color: #8B4500;
    /* Màu cam đậm giúp dễ đọc */
    font-weight: 500;
    transition: background var(--transition-xs) ease-in-out;
}

table.adminlist tbody tr.m-row:hover td {
    background-color: #FFC678;
    /* Màu sáng hơn khi hover */
}

table.adminlist tbody tr.row0 td a.list-button:first-child:before,
table.adminlist tbody tr.row1 td a.list-button:first-child:before {
    content: '';
}

table.adminlist tbody tr:hover td,
table.adminlist tbody tr.row0:hover td,
table.adminlist tbody tr.row1:hover td,
table.adminlist tbody tr.row0:hover td a:not(.btn),
table.adminlist tbody tr.row1:hover td a:not(.btn) {
    color: #444;
    /* Màu chữ đậm hơn để tăng độ tương phản */
    transition: background var(--transition-xs) ease-in-out, color var(--transition-xs) ease-in-out;
}

/* table.adminlist tbody tr td table tr:hover td,
table.adminlist tbody tr td table tr:hover td {
    background-color: #FFF;
} */


table.adminlist tbody tr td span.qty-available {
    font-size: 10px;
}

table.adminlist tbody tr td span.ref {
    display: none;
}

table.adminlist tr td.col_left {
    text-align: left!important;
}

table.adminlist tr td.col_left-important {
    text-align: left!important;
}

table.adminlist tr td.col_center {
    text-align: center!important;
}

table.adminlist tr td.col_right {
    text-align: right!important;
}

table.adminlist tr td.pro-price {
    text-align: right;
    color: #c82333;
}

table.adminlist tr td.pro-qty {
    text-align: right;
    color: #c82333;
}

table.adminlist td {
    padding: 6px 4px;
}

table.adminlist td[width="20"] {
    width: 26px;
}

table.adminlist tr td textarea {
    height: 60px;
    width: unset;
    max-width: 100%;
}

table.adminlist tr td.col_image {
    width: 100px;
}

table.adminlist tr td.col-finished {
    background: #4CAF50 !important;
    /* Xanh lá đậm vừa phải */
    color: #f9f9f9;
    /* Trắng xám để dễ nhìn hơn */
    font-weight: 600;
}

table.adminlist tr td.col-processing {
    background: #d32f2f !important;
    /* Đỏ đậm hơn */
    color: #f9f9f9;
    /* Trắng xám */
    font-weight: 600;
}

table.adminlist tr td.col-instock {
    background: #388E3C !important;
    /* Xanh lá đậm */
    color: #f9f9f9;
    font-weight: 600;
}


table.adminlist tr td.col-approved {
    background: #f4d03f !important;
    /* Vàng nhạt, dịu mắt hơn */
    color: #333;
    /* Màu chữ tối hơn giúp dễ đọc */
    font-weight: 500;
}

table.adminlist tr td.col-finished a {
    color: black;
}

table.adminlist tr td.col-processing a {
    color: white;
}

table.adminlist tr:hover td.col-processing,
table.adminlist tr:hover td.col-finished {
    background: #f8f9fa !important;
    /* Màu xám nhạt dịu mắt hơn */
    color: #444 !important;
    /* Màu chữ đậm hơn giúp dễ đọc */
    transition: background var(--transition-xs) ease-in-out, color var(--transition-xs) ease-in-out;
}

table.adminlist td.amount,
table.adminlist td.subtotal {
    font-weight: bold;
}

table.adminlist td img.thumblist {
    width: 30px;
}

table.adminlist td input[type="text"],
table.adminlist td input[type="number"] {
    min-width: 25px;
    width: 100%;
}

table.adminlist td input.TextInputSmall {
    width: 50%;
}

table.adminlist td input.TinyText {
    width: 50%;
}

table.adminlist td select {
    width: 100%;
}

table.adminlist td .current-price {
    text-decoration: line-through
}

table.adminlist tr.rowhide,
table.adminlist tr.add-item td {
    display: none
}

table.adminlist tfoot tr td {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.07);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    height: 25px;
}

table.adminlist tfoot tr td#subtotal_billing,
table.adminlist tfoot tr td#subtotal_real,
table.adminlist tfoot tr td#subtotal_invoice {
    font-size: 120%;
    font-weight: bold
}

table.adminlist tfoot tr td#total_payment_billing,
table.adminlist tfoot tr td#total_payment_real {
    font-size: 130%;
    font-weight: bold;
    color: #c82333;
}

/* Borrow row styling */
table.adminlist tbody tr.borrow td {
    background-color: var(--bg-danger-light);
    /* Màu đỏ nhạt nhẹ nhàng hơn */
    color: #721c24;
    /* Màu đỏ đậm giúp dễ đọc hơn */
    font-weight: 500;
    transition: background var(--transition-xs) ease-in-out, color var(--transition-xs) ease-in-out;
}

table.adminlist tbody tr.borrow:hover td {
    background-color: #f5c6cb;
    /* Màu sáng hơn khi hover */
}

table.adminlist tbody tr.borrow td a {
    color: white;
}

/* Returned row styling */
table.adminlist tbody tr.returned td {
    background-color: #d1f2eb;
    /* Màu xanh nhạt nhẹ nhàng hơn */
    color: #0c6157;
    /* Màu xanh đậm giúp dễ đọc */
    font-weight: 500;
    border-radius: 5px;
    padding: 8px;
    transition: background var(--transition-xs) ease-in-out, color var(--transition-xs) ease-in-out;
}

table.adminlist tbody tr.returned:hover td {
    background-color: #b2dfdb;
    /* Màu sáng hơn khi hover */
}

table.adminlist tbody tr.returned td a {
    color: white;
}

table.product-list .procat {
    position: relative;
}

table.product-list .popcat {
    top: 20px;
    position: absolute;
    z-index: 10;
    display: block;
}

table.product-list ul {
    background: #ffffff;
    list-style: none;
    width: 250px;
    text-align: left;
}

table.product-list li {
    padding: 5px 0;
    cursor: default;
}

table.product-list li:hover {
    background: #3399ff;
    color: #ffffff;
}

table.sub-table {
    border: none;
}

table.sub-table tr td {
    border-style: none !important;
    border-width: 0;
}

.headertext,
.headertext:link,
.headertext:hover,
.headertext:visited {
    font-weight: bold;
}

.ordered-bound {
    position: relative;
}

.ordered-bound .ordered-list {
    top: 20px;
    box-shadow: 3px 3px 5px #888888;
    left: 269px;
    position: absolute;
    border: 1px solid #CCC;
    cursor: move;
}

.ordered-bound .ordered-list .close {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 22px;
    height: 16px;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 16px;
}

.ordered-bound .ordered-list .close a {
    display: block;
    text-decoration: none;
    line-height: 16px;
}

.ordered-bound .ordered-list .close a img {
    display: block;
    width: 16px;
    height: 16px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.stockout-content {
    display: block;
    padding: 10px 0;
}

.txtDateTime,
.local-supplier {
    display: block;
    padding-top: 5px;
}

input.hasDatepicker {
    padding-left: 4px !important;
    padding-right: 2px !important;
    width: 75px !important;
}

.report-content {
    line-height: 20px;
}

.survey-content {
    line-height: 25px;
    font-size: 15px;
    padding-bottom: 10px !important;
}

/*---- End content list -----*/

/*--- Form Element style ---*/
input[type="submit"] {
    cursor: pointer;
    font-family: Tahoma;
    font-size: 11px;
    padding-left: 5px;
    padding-right: 5px;
}

input[type="text"],
input[type="password"],
input[type="number"] {
    border: 1px solid #C0C0C0;
    color: #333333;
    font-size: 12px;
    padding: 2px;
}

input[type="Checkbox"],
input[type="radio"] {
    margin-left: 5px;
    margin-right: 5px;
}

.FormButton,
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    font-size: 12px;
    line-height: 16px;
    padding: 3px 5px;
}

#btnRemoveFilter,
#btnFind,
.Button {
    height: 28px;
    min-width: 55px;
    margin-top: 10px;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.FormButton:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
button:disabled {
    color: #AAAAAA;
    cursor: not-allowed;
}

textarea {
    border: 1px solid #C0C0C0;
    padding: 4px;
    resize: none;
    font-family: inherit;
    font-size: inherit;
}

select {
    border: 1px solid #C0C0C0;
    font-family: Tahoma;
    font-size: 11px;
    padding: 2px;
}

select.cbStatYear {
    position: absolute;
    top: 5px;
    right: 35px;
}

textarea#introtext {
    width: 50%;
    height: 150px;
    padding: 5px;
}

.TextInput {
    width: 350px;
}

.SelectInput {
    width: 356px;
}

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

input.highlight,
select.highlight,
textarea.highlight {
    border-color: #ef0fff;
}

/*--- End Form Element style ---*/

#footer {
    text-align: right;
    padding: 0;
    color: #666666;
    clear: both;
}

/*------- JQuery-UI Edit -----------*/
.ui-widget {
    font-family: var(--font-primary);
    font-size: 12px;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: var(--font-primary);
    font-size: 12px;
}

.ui-widget-content {
    border: none;
}

.ui-widget-content a {
    color: inherit;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 6px !important;
}

.ui-widget-header {
    background: none;
    border-color: #DDDDDD;
    border-width: 0 0 1px 0;
    border-radius: 0
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: var(--primary-color);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #F0F3F0
}

.ui-tabs .ui-tabs-panel {
    padding: 0;
}

.ui-tabs .ui-tabs-nav {
    border-bottom: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background-color: var(--primary-color);
    font-weight: 500;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: white;
}

.ui-tabs .ui-tabs-nav li {
    background-color: unset;
    border-radius: 4px;
    margin-right: 8px;
    border: 1px solid var(--border-color);
}

.ui-tabs .ui-tabs-nav li:hover {
    background-color: rgba(var(--primary-color-rgb), 0.4);
}

.ui-tabs .ui-tabs-nav li:hover a {
    color: var(--primary-color);
}

.ui-tabs #showAdvanceSearch {
    color: var(--primary-color);
}

#tabs .ui-tabs-nav a {
    font-size: 12px;
    padding: 4px 7px;
}

.ui-datepicker {
    background: #EAEAEA;
    box-shadow: 1px 1px 2px #EAEAEA;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: bold
}

.ui-autocomplete {
    z-index: 103
}

/* UI dialog */
.ui-dialog {
    border: 1px solid #CCC;
}

.ui-dialog a:hover {
    opacity: 0.7;
}

.ui-dialog {
    max-height: calc(100vh - 100px) !important;
    /* Chiều cao tối đa */
    overflow: hidden;
    /* Ngăn cuộn toàn bộ dialog */
}

.ui-dialog .ui-dialog-content {
    max-height: calc(100vh - 150px) !important;
    /* Giữ khoảng trống cho header và footer */
    overflow-y: auto;
    /* Bật thanh cuộn dọc */
    scrollbar-width: thin;
    /* Thanh cuộn nhỏ (Firefox) */
}

.ui-dialog .ui-dialog-content::-webkit-scrollbar {
    width: 6px;
    /* Kích thước thanh cuộn nhỏ */
}

.ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    /* Màu của thanh cuộn */
    border-radius: 3px;
    /* Bo góc thanh cuộn */
}

.ui-dialog.ui-widget .dateTime {
    width: 84px;
}

.ui-dialog .ui-dialog-title {
    float: left;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.ui-dialog table.adminlist tbody tr .key {
    font-weight: 500;
}

.ui-dialog table .row-key {}

.ui-dialog input[type="text"],
.ui-dialog select {
    width: 173px;
}

.ui-dialog select.operators {
    width: 50px;
}

.ui-dialog .select2-container .select2-selection--single .ui-dialog .select2-container {
    width: 173px;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid var(--border-color);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid var(--border-color);
}

/*------- End JQuery-UI Edit --------*/

.quick-menu {
    display: flex;
    flex-wrap: wrap;
}

/*------- End Admin home --------*/

/*------- Change password --------*/
.change-pass-success {
    color: red;
    font-size: 30px;
    padding: 20px;
    text-align: center;
}

.change-pass-redirect {
    font-size: 16px;
    padding-bottom: 20px;
    text-align: center;
}

/*------- End change password --------*/
/*------- Reset Password --------*/
.reset-wrapper {
    display: block;
    font-size: 1.2em;
    padding: 0.5em;
}

.reset-content {
    border: #DDDDDD solid 1px;
    background-color: #FFFFFF;
    border-radius: 3px;
    margin: 30px auto;
}

.reset-content .reset-title {
    font-size: 1.5em;
}

.reset-content p {
    line-height: 1.4em;
}

.reset-content .reset-button {
    padding-top: 1.5em;
    text-align: center
}

.reset-content .reset-button input {
    margin-right: 1.5em;
}

/*------- End Reset password --------*/

/*------- Customer's Products --------*/
.search-customer {
    text-align: center;
    display: block;
    padding: 10px;
    font-size: 16px;
    /*font-weight: bold*/
}

.search-customer input {
    font-size: 16px;
    width: 60%;
}

/*------- End Customer's Products --------*/

/*------- Select2 container --------*/
.select2-container--default .select2-selection--single,
.select2-dropdown {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
}

/*------- End Select2 container --------*/

/*------- Sales Amount --------*/
.sub-total {
    font-weight: bold;
}

.redcolor {
    color: #c82333;
}

table.adminlist tr.company-info td {
    font-weight: bold;
    background-color: #B7B7B7;
}

/*------- End Sales Amount --------*/
/*------- Sales Target --------*/
table.sales-target {
    width: 2000px;
}

table.sales-target th.stc1 {
    width: 100px;
}

table.sales-target th.stc2,
table.sales-target th.stc3,
table.sales-target th.stc14,
table.sales-target th.stc15,
table.sales-target th.stc17 {
    width: 80px;
}

table.sales-target th.stc4,
table.sales-target th.stc5,
table.sales-target th.stc7,
table.sales-target th.stc9,
table.sales-target th.stc10 {
    width: 50px;
}

table.sales-target th.stc6,
table.sales-target th.stc8,
table.sales-target th.stc11,
table.sales-target th.stc12 {
    width: 160px;
}

table.sales-target th.stc13,
table.sales-target th.stc16,
table.sales-target th.stc18,
table.sales-target th.stc19,
table.sales-target th.stc20,
table.sales-target th.stc21,
table.sales-target th.stc22,
table.sales-target th.stc23 {
    width: 45px;
}

.cus-list .cusname {
    position: relative;
}

.cus-list a.rmc:before {
    animation: circle 1.3s ease-out infinite;
    background: rgba(247, 151, 29, 0.5);
    border: 1px solid #f7971d;
    border-radius: 50%;
    content: "x";
    font-size: 10px;
    height: 10px;
    line-height: 7px;
    position: absolute;
    text-align: center;
    bottom: 0px;
    width: 10px;
}

.cus-list a.rmc {
    transition: all 0.8s ease 0s;
    display: inline-block;
    background: #f7971d;
    border-radius: 50%;
    z-index: 10;
    margin-left: 4px;
    color: #333333;
}

.cus-list a.nm {
    /*display: inline-block;*/
    display: none;
}

/*------- End Sales Target --------*/
/*------- Customer product --------*/
.update-price {
    padding: 20px;
    font-size: 12px;
    display: none;
}

.update-price img {
    width: 100px;
    height: 100px;
}

table.statistic {}

table.statistic td {
    padding: 3px;
    font-size: 12px;
}

/*------- End Customer product --------*/

/*------- Error --------*/
.error-box {
    padding: 10px;
    color: #c82333;
}

.error-box ul li {
    list-style: disc inside;
    padding: 2px 0;
}

.error-box ul li,
.error-box ul li a {
    color: #c82333;
}

.error {
    background: #e5a1a1 !important;
    border: 1px solid #c82333 !important;
}

/*------- End Error --------*/


/*--------- Paging --------*/
div#paging {
    clear: both;
    display: flex;
    align-items: center;
    align-items: center;
    justify-content: start;
    margin: 10px 0;
    font-family: var(--font-primary, 'Quicksand', 'Segoe UI', sans-serif);
}

div#paging span.paging-name {
    background: none;
    border: none;
    color: #7d7d7d;
    padding: 0 0.5rem;
}

div#paging span.dots {
    cursor: pointer;
    margin: 0 3px;
}

div#paging span:not(.dots) {
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6d9886;
    border-radius: 4px;
    color: #333333;
    padding: 5px 7px;
    font-weight: 600;
}

div#paging a,
div#paging a:visited {
    background-color: #f6f6f6;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #333333;
    font-weight: 500;
    margin: 0;
    padding: 5px 7px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

div#paging a:hover,
div#paging a.prev-page:hover img,
div#paging a.prev-page img:hover,
div#paging a.next-page:hover img,
div#paging a.next-page img:hover {
    background-color: #e9f0f7;
    border: 1px solid #6d9886;
    color: #6d9886;
    text-decoration: none;
}

div#paging a.prev-page,
div#paging a.next-page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#paging a.prev-page img,
div#paging a.next-page img {
    width: 100%;
    height: 100%;
    border: 1px solid #CCCCCC;
    vertical-align: middle;
    border-radius: 4px;
    transition: all 0.2s ease;
    background-repeat: no-repeat;
    background-position: center;
}

div#paging a.next-page img {
    background-image: url('../icon/next-arrow.svg');
}

div#paging a.prev-page img {
    background-image: url('../icon/next-arrow.svg');
    transform: scaleX(-1);
}

div#paging a.prev-page:hover img,
div#paging a.prev-page img:hover {
    border-color: #6d9886;
}

div#paging a.next-page:hover img,
div#paging a.next-page img:hover {
    border-color: #6d9886;
}

/*---------- End paging ---------*/
.hideitem {
    display: none !important;
}

.fl {
    float: left !important;
}

.fr {
    float: right !important;
}

.clf {
    clear: both !important;
}

.clfl {
    clear: left !important;
}

.clfr {
    clear: right !important;
}

/*---------- Download File ---------*/
#loadingWrap.show {
    display: block !important;
}

#loadingWrap {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: inline-block;
    text-align: center;
    z-index: 2000;
}

#loadingIcon {
    display: inline-block;
    position: absolute;
    top: 45%;
}

.position-relative {
    position: relative !important
}

.position-absolute {
    position: absolute !important
}

.notification {
    color: var(--primary-color);
}

.notification i.fa.fa-bell {
    font-size: 17px;
}

.ring-bell {
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotateZ(0);
    }

    1% {
        -webkit-transform: rotateZ(30deg);
    }

    3% {
        -webkit-transform: rotateZ(-28deg);
    }

    5% {
        -webkit-transform: rotateZ(34deg);
    }

    7% {
        -webkit-transform: rotateZ(-32deg);
    }

    9% {
        -webkit-transform: rotateZ(30deg);
    }

    11% {
        -webkit-transform: rotateZ(-28deg);
    }

    13% {
        -webkit-transform: rotateZ(26deg);
    }

    15% {
        -webkit-transform: rotateZ(-24deg);
    }

    17% {
        -webkit-transform: rotateZ(22deg);
    }

    19% {
        -webkit-transform: rotateZ(-20deg);
    }

    21% {
        -webkit-transform: rotateZ(18deg);
    }

    23% {
        -webkit-transform: rotateZ(-16deg);
    }

    25% {
        -webkit-transform: rotateZ(14deg);
    }

    27% {
        -webkit-transform: rotateZ(-12deg);
    }

    29% {
        -webkit-transform: rotateZ(10deg);
    }

    31% {
        -webkit-transform: rotateZ(-8deg);
    }

    33% {
        -webkit-transform: rotateZ(6deg);
    }

    35% {
        -webkit-transform: rotateZ(-4deg);
    }

    37% {
        -webkit-transform: rotateZ(2deg);
    }

    39% {
        -webkit-transform: rotateZ(-1deg);
    }

    41% {
        -webkit-transform: rotateZ(1deg);
    }

    43% {
        -webkit-transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(0);
    }
}

@-moz-keyframes ring {
    0% {
        -moz-transform: rotate(0);
    }

    1% {
        -moz-transform: rotate(30deg);
    }

    3% {
        -moz-transform: rotate(-28deg);
    }

    5% {
        -moz-transform: rotate(34deg);
    }

    7% {
        -moz-transform: rotate(-32deg);
    }

    9% {
        -moz-transform: rotate(30deg);
    }

    11% {
        -moz-transform: rotate(-28deg);
    }

    13% {
        -moz-transform: rotate(26deg);
    }

    15% {
        -moz-transform: rotate(-24deg);
    }

    17% {
        -moz-transform: rotate(22deg);
    }

    19% {
        -moz-transform: rotate(-20deg);
    }

    21% {
        -moz-transform: rotate(18deg);
    }

    23% {
        -moz-transform: rotate(-16deg);
    }

    25% {
        -moz-transform: rotate(14deg);
    }

    27% {
        -moz-transform: rotate(-12deg);
    }

    29% {
        -moz-transform: rotate(10deg);
    }

    31% {
        -moz-transform: rotate(-8deg);
    }

    33% {
        -moz-transform: rotate(6deg);
    }

    35% {
        -moz-transform: rotate(-4deg);
    }

    37% {
        -moz-transform: rotate(2deg);
    }

    39% {
        -moz-transform: rotate(-1deg);
    }

    41% {
        -moz-transform: rotate(1deg);
    }

    43% {
        -moz-transform: rotate(0);
    }

    100% {
        -moz-transform: rotate(0);
    }
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }

    1% {
        transform: rotate(30deg);
    }

    3% {
        transform: rotate(-28deg);
    }

    5% {
        transform: rotate(34deg);
    }

    7% {
        transform: rotate(-32deg);
    }

    9% {
        transform: rotate(30deg);
    }

    11% {
        transform: rotate(-28deg);
    }

    13% {
        transform: rotate(26deg);
    }

    15% {
        transform: rotate(-24deg);
    }

    17% {
        transform: rotate(22deg);
    }

    19% {
        transform: rotate(-20deg);
    }

    21% {
        transform: rotate(18deg);
    }

    23% {
        transform: rotate(-16deg);
    }

    25% {
        transform: rotate(14deg);
    }

    27% {
        transform: rotate(-12deg);
    }

    29% {
        transform: rotate(10deg);
    }

    31% {
        transform: rotate(-8deg);
    }

    33% {
        transform: rotate(6deg);
    }

    35% {
        transform: rotate(-4deg);
    }

    37% {
        transform: rotate(2deg);
    }

    39% {
        transform: rotate(-1deg);
    }

    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes megaphone {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.fa-bullhorn:hover {
    animation: megaphone 0.5s ease-in-out;
}

.num-feedback {
    top: -8px;
    left: 9px;
    z-index: 1;
}

.num-notice {
    color: white !important;
    background: #930;
    padding: 0px 4px;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
}

.d-inline-block {
    display: inline-block;
}

.border {
    border: 1px solid #CCCCCC;
}

.content-list table td a.btn {
    color: #fff !important;
}

a.btn {
    border: 1px solid;
    /* background: var(--primary-color); */
    color: #fff !important;
    white-space: nowrap;
    border-radius: 5px;
    text-decoration: none;
    margin: 1px;
    font-size: 13px;
    padding: 2px 5px;
}

a.btn-primary,
.btn-primary {
    background: var(--primary-color);
    color: #fff;
}

a.btn-secondary,
.btn-secondary {
    background: #006666;
    color: #fff;
}

a.btn-green,
.btn-green {
    background: #28a745;
    color: #fff;
    text-decoration: none;
    transition: background var(--transition-xs) ease-in-out, transform 0.2s ease-in-out;
}

a.btn-green:hover,
.btn-green:hover {
    background: #218838;
    /* Màu xanh đậm hơn khi hover */
    transform: scale(1.05);
    /* Hiệu ứng phóng to nhẹ khi hover */
}

a.btn-green:active,
.btn-green:active {
    background: #1e7e34;
    /* Màu tối hơn khi nhấn */
    transform: scale(0.98);
}

a.btn-grey,
.btn-grey {
    background: #808080;
    color: #fff;
}

a.btn-red,
.btn-red {
    background: #cc2200;
    color: #fff;
}

.select_file {
    border: 1px solid #ccc;
    background: #ddd;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    color: #333;
    margin: 5px 2px;
    display: inline-block;
}

.select_file::before {
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f0ee";
    margin-right: 3px;
}

.text-primary {
    color: var(--primary-color) !important;
}

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

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

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

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

.text-nowrap {
    white-space: nowrap !important;
}

.small {
    font-size: 0.9em !important;
}

.font-weight-normal {
    font-weight: normal !important;
}

.font-weight-bold {
    font-weight: bold !important;
}

.text-white {
    color: white !important;
}

.text-red {
    color: #cc2200 !important;
}

.text-green {
    color: green !important;
}

.text-yellow {
    color: yellow !important;
}

.text-blue {
    color: #005FA3 !important;
}

.text-gray {
    color: #808080;
}

.text-lightgray {
    color: #d3d3d3;
}

.d-none {
    display: none !important;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.text-decoration-none {
    text-decoration: none !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-uccase::first-letter {
    text-transform: uppercase;
}

.text-uccase {
    text-transform: lowercase;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.bg-none {
    background: transparent;
}

.border-none {
    border: none;
}

.shadow-none {
    box-shadow: none;
}

#popup-birthday {
    padding: 0;
}

#img-birthday-cake {
    position: relative;
}

#avartar-wrap {
    top: 0;
    right: 0;
    width: 100%;
    text-align: center;
    position: absolute;
}

#avartar-wrap img {
    float: right;
    z-index: -1;
    position: inherit;
    top: 51px;
    right: 84px;
}

img.avartar-circle {
    border-radius: 50%;
    border: 2px solid red;
}

.list-scroll {
    max-height: 75px;
    overflow-y: scroll;
}

.txt-name {
    position: inherit;
    top: 344px;
    left: 50%;
}

.txt-name p {
    font-family: inherit;
    font-size: 1.2em;
}

.pb-1,
.py-1 {
    padding-bottom: 0.25rem !important;
}

.pt-1,
.py-1 {
    padding-top: 0.25rem !important;
}

.pl-1,
.px-1 {
    padding-left: 0.25rem !important;
}

.pr-1,
.px-1 {
    padding-right: 0.25rem !important;
}

.pb-2,
.py-2 {
    padding-bottom: 0.5rem !important;
}

.pt-2,
.py-2 {
    padding-top: 0.5rem !important;
}

.pl-2,
.px-2 {
    padding-left: 0.5rem !important;
}

.pr-2,
.px-2 {
    padding-right: 0.5rem !important;
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important;
}

.pt-3,
.py-3 {
    padding-top: 1rem !important;
}

.pl-3,
.px-3 {
    padding-left: 1rem !important;
}

.pr-3,
.px-3 {
    padding-right: 1rem !important;
}

.ui-autocomplete-loading {
    background: white url("../images/images/ui-anim_basic_16x16.gif") left center no-repeat;
}

@font-face {
    font-family: 'UTM_Aristote';
    src: url('../fonts/UTM Aristote Regular.eot');
    src: url('../fonts/UTM Aristote Regular.eot') format('embedded-opentype'), url('../fonts/UTM Aristote Regular.woff2') format('woff2'), url('../fonts/UTM Aristote Regular.woff') format('woff'), url('../fonts/UTM Aristote Regular.ttf') format('truetype'), url('../fonts/UTM Aristote Regular.svg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

.font-utm-aristote {
    font-family: 'UTM_Aristote' !important;
    font-size: 1.6em !important;
}

#reward-wrap {
    top: 50%;
    right: 0;
    width: 100%;
    text-align: center;
    position: absolute;
}

#reward-wrap .reward-content .txt-content {
    width: 60%;
    margin: 0 auto;
}

#img-reward .number-reward {
    bottom: 7%;
    position: absolute;
    left: 30%;
    font-size: 0.9em;
}

#owl-side-reward .owl-stage-outer {
    align-items: center;
    display: inline-flex;
}

#owl-side-reward .owl-stage-outer a:hover {
    text-decoration: none;
}

#owl-side-reward .owl-stage {
    display: flex;
}

.txt-place {
    bottom: 20%;
    position: absolute;
    right: 22%;
    font-size: 0.8em;
}

.vat_processing {
    background-color: #cc2200 !important;
}

.vat_instock {
    background-color: #009600 !important;
}

.vat_approved {
    background: #d9d100 !important;
}

.vat_finished {
    background: green !important;
}

.vat_request,
.vat_reject {
    background-color: yellowgreen !important;
}

.bg-red {
    background-color: #AD180E;
}

.bg-green {
    background-color: var(--primary-color);
}

.bg-compare {
    background-color: yellow !important;
    /* #adad85 */
}

.border-4x-red {
    border: 4px solid #AD180E !important;
}

.border-4x-green {
    border: 4px solid var(--primary-color) !important;
}

.column-controls {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 5px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.column-controls label {
    display: flex;
    align-items: center;
    padding: 5px 7px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color var(--transition-xs);
}

.column-controls label:hover {
    background-color: #f0f0f0;
}

.column-controls input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    /* Make checkboxes slightly larger */
}

.w-100 {
    width: 100%;
}

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

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

.pr-0 {
    padding-right: 0 !important;
}

/* Base focus-visible style */
:focus-visible {
    outline: none;
    /* Remove default outline */
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
    /* Soft blue shadow */
    border-radius: 4px;
    /* Rounded corners */
    transition: box-shadow 0.2s ease-in-out;
    /* Smooth transition */
}

/* Custom focus styles for buttons */
button:focus-visible {
    background-color: rgba(59, 130, 246, 0.1);
    /* Light blue background */
    transform: scale(1.05);
    /* Slight scale effect */
}

/* Custom focus styles for links */


/* Custom focus styles for form inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: var(--primary-color);
    ;
    /* Blue border */
    box-shadow: 0 0 0 2px var(--shadow-color);
    /* Subtle shadow */
}

.column-controls label[data-parent="true"] {
    font-weight: bold;
    color: #007bff;
}

.line-clamp-toggle {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

.line-clamp-toggle.show {
    display: block;
}

.search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 15px 10px;
}

.search-item {
    display: flex;
    flex-direction: column;
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    align-items: end;
}

/* --- toastui-calendar-popup-overlay --- */
.toastui-calendar-popup-overlay {
    position: fixed !important;
    bottom: 0;
}

.not-allowed-sale td {
    background-color: #fff3f3 !important;
    color: #cc0000 !important;
    opacity: 0.7;
    font-style: italic;
    cursor: not-allowed;
}

.not-allowed-sale i.fas.fa-ban {
    margin-right: 5px;
}

#user-box .user-box-content {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 500px;
    margin: 20px auto;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#user-box .user-box-content:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

#user-box .user-avatar {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.3);
}

#user-box .user-avatar img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#user-box .user-info {
    flex: 1;
    padding: 20px;
    background-color: white;
}

#user-box .user-content {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

#user-box .user-info p strong {
    font-weight: 600;
    color: #333;
    display: inline-block;
    min-width: 80px;
}

#user-box .user-info p span {
    color: #666;
}

#user-box .user-info p span a {
    color: #4a6baf;
    text-decoration: none;
    transition: color 0.2s;
}

#user-box .user-info p span a:hover {
    color: #3a56a0;
}

#user-box .user-info p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Responsive design */
@media (max-width: 600px) {
    #user-box .user-box-content {
        flex-direction: column;
    }

    #user-box .user-avatar {
        flex: 0 0 auto;
        padding: 15px;
    }

    #user-box .user-avatar img {
        width: 80px;
        height: 80px;
    }

    #user-box .user-info p strong {
        display: block;
        margin-bottom: 3px;
    }
}