/*
	 _   _                  _     _         
	| \ | |   ___    _ __  | |_  (_)   __ _ 
	|  \| |  / _ \  | '__| | __| | |  / _` |
	| |\  | | (_) | | |    | |_  | | | (_| |
	|_| \_|  \___/  |_|     \__| |_|  \__,_|
	                                         
	NortiaŽ Sibilla 
	UI Colors
	--
	First version    2023-06-28: 1.0.0 
	Current version  2023-06-28: 1.0.0
*/


:root{
	
	--white: #FFFFFF;
	--black: #000000;
	
	--black-10: rgba(0,0,0,0.1);
	--black-20: rgba(0,0,0,0.2);
	--black-30: rgba(0,0,0,0.3);
	--black-40: rgba(0,0,0,0.4);
	--black-50: rgba(0,0,0,0.5);
	--black-60: rgba(0,0,0,0.6);
	--black-70: rgba(0,0,0,0.7);
	--black-80: rgba(0,0,0,0.8);
	--black-90: rgba(0,0,0,0.9);
	
	--grey-100:#F9F9F9;
	--grey-200:#F4F4F4;
	--grey-300:#EAEAEA;
	--grey-400:#E1E1E1;
	--grey-500:#C6C6C6;
	--grey-600:#9E9E9E;
	--grey-700:#696969;
	--grey-750:#2C2C2C;
	--grey-800:#323232;
	--grey-900:#000000;
	
	--blue-50:#F4FAFF;
	--blue-100:#E3EEFF;
	--blue-200:#C8D6FF;
	--blue-300:#AAB8F;
	--blue-400:#737CFF;
	--blue-450:#00647B;
	--blue-500:#3D3AFF;
	--blue-600:#1D00FF;
	--blue-700:#1400A2;
	--blue-800:#0A005C;
	--blue-900:#020029;
	--dark-blue: #020234;
	
	--violet-50:#FEF8FF;
	--violet-100:#FDF1FF;
	--violet-200:#FAE3FF;
	--violet-300:#F7D6FF;
	--violet-400:#E2B4FF;
	--violet-500:#C589FF;
	--violet-600:#A159FD;
	--violet-700:#792ADE;
	--violet-800:#49168D;
	--violet-900:#220641;
	
	--red-50:#FEF6F5;
	--red-100:#FCEBE8;
	--red-200:#FADDD6;
	--red-300:#F8CFC2;
	--red-400:#F4B29B;
	--red-500:#F1916B;
	--red-600:#EE6D39;
	--red-700:#EC4E17;
	--red-800:#94330E;
	--red-900:#451A03;
	
	--orange-50:#FEFCF4;
	--orange-100:#FEF9E7;
	--orange-200:#FCF0D0;
	--orange-300:#FBE6B9;
	--orange-400:#F6C580;
	--orange-500:#F29C3F;
	--orange-600:#ED7415;
	--orange-650:#F06451;
	--orange-700:#B0530F;
	--orange-800:#703407;
	--orange-900:#341A02;
	
	--green-50:#F4FFF2;
	--green-100:#E9FEE4;
	--green-200:#DAFED2;
	--green-300:#CBFDBF;
	--green-400:#ACFC97;
	--green-500:#88EC6B;
	--green-600:#66D240;
	--green-700:#4D9D31;
	--green-800:#346424;
	--green-900:#1C3017;
	
	--magenta-50:#FEF8FF;
	--magenta-100:#FDF1FF;
	--magenta-200:#F9D3FF;
	--magenta-300:#F7BCFF;
	--magenta-400:#F286FF;
	--magenta-500:#EE4BFF;
	--magenta-600:#ED2DFF;
	--magenta-700:#B021BF;
	--magenta-800:#6F1578;
	--magenta-900:#340738;
	
	--yellow-50:#FFFFD6;
	--yellow-100:#FEFFAD;
	--yellow-200:#FEFF84;
	--yellow-300:#FDFF5B;
	--yellow-400:#FCF632;
	--yellow-500:#EFE40F;
	--yellow-600:#C6BF27;
	--yellow-700:#959033;
	--yellow-800:#605D30;
	--yellow-900:#2D2D1F;
	
	--brown-50:#F4EAE2;
	--brown-100:#EAD6C9;
	--brown-200:#DFC1AE;
	--brown-300:#D6AE95;
	--brown-400:#BC8B6F;
	--brown-500:#A46B49;
	--brown-600:#8D4D2A;
	--brown-700:#67361C;
	--brown-800:#432210;
	--brown-900:#231304;
	
	--cyan-50:#F0FEFF;
	--cyan-100:#E1FEFF;
	--cyan-200:#CDFDFF;
	--cyan-300:#B9FCFE;
	--cyan-400:#93FBFE;
	--cyan-500:#6FFAF;
	--cyan-600:#61FAFE;
	--cyan-700:#56DFE2;
	--cyan-800:#40A6A9;
	--cyan-900:#1C494A;
	
	
	
	
	
	
	--ui-c-white:#FFF;
	--ui-c-black:#000;
	
	--ui-c-grey-25:#FCFCFD;
	--ui-c-grey-50:#F9FAFB;
	--ui-c-grey-100:#F2F4F7;
	--ui-c-grey-200:#EAECF0;
	--ui-c-grey-300:#D0D5DD;
	--ui-c-grey-400:#98A2B3;
	--ui-c-grey-500:#667085;
	--ui-c-grey-600:#475467;
	--ui-c-grey-700:#344054;
	--ui-c-grey-800:#1D2939;
	--ui-c-grey-900:#101828;

	--ui-c-success-25:#F6FEF9;
	--ui-c-success-50:#ECFDF3;
	--ui-c-success-100:#DCFAE6;
	--ui-c-success-200:#ABEFC6;
	--ui-c-success-300:#75E0A7;
	--ui-c-success-400:#47CD89;
	--ui-c-success-500:#17B26A;
	--ui-c-success-600:#079455;
	--ui-c-success-700:#067647;
	--ui-c-success-800:#085D3A;
	--ui-c-success-900:#074D31;
	
	--ui-c-warning-25:#FFFCF5;
	--ui-c-warning-50:#FFFAEB;
	--ui-c-warning-100:#FEF0C7;
	--ui-c-warning-200:#FEDF89;
	--ui-c-warning-300:#FEC84B;
	--ui-c-warning-400:#FDB022;
	--ui-c-warning-500:#F79009;
	--ui-c-warning-600:#DC6803;
	--ui-c-warning-700:#B54708;
	--ui-c-warning-800:#93370D;
	--ui-c-warning-900:#7A2E0E;
	
	--ui-c-error-25:#FFFBFA;
	--ui-c-error-50:#FEF3F2;
	--ui-c-error-100:#FEE4E2;
	--ui-c-error-200:#FECDCA;
	--ui-c-error-300:#FDA29B;
	--ui-c-error-400:#F97066;
	--ui-c-error-500:#F04438;
	--ui-c-error-600:#D92D20;
	--ui-c-error-700:#B42318;
	--ui-c-error-800:#912018;
	--ui-c-error-900:#7A271A;
	
	--ui-c-blue-25:#F5FAFF;
	--ui-c-blue-50:#EFF8FF;
	--ui-c-blue-100:#D1E9FF;
	--ui-c-blue-200:#B2DDFF;
	--ui-c-blue-300:#84CAFF;
	--ui-c-blue-400:#53B1FD;
	--ui-c-blue-500:#2E90FA;
	--ui-c-blue-600:#1570EF;
	--ui-c-blue-700:#175CD3;
	--ui-c-blue-800:#1849A9;
	--ui-c-blue-900:#194185;
}


