@import "shadcn.css";
@import "tom-select.css";
@tailwind base;
@tailwind components;
@tailwind utilities;



@layer components {
 .scrollbar-thin{
  scrollbar-width: thin;
 }
 .bg-custom-gradient {
  background-image: linear-gradient(120deg, #eaf4fd 0%, #e4fcf1 100%);
 }
 .bg-login {
  background-image: url("/assets/bg-login1-3b15c152.png");
  background-size: cover;
  background-position: center;
 }
 input:focus{
  @apply !outline-none !ring-0 !ring-blue-500;
 }
   /* Add your Header & Sidebar Css here */
.expanded {
  @apply w-64 hidden md:block;
}
.mini {
  @apply min-w-64 md:min-w-10;
}
.mini:hover {
  @apply  min-w-64 ;
}
.menu-text{
  @apply text-sm ;
}
#main-wrapper{
  @apply transition-all duration-300 md:ml-[260px];
}
.mini {
  @apply transition-all duration-300;
}
#sideBar nav{
  @apply overflow-y-auto bg-brand  rounded-lg pb-12;
  height: calc(100vh - 85px);
  scrollbar-width: thin;
}
#sideBar nav svg {
  @apply w-5 h-5;
}
#sideBar.mini svg{
  @apply w-6 h-6;
}
#sideBar.mini:hover svg{
  @apply w-5 h-5;
}
.breadcrumbs a {
  @apply text-[#0070F0] hover:text-blue-700;
}
.mini .menu-text {
@apply md:hidden;
}
.mini .menu :where(li>.menu-dropdown-toggle):after, .mini  .menu :where(li>details>summary):after {
  @apply hidden;
  }
.mini:hover .menu-text {
  @apply  block ;
}
.mini:hover .menu :where(li>.menu-dropdown-toggle):after, .mini:hover  .menu :where(li>details>summary):after {
  @apply block;
  }

  .menu :where(li:not(.menu-title)>details>summary:not(.menu-title)) {
    @apply pl-2
  }
  .active svg,  .active span{
    @apply text-blue-500;
  }
  .active .sub-menu.active{
    @apply text-blue-500 bg-blue-100;
  }
  .menu li>:not(ul,.menu-title,details,.btn).active, .menu li>:not(ul,.menu-title,details,.btn):active, .menu li>details>summary:active {
    @apply text-blue-500 bg-blue-100;
  }
  table thead th  {
    @apply whitespace-nowrap ;
  }
  table thead tr  {
    @apply border-none ;
  }
  table th:first-child {
    @apply rounded-s-lg;
  }
  table th:last-child {
    @apply rounded-e-lg;
  }
  table tbody tr:hover{
    @apply shadow-lg shadow-indigo-500/20
  }
  .table-responsive {
    @apply overflow-x-auto;
    scrollbar-width: thin;
  }
  .nested-tableheader th{
    @apply rounded-none border border-gray-300 border-b-0 text-xs p-2 text-center h-auto;
  }
  table .nested-tableheader  th:first-child, table .nested-tableheader  th:last-child {
    @apply rounded-none;
  }
  table  .nested-tablemain th{
    @apply  border-r border-gray-300  ;
  }
  table  .nested-tablemain th:last-child {
    @apply  border-r-0;
  }

/* -- Accordion Fix-- */

.search-height-fix{
  @apply rounded-lg  border-gray-100 overflow-y-scroll ;
  height: calc(100vh - 200px);
  scrollbar-width: thin;

}

.ts-saveSearch .ts-control{

  @apply  !p-4 rounded-lg !text-sm !border !border-gray-100;
}

.ts-saveSearch .ts-dropdown.single{

  @apply  !border !border-gray-300 !rounded-b-lg;
}
.ts-saveSearch .ts-dropdown.single .option{

  @apply  !p-2 !text-sm;
}
.ts-saveSearch .ts-dropdown.single .option.selected.active{
  @apply bg-primary text-white;
}
.ts-saveSearch .ts-dropdown.single .option:hover{
  @apply bg-blue-100 text-blue-700;
}
.ts-saveSearch .ts-control, .ts-saveSearch .ts-control input, .ts-dropdown {
  color: initial;
  @apply  !text-sm;
}
.ts-control .item {
  @apply bg-blue-100 text-blue-700 font-medium px-1 border border-blue-700; 
}
.ts-control input {
  @apply  !text-gray-500;
}
button, input, optgroup, select, textarea {
  @apply  text-sm;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply py-0.5 px-1;
}
.remove {
  @apply  !text-red-500 bg-red-100 ;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  @apply   !bg-red-500 !text-white;
}

.ts-wrapper.multi .ts-control .item {
  @apply  !bg-blue-100 !text-blue-700 !border !border-blue-700;
}
.menu :where(li>.menu-dropdown-toggle):after, .menu :where(li>details>summary):after {
  @apply opacity-30;
}
.ts-wrapper.multi .item{
  @apply  !hidden;
}
.ts-n-items.active {
  @apply  !bg-blue-100 !text-blue-700 !border !border-blue-700 !px-1 flex items-center;

}
.ts-wrapper.single-select-search{
  @apply !bg-white;
}
.plugin-dropdown_input.focus.dropdown-active .ts-control{
  @apply !border-0;
}
.ts-dropdown-content .option {
  @apply  hover:bg-blue-100 hover:text-blue-700 !text-sm;
}
.ts-dropdown-content .option.active {
  @apply  bg-blue-100 !text-blue-700;
}

/* -- Accordion Fix-- */
.st-accordion__icon--opened {
  @apply text-white bg-gray-900 px-3 font-medium rounded-t-md ;
}
.st-accordion .st-accordion__content.st-accordion__content--visible {
 @apply !overflow-visible p-2 border border-gray-100;
}
.customDtp{
  @apply  relative text-gray-600;
}

.customDtp input::-webkit-calendar-picker-indicator{
  opacity:1;
  @apply  absolute right-0 py-3.5 px-4 cursor-pointer rounded-e-lg bg-gray-100 hover:bg-blue-100;
}
.fixed-height {
  @apply max-h-[calc(100vh-150px)] overflow-x-auto  scroll-smooth;
  scrollbar-width: thin;
 
}
.dialog-fixed-height {
  @apply max-h-[calc(100vh-210px)] overflow-x-hidden rounded-lg scroll-smooth pe-4 overflow-y-auto;
  scrollbar-width: thin;
}
section {
  min-height: 100vh;
}
.scroll-fix {
  display: block;
  margin-top: -60px;
  padding-top: 60px;
  @apply scroll-smooth;
}
.scrolled{
  @apply fixed top-[60px] w-full h-[calc(100vh-80px)]  overflow-x-auto;
  scrollbar-width: thin;
}





.active {
  @apply bg-blue-500 !text-white; 
}
@keyframes slide-in-from-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes slide-in-from-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out-to-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.slide-in-from-right {
  animation: slide-in-from-right 0.5s ease-in-out;
}

.slide-out-to-right {
  animation: slide-out-to-right 0.5s ease-in-out;
}

.slide-in-from-left {
  animation: slide-in-from-left 0.5s ease-in-out;
}
}

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

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

