:root{
    --main-color: #142144;
    --main-col-light: #727a8f;
    --main-col-border: #d0d3da;
    
    --theme-col-black: #1a1a1a;
    --theme-col-gray: #ccc;
    --theme-col-lightgray: #ecedf0;
    --theme-col-pink: #f78da7;
    --theme-col-orange: #ff6900;
    --theme-col-red: #e6001e;
    --theme-col-blue: #0186e3;
    --theme-col-lightblue: #e6f3fc;
    --theme-col-yellow: #fcb900;
    --theme-col-green: #006837;
    --theme-col-purple: #9b51e0;
}
.has-main-color{
    color: var(--main-color)!important;
}
.has-main-background-color{
    background: var(--main-color)!important;
}
.has-black-color{
    color: var(--theme-col-black)!important;
}
.has-black-background-color{
    background: var(--theme-col-black)!important;
}
.has-white-color{
    color: #fff!important;
}
.has-white-background-color{
    background: #fff!important;
}
.has-lightgray-color{
    color: var(--theme-col-lightgray)!important;
}
.has-lightgray-background-color{
    background: var(--theme-col-lightgray)!important;
}
.has-pink-color{
    color: var(--theme-col-pink)!important;
}
.has-pink-background-color{
    background: var(--theme-col-pink)!important;
}
.has-orange-color{
    color: var(--theme-col-orange)!important;
}
.has-orange-background-color{
    background: var(--theme-col-orange)!important;
}
.has-red-color{
    color: var(--theme-col-red)!important;
}
.has-red-background-color{
    background: var(--theme-col-red)!important;
}
.has-blue-color{
    color: var(--theme-col-blue)!important;
}
.has-blue-background-color{
    background: var(--theme-col-blue)!important;
}
.has-lightblue-color{
    color: var(--theme-col-lightblue)!important;
}
.has-lightblue-background-color{
    background: var(--theme-col-lightblue)!important;
}
.has-yellow-color{
    color: var(--theme-col-yellow)!important;
}
.has-yellow-background-color{
    background: var(--theme-col-yellow)!important;
}
.has-green-color{
    color: var(--theme-col-green)!important;
}
.has-green-background-color{
    background: var(--theme-col-green)!important;
}
.has-purple-color{
    color: var(--theme-col-purple)!important;
}
.has-purple-background-color{
    background: var(--theme-col-purple)!important;
}