.c-white{ color:var(--white); }
.b-white{ background-color:var(--white); }


.b-black-10{ background-color:var(--black-10); }
.b-black-20{ background-color:var(--black-20); }
.b-black-30{ background-color:var(--black-30); }
.b-black-40{ background-color:var(--black-40); }
.b-black-50{ background-color:var(--black-50); }
.b-black-60{ background-color:var(--black-60); }
.b-black-70{ background-color:var(--black-70); }
.b-black-80{ background-color:var(--black-80); }
.b-black-90{ background-color:var(--black-90); }


.c-grey-100{ color:var(--grey-100); }
.c-grey-200{ color:var(--grey-200); }
.c-grey-300{ color:var(--grey-300); }
.c-grey-400{ color:var(--grey-400); }
.c-grey-500{ color:var(--grey-500); }
.c-grey-600{ color:var(--grey-600); }
.c-grey-700{ color:var(--grey-700); }
.c-grey-750{ color:var(--grey-750); }
.c-grey-800{ color:var(--grey-800); }
.c-grey-900{ color:var(--grey-900); }

.ch-grey-100:hover{ color:var(--grey-100); }
.ch-grey-200:hover{ color:var(--grey-200); }
.ch-grey-300:hover{ color:var(--grey-300); }
.ch-grey-400:hover{ color:var(--grey-400); }
.ch-grey-500:hover{ color:var(--grey-500); }
.ch-grey-600:hover{ color:var(--grey-600); }
.ch-grey-700:hover{ color:var(--grey-700); }
.ch-grey-800:hover{ color:var(--grey-800); }
.ch-grey-900:hover{ color:var(--grey-900); }

