:root {
          --bg-white-100: rgba(255, 255, 255, 1);
          --text-white-100: rgba(255, 255, 255, 1);
          --border-white-100: rgba(255, 255, 255, 1);
          --bg-white-90: rgba(255, 255, 255, 0.9);
          --text-white-90: rgba(255, 255, 255, 0.9);
          --border-white-90: rgba(255, 255, 255, 0.9);
          --bg-white-80: rgba(255, 255, 255, 0.8);
          --text-white-80: rgba(255, 255, 255, 0.8);
          --border-white-80: rgba(255, 255, 255, 0.8);
          --bg-white-70: rgba(255, 255, 255, 0.7);
          --text-white-70: rgba(255, 255, 255, 0.7);
          --border-white-70: rgba(255, 255, 255, 0.7);
          --bg-white-60: rgba(255, 255, 255, 0.6);
          --text-white-60: rgba(255, 255, 255, 0.6);
          --border-white-60: rgba(255, 255, 255, 0.6);
          --bg-white-50: rgba(255, 255, 255, 0.5);
          --text-white-50: rgba(255, 255, 255, 0.5);
          --border-white-50: rgba(255, 255, 255, 0.5);
          --bg-white-40: rgba(255, 255, 255, 0.4);
          --text-white-40: rgba(255, 255, 255, 0.4);
          --border-white-40: rgba(255, 255, 255, 0.4);
          --bg-white-30: rgba(255, 255, 255, 0.3);
          --text-white-30: rgba(255, 255, 255, 0.3);
          --border-white-30: rgba(255, 255, 255, 0.3);
          --bg-white-20: rgba(255, 255, 255, 0.2);
          --text-white-20: rgba(255, 255, 255, 0.2);
          --border-white-20: rgba(255, 255, 255, 0.2);
          --bg-white-10: rgba(255, 255, 255, 0.1);
          --text-white-10: rgba(255, 255, 255, 0.1);
          --border-white-10: rgba(255, 255, 255, 0.1);
          --bg-blue-light-100: rgba(82, 197, 235, 1);
          --text-blue-light-100: rgba(82, 197, 235, 1);
          --border-blue-light-100: rgba(82, 197, 235, 1);
          --bg-blue-light-90: rgba(82, 197, 235, 0.9);
          --text-blue-light-90: rgba(82, 197, 235, 0.9);
          --border-blue-light-90: rgba(82, 197, 235, 0.9);
          --bg-blue-light-80: rgba(82, 197, 235, 0.8);
          --text-blue-light-80: rgba(82, 197, 235, 0.8);
          --border-blue-light-80: rgba(82, 197, 235, 0.8);
          --bg-blue-light-70: rgba(82, 197, 235, 0.7);
          --text-blue-light-70: rgba(82, 197, 235, 0.7);
          --border-blue-light-70: rgba(82, 197, 235, 0.7);
          --bg-blue-light-60: rgba(82, 197, 235, 0.6);
          --text-blue-light-60: rgba(82, 197, 235, 0.6);
          --border-blue-light-60: rgba(82, 197, 235, 0.6);
          --bg-blue-light-50: rgba(82, 197, 235, 0.5);
          --text-blue-light-50: rgba(82, 197, 235, 0.5);
          --border-blue-light-50: rgba(82, 197, 235, 0.5);
          --bg-blue-light-40: rgba(82, 197, 235, 0.4);
          --text-blue-light-40: rgba(82, 197, 235, 0.4);
          --border-blue-light-40: rgba(82, 197, 235, 0.4);
          --bg-blue-light-30: rgba(82, 197, 235, 0.3);
          --text-blue-light-30: rgba(82, 197, 235, 0.3);
          --border-blue-light-30: rgba(82, 197, 235, 0.3);
          --bg-blue-light-20: rgba(82, 197, 235, 0.2);
          --text-blue-light-20: rgba(82, 197, 235, 0.2);
          --border-blue-light-20: rgba(82, 197, 235, 0.2);
          --bg-blue-light-10: rgba(82, 197, 235, 0.1);
          --text-blue-light-10: rgba(82, 197, 235, 0.1);
          --border-blue-light-10: rgba(82, 197, 235, 0.1);
          --bg-blue-dark-100: rgba(3, 102, 169, 1);
          --text-blue-dark-100: rgba(3, 102, 169, 1);
          --border-blue-dark-100: rgba(3, 102, 169, 1);
          --bg-blue-dark-90: rgba(3, 102, 169, 0.9);
          --text-blue-dark-90: rgba(3, 102, 169, 0.9);
          --border-blue-dark-90: rgba(3, 102, 169, 0.9);
          --bg-blue-dark-80: rgba(3, 102, 169, 0.8);
          --text-blue-dark-80: rgba(3, 102, 169, 0.8);
          --border-blue-dark-80: rgba(3, 102, 169, 0.8);
          --bg-blue-dark-70: rgba(3, 102, 169, 0.7);
          --text-blue-dark-70: rgba(3, 102, 169, 0.7);
          --border-blue-dark-70: rgba(3, 102, 169, 0.7);
          --bg-blue-dark-60: rgba(3, 102, 169, 0.6);
          --text-blue-dark-60: rgba(3, 102, 169, 0.6);
          --border-blue-dark-60: rgba(3, 102, 169, 0.6);
          --bg-blue-dark-50: rgba(3, 102, 169, 0.5);
          --text-blue-dark-50: rgba(3, 102, 169, 0.5);
          --border-blue-dark-50: rgba(3, 102, 169, 0.5);
          --bg-blue-dark-40: rgba(3, 102, 169, 0.4);
          --text-blue-dark-40: rgba(3, 102, 169, 0.4);
          --border-blue-dark-40: rgba(3, 102, 169, 0.4);
          --bg-blue-dark-30: rgba(3, 102, 169, 0.3);
          --text-blue-dark-30: rgba(3, 102, 169, 0.3);
          --border-blue-dark-30: rgba(3, 102, 169, 0.3);
          --bg-blue-dark-20: rgba(3, 102, 169, 0.2);
          --text-blue-dark-20: rgba(3, 102, 169, 0.2);
          --border-blue-dark-20: rgba(3, 102, 169, 0.2);
          --bg-blue-dark-10: rgba(3, 102, 169, 0.1);
          --text-blue-dark-10: rgba(3, 102, 169, 0.1);
          --border-blue-dark-10: rgba(3, 102, 169, 0.1);
}

        /* white Colour selection */
         .bg-white-100 { background-color: var(--bg-white-100); }
         .text-white-100 { color: var(--text-white-100); }
         .border-white-100 { border-color: var(--border-white-100); }
         .bg-white-90 { background-color: var(--bg-white-90); }
         .text-white-90 { color: var(--text-white-90); }
         .border-white-90 { border-color: var(--border-white-90); }
         .bg-white-80 { background-color: var(--bg-white-80); }
         .text-white-80 { color: var(--text-white-80); }
         .border-white-80 { border-color: var(--border-white-80); }
         .bg-white-70 { background-color: var(--bg-white-70); }
         .text-white-70 { color: var(--text-white-70); }
         .border-white-70 { border-color: var(--border-white-70); }
         .bg-white-60 { background-color: var(--bg-white-60); }
         .text-white-60 { color: var(--text-white-60); }
         .border-white-60 { border-color: var(--border-white-60); }
         .bg-white-50 { background-color: var(--bg-white-50); }
         .text-white-50 { color: var(--text-white-50); }
         .border-white-50 { border-color: var(--border-white-50); }
         .bg-white-40 { background-color: var(--bg-white-40); }
         .text-white-40 { color: var(--text-white-40); }
         .border-white-40 { border-color: var(--border-white-40); }
         .bg-white-30 { background-color: var(--bg-white-30); }
         .text-white-30 { color: var(--text-white-30); }
         .border-white-30 { border-color: var(--border-white-30); }
         .bg-white-20 { background-color: var(--bg-white-20); }
         .text-white-20 { color: var(--text-white-20); }
         .border-white-20 { border-color: var(--border-white-20); }
         .bg-white-10 { background-color: var(--bg-white-10); }
         .text-white-10 { color: var(--text-white-10); }
         .border-white-10 { border-color: var(--border-white-10); }
        /* blue-light Colour selection */
         .bg-blue-light-100 { background-color: var(--bg-blue-light-100); }
         .text-blue-light-100 { color: var(--text-blue-light-100); }
         .border-blue-light-100 { border-color: var(--border-blue-light-100); }
         .bg-blue-light-90 { background-color: var(--bg-blue-light-90); }
         .text-blue-light-90 { color: var(--text-blue-light-90); }
         .border-blue-light-90 { border-color: var(--border-blue-light-90); }
         .bg-blue-light-80 { background-color: var(--bg-blue-light-80); }
         .text-blue-light-80 { color: var(--text-blue-light-80); }
         .border-blue-light-80 { border-color: var(--border-blue-light-80); }
         .bg-blue-light-70 { background-color: var(--bg-blue-light-70); }
         .text-blue-light-70 { color: var(--text-blue-light-70); }
         .border-blue-light-70 { border-color: var(--border-blue-light-70); }
         .bg-blue-light-60 { background-color: var(--bg-blue-light-60); }
         .text-blue-light-60 { color: var(--text-blue-light-60); }
         .border-blue-light-60 { border-color: var(--border-blue-light-60); }
         .bg-blue-light-50 { background-color: var(--bg-blue-light-50); }
         .text-blue-light-50 { color: var(--text-blue-light-50); }
         .border-blue-light-50 { border-color: var(--border-blue-light-50); }
         .bg-blue-light-40 { background-color: var(--bg-blue-light-40); }
         .text-blue-light-40 { color: var(--text-blue-light-40); }
         .border-blue-light-40 { border-color: var(--border-blue-light-40); }
         .bg-blue-light-30 { background-color: var(--bg-blue-light-30); }
         .text-blue-light-30 { color: var(--text-blue-light-30); }
         .border-blue-light-30 { border-color: var(--border-blue-light-30); }
         .bg-blue-light-20 { background-color: var(--bg-blue-light-20); }
         .text-blue-light-20 { color: var(--text-blue-light-20); }
         .border-blue-light-20 { border-color: var(--border-blue-light-20); }
         .bg-blue-light-10 { background-color: var(--bg-blue-light-10); }
         .text-blue-light-10 { color: var(--text-blue-light-10); }
         .border-blue-light-10 { border-color: var(--border-blue-light-10); }
        /* blue-dark Colour selection */
         .bg-blue-dark-100 { background-color: var(--bg-blue-dark-100); }
         .text-blue-dark-100 { color: var(--text-blue-dark-100); }
         .border-blue-dark-100 { border-color: var(--border-blue-dark-100); }
         .bg-blue-dark-90 { background-color: var(--bg-blue-dark-90); }
         .text-blue-dark-90 { color: var(--text-blue-dark-90); }
         .border-blue-dark-90 { border-color: var(--border-blue-dark-90); }
         .bg-blue-dark-80 { background-color: var(--bg-blue-dark-80); }
         .text-blue-dark-80 { color: var(--text-blue-dark-80); }
         .border-blue-dark-80 { border-color: var(--border-blue-dark-80); }
         .bg-blue-dark-70 { background-color: var(--bg-blue-dark-70); }
         .text-blue-dark-70 { color: var(--text-blue-dark-70); }
         .border-blue-dark-70 { border-color: var(--border-blue-dark-70); }
         .bg-blue-dark-60 { background-color: var(--bg-blue-dark-60); }
         .text-blue-dark-60 { color: var(--text-blue-dark-60); }
         .border-blue-dark-60 { border-color: var(--border-blue-dark-60); }
         .bg-blue-dark-50 { background-color: var(--bg-blue-dark-50); }
         .text-blue-dark-50 { color: var(--text-blue-dark-50); }
         .border-blue-dark-50 { border-color: var(--border-blue-dark-50); }
         .bg-blue-dark-40 { background-color: var(--bg-blue-dark-40); }
         .text-blue-dark-40 { color: var(--text-blue-dark-40); }
         .border-blue-dark-40 { border-color: var(--border-blue-dark-40); }
         .bg-blue-dark-30 { background-color: var(--bg-blue-dark-30); }
         .text-blue-dark-30 { color: var(--text-blue-dark-30); }
         .border-blue-dark-30 { border-color: var(--border-blue-dark-30); }
         .bg-blue-dark-20 { background-color: var(--bg-blue-dark-20); }
         .text-blue-dark-20 { color: var(--text-blue-dark-20); }
         .border-blue-dark-20 { border-color: var(--border-blue-dark-20); }
         .bg-blue-dark-10 { background-color: var(--bg-blue-dark-10); }
         .text-blue-dark-10 { color: var(--text-blue-dark-10); }
         .border-blue-dark-10 { border-color: var(--border-blue-dark-10); }