@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-container {
    background: linear-gradient(349deg, #fde9d3 15.37%, #e9eeff 72.54%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}
.login-container-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("<?php echo WEB_ROOT; ?>public/images/backgroundlogin.jpg") center/cover;
    opacity: 0.1;
    z-index: 1;
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 2;
    animation: slideUp 0.6s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo img {
    width: 80px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.login-logo img:hover {
    transform: scale(1.05);
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.login-subtitle {
    color: #718096;
    font-size: 16px;
    margin: 0;
    font-weight: 400;
}

.form-group {
    margin-bottom: 20px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-icon {
    font-size: 24px;
    color: #a0aec0;
    z-index: 1;
    transition: color 0.3s ease;
}

.input-wrapper input {
    width: 100% !important;
    padding: 10px !important;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px !important;
    background: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
    color: #2d3748;
}

.input-wrapper input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.input-wrapper input:focus + .input-icon,
.input-wrapper input:not(:placeholder-shown) + .input-icon {
    color: #667eea;
}

.captcha-group {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin: 10px;
}

.captcha-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7fafc;
    padding: 2px 6px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    width: 50%;
    justify-content: space-between;
}

.captcha-image {
    border-radius: 8px;
}

.captcha-refresh {
    cursor: pointer;
    transition: all 0.3s ease;
}

.captcha-refresh:hover {
    transform: rotate(180deg);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.remember-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 10px;
}

.remember-checkbox input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.remember-checkbox input[type="checkbox"]:checked + .checkmark {
    background: #667eea;
    border-color: #667eea;
}

.remember-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-text {
    color: #4a5568;
    font-size: 14px;
}

.login-button {
    width: 85%;
    padding: 15px;
    background: linear-gradient(135deg, #387A3A 0%, #47a54a 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 auto;
    display: block;
}

.login-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.login-button:active {
    transform: translateY(0);
}

.login-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.d-flex {
    display: flex;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

.login-button.loading .button-text {
    opacity: 0.7;
}

.login-button.loading .button-loader {
    display: block;
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.login-footer p {
    color: #718096;
    font-size: 14px;
    margin: 0;
}

.reset-link {
    color: #ad180e !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.reset-link:hover {
    text-decoration: underline;
}

.error-message {
    background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
    border: 1px solid #fc8181;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.error-icon {
    color: #e53e3e;
    font-size: 18px;
    font-weight: bold;
}

.error-message span {
    color: #742a2a;
    font-size: 14px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-card {
        margin: 20px;
        padding: 30px 25px;
        max-width: none;
    }
    
    .login-title {
        font-size: 24px;
    }
    
    .captcha-group {
        flex-direction: column;
    }
    
    .captcha-wrapper {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .login-card {
        margin: 15px;
        padding: 25px 20px;
    }
    
    .login-logo img {
        width: 60px;
        height: 60px;
    }
    
    .login-title {
        font-size: 22px;
    }
    
    .input-wrapper input {
        padding: 12px 12px 12px 45px;
        font-size: 15px;
    }
    
    .input-icon {
        left: 12px;
        font-size: 16px;
    }
}

/* Animation cho form elements */
.form-group {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-options { animation: fadeInUp 0.6s ease-out 0.4s both; }
.login-button { animation: fadeInUp 0.6s ease-out 0.5s both; }
.login-footer { animation: fadeInUp 0.6s ease-out 0.6s both; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Legacy login styles for backward compatibility */
.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 h1 {
    font-size: 24px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #067231;
    text-shadow: none;
    text-transform: uppercase;
    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 {
}

.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 label {
    font-size: 12px;
    color: #666666;
    font-weight: 600;
}

.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;
}

.login-help a {
    color: #666666;
    text-decoration: none;
}

.login-help a:hover {
    text-decoration: underline;
}

.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;
    height: 34px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #067231;
    outline: none;
    border-radius: 5px;
    color: #000;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    outline-offset: 0;
}

.login input[type="submit"] {
    padding: 0 18px;
    height: 29px;
    font-size: 12px;
    font-weight: bold;
    background: #067231;
    color: #ffffff;
    border-radius: 5px;
    border: none;
}

.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 {
    background: none repeat scroll 0 0 #414141;
    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-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-Finish::before { content: "\f11e"; color: var(--primary-color); } /* Green - Completion */
.Icon-32-Finish: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-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; } /* Orange - Movement */
.Icon-32-Transfer:hover { color: #e06c00; }
.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; }

/* 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("/public/icon/list.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-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-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-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-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-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: end;
    gap: 10px;
    align-items: end;
    margin-bottom: 5px;
}

.advance-search:not(.content-box .advance-search) form#frmAdvanceSearch tbody{
    justify-content: center !important;
}
.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;
    padding: 4px 12px;
    text-align: right;
    vertical-align: top;
    width: 220px;
    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;
}
.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 {
    text-align: left;
}

table.adminlist td:not(:last-child) a:not(.btn) {
    text-decoration: underline;
}

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;
    text-decoration: underline;
}
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;
}

.action-button .developed{
    width: fit-content;
    margin: auto;
}

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: #e9f0fd;
    transition: background-color 0.2s ease;
}

table.adminlist tbody tr:last-child td {
    border-bottom: none;
}
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.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-state-active {
    border: 1px solid #993300 !important;
}

.ui-widget-content a {
    color: inherit;
}
.ui-widget-content {
    border: none;
}
.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 */
a:focus-visible {
    text-decoration: underline; /* Underline 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;
}

#box-reward .owl-item img {
    width: 75px!important;
    height: 100px;
    object-fit: contain;
    margin: 5px auto;
    border-radius: 4px;
    overflow: hidden;
}

input.form-control {
    line-height: 1.93;
    border-radius: .25rem;
    padding: 2px 4px!important;
}
textarea.form-control {
    border-radius: .25rem;
    padding: 2px 4px!important;
    height: auto!important;
    resize: auto;
}

.wrap-log-error-form input, 
.wrap-log-error-form select,
.wrap-log-error-form .select2,
.wrap-log-error-form textarea {
    margin: 5px 0 10px 0;
}