.b-grey-100{ background-color:var(--grey-100); }
.b-grey-200{ background-color:var(--grey-200); }
.b-grey-300{ background-color:var(--grey-300); }
.b-grey-400{ background-color:var(--grey-400); }
.b-grey-500{ background-color:var(--grey-500); }
.b-grey-600{ background-color:var(--grey-600); }
.b-grey-700{ background-color:var(--grey-700); }
.b-grey-750{ background-color:var(--grey-750); }
.b-grey-800{ background-color:var(--grey-800); }
.b-grey-900{ background-color:var(--grey-900); }

.bh-grey-100:hover{ background-color:var(--grey-100); }
.bh-grey-200:hover{ background-color:var(--grey-200); }
.bh-grey-300:hover{ background-color:var(--grey-300); }
.bh-grey-400:hover{ background-color:var(--grey-400); }
.bh-grey-500:hover{ background-color:var(--grey-500); }
.bh-grey-600:hover{ background-color:var(--grey-600); }
.bh-grey-700:hover{ background-color:var(--grey-700); }
.bh-grey-800:hover{ background-color:var(--grey-800); }
.bh-grey-900:hover{ background-color:var(--grey-900); }


.b-grey-to-100{ animation-name: grey-to-100; }
.b-grey-to-200{ animation-name: grey-to-200; }
.b-grey-to-300{ animation-name: grey-to-300; }
.b-grey-to-400{ animation-name: grey-to-400; }
.b-grey-to-500{ animation-name: grey-to-500; }
.b-grey-to-600{ animation-name: grey-to-600; }
.b-grey-to-700{ animation-name: grey-to-700; }
.b-grey-to-800{ animation-name: grey-to-800; }
.b-grey-to-900{ animation-name: grey-to-900; }

@keyframes grey-to-100{ 50%{ background-color:var(--grey-100); } }
@keyframes grey-to-200{ 50%{ background-color:var(--grey-200); } }
@keyframes grey-to-300{ 50%{ background-color:var(--grey-300); } }
@keyframes grey-to-400{ 50%{ background-color:var(--grey-400); } }
@keyframes grey-to-500{ 50%{ background-color:var(--grey-500); } }
@keyframes grey-to-600{ 50%{ background-color:var(--grey-600); } }
@keyframes grey-to-700{ 50%{ background-color:var(--grey-700); } }
@keyframes grey-to-800{ 50%{ background-color:var(--grey-800); } }
@keyframes grey-to-900{ 50%{ background-color:var(--grey-900); } }





.c-blue-50{ color:var(--blue-50); }
.c-blue-100{ color:var(--blue-100); }
.c-blue-200{ color:var(--blue-200); }
.c-blue-300{ color:var(--blue-300); }
.c-blue-400{ color:var(--blue-400); }
.c-blue-450{ color:var(--blue-450); }
.c-blue-500{ color:var(--blue-500); }
.c-blue-600{ color:var(--blue-600); }
.c-blue-700{ color:var(--blue-700); }
.c-blue-800{ color:var(--blue-800); }
.c-blue-900{ color:var(--blue-900); }
.c-dark-blue{ color:var(--dark-blue); }

.b-blue-50{ background-color:var(--blue-50); }
.b-blue-100{ background-color:var(--blue-100); }
.b-blue-200{ background-color:var(--blue-200); }
.b-blue-300{ background-color:var(--blue-300); }
.b-blue-400{ background-color:var(--blue-400); }
.b-blue-450{ background-color:var(--blue-450); }
.b-blue-500{ background-color:var(--blue-500); }
.b-blue-600{ background-color:var(--blue-600); }
.b-blue-700{ background-color:var(--blue-700); }
.b-blue-800{ background-color:var(--blue-800); }
.b-blue-900{ background-color:var(--blue-900); }
.b-dark-blue{ background-color:var(--dark-blue); }


.c-violet-50{ color:var(--violet-50); }
.c-violet-100{ color:var(--violet-100); }
.c-violet-200{ color:var(--violet-200); }
.c-violet-300{ color:var(--violet-300); }
.c-violet-400{ color:var(--violet-400); }
.c-violet-500{ color:var(--violet-500); }
.c-violet-600{ color:var(--violet-600); }
.c-violet-700{ color:var(--violet-700); }
.c-violet-800{ color:var(--violet-800); }
.c-violet-900{ color:var(--violet-900); }


