/* 
    Created on : 2 Jan. 2023, 7:05:11 pm
    Author     : Linko Technology PTY LTD
*/

:root {
   /*Pallete Colors*/
   --white-color: 255, 255, 255;
   --black-color: 66, 65, 61;
   --gray-light-color: 246, 245, 241;
   --gray-color: 214, 213, 210;
   --gray-dark-color: 171, 170, 168;
   --red-color: 219, 40, 40;
   --red-dark-color: 202, 16, 16;
   --orange-color: 242, 113, 28;
   --orange-dark-color: 229, 91, 0;
   --yellow-color: 251, 189, 8;
   --yellow-dark-color: 218, 163, 0;
   --olive-color: 181, 204, 24;
   --olive-dark-color: 160, 182, 5;
   --green-color: 33, 186, 69;
   --green-dark-color: 14, 164, 50;
   --teal-color: 0, 181, 173;
   --teal-dark-color: 0, 140, 134;
   --blue-color: 33, 133, 208;
   --blue-dark-color: 13, 113, 187;
   --violet-color: 100, 53, 201;
   --violet-dark-color: 79, 32, 181;
   --purple-color: 163, 51, 200;
   --purple-dark-color: 143, 30, 180;
   --pink-color: 224, 57, 151;
   --pink-dark-color: 225, 15, 133;
   --brown-color: 165, 103, 63;
   --brown-dark-color: 144, 83, 43;
   --alpha: 1;
   --bg-alpha: 1;
   --border-alpha: 1;
   --indigo-color: 76, 110, 245;
   --indigo-dark-color: 54, 79, 199;
   --slate-color: 108, 117, 125;
   --slate-dark-color: 73, 80, 87;
   --cyan-color: 34, 184, 207;
   --cyan-dark-color: 15, 158, 181;
}

/* Apha transparency */
.alpha-1 {
   --button-text-color: var(--black-color);
   --alpha: 0.1;
}

.alpha-2 {
   --button-text-color: var(--black-color);
   --alpha: 0.2;
}

.alpha-3 {
   --button-text-color: var(--black-color);
   --alpha: 0.3;
}

.alpha-4 {
   --button-text-color: var(--black-color);
   --alpha: 0.4;
}

.alpha-5 {
   --alpha: 0.5;
}

.alpha-6 {
   --alpha: 0.6;
}

.alpha-7 {
   --alpha: 0.7;
}

.alpha-8 {
   --alpha: 0.8;
}

.alpha-9 {
   --alpha: 0.9;
}

.alpha-10 {
   --alpha: 1;
}

.bg-alpha-1 {
   --button-text-color: var(--black-color);
   --bg-alpha: 0.1;
}

.bg-alpha-2 {
   --button-text-color: var(--black-color);
   --bg-alpha: 0.2;
}

.bg-alpha-3 {
   --button-text-color: var(--black-color);
   --bg-alpha: 0.3;
}

.bg-alpha-4 {
   --button-text-color: var(--black-color);
   --bg-alpha: 0.4;
}

.bg-alpha-5 {
   --bg-alpha: 0.5;
}

.bg-alpha-6 {
   --bg-alpha: 0.6;
}

.bg-alpha-7 {
   --bg-alpha: 0.7;
}

.bg-alpha-8 {
   --bg-alpha: 0.8;
}

.bg-alpha-9 {
   --bg-alpha: 0.9;
}

.bg-alpha-10 {
   --bg-alpha: 1;
}


.border-alpha-1 {
   --border-alpha: 0.1;
}

.border-alpha-2 {
   --border-alpha: 0.2;
}

.border-alpha-3 {
   --border-alpha: 0.3;
}

.border-alpha-4 {
   --border-alpha: 0.4;
}

.border-alpha-5 {
   --border-alpha: 0.5;
}

.border-alpha-6 {
   --border-alpha: 0.6;
}

.border-alpha-7 {
   --border-alpha: 0.7;
}

.border-alpha-8 {
   --border-alpha: 0.8;
}

.border-alpha-9 {
   --border-alpha: 0.9;
}

