@import "tailwindcss";

:root {
  --primary: #005AB5;
  --primaryLight: #ffffff;
  --primaryLight2: #6a92c2;
  --primaryLight3: #dae9de;
  --dashBoardBg: #ffffff;
  --mainViewBg: #F8F9FC;
  --highlightBg1: #edeaeb;
  --menuTextCol: #98a0a8;
  --menuTextColActive: #005AB5;
  --menuBgColActive: #FFFFFF;
  --menuTextHoverCol: #e7e7e7;

  --greyTextCol: #98a0a8;
  --lightGreyCol: #e1e1e1;
  --compBgCol: #ffffff;

  --avatarBgCol: #3D74B6;
  --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;

  /* Figma Design */
  --sidebarBg: #005AB5;
  --sidebarDropDownBg : #003C78;
  --sidebarMenuCol : #FFFFFF;
  --documentUploadBg :#FFFFFF;
  --mainPrimaryBtn : #077DEC




}


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

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

@keyframes slowPing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.custom-ping {
  animation: slowPing 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}


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 */
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Group Border - START */
.group-border {
  position: absolute;
  border: 1px dashed var(--primary);
  /* pointer-events: none; */
}

.bottom-border>div {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background-color: var(--primary);
  color: var(--primaryLight);
  padding: 2px 8px;
  border-radius: 5px;
}

.bottom-border>div:hover {
  background-color: var(--primaryLight2);
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* Group Border - END */


/* 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;
  }
}

.bottom-border>div:hover {
  background-color: var(--primaryLight2);
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

/* Group Border - END */



/* JoyRide - START */
.__floater__body > div > button:last-child {
  display: none !important;
}

/* JoyRide - END */