.toast-enter {
  animation: toastIn 0.3s ease-out forwards;
}

.toast-exit {
  animation: toastOut 0.3s ease-out forwards;
}

@keyframes pulse-highlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.animate-pulse-highlight {
  animation: pulse-highlight 1.5s ease-out;
}

[data-sales-form-target="issueSection"] {
  transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

[data-sales-form-target="toggleIssueButton"] {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

[data-sales-form-target="issueStatusIndicator"] {
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

[data-sales-form-target="issueStatusIndicator"].inline-flex {
  transform: scale(1);
}
.blueprint-grid-effect {
  background-image: radial-gradient(circle, #3B82F6 1px, transparent 1px);
  background-size: 20px 20px;
  animation: blueprint-fade 0.6s ease-out forwards;
}

@keyframes blueprint-fade {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.8; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(2); }
}

.document-lines {
  background: linear-gradient(to bottom, 
    transparent 0%, 
    transparent 19px, 
    #f0f4f8 19px, 
    #f0f4f8 20px
  );
  background-size: 100% 20px;
}

.project-badge {
  background: radial-gradient(circle, 
    rgba(16, 185, 129, 0.9) 0%, 
    rgba(5, 150, 105, 0.9) 70%
  );
  animation: badge-approval 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badge-approval {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.approval-stamp {
  animation: stamp-document 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes stamp-document {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.1) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.project-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}

.project-list::-webkit-scrollbar {
  width: 6px;
}

.project-list::-webkit-scrollbar-track {
  background: transparent;
}

.project-list::-webkit-scrollbar-thumb {
  background-color: rgba(59, 130, 246, 0.3);
  border-radius: 3px;
}
.liquid-morph {
  position: absolute;
  background: linear-gradient(135deg, #3B82F6, #93C5FD);
  border-radius: 8px;
  z-index: 100;
  pointer-events: none;
}
[data-advices-map-sale-target="progressBar"] {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.progress-complete {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}
.text-right {
  min-width: 120px;
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

input[type="number"]:disabled {
  cursor: not-allowed;
  background-color: #f3f4f6;
  color: #9ca3af;
}

input[type="number"]:disabled::placeholder {
  color: #9ca3af;
}

.relative.group {
  position: relative;
  display: inline-block;
}

.group-hover\:block {
  display: none;
}

.group:hover .group-hover\:block {
  display: block;
}

.absolute.z-10 {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
}
/* Improved approval status indicators */
.approved-row {
  @apply bg-white;
}

.approved-row:hover {
  @apply bg-green-50;
}

.pending-row {
  @apply bg-white;
}

.pending-row:hover {
  @apply bg-red-50;
}

/* Status badge animations */
.status-badge {
  @apply transition-all duration-200 ease-in-out;
}

.status-badge:hover {
  @apply transform scale-105;
}

.btn-primary {
  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}
.whitelist-item, .bank-transaction-item {
  transform: initial !important;
}

.export-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.export-btn:hover::before {
  left: 100%;
}

.export-btn.export-preparing {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  cursor: not-allowed;
  transform: scale(0.98);
}

.export-btn.export-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  transform: scale(1.02);
}

.export-btn.export-hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.export-btn [data-enhanced-export-target="progress"] {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  background: linear-gradient(90deg, #60a5fa, #3b82f6, #1d4ed8);
  background-size: 200% 100%;
  animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.export-btn [data-enhanced-export-target="icon"] {
  transition: all 0.3s ease;
}

.export-btn.export-preparing [data-enhanced-export-target="icon"] {
  animation: spin 1s linear infinite;
}

.export-btn.export-success [data-enhanced-export-target="icon"] {
  animation: successBounce 0.6s ease-out;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes successBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}

.export-toast {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.export-toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  animation: toastShimmer 2s ease-in-out infinite;
}

@keyframes toastShimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.export-dropdown-wrapper {
  z-index: 50;
}

.export-dropdown-menu {
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.export-option {
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.export-option:hover {
  border-left-color: currentColor;
  padding-left: 1.25rem;
}

.export-btn:focus {
  outline: none;
  ring: 2px solid #3b82f6;
  ring-offset: 2px;
}

.export-btn:focus-visible {
  ring: 2px solid #3b82f6;
  ring-offset: 2px;
}

.export-btn.export-preparing::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: loadingShimmer 1.5s infinite;
}

@keyframes loadingShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.export-btn.export-preparing {
  animation: processingPulse 2s ease-in-out infinite;
}

@keyframes processingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
}

.export-btn.export-success::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: successRipple 0.6s ease-out;
}

@keyframes successRipple {
  to {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

.export-btn [data-enhanced-export-target="text"] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.export-btn.export-preparing [data-enhanced-export-target="text"],
.export-btn.export-success [data-enhanced-export-target="text"] {
  font-weight: 600;
  letter-spacing: 0.025em;
}

.export-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

.export-btn:not(.export-preparing):not(.export-success):hover [data-enhanced-export-target="icon"] {
  transform: translateY(-1px);
}

.export-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.export-dropdown-menu::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.export-dropdown-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.export-dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.9;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.animate-pulse-once {
  animation: pulse 0.6s ease-in-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out;
}

.animate-fade-in-scale {
  animation: fadeInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

[data-controller="import"] * {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-controller="import"] button,
[data-controller="import"] a {
  transition: all 0.2s ease;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

[data-import-target="progressBar"] {
  background-size: 200% 200%;
  animation: gradientShift 2s ease infinite;
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
  }
}

.glow-active {
  animation: glow 2s ease-in-out infinite;
}

@keyframes bounce-gentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

[data-import-target="uploadPrompt"] svg {
  animation: bounce-gentle 2s ease-in-out infinite;
}

@keyframes checkmark {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.checkmark-animate {
  animation: checkmark 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes spin-smooth {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin-smooth 1s linear infinite;
}

@supports (backdrop-filter: blur(10px)) {
  [data-controller="import"] {
    backdrop-filter: blur(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes error-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out;
}

.animate-error-pulse {
  animation: error-pulse 2s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes bounce-once {
  0%, 100% { 
    transform: translateY(0) scale(1);
  }
  25% { 
    transform: translateY(-20px) scale(1.05);
  }
  50% { 
    transform: translateY(0) scale(1);
  }
  75% { 
    transform: translateY(-10px) scale(1.02);
  }
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-bounce-once {
  animation: bounce-once 1s ease-in-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

[data-import-target="progressBar"],
[data-import-target="overallProgress"] {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-import-target="dropzone"]:hover {
  transition: all 0.3s ease;
}

.success-glow {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  animation: pulse 2s infinite;
}

.error-shake {
  animation: shake 0.5s;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}