.border-alpha-10 {
   --border-alpha: 1;
}




.white {
   color: rgba(var(--white-color), var(--alpha)) !important;
}

.border-white {
   border-color: rgba(var(--white-color), var(--border-alpha)) !important;
}

.bg-white {
   background-color: rgba(var(--white-color), var(--bg-alpha)) !important;
}


.black {
   color: rgba(var(--black-color), var(--alpha)) !important;
}

.border-black {
   border-color: rgba(var(--black-color), var(--border-alpha)) !important;
}

.bg-black {
   background-color: rgba(var(--black-color), var(--bg-alpha)) !important;
}

.gray {
   color: rgba(var(--gray-color), var(--alpha)) !important;
}

.gray-light {
   color: rgba(var(--gray-light-color), var(--alpha)) !important;
}

.gray-dark {
   color: rgba(var(--gray-dark-color), var(--alpha)) !important;
}

.border-gray {
   border-color: rgba(var(--gray-color), var(--border-alpha)) !important;
}

.border-gray-light {
   border-color: rgba(var(--gray-light-color), var(--border-alpha)) !important;
}

.border-gray-dark {
   border-color: rgba(var(--gray-dark-color), var(--border-alpha)) !important;
}

.bg-gray {
   background-color: rgba(var(--gray-color), var(--bg-alpha)) !important;
}

.bg-gray-light {
   background-color: rgba(var(--gray-light-color), var(--bg-alpha)) !important;
}

.bg-gray-dark {
   background-color: rgba(var(--gray-dark-color), var(--bg-alpha)) !important;
}

.bg-gray:hover {
   background-color: rgba(var(--gray-dark-color), var(--bg-alpha)) !important;
}

.red {
   color: rgba(var(--red-color), var(--alpha)) !important;
}

.red-dark {
   color: rgba(var(--red-dark-color), var(--alpha)) !important;
}

.border-red {
   border-color: rgba(var(--red-color), var(--border-alpha)) !important;
}

.border-red-dark {
   border-color: rgba(var(--red-dark-color), var(--border-alpha)) !important;
}

.bg-red {
   background-color: rgba(var(--red-color), var(--bg-alpha)) !important;
}

.bg-red-dark {
   background-color: rgba(var(--red-dark-color), var(--bg-alpha)) !important;
}

.bg-red:hover {
   background-color: rgba(var(--red-dark-color), var(--bg-alpha)) !important;
}

.orange {
   color: rgba(var(--orange-color), var(--alpha)) !important;
}

.orange-dark {
   color: rgba(var(--orange-dark-color), var(--alpha)) !important;
}

.border-orange {
   border-color: rgba(var(--orange-color), var(--border-alpha)) !important;
}

.border-orange-dark {
   border-color: rgba(var(--orange-dark-color), var(--border-alpha)) !important;
}

.bg-orange {
   background-color: rgba(var(--orange-color), var(--bg-alpha)) !important;
}

.bg-orange-dark {
   background-color: rgba(var(--orange-dark-color), var(--bg-alpha)) !important;
}

.bg-orange:hover {
   background-color: rgba(var(--orange-dark-color), var(--bg-alpha)) !important;
}

.yellow {
   color: rgba(var(--yellow-color), var(--alpha)) !important;
}

.yellow-dark {
   color: rgba(var(--yellow-dark-color), var(--alpha)) !important;
}

.border-yellow {
   border-color: rgba(var(--yellow-color), var(--border-alpha)) !important;
}

.border-yellow-dark {
   border-color: rgba(var(--yellow-dark-color), var(--border-alpha)) !important;
}

.bg-yellow {
   background-color: rgba(var(--yellow-color), var(--bg-alpha)) !important;
}

.bg-yellow-dark {
   background-color: rgba(var(--yellow-dark-color), var(--bg-alpha)) !important;
}

.bg-yellow:hover {
   background-color: rgba(var(--yellow-dark-color), var(--bg-alpha)) !important;
}

.olive {
   color: rgba(var(--olive-color), var(--alpha)) !important;
}

