/*!
 * Copy from Tabler Icons 3.4.0 by tabler - https://tabler.io
 */
.ti {
  vertical-align: middle;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
}

.ti {
  /*font-family: "tabler-icons" !important;*/
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-webkit-keyframes burst {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  90% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes burst {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  90% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

@-webkit-keyframes flashing {
  0% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }
}

@keyframes flashing {
  0% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  90% {
    opacity: 1;
  }
}

@-webkit-keyframes fade-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 0;
  }
}

@keyframes fade-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 0;
  }
}

@-webkit-keyframes fade-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0;
  }
}

@keyframes fade-right {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0;
  }
}

@-webkit-keyframes fade-up {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }
}

@keyframes fade-up {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }
}

@-webkit-keyframes fade-down {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes fade-down {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  75% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg);
    transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg);
    transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
  }

  40%, 60%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.ti-spin {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.ti-spin-hover:hover {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.ti-tada {
  -webkit-animation: tada 1.5s ease infinite;
  animation: tada 1.5s ease infinite;
}

.ti-tada-hover:hover {
  -webkit-animation: tada 1.5s ease infinite;
  animation: tada 1.5s ease infinite;
}

.ti-flashing {
  -webkit-animation: flashing 1.5s infinite linear;
  animation: flashing 1.5s infinite linear;
}

.ti-flashing-hover:hover {
  -webkit-animation: flashing 1.5s infinite linear;
  animation: flashing 1.5s infinite linear;
}

.ti-burst {
  -webkit-animation: burst 1.5s infinite linear;
  animation: burst 1.5s infinite linear;
}

.ti-burst-hover:hover {
  -webkit-animation: burst 1.5s infinite linear;
  animation: burst 1.5s infinite linear;
}

.ti-fade-up {
  -webkit-animation: fade-up 1.5s infinite linear;
  animation: fade-up 1.5s infinite linear;
}

.ti-fade-up-hover:hover {
  -webkit-animation: fade-up 1.5s infinite linear;
  animation: fade-up 1.5s infinite linear;
}

.ti-fade-down {
  -webkit-animation: fade-down 1.5s infinite linear;
  animation: fade-down 1.5s infinite linear;
}

.ti-fade-down-hover:hover {
  -webkit-animation: fade-down 1.5s infinite linear;
  animation: fade-down 1.5s infinite linear;
}

.ti-fade-left {
  -webkit-animation: fade-left 1.5s infinite linear;
  animation: fade-left 1.5s infinite linear;
}

.ti-fade-left-hover:hover {
  -webkit-animation: fade-left 1.5s infinite linear;
  animation: fade-left 1.5s infinite linear;
}

.ti-fade-right {
  -webkit-animation: fade-right 1.5s infinite linear;
  animation: fade-right 1.5s infinite linear;
}

.ti-fade-right-hover:hover {
  -webkit-animation: fade-right 1.5s infinite linear;
  animation: fade-right 1.5s infinite linear;
}

.ti-xs {
  font-size: 1rem !important;
}

.ti-sm {
  font-size: 1.125rem !important;
}

.ti-md {
  font-size: 1.375rem !important;
}

.ti-lg {
  font-size: 1.5rem !important;
}

.ti-xl {
  font-size: 2.25rem !important;
}

.ti-10px, .ti-10px:before {
  font-size: 10px;
}

.ti-12px, .ti-12px:before {
  font-size: 12px;
}

.ti-14px, .ti-14px:before {
  font-size: 14px;
}

.ti-16px, .ti-16px:before {
  font-size: 16px;
}

.ti-18px, .ti-18px:before {
  font-size: 18px;
}

.ti-20px, .ti-20px:before {
  font-size: 20px;
}

.ti-22px, .ti-22px:before {
  font-size: 22px;
}

.ti-24px, .ti-24px:before {
  font-size: 24px;
}

.ti-26px, .ti-26px:before {
  font-size: 26px;
}

.ti-28px, .ti-28px:before {
  font-size: 28px;
}

.ti-30px, .ti-30px:before {
  font-size: 30px;
}

.ti-32px, .ti-32px:before {
  font-size: 32px;
}

.ti-36px, .ti-36px:before {
  font-size: 36px;
}

.ti-40px, .ti-40px:before {
  font-size: 40px;
}

.ti-42px, .ti-42px:before {
  font-size: 42px;
}

.ti-48px, .ti-48px:before {
  font-size: 48px;
}


/* custom class cho tất cả các icon */

.ti {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Icons đã được tìm thấy trong dự án */
.ti-smart-home {
  --svg: url('/getsvg/smart-home?stroke=red');
}

.ti-user-circle {
  --svg: url('/getsvg/user-circle?stroke=white');
}

.ti-file-text {
  --svg: url('/getsvg/file-text?stroke=white');
}

.ti-package {
  --svg: url('/getsvg/package?stroke=white');
}

.ti-clipboard-list {
  --svg: url('/getsvg/clipboard-list?stroke=white');
}

.ti-receipt {
  --svg: url('/getsvg/receipt?stroke=white');
}

.ti-ticket {
  --svg: url('/getsvg/ticket?stroke=white');
}

.ti-activity {
  --svg: url('/getsvg/activity?stroke=white');
}

.ti-search {
  --svg: url('/getsvg/search?stroke=white');
}

.ti-bookmark {
  --svg: url('/getsvg/bookmark?stroke=white');
}

.ti-list {
  --svg: url('/getsvg/list?stroke=white');
}

.ti-bookmark-filled {
  --svg: url('/getsvg/bookmark-filled?stroke=white');
}

.ti-brand-google {
  --svg: url('/getsvg/brand-google?stroke=white');
}

/* Icons bổ sung từ file Login.cshtml và các file layout */
.ti-check {
  --svg: url('/getsvg/check?stroke=white');
}

.ti-x {
  --svg: url('/getsvg/x?stroke=white');
}

.ti-menu-2 {
  --svg: url('/getsvg/menu-2?stroke=white');
}

.ti-bell {
  --svg: url('/getsvg/bell?stroke=white');
}

.ti-settings {
  --svg: url('/getsvg/settings?stroke=white');
}

.ti-sun {
  --svg: url('/getsvg/sun?stroke=white');
}

.ti-moon {
  --svg: url('/getsvg/moon?stroke=white');
}

.ti-logout {
  --svg: url('/getsvg/logout?stroke=white');
}

.ti-user {
  --svg: url('/getsvg/user?stroke=white');
}

.ti-home {
  --svg: url('/getsvg/home?stroke=white');
}

.ti-chevron-down {
  --svg: url('/getsvg/chevron-down?stroke=white');
}

.ti-chevron-right {
  --svg: url('/getsvg/chevron-right?stroke=white');
}

.ti-moon-stars {
  --svg: url('/getsvg/moon-stars?stroke=white');
}