/* Base icon styles */
.icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor; /* ← This is what makes it work! */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Sidebar */
.icon-toggle {
    mask-image: url('/site/icons/sidebar/toggle.svg');
}

.icon-setting {
    mask-image: url('/site/icons/sidebar/setting.svg');
}

.icon-sent1 {
    mask-image: url('/site/icons/sidebar/sent1.svg');
}

.icon-economic3 {
    mask-image: url('/site/icons/sidebar/economic3.svg');
}

.icon-money3 {
    mask-image: url('/site/icons/sidebar/money3.svg');
}

.icon-warehouse2 {
    mask-image: url('/site/icons/sidebar/warehouse2.svg');
}

.icon-file2 {
    mask-image: url('/site/icons/sidebar/file2.svg');
}
/* End Sidebar */

.icon-cross {
    mask-image: url('/site/icons/master/cross-icon.svg');
}

.icon-filter {
    mask-image: url('/site/icons/master/filter-icon.svg');
}

.icon-pencil {
    mask-image: url('/site/icons/master/pencil-icon.svg');
}

.icon-plus {
    mask-image: url('/site/icons/master/plus-icon.svg');
}

.icon-edit {
    mask-image: url('/site/icons/master/edit-icon.svg');
}

.btn-icon {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
}

    .btn-icon i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.icon-document {
    mask-image: url('/site/icons/master/document-icon.svg');
}

.icon-search {
    mask-image: url('/site/icons/master/search-icon.svg');
    /*    background-color: white;*/
    width: 12px;
    height: 12px;
}

.icon-key {
    mask-image: url('/site/icons/login/key_loginTwoFactor.svg');
}

.icon-lock {
    mask-image: url('/site/icons/login/lock_enableTwoFactor.svg');
}

.icon-open-eye {
    mask-image: url('/site/icons/login/open_eye_login.svg');
}

.icon-close-eye {
    mask-image: url('/site/icons/login/close_eye_login.svg');
}

.icon-search-circle {
    mask-image: url('/site/icons/master/search-circle-icon.svg');
}

.icon-not-search {
    width: 80px;
    height: 80px;
    mask-image: url('/site/icons/master/not-search.svg');
}

.icon-correct {
    background-color: white;
    mask-image: url('/site/icons/master/correct-icon.svg');
}

.swal-fa-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px; /* ขนาด icon ด้านใน */
    margin: 0 auto;
}

.icon-dialog {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: white; /* ← This is what makes it work! */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.icon-question {
    mask-image: url('/site/icons/master/question-icon.svg');
}

.select2-selection__arrow {
    mask-image: url('/site/icons/master/arrow-down-icon.svg');
    display: inline-block;
    width: 8px;
    height: 4px;
    background-color: currentColor; /* ← This is what makes it work! */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 8px;
    height: 4px;
    border-width: 1.44px;
    top: 21px;
    right: var(--spacing-lg);
}

.icon-calendar {
    mask-image: url('/site/icons/master/calendar-icon.svg');
}

.icon-pencil-squre {
    mask-image: url('/site/icons/master/pencil-square-icon.svg');
}

.icon-clock {
    mask-image: url('/site/icons/master/clock-icon.svg');
    width: 12px;
    height: 12px;
}

.icon-clock {
    mask-image: url('/site/icons/master/clock-icon.svg');
    width: 14px;
    height: 14px;
}

.icon-eye {
    mask-image: url('/site/icons/master/eye.svg');
    width: 18px;
    height: 14px;
}

.icon-filter-icon {
    mask-image: url('/site/icons/master/filter-icon.svg');
}

.icon-time-left1 {
    mask-image: url('/site/icons/master/time-left1.svg');
}

.icon-add-square {
    mask-image: url('/site/icons/master/add-square-icon.svg');
    width: 16px;
    height: 16px;
}

.icon-edit-pencil {
    mask-image: url('/site/icons/master/edit-pencil-icon.svg');
    width: 16px;
    height: 16px;
}

.icon-printer {
    mask-image: url('/site/icons/master/printer-icon.svg');
    width: 14px;
    height: 14px;
}

.icon-box-checkmark {
    mask-image: url('/site/icons/master/box-checkmark-icon.svg');
}

.icon-box {
    mask-image: url('/site/icons/master/box-icon.svg');
}

.icon-coins {
    mask-image: url('/site/icons/master/coins-icon.svg');
}

.icon-economic {
    mask-image: url('/site/icons/master/economic-icon.svg');
}

.icon-setting {
    mask-image: url('/site/icons/master/setting-icon.svg');
}

.icon-warehouse {
    mask-image: url('/site/icons/master/warehouse-icon.svg');
}

.icon-logout-arrow {
    mask-image: url('/site/icons/master/logout-arrow-icon.svg');
}

.icon-alert-circle {
    mask-image: url('/site/icons/master/alert-circle-icon.svg');
}

.arrow-down {
    mask-image: url('/site/icons/master/arrow-down-icon.svg');
}

.icon-arrow-down {
    mask-image: url('/site/icons/master/arrow-down-icon.svg');
}

.icon-file {
    mask-image: url('/site/icons/master/file-icon.svg');
}

.icon-barcode-1 {
    mask-image: url('/site/icons/master/barcode-1.svg');
    width: 16px;
    height: 16px;
}

.icon-barcode {
    mask-image: url('/site/icons/master/barcode-icon.svg');
}

.icon-trash {
    mask-image: url('/site/icons/master/trash-icon.svg');
}

.icon-expand {
    mask-image: url('/site/icons/master/plus-1.svg');
}

.icon-error {
    mask-image: url('/site/icons/master/error-icon.svg');
}

.icon-paper {
    mask-image: url('/site/icons/master/paper-icon.svg');
}

.icon-comment {
    mask-image: url('/site/icons/master/comment-icon.svg');
}

.icon-prohibit {
    mask-image: url('/site/icons/master/prohibit-icon.svg');
}

.icon-qr-code {
    mask-image: url('/site/icons/master/qr-code-icon.svg');
    width: 22px;
    height: 22px;
}

.icon-approve {
    mask-image: url('/site/icons/master/approve-icon.svg');
}

.icon-forbidden {
    mask-image: url('/site/icons/master/forbidden-icon.svg');
}

.icon-force-finish {
    mask-image: url('/site/icons/master/force-finish-icon.svg');
}

.icon-three-dot {
    mask-image: url('/site/icons/master/three-dot.svg');
}

.icon-refresh {
    mask-image: url('/site/icons/master/arrow-circle-icon.svg');
}

.icon-bin {
    mask-image: url('/site/icons/master/bin-icon.svg');
}

.icon-eye-slash {
    mask-image: url('/site/icons/master/eye-slash-icon.svg');
}

.icon-check-circle {
    mask-image: url('/site/icons/master/check-circle-icon.svg');
}

.icon-disabled {
    mask-image: url('/site/icons/master/disabled-icon.svg');
}

.icon-up-arrow {
    mask-image: url('/site/icons/master/up-arrow-icon.svg');
}

.icon-down-arrow {
    mask-image: url('/site/icons/master/down-arrow-icon.svg');
}

.icon-sm {
    width: 10px;
    height: 10px;
}