.olive-dark {
   color: rgba(var(--olive-dark-color), var(--alpha)) !important;
}

.border-olive {
   border-color: rgba(var(--olive-color), var(--border-alpha)) !important;
}

.border-olive-dark {
   border-color: rgba(var(--olive-dark-color), var(--border-alpha)) !important;
}

.bg-olive {
   background-color: rgba(var(--olive-color), var(--bg-alpha)) !important;
}

.bg-olive-dark {
   background-color: rgba(var(--olive-dark-color), var(--bg-alpha)) !important;
}

.bg-olive:hover {
   background-color: rgba(var(--olive-dark-color), var(--bg-alpha)) !important;
}

.green {
   color: rgba(var(--green-color), var(--alpha)) !important;
}

.green-dark {
   color: rgba(var(--green-dark-color), var(--alpha)) !important;
}

.border-green {
   border-color: rgba(var(--green-color), var(--border-alpha)) !important;
}

.border-green-dark {
   border-color: rgba(var(--green-dark-color), var(--border-alpha)) !important;
}

.bg-green {
   background-color: rgba(var(--green-color), var(--bg-alpha)) !important;
}

.bg-green-dark {
   background-color: rgba(var(--green-dark-color), var(--bg-alpha)) !important;
}

.bg-green:hover {
   background-color: rgba(var(--green-dark-color), var(--bg-alpha)) !important;
}

.teal {
   color: rgba(var(--teal-color), var(--alpha)) !important;
}

.teal-dark {
   color: rgba(var(--teal-dark-color), var(--alpha)) !important;
}

.border-teal {
   border-color: rgba(var(--teal-color), var(--border-alpha)) !important;
}

.border-teal-dark {
   border-color: rgba(var(--teal-dark-color), var(--border-alpha)) !important;
}

.bg-teal {
   background-color: rgba(var(--teal-color), var(--bg-alpha)) !important;
}

.bg-teal-dark {
   background-color: rgba(var(--teal-dark-color), var(--bg-alpha)) !important;
}

.bg-teal:hover {
   background-color: rgba(var(--teal-dark-color), var(--bg-alpha)) !important;
}

.blue {
   color: rgba(var(--blue-color), var(--alpha)) !important;
}

.blue-dark {
   color: rgba(var(--blue-dark-color), var(--alpha)) !important;
}

.border-blue {
   border-color: rgba(var(--blue-color), var(--border-alpha)) !important;
}

.border-blue-dark {
   border-color: rgba(var(--blue-dark-color), var(--border-alpha)) !important;
}

.bg-blue {
   background-color: rgba(var(--blue-color), var(--bg-alpha)) !important;
}

.bg-blue-dark {
   background-color: rgba(var(--blue-dark-color), var(--bg-alpha)) !important;
}

.bg-blue:hover {
   background-color: rgba(var(--blue-dark-color), var(--bg-alpha)) !important;
}

.violet {
   color: rgba(var(--violet-color), var(--alpha)) !important;
}

.violet-dark {
   color: rgba(var(--violet-dark-color), var(--alpha)) !important;
}

.border-violet {
   border-color: rgba(var(--violet-color), var(--border-alpha)) !important;
}

.border-violet-dark {
   border-color: rgba(var(--violet-dark-color), var(--border-alpha)) !important;
}

.bg-violet {
   background-color: rgba(var(--violet-color), var(--bg-alpha)) !important;
}

.bg-violet-dark {
   background-color: rgba(var(--violet-dark-color), var(--bg-alpha)) !important;
}

.bg-violet:hover {
   background-color: rgba(var(--violet-dark-color), var(--bg-alpha)) !important;
}

.purple {
   color: rgba(var(--purple-color), var(--alpha)) !important;
}

.purple-dark {
   color: rgba(var(--purple-dark-color), var(--alpha)) !important;
}

.border-purple {
   border-color: rgba(var(--purple-color), var(--border-alpha)) !important;
}

.border-purple-dark {
   border-color: rgba(var(--purple-dark-color), var(--border-alpha)) !important;
}

.bg-purple {
   background-color: rgba(var(--purple-color), var(--bg-alpha)) !important;
}

