:root {
     --primary-color: #090326;
     --border-color: #090326;
     --font-color: #fff;
     --hover-color: #ffa21a;
     --color-opacity: 9, 3, 38;
}

[primarycolor="black"] {
     --primary-color: #090326;
     --border-color: #090326;
     --hover-color: #090326;
     --color-opacity: 9, 3, 38;
}

[primarycolor="gray"] {
     --primary-color: #A6A6A6;
     --border-color: #A6A6A6;
     --hover-color: #A6A6A6;
     --color-opacity: 166, 166, 166;
}

[primarycolor="bordered"] {
     --primary-color: #BEBEBE;
     --border-color: #000;
     --font-color: #000;
     --hover-color: #000;
     --color-opacity: 190, 190, 190;
}

[primarycolor="purple"] {
     --primary-color: #6800B7;
     --border-color: #6800B7;
     --hover-color: #6800B7;
     --color-opacity: 104, 0, 183;
}

[primarycolor="lightBlue"] {
     --primary-color: #017E9E;
     --border-color: #017E9E;
     --hover-color: #017E9E;
     --color-opacity: 1, 126, 158;
}

[primarycolor="blue"] {
     --primary-color: #1200AD;
     --border-color: #1200AD;
     --hover-color: #1200AD;
     --color-opacity: 18, 0, 173;
}

[primarycolor="green"] {
     --primary-color: #00A269;
     --border-color: #00A269;
     --hover-color: #00A269;
     --color-opacity: 0, 162, 105;
}

[primarycolor="yellow"] {
     --primary-color: #F29F05;
     --border-color: #F29F05;
     --hover-color: #F29F05;
     --color-opacity: 242, 159, 5;
}

[primarycolor="burgundy"] {
     --primary-color: #8C1B2F;
     --border-color: #8C1B2F;
     --hover-color: #8C1B2F;
     --color-opacity: 140, 27, 47;
}

[primarycolor="orange"] {
     --primary-color: #FC5503;
     --border-color: #FC5503;
     --hover-color: #FC5503;
     --color-opacity: 252, 85, 3;
}

[primarycolor="pink"] {
     --primary-color: #E6006B;
     --border-color: #E6006B;
     --hover-color: #E6006B;
     --color-opacity: 230, 0, 107;
}

[primarycolor="darkBeige"] {
     --primary-color: #925328;
     --border-color: #925328;
     --hover-color: #925328;
     --color-opacity: 146, 83, 40;
}

[primarycolor="red"] {
     --primary-color: #C20E1A;
     --border-color: #C20E1A;
     --hover-color: #C20E1A;
     --color-opacity: 194, 14, 26;
}

[primarycolor="magenta"] {
     --primary-color: #C200C5;
     --border-color: #C200C5;
     --hover-color: #C200C5;
     --color-opacity: 194, 0, 197;
}

[primarycolor="brown"] {
     --primary-color: #340000;
     --border-color: #340000;
     --hover-color: #340000;
     --color-opacity: 52, 0, 0;
}

[primarycolor="gradient-black"] {
     --primary-color: linear-gradient(#545454, #000000);
     --border-color: #000000;
     --hover-color: #000000;
     --color-opacity: 0, 0, 0;
}

[primarycolor="gradient-gray"] {
     --primary-color: linear-gradient(#A6A6A6, #535353);
     --border-color: #A6A6A6;
     --hover-color: #A6A6A6;
     --color-opacity: 166, 166, 166;
}

[primarycolor="gradient-bordered"] {
     --primary-color: linear-gradient(#BEBEBE, #5F5F5F);
     --border-color: #5F5F5F;
     --hover-color: #5F5F5F;
     --color-opacity: 190, 190, 190;
}

[primarycolor="gradient-purple"] {
     --primary-color: linear-gradient(#6800B7, #34005C);
     --hover-color: #6800B7;
     --color-opacity: 104, 0, 183;
}

[primarycolor="gradient-lightBlue"] {
     --primary-color: linear-gradient(#017E9E, #013F4F);
     --border-color: #017E9E;
     --hover-color: #017E9E;
     --color-opacity: 1, 126, 158;
}

[primarycolor="gradient-blue"] {
     --primary-color: linear-gradient(#1200AD, #090057);
     --border-color: #1200AD;
     --hover-color: #1200AD;
     --color-opacity: 18, 0, 173;
}

[primarycolor="gradient-green"] {
     --primary-color: linear-gradient(#00A269, #005135);
     --border-color: #00A269;
     --hover-color: #00A269;
     --color-opacity: 0, 162, 105;
}

[primarycolor="gradient-yellow"] {
     --primary-color: linear-gradient(#F29F05, #E09305, #A86E04, #795003);
     --border-color: #F29F05;
     --hover-color: #F29F05;
     --color-opacity: 242, 159, 5;
}

[primarycolor="gradient-burgundy"] {
     --primary-color: linear-gradient(#8C1B2F, #460E18);
     --border-color: #8C1B2F;
     --hover-color: #8C1B2F;
     --color-opacity: 140, 27, 47;
}

[primarycolor="gradient-orange"] {
     --primary-color: linear-gradient(#FC5503, #7E2B02);
     --border-color: #FC5503;
     --hover-color: #FC5503;
     --color-opacity: 252, 85, 3;
}

[primarycolor="gradient-pink"] {
     --primary-color: linear-gradient(#E6006B, #730036);
     --border-color: #E6006B;
     --hover-color: #E6006B;
     --color-opacity: 230, 0, 107;
}

[primarycolor="gradient-darkBeige"] {
     --primary-color: linear-gradient(#925328, #492A14);
     --border-color: #925328;
     --hover-color: #925328;
     --color-opacity: 146, 83, 40;
}

[primarycolor="gradient-red"] {
     --primary-color: linear-gradient(#C20E1A, #61070D);
     --border-color: #C20E1A;
     --hover-color: #C20E1A;
     --color-opacity: 194, 14, 26;
}

[primarycolor="gradient-magenta"] {
     --primary-color: linear-gradient(#C200C5, #610063);
     --border-color: #C200C5;
     --hover-color: #C200C5;
     --color-opacity: 194, 0, 197;
}

[primarycolor="gradient-brown"] {
     --primary-color: linear-gradient(#340000, #1E1313);
     --border-color: #340000;
     --hover-color: #340000;
     --color-opacity: 52, 0, 0;
}