:root {
    /* --theme-color-1: #3498db;
    --theme-color-2: #0676BD;
    --theme-color-3: #274c77; */
    --theme-color-4: #3182ce; /* used->link */
    --theme-color-5: #07203f; /* used->reg-button */ /* #0a3161  */
    --theme-color-5-shadow: rgba(35, 33, 61, 0.12); /* shadow colour used in the input click  */
}

.theme-5{
    color: var(--theme-color-5);
}
.bg-theme-5 {
    background-color: var(--theme-color-5);
}

.theme-4{
    color: var(--theme-color-4);
}

.theme-3{
    color: var(--theme-color-3);
}

.theme-2{
    color: var(--theme-color-2);
}

.theme-1{
    color: var(--theme-color-1);
}

.purple-5{
    color: #23213d;
}

.purple-4{
    color: #0676BD;
}

.purple-3{
    color: #35B1FF;
}

.purple-2{
    color: #7ECDFF;
}

.purple-1{
    color: #C6E9FF;
}

.blue-5{
    color: #00426B;
    /* color: #23213d; */
}

.blue-4{
    color: #0676BD;
}

.blue-3{
    color: #35B1FF;
}

.blue-2{
    color: #7ECDFF;
}

.blue-1{
    color: #C6E9FF;
}

.gray-5{
    color: #161616;
}

.gray-4{
    color: #282828;
}

.gray-3{
    color: #494949;
}

.gray-2{
    color: #858585;
}

.gray-1{
    color: #F3F3F3;
}

.white{
    color: #FFF;
}

.red-5{
    color: #550000;
}

.red-4{
    color: #990F0F;
}

.red-3{
    color: #DD2C2C;
}

.red-2{
    color: #FF6A6A;
}

.red-1{
    color: #FFC0C0;
}

.green-5{
    color: #004729;
}

.green-4{
    color: #0D8B56;
}

.green-3{
    color: #28CF89;
}

.green-2{
    color: #6AFFC0;
}

.green-1{
    color: #C0FFE5;
}

.yellow-5{
    color: #5C4200;
}

.yellow-4{
    color: #AD7D00;
}

.yellow-3{
    color: #FFB700;
}

.yellow-2{
    color: #FFD15C;
}

.yellow-1{
    color: #FFEBB7;
}