:root {
    --colour-white-1: #FFFFFF;
    --colour-gray-2: #F5F5F5;
    --colour-gray-3: #E1E1E1;
    --colour-gray-4: #6E7175;
    --colour-gray-5: #394A55;
    --colour-gray-6: #8C8C8C;
    --colour-black-1: #262626;
    --colour-black-2: #1D1D1D;
    --colour-black-3: #23272E;


    --colour-yellow-1: #FFCB00;
    --colour-yellow-2: #FFFAE6;
    --colour-orange-1: #FDAB3D;
    --colour-red-1: #FF642E;
    --colour-red-2: #CF3016;
    --colour-red-3: #FF2644;
    --colour-red-4: #FFEEEE;

    --colour-blue-1: #009AFF;
    --colour-blue-2: #0086C0;
    --colour-blue-3: #87DBFF;
    --colour-blue-4: #CCEEFD;
    --colour-blue-5: #292F4C;
    --colour-blue-6: #3287E7;
    --colour-blue-10: #2E6BFB;
    --colour-blue-11: #93A3BC;
    --colour-blue-12: #60A5FA;
    --colour-cyan-1: #00C8B1;
    --colour-lime-1: #B5DA46;
    --colour-green-1: #00A65A;
    --colour-green-2: #EFFFE3;

    --colour-magenta-1: #EBC8FE;
    --colour-magenta-2: #FF5AC4;
    --colour-magenta-3: #FF158A;
    --colour-purple-1: #A25DDC;

    --colour-highlight-1: rgba(245, 245, 245, .5); /* #F5F5F5 50% */
    --colour-highlight-2: rgba(0, 154, 255, .1); /* #009AFF 10% */

    --colour-background-1: rgba(41, 47, 76, .4); /* #292F4C 40% */

    --colour-text-1: #262626;
    --colour-text-2: #6E7175;
    --colour-text-3: rgba(38, 38, 38, .25); /* #262626 25% */
    --colour-text-4: #009AFF;
    --colour-text-5: #FF158A;
    --colour-text-6: #FFFFFF;
    --colour-text-7: #FF642E;
    --colour-text-8: #00A65A;

}

/* new color start */

.bg-colour-white-1,
.bg-colour-white-1-hover:hover {
    background-color: var(--colour-white-1) !important;
}

.border-colour-white-1,
.border-colour-white-1-hover:hover {
    border: 1px solid var(--colour-white-1) !important;
}

.bg-colour-gray-2,
.bg-colour-gray-2-hover:hover {
    background-color: var(--colour-gray-2) !important;
}

.border-colour-gray-2,
.border-colour-gray-2-hover:hover {
    border: 1px solid var(--colour-gray-2) !important;
}

.bg-colour-gray-3,
.bg-colour-gray-3-hover:hover {
    background-color: var(--colour-gray-3) !important;
}

.border-colour-gray-3,
.border-colour-gray-3-hover:hover {
    border: 1px solid var(--colour-gray-3) !important;
}

.bg-colour-gray-4,
.bg-colour-gray-4-hover:hover {
    background-color: var(--colour-gray-4) !important;
}

.border-colour-gray-4,
.border-colour-gray-4-hover:hover {
    border: 1px solid var(--colour-gray-4) !important;
}

.bg-colour-gray-5,
.bg-colour-gray-5-hover:hover {
    background-color: var(--colour-gray-5) !important;
}

.border-colour-gray-5,
.border-colour-gray-5-hover:hover {
    border: 1px solid var(--colour-gray-5) !important;
}

.bg-colour-gray-6,
.bg-colour-gray-6-hover:hover {
    background-color: var(--colour-gray-6) !important;
}

.border-colour-gray-6,
.border-colour-gray-6-hover:hover {
    border: 1px solid var(--colour-gray-6) !important;
}

.bg-colour-black-1,
.bg-colour-black-1-hover:hover {
    background-color: var(--colour-black-1) !important;
}

.border-colour-black-1,
.border-colour-black-1-hover:hover {
    border: 1px solid var(--colour-black-1) !important;
}

.bg-colour-yellow-1,
.bg-colour-yellow-1-hover:hover {
    background-color: var(--colour-yellow-1) !important;
}

.border-colour-yellow-1,
.border-colour-yellow-1-hover:hover {
    border: 1px solid var(--colour-yellow-1) !important;
}

.bg-colour-yellow-2,
.bg-colour-yellow-2-hover:hover {
    background-color: var(--colour-yellow-2) !important;
}

.border-colour-yellow-2,
.border-colour-yellow-2-hover:hover {
    border: 1px solid var(--colour-yellow-2) !important;
}

.bg-colour-orange-1,
.bg-colour-orange-1-hover:hover {
    background-color: var(--colour-orange-1) !important;
}

.border-colour-orange-1,
.border-colour-orange-1-hover:hover {
    border: 1px solid var(--colour-orange-1) !important;
}

.bg-colour-red-1,
.bg-colour-red-1-hover:hover {
    background-color: var(--colour-red-1) !important;
}

.border-colour-red-1,
.border-colour-red-1-hover:hover {
    border: 1px solid var(--colour-red-1) !important;
}

.bg-colour-red-2,
.bg-colour-red-2-hover:hover {
    background-color: var(--colour-red-2) !important;
}

.border-colour-red-2,
.border-colour-red-2-hover:hover {
    border: 1px solid var(--colour-red-2) !important;
}

.bg-colour-red-3,
.bg-colour-red-3-hover:hover {
    background-color: var(--colour-red-3) !important;
}