.b-violet-50{ background-color:var(--violet-50); }
.b-violet-100{ background-color:var(--violet-100); }
.b-violet-200{ background-color:var(--violet-200); }
.b-violet-300{ background-color:var(--violet-300); }
.b-violet-400{ background-color:var(--violet-400); }
.b-violet-500{ background-color:var(--violet-500); }
.b-violet-600{ background-color:var(--violet-600); }
.b-violet-700{ background-color:var(--violet-700); }
.b-violet-800{ background-color:var(--violet-800); }
.b-violet-900{ background-color:var(--violet-900); }

.c-red-50{ color:var(--red-50); }
.c-red-100{ color:var(--red-100); }
.c-red-200{ color:var(--red-200); }
.c-red-300{ color:var(--red-300); }
.c-red-400{ color:var(--red-400); }
.c-red-500{ color:var(--red-500); }
.c-red-600{ color:var(--red-600); }
.c-red-700{ color:var(--red-700); }
.c-red-800{ color:var(--red-800); }
.c-red-900{ color:var(--red-900); }

.b-red-50{ background-color:var(--red-50); }
.b-red-100{ background-color:var(--red-100); }
.b-red-200{ background-color:var(--red-200); }
.b-red-300{ background-color:var(--red-300); }
.b-red-400{ background-color:var(--red-400); }
.b-red-500{ background-color:var(--red-500); }
.b-red-600{ background-color:var(--red-600); }
.b-red-700{ background-color:var(--red-700); }
.b-red-800{ background-color:var(--red-800); }
.b-red-900{ background-color:var(--red-900); }


.c-orange-50{ color:var(--red-50); }
.c-orange-100{ color:var(--red-100); }
.c-orange-200{ color:var(--red-200); }
.c-orange-300{ color:var(--red-300); }
.c-orange-400{ color:var(--red-400); }
.c-orange-500{ color:var(--red-500); }
.c-orange-600{ color:var(--red-600); }
.c-orange-650{ color:var(--orange-650); }
.c-orange-700{ color:var(--red-700); }
.c-orange-800{ color:var(--red-800); }
.c-orange-900{ color:var(--red-900); }

.b-orange-50{ background-color:var(--orange-50); }
.b-orange-100{ background-color:var(--orange-100); }
.b-orange-200{ background-color:var(--orange-200); }
.b-orange-300{ background-color:var(--orange-300); }
.b-orange-400{ background-color:var(--orange-400); }
.b-orange-500{ background-color:var(--orange-500); }
.b-orange-600{ background-color:var(--orange-600); }
.b-orange-650{ background-color:var(--orange-650); }
.b-orange-700{ background-color:var(--orange-700); }
.b-orange-800{ background-color:var(--orange-800); }
.b-orange-900{ background-color:var(--orange-900); }


.c-green-50{ color:var(--green-50); }
.c-green-100{ color:var(--green-100); }
.c-green-200{ color:var(--green-200); }
.c-green-300{ color:var(--green-300); }
.c-green-400{ color:var(--green-400); }
.c-green-500{ color:var(--green-500); }
.c-green-600{ color:var(--green-600); }
.c-green-700{ color:var(--green-700); }
.c-green-800{ color:var(--green-800); }
.c-green-900{ color:var(--green-900); }

.b-green-50{ background-color:var(--green-50); }
.b-green-100{ background-color:var(--green-100); }
.b-green-200{ background-color:var(--green-200); }
.b-green-300{ background-color:var(--green-300); }
.b-green-400{ background-color:var(--green-400); }
.b-green-500{ background-color:var(--green-500); }
.b-green-600{ background-color:var(--green-600); }
.b-green-700{ background-color:var(--green-700); }
.b-green-800{ background-color:var(--green-800); }
.b-green-900{ background-color:var(--green-900); }




.c-magenta-50{ color:var(--magenta-50); }
.c-magenta-100{ color:var(--magenta-100); }
.c-magenta-200{ color:var(--magenta-200); }
.c-magenta-300{ color:var(--magenta-300); }
.c-magenta-400{ color:var(--magenta-400); }
.c-magenta-500{ color:var(--magenta-500); }
.c-magenta-600{ color:var(--magenta-600); }
.c-magenta-700{ color:var(--magenta-700); }
.c-magenta-800{ color:var(--magenta-800); }
.c-magenta-900{ color:var(--magenta-900); }

