SME-Web/src/index.css

@import "tailwindcss";

:root {
  --primary: #41644A;
  --primaryLight: #ffffff;
  --primaryLight2: #4b7455;
  --primaryLight3: #dae9de;
  --dashBoardBg: #ffffff;
  --mainViewBg: #edeaeb;
  --highlightBg1: #edeaeb;
  --menuTextCol: #98a0a8;
  --menuTextColActive: #41644A;
  --menuBgColActive: #edeaeb;
  --menuTextHoverCol: #e7e7e7; 
  
  --greyTextCol: #98a0a8;
  --lightGreyCol: #e1e1e1;
  --compBgCol: #ffffff; 

  --avatarBgCol: #41644A;
  --avatarTextCol: #ffffff;


  --profileMenuModalBg: #ffffff;
  --profileMenuModalTextCol: #98a0a8;
  --profileMenuModalTextColActive: #2d2d2d;
  --profileMenuModalBgColActive: #edeaeb;



  --sendForSignTextCol: #ffffff;
  --sendForSignBgCol: #d02f56;
  
  --sendForSignDropDownText: #000000;
  --sendForSignDropDownBg: #ffffff;
  --sendForSignDropDownHover: #e7e7e7;


  --loaderBg: #ffffff;

  --modalBg: #ffffff;

  --hideModalBg: #2d2d2d;

  --processStepOneTextHead: #000000;

  --modalSubmitBG:#1919d7;
  --modalSubmitBGHover:#395ee1;
}


/* Sortable CSS */
.sortable-ghost {
  opacity: 0.5;
  transform: scale(1.05);
  transition: all 0.3s;
}

.dropped-item {
  touch-action: none;
}

canvas {
  touch-action: none;
  -ms-touch-action: none; /* For older IE/Edge */
  pointer-events: auto;
}

@keyframes textColorChange {
  0%, 100% {
    color: white;
  }
  50% {
    color: #41644A; /* Tailwind blue-500 */
  }
}
.animate-text {
  animation: textColorChange 2s infinite ease-in-out;
}

@layer utilities {
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }
     /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
    }
  }




  /* Loader CSS */
 /* From Uiverse.io by Juanes200122 */ 
.pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #41644A;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #7e7e7e;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #686868;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #41644A;
}
  
  /* Animations */
@keyframes ringA {
  from, 4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%, 54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%, to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {
  from, 12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%, 62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%, to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%, 58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {
  from, 8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%, 50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}