:root {
    /*Text Color*/
    --text: #4C626B;
    --text-dark:#333f44;
    --muted: var(--gray-600);    
    --text-dark-color: #36454F;
    --dark-theme-color: rgb(54 69 79);
    --text-bold: #111827;
    --text-light-color: #848484;
    --heading-text:var(--gray-700);
    
    /*Font weight*/
    --font-light:300;
    --font-regular:500;
    --font-medium:600;
    --font-bold:700;
    --font-bolder:900;
    /*Background color*/
    --bg-white:#ffffff;
    
    --color-green: rgb(73 200 124);
    --color-danger: rgb(255 101 101);
    --color-inprogress: rgb(246 202 58 / 37%); 
    --devider-bg:rgba(0, 0, 0, 0.175);
    --shadow: 7px 2px 12px rgba(7, 23, 50, .04);
    --success-shadow: 7px 2px 12px rgba(69, 202, 107, 0.15);
    --text-highlight:linear-gradient(90deg, #CA06DC 0%, #0951CE 100%);
     --link: #82b1ff;
  --placeholder:#848484;
  
   /*Status Color*/
   --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-muted: #6c757d;
  --color-light: #f8f9fa;
  --color-dark: #343a40;
  --color-purple: #8A3FFC;
  --color-pink: #FA5A7D;
}
:root{
    /*Gray*/
--gray-100:#f8f9fa;	/*Lightest backgrounds, card headers*/
--gray-200:#e9ecef;	/*Table borders, input group addons*/
--gray-300:#dee2e6;	/*Standard borders, divider lines*/
--gray-400:#ced4da;	/*Input borders, placeholders*/
--gray-500:#adb5bd;	/*Muted text, disabled icons*/
--gray-600:#6c757d;	/*Secondary text, sub-headlines*/
--gray-700:#495057;	/*Main body text*/
--gray-800:#343a40;	/*Dark UI elements, hover states*/
--gray-900:#212529;	/*Headings, nearly black text*/

/*Green*/
    --green-25:#f5fff9;
    --green-50:#E6FAEE;
    --green-100:#B0EEC9;
    --green-200:#8AE6AF;
    --green-300:#54DB8A;
    --green-400:#33D473;
    --green-500:#00C950;
    --green-600:#00B749;
    --green-700:#008F39;
    --green-800:#006F2C;
    --green-800:#005422;
    
    /*Orange*/
    --orange-50:#FFF0E6;
    --orange-100:#FFD1B0;
    --orange-200:#FFBA8A;
    --orange-300:#FF9B54;
    --orange-400:#FF8733;
    --orange-500:#FF6900;
    --orange-600:#E86000;
    --orange-700:#B54B00;
    --orange-800:#8C3A00;
    --orange-900:#6B2C00;
    
    /*Red*/
    --red-50:#FFEAEB;
    --red-100:#FEBEC1;
    --red-200:#FD9EA3;
    --red-300:#FC7278;
    --red-400:#FC565E;
    --red-500:#FB2C36;
    --red-600:#E42831;
    --red-700:#B21F26;
    --red-800:#8A181E;
    --red-900:#691217;
    
    /*Teal*/
    --teal-50:#E6F8F6;
    --teal-100:#B0EAE4;
    --teal-200:#8AE0D7;
    --teal-300:#54D1C4;
    --teal-400:#33C9B9;
    --teal-500:#00BBA7;
    --teal-600:#00AA98;
    --teal-700:#008577;
    --teal-800:#00675C;
    --teal-900:#004F46;
    
    /*Emerald*/
    --emerald-50:#E6F8F2;
    --emerald-100:#B0EAD7;
    --emerald-200:#8AE0C3;
    --emerald-300:#54D2A8;
    --emerald-400:#33C997;
    --emerald-500:#00BC7D;
    --emerald-600:#00AB72;
    --emerald-700:#008559;
    --emerald-800:#006745;
    --emerald-900:#004F35;
    
    /*Cyan*/
    --cyan-50:#E6F8FB;
    --cyan-100:#B0E9F4;
    --cyan-200:#8ADEEE;
    --cyan-300:#54CFE7;
    --cyan-400:#33C6E2;
    --cyan-500:#00B8DB;
    --cyan-600:#00A7C7;
    --cyan-700:#00839B;
    --cyan-800:#006578;
    --cyan-900:#004D5C;
    
    /*Blue*/
    --blue-50:#EAF2FF;
    --blue-100:#BDD7FF;
    --blue-200:#9DC4FF;
    --blue-300:#71A9FF;
    --blue-400:#5599FF;
    --blue-500:#2B7FFF;
    --blue-600:#2774E8;
    --blue-700:#1F5AB5;
    --blue-800:#18468C;
    --blue-900:#12356B;
    
    /*Indigo*/
    --indigo-50:#EFEFFF;
    --indigo-100:#CECDFF;
    --indigo-200:#B6B5FF;
    --indigo-300:#9594FF;
    --indigo-400:#817FFF;
    --indigo-500:#615FFF;
    --indigo-600:#5856E8;
    --indigo-700:#4543B5;
    --indigo-800:#35348C;
    --indigo-900:#29286B;
    
    /*Purple*/
    --purple-50:#F7EDFF;
    --purple-100:#E6C6FF;
    --purple-200:#D9AAFF;
    --purple-300:#C883FF;
    --purple-400:#BD6BFF;
    --purple-500:#AD46FF;
    --purple-600:#9D40E8;
    --purple-700:#7B32B5;
    --purple-800:#5F278C;
    --purple-900:#491D6B;
    
    /*Pink*/
    --pink-50:#FEEBF5;
    --pink-100:#FCC0E0;
    --pink-200:#FBA1D1;
    --pink-300:#F976BB;
    --pink-400:#F85CAE;
    --pink-500:#F6339A;
    --pink-600:#E02E8C;
    --pink-700:#AF246D;
    --pink-800:#871C55;
    --pink-900:#671541;
    
    /*Sky*/
    --sky-50:#E6F6FE;
    --sky-100:#B0E3FC;
    --sky-200:#8AD6FA;
    --sky-300:#54C3F8;
    --sky-400:#33B8F6;
    --sky-500:#00A6F4;
    --sky-600:#0097DE;
    --sky-700:#0076AD;
    --sky-800:#005B86;
    --sky-900:#004666;       
}
/*The Standard Theme Colors*/
:root{
 --iff-primary:var(--theme-color);
 --iff-secondary:#6c757d;
 --iff-success:#198754;
 --iff-danger:#dc3545;
 --iff-warning:#ffc107;
 --iff-info:#0dcaf0;
 --iff-light:#f8f9fa;
 --iff-dark:#212529;
 --iff-static-color:#31b6b0;
}
/*Size Unit*/
:root{
    --size:4px;
    --size-sm:calc(var(--size) * 2);
    --size-md:calc(var(--size-sm) * 2);
    --size-lg:calc(var(--size-sm) * 3);
    --size-xl:calc(var(--size-md) * 2);
}
/*Font style common*/
:root{
     --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 28px;
    --font-size-3xl: 32px;
    /* ======================
     FONT WEIGHT
  ====================== */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}
/*Border Radius*/
:root{
    --corner:var(--size-sm);
    --circle:100%;
    --half-circle:50%;
    --quater-circle:25%;
}

/*Standard Styles*/
:root{
    --box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}

/*Color Shades*/
:root{ 
  --primary-50:  color-mix(in srgb, var(--iff-primary) 10%, white);
  --primary-100: color-mix(in srgb, var(--iff-primary) 20%, white);
  --primary-200: color-mix(in srgb, var(--iff-primary) 30%, white);
  --primary-300: color-mix(in srgb, var(--iff-primary) 40%, white);
  --primary-400: color-mix(in srgb, var(--iff-primary) 60%, white);

  --primary-500: var(--iff-primary);

  --primary-600: color-mix(in srgb, var(--iff-primary) 90%, black);
  --primary-700: color-mix(in srgb, var(--iff-primary) 75%, black);
  --primary-800: color-mix(in srgb, var(--iff-primary) 60%, black);
  --primary-900: color-mix(in srgb, var(--iff-primary) 45%, black);
  
  /*Static Color Shades*/
  --static-color-25:  color-mix(in srgb, var(--iff-static-color) 5%, white);
   --static-color-50:  color-mix(in srgb, var(--iff-static-color) 10%, white);
  --static-color-100: color-mix(in srgb, var(--iff-static-color) 20%, white);
  --static-color-200: color-mix(in srgb, var(--iff-static-color) 30%, white);
  --static-color-300: color-mix(in srgb, var(--iff-static-color) 40%, white);
  --static-color-400: color-mix(in srgb, var(--iff-static-color) 60%, white);

  --static-color-500: var(--iff-static-color);

  --static-clor-600: color-mix(in srgb, var(--iff-static-color) 90%, black);
  --static-clor-700: color-mix(in srgb, var(--iff-static-color) 75%, black);
  --static-clor-800: color-mix(in srgb, var(--iff-static-color) 60%, black);
  --static-clor-900: color-mix(in srgb, var(--iff-static-color) 45%, black);  
}


:root {

    /* INFO */
    --info-bg: #f5f9ff;
    --info-border: #d6e5ff;
    --info-icon-bg: #eaf2ff;
    --info-icon: #2563eb;
    --info-title: #1e3a8a;

    /* SUCCESS */
    --success-bg: #f3fcf7;
    --success-border: #cdeed8;
    --success-icon-bg: #e5f8ec;
    --success-icon: #16a34a;
    --success-title: #166534;

    /* WARNING */
    --warning-bg: #fffaf2;
    --warning-border: #ffe2b8;
    --warning-icon-bg: #fff1d6;
    --warning-icon: #f59e0b;
    --warning-title: #92400e;

    /* DANGER */
    --danger-bg: #fff5f5;
    --danger-border: #ffd5d5;
    --danger-icon-bg: #ffe9e9;
    --danger-icon: #dc2626;
    --danger-title: #991b1b;

    /* NEUTRAL */
    --neutral-bg: #f8fafc;
    --neutral-border: #e2e8f0;
    --neutral-icon-bg: #edf2f7;
    --neutral-icon: #475569;
    --neutral-title: #1e293b;    
}

/*Primary*/
.primary-50{
    color: var(--primary-50);
}
.primary-100{
    color: var(--primary-100);
}
.primary-200{
    color: var(--primary-200);
}
.primary-300{
    color: var(--primary-300);
}
.primary-400{
    color: var(--primary-400);
}
.primary-500{
    color: var(--primary-500);
}
.primary-600{
    color: var(--primary-600);
}
.primary-700{
    color: var(--primary-700);
}
.primary-800{
    color: var(--primary-800);
}
.primary-900{
    color: var(--primary-900);
}
/*Gray Background*/
.bg-primary-50{
    background-color: var(--primary-50);
}
.bg-primary-100{
    background-color: var(--primary-100);
}
.bg-primary-200{
    background-color: var(--primary-200);
}
.bg-primary-300{
    background-color: var(--primary-300);
}
.bg-primary-400{
    background-color: var(--primary-400);
}
.bg-primary-500{
    background-color: var(--primary-500);
}
.bg-primary-600{
    background-color: var(--primary-600);
}
.bg-primary-700{
    background-color: var(--primary-700);
}
.bg-primary-800{
    background-color: var(--primary-800);
}
.bg-primary-900{
    background-color: var(--primary-900);
}

/*Primary*/
.static-color-50{
    color: var(--static-color-50);
}
.static-color-100{
    color: var(--static-color-100);
}
.static-color-200{
    color: var(--static-color-200);
}
.static-color-300{
    color: var(--static-color-300);
}
.static-color-400{
    color: var(--static-color-400);
}
.static-color-500{
    color: var(--static-color-500);
}
.static-color-600{
    color: var(--static-color-600);
}
.static-color-700{
    color: var(--static-color-700);
}
.static-color-800{
    color: var(--static-color-800);
}
.static-color-900{
    color: var(--static-color-900);
}

/*Gray Background*/
.bg-static-color-50{
    background-color: var(--static-color-50);
}
.bg-static-color-100{
    background-color: var(--static-color-100);
}
.bg-static-color-200{
    background-color: var(--static-color-200);
}
.bg-static-color-300{
    background-color: var(--static-color-300);
}
.bg-static-color-400{
    background-color: var(--static-color-400);
}
.bg-static-color-500{
    background-color: var(--static-color-500);
}
.bg-static-color-600{
    background-color: var(--static-color-600);
}
.bg-static-color-700{
    background-color: var(--static-color-700);
}
.bg-static-color-800{
    background-color: var(--static-color-800);
}
.bg-static-color-900{
    background-color: var(--static-color-900);
}
/*Gray Text*/
.gray-50{
    color: var(--gray-50);
}
.gray-100{
    color: var(--gray-100);
}
.gray-200{
    color: var(--gray-200);
}
.gray-300{
    color: var(--gray-300);
}
.gray-400{
    color: var(--gray-400);
}
.gray-500{
    color: var(--gray-500);
}
.gray-600{
    color: var(--gray-600);
}
.gray-700{
    color: var(--gray-700);
}
.gray-800{
    color: var(--gray-800);
}
.gray-900{
    color: var(--gray-900);
}
/*Gray Background*/
.bg-gray-50{
    background-color: var(--gray-50);
}
.bg-gray-100{
    background-color: var(--gray-100);
}
.bg-gray-200{
    background-color: var(--gray-200);
}
.bg-gray-300{
    background-color: var(--gray-300);
}
.bg-gray-400{
    background-color: var(--gray-400);
}
.bg-gray-500{
    background-color: var(--gray-500);
}
.bg-gray-600{
    background-color: var(--gray-600);
}
.bg-gray-700{
    background-color: var(--gray-700);
}
.bg-gray-800{
    background-color: var(--gray-800);
}
.bg-gray-900{
    background-color: var(--gray-900);
}


/*Blue Text*/
.blue-50{
    color: var(--blue-50);
}
.blue-100{
    color: var(--blue-100);
}
.blue-200{
    color: var(--blue-200);
}
.blue-300{
    color: var(--blue-300);
}
.blue-400{
    color: var(--blue-400);
}
.blue-500{
    color: var(--blue-500);
}
.blue-600{
    color: var(--blue-600);
}
.blue-700{
    color: var(--blue-700);
}
.blue-800{
    color: var(--blue-800);
}
.blue-900{
    color: var(--blue-900);
}
/*Blue Background*/
.bg-blue-50{
    background-color: var(--blue-50);
}
.bg-blue-100{
    background-color: var(--blue-100);
}
.bg-blue-200{
    background-color: var(--blue-200);
}
.bg-blue-300{
    background-color: var(--blue-300);
}
.bg-blue-400{
    background-color: var(--blue-400);
}
.bg-blue-500{
    background-color: var(--blue-500);
}
.bg-blue-600{
    background-color: var(--blue-600);
}
.bg-blue-700{
    background-color: var(--blue-700);
}
.bg-blue-800{
    background-color: var(--blue-800);
}
.bg-blue-900{
    background-color: var(--blue-900);
}

/*orange Text*/
.orange-50{
    color: var(--orange-50);
}
.orange-100{
    color: var(--orange-100);
}
.orange-200{
    color: var(--orange-200);
}
.orange-300{
    color: var(--orange-300);
}
.orange-400{
    color: var(--orange-400);
}
.orange-500{
    color: var(--orange-500);
}
.orange-600{
    color: var(--orange-600);
}
.orange-700{
    color: var(--orange-700);
}
.orange-800{
    color: var(--orange-800);
}
.orange-900{
    color: var(--orange-900);
}
/*Blue Background*/
.bg-orange-50{
    background-color: var(--orange-50);
}
.bg-orange-100{
    background-color: var(--orange-100);
}
.bg-orange-200{
    background-color: var(--orange-200);
}
.bg-orange-300{
    background-color: var(--orange-300);
}
.bg-orange-400{
    background-color: var(--orange-400);
}
.bg-orange-500{
    background-color: var(--orange-500);
}
.bg-orange-600{
    background-color: var(--orange-600);
}
.bg-orange-700{
    background-color: var(--orange-700);
}
.bg-orange-800{
    background-color: var(--orange-800);
}
.bg-orange-900{
    background-color: var(--orange-900);
}

/*Cyan Text*/
.cyan-50{
    color: var(--cyan-50);
}
.cyan-100{
    color: var(--cyan-100);
}
.cyan-200{
    color: var(--cyan-200);
}
.cyan-300{
    color: var(--cyan-300);
}
.cyan-400{
    color: var(--cyan-400);
}
.cyan-500{
    color: var(--cyan-500);
}
.cyan-600{
    color: var(--cyan-600);
}
.cyan-700{
    color: var(--cyan-700);
}
.cyan-800{
    color: var(--cyan-800);
}
.cyan-900{
    color: var(--cyan-900);
}
/*Blue Background*/
.bg-cyan-50{
    background-color: var(--cyan-50);
}
.bg-cyan-100{
    background-color: var(--cyan-100);
}
.bg-cyan-200{
    background-color: var(--cyan-200);
}
.bg-cyan-300{
    background-color: var(--cyan-300);
}
.bg-cyan-400{
    background-color: var(--cyan-400);
}
.bg-cyan-500{
    background-color: var(--cyan-500);
}
.bg-cyan-600{
    background-color: var(--cyan-600);
}
.bg-cyan-700{
    background-color: var(--cyan-700);
}
.bg-cyan-800{
    background-color: var(--cyan-800);
}
.bg-cyan-900{
    background-color: var(--cyan-900);
}

/*Red Text*/
.red-50{
    color: var(--red-50);
}
.red-100{
    color: var(--red-100);
}
.red-200{
    color: var(--red-200);
}
.red-300{
    color: var(--red-300);
}
.red-400{
    color: var(--red-400);
}
.red-500{
    color: var(--red-500);
}
.red-600{
    color: var(--red-600);
}
.red-700{
    color: var(--red-700);
}
.red-800{
    color: var(--red-800);
}
.red-900{
    color: var(--red-900);
}
/*Blue Background*/
.bg-red-50{
    background-color: var(--red-50);
}
.bg-red-100{
    background-color: var(--red-100);
}
.bg-red-200{
    background-color: var(--red-200);
}
.bg-red-300{
    background-color: var(--red-300);
}
.bg-red-400{
    background-color: var(--red-400);
}
.bg-red-500{
    background-color: var(--red-500);
}
.bg-red-600{
    background-color: var(--red-600);
}
.bg-red-700{
    background-color: var(--red-700);
}
.bg-red-800{
    background-color: var(--red-800);
}
.bg-red-900{
    background-color: var(--red-900);
}
/*=========FONT SIZE CLASSES===========*/
.font-size-xs{
    font-size: var(--font-size-xs);
}
.font-size-sm{
    font-size: var(--font-size-sm);
}
.font-size-md{
    font-size: var(--font-size-md);
}
.font-size-lg{
    font-size: var(--font-size-lg);
}
.font-size-xl{
    font-size: var(--font-size-xl);
}
/*=========FONT WEIGHT CLASSES===========*/
.font-weight-light{
    font-weight: var(--font-weight-light);
}
.font-weight-ragular{
    font-weight: var(--font-weight-ragular);
}
.font-weight-medium{
    font-weight: var(--font-weight-medium);
}
.font-weight-semibold{
    font-weight: var(--font-weight-semibold);
}
.font-weight-bold{
    font-weight: var(--font-weight-bold);
}

/*===========HEIGHT CLASSES=============*/
.height-100{
    height:100%;
}
.height-75{
    height:75%;
}
.height-50{
    height:50%;
}
.height-25{
    height:25%;
}
.height-0{
    height:inherit;
}
.mandatory{
    color:red !important;
}