.bg-purple-dark {
   background-color: rgba(var(--purple-dark-color), var(--bg-alpha)) !important;
}

.bg-purple:hover {
   background-color: rgba(var(--purple-dark-color), var(--bg-alpha)) !important;
}

.pink {
   color: rgba(var(--pink-color), var(--alpha)) !important;
}

.pink-dark {
   color: rgba(var(--pink-dark-color), var(--alpha)) !important;
}

.border-pink {
   border-color: rgba(var(--pink-color), var(--border-alpha)) !important;
}

.border-pink-dark {
   border-color: rgba(var(--pink-dark-color), var(--border-alpha)) !important;
}

.bg-pink {
   background-color: rgba(var(--pink-color), var(--bg-alpha)) !important;
}

.bg-pink-dark {
   background-color: rgba(var(--pink-dark-color), var(--bg-alpha)) !important;
}

.bg-pink:hover {
   background-color: rgba(var(--pink-dark-color), var(--bg-alpha)) !important;
}

.brown {
   color: rgba(var(--brown-color), var(--alpha)) !important;
}

.brown-dark {
   color: rgba(var(--brown-dark-color), var(--alpha)) !important;
}

.border-brown {
   border-color: rgba(var(--brown-color), var(--border-alpha)) !important;
}

.border-brown-dark {
   border-color: rgba(var(--brown-dark-color), var(--border-alpha)) !important;
}

.bg-brown {
   background-color: rgba(var(--brown-color), var(--bg-alpha)) !important;
}

.bg-brown-dark {
   background-color: rgba(var(--brown-dark-color), var(--bg-alpha)) !important;
}

.bg-brown:hover {
   background-color: rgba(var(--brown-dark-color), var(--bg-alpha)) !important;
}

.indigo {
   color: rgba(var(--indigo-color), var(--alpha)) !important;
}

.indigo-dark {
   color: rgba(var(--indigo-dark-color), var(--alpha)) !important;
}

.border-indigo {
   border-color: rgba(var(--indigo-color), var(--border-alpha)) !important;
}

.border-indigo-dark {
   border-color: rgba(var(--indigo-dark-color), var(--border-alpha)) !important;
}

.bg-indigo {
   background-color: rgba(var(--indigo-color), var(--bg-alpha)) !important;
}

.bg-indigo-dark {
   background-color: rgba(var(--indigo-dark-color), var(--bg-alpha)) !important;
}

.bg-indigo:hover {
   background-color: rgba(var(--indigo-dark-color), var(--bg-alpha)) !important;
}

.slate {
   color: rgba(var(--slate-color), var(--alpha)) !important;
}

.slate-dark {
   color: rgba(var(--slate-dark-color), var(--alpha)) !important;
}

.border-slate {
   border-color: rgba(var(--slate-color), var(--border-alpha)) !important;
}

.border-slate-dark {
   border-color: rgba(var(--slate-dark-color), var(--border-alpha)) !important;
}

.bg-slate {
   background-color: rgba(var(--slate-color), var(--bg-alpha)) !important;
}

.bg-slate-dark {
   background-color: rgba(var(--slate-dark-color), var(--bg-alpha)) !important;
}

.cyan {
   color: rgba(var(--cyan-color), var(--alpha)) !important;
}

.cyan-dark {
   color: rgba(var(--cyan-dark-color), var(--alpha)) !important;
}

.border-cyan {
   border-color: rgba(var(--cyan-color), var(--border-alpha)) !important;
}

.border-cyan-dark {
   border-color: rgba(var(--cyan-dark-color), var(--border-alpha)) !important;
}

.bg-cyan {
   background-color: rgba(var(--cyan-color), var(--bg-alpha)) !important;
}

.bg-cyan-dark {
   background-color: rgba(var(--cyan-dark-color), var(--bg-alpha)) !important;
}

.bg-cyan:hover {
   background-color: rgba(var(--cyan-dark-color), var(--bg-alpha)) !important;
}

.text-auto {
   color: rgba(var(--button-text-color), 1);
}