.b-magenta-50{ background-color:var(--magenta-50); }
.b-magenta-100{ background-color:var(--magenta-100); }
.b-magenta-200{ background-color:var(--magenta-200); }
.b-magenta-300{ background-color:var(--magenta-300); }
.b-magenta-400{ background-color:var(--magenta-400); }
.b-magenta-500{ background-color:var(--magenta-500); }
.b-magenta-600{ background-color:var(--magenta-600); }
.b-magenta-700{ background-color:var(--magenta-700); }
.b-magenta-800{ background-color:var(--magenta-800); }
.b-magenta-900{ background-color:var(--magenta-900); }



.c-yellow-50{ color:var(--yellow-50); }
.c-yellow-100{ color:var(--yellow-100); }
.c-yellow-200{ color:var(--yellow-200); }
.c-yellow-300{ color:var(--yellow-300); }
.c-yellow-400{ color:var(--yellow-400); }
.c-yellow-500{ color:var(--yellow-500); }
.c-yellow-600{ color:var(--yellow-600); }
.c-yellow-700{ color:var(--yellow-700); }
.c-yellow-800{ color:var(--yellow-800); }
.c-yellow-900{ color:var(--yellow-900); }

.b-yellow-50{ background-color:var(--yellow-50); }
.b-yellow-100{ background-color:var(--yellow-100); }
.b-yellow-200{ background-color:var(--yellow-200); }
.b-yellow-300{ background-color:var(--yellow-300); }
.b-yellow-400{ background-color:var(--yellow-400); }
.b-yellow-500{ background-color:var(--yellow-500); }
.b-yellow-600{ background-color:var(--yellow-600); }
.b-yellow-700{ background-color:var(--yellow-700); }
.b-yellow-800{ background-color:var(--yellow-800); }
.b-yellow-900{ background-color:var(--yellow-900); }



.c-brown-50{ color:var(--brown-50); }
.c-brown-100{ color:var(--brown-100); }
.c-brown-200{ color:var(--brown-200); }
.c-brown-300{ color:var(--brown-300); }
.c-brown-400{ color:var(--brown-400); }
.c-brown-500{ color:var(--brown-500); }
.c-brown-600{ color:var(--brown-600); }
.c-brown-700{ color:var(--brown-700); }
.c-brown-800{ color:var(--brown-800); }
.c-brown-900{ color:var(--brown-900); }

.b-brown-50{ background-color:var(--brown-50); }
.b-brown-100{ background-color:var(--brown-100); }
.b-brown-200{ background-color:var(--brown-200); }
.b-brown-300{ background-color:var(--brown-300); }
.b-brown-400{ background-color:var(--brown-400); }
.b-brown-500{ background-color:var(--brown-500); }
.b-brown-600{ background-color:var(--brown-600); }
.b-brown-700{ background-color:var(--brown-700); }
.b-brown-800{ background-color:var(--brown-800); }
.b-brown-900{ background-color:var(--brown-900); }


.c-cyan-50{ color:var(--cyan-50); }
.c-cyan-100{ color:var(--cyan-100); }
.c-cyan-200{ color:var(--cyan-200); }
.c-cyan-300{ color:var(--cyan-300); }
.c-cyan-400{ color:var(--cyan-400); }
.c-cyan-500{ color:var(--cyan-500); }
.c-cyan-600{ color:var(--cyan-600); }
.c-cyan-700{ color:var(--cyan-700); }
.c-cyan-800{ color:var(--cyan-800); }
.c-cyan-900{ color:var(--cyan-900); }

.b-cyan-50{ background-color:var(--cyan-50); }
.b-cyan-100{ background-color:var(--cyan-100); }
.b-cyan-200{ background-color:var(--cyan-200); }
.b-cyan-300{ background-color:var(--cyan-300); }
.b-cyan-400{ background-color:var(--cyan-400); }
.b-cyan-500{ background-color:var(--cyan-500); }
.b-cyan-600{ background-color:var(--cyan-600); }
.b-cyan-700{ background-color:var(--cyan-700); }
.b-cyan-800{ background-color:var(--cyan-800); }
.b-cyan-900{ background-color:var(--cyan-900); }



.no-back{ background-color:transparent; }
.no-border{ border:0px; }





.op-10{ opacity:0.1; }
.op-20{ opacity:0.2; }
.op-30{ opacity:0.3; }
.op-40{ opacity:0.4; }
.op-50{ opacity:0.5; }
.op-60{ opacity:0.6; }
.op-70{ opacity:0.7; }
.op-80{ opacity:0.8; }
.op-90{ opacity:0.9; }
.op-100{ opacity:1; }