.border-colour-red-3,
.border-colour-red-3-hover:hover {
    border: 1px solid var(--colour-red-3) !important;
}

.bg-colour-red-4,
.bg-colour-red-4-hover:hover {
    background-color: var(--colour-red-4) !important;
}

.border-colour-red-4,
.border-colour-red-4-hover:hover {
    border: 1px solid var(--colour-red-4) !important;
}

.bg-colour-blue-1,
.bg-colour-blue-1-hover:hover {
    background-color: var(--colour-blue-1) !important;
}

.border-colour-blue-1,
.border-colour-blue-1-hover:hover {
    border: 1px solid var(--colour-blue-1) !important;
}

.bg-colour-blue-2,
.bg-colour-blue-2-hover:hover {
    background-color: var(--colour-blue-2) !important;
}

.border-colour-blue-2,
.border-colour-blue-2-hover:hover {
    border: 1px solid var(--colour-blue-2) !important;
}

.bg-colour-blue-3,
.bg-colour-blue-3-hover:hover {
    background-color: var(--colour-blue-3) !important;
}

.border-colour-blue-3,
.border-colour-blue-3-hover:hover {
    border: 1px solid var(--colour-blue-3) !important;
}

.bg-colour-blue-4,
.bg-colour-blue-4-hover:hover {
    background-color: var(--colour-blue-4) !important;
}

.border-colour-blue-4,
.border-colour-blue-4-hover:hover {
    border: 1px solid var(--colour-blue-4) !important;
}

.bg-colour-blue-5,
.bg-colour-blue-5-hover:hover {
    background-color: var(--colour-blue-5) !important;
}

.border-colour-blue-5,
.border-colour-blue-5-hover:hover {
    border: 1px solid var(--colour-blue-5) !important;
}

.bg-colour-cyan-1,
.bg-colour-cyan-1-hover:hover {
    background-color: var(--colour-cyan-1) !important;
}

.border-colour-cyan-1,
.border-colour-cyan-1-hover:hover {
    border: 1px solid var(--colour-cyan-1) !important;
}

.bg-colour-lime-1,
.bg-colour-lime-1-hover:hover {
    background-color: var(--colour-lime-1) !important;
}

.border-colour-lime-1,
.border-colour-lime-1-hover:hover {
    border: 1px solid var(--colour-lime-1) !important;
}

.bg-colour-green-1,
.bg-colour-green-1-hover:hover {
    background-color: var(--colour-green-1) !important;
}

.border-colour-green-1,
.border-colour-green-1-hover:hover {
    border: 1px solid var(--colour-green-1) !important;
}

.bg-colour-green-2,
.bg-colour-green-2-hover:hover {
    background-color: var(--colour-green-2) !important;
}

.border-colour-green-2,
.border-colour-green-2-hover:hover {
    border: 1px solid var(--colour-green-2) !important;
}

.bg-colour-magenta-1,
.bg-colour-magenta-1-hover:hover {
    background-color: var(--colour-magenta-1) !important;
}

.border-colour-magenta-1,
.border-colour-magenta-1-hover:hover {
    border: 1px solid var(--colour-magenta-1) !important;
}

.bg-colour-magenta-2,
.bg-colour-magenta-2-hover:hover {
    background-color: var(--colour-magenta-2) !important;
}

.border-colour-magenta-2,
.border-colour-magenta-2-hover:hover {
    border: 1px solid var(--colour-magenta-2) !important;
}

.bg-colour-magenta-3,
.bg-colour-magenta-3-hover:hover {
    background-color: var(--colour-magenta-3) !important;
}

.border-colour-magenta-3,
.border-colour-magenta-3-hover:hover {
    border: 1px solid var(--colour-magenta-3) !important;
}

.bg-colour-purple-1,
.bg-colour-purple-1-hover:hover {
    background-color: var(--colour-purple-1) !important;
}

.border-colour-purple-1,
.border-colour-purple-1-hover:hover {
    border: 1px solid var(--colour-purple-1) !important;
}

.bg-colour-highlight-1,
.bg-colour-highlight-1-hover:hover {
    background-color: var(--colour-highlight-1) !important;
}

.border-colour-highlight-1,
.border-colour-highlight-1-hover:hover {
    border: 1px solid var(--colour-highlight-1) !important;
}

.bg-colour-highlight-2,
.bg-colour-highlight-2-hover:hover {
    background-color: var(--colour-highlight-2) !important;
}

.border-colour-highlight-2,
.border-colour-highlight-2-hover:hover {
    border: 1px solid var(--colour-highlight-2) !important;
}

.bg-colour-background-1,
.bg-colour-background-1-hover:hover {
    background-color: var(--colour-background-1) !important;
}

.colour-text-1,
.colour-text-1-hover:hover {
    color: var(--colour-text-1) !important;
}

.colour-text-2,
.colour-text-2-hover:hover {
    color: var(--colour-text-2) !important;
}

.colour-text-3,
.colour-text-3-hover:hover {
    color: var(--colour-text-3) !important;
}

.colour-text-4,
.colour-text-4-hover:hover {
    color: var(--colour-text-4) !important;
}

.colour-text-5,
.colour-text-5-hover:hover {
    color: var(--colour-text-5) !important;
}

.colour-text-6,
.colour-text-6-hover:hover {
    color: var(--colour-text-6) !important;
}

.colour-text-7,
.colour-text-7-hover:hover {
    color: var(--colour-text-7) !important;
}

/* new color end */