:root {
    --primary: #1DD698;
    --primary-dark: #1ac28a;
    --secondary: #0000FF;
    --grey: #646363;
    --grey-light: #b5b5b5;
    --grey-lighter: #E3E4E4;
    --grey-lightest: #F0F0F0;
    --grey-dark: #505050; 
    --grey-darker: #3a3939;
    --grey-darkest: #1C1C1C;
    --error: #FEE0E1;
}


.primary-text {
    color: var(--primary);
}

.primary {
    background-color: var(--primary);
}

.secondary {
    background-color: var(--secondary);
}

.red {
    background-color: #d0103a;
}

.grey {
    background-color: var(--grey-dark);
}

.dark-grey {
    background-color: var(--grey-darker);
}

.dark-grey-text {
    color:  var(--grey-darker);
}

.light-grey{
    background-color: var(--grey-lightest);
}

.light-grey-text {
    color: var(--grey-lightest);
}

.white {
    background-color: #fff;
}

.white-text {
    color: #fff;
}

.off-white {
    background-color: #f7f7f7;
}

.off-white-text {
    color: #f7f7f7;
}

.red{
    background-color: #f93a3a;
}

.red-text{
    color: #f93a3a;
}

.red-border {
    border: 1px solid #f93a3a;
}

.pink {
    background-color: #f99d9d;
}

.green{
    background-color: #a4c64f;
}

.green-text{
    color: #a4c64f;
}

.black-text {
    color: #000000 !important;
}

.blue-light{
    background-color: #e1eaee;
}

.blue-light-border{
    border: 1px solid #d6dfe3;    
}

.grey-text {
    color: var(--grey-dark) !important;
}

.background-black {
    background-color: rgb(0, 0, 0);
}